@teammodlr/ui-kit 2.3.12 → 2.3.15

package/src/components/confirm/Confirm.vue

@@ -1,65 +1,65 @@
-<template>
-    <div>
-        <MModal
-            ref="modal"
-            :title="title"
-            :canClickOutside="false"
-            :onClose="onClose">
-            <template #body>
-                {{ content }}
-            </template>
-
-            <template #footer>
-                <div style="display: flex; flex-grow: 1; justify-content: end">
-                    <MButton :variant="okVariant" @click="handleOk">
-                        {{ okText ?? 'Okay' }}
-                    </MButton>
-                    <MButton style="margin-left: 8px" @click="handleCancel">
-                        {{ cancelText ?? 'Cancel' }}
-                    </MButton>
-                </div>
-            </template>
-        </MModal>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
-import { useZIndex } from '../../composables/useZIndex';
-import { confirmProps } from './props';
-import MModal from '../modal/Modal.vue';
-import MButton from '../button/Button.vue';
-
-export default defineComponent({
-    name: 'Confirm',
-    props: confirmProps,
-    setup(props, { slots }) {
-        const modal = ref();
-
-        const { nextZIndex } = useZIndex();
-
-        async function handleCancel(event: MouseEvent) {
-            modal.value?.close();
-            if (props.onCancel) {
-                await props.onCancel(event);
-            }
-        }
-
-        async function handleOk(event: MouseEvent) {
-            modal.value?.close();
-            if (props.onOk) {
-                props.onOk(event);
-            }
-        }
-        onMounted(() => {
-            modal.value?.open(null);
-        });
-        return {
-            modal,
-            handleOk,
-            handleCancel
-        };
-    },
-    components: { MModal, MButton }
-});
-</script>
+<template>
+    <div>
+        <MModal
+            ref="modal"
+            :title="title"
+            :canClickOutside="false"
+            :onClose="onClose">
+            <template #body>
+                {{ content }}
+            </template>
+
+            <template #footer>
+                <div style="display: flex; flex-grow: 1; justify-content: end">
+                    <MButton :variant="okVariant" @click="handleOk">
+                        {{ okText ?? 'Okay' }}
+                    </MButton>
+                    <MButton style="margin-left: 8px" @click="handleCancel">
+                        {{ cancelText ?? 'Cancel' }}
+                    </MButton>
+                </div>
+            </template>
+        </MModal>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import { useZIndex } from '../../composables/useZIndex';
+import { confirmProps } from './props';
+import MModal from '../modal/Modal.vue';
+import MButton from '../button/Button.vue';
+
+export default defineComponent({
+    name: 'Confirm',
+    props: confirmProps,
+    setup(props, { slots }) {
+        const modal = ref();
+
+        const { nextZIndex } = useZIndex();
+
+        async function handleCancel(event: MouseEvent) {
+            modal.value?.close();
+            if (props.onCancel) {
+                await props.onCancel(event);
+            }
+        }
+
+        async function handleOk(event: MouseEvent) {
+            modal.value?.close();
+            if (props.onOk) {
+                props.onOk(event);
+            }
+        }
+        onMounted(() => {
+            modal.value?.open(null);
+        });
+        return {
+            modal,
+            handleOk,
+            handleCancel
+        };
+    },
+    components: { MModal, MButton }
+});
+</script>

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>