@teammodlr/ui-kit 2.1.47 → 2.1.51

package/src/components/button/examples/index.stories.ts

@@ -1,37 +1,37 @@
-import MButton from '../Button.vue';
-import {
-    MButtonBasic,
-    MButtonSize,
-    MButtonRounded,
-    MButtonVariant,
-    MButtonVariantSecondary,
-    MButtonDisabled,
-    MButtonIconLeft,
-    MButtonIcon,
-    MButtonLink
-} from './index';
-
-import {
-    variantArgType,
-    createStory,
-    sizeArgType
-} from '../../../__storybook__';
-
-export default {
-    component: MButton,
-    title: 'Components/Buttons/Button',
-    argTypes: {
-        ...variantArgType(),
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MButtonBasic);
-export const Size = createStory(MButtonSize);
-export const Rounded = createStory(MButtonRounded);
-export const Colors = createStory(MButtonVariant);
-export const ColorsSecondary = createStory(MButtonVariantSecondary);
-export const Disabled = createStory(MButtonDisabled);
-export const IconLeft = createStory(MButtonIconLeft);
-export const Icon = createStory(MButtonIcon);
-export const Link = createStory(MButtonLink);
+import MButton from '../Button.vue';
+import {
+    MButtonBasic,
+    MButtonSize,
+    MButtonRounded,
+    MButtonVariant,
+    MButtonVariantSecondary,
+    MButtonDisabled,
+    MButtonIconLeft,
+    MButtonIcon,
+    MButtonLink
+} from './index';
+
+import {
+    variantArgType,
+    createStory,
+    sizeArgType
+} from '../../../__storybook__';
+
+export default {
+    component: MButton,
+    title: 'Components/Buttons/Button',
+    argTypes: {
+        ...variantArgType(),
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MButtonBasic);
+export const Size = createStory(MButtonSize);
+export const Rounded = createStory(MButtonRounded);
+export const Colors = createStory(MButtonVariant);
+export const ColorsSecondary = createStory(MButtonVariantSecondary);
+export const Disabled = createStory(MButtonDisabled);
+export const IconLeft = createStory(MButtonIconLeft);
+export const Icon = createStory(MButtonIcon);
+export const Link = createStory(MButtonLink);

package/src/components/buttongroup/examples/index.stories.ts

@@ -1,17 +1,17 @@
-import MButtonGroup from '../ButtonGroup.vue';
-import MButton from '../../button/Button.vue';
-import { MButtonGroupBasic, MButtonGroupIconGroup } from './index';
-
-import { createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MButtonGroup,
-    subcomponents: { MButton },
-    title: 'Components/Buttons/Group',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MButtonGroupBasic);
-export const IconGroup = createStory(MButtonGroupIconGroup);
+import MButtonGroup from '../ButtonGroup.vue';
+import MButton from '../../button/Button.vue';
+import { MButtonGroupBasic, MButtonGroupIconGroup } from './index';
+
+import { createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MButtonGroup,
+    subcomponents: { MButton },
+    title: 'Components/Buttons/Group',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MButtonGroupBasic);
+export const IconGroup = createStory(MButtonGroupIconGroup);

package/src/components/checkbox/examples/index.stories.ts

@@ -1,16 +1,16 @@
-import MCheckbox from '../Checkbox.vue';
-import { MCheckboxBasic, MCheckboxSlot } from './index';
-
-import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
-
-export default {
-    component: MCheckbox,
-    title: 'Components/Checkbox',
-    argTypes: {
-        ...sizeArgType(),
-        ...colorArgType()
-    }
-};
-
-export const Basic = createStory(MCheckboxBasic);
-export const Slot = createStory(MCheckboxSlot);
+import MCheckbox from '../Checkbox.vue';
+import { MCheckboxBasic, MCheckboxSlot } from './index';
+
+import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
+
+export default {
+    component: MCheckbox,
+    title: 'Components/Checkbox',
+    argTypes: {
+        ...sizeArgType(),
+        ...colorArgType()
+    }
+};
+
+export const Basic = createStory(MCheckboxBasic);
+export const Slot = createStory(MCheckboxSlot);

package/src/components/colorpicker/examples/index.stories.ts

@@ -1,12 +1,12 @@
-import MColorPicker from '../ColorPicker.vue';
-import { MColorBasic } from './index';
-
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MColorPicker,
-    title: 'Components/Color Picker',
-    argTypes: {}
-};
-
-export const Basic = createStory(MColorBasic);
+import MColorPicker from '../ColorPicker.vue';
+import { MColorBasic } from './index';
+
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MColorPicker,
+    title: 'Components/Color Picker',
+    argTypes: {}
+};
+
+export const Basic = createStory(MColorBasic);

package/src/components/configprovider/ConfigProvider.vue

@@ -1,31 +1,38 @@
-<script lang="ts">
-import { createContext } from "../../utils/injection";
-
-interface ConfigProviderContextValue {
-    useId?: () => string
-}
-
-export const [injectConfigProviderContext, provideConfigProviderContext] = createContext<ConfigProviderContextValue>('ConfigProvider');
-
-export interface ConfigProviderProps {
-    useId?: () => string
-}
-
-export default {
-    name: 'ConfigProvider',
-}
-</script>
-
-<script setup lang="ts">
-
-const props = withDefaults(defineProps<ConfigProviderProps>(), {
-    useId: undefined
-})
-
-provideConfigProviderContext({
-    useId: props.useId
-})
-</script>
-<template>
-    <slot />
-</template>
+<script lang="ts">
+import { createContext } from "../../utils/injection";
+import { type Ref, toRefs } from 'vue';
+interface ConfigProviderContextValue {
+    useId?: () => string,
+    dir?: Ref<string>
+}
+
+export const [injectConfigProviderContext, provideConfigProviderContext]
+    = createContext<ConfigProviderContextValue>('ConfigProvider')
+
+export interface ConfigProviderProps {
+    useId?: () => string,
+    dir?: string
+}
+
+export default {
+    name: 'ConfigProvider',
+}
+</script>
+
+<script setup lang="ts">
+
+const props = withDefaults(defineProps<ConfigProviderProps>(), {
+    useId: undefined,
+    dir: 'ltr'
+})
+
+const { dir } = toRefs(props)
+
+provideConfigProviderContext({
+    useId: props.useId,
+    dir
+})
+</script>
+<template>
+    <slot />
+</template>

package/src/components/confirm/ConfirmProvider.vue

@@ -43,9 +43,8 @@ export default defineComponent({
     setup(props, { slots }) {
         const dialogListRef = ref<PrivateConfirm[]>([]);
         const dialogRefs: Record<string, PrivateConfirmRef> = {};
-
+        const id = useId(null, 'm-confirm');
         function create(options: ConfirmOptions): Confirm {
-            const id = useId(null, 'm-confirm');
             const key = id;
             const dialog: PrivateConfirm = {
                 ...options,

package/src/components/confirm/examples/index.stories.ts

@@ -1,26 +1,26 @@
-import MConfirmProvider from '../ConfirmProvider.vue';
-import { MConfirmProviderBasic } from './index';
-
-const Template = (args: any) => ({
-    components: {
-        MConfirmProvider,
-        MConfirmProviderBasic
-    },
-    setup() {
-        return {
-            args
-        };
-    },
-    template: `
-        <m-confirm-provider v-bind="args">
-            <MConfirmProviderBasic />
-        </m-confirm-provider>
-    `
-});
-
-export default {
-    component: MConfirmProvider,
-    title: 'Components/Confirm'
-};
-
-export const Primary = Template.bind({});
+import MConfirmProvider from '../ConfirmProvider.vue';
+import { MConfirmProviderBasic } from './index';
+
+const Template = (args: any) => ({
+    components: {
+        MConfirmProvider,
+        MConfirmProviderBasic
+    },
+    setup() {
+        return {
+            args
+        };
+    },
+    template: `
+        <m-confirm-provider v-bind="args">
+            <MConfirmProviderBasic />
+        </m-confirm-provider>
+    `
+});
+
+export default {
+    component: MConfirmProvider,
+    title: 'Components/Confirm'
+};
+
+export const Primary = Template.bind({});

package/src/components/dialog/examples/index.stories.ts

@@ -1,14 +1,14 @@
-import MDialog from '../Dialog.vue';
-import { MDialogBasic } from './index';
-
-import { createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MDialog,
-    title: 'Components/Dialog',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MDialogBasic);
+import MDialog from '../Dialog.vue';
+import { MDialogBasic } from './index';
+
+import { createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MDialog,
+    title: 'Components/Dialog',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MDialogBasic);

package/src/components/dropdown/examples/index.stories.ts

@@ -1,26 +1,26 @@
-import MDropdown from '../Dropdown.vue';
-import MDropdownList from '../DropdownList.vue';
-import MDropdownItem from '../DropdownItem.vue';
-import MDropdownHeading from '../DropdownHeading.vue';
-import MButton from '../../button/Button.vue';
-
-import { MDropdownBasic, MDropdownContext, MDropdownCustom } from './index';
-import { createStory, popperPositionArgType } from '../../../__storybook__';
-
-export default {
-    component: MDropdown,
-    subcomponents: {
-        MDropdownList,
-        MDropdownItem,
-        MDropdownHeading,
-        MButton
-    },
-    title: 'Components/Dropdown',
-    argTypes: {
-        ...popperPositionArgType()
-    }
-};
-
-export const Basic = createStory(MDropdownBasic);
-export const Custom = createStory(MDropdownCustom);
-export const Context = createStory(MDropdownContext);
+import MDropdown from '../Dropdown.vue';
+import MDropdownList from '../DropdownList.vue';
+import MDropdownItem from '../DropdownItem.vue';
+import MDropdownHeading from '../DropdownHeading.vue';
+import MButton from '../../button/Button.vue';
+
+import { MDropdownBasic, MDropdownContext, MDropdownCustom } from './index';
+import { createStory, popperPositionArgType } from '../../../__storybook__';
+
+export default {
+    component: MDropdown,
+    subcomponents: {
+        MDropdownList,
+        MDropdownItem,
+        MDropdownHeading,
+        MButton
+    },
+    title: 'Components/Dropdown',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+};
+
+export const Basic = createStory(MDropdownBasic);
+export const Custom = createStory(MDropdownCustom);
+export const Context = createStory(MDropdownContext);

package/src/components/form/examples/index.stories.ts

@@ -1,23 +1,23 @@
-import MForm from '../Form.vue';
-import MInput from '../../input/Input.vue';
-import MButton from '../../button/Button.vue';
-import MSelect from '../../select/Select.vue';
-import MCheckbox from '../../checkbox/Checkbox.vue';
-import MColorPicker from '../../colorpicker/ColorPicker.vue';
-
-import { MFormBasic } from './index';
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MForm,
-    subcomponents: {
-        MInput,
-        MButton,
-        MSelect,
-        MCheckbox,
-        MColorPicker
-    },
-    title: 'Components/Form'
-};
-
-export const Basic = createStory(MFormBasic);
+import MForm from '../Form.vue';
+import MInput from '../../input/Input.vue';
+import MButton from '../../button/Button.vue';
+import MSelect from '../../select/Select.vue';
+import MCheckbox from '../../checkbox/Checkbox.vue';
+import MColorPicker from '../../colorpicker/ColorPicker.vue';
+
+import { MFormBasic } from './index';
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MForm,
+    subcomponents: {
+        MInput,
+        MButton,
+        MSelect,
+        MCheckbox,
+        MColorPicker
+    },
+    title: 'Components/Form'
+};
+
+export const Basic = createStory(MFormBasic);

package/src/components/image/examples/index.stories.ts

@@ -1,10 +1,10 @@
-import { createStory } from '../../../__storybook__';
-import MImage from '../Image.vue';
-import { MImageBasic } from './index';
-
-export default {
-    component: MImage,
-    title: 'Components/Image'
-};
-
-export const Basic = createStory(MImageBasic);
+import { createStory } from '../../../__storybook__';
+import MImage from '../Image.vue';
+import { MImageBasic } from './index';
+
+export default {
+    component: MImage,
+    title: 'Components/Image'
+};
+
+export const Basic = createStory(MImageBasic);

package/src/components/input/examples/index.stories.ts

@@ -1,26 +1,26 @@
-import MInput from '../Input.vue';
-import {
-    MInputBasic,
-    MInputSuffix,
-    MInputPrefix,
-    MInputLeftIcon,
-    MInputRightIcon,
-    MInputSizes
-} from './index';
-
-import { createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MInput,
-    title: 'Components/Input',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MInputBasic);
-export const Suffix = createStory(MInputSuffix);
-export const Prefix = createStory(MInputPrefix);
-export const Sizes = createStory(MInputSizes);
-export const LeftIcon = createStory(MInputLeftIcon);
-export const RightIcon = createStory(MInputRightIcon);
+import MInput from '../Input.vue';
+import {
+    MInputBasic,
+    MInputSuffix,
+    MInputPrefix,
+    MInputLeftIcon,
+    MInputRightIcon,
+    MInputSizes
+} from './index';
+
+import { createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MInput,
+    title: 'Components/Input',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MInputBasic);
+export const Suffix = createStory(MInputSuffix);
+export const Prefix = createStory(MInputPrefix);
+export const Sizes = createStory(MInputSizes);
+export const LeftIcon = createStory(MInputLeftIcon);
+export const RightIcon = createStory(MInputRightIcon);

package/src/components/link/examples/index.stories.ts

@@ -1,15 +1,15 @@
-import MLink from '../Link.vue';
-
-import { MLinkBasic } from './index';
-
-import { createStory, colorArgType } from '../../../__storybook__';
-
-export default {
-    component: MLink,
-    title: 'Components/Link',
-    argTypes: {
-        ...colorArgType()
-    }
-};
-
-export const Basic = createStory(MLinkBasic);
+import MLink from '../Link.vue';
+
+import { MLinkBasic } from './index';
+
+import { createStory, colorArgType } from '../../../__storybook__';
+
+export default {
+    component: MLink,
+    title: 'Components/Link',
+    argTypes: {
+        ...colorArgType()
+    }
+};
+
+export const Basic = createStory(MLinkBasic);

package/src/components/messageprovider/examples/index.stories.ts

@@ -1,26 +1,26 @@
-import MMessageProvider from '../MessageProvider.vue';
-import { MMessageProviderBasic } from './index';
-
-const Template = (args: any) => ({
-    components: {
-        MMessageProvider,
-        MMessageProviderBasic
-    },
-    setup() {
-        return {
-            args
-        };
-    },
-    template: `
-        <m-message-provider v-bind="args">
-            <MMessageProviderBasic />
-        </m-message-provider>
-    `
-});
-
-export default {
-    component: MMessageProvider,
-    title: 'Components/MessageProvider'
-};
-
-export const Primary = Template.bind({});
+import MMessageProvider from '../MessageProvider.vue';
+import { MMessageProviderBasic } from './index';
+
+const Template = (args: any) => ({
+    components: {
+        MMessageProvider,
+        MMessageProviderBasic
+    },
+    setup() {
+        return {
+            args
+        };
+    },
+    template: `
+        <m-message-provider v-bind="args">
+            <MMessageProviderBasic />
+        </m-message-provider>
+    `
+});
+
+export default {
+    component: MMessageProvider,
+    title: 'Components/MessageProvider'
+};
+
+export const Primary = Template.bind({});

package/src/components/modal/examples/index.stories.ts

@@ -1,16 +1,16 @@
-import MModal from '../Modal.vue';
-import { MModalBasic, MModalForm, MModalSidebar } from './index';
-
-import { createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MModal,
-    title: 'Components/Modal',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MModalBasic);
-export const ModalForm = createStory(MModalForm);
-export const ModalSidebar = createStory(MModalSidebar);
+import MModal from '../Modal.vue';
+import { MModalBasic, MModalForm, MModalSidebar } from './index';
+
+import { createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MModal,
+    title: 'Components/Modal',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MModalBasic);
+export const ModalForm = createStory(MModalForm);
+export const ModalSidebar = createStory(MModalSidebar);

package/src/components/pagination/examples/index.stories.ts

@@ -1,11 +1,11 @@
-import MPagination from '../Pagination.vue';
-import { MPaginationBasic } from './index';
-
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MPagination,
-    title: 'Components/Pagination'
-};
-
-export const Basic = createStory(MPaginationBasic);
+import MPagination from '../Pagination.vue';
+import { MPaginationBasic } from './index';
+
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MPagination,
+    title: 'Components/Pagination'
+};
+
+export const Basic = createStory(MPaginationBasic);