tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/dist/types/types.js

@@ -296,6 +296,15 @@ var TUILiveLayoutManagerEvents = /* @__PURE__ */ ((TUILiveLayoutManagerEvents2)
   TUILiveLayoutManagerEvents2["onLiveVideoLayoutListChanged"] = "onLiveVideoLayoutListChanged";
   return TUILiveLayoutManagerEvents2;
 })(TUILiveLayoutManagerEvents || {});
+var TUISeatLayoutTemplate = /* @__PURE__ */ ((TUISeatLayoutTemplate2) => {
+  TUISeatLayoutTemplate2[TUISeatLayoutTemplate2["LandscapeDynamic_1v3"] = 200] = "LandscapeDynamic_1v3";
+  TUISeatLayoutTemplate2[TUISeatLayoutTemplate2["PortraitDynamic_Grid9"] = 600] = "PortraitDynamic_Grid9";
+  TUISeatLayoutTemplate2[TUISeatLayoutTemplate2["PortraitDynamic_1v6"] = 601] = "PortraitDynamic_1v6";
+  TUISeatLayoutTemplate2[TUISeatLayoutTemplate2["PortraitFixed_Grid9"] = 800] = "PortraitFixed_Grid9";
+  TUISeatLayoutTemplate2[TUISeatLayoutTemplate2["PortraitFixed_1v6"] = 801] = "PortraitFixed_1v6";
+  TUISeatLayoutTemplate2[TUISeatLayoutTemplate2["PortraitFixed_6v6"] = 802] = "PortraitFixed_6v6";
+  return TUISeatLayoutTemplate2;
+})(TUISeatLayoutTemplate || {});
 export {
   TRTCRole,
   TUIAudioQuality,
@@ -325,6 +334,7 @@ export {
   TUIRoomDismissedReason,
   TUIRoomEvents,
   TUIRoomType,
+  TUISeatLayoutTemplate,
   TUISeatMode,
   TUIVideoQuality,
   TUIVideoStreamType

package/dist/{useId-DlA8vN1W.js → useId-CsgLY8y3.js}

@@ -1,4 +1,4 @@
-import { i as injectConfigProviderContext } from "./Teleport-BnT1MTUO.js";
+import { i as injectConfigProviderContext } from "./Teleport-CMvGsENT.js";
 import * as vue from "vue";
 let count = 0;
 function useId(deterministicId, prefix = "reka") {

package/dist/utils/env.js

@@ -1,4 +1,4 @@
-import { g } from "../index-BREVQgBq.js";
+import { g } from "../index-CX1Zs9En.js";
 const isPC = g() === "pc";
 const isH5 = g() === "h5";
 const isWeChat = g() === "wechat";

package/dist/utils/environment.js

@@ -1,5 +1,5 @@
 var _a, _b;
-import { g } from "../index-BREVQgBq.js";
+import { g } from "../index-CX1Zs9En.js";
 const isPC = g() === "pc";
 const isH5 = g() === "h5";
 const isWeChat = g() === "wechat";

package/dist/utils/index.js

@@ -1,14 +1,17 @@
 import { JSONToObject, isArray, isDate, isFunction, isJSON, isMap, isObject, isPromise, isSet, isString, isSymbol, isUrl } from "./type-check.js";
-import { debounce, throttle } from "./lodash.js";
+import { debounce, debouncePromise, throttle } from "./lodash.js";
 import { isApp, isH5, isMobile, isPC, isUniFrameWork, isWeChat } from "./env.js";
 import { downFile } from "./downFile.js";
 import { copyTextToClipboard } from "./copyText.js";
 import { transformTextWithEmojiKeyToName, transformTextWithEmojiNameToKey } from "./emoji.js";
-import { safeJSONParse } from "./json.js";
+import { JSONStringToParse, deepClone, safeJSONParse, safeJSONStringify } from "./json.js";
 export {
+  JSONStringToParse,
   JSONToObject,
   copyTextToClipboard,
   debounce,
+  debouncePromise,
+  deepClone,
   downFile,
   isApp,
   isArray,
@@ -28,6 +31,7 @@ export {
   isUrl,
   isWeChat,
   safeJSONParse,
+  safeJSONStringify,
   throttle,
   transformTextWithEmojiKeyToName,
   transformTextWithEmojiNameToKey

package/dist/utils/json.d.ts

@@ -1,3 +1,4 @@
+export declare function JSONStringToParse(str: string): any;
 /**
  * safe JSON parse function
  * @param text JSON string
@@ -9,5 +10,25 @@
  * const num = safeJSONParse('123', 0);
  * const invalidJson = safeJSONParse('invalid json', { fallback: true });
  */
-declare function safeJSONParse<T>(text: string, defaultValue: T, reviver?: (key: string, value: any) => any): T;
-export { safeJSONParse, };
+export declare function safeJSONParse<T>(text: string, defaultValue: T, reviver?: (key: string, value: any) => any): T;
+/**
+ * safe JSON stringify function
+ * @param value value to stringify
+ * @param replacer JSON.stringify replacer function
+ * @param space JSON.stringify space parameter
+ * @returns JSON string or empty string when stringify failed
+ */
+export declare function safeJSONStringify(value: any, replacer?: (key: string, value: any) => any, space?: string | number): string;
+/**
+ * deep clone object using JSON
+ * @param obj object to clone
+ * @returns cloned object
+ */
+export declare function deepClone<T>(obj: T): T;
+declare const _default: {
+    JSONStringToParse: typeof JSONStringToParse;
+    safeJSONParse: typeof safeJSONParse;
+    safeJSONStringify: typeof safeJSONStringify;
+    deepClone: typeof deepClone;
+};
+export default _default;

package/dist/utils/json.js

@@ -1,3 +1,23 @@
+function isJSON(str) {
+  if (typeof str === "string") {
+    try {
+      const data = JSON.parse(str);
+      if (data) {
+        return true;
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
+  return false;
+}
+function JSONStringToParse(str) {
+  if (!isJSON(str)) {
+    return str;
+  }
+  return JSON.parse(str);
+}
 function safeJSONParse(text, defaultValue, reviver) {
   if (!text) {
     return defaultValue;
@@ -23,6 +43,33 @@ function safeJSONParse(text, defaultValue, reviver) {
     return defaultValue;
   }
 }
+function safeJSONStringify(value, replacer, space) {
+  try {
+    if (value === void 0 || value === null) {
+      return "";
+    }
+    return JSON.stringify(value, replacer, space);
+  } catch (error) {
+    console.warn("JSON stringify failed:", error);
+    return "";
+  }
+}
+function deepClone(obj) {
+  if (obj === null || typeof obj !== "object") {
+    return obj;
+  }
+  return safeJSONParse(safeJSONStringify(obj), obj);
+}
+const json = {
+  JSONStringToParse,
+  safeJSONParse,
+  safeJSONStringify,
+  deepClone
+};
 export {
-  safeJSONParse
+  JSONStringToParse,
+  deepClone,
+  json as default,
+  safeJSONParse,
+  safeJSONStringify
 };

package/dist/utils/lodash.d.ts

@@ -4,14 +4,16 @@ interface IDebounceOptions {
     trailing?: boolean;
 }
 type IThrottleOptions = IDebounceOptions;
-declare function throttle(func: any, wait: number, options?: IThrottleOptions): {
-    (): any;
+declare function throttle(func: any, wait: number, options?: IThrottleOptions): ((...args: [] | unknown[]) => any) & {
     cancel: () => void;
     flush: () => any;
 };
-declare function debounce(func: any, wait: number, options?: IDebounceOptions): {
-    (): any;
+declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number, options?: IDebounceOptions): ((...args: Parameters<T> | []) => ReturnType<T>) & {
     cancel: () => void;
-    flush: () => any;
+    flush: () => ReturnType<T>;
+};
+declare function debouncePromise<T extends (...args: any[]) => Promise<any>>(fn: T, delay: number): {
+    (...args: Parameters<T>): Promise<any>;
+    cancel(): void;
 };
-export { debounce, throttle, };
+export { debounce, debouncePromise, throttle, };

package/dist/utils/lodash.js

@@ -71,9 +71,9 @@ function debounce(func, wait, options) {
   function flush() {
     return timerId === void 0 ? result : trailingEdge(Date.now());
   }
-  function debounced() {
+  function debounced(...args) {
     const time = Date.now(), isInvoking = shouldInvoke(time);
-    lastArgs = arguments;
+    lastArgs = args;
     lastThis = this;
     lastCallTime = time;
     if (isInvoking) {
@@ -99,7 +99,31 @@ function isObject(value) {
   const type = typeof value;
   return value != null && (type == "object" || type == "function");
 }
+function debouncePromise(fn, delay) {
+  let timeoutId = null;
+  const debounced = (...args) => new Promise((resolve, reject) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(async () => {
+      try {
+        const result = await fn(...args);
+        resolve(result);
+      } catch (error) {
+        reject(error);
+      }
+    }, delay);
+  });
+  debounced.cancel = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  return debounced;
+}
 export {
   debounce,
+  debouncePromise,
   throttle
 };

package/dist/utils/riseInput.js

@@ -1,4 +1,4 @@
-import { f } from "../index-BREVQgBq.js";
+import { f } from "../index-CX1Zs9En.js";
 const ua = navigator.userAgent;
 function getScrollTypeByPlatform() {
   if (f) {

package/dist/utils/time.js

@@ -1,4 +1,4 @@
-import { i18next, useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { useUIKit, i18next } from "@tencentcloud/uikit-base-component-vue3";
 const millisecondsInWeek = 6048e5;
 const millisecondsInDay = 864e5;
 const constructFromSymbol = Symbol.for("constructDateFrom");

package/dist/{utils-CnPWv_hZ.js → utils-KP1QpeUS.js}

@@ -1,4 +1,4 @@
-import { g as getActiveElement } from "./Teleport-BnT1MTUO.js";
+import { g as getActiveElement } from "./Teleport-CMvGsENT.js";
 const ITEM_SELECT = "menu.itemSelect";
 const SELECTION_KEYS = ["Enter", " "];
 const FIRST_KEYS = [
@@ -12,10 +12,6 @@ const LAST_KEYS = [
   "End"
 ];
 const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
-({
-  ltr: [...SELECTION_KEYS, "ArrowRight"],
-  rtl: [...SELECTION_KEYS, "ArrowLeft"]
-});
 function getOpenState(open) {
   return open ? "open" : "closed";
 }

package/package.json

@@ -1,8 +1,29 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss",
+    "*.sass"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./chat": {
+      "types": "./dist/chat/index.d.ts",
+      "import": "./dist/chat/index.js"
+    },
+    "./rtc": {
+      "types": "./dist/rtc/index.d.ts",
+      "import": "./dist/rtc/index.js"
+    }
+  },
   "scripts": {},
   "peerDependencies": {
     "@tencentcloud/chat": "^3.5.4",
@@ -16,6 +37,7 @@
     "@tencentcloud/universal-api": "^2.4.0",
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
+    "@tiptap/pm": "^3.1.0",
     "@tiptap/starter-kit": "^2.11.5",
     "@tiptap/vue-3": "^2.11.5",
     "@vue/tsconfig": "^0.7.0",

package/src/baseComp/AudioIcon.vue

@@ -60,7 +60,7 @@ const audioLevelStyle = computed(() => {
   }
 
   .audio-icon {
-    position: absolute;
+    position: relative;
     top: 0;
     left: 0;
   }

package/src/baseComp/Popup/Popup.vue

@@ -0,0 +1,156 @@
+<template>
+  <Teleport :to="disablePortal ? undefined : 'body'" :disabled="disablePortal">
+    <Transition name="popup">
+      <div
+        v-if="open && anchor"
+        ref="popupRef"
+        :class="['tui-kit-popup', $style.popup]"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+import type { CSSProperties } from 'vue';
+
+export interface PopupProps {
+  open?: boolean;
+  anchor?: HTMLElement | null;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+  disablePortal?: boolean;
+  strategy?: 'absolute' | 'fixed';
+  offset?: number;
+}
+
+const props = withDefaults(defineProps<PopupProps>(), {
+  open: false,
+  placement: 'top',
+  disablePortal: false,
+  strategy: 'absolute',
+  offset: 10,
+});
+
+const popupRef = ref<HTMLElement | null>(null);
+const popupStyle = ref<CSSProperties>({});
+
+const calculatePosition = () => {
+  if (!props.anchor || !popupRef.value) return;
+
+  const anchorRect = props.anchor.getBoundingClientRect();
+  const popupRect = popupRef.value.getBoundingClientRect();
+  
+  let top = 0;
+  let left = 0;
+
+  switch (props.placement) {
+    case 'top':
+      top = anchorRect.top - popupRect.height - props.offset;
+      left = anchorRect.left + (anchorRect.width - popupRect.width) / 2;
+      break;
+    case 'bottom':
+      top = anchorRect.bottom + props.offset;
+      left = anchorRect.left + (anchorRect.width - popupRect.width) / 2;
+      break;
+    case 'left':
+      top = anchorRect.top + (anchorRect.height - popupRect.height) / 2;
+      left = anchorRect.left - popupRect.width - props.offset;
+      break;
+    case 'right':
+      top = anchorRect.top + (anchorRect.height - popupRect.height) / 2;
+      left = anchorRect.right + props.offset;
+      break;
+    case 'top-start':
+      top = anchorRect.top - popupRect.height - props.offset;
+      left = anchorRect.left;
+      break;
+    case 'top-end':
+      top = anchorRect.top - popupRect.height - props.offset;
+      left = anchorRect.right - popupRect.width;
+      break;
+    case 'bottom-start':
+      top = anchorRect.bottom + props.offset;
+      left = anchorRect.left;
+      break;
+    case 'bottom-end':
+      top = anchorRect.bottom + props.offset;
+      left = anchorRect.right - popupRect.width;
+      break;
+    case 'left-start':
+      top = anchorRect.top;
+      left = anchorRect.left - popupRect.width - props.offset;
+      break;
+    case 'left-end':
+      top = anchorRect.bottom - popupRect.height;
+      left = anchorRect.left - popupRect.width - props.offset;
+      break;
+    case 'right-start':
+      top = anchorRect.top;
+      left = anchorRect.right + props.offset;
+      break;
+    case 'right-end':
+      top = anchorRect.bottom - popupRect.height;
+      left = anchorRect.right + props.offset;
+      break;
+  }
+
+  // 边界检查
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  if (left < 0) left = 0;
+  if (left + popupRect.width > viewportWidth) left = viewportWidth - popupRect.width;
+  if (top < 0) top = 0;
+  if (top + popupRect.height > viewportHeight) top = viewportHeight - popupRect.height;
+
+  popupStyle.value = {
+    position: props.strategy,
+    top: `${top}px`,
+    left: `${left}px`,
+    zIndex: 1000,
+  };
+};
+
+const updatePosition = () => {
+  nextTick(() => {
+    calculatePosition();
+  });
+};
+
+// 监听 props 变化
+watch([() => props.open, () => props.anchor, () => props.placement], updatePosition);
+
+// 监听窗口变化
+onMounted(() => {
+  window.addEventListener('resize', updatePosition);
+  window.addEventListener('scroll', updatePosition);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updatePosition);
+  window.removeEventListener('scroll', updatePosition);
+});
+</script>
+
+<style lang="scss" module>
+.popup {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  max-width: 300px;
+  max-height: 400px;
+  overflow: auto;
+}
+
+:global(.popup-enter-active),
+:global(.popup-leave-active) {
+  transition: opacity 0.2s ease;
+}
+
+:global(.popup-enter-from),
+:global(.popup-leave-to) {
+  opacity: 0;
+}
+</style>

package/src/baseComp/Popup/index.ts

@@ -0,0 +1,2 @@
+export { default as Popup } from './Popup.vue';
+export type { PopupProps } from './Popup.vue';

package/src/baseComp/View/View.vue

@@ -1,7 +1,9 @@
 <template>
   <div
     :class="computedClass"
-    :style="props.style"
+    :style="{
+      gap: gap ? `${gap}px` : undefined,
+    }"
   >
     <slot />
   </div>
@@ -9,33 +11,28 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { CSSProperties } from 'vue';
 import cs from 'classnames';
 
 defineOptions({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'View',
-  inheritAttrs: true,
 });
 
 interface ViewProps {
+  gap?: number;
   // 方向：row | column
   dir?: 'row' | 'column';
-  // 主轴对齐：flex-start | flex-end | center | space-between | space-around | space-evenly
+  // main aix：flex-start | flex-end | center | space-between | space-around | space-evenly
   justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-  // 交叉轴对齐：flex-start | flex-end | center | baseline | stretch
+  // cross aix：flex-start | flex-end | center | baseline | stretch
   align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
-  // 原有属性
-  class?: string;
-  style?: CSSProperties;
 }
 
 const props = withDefaults(defineProps<ViewProps>(), {
+  gap: undefined,
   dir: 'column',
   justify: undefined,
   align: undefined,
-  class: undefined,
-  style: undefined,
 });
 
 // 计算最终的 class
@@ -46,11 +43,10 @@ const computedClass = computed(() => cs(
     [`view__v--justify-${props.justify}`]: props.justify,
     [`view__v--align-${props.align}`]: props.align,
   },
-  props.class,
 ));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .view__v {
   box-sizing: border-box;
   display: flex;
@@ -62,12 +58,12 @@ const computedClass = computed(() => cs(
   padding: 0;
   min-width: 0;
 
-  // 方向类
+  // direction class
   &--dir-row {
     flex-direction: row;
   }
 
-  // justify-content 类
+  // justify-content class
   &--justify-flex-start {
     justify-content: flex-start;
   }
@@ -92,7 +88,7 @@ const computedClass = computed(() => cs(
     justify-content: space-evenly;
   }
 
-  // align-items 类
+  // align-items class
   &--align-flex-start {
     align-items: flex-start;
   }

package/src/baseComp/index.ts

@@ -0,0 +1,2 @@
+export { Popup } from './Popup';
+export { default as Input } from './Input';

package/src/chat/index.ts

@@ -0,0 +1,98 @@
+// Chat related exports
+import { View as ViewComponent } from '../baseComp/View';
+import { ChatSetting as ChatSettingComponent } from '../components/ChatSetting';
+import {
+  ConversationList as ConversationListComponent,
+  ConversationActions as ConversationActionsComponent,
+  ConversationListHeader as ConversationListHeaderComponent,
+  ConversationListContent as ConversationListContentComponent,
+  ConversationPreview as ConversationPreviewComponent,
+} from '../components/ConversationList';
+import {
+  MessageInput as MessageInputComponent,
+  EmojiPicker as EmojiPickerComponent,
+} from '../components/MessageInput';
+import { MessageList as MessageListComponent } from '../components/MessageList';
+import {
+  Search as SearchComponent,
+  SearchAdvanced as SearchAdvancedComponent,
+  MessageAdvanced as MessageAdvancedComponent,
+  UserAdvanced as UserAdvancedComponent,
+  SearchResultItem as SearchResultItemComponent,
+  SearchBar as SearchBarComponent,
+  SearchResults as SearchResultsComponent,
+} from '../components/Search';
+import { useMessageActions as useMessageActionsHook } from '../hooks/useMessageActions';
+import { useConversationListState as conversationListState } from '../states/ConversationListState';
+import { useMessageActionState as messageActionState } from '../states/MessageActionState';
+import { useMessageInputState as messageInputState } from '../states/MessageInputState';
+import { useMessageListState as messageListState } from '../states/MessageListState';
+import { useSearchState as searchState } from '../states/SearchState';
+import { useUIOpenControlState as uiOpenControlState } from '../states/UIOpenControlState';
+
+import ChatLoginServer from './server';
+
+ChatLoginServer.getInstance().init();
+
+// component
+const Search = SearchComponent;
+const SearchAdvanced = SearchAdvancedComponent;
+const MessageAdvanced = MessageAdvancedComponent;
+const UserAdvanced = UserAdvancedComponent;
+const SearchBar = SearchBarComponent;
+const SearchResults = SearchResultsComponent;
+const SearchResultItem = SearchResultItemComponent;
+const ConversationList = ConversationListComponent;
+const ConversationActions = ConversationActionsComponent;
+const ConversationListHeader = ConversationListHeaderComponent;
+const ConversationListContent = ConversationListContentComponent;
+const ConversationPreview = ConversationPreviewComponent;
+
+const MessageList = MessageListComponent;
+const MessageInput = MessageInputComponent;
+const EmojiPicker = EmojiPickerComponent;
+const ChatSetting = ChatSettingComponent;
+const View = ViewComponent;
+
+// Hooks
+const useMessageActions = useMessageActionsHook;
+
+// States
+const useConversationListState = conversationListState;
+const useMessageActionState = messageActionState;
+const useMessageInputState = messageInputState;
+const useMessageListState = messageListState;
+const useSearchState = searchState;
+const useUIOpenControlState = uiOpenControlState;
+
+export {
+  // component
+  Search,
+  SearchAdvanced,
+  UserAdvanced,
+  MessageAdvanced,
+  SearchResults,
+  SearchResultItem,
+  SearchBar,
+  ConversationList,
+  ConversationActions,
+  ConversationListHeader,
+  ConversationListContent,
+  ConversationPreview,
+  MessageList,
+  MessageInput,
+  EmojiPicker,
+  ChatSetting,
+  View,
+
+  // Hooks
+  useMessageActions,
+
+  // States
+  useMessageListState,
+  useMessageInputState,
+  useMessageActionState,
+  useConversationListState,
+  useSearchState,
+  useUIOpenControlState,
+};