@nmorph/nmorph-ui-kit 3.0.17 → 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.
- package/dist/components/basic/nmorph-button/NmorphButton.vue2.js +6 -6
- package/dist/components/basic/nmorph-link/NmorphLink.css +1 -1
- package/dist/components/basic/nmorph-link/NmorphLink.vue2.js +7 -7
- package/dist/components/basic/nmorph-text/NmorphText.vue2.js +1 -1
- package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.css +1 -1
- package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.vue2.js +15 -15
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css +1 -1
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue2.js +8 -8
- package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js +1 -1
- package/dist/components/data/nmorph-empty/NmorphEmpty.css +1 -1
- package/dist/components/data/nmorph-file-card/NmorphFileCard.css +1 -1
- package/dist/components/data/nmorph-file-card/NmorphFileCard.vue2.js +12 -12
- package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.css +1 -1
- package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js +11 -11
- package/dist/components/data/nmorph-media-tile/NmorphMediaTile.css +1 -1
- package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.css +1 -1
- package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css +1 -1
- package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue2.js +12 -12
- package/dist/components/feedback/nmorph-alert/NmorphAlert.css +1 -1
- package/dist/components/feedback/nmorph-callout/NmorphCallout.css +1 -1
- package/dist/components/feedback/nmorph-callout/NmorphCallout.vue2.js +10 -9
- package/dist/components/feedback/nmorph-guide/NmorphGuide.vue2.js +3 -3
- package/dist/components/feedback/nmorph-guide/NmorphGuideStep.css +1 -1
- package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.css +1 -1
- package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.css +1 -1
- package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.css +1 -1
- package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue2.js +22 -22
- package/dist/hooks/use-common-styles.js +1 -1
- package/dist/index.umd.js +3 -3
- package/dist/outside-hooks/use-nmorph-theme.js +12 -12
- package/dist/package.json.js +1 -1
- package/dist/src/components/basic/nmorph-button/NmorphButton.vue.d.ts +0 -1
- package/dist/src/components/basic/nmorph-link/NmorphLink.vue.d.ts +0 -1
- package/dist/src/components/data/nmorph-audio-meter/NmorphAudioMeter.vue.d.ts +0 -6
- package/dist/src/components/data/nmorph-badge/NmorphBadge.vue.d.ts +0 -1
- package/dist/src/components/feedback/nmorph-callout/NmorphCallout.vue.d.ts +0 -1
- package/dist/src/main.d.ts +2 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './NmorphButton.css';
|
|
2
|
-
import { defineComponent as N, useSlots as x, computed as l, ref as _, Fragment as I, Comment as k, Text as
|
|
2
|
+
import { defineComponent as N, useSlots as x, computed as l, ref as _, Fragment as I, Comment as k, Text as f } from "vue";
|
|
3
3
|
import { useModifiers as O } from "../../../utils/create-modifiers.js";
|
|
4
4
|
import { NmorphComponentThickness as C } from "../../../types/common.types.js";
|
|
5
5
|
import M from "../../../assets/icons/loading.svg.js";
|
|
@@ -9,7 +9,7 @@ const E = /* @__PURE__ */ N({
|
|
|
9
9
|
props: {
|
|
10
10
|
design: { type: null, required: !1, default: "nmorph" },
|
|
11
11
|
borderless: { type: Boolean, required: !1, default: !1 },
|
|
12
|
-
color: { type: String, required: !1
|
|
12
|
+
color: { type: String, required: !1 },
|
|
13
13
|
loading: { type: Boolean, required: !1, default: !1 },
|
|
14
14
|
ripple: { type: Boolean, required: !1, default: !0 },
|
|
15
15
|
type: { type: null, required: !1, default: "button" },
|
|
@@ -32,9 +32,9 @@ const E = /* @__PURE__ */ N({
|
|
|
32
32
|
setup(m, { expose: y, emit: h }) {
|
|
33
33
|
const e = m, n = h, r = x(), g = l(() => !!r.icon), i = l(() => !!r["icon-only"]), s = l(() => e.active || !!e.modelValue), a = (t) => t.flatMap(
|
|
34
34
|
(o) => o.type === I && Array.isArray(o.children) ? a(o.children) : o
|
|
35
|
-
), u = (t) => t.type === k || t.type ===
|
|
35
|
+
), u = (t) => t.type === k || t.type === f && typeof t.children == "string" && t.children.trim() === "", b = () => {
|
|
36
36
|
const t = a(r.default?.() ?? []).filter((o) => !u(o));
|
|
37
|
-
return t.length > 0 && t.every((o) => o.type ===
|
|
37
|
+
return t.length > 0 && t.every((o) => o.type === f);
|
|
38
38
|
}, v = l(
|
|
39
39
|
() => O({
|
|
40
40
|
nmorph: [C[e.thickness], e.fill && "fill"],
|
|
@@ -63,12 +63,12 @@ const E = /* @__PURE__ */ N({
|
|
|
63
63
|
!e.toggle || e.disabled || e.loading || n("update:model-value", !e.modelValue);
|
|
64
64
|
};
|
|
65
65
|
y({ buttonDOMElement: d });
|
|
66
|
-
const
|
|
66
|
+
const c = { props: e, emit: n, slots: r, hasIconSlot: g, hasIconOnlySlot: i, active: s, flattenSlotNodes: a, isEmptySlotNode: u, hasTextOnlyDefaultSlot: b, modifiers: v, buttonDOMElement: d, loadingIconSizeMap: p, loadingIconSize: q, buttonColorStyles: B, toggleClickHandler: S, get NmorphIcon() {
|
|
67
67
|
return H;
|
|
68
68
|
}, get NmorphIconLoader() {
|
|
69
69
|
return M;
|
|
70
70
|
} };
|
|
71
|
-
return Object.defineProperty(
|
|
71
|
+
return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
|
|
72
72
|
}
|
|
73
73
|
});
|
|
74
74
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-link{--nmorph-private-link-color: var(--nmorph-accent-color);display:inline-block}.nmorph-link a{display:flex;align-items:center;color:var(--nmorph-private-link-color);text-decoration:none}.nmorph-link .nmorph-link__icon{margin:0 var(--indentation-02);--nmorph-private-icon-color: var(--nmorph-private-link-color)}.nmorph-link:hover{filter:brightness(85%)}.nmorph-link.nmorph-link--underline{position:relative}.nmorph-link.nmorph-link--underline:not(.nmorph-link--disabled):hover:before{position:absolute;right:0;bottom:0;left:0;height:0;border-bottom:1px solid var(--nmorph-private-link-color);content:""}.nmorph-link.nmorph-link--disabled{cursor:not-allowed;opacity:.6}.nmorph-link.nmorph-link--disabled a{pointer-events:none}.nmorph-link.nmorph-link--success{--nmorph-private-link-color: var(--nmorph-success-color)}.nmorph-link.nmorph-link--warning{--nmorph-private-link-color: var(--nmorph-warn-color)}.nmorph-link.nmorph-link--error{--nmorph-private-link-color: var(--nmorph-error-color)}
|
|
1
|
+
.nmorph-link{--nmorph-private-link-color: var(--nmorph-accent-color);display:inline-block}.nmorph-link a{display:flex;align-items:center;color:var(--nmorph-private-link-color);text-decoration:none}.nmorph-link .nmorph-link__icon{margin:0 var(--indentation-02);--nmorph-private-icon-color: var(--nmorph-private-link-color)}.nmorph-link:hover{filter:brightness(85%)}.nmorph-link.nmorph-link--underline{position:relative}.nmorph-link.nmorph-link--underline:not(.nmorph-link--disabled):hover:before{position:absolute;right:0;bottom:0;left:0;height:0;border-bottom:1px solid var(--nmorph-private-link-color);content:""}.nmorph-link.nmorph-link--disabled{cursor:not-allowed;opacity:.6}.nmorph-link.nmorph-link--disabled a{pointer-events:none}.nmorph-link.nmorph-link--success{--nmorph-private-link-color: var(--nmorph-success-text-color)}.nmorph-link.nmorph-link--warning{--nmorph-private-link-color: var(--nmorph-warn-text-color)}.nmorph-link.nmorph-link--error{--nmorph-private-link-color: var(--nmorph-error-text-color)}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import './NmorphLink.css';
|
|
2
2
|
import { defineComponent as y, useSlots as g, computed as r } from "vue";
|
|
3
|
-
import { useModifiers as
|
|
4
|
-
import { createCssVariables as
|
|
5
|
-
import * as
|
|
3
|
+
import { useModifiers as h } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import { createCssVariables as q } from "../../../utils/common.js";
|
|
5
|
+
import * as v from "../nmorph-icon/NmorphIcons.js";
|
|
6
6
|
import { NmorphLinkTarget as S } from "./types.js";
|
|
7
7
|
import { NmorphColor as N } from "../../../types/common.types.js";
|
|
8
8
|
import _ from "../nmorph-icon/NmorphIcon.vue.js";
|
|
@@ -21,20 +21,20 @@ const L = /* @__PURE__ */ y({
|
|
|
21
21
|
ariaLabel: { type: String, required: !1, default: void 0 },
|
|
22
22
|
title: { type: String, required: !1, default: void 0 },
|
|
23
23
|
disabled: { type: Boolean, required: !1, default: !1 },
|
|
24
|
-
color: { type: String, required: !1
|
|
24
|
+
color: { type: String, required: !1 },
|
|
25
25
|
iconName: { type: String, required: !1, default: void 0 }
|
|
26
26
|
},
|
|
27
27
|
setup(n, { expose: d }) {
|
|
28
28
|
d();
|
|
29
|
-
const e = n, s = g(), t =
|
|
29
|
+
const e = n, s = g(), t = v, o = (m) => m.split(/[-_\s]+/).filter(Boolean).map((a) => `${a.charAt(0).toUpperCase()}${a.slice(1)}`).join(""), f = r(() => {
|
|
30
30
|
if (e.iconName)
|
|
31
31
|
return e.iconName in t ? t[e.iconName] : t[`NmorphIcon${o(e.iconName)}`];
|
|
32
32
|
}), p = r(
|
|
33
|
-
() =>
|
|
33
|
+
() => h({
|
|
34
34
|
"nmorph-link": [e.type, e.underline && "underline", e.disabled && "disabled"]
|
|
35
35
|
})
|
|
36
36
|
), u = r(
|
|
37
|
-
() =>
|
|
37
|
+
() => q({
|
|
38
38
|
"--nmorph-private-link-color": e.color
|
|
39
39
|
})
|
|
40
40
|
), l = r(() => S[e.target] ?? e.target), c = r(() => ({
|
|
@@ -29,7 +29,7 @@ const x = /* @__PURE__ */ p({
|
|
|
29
29
|
focus: "var(--nmorph-focus-text-color)",
|
|
30
30
|
accent: "var(--nmorph-accent-color)",
|
|
31
31
|
success: "var(--nmorph-success-text-color)",
|
|
32
|
-
warning: "var(--nmorph-
|
|
32
|
+
warning: "var(--nmorph-warn-text-color)",
|
|
33
33
|
error: "var(--nmorph-error-text-color)",
|
|
34
34
|
white: "var(--nmorph-white-color)"
|
|
35
35
|
}, t = l(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-audio-meter{--nmorph-private-audio-meter-color: var(--nmorph-success-color);--nmorph-private-audio-meter-warn-color: var(--nmorph-warn-color);--nmorph-private-audio-meter-error-color: var(--nmorph-error-color);--nmorph-private-audio-meter-track-color: color-mix(in srgb, var(--nmorph-text-color) 16%, transparent);--nmorph-private-audio-meter-percent: 0%;display:inline-flex;align-items:end}.nmorph-audio-meter.nmorph-audio-meter--warn{--nmorph-private-audio-meter-color: var(--nmorph-private-audio-meter-warn-color)}.nmorph-audio-meter.nmorph-audio-meter--error{--nmorph-private-audio-meter-color: var(--nmorph-private-audio-meter-error-color)}.nmorph-audio-meter.nmorph-audio-meter--bars{gap:2px;width:max-content;height:20px}.nmorph-audio-meter .nmorph-audio-meter__bar{width:4px;height:100%;background:var(--nmorph-private-audio-meter-track-color);border-radius:var(--border-radius-40);opacity:.7}.nmorph-audio-meter .nmorph-audio-meter__bar--active{background:var(--nmorph-private-audio-meter-color);opacity:1}.nmorph-audio-meter.nmorph-audio-meter--line{width:72px;height:6px;overflow:hidden;background:var(--nmorph-private-audio-meter-track-color);border-radius:var(--border-radius-40)}.nmorph-audio-meter .nmorph-audio-meter__line{display:block;width:var(--nmorph-private-audio-meter-percent);height:100%;background:var(--nmorph-private-audio-meter-color)}.nmorph-audio-meter.nmorph-audio-meter--ring{width:28px;height:28px}.nmorph-audio-meter .nmorph-audio-meter__ring{display:block;width:100%;height:100%;background:radial-gradient(circle at center,var(--nmorph-main-color) 56%,transparent 58%),conic-gradient(var(--nmorph-private-audio-meter-color) var(--nmorph-private-audio-meter-percent),var(--nmorph-private-audio-meter-track-color) 0);border-radius:var(--border-radius-circular)}
|
|
1
|
+
.nmorph-audio-meter{--nmorph-private-audio-meter-color: var(--nmorph-success-text-color);--nmorph-private-audio-meter-warn-color: var(--nmorph-warn-text-color);--nmorph-private-audio-meter-error-color: var(--nmorph-error-text-color);--nmorph-private-audio-meter-track-color: color-mix(in srgb, var(--nmorph-text-color) 16%, transparent);--nmorph-private-audio-meter-percent: 0%;display:inline-flex;align-items:end}.nmorph-audio-meter.nmorph-audio-meter--warn{--nmorph-private-audio-meter-color: var(--nmorph-private-audio-meter-warn-color)}.nmorph-audio-meter.nmorph-audio-meter--error{--nmorph-private-audio-meter-color: var(--nmorph-private-audio-meter-error-color)}.nmorph-audio-meter.nmorph-audio-meter--bars{gap:2px;width:max-content;height:20px}.nmorph-audio-meter .nmorph-audio-meter__bar{width:4px;height:100%;background:var(--nmorph-private-audio-meter-track-color);border-radius:var(--border-radius-40);opacity:.7}.nmorph-audio-meter .nmorph-audio-meter__bar--active{background:var(--nmorph-private-audio-meter-color);opacity:1}.nmorph-audio-meter.nmorph-audio-meter--line{width:72px;height:6px;overflow:hidden;background:var(--nmorph-private-audio-meter-track-color);border-radius:var(--border-radius-40)}.nmorph-audio-meter .nmorph-audio-meter__line{display:block;width:var(--nmorph-private-audio-meter-percent);height:100%;background:var(--nmorph-private-audio-meter-color)}.nmorph-audio-meter.nmorph-audio-meter--ring{width:28px;height:28px}.nmorph-audio-meter .nmorph-audio-meter__ring{display:block;width:100%;height:100%;background:radial-gradient(circle at center,var(--nmorph-main-color) 56%,transparent 58%),conic-gradient(var(--nmorph-private-audio-meter-color) var(--nmorph-private-audio-meter-percent),var(--nmorph-private-audio-meter-track-color) 0);border-radius:var(--border-radius-circular)}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
import './NmorphAudioMeter.css';
|
|
2
2
|
import { defineComponent as f, computed as t } from "vue";
|
|
3
|
-
import { useModifiers as
|
|
4
|
-
import { createCssVariables as
|
|
3
|
+
import { useModifiers as c } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import { createCssVariables as v } from "../../../utils/common.js";
|
|
5
5
|
const _ = /* @__PURE__ */ f({
|
|
6
6
|
__name: "NmorphAudioMeter",
|
|
7
7
|
props: {
|
|
8
|
-
value: { type: Number, required: !1
|
|
9
|
-
volumeDb: { type: Number, required: !1
|
|
8
|
+
value: { type: Number, required: !1 },
|
|
9
|
+
volumeDb: { type: Number, required: !1 },
|
|
10
10
|
variant: { type: String, required: !1, default: "bars" },
|
|
11
11
|
bars: { type: Number, required: !1, default: 12 },
|
|
12
12
|
warnThreshold: { type: Number, required: !1, default: 0.7 },
|
|
13
13
|
errorThreshold: { type: Number, required: !1, default: 0.9 },
|
|
14
|
-
color: { type: String, required: !1
|
|
15
|
-
warnColor: { type: String, required: !1
|
|
16
|
-
errorColor: { type: String, required: !1
|
|
17
|
-
trackColor: { type: String, required: !1
|
|
14
|
+
color: { type: String, required: !1 },
|
|
15
|
+
warnColor: { type: String, required: !1 },
|
|
16
|
+
errorColor: { type: String, required: !1 },
|
|
17
|
+
trackColor: { type: String, required: !1 },
|
|
18
18
|
label: { type: String, required: !1, default: "Audio level" }
|
|
19
19
|
},
|
|
20
|
-
setup(n, { expose:
|
|
21
|
-
|
|
22
|
-
const e = n, a = (o) => Math.min(Math.max(o, 0), 1), r = t(() => typeof e.value == "number" ? a(e.value) : typeof e.volumeDb == "number" ? a((e.volumeDb + 60) / 60) : 0), l = t(() => Array.from({ length: Math.max(e.bars, 1) }, (o,
|
|
23
|
-
() =>
|
|
20
|
+
setup(n, { expose: s }) {
|
|
21
|
+
s();
|
|
22
|
+
const e = n, a = (o) => Math.min(Math.max(o, 0), 1), r = t(() => typeof e.value == "number" ? a(e.value) : typeof e.volumeDb == "number" ? a((e.volumeDb + 60) / 60) : 0), l = t(() => Array.from({ length: Math.max(e.bars, 1) }, (o, d) => d)), u = t(() => r.value >= e.errorThreshold ? "error" : r.value >= e.warnThreshold ? "warn" : "normal"), p = t(
|
|
23
|
+
() => c({
|
|
24
24
|
"nmorph-audio-meter": [e.variant, u.value]
|
|
25
25
|
})
|
|
26
|
-
),
|
|
26
|
+
), m = t(() => ({
|
|
27
27
|
"--nmorph-private-audio-meter-percent": `${Math.round(r.value * 100)}%`,
|
|
28
|
-
...
|
|
28
|
+
...v({
|
|
29
29
|
"--nmorph-private-audio-meter-color": e.color,
|
|
30
30
|
"--nmorph-private-audio-meter-warn-color": e.warnColor,
|
|
31
31
|
"--nmorph-private-audio-meter-error-color": e.errorColor,
|
|
32
32
|
"--nmorph-private-audio-meter-track-color": e.trackColor
|
|
33
33
|
})
|
|
34
|
-
})), i = { props: e, clamp: a, level: r, barIndexes: l, state: u, modifiers:
|
|
34
|
+
})), i = { props: e, clamp: a, level: r, barIndexes: l, state: u, modifiers: p, styles: m, isBarActive: (o) => (o + 1) / l.value.length <= r.value };
|
|
35
35
|
return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
|
|
36
36
|
}
|
|
37
37
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-private-audio-preview-width, 360px);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-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border:0;border-radius:var(--default-border-radius);cursor:default;--nmorph-private-icon-color: currentColor}.nmorph-audio-preview button.nmorph-audio-preview__icon{cursor:pointer}.nmorph-audio-preview button.nmorph-audio-preview__icon:disabled{cursor:default}.nmorph-audio-preview .nmorph-audio-preview__play-button{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:20px;height:20px;padding:0;color:var(--nmorph-
|
|
1
|
+
.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-private-audio-preview-width, 360px);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-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border:0;border-radius:var(--default-border-radius);cursor:default;--nmorph-private-icon-color: currentColor}.nmorph-audio-preview button.nmorph-audio-preview__icon{cursor:pointer}.nmorph-audio-preview button.nmorph-audio-preview__icon:disabled{cursor:default}.nmorph-audio-preview .nmorph-audio-preview__play-button{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:20px;height:20px;padding:0;color:var(--nmorph-white-color);background:var(--nmorph-black-color);border:0;border-radius:var(--border-radius-circular);cursor:pointer}.nmorph-audio-preview .nmorph-audio-preview__play-button:hover{background:var(--nmorph-accent-color)}.nmorph-audio-preview .nmorph-audio-preview__play-button .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-white-color);background:var(--nmorph-black-color);border-radius:var(--border-radius-circular)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);box-sizing:border-box;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__header{display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__control{display:flex;gap:var(--indentation-02);align-items:center;width:100%;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__name,.nmorph-audio-preview .nmorph-audio-preview__time,.nmorph-audio-preview .nmorph-audio-preview__error{min-width:0;overflow:hidden;font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-audio-preview .nmorph-audio-preview__name{flex:1 1 auto;font-weight:var(--font-weight-semibold)}.nmorph-audio-preview .nmorph-audio-preview__time{flex:0 0 auto;color:var(--nmorph-semi-contrast-text-color);font-variant-numeric:tabular-nums}.nmorph-audio-preview .nmorph-audio-preview__error{flex:0 1 auto;color:var(--nmorph-error-text-color)}.nmorph-audio-preview .nmorph-audio-preview__range{flex:1 1 0;width:100%;min-width:0;height:6px;padding:0;background:linear-gradient(to right,var(--nmorph-accent-color) var(--nmorph-private-audio-preview-progress, 0%),color-mix(in srgb,var(--nmorph-text-color) 16%,transparent) 0);border-radius:var(--border-radius-100);outline:0;cursor:pointer;appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range:disabled{cursor:default;opacity:.6}.nmorph-audio-preview .nmorph-audio-preview__range::-webkit-slider-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range::-moz-range-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-audio-preview .nmorph-audio-preview__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-audio-preview .nmorph-audio-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__action-link .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-audio-preview.nmorph-audio-preview--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--compact .nmorph-audio-preview__icon{width:30px;height:30px}.nmorph-audio-preview.nmorph-audio-preview--no-actions .nmorph-audio-preview__body{padding-inline-end:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--embedded{width:var(--nmorph-private-audio-preview-width, 100%);min-height:auto;padding:0;background:transparent;border-radius:0;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__body{gap:0;padding-inline-end:0}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range{height:5px}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-webkit-slider-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-moz-range-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--no-header .nmorph-audio-preview__time{flex:0 0 auto}.nmorph-audio-preview.nmorph-audio-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain{background:transparent;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-text-color)}
|
|
@@ -9,7 +9,7 @@ import F from "../../../assets/icons/download.svg.js";
|
|
|
9
9
|
import U from "../../../assets/icons/audio.svg.js";
|
|
10
10
|
import V from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
11
11
|
import G from "../../../assets/icons/loading.svg.js";
|
|
12
|
-
const J = "var(--nmorph-
|
|
12
|
+
const J = "var(--nmorph-white-color)", te = /* @__PURE__ */ C({
|
|
13
13
|
__name: "NmorphAudioPreview",
|
|
14
14
|
props: {
|
|
15
15
|
src: { type: String, required: !0 },
|
|
@@ -31,22 +31,22 @@ const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ C({
|
|
|
31
31
|
},
|
|
32
32
|
emits: ["play", "pause", "open", "download", "error"],
|
|
33
33
|
setup(h, { expose: y, emit: g }) {
|
|
34
|
-
const e = h, n = g,
|
|
34
|
+
const e = h, n = g, p = D(), o = d(null), a = d(!1), u = d(0), s = d(e.durationMs ? e.durationMs / 1e3 : 0);
|
|
35
35
|
O(
|
|
36
36
|
() => e.durationMs,
|
|
37
37
|
(r) => {
|
|
38
38
|
s.value = r ? r / 1e3 : s.value;
|
|
39
39
|
}
|
|
40
40
|
);
|
|
41
|
-
const l = t(() => s.value || 0),
|
|
41
|
+
const l = t(() => s.value || 0), c = t({
|
|
42
42
|
get: () => l.value > 0 ? u.value / l.value * 100 : 0,
|
|
43
43
|
set: (r) => {
|
|
44
44
|
!o.value || l.value <= 0 || (o.value.currentTime = r / 100 * l.value, u.value = o.value.currentTime);
|
|
45
45
|
}
|
|
46
46
|
}), w = t(() => ({
|
|
47
|
-
"--nmorph-private-audio-preview-progress": `${
|
|
47
|
+
"--nmorph-private-audio-preview-progress": `${c.value}%`
|
|
48
48
|
})), f = t(
|
|
49
|
-
() => !!
|
|
49
|
+
() => !!p.actions || e.showDefaultActions && (e.src || e.downloadHref)
|
|
50
50
|
), N = t(
|
|
51
51
|
() => R({
|
|
52
52
|
"nmorph-audio-preview": [
|
|
@@ -67,8 +67,8 @@ const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ C({
|
|
|
67
67
|
})
|
|
68
68
|
), i = (r) => {
|
|
69
69
|
if (!Number.isFinite(r) || r < 0) return "0:00";
|
|
70
|
-
const v = Math.floor(r),
|
|
71
|
-
return `${
|
|
70
|
+
const v = Math.floor(r), k = Math.floor(v / 60), x = v % 60;
|
|
71
|
+
return `${k}:${x.toString().padStart(2, "0")}`;
|
|
72
72
|
}, I = t(() => i(u.value)), q = t(() => i(l.value)), b = async () => {
|
|
73
73
|
if (!(!o.value || !e.showPlaybackButton || e.loading || e.error)) {
|
|
74
74
|
if (a.value) {
|
|
@@ -95,7 +95,7 @@ const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ C({
|
|
|
95
95
|
a.value = !1, n("error", r);
|
|
96
96
|
}, L = () => n("open"), M = () => n("download");
|
|
97
97
|
y({ audioRef: o });
|
|
98
|
-
const m = { CONTRAST_ICON_COLOR: J, props: e, emit: n, slots:
|
|
98
|
+
const m = { CONTRAST_ICON_COLOR: J, props: e, emit: n, slots: p, audioRef: o, playing: a, currentTime: u, durationSeconds: s, resolvedDuration: l, progress: c, progressStyle: w, hasActions: f, modifiers: N, styles: S, formatTime: i, currentTimeLabel: I, durationLabel: q, togglePlayback: b, loadedMetadataHandler: H, timeUpdateHandler: _, playHandler: B, pauseHandler: P, endedHandler: T, errorHandler: A, openHandler: L, downloadHandler: M, get NmorphIcon() {
|
|
99
99
|
return V;
|
|
100
100
|
}, get NmorphIconAudio() {
|
|
101
101
|
return U;
|
|
@@ -5,7 +5,7 @@ import { createCssSizeVariables as F, createCssVariables as H } from "../../../u
|
|
|
5
5
|
const X = /* @__PURE__ */ B({
|
|
6
6
|
__name: "NmorphBadge",
|
|
7
7
|
props: {
|
|
8
|
-
value: { type: [Number, String], required: !1
|
|
8
|
+
value: { type: [Number, String], required: !1 },
|
|
9
9
|
max: { type: Number, required: !1, default: 99 },
|
|
10
10
|
type: { type: String, required: !1, default: "default" },
|
|
11
11
|
ribbonCorner: { type: String, required: !1, default: "top-right" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-empty{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;box-sizing:border-box;width:100%;min-height:var(--nmorph-private-empty-min-height);padding:var(--nmorph-private-empty-padding);color:var(--nmorph-text-color);text-align:center;border-radius:var(--default-border-radius)}.nmorph-empty .nmorph-empty__icon{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-empty-icon-size);height:var(--nmorph-private-empty-icon-size);color:var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__title{max-width:100%;font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__description{max-width:min(420px,100%);color:var(--nmorph-semi-contrast-text-color);font-weight:var(--nmorph-typography-body-font-weight);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__action{display:flex;justify-content:center;max-width:100%;margin-top:4px}.nmorph-empty.nmorph-empty--nmorph{background:var(--nmorph-main-color)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-inset{box-shadow:var(--nmorph-shadow-inset)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-outset{box-shadow:var(--nmorph-shadow-outset)}.nmorph-empty.nmorph-empty--plain{background:color-mix(in srgb,var(--nmorph-
|
|
1
|
+
.nmorph-empty{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;box-sizing:border-box;width:100%;min-height:var(--nmorph-private-empty-min-height);padding:var(--nmorph-private-empty-padding);color:var(--nmorph-text-color);text-align:center;border-radius:var(--default-border-radius)}.nmorph-empty .nmorph-empty__icon{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-empty-icon-size);height:var(--nmorph-private-empty-icon-size);color:var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__title{max-width:100%;font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__description{max-width:min(420px,100%);color:var(--nmorph-semi-contrast-text-color);font-weight:var(--nmorph-typography-body-font-weight);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__action{display:flex;justify-content:center;max-width:100%;margin-top:4px}.nmorph-empty.nmorph-empty--nmorph{background:var(--nmorph-main-color)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-inset{box-shadow:var(--nmorph-shadow-inset)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-outset{box-shadow:var(--nmorph-shadow-outset)}.nmorph-empty.nmorph-empty--plain{background:color-mix(in srgb,var(--nmorph-light-shade-color) 72%,transparent)}
|
|
@@ -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-private-file-card-height, auto);min-height:var(--nmorph-private-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);--nmorph-private-icon-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-
|
|
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-private-file-card-height, auto);min-height:var(--nmorph-private-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);--nmorph-private-icon-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-white-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-private-icon-color: var(--nmorph-white-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:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.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-private-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:var(--font-weight-bold);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height);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-white-color);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height);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{--nmorph-private-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{--nmorph-private-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-private-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-private-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--loading.nmorph-file-card--compact{padding:var(--indentation-03);padding-inline-end:calc(var(--indentation-03) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--loading.nmorph-file-card--compact .nmorph-file-card__actions{top:var(--indentation-03);right:var(--indentation-03)}.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-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)}.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-private-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-white-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-private-icon-color: var(--nmorph-white-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-white-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-text-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}
|
|
@@ -10,14 +10,14 @@ import ee from "../nmorph-video-preview/NmorphVideoPreview.vue.js";
|
|
|
10
10
|
import re from "../../../assets/icons/image.svg.js";
|
|
11
11
|
import oe from "../../../assets/icons/archive.svg.js";
|
|
12
12
|
import x from "../../../assets/icons/doc.svg.js";
|
|
13
|
-
import
|
|
14
|
-
import
|
|
13
|
+
import ae from "../../../assets/icons/open.svg.js";
|
|
14
|
+
import te from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
15
15
|
import ie from "../../../assets/icons/audio.svg.js";
|
|
16
16
|
import ne from "../../../assets/icons/video.svg.js";
|
|
17
17
|
import le from "../../../assets/icons/loading.svg.js";
|
|
18
18
|
import ue from "../../../assets/icons/eye.svg.js";
|
|
19
19
|
import se from "../../../assets/icons/download.svg.js";
|
|
20
|
-
const de = "var(--nmorph-
|
|
20
|
+
const de = "var(--nmorph-white-color)", Me = /* @__PURE__ */ F({
|
|
21
21
|
__name: "NmorphFileCard",
|
|
22
22
|
props: {
|
|
23
23
|
name: { type: String, required: !0 },
|
|
@@ -45,14 +45,14 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
|
|
|
45
45
|
emits: ["open", "download", "error"],
|
|
46
46
|
setup(C, { expose: M, emit: _ }) {
|
|
47
47
|
M();
|
|
48
|
-
const e = C, l = _, h = E(), w = V(!1), s = r(() => (e.extension || Q(e.name) || U(e.mimeType)).toLowerCase()),
|
|
48
|
+
const e = C, l = _, h = E(), w = V(!1), s = r(() => (e.extension || Q(e.name) || U(e.mimeType)).toLowerCase()), a = r(() => X(e.mimeType, e.name)), O = r(() => e.mimeType.toLowerCase().startsWith("image/") || a.value.some((o) => n(o, k)) ? re : e.mimeType.toLowerCase().startsWith("audio/") || a.value.some((o) => n(o, G)) ? ie : e.mimeType.toLowerCase().startsWith("video/") || a.value.some((o) => n(o, W)) ? ne : a.value.some((o) => n(o, j)) ? oe : a.value.some((o) => n(o, K)) ? x : x), g = (o) => {
|
|
49
49
|
if (o === void 0 || Number.isNaN(o) || o < 0) return "";
|
|
50
50
|
if (o === 0) return "0 B";
|
|
51
51
|
const b = ["B", "KB", "MB", "GB", "TB"], c = Math.min(Math.floor(Math.log(o) / Math.log(1024)), b.length - 1), v = o / 1024 ** c, z = v >= 10 || c === 0 || Number.isInteger(v) ? 0 : 1;
|
|
52
52
|
return `${v.toFixed(z)} ${b[c]}`;
|
|
53
|
-
}, y = r(() => e.showSize ? g(e.size) : ""), N = r(() => s.value || e.mimeType), S = r(() => [N.value, y.value].filter(Boolean).join(" · ")), d = r(() => e.mediaPreview === "audio" && !!e.previewSrc && !e.loading && !e.error),
|
|
54
|
-
() => d.value ||
|
|
55
|
-
), m = r(() =>
|
|
53
|
+
}, y = r(() => e.showSize ? g(e.size) : ""), N = r(() => s.value || e.mimeType), S = r(() => [N.value, y.value].filter(Boolean).join(" · ")), d = r(() => e.mediaPreview === "audio" && !!e.previewSrc && !e.loading && !e.error), t = r(() => e.mediaPreview === "video" && !!e.previewSrc && !e.loading && !e.error), i = r(() => e.mediaPreview === "image" && !!e.previewSrc && !e.loading && !e.error), u = r(
|
|
54
|
+
() => d.value || t.value || i.value
|
|
55
|
+
), m = r(() => t.value || i.value), B = r(() => e.height ?? (e.compact ? "96px" : "120px")), L = r(
|
|
56
56
|
() => J({
|
|
57
57
|
"--nmorph-private-file-card-height": e.height,
|
|
58
58
|
"--nmorph-private-file-card-media-height": B.value
|
|
@@ -66,7 +66,7 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
|
|
|
66
66
|
size: e.size,
|
|
67
67
|
downloadHref: e.downloadHref
|
|
68
68
|
}
|
|
69
|
-
] :
|
|
69
|
+
] : t.value ? [
|
|
70
70
|
{
|
|
71
71
|
kind: "video",
|
|
72
72
|
src: e.previewSrc,
|
|
@@ -92,7 +92,7 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
|
|
|
92
92
|
e.error && "error",
|
|
93
93
|
u.value && "media",
|
|
94
94
|
d.value && "media-audio",
|
|
95
|
-
|
|
95
|
+
t.value && "media-video",
|
|
96
96
|
i.value && "media-image",
|
|
97
97
|
m.value && "media-visual",
|
|
98
98
|
f.value && "custom-actions",
|
|
@@ -100,10 +100,10 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
|
|
|
100
100
|
!T.value && "no-actions"
|
|
101
101
|
]
|
|
102
102
|
})
|
|
103
|
-
), H = { CONTRAST_ICON_COLOR: de, props: e, emit: l, slots: h, previewOpen: w, extension: s, candidates:
|
|
103
|
+
), H = { CONTRAST_ICON_COLOR: de, props: e, emit: l, slots: h, previewOpen: w, extension: s, candidates: a, icon: O, formatSize: g, fileSize: y, typeLabel: N, meta: S, audioPreviewAvailable: d, videoPreviewAvailable: t, imagePreviewAvailable: i, mediaPreviewAvailable: u, visualMediaPreviewAvailable: m, mediaPreviewHeight: B, styles: L, showInfo: D, mediaGalleryItems: I, shouldOpenInternalPreview: q, isPdf: p, pdfPreviewHref: P, previewOnIcon: A, hasCustomActions: f, hasActions: T, modifiers: R, openHandler: () => {
|
|
104
104
|
q.value && (w.value = !0), e.previewMode !== "none" && l("open");
|
|
105
105
|
}, downloadHandler: () => l("download"), errorHandler: () => l("error"), get NmorphIcon() {
|
|
106
|
-
return
|
|
106
|
+
return te;
|
|
107
107
|
}, get NmorphIconDownload() {
|
|
108
108
|
return se;
|
|
109
109
|
}, get NmorphIconEye() {
|
|
@@ -111,7 +111,7 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
|
|
|
111
111
|
}, get NmorphIconLoader() {
|
|
112
112
|
return le;
|
|
113
113
|
}, get NmorphIconOpen() {
|
|
114
|
-
return
|
|
114
|
+
return ae;
|
|
115
115
|
}, NmorphAudioPreview: Y, NmorphMediaGallery: Z, NmorphVideoPreview: ee };
|
|
116
116
|
return Object.defineProperty(H, "__isScriptSetup", { enumerable: !1, value: !0 }), H;
|
|
117
117
|
}
|
|
@@ -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-
|
|
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}
|
|
@@ -24,8 +24,8 @@ const w = ["aria-label", "onClick"], p = ["src", "poster", "title"], N = {
|
|
|
24
24
|
}, L = ["aria-label"], B = ["href", "download", "aria-label"], A = {
|
|
25
25
|
key: 4,
|
|
26
26
|
class: "nmorph-media-gallery__file-size"
|
|
27
|
-
}, E = { class: "nmorph-media-gallery__action-element" }, V = { class: "nmorph-media-gallery__action-element" }, R = { class: "nmorph-media-gallery__action-element" }, M = { class: "nmorph-media-gallery__action-element" },
|
|
28
|
-
function
|
|
27
|
+
}, E = { class: "nmorph-media-gallery__action-element" }, V = { class: "nmorph-media-gallery__action-element" }, R = { class: "nmorph-media-gallery__action-element" }, M = { class: "nmorph-media-gallery__action-element" }, O = { class: "nmorph-media-gallery__action-element" };
|
|
28
|
+
function G(U, Z, W, o, j, q) {
|
|
29
29
|
return l(), n(
|
|
30
30
|
g,
|
|
31
31
|
null,
|
|
@@ -82,7 +82,7 @@ function O(G, U, Z, o, W, j) {
|
|
|
82
82
|
o.props.showTriggerPlayButton && r.kind === "video" ? (l(), n("span", N, [
|
|
83
83
|
e(o.NmorphIcon, {
|
|
84
84
|
size: "medium",
|
|
85
|
-
color: "var(--nmorph-
|
|
85
|
+
color: "var(--nmorph-white-color)"
|
|
86
86
|
}, {
|
|
87
87
|
default: a(() => [
|
|
88
88
|
e(o.NmorphIconPlay)
|
|
@@ -116,7 +116,7 @@ function O(G, U, Z, o, W, j) {
|
|
|
116
116
|
}, [
|
|
117
117
|
e(o.NmorphIcon, {
|
|
118
118
|
size: "small",
|
|
119
|
-
color: "var(--nmorph-
|
|
119
|
+
color: "var(--nmorph-white-color)"
|
|
120
120
|
}, {
|
|
121
121
|
default: a(() => [
|
|
122
122
|
e(o.NmorphIconEye)
|
|
@@ -134,7 +134,7 @@ function O(G, U, Z, o, W, j) {
|
|
|
134
134
|
}, [
|
|
135
135
|
e(o.NmorphIcon, {
|
|
136
136
|
size: "small",
|
|
137
|
-
color: "var(--nmorph-
|
|
137
|
+
color: "var(--nmorph-white-color)"
|
|
138
138
|
}, {
|
|
139
139
|
default: a(() => [
|
|
140
140
|
e(o.NmorphIconFullScreen)
|
|
@@ -153,7 +153,7 @@ function O(G, U, Z, o, W, j) {
|
|
|
153
153
|
}, [
|
|
154
154
|
e(o.NmorphIcon, {
|
|
155
155
|
size: "small",
|
|
156
|
-
color: "var(--nmorph-
|
|
156
|
+
color: "var(--nmorph-white-color)"
|
|
157
157
|
}, {
|
|
158
158
|
default: a(() => [
|
|
159
159
|
e(o.NmorphIconDownload)
|
|
@@ -272,7 +272,7 @@ function O(G, U, Z, o, W, j) {
|
|
|
272
272
|
/* STABLE */
|
|
273
273
|
})
|
|
274
274
|
]),
|
|
275
|
-
c("div",
|
|
275
|
+
c("div", O, [
|
|
276
276
|
e(o.NmorphButton, {
|
|
277
277
|
class: "nmorph-preview-portal__control-button",
|
|
278
278
|
design: "plain",
|
|
@@ -342,7 +342,7 @@ function O(G, U, Z, o, W, j) {
|
|
|
342
342
|
}, [
|
|
343
343
|
e(o.NmorphIcon, {
|
|
344
344
|
size: "small",
|
|
345
|
-
color: "var(--nmorph-
|
|
345
|
+
color: "var(--nmorph-white-color)"
|
|
346
346
|
}, {
|
|
347
347
|
default: a(() => [
|
|
348
348
|
e(o.NmorphIconFullScreen)
|
|
@@ -361,7 +361,7 @@ function O(G, U, Z, o, W, j) {
|
|
|
361
361
|
}, [
|
|
362
362
|
e(o.NmorphIcon, {
|
|
363
363
|
size: "small",
|
|
364
|
-
color: "var(--nmorph-
|
|
364
|
+
color: "var(--nmorph-white-color)"
|
|
365
365
|
}, {
|
|
366
366
|
default: a(() => [
|
|
367
367
|
e(o.NmorphIconDownload)
|
|
@@ -388,7 +388,7 @@ function O(G, U, Z, o, W, j) {
|
|
|
388
388
|
/* STABLE_FRAGMENT */
|
|
389
389
|
);
|
|
390
390
|
}
|
|
391
|
-
const
|
|
391
|
+
const Y = /* @__PURE__ */ I(y, [["render", G], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue"]]);
|
|
392
392
|
export {
|
|
393
|
-
|
|
393
|
+
Y as default
|
|
394
394
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile.nmorph-media-tile--video{aspect-ratio:16/9}.nmorph-media-tile.nmorph-media-tile--fill{width:100%;height:100%;aspect-ratio:auto}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-title-large-font-size);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{color:var(--nmorph-text-color)}.nmorph-media-tile .nmorph-media-tile__status-item .nmorph-button__content{width:28px;min-width:28px;height:24px;min-height:24px;padding:0;color:currentColor;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-color:color-mix(in srgb,currentColor 35%,transparent);border-radius:var(--default-border-radius)}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-color)}.nmorph-media-tile.nmorph-media-tile--plain{border:var(--nmorph-plain-border);box-shadow:none}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-color)}
|
|
1
|
+
.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile.nmorph-media-tile--video{aspect-ratio:16/9}.nmorph-media-tile.nmorph-media-tile--fill{width:100%;height:100%;aspect-ratio:auto}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-title-large-font-size);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{color:var(--nmorph-text-color)}.nmorph-media-tile .nmorph-media-tile__status-item .nmorph-button__content{width:28px;min-width:28px;height:24px;min-height:24px;padding:0;color:currentColor;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-color:color-mix(in srgb,currentColor 35%,transparent);border-radius:var(--default-border-radius)}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-text-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-text-color)}.nmorph-media-tile.nmorph-media-tile--plain{border:var(--nmorph-plain-border);box-shadow:none}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-text-color)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-private-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-private-preview-portal-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-preview-portal-content-width);height:var(--nmorph-private-preview-portal-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-preview-portal .nmorph-preview-portal__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-preview-portal .nmorph-button__content{box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__control-button{background:var(--nmorph-overlay-color);border-radius:4px}.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content,.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-
|
|
1
|
+
.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-private-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-private-preview-portal-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-preview-portal-content-width);height:var(--nmorph-private-preview-portal-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-preview-portal .nmorph-preview-portal__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-preview-portal .nmorph-button__content{box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__control-button{background:var(--nmorph-overlay-color);border-radius:4px}.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content,.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-white-color);background:transparent;border:0;box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content .nmorph-icon,.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-preview-portal .nmorph-preview-portal__left,.nmorph-preview-portal .nmorph-preview-portal__right{z-index:2}.nmorph-preview-portal .nmorph-preview-portal__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-preview-portal .nmorph-preview-portal__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__actions{bottom:50px}.nmorph-preview-portal.nmorph-preview-portal--opened{--nmorph-private-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-private-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-private-preview-portal-btn-margin)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-private-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-private-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center;pointer-events:none}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-
|
|
1
|
+
.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-private-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-private-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center;pointer-events:none}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-white-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}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-video-preview .nmorph-video-preview__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview.nmorph-video-preview--embedded{width:var(--nmorph-private-video-preview-width, 100%);height:var(--nmorph-private-video-preview-height, 120px);box-shadow:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:0;background:transparent}.nmorph-video-preview .nmorph-video-preview__action-button,.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;padding:0;color:var(--nmorph-white-color);font:inherit;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-video-preview .nmorph-video-preview__action-button:hover,.nmorph-video-preview .nmorph-video-preview__action-link:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-button .nmorph-icon,.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-private-video-preview-width, 180px);height:var(--nmorph-private-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-text-color)}.nmorph-video-preview__portal{display:contents}.nmorph-video-preview__portal .nmorph-video-preview__portal-content{--nmorph-private-video-preview-portal-width: min( calc(100vw - 96px) , 1080px);--nmorph-private-video-preview-portal-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-video-preview-portal-width);height:var(--nmorph-private-video-preview-portal-height);transform:translate(-50%,-50%)}.nmorph-video-preview__portal .nmorph-video-preview__portal-media{display:block;width:100%;max-width:100%;height:100%;max-height:100%;object-fit:contain;background:var(--nmorph-black-color);border-radius:var(--default-border-radius)}
|