tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/dist/components/ConversationList/ConversationPreview/ConversationPreviewAbstract.js

@@ -0,0 +1,69 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, Fragment, createElementVNode, createTextVNode, toDisplayString, unref } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { getLatestMessagePreview } from "./utils.js";
+import { JSONStringToParse } from "../../../utils/json.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationPreviewAbstract",
+  props: {
+    conversation: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const draftTextAbstract = computed(() => {
+      var _a;
+      const { draftText = "" } = (props == null ? void 0 : props.conversation) || {};
+      return ((_a = JSONStringToParse(draftText)) == null ? void 0 : _a.abstract) || draftText;
+    });
+    const latestMessagePreview = computed(() => getLatestMessagePreview(props.conversation, t));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.conversationPreview__abstract)
+      }, [
+        draftTextAbstract.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("label", {
+            class: normalizeClass(_ctx.$style.conversationPreview__drafts)
+          }, toDisplayString(unref(t)("TUIChat.[Drafts]")), 3),
+          createTextVNode(" " + toDisplayString(" ") + " " + toDisplayString(draftTextAbstract.value), 1)
+        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createTextVNode(toDisplayString(latestMessagePreview.value), 1)
+        ], 64))
+      ], 2);
+    };
+  }
+});
+const conversationPreview = "_conversationPreview_87t7r_1";
+const conversationPreview__avatar = "_conversationPreview__avatar_87t7r_23";
+const conversationPreview__content = "_conversationPreview__content_87t7r_27";
+const conversationPreview__header = "_conversationPreview__header_87t7r_31";
+const conversationPreview__title = "_conversationPreview__title_87t7r_37";
+const conversationPreview__time = "_conversationPreview__time_87t7r_46";
+const conversationPreview__footer = "_conversationPreview__footer_87t7r_53";
+const conversationPreview__abstract = "_conversationPreview__abstract_87t7r_58";
+const conversationPreview__external = "_conversationPreview__external_87t7r_66";
+const conversationPreview__unread = "_conversationPreview__unread_87t7r_75";
+const conversationPreview__actions = "_conversationPreview__actions_87t7r_92";
+const style0 = {
+  conversationPreview,
+  "conversationPreview--active": "_conversationPreview--active_87t7r_17",
+  "conversationPreview--pin": "_conversationPreview--pin_87t7r_20",
+  conversationPreview__avatar,
+  conversationPreview__content,
+  conversationPreview__header,
+  conversationPreview__title,
+  conversationPreview__time,
+  conversationPreview__footer,
+  conversationPreview__abstract,
+  conversationPreview__external,
+  conversationPreview__unread,
+  "unread-count": "_unread-count_87t7r_79",
+  conversationPreview__actions
+};
+const cssModules = {
+  "$style": style0
+};
+const DefaultLastMessageAbstract = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  DefaultLastMessageAbstract as default
+};

package/dist/components/ConversationList/ConversationPreview/ConversationPreviewAbstract.vue.d.ts

@@ -0,0 +1,17 @@
+import { ConversationModel } from '../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    conversation: ConversationModel;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    conversation: ConversationModel;
+}>>> & Readonly<{}>, {}, {}, {}, {}, 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/ConversationPreview/ConversationPreviewTimestamp.js

@@ -0,0 +1,58 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, toDisplayString, unref } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { getTimeStamp } from "../../../utils/time.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationPreviewTimestamp",
+  props: {
+    conversation: {}
+  },
+  setup(__props) {
+    var _a, _b;
+    const props = __props;
+    const { language } = useUIKit();
+    const time = getTimeStamp({
+      time: Number(((_b = (_a = props.conversation) == null ? void 0 : _a.lastMessage) == null ? void 0 : _b.lastTime) || 0) * 1e3,
+      language
+    }) || "";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.conversationPreview__time)
+      }, toDisplayString(unref(time)), 3);
+    };
+  }
+});
+const conversationPreview = "_conversationPreview_87t7r_1";
+const conversationPreview__avatar = "_conversationPreview__avatar_87t7r_23";
+const conversationPreview__content = "_conversationPreview__content_87t7r_27";
+const conversationPreview__header = "_conversationPreview__header_87t7r_31";
+const conversationPreview__title = "_conversationPreview__title_87t7r_37";
+const conversationPreview__time = "_conversationPreview__time_87t7r_46";
+const conversationPreview__footer = "_conversationPreview__footer_87t7r_53";
+const conversationPreview__abstract = "_conversationPreview__abstract_87t7r_58";
+const conversationPreview__external = "_conversationPreview__external_87t7r_66";
+const conversationPreview__unread = "_conversationPreview__unread_87t7r_75";
+const conversationPreview__actions = "_conversationPreview__actions_87t7r_92";
+const style0 = {
+  conversationPreview,
+  "conversationPreview--active": "_conversationPreview--active_87t7r_17",
+  "conversationPreview--pin": "_conversationPreview--pin_87t7r_20",
+  conversationPreview__avatar,
+  conversationPreview__content,
+  conversationPreview__header,
+  conversationPreview__title,
+  conversationPreview__time,
+  conversationPreview__footer,
+  conversationPreview__abstract,
+  conversationPreview__external,
+  conversationPreview__unread,
+  "unread-count": "_unread-count_87t7r_79",
+  conversationPreview__actions
+};
+const cssModules = {
+  "$style": style0
+};
+const DefaultLastMessageTimestamp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  DefaultLastMessageTimestamp as default
+};

package/dist/components/ConversationList/ConversationPreview/ConversationPreviewTimestamp.vue.d.ts

@@ -0,0 +1,17 @@
+import { ConversationModel } from '../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    conversation: ConversationModel;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    conversation: ConversationModel;
+}>>> & Readonly<{}>, {}, {}, {}, {}, 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/ConversationPreview/ConversationPreviewTitle.js

@@ -0,0 +1,63 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, Fragment, renderList, toDisplayString } from "vue";
+import { generateHighlightTitle } from "./utils.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationPreviewTitle",
+  props: {
+    conversation: {},
+    highlightMatchString: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const titleItems = computed(() => generateHighlightTitle(props.conversation, props.highlightMatchString));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([_ctx.$style.conversationPreview__title, _ctx.$style.textEllipsis])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(titleItems.value, (item, index) => {
+          return openBlock(), createElementBlock("span", {
+            key: index,
+            class: normalizeClass({
+              [_ctx.$style["conversationPreview__title--highlight"]]: item.isHighlight,
+              [_ctx.$style["conversationPreview__title--normal"]]: !item.isHighlight
+            })
+          }, toDisplayString(item.text), 3);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+const conversationPreview = "_conversationPreview_87t7r_1";
+const conversationPreview__avatar = "_conversationPreview__avatar_87t7r_23";
+const conversationPreview__content = "_conversationPreview__content_87t7r_27";
+const conversationPreview__header = "_conversationPreview__header_87t7r_31";
+const conversationPreview__title = "_conversationPreview__title_87t7r_37";
+const conversationPreview__time = "_conversationPreview__time_87t7r_46";
+const conversationPreview__footer = "_conversationPreview__footer_87t7r_53";
+const conversationPreview__abstract = "_conversationPreview__abstract_87t7r_58";
+const conversationPreview__external = "_conversationPreview__external_87t7r_66";
+const conversationPreview__unread = "_conversationPreview__unread_87t7r_75";
+const conversationPreview__actions = "_conversationPreview__actions_87t7r_92";
+const style0 = {
+  conversationPreview,
+  "conversationPreview--active": "_conversationPreview--active_87t7r_17",
+  "conversationPreview--pin": "_conversationPreview--pin_87t7r_20",
+  conversationPreview__avatar,
+  conversationPreview__content,
+  conversationPreview__header,
+  conversationPreview__title,
+  conversationPreview__time,
+  conversationPreview__footer,
+  conversationPreview__abstract,
+  conversationPreview__external,
+  conversationPreview__unread,
+  "unread-count": "_unread-count_87t7r_79",
+  conversationPreview__actions
+};
+const cssModules = {
+  "$style": style0
+};
+const DefaultTitle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  DefaultTitle as default
+};

package/dist/components/ConversationList/ConversationPreview/ConversationPreviewTitle.vue.d.ts

@@ -0,0 +1,19 @@
+import { ConversationModel } from '../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    conversation: ConversationModel;
+    highlightMatchString?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    conversation: ConversationModel;
+    highlightMatchString?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, 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/ConversationPreview/ConversationPreviewUI.js

@@ -0,0 +1,166 @@
+import { defineComponent, ref, watch, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, unref, normalizeStyle, normalizeClass, renderSlot, resolveDynamicComponent, mergeProps } from "vue";
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
+import Avatar from "../../Avatar/Avatar.js";
+import DefaultLastMessageAbstract from "./ConversationPreviewAbstract.js";
+import DefaultLastMessageTimestamp from "./ConversationPreviewTimestamp.js";
+import DefaultTitle from "./ConversationPreviewTitle.js";
+import DefaultUnread from "./ConversationPreviewUnread.js";
+import ConversationActionsComponent from "../ConversationActions/ConversationActions.js";
+import { useMouseHover } from "../../../hooks/useMouseHover.js";
+import { useLongPress } from "../../../hooks/useLongPress.js";
+import { isH5 } from "../../../utils/env.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: "ConversationPreviewUI",
+  props: {
+    conversation: {},
+    isSelected: { type: Boolean, default: false },
+    enableActions: { type: Boolean, default: true },
+    highlightMatchString: {},
+    Avatar: { default: () => Avatar },
+    Title: { default: () => DefaultTitle },
+    LastMessageAbstract: { default: () => DefaultLastMessageAbstract },
+    LastMessageTimestamp: { default: () => DefaultLastMessageTimestamp },
+    Unread: { default: () => DefaultUnread },
+    ConversationActions: { default: () => ConversationActionsComponent },
+    onSelectConversation: {},
+    actionsConfig: {},
+    className: {},
+    style: {},
+    children: {}
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { activeConversation, setActiveConversation } = useConversationListState();
+    const conversationPreviewRef = ref();
+    const isActionMenuActive = ref(false);
+    const { isHovering } = useMouseHover(conversationPreviewRef);
+    const { handleTouchStart, handleTouchEnd } = useLongPress(() => {
+      if (isH5) {
+        isActionMenuActive.value = true;
+      }
+    });
+    watch(isHovering, (newValue) => {
+      if (!isH5) {
+        isActionMenuActive.value = newValue;
+      }
+    });
+    const handleClick = () => {
+      emit("select", props.conversation);
+      setActiveConversation(props.conversation.conversationID);
+    };
+    const handleMouseEnter = () => {
+      if (!isH5) {
+        isActionMenuActive.value = true;
+      }
+    };
+    const handleMouseLeave = () => {
+      if (!isH5) {
+        isActionMenuActive.value = false;
+      }
+    };
+    const handleCloseActionsModal = () => {
+      isActionMenuActive.value = false;
+    };
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          ref_key: "conversationPreviewRef",
+          ref: conversationPreviewRef,
+          class: normalizeClass([
+            _ctx.$style.conversationPreview,
+            _ctx.className,
+            unref(isH5) && [_ctx.$style["conversationPreview--mobile"]],
+            (_ctx.isSelected || ((_a = _ctx.conversation) == null ? void 0 : _a.conversationID) === ((_b = unref(activeConversation)) == null ? void 0 : _b.conversationID)) && [_ctx.$style["conversationPreview--active"]],
+            !((_c = _ctx.conversation) == null ? void 0 : _c.isMuted) && (((_d = _ctx.conversation) == null ? void 0 : _d.unreadCount) > 0 || ((_f = (_e = _ctx.conversation) == null ? void 0 : _e.markList) == null ? void 0 : _f.includes(unref(TUIChatEngine).TYPES.CONV_MARK_TYPE_UNREAD))) && [_ctx.$style["conversationPreview--unread"]],
+            ((_g = _ctx.conversation) == null ? void 0 : _g.isPinned) && [_ctx.$style["conversationPreview--pin"]],
+            ((_h = _ctx.conversation) == null ? void 0 : _h.isMuted) && [_ctx.$style["conversationPreview--mute"]]
+          ]),
+          style: normalizeStyle(_ctx.style),
+          onClick: handleClick,
+          onTouchstart: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => unref(handleTouchStart) && unref(handleTouchStart)(...args)),
+          onTouchend: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => unref(handleTouchEnd) && unref(handleTouchEnd)(...args)),
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, () => {
+            var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+            return [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["conversationPreview__avatar"])
+              }, [
+                (openBlock(), createBlock(resolveDynamicComponent(_ctx.Avatar), {
+                  src: (_b2 = (_a2 = _ctx.conversation) == null ? void 0 : _a2.getAvatar) == null ? void 0 : _b2.call(_a2),
+                  unreadCount: ((_c2 = _ctx.conversation) == null ? void 0 : _c2.isMuted) && ((_e2 = (_d2 = _ctx.conversation) == null ? void 0 : _d2.markList) == null ? void 0 : _e2.includes(unref(TUIChatEngine).TYPES.CONV_MARK_TYPE_UNREAD)) ? 1 : void 0,
+                  isDotUnreadCount: ((_f2 = _ctx.conversation) == null ? void 0 : _f2.isMuted) && ((_h2 = (_g2 = _ctx.conversation) == null ? void 0 : _g2.markList) == null ? void 0 : _h2.includes(unref(TUIChatEngine).TYPES.CONV_MARK_TYPE_UNREAD))
+                }, null, 8, ["src", "unreadCount", "isDotUnreadCount"]))
+              ], 2),
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["conversationPreview__content"])
+              }, [
+                (openBlock(), createBlock(resolveDynamicComponent(_ctx.Title), { conversation: _ctx.conversation }, null, 8, ["conversation"])),
+                (openBlock(), createBlock(resolveDynamicComponent(_ctx.LastMessageAbstract), { conversation: _ctx.conversation }, null, 8, ["conversation"]))
+              ], 2),
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["conversationPreview__external"])
+              }, [
+                (openBlock(), createBlock(resolveDynamicComponent(_ctx.Unread), { conversation: _ctx.conversation }, null, 8, ["conversation"])),
+                _ctx.enableActions && isActionMenuActive.value && !unref(isH5) ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.ConversationActions), mergeProps({
+                  key: 0,
+                  conversation: _ctx.conversation
+                }, _ctx.actionsConfig, { onClose: handleCloseActionsModal }), null, 16, ["conversation"])) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.LastMessageTimestamp), {
+                  key: 1,
+                  conversation: _ctx.conversation
+                }, null, 8, ["conversation"]))
+              ], 2)
+            ];
+          })
+        ], 38),
+        unref(isH5) && _ctx.enableActions && isActionMenuActive.value ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.ConversationActions), mergeProps({
+          key: 0,
+          conversation: _ctx.conversation
+        }, _ctx.actionsConfig, { onClose: handleCloseActionsModal }), null, 16, ["conversation"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const conversationPreview = "_conversationPreview_87t7r_1";
+const conversationPreview__avatar = "_conversationPreview__avatar_87t7r_23";
+const conversationPreview__content = "_conversationPreview__content_87t7r_27";
+const conversationPreview__header = "_conversationPreview__header_87t7r_31";
+const conversationPreview__title = "_conversationPreview__title_87t7r_37";
+const conversationPreview__time = "_conversationPreview__time_87t7r_46";
+const conversationPreview__footer = "_conversationPreview__footer_87t7r_53";
+const conversationPreview__abstract = "_conversationPreview__abstract_87t7r_58";
+const conversationPreview__external = "_conversationPreview__external_87t7r_66";
+const conversationPreview__unread = "_conversationPreview__unread_87t7r_75";
+const conversationPreview__actions = "_conversationPreview__actions_87t7r_92";
+const style0 = {
+  conversationPreview,
+  "conversationPreview--active": "_conversationPreview--active_87t7r_17",
+  "conversationPreview--pin": "_conversationPreview--pin_87t7r_20",
+  conversationPreview__avatar,
+  conversationPreview__content,
+  conversationPreview__header,
+  conversationPreview__title,
+  conversationPreview__time,
+  conversationPreview__footer,
+  conversationPreview__abstract,
+  conversationPreview__external,
+  conversationPreview__unread,
+  "unread-count": "_unread-count_87t7r_79",
+  conversationPreview__actions
+};
+const cssModules = {
+  "$style": style0
+};
+const ConversationPreviewUIComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ConversationPreviewUIComponent as default
+};