@nmorph/nmorph-ui-kit 2.2.54 → 2.2.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js +141 -119
  2. package/dist/components/data/nmorph-file-card/NmorphFileCard.css +1 -1
  3. package/dist/components/data/nmorph-file-card/NmorphFileCard.vue.js +26 -25
  4. package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.css +1 -1
  5. package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js +257 -288
  6. package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue.js +141 -125
  7. package/dist/index.umd.js +27 -27
  8. package/dist/package.json.js +1 -1
  9. package/dist/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.d.ts +3 -0
  10. package/dist/src/components/data/nmorph-media-gallery/types.d.ts +3 -0
  11. package/dist/style.css +1 -1
  12. package/package.json +1 -1
package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import './NmorphScroll.css';
2
- import { defineComponent as Pe, ref as c, computed as n, inject as we, onUnmounted as He, onMounted as ze, nextTick as G, watch as N, openBlock as T, createElementBlock as W, normalizeStyle as h, normalizeClass as Be, createElementVNode as M, renderSlot as Te, createCommentVNode as U } from "vue";
3
- import { useModifiers as We } from "../../../utils/create-modifiers.js";
4
- const ke = /* @__PURE__ */ Pe({
2
+ import { defineComponent as Te, ref as c, computed as r, inject as Me, onUnmounted as We, onMounted as Ee, watch as A, openBlock as O, createElementBlock as _, normalizeStyle as h, normalizeClass as Oe, createElementVNode as k, renderSlot as _e, createCommentVNode as F, nextTick as ke } from "vue";
3
+ import { useModifiers as Le } from "../../../utils/create-modifiers.js";
4
+ const Ce = /* @__PURE__ */ Te({
5
5
  __name: "NmorphScroll",
6
6
  props: {
7
7
  height: { default: "100%" },
@@ -21,20 +21,20 @@ const ke = /* @__PURE__ */ Pe({
21
21
  yGapInPx: { default: 0 }
22
22
  },
23
23
  emits: ["on-scroll", "update:model-value", "on-scroll-end"],
24
- setup(j, { expose: q, emit: A }) {
25
- const l = j, F = c(null), s = c(null), J = n(() => l.scrollYProp), K = n(() => l.scrollXProp), f = c(!1), g = c(!1), i = c({
24
+ setup(J, { expose: K, emit: Q }) {
25
+ const l = J, Z = c(null), a = c(null), ee = r(() => l.scrollYProp), te = r(() => l.scrollXProp), b = c(!1), y = c(!1), i = c({
26
26
  clientWidth: 0,
27
27
  clientHeight: 0,
28
28
  scrollWidth: 0,
29
29
  scrollHeight: 0,
30
30
  scrollLeft: 0,
31
31
  scrollTop: 0
32
- }), y = c(!1);
33
- let b, a, _ = "";
34
- const m = () => {
35
- const e = s.value;
32
+ }), S = c(!1);
33
+ let w, v, z, s, L = "";
34
+ const m = /* @__PURE__ */ new Set(), H = () => {
35
+ const e = a.value;
36
36
  if (!e) {
37
- f.value = !1, g.value = !1, i.value = {
37
+ b.value = !1, y.value = !1, i.value = {
38
38
  clientWidth: 0,
39
39
  clientHeight: 0,
40
40
  scrollWidth: 0,
@@ -52,169 +52,191 @@ const ke = /* @__PURE__ */ Pe({
52
52
  scrollLeft: e.scrollLeft,
53
53
  scrollTop: e.scrollTop
54
54
  };
55
- i.value = t, f.value = t.scrollHeight > t.clientHeight, g.value = t.scrollWidth > t.clientWidth;
56
- }, Q = n(() => l.yBarWidthInPx + l.yGapInPx), Z = n(() => l.xBarWidthInPx + l.xGapInPx), ee = n(
57
- () => l.scrollYProp === "hidden" || !f.value ? "0" : `${Q.value}px`
58
- ), te = n(
59
- () => l.scrollXProp === "hidden" || !g.value ? "0" : `${Z.value}px`
60
- ), k = n(() => `${l.yBarWidthInPx}px`), E = n(() => `${l.xBarWidthInPx}px`), oe = n(() => B.value ? E.value : "0px"), le = n(() => z.value ? k.value : "0px"), ne = we("nmorph");
61
- let v;
62
- const P = A, I = () => {
63
- const e = s.value;
55
+ i.value = t, b.value = t.scrollHeight > t.clientHeight, y.value = t.scrollWidth > t.clientWidth;
56
+ }, p = () => {
57
+ ke(H);
58
+ }, I = () => {
59
+ if (!v || !a.value) return;
60
+ const e = new Set(Array.from(a.value.children));
61
+ m.forEach((t) => {
62
+ e.has(t) || (v?.unobserve(t), m.delete(t));
63
+ }), e.forEach((t) => {
64
+ m.has(t) || (v?.observe(t), m.add(t));
65
+ });
66
+ }, oe = () => {
67
+ const e = a.value;
68
+ e && (typeof ResizeObserver < "u" && (v = new ResizeObserver(() => {
69
+ p();
70
+ }), I()), typeof MutationObserver < "u" && (z = new MutationObserver(() => {
71
+ I(), p();
72
+ }), z.observe(e, {
73
+ attributes: !0,
74
+ characterData: !0,
75
+ childList: !0,
76
+ subtree: !0
77
+ })));
78
+ }, le = r(() => l.yBarWidthInPx + l.yGapInPx), re = r(() => l.xBarWidthInPx + l.xGapInPx), ne = r(
79
+ () => l.scrollYProp === "hidden" || !b.value ? "0" : `${le.value}px`
80
+ ), ae = r(
81
+ () => l.scrollXProp === "hidden" || !y.value ? "0" : `${re.value}px`
82
+ ), R = r(() => `${l.yBarWidthInPx}px`), C = r(() => `${l.xBarWidthInPx}px`), se = r(() => E.value ? C.value : "0px"), ie = r(() => W.value ? R.value : "0px"), ce = Me("nmorph");
83
+ let f;
84
+ const B = Q, D = () => {
85
+ const e = a.value;
64
86
  if (!e) return;
65
87
  const t = Math.trunc(e.scrollLeft), o = Math.trunc(e.scrollTop);
66
- P("update:model-value", { x: t, y: o });
67
- }, re = () => {
68
- P("on-scroll-end");
69
- }, ae = (e) => {
70
- m(), P("on-scroll", e), s.value && (l.updateOnlyOnScrollEnd || I(), v !== void 0 && clearTimeout(v), v = setTimeout(() => {
71
- l.updateOnlyOnScrollEnd && I(), re();
88
+ B("update:model-value", { x: t, y: o });
89
+ }, ue = () => {
90
+ B("on-scroll-end");
91
+ }, de = (e) => {
92
+ H(), B("on-scroll", e), a.value && (l.updateOnlyOnScrollEnd || D(), f !== void 0 && clearTimeout(f), f = setTimeout(() => {
93
+ l.updateOnlyOnScrollEnd && D(), ue();
72
94
  }, l.scrollEndDelay));
73
95
  };
74
- He(() => {
75
- v !== void 0 && clearTimeout(v), b?.disconnect(), V();
96
+ We(() => {
97
+ f !== void 0 && clearTimeout(f), w?.disconnect(), v?.disconnect(), z?.disconnect(), m.clear(), U();
76
98
  });
77
- const w = c(!1), ie = n(
78
- () => We({
99
+ const T = c(!1), he = r(
100
+ () => Le({
79
101
  "nmorph-scroll": {
80
- "show-bars": w.value || y.value,
81
- dragging: y.value
102
+ "show-bars": T.value || S.value,
103
+ dragging: S.value
82
104
  }
83
105
  })
84
- ), H = (e) => {
106
+ ), M = (e) => {
85
107
  const { x: t, y: o } = e;
86
- s.value?.scrollTo({
108
+ a.value?.scrollTo({
87
109
  left: t,
88
110
  top: o,
89
111
  behavior: "smooth"
90
112
  });
91
113
  };
92
- ze(() => {
93
- H(l.modelValue), G(m), typeof ResizeObserver < "u" && s.value && (b = new ResizeObserver(() => {
94
- m();
95
- }), b.observe(s.value));
96
- }), N(
114
+ Ee(() => {
115
+ M(l.modelValue), oe(), p(), typeof ResizeObserver < "u" && a.value && (w = new ResizeObserver(() => {
116
+ p();
117
+ }), w.observe(a.value));
118
+ }), A(
97
119
  () => l.modelValue,
98
120
  (e) => {
99
- H(e);
121
+ M(e);
100
122
  },
101
123
  { deep: !0, immediate: !0 }
102
- ), N(
103
- () => ne?.browser.dimensions,
124
+ ), A(
125
+ () => ce?.browser.dimensions,
104
126
  () => {
105
- G(m);
127
+ p();
106
128
  },
107
129
  { deep: !0, immediate: !0 }
108
130
  );
109
- const se = n(() => l.cssScrollBehavior), ce = n(() => l.height), ue = n(() => l.maxHeight), de = n(() => ({
110
- "--bar-width": k.value,
111
- "--bar-height": E.value,
131
+ const ve = r(() => l.cssScrollBehavior), me = r(() => l.height), pe = r(() => l.maxHeight), fe = r(() => ({
132
+ "--bar-width": R.value,
133
+ "--bar-height": C.value,
112
134
  boxSizing: "border-box",
113
135
  minWidth: "0",
114
136
  minHeight: "0",
115
- height: ce.value,
116
- maxHeight: ue.value
117
- })), he = n(() => ({
118
- paddingRight: ee.value,
119
- paddingBottom: te.value,
120
- overflowX: K.value,
121
- overflowY: J.value,
122
- scrollBehavior: se.value
123
- })), z = n(() => l.scrollYProp !== "hidden" && f.value), B = n(() => l.scrollXProp !== "hidden" && g.value), me = n(
124
- () => Math.max(0, i.value.clientHeight - (B.value ? l.xBarWidthInPx : 0))
125
- ), ve = n(
126
- () => Math.max(0, i.value.clientWidth - (z.value ? l.yBarWidthInPx : 0))
127
- ), p = (e) => e === "y" ? me.value : ve.value, L = (e) => e === "y" ? i.value.clientHeight : i.value.clientWidth, O = (e) => e === "y" ? i.value.scrollHeight : i.value.scrollWidth, D = (e) => e === "y" ? i.value.scrollTop : i.value.scrollLeft, pe = (e) => Math.min(p(e), Math.max(18, e === "y" ? l.yBarWidthInPx * 3 : l.xBarWidthInPx * 3)), S = (e) => Math.max(0, O(e) - L(e)), u = (e) => {
128
- const t = p(e), o = O(e), r = L(e);
129
- return t <= 0 || o <= r ? 0 : Math.min(t, Math.max(pe(e), r / o * t));
130
- }, C = (e) => {
131
- const t = S(e), o = Math.max(0, p(e) - u(e));
132
- return !t || !o ? 0 : D(e) / t * o;
133
- }, fe = n(() => ({
137
+ height: me.value,
138
+ maxHeight: pe.value
139
+ })), ge = r(() => ({
140
+ paddingRight: ne.value,
141
+ paddingBottom: ae.value,
142
+ overflowX: te.value,
143
+ overflowY: ee.value,
144
+ scrollBehavior: ve.value
145
+ })), W = r(() => l.scrollYProp !== "hidden" && b.value), E = r(() => l.scrollXProp !== "hidden" && y.value), be = r(
146
+ () => Math.max(0, i.value.clientHeight - (E.value ? l.xBarWidthInPx : 0))
147
+ ), ye = r(
148
+ () => Math.max(0, i.value.clientWidth - (W.value ? l.yBarWidthInPx : 0))
149
+ ), g = (e) => e === "y" ? be.value : ye.value, V = (e) => e === "y" ? i.value.clientHeight : i.value.clientWidth, X = (e) => e === "y" ? i.value.scrollHeight : i.value.scrollWidth, Y = (e) => e === "y" ? i.value.scrollTop : i.value.scrollLeft, Se = (e) => Math.min(g(e), Math.max(18, e === "y" ? l.yBarWidthInPx * 3 : l.xBarWidthInPx * 3)), x = (e) => Math.max(0, X(e) - V(e)), u = (e) => {
150
+ const t = g(e), o = X(e), n = V(e);
151
+ return t <= 0 || o <= n ? 0 : Math.min(t, Math.max(Se(e), n / o * t));
152
+ }, $ = (e) => {
153
+ const t = x(e), o = Math.max(0, g(e) - u(e));
154
+ return !t || !o ? 0 : Y(e) / t * o;
155
+ }, xe = r(() => ({
134
156
  height: `${u("y")}px`,
135
- transform: `translate3d(0, ${C("y")}px, 0)`
136
- })), ge = n(() => ({
157
+ transform: `translate3d(0, ${$("y")}px, 0)`
158
+ })), Pe = r(() => ({
137
159
  width: `${u("x")}px`,
138
- transform: `translate3d(${C("x")}px, 0, 0)`
139
- })), R = (e, t) => {
140
- const o = s.value;
160
+ transform: `translate3d(${$("x")}px, 0, 0)`
161
+ })), G = (e, t) => {
162
+ const o = a.value;
141
163
  if (!o) return;
142
- const r = Math.max(0, Math.min(S(e), t));
143
- e === "y" ? o.scrollTop = r : o.scrollLeft = r, m();
144
- }, V = () => {
145
- a && (window.removeEventListener("pointermove", X), window.removeEventListener("pointerup", x), window.removeEventListener("pointercancel", x), a = void 0, y.value = !1, document.body && (document.body.style.userSelect = _));
146
- }, X = (e) => {
147
- if (!a) return;
148
- const o = (a.axis === "y" ? e.clientY : e.clientX) - a.pointerStart, r = Math.max(1, a.trackSize - a.thumbSize), d = o / r * a.maxScroll;
149
- R(a.axis, a.scrollStart + d);
150
- }, x = () => {
151
- V();
152
- }, Y = (e, t) => {
164
+ const n = Math.max(0, Math.min(x(e), t));
165
+ e === "y" ? o.scrollTop = n : o.scrollLeft = n, H();
166
+ }, U = () => {
167
+ s && (window.removeEventListener("pointermove", N), window.removeEventListener("pointerup", P), window.removeEventListener("pointercancel", P), s = void 0, S.value = !1, document.body && (document.body.style.userSelect = L));
168
+ }, N = (e) => {
169
+ if (!s) return;
170
+ const o = (s.axis === "y" ? e.clientY : e.clientX) - s.pointerStart, n = Math.max(1, s.trackSize - s.thumbSize), d = o / n * s.maxScroll;
171
+ G(s.axis, s.scrollStart + d);
172
+ }, P = () => {
173
+ U();
174
+ }, j = (e, t) => {
153
175
  t.preventDefault(), t.stopPropagation();
154
- const o = p(e), r = u(e), d = S(e);
155
- !o || !r || !d || (a = {
176
+ const o = g(e), n = u(e), d = x(e);
177
+ !o || !n || !d || (s = {
156
178
  axis: e,
157
179
  pointerStart: e === "y" ? t.clientY : t.clientX,
158
- scrollStart: D(e),
180
+ scrollStart: Y(e),
159
181
  trackSize: o,
160
- thumbSize: r,
182
+ thumbSize: n,
161
183
  maxScroll: d
162
- }, y.value = !0, _ = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", X), window.addEventListener("pointerup", x), window.addEventListener("pointercancel", x));
163
- }, $ = (e, t) => {
184
+ }, S.value = !0, L = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", N), window.addEventListener("pointerup", P), window.addEventListener("pointercancel", P));
185
+ }, q = (e, t) => {
164
186
  if (t.target.closest(".nmorph-scroll__thumb")) return;
165
- const r = t.currentTarget.getBoundingClientRect(), d = e === "y" ? t.clientY - r.top : t.clientX - r.left, xe = Math.max(1, p(e) - u(e)), be = (d - u(e) / 2) / xe * S(e);
166
- R(e, be);
187
+ const n = t.currentTarget.getBoundingClientRect(), d = e === "y" ? t.clientY - n.top : t.clientX - n.left, He = Math.max(1, g(e) - u(e)), Be = (d - u(e) / 2) / He * x(e);
188
+ G(e, Be);
167
189
  };
168
- q({ scrollDOMContainer: s, moveTo: H });
169
- const ye = () => {
170
- w.value = !0;
171
- }, Se = () => {
172
- w.value = !1;
190
+ K({ scrollDOMContainer: a, moveTo: M });
191
+ const we = () => {
192
+ T.value = !0;
193
+ }, ze = () => {
194
+ T.value = !1;
173
195
  };
174
- return (e, t) => (T(), W("div", {
196
+ return (e, t) => (O(), _("div", {
175
197
  ref_key: "scrollRoot",
176
- ref: F,
177
- class: Be(ie.value),
178
- style: h(de.value),
179
- onMouseenter: ye,
180
- onMouseleave: Se
198
+ ref: Z,
199
+ class: Oe(he.value),
200
+ style: h(fe.value),
201
+ onMouseenter: we,
202
+ onMouseleave: ze
181
203
  }, [
182
- M("div", {
204
+ k("div", {
183
205
  ref_key: "scrollDOMContainer",
184
- ref: s,
206
+ ref: a,
185
207
  class: "nmorph-scroll__viewport",
186
- style: h(he.value),
187
- onScroll: ae
208
+ style: h(ge.value),
209
+ onScroll: de
188
210
  }, [
189
- Te(e.$slots, "default")
211
+ _e(e.$slots, "default")
190
212
  ], 36),
191
- z.value ? (T(), W("div", {
213
+ W.value ? (O(), _("div", {
192
214
  key: 0,
193
215
  class: "nmorph-scroll__bar nmorph-scroll__bar--vertical",
194
- style: h({ bottom: oe.value }),
195
- onPointerdown: t[1] || (t[1] = (o) => $("y", o))
216
+ style: h({ bottom: se.value }),
217
+ onPointerdown: t[1] || (t[1] = (o) => q("y", o))
196
218
  }, [
197
- M("div", {
219
+ k("div", {
198
220
  class: "nmorph-scroll__thumb nmorph-scroll__thumb--vertical",
199
- style: h(fe.value),
200
- onPointerdown: t[0] || (t[0] = (o) => Y("y", o))
221
+ style: h(xe.value),
222
+ onPointerdown: t[0] || (t[0] = (o) => j("y", o))
201
223
  }, null, 36)
202
- ], 36)) : U("", !0),
203
- B.value ? (T(), W("div", {
224
+ ], 36)) : F("", !0),
225
+ E.value ? (O(), _("div", {
204
226
  key: 1,
205
227
  class: "nmorph-scroll__bar nmorph-scroll__bar--horizontal",
206
- style: h({ right: le.value }),
207
- onPointerdown: t[3] || (t[3] = (o) => $("x", o))
228
+ style: h({ right: ie.value }),
229
+ onPointerdown: t[3] || (t[3] = (o) => q("x", o))
208
230
  }, [
209
- M("div", {
231
+ k("div", {
210
232
  class: "nmorph-scroll__thumb nmorph-scroll__thumb--horizontal",
211
- style: h(ge.value),
212
- onPointerdown: t[2] || (t[2] = (o) => Y("x", o))
233
+ style: h(Pe.value),
234
+ onPointerdown: t[2] || (t[2] = (o) => j("x", o))
213
235
  }, null, 36)
214
- ], 36)) : U("", !0)
236
+ ], 36)) : F("", !0)
215
237
  ], 38));
216
238
  }
217
239
  });
218
240
  export {
219
- ke as default
241
+ Ce as default
220
242
  };
package/dist/components/data/nmorph-file-card/NmorphFileCard.css CHANGED
@@ -1 +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%;height:var(--nmorph-file-card-height, auto);min-height:var(--nmorph-file-card-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{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-file-card .nmorph-file-card__icon-action{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;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__audio-preview,.nmorph-file-card .nmorph-file-card__video-preview,.nmorph-file-card .nmorph-file-card__image-preview{width:100%;min-width:0}.nmorph-file-card .nmorph-file-card__image-preview{display:block;height:var(--nmorph-file-card-media-height, 120px);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-file-card .nmorph-file-card__image-preview .nmorph-file-card__image{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}.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__visual-size{position:absolute;right:var(--indentation-02);bottom:var(--indentation-02);z-index:2;display:inline-flex;align-items:center;min-width:0;max-width:calc(100% - var(--indentation-04));min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.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,.nmorph-file-card .nmorph-file-card__action-loader{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:inherit;line-height:1;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__action-loader{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__action-loader .nmorph-icon{--color: currentColor}.nmorph-file-card.nmorph-file-card--compact{min-height:var(--nmorph-file-card-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--compact .nmorph-file-card__audio-preview,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__video-preview{margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__image-preview{height:var(--nmorph-file-card-media-height, 96px);margin-top:0}.nmorph-file-card.nmorph-file-card--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-visual{position:relative;display:block;gap:0;min-height:0;padding:0;overflow:hidden}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__body{position:relative;display:block;width:100%;min-width:0;height:100%}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__info{position:absolute;top:var(--indentation-02);left:var(--indentation-02);z-index:2;max-width:calc(100% - 48px);pointer-events:none}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__name{display:block;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview__media,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image{display:block;width:100%;max-width:none;height:var(--nmorph-file-card-media-height, 100%);border-radius:inherit;object-fit:cover}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link .nmorph-icon,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-file-card__info{max-width:calc(100% - 112px)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-video-preview__actions{right:calc(var(--indentation-02) + 26px)}.nmorph-file-card.nmorph-file-card--media-image .nmorph-file-card__image-preview{border-radius:inherit}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}
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%;height:var(--nmorph-file-card-height, auto);min-height:var(--nmorph-file-card-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{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-file-card .nmorph-file-card__icon-action{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;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__audio-preview,.nmorph-file-card .nmorph-file-card__video-preview,.nmorph-file-card .nmorph-file-card__image-preview{width:100%;min-width:0}.nmorph-file-card .nmorph-file-card__image-preview{display:block;height:var(--nmorph-file-card-media-height, 120px);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-file-card .nmorph-file-card__image-preview .nmorph-file-card__image{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}.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__visual-size{position:absolute;right:var(--indentation-02);bottom:var(--indentation-02);z-index:2;display:inline-flex;align-items:center;min-width:0;max-width:calc(100% - var(--indentation-04));min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.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,.nmorph-file-card .nmorph-file-card__action-loader{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:inherit;line-height:1;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__action-loader{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__action-loader .nmorph-icon{--color: currentColor}.nmorph-file-card.nmorph-file-card--custom-actions,.nmorph-file-card.nmorph-file-card--compact{position:relative;padding-inline-end:calc(var(--indentation-03) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--custom-actions .nmorph-file-card__actions,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{position:absolute;top:var(--indentation-03);right:var(--indentation-03);z-index:3}.nmorph-file-card.nmorph-file-card--compact{min-height:var(--nmorph-file-card-height, 52px);padding:var(--indentation-02);padding-inline-end:calc(var(--indentation-02) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__audio-preview,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__video-preview{margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__image-preview{height:var(--nmorph-file-card-media-height, 96px);margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{top:var(--indentation-02);right:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-visual{position:relative;display:block;gap:0;min-height:0;padding:0;padding-inline-end:0;overflow:hidden}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__body{position:relative;display:block;width:100%;min-width:0;height:100%}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__info{position:absolute;top:var(--indentation-02);left:var(--indentation-02);z-index:2;max-width:calc(100% - 48px);pointer-events:none}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__name{display:block;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview__media,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image{display:block;width:100%;max-width:none;height:var(--nmorph-file-card-media-height, 100%);border-radius:inherit;object-fit:cover}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link .nmorph-icon,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-file-card__info{max-width:calc(100% - 112px)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-video-preview__actions{right:calc(var(--indentation-02) + 26px)}.nmorph-file-card.nmorph-file-card--media-image .nmorph-file-card__image-preview{border-radius:inherit}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}
package/dist/components/data/nmorph-file-card/NmorphFileCard.vue.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import './NmorphFileCard.css';
2
- import { defineComponent as X, useSlots as Y, ref as Z, computed as o, openBlock as a, createElementBlock as t, Fragment as V, createElementVNode as I, normalizeStyle as ee, normalizeClass as oe, createVNode as n, unref as i, withCtx as v, createBlock as b, resolveDynamicComponent as ae, createCommentVNode as l, toDisplayString as h, renderSlot as re } from "vue";
2
+ import { defineComponent as X, useSlots as Y, ref as Z, computed as o, openBlock as a, createElementBlock as t, Fragment as V, createElementVNode as I, normalizeStyle as ee, normalizeClass as oe, createVNode as n, unref as i, withCtx as v, createBlock as k, resolveDynamicComponent as ae, createCommentVNode as l, toDisplayString as h, renderSlot as re } from "vue";
3
3
  import { NmorphImageResolution as te, NmorphAudioResolution as le, NmorphVideoResolution as ne, NmorphArchiveResolution as ie, NmorphDocResolution as se } from "../../form/nmorph-file-upload/types.js";
4
4
  import { useModifiers as ce } from "../../../utils/create-modifiers.js";
5
5
  import { createCssSizeVariables as me } from "../../../utils/common.js";
@@ -69,19 +69,19 @@ const Se = {
69
69
  },
70
70
  emits: ["open", "download", "error"],
71
71
  setup(L, { emit: R }) {
72
- const e = L, k = R, F = Y(), B = Z(!1), y = o(() => (e.extension || ue(e.name) || de(e.mimeType)).toLowerCase()), c = o(() => pe(e.mimeType, e.name)), W = o(() => e.mimeType.toLowerCase().startsWith("image/") || c.value.some((r) => w(r, te)) ? we : e.mimeType.toLowerCase().startsWith("audio/") || c.value.some((r) => w(r, le)) ? ye : e.mimeType.toLowerCase().startsWith("video/") || c.value.some((r) => w(r, ne)) ? ge : c.value.some((r) => w(r, ie)) ? _e : c.value.some((r) => w(r, se)) ? E : E), G = (r) => {
72
+ const e = L, B = R, F = Y(), N = Z(!1), y = o(() => (e.extension || ue(e.name) || de(e.mimeType)).toLowerCase()), c = o(() => pe(e.mimeType, e.name)), W = o(() => e.mimeType.toLowerCase().startsWith("image/") || c.value.some((r) => w(r, te)) ? we : e.mimeType.toLowerCase().startsWith("audio/") || c.value.some((r) => w(r, le)) ? ye : e.mimeType.toLowerCase().startsWith("video/") || c.value.some((r) => w(r, ne)) ? ge : c.value.some((r) => w(r, ie)) ? _e : c.value.some((r) => w(r, se)) ? E : E), G = (r) => {
73
73
  if (r === void 0 || Number.isNaN(r) || r < 0) return "";
74
74
  if (r === 0) return "0 B";
75
75
  const p = ["B", "KB", "MB", "GB", "TB"], f = Math.min(Math.floor(Math.log(r) / Math.log(1024)), p.length - 1), z = r / 1024 ** f, Q = z >= 10 || f === 0 || Number.isInteger(z) ? 0 : 1;
76
76
  return `${z.toFixed(Q)} ${p[f]}`;
77
- }, N = o(() => e.showSize ? G(e.size) : ""), K = o(() => y.value || e.mimeType), S = o(() => [K.value, N.value].filter(Boolean).join(" · ")), C = o(() => e.mediaPreview === "audio" && !!e.previewSrc && !e.loading && !e.error), m = o(() => e.mediaPreview === "video" && !!e.previewSrc && !e.loading && !e.error), u = o(() => e.mediaPreview === "image" && !!e.previewSrc && !e.loading && !e.error), g = o(
78
- () => C.value || m.value || u.value
77
+ }, S = o(() => e.showSize ? G(e.size) : ""), K = o(() => y.value || e.mimeType), C = o(() => [K.value, S.value].filter(Boolean).join(" · ")), P = o(() => e.mediaPreview === "audio" && !!e.previewSrc && !e.loading && !e.error), m = o(() => e.mediaPreview === "video" && !!e.previewSrc && !e.loading && !e.error), u = o(() => e.mediaPreview === "image" && !!e.previewSrc && !e.loading && !e.error), g = o(
78
+ () => P.value || m.value || u.value
79
79
  ), s = o(() => m.value || u.value), H = o(() => e.height ?? (e.compact ? "96px" : "120px")), U = o(
80
80
  () => me({
81
81
  "--nmorph-file-card-height": e.height,
82
82
  "--nmorph-file-card-media-height": H.value
83
83
  })
84
- ), j = o(() => s.value ? e.showName : e.showName || e.showMeta && !!(e.error && e.errorText || S.value)), P = o(() => !e.previewSrc || e.loading || e.error ? [] : u.value ? [
84
+ ), j = o(() => s.value ? e.showName : e.showName || e.showMeta && !!(e.error && e.errorText || C.value)), A = o(() => !e.previewSrc || e.loading || e.error ? [] : u.value ? [
85
85
  {
86
86
  kind: "image",
87
87
  src: e.previewSrc,
@@ -102,11 +102,11 @@ const Se = {
102
102
  preload: "metadata"
103
103
  }
104
104
  ] : []), q = o(
105
- () => e.previewMode === "internal" && P.value.length > 0
106
- ), M = o(() => e.mimeType.toLowerCase() === "application/pdf" || y.value === "pdf"), D = o(() => M.value ? e.previewSrc || e.downloadHref : ""), A = o(
105
+ () => e.previewMode === "internal" && A.value.length > 0
106
+ ), M = o(() => e.mimeType.toLowerCase() === "application/pdf" || y.value === "pdf"), D = o(() => M.value ? e.previewSrc || e.downloadHref : ""), T = o(
107
107
  () => e.showDefaultActions && !!D.value && !g.value && M.value
108
- ), T = o(() => !!F.actions), $ = o(
109
- () => T.value || e.showDefaultActions && (e.loading || e.previewSrc && !g.value && !A.value || e.downloadHref)
108
+ ), b = o(() => !!F.actions), $ = o(
109
+ () => b.value || e.showDefaultActions && (e.loading || e.previewSrc && !g.value && !T.value || e.downloadHref)
110
110
  ), J = o(
111
111
  () => ce({
112
112
  "nmorph-file-card": [
@@ -115,17 +115,18 @@ const Se = {
115
115
  e.loading && "loading",
116
116
  e.error && "error",
117
117
  g.value && "media",
118
- C.value && "media-audio",
118
+ P.value && "media-audio",
119
119
  m.value && "media-video",
120
120
  u.value && "media-image",
121
121
  s.value && "media-visual",
122
+ b.value && "custom-actions",
122
123
  !e.iconSurface && "icon-plain",
123
124
  !$.value && "no-actions"
124
125
  ]
125
126
  })
126
127
  ), d = () => {
127
- q.value && (B.value = !0), e.previewMode !== "none" && k("open");
128
- }, x = () => k("download"), O = () => k("error");
128
+ q.value && (N.value = !0), e.previewMode !== "none" && B("open");
129
+ }, x = () => B("download"), O = () => B("error");
129
130
  return (r, p) => (a(), t(V, null, [
130
131
  I("div", {
131
132
  class: oe(J.value),
@@ -134,11 +135,11 @@ const Se = {
134
135
  s.value ? l("", !0) : (a(), t("div", Se, [
135
136
  n(i(_), { size: "medium" }, {
136
137
  default: v(() => [
137
- (a(), b(ae(W.value)))
138
+ (a(), k(ae(W.value)))
138
139
  ]),
139
140
  _: 1
140
141
  }),
141
- A.value && !e.loading && !e.error ? (a(), t("a", {
142
+ T.value && !e.loading && !e.error ? (a(), t("a", {
142
143
  key: 0,
143
144
  href: D.value,
144
145
  target: "_blank",
@@ -166,10 +167,10 @@ const Se = {
166
167
  }, [
167
168
  e.showName ? (a(), t("span", Te, h(e.name), 1)) : l("", !0),
168
169
  !s.value && e.showMeta ? (a(), t(V, { key: 1 }, [
169
- e.error && e.errorText ? (a(), t("span", xe, h(e.errorText), 1)) : S.value ? (a(), t("span", ze, h(S.value), 1)) : l("", !0)
170
+ e.error && e.errorText ? (a(), t("span", xe, h(e.errorText), 1)) : C.value ? (a(), t("span", ze, h(C.value), 1)) : l("", !0)
170
171
  ], 64)) : l("", !0)
171
172
  ], 8, Ae)) : l("", !0),
172
- C.value ? (a(), b(fe, {
173
+ P.value ? (a(), k(fe, {
173
174
  key: 1,
174
175
  class: "nmorph-file-card__audio-preview",
175
176
  src: e.previewSrc,
@@ -183,7 +184,7 @@ const Se = {
183
184
  "show-default-actions": !1,
184
185
  onError: O
185
186
  }, null, 8, ["src", "name", "show-playback-button"])) : l("", !0),
186
- m.value ? (a(), b(he, {
187
+ m.value ? (a(), k(he, {
187
188
  key: 2,
188
189
  class: "nmorph-file-card__video-preview",
189
190
  src: e.previewSrc,
@@ -196,8 +197,8 @@ const Se = {
196
197
  "show-meta": !1,
197
198
  "show-playback-button": e.showPlaybackButton,
198
199
  "show-default-actions": !1,
199
- "show-preview-action": !T.value && e.showDefaultActions && e.previewMode !== "none",
200
- "show-fullscreen-action": !T.value && e.showDefaultActions,
200
+ "show-preview-action": !b.value && e.showDefaultActions && e.previewMode !== "none",
201
+ "show-fullscreen-action": !b.value && e.showDefaultActions,
201
202
  "preview-mode": "emit",
202
203
  onError: O,
203
204
  onPreview: d
@@ -217,7 +218,7 @@ const Se = {
217
218
  }, null, 8, He)
218
219
  ], 8, Ie)) : l("", !0)
219
220
  ]),
220
- s.value && N.value ? (a(), t("span", Me, h(N.value), 1)) : l("", !0),
221
+ s.value && S.value ? (a(), t("span", Me, h(S.value), 1)) : l("", !0),
221
222
  e.showExtensionBadge && y.value && !s.value ? (a(), t("span", De, h(y.value), 1)) : l("", !0),
222
223
  $.value ? (a(), t("div", $e, [
223
224
  re(r.$slots, "actions", {
@@ -239,7 +240,7 @@ const Se = {
239
240
  ]),
240
241
  _: 1
241
242
  })
242
- ], 8, Oe)) : e.previewSrc && !g.value && !A.value ? (a(), t("a", {
243
+ ], 8, Oe)) : e.previewSrc && !g.value && !T.value ? (a(), t("a", {
243
244
  key: 1,
244
245
  href: e.previewSrc,
245
246
  target: "_blank",
@@ -273,11 +274,11 @@ const Se = {
273
274
  ])
274
275
  ])) : l("", !0)
275
276
  ], 6),
276
- P.value.length > 0 ? (a(), b(ve, {
277
+ A.value.length > 0 ? (a(), k(ve, {
277
278
  key: 0,
278
- modelValue: B.value,
279
- "onUpdate:modelValue": p[0] || (p[0] = (f) => B.value = f),
280
- items: P.value,
279
+ modelValue: N.value,
280
+ "onUpdate:modelValue": p[0] || (p[0] = (f) => N.value = f),
281
+ items: A.value,
281
282
  "show-navigation-buttons": !1,
282
283
  "show-file-name": e.showName,
283
284
  "show-file-size": e.showSize,
package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.css CHANGED
@@ -1 +1 @@
1
- .nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);width:100%}.nmorph-media-gallery__trigger--fixed-height{grid-auto-rows:var(--nmorph-media-gallery-trigger-height)}.nmorph-media-gallery__trigger-item{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);aspect-ratio:16/9}.nmorph-media-gallery__trigger--fixed-height .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.nmorph-media-gallery__trigger-open{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;color:inherit;font:inherit;text-align:initial;background:transparent;border:0;cursor:pointer}.nmorph-media-gallery__trigger-open .nmorph-image,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;transition:filter var(--transition-03) ease-in-out}.nmorph-media-gallery__trigger-open .nmorph-image img,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;object-fit:cover}.nmorph-media-gallery__trigger-open:hover .nmorph-image,.nmorph-media-gallery__trigger-open:hover .nmorph-media-gallery__trigger-video{filter:brightness(.86)}.nmorph-media-gallery__trigger-name,.nmorph-media-gallery__trigger-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery__trigger-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery__trigger-item--video .nmorph-media-gallery__trigger-name{max-width:calc(100% - 118px)}.nmorph-media-gallery__trigger-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery__trigger-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01)}.nmorph-media-gallery__trigger-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery__trigger-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery__trigger-play{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);pointer-events:none}.nmorph-media-gallery__trigger-play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery.nmorph-media-gallery--video-playing .nmorph-media-gallery__play{opacity:.72}.nmorph-media-gallery .nmorph-media-gallery__file-name,.nmorph-media-gallery .nmorph-media-gallery__file-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery .nmorph-media-gallery__file-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery.nmorph-media-gallery--video .nmorph-media-gallery__file-name{max-width:calc(100% - 92px)}.nmorph-media-gallery .nmorph-media-gallery__file-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery .nmorph-media-gallery__file-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01);pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery .nmorph-media-gallery__file-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__file-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}
1
+ .nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);width:100%}.nmorph-media-gallery__trigger--fixed-height{grid-auto-rows:var(--nmorph-media-gallery-trigger-height)}.nmorph-media-gallery__trigger-item{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);aspect-ratio:16/9}.nmorph-media-gallery__trigger--fixed-height .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.nmorph-media-gallery__trigger-open{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;color:inherit;font:inherit;text-align:initial;background:transparent;border:0;cursor:pointer}.nmorph-media-gallery__trigger-open .nmorph-image,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;transition:filter var(--transition-03) ease-in-out}.nmorph-media-gallery__trigger-open .nmorph-image img,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;object-fit:cover}.nmorph-media-gallery__trigger-open:hover .nmorph-image,.nmorph-media-gallery__trigger-open:hover .nmorph-media-gallery__trigger-video{filter:brightness(.86)}.nmorph-media-gallery__trigger-name,.nmorph-media-gallery__trigger-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery__trigger-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery__trigger-item--video .nmorph-media-gallery__trigger-name{max-width:calc(100% - 118px)}.nmorph-media-gallery__trigger-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery__trigger-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01)}.nmorph-media-gallery__trigger-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery__trigger-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery__trigger-play{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);pointer-events:none}.nmorph-media-gallery__trigger-play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-name,.nmorph-media-gallery .nmorph-media-gallery__file-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery .nmorph-media-gallery__file-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery.nmorph-media-gallery--video .nmorph-media-gallery__file-name{max-width:calc(100% - 92px)}.nmorph-media-gallery .nmorph-media-gallery__file-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery .nmorph-media-gallery__file-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01);pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery .nmorph-media-gallery__file-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__file-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}