tuikit-atomicx-vue3 0.1.0

package/dist/components/UserPicker/components/SearchBar/SearchBar.js

@@ -0,0 +1,71 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, createBlock, createCommentVNode, unref } from "vue";
+import { IconSearch, IconClose } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["placeholder", "value"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchBar",
+  props: {
+    placeholder: {},
+    onSearch: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const value = ref("");
+    const handleChange = (e) => {
+      console.log("handleChange", e);
+      const target = e.target;
+      const newValue = target.value;
+      value.value = newValue;
+      props.onSearch(newValue);
+    };
+    const handleClear = () => {
+      value.value = "";
+      props.onSearch("");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style["search__bar"])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["search__input-wrapper"])
+        }, [
+          createVNode(unref(IconSearch), {
+            name: "search",
+            class: normalizeClass(_ctx.$style.search__icon)
+          }, null, 8, ["class"]),
+          createElementVNode("input", {
+            type: "text",
+            class: normalizeClass(_ctx.$style.search__input),
+            placeholder: _ctx.placeholder,
+            value: value.value,
+            onInput: handleChange
+          }, null, 42, _hoisted_1),
+          value.value ? (openBlock(), createBlock(unref(IconClose), {
+            key: 0,
+            name: "close",
+            class: normalizeClass(_ctx.$style["search__clear-icon"]),
+            size: "12px",
+            onClick: handleClear
+          }, null, 8, ["class"])) : createCommentVNode("", true)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const search__bar = "_search__bar_ufjq9_1";
+const search__icon = "_search__icon_ufjq9_14";
+const search__input = "_search__input_ufjq9_4";
+const style0 = {
+  search__bar,
+  "search__input-wrapper": "_search__input-wrapper_ufjq9_4",
+  search__icon,
+  search__input,
+  "search__clear-icon": "_search__clear-icon_ufjq9_31"
+};
+const cssModules = {
+  "$style": style0
+};
+const SearchBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  SearchBar as default
+};

package/dist/components/UserPicker/components/SearchBar/SearchBar.vue.d.ts

@@ -0,0 +1,15 @@
+interface SearchBarProps {
+    placeholder?: string;
+    onSearch: (value: string) => void;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SearchBarProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SearchBarProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/UserPicker/components/SearchBar/index.d.ts

@@ -0,0 +1,3 @@
+import { default as SearchBar } from './SearchBar.vue';
+
+export default SearchBar;

package/dist/components/UserPicker/components/SearchBar/index.js

@@ -0,0 +1,4 @@
+import SearchBar from "./SearchBar.js";
+export {
+  SearchBar as default
+};

package/dist/components/UserPicker/components/SelectedPanel/SelectedPanel.js

@@ -0,0 +1,112 @@
+import { defineComponent, computed, createElementBlock, createCommentVNode, openBlock, normalizeClass, createElementVNode, toDisplayString, unref, createTextVNode, Fragment, renderList, createVNode } from "vue";
+import { useUIKit, IconClose } from "@tencentcloud/uikit-base-component-vue3";
+import Avatar from "../../../Avatar/Avatar.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SelectedPanel",
+  props: {
+    displayMode: {},
+    selectedItems: {},
+    lockedKeys: {},
+    onRemove: {},
+    maxCount: { default: Number.POSITIVE_INFINITY }
+  },
+  setup(__props) {
+    const { t } = useUIKit();
+    const props = __props;
+    const leafItems = computed(() => {
+      if (props.displayMode === "list") {
+        return props.selectedItems;
+      }
+      if (props.displayMode === "tree") {
+        return props.selectedItems.filter((item) => item.isLeafNode);
+      }
+      return [];
+    });
+    const InfinityValue = Number.POSITIVE_INFINITY;
+    return (_ctx, _cache) => {
+      return leafItems.value.length > 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.$style.selected__panel)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.selected__header)
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass(_ctx.$style.selected__title)
+          }, toDisplayString(unref(t)("TUIChat.Selected")), 3),
+          createElementVNode("span", {
+            class: normalizeClass(_ctx.$style.selected__count)
+          }, [
+            createTextVNode(toDisplayString(leafItems.value.length) + " ", 1),
+            _ctx.maxCount < unref(InfinityValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createTextVNode(" / " + toDisplayString(_ctx.maxCount), 1)
+            ], 64)) : createCommentVNode("", true)
+          ], 2)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.selected__list)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(leafItems.value, (item) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.key,
+              class: normalizeClass(_ctx.$style.selected__item)
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["selected__item-content"])
+              }, [
+                createVNode(unref(Avatar), {
+                  src: item.avatarUrl,
+                  class: normalizeClass(_ctx.$style["selected__item-avatar"]),
+                  size: "sm",
+                  alt: item.label
+                }, null, 8, ["src", "class", "alt"]),
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.$style["selected__item-label"])
+                }, toDisplayString(item.label), 3)
+              ], 2),
+              !_ctx.lockedKeys.has(item.key) ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                type: "button",
+                class: normalizeClass(_ctx.$style["selected__remove-button"]),
+                "aria-label": "remove",
+                onClick: ($event) => _ctx.onRemove(item.key)
+              }, [
+                createVNode(unref(IconClose), {
+                  name: "close",
+                  size: "12px"
+                })
+              ], 10, _hoisted_1)) : createCommentVNode("", true)
+            ], 2);
+          }), 128))
+        ], 2)
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const selected__panel = "_selected__panel_1phj6_12";
+const selected__header = "_selected__header_1phj6_17";
+const selected__title = "_selected__title_1phj6_23";
+const selected__count = "_selected__count_1phj6_28";
+const selected__list = "_selected__list_1phj6_32";
+const selected__item = "_selected__item_1phj6_55";
+const style0 = {
+  selected__panel,
+  selected__header,
+  selected__title,
+  selected__count,
+  selected__list,
+  selected__item,
+  "selected__item-content": "_selected__item-content_1phj6_64",
+  "selected__item-avatar": "_selected__item-avatar_1phj6_70",
+  "selected__item-label": "_selected__item-label_1phj6_83",
+  "selected__remove-button": "_selected__remove-button_1phj6_91"
+};
+const cssModules = {
+  "$style": style0
+};
+const SelectedPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  SelectedPanel as default
+};

package/dist/components/UserPicker/components/SelectedPanel/SelectedPanel.vue.d.ts

@@ -0,0 +1,34 @@
+import { IUserPickerResult } from '../../type';
+
+interface SelectedPanelProps {
+    displayMode: 'list' | 'tree';
+    selectedItems: IUserPickerResult;
+    lockedKeys: Set<string>;
+    onRemove: (key: string) => void;
+    maxCount?: number;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectedPanelProps>, {
+    maxCount: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectedPanelProps>, {
+    maxCount: number;
+}>>> & Readonly<{}>, {
+    maxCount: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/UserPicker/components/SelectedPanel/index.d.ts

@@ -0,0 +1,3 @@
+import { default as SelectedPanel } from './SelectedPanel.vue';
+
+export default SelectedPanel;

package/dist/components/UserPicker/components/SelectedPanel/index.js

@@ -0,0 +1,4 @@
+import SelectedPanel from "./SelectedPanel.js";
+export {
+  SelectedPanel as default
+};

package/dist/components/UserPicker/components/TreeMode/TreeMode.js

@@ -0,0 +1,57 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createBlock } from "vue";
+import TreeNode from "./TreeNode.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TreeMode",
+  props: {
+    dataSource: {},
+    selectedKeys: {},
+    halfSelectedKeys: {},
+    lockedKeys: {},
+    expandedKeys: {},
+    loadingKeys: {},
+    onItemClick: { type: Function },
+    onExpand: { type: Function },
+    renderItem: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return _ctx.dataSource.length === 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.$style.tree__empty)
+      }, "No data available", 2)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(_ctx.$style.tree__container)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dataSource, (node) => {
+          return openBlock(), createBlock(TreeNode, {
+            key: node.key,
+            node,
+            level: 0,
+            "selected-keys": _ctx.selectedKeys,
+            "half-selected-keys": _ctx.halfSelectedKeys,
+            "locked-keys": _ctx.lockedKeys,
+            "expanded-keys": _ctx.expandedKeys,
+            "loading-keys": _ctx.loadingKeys,
+            "render-item": _ctx.renderItem,
+            onItemClick: _ctx.onItemClick,
+            onExpand: _ctx.onExpand
+          }, null, 8, ["node", "selected-keys", "half-selected-keys", "locked-keys", "expanded-keys", "loading-keys", "render-item", "onItemClick", "onExpand"]);
+        }), 128))
+      ], 2));
+    };
+  }
+});
+const tree__container = "_tree__container_1fo8v_1";
+const tree__empty = "_tree__empty_1fo8v_21";
+const style0 = {
+  tree__container,
+  tree__empty
+};
+const cssModules = {
+  "$style": style0
+};
+const TreeMode = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  TreeMode as default
+};

package/dist/components/UserPicker/components/TreeMode/TreeMode.vue.d.ts

@@ -0,0 +1,24 @@
+import { IUserPickerNode } from '../../type';
+
+interface TreeModeProps<T = unknown> {
+    dataSource: IUserPickerNode<T>[];
+    selectedKeys: Set<string>;
+    halfSelectedKeys: Set<string>;
+    lockedKeys: Set<string>;
+    expandedKeys: Set<string>;
+    loadingKeys: Set<string>;
+    onItemClick: (key: string) => void;
+    onExpand: (node: IUserPickerNode<T>) => void;
+    renderItem?: any;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TreeModeProps<unknown>>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TreeModeProps<unknown>>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/UserPicker/components/TreeMode/TreeNode.js

@@ -0,0 +1,173 @@
+import { defineComponent, computed, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, normalizeStyle, createBlock, unref, resolveDynamicComponent, toDisplayString, createVNode, Fragment, renderList } from "vue";
+import { IconArrowDown, IconCheckSm, IconLoading } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["data-level"];
+const _hoisted_2 = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "currentColor"
+};
+const _hoisted_3 = ["data-level"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TreeNode",
+  props: {
+    node: {},
+    level: {},
+    selectedKeys: {},
+    halfSelectedKeys: {},
+    lockedKeys: {},
+    expandedKeys: {},
+    loadingKeys: {},
+    renderItem: {}
+  },
+  emits: ["item-click", "expand"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isSelected = computed(() => props.selectedKeys.has(props.node.key));
+    const isHalfSelected = computed(() => props.halfSelectedKeys.has(props.node.key));
+    const isLocked = computed(() => props.lockedKeys.has(props.node.key));
+    const isExpanded = computed(() => props.expandedKeys.has(props.node.key));
+    const isLoading = computed(() => props.loadingKeys.has(props.node.key));
+    const hasChildren = computed(() => props.node.children && props.node.children.length > 0);
+    const isLazyLoading = computed(() => isExpanded.value && props.node.lazyLoad && isLoading.value);
+    const handleItemClick = () => {
+      if (!isLocked.value) {
+        emit("item-click", props.node.key);
+      }
+    };
+    const handleExpand = (e) => {
+      e.stopPropagation();
+      emit("expand", props.node);
+    };
+    return (_ctx, _cache) => {
+      const _component_TreeNode = resolveComponent("TreeNode", true);
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style["tree__node-wrapper"])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([
+            _ctx.$style.tree__node,
+            {
+              [_ctx.$style["tree__node--selected"]]: isSelected.value,
+              [_ctx.$style["tree__node--half-selected"]]: isHalfSelected.value,
+              [_ctx.$style["tree__node--locked"]]: isLocked.value
+            }
+          ])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["tree__node-content"]),
+            "data-level": _ctx.level,
+            style: normalizeStyle({ paddingLeft: `${_ctx.level * 20 + (_ctx.level > 0 && _ctx.node.isLeafNode ? 24 + 8 : 0)}px` })
+          }, [
+            !_ctx.node.isLeafNode ? (openBlock(), createBlock(unref(IconArrowDown), {
+              key: 0,
+              name: "arrow-down",
+              class: normalizeClass([_ctx.$style["tree__expand-icon"], { [_ctx.$style["tree__expand-icon--expanded"]]: isExpanded.value }]),
+              size: 20,
+              onClick: handleExpand
+            }, null, 8, ["class"])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["tree__checkbox-wrapper"]),
+              onClick: handleItemClick
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass([
+                  _ctx.$style.tree__checkbox,
+                  {
+                    [_ctx.$style["tree__checkbox--checked"]]: isSelected.value,
+                    [_ctx.$style["tree__checkbox--half-checked"]]: isHalfSelected.value
+                  }
+                ])
+              }, [
+                isHalfSelected.value ? (openBlock(), createElementBlock("svg", _hoisted_2, _cache[2] || (_cache[2] = [
+                  createElementVNode("path", { d: "M19 13H5v-2h14v2z" }, null, -1)
+                ]))) : isSelected.value ? (openBlock(), createBlock(unref(IconCheckSm), {
+                  key: 1,
+                  name: "check"
+                })) : createCommentVNode("", true)
+              ], 2)
+            ], 2),
+            _ctx.renderItem ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderItem), {
+              key: 1,
+              node: _ctx.node
+            }, null, 8, ["node"])) : (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: normalizeClass(_ctx.$style["tree__node-label"])
+            }, [
+              _cache[3] || (_cache[3] = createElementVNode("span", null, "头像", -1)),
+              createElementVNode("span", {
+                class: normalizeClass(_ctx.$style.tree__label)
+              }, toDisplayString(_ctx.node.label), 3)
+            ], 2))
+          ], 14, _hoisted_1)
+        ], 2),
+        hasChildren.value && isExpanded.value || isLazyLoading.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style["tree__child-nodes"])
+        }, [
+          isLazyLoading.value && !hasChildren.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style["tree__loading-container"]),
+            "data-level": _ctx.level + 1,
+            style: normalizeStyle({ paddingLeft: `${(_ctx.level + 1) * 20 + (24 + 8 + 8)}px` })
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style["tree__loading-indicator"])
+            }, [
+              createVNode(unref(IconLoading))
+            ], 2)
+          ], 14, _hoisted_3)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.node.children, (childNode) => {
+            return openBlock(), createBlock(_component_TreeNode, {
+              key: childNode.key,
+              node: childNode,
+              level: _ctx.level + 1,
+              "selected-keys": _ctx.selectedKeys,
+              "half-selected-keys": _ctx.halfSelectedKeys,
+              "locked-keys": _ctx.lockedKeys,
+              "expanded-keys": _ctx.expandedKeys,
+              "loading-keys": _ctx.loadingKeys,
+              "render-item": _ctx.renderItem,
+              onItemClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("item-click", $event)),
+              onExpand: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("expand", $event))
+            }, null, 8, ["node", "level", "selected-keys", "half-selected-keys", "locked-keys", "expanded-keys", "loading-keys", "render-item"]);
+          }), 128))
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const tree__node = "_tree__node_19f24_1";
+const tree__checkbox = "_tree__checkbox_19f24_47";
+const tree__label = "_tree__label_19f24_75";
+const tree__avatar = "_tree__avatar_19f24_83";
+const style0 = {
+  "tree__node-wrapper": "_tree__node-wrapper_19f24_1",
+  tree__node,
+  "tree__node--selected": "_tree__node--selected_19f24_12",
+  "tree__node--half-selected": "_tree__node--half-selected_19f24_18",
+  "tree__node--locked": "_tree__node--locked_19f24_21",
+  "tree__node-content": "_tree__node-content_19f24_25",
+  "tree__expand-icon": "_tree__expand-icon_19f24_30",
+  "tree__expand-icon--expanded": "_tree__expand-icon--expanded_19f24_41",
+  "tree__checkbox-wrapper": "_tree__checkbox-wrapper_19f24_47",
+  tree__checkbox,
+  "tree__checkbox--checked": "_tree__checkbox--checked_19f24_61",
+  "tree__checkbox--half-checked": "_tree__checkbox--half-checked_19f24_65",
+  "tree__node-label": "_tree__node-label_19f24_69",
+  tree__label,
+  tree__avatar,
+  "tree__child-nodes": "_tree__child-nodes_19f24_95",
+  "tree__loading-container": "_tree__loading-container_19f24_98",
+  "tree__loading-indicator": "_tree__loading-indicator_19f24_102",
+  "tree-spin": "_tree-spin_19f24_1"
+};
+const cssModules = {
+  "$style": style0
+};
+const TreeNode = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  TreeNode as default
+};

package/dist/components/UserPicker/components/TreeMode/TreeNode.vue.d.ts

@@ -0,0 +1,29 @@
+import { IUserPickerNode } from '../../type';
+
+interface TreeNodeProps<T = unknown> {
+    node: IUserPickerNode<T>;
+    level: number;
+    selectedKeys: Set<string>;
+    halfSelectedKeys: Set<string>;
+    lockedKeys: Set<string>;
+    expandedKeys: Set<string>;
+    loadingKeys: Set<string>;
+    renderItem?: any;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TreeNodeProps<unknown>>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "item-click": (key: string) => void;
+    expand: (node: IUserPickerNode<any>) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TreeNodeProps<unknown>>>> & Readonly<{
+    "onItem-click"?: ((key: string) => any) | undefined;
+    onExpand?: ((node: IUserPickerNode<any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/UserPicker/components/TreeMode/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TreeMode } from './TreeMode.vue';
+
+export default TreeMode;

package/dist/components/UserPicker/components/TreeMode/index.js

@@ -0,0 +1,4 @@
+import TreeMode from "./TreeMode.js";
+export {
+  TreeMode as default
+};

package/dist/components/UserPicker/hooks/useSearchFilter.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from 'vue';
+import { IUserPickerDataSource } from '../type';
+
+interface UseSearchFilterOptions<T = unknown> {
+    dataSource: Ref<IUserPickerDataSource<T>>;
+    isTreeMode?: boolean;
+    onSearch?: (value: string) => void;
+    debounceTime?: number;
+}
+interface UseSearchFilterReturn<T = unknown> {
+    searchValue: Ref<string>;
+    setSearchValue: (value: string) => void;
+    filteredData: Ref<IUserPickerDataSource<T>>;
+    isSearching: Ref<boolean>;
+    handleSearch: (value: string) => void;
+    clearSearch: () => void;
+    isSearchEmpty: Ref<boolean>;
+}
+export declare function useSearchFilter<T = unknown>({ dataSource, isTreeMode, onSearch, debounceTime, }: UseSearchFilterOptions<T>): UseSearchFilterReturn<T>;
+export {};

package/dist/components/UserPicker/hooks/useSearchFilter.js

@@ -0,0 +1,91 @@
+import { ref, computed } from "vue";
+function isTreeDataSource(data) {
+  if (data.length === 0) {
+    return false;
+  }
+  return "isLeafNode" in data[0];
+}
+function searchTreeNodes(nodes, searchValue) {
+  if (!searchValue.trim()) {
+    return nodes;
+  }
+  const isNodeMatched = (node) => node.label.toLowerCase().includes(searchValue.toLowerCase());
+  const searchNodes = (nodesList) => {
+    const matchedNodes = [];
+    nodesList.forEach((node) => {
+      const isMatched = isNodeMatched(node);
+      let matchedChildren = [];
+      if (node.children && node.children.length) {
+        matchedChildren = searchNodes(node.children);
+      }
+      if (isMatched || matchedChildren.length > 0) {
+        matchedNodes.push({
+          ...node,
+          children: matchedChildren.length > 0 ? matchedChildren : node.children
+        });
+      }
+    });
+    return matchedNodes;
+  };
+  return searchNodes(nodes);
+}
+function searchListItems(items, searchValue) {
+  if (!searchValue.trim()) {
+    return items;
+  }
+  return items.filter((item) => item.label.toLowerCase().includes(searchValue.toLowerCase()));
+}
+function useSearchFilter({
+  dataSource,
+  isTreeMode = false,
+  onSearch,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  debounceTime = 300
+}) {
+  const searchValue = ref("");
+  const isSearching = ref(false);
+  const filteredData = computed(() => {
+    if (!searchValue.value.trim()) {
+      return dataSource.value;
+    }
+    if (isTreeMode && isTreeDataSource(dataSource.value)) {
+      return searchTreeNodes(dataSource.value, searchValue.value);
+    }
+    return searchListItems(dataSource.value, searchValue.value);
+  });
+  const handleSearch = (value) => {
+    isSearching.value = true;
+    searchValue.value = value;
+    if (onSearch) {
+      onSearch(value);
+    }
+    isSearching.value = false;
+  };
+  const clearSearch = () => {
+    searchValue.value = "";
+    if (onSearch) {
+      onSearch("");
+    }
+  };
+  const setSearchValue = (value) => {
+    searchValue.value = value;
+  };
+  const isSearchEmpty = computed(() => {
+    if (!searchValue.value.trim()) {
+      return false;
+    }
+    return Array.isArray(filteredData.value) && filteredData.value.length === 0;
+  });
+  return {
+    searchValue,
+    setSearchValue,
+    filteredData,
+    isSearching,
+    handleSearch,
+    clearSearch,
+    isSearchEmpty
+  };
+}
+export {
+  useSearchFilter
+};