tuikit-atomicx-vue3 0.1.0 → 0.1.1

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

@@ -0,0 +1,226 @@
+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 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 ConversationGroupTypeInfo from "../ConversationGroupTypeInfo/ConversationGroupTypeInfo.js";
+import { GroupType, typeInfoList } from "../ConversationGroupTypeInfo/type.js";
+import { useConversationListState } from "../../../../states/ConversationListState/ConversationListState.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 }
+  },
+  emits: ["update:page-state", "beforeCreateConversation", "conversationCreated"],
+  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 groupInfoChange = (value, type) => {
+      switch (type) {
+        case "name":
+          groupName.value = value;
+          break;
+        case "id":
+          groupID.value = value;
+          break;
+        case "type":
+          groupType.value = value;
+          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 });
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.conversationCreateGroupDetail)
+      }, [
+        _ctx.pageState !== _ctx.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])
+          }, [
+            createVNode(unref(TUIInput), {
+              modelValue: groupName.value,
+              "onUpdate:modelValue": [
+                _cache[0] || (_cache[0] = ($event) => groupName.value = $event),
+                _cache[1] || (_cache[1] = (value) => groupInfoChange(String(value), "name"))
+              ],
+              class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__inputText),
+              "max-length": 15,
+              border: false,
+              placeholder: unref(t)("TUIConversation.Group Name")
+            }, null, 8, ["modelValue", "class", "placeholder"])
+          ], 2),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.conversationCreateGroupDetail__box)
+          }, [
+            createVNode(unref(TUIInput), {
+              modelValue: groupID.value,
+              "onUpdate:modelValue": [
+                _cache[2] || (_cache[2] = ($event) => groupID.value = $event),
+                _cache[3] || (_cache[3] = (value) => groupInfoChange(String(value), "id"))
+              ],
+              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)
+          }, [
+            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)
+          ], 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);
+    };
+  }
+});
+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 style0 = {
+  conversationCreateGroupDetail__nextContainer,
+  conversationCreateGroupDetail__next,
+  conversationCreateGroupDetail__main,
+  conversationCreateGroupDetail__box,
+  conversationCreateGroupDetail__inputText,
+  conversationCreateGroupDetail__inputReadonly,
+  conversationCreateGroupDetail__inputTitle,
+  conversationCreateGroupDetail__illustrate,
+  conversationCreateGroupDetail__portraitTitle,
+  conversationCreateGroupDetail__portraitInfoContainer,
+  conversationCreateGroupDetail__portraitInfo,
+  conversationCreateGroupDetail__portraitInfoNick
+};
+const cssModules = {
+  "$style": style0
+};
+const ConversationCreateGroupDetail = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ConversationCreateGroupDetail as default
+};

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

@@ -0,0 +1,22 @@
+import { PageStateTypes, ConversationCreateGroupDetailProps } from '../../../../types';
+import { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+
+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;
+}, 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;
+}>, {}, {}, {}, {}, 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/ConversationList/ConversationCreate/ConversationCreateSelectView/ConversationCreateSelectView.js

@@ -0,0 +1,65 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createElementVNode, createVNode, unref, toDisplayString } from "vue";
+import { IconCancel } 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: "ConversationCreateSelectView",
+  props: {
+    selectList: {},
+    setSelectList: { type: Function }
+  },
+  emits: ["update:select-list"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const close = (index) => {
+      const newList = [...props.selectList];
+      newList.splice(index, 1);
+      props.setSelectList(newList);
+      emit("update:select-list", newList);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.conversationCreateSelectView)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selectList, (profile, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: profile.userID,
+            class: normalizeClass(_ctx.$style.conversationCreateSelectView__item)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.conversationCreateSelectView__close),
+              onClick: ($event) => close(index)
+            }, [
+              createVNode(unref(IconCancel))
+            ], 10, _hoisted_1),
+            createVNode(unref(Avatar), {
+              src: profile.avatar
+            }, null, 8, ["src"]),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.conversationCreateSelectView__nick)
+            }, toDisplayString(profile.nick || profile.userID), 3)
+          ], 2);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+const conversationCreateSelectView = "_conversationCreateSelectView_1uvwz_1";
+const conversationCreateSelectView__item = "_conversationCreateSelectView__item_1uvwz_9";
+const conversationCreateSelectView__close = "_conversationCreateSelectView__close_1uvwz_19";
+const conversationCreateSelectView__nick = "_conversationCreateSelectView__nick_1uvwz_26";
+const style0 = {
+  conversationCreateSelectView,
+  conversationCreateSelectView__item,
+  conversationCreateSelectView__close,
+  conversationCreateSelectView__nick
+};
+const cssModules = {
+  "$style": style0
+};
+const ConversationCreateSelectView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ConversationCreateSelectView as default
+};

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

@@ -0,0 +1,17 @@
+import { ConversationCreateSelectViewProps, UserProfile } from '../../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ConversationCreateSelectViewProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:select-list": (list: UserProfile[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ConversationCreateSelectViewProps>>> & Readonly<{
+    "onUpdate:select-list"?: ((list: UserProfile[]) => 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/ConversationList/ConversationCreate/ConversationCreateSelectView/index.d.ts

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

package/dist/components/ConversationList/ConversationCreate/ConversationCreateSelectView/index.js

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

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

@@ -0,0 +1,238 @@
+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 { useContactListState } from "../../../../states/ContactListState/ContactListState.js";
+import { PageStateTypes } from "../../../../types/conversation.js";
+import { useConversationListState } from "../../../../states/ConversationListState/ConversationListState.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"],
+  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 handleSelectListUpdate = (list) => {
+      emit("update:select-list", list);
+      props.setSelectList(list);
+    };
+    watch(friendListSortResult, (newValue) => {
+      friendList.value = newValue;
+    }, { immediate: true });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([_ctx.$style.conversationCreateUserSelectList])
+      }, [
+        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)
+      ], 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 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
+};
+const cssModules = {
+  "$style": style0
+};
+const ConversationCreateUserSelectList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ConversationCreateUserSelectList as default
+};

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

@@ -0,0 +1,25 @@
+import { PageStateTypes, ConversationCreateUserSelectListProps, UserProfile, ConversationModel } 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;
+}, 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;
+}>, {}, {}, {}, {}, 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;
+    };
+};