@nmorph/nmorph-ui-kit 3.0.5 → 3.0.6
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-icon/NmorphIcon.vue2.js +9 -9
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css +1 -1
- package/dist/components/data/nmorph-card/NmorphCard.css +1 -1
- package/dist/components/data/nmorph-card/NmorphCard.vue2.js +18 -15
- package/dist/components/data/nmorph-file-card/NmorphFileCard.css +1 -1
- package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue.js +19 -19
- package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue2.js +60 -37
- package/dist/components/data/nmorph-table/NmorphTable.vue.js +114 -162
- package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css +1 -1
- package/dist/components/form/nmorph-select-button/NmorphSelectButton.css +1 -1
- package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.css +1 -1
- package/dist/index.umd.js +9 -9
- package/dist/package.json.js +1 -1
- package/dist/src/components/basic/nmorph-icon/NmorphIcon.vue.d.ts +0 -3
- package/dist/src/components/data/nmorph-table/NmorphTable.vue.d.ts +0 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import './NmorphIcon.css';
|
|
2
|
-
import { defineComponent as p, computed as
|
|
3
|
-
import { useModifiers as
|
|
2
|
+
import { defineComponent as p, computed as r } from "vue";
|
|
3
|
+
import { useModifiers as c } from "../../../utils/create-modifiers.js";
|
|
4
4
|
const l = /* @__PURE__ */ p({
|
|
5
5
|
__name: "NmorphIcon",
|
|
6
6
|
props: {
|
|
7
7
|
size: { type: null, required: !1, default: "small" },
|
|
8
|
-
width: { type: String, required: !1
|
|
9
|
-
height: { type: String, required: !1
|
|
10
|
-
color: { type: String, required: !1
|
|
8
|
+
width: { type: String, required: !1 },
|
|
9
|
+
height: { type: String, required: !1 },
|
|
10
|
+
color: { type: String, required: !1 }
|
|
11
11
|
},
|
|
12
|
-
setup(
|
|
12
|
+
setup(o, { expose: s }) {
|
|
13
13
|
s();
|
|
14
|
-
const e =
|
|
15
|
-
() =>
|
|
14
|
+
const e = o, n = r(
|
|
15
|
+
() => c({
|
|
16
16
|
"nmorph-icon": [
|
|
17
17
|
!e.width && !e.height && e.size,
|
|
18
18
|
e.width && "custom-width",
|
|
19
19
|
e.height && "custom-height"
|
|
20
20
|
]
|
|
21
21
|
})
|
|
22
|
-
), h =
|
|
22
|
+
), h = r(() => {
|
|
23
23
|
const t = {};
|
|
24
24
|
return e.width && (t["--nmorph-private-icon-width"] = e.width), e.height && (t["--nmorph-private-icon-height"] = e.height), e.color && (t["--nmorph-private-icon-color"] = e.color), t;
|
|
25
25
|
}), i = { props: e, modifiers: n, customStyles: h };
|
|
@@ -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-contrast-text-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-contrast-text-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-contrast-text-color);background:var(--nmorph-black-color);border-radius:var(--border-radius-circular)
|
|
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-contrast-text-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-contrast-text-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-contrast-text-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-contrast-text-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-color)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-card{--nmorph-private-card-padding: var(--indentation-04);--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: none;--nmorph-private-card-shadow: none;--nmorph-private-card-paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.72' filter='url(%23n)'/%3E%3C/svg%3E");--nmorph-private-card-paper-opacity: 0;--nmorph-private-card-paper-shadow-color: color-mix(in srgb, var(--nmorph-dark-shade-color) 82%, transparent);--nmorph-private-card-paper-light-color: color-mix(in srgb, var(--nmorph-light-shade-color) 76%, transparent);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--nmorph-private-card-padding);background:var(--nmorph-private-card-background);border:var(--nmorph-private-card-border);border-radius:var(--nmorph-private-card-radius, var(--default-border-radius));box-shadow:var(--nmorph-private-card-shadow)}.nmorph-card:before{position:absolute;z-index:0;background-image:var(--nmorph-private-card-paper-noise),radial-gradient(circle at 1px 1px,var(--nmorph-private-card-paper-shadow-color) 0 1px,transparent 1.7px),radial-gradient(circle at 6px 4px,var(--nmorph-private-card-paper-light-color) 0 1px,transparent 1.8px);background-size:72px 72px,11px 11px,16px 16px;border-radius:inherit;opacity:var(--nmorph-private-card-paper-opacity);pointer-events:none;content:"";inset:0}.nmorph-card.nmorph-card--fill{width:100%}.nmorph-card .nmorph-card__header,.nmorph-card .nmorph-card__content{position:relative;z-index:1}.nmorph-card .nmorph-card__content{height:100%;padding:var(--nmorph-private-card-content-padding, 0)}.nmorph-card .nmorph-card__header{font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height)}.nmorph-card .nmorph-card__footer{position:relative;z-index:1;height:fit-content;margin-top:4px;font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-card.nmorph-card--nmorph{--nmorph-private-card-background: var(--nmorph-main-color)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--outset{--nmorph-private-card-shadow: var(--nmorph-shadow-outset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--inset{--nmorph-private-card-shadow: var(--nmorph-shadow-inset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--combined{--nmorph-private-card-border: var(--nmorph-private-card-combined-border-width) solid var(--nmorph-main-color);--nmorph-private-card-shadow: var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color), calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color), inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color), inset calc(-1 * var(--base-shadow-width)) calc(-.5 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-card.nmorph-card--plain{--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: var(--nmorph-plain-border);--nmorph-private-card-shadow: none}
|
|
1
|
+
.nmorph-card{--nmorph-private-card-padding: var(--indentation-04);--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: none;--nmorph-private-card-shadow: none;--nmorph-private-card-paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.72' filter='url(%23n)'/%3E%3C/svg%3E");--nmorph-private-card-paper-light-opacity: 0;--nmorph-private-card-paper-dark-opacity: 0;--nmorph-private-card-paper-opacity: var(--nmorph-private-card-paper-light-opacity);--nmorph-private-card-paper-shadow-color: color-mix(in srgb, var(--nmorph-dark-shade-color) 82%, transparent);--nmorph-private-card-paper-light-color: color-mix(in srgb, var(--nmorph-light-shade-color) 76%, transparent);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--nmorph-private-card-padding);background:var(--nmorph-private-card-background);border:var(--nmorph-private-card-border);border-radius:var(--nmorph-private-card-radius, var(--default-border-radius));box-shadow:var(--nmorph-private-card-shadow)}.nmorph-card:before{position:absolute;z-index:0;background-image:var(--nmorph-private-card-paper-noise),radial-gradient(circle at 1px 1px,var(--nmorph-private-card-paper-shadow-color) 0 1px,transparent 1.7px),radial-gradient(circle at 6px 4px,var(--nmorph-private-card-paper-light-color) 0 1px,transparent 1.8px);background-size:72px 72px,11px 11px,16px 16px;border-radius:inherit;opacity:var(--nmorph-private-card-paper-opacity);pointer-events:none;content:"";inset:0}.nmorph-card.nmorph-card--fill{width:100%}.nmorph-card .nmorph-card__header,.nmorph-card .nmorph-card__content{position:relative;z-index:1}.nmorph-card .nmorph-card__content{height:100%;padding:var(--nmorph-private-card-content-padding, 0)}.nmorph-card .nmorph-card__header{font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height)}.nmorph-card .nmorph-card__footer{position:relative;z-index:1;height:fit-content;margin-top:4px;font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-card.nmorph-card--nmorph{--nmorph-private-card-background: var(--nmorph-main-color)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--outset{--nmorph-private-card-shadow: var(--nmorph-shadow-outset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--inset{--nmorph-private-card-shadow: var(--nmorph-shadow-inset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--combined{--nmorph-private-card-border: var(--nmorph-private-card-combined-border-width) solid var(--nmorph-main-color);--nmorph-private-card-shadow: var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color), calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color), inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color), inset calc(-1 * var(--base-shadow-width)) calc(-.5 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-card.nmorph-card--plain{--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: var(--nmorph-plain-border);--nmorph-private-card-shadow: none}:root[nmorph-data-theme=dark] .nmorph-card{--nmorph-private-card-paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.36' filter='url(%23n)'/%3E%3C/svg%3E");--nmorph-private-card-paper-opacity: var(--nmorph-private-card-paper-dark-opacity);--nmorph-private-card-paper-shadow-color: color-mix(in srgb, var(--nmorph-black-color) 54%, transparent);--nmorph-private-card-paper-light-color: color-mix(in srgb, var(--nmorph-white-color) 18%, transparent)}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import './NmorphCard.css';
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { useModifiers as
|
|
2
|
+
import { defineComponent as g, useSlots as y, computed as i } from "vue";
|
|
3
|
+
import { useModifiers as v } from "../../../utils/create-modifiers.js";
|
|
4
4
|
import { toCssSize as r } from "../../../utils/common.js";
|
|
5
|
-
import { NmorphShadowType as
|
|
6
|
-
const
|
|
5
|
+
import { NmorphShadowType as S } from "../../../types/common.types.js";
|
|
6
|
+
const w = /* @__PURE__ */ g({
|
|
7
7
|
__name: "NmorphCard",
|
|
8
8
|
props: {
|
|
9
9
|
design: { type: null, required: !1, default: "nmorph" },
|
|
@@ -20,26 +20,29 @@ const N = /* @__PURE__ */ h({
|
|
|
20
20
|
},
|
|
21
21
|
setup(s, { expose: u }) {
|
|
22
22
|
u();
|
|
23
|
-
const e = s, l =
|
|
24
|
-
() =>
|
|
25
|
-
nmorph: [d.value === "nmorph" ?
|
|
23
|
+
const e = s, l = y(), d = i(() => e.design || "nmorph"), c = i(
|
|
24
|
+
() => v({
|
|
25
|
+
nmorph: [d.value === "nmorph" ? S[e.shadowType] : ""],
|
|
26
26
|
"nmorph-card": [d.value, e.shadowType, e.fill ? "fill" : "fit-content"]
|
|
27
27
|
})
|
|
28
|
-
),
|
|
29
|
-
const t = e.padding !== void 0 ? r(e.padding) : r(e.cardPadding),
|
|
28
|
+
), m = i(() => {
|
|
29
|
+
const t = e.padding !== void 0 ? r(e.padding) : r(e.cardPadding), n = r(e.radius), p = r(e.contentPadding), a = Math.max(0, Number(e.paper) || 0), f = Math.min(a * 0.08, 0.48), h = Math.min(a * 0.04, 0.2);
|
|
30
30
|
return {
|
|
31
31
|
...e.shadowType === "combined" && {
|
|
32
32
|
"--nmorph-private-card-combined-border-width": `${e.combinedShadowBorderWidth}px`
|
|
33
33
|
},
|
|
34
34
|
...t !== void 0 && { "--nmorph-private-card-padding": t, padding: t },
|
|
35
|
-
...
|
|
36
|
-
...
|
|
37
|
-
...
|
|
35
|
+
...n !== void 0 && { "--nmorph-private-card-radius": n },
|
|
36
|
+
...p !== void 0 && { "--nmorph-private-card-content-padding": p },
|
|
37
|
+
...a > 0 && {
|
|
38
|
+
"--nmorph-private-card-paper-light-opacity": String(f),
|
|
39
|
+
"--nmorph-private-card-paper-dark-opacity": String(h)
|
|
40
|
+
}
|
|
38
41
|
};
|
|
39
|
-
}),
|
|
40
|
-
return Object.defineProperty(
|
|
42
|
+
}), o = { props: e, slots: l, resolvedDesign: d, modifiers: c, styles: m };
|
|
43
|
+
return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
|
|
41
44
|
}
|
|
42
45
|
});
|
|
43
46
|
export {
|
|
44
|
-
|
|
47
|
+
w as default
|
|
45
48
|
};
|
|
@@ -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-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight: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-contrast-text-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--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-visual{position:relative;display:block;gap:0;min-height:0;padding:0;padding-inline-end:0;overflow:hidden}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__body{position:relative;display:block;width:100%;min-width:0;height:100%}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__info{position:absolute;top:var(--indentation-02);left:var(--indentation-02);z-index:2;max-width:calc(100% - 48px);pointer-events:none}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__name{display:block;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview__media,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image{display:block;width:100%;max-width:none;height:var(--nmorph-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-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link .nmorph-icon,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-file-card__info{max-width:calc(100% - 112px)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-video-preview__actions{right:calc(var(--indentation-02) + 26px)}.nmorph-file-card.nmorph-file-card--media-image .nmorph-file-card__image-preview{border-radius:inherit}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}
|
|
1
|
+
.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:var(--nmorph-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-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight: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-contrast-text-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-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview__media,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image{display:block;width:100%;max-width:none;height:var(--nmorph-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-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link .nmorph-icon,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-file-card__info{max-width:calc(100% - 112px)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-video-preview__actions{right:calc(var(--indentation-02) + 26px)}.nmorph-file-card.nmorph-file-card--media-image .nmorph-file-card__image-preview{border-radius:inherit}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './NmorphMediaTile.css';
|
|
2
2
|
import s from "./NmorphMediaTile.vue2.js";
|
|
3
|
-
import { openBlock as e, createElementBlock as
|
|
3
|
+
import { openBlock as e, createElementBlock as i, normalizeClass as m, withDirectives as p, createElementVNode as c, vShow as _, createCommentVNode as a, createBlock as r, withCtx as l, createVNode as n, toDisplayString as t, renderSlot as h } from "vue";
|
|
4
4
|
/* empty css */
|
|
5
5
|
import f from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
6
|
const v = ["src", "muted", "autoplay", "playsinline"], y = ["muted", "autoplay"], k = {
|
|
@@ -20,13 +20,13 @@ const v = ["src", "muted", "autoplay", "playsinline"], y = ["muted", "autoplay"]
|
|
|
20
20
|
class: "nmorph-media-tile__status"
|
|
21
21
|
};
|
|
22
22
|
function S(d, x, V, o, B, M) {
|
|
23
|
-
return e(),
|
|
23
|
+
return e(), i(
|
|
24
24
|
"div",
|
|
25
25
|
{
|
|
26
26
|
class: m(o.modifiers)
|
|
27
27
|
},
|
|
28
28
|
[
|
|
29
|
-
c(
|
|
29
|
+
p(c("video", {
|
|
30
30
|
ref: "videoRef",
|
|
31
31
|
class: "nmorph-media-tile__video",
|
|
32
32
|
src: o.videoSrc,
|
|
@@ -36,15 +36,15 @@ function S(d, x, V, o, B, M) {
|
|
|
36
36
|
}, null, 8, v), [
|
|
37
37
|
[_, o.videoVisible && !o.props.loading]
|
|
38
38
|
]),
|
|
39
|
-
o.
|
|
39
|
+
o.needsSeparateAudioOutput ? (e(), i("audio", {
|
|
40
40
|
key: 0,
|
|
41
41
|
ref: "audioRef",
|
|
42
42
|
class: "nmorph-media-tile__audio",
|
|
43
43
|
muted: o.props.muted,
|
|
44
44
|
autoplay: o.props.autoplay,
|
|
45
45
|
preload: "auto"
|
|
46
|
-
}, null, 8, y)) :
|
|
47
|
-
o.props.showFallback && (!o.videoVisible || o.props.loading) ? (e(),
|
|
46
|
+
}, null, 8, y)) : a("v-if", !0),
|
|
47
|
+
o.props.showFallback && (!o.videoVisible || o.props.loading) ? (e(), i("div", k, [
|
|
48
48
|
o.props.loading ? (e(), r(o.NmorphIcon, {
|
|
49
49
|
key: 0,
|
|
50
50
|
class: "nmorph-media-tile__loader",
|
|
@@ -61,29 +61,29 @@ function S(d, x, V, o, B, M) {
|
|
|
61
61
|
name: o.props.name,
|
|
62
62
|
size: 72,
|
|
63
63
|
design: "plain"
|
|
64
|
-
}, null, 8, ["src", "name"])) : (e(),
|
|
64
|
+
}, null, 8, ["src", "name"])) : (e(), i(
|
|
65
65
|
"div",
|
|
66
66
|
b,
|
|
67
67
|
t(o.fallbackLabel),
|
|
68
68
|
1
|
|
69
69
|
/* TEXT */
|
|
70
70
|
)),
|
|
71
|
-
o.props.name ? (e(),
|
|
71
|
+
o.props.name ? (e(), i(
|
|
72
72
|
"span",
|
|
73
73
|
N,
|
|
74
74
|
t(o.props.name),
|
|
75
75
|
1
|
|
76
76
|
/* TEXT */
|
|
77
|
-
)) :
|
|
78
|
-
o.props.error && o.props.errorText ? (e(),
|
|
77
|
+
)) : a("v-if", !0),
|
|
78
|
+
o.props.error && o.props.errorText ? (e(), i(
|
|
79
79
|
"span",
|
|
80
80
|
u,
|
|
81
81
|
t(o.props.errorText),
|
|
82
82
|
1
|
|
83
83
|
/* TEXT */
|
|
84
|
-
)) :
|
|
85
|
-
])) :
|
|
86
|
-
o.props.showStatus ? (e(),
|
|
84
|
+
)) : a("v-if", !0)
|
|
85
|
+
])) : a("v-if", !0),
|
|
86
|
+
o.props.showStatus ? (e(), i("div", g, [
|
|
87
87
|
o.props.micMuted ? (e(), r(o.NmorphButton, {
|
|
88
88
|
key: 0,
|
|
89
89
|
class: "nmorph-media-tile__status-item",
|
|
@@ -96,7 +96,7 @@ function S(d, x, V, o, B, M) {
|
|
|
96
96
|
]),
|
|
97
97
|
_: 1
|
|
98
98
|
/* STABLE */
|
|
99
|
-
})) :
|
|
99
|
+
})) : a("v-if", !0),
|
|
100
100
|
o.props.videoOff ? (e(), r(o.NmorphButton, {
|
|
101
101
|
key: 1,
|
|
102
102
|
class: "nmorph-media-tile__status-item",
|
|
@@ -109,7 +109,7 @@ function S(d, x, V, o, B, M) {
|
|
|
109
109
|
]),
|
|
110
110
|
_: 1
|
|
111
111
|
/* STABLE */
|
|
112
|
-
})) :
|
|
112
|
+
})) : a("v-if", !0),
|
|
113
113
|
o.props.screenSharing ? (e(), r(o.NmorphButton, {
|
|
114
114
|
key: 2,
|
|
115
115
|
class: "nmorph-media-tile__status-item",
|
|
@@ -122,15 +122,15 @@ function S(d, x, V, o, B, M) {
|
|
|
122
122
|
]),
|
|
123
123
|
_: 1
|
|
124
124
|
/* STABLE */
|
|
125
|
-
})) :
|
|
126
|
-
])) :
|
|
125
|
+
})) : a("v-if", !0)
|
|
126
|
+
])) : a("v-if", !0),
|
|
127
127
|
h(d.$slots, "overlay")
|
|
128
128
|
],
|
|
129
129
|
2
|
|
130
130
|
/* CLASS */
|
|
131
131
|
);
|
|
132
132
|
}
|
|
133
|
-
const
|
|
133
|
+
const z = /* @__PURE__ */ f(s, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
|
|
134
134
|
export {
|
|
135
|
-
|
|
135
|
+
z as default
|
|
136
136
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import './NmorphMediaTile.css';
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { useModifiers as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
const
|
|
2
|
+
import { defineComponent as E, ref as p, computed as t, watch as q } from "vue";
|
|
3
|
+
import { useModifiers as L } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import M from "../../../assets/icons/video-camera-off.svg.js";
|
|
5
|
+
import A from "../../../assets/icons/share.svg.js";
|
|
6
|
+
import C from "../../../assets/icons/mute.svg.js";
|
|
7
|
+
import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
8
|
+
import w from "../../basic/nmorph-button/NmorphButton.vue.js";
|
|
9
|
+
import D from "../nmorph-avatar/NmorphAvatar.vue.js";
|
|
10
|
+
import R from "../../../assets/icons/loader.svg.js";
|
|
11
|
+
const W = /* @__PURE__ */ E({
|
|
12
12
|
__name: "NmorphMediaTile",
|
|
13
13
|
props: {
|
|
14
14
|
src: { type: String, required: !1, default: "" },
|
|
@@ -32,13 +32,23 @@ const F = /* @__PURE__ */ O({
|
|
|
32
32
|
error: { type: Boolean, required: !1, default: !1 },
|
|
33
33
|
errorText: { type: String, required: !1, default: "" }
|
|
34
34
|
},
|
|
35
|
-
setup(
|
|
36
|
-
const e =
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
setup(B, { expose: I }) {
|
|
36
|
+
const e = B, o = p(null), a = p(null), u = p({
|
|
37
|
+
audio: 0,
|
|
38
|
+
video: 0
|
|
39
|
+
}), v = t(() => !!(e.src || e.srcObject)), m = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), y = (r) => !r || typeof r.getVideoTracks != "function" ? [] : r.getVideoTracks(), d = (r) => {
|
|
40
|
+
u.value = {
|
|
41
|
+
audio: m(r).length,
|
|
42
|
+
video: y(r).length
|
|
43
|
+
};
|
|
44
|
+
}, h = t(() => typeof e.srcObject?.getVideoTracks == "function"), g = t(() => u.value.audio > 0), k = t(() => u.value.video > 0), S = t(
|
|
45
|
+
() => !!(e.src || e.srcObject && (!h.value || k.value))
|
|
46
|
+
), n = t(() => v.value && S.value && !e.videoOff && !e.error), i = t(
|
|
47
|
+
() => !!(e.srcObject && !e.muted && !e.error && g.value)
|
|
48
|
+
), j = t(() => e.muted || i.value), N = t(() => n.value && e.src ? e.src : void 0), O = t(
|
|
39
49
|
() => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((r) => r[0]?.toUpperCase()).join("")
|
|
40
|
-
),
|
|
41
|
-
() =>
|
|
50
|
+
), T = t(() => O.value || e.name || "?"), V = t(
|
|
51
|
+
() => L({
|
|
42
52
|
"nmorph-media-tile": [
|
|
43
53
|
e.fit,
|
|
44
54
|
e.mirrored && "mirrored",
|
|
@@ -50,53 +60,66 @@ const F = /* @__PURE__ */ O({
|
|
|
50
60
|
e.loading && "loading"
|
|
51
61
|
]
|
|
52
62
|
})
|
|
53
|
-
),
|
|
63
|
+
), s = (r) => {
|
|
54
64
|
if (!r || e.sinkId === void 0) return;
|
|
55
|
-
const
|
|
56
|
-
typeof
|
|
65
|
+
const f = r;
|
|
66
|
+
typeof f.setSinkId == "function" && f.setSinkId(e.sinkId).catch(() => {
|
|
67
|
+
});
|
|
68
|
+
}, c = (r) => {
|
|
69
|
+
!r || !e.autoplay || r.play().catch(() => {
|
|
57
70
|
});
|
|
58
71
|
};
|
|
59
|
-
|
|
72
|
+
q(
|
|
73
|
+
() => e.srcObject,
|
|
74
|
+
(r, f, _) => {
|
|
75
|
+
if (d(r), !r || typeof r.addEventListener != "function" || typeof r.removeEventListener != "function")
|
|
76
|
+
return;
|
|
77
|
+
const l = () => d(r);
|
|
78
|
+
r.addEventListener("addtrack", l), r.addEventListener("removetrack", l), _(() => {
|
|
79
|
+
r.removeEventListener("addtrack", l), r.removeEventListener("removetrack", l);
|
|
80
|
+
});
|
|
81
|
+
},
|
|
82
|
+
{ immediate: !0 }
|
|
83
|
+
), q(
|
|
60
84
|
() => [
|
|
61
85
|
e.srcObject,
|
|
62
86
|
e.sinkId,
|
|
63
87
|
e.autoplay,
|
|
88
|
+
n.value,
|
|
64
89
|
i.value,
|
|
65
|
-
l.value,
|
|
66
90
|
o.value,
|
|
67
91
|
a.value
|
|
68
92
|
],
|
|
69
93
|
() => {
|
|
70
94
|
if (o.value) {
|
|
71
|
-
const r =
|
|
72
|
-
o.value.srcObject !== r && (o.value.srcObject = r),
|
|
95
|
+
const r = n.value ? e.srcObject : null;
|
|
96
|
+
o.value.srcObject !== r && (o.value.srcObject = r), s(o.value), e.autoplay && n.value && r && c(o.value);
|
|
73
97
|
}
|
|
74
98
|
if (a.value) {
|
|
75
|
-
const r =
|
|
76
|
-
a.value.srcObject !== r && (a.value.srcObject = r),
|
|
77
|
-
});
|
|
99
|
+
const r = i.value ? e.srcObject : null;
|
|
100
|
+
a.value.srcObject !== r && (a.value.srcObject = r), s(a.value), e.autoplay && i.value && c(a.value);
|
|
78
101
|
}
|
|
79
102
|
},
|
|
80
103
|
{ immediate: !0, flush: "post" }
|
|
81
|
-
),
|
|
82
|
-
const
|
|
83
|
-
return
|
|
104
|
+
), I({ videoRef: o });
|
|
105
|
+
const b = { props: e, videoRef: o, audioRef: a, srcObjectTrackCount: u, hasMediaSource: v, getAudioTracks: m, getVideoTracks: y, updateSrcObjectTrackCount: d, canInspectVideoTracks: h, hasAudioTracks: g, hasVideoTracks: k, hasVideoSource: S, videoVisible: n, needsSeparateAudioOutput: i, videoMuted: j, videoSrc: N, initials: O, fallbackLabel: T, modifiers: V, setMediaElementSinkId: s, playMediaElement: c, get NmorphAvatar() {
|
|
106
|
+
return D;
|
|
84
107
|
}, get NmorphButton() {
|
|
85
|
-
return
|
|
108
|
+
return w;
|
|
86
109
|
}, get NmorphIcon() {
|
|
87
|
-
return
|
|
110
|
+
return x;
|
|
88
111
|
}, get NmorphIconLoaderDots() {
|
|
89
|
-
return
|
|
112
|
+
return R;
|
|
90
113
|
}, get NmorphIconMute() {
|
|
91
|
-
return
|
|
114
|
+
return C;
|
|
92
115
|
}, get NmorphIconShare() {
|
|
93
|
-
return
|
|
116
|
+
return A;
|
|
94
117
|
}, get NmorphIconVideoCameraOff() {
|
|
95
|
-
return
|
|
118
|
+
return M;
|
|
96
119
|
} };
|
|
97
|
-
return Object.defineProperty(
|
|
120
|
+
return Object.defineProperty(b, "__isScriptSetup", { enumerable: !1, value: !0 }), b;
|
|
98
121
|
}
|
|
99
122
|
});
|
|
100
123
|
export {
|
|
101
|
-
|
|
124
|
+
W as default
|
|
102
125
|
};
|