@nmorph/nmorph-ui-kit 2.2.58 → 2.2.59
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-audio-meter/NmorphAudioMeter.css +1 -1
- package/dist/components/feedback/nmorph-guide/NmorphGuide.css +1 -0
- package/dist/components/feedback/nmorph-guide/NmorphGuide.vue.js +15 -0
- package/dist/components/feedback/nmorph-guide/NmorphGuide.vue2.js +124 -0
- package/dist/components/feedback/nmorph-guide/NmorphGuideStep.css +1 -0
- package/dist/components/feedback/nmorph-guide/NmorphGuideStep.vue.js +105 -0
- package/dist/components/feedback/nmorph-guide/NmorphGuideStep.vue2.js +55 -0
- package/dist/components/feedback/nmorph-guide/types.js +4 -0
- package/dist/components/navigation/nmorph-stepper/NmorphStepper.css +1 -0
- package/dist/components/navigation/nmorph-stepper/NmorphStepper.vue.js +48 -0
- package/dist/components/navigation/nmorph-stepper/NmorphStepper.vue2.js +98 -0
- package/dist/index.es.js +794 -786
- package/dist/index.umd.js +22 -22
- package/dist/package.json.js +1 -1
- package/dist/src/components/feedback/index.d.ts +3 -0
- package/dist/src/components/feedback/nmorph-guide/NmorphGuide.vue.d.ts +48 -0
- package/dist/src/components/feedback/nmorph-guide/NmorphGuideStep.vue.d.ts +18 -0
- package/dist/src/components/feedback/nmorph-guide/types.d.ts +90 -0
- package/dist/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue.d.ts +1 -1
- package/dist/src/components/form/nmorph-slider/NmorphSlider.vue.d.ts +5 -5
- package/dist/src/components/navigation/index.d.ts +2 -0
- package/dist/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.d.ts +1 -1
- package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts +1 -1
- package/dist/src/components/navigation/nmorph-stepper/NmorphStepper.vue.d.ts +27 -0
- package/dist/src/components/navigation/nmorph-stepper/types.d.ts +30 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-audio-meter{--nmorph-audio-meter-color: var(--nmorph-success-color);--nmorph-audio-meter-track-color: color-mix(in srgb, var(--nmorph-text-color) 16%, transparent);--nmorph-audio-meter-level: 0;--nmorph-audio-meter-percent: 0%;display:inline-flex;align-items:end}.nmorph-audio-meter.nmorph-audio-meter--warn{--nmorph-audio-meter-color: var(--nmorph-warn-color)}.nmorph-audio-meter.nmorph-audio-meter--error{--nmorph-audio-meter-color: var(--nmorph-error-color)}.nmorph-audio-meter.nmorph-audio-meter--bars{gap:2px;width:max-content;height:20px}.nmorph-audio-meter .nmorph-audio-meter__bar{width:4px;height:100%;background:var(--nmorph-audio-meter-track-color);border-radius:var(--border-radius-40);
|
|
1
|
+
.nmorph-audio-meter{--nmorph-audio-meter-color: var(--nmorph-success-color);--nmorph-audio-meter-track-color: color-mix(in srgb, var(--nmorph-text-color) 16%, transparent);--nmorph-audio-meter-level: 0;--nmorph-audio-meter-percent: 0%;display:inline-flex;align-items:end}.nmorph-audio-meter.nmorph-audio-meter--warn{--nmorph-audio-meter-color: var(--nmorph-warn-color)}.nmorph-audio-meter.nmorph-audio-meter--error{--nmorph-audio-meter-color: var(--nmorph-error-color)}.nmorph-audio-meter.nmorph-audio-meter--bars{gap:2px;width:max-content;height:20px}.nmorph-audio-meter .nmorph-audio-meter__bar{width:4px;height:100%;background:var(--nmorph-audio-meter-track-color);border-radius:var(--border-radius-40);opacity:.7}.nmorph-audio-meter .nmorph-audio-meter__bar--active{background:var(--nmorph-audio-meter-color);opacity:1}.nmorph-audio-meter.nmorph-audio-meter--line{width:72px;height:6px;overflow:hidden;background:var(--nmorph-audio-meter-track-color);border-radius:var(--border-radius-40)}.nmorph-audio-meter .nmorph-audio-meter__line{display:block;width:var(--nmorph-audio-meter-percent);height:100%;background:var(--nmorph-audio-meter-color)}.nmorph-audio-meter.nmorph-audio-meter--ring{width:28px;height:28px}.nmorph-audio-meter .nmorph-audio-meter__ring{display:block;width:100%;height:100%;background:radial-gradient(circle at center,var(--nmorph-main-color) 56%,transparent 58%),conic-gradient(var(--nmorph-audio-meter-color) var(--nmorph-audio-meter-percent),var(--nmorph-audio-meter-track-color) 0);border-radius:var(--border-radius-circular)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.nmorph-guide{display:contents}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import './NmorphGuide.css';
|
|
2
|
+
import o from "./NmorphGuide.vue2.js";
|
|
3
|
+
import { openBlock as r, createElementBlock as t, renderSlot as n } from "vue";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import p from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
|
+
const s = { class: "nmorph-guide" };
|
|
7
|
+
function i(e, c, m, d, a, f) {
|
|
8
|
+
return r(), t("div", s, [
|
|
9
|
+
n(e.$slots, "default")
|
|
10
|
+
]);
|
|
11
|
+
}
|
|
12
|
+
const $ = /* @__PURE__ */ p(o, [["render", i], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuide.vue"]]);
|
|
13
|
+
export {
|
|
14
|
+
$ as default
|
|
15
|
+
};
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import './NmorphGuide.css';
|
|
2
|
+
import { defineComponent as P, ref as C, computed as a, watch as j, provide as z } from "vue";
|
|
3
|
+
import { nmorphGuideInjectionKey as A } from "./types.js";
|
|
4
|
+
const G = /* @__PURE__ */ P({
|
|
5
|
+
__name: "NmorphGuide",
|
|
6
|
+
props: {
|
|
7
|
+
modelValue: { type: Boolean, required: !1, default: !1 },
|
|
8
|
+
activeStep: { type: [String, Number], required: !1, default: void 0 },
|
|
9
|
+
steps: { type: Array, required: !1, default: () => [] },
|
|
10
|
+
loop: { type: Boolean, required: !1, default: !1 },
|
|
11
|
+
closeOnFinish: { type: Boolean, required: !1, default: !0 },
|
|
12
|
+
showClose: { type: Boolean, required: !1, default: !0 },
|
|
13
|
+
showProgress: { type: Boolean, required: !1, default: !0 },
|
|
14
|
+
backText: { type: String, required: !1, default: "Back" },
|
|
15
|
+
nextText: { type: String, required: !1, default: "Next" },
|
|
16
|
+
finishText: { type: String, required: !1, default: "Finish" },
|
|
17
|
+
closeText: { type: String, required: !1, default: "Close" },
|
|
18
|
+
zIndex: { type: Number, required: !1, default: void 0 },
|
|
19
|
+
width: { type: [Number, String], required: !1, default: void 0 },
|
|
20
|
+
maxWidth: { type: [Number, String], required: !1, default: "280px" }
|
|
21
|
+
},
|
|
22
|
+
emits: ["update:model-value", "update:active-step", "change", "back", "next", "finish", "close"],
|
|
23
|
+
setup(I, { expose: N, emit: B }) {
|
|
24
|
+
const r = I, l = B, u = C({}), g = C(void 0);
|
|
25
|
+
let f = 0;
|
|
26
|
+
const d = (e) => String(e), y = a(() => {
|
|
27
|
+
const e = /* @__PURE__ */ new Map();
|
|
28
|
+
return r.steps.forEach((t, s) => {
|
|
29
|
+
e.set(d(t.name), {
|
|
30
|
+
...t,
|
|
31
|
+
order: t.order ?? s
|
|
32
|
+
});
|
|
33
|
+
}), e;
|
|
34
|
+
}), n = a(
|
|
35
|
+
() => Object.values(u.value).map((e) => ({
|
|
36
|
+
...e,
|
|
37
|
+
...y.value.get(d(e.name)),
|
|
38
|
+
registrationOrder: e.registrationOrder
|
|
39
|
+
})).filter((e) => !e.disabled).sort((e, t) => {
|
|
40
|
+
const s = e.order ?? e.registrationOrder, F = t.order ?? t.registrationOrder;
|
|
41
|
+
return s - F;
|
|
42
|
+
})
|
|
43
|
+
), q = a(() => r.modelValue && n.value.length > 0), O = a(() => r.activeStep ?? g.value), o = a(() => n.value.findIndex((e) => e.name === O.value)), i = a(() => n.value[o.value] ?? null), T = a(() => o.value <= 0), b = a(() => o.value >= n.value.length - 1), p = (e) => {
|
|
44
|
+
const t = n.value.find((s) => s.name === e);
|
|
45
|
+
t && (g.value = e, l("update:active-step", e), l("change", t, n.value.indexOf(t)));
|
|
46
|
+
}, c = (e) => {
|
|
47
|
+
const t = n.value[e];
|
|
48
|
+
t && p(t.name);
|
|
49
|
+
}, v = () => {
|
|
50
|
+
l("update:model-value", !1), l("close", i.value, o.value);
|
|
51
|
+
}, m = () => {
|
|
52
|
+
l("finish", i.value, o.value), r.closeOnFinish && v();
|
|
53
|
+
}, x = () => {
|
|
54
|
+
if (i.value) {
|
|
55
|
+
if (l("back", i.value, o.value), T.value) {
|
|
56
|
+
r.loop && c(n.value.length - 1);
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
c(o.value - 1);
|
|
60
|
+
}
|
|
61
|
+
}, h = () => {
|
|
62
|
+
if (i.value) {
|
|
63
|
+
if (l("next", i.value, o.value), b.value) {
|
|
64
|
+
r.loop ? c(0) : m();
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
c(o.value + 1);
|
|
68
|
+
}
|
|
69
|
+
}, S = (e) => {
|
|
70
|
+
p(e);
|
|
71
|
+
}, w = (e) => {
|
|
72
|
+
const t = d(e.name), s = u.value[t];
|
|
73
|
+
u.value = {
|
|
74
|
+
...u.value,
|
|
75
|
+
[t]: {
|
|
76
|
+
...s,
|
|
77
|
+
...e,
|
|
78
|
+
registrationOrder: s?.registrationOrder ?? f
|
|
79
|
+
}
|
|
80
|
+
}, s || (f += 1);
|
|
81
|
+
}, _ = (e) => {
|
|
82
|
+
const t = d(e), s = { ...u.value };
|
|
83
|
+
delete s[t], u.value = s;
|
|
84
|
+
};
|
|
85
|
+
j(
|
|
86
|
+
[() => r.modelValue, n, i],
|
|
87
|
+
([e, t, s]) => {
|
|
88
|
+
!e || s || t.length === 0 || p(t[0].name);
|
|
89
|
+
},
|
|
90
|
+
{ immediate: !0 }
|
|
91
|
+
), z(A, {
|
|
92
|
+
active: q,
|
|
93
|
+
activeStep: i,
|
|
94
|
+
activeIndex: o,
|
|
95
|
+
steps: n,
|
|
96
|
+
loop: a(() => r.loop),
|
|
97
|
+
showClose: a(() => r.showClose),
|
|
98
|
+
showProgress: a(() => r.showProgress),
|
|
99
|
+
backText: a(() => r.backText),
|
|
100
|
+
nextText: a(() => r.nextText),
|
|
101
|
+
finishText: a(() => r.finishText),
|
|
102
|
+
closeText: a(() => r.closeText),
|
|
103
|
+
zIndex: a(() => r.zIndex),
|
|
104
|
+
width: a(() => r.width),
|
|
105
|
+
maxWidth: a(() => r.maxWidth),
|
|
106
|
+
registerStep: w,
|
|
107
|
+
unregisterStep: _,
|
|
108
|
+
goToStep: S,
|
|
109
|
+
back: x,
|
|
110
|
+
next: h,
|
|
111
|
+
finish: m,
|
|
112
|
+
close: v
|
|
113
|
+
}), N({ back: x, next: h, finish: m, close: v, goToStep: S });
|
|
114
|
+
const k = { props: r, emit: l, registeredSteps: u, internalActiveStep: g, get registrationCursor() {
|
|
115
|
+
return f;
|
|
116
|
+
}, set registrationCursor(e) {
|
|
117
|
+
f = e;
|
|
118
|
+
}, getStepKey: d, stepOverrides: y, steps: n, active: q, activeStepName: O, activeIndex: o, activeStep: i, isFirstStep: T, isLastStep: b, setActiveStep: p, goToIndex: c, close: v, finish: m, back: x, next: h, goToStep: S, registerStep: w, unregisterStep: _ };
|
|
119
|
+
return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
export {
|
|
123
|
+
G as default
|
|
124
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.nmorph-guide-step__card{display:grid;gap:var(--indentation-03);min-width:min(240px,100vw - 48px)}.nmorph-guide-step__image{display:block;width:100%;max-height:140px;border-radius:var(--default-border-radius);object-fit:cover}.nmorph-guide-step__body{display:grid;gap:var(--indentation-02)}.nmorph-guide-step__progress{color:var(--nmorph-placeholder-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-guide-step__title{margin:0;color:var(--nmorph-text-color);font-size:var(--font-size-medium);line-height:var(--line-height-compact)}.nmorph-guide-step__text{margin:0;color:var(--nmorph-text-color);font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-guide-step__actions{display:flex;gap:var(--indentation-02);align-items:center}.nmorph-guide-step__spacer{flex:1 1 auto}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import './NmorphGuideStep.css';
|
|
2
|
+
import p from "./NmorphGuideStep.vue2.js";
|
|
3
|
+
import { openBlock as t, createBlock as s, withCtx as a, renderSlot as c, normalizeProps as g, mergeProps as m, createElementBlock as i, createCommentVNode as o, createElementVNode as n, toDisplayString as l, createVNode as h } from "vue";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import _ from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
|
+
const u = {
|
|
7
|
+
key: 1,
|
|
8
|
+
class: "nmorph-guide-step__card",
|
|
9
|
+
role: "dialog",
|
|
10
|
+
"aria-live": "polite"
|
|
11
|
+
}, v = ["src", "alt"], x = { class: "nmorph-guide-step__body" }, S = {
|
|
12
|
+
key: 0,
|
|
13
|
+
class: "nmorph-guide-step__progress"
|
|
14
|
+
}, f = {
|
|
15
|
+
key: 1,
|
|
16
|
+
class: "nmorph-guide-step__title"
|
|
17
|
+
}, k = {
|
|
18
|
+
key: 2,
|
|
19
|
+
class: "nmorph-guide-step__text"
|
|
20
|
+
}, y = { class: "nmorph-guide-step__actions" };
|
|
21
|
+
function b(d, r, w, e, C, N) {
|
|
22
|
+
return t(), s(e.NmorphTooltip, {
|
|
23
|
+
"force-show": e.isActive,
|
|
24
|
+
position: e.tooltipPosition,
|
|
25
|
+
"z-index": e.guide?.zIndex.value,
|
|
26
|
+
width: e.guide?.width.value,
|
|
27
|
+
"max-width": e.guide?.maxWidth.value,
|
|
28
|
+
trigger: "manual",
|
|
29
|
+
disabled: !e.guide || e.props.disabled
|
|
30
|
+
}, {
|
|
31
|
+
content: a(() => [
|
|
32
|
+
e.hasCustomContent && e.stepSlotProps ? c(d.$slots, "content", g(m({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), i("div", u, [
|
|
33
|
+
e.currentStep.imageSrc ? (t(), i("img", {
|
|
34
|
+
key: 0,
|
|
35
|
+
class: "nmorph-guide-step__image",
|
|
36
|
+
src: e.currentStep.imageSrc,
|
|
37
|
+
alt: e.currentStep.imageAlt || e.currentStep.title || ""
|
|
38
|
+
}, null, 8, v)) : o("v-if", !0),
|
|
39
|
+
n("div", x, [
|
|
40
|
+
e.guide?.showProgress.value ? (t(), i(
|
|
41
|
+
"div",
|
|
42
|
+
S,
|
|
43
|
+
l(e.stepSlotProps.index + 1) + " / " + l(e.stepSlotProps.total),
|
|
44
|
+
1
|
|
45
|
+
/* TEXT */
|
|
46
|
+
)) : o("v-if", !0),
|
|
47
|
+
e.currentStep.title ? (t(), i(
|
|
48
|
+
"h3",
|
|
49
|
+
f,
|
|
50
|
+
l(e.currentStep.title),
|
|
51
|
+
1
|
|
52
|
+
/* TEXT */
|
|
53
|
+
)) : o("v-if", !0),
|
|
54
|
+
e.currentStep.text ? (t(), i(
|
|
55
|
+
"p",
|
|
56
|
+
k,
|
|
57
|
+
l(e.currentStep.text),
|
|
58
|
+
1
|
|
59
|
+
/* TEXT */
|
|
60
|
+
)) : o("v-if", !0)
|
|
61
|
+
]),
|
|
62
|
+
n("div", y, [
|
|
63
|
+
e.guide?.showClose.value ? (t(), s(e.NmorphButton, {
|
|
64
|
+
key: 0,
|
|
65
|
+
class: "nmorph-guide-step__close",
|
|
66
|
+
text: e.guide.closeText.value,
|
|
67
|
+
"style-type": "transparent",
|
|
68
|
+
height: "thin",
|
|
69
|
+
onClick: e.guide.close
|
|
70
|
+
}, null, 8, ["text", "onClick"])) : o("v-if", !0),
|
|
71
|
+
r[1] || (r[1] = n(
|
|
72
|
+
"span",
|
|
73
|
+
{ class: "nmorph-guide-step__spacer" },
|
|
74
|
+
null,
|
|
75
|
+
-1
|
|
76
|
+
/* CACHED */
|
|
77
|
+
)),
|
|
78
|
+
h(e.NmorphButton, {
|
|
79
|
+
class: "nmorph-guide-step__back",
|
|
80
|
+
text: e.guide?.backText.value,
|
|
81
|
+
"style-type": "transparent",
|
|
82
|
+
height: "thin",
|
|
83
|
+
disabled: e.isFirstStep && !e.guide?.loop.value,
|
|
84
|
+
onClick: e.guide?.back
|
|
85
|
+
}, null, 8, ["text", "disabled", "onClick"]),
|
|
86
|
+
h(e.NmorphButton, {
|
|
87
|
+
class: "nmorph-guide-step__next",
|
|
88
|
+
text: e.isLastStep && !e.guide?.loop.value ? e.guide?.finishText.value : e.guide?.nextText.value,
|
|
89
|
+
height: "thin",
|
|
90
|
+
onClick: r[0] || (r[0] = (P) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
|
|
91
|
+
}, null, 8, ["text"])
|
|
92
|
+
])
|
|
93
|
+
])) : o("v-if", !0)
|
|
94
|
+
]),
|
|
95
|
+
default: a(() => [
|
|
96
|
+
c(d.$slots, "default")
|
|
97
|
+
]),
|
|
98
|
+
_: 3
|
|
99
|
+
/* FORWARDED */
|
|
100
|
+
}, 8, ["force-show", "position", "z-index", "width", "max-width", "disabled"]);
|
|
101
|
+
}
|
|
102
|
+
const A = /* @__PURE__ */ _(p, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
|
|
103
|
+
export {
|
|
104
|
+
A as default
|
|
105
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import './NmorphGuideStep.css';
|
|
2
|
+
import { defineComponent as g, inject as b, useSlots as x, computed as o, watch as y, onBeforeUnmount as _ } from "vue";
|
|
3
|
+
import h from "../../basic/nmorph-button/NmorphButton.vue.js";
|
|
4
|
+
import q from "../nmorph-tooltip/NmorphTooltip.vue.js";
|
|
5
|
+
import { nmorphGuideInjectionKey as B } from "./types.js";
|
|
6
|
+
const I = /* @__PURE__ */ g({
|
|
7
|
+
__name: "NmorphGuideStep",
|
|
8
|
+
props: {
|
|
9
|
+
name: { type: [String, Number], required: !0 },
|
|
10
|
+
title: { type: String, required: !1, default: "" },
|
|
11
|
+
text: { type: String, required: !1, default: "" },
|
|
12
|
+
imageSrc: { type: String, required: !1, default: "" },
|
|
13
|
+
imageAlt: { type: String, required: !1, default: "" },
|
|
14
|
+
position: { type: null, required: !1, default: "bottom" },
|
|
15
|
+
order: { type: Number, required: !1, default: void 0 },
|
|
16
|
+
disabled: { type: Boolean, required: !1, default: !1 }
|
|
17
|
+
},
|
|
18
|
+
setup(p, { expose: d }) {
|
|
19
|
+
d();
|
|
20
|
+
const e = p, t = b(B, null), a = x(), i = o(() => t?.activeStep.value ?? null), r = o(() => t?.activeIndex.value ?? -1), n = o(() => t?.steps.value.length ?? 0), s = o(() => r.value <= 0), l = o(() => r.value >= n.value - 1), m = o(() => !!(t?.active.value && i.value?.name === e.name)), c = o(() => i.value?.position ?? e.position), f = o(() => !!a.content), v = o(() => !t || !i.value ? null : {
|
|
21
|
+
step: i.value,
|
|
22
|
+
index: r.value,
|
|
23
|
+
total: n.value,
|
|
24
|
+
isFirst: s.value,
|
|
25
|
+
isLast: l.value,
|
|
26
|
+
back: t.back,
|
|
27
|
+
next: t.next,
|
|
28
|
+
close: t.close,
|
|
29
|
+
finish: t.finish
|
|
30
|
+
});
|
|
31
|
+
y(
|
|
32
|
+
() => ({
|
|
33
|
+
name: e.name,
|
|
34
|
+
title: e.title,
|
|
35
|
+
text: e.text,
|
|
36
|
+
imageSrc: e.imageSrc,
|
|
37
|
+
imageAlt: e.imageAlt,
|
|
38
|
+
position: e.position,
|
|
39
|
+
order: e.order,
|
|
40
|
+
disabled: e.disabled
|
|
41
|
+
}),
|
|
42
|
+
(S) => {
|
|
43
|
+
t?.registerStep(S);
|
|
44
|
+
},
|
|
45
|
+
{ immediate: !0 }
|
|
46
|
+
), _(() => {
|
|
47
|
+
t?.unregisterStep(e.name);
|
|
48
|
+
});
|
|
49
|
+
const u = { props: e, guide: t, slots: a, currentStep: i, currentIndex: r, totalSteps: n, isFirstStep: s, isLastStep: l, isActive: m, tooltipPosition: c, hasCustomContent: f, stepSlotProps: v, NmorphButton: h, NmorphTooltip: q };
|
|
50
|
+
return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
export {
|
|
54
|
+
I as default
|
|
55
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.nmorph-stepper{width:100%;border-radius:var(--default-border-radius)}.nmorph-stepper.nmorph-stepper--interactive{cursor:grab}.nmorph-stepper.nmorph-stepper--disabled{cursor:not-allowed;opacity:.6}.nmorph-stepper:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-stepper__viewport{width:100%;overflow:hidden;border-radius:inherit;touch-action:pan-y}.nmorph-stepper__track{display:flex;width:100%;min-width:0;transition:transform .24s ease;will-change:transform}.nmorph-stepper__track>*{flex:0 0 100%;width:100%;min-width:100%;max-width:100%}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import './NmorphStepper.css';
|
|
2
|
+
import n from "./NmorphStepper.vue2.js";
|
|
3
|
+
import { openBlock as i, createElementBlock as l, normalizeClass as t, createElementVNode as r, normalizeStyle as d, renderSlot as a, normalizeProps as c, guardReactiveProps as p } from "vue";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import s from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
|
+
const m = ["aria-label", "aria-disabled", "tabindex"], h = {
|
|
7
|
+
class: "nmorph-stepper__viewport",
|
|
8
|
+
"aria-live": "polite",
|
|
9
|
+
"aria-atomic": "true"
|
|
10
|
+
};
|
|
11
|
+
function _(o, P, v, e, b, f) {
|
|
12
|
+
return i(), l("div", {
|
|
13
|
+
class: t(e.modifiers),
|
|
14
|
+
role: "group",
|
|
15
|
+
"aria-roledescription": "stepper",
|
|
16
|
+
"aria-label": e.props.ariaLabel,
|
|
17
|
+
"aria-disabled": e.props.disabled || void 0,
|
|
18
|
+
tabindex: e.tabIndex,
|
|
19
|
+
onWheel: e.handleWheel,
|
|
20
|
+
onKeydown: e.handleKeydown,
|
|
21
|
+
onPointerdown: e.handlePointerDown,
|
|
22
|
+
onPointermove: e.handlePointerMove,
|
|
23
|
+
onPointerup: e.handlePointerEnd,
|
|
24
|
+
onPointercancel: e.clearPointer,
|
|
25
|
+
onPointerleave: e.clearPointer,
|
|
26
|
+
onClickCapture: e.handleClickCapture
|
|
27
|
+
}, [
|
|
28
|
+
r("div", h, [
|
|
29
|
+
r(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
class: "nmorph-stepper__track",
|
|
33
|
+
style: d(e.trackStyle)
|
|
34
|
+
},
|
|
35
|
+
[
|
|
36
|
+
a(o.$slots, "default")
|
|
37
|
+
],
|
|
38
|
+
4
|
|
39
|
+
/* STYLE */
|
|
40
|
+
)
|
|
41
|
+
]),
|
|
42
|
+
a(o.$slots, "indicator", c(p(e.indicatorSlotProps)))
|
|
43
|
+
], 42, m);
|
|
44
|
+
}
|
|
45
|
+
const C = /* @__PURE__ */ s(n, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-stepper/NmorphStepper.vue"]]);
|
|
46
|
+
export {
|
|
47
|
+
C as default
|
|
48
|
+
};
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import './NmorphStepper.css';
|
|
2
|
+
import { defineComponent as Z, ref as i, computed as o, watch as ee, onBeforeUnmount as te } from "vue";
|
|
3
|
+
import { useModifiers as re } from "../../../utils/create-modifiers.js";
|
|
4
|
+
const N = 28, R = 320, T = 6, W = 42, q = 1.2, O = 350, le = /* @__PURE__ */ Z({
|
|
5
|
+
__name: "NmorphStepper",
|
|
6
|
+
props: {
|
|
7
|
+
modelValue: { type: Number, required: !1, default: 0 },
|
|
8
|
+
count: { type: Number, required: !1, default: 0 },
|
|
9
|
+
disabled: { type: Boolean, required: !1, default: !1 },
|
|
10
|
+
loop: { type: Boolean, required: !1, default: !1 },
|
|
11
|
+
wheel: { type: Boolean, required: !1, default: !0 },
|
|
12
|
+
swipe: { type: Boolean, required: !1, default: !0 },
|
|
13
|
+
ariaLabel: { type: String, required: !1, default: "Stepper" }
|
|
14
|
+
},
|
|
15
|
+
emits: ["update:model-value", "change"],
|
|
16
|
+
setup(X, { expose: B, emit: A }) {
|
|
17
|
+
const n = X, y = A, I = i(!1), c = i(null), x = i(!1), p = i(null), a = i(null), f = i(!1), d = (e) => Number.isFinite(e) ? Math.trunc(e ?? 0) : 0, v = o(() => Math.max(0, d(n.count))), _ = (e) => {
|
|
18
|
+
const t = v.value, r = d(e);
|
|
19
|
+
return t <= 0 ? 0 : n.loop ? (r % t + t) % t : Math.min(Math.max(r, 0), t - 1);
|
|
20
|
+
}, m = o(() => _(n.modelValue)), l = o(() => !n.disabled && v.value > 1), Y = o(() => l.value ? 0 : void 0), K = o(() => ({
|
|
21
|
+
transform: `translateX(-${m.value * 100}%)`
|
|
22
|
+
})), z = o(
|
|
23
|
+
() => re({
|
|
24
|
+
"nmorph-stepper": [n.disabled && "disabled", l.value && "interactive"]
|
|
25
|
+
})
|
|
26
|
+
), D = (e, t) => e < t ? "previous" : "next", C = (e, t, r) => {
|
|
27
|
+
const V = { index: e, previousIndex: t, direction: r };
|
|
28
|
+
y("update:model-value", e), y("change", V);
|
|
29
|
+
}, b = (e) => {
|
|
30
|
+
if (n.disabled) return;
|
|
31
|
+
const t = m.value, r = _(e);
|
|
32
|
+
r !== t && C(r, t, D(r, t));
|
|
33
|
+
}, M = (e) => {
|
|
34
|
+
if (!l.value) return;
|
|
35
|
+
const t = e === "next" ? 1 : -1;
|
|
36
|
+
b(m.value + t);
|
|
37
|
+
}, u = () => M("next"), s = () => M("previous"), S = () => {
|
|
38
|
+
c.value && clearTimeout(c.value), c.value = null, I.value = !1;
|
|
39
|
+
}, k = () => {
|
|
40
|
+
S(), I.value = !0, c.value = setTimeout(S, R);
|
|
41
|
+
}, L = (e) => {
|
|
42
|
+
const t = Math.abs(e.deltaX), r = Math.abs(e.deltaY);
|
|
43
|
+
return t === 0 && r === 0 ? 0 : t >= r ? e.deltaX : e.deltaY;
|
|
44
|
+
}, U = (e) => {
|
|
45
|
+
if (!l.value || !n.wheel) return;
|
|
46
|
+
const t = L(e);
|
|
47
|
+
Math.abs(t) < N || (e.preventDefault(), !I.value && (t > 0 ? u() : s(), k()));
|
|
48
|
+
}, F = (e) => {
|
|
49
|
+
l.value && (e.key === "ArrowRight" && (e.preventDefault(), u()), e.key === "ArrowLeft" && (e.preventDefault(), s()));
|
|
50
|
+
}, h = () => {
|
|
51
|
+
p.value && clearTimeout(p.value), p.value = null, x.value = !1;
|
|
52
|
+
}, w = () => {
|
|
53
|
+
h(), x.value = !0, p.value = setTimeout(h, O);
|
|
54
|
+
}, P = (e) => a.value ? {
|
|
55
|
+
x: e.clientX - a.value.x,
|
|
56
|
+
y: e.clientY - a.value.y
|
|
57
|
+
} : null, g = (e, t) => Math.abs(e.x) >= t && Math.abs(e.x) > Math.abs(e.y) * q, j = (e) => {
|
|
58
|
+
!l.value || !n.swipe || e.pointerType === "mouse" && e.button !== 0 || (e.currentTarget?.setPointerCapture?.(e.pointerId), a.value = {
|
|
59
|
+
x: e.clientX,
|
|
60
|
+
y: e.clientY,
|
|
61
|
+
pointerId: e.pointerId ?? null
|
|
62
|
+
}, f.value = !1);
|
|
63
|
+
}, G = (e) => {
|
|
64
|
+
if (!a.value || a.value.pointerId !== null && e.pointerId !== a.value.pointerId) return;
|
|
65
|
+
const t = P(e);
|
|
66
|
+
!t || !g(t, T) || (f.value = !0, e.preventDefault());
|
|
67
|
+
}, E = () => {
|
|
68
|
+
a.value = null, f.value = !1;
|
|
69
|
+
}, $ = (e) => {
|
|
70
|
+
if (a.value?.pointerId !== null && e.pointerId !== a.value.pointerId) return;
|
|
71
|
+
const t = P(e), r = !!(t && g(t, T));
|
|
72
|
+
e.currentTarget?.releasePointerCapture?.(e.pointerId), (r || f.value) && w(), t && g(t, W) && (t.x > 0 ? s() : u()), E();
|
|
73
|
+
}, J = (e) => {
|
|
74
|
+
x.value && (e.preventDefault(), e.stopPropagation(), h());
|
|
75
|
+
}, Q = o(() => ({
|
|
76
|
+
index: m.value,
|
|
77
|
+
count: v.value,
|
|
78
|
+
goTo: b,
|
|
79
|
+
next: u,
|
|
80
|
+
previous: s
|
|
81
|
+
}));
|
|
82
|
+
ee(
|
|
83
|
+
() => [n.modelValue, v.value, n.loop],
|
|
84
|
+
([e]) => {
|
|
85
|
+
const t = _(e);
|
|
86
|
+
t !== e && C(t, d(e), D(t, d(e)));
|
|
87
|
+
},
|
|
88
|
+
{ immediate: !0 }
|
|
89
|
+
), te(() => {
|
|
90
|
+
S(), h();
|
|
91
|
+
}), B({ goTo: b, next: u, previous: s });
|
|
92
|
+
const H = { WHEEL_THRESHOLD: N, WHEEL_LOCK_IN_MS: R, DRAG_CLICK_THRESHOLD: T, SWIPE_THRESHOLD: W, SWIPE_AXIS_RATIO: q, CLICK_SUPPRESSION_IN_MS: O, props: n, emit: y, wheelLocked: I, wheelUnlockTimer: c, suppressClick: x, suppressClickTimer: p, pointerStart: a, pointerDragging: f, toFiniteInteger: d, normalizedCount: v, normalizeIndex: _, currentIndex: m, isInteractive: l, tabIndex: Y, trackStyle: K, modifiers: z, getDirection: D, emitStepChange: C, goTo: b, move: M, next: u, previous: s, clearWheelLock: S, lockWheel: k, getWheelDelta: L, handleWheel: U, handleKeydown: F, clearClickSuppression: h, suppressNextClick: w, getPointerDiff: P, isHorizontalDrag: g, handlePointerDown: j, handlePointerMove: G, clearPointer: E, handlePointerEnd: $, handleClickCapture: J, indicatorSlotProps: Q };
|
|
93
|
+
return Object.defineProperty(H, "__isScriptSetup", { enumerable: !1, value: !0 }), H;
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
export {
|
|
97
|
+
le as default
|
|
98
|
+
};
|