tuikit-atomicx-vue3 0.1.1 → 3.3.0-beta.3

package/dist/components/ConversationList/ConversationCreate/ConversationCreateGroupDetail/ConversationCreateGroupDetail.js

@@ -1,114 +1,82 @@
-import { defineComponent, computed, ref, createElementBlock, openBlock, normalizeClass, createCommentVNode, createBlock, createElementVNode, createVNode, unref, withModifiers, h, toDisplayString, Fragment, renderList, withCtx, createTextVNode } from "vue";
-import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
-import { useUIKit, TUIInput, IconChevronRight, TUIButton, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createElementVNode, createVNode, toDisplayString } from "vue";
+import { useUIKit, TUIInput } from "@tencentcloud/uikit-base-component-vue3";
+import { isH5 } from "../../../../utils/env.js";
 import Avatar from "../../../Avatar/Avatar.js";
-import { DEFAULT_USER_AVATAR, DEFAULT_GROUP_AVATAR_AVCHATROOM, DEFAULT_GROUP_AVATAR_MEETING, DEFAULT_GROUP_AVATAR_PUBLIC, DEFAULT_GROUP_AVATAR_WORK } from "../../../Avatar/constants/avatar.js";
+import { useConversationCreate } from "../../hooks/useConversationCreate.js";
 import ConversationGroupTypeInfo from "../ConversationGroupTypeInfo/ConversationGroupTypeInfo.js";
-import { GroupType, typeInfoList } from "../ConversationGroupTypeInfo/type.js";
-import { useConversationListState } from "../../../../states/ConversationListState/ConversationListState.js";
+import { PageStateTypes, GroupLabelTypes } from "../../../../types/conversation.js";
 import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ConversationCreateGroupDetail",
   props: {
     profileList: {},
     pageState: {},
-    setPageState: { type: Function },
-    onBeforeCreateConversation: { type: Function },
-    onConversationCreated: { type: Function }
+    groupInfo: {},
+    onUpdateGroupInfo: { type: Function },
+    setPageState: { type: Function }
   },
-  emits: ["update:page-state", "beforeCreateConversation", "conversationCreated"],
+  emits: ["update:page-state", "beforeCreateConversation", "conversationCreated", "update-group-info"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const { t } = useUIKit();
-    const { createGroupConversation } = useConversationListState();
-    const myProfile = computed(() => TUIStore.getData(StoreName.USER, "userProfile"));
-    const temp = computed(() => [myProfile.value, ...props.profileList]);
-    const name = computed(() => temp.value.map((item) => (item == null ? void 0 : item.nick) || (item == null ? void 0 : item.userID)).toString());
-    const groupName = ref(name.value.length >= 15 ? `${name.value.slice(0, 12)}...` : name.value);
-    const groupID = ref("");
-    const groupType = ref(GroupType.WORK);
+    const { getDefaultAvatar } = useConversationCreate();
+    const groupInfo = ref(props.groupInfo);
     const groupInfoChange = (value, type) => {
       switch (type) {
-        case "name":
-          groupName.value = value;
+        case GroupLabelTypes.NAME:
+          groupInfo.value.name = value;
           break;
-        case "id":
-          groupID.value = value;
+        case GroupLabelTypes.GROUP_ID:
+          groupInfo.value.groupID = value;
           break;
-        case "type":
-          groupType.value = value;
+        case GroupLabelTypes.TYPE:
+          groupInfo.value.type = value;
+          groupInfo.value.avatar = getDefaultAvatar(groupInfo.value.type);
           break;
       }
-    };
-    const getDefaultAvatar = (type) => {
-      switch (type) {
-        case GroupType.WORK:
-          return DEFAULT_GROUP_AVATAR_WORK;
-        case GroupType.PUBLIC:
-          return DEFAULT_GROUP_AVATAR_PUBLIC;
-        case GroupType.MEETING:
-          return DEFAULT_GROUP_AVATAR_MEETING;
-        case GroupType.AVCHATROOM:
-          return DEFAULT_GROUP_AVATAR_AVCHATROOM;
-        default:
-          return "";
-      }
-    };
-    const getDes = () => {
-      var _a, _b;
-      return ((_b = (_a = typeInfoList) == null ? void 0 : _a.find((item) => item.type === groupType.value)) == null ? void 0 : _b.des) || "";
-    };
-    const setGroupType = (type) => {
-      groupType.value = type;
-    };
-    const setPageState = (state) => {
-      var _a;
-      emit("update:page-state", state);
-      (_a = props == null ? void 0 : props.setPageState) == null ? void 0 : _a.call(props, state);
-    };
-    const next = async () => {
-      var _a, _b;
-      const memberList = props.profileList.map((item) => ({
-        userID: item.userID
-      }));
-      const avatar = getDefaultAvatar(groupType.value);
-      const options = {
-        name: groupName.value,
-        type: groupType.value,
-        groupID: groupID.value,
-        avatar,
-        memberList
-      };
-      emit("beforeCreateConversation", options);
-      const _options = ((_a = props.onBeforeCreateConversation) == null ? void 0 : _a.call(props, options)) || options;
-      try {
-        const conversation = await createGroupConversation(_options);
-        emit("conversationCreated", conversation);
-        (_b = props.onConversationCreated) == null ? void 0 : _b.call(props, conversation);
-      } catch (error) {
-        TUIToast.error({ message: error.message });
-      }
+      emit("update-group-info", groupInfo.value);
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style.conversationCreateGroupDetail)
+        class: normalizeClass([
+          _ctx.$style.conversationCreateGroupDetail,
+          unref(isH5) && _ctx.$style["conversationCreateGroupDetail--h5"]
+        ])
       }, [
-        _ctx.pageState !== _ctx.PageStateTypes.GROUP_TYPE ? (openBlock(), createElementBlock("div", {
+        _ctx.pageState !== unref(PageStateTypes).GROUP_TYPE ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__main)
         }, [
           createElementVNode("div", {
-            class: normalizeClass([_ctx.$style.conversationCreateGroupDetail__box, _ctx.$style.conversationCreateGroupDetail__name])
+            class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__box)
+          }, [
+            createElementVNode("label", {
+              class: normalizeClass(_ctx.$style.from__label),
+              for: "group-avatar"
+            }, toDisplayString(unref(t)("TUIConversation.Group Avatar")), 3),
+            createVNode(unref(Avatar), {
+              size: "sm",
+              src: groupInfo.value.avatar
+            }, null, 8, ["src"])
+          ], 2),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__box)
           }, [
+            createElementVNode("label", {
+              class: normalizeClass(_ctx.$style.from__label),
+              for: "group-name"
+            }, toDisplayString(unref(t)("TUIConversation.Group Name")), 3),
             createVNode(unref(TUIInput), {
-              modelValue: groupName.value,
+              id: "group-name",
+              modelValue: groupInfo.value.name,
               "onUpdate:modelValue": [
-                _cache[0] || (_cache[0] = ($event) => groupName.value = $event),
-                _cache[1] || (_cache[1] = (value) => groupInfoChange(String(value), "name"))
+                _cache[0] || (_cache[0] = ($event) => groupInfo.value.name = $event),
+                _cache[1] || (_cache[1] = (value) => groupInfoChange(String(value), unref(GroupLabelTypes).NAME))
               ],
+              clearable: "",
               class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__inputText),
-              "max-length": 15,
+              "max-length": 30,
               border: false,
               placeholder: unref(t)("TUIConversation.Group Name")
             }, null, 8, ["modelValue", "class", "placeholder"])
@@ -116,106 +84,58 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__box)
           }, [
+            createElementVNode("label", {
+              class: normalizeClass(_ctx.$style.from__label),
+              for: "group-id"
+            }, toDisplayString(unref(t)("TUIConversation.Group ID")), 3),
             createVNode(unref(TUIInput), {
-              modelValue: groupID.value,
+              id: "group-id",
+              modelValue: groupInfo.value.groupID,
               "onUpdate:modelValue": [
-                _cache[2] || (_cache[2] = ($event) => groupID.value = $event),
-                _cache[3] || (_cache[3] = (value) => groupInfoChange(String(value), "id"))
+                _cache[2] || (_cache[2] = ($event) => groupInfo.value.groupID = $event),
+                _cache[3] || (_cache[3] = (value) => groupInfoChange(String(value), unref(GroupLabelTypes).GROUP_ID))
               ],
+              clearable: "",
               class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__inputText),
               border: false,
               placeholder: unref(t)("TUIConversation.Group ID")
             }, null, 8, ["modelValue", "class", "placeholder"])
           ], 2),
           createElementVNode("div", {
-            class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__box)
+            class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__box),
+            style: { alignItems: "flex-start" }
           }, [
-            createElementVNode("div", {
-              class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__inputReadonly),
-              onClick: _cache[4] || (_cache[4] = withModifiers(($event) => setPageState(_ctx.PageStateTypes.GROUP_TYPE), ["self"]))
-            }, null, 2),
-            createVNode(unref(TUIInput), {
-              class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__inputText),
-              readonly: "",
-              border: false,
-              prefix: h("div", { class: _ctx.$style.conversationCreateGroupDetail__inputTitle }, unref(t)("TUIConversation.Group Type")),
-              suffix: unref(IconChevronRight),
-              "model-value": unref(t)(`TUIConversation.${groupType.value}`)
-            }, null, 8, ["class", "prefix", "suffix", "model-value"])
-          ], 2),
-          createElementVNode("div", {
-            class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__illustrate)
-          }, toDisplayString(unref(t)(`TUIConversation.${getDes()}`)), 3),
-          createElementVNode("div", {
-            class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__portrait)
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__portraitTitle)
-            }, toDisplayString(unref(t)("TUIConversation.Participants")), 3),
-            createElementVNode("div", {
-              class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__portraitInfoContainer)
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.profileList, ({ avatar, userID, nick }) => {
-                return openBlock(), createElementBlock("div", {
-                  key: userID,
-                  class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__portraitInfo)
-                }, [
-                  createVNode(unref(Avatar), {
-                    src: avatar || unref(DEFAULT_USER_AVATAR)
-                  }, null, 8, ["src"]),
-                  createElementVNode("div", {
-                    class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__portraitInfoNick)
-                  }, toDisplayString(nick || userID), 3)
-                ], 2);
-              }), 128))
-            ], 2)
+            createElementVNode("label", {
+              class: normalizeClass(_ctx.$style.from__label),
+              for: "group-type"
+            }, toDisplayString(unref(t)("TUIConversation.Group Type")), 3),
+            createVNode(unref(ConversationGroupTypeInfo), {
+              id: "group-type",
+              "group-type": groupInfo.value.type,
+              "set-group-type": (type) => groupInfoChange(type, unref(GroupLabelTypes).TYPE)
+            }, null, 8, ["group-type", "set-group-type"])
           ], 2)
-        ], 2)) : createCommentVNode("", true),
-        _ctx.pageState !== _ctx.PageStateTypes.GROUP_TYPE ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__nextContainer)
-        }, [
-          createVNode(unref(TUIButton), { onClick: next }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("TUIConversation.Create")), 1)
-            ]),
-            _: 1
-          })
-        ], 2)) : (openBlock(), createBlock(unref(ConversationGroupTypeInfo), {
-          key: 2,
-          "group-type": groupType.value,
-          "set-group-type": setGroupType,
-          "set-page-state": setPageState
-        }, null, 8, ["group-type"]))
+        ], 2)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const conversationCreateGroupDetail__nextContainer = "_conversationCreateGroupDetail__nextContainer_17evk_1";
-const conversationCreateGroupDetail__next = "_conversationCreateGroupDetail__next_17evk_1";
-const conversationCreateGroupDetail__main = "_conversationCreateGroupDetail__main_17evk_15";
-const conversationCreateGroupDetail__box = "_conversationCreateGroupDetail__box_17evk_22";
-const conversationCreateGroupDetail__inputText = "_conversationCreateGroupDetail__inputText_17evk_26";
-const conversationCreateGroupDetail__inputReadonly = "_conversationCreateGroupDetail__inputReadonly_17evk_37";
-const conversationCreateGroupDetail__inputTitle = "_conversationCreateGroupDetail__inputTitle_17evk_45";
-const conversationCreateGroupDetail__illustrate = "_conversationCreateGroupDetail__illustrate_17evk_51";
-const conversationCreateGroupDetail__portraitTitle = "_conversationCreateGroupDetail__portraitTitle_17evk_59";
-const conversationCreateGroupDetail__portraitInfoContainer = "_conversationCreateGroupDetail__portraitInfoContainer_17evk_65";
-const conversationCreateGroupDetail__portraitInfo = "_conversationCreateGroupDetail__portraitInfo_17evk_65";
-const conversationCreateGroupDetail__portraitInfoNick = "_conversationCreateGroupDetail__portraitInfoNick_17evk_79";
+const conversationCreateGroupDetail = "_conversationCreateGroupDetail_198df_1";
+const conversationCreateGroupDetail__nextContainer = "_conversationCreateGroupDetail__nextContainer_198df_9";
+const conversationCreateGroupDetail__next = "_conversationCreateGroupDetail__next_198df_9";
+const conversationCreateGroupDetail__main = "_conversationCreateGroupDetail__main_198df_23";
+const conversationCreateGroupDetail__box = "_conversationCreateGroupDetail__box_198df_40";
+const conversationCreateGroupDetail__inputText = "_conversationCreateGroupDetail__inputText_198df_48";
+const from__label = "_from__label_198df_54";
 const style0 = {
+  conversationCreateGroupDetail,
+  "conversationCreateGroupDetail--h5": "_conversationCreateGroupDetail--h5_198df_6",
   conversationCreateGroupDetail__nextContainer,
   conversationCreateGroupDetail__next,
   conversationCreateGroupDetail__main,
   conversationCreateGroupDetail__box,
   conversationCreateGroupDetail__inputText,
-  conversationCreateGroupDetail__inputReadonly,
-  conversationCreateGroupDetail__inputTitle,
-  conversationCreateGroupDetail__illustrate,
-  conversationCreateGroupDetail__portraitTitle,
-  conversationCreateGroupDetail__portraitInfoContainer,
-  conversationCreateGroupDetail__portraitInfo,
-  conversationCreateGroupDetail__portraitInfoNick
+  from__label
 };
 const cssModules = {
   "$style": style0

package/dist/components/ConversationList/ConversationCreate/ConversationCreateGroupDetail/ConversationCreateGroupDetail.vue.d.ts

@@ -1,14 +1,15 @@
-import { PageStateTypes, ConversationCreateGroupDetailProps } from '../../../../types';
-import { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { PageStateTypes, ConversationCreateGroupDetailProps, ConversationModel, CreateGroupInfo, CreateGroupParams } from '../../../../types';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ConversationCreateGroupDetailProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:page-state": (state: PageStateTypes) => void;
     beforeCreateConversation: (params: CreateGroupParams) => void;
-    conversationCreated: (conversation: IConversationModel) => void;
+    conversationCreated: (conversation: ConversationModel) => void;
+    "update-group-info": (groupInfo: CreateGroupInfo) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ConversationCreateGroupDetailProps>>> & Readonly<{
     "onUpdate:page-state"?: ((state: PageStateTypes) => any) | undefined;
     onBeforeCreateConversation?: ((params: CreateGroupParams) => any) | undefined;
-    onConversationCreated?: ((conversation: IConversationModel) => any) | undefined;
+    onConversationCreated?: ((conversation: ConversationModel) => any) | undefined;
+    "onUpdate-group-info"?: ((groupInfo: CreateGroupInfo) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/ConversationList/ConversationCreate/ConversationCreateUserSelectList/ConversationCreateUserSelectList.js

@@ -1,233 +1,64 @@
-import { defineComponent, ref, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, createVNode, unref, toDisplayString, Fragment, renderList, withDirectives, vShow, withCtx, createTextVNode } from "vue";
-import { useUIKit, TUIInput, IconSearchChat, IconSearchMore, IconCheckSm, IconAddCircle, TUIButton, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
-import Avatar from "../../../Avatar/Avatar.js";
-import { useConversationCreate } from "../hooks/useConversationCreate.js";
-import ConversationCreateSelectView from "../ConversationCreateSelectView/ConversationCreateSelectView.js";
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createVNode } from "vue";
+import { isH5 } from "../../../../utils/env.js";
+import "../../../UserPicker/index.js";
 import { useContactListState } from "../../../../states/ContactListState/ContactListState.js";
-import { PageStateTypes } from "../../../../types/conversation.js";
-import { useConversationListState } from "../../../../states/ConversationListState/ConversationListState.js";
+import UserPicker from "../../../UserPicker/UserPicker.js";
 import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = ["for", "onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ConversationCreateUserSelectList",
   props: {
     isCreateGroup: { type: Boolean },
-    setIsCreateGroup: { type: Function },
-    conversationList: {},
-    setPageState: { type: Function },
-    onBeforeCreateConversation: { type: Function },
-    onConversationCreated: { type: Function },
-    className: {},
     selectList: {},
     setSelectList: { type: Function }
   },
-  emits: ["update:is-create-group", "update:select-list", "update:page-state", "beforeCreateConversation", "conversationCreated"],
+  emits: ["update:is-create-group", "update:select-list"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { t } = useUIKit();
-    const { friendList: friendListResult } = useContactListState();
-    const { createC2CConversation } = useConversationListState();
-    const searchValue = ref("");
-    const conversationList = ref(props.conversationList);
-    const friendList = ref({});
-    const {
-      friendListSortResult,
-      getFriendListSortSearchResult
-    } = useConversationCreate(
-      conversationList,
-      friendListResult
-    );
-    const searchValueChange = (value) => {
-      const stringValue = String(value);
-      searchValue.value = stringValue;
-      friendList.value = getFriendListSortSearchResult(stringValue);
-    };
-    const createGroup = () => {
-      emit("update:is-create-group", true);
-      props.setSelectList([]);
-      props.setIsCreateGroup(true);
-    };
-    const userSelectListChange = (profile) => {
-      const { userID } = profile;
-      const newList = [...props.selectList];
-      if (!newList.find((item) => item.userID === userID)) {
-        newList.push(profile);
-      } else {
-        const index = newList.findIndex((item) => item.userID === userID);
-        newList.splice(index, 1);
-      }
-      emit("update:select-list", newList);
-      props.setSelectList(newList);
-    };
-    const _createConversation = async (profile) => {
-      var _a, _b;
-      if (props.isCreateGroup) {
-        return;
-      }
-      const { userID } = profile;
-      emit("beforeCreateConversation", userID);
-      (_a = props.onBeforeCreateConversation) == null ? void 0 : _a.call(props, userID);
-      try {
-        const conversation = await createC2CConversation(userID);
-        emit("conversationCreated", conversation);
-        (_b = props.onConversationCreated) == null ? void 0 : _b.call(props, conversation);
-      } catch (error) {
-        TUIToast.error({ message: error.message });
-      }
-    };
-    const handleUserItem = (profile) => {
-      if (props.isCreateGroup) {
-        userSelectListChange(profile);
-      } else {
-        _createConversation(profile);
-      }
-    };
-    const next = () => {
-      if (!props.selectList || props.selectList.length === 0) {
-        TUIToast.error({ message: t("TUIConversation.Participant cannot be empty") });
-        return;
-      }
-      emit("update:page-state", PageStateTypes.CREATE_DETAIL);
-      props.setPageState(PageStateTypes.CREATE_DETAIL);
-    };
+    const { friendList } = useContactListState();
+    const selectList = computed(() => props.selectList.map((item) => {
+      const { userID, nick, avatar, remark } = item;
+      return {
+        key: userID,
+        label: remark || nick || userID,
+        avatarUrl: avatar
+      };
+    }));
+    const renderFriendList = computed(() => friendList.value.map((item) => {
+      const { userID, nick, avatar, remark } = item;
+      return {
+        key: userID,
+        label: remark || nick || userID,
+        avatarUrl: avatar
+      };
+    }));
     const handleSelectListUpdate = (list) => {
-      emit("update:select-list", list);
-      props.setSelectList(list);
+      const selectFriendList = friendList.value.filter((item) => list.some((selected) => selected.key === item.userID));
+      emit("update:select-list", selectFriendList);
+      props.setSelectList(selectFriendList);
     };
-    watch(friendListSortResult, (newValue) => {
-      friendList.value = newValue;
-    }, { immediate: true });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([_ctx.$style.conversationCreateUserSelectList])
+        class: normalizeClass([
+          _ctx.$style.conversationCreateUserSelectList,
+          unref(isH5) && _ctx.$style["conversationCreateUserSelectList--h5"]
+        ])
       }, [
-        createElementVNode("div", {
-          class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__searchInput)
-        }, [
-          createVNode(unref(TUIInput), {
-            modelValue: searchValue.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
-            prefixIcon: unref(IconSearchChat),
-            placeholder: unref(t)("TUIConversation.Search"),
-            onChange: searchValueChange
-          }, null, 8, ["modelValue", "prefixIcon", "placeholder"])
-        ], 2),
-        _ctx.isCreateGroup ? (openBlock(), createBlock(unref(ConversationCreateSelectView), {
-          key: 0,
-          "select-list": _ctx.selectList,
-          "set-select-list": handleSelectListUpdate
-        }, null, 8, ["select-list"])) : createCommentVNode("", true),
-        !_ctx.isCreateGroup ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          role: "presentation",
-          class: normalizeClass([_ctx.$style.conversationCreateUserSelectList__user, _ctx.$style["conversationCreateUserSelectList__user--active"]]),
-          onClick: createGroup
-        }, [
-          createVNode(unref(IconSearchMore), { size: "24px" }),
-          createElementVNode("div", {
-            class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__userName)
-          }, toDisplayString(unref(t)("TUIConversation.New group chat")), 3)
-        ], 2)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass([_ctx.$style.conversationCreateUserSelectList__container, _ctx.className])
-        }, [
-          createElementVNode("div", {
-            class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__list)
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__groupContainer)
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(friendList.value, (group, key) => {
-                return withDirectives((openBlock(), createElementBlock("div", {
-                  key,
-                  class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__groupBox)
-                }, [
-                  createElementVNode("div", {
-                    class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__title)
-                  }, toDisplayString(key), 3),
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(group, (profile) => {
-                    return openBlock(), createElementBlock("label", {
-                      key: profile.userID,
-                      role: "presentation",
-                      class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__user),
-                      for: `userChecked-${key}-${profile.userID}`,
-                      onClick: ($event) => handleUserItem(profile)
-                    }, [
-                      createVNode(unref(Avatar), {
-                        src: profile.avatar
-                      }, null, 8, ["src"]),
-                      createElementVNode("div", {
-                        class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__userName)
-                      }, toDisplayString(profile.nick || profile.userID), 3),
-                      _ctx.isCreateGroup ? (openBlock(), createElementBlock("div", {
-                        key: 0,
-                        class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__userCheckbox)
-                      }, [
-                        _ctx.selectList.find((item) => item.userID === profile.userID) ? (openBlock(), createBlock(unref(IconCheckSm), {
-                          key: 0,
-                          class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__activeIcon)
-                        }, null, 8, ["class"])) : (openBlock(), createBlock(unref(IconAddCircle), { key: 1 }))
-                      ], 2)) : createCommentVNode("", true)
-                    ], 10, _hoisted_1);
-                  }), 128))
-                ], 2)), [
-                  [vShow, group.length !== 0]
-                ]);
-              }), 128))
-            ], 2)
-          ], 2)
-        ], 2),
-        _ctx.isCreateGroup ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: normalizeClass(_ctx.$style.conversationCreateUserSelectList__nextContainer)
-        }, [
-          createVNode(unref(TUIButton), { onClick: next }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("TUIConversation.Next")), 1)
-            ]),
-            _: 1
-          })
-        ], 2)) : createCommentVNode("", true)
+        createVNode(unref(UserPicker), {
+          displayMode: "list",
+          "data-source": renderFriendList.value,
+          "default-selected-items": selectList.value,
+          maxCount: !_ctx.isCreateGroup ? 1 : void 0,
+          onSelectedChange: handleSelectListUpdate
+        }, null, 8, ["data-source", "default-selected-items", "maxCount"])
       ], 2);
     };
   }
 });
-const conversationCreateUserSelectList = "_conversationCreateUserSelectList_4afm2_1";
-const conversationCreateUserSelectList__searchInput = "_conversationCreateUserSelectList__searchInput_4afm2_6";
-const conversationCreateUserSelectList__user = "_conversationCreateUserSelectList__user_4afm2_9";
-const conversationCreateUserSelectList__userName = "_conversationCreateUserSelectList__userName_4afm2_26";
-const conversationCreateUserSelectList__userCheckbox = "_conversationCreateUserSelectList__userCheckbox_4afm2_40";
-const conversationCreateUserSelectList__activeIcon = "_conversationCreateUserSelectList__activeIcon_4afm2_44";
-const conversationCreateUserSelectList__nextContainer = "_conversationCreateUserSelectList__nextContainer_4afm2_47";
-const conversationCreateUserSelectList__next = "_conversationCreateUserSelectList__next_4afm2_47";
-const conversationCreateUserSelectList__container = "_conversationCreateUserSelectList__container_4afm2_62";
-const conversationCreateUserSelectList__list = "_conversationCreateUserSelectList__list_4afm2_73";
-const conversationCreateUserSelectList__groupContainer = "_conversationCreateUserSelectList__groupContainer_4afm2_76";
-const conversationCreateUserSelectList__title = "_conversationCreateUserSelectList__title_4afm2_79";
-const conversationCreateUserSelectList__groupBox = "_conversationCreateUserSelectList__groupBox_4afm2_86";
-const conversationCreateUserSelectList__userAvatar = "_conversationCreateUserSelectList__userAvatar_4afm2_89";
-const conversationCreateUserSelectList__userInfo = "_conversationCreateUserSelectList__userInfo_4afm2_95";
-const conversationCreateUserSelectList__userID = "_conversationCreateUserSelectList__userID_4afm2_110";
+const conversationCreateUserSelectList = "_conversationCreateUserSelectList_pa6me_1";
 const style0 = {
   conversationCreateUserSelectList,
-  conversationCreateUserSelectList__searchInput,
-  conversationCreateUserSelectList__user,
-  "conversationCreateUserSelectList__user--active": "_conversationCreateUserSelectList__user--active_4afm2_21",
-  conversationCreateUserSelectList__userName,
-  "conversationCreateUserSelectList__userName--active": "_conversationCreateUserSelectList__userName--active_4afm2_35",
-  conversationCreateUserSelectList__userCheckbox,
-  conversationCreateUserSelectList__activeIcon,
-  conversationCreateUserSelectList__nextContainer,
-  conversationCreateUserSelectList__next,
-  conversationCreateUserSelectList__container,
-  conversationCreateUserSelectList__list,
-  conversationCreateUserSelectList__groupContainer,
-  conversationCreateUserSelectList__title,
-  conversationCreateUserSelectList__groupBox,
-  conversationCreateUserSelectList__userAvatar,
-  conversationCreateUserSelectList__userInfo,
-  conversationCreateUserSelectList__userID
+  "conversationCreateUserSelectList--h5": "_conversationCreateUserSelectList--h5_pa6me_7"
 };
 const cssModules = {
   "$style": style0

package/dist/components/ConversationList/ConversationCreate/ConversationCreateUserSelectList/ConversationCreateUserSelectList.vue.d.ts

@@ -1,17 +1,11 @@
-import { PageStateTypes, ConversationCreateUserSelectListProps, UserProfile, ConversationModel } from '../../../../types';
+import { ConversationCreateUserSelectListProps, Friend } from '../../../../types';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ConversationCreateUserSelectListProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:page-state": (state: PageStateTypes) => void;
-    beforeCreateConversation: (userID: string) => void;
-    conversationCreated: (conversation: ConversationModel) => void;
-    "update:select-list": (list: UserProfile[]) => void;
     "update:is-create-group": (value: boolean) => void;
+    "update:select-list": (list: Friend[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ConversationCreateUserSelectListProps>>> & Readonly<{
-    "onUpdate:page-state"?: ((state: PageStateTypes) => any) | undefined;
-    onBeforeCreateConversation?: ((userID: string) => any) | undefined;
-    onConversationCreated?: ((conversation: ConversationModel) => any) | undefined;
-    "onUpdate:select-list"?: ((list: UserProfile[]) => any) | undefined;
     "onUpdate:is-create-group"?: ((value: boolean) => any) | undefined;
+    "onUpdate:select-list"?: ((list: Friend[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;