@nmorph/nmorph-ui-kit 3.0.2 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/icons/external-link.svg.js +2 -2
- package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js +5 -4
- package/dist/components/basic/nmorph-scroll/NmorphScroll.vue2.js +143 -124
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css +1 -1
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue.js +10 -10
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue2.js +24 -24
- package/dist/components/data/nmorph-badge/NmorphBadge.css +1 -1
- package/dist/components/data/nmorph-image/NmorphImage.vue.js +22 -20
- package/dist/components/data/nmorph-image/NmorphImage.vue2.js +24 -18
- package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.css +1 -1
- package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js +31 -26
- package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue2.js +158 -137
- package/dist/components/data/nmorph-progress/NmorphProgress.css +1 -1
- package/dist/components/data/nmorph-progress/NmorphProgress.vue2.js +6 -6
- package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue2.js +8 -8
- package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue.js +12 -11
- package/dist/index.umd.js +45 -45
- package/dist/package.json.js +1 -1
- package/dist/src/components/data/nmorph-image/types.d.ts +1 -0
- package/dist/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.d.ts +2 -0
- package/dist/src/components/data/nmorph-media-gallery/types.d.ts +10 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 24px;--nmorph-private-badge-ribbon-corner-size: 62px;--nmorph-private-badge-ribbon-width: 116px;--nmorph-private-badge-ribbon-radius: var(--border-radius-40);--nmorph-private-badge-ribbon-offset-x: 0px;--nmorph-private-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-private-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__container--tag .nmorph-badge__content--custom{min-height:calc(1em * var(--line-height-regular) + 4px);padding:2px}.nmorph-badge .nmorph-badge__container--tag .nmorph-badge__content--custom>.nmorph-icon{flex:0 0 auto}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-
|
|
1
|
+
.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 24px;--nmorph-private-badge-ribbon-corner-size: 62px;--nmorph-private-badge-ribbon-width: 116px;--nmorph-private-badge-ribbon-radius: var(--border-radius-40);--nmorph-private-badge-ribbon-offset-x: 0px;--nmorph-private-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-private-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__container--tag .nmorph-badge__content--custom{min-height:calc(1em * var(--line-height-regular) + 4px);padding:2px}.nmorph-badge .nmorph-badge__container--tag .nmorph-badge__content--custom>.nmorph-icon{flex:0 0 auto}.nmorph-badge .nmorph-badge__content{--nmorph-private-badge-content-color: var(--nmorph-light-shade-color);display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-private-badge-content-color);font-size:var(--nmorph-typography-body-large-font-size);line-height:var(--nmorph-typography-body-large-line-height);text-align:center}.nmorph-badge .nmorph-badge__content .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-private-badge-content-color)}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--nmorph-typography-body-small-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-private-badge-ribbon-corner-size);height:var(--nmorph-private-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;height:100%;padding:0 var(--indentation-03);overflow:hidden;font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:1;white-space:nowrap;text-overflow:ellipsis}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-private-badge-ribbon-offset-y);right:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-private-badge-ribbon-offset-x);bottom:var(--nmorph-private-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--flat{width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height)}.nmorph-badge .nmorph-badge__ribbon-corner--flat .nmorph-badge__container--ribbon{position:relative;top:auto;left:auto;border-radius:0;transform:none}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__container--ribbon .nmorph-badge__content{font-weight:var(--font-weight-regular);font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-private-badge-dot-size);height:var(--nmorph-private-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-private-badge-dot-size: 3px;--nmorph-private-badge-ribbon-height: 18px;--nmorph-private-badge-ribbon-corner-size: 50px;--nmorph-private-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 20px;--nmorph-private-badge-ribbon-corner-size: 56px;--nmorph-private-badge-ribbon-width: 104px}.nmorph-badge.nmorph-badge--medium{--nmorph-private-badge-dot-size: 5px;--nmorph-private-badge-ribbon-height: 28px;--nmorph-private-badge-ribbon-corner-size: 68px;--nmorph-private-badge-ribbon-width: 128px}.nmorph-badge.nmorph-badge--large{--nmorph-private-badge-dot-size: 6px;--nmorph-private-badge-ribbon-height: 32px;--nmorph-private-badge-ribbon-corner-size: 76px;--nmorph-private-badge-ribbon-width: 144px}.nmorph-badge.nmorph-badge--extra-large{--nmorph-private-badge-dot-size: 8px;--nmorph-private-badge-ribbon-height: 36px;--nmorph-private-badge-ribbon-corner-size: 84px;--nmorph-private-badge-ribbon-width: 160px}
|
|
@@ -1,54 +1,56 @@
|
|
|
1
1
|
import './NmorphImage.css';
|
|
2
|
-
import
|
|
3
|
-
import { openBlock as r, createElementBlock as e, normalizeStyle as
|
|
2
|
+
import n from "./NmorphImage.vue2.js";
|
|
3
|
+
import { openBlock as r, createElementBlock as e, normalizeStyle as s, normalizeClass as d, createElementVNode as l, renderSlot as i, createTextVNode as c, toDisplayString as _, createVNode as t, withCtx as p, createCommentVNode as m } from "vue";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import
|
|
6
|
-
const
|
|
5
|
+
import f from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
|
+
const h = ["src", "alt", "srcset"], g = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "nmorph-image__load-failed"
|
|
9
|
-
},
|
|
9
|
+
}, y = {
|
|
10
10
|
key: 1,
|
|
11
11
|
class: "nmorph-image__loading"
|
|
12
12
|
};
|
|
13
|
-
function
|
|
13
|
+
function N(a, k, v, o, I, L) {
|
|
14
14
|
return o.props.src ? (r(), e(
|
|
15
15
|
"div",
|
|
16
16
|
{
|
|
17
17
|
key: 0,
|
|
18
18
|
class: d(o.modifiers),
|
|
19
|
-
style:
|
|
19
|
+
style: s(o.styles)
|
|
20
20
|
},
|
|
21
21
|
[
|
|
22
|
-
|
|
22
|
+
l("img", {
|
|
23
23
|
src: o.props.src,
|
|
24
24
|
alt: o.props.alt,
|
|
25
25
|
srcset: o.props.srcSet,
|
|
26
26
|
onLoad: o.onImageLoad,
|
|
27
27
|
onError: o.onImageError
|
|
28
|
-
}, null, 40,
|
|
28
|
+
}, null, 40, h),
|
|
29
29
|
o.loadingFailed ? (r(), e("div", g, [
|
|
30
30
|
i(a.$slots, "error", {}, () => [
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
c(
|
|
32
|
+
_(o.computedLoadFailedText),
|
|
33
33
|
1
|
|
34
34
|
/* TEXT */
|
|
35
35
|
)
|
|
36
36
|
])
|
|
37
|
-
])) : o.imageLoadFinished ?
|
|
37
|
+
])) : o.imageLoadFinished ? m("v-if", !0) : (r(), e("div", y, [
|
|
38
38
|
i(a.$slots, "loading", {}, () => [
|
|
39
|
-
t(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
t(o.NmorphIcon, { size: "medium" }, {
|
|
40
|
+
default: p(() => [
|
|
41
|
+
t(o.NmorphIconLoader)
|
|
42
|
+
]),
|
|
43
|
+
_: 1
|
|
44
|
+
/* STABLE */
|
|
45
|
+
})
|
|
44
46
|
])
|
|
45
47
|
]))
|
|
46
48
|
],
|
|
47
49
|
6
|
|
48
50
|
/* CLASS, STYLE */
|
|
49
|
-
)) :
|
|
51
|
+
)) : m("v-if", !0);
|
|
50
52
|
}
|
|
51
|
-
const
|
|
53
|
+
const z = /* @__PURE__ */ f(n, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image/NmorphImage.vue"]]);
|
|
52
54
|
export {
|
|
53
|
-
|
|
55
|
+
z as default
|
|
54
56
|
};
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import './NmorphImage.css';
|
|
2
|
-
import { defineComponent as S, computed as
|
|
2
|
+
import { defineComponent as S, computed as t, ref as s } from "vue";
|
|
3
3
|
import { useModifiers as q } from "../../../utils/create-modifiers.js";
|
|
4
|
-
import { createCssSizeVariables as
|
|
5
|
-
import { useI18n as
|
|
6
|
-
|
|
4
|
+
import { createCssSizeVariables as _ } from "../../../utils/common.js";
|
|
5
|
+
import { useI18n as x } from "vue-i18n";
|
|
6
|
+
import b from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
7
|
+
import I from "../../../assets/icons/loading.svg.js";
|
|
8
|
+
const C = /* @__PURE__ */ S({
|
|
7
9
|
__name: "NmorphImage",
|
|
8
10
|
props: {
|
|
9
11
|
design: { type: null, required: !1, default: "nmorph" },
|
|
@@ -18,32 +20,36 @@ const I = /* @__PURE__ */ S({
|
|
|
18
20
|
alt: { type: String, required: !1, default: "" }
|
|
19
21
|
},
|
|
20
22
|
emits: ["error", "load"],
|
|
21
|
-
setup(
|
|
23
|
+
setup(u, { expose: p, emit: f }) {
|
|
22
24
|
p();
|
|
23
|
-
const { t:
|
|
24
|
-
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
}, n =
|
|
25
|
+
const { t: l } = x(), e = u, c = t(() => e.loadFailedText ? e.loadFailedText : l("loadFailedText")), r = s(!1), o = s(!1), a = f, g = (d) => {
|
|
26
|
+
r.value = !0, o.value = !1, a("load", d);
|
|
27
|
+
}, h = (d) => {
|
|
28
|
+
r.value = !0, o.value = !0, a("error", d);
|
|
29
|
+
}, n = t(() => r.value && o.value), i = t(() => e.design || "nmorph"), v = t(
|
|
28
30
|
() => q({
|
|
29
|
-
nmorph: [
|
|
31
|
+
nmorph: [i.value === "nmorph" ? "shadow-combined" : ""],
|
|
30
32
|
"nmorph-image": [
|
|
31
|
-
|
|
33
|
+
i.value,
|
|
32
34
|
e.frameBorder > 0 && "framed",
|
|
33
|
-
(n.value || !
|
|
35
|
+
(n.value || !r.value) && "hide"
|
|
34
36
|
]
|
|
35
37
|
})
|
|
36
|
-
), y =
|
|
37
|
-
...
|
|
38
|
+
), y = t(() => ({
|
|
39
|
+
..._({
|
|
38
40
|
"--nmorph-private-image-width": e.width,
|
|
39
41
|
"--nmorph-private-image-height": e.height
|
|
40
42
|
}),
|
|
41
43
|
"--nmorph-private-image-fit": e.fit || "cover",
|
|
42
44
|
"--nmorph-private-image-frame-border": `${e.frameBorder}px`
|
|
43
|
-
})),
|
|
44
|
-
|
|
45
|
+
})), m = { t: l, props: e, computedLoadFailedText: c, imageLoadFinished: r, imageLoadError: o, emit: a, onImageLoad: g, onImageError: h, loadingFailed: n, resolvedDesign: i, modifiers: v, styles: y, get NmorphIcon() {
|
|
46
|
+
return b;
|
|
47
|
+
}, get NmorphIconLoader() {
|
|
48
|
+
return I;
|
|
49
|
+
} };
|
|
50
|
+
return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
|
|
45
51
|
}
|
|
46
52
|
});
|
|
47
53
|
export {
|
|
48
|
-
|
|
54
|
+
C as default
|
|
49
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);width:100%}.nmorph-media-gallery__trigger--fixed-height{grid-auto-rows:var(--nmorph-private-media-gallery-trigger-height)}.nmorph-media-gallery__trigger-item{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);aspect-ratio:16/9}.nmorph-media-gallery__trigger--fixed-height .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.nmorph-media-gallery__trigger-open{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;color:inherit;font:inherit;text-align:initial;background:transparent;border:0;cursor:pointer}.nmorph-media-gallery__trigger-open .nmorph-image,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;transition:filter var(--transition-03) ease-in-out}.nmorph-media-gallery__trigger-open .nmorph-image img,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100
|
|
1
|
+
.nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);width:100%}.nmorph-media-gallery__trigger--fixed-height{grid-auto-rows:var(--nmorph-private-media-gallery-trigger-height)}.nmorph-media-gallery__trigger-item{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);aspect-ratio:16/9}.nmorph-media-gallery__trigger--fixed-height .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.nmorph-media-gallery__trigger-open{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;color:inherit;font:inherit;text-align:initial;background:transparent;border:0;cursor:pointer}.nmorph-media-gallery__trigger-open: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-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-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery__trigger-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight: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-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery__trigger-action .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery__trigger-play{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);pointer-events:none}.nmorph-media-gallery__trigger-play .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-name,.nmorph-media-gallery .nmorph-media-gallery__file-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery .nmorph-media-gallery__file-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight: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:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery .nmorph-media-gallery__file-action .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__file-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import './NmorphMediaGallery.css';
|
|
2
|
-
import
|
|
3
|
-
import { openBlock as l, createElementBlock as n, Fragment as
|
|
2
|
+
import y from "./NmorphMediaGallery.vue2.js";
|
|
3
|
+
import { openBlock as l, createElementBlock as n, Fragment as g, normalizeStyle as h, normalizeClass as f, renderList as v, createElementVNode as c, createBlock as m, createVNode as e, withCtx as a, createCommentVNode as i, toDisplayString as _, withModifiers as s } from "vue";
|
|
4
4
|
/* empty css */
|
|
5
5
|
import I from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
|
-
const w = ["aria-label", "onClick"],
|
|
6
|
+
const w = ["aria-label", "onClick"], N = ["src", "poster", "title"], p = {
|
|
7
7
|
key: 2,
|
|
8
8
|
class: "nmorph-media-gallery__trigger-play"
|
|
9
9
|
}, k = {
|
|
@@ -15,19 +15,19 @@ const w = ["aria-label", "onClick"], p = ["src", "poster", "title"], N = {
|
|
|
15
15
|
}, z = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "nmorph-media-gallery__trigger-actions"
|
|
18
|
-
}, C = ["aria-label", "onClick"], H = ["aria-label", "onClick"], P = ["href", "download", "aria-label", "onClick"], F = { class: "nmorph-media-gallery__stage" }, S = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"],
|
|
18
|
+
}, C = ["aria-label", "onClick"], H = ["aria-label", "onClick"], P = ["href", "download", "aria-label", "onClick"], F = { class: "nmorph-media-gallery__stage" }, S = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], T = {
|
|
19
19
|
key: 2,
|
|
20
20
|
class: "nmorph-media-gallery__file-name"
|
|
21
|
-
},
|
|
21
|
+
}, D = {
|
|
22
22
|
key: 3,
|
|
23
23
|
class: "nmorph-media-gallery__file-actions"
|
|
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" },
|
|
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" }, x = { class: "nmorph-media-gallery__action-element" };
|
|
28
28
|
function O(G, U, Z, o, j, W) {
|
|
29
29
|
return l(), n(
|
|
30
|
-
|
|
30
|
+
g,
|
|
31
31
|
null,
|
|
32
32
|
[
|
|
33
33
|
o.props.showTrigger ? (l(), n(
|
|
@@ -35,17 +35,22 @@ function O(G, U, Z, o, j, W) {
|
|
|
35
35
|
{
|
|
36
36
|
key: 0,
|
|
37
37
|
class: f(o.triggerModifiers),
|
|
38
|
-
style:
|
|
38
|
+
style: h(o.triggerStyle)
|
|
39
39
|
},
|
|
40
40
|
[
|
|
41
41
|
(l(!0), n(
|
|
42
|
-
|
|
42
|
+
g,
|
|
43
43
|
null,
|
|
44
|
-
|
|
44
|
+
v(o.sourceList, (r, t) => (l(), n(
|
|
45
45
|
"div",
|
|
46
46
|
{
|
|
47
47
|
key: `${r.kind}-${r.src}-${t}`,
|
|
48
|
-
class: f([
|
|
48
|
+
class: f([
|
|
49
|
+
"nmorph-media-gallery__trigger-item",
|
|
50
|
+
`nmorph-media-gallery__trigger-item--${r.kind}`,
|
|
51
|
+
o.getTriggerItemClass(r, t)
|
|
52
|
+
]),
|
|
53
|
+
style: h(o.getTriggerItemStyle(r, t))
|
|
49
54
|
},
|
|
50
55
|
[
|
|
51
56
|
c("button", {
|
|
@@ -59,10 +64,10 @@ function O(G, U, Z, o, j, W) {
|
|
|
59
64
|
src: r.src,
|
|
60
65
|
alt: r.alt || o.getItemLabel(r, t),
|
|
61
66
|
title: o.getItemName(r),
|
|
62
|
-
fit:
|
|
67
|
+
fit: o.props.triggerImageFit,
|
|
63
68
|
design: "plain",
|
|
64
69
|
"frame-border": 0
|
|
65
|
-
}, null, 8, ["src", "alt", "title"])) : (l(), n("video", {
|
|
70
|
+
}, null, 8, ["src", "alt", "title", "fit"])) : (l(), n("video", {
|
|
66
71
|
key: 1,
|
|
67
72
|
ref_for: !0,
|
|
68
73
|
ref: (d) => o.setTriggerVideoRef(t, d),
|
|
@@ -73,8 +78,8 @@ function O(G, U, Z, o, j, W) {
|
|
|
73
78
|
playsinline: "",
|
|
74
79
|
preload: "metadata",
|
|
75
80
|
title: o.getItemName(r)
|
|
76
|
-
}, null, 8,
|
|
77
|
-
o.props.showTriggerPlayButton && r.kind === "video" ? (l(), n("span",
|
|
81
|
+
}, null, 8, N)),
|
|
82
|
+
o.props.showTriggerPlayButton && r.kind === "video" ? (l(), n("span", p, [
|
|
78
83
|
e(o.NmorphIcon, {
|
|
79
84
|
size: "medium",
|
|
80
85
|
color: "var(--nmorph-contrast-text-color)"
|
|
@@ -159,8 +164,8 @@ function O(G, U, Z, o, j, W) {
|
|
|
159
164
|
], 8, P)) : i("v-if", !0)
|
|
160
165
|
])) : i("v-if", !0)
|
|
161
166
|
],
|
|
162
|
-
|
|
163
|
-
/* CLASS */
|
|
167
|
+
6
|
|
168
|
+
/* CLASS, STYLE */
|
|
164
169
|
))),
|
|
165
170
|
128
|
|
166
171
|
/* KEYED_FRAGMENT */
|
|
@@ -247,7 +252,7 @@ function O(G, U, Z, o, j, W) {
|
|
|
247
252
|
/* STABLE */
|
|
248
253
|
})
|
|
249
254
|
]),
|
|
250
|
-
c("div",
|
|
255
|
+
c("div", M, [
|
|
251
256
|
e(o.NmorphButton, {
|
|
252
257
|
class: "nmorph-preview-portal__control-button",
|
|
253
258
|
design: "plain",
|
|
@@ -267,7 +272,7 @@ function O(G, U, Z, o, j, W) {
|
|
|
267
272
|
/* STABLE */
|
|
268
273
|
})
|
|
269
274
|
]),
|
|
270
|
-
c("div",
|
|
275
|
+
c("div", x, [
|
|
271
276
|
e(o.NmorphButton, {
|
|
272
277
|
class: "nmorph-preview-portal__control-button",
|
|
273
278
|
design: "plain",
|
|
@@ -299,7 +304,7 @@ function O(G, U, Z, o, j, W) {
|
|
|
299
304
|
fit: o.props.imageFit,
|
|
300
305
|
design: "plain",
|
|
301
306
|
"frame-border": 0,
|
|
302
|
-
style:
|
|
307
|
+
style: h({ transform: o.imageTransform }),
|
|
303
308
|
onPointerdown: o.pointerDownHandler,
|
|
304
309
|
onPointerup: o.pointerUpHandler
|
|
305
310
|
}, null, 8, ["src", "alt", "title", "fit", "style"])) : o.currentItem?.kind === "video" ? (l(), n("video", {
|
|
@@ -322,12 +327,12 @@ function O(G, U, Z, o, j, W) {
|
|
|
322
327
|
}, null, 40, S)) : i("v-if", !0),
|
|
323
328
|
o.currentName ? (l(), n(
|
|
324
329
|
"span",
|
|
325
|
-
|
|
330
|
+
T,
|
|
326
331
|
_(o.currentName),
|
|
327
332
|
1
|
|
328
333
|
/* TEXT */
|
|
329
334
|
)) : i("v-if", !0),
|
|
330
|
-
o.showFileActions ? (l(), n("div",
|
|
335
|
+
o.showFileActions ? (l(), n("div", D, [
|
|
331
336
|
o.showVideoFullscreenAction ? (l(), n("button", {
|
|
332
337
|
key: 0,
|
|
333
338
|
type: "button",
|
|
@@ -345,7 +350,7 @@ function O(G, U, Z, o, j, W) {
|
|
|
345
350
|
_: 1
|
|
346
351
|
/* STABLE */
|
|
347
352
|
})
|
|
348
|
-
], 8,
|
|
353
|
+
], 8, L)) : i("v-if", !0),
|
|
349
354
|
o.currentDownloadHref ? (l(), n("a", {
|
|
350
355
|
key: 1,
|
|
351
356
|
href: o.currentDownloadHref,
|
|
@@ -364,7 +369,7 @@ function O(G, U, Z, o, j, W) {
|
|
|
364
369
|
_: 1
|
|
365
370
|
/* STABLE */
|
|
366
371
|
})
|
|
367
|
-
], 8,
|
|
372
|
+
], 8, B)) : i("v-if", !0)
|
|
368
373
|
])) : i("v-if", !0),
|
|
369
374
|
o.currentSize ? (l(), n(
|
|
370
375
|
"span",
|
|
@@ -383,7 +388,7 @@ function O(G, U, Z, o, j, W) {
|
|
|
383
388
|
/* STABLE_FRAGMENT */
|
|
384
389
|
);
|
|
385
390
|
}
|
|
386
|
-
const X = /* @__PURE__ */ I(
|
|
391
|
+
const X = /* @__PURE__ */ I(y, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue"]]);
|
|
387
392
|
export {
|
|
388
393
|
X as default
|
|
389
394
|
};
|