@teammodlr/ui-kit 2.0.24 → 2.0.27

package/src/composables/usePopper.ts

@@ -1,194 +1,194 @@
-import { ref, watch, nextTick, onMounted, onBeforeUnmount, watchEffect } from "vue";
-import { createPopper as createInternalPopper } from '@popperjs/core';
-
-import type { Ref, WatchStopHandle } from "vue";
-import type { Placement, Modifier, Instance, Rect, VirtualElement } from '@popperjs/core';
-
-type OffsetsFunction = (options: {
-    popper: Rect,
-    reference: Rect,
-    placement: Placement
-}) => [number?, number?];
-
-interface UsePopperOptions {
-    placement: Ref<Placement>,
-    transfer: Ref<boolean | string>,
-    wrapper: Ref<HTMLElement | null | undefined>,
-    isDrop?: boolean,
-    reference?: Ref<HTMLElement | VirtualElement | null | undefined>,
-    popper?: Ref<HTMLElement | null | undefined>,
-    offset?: OffsetsFunction | [number?, number?]
-}
-
-export type { Placement, VirtualElement };
-
-export const placementWhileList = Object.freeze([
-    'auto',
-    'auto-start',
-    'auto-end',
-    'top',
-    'top-start',
-    'top-end',
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-    'left',
-    'left-start',
-    'left-end',
-    'right',
-    'right-start',
-    'right-end'
-] as Placement[])
-
-export interface TransferNode extends Node {
-    __transferNode?: Node;
-    __transferElement?: Node;
-}
-
-export function usePopper(initialOptions: UsePopperOptions) {
-    const { placement, transfer, wrapper, isDrop = false } = initialOptions;
-
-    const reference: Ref<HTMLElement | null | undefined> = (initialOptions.reference as any) ?? ref(null);
-    const popper: Ref<HTMLElement | null | undefined> = initialOptions.popper ?? ref(null);
-    const transferTo: Ref<String> = ref('body');
-
-    const options: {
-        placement: Placement,
-        modifiers: Partial<Modifier<any, any>>[]
-    } = {
-        placement: placement.value,
-        modifiers: [
-            {
-                name: 'computeStyles',
-                options: {
-                    gpuAcceleration: false
-                }
-            },
-            {
-                name: 'preventOverflow',
-                options: {
-                    rootBoundary: 'window'
-                }
-            }
-        ]
-    };
-
-    if (isDrop) {
-        options.modifiers.push({
-            name: 'setTransformOrigin',
-            enabled: true,
-            phase: 'afterWrite',
-            fn({ state }) {
-                const origin = setPopperDropOrigin(state.placement);
-                
-                if (origin) {
-                    state.elements.popper.style.transformOrigin = origin;
-                }
-            }
-        })
-    }
-
-    if (initialOptions.offset) {
-        options.modifiers.push({
-            name: 'offset',
-            options: {
-                offset: initialOptions.offset
-            }
-        })
-    }
-
-    let popperInstance: Instance | null = null;
-
-    watch(placement, value => {
-        options.placement = value;
-        popperInstance && popperInstance?.setOptions({ placement: value });
-    });
-
-    let parentWidth = ref(0);
-
-    watchEffect(() => {
-        if (wrapper.value && popper.value) {
-            (wrapper.value as TransferNode).__transferElement = popper.value;
-        }
-    });
-
-    let stopWatchPopper: WatchStopHandle | null = null;
-
-    if (transfer) {
-        watch(transfer, value => {
-            setTransformTo(value);
-            updatePopper();
-        })
-    }
-
-    onMounted(() => {
-        nextTick(createPopper);
-    });
-
-    onBeforeUnmount(destroyPopper);
-
-    function updatePopper() {
-        nextTick(() => {
-            popperInstance && popperInstance.forceUpdate()
-            if(wrapper.value) {
-                parentWidth.value = wrapper.value.clientWidth;
-            }
-        })
-    }
-
-    function createPopper() {
-        destroyPopper();
-        popperInstance && popperInstance.destroy();
-        createPopperInstance();
-
-        const cancelWatchReference = watch(reference, createPopperInstance);
-        const cancelWatchPopper = watch(popper, createPopperInstance);
-
-        stopWatchPopper = () => {
-            cancelWatchReference()
-            cancelWatchPopper()
-        }
-    }
-
-    function setTransformTo(value: boolean | string) {
-        transferTo.value = typeof value === 'boolean' ? (value ? 'body' : '') : value;
-    }
-
-    function createPopperInstance() {
-        if (reference.value && popper.value) {
-            popperInstance && popperInstance.destroy()
-            popperInstance = createInternalPopper(reference.value, popper.value as HTMLElement, options);
-            updatePopper();
-        }
-    }
-
-    function destroyPopper() {
-        popperInstance && popperInstance.destroy();
-        popperInstance = null;
-
-        if (typeof stopWatchPopper === 'function') {
-            stopWatchPopper();
-            stopWatchPopper = null;
-        }
-    }
-
-    return {
-        reference,
-        popper,
-        transferTo,
-        updatePopper,
-        createPopper,
-        destroyPopper,
-        width: parentWidth
-    };
-}
-
-function setPopperDropOrigin(placement: Placement) {
-    if (placement !== 'left' && placement !== 'right') {
-        const [placementStart, placementEnd] = placement.split('-')
-
-        return placementStart === 'bottom' || (placementStart !== 'top' && placementEnd === 'start')
-            ? 'center top'
-            : 'center bottom'
-    }
-}
+import { ref, watch, nextTick, onMounted, onBeforeUnmount, watchEffect } from "vue";
+import { createPopper as createInternalPopper } from '@popperjs/core';
+
+import type { Ref, WatchStopHandle } from "vue";
+import type { Placement, Modifier, Instance, Rect, VirtualElement } from '@popperjs/core';
+
+type OffsetsFunction = (options: {
+    popper: Rect,
+    reference: Rect,
+    placement: Placement
+}) => [number?, number?];
+
+interface UsePopperOptions {
+    placement: Ref<Placement>,
+    transfer: Ref<boolean | string>,
+    wrapper: Ref<HTMLElement | null | undefined>,
+    isDrop?: boolean,
+    reference?: Ref<HTMLElement | VirtualElement | null | undefined>,
+    popper?: Ref<HTMLElement | null | undefined>,
+    offset?: OffsetsFunction | [number?, number?]
+}
+
+export type { Placement, VirtualElement };
+
+export const placementWhileList = Object.freeze([
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+    'right',
+    'right-start',
+    'right-end'
+] as Placement[])
+
+export interface TransferNode extends Node {
+    __transferNode?: Node;
+    __transferElement?: Node;
+}
+
+export function usePopper(initialOptions: UsePopperOptions) {
+    const { placement, transfer, wrapper, isDrop = false } = initialOptions;
+
+    const reference: Ref<HTMLElement | null | undefined> = (initialOptions.reference as any) ?? ref(null);
+    const popper: Ref<HTMLElement | null | undefined> = initialOptions.popper ?? ref(null);
+    const transferTo: Ref<String> = ref('body');
+
+    const options: {
+        placement: Placement,
+        modifiers: Partial<Modifier<any, any>>[]
+    } = {
+        placement: placement.value,
+        modifiers: [
+            {
+                name: 'computeStyles',
+                options: {
+                    gpuAcceleration: false
+                }
+            },
+            {
+                name: 'preventOverflow',
+                options: {
+                    rootBoundary: 'window'
+                }
+            }
+        ]
+    };
+
+    if (isDrop) {
+        options.modifiers.push({
+            name: 'setTransformOrigin',
+            enabled: true,
+            phase: 'afterWrite',
+            fn({ state }) {
+                const origin = setPopperDropOrigin(state.placement);
+                
+                if (origin) {
+                    state.elements.popper.style.transformOrigin = origin;
+                }
+            }
+        })
+    }
+
+    if (initialOptions.offset) {
+        options.modifiers.push({
+            name: 'offset',
+            options: {
+                offset: initialOptions.offset
+            }
+        })
+    }
+
+    let popperInstance: Instance | null = null;
+
+    watch(placement, value => {
+        options.placement = value;
+        popperInstance && popperInstance?.setOptions({ placement: value });
+    });
+
+    let parentWidth = ref(0);
+
+    watchEffect(() => {
+        if (wrapper.value && popper.value) {
+            (wrapper.value as TransferNode).__transferElement = popper.value;
+        }
+    });
+
+    let stopWatchPopper: WatchStopHandle | null = null;
+
+    if (transfer) {
+        watch(transfer, value => {
+            setTransformTo(value);
+            updatePopper();
+        })
+    }
+
+    onMounted(() => {
+        nextTick(createPopper);
+    });
+
+    onBeforeUnmount(destroyPopper);
+
+    function updatePopper() {
+        nextTick(() => {
+            popperInstance && popperInstance.forceUpdate()
+            if(wrapper.value) {
+                parentWidth.value = wrapper.value.clientWidth;
+            }
+        })
+    }
+
+    function createPopper() {
+        destroyPopper();
+        popperInstance && popperInstance.destroy();
+        createPopperInstance();
+
+        const cancelWatchReference = watch(reference, createPopperInstance);
+        const cancelWatchPopper = watch(popper, createPopperInstance);
+
+        stopWatchPopper = () => {
+            cancelWatchReference()
+            cancelWatchPopper()
+        }
+    }
+
+    function setTransformTo(value: boolean | string) {
+        transferTo.value = typeof value === 'boolean' ? (value ? 'body' : '') : value;
+    }
+
+    function createPopperInstance() {
+        if (reference.value && popper.value) {
+            popperInstance && popperInstance.destroy()
+            popperInstance = createInternalPopper(reference.value, popper.value as HTMLElement, options);
+            updatePopper();
+        }
+    }
+
+    function destroyPopper() {
+        popperInstance && popperInstance.destroy();
+        popperInstance = null;
+
+        if (typeof stopWatchPopper === 'function') {
+            stopWatchPopper();
+            stopWatchPopper = null;
+        }
+    }
+
+    return {
+        reference,
+        popper,
+        transferTo,
+        updatePopper,
+        createPopper,
+        destroyPopper,
+        width: parentWidth
+    };
+}
+
+function setPopperDropOrigin(placement: Placement) {
+    if (placement !== 'left' && placement !== 'right') {
+        const [placementStart, placementEnd] = placement.split('-')
+
+        return placementStart === 'bottom' || (placementStart !== 'top' && placementEnd === 'start')
+            ? 'center top'
+            : 'center bottom'
+    }
+}

package/src/composables/useZIndex.ts

@@ -1,31 +1,31 @@
-import type {InjectionKey, Ref} from "vue";
-import {computed, inject, ref, unref} from "vue";
-import {isNumber} from "@vueuse/core";
-
-const zIndex = ref(0);
-export const initialZIndex = 1000;
-
-export const ZINDEX: InjectionKey<Ref<number | undefined>> = Symbol('ZINDEX');
-export const useZIndex = (override?: Ref<number>) => {
-    const injection = override || inject(ZINDEX, undefined);
-
-    const initial = computed(() => {
-        const fromInjection = unref(injection);
-        return isNumber(fromInjection) ? fromInjection : initialZIndex;
-    });
-
-    const current = computed(() => {
-        return initial.value + zIndex.value
-    });
-
-    const nextZIndex = () => {
-        zIndex.value++;
-        return current.value;
-    };
-
-    return {
-        initial,
-        current,
-        nextZIndex
-    }
+import type {InjectionKey, Ref} from "vue";
+import {computed, inject, ref, unref} from "vue";
+import {isNumber} from "@vueuse/core";
+
+const zIndex = ref(0);
+export const initialZIndex = 1000;
+
+export const ZINDEX: InjectionKey<Ref<number | undefined>> = Symbol('ZINDEX');
+export const useZIndex = (override?: Ref<number>) => {
+    const injection = override || inject(ZINDEX, undefined);
+
+    const initial = computed(() => {
+        const fromInjection = unref(injection);
+        return isNumber(fromInjection) ? fromInjection : initialZIndex;
+    });
+
+    const current = computed(() => {
+        return initial.value + zIndex.value
+    });
+
+    const nextZIndex = () => {
+        zIndex.value++;
+        return current.value;
+    };
+
+    return {
+        initial,
+        current,
+        nextZIndex
+    }
 }

package/src/create.ts

@@ -1,34 +1,34 @@
-import type { App } from 'vue';
-
-export type ModlrUIOptions = {
-    prefix?: string;
-    components?: any;
-}
-
-const defaultOptions: ModlrUIOptions = {
-    prefix: 'M'
-};
-
-const create = (createOptions: ModlrUIOptions = {}) => {
-    const install = (app: App, installOptions: ModlrUIOptions = {}) => {
-        const options = {
-            ...defaultOptions,
-            ...createOptions,
-            ...installOptions
-        };
-
-        if (options.components) {
-            options.components.forEach((component: any) => {
-                const name = component.name.startsWith('M') ? component.name.slice(1) : component.name
-
-                app.component(`${options.prefix}${name}`, component)
-            });
-        }
-    };
-
-    return {
-        install
-    }
-}
-
-export default create;
+import type { App } from 'vue';
+
+export type ModlrUIOptions = {
+    prefix?: string;
+    components?: any;
+}
+
+const defaultOptions: ModlrUIOptions = {
+    prefix: 'M'
+};
+
+const create = (createOptions: ModlrUIOptions = {}) => {
+    const install = (app: App, installOptions: ModlrUIOptions = {}) => {
+        const options = {
+            ...defaultOptions,
+            ...createOptions,
+            ...installOptions
+        };
+
+        if (options.components) {
+            options.components.forEach((component: any) => {
+                const name = component.name.startsWith('M') ? component.name.slice(1) : component.name
+
+                app.component(`${options.prefix}${name}`, component)
+            });
+        }
+    };
+
+    return {
+        install
+    }
+}
+
+export default create;

package/src/css/components.css

@@ -1,15 +1,16 @@
-
-/* @import '../components/badge/Badge.css'; */
-@import '../components/tag/Tag.css';
-@import '../components/input/Input.css';
-@import '../components/select/Select.css';
-@import '../components/checkbox/Checkbox.css';
-@import '../components/breadcrumb/Breadcrumb.css';
-
-@import '../components/avatargroup/AvatarGroup.css';
-@import '../components/messageprovider/MessageProvider.css';
-@import '../components/skeleton/Skeleton.css';
-@import '../components/link/Link.css';
-@import '../components/tooltip/Tooltip.css';
-@import '../components/tab/Tab.css';
-@import '../components/table/Table.css';
+
+/* @import '../components/badge/Badge.css'; */
+@import '../components/tag/Tag.css';
+@import '../components/input/Input.css';
+@import '../components/select/Select.css';
+@import '../components/checkbox/Checkbox.css';
+@import '../components/toggle/Toggle.css';
+@import '../components/breadcrumb/Breadcrumb.css';
+
+@import '../components/avatargroup/AvatarGroup.css';
+@import '../components/messageprovider/MessageProvider.css';
+@import '../components/skeleton/Skeleton.css';
+@import '../components/link/Link.css';
+@import '../components/tooltip/Tooltip.css';
+@import '../components/tab/Tab.css';
+@import '../components/table/Table.css';

package/src/css/index.css

@@ -1,4 +1,4 @@
-@import "normalize.css";
-@import "variables.css";
-@import "transitions.css";
-@import "components.css";
+@import "normalize.css";
+@import "variables.css";
+@import "transitions.css";
+@import "components.css";

package/src/css/transitions.css

@@ -1,40 +1,40 @@
-.m-transition__fade-enter-active,
-.m-transition__fade-leave-active {
-    transition: opacity 0.25s ease;
-}
-
-.m-transition__fade-enter-from,
-.m-transition__fade-leave-to {
-    opacity: 0;
-}
-
-.m-transition__scale-enter-active {
-    animation: scale-in 0.125s;
-}
-
-.m-transition__scale-leave-active {
-    animation: scale-in 0.125s reverse;
-}
-
-@keyframes scale-in {
-    0% {
-        transform: scale(0);
-        opacity: 0;
-    }
-
-    25% {
-        opacity: 0;
-    }
-
-    50% {
-        opacity: .5;
-    }
-
-    75% {
-        transform: scale(1);
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
+.m-transition__fade-enter-active,
+.m-transition__fade-leave-active {
+    transition: opacity 0.25s ease;
+}
+
+.m-transition__fade-enter-from,
+.m-transition__fade-leave-to {
+    opacity: 0;
+}
+
+.m-transition__scale-enter-active {
+    animation: scale-in 0.125s;
+}
+
+.m-transition__scale-leave-active {
+    animation: scale-in 0.125s reverse;
+}
+
+@keyframes scale-in {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+
+    25% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: .5;
+    }
+
+    75% {
+        transform: scale(1);
+    }
+
+    100% {
+        opacity: 1;
+    }
+}