@nmorph/nmorph-ui-kit 3.0.18 → 3.0.19
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);box-sizing:border-box;width:100%;max-width:100%}.nmorph-media-gallery__trigger--fixed-height{grid-auto-rows:var(--nmorph-private-media-gallery-trigger-height)}.nmorph-media-gallery__trigger--fixed-height:not(.nmorph-media-gallery__trigger--natural,.nmorph-media-gallery__trigger--mosaic) .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.nmorph-media-gallery__trigger--natural,.nmorph-media-gallery__trigger--mosaic{display:flex;flex-wrap:wrap;align-items:flex-start}.nmorph-media-gallery__trigger--natural.nmorph-media-gallery__trigger--paired{flex-wrap:nowrap}.nmorph-media-gallery__trigger--natural .nmorph-media-gallery__trigger-item,.nmorph-media-gallery__trigger--mosaic .nmorph-media-gallery__trigger-item{flex-shrink:1;flex-basis:var(--nmorph-private-media-gallery-trigger-item-basis);width:auto;max-width:100%;aspect-ratio:var(--nmorph-private-media-gallery-trigger-item-ratio)}.nmorph-media-gallery__trigger-item{position:relative;box-sizing:border-box;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);aspect-ratio:16/9}.nmorph-media-gallery__trigger--plain .nmorph-media-gallery__trigger-item{border:var(--nmorph-plain-border);box-shadow:none}.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:after{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--nmorph-black-color) 38%,transparent),transparent 42%),linear-gradient(0deg,color-mix(in srgb,var(--nmorph-black-color) 28%,transparent),transparent 48%);content:"";pointer-events:none}.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,transform 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%}.nmorph-media-gallery__trigger-open .nmorph-image img{object-fit:var(--nmorph-private-media-gallery-trigger-image-fit)}.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{object-fit:var(--nmorph-private-media-gallery-trigger-video-fit)}.nmorph-media-gallery__trigger-open:hover .nmorph-image,.nmorph-media-gallery__trigger-open:hover .nmorph-media-gallery__trigger-video{transform:scale(1.035);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-white-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:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.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(--nmorph-typography-caption-font-size)}.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-white-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-private-icon-color: var(--nmorph-white-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-white-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-white-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-private-icon-color: var(--nmorph-white-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-white-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:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.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(--nmorph-typography-caption-font-size)}.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:
|
|
1
|
+
.nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);box-sizing:border-box;width:100%;max-width:100%}.nmorph-media-gallery__trigger--fixed-height{grid-auto-rows:var(--nmorph-private-media-gallery-trigger-height)}.nmorph-media-gallery__trigger--fixed-height:not(.nmorph-media-gallery__trigger--natural,.nmorph-media-gallery__trigger--mosaic) .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.nmorph-media-gallery__trigger--natural,.nmorph-media-gallery__trigger--mosaic{display:flex;flex-wrap:wrap;align-items:flex-start}.nmorph-media-gallery__trigger--natural.nmorph-media-gallery__trigger--paired{flex-wrap:nowrap}.nmorph-media-gallery__trigger--natural .nmorph-media-gallery__trigger-item,.nmorph-media-gallery__trigger--mosaic .nmorph-media-gallery__trigger-item{flex-shrink:1;flex-basis:var(--nmorph-private-media-gallery-trigger-item-basis);width:auto;max-width:100%;aspect-ratio:var(--nmorph-private-media-gallery-trigger-item-ratio)}.nmorph-media-gallery__trigger-item{position:relative;box-sizing:border-box;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);aspect-ratio:16/9}.nmorph-media-gallery__trigger--plain .nmorph-media-gallery__trigger-item{border:var(--nmorph-plain-border);box-shadow:none}.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:after{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--nmorph-black-color) 38%,transparent),transparent 42%),linear-gradient(0deg,color-mix(in srgb,var(--nmorph-black-color) 28%,transparent),transparent 48%);content:"";pointer-events:none}.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,transform 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%}.nmorph-media-gallery__trigger-open .nmorph-image img{object-fit:var(--nmorph-private-media-gallery-trigger-image-fit)}.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{object-fit:var(--nmorph-private-media-gallery-trigger-video-fit)}.nmorph-media-gallery__trigger-open:hover .nmorph-image,.nmorph-media-gallery__trigger-open:hover .nmorph-media-gallery__trigger-video{transform:scale(1.035);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-white-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:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.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(--nmorph-typography-caption-font-size)}.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-white-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-private-icon-color: var(--nmorph-white-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-white-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-white-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-private-icon-color: var(--nmorph-white-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-white-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:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.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(--nmorph-typography-caption-font-size)}.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:30px;height:30px;padding:0;color:var(--nmorph-white-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-private-icon-color: var(--nmorph-white-color)}.nmorph-media-gallery .nmorph-media-gallery__file-action .nmorph-icon svg{width:18px;height:18px}.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}
|
|
@@ -46,13 +46,13 @@ const ne = "var(--nmorph-white-color)", m = 0.25, Ne = /* @__PURE__ */ $({
|
|
|
46
46
|
},
|
|
47
47
|
emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
|
|
48
48
|
setup(B, { expose: P, emit: _ }) {
|
|
49
|
-
const e = B, n = _,
|
|
49
|
+
const e = B, n = _, h = j(), l = p(null), c = p(!1), o = p(!1), s = p(!1), v = (r) => {
|
|
50
50
|
if (!r || r < 0) return "";
|
|
51
|
-
const a = Math.round(r / 1e3),
|
|
52
|
-
return `${
|
|
53
|
-
}, A = t(() =>
|
|
51
|
+
const a = Math.round(r / 1e3), i = Math.floor(a / 60), f = a % 60;
|
|
52
|
+
return `${i}:${f.toString().padStart(2, "0")}`;
|
|
53
|
+
}, A = t(() => v(e.durationMs)), u = t(() => !!e.src && !e.loading && !e.error), H = t(() => e.showPlaybackButton && u.value), F = t(
|
|
54
54
|
() => e.showPlaybackButton && e.preload === "metadata" ? "auto" : e.preload
|
|
55
|
-
), y = t(() => e.showFullscreenAction && u.value && !e.controls), w = t(() => u.value && (e.showPreviewAction || y.value)), g = t(() => e.showDefaultActions && (e.src || e.downloadHref)), N = t(() => !!
|
|
55
|
+
), y = t(() => e.showFullscreenAction && u.value && !e.controls), w = t(() => u.value && (e.showPreviewAction || y.value)), g = t(() => e.showDefaultActions && (e.src || e.downloadHref)), N = t(() => !!h.actions || w.value || g.value), q = t(
|
|
56
56
|
() => U({
|
|
57
57
|
"nmorph-video-preview": [
|
|
58
58
|
e.surface,
|
|
@@ -77,7 +77,7 @@ const ne = "var(--nmorph-white-color)", m = 0.25, Ne = /* @__PURE__ */ $({
|
|
|
77
77
|
z(
|
|
78
78
|
() => [e.src, e.loading, e.error],
|
|
79
79
|
() => {
|
|
80
|
-
o.value = !1,
|
|
80
|
+
o.value = !1, s.value = !1;
|
|
81
81
|
}
|
|
82
82
|
);
|
|
83
83
|
const O = () => n("open"), k = () => n("download"), M = () => {
|
|
@@ -99,7 +99,7 @@ const ne = "var(--nmorph-white-color)", m = 0.25, Ne = /* @__PURE__ */ $({
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
}, x = async () => {
|
|
102
|
-
if (!(!l.value || e.loading || e.error
|
|
102
|
+
if (!(!l.value || e.loading || e.error)) {
|
|
103
103
|
if (o.value) {
|
|
104
104
|
l.value.pause();
|
|
105
105
|
return;
|
|
@@ -113,16 +113,16 @@ const ne = "var(--nmorph-white-color)", m = 0.25, Ne = /* @__PURE__ */ $({
|
|
|
113
113
|
}, b = (r) => {
|
|
114
114
|
const a = r.duration;
|
|
115
115
|
if (!Number.isFinite(a) || a <= 0) return !1;
|
|
116
|
-
const
|
|
117
|
-
for (let d = 0; d <
|
|
116
|
+
const i = r.buffered, f = Math.max(0, a - m);
|
|
117
|
+
for (let d = 0; d < i.length; d += 1)
|
|
118
118
|
try {
|
|
119
|
-
if (
|
|
119
|
+
if (i.start(d) <= m && i.end(d) >= f) return !0;
|
|
120
120
|
} catch {
|
|
121
121
|
return !1;
|
|
122
122
|
}
|
|
123
123
|
return !1;
|
|
124
124
|
}, C = () => {
|
|
125
|
-
|
|
125
|
+
s.value = l.value ? b(l.value) : !1;
|
|
126
126
|
}, V = (r) => {
|
|
127
127
|
o.value = !0, n("play", r);
|
|
128
128
|
}, R = (r) => {
|
|
@@ -130,10 +130,10 @@ const ne = "var(--nmorph-white-color)", m = 0.25, Ne = /* @__PURE__ */ $({
|
|
|
130
130
|
}, T = () => {
|
|
131
131
|
o.value = !1;
|
|
132
132
|
}, W = (r) => {
|
|
133
|
-
o.value = !1,
|
|
133
|
+
o.value = !1, s.value = !1, n("error", r);
|
|
134
134
|
};
|
|
135
135
|
P({ videoRef: l });
|
|
136
|
-
const I = { CONTRAST_ICON_COLOR: ne, VIDEO_BUFFER_EPSILON_SECONDS: m, props: e, emit: n, slots:
|
|
136
|
+
const I = { CONTRAST_ICON_COLOR: ne, VIDEO_BUFFER_EPSILON_SECONDS: m, props: e, emit: n, slots: h, videoRef: l, previewOpen: c, playing: o, videoLoaded: s, formatDuration: v, duration: A, mediaReady: u, showPlaybackControl: H, resolvedPreload: F, showFullscreenAction: y, hasPreviewActions: w, hasDefaultActions: g, hasActions: N, modifiers: q, styles: S, rootAttrs: E, openHandler: O, downloadHandler: k, previewHandler: M, closePreviewHandler: D, fullscreenHandler: L, togglePlayback: x, isVideoFullyBuffered: b, updateVideoLoaded: C, playHandler: V, pauseHandler: R, endedHandler: T, errorHandler: W, get NmorphIcon() {
|
|
137
137
|
return X;
|
|
138
138
|
}, get NmorphIconDownload() {
|
|
139
139
|
return ae;
|