@teammodlr/ui-kit 2.3.3 → 2.3.5

package/lib/index.es.js

@@ -10696,7 +10696,7 @@ const S0 = /* @__PURE__ */ R({
     G(
       () => s.value,
       (h) => {
-        h && f();
+        h && (f(), l.value = t());
       }
     );
     function v() {
@@ -11119,13 +11119,13 @@ const zl = /* @__PURE__ */ K(Y0, [["render", J0]]), Q0 = {
     MConfirm: zl
   },
   setup(e, { slots: t }) {
-    const n = w([]), o = {}, r = Aa(null, "m-confirm");
+    const n = w([]), o = w({}), r = Aa(null, "m-confirm");
     function a(u) {
       const i = r, d = {
         ...u,
         key: i,
         destroy: () => {
-          o[i].hide();
+          o.value[i].hide();
         }
       };
       return n.value.push(d), d;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/confirm/ConfirmProvider.vue

@@ -1,82 +1,82 @@
-<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> = {};
-        const id = useId(null, 'm-confirm');
-        function create(options: ConfirmOptions): 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>
+<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, type 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: Ref<Record<string, PrivateConfirmRef>> = ref({});
+        const id = useId(null, 'm-confirm');
+        function create(options: ConfirmOptions): Confirm {
+            const key = id;
+            const dialog: PrivateConfirm = {
+                ...options,
+                key,
+                destroy: () => {
+                    dialogRefs.value[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/tooltip/Tooltip.vue

@@ -1,214 +1,216 @@
-<template>
-    <Primitive
-        as-child
-        v-bind="$attrs"
-        @mouseenter="show"
-        @mouseleave="hide"
-        ref="wrapper">
-        <TooltipTrigger ref="reference" >
-            <slot/>
-        </TooltipTrigger>
-
-        <Teleport :to="transferTo">
-            <Transition
-                :enter-active-class="fade.enterActive"
-                :leave-active-class="fade.leaveActive"
-                :enter-from-class="fade.enterFrom"
-                :leave-to-class="fade.leaveTo">
-                <div
-                    role="tooltip"
-                    :class="computedClasses"
-                    ref="popper"
-                    v-if="isOpen"
-                    :style="{ zIndex: zIndex }">
-                    <slot :html="text" name="content">
-                        <span v-html="text" />
-                    </slot>
-                </div>
-            </Transition>
-        </Teleport>
-    </Primitive>
-</template>
-
-<script lang="ts">
-import {
-    defineComponent,
-    ref,
-    toRef,
-    type PropType,
-    computed,
-    watch,
-    onUnmounted, type Ref
-} from 'vue';
-import {
-    type Placement,
-    placementWhileList,
-    usePopper
-} from '../../composables/usePopper';
-
-import { fade } from '../../styles/transitions.css';
-import * as style from './style';
-import { useZIndex } from '../../composables/useZIndex';
-import {Primitive} from "../primative/primitive";
-import TooltipTrigger from "@/components/tooltip/TooltipTrigger.vue";
-import {createContext} from "../../utils/injection";
-
-interface TooltipContext {
-    reference: Ref<HTMLElement | undefined>
-    onReferenceChange: (element: HTMLElement | undefined) => void
-}
-
-export const [injectionTooltipContext, providerTooltipContext] = createContext<TooltipContext>('Tooltip');
-
-export default defineComponent({
-    name: 'MTooltip',
-    components: {TooltipTrigger, Primitive},
-    props: {
-        text: {
-            type: String,
-            default: ''
-        },
-        placement: {
-            type: String as PropType<Placement>,
-            default: 'top',
-            validator: (value: Placement) => placementWhileList.includes(value)
-        },
-        transitionName: {
-            type: String,
-            default: 'scale'
-        },
-        reverse: {
-            type: Boolean,
-            default: false
-        },
-        transfer: {
-            type: Boolean,
-            default: false
-        },
-        zIndex: {
-            type: Number
-        },
-        delay: {
-            type: Number,
-            default: 500
-        }
-    },
-    setup(props) {
-        const { nextZIndex } = useZIndex();
-        const placement = toRef(props, 'placement');
-        // @ts-ignore
-        const transfer = toRef(props, 'transfer');
-        const wrapper = ref<HTMLElement | null>(null);
-        const reference = ref<HTMLElement>();
-        const isOpen = ref(false);
-        const zIndex = ref(props.zIndex ?? nextZIndex());
-        const timeout = ref<ReturnType<typeof setTimeout> | null>(null);
-        const offset = computed(() => {
-            switch (placement.value) {
-                case 'top':
-                    return [0, 8];
-                case 'bottom':
-                    return [0, -8];
-                case 'left':
-                    return [8, 0];
-                case 'right':
-                    return [-8, 0];
-                default:
-                    return [0, 0];
-            }
-        });
-
-        providerTooltipContext({
-            reference,
-            onReferenceChange: element => reference.value = element
-        });
-
-        const { popper, transferTo, updatePopper } = usePopper({
-            placement,
-            transfer,
-            reference,
-            wrapper,
-            // @ts-ignore
-            offset: offset.value
-        });
-
-        const computedClasses = computed(() => {
-            return [
-                style.tooltip,
-                {
-                    [style.reverse]: props.reverse
-                }
-            ];
-        });
-
-        watch(
-            () => isOpen.value,
-            (value: boolean) => {
-                if (value) {
-                    updatePopper();
-                }
-            }
-        );
-
-        const toggle = () => {
-            if (timeout.value) {
-                clearTimeout(timeout.value);
-            }
-
-            if (props.delay && !isOpen.value) {
-                timeout.value = setTimeout(() => {
-                    isOpen.value = !isOpen.value;
-                }, props.delay);
-            } else {
-                isOpen.value = !isOpen.value;
-            }
-        };
-
-        function show() {
-            if (timeout.value) {
-                clearTimeout(timeout.value);
-            }
-
-            if (props.delay) {
-                timeout.value = setTimeout(() => {
-                    isOpen.value = true;
-                }, props.delay);
-            } else {
-                isOpen.value = true;
-            }
-        }
-
-        function hide() {
-            if (timeout.value) {
-                clearTimeout(timeout.value);
-            }
-
-            isOpen.value = false;
-        }
-
-        onUnmounted(() => {
-            isOpen.value = false;
-            if (timeout.value) {
-                clearTimeout(timeout.value);
-            }
-            timeout.value = null;
-        });
-
-        return {
-            reference,
-            offset,
-            popper,
-            transferTo,
-            isOpen,
-            show,
-            hide,
-            computedClasses,
-            zIndex,
-            style,
-            fade
-        };
-    }
-});
-</script>
-
-<style scoped></style>
+<template>
+    <Primitive
+        as-child
+        v-bind="$attrs"
+        @mouseenter="show"
+        @mouseleave="hide"
+        ref="wrapper">
+        <TooltipTrigger ref="reference" >
+            <slot/>
+        </TooltipTrigger>
+
+        <Teleport :to="transferTo">
+            <Transition
+                :enter-active-class="fade.enterActive"
+                :leave-active-class="fade.leaveActive"
+                :enter-from-class="fade.enterFrom"
+                :leave-to-class="fade.leaveTo">
+                <div
+                    role="tooltip"
+                    :class="computedClasses"
+                    ref="popper"
+                    v-if="isOpen"
+                    :style="{ zIndex: zIndex }">
+                    <slot :html="text" name="content">
+                        <span v-html="text" />
+                    </slot>
+                </div>
+            </Transition>
+        </Teleport>
+    </Primitive>
+</template>
+
+<script lang="ts">
+import {
+    defineComponent,
+    ref,
+    toRef,
+    type PropType,
+    computed,
+    watch,
+    onUnmounted, type Ref
+} from 'vue';
+import {
+    type Placement,
+    placementWhileList,
+    usePopper
+} from '../../composables/usePopper';
+
+import { fade } from '../../styles/transitions.css';
+import * as style from './style';
+import { useZIndex } from '../../composables/useZIndex';
+import {Primitive} from "../primative/primitive";
+import TooltipTrigger from "@/components/tooltip/TooltipTrigger.vue";
+import {createContext} from "../../utils/injection";
+
+interface TooltipContext {
+    reference: Ref<HTMLElement | undefined>
+    onReferenceChange: (element: HTMLElement | undefined) => void
+}
+
+export const [injectionTooltipContext, providerTooltipContext] = createContext<TooltipContext>('Tooltip');
+
+export default defineComponent({
+    name: 'MTooltip',
+    components: {TooltipTrigger, Primitive},
+    props: {
+        text: {
+            type: String,
+            default: ''
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'top',
+            validator: (value: Placement) => placementWhileList.includes(value)
+        },
+        transitionName: {
+            type: String,
+            default: 'scale'
+        },
+        reverse: {
+            type: Boolean,
+            default: false
+        },
+        transfer: {
+            type: Boolean,
+            default: false
+        },
+        zIndex: {
+            type: Number
+        },
+        delay: {
+            type: Number,
+            default: 500
+        }
+    },
+    setup(props) {
+        const { nextZIndex } = useZIndex();
+        const placement = toRef(props, 'placement');
+        // @ts-ignore
+        const transfer = toRef(props, 'transfer');
+        const wrapper = ref<HTMLElement | null>(null);
+        const reference = ref<HTMLElement>();
+        const isOpen = ref(false);
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+        const timeout = ref<ReturnType<typeof setTimeout> | null>(null);
+        const offset = computed(() => {
+            switch (placement.value) {
+                case 'top':
+                    return [0, 8];
+                case 'bottom':
+                    return [0, -8];
+                case 'left':
+                    return [8, 0];
+                case 'right':
+                    return [-8, 0];
+                default:
+                    return [0, 0];
+            }
+        });
+
+        providerTooltipContext({
+            reference,
+            onReferenceChange: element => reference.value = element
+        });
+
+        const { popper, transferTo, updatePopper } = usePopper({
+            placement,
+            transfer,
+            reference,
+            wrapper,
+            // @ts-ignore
+            offset: offset.value
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                style.tooltip,
+                {
+                    [style.reverse]: props.reverse
+                }
+            ];
+        });
+
+        watch(
+            () => isOpen.value,
+            (value: boolean) => {
+                if (value) {
+                    updatePopper();
+
+                    zIndex.value = nextZIndex();
+                }
+            }
+        );
+
+        const toggle = () => {
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+
+            if (props.delay && !isOpen.value) {
+                timeout.value = setTimeout(() => {
+                    isOpen.value = !isOpen.value;
+                }, props.delay);
+            } else {
+                isOpen.value = !isOpen.value;
+            }
+        };
+
+        function show() {
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+
+            if (props.delay) {
+                timeout.value = setTimeout(() => {
+                    isOpen.value = true;
+                }, props.delay);
+            } else {
+                isOpen.value = true;
+            }
+        }
+
+        function hide() {
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+
+            isOpen.value = false;
+        }
+
+        onUnmounted(() => {
+            isOpen.value = false;
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+            timeout.value = null;
+        });
+
+        return {
+            reference,
+            offset,
+            popper,
+            transferTo,
+            isOpen,
+            show,
+            hide,
+            computedClasses,
+            zIndex,
+            style,
+            fade
+        };
+    }
+});
+</script>
+
+<style scoped></style>