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

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

@@ -0,0 +1,217 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeClass, unref, createVNode, withCtx, createBlock } from "vue";
+import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
+import { useUIKit, TUIDialog, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { useLoginState } from "../../../states/LoginState.js";
+import { isH5 } from "../../../utils/env.js";
+import { useConversation } from "../hooks/useConversation.js";
+import { useConversationCreate } from "../hooks/useConversationCreate.js";
+import ConversationCreateButton from "./ConversationCreateButton/ConversationCreateButton.js";
+import ConversationCreateGroupDetail from "./ConversationCreateGroupDetail/ConversationCreateGroupDetail.js";
+import ConversationCreateUserSelectList from "./ConversationCreateUserSelectList/ConversationCreateUserSelectList.js";
+import { PageStateTypes, GroupType, CreateConvTypes } from "../../../types/conversation.js";
+import { useConversationListState } from "../../../states/ConversationListState/ConversationListState.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+import "./ConversationGroupTypeInfo/ConversationGroupTypeInfo.js";
+import "./ConversationGroupTypeInfo/type.js";
+const GROUP_NAME_LIMIT = 20;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationCreate",
+  props: {
+    onBeforeCreateConversation: {},
+    onConversationCreated: {},
+    conversationList: { default: () => [] }
+  },
+  emits: ["update:visible", "beforeCreateConversation", "conversationCreated"],
+  setup(__props, { emit: __emit }) {
+    const { t } = useUIKit();
+    const { enableSearch } = useConversation();
+    const { getDefaultAvatar } = useConversationCreate();
+    const { loginUserInfo } = useLoginState();
+    const { createC2CConversation, createGroupConversation } = useConversationListState();
+    const GROUP_INFO_DEFAULTS = {
+      avatar: getDefaultAvatar(GroupType.WORK),
+      name: "",
+      groupID: "",
+      type: GroupType.WORK
+    };
+    const props = __props;
+    const emit = __emit;
+    const showCreateConversation = ref(false);
+    const isCreateGroup = ref(false);
+    const pageState = ref(PageStateTypes.USER_SELECT);
+    const selectList = ref([]);
+    const groupInfo = ref({
+      avatar: getDefaultAvatar(GroupType.WORK),
+      name: "",
+      groupID: "",
+      type: GroupType.WORK
+    });
+    const setIsCreateGroup = (value) => {
+      isCreateGroup.value = value;
+    };
+    const setPageState = (value) => {
+      pageState.value = value;
+    };
+    const setSelectList = (value) => {
+      selectList.value = value;
+    };
+    const openCreateConversation = (value) => {
+      if (value === CreateConvTypes.GROUP) {
+        setIsCreateGroup(true);
+      } else {
+        setIsCreateGroup(false);
+      }
+      showCreateConversation.value = true;
+    };
+    const toggleCreateConversation = (value) => {
+      showCreateConversation.value = value;
+    };
+    const resetCreatePageState = () => {
+      toggleCreateConversation(false);
+      groupInfo.value = GROUP_INFO_DEFAULTS;
+      isCreateGroup.value = false;
+      pageState.value = PageStateTypes.USER_SELECT;
+      selectList.value = [];
+    };
+    const _onConversationCreated = (conversation) => {
+      var _a;
+      resetCreatePageState();
+      TUIConversationService.switchConversation(conversation.conversationID);
+      emit("conversationCreated", conversation);
+      (_a = props.onConversationCreated) == null ? void 0 : _a.call(props, conversation);
+    };
+    const pageStateTitle = {
+      [PageStateTypes.USER_SELECT]: t("TUIConversation.Add Participants"),
+      [PageStateTypes.CREATE_DETAIL]: t("TUIConversation.New group chat"),
+      [PageStateTypes.GROUP_TYPE]: t("TUIConversation.New group chat")
+    };
+    const pageStateConfirmText = {
+      [PageStateTypes.USER_SELECT]: t("TUIConversation.Next"),
+      [PageStateTypes.CREATE_DETAIL]: t("TUIConversation.Start chat"),
+      [PageStateTypes.GROUP_TYPE]: t("TUIConversation.Confirm")
+    };
+    const pageStateCancelText = {
+      [PageStateTypes.USER_SELECT]: t("TUIConversation.Cancel"),
+      [PageStateTypes.CREATE_DETAIL]: t("TUIConversation.Prev"),
+      [PageStateTypes.GROUP_TYPE]: t("TUIConversation.Prev")
+    };
+    const dialogCancelText = computed(() => {
+      if (!isCreateGroup.value) {
+        return t("TUIConversation.Cancel");
+      }
+      return pageStateCancelText[pageState.value];
+    });
+    const dialogTitles = computed(() => {
+      if (!isCreateGroup.value) {
+        return t("TUIConversation.Start chat");
+      }
+      return pageStateTitle[pageState.value];
+    });
+    const dialogConfirmText = computed(() => !isCreateGroup.value ? t("TUIConversation.Start chat") : pageStateConfirmText[pageState.value]);
+    const updateGroupInfo = (value) => {
+      groupInfo.value = value;
+    };
+    const handleCreateC2CConversation = async () => {
+      var _a;
+      const { userID } = selectList.value[0];
+      emit("beforeCreateConversation", userID);
+      (_a = props.onBeforeCreateConversation) == null ? void 0 : _a.call(props, userID);
+      try {
+        const conversation = await createC2CConversation(userID);
+        _onConversationCreated(conversation);
+      } catch (error) {
+        TUIToast.error({ message: error.message });
+      }
+    };
+    const handleCreateGroupConversation = async () => {
+      var _a;
+      const options = {
+        ...groupInfo.value,
+        memberList: selectList.value.map((item) => ({
+          userID: item.userID
+        }))
+      };
+      emit("beforeCreateConversation", options);
+      (_a = props.onBeforeCreateConversation) == null ? void 0 : _a.call(props, options);
+      try {
+        const conversation = await createGroupConversation(options);
+        _onConversationCreated(conversation);
+      } catch (error) {
+        TUIToast.error({ message: error.message });
+      }
+    };
+    const generateGroupName = (userList) => {
+      var _a, _b;
+      const selfName = ((_a = loginUserInfo.value) == null ? void 0 : _a.userName) || ((_b = loginUserInfo.value) == null ? void 0 : _b.userId) || "";
+      const name = selfName + userList.map((item) => (item == null ? void 0 : item.remark) || (item == null ? void 0 : item.nick) || (item == null ? void 0 : item.userID)).join("、");
+      return name.length >= GROUP_NAME_LIMIT ? name.slice(0, GROUP_NAME_LIMIT) : name;
+    };
+    const handleConfirm = () => {
+      if (selectList.value.length === 0) {
+        TUIToast.error({ message: t("TUIConversation.Participant cannot be empty") });
+        return;
+      }
+      if (!isCreateGroup.value) {
+        handleCreateC2CConversation();
+        toggleCreateConversation(false);
+      } else if (pageState.value === PageStateTypes.USER_SELECT) {
+        groupInfo.value.name = generateGroupName(selectList.value);
+        setPageState(PageStateTypes.CREATE_DETAIL);
+      } else if (pageState.value === PageStateTypes.CREATE_DETAIL) {
+        handleCreateGroupConversation();
+        toggleCreateConversation(false);
+      } else {
+        setPageState(PageStateTypes.CREATE_DETAIL);
+      }
+    };
+    const handleCancel = () => {
+      if (pageState.value === PageStateTypes.USER_SELECT) {
+        toggleCreateConversation(false);
+        resetCreatePageState();
+      } else if (pageState.value === PageStateTypes.CREATE_DETAIL) {
+        setPageState(PageStateTypes.USER_SELECT);
+      } else if (pageState.value === PageStateTypes.GROUP_TYPE) {
+        setPageState(PageStateTypes.CREATE_DETAIL);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["conversationCreate__container", { ["conversationCreate__detail"]: !unref(enableSearch) }])
+      }, [
+        createVNode(ConversationCreateButton, { onClick: openCreateConversation }),
+        createVNode(unref(TUIDialog), {
+          visible: showCreateConversation.value,
+          title: dialogTitles.value,
+          "confirm-text": dialogConfirmText.value,
+          "cancel-text": dialogCancelText.value,
+          "custom-classes": [unref(isH5) ? "conversationCreate__dialog" : ""],
+          onConfirm: handleConfirm,
+          onCancel: handleCancel,
+          onClose: resetCreatePageState
+        }, {
+          default: withCtx(() => [
+            pageState.value === unref(PageStateTypes).USER_SELECT ? (openBlock(), createBlock(ConversationCreateUserSelectList, {
+              key: 0,
+              "is-create-group": isCreateGroup.value,
+              "select-list": selectList.value,
+              "set-select-list": setSelectList,
+              "set-page-state": setPageState
+            }, null, 8, ["is-create-group", "select-list"])) : (openBlock(), createBlock(ConversationCreateGroupDetail, {
+              key: 1,
+              "page-state": pageState.value,
+              "profile-list": selectList.value,
+              "group-info": groupInfo.value,
+              "set-page-state": setPageState,
+              onUpdateGroupInfo: updateGroupInfo
+            }, null, 8, ["page-state", "profile-list", "group-info"]))
+          ]),
+          _: 1
+        }, 8, ["visible", "title", "confirm-text", "cancel-text", "custom-classes"])
+      ], 2);
+    };
+  }
+});
+const ConversationCreateComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bdcdab3b"]]);
+export {
+  ConversationCreateComponent as default
+};

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

@@ -0,0 +1,35 @@
+import { ConversationModel, ConversationCreateProps } from '../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationCreateProps>, {
+    conversationList: () => never[];
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:visible": (visible: boolean) => void;
+    beforeCreateConversation: (params: any) => void;
+    conversationCreated: (conversation: ConversationModel) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationCreateProps>, {
+    conversationList: () => never[];
+}>>> & Readonly<{
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    onBeforeCreateConversation?: ((params: any) => any) | undefined;
+    onConversationCreated?: ((conversation: ConversationModel) => any) | undefined;
+}>, {
+    conversationList: ConversationModel[];
+}, {}, {}, {}, 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/ConversationList/ConversationCreate/ConversationCreateButton/ConversationCreateButton.js

@@ -0,0 +1,103 @@
+import { defineComponent, shallowRef, createElementBlock, createBlock, unref, openBlock, normalizeClass, Fragment, renderList, createElementVNode, resolveDynamicComponent, toDisplayString, withCtx, createVNode } from "vue";
+import { useUIKit, IconIconC2c, IconStartGroup, TUIDropdown, IconSearchMore } from "@tencentcloud/uikit-base-component-vue3";
+import { useConversation } from "../../hooks/useConversation.js";
+import { CreateConvTypes } from "../../../../types/conversation.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationCreateButton",
+  props: {
+    onClick: {},
+    size: { default: 24 }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const { t } = useUIKit();
+    const { enableSearch } = useConversation();
+    const emit = __emit;
+    const createActions = shallowRef([
+      {
+        icon: IconIconC2c,
+        key: CreateConvTypes.C2C,
+        label: t("TUIConversation.Start C2C Chat")
+      },
+      {
+        icon: IconStartGroup,
+        key: CreateConvTypes.GROUP,
+        label: t("TUIConversation.Start Group Chat")
+      }
+    ]);
+    const handleClick = (action) => {
+      emit("click", action);
+    };
+    return (_ctx, _cache) => {
+      return !unref(enableSearch) ? (openBlock(), createElementBlock("ul", {
+        key: 0,
+        class: normalizeClass([_ctx.$style["conversation-create-list"], { [_ctx.$style["conversation-create-list--detail"]]: !unref(enableSearch) }])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(createActions.value, (action, key) => {
+          return openBlock(), createElementBlock("li", {
+            key,
+            class: normalizeClass([_ctx.$style["conversation-create-item"]]),
+            onClick: () => handleClick(action.key)
+          }, [
+            (openBlock(), createBlock(resolveDynamicComponent(action.icon))),
+            createElementVNode("span", {
+              class: normalizeClass([_ctx.$style["conversation-create-text"]])
+            }, toDisplayString(action.label), 3)
+          ], 10, _hoisted_1);
+        }), 128))
+      ], 2)) : (openBlock(), createBlock(unref(TUIDropdown), {
+        key: 1,
+        trigger: "click",
+        placement: "bottom-end"
+      }, {
+        dropdown: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass([_ctx.$style["conversation-create-dropdown"]])
+          }, [
+            createElementVNode("ul", {
+              class: normalizeClass([_ctx.$style["conversation-create-list"]])
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(createActions.value, (action, key) => {
+                return openBlock(), createElementBlock("li", {
+                  key,
+                  class: normalizeClass([_ctx.$style["conversation-create-item"]]),
+                  onClick: () => handleClick(action.key)
+                }, [
+                  (openBlock(), createBlock(resolveDynamicComponent(action.icon))),
+                  createElementVNode("span", {
+                    class: normalizeClass([_ctx.$style["conversation-create-text"]])
+                  }, toDisplayString(action.label), 3)
+                ], 10, _hoisted_2);
+              }), 128))
+            ], 2)
+          ], 2)
+        ]),
+        default: withCtx(() => [
+          createVNode(unref(IconSearchMore), {
+            class: normalizeClass([_ctx.$style["conversation-create-button"]]),
+            size: `${_ctx.size}px`
+          }, null, 8, ["class", "size"])
+        ]),
+        _: 1
+      }));
+    };
+  }
+});
+const style0 = {
+  "conversation-create-button": "_conversation-create-button_1102w_1",
+  "conversation-create-dropdown": "_conversation-create-dropdown_1102w_8",
+  "conversation-create-list": "_conversation-create-list_1102w_14",
+  "conversation-create-list--detail": "_conversation-create-list--detail_1102w_23",
+  "conversation-create-item": "_conversation-create-item_1102w_30",
+  "conversation-create-text": "_conversation-create-text_1102w_40"
+};
+const cssModules = {
+  "$style": style0
+};
+const ConversationCreateButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ConversationCreateButton as default
+};

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

@@ -0,0 +1,31 @@
+import { CreateConvTypes, ConversationCreateButtonProps } from '../../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationCreateButtonProps>, {
+    size: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (key: CreateConvTypes) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationCreateButtonProps>, {
+    size: number;
+}>>> & Readonly<{
+    onClick?: ((key: CreateConvTypes) => any) | undefined;
+}>, {
+    size: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,146 @@
+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 { useConversationCreate } from "../../hooks/useConversationCreate.js";
+import ConversationGroupTypeInfo from "../ConversationGroupTypeInfo/ConversationGroupTypeInfo.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: {},
+    groupInfo: {},
+    onUpdateGroupInfo: { type: Function },
+    setPageState: { type: Function }
+  },
+  emits: ["update:page-state", "beforeCreateConversation", "conversationCreated", "update-group-info"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const { getDefaultAvatar } = useConversationCreate();
+    const groupInfo = ref(props.groupInfo);
+    const groupInfoChange = (value, type) => {
+      switch (type) {
+        case GroupLabelTypes.NAME:
+          groupInfo.value.name = value;
+          break;
+        case GroupLabelTypes.GROUP_ID:
+          groupInfo.value.groupID = value;
+          break;
+        case GroupLabelTypes.TYPE:
+          groupInfo.value.type = value;
+          groupInfo.value.avatar = getDefaultAvatar(groupInfo.value.type);
+          break;
+      }
+      emit("update-group-info", groupInfo.value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          _ctx.$style.conversationCreateGroupDetail,
+          unref(isH5) && _ctx.$style["conversationCreateGroupDetail--h5"]
+        ])
+      }, [
+        _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)
+          }, [
+            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), {
+              id: "group-name",
+              modelValue: groupInfo.value.name,
+              "onUpdate:modelValue": [
+                _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": 30,
+              border: false,
+              placeholder: unref(t)("TUIConversation.Group Name")
+            }, null, 8, ["modelValue", "class", "placeholder"])
+          ], 2),
+          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), {
+              id: "group-id",
+              modelValue: groupInfo.value.groupID,
+              "onUpdate:modelValue": [
+                _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),
+            style: { alignItems: "flex-start" }
+          }, [
+            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)
+      ], 2);
+    };
+  }
+});
+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,
+  from__label
+};
+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,23 @@
+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: 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: 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;
+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/ConversationCreateUserSelectList/ConversationCreateUserSelectList.js

@@ -0,0 +1,69 @@
+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 UserPicker from "../../../UserPicker/UserPicker.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationCreateUserSelectList",
+  props: {
+    isCreateGroup: { type: Boolean },
+    selectList: {},
+    setSelectList: { type: Function }
+  },
+  emits: ["update:is-create-group", "update:select-list"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    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) => {
+      const selectFriendList = friendList.value.filter((item) => list.some((selected) => selected.key === item.userID));
+      emit("update:select-list", selectFriendList);
+      props.setSelectList(selectFriendList);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          _ctx.$style.conversationCreateUserSelectList,
+          unref(isH5) && _ctx.$style["conversationCreateUserSelectList--h5"]
+        ])
+      }, [
+        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_pa6me_1";
+const style0 = {
+  conversationCreateUserSelectList,
+  "conversationCreateUserSelectList--h5": "_conversationCreateUserSelectList--h5_pa6me_7"
+};
+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,19 @@
+import { ConversationCreateUserSelectListProps, Friend } from '../../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ConversationCreateUserSelectListProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "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: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;
+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;
+    };
+};