tuikit-atomicx-vue3 0.1.0

package/dist/utils/type-check.d.ts

@@ -0,0 +1,12 @@
+export declare const isArray: (arg: any) => arg is any[];
+export declare const isMap: (val: any) => boolean;
+export declare const isSet: (val: any) => boolean;
+export declare const isDate: (val: any) => val is Date;
+export declare const isFunction: (val: any) => boolean;
+export declare const isString: (val: any) => val is string;
+export declare const isSymbol: (val: any) => val is symbol;
+export declare const isObject: (val: any) => boolean;
+export declare const isPromise: (val: any) => boolean;
+export declare const isUrl: (url: string) => boolean;
+export declare const isJSON: (str: string) => boolean;
+export declare const JSONToObject: (str: string) => any;

package/dist/utils/type-check.js

@@ -0,0 +1,50 @@
+const objectToString = Object.prototype.toString;
+const toTypeString = (value) => objectToString.call(value);
+const { isArray } = Array;
+const isMap = (val) => toTypeString(val) === "[object Map]";
+const isSet = (val) => toTypeString(val) === "[object Set]";
+const isDate = (val) => val instanceof Date;
+const isFunction = (val) => typeof val === "function";
+const isString = (val) => typeof val === "string";
+const isSymbol = (val) => typeof val === "symbol";
+const isObject = (val) => val !== null && typeof val === "object";
+const isPromise = (val) => isObject(val) && isFunction(val.then) && isFunction(val.catch);
+const isUrl = (url) => {
+  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
+    url
+  );
+};
+const isJSON = (str) => {
+  if (typeof str === "string") {
+    try {
+      const data = JSON.parse(str);
+      if (data) {
+        return true;
+      }
+      return false;
+    } catch (error) {
+      return false;
+    }
+  }
+  return false;
+};
+const JSONToObject = (str) => {
+  if (!str || !isJSON(str)) {
+    return str;
+  }
+  return JSON.parse(str);
+};
+export {
+  JSONToObject,
+  isArray,
+  isDate,
+  isFunction,
+  isJSON,
+  isMap,
+  isObject,
+  isPromise,
+  isSet,
+  isString,
+  isSymbol,
+  isUrl
+};

package/dist/utils/utils.d.ts

@@ -0,0 +1,80 @@
+/**
+ * debounce function
+ * @param {*} fn Functions to execute
+ * @param {*} delay Interval time
+ * @returns function
+ */
+export declare function debounce(fn: {
+    apply: (arg0: any, arg1: any) => void;
+}, delay: number | undefined): (this: any, ...args: any) => void;
+/**
+ * throttle function
+ * @param {*} fn Functions to execute
+ * @param {*} delay Interval time
+ * @returns function
+ */
+export declare function throttle(fn: {
+    apply: (arg0: any, arg1: any[]) => void;
+}, delay: number): (this: any, ...args: any[]) => void;
+/**
+ * Make the dom element fullscreen
+ * @param {dom} element dom element
+ * @example
+ * setFullscreen(document.documentElement) // The entire page goes full screen
+ * setFullscreen(document.getElementById("id")) // An element goes full screen
+ */
+export declare function setFullScreen(element: HTMLElement): void;
+/**
+ * exitFullscreen
+ * @example
+ * exitFullscreen();
+ */
+export declare function exitFullScreen(): void;
+/**
+ * Get the value of the specified key from window.location.href
+ * @param {*} key The key to get
+ * @returns The value corresponding to the key specified in window.location.href.
+ * @example
+ * const value = getUrlParam(key);
+ */
+export declare function getUrlParam(key: string): string | null;
+/**
+ * deepClone
+ * @param data Raw data of any type
+ * @returns Data after deepClone
+ */
+export declare function deepClone(data: any): any;
+export declare const isUndefined: (value: any) => value is undefined;
+export declare const isString: (value: any) => value is string;
+export declare const isNumber: (value: any) => value is number;
+export declare const isStringNumber: (value: any) => boolean;
+export declare const isFunction: (value: any) => boolean;
+export declare function addSuffix(value: string | number, suffix?: string): string;
+export declare function getUrlWithRoomId(roomId: string): string;
+export declare function calculateByteLength(str: string): number;
+export declare function objectMerge(...args: any[]): any;
+export declare function convertSecondsToHMS(seconds: number): {
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+export declare function getNanoId(size?: number): string;
+export declare function findLastIndex<T>(array: T[], predicate: (value: T, index: number, obj: T[]) => boolean, thisArg?: any): number;
+export declare function formatTimestampToTime(timestamp: number, format?: string): string;
+export type Comparator<T> = (a: T, b: T) => -1 | 0 | 1;
+/**
+ * Creates a new combined {@link Comparator<T>} which sorts items by the given comparators.
+ * The comparators are applied in the order they are given (left -> right).
+ *
+ * @param comparators the comparators to use for sorting.
+ * @returns a combined {@link Comparator<T>}.
+ */
+export declare const combineComparators: <T>(...comparators: Comparator<T>[]) => Comparator<T>;
+export declare const createComparator: <T>(compareRules: (data1: T, data2: T) => boolean) => (a: T, b: T) => 0 | 1 | -1;
+export declare function arrayIsEqual<T>(arr1: T[], arr2: T[]): boolean;
+/**
+ * 安全执行 JSON.parse
+ * @param data
+ * @returns
+ */
+export declare function safelyParse(data: string): any;

package/dist/utils/utils.js

@@ -0,0 +1,258 @@
+import { isWeChat } from "./environment.js";
+function debounce(fn, delay) {
+  let timer;
+  return function(...args) {
+    if (timer > 0) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+      timer = -1;
+    }, delay);
+  };
+}
+function throttle(fn, delay) {
+  let previousTime = 0;
+  return function(...args) {
+    const now = Date.now();
+    if (now - previousTime > delay) {
+      fn.apply(this, args);
+      previousTime = now;
+    }
+  };
+}
+function setFullScreen(element) {
+  const fullScreenElement = element;
+  if (fullScreenElement == null ? void 0 : fullScreenElement.requestFullscreen) {
+    fullScreenElement == null ? void 0 : fullScreenElement.requestFullscreen();
+  } else if (fullScreenElement == null ? void 0 : fullScreenElement.mozRequestFullScreen) {
+    fullScreenElement == null ? void 0 : fullScreenElement.mozRequestFullScreen();
+  } else if (fullScreenElement == null ? void 0 : fullScreenElement.webkitRequestFullScreen) {
+    fullScreenElement == null ? void 0 : fullScreenElement.webkitRequestFullScreen();
+  } else if (fullScreenElement == null ? void 0 : fullScreenElement.msRequestFullscreen) {
+    fullScreenElement == null ? void 0 : fullScreenElement.msRequestFullscreen();
+  }
+}
+function exitFullScreen() {
+  if (!(document == null ? void 0 : document.fullscreenElement) && !(document == null ? void 0 : document.webkitFullscreenElement) && !(document == null ? void 0 : document.mozFullScreenElement)) {
+    return;
+  }
+  const exitFullScreenDocument = document;
+  if (exitFullScreenDocument == null ? void 0 : exitFullScreenDocument.exitFullscreen) {
+    exitFullScreenDocument == null ? void 0 : exitFullScreenDocument.exitFullscreen();
+  } else if (exitFullScreenDocument == null ? void 0 : exitFullScreenDocument.msExitFullscreen) {
+    exitFullScreenDocument == null ? void 0 : exitFullScreenDocument.msExitFullscreen();
+  } else if (exitFullScreenDocument == null ? void 0 : exitFullScreenDocument.mozCancelFullScreen) {
+    exitFullScreenDocument == null ? void 0 : exitFullScreenDocument.mozCancelFullScreen();
+  } else if (exitFullScreenDocument == null ? void 0 : exitFullScreenDocument.webkitExitFullscreen) {
+    exitFullScreenDocument == null ? void 0 : exitFullScreenDocument.webkitExitFullscreen();
+  }
+}
+function getUrlParam(key) {
+  const url = window == null ? void 0 : window.location.href.replace(/^[^?]*\?/, "");
+  const regexp = new RegExp(`(^|&)${key}=([^&#]*)(&|$|)`, "i");
+  const paramMatch = url == null ? void 0 : url.match(regexp);
+  return paramMatch ? paramMatch[2] : null;
+}
+function deepClone(data) {
+  let res = null;
+  const reference = [Date, RegExp, Set, WeakSet, Map, WeakMap, Error];
+  if (reference.includes(data == null ? void 0 : data.constructor)) {
+    res = new data.constructor(data);
+  } else if (Array.isArray(data)) {
+    res = [];
+    data.forEach((e, i) => {
+      res[i] = deepClone(e);
+    });
+  } else if (typeof data === "object" && data !== null) {
+    res = {};
+    Object.keys(data).forEach((key) => {
+      if (Object.hasOwnProperty.call(data, key)) {
+        res[key] = deepClone(data[key]);
+      }
+    });
+  } else {
+    res = data;
+  }
+  return res;
+}
+const isUndefined = (value) => typeof value === "undefined";
+const isString = (value) => typeof value === "string";
+const isNumber = (value) => typeof value === "number";
+const isStringNumber = (value) => typeof value === "string" && !isNaN(Number(value));
+const isFunction = (value) => typeof value === "function";
+function addSuffix(value, suffix = "px") {
+  if (isNumber(value) || isStringNumber(value)) {
+    return value + suffix;
+  }
+  return value;
+}
+function getUrlWithRoomId(roomId) {
+  if (isWeChat) return "";
+  const currentUrl = window.location.href;
+  const urlObj = new URL(currentUrl);
+  const params = new URLSearchParams(urlObj.search);
+  if (params.has("roomId")) {
+    params.delete("roomId");
+  }
+  params.append("roomId", roomId);
+  return `${`${urlObj.origin + urlObj.pathname}#/home?${params.toString()}`}`;
+}
+function calculateByteLength(str) {
+  let byteLength = 0;
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    if (code <= 127) {
+      byteLength += 1;
+    } else if (code <= 2047) {
+      byteLength += 2;
+    } else if (code <= 65535) {
+      byteLength += 3;
+    } else {
+      byteLength += 4;
+    }
+  }
+  return byteLength;
+}
+function objectMerge(...args) {
+  return args.reduce((acc, cur) => {
+    Object.keys(cur).forEach((key) => {
+      if (acc[key] && typeof acc[key] === "object") {
+        acc[key] = objectMerge(acc[key], cur[key]);
+      } else {
+        acc[key] = cur[key];
+      }
+    });
+    return acc;
+  }, {});
+}
+function convertSecondsToHMS(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const remainingSeconds = seconds % 60;
+  return {
+    hours,
+    minutes,
+    seconds: remainingSeconds
+  };
+}
+function getNanoId(size = 21) {
+  const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+  let id = "";
+  let i = size;
+  while (i) {
+    id += urlAlphabet[Math.random() * 64 | 0];
+    i = i - 1;
+  }
+  return id;
+}
+function findLastIndex(array, predicate, thisArg) {
+  const len = array.length >>> 0;
+  let k = len - 1;
+  while (k >= 0) {
+    const kValue = array[k];
+    if (predicate.call(thisArg, kValue, k, array)) {
+      return k;
+    }
+    k = k - 1;
+  }
+  return -1;
+}
+function formatTimestampToTime(timestamp, format = "MM-DD HH:mm") {
+  const date = new Date(timestamp);
+  const padStart = (value, length = 2) => value.toString().padStart(length, "0");
+  const replacements = {
+    YYYY: date.getFullYear().toString(),
+    YY: (date.getFullYear() % 100).toString().padStart(2, "0"),
+    MM: padStart(date.getMonth() + 1),
+    DD: padStart(date.getDate()),
+    HH: padStart(date.getHours()),
+    hh: padStart(date.getHours() % 12),
+    mm: padStart(date.getMinutes()),
+    ss: padStart(date.getSeconds()),
+    A: date.getHours() >= 12 ? "PM" : "AM"
+  };
+  return format.replace(/YYYY|YY|MM|DD|HH|hh|mm|ss|A/g, (match) => replacements[match]);
+}
+const combineComparators = (...comparators) => {
+  return (a, b) => {
+    for (const comparator of comparators) {
+      const result = comparator(a, b);
+      if (result !== 0) return result;
+    }
+    return 0;
+  };
+};
+const createComparator = (compareRules) => {
+  return (a, b) => {
+    if (compareRules(a, b) && compareRules(b, a)) {
+      return 0;
+    }
+    if (compareRules(a, b)) {
+      return -1;
+    }
+    if (compareRules(b, a)) {
+      return 1;
+    }
+    return 0;
+  };
+};
+function arrayIsEqual(arr1, arr2) {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  for (let i = 0; i < arr1.length; i++) {
+    if (typeof arr1[i] === "object" && typeof arr2[i] === "object" && arr1[i] !== null && arr2[i] !== null) {
+      if (!arrayIsEqual(arr1[i], arr2[i])) {
+        return false;
+      }
+    } else {
+      if (arr1[i] !== arr2[i]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function safelyParse(data) {
+  if (typeof data !== "string") {
+    return data;
+  }
+  let result;
+  try {
+    const tempData = JSON.parse(data);
+    if (typeof tempData === "object" && tempData) {
+      result = tempData;
+    } else {
+      result = data;
+    }
+  } catch (error) {
+    result = data;
+  }
+  return result;
+}
+export {
+  addSuffix,
+  arrayIsEqual,
+  calculateByteLength,
+  combineComparators,
+  convertSecondsToHMS,
+  createComparator,
+  debounce,
+  deepClone,
+  exitFullScreen,
+  findLastIndex,
+  formatTimestampToTime,
+  getNanoId,
+  getUrlParam,
+  getUrlWithRoomId,
+  isFunction,
+  isNumber,
+  isString,
+  isStringNumber,
+  isUndefined,
+  objectMerge,
+  safelyParse,
+  setFullScreen,
+  throttle
+};

package/dist/utils-CnPWv_hZ.js

@@ -0,0 +1,63 @@
+import { g as getActiveElement } from "./Teleport-BnT1MTUO.js";
+const ITEM_SELECT = "menu.itemSelect";
+const SELECTION_KEYS = ["Enter", " "];
+const FIRST_KEYS = [
+  "ArrowDown",
+  "PageUp",
+  "Home"
+];
+const LAST_KEYS = [
+  "ArrowUp",
+  "PageDown",
+  "End"
+];
+const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+({
+  ltr: [...SELECTION_KEYS, "ArrowRight"],
+  rtl: [...SELECTION_KEYS, "ArrowLeft"]
+});
+function getOpenState(open) {
+  return open ? "open" : "closed";
+}
+function focusFirst(candidates) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement();
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus();
+    if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function isPointInPolygon(point, polygon) {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+function isPointerInGraceArea(event, area) {
+  if (!area) return false;
+  const cursorPos = {
+    x: event.clientX,
+    y: event.clientY
+  };
+  return isPointInPolygon(cursorPos, area);
+}
+function isMouseEvent(event) {
+  return event.pointerType === "mouse";
+}
+export {
+  FIRST_LAST_KEYS as F,
+  ITEM_SELECT as I,
+  LAST_KEYS as L,
+  SELECTION_KEYS as S,
+  isMouseEvent as a,
+  focusFirst as f,
+  getOpenState as g,
+  isPointerInGraceArea as i
+};

package/dist/vite-env.d.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "tuikit-atomicx-vue3",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "scripts": {},
+  "peerDependencies": {
+    "@tencentcloud/chat": "^3.5.4",
+    "@tencentcloud/chat-uikit-engine": "~2.5.1",
+    "@tencentcloud/tui-core": "latest",
+    "@tencentcloud/tuiroom-engine-js": "~3.2.1",
+    "@tencentcloud/uikit-base-component-vue3": "0.3.6",
+    "vue": "^3.4.21"
+  },
+  "dependencies": {
+    "@tencentcloud/universal-api": "^2.4.0",
+    "@tiptap/extension-image": "^2.11.5",
+    "@tiptap/extension-placeholder": "^2.11.5",
+    "@tiptap/starter-kit": "^2.11.5",
+    "@tiptap/vue-3": "^2.11.5",
+    "@vue/tsconfig": "^0.7.0",
+    "classnames": "^2.5.1",
+    "date-fns": "^4.1.0",
+    "reka-ui": "^2.1.1",
+    "axios": "^1.11.0",
+    "eventemitter3": "^4.0.7"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.0",
+    "@tencentcloud/eslint-config-hybrid": "~0.0.1",
+    "@types/node": "^22.15.18",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "glob": "^11.0.2",
+    "sass": "^1.72.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-static-copy": "^2.2.0",
+    "vue-tsc": "^2.0.6"
+  }
+}

package/src/baseComp/ActionSheep.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="mask" v-show="show && showMask" v-tap="toggleShow"></div>
+    <div class="container" v-show="show" :style="{ height: props.height }">
+      <div class="container-close" v-tap="toggleShow" v-if="showClose">
+        <TUIIcon :icon="IconArrowDown" size="28" />
+      </div>
+      <div v-if="title" class="container-header">{{ title }}</div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineProps, watch, defineEmits } from 'vue';
+import { IconArrowDown } from '@tencentcloud/uikit-base-component-vue3';
+import vTap from '../directives/vTap';
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  showClose: {
+    type: Boolean,
+    default: true,
+  },
+  showMask: {
+    type: Boolean,
+    default: true,
+  },
+  height: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['input', 'close']);
+const show = ref(false);
+
+watch(
+  () => props.visible,
+  val => (show.value = val),
+  { immediate: true }
+);
+watch(
+  show,
+  val => {
+    emit('input', val);
+  },
+  { immediate: true }
+);
+
+const toggleShow = () => {
+  show.value = !show.value;
+  if (!show.value) {
+    emit('close');
+  }
+};
+</script>
+<style scoped lang="scss">
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background-color: var(--uikit-color-black-3);
+}
+
+.container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  width: 100%;
+  min-height: 120px;
+  padding: 20px 12px 36px;
+  border-radius: 18px 18px 0 0;
+  background-color: var(--bg-color-operate);
+
+  .container-close {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 12px;
+    text-align: center;
+  }
+
+  .container-header {
+    margin-bottom: 12px;
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--text-color-primary);
+  }
+}
+</style>

package/src/baseComp/AudioIcon.vue

@@ -0,0 +1,68 @@
+<template>
+  <div :class="['audio-icon-container', `${size == 'small' && 'small'}`]">
+    <div class="audio-level-container">
+      <div class="audio-level" :style="audioLevelStyle"></div>
+    </div>
+    <IconMicOff class="audio-icon" size="24" v-if="props.isMuted" />
+    <IconMicOn class="audio-icon" size="24" v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IconMicOn, IconMicOff } from '@tencentcloud/uikit-base-component-vue3';
+
+interface Props {
+  userId?: string;
+  audioVolume?: number;
+  isMuted?: boolean;
+  size?: string;
+  isDisabled?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const audioLevelStyle = computed(() => {
+  if (props.isMuted || !props.audioVolume) {
+    return '';
+  }
+  return `height: ${props.audioVolume * 4}%`;
+});
+</script>
+
+<style lang="scss" scoped>
+.audio-icon-container {
+  position: relative;
+  width: 24px;
+  height: 24px;
+
+  &.small {
+    transform: scale(0.8);
+  }
+
+  .audio-level-container {
+    position: absolute;
+    top: 2px;
+    left: 7px;
+    display: flex;
+    flex-flow: column-reverse wrap;
+    justify-content: space-between;
+    width: 10px;
+    height: 14px;
+    overflow: hidden;
+    border-radius: 4px;
+
+    .audio-level {
+      width: 100%;
+      background-color: var(--text-color-success);
+      transition: height 0.2s;
+    }
+  }
+
+  .audio-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+</style>