@yh-ui/components 0.1.0

package/dist/tree-select/src/tree-select.vue.d.ts

@@ -0,0 +1,141 @@
+import { type TreeSelectNode, type TreeKey } from './tree-select';
+declare var __VLS_9: {
+    node: any;
+    data: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: import("vue").PropType<TreeKey | TreeKey[]>;
+        readonly default: undefined;
+    };
+    readonly data: {
+        readonly type: import("vue").PropType<import("./tree-select").TreeOption[]>;
+        readonly default: () => never[];
+    };
+    readonly props: {
+        readonly type: import("vue").PropType<import("./tree-select").TreePropsAlias>;
+        readonly default: () => {
+            label: string;
+            value: string;
+            children: string;
+            disabled: string;
+            isLeaf: string;
+        };
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly multiple: BooleanConstructor;
+    readonly clearable: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly size: {
+        readonly type: import("vue").PropType<"large" | "default" | "small">;
+        readonly default: "default";
+    };
+    readonly filterable: BooleanConstructor;
+    readonly filterNodeMethod: import("vue").PropType<(value: string, data: import("./tree-select").TreeOption, node: TreeSelectNode) => boolean>;
+    readonly collapseTags: BooleanConstructor;
+    readonly collapseTagsTooltip: BooleanConstructor;
+    readonly maxCollapseTags: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly teleported: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly popperClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly status: import("vue").PropType<"success" | "warning" | "error" | "">;
+    readonly nodeKey: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly showCheckbox: BooleanConstructor;
+    readonly checkStrictly: BooleanConstructor;
+    readonly checkOnClickNode: BooleanConstructor;
+    readonly expandOnClickNode: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly defaultExpandAll: BooleanConstructor;
+    readonly defaultExpandedKeys: {
+        readonly type: import("vue").PropType<TreeKey[]>;
+        readonly default: () => never[];
+    };
+    readonly defaultCheckedKeys: {
+        readonly type: import("vue").PropType<TreeKey[]>;
+        readonly default: () => never[];
+    };
+    readonly accordion: BooleanConstructor;
+    readonly indent: {
+        readonly type: NumberConstructor;
+        readonly default: 16;
+    };
+    readonly lazy: BooleanConstructor;
+    readonly load: import("vue").PropType<(node: import("./tree-select").TreeOption, resolve: (data: import("./tree-select").TreeOption[]) => void) => void>;
+    readonly virtual: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly height: {
+        readonly type: import("vue").PropType<string | number>;
+        readonly default: 274;
+    };
+    readonly itemSize: {
+        readonly type: NumberConstructor;
+        readonly default: 34;
+    };
+    readonly emptyText: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    readonly teleported: boolean;
+    readonly disabled: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly data: import("./tree-select").TreeOption[];
+    readonly height: string | number;
+    readonly size: "small" | "default" | "large";
+    readonly multiple: boolean;
+    readonly props: import("./tree-select").TreePropsAlias;
+    readonly modelValue: TreeKey | TreeKey[];
+    readonly placeholder: string;
+    readonly clearable: boolean;
+    readonly popperClass: string;
+    readonly virtual: boolean;
+    readonly filterable: boolean;
+    readonly collapseTags: boolean;
+    readonly collapseTagsTooltip: boolean;
+    readonly maxCollapseTags: number;
+    readonly checkStrictly: boolean;
+    readonly lazy: boolean;
+    readonly emptyText: string;
+    readonly itemSize: number;
+    readonly indent: number;
+    readonly nodeKey: string;
+    readonly showCheckbox: boolean;
+    readonly defaultExpandAll: boolean;
+    readonly defaultExpandedKeys: TreeKey[];
+    readonly defaultCheckedKeys: TreeKey[];
+    readonly accordion: boolean;
+    readonly expandOnClickNode: boolean;
+    readonly checkOnClickNode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tree-select/src/use-tree.cjs

@@ -0,0 +1,253 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTree = void 0;
+var _vue = require("vue");
+const useTree = (props, emit) => {
+  const nodeMap = (0, _vue.ref)(/* @__PURE__ */new Map());
+  const treeData = (0, _vue.ref)([]);
+  const mapVersion = (0, _vue.ref)(0);
+  const alias = (0, _vue.computed)(() => ({
+    label: props.props?.label || "label",
+    value: props.props?.value || "value",
+    children: props.props?.children || "children",
+    disabled: props.props?.disabled || "disabled",
+    isLeaf: props.props?.isLeaf || "isLeaf"
+  }));
+  const createTreeNode = (data, parent, level = 0) => {
+    const keyProp = props.nodeKey || alias.value.value;
+    const key = data[keyProp] ?? `node-${Math.random().toString(36).slice(2, 9)}`;
+    const node = (0, _vue.reactive)({
+      key,
+      label: String(data[alias.value.label] || ""),
+      level,
+      expanded: props.defaultExpandAll || (props.defaultExpandedKeys || []).includes(key),
+      checked: false,
+      indeterminate: false,
+      disabled: !!data[alias.value.disabled],
+      visible: true,
+      isLeaf: !!data[alias.value.isLeaf] || !data[alias.value.children],
+      raw: data,
+      parent,
+      children: [],
+      loading: false,
+      loaded: false
+    });
+    const childrenData = data[alias.value.children];
+    if (childrenData && Array.isArray(childrenData)) {
+      node.children = childrenData.map(item => createTreeNode(item, node, level + 1));
+    }
+    nodeMap.value.set(key, node);
+    return node;
+  };
+  const flatData = (0, _vue.computed)(() => {
+    void mapVersion.value;
+    const result = [];
+    const walk = nodes => {
+      nodes.forEach(node => {
+        if (node.visible) {
+          result.push(node);
+          if (node.expanded && node.children?.length) walk(node.children);
+        }
+      });
+    };
+    walk(treeData.value);
+    return result;
+  });
+  const getNode = key => nodeMap.value.get(key);
+  const updateParentState = node => {
+    let p = node.parent;
+    while (p) {
+      const children = p.children || [];
+      const checkedChildren = children.filter(c => c.checked);
+      const indeterminateChildren = children.filter(c => c.indeterminate);
+      const allChecked = children.length > 0 && checkedChildren.length === children.length;
+      const noneChecked = checkedChildren.length === 0 && indeterminateChildren.length === 0;
+      p.checked = allChecked;
+      p.indeterminate = !allChecked && !noneChecked;
+      p = p.parent;
+    }
+  };
+  const syncCheckState = val => {
+    const keys = new Set(Array.isArray(val) ? val : val !== void 0 && val !== null && val !== "" ? [val] : []);
+    nodeMap.value.forEach(node => {
+      node.checked = false;
+      node.indeterminate = false;
+    });
+    keys.forEach(k => {
+      const node = getNode(k);
+      if (node) {
+        node.checked = true;
+        if (!props.checkStrictly && props.multiple) {
+          const setChild = n => {
+            if (n.disabled) return;
+            n.checked = true;
+            n.indeterminate = false;
+            n.children?.forEach(setChild);
+          };
+          node.children?.forEach(setChild);
+        }
+      }
+    });
+    if (!props.checkStrictly && props.multiple) {
+      nodeMap.value.forEach(node => {
+        if (!node.children || node.children.length === 0) {
+          if (node.checked) updateParentState(node);
+        }
+      });
+    }
+    mapVersion.value++;
+    (0, _vue.triggerRef)(nodeMap);
+  };
+  const emitModelValue = () => {
+    const checkedKeys = [];
+    nodeMap.value.forEach(node => {
+      if (node.checked) checkedKeys.push(node.key);
+    });
+    if (props.multiple) {
+      emit("update:modelValue", checkedKeys);
+      emit("change", checkedKeys);
+    } else {
+      const target = checkedKeys[checkedKeys.length - 1];
+      emit("update:modelValue", target);
+      emit("change", target);
+    }
+  };
+  const checkNode = (node, checked) => {
+    if (node.disabled) return;
+    if (!props.multiple) {
+      nodeMap.value.forEach(n => {
+        n.checked = false;
+        n.indeterminate = false;
+      });
+    }
+    node.checked = checked;
+    node.indeterminate = false;
+    if (!props.checkStrictly && props.multiple) {
+      const setChild = (n, v) => {
+        if (n.disabled) return;
+        n.checked = v;
+        n.indeterminate = false;
+        n.children?.forEach(c => setChild(c, v));
+      };
+      setChild(node, checked);
+      updateParentState(node);
+    }
+    emitModelValue();
+    const checkedKeys = [];
+    const checkedNodes = [];
+    nodeMap.value.forEach(n => {
+      if (n.checked) {
+        checkedKeys.push(n.key);
+        checkedNodes.push(n.raw);
+      }
+    });
+    emit("check-change", node.raw, checked, node.indeterminate);
+    emit("check", node.raw, {
+      checkedKeys,
+      checkedNodes
+    });
+    mapVersion.value++;
+    (0, _vue.triggerRef)(nodeMap);
+  };
+  const toggleExpand = node => {
+    if (node.isLeaf && !props.lazy) return;
+    if (props.lazy && !node.loaded) {
+      loadNode(node);
+    } else {
+      node.expanded = !node.expanded;
+      mapVersion.value++;
+      (0, _vue.triggerRef)(nodeMap);
+    }
+  };
+  const loadNode = async node => {
+    if (!props.load || node.loading) return;
+    node.loading = true;
+    try {
+      await new Promise(resolve => {
+        props.load(node.raw, childrenData => {
+          if (childrenData && Array.isArray(childrenData)) {
+            node.children = childrenData.map(item => createTreeNode(item, node, node.level + 1));
+            node.loaded = true;
+            node.isLeaf = childrenData.length === 0;
+            node.expanded = true;
+            if (node.checked && !props.checkStrictly) {
+              node.children.forEach(c => {
+                if (!c.disabled) c.checked = true;
+              });
+            }
+          }
+          resolve();
+        });
+      });
+    } finally {
+      node.loading = false;
+      mapVersion.value++;
+      (0, _vue.triggerRef)(nodeMap);
+    }
+  };
+  const filter = val => {
+    const query = val.trim().toLowerCase();
+    const isMatched = node => {
+      if (props.filterNodeMethod) return props.filterNodeMethod(query, node.raw, node);
+      return !query || node.label.toLowerCase().includes(query);
+    };
+    nodeMap.value.forEach(node => {
+      node.visible = isMatched(node);
+    });
+    if (query) {
+      const allNodes = Array.from(nodeMap.value.values());
+      allNodes.forEach(node => {
+        if (isMatched(node)) {
+          if (node.children?.length) {
+            node.expanded = true;
+          }
+          let p = node.parent;
+          while (p) {
+            p.visible = true;
+            p.expanded = true;
+            p = p.parent;
+          }
+        }
+      });
+      const setVisible = n => {
+        n.visible = true;
+        n.children?.forEach(setVisible);
+      };
+      allNodes.forEach(node => {
+        if (isMatched(node)) {
+          node.children?.forEach(setVisible);
+        }
+      });
+    }
+    mapVersion.value++;
+    (0, _vue.triggerRef)(nodeMap);
+  };
+  const syncData = () => {
+    nodeMap.value.clear();
+    treeData.value = props.data.map(item => createTreeNode(item));
+    if (props.modelValue !== void 0) syncCheckState(props.modelValue);
+    mapVersion.value++;
+  };
+  (0, _vue.watch)(() => props.data, syncData, {
+    immediate: true,
+    deep: true
+  });
+  (0, _vue.watch)(() => props.modelValue, val => syncCheckState(val), {
+    deep: true
+  });
+  return {
+    flatData,
+    nodeMap,
+    treeData,
+    mapVersion,
+    checkNode,
+    toggleExpand,
+    filter,
+    getNode,
+    emitModelValue
+  };
+};
+exports.useTree = useTree;

package/dist/tree-select/src/use-tree.d.ts

@@ -0,0 +1,122 @@
+import type { TreeSelectProps, TreeSelectEmits, TreeSelectNode, TreeKey } from './tree-select';
+export declare const useTree: (props: TreeSelectProps, emit: <T extends keyof TreeSelectEmits>(event: T, ...args: Parameters<TreeSelectEmits[T]>) => void) => {
+    flatData: import("vue").ComputedRef<TreeSelectNode[]>;
+    nodeMap: import("vue").Ref<Map<TreeKey, {
+        key: TreeKey;
+        label: string;
+        level: number;
+        raw: {
+            [x: string]: unknown;
+            value?: TreeKey | undefined;
+            label?: string | undefined;
+            children?: /*elided*/ any[] | undefined;
+            disabled?: boolean | undefined;
+            isLeaf?: boolean | undefined;
+        };
+        parent?: /*elided*/ any | undefined;
+        children?: /*elided*/ any[] | undefined;
+        isLeaf: boolean;
+        disabled: boolean;
+        visible: boolean;
+        expanded: boolean;
+        checked: boolean;
+        indeterminate: boolean;
+        loading: boolean;
+        loaded: boolean;
+    }> & Omit<Map<TreeKey, TreeSelectNode>, keyof Map<any, any>>, Map<TreeKey, TreeSelectNode> | (Map<TreeKey, {
+        key: TreeKey;
+        label: string;
+        level: number;
+        raw: {
+            [x: string]: unknown;
+            value?: TreeKey | undefined;
+            label?: string | undefined;
+            children?: /*elided*/ any[] | undefined;
+            disabled?: boolean | undefined;
+            isLeaf?: boolean | undefined;
+        };
+        parent?: /*elided*/ any | undefined;
+        children?: /*elided*/ any[] | undefined;
+        isLeaf: boolean;
+        disabled: boolean;
+        visible: boolean;
+        expanded: boolean;
+        checked: boolean;
+        indeterminate: boolean;
+        loading: boolean;
+        loaded: boolean;
+    }> & Omit<Map<TreeKey, TreeSelectNode>, keyof Map<any, any>>)>;
+    treeData: import("vue").Ref<{
+        key: TreeKey;
+        label: string;
+        level: number;
+        raw: {
+            [x: string]: unknown;
+            value?: TreeKey | undefined;
+            label?: string | undefined;
+            children?: /*elided*/ any[] | undefined;
+            disabled?: boolean | undefined;
+            isLeaf?: boolean | undefined;
+        };
+        parent?: /*elided*/ any | undefined;
+        children?: /*elided*/ any[] | undefined;
+        isLeaf: boolean;
+        disabled: boolean;
+        visible: boolean;
+        expanded: boolean;
+        checked: boolean;
+        indeterminate: boolean;
+        loading: boolean;
+        loaded: boolean;
+    }[], TreeSelectNode[] | {
+        key: TreeKey;
+        label: string;
+        level: number;
+        raw: {
+            [x: string]: unknown;
+            value?: TreeKey | undefined;
+            label?: string | undefined;
+            children?: /*elided*/ any[] | undefined;
+            disabled?: boolean | undefined;
+            isLeaf?: boolean | undefined;
+        };
+        parent?: /*elided*/ any | undefined;
+        children?: /*elided*/ any[] | undefined;
+        isLeaf: boolean;
+        disabled: boolean;
+        visible: boolean;
+        expanded: boolean;
+        checked: boolean;
+        indeterminate: boolean;
+        loading: boolean;
+        loaded: boolean;
+    }[]>;
+    mapVersion: import("vue").Ref<number, number>;
+    checkNode: (node: TreeSelectNode, checked: boolean) => void;
+    toggleExpand: (node: TreeSelectNode) => void;
+    filter: (val: string) => void;
+    getNode: (key: TreeKey) => {
+        key: TreeKey;
+        label: string;
+        level: number;
+        raw: {
+            [x: string]: unknown;
+            value?: TreeKey | undefined;
+            label?: string | undefined;
+            children?: /*elided*/ any[] | undefined;
+            disabled?: boolean | undefined;
+            isLeaf?: boolean | undefined;
+        };
+        parent?: /*elided*/ any | undefined;
+        children?: /*elided*/ any[] | undefined;
+        isLeaf: boolean;
+        disabled: boolean;
+        visible: boolean;
+        expanded: boolean;
+        checked: boolean;
+        indeterminate: boolean;
+        loading: boolean;
+        loaded: boolean;
+    } | undefined;
+    emitModelValue: () => void;
+};