@teammodlr/ui-kit 2.3.12 → 2.3.14

package/src/components/confirm/examples/basic.vue

@@ -1,48 +1,48 @@
-<template>
-    <div>
-        <button @click="showBasicDialog">
-            Show Basic</button>
-
-        <button @click="showDangerDialog">
-            Show Danger
-        </button>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { useConfirm } from '../useConfirm';
-
-const confirm = useConfirm();
-
-async function showBasicDialog() {
-    const result = confirm.create({
-        title: 'Hello World',
-        content: 'This is a dialog',
-        okText: 'OK',
-        cancelText: 'Cancel',
-        onOk: () => {
-            console.log('OK');
-        },
-        onCancel: () => {
-            console.log('Cancel');
-        }
-    });
-}
-
-async function showDangerDialog() {
-    const result = confirm.create({
-        title: 'Hello World',
-        content: 'This is a confirm',
-        okText: 'Continue',
-        okVariant: 'error',
-        cancelText: 'Cancel',
-        onOk: () => {
-            showBasicDialog()
-        },
-        onCancel: () => {
-            console.log('Cancel');
-        }
-    });
-}
-</script>
+<template>
+    <div>
+        <button @click="showBasicDialog">
+            Show Basic</button>
+
+        <button @click="showDangerDialog">
+            Show Danger
+        </button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useConfirm } from '../useConfirm';
+
+const confirm = useConfirm();
+
+async function showBasicDialog() {
+    const result = confirm.create({
+        title: 'Hello World',
+        content: 'This is a dialog',
+        okText: 'OK',
+        cancelText: 'Cancel',
+        onOk: () => {
+            console.log('OK');
+        },
+        onCancel: () => {
+            console.log('Cancel');
+        }
+    });
+}
+
+async function showDangerDialog() {
+    const result = confirm.create({
+        title: 'Hello World',
+        content: 'This is a confirm',
+        okText: 'Continue',
+        okVariant: 'error',
+        cancelText: 'Cancel',
+        onOk: () => {
+            showBasicDialog()
+        },
+        onCancel: () => {
+            console.log('Cancel');
+        }
+    });
+}
+</script>

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/confirm/examples/index.ts

@@ -1 +1 @@
-export { default as MConfirmProviderBasic } from './basic.vue';
+export { default as MConfirmProviderBasic } from './basic.vue';

package/src/components/confirm/examples/wrapper.vue

@@ -1,9 +1,9 @@
-<template>
-    <m-message-provider placement="top-left">
-        <slot />
-    </m-message-provider>
-</template> 
-
-<script lang="ts" setup>
-import MMessageProvider from '../MessageProvider.vue';
-</script>
+<template>
+    <m-message-provider placement="top-left">
+        <slot />
+    </m-message-provider>
+</template> 
+
+<script lang="ts" setup>
+import MMessageProvider from '../MessageProvider.vue';
+</script>

package/src/components/confirm/props.ts

@@ -1,24 +1,24 @@
-import type { Variant } from '../../types/props';
-import type { ExtractPropTypes, PropType, VNodeChild } from 'vue';
-
-export const confirmProps = {
-    title: String,
-    closable: {
-        type: Boolean,
-        default: true
-    },
-    okText: String,
-    cancelText: String,
-    content: [String, Function] as PropType<string | (() => VNodeChild)>,
-    action: Function as PropType<() => VNodeChild>,
-    loading: Boolean,
-    onOk: Function as PropType<(e: MouseEvent) => void>,
-    onCancel: Function as PropType<(e: MouseEvent) => void>,
-    onClose: Function as PropType<() => void>,
-    okVariant: {
-        type: String as PropType<Variant>,
-        default: 'primary'
-    }
-} as const;
-
-export type ConfirmProps = ExtractPropTypes<typeof confirmProps>;
+import type { Variant } from '../../types/props';
+import type { ExtractPropTypes, PropType, VNodeChild } from 'vue';
+
+export const confirmProps = {
+    title: String,
+    closable: {
+        type: Boolean,
+        default: true
+    },
+    okText: String,
+    cancelText: String,
+    content: [String, Function] as PropType<string | (() => VNodeChild)>,
+    action: Function as PropType<() => VNodeChild>,
+    loading: Boolean,
+    onOk: Function as PropType<(e: MouseEvent) => void>,
+    onCancel: Function as PropType<(e: MouseEvent) => void>,
+    onClose: Function as PropType<() => void>,
+    okVariant: {
+        type: String as PropType<Variant>,
+        default: 'primary'
+    }
+} as const;
+
+export type ConfirmProps = ExtractPropTypes<typeof confirmProps>;

package/src/components/confirm/providerProps.ts

@@ -1,10 +1,10 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-export const providerProps = {
-    teleportTo: {
-        type: String,
-        default: 'body'
-    }
-};
-
-export type ProviderProps = ExtractPropTypes<typeof providerProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+export const providerProps = {
+    teleportTo: {
+        type: String,
+        default: 'body'
+    }
+};
+
+export type ProviderProps = ExtractPropTypes<typeof providerProps>;

package/src/components/confirm/types.ts

@@ -1,33 +1,33 @@
-import type { Variant } from '../../types/props';
-import type { VNodeChild } from 'vue';
-
-export type ConfirmContentType = string;
-
-export type ConfirmContentRender = (props: any) => VNodeChild;
-
-export interface ConfirmOptions {
-    title?: string;
-    render?: ConfirmContentRender;
-    content: ConfirmContentType;
-    onClose?: () => void;
-    onOpen?: () => void;
-    onOk?: () => void;
-    onCancel?: () => void;
-    okVariant?: Variant;
-    okText?: ConfirmContentType;
-    cancelText?: ConfirmContentType;
-}
-
-export interface ConfirmResponse {
-    result: boolean;
-    data: any;
-}
-
-export interface ConfirmApiInjection {
-    create: (options: ConfirmOptions) => Confirm;
-    destroyAll: () => void;
-}
-
-export interface Confirm extends ConfirmOptions {
-    destroy: () => void;
-}
+import type { Variant } from '../../types/props';
+import type { VNodeChild } from 'vue';
+
+export type ConfirmContentType = string;
+
+export type ConfirmContentRender = (props: any) => VNodeChild;
+
+export interface ConfirmOptions {
+    title?: string;
+    render?: ConfirmContentRender;
+    content: ConfirmContentType;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onOk?: () => void;
+    onCancel?: () => void;
+    okVariant?: Variant;
+    okText?: ConfirmContentType;
+    cancelText?: ConfirmContentType;
+}
+
+export interface ConfirmResponse {
+    result: boolean;
+    data: any;
+}
+
+export interface ConfirmApiInjection {
+    create: (options: ConfirmOptions) => Confirm;
+    destroyAll: () => void;
+}
+
+export interface Confirm extends ConfirmOptions {
+    destroy: () => void;
+}

package/src/components/confirm/useConfirm.ts

@@ -1,14 +1,14 @@
-import { inject } from 'vue';
-import type { ConfirmApiInjection } from './types';
-
-export function useConfirm(): ConfirmApiInjection {
-    const api = inject('m-confirm', null);
-
-    if (api === null) {
-        throw new Error(
-            'm-confirm api is not provided, ensure the component is wrapped in <m-confirm-provider />.'
-        );
-    }
-
-    return api;
-}
+import { inject } from 'vue';
+import type { ConfirmApiInjection } from './types';
+
+export function useConfirm(): ConfirmApiInjection {
+    const api = inject('m-confirm', null);
+
+    if (api === null) {
+        throw new Error(
+            'm-confirm api is not provided, ensure the component is wrapped in <m-confirm-provider />.'
+        );
+    }
+
+    return api;
+}

package/src/components/dialog/examples/basic.vue

@@ -1,23 +1,23 @@
-<template>
-    <div>
-        <MDialog :draggable="true" v-model:open="open" width="1000px" title="Hello World" @onClose="closed">
-            <input type="text" />
-            <input type="text" />
-            <template #footer>
-                Bootom
-            </template>
-        </MDialog>
-
-        <button @click="open = true">Open</button>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const open = ref(false);
-
-function closed() {
-    console.log('closed');
-}
-</script>
+<template>
+    <div>
+        <MDialog :draggable="true" v-model:open="open" width="1000px" title="Hello World" @onClose="closed">
+            <input type="text" />
+            <input type="text" />
+            <template #footer>
+                Bootom
+            </template>
+        </MDialog>
+
+        <button @click="open = true">Open</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const open = ref(false);
+
+function closed() {
+    console.log('closed');
+}
+</script>

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/dialog/examples/index.ts

@@ -1 +1 @@
-export { default as MDialogBasic } from './basic.vue';
+export { default as MDialogBasic } from './basic.vue';

package/src/components/dialog/style/index.ts

@@ -1 +1 @@
-export * from './Dialog.css';
+export * from './Dialog.css';

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

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

package/src/components/dropdown/DropdownList.vue

@@ -1,20 +1,20 @@
-<template>
-    <ul :class="style.menuItems">
-        <slot />
-    </ul>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "DropdownList",
-    setup() {
-
-        return {
-            style
-        }
-    }
-})
-</script>
+<template>
+    <ul :class="style.menuItems">
+        <slot />
+    </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "DropdownList",
+    setup() {
+
+        return {
+            style
+        }
+    }
+})
+</script>

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/dropdown/examples/index.ts

@@ -1,3 +1,3 @@
-export { default as MDropdownBasic } from './basic.vue';
-export { default as MDropdownCustom } from './custom.vue';
-export { default as MDropdownContext } from './context.vue';
+export { default as MDropdownBasic } from './basic.vue';
+export { default as MDropdownCustom } from './custom.vue';
+export { default as MDropdownContext } from './context.vue';

package/src/components/dropdown/hooks.ts

@@ -1,30 +1,30 @@
-import { ref, watch, onMounted, nextTick } from 'vue';
-
-import type { Ref } from 'vue';
-
-export function useLabel(
-    rawLabel: Ref<string | number | null>,
-    element: Ref<HTMLElement | null | undefined>
-) {
-    const label = ref(rawLabel.value);
-
-    function setLabel(value: string | number | null) {
-        if (element.value) {
-            label.value = value ?? element.value.textContent?.trim() ?? null;
-        } else {
-            label.value = value;
-        }
-    }
-
-    watch(rawLabel, value => {
-        setLabel(value);
-    });
-
-    onMounted(() => {
-        nextTick(() => {
-            setLabel(rawLabel.value);
-        });
-    });
-
-    return label;
-}
+import { ref, watch, onMounted, nextTick } from 'vue';
+
+import type { Ref } from 'vue';
+
+export function useLabel(
+    rawLabel: Ref<string | number | null>,
+    element: Ref<HTMLElement | null | undefined>
+) {
+    const label = ref(rawLabel.value);
+
+    function setLabel(value: string | number | null) {
+        if (element.value) {
+            label.value = value ?? element.value.textContent?.trim() ?? null;
+        } else {
+            label.value = value;
+        }
+    }
+
+    watch(rawLabel, value => {
+        setLabel(value);
+    });
+
+    onMounted(() => {
+        nextTick(() => {
+            setLabel(rawLabel.value);
+        });
+    });
+
+    return label;
+}

package/src/components/dropdown/style/index.ts

@@ -1 +1 @@
-export * from './Dropdown.css';
+export * from './Dropdown.css';