@mobilon-dev/chotto 0.3.33 → 0.3.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/dist/chotto.css +1 -1
  2. package/dist/components/1_atoms/ButtonContextMenu/ButtonContextMenu.vue.js +2 -2
  3. package/dist/components/1_atoms/ButtonContextMenu/ButtonContextMenu.vue2.js +28 -27
  4. package/dist/components/1_atoms/ContextMenu/ContextMenu.vue.js +36 -22
  5. package/dist/components/1_icons/SettingsIcon.vue.js +6 -6
  6. package/dist/components/2_blocks/CommunicationPanel/CommunicationPanel.vue.js +164 -156
  7. package/dist/components/2_chatinput_elements/ButtonEmojiPicker/ButtonEmojiPicker.vue.js +4 -103
  8. package/dist/components/2_chatinput_elements/ButtonEmojiPicker/ButtonEmojiPicker.vue2.js +135 -0
  9. package/dist/components/2_chatinput_elements/ButtonEmojiPicker/icons/SmilesIcon.vue.js +33 -11
  10. package/dist/components/2_chatinput_elements/ButtonEmojiPicker/icons/SmilesIcon.vue2.js +4 -0
  11. package/dist/components/2_chatinput_elements/ButtonTemplateSelector/ButtonTemplateSelector.vue.js +4 -102
  12. package/dist/components/2_chatinput_elements/ButtonTemplateSelector/ButtonTemplateSelector.vue2.js +135 -0
  13. package/dist/components/2_chatinput_elements/ButtonTemplateSelector/icons/ChatTemplatesIcon.vue.js +21 -18
  14. package/dist/components/2_chatinput_elements/ButtonTemplateSelector/icons/ChatTemplatesIcon.vue2.js +4 -0
  15. package/dist/components/2_chatinput_elements/FileUploader/FileUploader.vue.js +2 -2
  16. package/dist/components/2_chatinput_elements/FileUploader/FileUploader.vue2.js +89 -55
  17. package/dist/components/2_chatinput_elements/FileUploader/icons/FileUploaderIcon.vue.js +17 -14
  18. package/dist/components/2_chatinput_elements/FileUploader/icons/FileUploaderIcon.vue2.js +4 -0
  19. package/dist/components/2_chatinput_elements/StickerPicker/StickerPicker.vue.js +4 -337
  20. package/dist/components/2_chatinput_elements/StickerPicker/StickerPicker.vue2.js +360 -0
  21. package/dist/components/2_chatinput_elements/StickerPicker/icons/StickerIcon.vue.js +56 -11
  22. package/dist/components/2_chatinput_elements/StickerPicker/icons/StickerIcon.vue2.js +4 -0
  23. package/dist/components/2_chatlist_elements/ChatItem/ChatItem.vue.js +2 -2
  24. package/dist/components/2_chatlist_elements/ChatItem/ChatItem.vue2.js +164 -100
  25. package/dist/components/2_feed_elements/ImageMessage/ImageMessage.vue.js +1 -1
  26. package/dist/components/2_feed_elements/ImageMessage/ImageMessage.vue2.js +184 -134
  27. package/dist/components/2_feed_elements/VideoMessage/VideoMessage.vue.js +3 -3
  28. package/dist/components/2_feed_elements/VideoMessage/VideoMessage.vue2.js +1 -1
  29. package/dist/components/3_compounds/ChatList/ChatList.vue.js +101 -91
  30. package/dist/components/3_compounds/SideBar/SideBar.vue.js +68 -67
  31. package/dist/hooks/messages/useChannelAccentColor.js +35 -19
  32. package/dist/themes/dark.css +1 -1
  33. package/dist/themes/default.css +1 -1
  34. package/dist/themes/glass.css +1 -0
  35. package/dist/themes/green.css +1 -1
  36. package/dist/themes/mobilon1.css +1 -1
  37. package/dist/types/apps/data/messages.d.ts +117 -86
  38. package/dist/types/components/1_atoms/ContextMenu/ContextMenu.vue.d.ts +5 -1
  39. package/dist/types/components/2_blocks/CommunicationPanel/CommunicationPanel.vue.d.ts +2 -0
  40. package/dist/types/components/2_blocks/CommunicationPanel/stories/CommunicationPanel.stories.d.ts +2 -0
  41. package/dist/types/components/2_blocks/CommunicationPanel/styles/types.d.ts +4 -0
  42. package/dist/types/components/2_chatinput_elements/ButtonEmojiPicker/ButtonEmojiPicker.vue.d.ts +31 -7
  43. package/dist/types/components/2_chatinput_elements/ButtonEmojiPicker/icons/SmilesIcon.vue.d.ts +6 -1
  44. package/dist/types/components/2_chatinput_elements/ButtonEmojiPicker/styles/types.d.ts +6 -0
  45. package/dist/types/components/2_chatinput_elements/ButtonTemplateSelector/ButtonTemplateSelector.vue.d.ts +59 -11
  46. package/dist/types/components/2_chatinput_elements/ButtonTemplateSelector/icons/ChatTemplatesIcon.vue.d.ts +6 -1
  47. package/dist/types/components/2_chatinput_elements/FileUploader/icons/FileUploaderIcon.vue.d.ts +6 -1
  48. package/dist/types/components/2_chatinput_elements/StickerPicker/StickerPicker.vue.d.ts +22 -10
  49. package/dist/types/components/2_chatinput_elements/StickerPicker/icons/StickerIcon.vue.d.ts +6 -1
  50. package/dist/types/components/2_chatlist_elements/ChatItem/ChatItem.vue.d.ts +2 -0
  51. package/dist/types/components/2_chatlist_elements/ChatItem/styles/types.d.ts +2 -0
  52. package/dist/types/components/2_elements/ChatInfo/styles/types.d.ts +2 -0
  53. package/dist/types/components/2_feed_elements/AudioMessage/styles/types.d.ts +18 -0
  54. package/dist/types/components/2_feed_elements/CallMessage/styles/types.d.ts +24 -0
  55. package/dist/types/components/2_feed_elements/DateMessage/styles/types.d.ts +6 -0
  56. package/dist/types/components/2_feed_elements/DateMessageSticky/styles/types.d.ts +4 -0
  57. package/dist/types/components/2_feed_elements/FeedKeyboard/styles/types.d.ts +2 -0
  58. package/dist/types/components/2_feed_elements/FileMessage/styles/types.d.ts +12 -0
  59. package/dist/types/components/2_feed_elements/ImageMessage/styles/types.d.ts +126 -0
  60. package/dist/types/components/2_feed_elements/MessageReactions/styles/types.d.ts +8 -0
  61. package/dist/types/components/2_feed_elements/TextMessage/styles/types.d.ts +16 -0
  62. package/dist/types/components/3_compounds/ChatInput/styles/types.d.ts +2 -0
  63. package/dist/types/components/3_compounds/ChatList/ChatList.vue.d.ts +2 -0
  64. package/dist/types/components/3_compounds/ChatList/styles/types.d.ts +8 -0
  65. package/dist/types/components/3_compounds/SideBar/styles/types.d.ts +6 -16
  66. package/dist/types/components/4_layouts/ChatWrapper/styles/types.d.ts +4 -0
  67. package/dist/types/components/4_layouts/ExtendedLayout/styles/types.d.ts +8 -0
  68. package/package.json +2 -1
@@ -1,15 +1,15 @@
1
- import { defineComponent as M, ref as d, inject as z, computed as A, onMounted as B, createElementBlock as m, openBlock as s, Fragment as E, createCommentVNode as v, createElementVNode as p, createBlock as b, normalizeClass as V, createVNode as D, unref as g, Teleport as N } from "vue";
2
- import x from "../FilePreview/FilePreview.vue.js";
3
- import { uploadFile as R } from "../../../hooks/uploadFile/uploadFile.js";
4
- import { useMessageDraft as j } from "../../../hooks/useMessageDraft.js";
1
+ import { defineComponent as x, ref as n, inject as O, computed as M, watchEffect as P, onMounted as $, onUnmounted as H, createElementBlock as w, openBlock as a, Fragment as L, createCommentVNode as b, createElementVNode as m, createBlock as S, normalizeClass as R, createVNode as j, unref as h, Teleport as T } from "vue";
2
+ import q from "../FilePreview/FilePreview.vue.js";
3
+ import { uploadFile as G } from "../../../hooks/uploadFile/uploadFile.js";
4
+ import { useMessageDraft as J } from "../../../hooks/useMessageDraft.js";
5
5
  import "../../../hooks/useSearchModel.js";
6
6
  import "../../../hooks/useTheme.js";
7
7
  /* empty css */
8
8
  /* empty css */
9
9
  import "../../../node_modules/linkifyjs/dist/linkify.js";
10
10
  import "../../../functions/parseMarkdown.js";
11
- import L from "./icons/FileUploaderIcon.vue.js";
12
- const O = { key: 0 }, P = { key: 1 }, T = ["disabled"], ie = /* @__PURE__ */ M({
11
+ import K from "./icons/FileUploaderIcon.vue.js";
12
+ const Q = { key: 0 }, W = { key: 1 }, X = ["disabled"], pe = /* @__PURE__ */ x({
13
13
  __name: "FileUploader",
14
14
  props: {
15
15
  filebumpUrl: {
@@ -22,39 +22,57 @@ const O = { key: 0 }, P = { key: 1 }, T = ["disabled"], ie = /* @__PURE__ */ M({
22
22
  }
23
23
  },
24
24
  emits: ["fileUploaded"],
25
- setup(u, { emit: q }) {
26
- const f = u, l = d(""), o = d(), r = d(), a = z("chatAppId"), { setMessageFile: k, resetMessageFile: I, getMessage: y, setRecordingMessage: w } = j(a), c = A(() => !y().file), F = () => {
27
- const t = document.getElementById("chat-input-file-line-" + a);
28
- t && (t.style.display = "none"), I(), r.value = void 0, l.value = "";
29
- }, h = async () => {
30
- var t, i;
31
- F(), (t = o.value) != null && t.files && U((i = o.value) == null ? void 0 : i.files[0]);
32
- }, C = () => {
33
- o.value && c && f.state == "active" && o.value.click();
34
- }, S = async (t) => {
25
+ setup(d, { emit: Y }) {
26
+ const v = d, r = n(""), s = n(), p = n(), B = n(), i = O("chatAppId"), { setMessageFile: V, resetMessageFile: z, getMessage: C, setRecordingMessage: I } = J(i), f = n("#5F5F5F"), c = n("#404040"), g = n(!1);
27
+ let u = null;
28
+ const y = () => {
29
+ if (!i) {
30
+ f.value = "#5F5F5F", c.value = "#404040";
31
+ return;
32
+ }
33
+ const l = document.getElementById(i);
34
+ if (!l) {
35
+ f.value = "#5F5F5F", c.value = "#404040";
36
+ return;
37
+ }
38
+ const t = window.getComputedStyle(l), e = t.getPropertyValue("--chotto-fileuploader-trigger-color").trim(), o = t.getPropertyValue("--chotto-fileuploader-trigger-hover-color").trim();
39
+ f.value = e || "#5F5F5F", c.value = o || "#404040";
40
+ }, A = M(() => g.value ? c.value : f.value);
41
+ P(() => {
42
+ y();
43
+ });
44
+ const F = M(() => !C().file), E = () => {
45
+ const l = document.getElementById("chat-input-file-line-" + i);
46
+ l && (l.style.display = "none"), z(), p.value = void 0, r.value = "";
47
+ }, N = async () => {
48
+ var l, t;
49
+ E(), (l = s.value) != null && l.files && U((t = s.value) == null ? void 0 : t.files[0]);
50
+ }, D = () => {
51
+ s.value && F && v.state == "active" && s.value.click();
52
+ }, k = async (l) => {
35
53
  var e;
36
- const i = (e = t.clipboardData) == null ? void 0 : e.items;
37
- if (i) {
38
- for (let n of i)
39
- if (n.type.indexOf("image") !== -1) {
40
- t.preventDefault();
41
- const _ = n.getAsFile();
54
+ const t = (e = l.clipboardData) == null ? void 0 : e.items;
55
+ if (t) {
56
+ for (let o of t)
57
+ if (o.type.indexOf("image") !== -1) {
58
+ l.preventDefault();
59
+ const _ = o.getAsFile();
42
60
  _ && U(_);
43
61
  }
44
62
  }
45
- }, U = async (t) => {
46
- l.value = "uploading", w(!0);
47
- const i = typeof f.filebumpUrl == "string" ? f.filebumpUrl : null;
48
- await R(i, t).then((e) => {
49
- if (w(!1), l.value = e.status, e.status == "success") {
50
- k({
63
+ }, U = async (l) => {
64
+ r.value = "uploading", I(!0);
65
+ const t = typeof v.filebumpUrl == "string" ? v.filebumpUrl : null;
66
+ await G(t, l).then((e) => {
67
+ if (I(!1), r.value = e.status, e.status == "success") {
68
+ V({
51
69
  url: e.url,
52
70
  name: e.name,
53
71
  size: e.size,
54
72
  type: e.type
55
73
  });
56
- const n = document.getElementById("chat-input-file-line-" + a);
57
- n && (n.style.display = "inherit"), e.preview && (r.value = {
74
+ const o = document.getElementById("chat-input-file-line-" + i);
75
+ o && (o.style.display = "inherit"), e.preview && (p.value = {
58
76
  previewUrl: e.preview.previewUrl,
59
77
  isImage: e.preview.isImage,
60
78
  isVideo: e.preview.isVideo,
@@ -65,41 +83,57 @@ const O = { key: 0 }, P = { key: 1 }, T = ["disabled"], ie = /* @__PURE__ */ M({
65
83
  }
66
84
  });
67
85
  };
68
- return B(() => {
69
- window.addEventListener("paste", S);
70
- }), (t, i) => (s(), m(E, null, [
71
- l.value === "uploading" ? (s(), m("div", O, [...i[0] || (i[0] = [
72
- p("p", null, "Загрузка файла...", -1)
73
- ])])) : l.value === "error" ? (s(), m("div", P, [...i[1] || (i[1] = [
74
- p("p", null, "Ошибка при загрузке файла.", -1)
75
- ])])) : v("", !0),
76
- p("span", {
77
- class: V(["file-uploader__trigger", { "file-uploader__disabled": !c.value || u.state == "disabled" }]),
78
- disabled: !c.value || u.state == "disabled",
79
- onClick: C
86
+ return $(() => {
87
+ if (window.addEventListener("paste", k), y(), i) {
88
+ const l = document.getElementById(i);
89
+ l && (u = new MutationObserver((t) => {
90
+ t.forEach((e) => {
91
+ e.type === "attributes" && e.attributeName === "data-theme" && y();
92
+ });
93
+ }), u.observe(l, {
94
+ attributes: !0,
95
+ attributeFilter: ["data-theme"]
96
+ }));
97
+ }
98
+ }), H(() => {
99
+ window.removeEventListener("paste", k), u && (u.disconnect(), u = null);
100
+ }), (l, t) => (a(), w(L, null, [
101
+ r.value === "uploading" ? (a(), w("div", Q, [...t[2] || (t[2] = [
102
+ m("p", null, "Загрузка файла...", -1)
103
+ ])])) : r.value === "error" ? (a(), w("div", W, [...t[3] || (t[3] = [
104
+ m("p", null, "Ошибка при загрузке файла.", -1)
105
+ ])])) : b("", !0),
106
+ m("span", {
107
+ ref_key: "triggerElement",
108
+ ref: B,
109
+ class: R(["file-uploader__trigger", { "file-uploader__disabled": !F.value || d.state == "disabled" }]),
110
+ disabled: !F.value || d.state == "disabled",
111
+ onClick: D,
112
+ onMouseenter: t[0] || (t[0] = (e) => g.value = !0),
113
+ onMouseleave: t[1] || (t[1] = (e) => g.value = !1)
80
114
  }, [
81
- D(g(L))
82
- ], 10, T),
83
- p("input", {
115
+ j(h(K), { fill: A.value }, null, 8, ["fill"])
116
+ ], 42, X),
117
+ m("input", {
84
118
  ref_key: "fileInput",
85
- ref: o,
119
+ ref: s,
86
120
  style: { display: "none" },
87
121
  type: "file",
88
- onChange: h
122
+ onChange: N
89
123
  }, null, 544),
90
- g(y)().file ? (s(), b(N, {
124
+ h(C)().file ? (a(), S(T, {
91
125
  key: 2,
92
- to: "#chat-input-file-line-" + g(a)
126
+ to: "#chat-input-file-line-" + h(i)
93
127
  }, [
94
- r.value ? (s(), b(x, {
128
+ p.value ? (a(), S(q, {
95
129
  key: 0,
96
- "file-info": r.value,
97
- onReset: F
98
- }, null, 8, ["file-info"])) : v("", !0)
99
- ], 8, ["to"])) : v("", !0)
130
+ "file-info": p.value,
131
+ onReset: E
132
+ }, null, 8, ["file-info"])) : b("", !0)
133
+ ], 8, ["to"])) : b("", !0)
100
134
  ], 64));
101
135
  }
102
136
  });
103
137
  export {
104
- ie as default
138
+ pe as default
105
139
  };
@@ -1,21 +1,24 @@
1
- import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
2
- import n from "../../../../_virtual/_plugin-vue_export-helper.js";
3
- const r = {}, l = {
1
+ import { defineComponent as e, createElementBlock as t, openBlock as l, createElementVNode as o } from "vue";
2
+ const n = {
4
3
  width: "26",
5
4
  height: "26",
6
5
  viewBox: "0 0 26 26",
7
6
  fill: "none",
8
7
  xmlns: "http://www.w3.org/2000/svg"
9
- };
10
- function c(i, C) {
11
- return t(), e("svg", l, [...C[0] || (C[0] = [
12
- o("path", {
13
- d: "M7.3125 4.875C7.3125 3.79756 7.74051 2.76425 8.50238 2.00238C9.26425 1.24051 10.2976 0.8125 11.375 0.8125C12.4524 0.8125 13.4858 1.24051 14.2476 2.00238C15.0095 2.76425 15.4375 3.79756 15.4375 4.875V19.5C15.4375 20.1465 15.1807 20.7665 14.7236 21.2236C14.2665 21.6807 13.6465 21.9375 13 21.9375C12.3535 21.9375 11.7335 21.6807 11.2764 21.2236C10.8193 20.7665 10.5625 20.1465 10.5625 19.5V8.125C10.5625 7.90951 10.6481 7.70285 10.8005 7.55048C10.9528 7.3981 11.1595 7.3125 11.375 7.3125C11.5905 7.3125 11.7972 7.3981 11.9495 7.55048C12.1019 7.70285 12.1875 7.90951 12.1875 8.125V19.5C12.1875 19.7155 12.2731 19.9222 12.4255 20.0745C12.5778 20.2269 12.7845 20.3125 13 20.3125C13.2155 20.3125 13.4222 20.2269 13.5745 20.0745C13.7269 19.9222 13.8125 19.7155 13.8125 19.5V4.875C13.8125 4.5549 13.7495 4.23794 13.627 3.94221C13.5045 3.64648 13.3249 3.37777 13.0986 3.15143C12.8722 2.92508 12.6035 2.74554 12.3078 2.62304C12.0121 2.50055 11.6951 2.4375 11.375 2.4375C11.0549 2.4375 10.7379 2.50055 10.4422 2.62304C10.1465 2.74554 9.87777 2.92508 9.65143 3.15143C9.42508 3.37777 9.24554 3.64648 9.12304 3.94221C9.00055 4.23794 8.9375 4.5549 8.9375 4.875V19.5C8.9375 20.5774 9.36551 21.6108 10.1274 22.3726C10.8892 23.1345 11.9226 23.5625 13 23.5625C14.0774 23.5625 15.1108 23.1345 15.8726 22.3726C16.6345 21.6108 17.0625 20.5774 17.0625 19.5V8.125C17.0625 7.90951 17.1481 7.70285 17.3005 7.55048C17.4528 7.3981 17.6595 7.3125 17.875 7.3125C18.0905 7.3125 18.2972 7.3981 18.4495 7.55048C18.6019 7.70285 18.6875 7.90951 18.6875 8.125V19.5C18.6875 21.0084 18.0883 22.4551 17.0217 23.5217C15.9551 24.5883 14.5084 25.1875 13 25.1875C11.4916 25.1875 10.0449 24.5883 8.97833 23.5217C7.91172 22.4551 7.3125 21.0084 7.3125 19.5V4.875Z",
14
- fill: "#5F5F5F"
15
- }, null, -1)
16
- ])]);
17
- }
18
- const V = /* @__PURE__ */ n(r, [["render", c]]);
8
+ }, i = ["fill"], a = /* @__PURE__ */ e({
9
+ __name: "FileUploaderIcon",
10
+ props: {
11
+ fill: { default: "#5F5F5F" }
12
+ },
13
+ setup(C) {
14
+ return (c, r) => (l(), t("svg", n, [
15
+ o("path", {
16
+ d: "M7.3125 4.875C7.3125 3.79756 7.74051 2.76425 8.50238 2.00238C9.26425 1.24051 10.2976 0.8125 11.375 0.8125C12.4524 0.8125 13.4858 1.24051 14.2476 2.00238C15.0095 2.76425 15.4375 3.79756 15.4375 4.875V19.5C15.4375 20.1465 15.1807 20.7665 14.7236 21.2236C14.2665 21.6807 13.6465 21.9375 13 21.9375C12.3535 21.9375 11.7335 21.6807 11.2764 21.2236C10.8193 20.7665 10.5625 20.1465 10.5625 19.5V8.125C10.5625 7.90951 10.6481 7.70285 10.8005 7.55048C10.9528 7.3981 11.1595 7.3125 11.375 7.3125C11.5905 7.3125 11.7972 7.3981 11.9495 7.55048C12.1019 7.70285 12.1875 7.90951 12.1875 8.125V19.5C12.1875 19.7155 12.2731 19.9222 12.4255 20.0745C12.5778 20.2269 12.7845 20.3125 13 20.3125C13.2155 20.3125 13.4222 20.2269 13.5745 20.0745C13.7269 19.9222 13.8125 19.7155 13.8125 19.5V4.875C13.8125 4.5549 13.7495 4.23794 13.627 3.94221C13.5045 3.64648 13.3249 3.37777 13.0986 3.15143C12.8722 2.92508 12.6035 2.74554 12.3078 2.62304C12.0121 2.50055 11.6951 2.4375 11.375 2.4375C11.0549 2.4375 10.7379 2.50055 10.4422 2.62304C10.1465 2.74554 9.87777 2.92508 9.65143 3.15143C9.42508 3.37777 9.24554 3.64648 9.12304 3.94221C9.00055 4.23794 8.9375 4.5549 8.9375 4.875V19.5C8.9375 20.5774 9.36551 21.6108 10.1274 22.3726C10.8892 23.1345 11.9226 23.5625 13 23.5625C14.0774 23.5625 15.1108 23.1345 15.8726 22.3726C16.6345 21.6108 17.0625 20.5774 17.0625 19.5V8.125C17.0625 7.90951 17.1481 7.70285 17.3005 7.55048C17.4528 7.3981 17.6595 7.3125 17.875 7.3125C18.0905 7.3125 18.2972 7.3981 18.4495 7.55048C18.6019 7.70285 18.6875 7.90951 18.6875 8.125V19.5C18.6875 21.0084 18.0883 22.4551 17.0217 23.5217C15.9551 24.5883 14.5084 25.1875 13 25.1875C11.4916 25.1875 10.0449 24.5883 8.97833 23.5217C7.91172 22.4551 7.3125 21.0084 7.3125 19.5V4.875Z",
17
+ fill: C.fill
18
+ }, null, 8, i)
19
+ ]));
20
+ }
21
+ });
19
22
  export {
20
- V as default
23
+ a as default
21
24
  };
@@ -0,0 +1,4 @@
1
+ import f from "./FileUploaderIcon.vue.js";
2
+ export {
3
+ f as default
4
+ };
@@ -1,340 +1,7 @@
1
- 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";
2
- import { useMessageDraft as De } from "../../../hooks/useMessageDraft.js";
3
- import "../../../hooks/useSearchModel.js";
4
- import "../../../hooks/useTheme.js";
5
- /* empty css */
6
- import Ae from "../../../_virtual/_plugin-vue_export-helper.js";
7
- /* empty css */
8
- import "../../../node_modules/linkifyjs/dist/linkify.js";
9
- import "../../../functions/parseMarkdown.js";
10
- import te from "./icons/StickerIcon.vue.js";
11
- import { isAnimatedSticker as L } from "../../2_feed_elements/StickerMessage/utils/stickerUtils.js";
12
- import "../../2_feed_elements/StickerMessage/utils/suppress-lit-warning.js";
1
+ import o from "./StickerPicker.vue2.js";
13
2
  /* empty css */
14
- const Fe = { class: "sticker-picker__container" }, Oe = ["onClick", "onMouseenter", "onMouseleave"], Be = ["src"], Re = ["src", "alt"], We = {
15
- key: 2,
16
- class: "sticker-picker__tab-icon-placeholder"
17
- }, Ve = { class: "sticker-picker__content" }, je = {
18
- key: 0,
19
- class: "sticker-picker__empty"
20
- }, ze = {
21
- key: 1,
22
- class: "sticker-picker__grid"
23
- }, Ne = ["onClick", "onMousedown", "onMouseenter", "onTouchstart"], Ge = ["src"], Ie = ["src", "alt"], Xe = ["src"], Ye = ["src", "alt"], Ke = {
24
- key: 2,
25
- class: "sticker-picker__preview-label"
26
- }, qe = 500, He = {
27
- __name: "StickerPicker",
28
- props: {
29
- state: {
30
- type: String,
31
- default: "active"
32
- },
33
- mode: {
34
- type: String,
35
- default: "click",
36
- // или 'hover'
37
- validator: (h) => ["click", "hover"].includes(h)
38
- },
39
- stickers: {
40
- type: Array,
41
- default: () => []
42
- // Поддерживаем два формата:
43
- // 1. Массив стикеров: [{ url, alt? }, ...]
44
- // 2. Массив наборов (вкладок): [[{ url, alt? }, ...], ...] или [{ stickers: [...], label?, iconUrl? }, ...]
45
- },
46
- emptyText: {
47
- type: String,
48
- default: "Нет доступных стикеров"
49
- }
50
- },
51
- setup(h) {
52
- 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());
53
- let T = !1, b = !1;
54
- const k = c(!1), A = c(!1);
55
- async function z() {
56
- if (!(k.value || A.value)) {
57
- A.value = !0;
58
- try {
59
- 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;
60
- } catch (e) {
61
- console.error("Failed to load TGS libraries:", e);
62
- } finally {
63
- A.value = !1;
64
- }
65
- }
66
- }
67
- const ie = () => {
68
- if (!a.stickers || a.stickers.length === 0)
69
- return { hasTabs: !1, tabs: [] };
70
- const e = a.stickers[0], t = Array.isArray(e), s = e && typeof e == "object" && e.stickers;
71
- return t ? {
72
- hasTabs: !0,
73
- tabs: a.stickers.map((r, l) => ({
74
- id: `tab-${l}`,
75
- label: `Set ${l + 1}`,
76
- stickers: r,
77
- iconUrl: r && r.length > 0 ? r[0].url : null
78
- }))
79
- } : s && e.stickers ? {
80
- hasTabs: !0,
81
- tabs: a.stickers.map((r, l) => ({
82
- id: r.id || `tab-${l}`,
83
- label: r.label || `Set ${l + 1}`,
84
- stickers: r.stickers || [],
85
- iconUrl: r.iconUrl || (r.stickers && r.stickers.length > 0 ? r.stickers[0].url : null)
86
- }))
87
- } : {
88
- hasTabs: !0,
89
- tabs: [{
90
- id: "default",
91
- label: "Stickers",
92
- stickers: a.stickers,
93
- iconUrl: a.stickers.length > 0 ? a.stickers[0].url : null
94
- }]
95
- };
96
- }, F = y(() => ie()), ce = y(() => F.value.hasTabs && F.value.tabs.length > 0), _ = y(() => F.value.tabs), O = y(() => {
97
- var e;
98
- return _.value.length === 0 ? [] : ((e = _.value[d.value]) == null ? void 0 : e.stickers) || [];
99
- }), N = y(() => {
100
- const e = O.value.some((s) => L(s.url)), t = _.value.some((s) => s.iconUrl && L(s.iconUrl));
101
- return e || t;
102
- });
103
- V(N, (e) => {
104
- e && !k.value && z();
105
- }, { immediate: !0 });
106
- const B = (e) => L(e.url), ne = (e, t) => {
107
- t ? f.value.set(e, t) : f.value.delete(e);
108
- }, ue = (e, t) => {
109
- t ? p.value.set(e, t) : p.value.delete(e);
110
- }, ve = (e) => {
111
- const t = p.value.get(e);
112
- t && typeof t.play == "function" && t.play();
113
- }, fe = (e) => {
114
- const t = p.value.get(e);
115
- t && typeof t.pause == "function" && t.pause();
116
- };
117
- V(d, () => {
118
- f.value.clear();
119
- }), V(() => a.stickers, () => {
120
- d.value >= _.value.length && (d.value = 0);
121
- }, { deep: !0 });
122
- const ke = (e) => {
123
- if (!e) return "image";
124
- const t = e.toLowerCase();
125
- return t.endsWith(".tgs") || t.endsWith(".webp") ? "sticker" : "image";
126
- }, G = (e) => {
127
- if (a.state === "disabled") return;
128
- const t = ke(e.url);
129
- le({
130
- url: e.url,
131
- name: e.alt || `sticker.${t === "sticker" ? e.url.toLowerCase().endsWith(".tgs") ? "tgs" : "webp" : "png"}`,
132
- type: t
133
- }), ae(!0), a.mode === "click" && (v.value = !1);
134
- }, I = (e, t) => {
135
- oe.value = t.currentTarget, u.value = !1, m.value && clearTimeout(m.value), m.value = setTimeout(() => {
136
- u.value = !0, _e(e);
137
- }, qe);
138
- }, X = () => {
139
- if (R(), u.value) {
140
- u.value = !1;
141
- return;
142
- }
143
- }, pe = (e, t) => {
144
- if (B(e) && k.value) {
145
- const s = f.value.get(t);
146
- s && typeof s.play == "function" && s.play();
147
- }
148
- }, de = () => {
149
- f.value.forEach((e) => {
150
- e && typeof e.pause == "function" && e.pause();
151
- }), !(u.value && n.value) && (R(), g());
152
- }, me = (e, t) => {
153
- I(e, t);
154
- }, Y = () => {
155
- X();
156
- }, he = (e, t) => {
157
- if (u.value) {
158
- t.preventDefault(), t.stopPropagation(), u.value = !1, g();
159
- return;
160
- }
161
- G(e);
162
- }, R = () => {
163
- m.value && (clearTimeout(m.value), m.value = null);
164
- }, _e = (e) => {
165
- n.value = e, D.value = {
166
- left: "50%",
167
- top: "50%",
168
- transform: "translate(-50%, -50%)"
169
- };
170
- }, g = () => {
171
- n.value = null, D.value = {};
172
- }, ge = () => {
173
- n.value && (G(n.value), g());
174
- }, K = () => {
175
- a.state === "active" && (v.value = !0);
176
- }, W = () => {
177
- f.value.forEach((e) => {
178
- e && typeof e.pause == "function" && e.pause();
179
- }), p.value.forEach((e) => {
180
- e && typeof e.pause == "function" && e.pause();
181
- }), v.value = !1;
182
- }, ye = () => {
183
- a.mode === "click" && (v.value = !v.value, v.value && K());
184
- }, Te = () => {
185
- a.mode === "hover" && (T = !0, K());
186
- }, be = () => {
187
- a.mode === "hover" && (T = !1, setTimeout(() => {
188
- !b && !T && W();
189
- }, 150));
190
- }, Me = () => {
191
- a.mode === "hover" && (b = !0);
192
- }, Se = () => {
193
- a.mode === "hover" && (b = !1, setTimeout(() => {
194
- !T && !b && W();
195
- }, 150));
196
- }, we = (e) => {
197
- if (!U.value) return;
198
- const t = e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
199
- U.value.scrollLeft += t, e.preventDefault();
200
- }, q = (e) => {
201
- 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();
202
- }, H = () => {
203
- u.value && (u.value = !1);
204
- };
205
- return Le(() => {
206
- document.addEventListener("click", q), document.addEventListener("mouseup", H), N.value && !k.value && z();
207
- }), Ee(() => {
208
- document.removeEventListener("click", q), document.removeEventListener("mouseup", H), R(), g(), f.value.forEach((e) => {
209
- e && typeof e.pause == "function" && e.pause();
210
- }), f.value.clear(), p.value.forEach((e) => {
211
- e && typeof e.pause == "function" && e.pause();
212
- }), p.value.clear();
213
- }), (e, t) => (i(), o(j, null, [
214
- w(re)().isRecording ? M("", !0) : (i(), o("button", {
215
- key: 0,
216
- ref_key: "stickerButton",
217
- ref: C,
218
- class: J(["button", { "button-disabled": h.state === "disabled" }]),
219
- onClick: ye,
220
- onMouseenter: Te,
221
- onMouseleave: be
222
- }, [
223
- P("span", null, [
224
- S(w(te))
225
- ])
226
- ], 34)),
227
- S(Q, null, {
228
- default: Z(() => [
229
- Ce(P("div", {
230
- ref_key: "stickerPicker",
231
- ref: E,
232
- class: "sticker-picker",
233
- onMouseenter: Me,
234
- onMouseleave: Se
235
- }, [
236
- P("div", Fe, [
237
- ce.value ? (i(), o("div", {
238
- key: 0,
239
- ref_key: "tabsContainer",
240
- ref: U,
241
- class: "sticker-picker__tabs",
242
- onWheel: we
243
- }, [
244
- (i(!0), o(j, null, x(_.value, (s, r) => (i(), o("button", {
245
- key: r,
246
- class: J(["sticker-picker__tab", { "sticker-picker__tab--active": d.value === r }]),
247
- onClick: (l) => d.value = r,
248
- onMouseenter: (l) => ve(r),
249
- onMouseleave: (l) => fe(r)
250
- }, [
251
- s.iconUrl && w(L)(s.iconUrl) && k.value ? (i(), o("tgs-player", {
252
- key: 0,
253
- ref_for: !0,
254
- ref: (l) => ue(r, l),
255
- src: s.iconUrl,
256
- class: "sticker-picker__tab-icon sticker-picker__tab-icon-animated",
257
- loop: "",
258
- mode: "normal"
259
- }, null, 8, Be)) : s.iconUrl ? (i(), o("img", {
260
- key: 1,
261
- src: s.iconUrl,
262
- alt: s.label || `Tab ${r + 1}`,
263
- class: "sticker-picker__tab-icon"
264
- }, null, 8, Re)) : (i(), o("span", We, [
265
- S(w(te))
266
- ]))
267
- ], 42, Oe))), 128))
268
- ], 544)) : M("", !0),
269
- P("div", Ve, [
270
- O.value.length === 0 ? (i(), o("div", je, ee(h.emptyText), 1)) : (i(), o("div", ze, [
271
- (i(!0), o(j, null, x(O.value, (s, r) => (i(), o("button", {
272
- key: r,
273
- class: "sticker-picker__item",
274
- onClick: (l) => he(s, l),
275
- onMousedown: (l) => I(s, l),
276
- onMouseup: X,
277
- onMouseenter: (l) => pe(s, r),
278
- onMouseleave: de,
279
- onTouchstart: (l) => me(s, l),
280
- onTouchend: Y,
281
- onTouchcancel: Y
282
- }, [
283
- B(s) && k.value ? (i(), o("tgs-player", {
284
- key: 0,
285
- ref_for: !0,
286
- ref: (l) => ne(r, l),
287
- src: s.url,
288
- class: "sticker-picker__image sticker-picker__image-animated",
289
- loop: "",
290
- mode: "normal"
291
- }, null, 8, Ge)) : (i(), o("img", {
292
- key: 1,
293
- src: s.url,
294
- alt: s.alt || `Sticker ${r + 1}`,
295
- class: "sticker-picker__image"
296
- }, null, 8, Ie))
297
- ], 40, Ne))), 128))
298
- ]))
299
- ])
300
- ])
301
- ], 544), [
302
- [Ue, v.value]
303
- ])
304
- ]),
305
- _: 1
306
- }),
307
- S(Q, { name: "preview" }, {
308
- default: Z(() => [
309
- n.value ? (i(), o("div", {
310
- key: 0,
311
- ref_key: "previewElement",
312
- ref: $,
313
- class: "sticker-picker__preview",
314
- style: $e(D.value),
315
- onClick: ge
316
- }, [
317
- B(n.value) && k.value ? (i(), o("tgs-player", {
318
- key: 0,
319
- src: n.value.url,
320
- class: "sticker-picker__preview-image sticker-picker__preview-image-animated",
321
- autoplay: "",
322
- loop: "",
323
- mode: "normal"
324
- }, null, 8, Xe)) : (i(), o("img", {
325
- key: 1,
326
- src: n.value.url,
327
- alt: n.value.alt || "Preview",
328
- class: "sticker-picker__preview-image"
329
- }, null, 8, Ye)),
330
- n.value.alt ? (i(), o("div", Ke, ee(n.value.alt), 1)) : M("", !0)
331
- ], 4)) : M("", !0)
332
- ]),
333
- _: 1
334
- })
335
- ], 64));
336
- }
337
- }, nt = /* @__PURE__ */ Ae(He, [["__scopeId", "data-v-16a91ee6"]]);
3
+ import r from "../../../_virtual/_plugin-vue_export-helper.js";
4
+ const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f84f2d4d"]]);
338
5
  export {
339
- nt as default
6
+ e as default
340
7
  };