@teammodlr/ui-kit 2.3.12 → 2.3.15

package/src/composables/usePopper.ts

@@ -1,215 +1,215 @@
-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 });
-    });
-
-    const 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,
-                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 });
+    });
+
+    const 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,
+                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,33 +1,33 @@
-import type { InjectionKey, Ref } from 'vue';
-import { computed, inject, ref, unref } from 'vue';
-
-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);
-        if (fromInjection === undefined || isNaN(fromInjection)) {
-            return initialZIndex;
-        }
-        return fromInjection;
-    });
-
-    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';
+
+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);
+        if (fromInjection === undefined || isNaN(fromInjection)) {
+            return initialZIndex;
+        }
+        return fromInjection;
+    });
+
+    const current = computed(() => {
+        return initial.value + zIndex.value;
+    });
+
+    const nextZIndex = () => {
+        zIndex.value++;
+        return current.value;
+    };
+
+    return {
+        initial,
+        current,
+        nextZIndex
+    };
+};

package/src/create.ts

@@ -1,38 +1,38 @@
-import type { App } from 'vue';
-
-export type ModlrUIOptions = {
-    prefix?: string;
-    components?: any;
-};
-
-const defaultOptions: ModlrUIOptions = {
-    prefix: 'M'
-};
-
-const create = (
-    createOptions: ModlrUIOptions = {}
-): { install: (app: App, installOptions?: ModlrUIOptions) => void } => {
-    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 = {}
+): { install: (app: App, installOptions?: ModlrUIOptions) => void } => {
+    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,16 +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/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';
+
+/* @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";