tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/dist/components/ConversationList/ConversationActions/ConversationActions.js

@@ -0,0 +1,207 @@
+import { defineComponent, ref, computed, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createBlock, renderSlot, createVNode, withModifiers, Fragment, renderList, toDisplayString, withCtx } from "vue";
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
+import { useUIKit, IconEllipsis } from "@tencentcloud/uikit-base-component-vue3";
+import { isH5 } from "../../../utils/env.js";
+import Popup from "../../../baseComp/Popup/Popup.js";
+import { useConversationListState } from "../../../states/ConversationListState/ConversationListState.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: "ConversationActions",
+  props: {
+    conversation: {},
+    className: {},
+    style: {},
+    onMarkConversationUnread: {},
+    onConversationPin: {},
+    onConversationMute: {},
+    onConversationDelete: {},
+    customConversationActions: {},
+    PopupIcon: {},
+    PopupElements: {},
+    onClick: {},
+    onClose: {},
+    enablePin: { type: Boolean, default: true },
+    enableMute: { type: Boolean, default: true },
+    enableDelete: { type: Boolean, default: true },
+    enableMarkUnread: { type: Boolean, default: true }
+  },
+  emits: ["click", "close", "markConversationUnread", "conversationPin", "conversationMute", "conversationDelete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const { markConversationUnread } = useConversationListState();
+    const markUnreadStatus = ref(true);
+    const anchor = ref(null);
+    const conversationActions2 = ref({});
+    const enabledActions = computed(() => Object.entries(conversationActions2.value).filter(([, action]) => action.enable !== false).reduce((acc, [key, action]) => {
+      acc[key] = action;
+      return acc;
+    }, {}));
+    const generateConversationActions = () => ({
+      pin: {
+        enable: !!props.enablePin,
+        label: props.conversation.isPinned ? t("TUIConversation.Unpin") : t("TUIConversation.Pin"),
+        onClick: (_conversation, e) => {
+          _conversation.pinConversation();
+          emit("conversationPin", _conversation, e);
+        }
+      },
+      mute: {
+        enable: !!props.enableMute,
+        label: props.conversation.isMuted ? t("TUIConversation.Unmute") : t("TUIConversation.Mute"),
+        onClick: (_conversation, e) => {
+          _conversation.muteConversation();
+          emit("conversationMute", _conversation, e);
+        }
+      },
+      markUnread: {
+        enable: !!props.enableMarkUnread,
+        label: markUnreadStatus.value ? t("TUIConversation.MarkRead") : t("TUIConversation.MarkUnRead"),
+        onClick: (_conversation, e) => {
+          markConversationUnread(_conversation.conversationID, !markUnreadStatus.value);
+          emit("markConversationUnread", _conversation, e);
+        }
+      },
+      delete: {
+        enable: !!props.enableDelete,
+        label: t("TUIConversation.Delete"),
+        onClick: (_conversation, e) => {
+          _conversation.deleteConversation();
+          emit("conversationDelete", _conversation, e);
+        }
+      }
+    });
+    watch(
+      () => props.conversation,
+      (newConversation) => {
+        var _a;
+        if (newConversation.unreadCount > 0) {
+          markUnreadStatus.value = true;
+        } else {
+          const targetValue = TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD;
+          const unreadStatus = (_a = newConversation == null ? void 0 : newConversation.markList) == null ? void 0 : _a.includes(targetValue);
+          markUnreadStatus.value = unreadStatus;
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      [() => props.conversation, () => props.customConversationActions],
+      ([newConversation, newCustomActions]) => {
+        conversationActions2.value = {
+          ...generateConversationActions(),
+          ...newCustomActions || {}
+        };
+      },
+      { immediate: true, deep: true }
+    );
+    const toggleClick = (e) => {
+      anchor.value = anchor.value ? null : e.currentTarget;
+    };
+    const onClickMenuItem = (e, key) => {
+      toggleClick(e);
+      emit("click", e, key, props.conversation);
+      const action = conversationActions2.value[key];
+      if (action) {
+        action.onClick(props.conversation, e);
+      }
+      if (props.onClose) {
+        props.onClose();
+      }
+    };
+    const handleMaskClick = (e) => {
+      e.stopPropagation();
+      if (e.target === e.currentTarget && isH5 && props.onClose) {
+        props.onClose();
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([_ctx.$style.conversationActions, {
+          [_ctx.$style.conversationActions__H5]: unref(isH5)
+        }, _ctx.className]),
+        style: normalizeStyle(_ctx.style),
+        onClick: handleMaskClick
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.conversationActions__popupIcon),
+          onClick: toggleClick
+        }, [
+          renderSlot(_ctx.$slots, "popupIcon", {}, () => [
+            createVNode(unref(IconEllipsis))
+          ])
+        ], 2),
+        _ctx.PopupElements || unref(isH5) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.conversationActions__H5__container),
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(enabledActions.value, (action, key) => {
+            return openBlock(), createElementBlock("div", {
+              key,
+              class: normalizeClass([_ctx.$style.conversationActions__item, {
+                [_ctx.$style["conversationActions__item--delete"]]: key === "delete"
+              }]),
+              onClick: (e) => onClickMenuItem(e, key)
+            }, toDisplayString(action.label), 11, _hoisted_1);
+          }), 128))
+        ], 2)) : (openBlock(), createBlock(unref(Popup), {
+          key: 1,
+          open: Boolean(anchor.value),
+          anchor: anchor.value,
+          placement: "bottom-end",
+          "disable-portal": "",
+          "slot-props": {
+            root: {
+              style: {
+                zIndex: 5
+              }
+            }
+          }
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.conversationActions__container)
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(enabledActions.value, (action, key) => {
+                return openBlock(), createElementBlock("div", {
+                  key,
+                  class: normalizeClass([_ctx.$style.conversationActions__item, {
+                    [_ctx.$style["conversationActions__item--delete"]]: key === "delete"
+                  }]),
+                  onClick: (e) => onClickMenuItem(e, key)
+                }, toDisplayString(action.label), 11, _hoisted_2);
+              }), 128))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["open", "anchor"]))
+      ], 6);
+    };
+  }
+});
+const conversationActions = "_conversationActions_15ko6_1";
+const conversationActions__container = "_conversationActions__container_15ko6_18";
+const conversationActions__h5__container = "_conversationActions__h5__container_15ko6_28";
+const conversationActions__item = "_conversationActions__item_15ko6_39";
+const style0 = {
+  conversationActions,
+  "conversationActions__popup-icon": "_conversationActions__popup-icon_15ko6_4",
+  "more-icon": "_more-icon_15ko6_13",
+  conversationActions__container,
+  conversationActions__h5__container,
+  conversationActions__item,
+  "conversationActions__item--delete": "_conversationActions__item--delete_15ko6_56",
+  "action-icon": "_action-icon_15ko6_59"
+};
+const cssModules = {
+  "$style": style0
+};
+const ConversationActionsComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ConversationActionsComponent as default
+};

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

@@ -0,0 +1,59 @@
+import { ConversationModel, ConversationActionsProps } from '../../../types';
+
+declare function __VLS_template(): {
+    popupIcon?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationActionsProps>, {
+    enablePin: boolean;
+    enableMute: boolean;
+    enableDelete: boolean;
+    enableMarkUnread: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (e: Event, key?: string | undefined, conversation?: ConversationModel | undefined) => void;
+    close: () => void;
+    markConversationUnread: (conversation: ConversationModel, e?: Event | undefined) => void;
+    conversationPin: (conversation: ConversationModel, e?: Event | undefined) => void;
+    conversationMute: (conversation: ConversationModel, e?: Event | undefined) => void;
+    conversationDelete: (conversation: ConversationModel, e?: Event | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationActionsProps>, {
+    enablePin: boolean;
+    enableMute: boolean;
+    enableDelete: boolean;
+    enableMarkUnread: boolean;
+}>>> & Readonly<{
+    onClick?: ((e: Event, key?: string | undefined, conversation?: ConversationModel | undefined) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onMarkConversationUnread?: ((conversation: ConversationModel, e?: Event | undefined) => any) | undefined;
+    onConversationPin?: ((conversation: ConversationModel, e?: Event | undefined) => any) | undefined;
+    onConversationMute?: ((conversation: ConversationModel, e?: Event | undefined) => any) | undefined;
+    onConversationDelete?: ((conversation: ConversationModel, e?: Event | undefined) => any) | undefined;
+}>, {
+    enablePin: boolean;
+    enableMute: boolean;
+    enableDelete: boolean;
+    enableMarkUnread: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ConversationList/ConversationActions/index.d.ts

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

package/dist/components/ConversationList/ConversationActions/index.js

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

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

@@ -0,0 +1,157 @@
+import { defineComponent, ref, watch, createElementBlock, createCommentVNode, openBlock, normalizeStyle, normalizeClass, createBlock, createElementVNode, createVNode, unref, toDisplayString } from "vue";
+import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
+import { useUIKit, IconArrowStrokeBack } from "@tencentcloud/uikit-base-component-vue3";
+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 { _ 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 _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 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 setIsCreateGroup = (value) => {
+      isCreateGroup.value = value;
+    };
+    const setPageState = (value) => {
+      pageState.value = value;
+    };
+    const setSelectList = (value) => {
+      selectList.value = value;
+    };
+    const toggleCreateConversation = (value) => {
+      showCreateConversation.value = value;
+    };
+    const resetCreatePageState = () => {
+      isCreateGroup.value = false;
+      pageState.value = PageStateTypes.USER_SELECT;
+      selectList.value = [];
+    };
+    const _onConversationCreated = (conversation) => {
+      toggleCreateConversation(false);
+      resetCreatePageState();
+      TUIConversationService.switchConversation(conversation.conversationID);
+      emit("conversationCreated", 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 handleBeforeCreate = (params) => {
+      if (props.onBeforeCreateConversation) {
+        return props.onBeforeCreateConversation(params);
+      }
+      return params;
+    };
+    const handleCreated = (conversation) => {
+      _onConversationCreated(conversation);
+    };
+    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)
+      }, [
+        !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);
+    };
+  }
+});
+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]]);
+export {
+  ConversationCreateComponent as default
+};

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

@@ -0,0 +1,38 @@
+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;
+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,41 @@
+import { defineComponent, createBlock, createCommentVNode, openBlock, unref, normalizeClass } from "vue";
+import { IconSearchMore } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationCreateButton",
+  props: {
+    visible: { type: Boolean, default: true },
+    onClick: {},
+    height: { default: 24 },
+    width: { default: 24 },
+    className: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const handleClick = (event) => {
+      var _a;
+      emit("click", event);
+      (_a = props.onClick) == null ? void 0 : _a.call(props, event);
+    };
+    return (_ctx, _cache) => {
+      return _ctx.visible ? (openBlock(), createBlock(unref(IconSearchMore), {
+        key: 0,
+        class: normalizeClass([_ctx.$style["conversation-create-button"], _ctx.className]),
+        size: "24px",
+        onClick: handleClick
+      }, null, 8, ["class"])) : createCommentVNode("", true);
+    };
+  }
+});
+const style0 = {
+  "conversation-create-button": "_conversation-create-button_1i56h_1"
+};
+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,37 @@
+import { ConversationCreateButtonProps } from '../../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationCreateButtonProps>, {
+    visible: boolean;
+    height: number;
+    width: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: Event) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ConversationCreateButtonProps>, {
+    visible: boolean;
+    height: number;
+    width: number;
+}>>> & Readonly<{
+    onClick?: ((event: Event) => any) | undefined;
+}>, {
+    visible: boolean;
+    height: number;
+    width: 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];
+} & {};