@nmorph/nmorph-ui-kit 2.2.42 → 2.2.44
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/assets/icons/chevron-up.svg.js +4 -4
- package/dist/assets/icons/download.svg.js +5 -5
- package/dist/assets/icons/open.svg.js +2 -2
- package/dist/assets/icons/search.svg.js +1 -1
- package/dist/assets/icons/smile.svg.js +4 -4
- package/dist/components/basic/nmorph-button/NmorphButton.vue.js +16 -16
- package/dist/components/basic/nmorph-icon/NmorphIcon.css +1 -1
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css +1 -0
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue.js +207 -0
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue3.js +6 -0
- package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.css +1 -0
- package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue.js +371 -0
- package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue3.js +6 -0
- package/dist/components/data/nmorph-file-card/NmorphFileCard.css +1 -0
- package/dist/components/data/nmorph-file-card/NmorphFileCard.vue.js +124 -0
- package/dist/components/data/nmorph-file-card/NmorphFileCard.vue3.js +6 -0
- package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js +164 -150
- package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue.js +8 -8
- package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css +1 -0
- package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue.js +147 -0
- package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue3.js +6 -0
- package/dist/components/form/nmorph-file-upload/NmorphFileUpload.css +1 -1
- package/dist/components/form/nmorph-file-upload/NmorphFileUpload.vue.js +154 -125
- package/dist/components/form/nmorph-file-upload/types.js +9 -9
- package/dist/hooks/use-common-styles.js +73 -22
- package/dist/index.es.js +861 -849
- package/dist/index.umd.js +76 -25
- package/dist/package.json.js +1 -1
- package/dist/src/components/data/index.d.ts +8 -0
- package/dist/src/components/data/nmorph-audio-preview/NmorphAudioPreview.vue.d.ts +38 -0
- package/dist/src/components/data/nmorph-audio-preview/types.d.ts +20 -0
- package/dist/src/components/data/nmorph-calendar/NmorphCalendar.vue.d.ts +1 -1
- package/dist/src/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue.d.ts +25 -0
- package/dist/src/components/data/nmorph-emoji-picker/types.d.ts +50 -0
- package/dist/src/components/data/nmorph-file-card/NmorphFileCard.vue.d.ts +30 -0
- package/dist/src/components/data/nmorph-file-card/types.d.ts +18 -0
- package/dist/src/components/data/nmorph-media-tile/NmorphMediaTile.vue.d.ts +1 -1
- package/dist/src/components/data/nmorph-video-preview/NmorphVideoPreview.vue.d.ts +41 -0
- package/dist/src/components/data/nmorph-video-preview/types.d.ts +27 -0
- package/dist/src/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue.d.ts +1 -1
- package/dist/src/components/form/nmorph-file-upload/NmorphFileUpload.vue.d.ts +1 -1
- package/dist/src/components/form/nmorph-file-upload/types.d.ts +4 -0
- package/dist/src/components/form/nmorph-number-input/NmorphNumberInput.vue.d.ts +1 -1
- package/dist/src/components/form/nmorph-slider/NmorphSlider.vue.d.ts +1 -1
- package/dist/src/utils/file-types.d.ts +8 -1
- package/dist/style.css +1 -1
- package/dist/utils/file-types.js +28 -21
- package/package.json +23 -24
|
@@ -0,0 +1,371 @@
|
|
|
1
|
+
import './NmorphEmojiPicker.css';
|
|
2
|
+
import { defineComponent as Le, ref as C, computed as i, watch as Q, openBlock as c, createElementBlock as u, normalizeStyle as xe, normalizeClass as ae, createElementVNode as y, Fragment as z, renderList as B, toDisplayString as E, createVNode as _, unref as k, withCtx as q, withDirectives as Ce, vModelText as Ee, createCommentVNode as J, nextTick as we } from "vue";
|
|
3
|
+
import { useModifiers as Se } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import { createCssSizeVariables as Ae } from "../../../utils/common.js";
|
|
5
|
+
import D from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
6
|
+
/* empty css */
|
|
7
|
+
import Ke from "../../../assets/icons/search.svg.js";
|
|
8
|
+
import Ne from "../../../assets/icons/chevron-up.svg.js";
|
|
9
|
+
import Me from "../../../assets/icons/smile.svg.js";
|
|
10
|
+
import Ie from "../../../assets/icons/chevron-down.svg.js";
|
|
11
|
+
const Oe = ["lang"], ze = ["aria-label"], Be = { class: "nmorph-emoji-picker__quick-list" }, qe = ["aria-label", "title", "disabled", "onClick"], De = ["aria-label", "title", "disabled"], Ve = {
|
|
12
|
+
key: 1,
|
|
13
|
+
class: "nmorph-emoji-picker__panel"
|
|
14
|
+
}, Te = { class: "nmorph-emoji-picker__toolbar" }, $e = ["aria-label"], Fe = ["placeholder", "aria-label", "disabled"], Re = ["aria-label", "title", "disabled"], He = ["aria-label"], Pe = ["aria-selected", "disabled", "onClick"], Ue = ["aria-label"], Qe = {
|
|
15
|
+
key: 0,
|
|
16
|
+
class: "nmorph-emoji-picker__section-title"
|
|
17
|
+
}, Je = { class: "nmorph-emoji-picker__grid" }, We = ["aria-label", "title", "disabled", "onFocus", "onClick"], Xe = { class: "nmorph-emoji-picker__emoji-symbol" }, Ye = {
|
|
18
|
+
key: 1,
|
|
19
|
+
class: "nmorph-emoji-picker__empty"
|
|
20
|
+
}, st = /* @__PURE__ */ Le({
|
|
21
|
+
__name: "NmorphEmojiPicker",
|
|
22
|
+
props: {
|
|
23
|
+
language: { default: "en" },
|
|
24
|
+
dataSource: { default: () => [] },
|
|
25
|
+
i18n: { default: () => ({}) },
|
|
26
|
+
quickList: { default: () => [] },
|
|
27
|
+
initialExpanded: { type: Boolean, default: !0 },
|
|
28
|
+
width: { default: "300px" },
|
|
29
|
+
height: { default: "260px" },
|
|
30
|
+
columns: { default: 8 },
|
|
31
|
+
disabled: { type: Boolean, default: !1 }
|
|
32
|
+
},
|
|
33
|
+
emits: ["select", "expand", "collapse"],
|
|
34
|
+
setup(ne, { emit: le }) {
|
|
35
|
+
const l = ne, V = le, T = C(""), L = C(l.initialExpanded), h = C(""), w = C(0), W = C(null), se = {
|
|
36
|
+
searchPlaceholder: "Search emoji",
|
|
37
|
+
searchLabel: "Search emoji",
|
|
38
|
+
quickLabel: "Frequent emoji",
|
|
39
|
+
expandLabel: "Open emoji picker",
|
|
40
|
+
collapseLabel: "Close emoji picker",
|
|
41
|
+
noResults: "No emoji found",
|
|
42
|
+
categoryLabel: "Emoji categories",
|
|
43
|
+
resultsLabel: "Emoji results"
|
|
44
|
+
}, g = (e) => !!e && typeof e == "object" && !Array.isArray(e), X = (e) => e.trim().toLocaleLowerCase(l.language || void 0), f = (e, t) => {
|
|
45
|
+
for (const o of t) {
|
|
46
|
+
const r = e[o];
|
|
47
|
+
if (typeof r == "string" && r.trim()) return r.trim();
|
|
48
|
+
if (typeof r == "number") return String(r);
|
|
49
|
+
}
|
|
50
|
+
return "";
|
|
51
|
+
}, S = (e) => Array.isArray(e) ? e.flatMap(S) : typeof e == "string" ? e.trim() ? [e.trim()] : [] : typeof e == "number" ? [String(e)] : g(e) ? Object.values(e).flatMap(S) : [], A = (e, t, o) => {
|
|
52
|
+
for (const r of t) {
|
|
53
|
+
const n = e[r], a = typeof n == "number" ? n : Number(n);
|
|
54
|
+
if (Number.isFinite(a)) return a;
|
|
55
|
+
}
|
|
56
|
+
return o;
|
|
57
|
+
}, Y = (e, t) => {
|
|
58
|
+
for (const o of t) {
|
|
59
|
+
const r = e[o];
|
|
60
|
+
if (Array.isArray(r)) return r;
|
|
61
|
+
}
|
|
62
|
+
}, K = (e) => {
|
|
63
|
+
if (typeof e == "string") return e.trim();
|
|
64
|
+
if (!g(e)) return "";
|
|
65
|
+
const t = f(e, ["emoji", "native", "char", "unicode", "value"]);
|
|
66
|
+
if (t) return t;
|
|
67
|
+
const o = Y(e, ["skinToneVariants", "skins", "variants"])?.[0];
|
|
68
|
+
return K(o);
|
|
69
|
+
}, ie = (e) => !!K(e), ce = (e) => Array.isArray(e) ? e.map((t) => {
|
|
70
|
+
const o = K(t);
|
|
71
|
+
if (!o) return null;
|
|
72
|
+
if (typeof t == "string") return { emoji: o };
|
|
73
|
+
const r = g(t) ? t : {};
|
|
74
|
+
return {
|
|
75
|
+
emoji: o,
|
|
76
|
+
annotation: f(r, ["annotation", "label", "name", "description"]),
|
|
77
|
+
tags: S(r.tags || r.keywords || r.aliases || r.shortcodes),
|
|
78
|
+
tone: f(r, ["tone", "skinTone", "skin_tone"])
|
|
79
|
+
};
|
|
80
|
+
}).filter((t) => !!t) : [], ue = (e, t, o) => {
|
|
81
|
+
if (!g(e))
|
|
82
|
+
return {
|
|
83
|
+
key: t,
|
|
84
|
+
label: t,
|
|
85
|
+
sort: o
|
|
86
|
+
};
|
|
87
|
+
const r = f(e, ["group", "category", "groupName", "categoryName"]) || t, n = f(e, ["groupLabel", "categoryLabel"]) || r, a = A(e, ["groupOrder", "categoryOrder"], Number(r));
|
|
88
|
+
return {
|
|
89
|
+
key: r,
|
|
90
|
+
label: n,
|
|
91
|
+
sort: Number.isFinite(a) ? a : o
|
|
92
|
+
};
|
|
93
|
+
}, de = (e, t, o, r, n) => {
|
|
94
|
+
const a = K(e);
|
|
95
|
+
if (!a) return null;
|
|
96
|
+
const s = g(e) ? e : {}, d = ue(s, t, r), m = f(s, ["annotation", "label", "name", "description"]) || a, b = S(s.tags || s.keywords || s.aliases || s.shortcodes), M = A(s, ["order", "sortOrder", "sort_order", "index"], n), U = s.skinToneVariants || s.skins || s.variants, I = ce(U).filter((O) => O.emoji !== a), x = d.key || t, re = d.label || o || x, je = X(
|
|
97
|
+
[a, m, re, ...b, ...I.map((O) => O.annotation || O.emoji)].filter(Boolean).join(" ")
|
|
98
|
+
);
|
|
99
|
+
return {
|
|
100
|
+
key: `${x}-${M}-${a}`,
|
|
101
|
+
emoji: a,
|
|
102
|
+
annotation: m,
|
|
103
|
+
tags: b,
|
|
104
|
+
groupKey: x,
|
|
105
|
+
groupLabel: re,
|
|
106
|
+
groupSort: d.sort,
|
|
107
|
+
order: M,
|
|
108
|
+
skinToneVariants: I,
|
|
109
|
+
searchText: je
|
|
110
|
+
};
|
|
111
|
+
}, $ = (e) => {
|
|
112
|
+
if (!(!g(e) || ie(e)))
|
|
113
|
+
return Y(e, ["emojis", "items", "children", "data"]);
|
|
114
|
+
}, pe = (e) => {
|
|
115
|
+
const t = [], o = (n, a = "emoji", s = a, d = 0, m = t.length) => {
|
|
116
|
+
const b = de(
|
|
117
|
+
n,
|
|
118
|
+
a,
|
|
119
|
+
s,
|
|
120
|
+
d,
|
|
121
|
+
m
|
|
122
|
+
);
|
|
123
|
+
b && t.push(b);
|
|
124
|
+
}, r = (n, a, s) => {
|
|
125
|
+
const d = $(n);
|
|
126
|
+
if (!d) {
|
|
127
|
+
o(n, "emoji", "emoji", 0, s);
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
const m = g(n) ? n : {}, b = f(m, ["group", "category", "name", "label"]) || a, M = f(m, ["label", "name", "title", "groupLabel", "categoryLabel"]) || b, U = A(m, ["order", "groupOrder", "categoryOrder"], s);
|
|
131
|
+
d.forEach((I, x) => o(I, b, M, U, x));
|
|
132
|
+
};
|
|
133
|
+
if (Array.isArray(e))
|
|
134
|
+
e.forEach((n, a) => {
|
|
135
|
+
$(n) ? r(n, `group-${a + 1}`, a) : o(n, "emoji", "emoji", 0, a);
|
|
136
|
+
});
|
|
137
|
+
else if (g(e)) {
|
|
138
|
+
const n = $(e);
|
|
139
|
+
if (n) {
|
|
140
|
+
const a = f(e, ["group", "category", "name", "label"]) || "emoji", s = f(e, ["label", "name", "title", "groupLabel", "categoryLabel"]) || a, d = A(e, ["order", "groupOrder", "categoryOrder"], 0);
|
|
141
|
+
n.forEach((m, b) => o(m, a, s, d, b));
|
|
142
|
+
} else
|
|
143
|
+
Object.entries(e).forEach(([a, s], d) => {
|
|
144
|
+
Array.isArray(s) ? s.forEach((m, b) => o(m, a, a, d, b)) : r(s, a, d);
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
return t.sort((n, a) => n.groupSort !== a.groupSort ? n.groupSort - a.groupSort : n.order - a.order);
|
|
148
|
+
}, p = i(() => ({
|
|
149
|
+
...se,
|
|
150
|
+
...l.i18n
|
|
151
|
+
})), Z = i(() => ({
|
|
152
|
+
...l.i18n?.categories || {},
|
|
153
|
+
...l.i18n?.categoryLabels || {}
|
|
154
|
+
})), v = i(() => pe(l.dataSource)), me = i(() => {
|
|
155
|
+
const e = /* @__PURE__ */ new Map();
|
|
156
|
+
return v.value.forEach((t) => e.set(t.emoji, t.annotation || t.emoji)), e;
|
|
157
|
+
}), F = i(() => Array.from(new Set(l.quickList.map((e) => e.trim()).filter(Boolean)))), G = i(() => !L.value && F.value.length > 0), j = i(() => X(T.value)), N = i(() => {
|
|
158
|
+
const e = /* @__PURE__ */ new Map();
|
|
159
|
+
return v.value.forEach((t) => {
|
|
160
|
+
e.has(t.groupKey) || e.set(t.groupKey, {
|
|
161
|
+
key: t.groupKey,
|
|
162
|
+
label: Z.value[t.groupKey] || t.groupLabel,
|
|
163
|
+
sort: t.groupSort
|
|
164
|
+
});
|
|
165
|
+
}), Array.from(e.values()).sort((t, o) => t.sort - o.sort);
|
|
166
|
+
});
|
|
167
|
+
Q(
|
|
168
|
+
N,
|
|
169
|
+
(e) => {
|
|
170
|
+
if (!e.length) {
|
|
171
|
+
h.value = "";
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
e.some((t) => t.key === h.value) || (h.value = e[0].key);
|
|
175
|
+
},
|
|
176
|
+
{ immediate: !0 }
|
|
177
|
+
), Q(
|
|
178
|
+
() => l.initialExpanded,
|
|
179
|
+
(e) => {
|
|
180
|
+
L.value = e;
|
|
181
|
+
}
|
|
182
|
+
), Q([j, h], () => {
|
|
183
|
+
w.value = 0;
|
|
184
|
+
});
|
|
185
|
+
const be = i(() => j.value ? v.value.filter((e) => e.searchText.includes(j.value)) : h.value ? v.value.filter((e) => e.groupKey === h.value) : v.value), R = i(() => {
|
|
186
|
+
const e = /* @__PURE__ */ new Map();
|
|
187
|
+
return be.value.forEach((t) => {
|
|
188
|
+
const o = Z.value[t.groupKey] || t.groupLabel, r = e.get(t.groupKey) || {
|
|
189
|
+
key: t.groupKey,
|
|
190
|
+
label: o,
|
|
191
|
+
items: []
|
|
192
|
+
};
|
|
193
|
+
r.items.push(t), e.set(t.groupKey, r);
|
|
194
|
+
}), Array.from(e.values());
|
|
195
|
+
}), H = i(() => R.value.flatMap((e) => e.items)), he = i(
|
|
196
|
+
() => N.value.find((e) => e.key === h.value)?.label || p.value.resultsLabel
|
|
197
|
+
), fe = i(() => j.value ? p.value.resultsLabel : he.value), ee = i(() => !l.initialExpanded && F.value.length > 0), ye = i(
|
|
198
|
+
() => Se({
|
|
199
|
+
"nmorph-emoji-picker": [
|
|
200
|
+
G.value && "compact",
|
|
201
|
+
L.value && "expanded",
|
|
202
|
+
l.disabled && "disabled",
|
|
203
|
+
!v.value.length && "empty"
|
|
204
|
+
]
|
|
205
|
+
})
|
|
206
|
+
), ge = i(() => ({
|
|
207
|
+
...Ae({
|
|
208
|
+
"--nmorph-emoji-picker-width": l.width,
|
|
209
|
+
"--nmorph-emoji-picker-height": l.height
|
|
210
|
+
}),
|
|
211
|
+
"--nmorph-emoji-picker-columns": Math.max(1, Math.floor(l.columns))
|
|
212
|
+
})), te = (e) => me.value.get(e) || e, oe = (e) => {
|
|
213
|
+
l.disabled || V("select", e);
|
|
214
|
+
}, _e = () => {
|
|
215
|
+
l.disabled || (L.value = !0, V("expand"));
|
|
216
|
+
}, ke = () => {
|
|
217
|
+
l.disabled || !ee.value || (L.value = !1, V("collapse"));
|
|
218
|
+
}, P = async (e) => {
|
|
219
|
+
const t = W.value?.querySelectorAll(".nmorph-emoji-picker__emoji");
|
|
220
|
+
if (!t?.length) return;
|
|
221
|
+
const o = Math.min(Math.max(e, 0), t.length - 1);
|
|
222
|
+
w.value = o, await we(), t[o]?.focus();
|
|
223
|
+
}, ve = (e) => {
|
|
224
|
+
if (l.disabled || !H.value.length || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
|
|
225
|
+
const t = Math.max(1, Math.floor(l.columns)), o = H.value.length - 1, r = {
|
|
226
|
+
ArrowRight: 1,
|
|
227
|
+
ArrowLeft: -1,
|
|
228
|
+
ArrowDown: t,
|
|
229
|
+
ArrowUp: -t
|
|
230
|
+
};
|
|
231
|
+
e.key in r && (e.preventDefault(), P(w.value + r[e.key])), e.key === "Home" && (e.preventDefault(), P(0)), e.key === "End" && (e.preventDefault(), P(o));
|
|
232
|
+
};
|
|
233
|
+
return (e, t) => (c(), u("div", {
|
|
234
|
+
class: ae(ye.value),
|
|
235
|
+
style: xe(ge.value),
|
|
236
|
+
lang: l.language
|
|
237
|
+
}, [
|
|
238
|
+
G.value ? (c(), u("div", {
|
|
239
|
+
key: 0,
|
|
240
|
+
class: "nmorph-emoji-picker__compact",
|
|
241
|
+
role: "group",
|
|
242
|
+
"aria-label": p.value.quickLabel
|
|
243
|
+
}, [
|
|
244
|
+
y("div", Be, [
|
|
245
|
+
(c(!0), u(z, null, B(F.value, (o) => (c(), u("button", {
|
|
246
|
+
key: o,
|
|
247
|
+
type: "button",
|
|
248
|
+
class: "nmorph-emoji-picker__quick-button",
|
|
249
|
+
"aria-label": te(o),
|
|
250
|
+
title: te(o),
|
|
251
|
+
disabled: l.disabled,
|
|
252
|
+
onClick: (r) => oe(o)
|
|
253
|
+
}, E(o), 9, qe))), 128))
|
|
254
|
+
]),
|
|
255
|
+
y("button", {
|
|
256
|
+
type: "button",
|
|
257
|
+
class: "nmorph-emoji-picker__expand-button",
|
|
258
|
+
"aria-label": p.value.expandLabel,
|
|
259
|
+
title: p.value.expandLabel,
|
|
260
|
+
disabled: l.disabled,
|
|
261
|
+
onClick: _e
|
|
262
|
+
}, [
|
|
263
|
+
_(k(D), { size: "small" }, {
|
|
264
|
+
default: q(() => [
|
|
265
|
+
_(k(Ie))
|
|
266
|
+
]),
|
|
267
|
+
_: 1
|
|
268
|
+
})
|
|
269
|
+
], 8, De)
|
|
270
|
+
], 8, ze)) : (c(), u("div", Ve, [
|
|
271
|
+
y("div", Te, [
|
|
272
|
+
y("label", {
|
|
273
|
+
class: "nmorph-emoji-picker__search",
|
|
274
|
+
"aria-label": p.value.searchLabel
|
|
275
|
+
}, [
|
|
276
|
+
_(k(D), {
|
|
277
|
+
size: "small",
|
|
278
|
+
class: "nmorph-emoji-picker__search-icon"
|
|
279
|
+
}, {
|
|
280
|
+
default: q(() => [
|
|
281
|
+
_(k(Ke))
|
|
282
|
+
]),
|
|
283
|
+
_: 1
|
|
284
|
+
}),
|
|
285
|
+
Ce(y("input", {
|
|
286
|
+
"onUpdate:modelValue": t[0] || (t[0] = (o) => T.value = o),
|
|
287
|
+
class: "nmorph-emoji-picker__search-input",
|
|
288
|
+
type: "search",
|
|
289
|
+
placeholder: p.value.searchPlaceholder,
|
|
290
|
+
"aria-label": p.value.searchLabel,
|
|
291
|
+
disabled: l.disabled
|
|
292
|
+
}, null, 8, Fe), [
|
|
293
|
+
[Ee, T.value]
|
|
294
|
+
])
|
|
295
|
+
], 8, $e),
|
|
296
|
+
ee.value ? (c(), u("button", {
|
|
297
|
+
key: 0,
|
|
298
|
+
type: "button",
|
|
299
|
+
class: "nmorph-emoji-picker__collapse-button",
|
|
300
|
+
"aria-label": p.value.collapseLabel,
|
|
301
|
+
title: p.value.collapseLabel,
|
|
302
|
+
disabled: l.disabled,
|
|
303
|
+
onClick: ke
|
|
304
|
+
}, [
|
|
305
|
+
_(k(D), { size: "small" }, {
|
|
306
|
+
default: q(() => [
|
|
307
|
+
_(k(Ne))
|
|
308
|
+
]),
|
|
309
|
+
_: 1
|
|
310
|
+
})
|
|
311
|
+
], 8, Re)) : J("", !0)
|
|
312
|
+
]),
|
|
313
|
+
N.value.length && !j.value ? (c(), u("div", {
|
|
314
|
+
key: 0,
|
|
315
|
+
class: "nmorph-emoji-picker__categories",
|
|
316
|
+
role: "tablist",
|
|
317
|
+
"aria-label": p.value.categoryLabel
|
|
318
|
+
}, [
|
|
319
|
+
(c(!0), u(z, null, B(N.value, (o) => (c(), u("button", {
|
|
320
|
+
key: o.key,
|
|
321
|
+
type: "button",
|
|
322
|
+
class: ae(["nmorph-emoji-picker__category", { "nmorph-emoji-picker__category--active": o.key === h.value }]),
|
|
323
|
+
role: "tab",
|
|
324
|
+
"aria-selected": o.key === h.value,
|
|
325
|
+
disabled: l.disabled,
|
|
326
|
+
onClick: (r) => h.value = o.key
|
|
327
|
+
}, E(o.label), 11, Pe))), 128))
|
|
328
|
+
], 8, He)) : J("", !0),
|
|
329
|
+
y("div", {
|
|
330
|
+
ref_key: "gridRef",
|
|
331
|
+
ref: W,
|
|
332
|
+
class: "nmorph-emoji-picker__body",
|
|
333
|
+
"aria-label": fe.value,
|
|
334
|
+
onKeydown: ve
|
|
335
|
+
}, [
|
|
336
|
+
R.value.length ? (c(!0), u(z, { key: 0 }, B(R.value, (o) => (c(), u("section", {
|
|
337
|
+
key: o.key,
|
|
338
|
+
class: "nmorph-emoji-picker__section"
|
|
339
|
+
}, [
|
|
340
|
+
j.value ? (c(), u("div", Qe, E(o.label), 1)) : J("", !0),
|
|
341
|
+
y("div", Je, [
|
|
342
|
+
(c(!0), u(z, null, B(o.items, (r) => (c(), u("button", {
|
|
343
|
+
key: r.key,
|
|
344
|
+
type: "button",
|
|
345
|
+
class: "nmorph-emoji-picker__emoji",
|
|
346
|
+
"aria-label": r.annotation,
|
|
347
|
+
title: r.annotation,
|
|
348
|
+
disabled: l.disabled,
|
|
349
|
+
onFocus: (n) => w.value = H.value.findIndex((a) => a.key === r.key),
|
|
350
|
+
onClick: (n) => oe(r.emoji)
|
|
351
|
+
}, [
|
|
352
|
+
y("span", Xe, E(r.emoji), 1)
|
|
353
|
+
], 40, We))), 128))
|
|
354
|
+
])
|
|
355
|
+
]))), 128)) : (c(), u("div", Ye, [
|
|
356
|
+
_(k(D), null, {
|
|
357
|
+
default: q(() => [
|
|
358
|
+
_(k(Me))
|
|
359
|
+
]),
|
|
360
|
+
_: 1
|
|
361
|
+
}),
|
|
362
|
+
y("span", null, E(p.value.noResults), 1)
|
|
363
|
+
]))
|
|
364
|
+
], 40, Ue)
|
|
365
|
+
]))
|
|
366
|
+
], 14, Oe));
|
|
367
|
+
}
|
|
368
|
+
});
|
|
369
|
+
export {
|
|
370
|
+
st as default
|
|
371
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-file-card .nmorph-file-card__icon{display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__badge{flex:0 0 auto;max-width:72px;padding:2px 6px;overflow:hidden;color:var(--nmorph-accent-color);font-weight:700;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-transform:uppercase;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-file-card .nmorph-file-card__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-file-card .nmorph-file-card__action-link .nmorph-icon{--color: currentColor}.nmorph-file-card.nmorph-file-card--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import './NmorphFileCard.css';
|
|
2
|
+
import { defineComponent as M, useSlots as $, computed as t, openBlock as r, createElementBlock as a, normalizeClass as F, createElementVNode as _, createBlock as v, unref as n, withCtx as c, createVNode as l, resolveDynamicComponent as R, toDisplayString as d, createCommentVNode as s, renderSlot as V } from "vue";
|
|
3
|
+
import { useModifiers as z } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import { getFileExtension as E, getPlainFileType as W, getTypeCandidates as K, isKnownFileType as m } from "../../../utils/file-types.js";
|
|
5
|
+
import { NmorphImageResolution as O, NmorphAudioResolution as j, NmorphVideoResolution as G, NmorphArchiveResolution as P, NmorphDocResolution as q } from "../../form/nmorph-file-upload/types.js";
|
|
6
|
+
import J from "../../../assets/icons/image.svg.js";
|
|
7
|
+
import Q from "../../../assets/icons/video.svg.js";
|
|
8
|
+
import U from "../../../assets/icons/archive.svg.js";
|
|
9
|
+
import g from "../../../assets/icons/doc.svg.js";
|
|
10
|
+
import p from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
11
|
+
/* empty css */
|
|
12
|
+
import X from "../../../assets/icons/audio.svg.js";
|
|
13
|
+
import Y from "../../../assets/icons/loading.svg.js";
|
|
14
|
+
import Z from "../../../assets/icons/open.svg.js";
|
|
15
|
+
import ee from "../../../assets/icons/download.svg.js";
|
|
16
|
+
const oe = { class: "nmorph-file-card__icon" }, re = { class: "nmorph-file-card__body" }, te = { class: "nmorph-file-card__name" }, ae = {
|
|
17
|
+
key: 0,
|
|
18
|
+
class: "nmorph-file-card__error"
|
|
19
|
+
}, ne = {
|
|
20
|
+
key: 1,
|
|
21
|
+
class: "nmorph-file-card__meta"
|
|
22
|
+
}, ie = {
|
|
23
|
+
key: 0,
|
|
24
|
+
class: "nmorph-file-card__badge"
|
|
25
|
+
}, le = {
|
|
26
|
+
key: 1,
|
|
27
|
+
class: "nmorph-file-card__actions"
|
|
28
|
+
}, se = ["href", "aria-label"], me = ["href", "download", "aria-label"], Te = /* @__PURE__ */ M({
|
|
29
|
+
__name: "NmorphFileCard",
|
|
30
|
+
props: {
|
|
31
|
+
name: {},
|
|
32
|
+
extension: { default: "" },
|
|
33
|
+
mimeType: { default: "" },
|
|
34
|
+
size: { default: void 0 },
|
|
35
|
+
previewSrc: { default: "" },
|
|
36
|
+
downloadHref: { default: "" },
|
|
37
|
+
compact: { type: Boolean, default: !1 },
|
|
38
|
+
loading: { type: Boolean, default: !1 },
|
|
39
|
+
error: { type: Boolean, default: !1 },
|
|
40
|
+
errorText: { default: "" },
|
|
41
|
+
showDefaultActions: { type: Boolean, default: !0 }
|
|
42
|
+
},
|
|
43
|
+
emits: ["open", "download", "error"],
|
|
44
|
+
setup(k, { emit: B }) {
|
|
45
|
+
const e = k, y = B, T = $(), f = t(() => (e.extension || E(e.name) || W(e.mimeType)).toLowerCase()), i = t(() => K(e.mimeType, e.name)), C = t(() => e.mimeType.toLowerCase().startsWith("image/") || i.value.some((o) => m(o, O)) ? J : e.mimeType.toLowerCase().startsWith("audio/") || i.value.some((o) => m(o, j)) ? X : e.mimeType.toLowerCase().startsWith("video/") || i.value.some((o) => m(o, G)) ? Q : i.value.some((o) => m(o, P)) ? U : i.value.some((o) => m(o, q)) ? g : g), x = (o) => {
|
|
46
|
+
if (o === void 0 || Number.isNaN(o) || o < 0) return "";
|
|
47
|
+
if (o === 0) return "0 B";
|
|
48
|
+
const u = ["B", "KB", "MB", "GB", "TB"], h = Math.min(Math.floor(Math.log(o) / Math.log(1024)), u.length - 1), N = o / 1024 ** h, L = N >= 10 || h === 0 ? 0 : 1;
|
|
49
|
+
return `${N.toFixed(L)} ${u[h]}`;
|
|
50
|
+
}, I = t(() => x(e.size)), b = t(() => f.value || e.mimeType), w = t(() => [b.value, I.value].filter(Boolean).join(" · ")), S = t(
|
|
51
|
+
() => !!T.actions || e.showDefaultActions && (e.previewSrc || e.downloadHref)
|
|
52
|
+
), D = t(
|
|
53
|
+
() => z({
|
|
54
|
+
"nmorph-file-card": [e.compact && "compact", e.loading && "loading", e.error && "error"]
|
|
55
|
+
})
|
|
56
|
+
), A = () => y("open"), H = () => y("download");
|
|
57
|
+
return (o, u) => (r(), a("div", {
|
|
58
|
+
class: F(D.value)
|
|
59
|
+
}, [
|
|
60
|
+
_("div", oe, [
|
|
61
|
+
e.loading ? (r(), v(n(p), {
|
|
62
|
+
key: 0,
|
|
63
|
+
size: "medium"
|
|
64
|
+
}, {
|
|
65
|
+
default: c(() => [
|
|
66
|
+
l(n(Y))
|
|
67
|
+
]),
|
|
68
|
+
_: 1
|
|
69
|
+
})) : (r(), v(n(p), {
|
|
70
|
+
key: 1,
|
|
71
|
+
size: "medium"
|
|
72
|
+
}, {
|
|
73
|
+
default: c(() => [
|
|
74
|
+
(r(), v(R(C.value)))
|
|
75
|
+
]),
|
|
76
|
+
_: 1
|
|
77
|
+
}))
|
|
78
|
+
]),
|
|
79
|
+
_("div", re, [
|
|
80
|
+
_("span", te, d(e.name), 1),
|
|
81
|
+
e.error && e.errorText ? (r(), a("span", ae, d(e.errorText), 1)) : w.value ? (r(), a("span", ne, d(w.value), 1)) : s("", !0)
|
|
82
|
+
]),
|
|
83
|
+
f.value ? (r(), a("span", ie, d(f.value), 1)) : s("", !0),
|
|
84
|
+
S.value ? (r(), a("div", le, [
|
|
85
|
+
V(o.$slots, "actions", {}, () => [
|
|
86
|
+
e.previewSrc ? (r(), a("a", {
|
|
87
|
+
key: 0,
|
|
88
|
+
href: e.previewSrc,
|
|
89
|
+
target: "_blank",
|
|
90
|
+
rel: "noopener noreferrer",
|
|
91
|
+
class: "nmorph-file-card__action-link",
|
|
92
|
+
"aria-label": `Open ${e.name}`,
|
|
93
|
+
onClick: A
|
|
94
|
+
}, [
|
|
95
|
+
l(n(p), { size: "small" }, {
|
|
96
|
+
default: c(() => [
|
|
97
|
+
l(n(Z))
|
|
98
|
+
]),
|
|
99
|
+
_: 1
|
|
100
|
+
})
|
|
101
|
+
], 8, se)) : s("", !0),
|
|
102
|
+
e.downloadHref ? (r(), a("a", {
|
|
103
|
+
key: 1,
|
|
104
|
+
href: e.downloadHref,
|
|
105
|
+
download: e.name,
|
|
106
|
+
class: "nmorph-file-card__action-link",
|
|
107
|
+
"aria-label": `Download ${e.name}`,
|
|
108
|
+
onClick: H
|
|
109
|
+
}, [
|
|
110
|
+
l(n(p), { size: "small" }, {
|
|
111
|
+
default: c(() => [
|
|
112
|
+
l(n(ee))
|
|
113
|
+
]),
|
|
114
|
+
_: 1
|
|
115
|
+
})
|
|
116
|
+
], 8, me)) : s("", !0)
|
|
117
|
+
])
|
|
118
|
+
])) : s("", !0)
|
|
119
|
+
], 2));
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
export {
|
|
123
|
+
Te as default
|
|
124
|
+
};
|