@nmorph/nmorph-ui-kit 2.2.10 → 2.2.12
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-avatar/NmorphAvatar.css +1 -0
- package/dist/components/data/nmorph-avatar/NmorphAvatar.vue.js +74 -46
- package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js +26 -21
- package/dist/components/data/nmorph-carousel/NmorphCarousel.vue2.js +4 -4
- package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js +77 -38
- package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue2.js +31 -30
- package/dist/components/data/nmorph-pagination/NmorphPagination.css +1 -1
- package/dist/components/data/nmorph-pagination/NmorphPagination.vue.js +33 -28
- package/dist/components/data/nmorph-pagination/NmorphPagination.vue2.js +18 -17
- package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js +8 -8
- package/dist/components/form/nmorph-checkbox/NmorphCheckbox.css +1 -1
- package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue.js +15 -13
- package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue2.js +8 -8
- package/dist/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue2.js +22 -14
- package/dist/components/form/nmorph-radio/NmorphRadio.css +1 -1
- package/dist/components/form/nmorph-radio/NmorphRadio.vue.js +22 -20
- package/dist/components/form/nmorph-radio/NmorphRadio.vue2.js +7 -7
- package/dist/components/form/nmorph-radio-group/NmorphRadioGroup.vue2.js +14 -14
- package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue.js +7 -7
- package/dist/hooks/use-common-styles.js +10 -11
- package/dist/index.es.js +695 -694
- package/dist/index.umd.js +27 -28
- package/dist/nuxt.mjs +36 -7
- package/dist/package.json.js +1 -1
- package/dist/plugin.js +21 -20
- package/dist/src/components/data/nmorph-badge/NmorphBadge.vue.d.ts +1 -1
- package/dist/src/components/data/nmorph-image/NmorphImage.vue.d.ts +3 -3
- package/dist/src/components/data/nmorph-image-preview/NmorphImagePreview.vue.d.ts +14 -2
- package/dist/src/components/data/nmorph-pagination/NmorphPagination.vue.d.ts +3 -0
- package/dist/src/components/form/nmorph-checkbox/NmorphCheckbox.vue.d.ts +1 -0
- package/dist/src/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue.d.ts +4 -3
- package/dist/src/components/form/nmorph-radio/NmorphRadio.vue.d.ts +1 -0
- package/dist/src/components/form/nmorph-radio-group/NmorphRadioGroup.vue.d.ts +4 -3
- package/dist/src/types/index.d.ts +9 -2
- package/dist/style.css +1 -1
- package/dist/types/index.js +14 -8
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}
|
|
@@ -1,43 +1,56 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import h from "
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import './NmorphAvatar.css';
|
|
2
|
+
import p from "./NmorphAvatar.vue2.js";
|
|
3
|
+
import { openBlock as e, createElementBlock as l, normalizeStyle as n, normalizeClass as h, createVNode as a, withCtx as o, renderSlot as t, toDisplayString as s, createBlock as i, resolveDynamicComponent as d, createCommentVNode as v } from "vue";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import S from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
|
+
function w(c, m, _, r, y, I) {
|
|
7
|
+
return e(), l(
|
|
7
8
|
"div",
|
|
8
9
|
{
|
|
9
|
-
class:
|
|
10
|
-
style:
|
|
11
|
-
onClick:
|
|
10
|
+
class: h(r.modifiers),
|
|
11
|
+
style: n(r.styles),
|
|
12
|
+
onClick: r.openPreview
|
|
12
13
|
},
|
|
13
14
|
[
|
|
14
|
-
|
|
15
|
-
fit:
|
|
16
|
-
src:
|
|
17
|
-
"src-set":
|
|
18
|
-
alt:
|
|
15
|
+
a(r.NmorphImage, {
|
|
16
|
+
fit: r.props.fit,
|
|
17
|
+
src: r.imageSrc,
|
|
18
|
+
"src-set": r.props.srcSet,
|
|
19
|
+
alt: r.props.alt,
|
|
19
20
|
"frame-border": 0,
|
|
20
|
-
onLoad:
|
|
21
|
-
onError:
|
|
21
|
+
onLoad: r.onImageLoad,
|
|
22
|
+
onError: r.onImageError
|
|
22
23
|
}, {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
loading: o(() => [
|
|
25
|
+
a(r.NmorphIcon, {
|
|
26
|
+
size: "small",
|
|
27
|
+
color: "var(--nmorph-accent-color)"
|
|
28
|
+
}, {
|
|
29
|
+
default: o(() => [
|
|
30
|
+
a(r.NmorphIconLoader)
|
|
31
|
+
]),
|
|
32
|
+
_: 1
|
|
33
|
+
/* STABLE */
|
|
34
|
+
})
|
|
35
|
+
]),
|
|
36
|
+
error: o(() => [
|
|
37
|
+
t(c.$slots, "error", {}, () => [
|
|
38
|
+
r.initials ? (e(), l(
|
|
26
39
|
"span",
|
|
27
40
|
{
|
|
28
41
|
key: 0,
|
|
29
42
|
class: "nmorph-avatar__initials",
|
|
30
|
-
style:
|
|
43
|
+
style: n({ fontSize: r.initialsFontSize })
|
|
31
44
|
},
|
|
32
|
-
|
|
45
|
+
s(r.initials),
|
|
33
46
|
5
|
|
34
47
|
/* TEXT, STYLE */
|
|
35
|
-
)) : (
|
|
48
|
+
)) : (e(), i(r.NmorphIcon, {
|
|
36
49
|
key: 1,
|
|
37
|
-
width:
|
|
50
|
+
width: r.stubIconSize
|
|
38
51
|
}, {
|
|
39
|
-
default:
|
|
40
|
-
(
|
|
52
|
+
default: o(() => [
|
|
53
|
+
(e(), i(d(r.fallback)))
|
|
41
54
|
]),
|
|
42
55
|
_: 1
|
|
43
56
|
/* STABLE */
|
|
@@ -47,46 +60,61 @@ function y(n, t, k, e, I, g) {
|
|
|
47
60
|
_: 3
|
|
48
61
|
/* FORWARDED */
|
|
49
62
|
}, 8, ["fit", "src", "src-set", "alt"]),
|
|
50
|
-
|
|
51
|
-
|
|
63
|
+
r.imageSrc ? v("v-if", !0) : t(c.$slots, "error", { key: 0 }, () => [
|
|
64
|
+
r.initials ? (e(), l(
|
|
52
65
|
"span",
|
|
53
66
|
{
|
|
54
67
|
key: 0,
|
|
55
68
|
class: "nmorph-avatar__initials",
|
|
56
|
-
style:
|
|
69
|
+
style: n({ fontSize: r.initialsFontSize })
|
|
57
70
|
},
|
|
58
|
-
|
|
71
|
+
s(r.initials),
|
|
59
72
|
5
|
|
60
73
|
/* TEXT, STYLE */
|
|
61
|
-
)) : (
|
|
74
|
+
)) : (e(), i(r.NmorphIcon, {
|
|
62
75
|
key: 1,
|
|
63
|
-
width:
|
|
76
|
+
width: r.stubIconSize
|
|
64
77
|
}, {
|
|
65
|
-
default:
|
|
66
|
-
(
|
|
78
|
+
default: o(() => [
|
|
79
|
+
(e(), i(d(r.fallback)))
|
|
67
80
|
]),
|
|
68
81
|
_: 1
|
|
69
82
|
/* STABLE */
|
|
70
83
|
}, 8, ["width"]))
|
|
71
84
|
]),
|
|
72
|
-
|
|
85
|
+
r.previewAvailable ? (e(), i(r.NmorphImagePreview, {
|
|
73
86
|
key: 1,
|
|
74
|
-
|
|
75
|
-
"model-value":
|
|
76
|
-
src:
|
|
77
|
-
alt:
|
|
78
|
-
"initial-index":
|
|
79
|
-
"scale-step":
|
|
80
|
-
"min-scale-level":
|
|
81
|
-
"max-scale-level":
|
|
82
|
-
"onUpdate:modelValue":
|
|
83
|
-
},
|
|
87
|
+
"show-trigger": !1,
|
|
88
|
+
"model-value": r.previewOpen,
|
|
89
|
+
src: r.imagePreviewSrc,
|
|
90
|
+
alt: r.props.alt,
|
|
91
|
+
"initial-index": r.props.previewInitialIndex,
|
|
92
|
+
"scale-step": r.props.previewScaleStep,
|
|
93
|
+
"min-scale-level": r.props.previewMinScaleLevel,
|
|
94
|
+
"max-scale-level": r.props.previewMaxScaleLevel,
|
|
95
|
+
"onUpdate:modelValue": m[0] || (m[0] = (f) => r.previewOpen = f)
|
|
96
|
+
}, {
|
|
97
|
+
loading: o(() => [
|
|
98
|
+
a(r.NmorphIcon, {
|
|
99
|
+
size: "small",
|
|
100
|
+
color: "var(--nmorph-accent-color)"
|
|
101
|
+
}, {
|
|
102
|
+
default: o(() => [
|
|
103
|
+
a(r.NmorphIconLoader)
|
|
104
|
+
]),
|
|
105
|
+
_: 1
|
|
106
|
+
/* STABLE */
|
|
107
|
+
})
|
|
108
|
+
]),
|
|
109
|
+
_: 1
|
|
110
|
+
/* STABLE */
|
|
111
|
+
}, 8, ["model-value", "src", "alt", "initial-index", "scale-step", "min-scale-level", "max-scale-level"])) : v("v-if", !0)
|
|
84
112
|
],
|
|
85
113
|
6
|
|
86
114
|
/* CLASS, STYLE */
|
|
87
115
|
);
|
|
88
116
|
}
|
|
89
|
-
const
|
|
117
|
+
const b = /* @__PURE__ */ S(p, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-avatar/NmorphAvatar.vue"]]);
|
|
90
118
|
export {
|
|
91
|
-
|
|
119
|
+
b as default
|
|
92
120
|
};
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import './NmorphAvatar.css';
|
|
2
|
+
import { defineComponent as $, ref as z, computed as a } from "vue";
|
|
2
3
|
import { useModifiers as B } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import L from "../nmorph-image-preview/NmorphImagePreview.vue.js";
|
|
3
5
|
import v from "../../../assets/icons/avatar.svg.js";
|
|
4
|
-
import M from "
|
|
5
|
-
import k from "
|
|
6
|
-
|
|
6
|
+
import M from "../../../assets/icons/loader.svg.js";
|
|
7
|
+
import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
8
|
+
import C from "../nmorph-image/NmorphImage.vue.js";
|
|
9
|
+
const J = /* @__PURE__ */ $({
|
|
7
10
|
__name: "NmorphAvatar",
|
|
8
11
|
props: {
|
|
9
12
|
src: { type: [String, Array], required: !1 },
|
|
@@ -24,46 +27,48 @@ const U = /* @__PURE__ */ z({
|
|
|
24
27
|
alt: { type: String, required: !1 }
|
|
25
28
|
},
|
|
26
29
|
emits: ["error", "load"],
|
|
27
|
-
setup(g, { expose:
|
|
28
|
-
|
|
29
|
-
const r = g,
|
|
30
|
-
|
|
30
|
+
setup(g, { expose: h, emit: y }) {
|
|
31
|
+
h();
|
|
32
|
+
const r = g, o = y, S = (e) => {
|
|
33
|
+
o("error", e);
|
|
31
34
|
}, w = (e) => {
|
|
32
|
-
|
|
33
|
-
}, l =
|
|
35
|
+
o("load", e);
|
|
36
|
+
}, l = z(!1), p = (e, t = 0) => Array.isArray(e) ? e[t] : e, u = a(() => `${r.imagePadding}px`), i = a(() => `${r.size}px`), b = a(() => p(r.src)), n = a(() => r.previewSrc || r.src), m = a(() => {
|
|
34
37
|
const e = n.value;
|
|
35
38
|
return Array.isArray(e) ? e.length > 0 : !!e;
|
|
36
39
|
}), q = a(() => {
|
|
37
40
|
const e = n.value;
|
|
38
41
|
return Array.isArray(e) ? e : e || "";
|
|
39
|
-
}),
|
|
42
|
+
}), s = a(() => r.preview && m.value), N = a(
|
|
40
43
|
() => B({
|
|
41
44
|
nmorph: [`${r.frameBorder > 0 && "shadow-combined"}`],
|
|
42
|
-
"nmorph-avatar": [r.shape, `${
|
|
45
|
+
"nmorph-avatar": [r.shape, `${s.value && "preview"}`]
|
|
43
46
|
})
|
|
44
|
-
),
|
|
47
|
+
), I = a(() => `${r.size / 100 * 60}px`), x = a(() => `${Math.max(12, r.size * 0.38)}px`), c = a(() => r.shape === "circle" ? "50%" : "4px"), d = a(() => r.shape === "circle" ? "50%" : "2px"), A = a(() => ({
|
|
45
48
|
width: i.value,
|
|
46
49
|
height: i.value,
|
|
47
50
|
"--nmorph-avatar-size": i.value,
|
|
48
|
-
"--nmorph-avatar-image-padding":
|
|
49
|
-
"--nmorph-avatar-radius":
|
|
51
|
+
"--nmorph-avatar-image-padding": u.value,
|
|
52
|
+
"--nmorph-avatar-radius": c.value,
|
|
50
53
|
"--nmorph-avatar-image-radius": d.value,
|
|
51
54
|
"--nmorph-avatar-frame-border": `${r.frameBorder}px`
|
|
52
|
-
})), _ = a(() => r.fallback || v),
|
|
55
|
+
})), _ = a(() => r.fallback || v), P = a(() => {
|
|
53
56
|
const e = r.name.trim();
|
|
54
57
|
if (!e) return "";
|
|
55
58
|
const t = e.split(/\s+/);
|
|
56
59
|
return (t.length > 1 ? `${t[0][0]}${t[t.length - 1][0]}` : t[0].slice(0, 2)).toUpperCase();
|
|
57
|
-
}), f = { props: r, emit:
|
|
58
|
-
|
|
60
|
+
}), f = { props: r, emit: o, onImageError: S, onImageLoad: w, previewOpen: l, getSourceByIndex: p, imagePadding: u, size: i, imageSrc: b, previewSource: n, hasPreviewSource: m, imagePreviewSrc: q, previewAvailable: s, modifiers: N, stubIconSize: I, initialsFontSize: x, radius: c, imageRadius: d, styles: A, fallback: _, initials: P, openPreview: () => {
|
|
61
|
+
s.value && (l.value = !0);
|
|
59
62
|
}, get NmorphImage() {
|
|
60
|
-
return
|
|
63
|
+
return C;
|
|
61
64
|
}, get NmorphIcon() {
|
|
65
|
+
return k;
|
|
66
|
+
}, get NmorphIconLoader() {
|
|
62
67
|
return M;
|
|
63
|
-
} };
|
|
68
|
+
}, NmorphImagePreview: L };
|
|
64
69
|
return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
|
|
65
70
|
}
|
|
66
71
|
});
|
|
67
72
|
export {
|
|
68
|
-
|
|
73
|
+
J as default
|
|
69
74
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineComponent as y, ref as a, computed as v, provide as j, reactive as k, onMounted as x, nextTick as E, watch as O } from "vue";
|
|
2
2
|
import { useModifiers as D } from "../../../utils/create-modifiers.js";
|
|
3
3
|
import { generateUUID as w } from "../../../utils/common.js";
|
|
4
|
-
import A from "
|
|
5
|
-
import M from "
|
|
4
|
+
import A from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
5
|
+
import M from "../../../assets/icons/chevron-down.svg.js";
|
|
6
6
|
const L = /* @__PURE__ */ y({
|
|
7
7
|
__name: "NmorphCarousel",
|
|
8
8
|
props: {
|
|
@@ -40,9 +40,9 @@ const L = /* @__PURE__ */ y({
|
|
|
40
40
|
}, C = v(() => `translateX(-${e.value * 100}%)`), r = a(!0), m = { currentSlide: e, prevSlide: _, nextSlide: g, props: s, emit: u, modifiers: S, carouselData: c, carouselId: i, carouselWrapper: o, slidesRefs: n, addInitialCloneSlides: d, transitionEndHandler: p, setItemRef: b, translateX: C, transitionEnabled: r, isCurrentElementActive: (t) => t === e.value - 1, elementIndicator: (t) => {
|
|
41
41
|
e.value = t + 1;
|
|
42
42
|
}, get NmorphIcon() {
|
|
43
|
-
return M;
|
|
44
|
-
}, get NmorphIconChevronDown() {
|
|
45
43
|
return A;
|
|
44
|
+
}, get NmorphIconChevronDown() {
|
|
45
|
+
return M;
|
|
46
46
|
} };
|
|
47
47
|
return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
|
|
48
48
|
}
|
|
@@ -1,45 +1,65 @@
|
|
|
1
1
|
import './NmorphImagePreview.css';
|
|
2
|
-
import
|
|
3
|
-
import { openBlock as
|
|
2
|
+
import g from "./NmorphImagePreview.vue2.js";
|
|
3
|
+
import { openBlock as l, createElementBlock as a, Fragment as s, normalizeClass as h, createElementVNode as i, createVNode as o, createSlots as _, withCtx as r, renderSlot as m, createCommentVNode as t, createBlock as c, Teleport as p, normalizeStyle as k, renderList as N, resolveDynamicComponent as v } from "vue";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import
|
|
6
|
-
const
|
|
5
|
+
import w from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
|
+
const y = { class: "nmorph-image-preview__content" }, C = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "nmorph-image-preview__left"
|
|
9
|
-
},
|
|
9
|
+
}, I = {
|
|
10
10
|
key: 1,
|
|
11
11
|
class: "nmorph-image-preview__right"
|
|
12
|
-
},
|
|
13
|
-
function
|
|
14
|
-
return
|
|
15
|
-
|
|
12
|
+
}, S = { class: "nmorph-image-preview__actions" }, b = { class: "nmorph-image-preview__action-element" };
|
|
13
|
+
function B(n, z, D, e, H, L) {
|
|
14
|
+
return l(), a(
|
|
15
|
+
s,
|
|
16
16
|
null,
|
|
17
17
|
[
|
|
18
|
-
l(
|
|
18
|
+
e.props.showTrigger ? (l(), a(
|
|
19
19
|
"div",
|
|
20
20
|
{
|
|
21
|
-
|
|
21
|
+
key: 0,
|
|
22
|
+
class: h(e.modifiers)
|
|
22
23
|
},
|
|
23
24
|
[
|
|
24
|
-
|
|
25
|
+
i("div", {
|
|
25
26
|
class: "nmorph-image-preview__trigger",
|
|
26
27
|
onClick: e.clickHandler
|
|
27
28
|
}, [
|
|
28
29
|
o(e.NmorphImage, {
|
|
29
30
|
src: e.triggerSource,
|
|
30
31
|
alt: e.props.alt,
|
|
31
|
-
fit: "cover"
|
|
32
|
-
|
|
32
|
+
fit: "cover",
|
|
33
|
+
"frame-border": 0
|
|
34
|
+
}, _({
|
|
35
|
+
_: 2
|
|
36
|
+
/* DYNAMIC */
|
|
37
|
+
}, [
|
|
38
|
+
n.$slots.loading ? {
|
|
39
|
+
name: "loading",
|
|
40
|
+
fn: r(() => [
|
|
41
|
+
m(n.$slots, "loading")
|
|
42
|
+
]),
|
|
43
|
+
key: "0"
|
|
44
|
+
} : void 0,
|
|
45
|
+
n.$slots.error ? {
|
|
46
|
+
name: "error",
|
|
47
|
+
fn: r(() => [
|
|
48
|
+
m(n.$slots, "error")
|
|
49
|
+
]),
|
|
50
|
+
key: "1"
|
|
51
|
+
} : void 0
|
|
52
|
+
]), 1032, ["src", "alt"])
|
|
33
53
|
])
|
|
34
54
|
],
|
|
35
55
|
2
|
|
36
56
|
/* CLASS */
|
|
37
|
-
),
|
|
38
|
-
(
|
|
39
|
-
|
|
57
|
+
)) : t("v-if", !0),
|
|
58
|
+
(l(), c(p, { to: "body" }, [
|
|
59
|
+
i(
|
|
40
60
|
"div",
|
|
41
61
|
{
|
|
42
|
-
class:
|
|
62
|
+
class: h(["nmorph-image-preview__portal", e.modifiers])
|
|
43
63
|
},
|
|
44
64
|
[
|
|
45
65
|
o(e.NmorphOverlay, {
|
|
@@ -48,15 +68,34 @@ function y(x, B, S, e, b, u) {
|
|
|
48
68
|
onOnOutsideClick: e.closeHandler
|
|
49
69
|
}, {
|
|
50
70
|
default: r(() => [
|
|
51
|
-
|
|
71
|
+
i("div", y, [
|
|
52
72
|
o(e.NmorphImage, {
|
|
53
73
|
src: e.triggerSource,
|
|
54
74
|
alt: e.props.alt,
|
|
55
75
|
fit: "cover",
|
|
56
|
-
|
|
57
|
-
|
|
76
|
+
"frame-border": 0,
|
|
77
|
+
style: k({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
|
|
78
|
+
}, _({
|
|
79
|
+
_: 2
|
|
80
|
+
/* DYNAMIC */
|
|
81
|
+
}, [
|
|
82
|
+
n.$slots.loading ? {
|
|
83
|
+
name: "loading",
|
|
84
|
+
fn: r(() => [
|
|
85
|
+
m(n.$slots, "loading")
|
|
86
|
+
]),
|
|
87
|
+
key: "0"
|
|
88
|
+
} : void 0,
|
|
89
|
+
n.$slots.error ? {
|
|
90
|
+
name: "error",
|
|
91
|
+
fn: r(() => [
|
|
92
|
+
m(n.$slots, "error")
|
|
93
|
+
]),
|
|
94
|
+
key: "1"
|
|
95
|
+
} : void 0
|
|
96
|
+
]), 1032, ["src", "alt", "style"])
|
|
58
97
|
]),
|
|
59
|
-
e.multipleSources ? (
|
|
98
|
+
e.multipleSources ? (l(), a("div", C, [
|
|
60
99
|
o(e.NmorphButton, { onClick: e.previousHandler }, {
|
|
61
100
|
default: r(() => [
|
|
62
101
|
o(e.NmorphIcon, null, {
|
|
@@ -70,8 +109,8 @@ function y(x, B, S, e, b, u) {
|
|
|
70
109
|
_: 1
|
|
71
110
|
/* STABLE */
|
|
72
111
|
})
|
|
73
|
-
])) :
|
|
74
|
-
e.multipleSources ? (
|
|
112
|
+
])) : t("v-if", !0),
|
|
113
|
+
e.multipleSources ? (l(), a("div", I, [
|
|
75
114
|
o(e.NmorphButton, { onClick: e.nextHandler }, {
|
|
76
115
|
default: r(() => [
|
|
77
116
|
o(e.NmorphIcon, null, {
|
|
@@ -85,17 +124,17 @@ function y(x, B, S, e, b, u) {
|
|
|
85
124
|
_: 1
|
|
86
125
|
/* STABLE */
|
|
87
126
|
})
|
|
88
|
-
])) :
|
|
89
|
-
|
|
90
|
-
(
|
|
91
|
-
|
|
127
|
+
])) : t("v-if", !0),
|
|
128
|
+
i("div", S, [
|
|
129
|
+
(l(), a(
|
|
130
|
+
s,
|
|
92
131
|
null,
|
|
93
|
-
|
|
94
|
-
key:
|
|
132
|
+
N(e.actions, (d, f) => i("div", {
|
|
133
|
+
key: f,
|
|
95
134
|
class: "nmorph-image-preview__action-element"
|
|
96
135
|
}, [
|
|
97
136
|
o(e.NmorphButton, {
|
|
98
|
-
onClick:
|
|
137
|
+
onClick: d.handler
|
|
99
138
|
}, {
|
|
100
139
|
default: r(() => [
|
|
101
140
|
o(
|
|
@@ -103,7 +142,7 @@ function y(x, B, S, e, b, u) {
|
|
|
103
142
|
null,
|
|
104
143
|
{
|
|
105
144
|
default: r(() => [
|
|
106
|
-
(
|
|
145
|
+
(l(), c(v(d.icon)))
|
|
107
146
|
]),
|
|
108
147
|
_: 2
|
|
109
148
|
/* DYNAMIC */
|
|
@@ -119,7 +158,7 @@ function y(x, B, S, e, b, u) {
|
|
|
119
158
|
64
|
|
120
159
|
/* STABLE_FRAGMENT */
|
|
121
160
|
)),
|
|
122
|
-
|
|
161
|
+
i("div", b, [
|
|
123
162
|
o(e.NmorphButton, {
|
|
124
163
|
disabled: e.scaleLevel === 1,
|
|
125
164
|
onClick: e.enlargeShrinkActionData.handler
|
|
@@ -127,7 +166,7 @@ function y(x, B, S, e, b, u) {
|
|
|
127
166
|
default: r(() => [
|
|
128
167
|
o(e.NmorphIcon, null, {
|
|
129
168
|
default: r(() => [
|
|
130
|
-
(
|
|
169
|
+
(l(), c(v(e.enlargeShrinkActionData.icon)))
|
|
131
170
|
]),
|
|
132
171
|
_: 1
|
|
133
172
|
/* STABLE */
|
|
@@ -139,8 +178,8 @@ function y(x, B, S, e, b, u) {
|
|
|
139
178
|
])
|
|
140
179
|
])
|
|
141
180
|
]),
|
|
142
|
-
_:
|
|
143
|
-
/*
|
|
181
|
+
_: 3
|
|
182
|
+
/* FORWARDED */
|
|
144
183
|
}, 8, ["show", "z-index"])
|
|
145
184
|
],
|
|
146
185
|
2
|
|
@@ -152,7 +191,7 @@ function y(x, B, S, e, b, u) {
|
|
|
152
191
|
/* STABLE_FRAGMENT */
|
|
153
192
|
);
|
|
154
193
|
}
|
|
155
|
-
const
|
|
194
|
+
const E = /* @__PURE__ */ w(g, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
|
|
156
195
|
export {
|
|
157
|
-
|
|
196
|
+
E as default
|
|
158
197
|
};
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import './NmorphImagePreview.css';
|
|
2
|
-
import { defineComponent as A, ref as m, watch as
|
|
3
|
-
import { useModifiers as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import V from "
|
|
11
|
-
import M from "../../
|
|
12
|
-
import P from "../../basic/nmorph-
|
|
13
|
-
import Z from "
|
|
14
|
-
import j from "
|
|
2
|
+
import { defineComponent as A, ref as m, watch as B, computed as u } from "vue";
|
|
3
|
+
import { useModifiers as C } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import F from "../../../assets/icons/shrink.svg.js";
|
|
5
|
+
import H from "../../../assets/icons/rotate-right.svg.js";
|
|
6
|
+
import R from "../../../assets/icons/rotate-left.svg.js";
|
|
7
|
+
import T from "../../../assets/icons/zoom-in.svg.js";
|
|
8
|
+
import z from "../../../assets/icons/zoom-out.svg.js";
|
|
9
|
+
import D from "../../../assets/icons/enlarge.svg.js";
|
|
10
|
+
import V from "../../../assets/icons/chevron-down.svg.js";
|
|
11
|
+
import M from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
|
|
12
|
+
import P from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
13
|
+
import Z from "../../basic/nmorph-button/NmorphButton.vue.js";
|
|
14
|
+
import j from "../nmorph-image/NmorphImage.vue.js";
|
|
15
15
|
const te = /* @__PURE__ */ A({
|
|
16
16
|
__name: "NmorphImagePreview",
|
|
17
17
|
props: {
|
|
@@ -22,23 +22,24 @@ const te = /* @__PURE__ */ A({
|
|
|
22
22
|
scaleStep: { type: Number, required: !1, default: 0.2 },
|
|
23
23
|
minScaleLevel: { type: Number, required: !1, default: 0.2 },
|
|
24
24
|
maxScaleLevel: { type: Number, required: !1, default: 4 },
|
|
25
|
-
zIndex: { type: Number, required: !1 }
|
|
25
|
+
zIndex: { type: Number, required: !1 },
|
|
26
|
+
showTrigger: { type: Boolean, required: !1, default: !0 }
|
|
26
27
|
},
|
|
27
28
|
emits: ["update:model-value"],
|
|
28
29
|
setup(N, { expose: I, emit: y }) {
|
|
29
30
|
I();
|
|
30
31
|
const e = N, l = m(e.modelValue);
|
|
31
|
-
|
|
32
|
+
B(
|
|
32
33
|
() => e.modelValue,
|
|
33
34
|
(a) => l.value = a
|
|
34
35
|
);
|
|
35
36
|
const S = u(
|
|
36
|
-
() =>
|
|
37
|
+
() => C({
|
|
37
38
|
"nmorph-image-preview": [`${l.value && "opened"}`]
|
|
38
39
|
})
|
|
39
40
|
), t = m(e.initialIndex), x = u(() => typeof e.src == "string" ? e.src : e.src[t.value]), r = m(1), _ = () => {
|
|
40
41
|
l.value = !0, i("update:model-value", l.value);
|
|
41
|
-
},
|
|
42
|
+
}, q = () => {
|
|
42
43
|
l.value = !1, i("update:model-value", l.value);
|
|
43
44
|
}, s = () => {
|
|
44
45
|
o.value = o.value + 90, o.value >= 360 && (o.value = 0);
|
|
@@ -52,7 +53,7 @@ const te = /* @__PURE__ */ A({
|
|
|
52
53
|
r.value = 1;
|
|
53
54
|
}, h = () => {
|
|
54
55
|
r.value = 1;
|
|
55
|
-
}, o = m(0),
|
|
56
|
+
}, o = m(0), L = () => {
|
|
56
57
|
const a = e.src.length - 1, n = t.value - 1;
|
|
57
58
|
n < 0 ? t.value = a : t.value = n;
|
|
58
59
|
}, b = () => {
|
|
@@ -60,40 +61,40 @@ const te = /* @__PURE__ */ A({
|
|
|
60
61
|
n > a ? t.value = 0 : t.value = n;
|
|
61
62
|
}, w = u(() => {
|
|
62
63
|
let a = {
|
|
63
|
-
icon:
|
|
64
|
+
icon: F,
|
|
64
65
|
handler: h
|
|
65
66
|
};
|
|
66
67
|
return d.value && (a = {
|
|
67
|
-
icon:
|
|
68
|
+
icon: D,
|
|
68
69
|
handler: f
|
|
69
70
|
}), a;
|
|
70
71
|
}), O = [
|
|
71
72
|
{
|
|
72
|
-
icon:
|
|
73
|
+
icon: H,
|
|
73
74
|
handler: s
|
|
74
75
|
},
|
|
75
76
|
{
|
|
76
|
-
icon:
|
|
77
|
+
icon: R,
|
|
77
78
|
handler: c
|
|
78
79
|
},
|
|
79
80
|
{
|
|
80
|
-
icon:
|
|
81
|
+
icon: T,
|
|
81
82
|
handler: p
|
|
82
83
|
},
|
|
83
84
|
{
|
|
84
|
-
icon:
|
|
85
|
+
icon: z,
|
|
85
86
|
handler: v
|
|
86
87
|
}
|
|
87
|
-
], i = y, k = u(() => Array.isArray(e.src) && e.src.length > 0), g = { props: e, open: l, modifiers: S, currentIndex: t, triggerSource: x, scaleLevel: r, clickHandler: _, closeHandler:
|
|
88
|
-
return
|
|
88
|
+
], i = y, k = u(() => Array.isArray(e.src) && e.src.length > 0), g = { props: e, open: l, modifiers: S, currentIndex: t, triggerSource: x, scaleLevel: r, clickHandler: _, closeHandler: q, rotateRight: s, rotateLeft: c, zoomIn: p, zoomOut: v, isLevelChangedToMin: d, enlargeToNormal: f, shrinkToNormal: h, rotateLevel: o, previousHandler: L, nextHandler: b, enlargeShrinkActionData: w, actions: O, emit: i, multipleSources: k, get NmorphImage() {
|
|
89
|
+
return j;
|
|
89
90
|
}, get NmorphButton() {
|
|
90
|
-
return
|
|
91
|
+
return Z;
|
|
91
92
|
}, get NmorphIcon() {
|
|
92
|
-
return
|
|
93
|
+
return P;
|
|
93
94
|
}, get NmorphOverlay() {
|
|
94
|
-
return
|
|
95
|
+
return M;
|
|
95
96
|
}, get NmorphIconChevronDown() {
|
|
96
|
-
return
|
|
97
|
+
return V;
|
|
97
98
|
} };
|
|
98
99
|
return Object.defineProperty(g, "__isScriptSetup", { enumerable: !1, value: !0 }), g;
|
|
99
100
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-pagination{display:flex;justify-content:center;margin-top:var(--indentation-04)}.nmorph-pagination .nmorph-radio-group__content{display:flex;justify-content:center;gap:8px}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-bottom:0;margin-right:0}.nmorph-pagination .nmorph-pagination__page-group{margin:0 var(--indentation-01)}.nmorph-pagination .nmorph-pagination__prev-icon{rotate:90deg}.nmorph-pagination .nmorph-pagination__next-icon{rotate:-90deg}.nmorph-pagination .nmorph-pagination__prev-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-btn{margin-left:8px}.nmorph-pagination .nmorph-pagination__page-btn{width:40px;height:
|
|
1
|
+
.nmorph-pagination{display:flex;justify-content:center;margin-top:var(--indentation-04)}.nmorph-pagination .nmorph-radio-group__content{display:flex;justify-content:center;gap:8px}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-bottom:0;margin-right:0}.nmorph-pagination .nmorph-pagination__page-group{margin:0 var(--indentation-01)}.nmorph-pagination .nmorph-pagination__prev-icon{rotate:90deg}.nmorph-pagination .nmorph-pagination__next-icon{rotate:-90deg}.nmorph-pagination .nmorph-pagination__prev-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-btn{margin-left:8px}.nmorph-pagination .nmorph-pagination__page-btn{width:40px;height:var(--height)}.nmorph-pagination .nmorph-pagination__page-btn-wrapper{display:flex}.nmorph-pagination .nmorph-pagination__prev-secondary-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-secondary-btn{margin-left:8px}
|