tuikit-atomicx-vue3 0.1.0

package/dist/components/UserList/UserListContent/index.js

@@ -0,0 +1,56 @@
+import { defineComponent, computed, createElementBlock, openBlock, Fragment, renderList, renderSlot, createBlock, unref } from "vue";
+import indexPC from "../UserItem/indexPC.js";
+import { useUserState } from "../../../states/UserState/index.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  id: "memberListContainer",
+  class: "user-list-content"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    searchFn: { type: Function, default: (userInfo, searchText) => {
+      var _a, _b;
+      return ((_a = userInfo.nameCard) == null ? void 0 : _a.includes(searchText)) || ((_b = userInfo.userName) == null ? void 0 : _b.includes(searchText)) || userInfo.userId.includes(searchText);
+    } },
+    sortFn: {},
+    filterFn: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { userList, userSearchText } = useUserState();
+    const showUserList = computed(() => {
+      let tempUserList = userList.value;
+      if (props.filterFn) {
+        tempUserList = tempUserList.filter(props.filterFn);
+      }
+      if (userSearchText) {
+        tempUserList = tempUserList.filter(
+          (item) => props.searchFn(item, userSearchText.value)
+        );
+      }
+      return tempUserList;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(showUserList.value, (userInfo) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: userInfo.userId
+          }, [
+            _ctx.$slots.userItem ? renderSlot(_ctx.$slots, "userItem", {
+              key: 0,
+              userInfo
+            }, void 0, true) : (openBlock(), createBlock(unref(indexPC), {
+              key: 1,
+              "user-info": userInfo
+            }, null, 8, ["user-info"]))
+          ], 64);
+        }), 128))
+      ]);
+    };
+  }
+});
+const UserListContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-725382f3"]]);
+export {
+  UserListContent as default
+};

package/dist/components/UserList/UserListContent/index.vue.d.ts

@@ -0,0 +1,44 @@
+import { UserInfo } from '../../../types';
+import { Comparator } from '../../../utils/utils';
+
+interface Props {
+    searchFn?: (userInfo: UserInfo, searchText: string) => boolean;
+    sortFn?: Comparator<UserInfo>;
+    filterFn?: (userInfo: UserInfo) => boolean;
+}
+declare function __VLS_template(): {
+    userItem?(_: {
+        userInfo: UserInfo;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    searchFn: (userInfo: UserInfo, searchText: string) => boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    searchFn: (userInfo: UserInfo, searchText: string) => boolean;
+}>>> & Readonly<{}>, {
+    searchFn: (userInfo: UserInfo, searchText: string) => boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UserList/UserListSearch/index.js

@@ -0,0 +1,30 @@
+import { defineComponent, createElementBlock, openBlock, createVNode, withDirectives, unref, createElementVNode, isRef, vModelText } from "vue";
+import { IconSearch } from "@tencentcloud/uikit-base-component-vue3";
+import { useI18n } from "../../../locales/index.js";
+import { useUserState } from "../../../states/UserState/index.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "user-search-content" };
+const _hoisted_2 = ["placeholder"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const { t } = useI18n();
+    const { userSearchText } = useUserState();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(IconSearch), { size: "20" }),
+        withDirectives(createElementVNode("input", {
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(userSearchText) ? userSearchText.value = $event : null),
+          class: "search-input",
+          placeholder: unref(t)("Search Member")
+        }, null, 8, _hoisted_2), [
+          [vModelText, unref(userSearchText)]
+        ])
+      ]);
+    };
+  }
+});
+const UserListSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ed0c1c7c"]]);
+export {
+  UserListSearch as default
+};

package/dist/components/UserList/UserListSearch/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/UserList/index.js

@@ -0,0 +1,92 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, createVNode, createCommentVNode, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createSlots, withCtx, renderSlot, unref } from "vue";
+import UserListSearch from "./UserListSearch/index.js";
+import UserListContent from "./UserListContent/index.js";
+import indexPC from "./AllUserActions/indexPC.js";
+import { useUserState } from "../../states/UserState/index.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "user-list-container" };
+const _hoisted_2 = {
+  key: 0,
+  class: "user-category-content"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "user-category-title" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    sortFn: { type: Function },
+    userCategoryList: {}
+  },
+  setup(__props) {
+    var _a, _b;
+    const props = __props;
+    const { userList } = useUserState();
+    const activeCategoryKey = ref(
+      ((_b = (_a = props.userCategoryList) == null ? void 0 : _a[0]) == null ? void 0 : _b.key) || ""
+    );
+    const activeCategory = computed(
+      () => {
+        var _a2;
+        return (_a2 = props.userCategoryList) == null ? void 0 : _a2.find((item) => item.key === activeCategoryKey.value);
+      }
+    );
+    function handleSwitchCategory(item) {
+      activeCategoryKey.value = item.key;
+    }
+    const filterUserListObj = computed(() => {
+      var _a2;
+      const filterUserCategoryObj = {};
+      (_a2 = props.userCategoryList) == null ? void 0 : _a2.forEach((item) => {
+        if (item.filterFn) {
+          filterUserCategoryObj[item.key] = userList.value.filter(item.filterFn);
+        } else {
+          filterUserCategoryObj[item.key] = userList.value;
+        }
+      });
+      return filterUserCategoryObj;
+    });
+    return (_ctx, _cache) => {
+      var _a2, _b2, _c, _d;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(UserListSearch),
+        ((_a2 = _ctx.userCategoryList) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.userCategoryList, (item, index2) => {
+            var _a3, _b3;
+            return openBlock(), createElementBlock("div", {
+              key: index2,
+              class: normalizeClass([
+                "user-category",
+                {
+                  "user-category-active": item.key === activeCategoryKey.value
+                }
+              ]),
+              onClick: ($event) => handleSwitchCategory(item)
+            }, [
+              createElementVNode("span", _hoisted_4, toDisplayString(`${item.title} (${(_b3 = (_a3 = filterUserListObj.value) == null ? void 0 : _a3[item.key]) == null ? void 0 : _b3.length})`), 1)
+            ], 10, _hoisted_3);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        createVNode(UserListContent, {
+          filterFn: (_b2 = activeCategory.value) == null ? void 0 : _b2.filterFn,
+          sortFn: props.sortFn
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.userItem ? {
+            name: "userItem",
+            fn: withCtx(({ userInfo }) => [
+              renderSlot(_ctx.$slots, "userItem", { userInfo }, void 0, true)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["filterFn", "sortFn"]),
+        createVNode(unref(indexPC), {
+          activeCategoryKey: activeCategoryKey.value,
+          userCategoryNumber: ((_d = (_c = filterUserListObj.value) == null ? void 0 : _c[activeCategoryKey.value]) == null ? void 0 : _d.length) || 0
+        }, null, 8, ["activeCategoryKey", "userCategoryNumber"])
+      ]);
+    };
+  }
+});
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-62854920"]]);
+export {
+  index as default
+};

package/dist/components/UserList/index.vue.d.ts

@@ -0,0 +1,34 @@
+import { Comparator } from '../../utils/utils';
+import { UserInfo } from '../../types';
+
+interface UserCategory {
+    key: string;
+    title: string;
+    filterFn: (userInfo: UserInfo) => boolean;
+}
+interface Props {
+    sortFn?: Comparator<UserInfo>;
+    userCategoryList?: UserCategory[];
+}
+declare function __VLS_template(): {
+    userItem?(_: {
+        userInfo: UserInfo;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UserPicker/UserPicker.js

@@ -0,0 +1,187 @@
+import { defineComponent, computed, ref, watch, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, createElementVNode, createVNode, unref, toDisplayString } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import ListMode from "./components/ListMode/ListMode.js";
+import SearchBar from "./components/SearchBar/SearchBar.js";
+import SelectedPanel from "./components/SelectedPanel/SelectedPanel.js";
+import TreeMode from "./components/TreeMode/TreeMode.js";
+import { useSearchFilter } from "./hooks/useSearchFilter.js";
+import { useSelection } from "./hooks/useSelection.js";
+import { useTreeState } from "./hooks/useTreeState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["data-display-mode"];
+const _hoisted_2 = ["data-display-mode"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UserPicker",
+  props: {
+    displayMode: {},
+    dataSource: { default: () => [] },
+    defaultSelectedItems: { default: () => [] },
+    lockedItems: { default: () => [] },
+    maxCount: { default: Number.POSITIVE_INFINITY },
+    minCount: { default: 0 },
+    onMaxCountExceed: {},
+    enableSearch: { type: Boolean, default: true },
+    searchPlaceholder: {},
+    onSearch: {},
+    renderItem: {},
+    onSelectedChange: {},
+    onReachEnd: {},
+    onExpand: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const { t } = useUIKit();
+    const isTreeMode = computed(() => props.displayMode === "tree");
+    const internalDataSource = ref(props.dataSource);
+    const defaultSelectedKeys = computed(() => props.defaultSelectedItems.map((item) => item.key));
+    const lockedKeys = computed(() => props.lockedItems.map((item) => item.key));
+    const selectionManager = useSelection({
+      defaultSelectedKeys: defaultSelectedKeys.value,
+      lockedKeys: lockedKeys.value,
+      maxCount: props.maxCount,
+      minCount: props.minCount,
+      isTreeMode: isTreeMode.value,
+      dataSource: internalDataSource,
+      onSelectedChange: props.onSelectedChange || (() => {
+      }),
+      onMaxCountExceed: props.onMaxCountExceed || (() => {
+      })
+    });
+    const searchManager = useSearchFilter({
+      dataSource: internalDataSource,
+      isTreeMode: isTreeMode.value,
+      onSearch: props.onSearch || (() => {
+      })
+    });
+    const treeStateManager = useTreeState({
+      onExpand: (node) => {
+        if (props.onExpand) {
+          props.onExpand(node);
+        }
+      }
+    });
+    watch(
+      () => props.dataSource,
+      (newDataSource) => {
+        if (!isTreeMode.value) {
+          internalDataSource.value = newDataSource;
+        }
+      },
+      { deep: true }
+    );
+    const updateNodeByKey = (nodeKey, partialNode) => {
+      if (!isTreeMode.value) {
+        return;
+      }
+      const newData = JSON.parse(JSON.stringify(internalDataSource.value));
+      const updateNode = (nodes) => {
+        for (let i = 0; i < nodes.length; i += 1) {
+          if (nodes[i].key === nodeKey) {
+            const updatedNode = {
+              ...nodes[i],
+              // Keep original properties
+              ...partialNode,
+              // Apply update properties
+              key: nodes[i].key
+              // Ensure key is not overwritten
+            };
+            if (partialNode.children && nodes[i].lazyLoad) {
+              updatedNode.lazyLoad = false;
+            }
+            const newNodes = [...nodes];
+            newNodes[i] = updatedNode;
+            nodes.splice(0, nodes.length, ...newNodes);
+            return true;
+          }
+          const { children } = nodes[i];
+          if (children && Array.isArray(children) && children.length > 0) {
+            if (updateNode(children)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      };
+      if (Array.isArray(newData)) {
+        updateNode(newData);
+      }
+      internalDataSource.value = newData;
+      if (partialNode.children) {
+        treeStateManager.setNodeLoading(nodeKey, false);
+      }
+    };
+    const refMethods = {
+      getSelectedItems: () => selectionManager.getSelectedItems(),
+      updateListData: (newDataSource) => {
+        if (!isTreeMode.value) {
+          internalDataSource.value = newDataSource;
+        }
+      },
+      updateTreeData: (nodeKey, partialNode) => {
+        updateNodeByKey(nodeKey, partialNode);
+      }
+    };
+    __expose(refMethods);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style["user-picker"]),
+        "data-display-mode": _ctx.displayMode
+      }, [
+        _ctx.enableSearch ? (openBlock(), createBlock(unref(SearchBar), {
+          key: 0,
+          placeholder: _ctx.searchPlaceholder || unref(t)("TUIConversation.Search"),
+          "on-search": unref(searchManager).handleSearch
+        }, null, 8, ["placeholder", "on-search"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["user-picker__panel"]),
+          "data-display-mode": _ctx.displayMode
+        }, [
+          unref(searchManager).isSearchEmpty.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style["empty-search"])
+          }, toDisplayString(unref(t)("TUIChat.No Result")), 3)) : !isTreeMode.value ? (openBlock(), createBlock(unref(ListMode), {
+            key: 1,
+            "data-source": unref(searchManager).filteredData.value,
+            "selected-keys": unref(selectionManager).selectedKeys.value,
+            "locked-keys": unref(selectionManager).lockedKeys.value,
+            "on-item-click": unref(selectionManager).toggle,
+            "on-reach-end": _ctx.onReachEnd || (() => {
+            }),
+            "render-item": _ctx.renderItem
+          }, null, 8, ["data-source", "selected-keys", "locked-keys", "on-item-click", "on-reach-end", "render-item"])) : (openBlock(), createBlock(unref(TreeMode), {
+            key: 2,
+            "data-source": unref(searchManager).filteredData.value,
+            "selected-keys": unref(selectionManager).selectedKeys.value,
+            "half-selected-keys": unref(selectionManager).halfSelectedKeys.value,
+            "locked-keys": unref(selectionManager).lockedKeys.value,
+            "expanded-keys": unref(treeStateManager).expandedKeys.value,
+            "loading-keys": unref(treeStateManager).loadingKeys.value,
+            "on-item-click": unref(selectionManager).toggle,
+            "on-expand": unref(treeStateManager).toggleExpand,
+            "render-item": _ctx.renderItem
+          }, null, 8, ["data-source", "selected-keys", "half-selected-keys", "locked-keys", "expanded-keys", "loading-keys", "on-item-click", "on-expand", "render-item"]))
+        ], 10, _hoisted_2),
+        createVNode(unref(SelectedPanel), {
+          "display-mode": _ctx.displayMode,
+          "selected-items": unref(selectionManager).getSelectedItems(),
+          "locked-keys": unref(selectionManager).lockedKeys.value,
+          "on-remove": unref(selectionManager).toggle,
+          "max-count": _ctx.maxCount
+        }, null, 8, ["display-mode", "selected-items", "locked-keys", "on-remove", "max-count"])
+      ], 10, _hoisted_1);
+    };
+  }
+});
+const style0 = {
+  "user-picker": "_user-picker_ud8xb_1",
+  "user-picker__panel": "_user-picker__panel_ud8xb_8",
+  "user-picker__empty-search": "_user-picker__empty-search_ud8xb_17",
+  "user-picker__selection-status": "_user-picker__selection-status_ud8xb_25"
+};
+const cssModules = {
+  "$style": style0
+};
+const UserPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  UserPicker as default
+};

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

@@ -0,0 +1,53 @@
+import { IUserPickerProps, IUserPickerNode, IUserPickerRow } from './type';
+
+type UserPickerProps = IUserPickerProps<any>;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<UserPickerProps>, {
+    dataSource: () => never[];
+    defaultSelectedItems: () => never[];
+    lockedItems: () => never[];
+    maxCount: number;
+    minCount: number;
+    enableSearch: boolean;
+}>>, {
+    getSelectedItems: () => import('./type').IUserPickerResult<any>;
+    updateListData: (newDataSource: IUserPickerRow<any>[]) => void;
+    updateTreeData: (key: string, partialNewNode: Partial<IUserPickerNode<any>>) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<UserPickerProps>, {
+    dataSource: () => never[];
+    defaultSelectedItems: () => never[];
+    lockedItems: () => never[];
+    maxCount: number;
+    minCount: number;
+    enableSearch: boolean;
+}>>> & Readonly<{}>, {
+    dataSource: import('./type').IUserPickerDataSource<any>;
+    maxCount: number;
+    minCount: number;
+    defaultSelectedItems: Array<{
+        key: string;
+        [key: string]: any;
+    }>;
+    lockedItems: Array<{
+        key: string;
+        [key: string]: any;
+    }>;
+    enableSearch: boolean;
+}, {}, {}, {}, 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/ListMode/ListMode.js

@@ -0,0 +1,122 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, toDisplayString, unref, Fragment, renderList, createElementVNode, createBlock, createCommentVNode, resolveDynamicComponent, createVNode } from "vue";
+import { useUIKit, IconCheckSm } 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: "ListMode",
+  props: {
+    dataSource: {},
+    selectedKeys: {},
+    lockedKeys: {},
+    onItemClick: { type: Function },
+    onReachEnd: { type: Function },
+    renderItem: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const isSelected = (key) => props.selectedKeys.has(key);
+    const isLocked = (key) => props.lockedKeys.has(key);
+    const handleItemClick = (key) => {
+      if (!isLocked(key)) {
+        props.onItemClick(key);
+      }
+    };
+    const handleScroll = (e) => {
+      if (!props.onReachEnd) {
+        return;
+      }
+      const target = e.currentTarget;
+      const { scrollTop, scrollHeight, clientHeight } = target;
+      if (scrollHeight - scrollTop - clientHeight < 50) {
+        props.onReachEnd();
+      }
+    };
+    return (_ctx, _cache) => {
+      return _ctx.dataSource.length === 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.$style.list__empty)
+      }, toDisplayString(unref(t)("TUIChat.No Data Available")), 3)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(_ctx.$style.list__container),
+        onScroll: handleScroll
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dataSource, (item) => {
+          return openBlock(), createElementBlock("div", {
+            key: item.key
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass([
+                _ctx.$style.list__item,
+                {
+                  [_ctx.$style["list__item--selected"]]: isSelected(item.key),
+                  [_ctx.$style["list__item--locked"]]: isLocked(item.key)
+                }
+              ]),
+              onClick: ($event) => handleItemClick(item.key)
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["list__checkbox-wrapper"])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass([_ctx.$style.list__checkbox, { [_ctx.$style["list__checkbox--checked"]]: isSelected(item.key) }])
+                }, [
+                  isSelected(item.key) ? (openBlock(), createBlock(unref(IconCheckSm), {
+                    key: 0,
+                    name: "check"
+                  })) : createCommentVNode("", true)
+                ], 2)
+              ], 2),
+              _ctx.renderItem ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderItem), {
+                key: 0,
+                item
+              }, null, 8, ["item"])) : (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: normalizeClass(_ctx.$style.list__content)
+              }, [
+                createVNode(unref(Avatar), {
+                  src: item.avatarUrl || "",
+                  class: normalizeClass(_ctx.$style.list__avatar),
+                  alt: item.label
+                }, null, 8, ["src", "class", "alt"]),
+                createElementVNode("span", {
+                  class: normalizeClass(_ctx.$style.list__label)
+                }, toDisplayString(item.label), 3)
+              ], 2))
+            ], 10, _hoisted_1)
+          ]);
+        }), 128))
+      ], 34));
+    };
+  }
+});
+const list__container = "_list__container_1k3dy_1";
+const list__item = "_list__item_1k3dy_21";
+const list__checkbox = "_list__checkbox_1k3dy_42";
+const list__content = "_list__content_1k3dy_60";
+const list__avatar = "_list__avatar_1k3dy_66";
+const list__label = "_list__label_1k3dy_69";
+const list__empty = "_list__empty_1k3dy_85";
+const style0 = {
+  list__container,
+  list__item,
+  "list__item--selected": "_list__item--selected_1k3dy_32",
+  "list__item--locked": "_list__item--locked_1k3dy_38",
+  "list__checkbox-wrapper": "_list__checkbox-wrapper_1k3dy_42",
+  list__checkbox,
+  "list__checkbox--checked": "_list__checkbox--checked_1k3dy_56",
+  list__content,
+  list__avatar,
+  list__label,
+  "list__load-more": "_list__load-more_1k3dy_77",
+  list__empty,
+  "list__end-marker": "_list__end-marker_1k3dy_94"
+};
+const cssModules = {
+  "$style": style0
+};
+const ListMode = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ListMode as default
+};

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

@@ -0,0 +1,21 @@
+import { IUserPickerRow } from '../../type';
+
+interface ListModeProps<T = unknown> {
+    dataSource: Array<IUserPickerRow<T>>;
+    selectedKeys: Set<string>;
+    lockedKeys: Set<string>;
+    onItemClick: (key: string) => void;
+    onReachEnd?: () => void;
+    renderItem?: any;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ListModeProps<unknown>>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ListModeProps<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/ListMode/index.d.ts

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

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

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