@teammodlr/ui-kit 2.1.8 → 2.1.10

package/src/components/tree/style/Tree.css.ts

@@ -1,64 +1,69 @@
-import {createVar, globalKeyframes, globalStyle, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
-
+import {
+    createVar,
+    globalKeyframes,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 export const toggle = style({
-    cursor: "pointer",
-    display: "inline-flex",
+    cursor: 'pointer',
+    display: 'inline-flex',
     flexShrink: 0,
     height: `24px`,
     width: `24px`,
-    alignItems: "center",
-    justifyContent: "center",
-    verticalAlign: "bottom",
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'bottom',
     transition: `transform .15s ${themeVars.transition.default}`
-})
+});
 export const icon = style({
-    position: "relative",
+    position: 'relative',
     height: `14px`,
     width: `14px`,
-    display: "flex",
+    display: 'flex',
     fontSize: `14px`,
-    fill: "currentColor",
-    color: themeVars.color.gray["600"],
+    fill: 'currentColor',
+    color: themeVars.color.gray['600']
 });
 
 export const iconRotate = styleVariants({
     90: {
-        transform: `rotate(90deg)`,
+        transform: `rotate(90deg)`
     }
 });
 
 export const nodeWrapper = style({
-    boxSizing: "border-box",
-    padding: `${themeVars.space["0.5"]} 0`,
-})
+    boxSizing: 'border-box',
+    padding: `${themeVars.space['0.5']} 0`
+});
 
 export const node = style({
     transform: `translate3d(0, 0, 0)`,
-    position: "relative",
-    display: "flex",
+    position: 'relative',
+    display: 'flex',
     borderRadius: themeVars.rounded.small,
     transition: `background-color .3s ${themeVars.transition.default}`,
     selectors: {
         [`&:hover`]: {
-            backgroundColor: themeVars.color.gray["150"]
+            backgroundColor: themeVars.color.gray['150']
         }
     }
-})
+});
 
 export const nodeContent = style({
-    cursor: "pointer",
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
+    cursor: 'pointer',
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
     minHeight: `24px`,
-    boxSizing: "border-box",
-    verticalAlign: "bottom",
-    padding: `0 ${themeVars.space["1"]} 0 ${themeVars.space["1"]}`,
+    boxSizing: 'border-box',
+    verticalAlign: 'bottom',
+    padding: `0 ${themeVars.space['1']} 0 ${themeVars.space['1']}`,
     borderRadius: themeVars.rounded.default,
     lineHeight: 1.5,
-    userSelect: "none",
+    userSelect: 'none',
     flexGrow: 1
 });
 
@@ -66,5 +71,5 @@ export const nodeContentText = style({
     flexGrow: 1,
     maxWidth: `100%`,
     fontSize: themeVars.fontSize.base,
-    color: themeVars.color.gray["700"],
-})
+    color: themeVars.color.gray['700']
+});

package/src/components/tree/types.ts

@@ -1,105 +1,103 @@
-import type {HTMLAttributes, Ref, InjectionKey} from "vue";
-import type {TreeNode} from "treemate";
-import {createInjectionKey} from "../../utils/injection";
+import type { HTMLAttributes, Ref, InjectionKey } from 'vue';
+import type { TreeNode } from 'treemate';
+import { createInjectionKey } from '../../utils/injection';
 
-export type Key = string | number
+export type Key = string | number;
 
 export interface TreeOptionBase {
-    key?: Key,
-    label?: string,
-    children?: TreeOption[]
+    key?: Key;
+    label?: string;
+    children?: TreeOption[];
 }
 
 export type TreeOption = TreeOptionBase & Record<string, unknown>;
 export type TreeOptions = TreeOption[];
 
 export type TreeNodeProps = (
-    node: TreeOption,
+    node: TreeOption
 ) => HTMLAttributes & Record<string, unknown>;
 
-export type TreeNodeDoubleClick = (info: {
-    option: TreeOption,
-}) => void;
+export type TreeNodeDoubleClick = (info: { option: TreeOption }) => void;
 
 export interface TreeInjection {
-    mergedExpandedKeysRef: Ref<Key[]>,
-    indentRef: Ref<number>,
-    expandOnClickRef: Ref<boolean>,
-    nodePropsRef: Ref<TreeNodeProps | undefined>,
-    labelFieldRef: Ref<string>,
-    keyFieldRef: Ref<string>,
-    childrenFieldRef: Ref<string>,
-    handleToggleClick: (node: TreeNode<TreeOption>) => void,
-    handleDoubleClick: (node: TreeOption) => void,
+    mergedExpandedKeysRef: Ref<Key[]>;
+    indentRef: Ref<number>;
+    expandOnClickRef: Ref<boolean>;
+    nodePropsRef: Ref<TreeNodeProps | undefined>;
+    labelFieldRef: Ref<string>;
+    keyFieldRef: Ref<string>;
+    childrenFieldRef: Ref<string>;
+    handleToggleClick: (node: TreeNode<TreeOption>) => void;
+    handleDoubleClick: (node: TreeOption) => void;
 }
 
-export const treeInjectionKey = createInjectionKey<TreeInjection>('tree')
+export const treeInjectionKey = createInjectionKey<TreeInjection>('tree');
 
-export type TmNode = TreeNode<TreeOption>
+export type TmNode = TreeNode<TreeOption>;
 
 export type OnUpdateCheckedKeys = (
-    value: Array<string & number>,
-    option: Array<TreeOption | null>,
+    value: (string & number)[],
+    option: (TreeOption | null)[],
     meta: {
-        node: TreeOption | null
-        action: 'check' | 'uncheck'
+        node: TreeOption | null;
+        action: 'check' | 'uncheck';
     }
-) => void
+) => void;
 export type OnUpdateCheckedKeysImpl = (
     value: Key[],
-    option: Array<TreeOption | null>,
+    option: (TreeOption | null)[],
     meta: {
-        node: TreeOption | null
-        action: 'check' | 'uncheck'
+        node: TreeOption | null;
+        action: 'check' | 'uncheck';
     }
-) => void
+) => void;
 export type OnUpdateIndeterminateKeys = (
-    value: Array<string & number>,
-    option: Array<TreeOption | null>
-) => void
+    value: (string & number)[],
+    option: (TreeOption | null)[]
+) => void;
 export type OnUpdateIndeterminateKeysImpl = (
     value: Key[],
-    option: Array<TreeOption | null>
-) => void
+    option: (TreeOption | null)[]
+) => void;
 export type OnUpdateSelectedKeys = (
-    value: Array<string & number>,
-    option: Array<TreeOption | null>,
+    value: (string & number)[],
+    option: (TreeOption | null)[],
     meta: {
-        node: TreeOption | null
-        action: 'select' | 'unselect'
+        node: TreeOption | null;
+        action: 'select' | 'unselect';
     }
-) => void
+) => void;
 export type OnUpdateSelectedKeysImpl = (
     value: Key[],
-    option: Array<TreeOption | null>,
+    option: (TreeOption | null)[],
     meta: {
-        node: TreeOption | null
-        action: 'select' | 'unselect'
+        node: TreeOption | null;
+        action: 'select' | 'unselect';
     }
-) => void
+) => void;
 export type onUpdateExpandedKeys = (
-    value: Array<string & number>,
-    option: Array<TreeOption | null>,
+    value: (string & number)[],
+    option: (TreeOption | null)[],
     meta:
         | {
-        node: TreeOption
-        action: 'expand' | 'collapse'
-    }
+              node: TreeOption;
+              action: 'expand' | 'collapse';
+          }
         | {
-        node: null
-        action: 'filter'
-    }
-) => void
+              node: null;
+              action: 'filter';
+          }
+) => void;
 export type OnUpdateExpandedKeysImpl = (
     value: Key[],
-    option: Array<TreeOption | null>,
+    option: (TreeOption | null)[],
     meta:
         | {
-        node: TreeOption
-        action: 'expand' | 'collapse'
-    }
+              node: TreeOption;
+              action: 'expand' | 'collapse';
+          }
         | {
-        node: null
-        action: 'filter'
-    }
-) => void
+              node: null;
+              action: 'filter';
+          }
+) => void;

package/src/components/virtualscroll/examples/index.stories.ts

@@ -1,15 +1,11 @@
-import MVirtualScroll from "../VirtualScroll.vue";
-import {
-    MVirtualScrollBasic
-} from "./index";
+import MVirtualScroll from '../VirtualScroll.vue';
+import { MVirtualScrollBasic } from './index';
 
-import {
-    createStory
-} from "../../../__storybook__";
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MVirtualScroll,
     title: 'Components/VirtualScroll'
-}
+};
 
 export const Basic = createStory(MVirtualScrollBasic);

package/src/components/virtualscroll/style/VirtualScroll.css.ts

@@ -1,4 +1,4 @@
-import {globalStyle, style} from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const container = style({
     overflow: 'auto',
@@ -15,4 +15,3 @@ globalStyle(`${container} > div > div`, {
     willChange: 'transform',
     backfaceVisibility: 'hidden'
 });
-

package/src/composables/element.ts

@@ -1,13 +1,13 @@
-import type { Ref } from "vue";
+import type { Ref } from 'vue';
 
 export function getElement(ref: Ref) {
-    if(ref === null) {
+    if (ref === null) {
         return null;
     }
 
-    if(ref.value === null) {
+    if (ref.value === null) {
         return null;
     }
 
-    return "$el" in ref.value ? ref.value.$el : ref.value;
+    return '$el' in ref.value ? ref.value.$el : ref.value;
 }

package/src/composables/useCachedUid.ts

@@ -8,8 +8,9 @@ const UID_CACHE_ATTR = 'data-modlr-ssr-uid';
 // @ts-nocheck
 type CacheElement = HTMLElement | SVGElement | ComponentPublicInstance | null;
 
-export function uid(prefix: string = ''): string {
-    const id = Date.now().toString(36) + Math.random().toString(36).substring(2);
+export function uid(prefix = ''): string {
+    const id =
+        Date.now().toString(36) + Math.random().toString(36).substring(2);
     return prefix ? `${prefix}-${id}` : id;
 }
 
@@ -22,15 +23,15 @@ export interface IUseCacheUid {
 }
 
 export function useCachedUid(prefix?: string): IUseCacheUid {
-    let id = ref(uid(prefix));
+    const id = ref(uid(prefix));
     const cacheElement = ref<CacheElement>(null);
 
     onMounted(() => {
-        if(cacheElement.value) {
+        if (cacheElement.value) {
             const element = getElement(cacheElement);
             const serverId = element?.getAttribute(UID_CACHE_ATTR);
 
-            if(serverId) {
+            if (serverId) {
                 id.value = serverId;
             }
 
@@ -44,5 +45,5 @@ export function useCachedUid(prefix?: string): IUseCacheUid {
             ref: cacheElement,
             [UID_CACHE_ATTR]: typeof window === undefined ? id.value : undefined
         }
-    }
+    };
 }

package/src/composables/useEventListener.ts

@@ -1,14 +1,19 @@
-import { watchEffect } from "vue";
+import { watchEffect } from 'vue';
 
-export function useEventListener<T extends EventTarget | HTMLElement, E extends EventListener>(element: T, type: string, listener: E, options: boolean) {
-    if(typeof window === undefined) {
+export function useEventListener<
+    T extends EventTarget | HTMLElement,
+    E extends EventListener
+>(element: T, type: string, listener: E, options: boolean) {
+    if (typeof window === undefined) {
         return;
     }
 
-    watchEffect((onInvalidate) => {
+    watchEffect(onInvalidate => {
         element = element ?? window;
 
         element.addEventListener(type, listener, options);
-        onInvalidate(() => element.removeEventListener(type, listener, options));
-    })
+        onInvalidate(() =>
+            element.removeEventListener(type, listener, options)
+        );
+    });
 }

package/src/composables/useInput.ts

@@ -2,7 +2,7 @@
 import type { PropType } from 'vue';
 import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
 import { useCachedUid } from './useCachedUid';
-import {FORM_STATE} from "../components/form/symbol";
+import { FORM_STATE } from '../components/form/symbol';
 
 export interface FormInput {
     focus: () => void;
@@ -10,20 +10,33 @@ export interface FormInput {
     setError: (value: string) => void;
 }
 
-export const useInput = (props: any, { focus, emit, withListeners = true }: {
-    focus: () => void,
-    emit: any,
-    withListeners?: boolean
-}) => {
+export const useInput = (
+    props: any,
+    {
+        focus,
+        emit,
+        withListeners = true
+    }: {
+        focus: () => void;
+        emit: any;
+        withListeners?: boolean;
+    }
+) => {
     const isFirstValidation = ref(true);
     const formError = ref(props.error);
 
     const { id } = useCachedUid('input');
     const name = props.name ? props.name : id.value;
     const _name = ref(name);
-    
-    watch(() => props.error, (value) => formError.value = value);
-    watch(() => props.name, (value) => name.value = value);
+
+    watch(
+        () => props.error,
+        value => (formError.value = value)
+    );
+    watch(
+        () => props.name,
+        value => (name.value = value)
+    );
 
     const form = inject(FORM_STATE, null);
 
@@ -33,7 +46,7 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
         emit('update:modelValue', '');
     };
 
-    const setError  = (value: string) => {
+    const setError = (value: string) => {
         formError.value = value;
     };
 
@@ -49,7 +62,7 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
 
             if (typeof item === 'function') {
                 valid = item(value);
-            } else if(Array.isArray(item) && item.length === 2) {
+            } else if (Array.isArray(item) && item.length === 2) {
                 const { 0: rule, 1: options } = item;
                 valid = rule(value, options);
             } else {
@@ -69,26 +82,32 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
         return true;
     };
 
-    const inputListeners = withListeners ? computed(() => {
-        return {
-            blur: (event: Event) => emit('blur', event),
-            focus: (event: Event) => emit('focus', event),
-            input: (event: Event) => {
-                emit('update:modelValue', (event.target as HTMLInputElement).value);
-            },
-            change: (event: Event) => emit('change', event)
-        }
-    }) : {};
+    const inputListeners = withListeners
+        ? computed(() => {
+              return {
+                  blur: (event: Event) => emit('blur', event),
+                  focus: (event: Event) => emit('focus', event),
+                  input: (event: Event) => {
+                      emit(
+                          'update:modelValue',
+                          (event.target as HTMLInputElement).value
+                      );
+                  },
+                  change: (event: Event) => emit('change', event)
+              };
+          })
+        : {};
 
     onMounted(() => {
-        form?.add(_name.value,
+        form?.add(
+            _name.value,
             focus,
             // @ts-ignore
             validate,
             // @ts-ignore
             setError
         );
-    })
+    });
 
     onUnmounted(() => {
         form?.remove(_name.value);
@@ -106,24 +125,27 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
         //@ts-ignore
         formDisabled: form?.disabled.value || false,
         //@ts-ignore
-        formLoading: form?.loading.value || false,
-    }
+        formLoading: form?.loading.value || false
+    };
 };
 
-useInput.emits = (withListeners: boolean = true): string[] => {
-    return withListeners ?
-        ['update:modelValue', 'blur', 'focus', 'input', 'change'] :
-        ['update:modelValue'];
-}
+useInput.emits = (withListeners = true): string[] => {
+    return withListeners
+        ? ['update:modelValue', 'blur', 'focus', 'input', 'change']
+        : ['update:modelValue'];
+};
 
-useInput.props = () => ({
-    modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | Array<any> | any[] | undefined>,
-    name: String,
-    readonly: Boolean,
-    required: Boolean,
-    error: String,
-    rules: {
-        type: Array,
-        default: () => [],
-    }
-} as const);
+useInput.props = () =>
+    ({
+        modelValue: [String, Number, Boolean, Object, Array] as PropType<
+            string | number | boolean | object | any[] | any[] | undefined
+        >,
+        name: String,
+        readonly: Boolean,
+        required: Boolean,
+        error: String,
+        rules: {
+            type: Array,
+            default: () => []
+        }
+    }) as const;

package/src/composables/useInteractive.ts

@@ -1,20 +1,19 @@
-import type { Ref } from "vue";
+import type { Ref } from 'vue';
 
 export interface InteractiveProps {
     disabled?: boolean;
     loading?: boolean;
 }
 
-export const useInteractive = (
-    el: Ref<HTMLElement | null>,
-) => {
+export const useInteractive = (el: Ref<HTMLElement | null>) => {
     return {
         focus: () => el.value?.focus?.(),
-        blur: () => el.value?.blur?.(),
-    }
-}
+        blur: () => el.value?.blur?.()
+    };
+};
 
-useInteractive.props = () => ({
-    disabled: Boolean,
-    loading: Boolean,
-} as const);
+useInteractive.props = () =>
+    ({
+        disabled: Boolean,
+        loading: Boolean
+    }) as const;

package/src/composables/useMergedState.ts

@@ -1,18 +1,18 @@
-import { type Ref, watch, type ComputedRef, computed } from 'vue'
+import { type Ref, watch, type ComputedRef, computed } from 'vue';
 
-export default function useMergedState<T> (
+export default function useMergedState<T>(
     controlledStateRef: Ref<T | undefined>,
     uncontrolledStateRef: Ref<T>
 ): ComputedRef<T> {
     watch(controlledStateRef, value => {
         if (value !== undefined) {
-            uncontrolledStateRef.value = value
+            uncontrolledStateRef.value = value;
         }
-    })
+    });
     return computed(() => {
         if (controlledStateRef.value === undefined) {
-            return uncontrolledStateRef.value
+            return uncontrolledStateRef.value;
         }
-        return controlledStateRef.value
-    })
+        return controlledStateRef.value;
+    });
 }

package/src/composables/useMount.ts

@@ -1,5 +1,5 @@
-import { createVNode, render } from "vue";
-import type { App, Component } from "vue";
+import { createVNode, render } from 'vue';
+import type { App, Component } from 'vue';
 
 export function mount(
     component: Component,
@@ -9,10 +9,10 @@ export function mount(
         element,
         app
     }: {
-        props?: Record<string, unknown>,
-        children?: unknown,
-        app?: App,
-        element?: HTMLElement
+        props?: Record<string, unknown>;
+        children?: unknown;
+        app?: App;
+        element?: HTMLElement;
     } = {}
 ) {
     let el = element;
@@ -25,19 +25,19 @@ export function mount(
 
     if (el) {
         render(vNode, el);
-    } else if(typeof document !== 'undefined') {
-        render(vNode, (el = document.createElement('div')))
+    } else if (typeof document !== 'undefined') {
+        render(vNode, (el = document.createElement('div')));
     }
 
     const destroy = () => {
         if (el) {
             render(null, el);
         }
-    }
+    };
 
     return {
         el,
         vNode,
-        destroy,
-    }
+        destroy
+    };
 }