@teammodlr/ui-kit 2.1.5 → 2.1.6

package/src/components/tree/props.ts

@@ -0,0 +1,87 @@
+import type {ExtractPublicPropTypes, PropType} from "vue";
+import type {TreeOptions, Key, TreeNodeProps, OnUpdateIndeterminateKeys, onUpdateExpandedKeys} 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',
+    },
+    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/types.ts

@@ -0,0 +1,96 @@
+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 = (info: {
+    option: TreeOption,
+}) => HTMLAttributes & Record<string, unknown>;
+
+export interface TreeInjection {
+    indentRef: Ref<number>,
+    expandOnClickRef: Ref<boolean>,
+    nodePropsRef: Ref<TreeNodeProps | undefined>,
+    handleSwitcherClick: (node: TreeNode<TreeOption>) => void
+}
+
+export const treeInjectionKey = createInjectionKey<TreeInjection>('tree')
+
+export type TmNode = TreeNode<TreeOption>
+
+export type OnUpdateCheckedKeys = (
+    value: Array<string & number>,
+    option: Array<TreeOption | null>,
+    meta: {
+        node: TreeOption | null
+        action: 'check' | 'uncheck'
+    }
+) => void
+export type OnUpdateCheckedKeysImpl = (
+    value: Key[],
+    option: Array<TreeOption | null>,
+    meta: {
+        node: TreeOption | null
+        action: 'check' | 'uncheck'
+    }
+) => void
+export type OnUpdateIndeterminateKeys = (
+    value: Array<string & number>,
+    option: Array<TreeOption | null>
+) => void
+export type OnUpdateIndeterminateKeysImpl = (
+    value: Key[],
+    option: Array<TreeOption | null>
+) => void
+export type OnUpdateSelectedKeys = (
+    value: Array<string & number>,
+    option: Array<TreeOption | null>,
+    meta: {
+        node: TreeOption | null
+        action: 'select' | 'unselect'
+    }
+) => void
+export type OnUpdateSelectedKeysImpl = (
+    value: Key[],
+    option: Array<TreeOption | null>,
+    meta: {
+        node: TreeOption | null
+        action: 'select' | 'unselect'
+    }
+) => void
+export type onUpdateExpandedKeys = (
+    value: Array<string & number>,
+    option: Array<TreeOption | null>,
+    meta:
+        | {
+        node: TreeOption
+        action: 'expand' | 'collapse'
+    }
+        | {
+        node: null
+        action: 'filter'
+    }
+) => void
+export type OnUpdateExpandedKeysImpl = (
+    value: Key[],
+    option: Array<TreeOption | null>,
+    meta:
+        | {
+        node: TreeOption
+        action: 'expand' | 'collapse'
+    }
+        | {
+        node: null
+        action: 'filter'
+    }
+) => void

package/src/composables/index.ts

@@ -1,4 +1,4 @@
 export { useMessage } from '../components/messageprovider/useMessage';
-export { useDialog } from '../components/dialog/useDialog';
+export { useConfirm } from '../components/confirm/useConfirm';
 export { usePopper } from './usePopper';
 export { useZIndex } from './useZIndex';

package/src/composables/useMergedState.ts

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

package/src/utils/injection.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue'
+
+export function createInjectionKey<T> (key: string): InjectionKey<T> {
+    return key as any
+}

package/lib/components/dialog/useDialog.d.ts

@@ -1,2 +0,0 @@
-import type { DialogApiInjection } from './types';
-export declare function useDialog(): DialogApiInjection;

package/src/components/dialog/useDialog.ts

@@ -1,12 +0,0 @@
-import { inject } from 'vue';
-import type { DialogApiInjection } from './types';
-
-export function useDialog(): DialogApiInjection {
-    const api = inject('m-dialog', null);
-
-    if (api === null) {
-        throw new Error('m-dialog api is not provided, ensure the component is wrapped in <m-dialog-provider />.');
-    }
-
-    return api;
-}