Skip to content

Commit

Permalink
feat(button-modal): add loading backdrop feature and menu items mock …
Browse files Browse the repository at this point in the history 
…data

Signed-off-by: Wanjin Noh <[email protected]>
  • Loading branch information
@WANZARGEN
WANZARGEN committed Dec 12, 2024
1 parent 3c2952d commit b38979a
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 58 deletions.
11 changes: 11 additions & 0 deletions packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,17 @@ import * as PButtonModalStories from './PButtonModal.stories';
<br/>
<br/>

## Basic
<Canvas of={PButtonModalStories.Basic} />

<br/>
<br/>

## Loading Backdrop
<Canvas of={PButtonModalStories.LoadingBackdrop} />

<br/>
<br/>

## Playground
<Canvas of={PButtonModalStories.Playground} />
Expand Down
133 changes: 77 additions & 56 deletions packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { ComponentProps } from 'vue-component-type-helpers';

import PButton from '@/controls/buttons/button/PButton.vue';
import PSelectDropdown from '@/controls/dropdown/select-dropdown/PSelectDropdown.vue';
import { getMenuItems } from '@/feedbacks/modals/button-modal/mock';
import PButtonModal from '@/feedbacks/modals/button-modal/PButtonModal.vue';
import { getButtonModalArgs, getButtonModalArgTypes, getButtonModalParameters } from '@/feedbacks/modals/button-modal/story-helper';

Expand Down Expand Up @@ -54,6 +55,7 @@ const Template: Story = {
:hide-footer-confirm-button="hideFooterConfirmButton"
:footer-reset-button-visible="footerResetButtonVisible"
:loading="loading"
:loading-backdrop="loadingBackdrop"
:disabled="disabled"
:absolute="absolute"
:modal-body-id="modalBodyId"
Expand All @@ -75,62 +77,7 @@ const Template: Story = {
const state = reactive({
modalVisible: props.visible,
contents: computed(() => faker.lorem.lines(props.contentsHeight)),
menu: [
{
type: 'item', label: 'Add', name: 'add', disabled: false,
},
{
type: 'item', label: 'Hello', name: 'hello', disabled: false,
},
{ type: 'divider' },
{ type: 'header', label: 'this is header' },
{
type: 'item', label: 'Update', name: 'update', disabled: false,
},
{
type: 'item', label: 'Delete', name: 'delete', disabled: false,
},
{ type: 'divider' },
{
type: 'item', label: 'Collect', name: 'collect', disabled: false,
},
{ type: 'divider' },
{
type: 'item', label: 'Remove', name: 'remove', disabled: true,
},
],
items: [
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
],
items: getMenuItems(),
});
const launchModal = () => {
state.modalVisible = true;
Expand All @@ -148,6 +95,80 @@ const Template: Story = {
}),
};


export const Basic: Story = {
render: () => ({
components: { PButtonModal, PButton },
template: `
<div>
<p-button @click="modalVisible = true">Launch a modal</p-button>
<p-button-modal :visible.sync="modalVisible"
@confirm="handleConfirm"
>
<template #body>
<p>{{ contents }}</p>
</template>
</p-button-modal>
</div>
`,
setup() {
const state = reactive({
modalVisible: false,
contents: computed(() => faker.lorem.lines(5)),
});
const handleConfirm = () => {
state.modalVisible = false;
};
return {
...toRefs(state),
handleConfirm,
};
},
}),
};

export const LoadingBackdrop: Story = {
render: () => ({
components: { PButtonModal, PButton },
template: `
<div>
<p-button @click="launchModal">Launch a modal</p-button>
<p-button-modal :visible.sync="modalVisible"
:loading-backdrop="loadingBackdrop"
@confirm="handleConfirm"
>
<template #body>
<p>{{ contents }}</p>
</template>
</p-button-modal>
</div>
`,
setup() {
const state = reactive({
modalVisible: false,
contents: computed(() => faker.lorem.lines(5)),
loadingBackdrop: true,
});

const launchModal = () => {
state.loadingBackdrop = true;
state.modalVisible = true;
setTimeout(() => {
state.loadingBackdrop = false;
}, 3000);
};
const handleConfirm = () => {
state.modalVisible = false;
};
return {
...toRefs(state),
launchModal,
handleConfirm,
};
},
}),
};

export const Playground: Story = {
...Template,
};
18 changes: 16 additions & 2 deletions packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,18 @@
@after-leave="onModalLeave"
>
<div class="modal-mask"
:class="[{'no-backdrop':!backdrop}, {'absolute': !!absolute}]"
:class="[{'no-backdrop':!backdrop}, {
'absolute': !!absolute,
'loading-backdrop': loadingBackdrop
}]"
:style="absolute ? [{'top': `${absolute}rem`}, {'left': `${absolute}rem`}] : {}"
>
<div class="modal-wrapper"
<p-spinner v-if="loadingBackdrop"
size="xl"
style-type="white"
/>
<div v-if="!loadingBackdrop"
class="modal-wrapper"
:class="dialogClassObject"
role="dialog"
aria-modal="true"
Expand Down Expand Up @@ -115,6 +123,7 @@ import type { TranslateResult } from 'vue-i18n';
import PButton from '@/controls/buttons/button/PButton.vue';
import { BUTTON_STYLE } from '@/controls/buttons/button/type';
import PIconButton from '@/controls/buttons/icon-button/PIconButton.vue';
import PSpinner from '@/feedbacks/loading/spinner/PSpinner.vue';
import type { ButtonModalProps } from '@/feedbacks/modals/button-modal/type';
import { THEME_COLORS } from '@/feedbacks/modals/button-modal/type';
import { SizeMapping } from '@/feedbacks/modals/type';
Expand All @@ -127,6 +136,7 @@ import { useProxyValue } from '@/hooks';
export default defineComponent<ButtonModalProps>({
name: 'PButtonModal',
components: {
PSpinner,
PI,
PIconButton,
PButton,
Expand Down Expand Up @@ -204,6 +214,10 @@ export default defineComponent<ButtonModalProps>({
type: String,
default: undefined,
},
loadingBackdrop: {
type: Boolean,
default: false,
},
},
setup(props, { emit }) {
const state = reactive({
Expand Down
34 changes: 34 additions & 0 deletions packages/mirinae/src/feedbacks/modals/button-modal/mock.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import type { MenuItem } from '@/controls/context-menu/type';

export const getMenuItems = (): MenuItem[] => [
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
{ type: 'item', label: 'one', name: 'one' },
{ type: 'item', label: 'two', name: 'two' },
{ type: 'item', label: 'three', name: 'three' },
{ type: 'item', label: 'four', name: 'four' },
{ type: 'item', label: 'five', name: 'five' },
{ type: 'item', label: 'six', name: 'six' },
];
15 changes: 15 additions & 0 deletions packages/mirinae/src/feedbacks/modals/button-modal/story-helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,21 @@ export const getButtonModalArgTypes = (): ArgTypes => ({
},
control: 'boolean',
},
loadingBackdrop: {
name: 'loadingBackdrop',
type: { name: 'boolean' },
description: 'Show Loading in backdrop',
table: {
type: {
summary: 'boolean',
},
category: 'props',
defaultValue: {
summary: false,
},
},
control: 'boolean',
},
disabled: {
name: 'disabled',
type: { name: 'boolean' },
Expand Down
1 change: 1 addition & 0 deletions packages/mirinae/src/feedbacks/modals/button-modal/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,6 @@ export interface ButtonModalProps {
footerResetButtonVisible: boolean;

loading: boolean;
loadingBackdrop: boolean;
disabled: boolean;
}

0 comments on commit b38979a

Please sign in to comment.