@mobilon-dev/chotto 0.3.93 → 0.3.95
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.
- package/dist/chotto.css +1 -1
- package/dist/components/2_chatlist_elements/ChatItem/ChatItem.vue.js +2 -2
- package/dist/components/2_chatlist_elements/ChatItem/ChatItem.vue2.js +79 -79
- package/dist/components/3_compounds/Feed/Feed.vue.js +3 -3
- package/dist/components/3_compounds/Feed/Feed.vue2.js +147 -157
- package/dist/components/3_compounds/Feed/composables/useFeedScroll.js +81 -48
- package/dist/hooks/useMessageDraft.js +96 -75
- package/dist/types/components/3_compounds/Feed/composables/useFeedScroll.d.ts +5 -7
- package/package.json +1 -1
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { useFeedButton as
|
|
10
|
-
import { useFeedComponents as
|
|
11
|
-
import { useFeedGrouping as
|
|
12
|
-
import { useFeedKeyboard as
|
|
13
|
-
import { useFeedLoadMore as
|
|
14
|
-
import { useFeedMessageVisibility as
|
|
15
|
-
import { useFeedReply as
|
|
16
|
-
import { useFeedScroll as
|
|
17
|
-
import { useFeedScrollTo as
|
|
18
|
-
import { useStickyDate as
|
|
19
|
-
import { throttle as
|
|
20
|
-
import { getDefaultMessageMenuActions as
|
|
21
|
-
import
|
|
22
|
-
const
|
|
1
|
+
import { defineComponent as be, ref as h, computed as r, provide as v, inject as K, unref as t, watch as ke, nextTick as x, onMounted as he, createElementBlock as c, openBlock as i, createVNode as g, createBlock as u, createCommentVNode as l, normalizeStyle as O, renderSlot as L, withDirectives as ve, createElementVNode as M, vShow as Me, Transition as S, withCtx as R, Fragment as Se, renderList as Re, resolveDynamicComponent as Ie, mergeProps as Ae, toDisplayString as Be, Teleport as U } from "vue";
|
|
2
|
+
import Ce from "../../2_feed_elements/DateMessageSticky/DateMessageSticky.vue.js";
|
|
3
|
+
import Fe from "../../2_feed_elements/BaseReplyMessage/BaseReplyMessage.vue.js";
|
|
4
|
+
import Te from "../../2_feed_elements/BaseEditMessage/BaseEditMessage.vue.js";
|
|
5
|
+
import De from "../../2_feed_elements/MessageKeyboard/MessageKeyboard.vue.js";
|
|
6
|
+
import we from "../../2_feed_elements/FeedKeyboard/FeedKeyboard.vue.js";
|
|
7
|
+
import je from "../../2_feed_elements/TypingMessage/TypingMessage.vue.js";
|
|
8
|
+
import Ke from "../../1_atoms/LoadingIndicator/LoadingIndicator.vue.js";
|
|
9
|
+
import { useFeedButton as xe } from "./composables/useFeedButton.js";
|
|
10
|
+
import { useFeedComponents as Oe } from "./composables/useFeedComponents.js";
|
|
11
|
+
import { useFeedGrouping as Le } from "./composables/useFeedGrouping.js";
|
|
12
|
+
import { useFeedKeyboard as Ue } from "./composables/useFeedKeyboard.js";
|
|
13
|
+
import { useFeedLoadMore as Ee } from "./composables/useFeedLoadMore.js";
|
|
14
|
+
import { useFeedMessageVisibility as Ne } from "./composables/useFeedMessageVisibility.js";
|
|
15
|
+
import { useFeedReply as Ve } from "./composables/useFeedReply.js";
|
|
16
|
+
import { useFeedScroll as $e } from "./composables/useFeedScroll.js";
|
|
17
|
+
import { useFeedScrollTo as qe } from "./composables/useFeedScrollTo.js";
|
|
18
|
+
import { useStickyDate as Pe } from "./composables/useStickyDate.js";
|
|
19
|
+
import { throttle as ze } from "./functions/throttle.js";
|
|
20
|
+
import { getDefaultMessageMenuActions as We } from "./utils/getDefaultMessageMenuActions.js";
|
|
21
|
+
import Ge from "./assets/chat-background.svg.js";
|
|
22
|
+
const He = { class: "message-feed-wrapper" }, Je = ["id"], Qe = { class: "message-feed__loading" }, Xe = ["id", "data-timestamp", "onDblclick"], Ye = { style: { margin: "auto" } }, Ze = {
|
|
23
23
|
key: 0,
|
|
24
24
|
class: "message-feed__unread-amount"
|
|
25
|
-
},
|
|
25
|
+
}, vt = /* @__PURE__ */ be({
|
|
26
26
|
__name: "Feed",
|
|
27
27
|
props: {
|
|
28
28
|
objects: {
|
|
@@ -117,7 +117,7 @@ const Qe = { class: "message-feed-wrapper" }, Xe = ["id"], Ye = { class: "messag
|
|
|
117
117
|
*/
|
|
118
118
|
messageMenuActions: {
|
|
119
119
|
type: Array,
|
|
120
|
-
default: () =>
|
|
120
|
+
default: () => We()
|
|
121
121
|
}
|
|
122
122
|
},
|
|
123
123
|
emits: [
|
|
@@ -132,99 +132,97 @@ const Qe = { class: "message-feed-wrapper" }, Xe = ["id"], Ye = { class: "messag
|
|
|
132
132
|
"smsInvite",
|
|
133
133
|
"delimiterRead"
|
|
134
134
|
],
|
|
135
|
-
setup(e, { emit:
|
|
136
|
-
const a = e, k =
|
|
137
|
-
isShowButton:
|
|
138
|
-
isKeyboardPlace:
|
|
139
|
-
checkButtonVisibility:
|
|
140
|
-
} =
|
|
141
|
-
feedRef:
|
|
135
|
+
setup(e, { emit: E }) {
|
|
136
|
+
const a = e, k = h(), m = h(), I = h(), {
|
|
137
|
+
isShowButton: N,
|
|
138
|
+
isKeyboardPlace: V,
|
|
139
|
+
checkButtonVisibility: $
|
|
140
|
+
} = xe({
|
|
141
|
+
feedRef: m,
|
|
142
142
|
keyboardRef: I
|
|
143
|
-
}), { componentsMap:
|
|
144
|
-
|
|
143
|
+
}), { componentsMap: q } = Oe(), P = r(() => a.reactionsEnabled), z = r(() => a.reactionsMode), A = r(() => a.currentUserId), B = r(() => a.reactionUserNames);
|
|
144
|
+
v("currentUserId", A), v("reactionUserNames", B), v(
|
|
145
145
|
"messageMenuActions",
|
|
146
|
-
|
|
146
|
+
r(() => a.messageMenuActions)
|
|
147
147
|
);
|
|
148
|
-
const { groupedObjects:
|
|
149
|
-
objects:
|
|
150
|
-
}), y = K("chatAppId"),
|
|
151
|
-
if (
|
|
152
|
-
return t(
|
|
148
|
+
const { groupedObjects: W } = Le({
|
|
149
|
+
objects: r(() => a.objects)
|
|
150
|
+
}), y = K("chatAppId"), C = K("selectedChat", void 0), F = r(() => {
|
|
151
|
+
if (C)
|
|
152
|
+
return t(C);
|
|
153
153
|
});
|
|
154
|
-
function
|
|
154
|
+
function G(s) {
|
|
155
155
|
return s.timestamp;
|
|
156
156
|
}
|
|
157
|
-
function
|
|
157
|
+
function H(s) {
|
|
158
158
|
var f;
|
|
159
159
|
const n = s;
|
|
160
|
-
if (!n.dialogId || !((f =
|
|
160
|
+
if (!n.dialogId || !((f = F.value) != null && f.dialogs))
|
|
161
161
|
return;
|
|
162
|
-
const o =
|
|
162
|
+
const o = F.value.dialogs.find((b) => b.dialogId === n.dialogId);
|
|
163
163
|
return o == null ? void 0 : o.channelId;
|
|
164
164
|
}
|
|
165
|
-
function
|
|
165
|
+
function J(s) {
|
|
166
166
|
return s.type === "message.call" && typeof a.callMessageOnCallback == "function" ? { onCall: a.callMessageOnCallback } : {};
|
|
167
167
|
}
|
|
168
|
-
const
|
|
169
|
-
checkScrollPosition:
|
|
170
|
-
startScrollWatch:
|
|
168
|
+
const d = E, {
|
|
169
|
+
checkScrollPosition: Q,
|
|
170
|
+
startScrollWatch: T,
|
|
171
171
|
stopScrollWatch: D,
|
|
172
|
-
resetAllowFlags:
|
|
173
|
-
} =
|
|
174
|
-
feedRef:
|
|
175
|
-
emit:
|
|
176
|
-
isLoadingMoreRef:
|
|
172
|
+
resetAllowFlags: X
|
|
173
|
+
} = Ee({
|
|
174
|
+
feedRef: m,
|
|
175
|
+
emit: d,
|
|
176
|
+
isLoadingMoreRef: r(() => a.isLoadingMore)
|
|
177
177
|
}), {
|
|
178
178
|
getMessage: p,
|
|
179
|
-
messageAction:
|
|
180
|
-
handleClickReplied:
|
|
181
|
-
feedObjectDoubleClick:
|
|
182
|
-
handleResetReply:
|
|
183
|
-
handleResetEdit:
|
|
184
|
-
} =
|
|
179
|
+
messageAction: Y,
|
|
180
|
+
handleClickReplied: Z,
|
|
181
|
+
feedObjectDoubleClick: _,
|
|
182
|
+
handleResetReply: ee,
|
|
183
|
+
handleResetEdit: te
|
|
184
|
+
} = Ve({
|
|
185
185
|
enableDoubleClickReply: a.enableDoubleClickReply,
|
|
186
|
-
emit:
|
|
186
|
+
emit: d
|
|
187
187
|
});
|
|
188
|
-
function
|
|
189
|
-
|
|
188
|
+
function oe(s) {
|
|
189
|
+
d("smsInvite", s);
|
|
190
190
|
}
|
|
191
|
-
function
|
|
192
|
-
|
|
191
|
+
function se(s) {
|
|
192
|
+
d("delimiterRead", s);
|
|
193
193
|
}
|
|
194
194
|
const {
|
|
195
|
-
showKeyboard:
|
|
196
|
-
keyboardAction:
|
|
195
|
+
showKeyboard: ae,
|
|
196
|
+
keyboardAction: ne,
|
|
197
197
|
feedKeyboardAction: ie
|
|
198
|
-
} =
|
|
199
|
-
isKeyboardPlace:
|
|
200
|
-
objects:
|
|
201
|
-
emit:
|
|
198
|
+
} = Ue({
|
|
199
|
+
isKeyboardPlace: V,
|
|
200
|
+
objects: r(() => a.objects),
|
|
201
|
+
emit: d
|
|
202
202
|
}), {
|
|
203
|
-
showStickyDate:
|
|
204
|
-
stickyDateText:
|
|
205
|
-
show:
|
|
206
|
-
} =
|
|
207
|
-
feedRef:
|
|
203
|
+
showStickyDate: re,
|
|
204
|
+
stickyDateText: le,
|
|
205
|
+
show: de
|
|
206
|
+
} = Pe({
|
|
207
|
+
feedRef: m,
|
|
208
208
|
trackingObjects: k
|
|
209
209
|
}), {
|
|
210
|
-
isInitialized:
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
scrollToBottomRef: i(() => a.scrollToBottom)
|
|
219
|
-
}), O = i(() => a.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(Je)}`);
|
|
210
|
+
isInitialized: ce,
|
|
211
|
+
initializeScroll: ue,
|
|
212
|
+
smoothScrollToBottom: me
|
|
213
|
+
} = $e({
|
|
214
|
+
feedRef: m,
|
|
215
|
+
objectsRef: r(() => a.objects),
|
|
216
|
+
scrollToBottomRef: r(() => a.scrollToBottom)
|
|
217
|
+
}), w = r(() => a.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(Ge)}`);
|
|
220
218
|
function j(s = !0) {
|
|
221
|
-
|
|
219
|
+
$(), Q(s), de();
|
|
222
220
|
}
|
|
223
|
-
const
|
|
224
|
-
function
|
|
225
|
-
|
|
221
|
+
const fe = ze(() => j(), 250);
|
|
222
|
+
function ge() {
|
|
223
|
+
d("forceScrollToBottom"), me();
|
|
226
224
|
}
|
|
227
|
-
function
|
|
225
|
+
function ye(s) {
|
|
228
226
|
const n = a.objects;
|
|
229
227
|
if (s.startsWith("mid-")) {
|
|
230
228
|
const o = parseInt(s.slice(4), 10);
|
|
@@ -232,171 +230,163 @@ const Qe = { class: "message-feed-wrapper" }, Xe = ["id"], Ye = { class: "messag
|
|
|
232
230
|
}
|
|
233
231
|
return n.find((o) => o.messageId === s);
|
|
234
232
|
}
|
|
235
|
-
const { restartObserving:
|
|
233
|
+
const { restartObserving: pe } = Ne({
|
|
236
234
|
trackingObjects: k,
|
|
237
235
|
chatAppId: y,
|
|
238
|
-
getMessageById:
|
|
239
|
-
onMessageVisible: (s) =>
|
|
236
|
+
getMessageById: ye,
|
|
237
|
+
onMessageVisible: (s) => d("messageVisible", s)
|
|
240
238
|
});
|
|
241
|
-
return
|
|
239
|
+
return ke(
|
|
242
240
|
() => a.objects,
|
|
243
241
|
() => {
|
|
244
242
|
x(() => {
|
|
245
243
|
requestAnimationFrame(() => {
|
|
246
|
-
|
|
244
|
+
X(), j(!1), k.value = document.querySelectorAll(".tracking-message"), pe();
|
|
247
245
|
});
|
|
248
246
|
});
|
|
249
247
|
},
|
|
250
248
|
{ immediate: !0 }
|
|
251
|
-
),
|
|
252
|
-
targetIdRef:
|
|
249
|
+
), qe({
|
|
250
|
+
targetIdRef: r(() => a.scrollTo),
|
|
253
251
|
feedContainerId: `feed-container-${y}`
|
|
254
|
-
}),
|
|
252
|
+
}), he(() => {
|
|
255
253
|
x(() => {
|
|
256
|
-
a.objects.length > 0 && !
|
|
257
|
-
const s = new ResizeObserver(() => {
|
|
258
|
-
a.scrollToBottom && (me(), setTimeout(() => {
|
|
259
|
-
w();
|
|
260
|
-
}, 200), setTimeout(() => {
|
|
261
|
-
w();
|
|
262
|
-
}, 800));
|
|
263
|
-
});
|
|
264
|
-
l.value && s.observe(l.value);
|
|
254
|
+
a.objects.length > 0 && !ce.value && ue();
|
|
265
255
|
});
|
|
266
|
-
}), (s, n) => (
|
|
267
|
-
e.objects.length > 0 || e.typing ? (
|
|
256
|
+
}), (s, n) => (i(), c("div", He, [
|
|
257
|
+
e.objects.length > 0 || e.typing ? (i(), c("div", {
|
|
268
258
|
key: 0,
|
|
269
259
|
id: "feed-container-" + t(y),
|
|
270
260
|
ref_key: "refFeed",
|
|
271
|
-
ref:
|
|
261
|
+
ref: m,
|
|
272
262
|
class: "message-feed",
|
|
273
|
-
style:
|
|
274
|
-
onScroll: n[0] || (n[0] = (o) => t(
|
|
263
|
+
style: O({ backgroundImage: `url(${w.value})` }),
|
|
264
|
+
onScroll: n[0] || (n[0] = (o) => t(fe)()),
|
|
275
265
|
onMousedown: n[1] || (n[1] = //@ts-ignore
|
|
276
|
-
(...o) => t(
|
|
266
|
+
(...o) => t(T) && t(T)(...o)),
|
|
277
267
|
onMouseup: n[2] || (n[2] = //@ts-ignore
|
|
278
268
|
(...o) => t(D) && t(D)(...o))
|
|
279
269
|
}, [
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
g(
|
|
270
|
+
L(s.$slots, "prepend", {}, void 0, !0),
|
|
271
|
+
ve(M("div", Qe, [
|
|
272
|
+
g(Ke, {
|
|
283
273
|
"is-loading": e.isLoadingMore,
|
|
284
274
|
size: "small",
|
|
285
275
|
position: "top"
|
|
286
276
|
}, null, 8, ["is-loading"])
|
|
287
277
|
], 512), [
|
|
288
|
-
[
|
|
278
|
+
[Me, e.isLoadingMore]
|
|
289
279
|
]),
|
|
290
280
|
g(S, null, {
|
|
291
281
|
default: R(() => [
|
|
292
|
-
t(
|
|
282
|
+
t(re) && !e.isLoadingMore ? (i(), u(Ce, {
|
|
293
283
|
key: 0,
|
|
294
284
|
class: "message-feed__sticky-date",
|
|
295
|
-
text: t(
|
|
296
|
-
}, null, 8, ["text"])) :
|
|
285
|
+
text: t(le)
|
|
286
|
+
}, null, 8, ["text"])) : l("", !0)
|
|
297
287
|
]),
|
|
298
288
|
_: 1
|
|
299
289
|
}),
|
|
300
|
-
(
|
|
290
|
+
(i(!0), c(Se, null, Re(t(W), (o, f) => (i(), c("div", {
|
|
301
291
|
id: "msg-" + (o.messageId ?? "mid-" + f),
|
|
302
292
|
key: o.messageId ?? "mid-" + f,
|
|
303
|
-
"data-timestamp":
|
|
293
|
+
"data-timestamp": G(o),
|
|
304
294
|
class: "tracking-message",
|
|
305
|
-
onDblclick: (b) => t(
|
|
295
|
+
onDblclick: (b) => t(_)(b, o)
|
|
306
296
|
}, [
|
|
307
|
-
(
|
|
297
|
+
(i(), u(Ie(t(q)(o)), Ae({
|
|
308
298
|
key: o.messageId ?? "mid-" + f,
|
|
309
299
|
class: "message-feed__message",
|
|
310
300
|
message: o,
|
|
311
301
|
"apply-style": e.applyStyle,
|
|
312
302
|
"is-first-in-series": o.isFirstInSeries,
|
|
313
|
-
"reactions-enabled":
|
|
314
|
-
"reactions-mode":
|
|
303
|
+
"reactions-enabled": P.value,
|
|
304
|
+
"reactions-mode": z.value,
|
|
315
305
|
"current-user-id": A.value,
|
|
316
306
|
"reaction-user-names": B.value,
|
|
317
307
|
"subtext-tooltip-data": e.subtextTooltipData,
|
|
318
|
-
channel:
|
|
319
|
-
}, { ref_for: !0 },
|
|
320
|
-
onAction: t(
|
|
321
|
-
onReply: t(
|
|
322
|
-
onSmsInvite: (b) =>
|
|
323
|
-
onRead:
|
|
308
|
+
channel: H(o)
|
|
309
|
+
}, { ref_for: !0 }, J(o), {
|
|
310
|
+
onAction: t(Y),
|
|
311
|
+
onReply: t(Z),
|
|
312
|
+
onSmsInvite: (b) => oe(o),
|
|
313
|
+
onRead: se
|
|
324
314
|
}), null, 16, ["message", "apply-style", "is-first-in-series", "reactions-enabled", "reactions-mode", "current-user-id", "reaction-user-names", "subtext-tooltip-data", "channel", "onAction", "onReply", "onSmsInvite"]))
|
|
325
|
-
], 40,
|
|
326
|
-
e.typing ? (
|
|
315
|
+
], 40, Xe))), 128)),
|
|
316
|
+
e.typing ? (i(), u(je, {
|
|
327
317
|
key: 0,
|
|
328
318
|
message: {
|
|
329
319
|
subText: e.typing.title,
|
|
330
320
|
avatar: e.typing.avatar
|
|
331
321
|
}
|
|
332
|
-
}, null, 8, ["message"])) :
|
|
322
|
+
}, null, 8, ["message"])) : l("", !0),
|
|
333
323
|
g(S, null, {
|
|
334
324
|
default: R(() => [
|
|
335
|
-
t(
|
|
325
|
+
t(ae) ? (i(), u(De, {
|
|
336
326
|
key: 0,
|
|
337
327
|
ref_key: "keyboardRef",
|
|
338
328
|
ref: I,
|
|
339
329
|
class: "message-feed__keyboard",
|
|
340
330
|
keyboard: e.objects[e.objects.length - 1].keyboard,
|
|
341
331
|
align: e.keyboardAlign,
|
|
342
|
-
onAction: t(
|
|
343
|
-
}, null, 8, ["keyboard", "align", "onAction"])) :
|
|
332
|
+
onAction: t(ne)
|
|
333
|
+
}, null, 8, ["keyboard", "align", "onAction"])) : l("", !0)
|
|
344
334
|
]),
|
|
345
335
|
_: 1
|
|
346
336
|
}),
|
|
347
|
-
e.feedKeyboards && e.feedKeyboards.length > 0 ? (
|
|
337
|
+
e.feedKeyboards && e.feedKeyboards.length > 0 ? (i(), u(we, {
|
|
348
338
|
key: 1,
|
|
349
339
|
buttons: e.feedKeyboards,
|
|
350
340
|
align: e.feedKeyboardAlign,
|
|
351
341
|
onAction: t(ie)
|
|
352
|
-
}, null, 8, ["buttons", "align", "onAction"])) :
|
|
353
|
-
], 44,
|
|
342
|
+
}, null, 8, ["buttons", "align", "onAction"])) : l("", !0)
|
|
343
|
+
], 44, Je)) : (i(), c("div", {
|
|
354
344
|
key: 1,
|
|
355
345
|
ref_key: "refFeed",
|
|
356
|
-
ref:
|
|
346
|
+
ref: m,
|
|
357
347
|
class: "message-feed",
|
|
358
|
-
style:
|
|
348
|
+
style: O({ backgroundImage: `url(${w.value})` })
|
|
359
349
|
}, [
|
|
360
|
-
M("div",
|
|
361
|
-
|
|
350
|
+
M("div", Ye, [
|
|
351
|
+
L(s.$slots, "empty-feed", {}, void 0, !0)
|
|
362
352
|
])
|
|
363
353
|
], 4)),
|
|
364
354
|
g(S, null, {
|
|
365
355
|
default: R(() => [
|
|
366
|
-
t(
|
|
356
|
+
t(N) ? (i(), c("button", {
|
|
367
357
|
key: 0,
|
|
368
358
|
class: "message-feed__button-down",
|
|
369
|
-
onClick:
|
|
359
|
+
onClick: ge
|
|
370
360
|
}, [
|
|
371
|
-
e.buttonParams ? (
|
|
361
|
+
e.buttonParams ? (i(), c("div", Ze, Be(e.buttonParams.unreadAmount), 1)) : l("", !0),
|
|
372
362
|
n[3] || (n[3] = M("span", { class: "pi pi-angle-down message-feed__icon-down" }, null, -1))
|
|
373
|
-
])) :
|
|
363
|
+
])) : l("", !0)
|
|
374
364
|
]),
|
|
375
365
|
_: 1
|
|
376
366
|
}),
|
|
377
|
-
t(p)().reply ? (
|
|
367
|
+
t(p)().reply ? (i(), u(U, {
|
|
378
368
|
key: 2,
|
|
379
369
|
to: "#chat-input-reply-line-" + t(y)
|
|
380
370
|
}, [
|
|
381
|
-
g(
|
|
371
|
+
g(Fe, {
|
|
382
372
|
class: "chat-input-reply",
|
|
383
373
|
message: t(p)().reply,
|
|
384
|
-
onReset: t(
|
|
374
|
+
onReset: t(ee)
|
|
385
375
|
}, null, 8, ["message", "onReset"])
|
|
386
|
-
], 8, ["to"])) :
|
|
387
|
-
t(p)().edit ? (
|
|
376
|
+
], 8, ["to"])) : l("", !0),
|
|
377
|
+
t(p)().edit ? (i(), u(U, {
|
|
388
378
|
key: 3,
|
|
389
379
|
to: "#chat-input-reply-line-" + t(y)
|
|
390
380
|
}, [
|
|
391
|
-
g(
|
|
381
|
+
g(Te, {
|
|
392
382
|
class: "chat-input-reply",
|
|
393
383
|
message: t(p)().edit,
|
|
394
|
-
onReset: t(
|
|
384
|
+
onReset: t(te)
|
|
395
385
|
}, null, 8, ["message", "onReset"])
|
|
396
|
-
], 8, ["to"])) :
|
|
386
|
+
], 8, ["to"])) : l("", !0)
|
|
397
387
|
]));
|
|
398
388
|
}
|
|
399
389
|
});
|
|
400
390
|
export {
|
|
401
|
-
|
|
391
|
+
vt as default
|
|
402
392
|
};
|
|
@@ -1,63 +1,96 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
function
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}, 1e3));
|
|
12
|
-
});
|
|
1
|
+
import { ref as S, watch as f, nextTick as h, onUnmounted as U } from "vue";
|
|
2
|
+
function q({ feedRef: o, objectsRef: l, scrollToBottomRef: B }) {
|
|
3
|
+
const a = S(!1), i = S(!1);
|
|
4
|
+
let d = !1, u = !1, s = null, e = null;
|
|
5
|
+
function c() {
|
|
6
|
+
if (!i.value) return;
|
|
7
|
+
const t = o.value;
|
|
8
|
+
t && (d = !0, t.style.scrollBehavior = "auto", t.scrollTop = t.scrollHeight, requestAnimationFrame(() => {
|
|
9
|
+
d = !1;
|
|
10
|
+
}));
|
|
13
11
|
}
|
|
14
|
-
function
|
|
15
|
-
const t =
|
|
12
|
+
function g() {
|
|
13
|
+
const t = o.value;
|
|
16
14
|
if (!t) return;
|
|
17
|
-
const n =
|
|
18
|
-
|
|
19
|
-
t.scrollHeight - t.scrollTop - t.clientHeight > 5 && (t.scrollTop = t.scrollHeight);
|
|
20
|
-
}, 200));
|
|
21
|
-
};
|
|
22
|
-
n(), setTimeout(n, 300);
|
|
15
|
+
const n = t.scrollTop;
|
|
16
|
+
t.style.scrollBehavior = "auto", t.scrollTop = n;
|
|
23
17
|
}
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}, 300), setTimeout(() => {
|
|
28
|
-
o();
|
|
29
|
-
}, 800), l.value = !0);
|
|
30
|
-
}
|
|
31
|
-
function h() {
|
|
32
|
-
s(() => {
|
|
33
|
-
const t = e.value;
|
|
34
|
-
t && (t.style.scrollBehavior = "smooth", t.scrollTop = t.scrollHeight);
|
|
18
|
+
function m() {
|
|
19
|
+
i.value = !0, h(() => {
|
|
20
|
+
c(), requestAnimationFrame(() => c());
|
|
35
21
|
});
|
|
36
22
|
}
|
|
37
|
-
|
|
38
|
-
|
|
23
|
+
function r() {
|
|
24
|
+
i.value && (i.value = !1, g());
|
|
25
|
+
}
|
|
26
|
+
function p(t) {
|
|
27
|
+
e == null || e.disconnect(), e = new ResizeObserver(() => {
|
|
28
|
+
c();
|
|
29
|
+
}), e.observe(t);
|
|
30
|
+
for (const n of t.children)
|
|
31
|
+
n instanceof HTMLElement && e.observe(n);
|
|
32
|
+
}
|
|
33
|
+
function w() {
|
|
34
|
+
u = !0;
|
|
35
|
+
}
|
|
36
|
+
function v() {
|
|
37
|
+
u = !1;
|
|
38
|
+
}
|
|
39
|
+
function L() {
|
|
40
|
+
d || u && r();
|
|
41
|
+
}
|
|
42
|
+
function k(t) {
|
|
43
|
+
t.addEventListener("wheel", r, { passive: !0 }), t.addEventListener("touchstart", r, { passive: !0 }), t.addEventListener("pointerdown", w), t.addEventListener("scroll", L, { passive: !0 }), window.addEventListener("pointerup", v), window.addEventListener("pointercancel", v);
|
|
44
|
+
}
|
|
45
|
+
function E(t) {
|
|
46
|
+
t.removeEventListener("wheel", r), t.removeEventListener("touchstart", r), t.removeEventListener("pointerdown", w), t.removeEventListener("scroll", L), window.removeEventListener("pointerup", v), window.removeEventListener("pointercancel", v), u = !1;
|
|
47
|
+
}
|
|
48
|
+
function F() {
|
|
49
|
+
m();
|
|
50
|
+
}
|
|
51
|
+
function T() {
|
|
52
|
+
!a.value && l.value.length > 0 && (m(), a.value = !0);
|
|
53
|
+
}
|
|
54
|
+
function P() {
|
|
55
|
+
i.value = !0, h(() => {
|
|
56
|
+
const t = o.value;
|
|
57
|
+
t && t.scrollTo({ top: t.scrollHeight, behavior: "smooth" });
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
return f(
|
|
61
|
+
o,
|
|
62
|
+
(t, n) => {
|
|
63
|
+
n && E(n), s = t ?? null, t && (k(t), p(t), i.value && c());
|
|
64
|
+
},
|
|
65
|
+
{ immediate: !0 }
|
|
66
|
+
), f(
|
|
67
|
+
l,
|
|
68
|
+
() => {
|
|
69
|
+
h(() => {
|
|
70
|
+
o.value && p(o.value);
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
), f(
|
|
74
|
+
() => B.value,
|
|
39
75
|
(t) => {
|
|
40
|
-
t && (
|
|
41
|
-
o();
|
|
42
|
-
}, 500), setTimeout(() => {
|
|
43
|
-
o();
|
|
44
|
-
}, 1200));
|
|
76
|
+
t && m();
|
|
45
77
|
},
|
|
46
78
|
{ immediate: !0 }
|
|
47
|
-
),
|
|
48
|
-
() =>
|
|
79
|
+
), f(
|
|
80
|
+
() => l.value.length,
|
|
49
81
|
() => {
|
|
50
|
-
!
|
|
82
|
+
!a.value && l.value.length > 0 && T();
|
|
51
83
|
},
|
|
52
84
|
{ immediate: !0 }
|
|
53
|
-
), {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
85
|
+
), U(() => {
|
|
86
|
+
e == null || e.disconnect(), e = null, s && (E(s), s = null);
|
|
87
|
+
}), {
|
|
88
|
+
isInitialized: a,
|
|
89
|
+
performScrollToBottom: F,
|
|
90
|
+
initializeScroll: T,
|
|
91
|
+
smoothScrollToBottom: P
|
|
59
92
|
};
|
|
60
93
|
}
|
|
61
94
|
export {
|
|
62
|
-
|
|
95
|
+
q as useFeedScroll
|
|
63
96
|
};
|