@mobilon-dev/chotto 0.3.32 → 0.3.33

package/dist/components/2_chatinput_elements/StickerPicker/StickerPicker.vue.js

@@ -0,0 +1,340 @@
+import { ref as c, inject as Pe, computed as y, watch as V, onMounted as Le, onUnmounted as Ee, createElementBlock as o, openBlock as i, Fragment as j, createCommentVNode as M, createVNode as S, unref as w, normalizeClass as J, createElementVNode as P, Transition as Q, withCtx as Z, withDirectives as Ce, renderList as x, toDisplayString as ee, vShow as Ue, normalizeStyle as $e } from "vue";
+import { useMessageDraft as De } from "../../../hooks/useMessageDraft.js";
+import "../../../hooks/useSearchModel.js";
+import "../../../hooks/useTheme.js";
+/* empty css                              */
+import Ae from "../../../_virtual/_plugin-vue_export-helper.js";
+/* empty css                                              */
+import "../../../node_modules/linkifyjs/dist/linkify.js";
+import "../../../functions/parseMarkdown.js";
+import te from "./icons/StickerIcon.vue.js";
+import { isAnimatedSticker as L } from "../../2_feed_elements/StickerMessage/utils/stickerUtils.js";
+import "../../2_feed_elements/StickerMessage/utils/suppress-lit-warning.js";
+/* empty css                   */
+const Fe = { class: "sticker-picker__container" }, Oe = ["onClick", "onMouseenter", "onMouseleave"], Be = ["src"], Re = ["src", "alt"], We = {
+  key: 2,
+  class: "sticker-picker__tab-icon-placeholder"
+}, Ve = { class: "sticker-picker__content" }, je = {
+  key: 0,
+  class: "sticker-picker__empty"
+}, ze = {
+  key: 1,
+  class: "sticker-picker__grid"
+}, Ne = ["onClick", "onMousedown", "onMouseenter", "onTouchstart"], Ge = ["src"], Ie = ["src", "alt"], Xe = ["src"], Ye = ["src", "alt"], Ke = {
+  key: 2,
+  class: "sticker-picker__preview-label"
+}, qe = 500, He = {
+  __name: "StickerPicker",
+  props: {
+    state: {
+      type: String,
+      default: "active"
+    },
+    mode: {
+      type: String,
+      default: "click",
+      // или 'hover'
+      validator: (h) => ["click", "hover"].includes(h)
+    },
+    stickers: {
+      type: Array,
+      default: () => []
+      // Поддерживаем два формата:
+      // 1. Массив стикеров: [{ url, alt? }, ...]
+      // 2. Массив наборов (вкладок): [[{ url, alt? }, ...], ...] или [{ stickers: [...], label?, iconUrl? }, ...]
+    },
+    emptyText: {
+      type: String,
+      default: "Нет доступных стикеров"
+    }
+  },
+  setup(h) {
+    const a = h, E = c(null), C = c(null), U = c(null), $ = c(null), v = c(!1), d = c(0), se = Pe("chatAppId"), { getMessage: re, setMessageFile: le, setForceSendMessage: ae } = De(se), n = c(null), D = c({}), m = c(null), u = c(!1), oe = c(null), f = c(/* @__PURE__ */ new Map()), p = c(/* @__PURE__ */ new Map());
+    let T = !1, b = !1;
+    const k = c(!1), A = c(!1);
+    async function z() {
+      if (!(k.value || A.value)) {
+        A.value = !0;
+        try {
+          await import("../../2_feed_elements/StickerMessage/libs/tgs-player/lottie-player.esm.js"), await import("../../2_feed_elements/StickerMessage/libs/tgs-player/tgs-player.esm.js"), k.value = !0;
+        } catch (e) {
+          console.error("Failed to load TGS libraries:", e);
+        } finally {
+          A.value = !1;
+        }
+      }
+    }
+    const ie = () => {
+      if (!a.stickers || a.stickers.length === 0)
+        return { hasTabs: !1, tabs: [] };
+      const e = a.stickers[0], t = Array.isArray(e), s = e && typeof e == "object" && e.stickers;
+      return t ? {
+        hasTabs: !0,
+        tabs: a.stickers.map((r, l) => ({
+          id: `tab-${l}`,
+          label: `Set ${l + 1}`,
+          stickers: r,
+          iconUrl: r && r.length > 0 ? r[0].url : null
+        }))
+      } : s && e.stickers ? {
+        hasTabs: !0,
+        tabs: a.stickers.map((r, l) => ({
+          id: r.id || `tab-${l}`,
+          label: r.label || `Set ${l + 1}`,
+          stickers: r.stickers || [],
+          iconUrl: r.iconUrl || (r.stickers && r.stickers.length > 0 ? r.stickers[0].url : null)
+        }))
+      } : {
+        hasTabs: !0,
+        tabs: [{
+          id: "default",
+          label: "Stickers",
+          stickers: a.stickers,
+          iconUrl: a.stickers.length > 0 ? a.stickers[0].url : null
+        }]
+      };
+    }, F = y(() => ie()), ce = y(() => F.value.hasTabs && F.value.tabs.length > 0), _ = y(() => F.value.tabs), O = y(() => {
+      var e;
+      return _.value.length === 0 ? [] : ((e = _.value[d.value]) == null ? void 0 : e.stickers) || [];
+    }), N = y(() => {
+      const e = O.value.some((s) => L(s.url)), t = _.value.some((s) => s.iconUrl && L(s.iconUrl));
+      return e || t;
+    });
+    V(N, (e) => {
+      e && !k.value && z();
+    }, { immediate: !0 });
+    const B = (e) => L(e.url), ne = (e, t) => {
+      t ? f.value.set(e, t) : f.value.delete(e);
+    }, ue = (e, t) => {
+      t ? p.value.set(e, t) : p.value.delete(e);
+    }, ve = (e) => {
+      const t = p.value.get(e);
+      t && typeof t.play == "function" && t.play();
+    }, fe = (e) => {
+      const t = p.value.get(e);
+      t && typeof t.pause == "function" && t.pause();
+    };
+    V(d, () => {
+      f.value.clear();
+    }), V(() => a.stickers, () => {
+      d.value >= _.value.length && (d.value = 0);
+    }, { deep: !0 });
+    const ke = (e) => {
+      if (!e) return "image";
+      const t = e.toLowerCase();
+      return t.endsWith(".tgs") || t.endsWith(".webp") ? "sticker" : "image";
+    }, G = (e) => {
+      if (a.state === "disabled") return;
+      const t = ke(e.url);
+      le({
+        url: e.url,
+        name: e.alt || `sticker.${t === "sticker" ? e.url.toLowerCase().endsWith(".tgs") ? "tgs" : "webp" : "png"}`,
+        type: t
+      }), ae(!0), a.mode === "click" && (v.value = !1);
+    }, I = (e, t) => {
+      oe.value = t.currentTarget, u.value = !1, m.value && clearTimeout(m.value), m.value = setTimeout(() => {
+        u.value = !0, _e(e);
+      }, qe);
+    }, X = () => {
+      if (R(), u.value) {
+        u.value = !1;
+        return;
+      }
+    }, pe = (e, t) => {
+      if (B(e) && k.value) {
+        const s = f.value.get(t);
+        s && typeof s.play == "function" && s.play();
+      }
+    }, de = () => {
+      f.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), !(u.value && n.value) && (R(), g());
+    }, me = (e, t) => {
+      I(e, t);
+    }, Y = () => {
+      X();
+    }, he = (e, t) => {
+      if (u.value) {
+        t.preventDefault(), t.stopPropagation(), u.value = !1, g();
+        return;
+      }
+      G(e);
+    }, R = () => {
+      m.value && (clearTimeout(m.value), m.value = null);
+    }, _e = (e) => {
+      n.value = e, D.value = {
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)"
+      };
+    }, g = () => {
+      n.value = null, D.value = {};
+    }, ge = () => {
+      n.value && (G(n.value), g());
+    }, K = () => {
+      a.state === "active" && (v.value = !0);
+    }, W = () => {
+      f.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), p.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), v.value = !1;
+    }, ye = () => {
+      a.mode === "click" && (v.value = !v.value, v.value && K());
+    }, Te = () => {
+      a.mode === "hover" && (T = !0, K());
+    }, be = () => {
+      a.mode === "hover" && (T = !1, setTimeout(() => {
+        !b && !T && W();
+      }, 150));
+    }, Me = () => {
+      a.mode === "hover" && (b = !0);
+    }, Se = () => {
+      a.mode === "hover" && (b = !1, setTimeout(() => {
+        !T && !b && W();
+      }, 150));
+    }, we = (e) => {
+      if (!U.value) return;
+      const t = e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+      U.value.scrollLeft += t, e.preventDefault();
+    }, q = (e) => {
+      a.mode === "click" && v.value && C.value && E.value && !C.value.contains(e.target) && !E.value.contains(e.target) && W(), n.value && $.value && !$.value.contains(e.target) && g();
+    }, H = () => {
+      u.value && (u.value = !1);
+    };
+    return Le(() => {
+      document.addEventListener("click", q), document.addEventListener("mouseup", H), N.value && !k.value && z();
+    }), Ee(() => {
+      document.removeEventListener("click", q), document.removeEventListener("mouseup", H), R(), g(), f.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), f.value.clear(), p.value.forEach((e) => {
+        e && typeof e.pause == "function" && e.pause();
+      }), p.value.clear();
+    }), (e, t) => (i(), o(j, null, [
+      w(re)().isRecording ? M("", !0) : (i(), o("button", {
+        key: 0,
+        ref_key: "stickerButton",
+        ref: C,
+        class: J(["button", { "button-disabled": h.state === "disabled" }]),
+        onClick: ye,
+        onMouseenter: Te,
+        onMouseleave: be
+      }, [
+        P("span", null, [
+          S(w(te))
+        ])
+      ], 34)),
+      S(Q, null, {
+        default: Z(() => [
+          Ce(P("div", {
+            ref_key: "stickerPicker",
+            ref: E,
+            class: "sticker-picker",
+            onMouseenter: Me,
+            onMouseleave: Se
+          }, [
+            P("div", Fe, [
+              ce.value ? (i(), o("div", {
+                key: 0,
+                ref_key: "tabsContainer",
+                ref: U,
+                class: "sticker-picker__tabs",
+                onWheel: we
+              }, [
+                (i(!0), o(j, null, x(_.value, (s, r) => (i(), o("button", {
+                  key: r,
+                  class: J(["sticker-picker__tab", { "sticker-picker__tab--active": d.value === r }]),
+                  onClick: (l) => d.value = r,
+                  onMouseenter: (l) => ve(r),
+                  onMouseleave: (l) => fe(r)
+                }, [
+                  s.iconUrl && w(L)(s.iconUrl) && k.value ? (i(), o("tgs-player", {
+                    key: 0,
+                    ref_for: !0,
+                    ref: (l) => ue(r, l),
+                    src: s.iconUrl,
+                    class: "sticker-picker__tab-icon sticker-picker__tab-icon-animated",
+                    loop: "",
+                    mode: "normal"
+                  }, null, 8, Be)) : s.iconUrl ? (i(), o("img", {
+                    key: 1,
+                    src: s.iconUrl,
+                    alt: s.label || `Tab ${r + 1}`,
+                    class: "sticker-picker__tab-icon"
+                  }, null, 8, Re)) : (i(), o("span", We, [
+                    S(w(te))
+                  ]))
+                ], 42, Oe))), 128))
+              ], 544)) : M("", !0),
+              P("div", Ve, [
+                O.value.length === 0 ? (i(), o("div", je, ee(h.emptyText), 1)) : (i(), o("div", ze, [
+                  (i(!0), o(j, null, x(O.value, (s, r) => (i(), o("button", {
+                    key: r,
+                    class: "sticker-picker__item",
+                    onClick: (l) => he(s, l),
+                    onMousedown: (l) => I(s, l),
+                    onMouseup: X,
+                    onMouseenter: (l) => pe(s, r),
+                    onMouseleave: de,
+                    onTouchstart: (l) => me(s, l),
+                    onTouchend: Y,
+                    onTouchcancel: Y
+                  }, [
+                    B(s) && k.value ? (i(), o("tgs-player", {
+                      key: 0,
+                      ref_for: !0,
+                      ref: (l) => ne(r, l),
+                      src: s.url,
+                      class: "sticker-picker__image sticker-picker__image-animated",
+                      loop: "",
+                      mode: "normal"
+                    }, null, 8, Ge)) : (i(), o("img", {
+                      key: 1,
+                      src: s.url,
+                      alt: s.alt || `Sticker ${r + 1}`,
+                      class: "sticker-picker__image"
+                    }, null, 8, Ie))
+                  ], 40, Ne))), 128))
+                ]))
+              ])
+            ])
+          ], 544), [
+            [Ue, v.value]
+          ])
+        ]),
+        _: 1
+      }),
+      S(Q, { name: "preview" }, {
+        default: Z(() => [
+          n.value ? (i(), o("div", {
+            key: 0,
+            ref_key: "previewElement",
+            ref: $,
+            class: "sticker-picker__preview",
+            style: $e(D.value),
+            onClick: ge
+          }, [
+            B(n.value) && k.value ? (i(), o("tgs-player", {
+              key: 0,
+              src: n.value.url,
+              class: "sticker-picker__preview-image sticker-picker__preview-image-animated",
+              autoplay: "",
+              loop: "",
+              mode: "normal"
+            }, null, 8, Xe)) : (i(), o("img", {
+              key: 1,
+              src: n.value.url,
+              alt: n.value.alt || "Preview",
+              class: "sticker-picker__preview-image"
+            }, null, 8, Ye)),
+            n.value.alt ? (i(), o("div", Ke, ee(n.value.alt), 1)) : M("", !0)
+          ], 4)) : M("", !0)
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+}, nt = /* @__PURE__ */ Ae(He, [["__scopeId", "data-v-16a91ee6"]]);
+export {
+  nt as default
+};

package/dist/components/2_chatinput_elements/StickerPicker/icons/StickerIcon.vue.js

@@ -0,0 +1,20 @@
+import { createElementBlock as t, openBlock as o, createStaticVNode as c } from "vue";
+import l from "../../../../_virtual/_plugin-vue_export-helper.js";
+const r = {}, n = {
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  "xmlns:xlink": "http://www.w3.org/1999/xlink",
+  width: "23px",
+  height: "23px",
+  viewBox: "42.67 42.67 170.66 170.66",
+  overflow: "visible"
+};
+function i(f, e) {
+  return o(), t("svg", n, [...e[0] || (e[0] = [
+    c('<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode:normal;"><g transform="scale(5.33333,5.33333)"><path d="M28.921,42.016l-14.366,-0.016c-4.717,0 -8.555,-3.838 -8.555,-8.556v-18.888c0,-4.718 3.838,-8.556 8.556,-8.556h18.889c4.717,0 8.555,3.838 8.555,8.556v14.554zM14.556,8c-3.615,0 -6.556,2.94 -6.556,6.556v18.889c0,3.615 2.941,6.555 6.556,6.555l13.546,0.016l11.898,-11.742v-13.718c0,-3.616 -2.941,-6.556 -6.556,-6.556z" fill="#5f5f5f"></path><circle cx="16.047" cy="19.023" r="2" fill="#5f5f5f"></circle><circle cx="31.938" cy="19.023" r="2" fill="#5f5f5f"></circle><path d="M23.984,33.016c-3.042,0 -5.872,-1.326 -7.387,-3.461c-0.32,-0.451 -0.214,-1.075 0.237,-1.395c0.452,-0.32 1.074,-0.213 1.394,0.236c1.146,1.615 3.352,2.619 5.756,2.619c2.428,0 4.643,-1.018 5.781,-2.655c0.316,-0.453 0.939,-0.564 1.392,-0.25c0.454,0.315 0.565,0.938 0.25,1.393c-1.506,2.167 -4.35,3.513 -7.423,3.513z" fill="#5f5f5f"></path><path d="M41.972,26.004h-6.839c-5.034,0 -9.13,4.111 -9.13,9.164l0.013,6.832h3.023l12.933,-12.867z" fill="#5f5f5f"></path></g></g>', 1)
+  ])]);
+}
+const h = /* @__PURE__ */ l(r, [["render", i]]);
+export {
+  h as default
+};