@dialpad/dialtone-vue 3.73.0 → 3.73.1
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/CHANGELOG.json +1 -1
- package/CHANGELOG.md +8 -0
- package/dist/dialtone-vue.cjs +6 -7
- package/dist/dialtone-vue.js +1567 -2522
- package/dist/emoji.cjs +1 -1
- package/dist/emoji.js +28 -923
- package/dist/emoji_picker-8485a649.js +901 -0
- package/dist/emoji_picker-8f408365.cjs +1 -0
- package/dist/emoji_text_wrapper-124e7b04.js +933 -0
- package/dist/emoji_text_wrapper-4115e6a2.cjs +1 -0
- package/dist/{emoji_text_wrapper-a99aed18.js → index-6b22d90d.js} +7021 -7945
- package/dist/index-746e548f.cjs +25 -0
- package/dist/message_input.cjs +88 -0
- package/dist/message_input.js +12357 -0
- package/dist/popover-0dac4806.js +975 -0
- package/dist/popover-df47d91f.cjs +2 -0
- package/dist/style.css +1 -1
- package/package.json +5 -1
- package/dist/emoji_text_wrapper-d4ace97c.cjs +0 -25
|
@@ -0,0 +1,933 @@
|
|
|
1
|
+
import { _ as l, Q as R, P as A } from "./index-6b22d90d.js";
|
|
2
|
+
import { openBlock as s, createElementBlock as E, normalizeClass as o, normalizeStyle as p, createCommentVNode as q, resolveComponent as C, Fragment as H, renderList as U, createBlock as d, createVNode as g, createElementVNode as b, mergeProps as m, withDirectives as _, vShow as S, h as f } from "vue";
|
|
3
|
+
const K = 3e6, y = {
|
|
4
|
+
circle: "d-bar-circle",
|
|
5
|
+
square: "d-bar2"
|
|
6
|
+
}, M = [
|
|
7
|
+
"body",
|
|
8
|
+
"heading"
|
|
9
|
+
], J = {
|
|
10
|
+
sm: "24px",
|
|
11
|
+
md: "32px",
|
|
12
|
+
lg: "48px"
|
|
13
|
+
}, j = {
|
|
14
|
+
sm: "d-h16",
|
|
15
|
+
md: "d-h24",
|
|
16
|
+
lg: "d-h32"
|
|
17
|
+
}, O = {
|
|
18
|
+
computed: {
|
|
19
|
+
skeletonOffset() {
|
|
20
|
+
const D = this.$refs.skeleton;
|
|
21
|
+
if (!D)
|
|
22
|
+
return this.offset;
|
|
23
|
+
const { top: t, height: u } = D.getBoundingClientRect();
|
|
24
|
+
return t + u / 2;
|
|
25
|
+
},
|
|
26
|
+
skeletonStyle() {
|
|
27
|
+
const D = {};
|
|
28
|
+
if (this.skeletonOffset === -1 || !this.animate && this.animationDuration === -1)
|
|
29
|
+
return D;
|
|
30
|
+
const t = this.skeletonOffset * K / 1e3, u = this.animationDuration === -1 ? 1e3 : this.animationDuration;
|
|
31
|
+
return D.animationDelay = `${t}ms`, D.animationDuration = `${u}ms`, D;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}, V = {
|
|
35
|
+
name: "DtSkeletonShape",
|
|
36
|
+
mixins: [O],
|
|
37
|
+
props: {
|
|
38
|
+
/**
|
|
39
|
+
* Defines the shape of the skeleton, accepts circle or square.
|
|
40
|
+
* @values circle, square
|
|
41
|
+
*/
|
|
42
|
+
shape: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: "circle",
|
|
45
|
+
validator: (D) => Object.keys(y).includes(D)
|
|
46
|
+
},
|
|
47
|
+
/**
|
|
48
|
+
* Size of the shape
|
|
49
|
+
* @values xs, sm, md, lg, xl
|
|
50
|
+
*/
|
|
51
|
+
size: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: "md"
|
|
54
|
+
},
|
|
55
|
+
/**
|
|
56
|
+
* Duration time of the animation (ms), set -1 for an infinite animation.
|
|
57
|
+
*/
|
|
58
|
+
animationDuration: {
|
|
59
|
+
type: Number,
|
|
60
|
+
default: -1
|
|
61
|
+
},
|
|
62
|
+
/**
|
|
63
|
+
* This property has higher priority than "option.animate"
|
|
64
|
+
* @values true, false
|
|
65
|
+
*/
|
|
66
|
+
animate: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
default: !0
|
|
69
|
+
},
|
|
70
|
+
/**
|
|
71
|
+
* RippleDuration controls how long the delay is for the animation of a
|
|
72
|
+
* placeholder 1000 pixels from the top of the page. Each placeholder
|
|
73
|
+
* from the top down will have a delay duration from 0 to this offset.
|
|
74
|
+
* The delay of each placeholder animation is based on how far down the page
|
|
75
|
+
* the placeholder is rendered. This is a linear relationship. The unit
|
|
76
|
+
* is milliseconds.
|
|
77
|
+
*/
|
|
78
|
+
offset: {
|
|
79
|
+
type: Number,
|
|
80
|
+
default: 1
|
|
81
|
+
},
|
|
82
|
+
/**
|
|
83
|
+
* Additional class name for the content.
|
|
84
|
+
*/
|
|
85
|
+
contentClass: {
|
|
86
|
+
type: [String, Object, Array],
|
|
87
|
+
default: ""
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
data() {
|
|
91
|
+
return {
|
|
92
|
+
SKELETON_SHAPES: y
|
|
93
|
+
};
|
|
94
|
+
},
|
|
95
|
+
computed: {
|
|
96
|
+
shapeStyles() {
|
|
97
|
+
const D = J[this.size] || this.size;
|
|
98
|
+
return {
|
|
99
|
+
...this.skeletonStyle,
|
|
100
|
+
"min-width": D,
|
|
101
|
+
"max-width": D,
|
|
102
|
+
"min-height": D,
|
|
103
|
+
"max-height": D
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
function G(D, t, u, F, n, e) {
|
|
109
|
+
return s(), E("div", {
|
|
110
|
+
ref: "skeleton",
|
|
111
|
+
"data-qa": "skeleton-shape",
|
|
112
|
+
class: o([
|
|
113
|
+
"skeleton-placeholder",
|
|
114
|
+
n.SKELETON_SHAPES[u.shape],
|
|
115
|
+
{
|
|
116
|
+
"skeleton-placeholder--animate": u.animate
|
|
117
|
+
},
|
|
118
|
+
u.contentClass
|
|
119
|
+
]),
|
|
120
|
+
style: p(e.shapeStyles)
|
|
121
|
+
}, null, 6);
|
|
122
|
+
}
|
|
123
|
+
const x = /* @__PURE__ */ l(V, [["render", G]]), Z = {
|
|
124
|
+
name: "DtSkeletonText",
|
|
125
|
+
mixins: [O],
|
|
126
|
+
props: {
|
|
127
|
+
/**
|
|
128
|
+
* Skeleton type
|
|
129
|
+
* @values body, heading
|
|
130
|
+
*/
|
|
131
|
+
type: {
|
|
132
|
+
type: String,
|
|
133
|
+
default: "body",
|
|
134
|
+
validator: (D) => M.includes(D)
|
|
135
|
+
},
|
|
136
|
+
/**
|
|
137
|
+
* Heading height
|
|
138
|
+
* @values sm, md, lg
|
|
139
|
+
*/
|
|
140
|
+
headingHeight: {
|
|
141
|
+
type: String,
|
|
142
|
+
default: "md",
|
|
143
|
+
validator: (D) => Object.keys(j).includes(D)
|
|
144
|
+
},
|
|
145
|
+
/**
|
|
146
|
+
* Width of the skeleton
|
|
147
|
+
*/
|
|
148
|
+
width: {
|
|
149
|
+
type: String,
|
|
150
|
+
default: "100%"
|
|
151
|
+
},
|
|
152
|
+
/**
|
|
153
|
+
* Duration time of the animation (ms), set -1 for an infinite animation.
|
|
154
|
+
*/
|
|
155
|
+
animationDuration: {
|
|
156
|
+
type: Number,
|
|
157
|
+
default: -1
|
|
158
|
+
},
|
|
159
|
+
/**
|
|
160
|
+
* This property has higher priority than "option.animate"
|
|
161
|
+
* @values true, false
|
|
162
|
+
*/
|
|
163
|
+
animate: {
|
|
164
|
+
type: Boolean,
|
|
165
|
+
default: !1
|
|
166
|
+
},
|
|
167
|
+
/**
|
|
168
|
+
* RippleDuration controls how long the delay is for the animation of a
|
|
169
|
+
* placeholder 1000 pixels from the top of the page. Each placeholder
|
|
170
|
+
* from the top down will have a delay duration from 0 to this offset.
|
|
171
|
+
* The delay of each placeholder animation is based on how far down the page
|
|
172
|
+
* the placeholder is rendered. This is a linear relationship. The unit
|
|
173
|
+
* is milliseconds.
|
|
174
|
+
*/
|
|
175
|
+
offset: {
|
|
176
|
+
type: Number,
|
|
177
|
+
default: 1
|
|
178
|
+
},
|
|
179
|
+
/**
|
|
180
|
+
* Additional class name for the content.
|
|
181
|
+
*/
|
|
182
|
+
contentClass: {
|
|
183
|
+
type: String,
|
|
184
|
+
default: ""
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
data() {
|
|
188
|
+
return {
|
|
189
|
+
SKELETON_HEADING_HEIGHTS: j
|
|
190
|
+
};
|
|
191
|
+
}
|
|
192
|
+
};
|
|
193
|
+
function Q(D, t, u, F, n, e) {
|
|
194
|
+
return u.type === "body" ? (s(), E("div", {
|
|
195
|
+
key: 0,
|
|
196
|
+
ref: "skeleton",
|
|
197
|
+
"data-qa": "skeleton-text-body",
|
|
198
|
+
class: o([
|
|
199
|
+
"d-h8",
|
|
200
|
+
"d-bar2",
|
|
201
|
+
"skeleton-placeholder",
|
|
202
|
+
{
|
|
203
|
+
"skeleton-placeholder--animate": u.animate
|
|
204
|
+
},
|
|
205
|
+
u.contentClass
|
|
206
|
+
]),
|
|
207
|
+
style: p({
|
|
208
|
+
width: u.width,
|
|
209
|
+
...D.skeletonStyle
|
|
210
|
+
})
|
|
211
|
+
}, null, 6)) : u.type === "heading" ? (s(), E("div", {
|
|
212
|
+
key: 1,
|
|
213
|
+
ref: "skeleton",
|
|
214
|
+
"data-qa": "skeleton-text-heading",
|
|
215
|
+
class: o([
|
|
216
|
+
n.SKELETON_HEADING_HEIGHTS[u.headingHeight],
|
|
217
|
+
"d-bar2",
|
|
218
|
+
"skeleton-placeholder",
|
|
219
|
+
{
|
|
220
|
+
"skeleton-placeholder--animate": u.animate
|
|
221
|
+
},
|
|
222
|
+
u.contentClass
|
|
223
|
+
]),
|
|
224
|
+
style: p({
|
|
225
|
+
width: u.width,
|
|
226
|
+
...D.skeletonStyle
|
|
227
|
+
})
|
|
228
|
+
}, null, 6)) : q("", !0);
|
|
229
|
+
}
|
|
230
|
+
const w = /* @__PURE__ */ l(Z, [["render", Q]]), h = (D) => D !== "" && !Number.isNaN(Number(D)), X = {
|
|
231
|
+
name: "DtSkeletonParagraph",
|
|
232
|
+
components: {
|
|
233
|
+
DtSkeletonText: w
|
|
234
|
+
},
|
|
235
|
+
props: {
|
|
236
|
+
/**
|
|
237
|
+
* Quantity of rows to display
|
|
238
|
+
*/
|
|
239
|
+
rows: {
|
|
240
|
+
type: [Number, String],
|
|
241
|
+
default: 3,
|
|
242
|
+
validator: h
|
|
243
|
+
},
|
|
244
|
+
/**
|
|
245
|
+
* This property has higher priority than "option.animate"
|
|
246
|
+
* @values true, false
|
|
247
|
+
*/
|
|
248
|
+
animate: {
|
|
249
|
+
type: Boolean,
|
|
250
|
+
default: !0
|
|
251
|
+
},
|
|
252
|
+
/**
|
|
253
|
+
* Controls the min width of paragraphs
|
|
254
|
+
*/
|
|
255
|
+
minWidth: {
|
|
256
|
+
type: [Number, String],
|
|
257
|
+
default: 30,
|
|
258
|
+
validator: h
|
|
259
|
+
},
|
|
260
|
+
/**
|
|
261
|
+
* Controls the max width of paragraphs
|
|
262
|
+
*/
|
|
263
|
+
maxWidth: {
|
|
264
|
+
type: [Number, String],
|
|
265
|
+
default: 100,
|
|
266
|
+
validator: h
|
|
267
|
+
},
|
|
268
|
+
/**
|
|
269
|
+
* Controls the width of paragraphs
|
|
270
|
+
*/
|
|
271
|
+
width: {
|
|
272
|
+
type: [String, Array],
|
|
273
|
+
default: null
|
|
274
|
+
},
|
|
275
|
+
/**
|
|
276
|
+
* If true, row widths will be random
|
|
277
|
+
* @values true, false
|
|
278
|
+
*/
|
|
279
|
+
randomWidth: {
|
|
280
|
+
type: Boolean,
|
|
281
|
+
default: !1
|
|
282
|
+
},
|
|
283
|
+
/**
|
|
284
|
+
* RippleDuration controls how long the delay is for the animation of a
|
|
285
|
+
* placeholder 1000 pixels from the top of the page. Each placeholder
|
|
286
|
+
* from the top down will have a delay duration from 0 to this offset.
|
|
287
|
+
* The delay of each placeholder animation is based on how far down the page
|
|
288
|
+
* the placeholder is rendered. This is a linear relationship. The unit
|
|
289
|
+
* is milliseconds.
|
|
290
|
+
*/
|
|
291
|
+
offset: {
|
|
292
|
+
type: Number,
|
|
293
|
+
default: 1
|
|
294
|
+
},
|
|
295
|
+
/**
|
|
296
|
+
* Duration time of the animation (ms), set -1 for an infinite animation.
|
|
297
|
+
*/
|
|
298
|
+
animationDuration: {
|
|
299
|
+
type: Number,
|
|
300
|
+
default: -1
|
|
301
|
+
},
|
|
302
|
+
/**
|
|
303
|
+
* Additional class name for the content.
|
|
304
|
+
*/
|
|
305
|
+
contentClass: {
|
|
306
|
+
type: String,
|
|
307
|
+
default: ""
|
|
308
|
+
},
|
|
309
|
+
/**
|
|
310
|
+
* Additional class name for the row.
|
|
311
|
+
*/
|
|
312
|
+
rowClass: {
|
|
313
|
+
type: String,
|
|
314
|
+
default: ""
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
computed: {
|
|
318
|
+
integerRows() {
|
|
319
|
+
return Number(this.rows);
|
|
320
|
+
}
|
|
321
|
+
},
|
|
322
|
+
methods: {
|
|
323
|
+
randomWidthPercentage() {
|
|
324
|
+
const D = Math.min(this.minWidth, this.maxWidth), t = Math.max(this.minWidth, this.maxWidth);
|
|
325
|
+
return `${Math.round(Math.random() * (t - D)) + D}%`;
|
|
326
|
+
},
|
|
327
|
+
getSizeParagraphRow(D) {
|
|
328
|
+
const t = this.width, u = Array.isArray(t), F = t == null ? void 0 : t[D - 1], n = D === this.rows;
|
|
329
|
+
return this.randomWidth ? this.randomWidthPercentage() : t && !u ? t : t && u && F ? F : n ? "38%" : "100%";
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
};
|
|
333
|
+
function Y(D, t, u, F, n, e) {
|
|
334
|
+
const a = C("dt-skeleton-text");
|
|
335
|
+
return s(), E("div", {
|
|
336
|
+
class: o([
|
|
337
|
+
"d-w100p",
|
|
338
|
+
u.contentClass
|
|
339
|
+
]),
|
|
340
|
+
contentClass: "",
|
|
341
|
+
"data-qa": "skeleton-paragraph"
|
|
342
|
+
}, [
|
|
343
|
+
(s(!0), E(H, null, U(e.integerRows, (i) => (s(), d(a, {
|
|
344
|
+
key: i,
|
|
345
|
+
"data-qa": "skeleton-paragraph-row",
|
|
346
|
+
class: o([
|
|
347
|
+
{
|
|
348
|
+
"d-mb12": i !== e.integerRows
|
|
349
|
+
}
|
|
350
|
+
]),
|
|
351
|
+
"content-class": u.rowClass,
|
|
352
|
+
animate: u.animate,
|
|
353
|
+
offset: u.offset,
|
|
354
|
+
"animation-duration": u.animationDuration,
|
|
355
|
+
width: e.getSizeParagraphRow(i)
|
|
356
|
+
}, null, 8, ["class", "content-class", "animate", "offset", "animation-duration", "width"]))), 128))
|
|
357
|
+
], 2);
|
|
358
|
+
}
|
|
359
|
+
const L = /* @__PURE__ */ l(X, [["render", Y]]), $ = {
|
|
360
|
+
name: "DtSkeletonListItem",
|
|
361
|
+
components: {
|
|
362
|
+
DtSkeletonShape: x,
|
|
363
|
+
DtSkeletonParagraph: L
|
|
364
|
+
},
|
|
365
|
+
props: {
|
|
366
|
+
/**
|
|
367
|
+
* Defines the shape of the skeleton, accepts circle or square.
|
|
368
|
+
* @values circle, square
|
|
369
|
+
*/
|
|
370
|
+
shape: {
|
|
371
|
+
type: String,
|
|
372
|
+
default: "circle",
|
|
373
|
+
validator: (D) => Object.keys(y).includes(D)
|
|
374
|
+
},
|
|
375
|
+
/**
|
|
376
|
+
* Size of the shape
|
|
377
|
+
* @values xs, sm, md, lg, xl
|
|
378
|
+
*/
|
|
379
|
+
shapeSize: {
|
|
380
|
+
type: String,
|
|
381
|
+
default: "md"
|
|
382
|
+
},
|
|
383
|
+
/**
|
|
384
|
+
* Object containing quantity of paragraphs to display
|
|
385
|
+
* and a randomWidth boolean.
|
|
386
|
+
*/
|
|
387
|
+
paragraphs: {
|
|
388
|
+
type: Object,
|
|
389
|
+
default: () => ({ rows: 3, randomWidth: !0 })
|
|
390
|
+
},
|
|
391
|
+
/**
|
|
392
|
+
* Duration time of the animation (ms), set -1 for an infinite animation.
|
|
393
|
+
*/
|
|
394
|
+
animationDuration: {
|
|
395
|
+
type: Number,
|
|
396
|
+
default: -1
|
|
397
|
+
},
|
|
398
|
+
/**
|
|
399
|
+
* This property has higher priority than "option.animate"
|
|
400
|
+
* @values true, false
|
|
401
|
+
*/
|
|
402
|
+
animate: {
|
|
403
|
+
type: Boolean,
|
|
404
|
+
default: !0
|
|
405
|
+
},
|
|
406
|
+
/**
|
|
407
|
+
* RippleDuration controls how long the delay is for the animation of a
|
|
408
|
+
* placeholder 1000 pixels from the top of the page. Each placeholder
|
|
409
|
+
* from the top down will have a delay duration from 0 to this offset.
|
|
410
|
+
* The delay of each placeholder animation is based on how far down the page
|
|
411
|
+
* the placeholder is rendered. This is a linear relationship. The unit
|
|
412
|
+
* is milliseconds.
|
|
413
|
+
*/
|
|
414
|
+
offset: {
|
|
415
|
+
type: Number,
|
|
416
|
+
default: 1
|
|
417
|
+
},
|
|
418
|
+
/**
|
|
419
|
+
* Additional class name for the shape.
|
|
420
|
+
*/
|
|
421
|
+
shapeClass: {
|
|
422
|
+
type: String,
|
|
423
|
+
default: ""
|
|
424
|
+
},
|
|
425
|
+
/**
|
|
426
|
+
* Additional class name for the content.
|
|
427
|
+
*/
|
|
428
|
+
contentClass: {
|
|
429
|
+
type: String,
|
|
430
|
+
default: ""
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
}, DD = { class: "d-d-flex d-fd-column d-w100p" };
|
|
434
|
+
function uD(D, t, u, F, n, e) {
|
|
435
|
+
const a = C("dt-skeleton-shape"), i = C("dt-skeleton-paragraph");
|
|
436
|
+
return s(), E("div", {
|
|
437
|
+
"data-qa": "skeleton-list-item",
|
|
438
|
+
class: o([
|
|
439
|
+
"d-d-flex",
|
|
440
|
+
{
|
|
441
|
+
"d-ai-center": u.paragraphs.rows === 1
|
|
442
|
+
},
|
|
443
|
+
u.contentClass
|
|
444
|
+
])
|
|
445
|
+
}, [
|
|
446
|
+
g(a, {
|
|
447
|
+
class: "d-mr8",
|
|
448
|
+
size: u.shapeSize,
|
|
449
|
+
shape: u.shape,
|
|
450
|
+
"animation-duration": u.animationDuration,
|
|
451
|
+
animate: u.animate,
|
|
452
|
+
offset: u.offset,
|
|
453
|
+
"content-class": u.shapeClass
|
|
454
|
+
}, null, 8, ["size", "shape", "animation-duration", "animate", "offset", "content-class"]),
|
|
455
|
+
b("div", DD, [
|
|
456
|
+
g(i, m(u.paragraphs, {
|
|
457
|
+
"animation-duration": u.animationDuration,
|
|
458
|
+
animate: u.animate,
|
|
459
|
+
offset: u.offset
|
|
460
|
+
}), null, 16, ["animation-duration", "animate", "offset"])
|
|
461
|
+
])
|
|
462
|
+
], 2);
|
|
463
|
+
}
|
|
464
|
+
const tD = /* @__PURE__ */ l($, [["render", uD]]);
|
|
465
|
+
const eD = {
|
|
466
|
+
name: "DtSkeleton",
|
|
467
|
+
components: {
|
|
468
|
+
DtSkeletonText: w,
|
|
469
|
+
DtSkeletonShape: x,
|
|
470
|
+
DtSkeletonListItem: tD,
|
|
471
|
+
DtSkeletonParagraph: L
|
|
472
|
+
},
|
|
473
|
+
props: {
|
|
474
|
+
/**
|
|
475
|
+
* Set this prop to have the skeleton render as multiple lines of text.
|
|
476
|
+
* Set only one option prop at a time.
|
|
477
|
+
*/
|
|
478
|
+
paragraphOption: {
|
|
479
|
+
type: [Object, Boolean],
|
|
480
|
+
default: null
|
|
481
|
+
},
|
|
482
|
+
/**
|
|
483
|
+
* Set this prop to have the skeleton render as a list item with an avatar and wrapping text.
|
|
484
|
+
* Set only one option prop at a time.
|
|
485
|
+
*/
|
|
486
|
+
listItemOption: {
|
|
487
|
+
type: [Object, Boolean],
|
|
488
|
+
default: null
|
|
489
|
+
},
|
|
490
|
+
/**
|
|
491
|
+
* Set this prop to have the skeleton render as a single line of text.
|
|
492
|
+
* Set only one option prop at a time.
|
|
493
|
+
*/
|
|
494
|
+
textOption: {
|
|
495
|
+
type: Object,
|
|
496
|
+
default: null
|
|
497
|
+
},
|
|
498
|
+
/**
|
|
499
|
+
* Set this prop to have the skeleton render as a specific shape.
|
|
500
|
+
* Set only one option prop at a time.
|
|
501
|
+
*/
|
|
502
|
+
shapeOption: {
|
|
503
|
+
type: [Object, Boolean],
|
|
504
|
+
default: null
|
|
505
|
+
},
|
|
506
|
+
/**
|
|
507
|
+
* Duration time of the animation (ms), set -1 for an infinite animation.
|
|
508
|
+
*/
|
|
509
|
+
animationDuration: {
|
|
510
|
+
type: Number,
|
|
511
|
+
default: -1
|
|
512
|
+
},
|
|
513
|
+
/**
|
|
514
|
+
* Descriptive label for the content.
|
|
515
|
+
*/
|
|
516
|
+
ariaLabel: {
|
|
517
|
+
type: String,
|
|
518
|
+
default: ""
|
|
519
|
+
},
|
|
520
|
+
/**
|
|
521
|
+
* This property has higher priority than "option.animate"
|
|
522
|
+
* @values true, false
|
|
523
|
+
*/
|
|
524
|
+
animate: {
|
|
525
|
+
type: Boolean,
|
|
526
|
+
default: !0
|
|
527
|
+
},
|
|
528
|
+
/**
|
|
529
|
+
* RippleDuration controls how long the delay is for the animation of a
|
|
530
|
+
* placeholder 1000 pixels from the top of the page. Each placeholder
|
|
531
|
+
* from the top down will have a delay duration from 0 to this offset.
|
|
532
|
+
* The delay of each placeholder animation is based on how far down the page
|
|
533
|
+
* the placeholder is rendered. This is a linear relationship. The unit
|
|
534
|
+
* is milliseconds.
|
|
535
|
+
*/
|
|
536
|
+
offset: {
|
|
537
|
+
type: Number,
|
|
538
|
+
default: 1
|
|
539
|
+
}
|
|
540
|
+
},
|
|
541
|
+
computed: {
|
|
542
|
+
validationOptions() {
|
|
543
|
+
return {
|
|
544
|
+
paragraphOption: this.paragraphOption,
|
|
545
|
+
listItemOption: this.listItemOption,
|
|
546
|
+
textOption: this.textOption,
|
|
547
|
+
shapeOption: this.shapeOption
|
|
548
|
+
};
|
|
549
|
+
}
|
|
550
|
+
},
|
|
551
|
+
watch: {
|
|
552
|
+
$props: {
|
|
553
|
+
immediate: !0,
|
|
554
|
+
handler: "validator"
|
|
555
|
+
}
|
|
556
|
+
},
|
|
557
|
+
methods: {
|
|
558
|
+
validator() {
|
|
559
|
+
const D = Object.entries(this.validationOptions).filter(([t, u]) => u);
|
|
560
|
+
if (D.length >= 2) {
|
|
561
|
+
const t = `Use only one of ${D.map(([u]) => u).join(" | ")} options at the same time`;
|
|
562
|
+
console.error(t);
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
}, FD = ["aria-label"];
|
|
567
|
+
function nD(D, t, u, F, n, e) {
|
|
568
|
+
const a = C("dt-skeleton-list-item"), i = C("dt-skeleton-shape"), r = C("dt-skeleton-paragraph"), B = C("dt-skeleton-text");
|
|
569
|
+
return s(), E("div", {
|
|
570
|
+
"aria-busy": "true",
|
|
571
|
+
role: "status",
|
|
572
|
+
"aria-label": u.ariaLabel
|
|
573
|
+
}, [
|
|
574
|
+
u.listItemOption ? (s(), d(a, m({ key: 0 }, u.listItemOption === !0 ? {} : u.listItemOption, {
|
|
575
|
+
"animation-duration": u.animationDuration,
|
|
576
|
+
animate: u.animate,
|
|
577
|
+
offset: u.offset
|
|
578
|
+
}), null, 16, ["animation-duration", "animate", "offset"])) : u.shapeOption ? (s(), d(i, m({ key: 1 }, u.shapeOption === !0 ? {} : u.shapeOption, {
|
|
579
|
+
"animation-duration": u.animationDuration,
|
|
580
|
+
animate: u.animate,
|
|
581
|
+
offset: u.offset
|
|
582
|
+
}), null, 16, ["animation-duration", "animate", "offset"])) : u.paragraphOption ? (s(), d(r, m({ key: 2 }, u.paragraphOption === !0 ? {} : u.paragraphOption, {
|
|
583
|
+
"animation-duration": u.animationDuration,
|
|
584
|
+
animate: u.animate,
|
|
585
|
+
offset: u.offset
|
|
586
|
+
}), null, 16, ["animation-duration", "animate", "offset"])) : (s(), d(B, m({ key: 3 }, u.textOption || {}, {
|
|
587
|
+
"animation-duration": u.animationDuration,
|
|
588
|
+
animate: u.animate,
|
|
589
|
+
offset: u.offset
|
|
590
|
+
}), null, 16, ["animation-duration", "animate", "offset"]))
|
|
591
|
+
], 8, FD);
|
|
592
|
+
}
|
|
593
|
+
const aD = /* @__PURE__ */ l(eD, [["render", nD]]), iD = () => /[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED-\u23EF\u23F1\u23F2\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694-\u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4\u26C8\u26CF\u26D1\u26D3\u26E9\u26F0-\u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?|[\u261D\u270C\u270D](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\u270A\u270B](?:\uD83C[\uDFFB-\uDFFF])?|[\u23E9-\u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD\u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]|\u26F9(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\u2764\uFE0F?(?:\u200D(?:\uD83D\uDD25|\uD83E\uDE79))?|\uD83C(?:[\uDC04\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37\uDF21\uDF24-\uDF2C\uDF36\uDF7D\uDF96\uDF97\uDF99-\uDF9B\uDF9E\uDF9F\uDFCD\uDFCE\uDFD4-\uDFDF\uDFF5\uDFF7]\uFE0F?|[\uDF85\uDFC2\uDFC7](?:\uD83C[\uDFFB-\uDFFF])?|[\uDFC3\uDFC4\uDFCA](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDFCB\uDFCC](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDCCF\uDD8E\uDD91-\uDD9A\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF84\uDF86-\uDF93\uDFA0-\uDFC1\uDFC5\uDFC6\uDFC8\uDFC9\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF8-\uDFFF]|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|\uDFF3\uFE0F?(?:\u200D(?:\u26A7\uFE0F?|\uD83C\uDF08))?|\uDFF4(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDC73\uDB40\uDC63\uDB40\uDC74|\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F)?)|\uD83D(?:[\uDC08\uDC26](?:\u200D\u2B1B)?|[\uDC3F\uDCFD\uDD49\uDD4A\uDD6F\uDD70\uDD73\uDD76-\uDD79\uDD87\uDD8A-\uDD8D\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA\uDECB\uDECD-\uDECF\uDEE0-\uDEE5\uDEE9\uDEF0\uDEF3]\uFE0F?|[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDC8F\uDC91\uDCAA\uDD7A\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC6E\uDC70\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD74\uDD90](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\uDC00-\uDC07\uDC09-\uDC14\uDC16-\uDC25\uDC27-\uDC3A\uDC3C-\uDC3E\uDC40\uDC44\uDC45\uDC51-\uDC65\uDC6A\uDC79-\uDC7B\uDC7D-\uDC80\uDC84\uDC88-\uDC8E\uDC90\uDC92-\uDCA9\uDCAB-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDDA4\uDDFB-\uDE2D\uDE2F-\uDE34\uDE37-\uDE44\uDE48-\uDE4A\uDE80-\uDEA2\uDEA4-\uDEB3\uDEB7-\uDEBF\uDEC1-\uDEC5\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uDC15(?:\u200D\uD83E\uDDBA)?|\uDC3B(?:\u200D\u2744\uFE0F?)?|\uDC41\uFE0F?(?:\u200D\uD83D\uDDE8\uFE0F?)?|\uDC68(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE])))?))?|\uDC69(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?[\uDC68\uDC69]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFE])))?))?|\uDC6F(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDD75(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDE2E(?:\u200D\uD83D\uDCA8)?|\uDE35(?:\u200D\uD83D\uDCAB)?|\uDE36(?:\u200D\uD83C\uDF2B\uFE0F?)?)|\uD83E(?:[\uDD0C\uDD0F\uDD18-\uDD1F\uDD30-\uDD34\uDD36\uDD77\uDDB5\uDDB6\uDDBB\uDDD2\uDDD3\uDDD5\uDEC3-\uDEC5\uDEF0\uDEF2-\uDEF8](?:\uD83C[\uDFFB-\uDFFF])?|[\uDD26\uDD35\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD-\uDDCF\uDDD4\uDDD6-\uDDDD](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDDDE\uDDDF](?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD0D\uDD0E\uDD10-\uDD17\uDD20-\uDD25\uDD27-\uDD2F\uDD3A\uDD3F-\uDD45\uDD47-\uDD76\uDD78-\uDDB4\uDDB7\uDDBA\uDDBC-\uDDCC\uDDD0\uDDE0-\uDDFF\uDE70-\uDE7C\uDE80-\uDE88\uDE90-\uDEBD\uDEBF-\uDEC2\uDECE-\uDEDB\uDEE0-\uDEE8]|\uDD3C(?:\u200D[\u2640\u2642]\uFE0F?|\uD83C[\uDFFB-\uDFFF])?|\uDDD1(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFC-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFD-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFD\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFE]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?))?|\uDEF1(?:\uD83C(?:\uDFFB(?:\u200D\uD83E\uDEF2\uD83C[\uDFFC-\uDFFF])?|\uDFFC(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFD-\uDFFF])?|\uDFFD(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])?|\uDFFE(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFD\uDFFF])?|\uDFFF(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFE])?))?)/g, sD = "6.6", v = "https://cdn.jsdelivr.net/joypixels/assets/" + sD + "/png/unicode/32/";
|
|
594
|
+
let T = null, z = v, I = ".png", N = v, P = ".png";
|
|
595
|
+
const c = R;
|
|
596
|
+
function oD() {
|
|
597
|
+
return c;
|
|
598
|
+
}
|
|
599
|
+
function gD(D, t = ".png") {
|
|
600
|
+
D.endsWith("/") || (D = D + "/"), z = D, I = t;
|
|
601
|
+
}
|
|
602
|
+
function yD(D, t = ".svg") {
|
|
603
|
+
D.endsWith("/") || (D = D + "/"), N = D, P = t;
|
|
604
|
+
}
|
|
605
|
+
function _D(D) {
|
|
606
|
+
T = D;
|
|
607
|
+
}
|
|
608
|
+
function SD(D) {
|
|
609
|
+
CD(D);
|
|
610
|
+
}
|
|
611
|
+
function CD(D) {
|
|
612
|
+
const t = ["extension", "custom"], u = [
|
|
613
|
+
"name",
|
|
614
|
+
"category",
|
|
615
|
+
"shortname",
|
|
616
|
+
"extension",
|
|
617
|
+
"custom"
|
|
618
|
+
], F = (n, e, a) => {
|
|
619
|
+
if (n[e] === void 0) {
|
|
620
|
+
if (!t.includes(e))
|
|
621
|
+
return;
|
|
622
|
+
n[e] = a;
|
|
623
|
+
} else
|
|
624
|
+
Array.isArray(n[e]) ? n[e] = n[e].concat(a) : n[e] = a;
|
|
625
|
+
};
|
|
626
|
+
Object.entries(D).forEach((n) => {
|
|
627
|
+
const [e, a] = n;
|
|
628
|
+
if (e in c) {
|
|
629
|
+
const i = c[e];
|
|
630
|
+
for (const r in a) {
|
|
631
|
+
const B = a[r];
|
|
632
|
+
F(i, r, B);
|
|
633
|
+
}
|
|
634
|
+
} else
|
|
635
|
+
(() => u.every((r) => a[r] !== void 0))() ? c[e] = a : console.error(
|
|
636
|
+
"The following custom emoji doesn't contain the required properties:",
|
|
637
|
+
a
|
|
638
|
+
);
|
|
639
|
+
});
|
|
640
|
+
}
|
|
641
|
+
function W(D) {
|
|
642
|
+
function t(F, n) {
|
|
643
|
+
if (!(!F || typeof F != "object")) {
|
|
644
|
+
if ("shortname" in F && (F.shortname === D || F.shortname_alternates.includes(D)))
|
|
645
|
+
return F.key = n, u = F, !0;
|
|
646
|
+
Object.keys(F).some(function(e) {
|
|
647
|
+
return t(F[e], e);
|
|
648
|
+
});
|
|
649
|
+
}
|
|
650
|
+
}
|
|
651
|
+
let u;
|
|
652
|
+
return t(oD(), null), u;
|
|
653
|
+
}
|
|
654
|
+
function ED(D) {
|
|
655
|
+
let t = "";
|
|
656
|
+
for (const u of D) {
|
|
657
|
+
const F = u.codePointAt(0).toString(16);
|
|
658
|
+
["200d", "fe0f"].includes(F) || (t !== "" && (t = t + "-"), t = t + u.codePointAt(0).toString(16));
|
|
659
|
+
}
|
|
660
|
+
return t;
|
|
661
|
+
}
|
|
662
|
+
function rD(D) {
|
|
663
|
+
const t = D.split("-");
|
|
664
|
+
let u = "";
|
|
665
|
+
return t.forEach((F) => {
|
|
666
|
+
u = u + String.fromCodePoint(parseInt(F, 16));
|
|
667
|
+
}), u;
|
|
668
|
+
}
|
|
669
|
+
function lD(D) {
|
|
670
|
+
if (D.startsWith(":") && D.endsWith(":"))
|
|
671
|
+
return W(D);
|
|
672
|
+
{
|
|
673
|
+
const t = ED(D), u = c[t];
|
|
674
|
+
return u && (u.key = t), u;
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
function dD(D) {
|
|
678
|
+
const t = D.match(/:\w+:/g);
|
|
679
|
+
return mD(t);
|
|
680
|
+
}
|
|
681
|
+
function mD(D) {
|
|
682
|
+
const t = D ? D.filter((u) => W(u)) : [];
|
|
683
|
+
return new Set(t);
|
|
684
|
+
}
|
|
685
|
+
function cD(D) {
|
|
686
|
+
const t = [...D.matchAll(iD())], u = t.length ? t.map((F) => F[0]) : [];
|
|
687
|
+
return new Set(u);
|
|
688
|
+
}
|
|
689
|
+
const BD = {
|
|
690
|
+
name: "DtEmoji",
|
|
691
|
+
components: {
|
|
692
|
+
DtSkeleton: aD
|
|
693
|
+
},
|
|
694
|
+
props: {
|
|
695
|
+
/**
|
|
696
|
+
* Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
|
|
697
|
+
* <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
|
|
698
|
+
* for all supported shortcode/unicode or the docs for setting up custom emojis.
|
|
699
|
+
*/
|
|
700
|
+
code: {
|
|
701
|
+
type: String,
|
|
702
|
+
default: null
|
|
703
|
+
},
|
|
704
|
+
/**
|
|
705
|
+
* The size of the emoji. Can be any of the icon size utility classes from
|
|
706
|
+
* <a class="d-link" href="https://dialpad.design/components/icon.html" target="_blank"> Dialpad Icon Size</a>
|
|
707
|
+
* @values 100, 200, 300, 400, 500, 600, 700, 800
|
|
708
|
+
*/
|
|
709
|
+
size: {
|
|
710
|
+
type: String,
|
|
711
|
+
default: "500",
|
|
712
|
+
validator: (D) => Object.keys(A).includes(D)
|
|
713
|
+
},
|
|
714
|
+
/**
|
|
715
|
+
* Additional class name for the emoji img element.
|
|
716
|
+
* Can accept String, Object, and Array, i.e. has the
|
|
717
|
+
* same API as Vue's built-in handling of the class attribute.
|
|
718
|
+
*/
|
|
719
|
+
imgClass: {
|
|
720
|
+
type: [String, Object, Array],
|
|
721
|
+
default: ""
|
|
722
|
+
},
|
|
723
|
+
/**
|
|
724
|
+
* Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
|
|
725
|
+
* Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
|
|
726
|
+
* be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
|
|
727
|
+
* getEmojiData() function
|
|
728
|
+
*/
|
|
729
|
+
ariaLabel: {
|
|
730
|
+
type: String,
|
|
731
|
+
default: null
|
|
732
|
+
},
|
|
733
|
+
/**
|
|
734
|
+
* Shows a skeleton loader while the emoji asset is loading.
|
|
735
|
+
* @values true, false
|
|
736
|
+
*/
|
|
737
|
+
showSkeleton: {
|
|
738
|
+
type: Boolean,
|
|
739
|
+
default: !0
|
|
740
|
+
}
|
|
741
|
+
},
|
|
742
|
+
data() {
|
|
743
|
+
return {
|
|
744
|
+
emojiData: null,
|
|
745
|
+
imgLoading: !1
|
|
746
|
+
};
|
|
747
|
+
},
|
|
748
|
+
computed: {
|
|
749
|
+
emojiDataValid() {
|
|
750
|
+
return !!this.emojiData;
|
|
751
|
+
},
|
|
752
|
+
emojiSrc() {
|
|
753
|
+
var D;
|
|
754
|
+
return this.emojiDataValid ? (D = this.emojiData) != null && D.custom ? T + this.emojiData.key + this.emojiData.extension : ["100", "200"].includes(this.size) ? z + this.emojiData.key + I : N + this.emojiData.key + P : "invalid";
|
|
755
|
+
},
|
|
756
|
+
emojiAlt() {
|
|
757
|
+
if (this.emojiDataValid)
|
|
758
|
+
return this.emojiData.unicode_output ? rD(this.emojiData.unicode_output) : this.emojiData.name;
|
|
759
|
+
},
|
|
760
|
+
emojiLabel() {
|
|
761
|
+
return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
|
|
762
|
+
},
|
|
763
|
+
emojiSize() {
|
|
764
|
+
return A[this.size];
|
|
765
|
+
}
|
|
766
|
+
},
|
|
767
|
+
watch: {
|
|
768
|
+
code: {
|
|
769
|
+
handler: function() {
|
|
770
|
+
this.getEmojiData();
|
|
771
|
+
},
|
|
772
|
+
immediate: !0
|
|
773
|
+
},
|
|
774
|
+
emojiSrc: {
|
|
775
|
+
handler: async function() {
|
|
776
|
+
this.imgLoading = !0;
|
|
777
|
+
}
|
|
778
|
+
}
|
|
779
|
+
},
|
|
780
|
+
methods: {
|
|
781
|
+
getEmojiData() {
|
|
782
|
+
this.emojiData = lD(this.code);
|
|
783
|
+
},
|
|
784
|
+
imageLoaded() {
|
|
785
|
+
this.imgLoading = !1;
|
|
786
|
+
},
|
|
787
|
+
imageErrored() {
|
|
788
|
+
this.imgLoading = !1;
|
|
789
|
+
}
|
|
790
|
+
}
|
|
791
|
+
}, fD = ["aria-label", "alt", "title", "src"];
|
|
792
|
+
function hD(D, t, u, F, n, e) {
|
|
793
|
+
const a = C("dt-skeleton");
|
|
794
|
+
return s(), E("span", {
|
|
795
|
+
class: o(e.emojiSize)
|
|
796
|
+
}, [
|
|
797
|
+
_(g(a, {
|
|
798
|
+
offset: 0,
|
|
799
|
+
class: o(e.emojiSize),
|
|
800
|
+
"shape-option": { shape: "square", contentClass: e.emojiSize, size: "auto" }
|
|
801
|
+
}, null, 8, ["class", "shape-option"]), [
|
|
802
|
+
[S, n.imgLoading && u.showSkeleton]
|
|
803
|
+
]),
|
|
804
|
+
_(b("img", {
|
|
805
|
+
ref: "emojiImg",
|
|
806
|
+
class: o(["d-icon", e.emojiSize, u.imgClass]),
|
|
807
|
+
"aria-label": e.emojiLabel,
|
|
808
|
+
alt: e.emojiAlt,
|
|
809
|
+
title: e.emojiLabel,
|
|
810
|
+
src: e.emojiSrc,
|
|
811
|
+
onLoad: t[0] || (t[0] = (...i) => e.imageLoaded && e.imageLoaded(...i)),
|
|
812
|
+
onError: t[1] || (t[1] = (...i) => e.imageErrored && e.imageErrored(...i))
|
|
813
|
+
}, null, 42, fD), [
|
|
814
|
+
[S, !n.imgLoading]
|
|
815
|
+
])
|
|
816
|
+
], 2);
|
|
817
|
+
}
|
|
818
|
+
const k = /* @__PURE__ */ l(BD, [["render", hD]]), jD = {
|
|
819
|
+
name: "DtEmojiTextWrapper",
|
|
820
|
+
components: {
|
|
821
|
+
DtEmoji: k
|
|
822
|
+
},
|
|
823
|
+
inheritAttrs: !1,
|
|
824
|
+
props: {
|
|
825
|
+
/**
|
|
826
|
+
* Element type (tag name) to use for the wrapper.
|
|
827
|
+
*/
|
|
828
|
+
elementType: {
|
|
829
|
+
type: String,
|
|
830
|
+
default: "div"
|
|
831
|
+
},
|
|
832
|
+
/**
|
|
833
|
+
* The icon size to render the emojis at: 100 to 800
|
|
834
|
+
*/
|
|
835
|
+
size: {
|
|
836
|
+
type: String,
|
|
837
|
+
default: "500",
|
|
838
|
+
validator: (D) => Object.keys(A).includes(D)
|
|
839
|
+
}
|
|
840
|
+
},
|
|
841
|
+
data() {
|
|
842
|
+
return {
|
|
843
|
+
loadingEmojiJson: !0
|
|
844
|
+
};
|
|
845
|
+
},
|
|
846
|
+
async created() {
|
|
847
|
+
this.loadingEmojiJson = !1;
|
|
848
|
+
},
|
|
849
|
+
methods: {
|
|
850
|
+
/**
|
|
851
|
+
* Replaces the valid codes from the text content with a DtEmoji component.
|
|
852
|
+
* @returns {Array<VNode|string>}
|
|
853
|
+
*/
|
|
854
|
+
replaceDtEmojis(D, t) {
|
|
855
|
+
const u = new RegExp(`(${D.join("|")})`, "g");
|
|
856
|
+
return t.split(u).map((n) => D.includes(n) ? f(k, { ...this.$attrs, class: "d-mx4 d-d-inline-block", size: this.size, code: n }) : n);
|
|
857
|
+
},
|
|
858
|
+
/**
|
|
859
|
+
* Recursively search the Vue virtual DOM to find text
|
|
860
|
+
* @param VNode
|
|
861
|
+
* @returns {VNode|*}
|
|
862
|
+
*/
|
|
863
|
+
searchVNodes(D) {
|
|
864
|
+
var u;
|
|
865
|
+
if (typeof D == "string")
|
|
866
|
+
return this.searchCodes(D);
|
|
867
|
+
if (typeof D.type == "symbol")
|
|
868
|
+
return this.searchCodes(D.children);
|
|
869
|
+
if ((u = D.props) != null && u.innerHTML)
|
|
870
|
+
return this.searchVNodes(D.props.innerHTML);
|
|
871
|
+
const t = Array.isArray(D.children) ? D.children : [D.children];
|
|
872
|
+
return f(D.type, D.props, t.map((F) => this.searchVNodes(F)));
|
|
873
|
+
},
|
|
874
|
+
// TODO: Find a way to crawl vue components
|
|
875
|
+
replaceVueComponentVNodeContent(D) {
|
|
876
|
+
},
|
|
877
|
+
/**
|
|
878
|
+
* Find codes in text.
|
|
879
|
+
* @param textContent string
|
|
880
|
+
* @returns {Array<VNode|string>|string}
|
|
881
|
+
*/
|
|
882
|
+
searchCodes(D) {
|
|
883
|
+
const t = dD(D), u = cD(D), F = [...t, ...u];
|
|
884
|
+
return F.length === 0 ? D : this.replaceDtEmojis(F, D);
|
|
885
|
+
}
|
|
886
|
+
},
|
|
887
|
+
render() {
|
|
888
|
+
const D = this.$slots.default ? this.$slots.default() : [];
|
|
889
|
+
return f(
|
|
890
|
+
this.elementType,
|
|
891
|
+
{
|
|
892
|
+
"data-qa": "emoji-text-wrapper",
|
|
893
|
+
class: this.$attrs.class
|
|
894
|
+
},
|
|
895
|
+
this.loadingEmojiJson ? D : D.map((t) => this.searchVNodes(t))
|
|
896
|
+
);
|
|
897
|
+
}
|
|
898
|
+
};
|
|
899
|
+
export {
|
|
900
|
+
lD as A,
|
|
901
|
+
dD as B,
|
|
902
|
+
mD as C,
|
|
903
|
+
aD as D,
|
|
904
|
+
cD as E,
|
|
905
|
+
K as S,
|
|
906
|
+
jD as _,
|
|
907
|
+
k as a,
|
|
908
|
+
tD as b,
|
|
909
|
+
w as c,
|
|
910
|
+
x as d,
|
|
911
|
+
L as e,
|
|
912
|
+
y as f,
|
|
913
|
+
M as g,
|
|
914
|
+
J as h,
|
|
915
|
+
j as i,
|
|
916
|
+
sD as j,
|
|
917
|
+
v as k,
|
|
918
|
+
T as l,
|
|
919
|
+
z as m,
|
|
920
|
+
I as n,
|
|
921
|
+
N as o,
|
|
922
|
+
P as p,
|
|
923
|
+
c as q,
|
|
924
|
+
oD as r,
|
|
925
|
+
gD as s,
|
|
926
|
+
yD as t,
|
|
927
|
+
_D as u,
|
|
928
|
+
SD as v,
|
|
929
|
+
CD as w,
|
|
930
|
+
W as x,
|
|
931
|
+
ED as y,
|
|
932
|
+
rD as z
|
|
933
|
+
};
|