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

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: { type: [Object, Function], default: () => ConversationPreviewUIComponent },
+    conversation: {},
+    isSelected: { type: Boolean, default: false },
+    enableActions: { type: Boolean, default: true },
+    highlightMatchString: {},
+    Avatar: { type: [Object, Function], default: () => Avatar },
+    Title: {},
+    LastMessageAbstract: {},
+    LastMessageTimestamp: {},
+    Unread: {},
+    ConversationActions: { type: [Object, Function], 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("TUIConversation.Image")}]`;
+    case TUIChatEngine.TYPES.MSG_AUDIO:
+      return `[${t("TUIConversation.Audio")}]`;
+    case TUIChatEngine.TYPES.MSG_VIDEO:
+      return `[${t("TUIConversation.Video")}]`;
+    case TUIChatEngine.TYPES.MSG_FILE:
+      return `[${t("TUIConversation.File")}]`;
+    case TUIChatEngine.TYPES.MSG_CUSTOM:
+      return `[${t("TUIConversation.Custom")}]`;
+    case TUIChatEngine.TYPES.MSG_LOCATION:
+      return `[${t("TUIConversation.Location")}]`;
+    case TUIChatEngine.TYPES.MSG_FACE:
+      return `[${t("TUIConversation.Emoji")}]`;
+    case TUIChatEngine.TYPES.MSG_MERGER:
+      return `[${t("TUIConversation.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 { isPC } from "../../../utils/env.js";
+import { VariantType } from "../../../types/search.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: { type: [Object, Function], default: () => Search },
+    variant: {},
+    SearchBar: { type: [Object, Function], 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
+};