@nmorph/nmorph-ui-kit 3.0.3 → 3.0.4
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/data/nmorph-media-gallery/NmorphMediaGallery.css +1 -1
- package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js +5 -5
- package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue2.js +184 -145
- package/dist/index.umd.js +46 -46
- package/dist/package.json.js +1 -1
- package/dist/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.d.ts +5 -1
- package/dist/src/components/data/nmorph-media-gallery/types.d.ts +8 -2
- package/dist/src/components/data/nmorph-qr-code/NmorphQRCode.vue.d.ts +1 -1
- package/dist/src/components/feedback/nmorph-alert/NmorphAlert.vue.d.ts +1 -1
- package/dist/src/components/form/nmorph-switch/NmorphSwitch.vue.d.ts +1 -1
- package/dist/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.d.ts +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -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);box-shadow:var(--nmorph-shadow-outset);aspect-ratio:16/9}.nmorph-media-gallery__trigger
|
|
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;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-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-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}
|
|
@@ -12,10 +12,10 @@ const w = ["aria-label", "onClick"], N = ["src", "poster", "title"], p = {
|
|
|
12
12
|
}, b = {
|
|
13
13
|
key: 4,
|
|
14
14
|
class: "nmorph-media-gallery__trigger-size"
|
|
15
|
-
},
|
|
15
|
+
}, C = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "nmorph-media-gallery__trigger-actions"
|
|
18
|
-
},
|
|
18
|
+
}, z = ["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 = {
|
|
@@ -34,7 +34,7 @@ function O(G, U, Z, o, j, W) {
|
|
|
34
34
|
"div",
|
|
35
35
|
{
|
|
36
36
|
key: 0,
|
|
37
|
-
class: f(o.
|
|
37
|
+
class: f(o.triggerClasses),
|
|
38
38
|
style: h(o.triggerStyle)
|
|
39
39
|
},
|
|
40
40
|
[
|
|
@@ -106,7 +106,7 @@ function O(G, U, Z, o, j, W) {
|
|
|
106
106
|
/* TEXT */
|
|
107
107
|
)) : i("v-if", !0)
|
|
108
108
|
], 8, w),
|
|
109
|
-
o.showTriggerActionsForItem(r) ? (l(), n("div",
|
|
109
|
+
o.showTriggerActionsForItem(r) ? (l(), n("div", C, [
|
|
110
110
|
o.showTriggerPreviewActionForItem(r) ? (l(), n("button", {
|
|
111
111
|
key: 0,
|
|
112
112
|
type: "button",
|
|
@@ -124,7 +124,7 @@ function O(G, U, Z, o, j, W) {
|
|
|
124
124
|
_: 1
|
|
125
125
|
/* STABLE */
|
|
126
126
|
})
|
|
127
|
-
], 8,
|
|
127
|
+
], 8, z)) : i("v-if", !0),
|
|
128
128
|
o.showTriggerFullscreenActionForItem(r) ? (l(), n("button", {
|
|
129
129
|
key: 1,
|
|
130
130
|
type: "button",
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import './NmorphMediaGallery.css';
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { useModifiers as
|
|
4
|
-
import { createCssSizeVariables as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
const
|
|
2
|
+
import { defineComponent as Ee, ref as c, computed as i, watch as x, onBeforeUnmount as De } from "vue";
|
|
3
|
+
import { useModifiers as Q } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import { createCssSizeVariables as Oe } from "../../../utils/common.js";
|
|
5
|
+
import Ge from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
|
|
6
|
+
import ze from "../nmorph-image/NmorphImage.vue.js";
|
|
7
|
+
import $e from "../../../assets/icons/full-screen.svg.js";
|
|
8
|
+
import Ke from "../../../assets/icons/eye.svg.js";
|
|
9
|
+
import Ue from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
10
|
+
import je from "../../basic/nmorph-button/NmorphButton.vue.js";
|
|
11
|
+
import We from "../../../assets/icons/zoom-out.svg.js";
|
|
12
|
+
import Ze from "../../../assets/icons/zoom-in.svg.js";
|
|
13
|
+
import Xe from "../../../assets/icons/shrink.svg.js";
|
|
14
|
+
import Ye from "../../../assets/icons/rotate-right.svg.js";
|
|
15
|
+
import Je from "../../../assets/icons/rotate-left.svg.js";
|
|
16
|
+
import Qe from "../../../assets/icons/play.svg.js";
|
|
17
|
+
import et from "../../../assets/icons/enlarge.svg.js";
|
|
18
|
+
import tt from "../../../assets/icons/download.svg.js";
|
|
19
|
+
const ee = 45, te = 16 / 9, re = 160, oe = 128, Nt = /* @__PURE__ */ Ee({
|
|
20
20
|
__name: "NmorphMediaGallery",
|
|
21
21
|
props: {
|
|
22
22
|
modelValue: { type: Boolean, required: !1, default: !1 },
|
|
@@ -35,6 +35,9 @@ const G = 45, ft = /* @__PURE__ */ Ae({
|
|
|
35
35
|
showTriggerFullscreenAction: { type: Boolean, required: !1, default: !0 },
|
|
36
36
|
showTriggerDownloadAction: { type: Boolean, required: !1, default: !0 },
|
|
37
37
|
showTriggerPlayButton: { type: Boolean, required: !1, default: !0 },
|
|
38
|
+
triggerLayout: { type: String, required: !1, default: "grid" },
|
|
39
|
+
triggerClass: { type: [String, Array, Object], required: !1, default: void 0 },
|
|
40
|
+
triggerStyle: { type: Object, required: !1, default: void 0 },
|
|
38
41
|
triggerImageFit: { type: String, required: !1, default: "cover" },
|
|
39
42
|
triggerVideoFit: { type: String, required: !1, default: "cover" },
|
|
40
43
|
triggerItemClass: { type: Function, required: !1 },
|
|
@@ -49,117 +52,153 @@ const G = 45, ft = /* @__PURE__ */ Ae({
|
|
|
49
52
|
videoFit: { type: String, required: !1, default: "contain" }
|
|
50
53
|
},
|
|
51
54
|
emits: ["update:model-value", "update:active-index", "close", "change", "download", "fullscreen"],
|
|
52
|
-
setup(
|
|
53
|
-
|
|
54
|
-
const r =
|
|
55
|
-
const t =
|
|
55
|
+
setup(ae, { expose: ie, emit: ne }) {
|
|
56
|
+
ie();
|
|
57
|
+
const r = ae, l = ne, g = c(r.modelValue), v = c(0), h = c(null), S = c({}), y = c(null), u = c(!1), f = c(1), s = c(0), m = c(null), w = c(!1), n = i(() => r.items || []), B = i(() => n.value.length > 1), V = i(() => r.showNavigationButtons && B.value), p = (e) => {
|
|
58
|
+
const t = n.value.length - 1;
|
|
56
59
|
return t < 0 || !Number.isFinite(e) || e < 0 ? 0 : e > t ? t : e;
|
|
57
|
-
}, d =
|
|
58
|
-
() =>
|
|
59
|
-
),
|
|
60
|
-
() =>
|
|
61
|
-
),
|
|
62
|
-
() =>
|
|
63
|
-
),
|
|
64
|
-
() =>
|
|
65
|
-
),
|
|
66
|
-
() => r.showFileActions && (
|
|
67
|
-
),
|
|
68
|
-
() =>
|
|
60
|
+
}, d = i(() => p(v.value)), a = i(() => n.value[d.value]), R = i(() => a.value?.kind === "image"), N = i(() => a.value?.kind === "video"), C = i(
|
|
61
|
+
() => a.value?.kind === "video" ? a.value.controls !== !1 : !1
|
|
62
|
+
), le = i(() => a.value?.kind === "video" ? a.value.muted === !0 : !1), ue = i(
|
|
63
|
+
() => a.value?.kind === "video" ? a.value.playsinline !== !1 : !0
|
|
64
|
+
), se = i(
|
|
65
|
+
() => a.value?.kind === "video" && a.value.preload || "metadata"
|
|
66
|
+
), de = i(
|
|
67
|
+
() => a.value?.kind === "video" && a.value.name || "video"
|
|
68
|
+
), E = i(() => a.value?.name || ""), ce = i(() => r.showFileName ? E.value : ""), D = i(() => a.value?.downloadHref || ""), O = i(() => r.showFileActions && N.value && !C.value), ge = i(
|
|
69
|
+
() => r.showFileActions && (O.value || !!D.value)
|
|
70
|
+
), fe = i(
|
|
71
|
+
() => Q({
|
|
69
72
|
"nmorph-media-gallery": [
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
r.imageFit === "cover" &&
|
|
75
|
-
r.videoFit === "cover" &&
|
|
73
|
+
g.value && "opened",
|
|
74
|
+
R.value && "image",
|
|
75
|
+
N.value && "video",
|
|
76
|
+
u.value && N.value && "video-playing",
|
|
77
|
+
r.imageFit === "cover" && R.value && "image-cover",
|
|
78
|
+
r.videoFit === "cover" && N.value && "video-cover"
|
|
76
79
|
]
|
|
77
80
|
})
|
|
78
|
-
),
|
|
79
|
-
...
|
|
81
|
+
), ve = i(() => `rotate(${s.value}deg) scale(${f.value})`), me = i(() => ({
|
|
82
|
+
...Oe({
|
|
80
83
|
"--nmorph-private-media-gallery-trigger-height": r.height
|
|
81
84
|
}),
|
|
82
|
-
"--nmorph-private-media-gallery-trigger-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
"--nmorph-private-media-gallery-trigger-image-fit": r.triggerImageFit,
|
|
86
|
+
"--nmorph-private-media-gallery-trigger-video-fit": r.triggerVideoFit,
|
|
87
|
+
...r.triggerStyle || {}
|
|
88
|
+
})), G = i(
|
|
89
|
+
() => Q({
|
|
90
|
+
"nmorph-media-gallery__trigger": [
|
|
91
|
+
r.height !== void 0 && "fixed-height",
|
|
92
|
+
r.triggerLayout !== "grid" && r.triggerLayout,
|
|
93
|
+
r.triggerLayout !== "grid" && n.value.length === 1 && "single",
|
|
94
|
+
r.triggerLayout !== "grid" && n.value.length === 2 && "paired",
|
|
95
|
+
r.triggerLayout !== "grid" && n.value.length > 2 && "wrapped"
|
|
96
|
+
]
|
|
86
97
|
})
|
|
87
|
-
),
|
|
98
|
+
), pe = i(() => [G.value, r.triggerClass]), b = (e) => {
|
|
88
99
|
if (e === void 0 || Number.isNaN(e) || e < 0) return "";
|
|
89
100
|
if (e === 0) return "0 B";
|
|
90
|
-
const t = ["B", "KB", "MB", "GB", "TB"],
|
|
91
|
-
return `${
|
|
92
|
-
},
|
|
93
|
-
|
|
94
|
-
},
|
|
101
|
+
const t = ["B", "KB", "MB", "GB", "TB"], o = Math.min(Math.floor(Math.log(e) / Math.log(1024)), t.length - 1), I = e / 1024 ** o, Ce = I >= 10 || o === 0 || Number.isInteger(I) ? 0 : 1;
|
|
102
|
+
return `${I.toFixed(Ce)} ${t[o]}`;
|
|
103
|
+
}, he = i(() => r.showFileSize ? b(a.value?.size) : ""), ye = (e) => e.name || "", Ie = (e, t) => e.name || `${e.kind === "video" ? "Video" : "Image"} ${t + 1}`, we = (e) => b(e.size), z = (e) => e.downloadHref || "", $ = (e) => r.showTriggerPreviewAction && e.kind === "video", K = (e) => r.showTriggerFullscreenAction && e.kind === "video", U = (e) => r.showTriggerDownloadAction && !!z(e), Ne = (e) => r.showTriggerActions && ($(e) || K(e) || U(e)), Fe = (e, t) => {
|
|
104
|
+
S.value[e] = t instanceof HTMLVideoElement ? t : null;
|
|
105
|
+
}, q = (e) => typeof e.aspectRatio == "number" && Number.isFinite(e.aspectRatio) && e.aspectRatio > 0 ? e.aspectRatio : te, j = (e) => {
|
|
106
|
+
if (typeof r.height == "number") return r.height;
|
|
107
|
+
if (typeof r.height == "string") {
|
|
108
|
+
const o = r.height.trim().match(/^(\d+(?:\.\d+)?)px$/)?.[1];
|
|
109
|
+
if (o) return Number.parseFloat(o);
|
|
110
|
+
}
|
|
111
|
+
return e;
|
|
112
|
+
}, T = (e, t) => `${parseFloat((e * j(t)).toFixed(3))}px`, W = (e) => {
|
|
113
|
+
const t = q(e);
|
|
114
|
+
if (r.triggerLayout === "natural") {
|
|
115
|
+
const o = T(t, re);
|
|
116
|
+
return {
|
|
117
|
+
"--nmorph-private-media-gallery-trigger-item-ratio": t,
|
|
118
|
+
"--nmorph-private-media-gallery-trigger-item-basis": o,
|
|
119
|
+
flexGrow: t,
|
|
120
|
+
flexBasis: o
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
if (r.triggerLayout === "mosaic") {
|
|
124
|
+
const o = T(t, oe);
|
|
125
|
+
return {
|
|
126
|
+
"--nmorph-private-media-gallery-trigger-item-ratio": t,
|
|
127
|
+
"--nmorph-private-media-gallery-trigger-item-basis": o,
|
|
128
|
+
flexGrow: Math.min(Math.max(t, 0.75), 2.35),
|
|
129
|
+
flexBasis: o
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
return {};
|
|
133
|
+
}, xe = (e, t) => [
|
|
95
134
|
e.itemClass,
|
|
96
135
|
r.triggerItemClass?.(e, t)
|
|
97
|
-
],
|
|
98
|
-
const
|
|
136
|
+
], Se = (e, t) => {
|
|
137
|
+
const o = {
|
|
99
138
|
...e.itemStyle || {},
|
|
100
139
|
...r.triggerItemStyle?.(e, t) || {}
|
|
101
|
-
};
|
|
102
|
-
return typeof e.aspectRatio == "number" && Number.isFinite(e.aspectRatio) && e.aspectRatio > 0 && (
|
|
140
|
+
}, I = q(e);
|
|
141
|
+
return r.triggerLayout !== "grid" ? (Object.assign(o, W(e)), o.aspectRatio = String(I)) : typeof e.aspectRatio == "number" && Number.isFinite(e.aspectRatio) && e.aspectRatio > 0 && (o.aspectRatio = String(I)), o;
|
|
103
142
|
};
|
|
104
|
-
|
|
143
|
+
x(
|
|
105
144
|
() => r.modelValue,
|
|
106
145
|
(e) => {
|
|
107
|
-
|
|
146
|
+
g.value = e;
|
|
108
147
|
}
|
|
109
|
-
),
|
|
148
|
+
), x(
|
|
110
149
|
() => r.activeIndex,
|
|
111
150
|
(e) => {
|
|
112
|
-
typeof e == "number" && (
|
|
151
|
+
typeof e == "number" && (v.value = p(e));
|
|
113
152
|
},
|
|
114
153
|
{ immediate: !0 }
|
|
115
|
-
),
|
|
116
|
-
() => [r.initialIndex,
|
|
154
|
+
), x(
|
|
155
|
+
() => [r.initialIndex, n.value.length],
|
|
117
156
|
() => {
|
|
118
|
-
typeof r.activeIndex != "number" && (
|
|
157
|
+
typeof r.activeIndex != "number" && (v.value = p(r.initialIndex));
|
|
119
158
|
},
|
|
120
159
|
{ immediate: !0 }
|
|
121
|
-
),
|
|
122
|
-
() => [
|
|
160
|
+
), x(
|
|
161
|
+
() => [a.value?.kind, a.value?.src, d.value],
|
|
123
162
|
() => {
|
|
124
|
-
|
|
163
|
+
u.value = !1, y.value = null;
|
|
125
164
|
}
|
|
126
165
|
);
|
|
127
|
-
const
|
|
128
|
-
!h.value || h.value === y.value || (h.value.pause(),
|
|
129
|
-
},
|
|
130
|
-
f.value = 1,
|
|
131
|
-
},
|
|
132
|
-
if (!
|
|
166
|
+
const F = () => {
|
|
167
|
+
!h.value || h.value === y.value || (h.value.pause(), u.value = !1, y.value = h.value);
|
|
168
|
+
}, A = () => {
|
|
169
|
+
f.value = 1, s.value = 0;
|
|
170
|
+
}, H = (e) => {
|
|
171
|
+
if (!n.value.length) return;
|
|
133
172
|
const t = p(e);
|
|
134
173
|
if (t === d.value) return;
|
|
135
|
-
|
|
136
|
-
const
|
|
137
|
-
|
|
174
|
+
F(), u.value = !1, v.value = t, A(), l("update:active-index", t);
|
|
175
|
+
const o = n.value[t];
|
|
176
|
+
o && l("change", o, t);
|
|
177
|
+
}, L = () => {
|
|
178
|
+
const e = n.value.length;
|
|
179
|
+
e && H(d.value === 0 ? e - 1 : d.value - 1);
|
|
138
180
|
}, k = () => {
|
|
139
|
-
const e =
|
|
140
|
-
e &&
|
|
141
|
-
},
|
|
142
|
-
|
|
143
|
-
e && T(d.value === e - 1 ? 0 : d.value + 1);
|
|
144
|
-
}, he = (e) => {
|
|
145
|
-
if (!s.value.length) return;
|
|
181
|
+
const e = n.value.length;
|
|
182
|
+
e && H(d.value === e - 1 ? 0 : d.value + 1);
|
|
183
|
+
}, Be = (e) => {
|
|
184
|
+
if (!n.value.length) return;
|
|
146
185
|
const t = p(e);
|
|
147
|
-
|
|
148
|
-
const
|
|
149
|
-
|
|
150
|
-
},
|
|
151
|
-
|
|
152
|
-
},
|
|
153
|
-
|
|
154
|
-
},
|
|
155
|
-
|
|
156
|
-
},
|
|
186
|
+
F(), u.value = !1, v.value = t, A(), w.value = !0, g.value = !0, l("update:model-value", !0), l("update:active-index", t);
|
|
187
|
+
const o = n.value[t];
|
|
188
|
+
o && l("change", o, t);
|
|
189
|
+
}, Z = () => {
|
|
190
|
+
g.value && (F(), g.value = !1, l("update:model-value", !1), l("close"));
|
|
191
|
+
}, Re = () => {
|
|
192
|
+
s.value = s.value + 90, s.value >= 360 && (s.value = 0);
|
|
193
|
+
}, be = () => {
|
|
194
|
+
s.value = s.value - 90, s.value <= -360 && (s.value = 0);
|
|
195
|
+
}, qe = () => {
|
|
157
196
|
f.value = parseFloat(Math.min(f.value + 0.2, 4).toFixed(3));
|
|
158
|
-
},
|
|
197
|
+
}, Te = () => {
|
|
159
198
|
f.value = parseFloat(Math.max(f.value - 0.2, 0.2).toFixed(3));
|
|
160
|
-
},
|
|
199
|
+
}, Ae = () => {
|
|
161
200
|
f.value = 1;
|
|
162
|
-
},
|
|
201
|
+
}, _ = async (e) => {
|
|
163
202
|
if (e)
|
|
164
203
|
try {
|
|
165
204
|
const t = e.requestFullscreen?.() || e.webkitRequestFullscreen?.();
|
|
@@ -170,90 +209,90 @@ const G = 45, ft = /* @__PURE__ */ Ae({
|
|
|
170
209
|
e.webkitEnterFullscreen?.();
|
|
171
210
|
} catch {
|
|
172
211
|
}
|
|
173
|
-
},
|
|
174
|
-
!
|
|
175
|
-
},
|
|
176
|
-
e.kind === "video" && (l("fullscreen", e, t), await
|
|
177
|
-
},
|
|
212
|
+
}, He = async () => {
|
|
213
|
+
!a.value || a.value.kind !== "video" || (l("fullscreen", a.value, d.value), await _(h.value));
|
|
214
|
+
}, Le = async (e, t) => {
|
|
215
|
+
e.kind === "video" && (l("fullscreen", e, t), await _(S.value[t]));
|
|
216
|
+
}, X = (e, t) => {
|
|
178
217
|
l("download", e, t);
|
|
179
|
-
}, Be = () => {
|
|
180
|
-
o.value && Z(o.value, d.value);
|
|
181
|
-
}, Se = () => {
|
|
182
|
-
i.value = !0, y.value = null;
|
|
183
|
-
}, be = () => {
|
|
184
|
-
i.value = !1;
|
|
185
|
-
}, Te = () => {
|
|
186
|
-
i.value = !1;
|
|
187
218
|
}, ke = () => {
|
|
188
|
-
|
|
189
|
-
},
|
|
190
|
-
|
|
219
|
+
a.value && X(a.value, d.value);
|
|
220
|
+
}, _e = () => {
|
|
221
|
+
u.value = !0, y.value = null;
|
|
222
|
+
}, Me = () => {
|
|
223
|
+
u.value = !1;
|
|
224
|
+
}, Pe = () => {
|
|
225
|
+
u.value = !1;
|
|
226
|
+
}, Ve = () => {
|
|
227
|
+
u.value = !1;
|
|
228
|
+
}, M = (e) => {
|
|
229
|
+
if (g.value && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
|
|
191
230
|
if (e.key === "Escape") {
|
|
192
|
-
e.preventDefault(),
|
|
231
|
+
e.preventDefault(), Z();
|
|
193
232
|
return;
|
|
194
233
|
}
|
|
195
|
-
|
|
234
|
+
B.value && (e.key === "ArrowLeft" && (e.preventDefault(), L()), e.key === "ArrowRight" && (e.preventDefault(), k()));
|
|
196
235
|
}
|
|
197
|
-
},
|
|
198
|
-
typeof document > "u" || document.addEventListener("keydown",
|
|
236
|
+
}, Y = () => {
|
|
237
|
+
typeof document > "u" || document.addEventListener("keydown", M);
|
|
199
238
|
}, P = () => {
|
|
200
|
-
typeof document > "u" || document.removeEventListener("keydown",
|
|
239
|
+
typeof document > "u" || document.removeEventListener("keydown", M);
|
|
201
240
|
};
|
|
202
|
-
|
|
203
|
-
|
|
241
|
+
x(
|
|
242
|
+
g,
|
|
204
243
|
(e) => {
|
|
205
244
|
if (e) {
|
|
206
|
-
if (
|
|
207
|
-
|
|
245
|
+
if (Y(), y.value = null, w.value) {
|
|
246
|
+
w.value = !1;
|
|
208
247
|
return;
|
|
209
248
|
}
|
|
210
|
-
|
|
249
|
+
v.value = p(
|
|
211
250
|
typeof r.activeIndex == "number" ? r.activeIndex : r.initialIndex
|
|
212
251
|
);
|
|
213
252
|
} else
|
|
214
|
-
|
|
253
|
+
w.value = !1, F(), u.value = !1, P();
|
|
215
254
|
},
|
|
216
255
|
{ immediate: !0 }
|
|
217
|
-
),
|
|
218
|
-
const
|
|
219
|
-
|
|
256
|
+
), De(P);
|
|
257
|
+
const J = { SWIPE_THRESHOLD: ee, DEFAULT_TRIGGER_ASPECT_RATIO: te, NATURAL_TRIGGER_ROW_BASIS: re, MOSAIC_TRIGGER_ROW_BASIS: oe, props: r, emit: l, open: g, currentIndex: v, currentVideoRef: h, triggerVideoRefs: S, pausedVideoRef: y, videoPlaying: u, scaleLevel: f, rotateLevel: s, pointerStart: m, openingFromTrigger: w, sourceList: n, multipleItems: B, showNavigation: V, getClampedIndex: p, resolvedCurrentIndex: d, currentItem: a, isImage: R, isVideo: N, videoControls: C, videoMuted: le, videoPlaysinline: ue, videoPreload: se, currentVideoName: de, currentItemName: E, currentName: ce, currentDownloadHref: D, showVideoFullscreenAction: O, showFileActions: ge, modifiers: fe, imageTransform: ve, triggerStyle: me, triggerModifiers: G, triggerClasses: pe, formatSize: b, currentSize: he, getItemName: ye, getItemLabel: Ie, getItemSize: we, getItemDownloadHref: z, showTriggerPreviewActionForItem: $, showTriggerFullscreenActionForItem: K, showTriggerDownloadActionForItem: U, showTriggerActionsForItem: Ne, setTriggerVideoRef: Fe, getItemAspectRatio: q, getTriggerRowBasis: j, getTriggerFlexBasis: T, getTriggerLayoutStyle: W, getTriggerItemClass: xe, getTriggerItemStyle: Se, pauseCurrentVideo: F, resetImageTransform: A, setCurrentIndex: H, previousHandler: L, nextHandler: k, openPreviewAt: Be, closeHandler: Z, rotateRight: Re, rotateLeft: be, zoomIn: qe, zoomOut: Te, toggleNormalSize: Ae, requestVideoFullscreen: _, fullscreenHandler: He, triggerFullscreenHandler: Le, downloadItemHandler: X, downloadHandler: ke, videoPlayHandler: _e, videoPauseHandler: Me, videoEndedHandler: Pe, videoErrorHandler: Ve, keyboardNavigationHandler: M, addKeyboardNavigationListener: Y, removeKeyboardNavigationListener: P, pointerDownHandler: (e) => {
|
|
258
|
+
m.value = { x: e.clientX, y: e.clientY };
|
|
220
259
|
}, pointerUpHandler: (e) => {
|
|
221
|
-
if (!
|
|
222
|
-
|
|
260
|
+
if (!m.value || !V.value) {
|
|
261
|
+
m.value = null;
|
|
223
262
|
return;
|
|
224
263
|
}
|
|
225
|
-
const t = e.clientX -
|
|
226
|
-
|
|
264
|
+
const t = e.clientX - m.value.x, o = e.clientY - m.value.y;
|
|
265
|
+
m.value = null, !(Math.abs(t) < ee || Math.abs(t) < Math.abs(o) * 1.2) && (t > 0 ? L() : k());
|
|
227
266
|
}, get NmorphButton() {
|
|
228
|
-
return
|
|
267
|
+
return je;
|
|
229
268
|
}, get NmorphIcon() {
|
|
230
|
-
return
|
|
269
|
+
return Ue;
|
|
231
270
|
}, get NmorphIconDownload() {
|
|
232
|
-
return
|
|
271
|
+
return tt;
|
|
233
272
|
}, get NmorphIconEnlarge() {
|
|
234
|
-
return
|
|
273
|
+
return et;
|
|
235
274
|
}, get NmorphIconEye() {
|
|
236
|
-
return
|
|
275
|
+
return Ke;
|
|
237
276
|
}, get NmorphIconFullScreen() {
|
|
238
|
-
return
|
|
277
|
+
return $e;
|
|
239
278
|
}, get NmorphIconPlay() {
|
|
240
|
-
return
|
|
279
|
+
return Qe;
|
|
241
280
|
}, get NmorphIconRotateLeft() {
|
|
242
|
-
return
|
|
281
|
+
return Je;
|
|
243
282
|
}, get NmorphIconRotateRight() {
|
|
244
|
-
return
|
|
283
|
+
return Ye;
|
|
245
284
|
}, get NmorphIconShrink() {
|
|
246
|
-
return
|
|
285
|
+
return Xe;
|
|
247
286
|
}, get NmorphIconZoomIn() {
|
|
248
|
-
return
|
|
287
|
+
return Ze;
|
|
249
288
|
}, get NmorphIconZoomOut() {
|
|
250
|
-
return
|
|
289
|
+
return We;
|
|
251
290
|
}, get NmorphImage() {
|
|
252
|
-
return
|
|
253
|
-
}, NmorphPreviewPortal:
|
|
254
|
-
return Object.defineProperty(
|
|
291
|
+
return ze;
|
|
292
|
+
}, NmorphPreviewPortal: Ge };
|
|
293
|
+
return Object.defineProperty(J, "__isScriptSetup", { enumerable: !1, value: !0 }), J;
|
|
255
294
|
}
|
|
256
295
|
});
|
|
257
296
|
export {
|
|
258
|
-
|
|
297
|
+
Nt as default
|
|
259
298
|
};
|