tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/dist/components/MessageList/Message/ImageMessage/ImageMessage.js

@@ -1,131 +1,161 @@
-import { defineComponent as C, computed as c, ref as h, watch as S, onMounted as T, onUnmounted as A, createElementBlock as m, openBlock as v, normalizeStyle as N, normalizeClass as y, unref as b, createCommentVNode as H, createElementVNode as f, nextTick as D } from "vue";
+import { defineComponent as O, computed as f, ref as d, watch as B, onMounted as $, onUnmounted as D, createElementBlock as p, openBlock as w, Fragment as F, createElementVNode as g, createVNode as V, mergeProps as G, unref as C, createCommentVNode as H, normalizeClass as U, nextTick as X } from "vue";
 import { c as E } from "../../../../index-DPczIrgX.js";
-import { _ as $ } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const F = {
+import j from "./ImagePreview.js";
+import { _ as q } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const J = {
   key: 0,
   class: "image-placeholder"
-}, G = {
+}, K = {
   key: 1,
   class: "image-error"
-}, O = ["alt"], g = 320, L = 50, p = 4 / 3, P = /* @__PURE__ */ C({
+}, Q = ["alt"], v = 320, L = 50, _ = 4 / 3, Y = /* @__PURE__ */ O({
+  inheritAttrs: !1,
   __name: "ImageMessage",
   props: {
     message: {},
     isLastMessage: { type: Boolean, default: !1 }
   },
   setup(W) {
-    const k = W, e = c(() => k.message.getMessageContent()), w = (a) => {
-      if (a.startsWith("blob:"))
+    const x = W, e = f(() => x.message.getMessageContent()), y = (t) => {
+      if (t.startsWith("blob:"))
         return "loading";
-      const t = new Image();
-      return t.src = a, t.complete && t.naturalWidth > 0 ? "loaded" : "loading";
-    }, i = h(w(e.value.url)), o = h(
+      const a = new Image();
+      return a.src = t, a.complete && a.naturalWidth > 0 ? "loaded" : "loading";
+    }, l = d(y(e.value.url)), o = d(
       e.value.width && e.value.height ? {
         width: e.value.width,
         height: e.value.height,
         aspectRatio: e.value.width / e.value.height
       } : null
-    ), n = h(null), x = h(null);
-    let r = null;
-    const _ = c(() => e.value.url.startsWith("blob")), z = (a) => new Promise((t, u) => {
-      const l = new Image();
-      l.onload = () => {
-        t({ width: l.naturalWidth, height: l.naturalHeight });
-      }, l.onerror = u, l.src = a;
-    }), d = c(() => {
+    ), r = d(null), M = d(null);
+    let s = null;
+    const c = d(!1);
+    let h = null;
+    const I = f(() => e.value.url.startsWith("blob")), P = (t) => new Promise((a, u) => {
+      const i = new Image();
+      i.onload = () => {
+        a({ width: i.naturalWidth, height: i.naturalHeight });
+      }, i.onerror = u, i.src = t;
+    }), m = f(() => {
       if (!o.value)
         return {
-          height: g,
+          height: v,
           // Use max height to avoid size changes after loading
-          width: g * p,
-          aspectRatio: p
+          width: v * _,
+          aspectRatio: _
         };
-      const { width: a, height: t, aspectRatio: u } = o.value;
-      let l = a, s = t;
-      return s > g && (s = g, l = s * u), s < L && (s = L, l = s * u), {
-        width: l,
-        height: s,
+      const { width: t, height: a, aspectRatio: u } = o.value;
+      let i = t, n = a;
+      return n > v && (n = v, i = n * u), n < L && (n = L, i = n * u), {
+        width: i,
+        height: n,
         aspectRatio: u
       };
-    }), I = async () => {
-      if (await D(), !!n.value) {
-        if (i.value === "loaded") {
-          n.value.src = e.value.url;
+    }), b = async () => {
+      if (await X(), !!r.value) {
+        if (l.value === "loaded") {
+          r.value.src = e.value.url;
           return;
         }
-        r = new IntersectionObserver((a) => {
-          a[0].isIntersecting && (n.value && (n.value.src = e.value.url), r && r.disconnect());
-        }, { threshold: 0.1 }), r.observe(n.value);
+        s = new IntersectionObserver((t) => {
+          t[0].isIntersecting && (r.value && (r.value.src = e.value.url), s && s.disconnect());
+        }, { threshold: 0.1 }), s.observe(r.value);
       }
     }, R = async () => {
-      if (_.value && !o.value)
+      if (I.value && !o.value)
         try {
-          const a = await z(e.value.url);
-          a && (o.value = {
-            width: a.width,
-            height: a.height,
-            aspectRatio: a.width / a.height
+          const t = await P(e.value.url);
+          t && (o.value = {
+            width: t.width,
+            height: t.height,
+            aspectRatio: t.width / t.height
           });
         } catch {
           o.value = {
             width: 400,
             height: 300,
-            aspectRatio: p
+            aspectRatio: _
           };
         }
-    }, M = (a) => {
-      const t = a.target;
-      (!o.value || _.value) && (o.value = {
-        width: t.naturalWidth,
-        height: t.naturalHeight,
-        aspectRatio: t.naturalWidth / t.naturalHeight
-      }), i.value = "loaded";
-    }, B = () => {
-      i.value = "error";
+    }, S = (t) => {
+      const a = t.target;
+      (!o.value || I.value) && (o.value = {
+        width: a.naturalWidth,
+        height: a.naturalHeight,
+        aspectRatio: a.naturalWidth / a.naturalHeight
+      }), l.value = "loaded";
+    }, z = () => {
+      l.value = "error";
     };
-    return S(() => e.value.url, () => {
-      i.value = w(e.value.url), o.value = e.value.width && e.value.height ? {
+    function N() {
+      l.value === "loaded" && e.value.url && (c.value = !0);
+    }
+    function T() {
+      c.value = !1;
+    }
+    function A() {
+      typeof document > "u" || (h = document.body.style.overflow, document.body.style.overflow = "hidden");
+    }
+    function k() {
+      typeof document > "u" || h !== null && (document.body.style.overflow = h, h = null);
+    }
+    return B(() => e.value.url, () => {
+      l.value = y(e.value.url), o.value = e.value.width && e.value.height ? {
         width: e.value.width,
         height: e.value.height,
         aspectRatio: e.value.width / e.value.height
-      } : null, I(), R();
-    }), T(() => {
-      I(), R();
-    }), A(() => {
-      r && r.disconnect();
-    }), (a, t) => (v(), m("div", {
-      ref_key: "containerRef",
-      ref: x,
-      class: y(b(E)("image-message", {
-        "image-message--loading": i.value === "loading",
-        "image-message--error": i.value === "error",
-        "image-message--loaded": i.value === "loaded"
-      })),
-      style: N({
-        width: `${d.value.width}px`,
-        height: `${d.value.height}px`,
-        aspectRatio: `${d.value.aspectRatio}`
-      })
-    }, [
-      i.value === "loading" ? (v(), m("div", F)) : H("", !0),
-      i.value === "error" ? (v(), m("div", G, [...t[0] || (t[0] = [
-        f("div", { class: "image-error__icon" }, null, -1),
-        f("span", { class: "image-error__text" }, "Load failed", -1)
-      ])])) : H("", !0),
-      f("img", {
-        ref_key: "imageRef",
-        ref: n,
-        class: y(b(E)("image", {
-          "image--visible": i.value === "loaded"
-        })),
-        alt: e.value.showName || "image message",
-        loading: "lazy",
-        onLoad: M,
-        onError: B
-      }, null, 42, O)
-    ], 6));
+      } : null, b(), R();
+    }), B(c, (t) => {
+      t ? A() : k();
+    }), $(() => {
+      b(), R();
+    }), D(() => {
+      s && s.disconnect(), k();
+    }), (t, a) => (w(), p(F, null, [
+      g("div", G({
+        ref_key: "containerRef",
+        ref: M
+      }, t.$attrs, {
+        class: C(E)("image-message", {
+          "image-message--loading": l.value === "loading",
+          "image-message--error": l.value === "error",
+          "image-message--loaded": l.value === "loaded"
+        }),
+        style: {
+          width: `${m.value.width}px`,
+          height: `${m.value.height}px`,
+          aspectRatio: `${m.value.aspectRatio}`
+        },
+        role: "button",
+        tabindex: "0",
+        onClick: N
+      }), [
+        l.value === "loading" ? (w(), p("div", J)) : H("", !0),
+        l.value === "error" ? (w(), p("div", K, [...a[0] || (a[0] = [
+          g("div", { class: "image-error__icon" }, null, -1),
+          g("span", { class: "image-error__text" }, "Load failed", -1)
+        ])])) : H("", !0),
+        g("img", {
+          ref_key: "imageRef",
+          ref: r,
+          class: U(C(E)("image", {
+            "image--visible": l.value === "loaded"
+          })),
+          alt: e.value.showName || "image message",
+          loading: "lazy",
+          onLoad: S,
+          onError: z
+        }, null, 42, Q)
+      ], 16),
+      V(j, {
+        open: c.value,
+        src: e.value.url,
+        alt: e.value.showName || "image message preview",
+        onClose: T
+      }, null, 8, ["open", "src", "alt"])
+    ], 64));
   }
-}), j = /* @__PURE__ */ $(P, [["__scopeId", "data-v-6fb58367"]]);
+}), le = /* @__PURE__ */ q(Y, [["__scopeId", "data-v-9921e516"]]);
 export {
-  j as default
+  le as default
 };

package/dist/components/MessageList/Message/ImageMessage/ImagePreview.js

@@ -0,0 +1,142 @@
+import { defineComponent as B, ref as l, watch as L, onMounted as $, onUnmounted as N, createBlock as z, openBlock as v, Teleport as U, createElementBlock as m, createCommentVNode as V, mergeProps as W, createElementVNode as a, normalizeClass as K, unref as j, withModifiers as f, normalizeStyle as q } from "vue";
+import { c as F } from "../../../../index-DPczIrgX.js";
+import { _ as G } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const H = { class: "image-preview__content" }, J = { class: "image-preview__inner" }, O = { class: "image-preview__viewport" }, Q = ["src", "alt"], R = {
+  key: 1,
+  class: "image-preview__error"
+}, Z = 0.5, ee = 3, te = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "ImagePreview",
+  props: {
+    open: { type: Boolean },
+    src: {},
+    alt: {}
+  },
+  emits: ["close"],
+  setup(r, { emit: k }) {
+    const C = r, E = k, n = l(1), i = l({ x: 0, y: 0 }), d = l(!1), c = l({ x: 0, y: 0 }), s = l(!1);
+    let u = null, h = 1;
+    function _(e) {
+      return Math.min(ee, Math.max(Z, e));
+    }
+    function g() {
+      n.value = 1, i.value = { x: 0, y: 0 };
+    }
+    function p() {
+      E("close"), g();
+    }
+    function T() {
+      s.value = !0;
+    }
+    function D(e) {
+      e.preventDefault();
+      const t = e.deltaY > 0 ? -0.2 : 0.2, o = _(n.value + t);
+      n.value = o;
+    }
+    function M() {
+      n.value = n.value === 1 ? 2 : 1, n.value === 1 && (i.value = { x: 0, y: 0 });
+    }
+    function b(e) {
+      var t;
+      d.value = !0, c.value = { x: e.clientX, y: e.clientY }, (t = e.target) == null || t.setPointerCapture(e.pointerId);
+    }
+    function S(e) {
+      if (!d.value)
+        return;
+      const t = e.clientX - c.value.x, o = e.clientY - c.value.y;
+      i.value = {
+        x: i.value.x + t,
+        y: i.value.y + o
+      }, c.value = { x: e.clientX, y: e.clientY };
+    }
+    function w(e) {
+      var t;
+      d.value = !1, (t = e.target) == null || t.releasePointerCapture(e.pointerId);
+    }
+    function y(e) {
+      if (e.length < 2)
+        return null;
+      const [t, o] = [e[0], e[1]], Y = t.clientX - o.clientX, A = t.clientY - o.clientY;
+      return Math.hypot(Y, A);
+    }
+    function I(e) {
+      e.touches.length === 2 && (u = y(e.touches), h = n.value);
+    }
+    function X(e) {
+      if (e.touches.length === 2 && u) {
+        e.preventDefault();
+        const t = y(e.touches);
+        if (!t)
+          return;
+        const o = t / u;
+        n.value = _(h * o);
+      }
+    }
+    function x() {
+      u = null;
+    }
+    function P(e) {
+      e.key === "Escape" && p();
+    }
+    return L(() => C.open, (e) => {
+      e || (g(), s.value = !1);
+    }), $(() => {
+      window.addEventListener("keydown", P);
+    }), N(() => {
+      window.removeEventListener("keydown", P);
+    }), (e, t) => (v(), z(U, { to: "body" }, [
+      r.open ? (v(), m("div", W({
+        key: 0,
+        class: "image-preview"
+      }, e.$attrs), [
+        a("div", {
+          class: "image-preview__mask",
+          onClick: p
+        }),
+        a("button", {
+          class: "image-preview__close",
+          type: "button",
+          "aria-label": "Close preview",
+          onClick: p
+        }),
+        a("div", H, [
+          a("div", J, [
+            a("div", O, [
+              a("div", {
+                class: K(j(F)("image-preview__img-wrap", { "image-preview__img-wrap--error": s.value }))
+              }, [
+                s.value ? (v(), m("div", R, [...t[0] || (t[0] = [
+                  a("div", { class: "image-preview__error-icon" }, null, -1),
+                  a("span", { class: "image-preview__error-text" }, "Preview failed", -1)
+                ])])) : (v(), m("img", {
+                  key: 0,
+                  src: r.src,
+                  alt: r.alt || "image preview",
+                  style: q({
+                    transform: `translate3d(${i.value.x}px, ${i.value.y}px, 0) scale(${n.value})`
+                  }),
+                  class: "image-preview__img",
+                  draggable: "false",
+                  onError: T,
+                  onWheel: f(D, ["prevent"]),
+                  onDblclick: f(M, ["prevent"]),
+                  onPointerdown: b,
+                  onPointermove: S,
+                  onPointerup: w,
+                  onPointercancel: w,
+                  onTouchstartPassive: I,
+                  onTouchmove: f(X, ["prevent"]),
+                  onTouchend: x,
+                  onTouchcancel: x
+                }, null, 44, Q))
+              ], 2)
+            ])
+          ])
+        ])
+      ], 16)) : V("", !0)
+    ]));
+  }
+}), ie = /* @__PURE__ */ G(te, [["__scopeId", "data-v-31cf7b43"]]);
+export {
+  ie as default
+};

package/dist/components/MessageList/Message/ImageMessage/ImagePreview.vue.d.ts

@@ -0,0 +1,20 @@
+interface ImagePreviewProps {
+    open: boolean;
+    src: string;
+    alt?: string;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ImagePreviewProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ImagePreviewProps>>> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/MessageList/Message/Message.vue.d.ts

@@ -3,37 +3,45 @@ import { MessageModel } from '../../../types/engine';
 
 interface MessageProps {
     message: MessageModel;
+    nick?: string;
     alignment?: 'left' | 'right' | 'two-sided';
     messageActionList?: MessageAction[] | undefined;
     isAggregated?: boolean;
     isFirstInChunk?: boolean;
     isLastInChunk?: boolean;
     isHiddenMessageAvatar?: boolean;
+    isHiddenMessageNick?: boolean;
     isHiddenMessageMeta?: boolean;
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageProps>, {
     alignment: string;
+    nick: undefined;
     messageActionList: undefined;
     isAggregated: boolean;
     isFirstInChunk: undefined;
     isLastInChunk: undefined;
     isHiddenMessageAvatar: boolean;
+    isHiddenMessageNick: boolean;
     isHiddenMessageMeta: boolean;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageProps>, {
     alignment: string;
+    nick: undefined;
     messageActionList: undefined;
     isAggregated: boolean;
     isFirstInChunk: undefined;
     isLastInChunk: undefined;
     isHiddenMessageAvatar: boolean;
+    isHiddenMessageNick: boolean;
     isHiddenMessageMeta: boolean;
 }>>> & Readonly<{}>, {
+    nick: string;
     isLastInChunk: boolean;
     messageActionList: MessageAction[];
     alignment: "left" | "right" | "two-sided";
     isAggregated: boolean;
     isHiddenMessageAvatar: boolean;
     isHiddenMessageMeta: boolean;
+    isHiddenMessageNick: boolean;
     isFirstInChunk: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.js

@@ -1,9 +1,9 @@
 import { ref as q, computed as D, provide as Se, inject as Pe, defineComponent as w, watch as te, h as ie, watchEffect as Be, markRaw as Oe, toRefs as $, createBlock as C, openBlock as h, unref as n, withCtx as g, createVNode as E, renderSlot as M, normalizeProps as x, guardReactiveProps as j, onMounted as ge, mergeDefaults as Ie, onUnmounted as Fe, mergeProps as A, nextTick as k, withModifiers as Ee, createElementBlock as N, Fragment as U, normalizeClass as Q, renderList as ke, normalizeStyle as Ae, createCommentVNode as ue, resolveDynamicComponent as de, createElementVNode as Te, toDisplayString as fe } from "vue";
 import { useUIKit as Re } from "@tencentcloud/uikit-base-component-vue3";
 import { c as Z } from "../../../../../index-DPczIrgX.js";
-import { i as De, l as xe, g as z, j as Ne, S as pe, u as _e, c as K, e as oe, m as $e, n as ce, b as Ke, a as T, F as Le, D as Ve, d as Ue, P as ze, T as je, f as Ge } from "../../../../../Teleport-CSEuZbpM.js";
-import { d as We, P as Xe, a as Ye, b as He, e as Je, c as G } from "../../../../../PopperContent-XdhqL8Y2.js";
-import { g as Qe, i as Ze, a as ee, F as et, f as tt, L as ot, S as nt, I as rt } from "../../../../../utils-DaB7eSu5.js";
+import { i as De, l as xe, g as z, j as Ne, S as pe, a as _e, c as K, P as oe, m as $e, n as ce, b as Ke, u as T, F as Le, D as Ve, d as Ue, e as ze, T as je, f as Ge } from "../../../../../Teleport-DFrneqLM.js";
+import { P as We, a as Xe, b as Ye, c as He, e as Je, d as G } from "../../../../../PopperContent-SLoFuK7k.js";
+import { g as Qe, i as Ze, a as ee, F as et, f as tt, L as ot, S as nt, I as rt } from "../../../../../utils-CttDpxqz.js";
 import { useMessageActions as at } from "../../../../../hooks/useMessageActions.js";
 import { _ as st } from "../../../../../_plugin-vue_export-helper-CHgC5LLL.js";
 const lt = ["INPUT", "TEXTAREA"];