tuikit-atomicx-vue3 0.1.0 → 0.1.1

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

@@ -0,0 +1,68 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, unref, toDisplayString } from "vue";
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
+import { IconMute } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationPreviewUnread",
+  props: {
+    conversation: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const isUnreadMarked = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.conversation) == null ? void 0 : _a.markList) == null ? void 0 : _b.includes(TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD);
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.conversationPreview__unread)
+      }, [
+        ((_a = _ctx.conversation) == null ? void 0 : _a.isMuted) ? (openBlock(), createBlock(unref(IconMute), { key: 0 })) : ((_b = _ctx.conversation) == null ? void 0 : _b.unreadCount) > 99 ? (openBlock(), createElementBlock("span", {
+          key: 1,
+          class: normalizeClass(_ctx.$style["unread-count"])
+        }, "99+", 2)) : ((_c = _ctx.conversation) == null ? void 0 : _c.unreadCount) > 0 ? (openBlock(), createElementBlock("span", {
+          key: 2,
+          class: normalizeClass(_ctx.$style["unread-count"])
+        }, toDisplayString((_d = _ctx.conversation) == null ? void 0 : _d.unreadCount), 3)) : isUnreadMarked.value ? (openBlock(), createElementBlock("span", {
+          key: 3,
+          class: normalizeClass(_ctx.$style["unread-count"])
+        }, "1", 2)) : createCommentVNode("", true)
+      ], 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 DefaultUnread = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  DefaultUnread as default
+};

package/dist/components/ConversationList/ConversationPreview/ConversationPreviewUnread.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/index.d.ts

@@ -0,0 +1,7 @@
+export { default as ConversationPreview } from './ConversationPreview.vue';
+export { default as ConversationPreviewUI } from './ConversationPreviewUI.vue';
+export { default as ConversationPreviewTitle } from './ConversationPreviewTitle.vue';
+export { default as ConversationPreviewTimestamp } from './ConversationPreviewTimestamp.vue';
+export { default as ConversationPreviewAbstract } from './ConversationPreviewAbstract.vue';
+export { default as ConversationPreviewUnread } from './ConversationPreviewUnread.vue';
+export { generateHighlightTitle, getLatestMessagePreview } from './utils';

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

@@ -0,0 +1,86 @@
+import { defineComponent, computed, h, createElementBlock, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, withCtx, renderSlot } from "vue";
+import Avatar from "../../Avatar/Avatar.js";
+import ConversationActionsComponent from "../ConversationActions/ConversationActions.js";
+import ConversationPreviewUIComponent from "./ConversationPreviewUI.js";
+import DefaultTitle from "./ConversationPreviewTitle.js";
+import DefaultLastMessageTimestamp from "./ConversationPreviewTimestamp.js";
+import DefaultLastMessageAbstract from "./ConversationPreviewAbstract.js";
+import DefaultUnread from "./ConversationPreviewUnread.js";
+import { generateHighlightTitle, getLatestMessagePreview } from "./utils.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationPreview",
+  props: {
+    Preview: { default: () => ConversationPreviewUIComponent },
+    conversation: {},
+    isSelected: { type: Boolean, default: false },
+    enableActions: { type: Boolean, default: true },
+    highlightMatchString: {},
+    Avatar: { default: () => Avatar },
+    Title: {},
+    LastMessageAbstract: {},
+    LastMessageTimestamp: {},
+    Unread: {},
+    ConversationActions: { default: () => ConversationActionsComponent },
+    onSelectConversation: {},
+    actionsConfig: {},
+    className: {},
+    style: {},
+    children: {}
+  },
+  emits: ["selectConversation"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const Title = computed(() => h(DefaultTitle, {
+      conversation: props.conversation,
+      highlightMatchString: props.highlightMatchString
+    }));
+    const LastMessageTimestamp = computed(() => h(DefaultLastMessageTimestamp, {
+      conversation: props.conversation
+    }));
+    const LastMessageAbstract = computed(() => h(DefaultLastMessageAbstract, {
+      conversation: props.conversation
+    }));
+    const Unread = computed(() => h(DefaultUnread, {
+      conversation: props.conversation
+    }));
+    const handleSelectConversation = (conversation) => {
+      emit("selectConversation", conversation);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.Preview), {
+          conversation: _ctx.conversation,
+          "is-selected": _ctx.isSelected,
+          "enable-actions": _ctx.enableActions,
+          "highlight-match-string": _ctx.highlightMatchString,
+          avatar: _ctx.Avatar,
+          "conversation-actions": _ctx.ConversationActions,
+          title: Title.value,
+          "last-message-timestamp": LastMessageTimestamp.value,
+          "last-message-abstract": LastMessageAbstract.value,
+          unread: Unread.value,
+          "actions-config": _ctx.actionsConfig,
+          "class-name": _ctx.className,
+          style: normalizeStyle(_ctx.style),
+          onSelect: handleSelectConversation
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 40, ["conversation", "is-selected", "enable-actions", "highlight-match-string", "avatar", "conversation-actions", "title", "last-message-timestamp", "last-message-abstract", "unread", "actions-config", "class-name", "style"]))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as ConversationPreview,
+  DefaultLastMessageAbstract as ConversationPreviewAbstract,
+  DefaultLastMessageTimestamp as ConversationPreviewTimestamp,
+  DefaultTitle as ConversationPreviewTitle,
+  ConversationPreviewUIComponent as ConversationPreviewUI,
+  DefaultUnread as ConversationPreviewUnread,
+  generateHighlightTitle,
+  getLatestMessagePreview
+};

package/dist/components/ConversationList/ConversationPreview/utils.d.ts

@@ -0,0 +1,7 @@
+import { ConversationModel } from '../../../types';
+
+export declare const generateHighlightTitle: (conversation: ConversationModel, highlightMatchString?: string) => {
+    text: string;
+    isHighlight: boolean;
+}[];
+export declare const getLatestMessagePreview: (conversation: ConversationModel, t: (key: string) => string) => any;

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

@@ -0,0 +1,49 @@
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
+const generateHighlightTitle = (conversation, highlightMatchString) => {
+  var _a;
+  const title = (_a = conversation == null ? void 0 : conversation.getShowName) == null ? void 0 : _a.call(conversation);
+  if (!highlightMatchString) {
+    return [{ text: title, isHighlight: false }];
+  }
+  const regex = new RegExp(`(${highlightMatchString})`, "gi");
+  const parts = title.split(regex);
+  return parts.map((part) => ({
+    text: part,
+    isHighlight: part.toLowerCase() === highlightMatchString.toLowerCase()
+  }));
+};
+const getLatestMessagePreview = (conversation, t) => {
+  const { lastMessage } = conversation || {};
+  if (!lastMessage) {
+    return "";
+  }
+  const { type, payload } = lastMessage;
+  const { nick, userID } = lastMessage.nick || (lastMessage == null ? void 0 : lastMessage.from) || {};
+  const senderName = nick || userID || "";
+  switch (type) {
+    case TUIChatEngine.TYPES.MSG_TEXT:
+      return payload.text || "";
+    case TUIChatEngine.TYPES.MSG_IMAGE:
+      return `[${t("TUIChat.Image")}]`;
+    case TUIChatEngine.TYPES.MSG_AUDIO:
+      return `[${t("TUIChat.Audio")}]`;
+    case TUIChatEngine.TYPES.MSG_VIDEO:
+      return `[${t("TUIChat.Video")}]`;
+    case TUIChatEngine.TYPES.MSG_FILE:
+      return `[${t("TUIChat.File")}]`;
+    case TUIChatEngine.TYPES.MSG_CUSTOM:
+      return `[${t("TUIChat.Custom")}]`;
+    case TUIChatEngine.TYPES.MSG_LOCATION:
+      return `[${t("TUIChat.Location")}]`;
+    case TUIChatEngine.TYPES.MSG_FACE:
+      return `[${t("TUIChat.Emoji")}]`;
+    case TUIChatEngine.TYPES.MSG_MERGER:
+      return `[${t("TUIChat.Chat History")}]`;
+    default:
+      return senderName ? `${senderName}: ${(payload == null ? void 0 : payload.text) || ""}` : (payload == null ? void 0 : payload.text) || "";
+  }
+};
+export {
+  generateHighlightTitle,
+  getLatestMessagePreview
+};

package/dist/components/ConversationList/ConversationSearch/ConversationSearch.js

@@ -0,0 +1,197 @@
+import { defineComponent, ref, watch, createElementBlock, createCommentVNode, openBlock, normalizeStyle, normalizeClass, createElementVNode, createBlock, createVNode, resolveDynamicComponent, unref, h, withCtx } from "vue";
+import { useUIKit, TUIDialog, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { useSearchState } from "../../../states/SearchState.js";
+import { SearchBar as SearchBar$1, Search } from "../../Search/index.js";
+import { VariantType } from "../../../types/search.js";
+import { isPC } from "../../../utils/env.js";
+import { SearchType } from "../../../types/engine.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: "ConversationSearch",
+  props: {
+    visible: { type: Boolean, default: true },
+    Search: { default: () => Search },
+    variant: {},
+    SearchBar: { default: () => SearchBar$1 },
+    SearchResults: {},
+    SearchAdvanced: {},
+    SearchResultsPresearch: {},
+    SearchResultsLoading: {},
+    SearchResultsEmpty: {},
+    SearchResultItem: {},
+    debounceTime: {},
+    autoFocus: { type: Boolean },
+    className: {},
+    style: {},
+    onKeywordChange: {},
+    onSearchComplete: {},
+    onResultItemClick: {},
+    onError: {}
+  },
+  emits: ["keywordChange", "resultItemClick", "searchComplete", "error"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isActive = ref(false);
+    const isShowStandard = ref(false);
+    const searchMode = ref(VariantType.MINI);
+    const { t } = useUIKit();
+    const { keyword, setKeyword, setSelectedType } = useSearchState();
+    const { setActiveConversation } = useConversationListState();
+    const handleCloseStandard = () => {
+      isShowStandard.value = false;
+      searchMode.value = VariantType.MINI;
+      setKeyword("");
+    };
+    const handleSearchChange = (value) => {
+      isActive.value = !!value;
+      const isMiniSearchClose = !value && searchMode.value === VariantType.MINI;
+      const isStandardSearchClose = !isPC && searchMode.value === VariantType.STANDARD && !value;
+      if (isMiniSearchClose || isStandardSearchClose) {
+        handleCloseStandard();
+      }
+      emit("keywordChange", value);
+    };
+    const handleSearchUserClick = (item) => {
+      const { profile } = item || {};
+      const conversationID = `C2C${profile.userID}`;
+      setActiveConversation(conversationID);
+      handleCloseStandard();
+    };
+    const handleSearchGroupClick = (item) => {
+      const { conversation } = item || {};
+      if (conversation) {
+        setActiveConversation(conversation.conversationID);
+      } else {
+        TUIToast.error({
+          message: t("TUIConversation.You are not in the group, please join the group first")
+        });
+      }
+      handleCloseStandard();
+    };
+    const handleSearchChatMessageClick = (item) => {
+      const { conversationID: messageConversationID = "" } = item || {};
+      const { conversationID = "" } = (item == null ? void 0 : item.conversation) || {};
+      const targetConversationID = conversationID || messageConversationID;
+      if (targetConversationID) {
+        setActiveConversation(targetConversationID);
+        handleCloseStandard();
+      }
+    };
+    const handleOnSelectResult = (item, type) => {
+      if (props.onResultItemClick) {
+        emit("resultItemClick", item, type);
+        return;
+      }
+      switch (type) {
+        case SearchType.USER:
+          handleSearchUserClick(item);
+          break;
+        case SearchType.GROUP:
+          handleSearchGroupClick(item);
+          break;
+        case SearchType.CHAT_MESSAGE:
+          handleSearchChatMessageClick(item);
+          break;
+        default:
+          if (searchMode.value === VariantType.MINI) {
+            isShowStandard.value = true;
+            searchMode.value = VariantType.STANDARD;
+            setSelectedType(type);
+          }
+          break;
+      }
+    };
+    watch(keyword, handleSearchChange, { immediate: true });
+    return (_ctx, _cache) => {
+      return _ctx.visible ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([_ctx.$style.conversationSearch, _ctx.className, {
+          [_ctx.$style["conversationSearch--active"]]: isActive.value && !isShowStandard.value
+        }]),
+        style: normalizeStyle(_ctx.style)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([_ctx.$style.conversationSearch])
+        }, [
+          isShowStandard.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(SearchBar$1)), {
+            key: 0,
+            class: normalizeClass(_ctx.$style.conversationSearch__bar)
+          }, null, 8, ["class"])) : createCommentVNode("", true),
+          !isShowStandard.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(_ctx.$style.conversationSearch__box)
+          }, [
+            (openBlock(), createBlock(resolveDynamicComponent(unref(Search)), {
+              class: normalizeClass([_ctx.$style.conversationSearch__content, {
+                [_ctx.$style["searchContainer--h5"]]: !unref(isPC)
+              }]),
+              variant: unref(VariantType).MINI,
+              SearchBar: unref(SearchBar$1),
+              SearchResultsPresearch: _ctx.SearchResultsPresearch || (() => h("div")),
+              SearchResultsLoading: _ctx.SearchResultsLoading,
+              SearchResultsEmpty: _ctx.SearchResultsEmpty,
+              SearchResultItem: _ctx.SearchResultItem,
+              onResultItemClick: handleOnSelectResult,
+              onSearchComplete: _ctx.onSearchComplete,
+              onError: _ctx.onError
+            }, null, 40, ["class", "variant", "SearchBar", "SearchResultsPresearch", "SearchResultsLoading", "SearchResultsEmpty", "SearchResultItem", "onSearchComplete", "onError"]))
+          ], 2)) : createCommentVNode("", true),
+          createVNode(unref(TUIDialog), {
+            customClasses: [_ctx.$style.conversationSearch__advanced],
+            visible: isShowStandard.value,
+            "show-close": false,
+            "show-confirm": false,
+            "show-cancel": false,
+            onClose: handleCloseStandard
+          }, {
+            footer: withCtx(() => _cache[0] || (_cache[0] = [
+              createElementVNode("div", null, null, -1)
+            ])),
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(unref(Search)), {
+                class: normalizeClass([_ctx.$style.conversationSearch__content, {
+                  [_ctx.$style["searchContainer--h5"]]: !unref(isPC)
+                }]),
+                variant: unref(VariantType).STANDARD,
+                SearchBar: unref(SearchBar$1),
+                SearchResultsPresearch: _ctx.SearchResultsPresearch,
+                SearchResultsLoading: _ctx.SearchResultsLoading,
+                SearchResultsEmpty: _ctx.SearchResultsEmpty,
+                SearchResultItem: _ctx.SearchResultItem,
+                onResultItemClick: handleOnSelectResult,
+                onSearchComplete: _ctx.onSearchComplete,
+                onError: _ctx.onError
+              }, null, 40, ["class", "variant", "SearchBar", "SearchResultsPresearch", "SearchResultsLoading", "SearchResultsEmpty", "SearchResultItem", "onSearchComplete", "onError"]))
+            ]),
+            _: 1
+          }, 8, ["customClasses", "visible"])
+        ], 2)
+      ], 6)) : createCommentVNode("", true);
+    };
+  }
+});
+const conversationSearch = "_conversationSearch_1cu1j_1";
+const conversationSearch__bar = "_conversationSearch__bar_1cu1j_11";
+const SearchBar = "_SearchBar_1cu1j_23";
+const conversationSearch__box = "_conversationSearch__box_1cu1j_27";
+const conversationSearch__advanced = "_conversationSearch__advanced_1cu1j_30";
+const searchBtn = "_searchBtn_1cu1j_42";
+const style0 = {
+  conversationSearch,
+  conversationSearch__bar,
+  "conversationSearch--active": "_conversationSearch--active_1cu1j_15",
+  SearchBar,
+  conversationSearch__box,
+  conversationSearch__advanced,
+  "conversationSearch__advanced--h5": "_conversationSearch__advanced--h5_1cu1j_34",
+  searchBtn
+};
+const cssModules = {
+  "$style": style0
+};
+const ConversationSearchComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ConversationSearchComponent as default
+};