@teammodlr/ui-kit 2.1.39 → 2.1.43

package/src/components/tree/examples/index.ts

@@ -1 +1 @@
-export { default as MTreeBasic } from './basic.vue';
+export { default as MTreeBasic } from './basic.vue';

package/src/components/tree/props.ts

@@ -1,97 +1,97 @@
-import type { ExtractPublicPropTypes, PropType } from 'vue';
-import type {
-    TreeOptions,
-    Key,
-    TreeNodeProps,
-    OnUpdateIndeterminateKeys,
-    onUpdateExpandedKeys,
-    TreeNodeDoubleClick
-} from './types';
-import type { TreeMateOptions } from 'treemate';
-import type { MaybeArray } from '../../call';
-
-export const treeSharedProps = {
-    expandedKeys: Array as PropType<Key[]>,
-    defaultExpandAll: Boolean,
-    keyField: {
-        type: String,
-        default: 'key'
-    },
-    labelField: {
-        type: String,
-        default: 'label'
-    },
-    childrenField: {
-        type: String,
-        default: 'children'
-    },
-    onDblClick: Function as PropType<TreeNodeDoubleClick>,
-    onUpdateIndeterminateKeys: [Function, Array] as PropType<
-        MaybeArray<OnUpdateIndeterminateKeys>
-    >,
-    'onUpdate:indeterminateKeys': [Function, Array] as PropType<
-        MaybeArray<OnUpdateIndeterminateKeys>
-    >,
-    onUpdateExpandedKeys: [Function, Array] as PropType<
-        MaybeArray<onUpdateExpandedKeys>
-    >,
-    'onUpdate:expandedKeys': [Function, Array] as PropType<
-        MaybeArray<onUpdateExpandedKeys>
-    >
-} as const;
-
-export const treeProps = {
-    data: {
-        type: Array as PropType<TreeOptions>,
-        default: () => []
-    },
-    checkedKeys: Array as PropType<Key[]>,
-    defaultCheckedKeys: {
-        type: Array as PropType<Key[]>,
-        default: () => []
-    },
-    selectedKeys: Array as PropType<Key[]>,
-    defaultSelectedKeys: {
-        type: Array as PropType<Key[]>,
-        default: () => []
-    },
-    multiple: Boolean,
-    indent: {
-        type: Number,
-        default: 16
-    },
-    expandOnClick: Boolean,
-    virtualScroll: Boolean,
-    nodeProps: Function as PropType<TreeNodeProps>,
-    getChildren: Function as PropType<GetChildren>,
-    ...treeSharedProps
-} as const;
-
-export type TreeProps = ExtractPublicPropTypes<typeof treeProps>;
-export type GetChildren = (option: any) => unknown;
-
-export function createTreeMateOptions<T>(
-    keyField: string,
-    childrenField: string,
-    disabledField: string,
-    getChildren: GetChildren | undefined
-): TreeMateOptions<T, T, T> {
-    const settledGetChildren: GetChildren =
-        getChildren ||
-        ((node: T) => {
-            return (node as any)[childrenField];
-        });
-
-    return {
-        getIsGroup() {
-            return false;
-        },
-        getKey(node: T) {
-            return (node as any)[keyField];
-        },
-        getChildren: settledGetChildren,
-        getDisabled(node: T) {
-            return !!(node as any)[disabledField];
-        }
-    };
-}
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type {
+    TreeOptions,
+    Key,
+    TreeNodeProps,
+    OnUpdateIndeterminateKeys,
+    onUpdateExpandedKeys,
+    TreeNodeDoubleClick
+} from './types';
+import type { TreeMateOptions } from 'treemate';
+import type { MaybeArray } from '../../call';
+
+export const treeSharedProps = {
+    expandedKeys: Array as PropType<Key[]>,
+    defaultExpandAll: Boolean,
+    keyField: {
+        type: String,
+        default: 'key'
+    },
+    labelField: {
+        type: String,
+        default: 'label'
+    },
+    childrenField: {
+        type: String,
+        default: 'children'
+    },
+    onDblClick: Function as PropType<TreeNodeDoubleClick>,
+    onUpdateIndeterminateKeys: [Function, Array] as PropType<
+        MaybeArray<OnUpdateIndeterminateKeys>
+    >,
+    'onUpdate:indeterminateKeys': [Function, Array] as PropType<
+        MaybeArray<OnUpdateIndeterminateKeys>
+    >,
+    onUpdateExpandedKeys: [Function, Array] as PropType<
+        MaybeArray<onUpdateExpandedKeys>
+    >,
+    'onUpdate:expandedKeys': [Function, Array] as PropType<
+        MaybeArray<onUpdateExpandedKeys>
+    >
+} as const;
+
+export const treeProps = {
+    data: {
+        type: Array as PropType<TreeOptions>,
+        default: () => []
+    },
+    checkedKeys: Array as PropType<Key[]>,
+    defaultCheckedKeys: {
+        type: Array as PropType<Key[]>,
+        default: () => []
+    },
+    selectedKeys: Array as PropType<Key[]>,
+    defaultSelectedKeys: {
+        type: Array as PropType<Key[]>,
+        default: () => []
+    },
+    multiple: Boolean,
+    indent: {
+        type: Number,
+        default: 16
+    },
+    expandOnClick: Boolean,
+    virtualScroll: Boolean,
+    nodeProps: Function as PropType<TreeNodeProps>,
+    getChildren: Function as PropType<GetChildren>,
+    ...treeSharedProps
+} as const;
+
+export type TreeProps = ExtractPublicPropTypes<typeof treeProps>;
+export type GetChildren = (option: any) => unknown;
+
+export function createTreeMateOptions<T>(
+    keyField: string,
+    childrenField: string,
+    disabledField: string,
+    getChildren: GetChildren | undefined
+): TreeMateOptions<T, T, T> {
+    const settledGetChildren: GetChildren =
+        getChildren ||
+        ((node: T) => {
+            return (node as any)[childrenField];
+        });
+
+    return {
+        getIsGroup() {
+            return false;
+        },
+        getKey(node: T) {
+            return (node as any)[keyField];
+        },
+        getChildren: settledGetChildren,
+        getDisabled(node: T) {
+            return !!(node as any)[disabledField];
+        }
+    };
+}

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

@@ -1,75 +1,75 @@
-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',
-    flexShrink: 0,
-    height: `24px`,
-    width: `24px`,
-    alignItems: 'center',
-    justifyContent: 'center',
-    verticalAlign: 'bottom',
-    transition: `transform .15s ${themeVars.transition.default}`
-});
-export const icon = style({
-    position: 'relative',
-    height: `14px`,
-    width: `14px`,
-    display: 'flex',
-    fontSize: `14px`,
-    fill: 'currentColor',
-    color: themeVars.color.gray['600']
-});
-
-export const iconRotate = styleVariants({
-    90: {
-        transform: `rotate(90deg)`
-    }
-});
-
-export const nodeWrapper = style({
-    boxSizing: 'border-box',
-    padding: `${themeVars.space['0.5']} 0`
-});
-
-export const node = style({
-    transform: `translate3d(0, 0, 0)`,
-    position: 'relative',
-    display: 'flex',
-    borderRadius: themeVars.rounded.small,
-    transition: `background-color .3s ${themeVars.transition.default}`,
-    selectors: {
-        [`&:hover`]: {
-            backgroundColor: themeVars.color.gray['150']
-        }
-    }
-});
-
-export const nodeContent = style({
-    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']}`,
-    borderRadius: themeVars.rounded.default,
-    lineHeight: 1.5,
-    userSelect: 'none',
-    flexGrow: 1
-});
-
-export const nodeContentText = style({
-    flexGrow: 1,
-    maxWidth: `100%`,
-    fontSize: themeVars.fontSize.base,
-    color: themeVars.color.gray['700']
-});
+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',
+    flexShrink: 0,
+    height: `24px`,
+    width: `24px`,
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'bottom',
+    transition: `transform .15s ${themeVars.transition.default}`
+});
+export const icon = style({
+    position: 'relative',
+    height: `14px`,
+    width: `14px`,
+    display: 'flex',
+    fontSize: `14px`,
+    fill: 'currentColor',
+    color: themeVars.color.gray['600']
+});
+
+export const iconRotate = styleVariants({
+    90: {
+        transform: `rotate(90deg)`
+    }
+});
+
+export const nodeWrapper = style({
+    boxSizing: 'border-box',
+    padding: `${themeVars.space['0.5']} 0`
+});
+
+export const node = style({
+    transform: `translate3d(0, 0, 0)`,
+    position: 'relative',
+    display: 'flex',
+    borderRadius: themeVars.rounded.small,
+    transition: `background-color .3s ${themeVars.transition.default}`,
+    selectors: {
+        [`&:hover`]: {
+            backgroundColor: themeVars.color.gray['150']
+        }
+    }
+});
+
+export const nodeContent = style({
+    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']}`,
+    borderRadius: themeVars.rounded.default,
+    lineHeight: 1.5,
+    userSelect: 'none',
+    flexGrow: 1
+});
+
+export const nodeContentText = style({
+    flexGrow: 1,
+    maxWidth: `100%`,
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray['700']
+});

package/src/components/tree/style/index.ts

@@ -1 +1 @@
-export * from './Tree.css';
+export * from './Tree.css';

package/src/components/tree/types.ts

@@ -1,103 +1,103 @@
-import type { HTMLAttributes, Ref, InjectionKey } from 'vue';
-import type { TreeNode } from 'treemate';
-import { createInjectionKey } from '../../utils/injection';
-
-export type Key = string | number;
-
-export interface TreeOptionBase {
-    key?: Key;
-    label?: string;
-    children?: TreeOption[];
-}
-
-export type TreeOption = TreeOptionBase & Record<string, unknown>;
-export type TreeOptions = TreeOption[];
-
-export type TreeNodeProps = (
-    node: TreeOption
-) => HTMLAttributes & Record<string, unknown>;
-
-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;
-}
-
-export const treeInjectionKey = createInjectionKey<TreeInjection>('tree');
-
-export type TmNode = TreeNode<TreeOption>;
-
-export type OnUpdateCheckedKeys = (
-    value: (string & number)[],
-    option: (TreeOption | null)[],
-    meta: {
-        node: TreeOption | null;
-        action: 'check' | 'uncheck';
-    }
-) => void;
-export type OnUpdateCheckedKeysImpl = (
-    value: Key[],
-    option: (TreeOption | null)[],
-    meta: {
-        node: TreeOption | null;
-        action: 'check' | 'uncheck';
-    }
-) => void;
-export type OnUpdateIndeterminateKeys = (
-    value: (string & number)[],
-    option: (TreeOption | null)[]
-) => void;
-export type OnUpdateIndeterminateKeysImpl = (
-    value: Key[],
-    option: (TreeOption | null)[]
-) => void;
-export type OnUpdateSelectedKeys = (
-    value: (string & number)[],
-    option: (TreeOption | null)[],
-    meta: {
-        node: TreeOption | null;
-        action: 'select' | 'unselect';
-    }
-) => void;
-export type OnUpdateSelectedKeysImpl = (
-    value: Key[],
-    option: (TreeOption | null)[],
-    meta: {
-        node: TreeOption | null;
-        action: 'select' | 'unselect';
-    }
-) => void;
-export type onUpdateExpandedKeys = (
-    value: (string & number)[],
-    option: (TreeOption | null)[],
-    meta:
-        | {
-              node: TreeOption;
-              action: 'expand' | 'collapse';
-          }
-        | {
-              node: null;
-              action: 'filter';
-          }
-) => void;
-export type OnUpdateExpandedKeysImpl = (
-    value: Key[],
-    option: (TreeOption | null)[],
-    meta:
-        | {
-              node: TreeOption;
-              action: 'expand' | 'collapse';
-          }
-        | {
-              node: null;
-              action: 'filter';
-          }
-) => void;
+import type { HTMLAttributes, Ref, InjectionKey } from 'vue';
+import type { TreeNode } from 'treemate';
+import { createInjectionKey } from '../../utils/injection';
+
+export type Key = string | number;
+
+export interface TreeOptionBase {
+    key?: Key;
+    label?: string;
+    children?: TreeOption[];
+}
+
+export type TreeOption = TreeOptionBase & Record<string, unknown>;
+export type TreeOptions = TreeOption[];
+
+export type TreeNodeProps = (
+    node: TreeOption
+) => HTMLAttributes & Record<string, unknown>;
+
+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;
+}
+
+export const treeInjectionKey = createInjectionKey<TreeInjection>('tree');
+
+export type TmNode = TreeNode<TreeOption>;
+
+export type OnUpdateCheckedKeys = (
+    value: (string & number)[],
+    option: (TreeOption | null)[],
+    meta: {
+        node: TreeOption | null;
+        action: 'check' | 'uncheck';
+    }
+) => void;
+export type OnUpdateCheckedKeysImpl = (
+    value: Key[],
+    option: (TreeOption | null)[],
+    meta: {
+        node: TreeOption | null;
+        action: 'check' | 'uncheck';
+    }
+) => void;
+export type OnUpdateIndeterminateKeys = (
+    value: (string & number)[],
+    option: (TreeOption | null)[]
+) => void;
+export type OnUpdateIndeterminateKeysImpl = (
+    value: Key[],
+    option: (TreeOption | null)[]
+) => void;
+export type OnUpdateSelectedKeys = (
+    value: (string & number)[],
+    option: (TreeOption | null)[],
+    meta: {
+        node: TreeOption | null;
+        action: 'select' | 'unselect';
+    }
+) => void;
+export type OnUpdateSelectedKeysImpl = (
+    value: Key[],
+    option: (TreeOption | null)[],
+    meta: {
+        node: TreeOption | null;
+        action: 'select' | 'unselect';
+    }
+) => void;
+export type onUpdateExpandedKeys = (
+    value: (string & number)[],
+    option: (TreeOption | null)[],
+    meta:
+        | {
+              node: TreeOption;
+              action: 'expand' | 'collapse';
+          }
+        | {
+              node: null;
+              action: 'filter';
+          }
+) => void;
+export type OnUpdateExpandedKeysImpl = (
+    value: Key[],
+    option: (TreeOption | null)[],
+    meta:
+        | {
+              node: TreeOption;
+              action: 'expand' | 'collapse';
+          }
+        | {
+              node: null;
+              action: 'filter';
+          }
+) => void;

package/src/components/virtualscroll/VirtualScroll.css

@@ -1,13 +1,13 @@
-.virtual-scroller {
-    overflow: auto;
-    will-change: transform;
-}
-
-.virtual-scroller>div {
-    overflow: hidden;
-    will-change: transform;
-}
-
-.virtual-scroller>div>div {
-    will-change: transform;
-}
+.virtual-scroller {
+    overflow: auto;
+    will-change: transform;
+}
+
+.virtual-scroller>div {
+    overflow: hidden;
+    will-change: transform;
+}
+
+.virtual-scroller>div>div {
+    will-change: transform;
+}