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

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

@@ -1,35 +1,51 @@
-import { defineComponent, ref, watch, createElementBlock, createCommentVNode, openBlock, normalizeStyle, normalizeClass, createBlock, createElementVNode, createVNode, unref, toDisplayString } from "vue";
+import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeClass, unref, createVNode, withCtx, createBlock } from "vue";
 import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
-import { useUIKit, IconArrowStrokeBack } from "@tencentcloud/uikit-base-component-vue3";
+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 } from "../../../types/conversation.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 "./ConversationCreateSelectView/ConversationCreateSelectView.js";
 import "./ConversationGroupTypeInfo/ConversationGroupTypeInfo.js";
-import "./hooks/useConversationCreate.js";
 import "./ConversationGroupTypeInfo/type.js";
+const GROUP_NAME_LIMIT = 20;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ConversationCreate",
   props: {
-    visible: { type: Boolean, default: true },
-    className: {},
-    style: {},
     onBeforeCreateConversation: {},
     onConversationCreated: {},
-    "onUpdate:visible": {},
     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 { t } = useUIKit();
     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;
     };
@@ -39,119 +55,163 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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) => {
-      toggleCreateConversation(false);
+      var _a;
       resetCreatePageState();
       TUIConversationService.switchConversation(conversation.conversationID);
       emit("conversationCreated", conversation);
+      (_a = props.onConversationCreated) == null ? void 0 : _a.call(props, conversation);
     };
-    const back = () => {
-      if (isCreateGroup.value) {
-        switch (pageState.value) {
-          case PageStateTypes.USER_SELECT:
-            setIsCreateGroup(false);
-            break;
-          case PageStateTypes.CREATE_DETAIL:
-            setPageState(PageStateTypes.USER_SELECT);
-            setSelectList([]);
-            break;
-          case PageStateTypes.GROUP_TYPE:
-            setPageState(PageStateTypes.CREATE_DETAIL);
-            break;
-        }
-      } else {
-        toggleCreateConversation(false);
-        resetCreatePageState();
+    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 handleBeforeCreate = (params) => {
-      if (props.onBeforeCreateConversation) {
-        return props.onBeforeCreateConversation(params);
+    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 });
       }
-      return params;
     };
-    const handleCreated = (conversation) => {
-      _onConversationCreated(conversation);
+    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);
+      }
     };
-    watch(showCreateConversation, (newValue) => {
-      emit("update:visible", newValue);
-    });
     return (_ctx, _cache) => {
-      return _ctx.visible ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: normalizeClass([_ctx.$style.conversationCreate__container, _ctx.className]),
-        style: normalizeStyle(_ctx.style)
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["conversationCreate__container", { ["conversationCreate__detail"]: !unref(enableSearch) }])
       }, [
-        !showCreateConversation.value ? (openBlock(), createBlock(ConversationCreateButton, {
-          key: 0,
-          onClick: _cache[0] || (_cache[0] = ($event) => toggleCreateConversation(true))
-        })) : createCommentVNode("", true),
-        showCreateConversation.value ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass(_ctx.$style.conversationCreate__main)
-        }, [
-          createElementVNode("div", {
-            class: normalizeClass(_ctx.$style.conversationCreate__header)
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass(_ctx.$style.conversationCreate__icon),
-              onClick: back
-            }, [
-              createVNode(unref(IconArrowStrokeBack))
-            ], 2),
-            createElementVNode("div", {
-              class: normalizeClass(_ctx.$style.conversationCreate__title)
-            }, toDisplayString(!isCreateGroup.value ? unref(t)("TUIConversation.Start chat") : unref(t)("TUIConversation.Add Participants")), 3)
-          ], 2),
-          pageState.value === unref(PageStateTypes).USER_SELECT ? (openBlock(), createBlock(ConversationCreateUserSelectList, {
-            key: 0,
-            "is-create-group": isCreateGroup.value,
-            "set-is-create-group": setIsCreateGroup,
-            "select-list": selectList.value,
-            "set-select-list": setSelectList,
-            "conversation-list": _ctx.conversationList,
-            "set-page-state": setPageState,
-            "on-before-create-conversation": handleBeforeCreate,
-            "on-conversation-created": handleCreated
-          }, null, 8, ["is-create-group", "select-list", "conversation-list"])) : (openBlock(), createBlock(ConversationCreateGroupDetail, {
-            key: 1,
-            "page-state": pageState.value,
-            "profile-list": selectList.value,
-            "set-page-state": setPageState,
-            "on-before-create-conversation": handleBeforeCreate,
-            "on-conversation-created": handleCreated
-          }, null, 8, ["page-state", "profile-list"]))
-        ], 2)) : createCommentVNode("", true)
-      ], 6)) : createCommentVNode("", true);
+        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 conversationCreate__container = "_conversationCreate__container_sxyih_1";
-const conversationCreate__main = "_conversationCreate__main_sxyih_6";
-const conversationCreate__header = "_conversationCreate__header_sxyih_18";
-const conversationCreate__icon = "_conversationCreate__icon_sxyih_24";
-const conversationCreate__title = "_conversationCreate__title_sxyih_31";
-const conversationCreate__content = "_conversationCreate__content_sxyih_37";
-const style0 = {
-  conversationCreate__container,
-  conversationCreate__main,
-  conversationCreate__header,
-  conversationCreate__icon,
-  conversationCreate__title,
-  conversationCreate__content
-};
-const cssModules = {
-  "$style": style0
-};
-const ConversationCreateComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+const ConversationCreateComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bdcdab3b"]]);
 export {
   ConversationCreateComponent as default
 };

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

@@ -1,21 +1,18 @@
 import { ConversationModel, ConversationCreateProps } from '../../../types';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationCreateProps>, {
-    visible: boolean;
     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>, {
-    visible: boolean;
     conversationList: () => never[];
 }>>> & Readonly<{
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
     onBeforeCreateConversation?: ((params: any) => any) | undefined;
     onConversationCreated?: ((conversation: ConversationModel) => any) | undefined;
 }>, {
-    visible: boolean;
     conversationList: ConversationModel[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,36 +1,98 @@
-import { defineComponent, createBlock, createCommentVNode, openBlock, unref, normalizeClass } from "vue";
-import { IconSearchMore } from "@tencentcloud/uikit-base-component-vue3";
+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: {
-    visible: { type: Boolean, default: true },
     onClick: {},
-    height: { default: 24 },
-    width: { default: 24 },
-    className: {}
+    size: { default: 24 }
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const { t } = useUIKit();
+    const { enableSearch } = useConversation();
     const emit = __emit;
-    const handleClick = (event) => {
-      var _a;
-      emit("click", event);
-      (_a = props.onClick) == null ? void 0 : _a.call(props, event);
+    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 _ctx.visible ? (openBlock(), createBlock(unref(IconSearchMore), {
+      return !unref(enableSearch) ? (openBlock(), createElementBlock("ul", {
         key: 0,
-        class: normalizeClass([_ctx.$style["conversation-create-button"], _ctx.className]),
-        size: "24px",
-        onClick: handleClick
-      }, null, 8, ["class"])) : createCommentVNode("", true);
+        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_1i56h_1"
+  "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

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

@@ -1,21 +1,15 @@
-import { ConversationCreateButtonProps } from '../../../../types';
+import { CreateConvTypes, ConversationCreateButtonProps } from '../../../../types';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationCreateButtonProps>, {
-    visible: boolean;
-    height: number;
-    width: number;
+    size: number;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    click: (event: Event) => void;
+    click: (key: CreateConvTypes) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationCreateButtonProps>, {
-    visible: boolean;
-    height: number;
-    width: number;
+    size: number;
 }>>> & Readonly<{
-    onClick?: ((event: Event) => any) | undefined;
+    onClick?: ((key: CreateConvTypes) => any) | undefined;
 }>, {
-    visible: boolean;
-    height: number;
-    width: number;
+    size: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;