@teammodlr/ui-kit 2.1.41 → 2.1.44

package/src/components/configprovider/ConfigProvider.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+export interface ConfigProviderProps {
+    useId?: () => string
+}
+export default {
+    name: 'ConfigProvider',
+}
+</script>
+
+<script setup lang="ts">
+import {provide} from "vue";
+import type {ConfigProviderInjection} from "./types";
+
+const props = withDefaults(defineProps<ConfigProviderProps>(), {
+    useId: undefined
+})
+
+const api: ConfigProviderInjection = {
+    useId: props['useId'],
+} as const;
+
+provide('m-config', api);
+</script>
+<template>
+    <slot />
+</template>

package/src/components/configprovider/types.ts

@@ -0,0 +1,3 @@
+export interface ConfigProviderInjection {
+    useId?: () => string;
+}

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/ConfirmProvider.vue

@@ -1,83 +1,83 @@
-<template>
-    <slot />
-    <template v-if="dialogList.length > 0">
-        <Teleport :to="teleportTo ?? 'body'">
-            <MConfirm
-                v-for="dialog in dialogList"
-                :key="dialog.key"
-                :internalKey="dialog.key"
-                :title="dialog.title"
-                :content="dialog.content"
-                :okText="dialog.okText"
-                :cancelText="dialog.cancelText"
-                :on-ok="dialog.onOk"
-                :on-cancel="dialog.onCancel"
-                :ok-variant="dialog.okVariant"
-                ref="dialogRefs" />
-        </Teleport>
-    </template>
-</template>
-
-<script lang="ts">
-import { defineComponent, provide, ref } from 'vue';
-import { useCachedUid } from '../../composables/useCachedUid';
-import { providerProps } from './providerProps';
-import type { Confirm, ConfirmApiInjection, ConfirmOptions } from './types';
-import MConfirm from './Confirm.vue';
-
-interface PrivateConfirm extends Confirm {
-    key: string;
-}
-
-interface PrivateConfirmRef extends Confirm {
-    key: string;
-    hide: () => void;
-}
-
-export default defineComponent({
-    name: 'ConfirmProvider',
-    props: providerProps,
-    components: {
-        MConfirm
-    },
-    setup(props, { slots }) {
-        const dialogListRef = ref<PrivateConfirm[]>([]);
-        const dialogRefs: Record<string, PrivateConfirmRef> = {};
-
-        function create(options: ConfirmOptions): Confirm {
-            const { id } = useCachedUid('m-confirm');
-            const key = id.value;
-            const dialog: PrivateConfirm = {
-                ...options,
-                key,
-                destroy: () => {
-                    dialogRefs[key].hide();
-                }
-            };
-
-            dialogListRef.value.push(dialog);
-            return dialog;
-        }
-
-        function destroyAll(): void {
-            // @ts-ignore
-            Object.values(dialogRefs.value).forEach(dialog => {
-                dialog.hide();
-            });
-        }
-
-        const api: ConfirmApiInjection = {
-            create,
-            destroyAll
-        } as const;
-
-        provide('m-confirm', api);
-
-        return {
-            ...api,
-            dialogRefs,
-            dialogList: dialogListRef
-        };
-    }
-});
-</script>
+<template>
+    <slot />
+    <template v-if="dialogList.length > 0">
+        <Teleport :to="teleportTo ?? 'body'">
+            <MConfirm
+                v-for="dialog in dialogList"
+                :key="dialog.key"
+                :internalKey="dialog.key"
+                :title="dialog.title"
+                :content="dialog.content"
+                :okText="dialog.okText"
+                :cancelText="dialog.cancelText"
+                :on-ok="dialog.onOk"
+                :on-cancel="dialog.onCancel"
+                :ok-variant="dialog.okVariant"
+                ref="dialogRefs" />
+        </Teleport>
+    </template>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, ref } from 'vue';
+import { useId } from '../../composables/useCachedUid';
+import { providerProps } from './providerProps';
+import type { Confirm, ConfirmApiInjection, ConfirmOptions } from './types';
+import MConfirm from './Confirm.vue';
+
+interface PrivateConfirm extends Confirm {
+    key: string;
+}
+
+interface PrivateConfirmRef extends Confirm {
+    key: string;
+    hide: () => void;
+}
+
+export default defineComponent({
+    name: 'ConfirmProvider',
+    props: providerProps,
+    components: {
+        MConfirm
+    },
+    setup(props, { slots }) {
+        const dialogListRef = ref<PrivateConfirm[]>([]);
+        const dialogRefs: Record<string, PrivateConfirmRef> = {};
+
+        function create(options: ConfirmOptions): Confirm {
+            const id = useId(null, 'm-confirm');
+            const key = id;
+            const dialog: PrivateConfirm = {
+                ...options,
+                key,
+                destroy: () => {
+                    dialogRefs[key].hide();
+                }
+            };
+
+            dialogListRef.value.push(dialog);
+            return dialog;
+        }
+
+        function destroyAll(): void {
+            // @ts-ignore
+            Object.values(dialogRefs.value).forEach(dialog => {
+                dialog.hide();
+            });
+        }
+
+        const api: ConfirmApiInjection = {
+            create,
+            destroyAll
+        } as const;
+
+        provide('m-confirm', api);
+
+        return {
+            ...api,
+            dialogRefs,
+            dialogList: dialogListRef
+        };
+    }
+});
+</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.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;
+}