@leaflink/stash 44.2.0 → 44.3.1
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/Dropdown.js +13 -13
- package/dist/Dropdown.js.map +1 -1
- package/dist/Select.js +93 -93
- package/dist/Select.js.map +1 -1
- package/dist/Select.vue.d.ts +1 -1
- package/dist/Step.js +53 -49
- package/dist/Step.js.map +1 -1
- package/dist/Step.vue.d.ts +8 -1
- package/dist/Stepper.js +7 -7
- package/dist/Stepper.js.map +1 -1
- package/dist/components.css +1 -1
- package/package.json +3 -3
package/dist/Select.vue.d.ts
CHANGED
package/dist/Step.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import { S as
|
|
4
|
-
import { _ as
|
|
1
|
+
import { defineComponent as v, useSlots as h, useCssModule as x, inject as g, computed as r, onBeforeMount as y, openBlock as a, createElementBlock as n, normalizeClass as o, unref as t, createElementVNode as i, createBlock as B, toDisplayString as _, createCommentVNode as m, renderSlot as k } from "vue";
|
|
2
|
+
import b from "./Icon.js";
|
|
3
|
+
import { S as E } from "./keys-7ecef029.js";
|
|
4
|
+
import { _ as C } from "./_plugin-vue_export-helper-dad06003.js";
|
|
5
5
|
import "lodash-es/uniqueId";
|
|
6
6
|
import "./index-79ce320f.js";
|
|
7
7
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
8
|
-
const
|
|
8
|
+
const N = {
|
|
9
9
|
key: 0,
|
|
10
10
|
class: "tw-mr-3 tw-flex tw-flex-col tw-items-center"
|
|
11
|
-
},
|
|
11
|
+
}, S = { key: 1 }, z = /* @__PURE__ */ v({
|
|
12
12
|
__name: "Step",
|
|
13
13
|
props: {
|
|
14
14
|
active: { type: Boolean, default: !1 },
|
|
@@ -17,96 +17,100 @@ const E = {
|
|
|
17
17
|
text: {},
|
|
18
18
|
nested: { type: Boolean, default: !1 },
|
|
19
19
|
step: { default: void 0 },
|
|
20
|
-
disabled: { type: Boolean, default: !1 }
|
|
20
|
+
disabled: { type: Boolean, default: !1 },
|
|
21
|
+
loading: { type: Boolean, default: !1 }
|
|
21
22
|
},
|
|
22
|
-
setup(
|
|
23
|
-
const e =
|
|
24
|
-
return
|
|
23
|
+
setup(f) {
|
|
24
|
+
const e = f, d = h(), l = x(), s = g(E), c = r(() => (s == null ? void 0 : s.orientation) === "horizontal"), p = r(() => (s == null ? void 0 : s.theme) === "light"), w = r(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info");
|
|
25
|
+
return y(() => {
|
|
25
26
|
s && s.registerStep(e.nested);
|
|
26
|
-
}), (
|
|
27
|
-
class:
|
|
27
|
+
}), (u, H) => (a(), n("li", {
|
|
28
|
+
class: o(["stash-step tw-relative tw-flex tw-w-full", [
|
|
28
29
|
t(l).step,
|
|
29
|
-
{ [t(l)["nested-step--active"]]: e.nested && e.active, "last:tw-w-auto":
|
|
30
|
+
{ [t(l)["nested-step--active"]]: e.nested && e.active, "last:tw-w-auto": c.value }
|
|
30
31
|
]]),
|
|
31
32
|
"data-test": "stash-step"
|
|
32
33
|
}, [
|
|
33
|
-
e.nested ?
|
|
34
|
+
e.nested ? m("", !0) : (a(), n("div", N, [
|
|
34
35
|
i("div", {
|
|
35
|
-
class:
|
|
36
|
+
class: o([
|
|
36
37
|
t(l).circle,
|
|
37
38
|
{
|
|
38
39
|
[t(l)["circle--todo"]]: !e.error && !e.active && !e.completed,
|
|
39
40
|
[t(l)["circle--error"]]: e.error && !e.active,
|
|
40
41
|
[t(l)["circle--completed"]]: e.completed && !e.active,
|
|
41
|
-
[t(l)["circle--active"]]: e.active
|
|
42
|
+
[t(l)["circle--active"]]: e.active,
|
|
43
|
+
[t(l)["circle--loading"]]: e.loading
|
|
42
44
|
}
|
|
43
45
|
])
|
|
44
46
|
}, [
|
|
45
|
-
(e.completed || e.error) && !e.active ? (a(),
|
|
47
|
+
(e.completed || e.error || e.loading) && !e.active ? (a(), B(b, {
|
|
46
48
|
key: 0,
|
|
47
|
-
name:
|
|
49
|
+
name: w.value,
|
|
50
|
+
class: o({ "fx-spin": e.loading }),
|
|
48
51
|
size: "dense"
|
|
49
|
-
}, null, 8, ["name"])) : (a(),
|
|
52
|
+
}, null, 8, ["name", "class"])) : (a(), n("span", S, _(e.step), 1))
|
|
50
53
|
], 2),
|
|
51
54
|
i("div", {
|
|
52
|
-
class:
|
|
55
|
+
class: o(["tw-my-1.5 tw-w-px tw-bg-ice-500", [
|
|
53
56
|
t(l).line,
|
|
54
|
-
{ [t(l)["line--expanded"]]: e.completed || e.active, "tw-hidden":
|
|
57
|
+
{ [t(l)["line--expanded"]]: e.completed || e.active, "tw-hidden": c.value }
|
|
55
58
|
]])
|
|
56
59
|
}, null, 2)
|
|
57
60
|
])),
|
|
58
61
|
i("div", {
|
|
59
|
-
class:
|
|
62
|
+
class: o(["tw-flex", [
|
|
60
63
|
{
|
|
61
|
-
"tw-w-full tw-flex-row tw-items-center":
|
|
62
|
-
"tw-flex-col": !
|
|
64
|
+
"tw-w-full tw-flex-row tw-items-center": c.value,
|
|
65
|
+
"tw-flex-col": !c.value
|
|
63
66
|
}
|
|
64
67
|
]])
|
|
65
68
|
}, [
|
|
66
69
|
i("div", {
|
|
67
|
-
class:
|
|
70
|
+
class: o(["tw-whitespace-nowrap", [
|
|
68
71
|
t(l).title,
|
|
69
72
|
{
|
|
70
73
|
"tw-cursor-pointer": !e.active && (e.completed || e.error),
|
|
71
74
|
"tw-cursor-not-allowed": e.disabled,
|
|
72
|
-
"tw-text-ice-900":
|
|
75
|
+
"tw-text-ice-900": p.value,
|
|
73
76
|
"!tw-font-semibold": e.active,
|
|
74
|
-
"tw-text-white": !e.disabled && !
|
|
77
|
+
"tw-text-white": !e.disabled && !p.value
|
|
75
78
|
}
|
|
76
79
|
]])
|
|
77
|
-
},
|
|
78
|
-
|
|
80
|
+
}, _(e.text), 3),
|
|
81
|
+
c.value ? (a(), n("div", {
|
|
79
82
|
key: 0,
|
|
80
|
-
class:
|
|
81
|
-
}, null, 2)) :
|
|
83
|
+
class: o(["tw-mx-1.5 tw-border-t group-last:tw-hidden", [t(l).line, { [t(l)["line--expanded"]]: e.completed || e.active }]])
|
|
84
|
+
}, null, 2)) : m("", !0),
|
|
82
85
|
i("div", {
|
|
83
|
-
class:
|
|
86
|
+
class: o(["stash-step--nested-steps", { "tw-pb-9": !u.nested && !t(d).default, "tw-hidden": c.value }])
|
|
84
87
|
}, [
|
|
85
88
|
i("ul", {
|
|
86
|
-
class:
|
|
89
|
+
class: o([t(l).nested, { "tw-hidden": !t(d).default }])
|
|
87
90
|
}, [
|
|
88
|
-
|
|
91
|
+
k(u.$slots, "default")
|
|
89
92
|
], 2)
|
|
90
93
|
], 2)
|
|
91
94
|
], 2)
|
|
92
95
|
], 2));
|
|
93
96
|
}
|
|
94
|
-
}), M = "
|
|
97
|
+
}), M = "_step_1o76u_2", I = "_title_1o76u_11", T = "_line_1o76u_22", P = "_circle_1o76u_35", V = "_nested_1o76u_18", $ = {
|
|
95
98
|
step: M,
|
|
96
|
-
title:
|
|
97
|
-
"nested-step--active": "_nested-step--
|
|
98
|
-
line:
|
|
99
|
-
"line--expanded": "_line--
|
|
100
|
-
circle:
|
|
101
|
-
"circle--todo": "_circle--
|
|
102
|
-
"circle--active": "_circle--
|
|
103
|
-
"circle--
|
|
104
|
-
"circle--
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
99
|
+
title: I,
|
|
100
|
+
"nested-step--active": "_nested-step--active_1o76u_18",
|
|
101
|
+
line: T,
|
|
102
|
+
"line--expanded": "_line--expanded_1o76u_31",
|
|
103
|
+
circle: P,
|
|
104
|
+
"circle--todo": "_circle--todo_1o76u_46",
|
|
105
|
+
"circle--active": "_circle--active_1o76u_52",
|
|
106
|
+
"circle--loading": "_circle--loading_1o76u_58",
|
|
107
|
+
"circle--completed": "_circle--completed_1o76u_65",
|
|
108
|
+
"circle--error": "_circle--error_1o76u_72",
|
|
109
|
+
nested: V
|
|
110
|
+
}, D = {
|
|
111
|
+
$style: $
|
|
112
|
+
}, A = /* @__PURE__ */ C(z, [["__cssModules", D]]);
|
|
109
113
|
export {
|
|
110
|
-
|
|
114
|
+
A as default
|
|
111
115
|
};
|
|
112
116
|
//# sourceMappingURL=Step.js.map
|
package/dist/Step.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n import Icon from '../Icon/Icon.vue';\n import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n export interface StepProps {\n /**\n * Indicates if the step is currently active.\n * This takes precedence over `completed` and `error`\n */\n active?: boolean;\n /**\n * Indicates if the step is completed\n */\n completed?: boolean;\n /**\n * Indicates if the step has an error\n * This takes precedence over `completed`\n */\n error?: boolean;\n /**\n * The text to display in the step
|
|
1
|
+
{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n import Icon from '../Icon/Icon.vue';\n import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n export interface StepProps {\n /**\n * Indicates if the step is currently active.\n * This takes precedence over `completed` and `error`\n */\n active?: boolean;\n /**\n * Indicates if the step is completed\n */\n completed?: boolean;\n /**\n * Indicates if the step has an error\n * This takes precedence over `completed`\n */\n error?: boolean;\n /**\n * The text to display in the step.\n */\n text: string;\n /**\n * Indicates if the step is nested\n */\n nested?: boolean;\n /**\n * The text to display in the step circle\n */\n step?: string;\n /**\n * Indicates if the step is disabled\n */\n disabled?: boolean;\n /**\n * Indicates if the step is in a loading state\n */\n loading?: boolean;\n }\n\n const props = withDefaults(defineProps<StepProps>(), {\n active: false,\n completed: false,\n error: false,\n nested: false,\n step: undefined,\n disabled: false,\n loading: false,\n });\n\n const slots = useSlots();\n const classes = useCssModule();\n\n const injectedStepper = inject(STEPPER_INJECTION_KEY);\n\n const isHorizontal = computed(() => injectedStepper?.orientation === 'horizontal');\n\n const isLightThemed = computed(() => injectedStepper?.theme === 'light');\n\n const iconName = computed(() => {\n if (props.loading) {\n return 'working';\n }\n return props.completed ? 'circle-check' : 'circle-info';\n });\n\n // OnBeforeMount ensures that steps and substeps are registered in the correct order\n onBeforeMount(() => {\n if (injectedStepper) {\n injectedStepper.registerStep(props.nested);\n }\n });\n</script>\n\n<template>\n <li\n class=\"stash-step tw-relative tw-flex tw-w-full\"\n data-test=\"stash-step\"\n :class=\"[\n classes.step,\n { [classes['nested-step--active']]: props.nested && props.active, 'last:tw-w-auto': isHorizontal },\n ]\"\n >\n <div v-if=\"!props.nested\" class=\"tw-mr-3 tw-flex tw-flex-col tw-items-center\">\n <div\n :class=\"[\n classes.circle,\n {\n [classes['circle--todo']]: !props.error && !props.active && !props.completed,\n [classes['circle--error']]: props.error && !props.active,\n [classes['circle--completed']]: props.completed && !props.active,\n [classes['circle--active']]: props.active,\n [classes['circle--loading']]: props.loading,\n },\n ]\"\n >\n <Icon\n v-if=\"(props.completed || props.error || props.loading) && !props.active\"\n :name=\"iconName\"\n :class=\"{ 'fx-spin': props.loading }\"\n size=\"dense\"\n />\n <span v-else>{{ props.step }}</span>\n </div>\n <div\n class=\"tw-my-1.5 tw-w-px tw-bg-ice-500\"\n :class=\"[\n classes.line,\n { [classes['line--expanded']]: props.completed || props.active, 'tw-hidden': isHorizontal },\n ]\"\n />\n </div>\n <div\n class=\"tw-flex\"\n :class=\"[\n {\n 'tw-w-full tw-flex-row tw-items-center': isHorizontal,\n 'tw-flex-col': !isHorizontal,\n },\n ]\"\n >\n <div\n class=\"tw-whitespace-nowrap\"\n :class=\"[\n classes.title,\n {\n 'tw-cursor-pointer': !props.active && (props.completed || props.error),\n 'tw-cursor-not-allowed': props.disabled,\n 'tw-text-ice-900': isLightThemed,\n '!tw-font-semibold': props.active,\n 'tw-text-white': !props.disabled && !isLightThemed,\n },\n ]\"\n >\n {{ props.text }}\n </div>\n <div\n v-if=\"isHorizontal\"\n class=\"tw-mx-1.5 tw-border-t group-last:tw-hidden\"\n :class=\"[classes.line, { [classes['line--expanded']]: props.completed || props.active }]\"\n />\n <div\n class=\"stash-step--nested-steps\"\n :class=\"{ 'tw-pb-9': !nested && !slots.default, 'tw-hidden': isHorizontal }\"\n >\n <ul :class=\"[classes.nested, { 'tw-hidden': !slots.default }]\">\n <!-- @slot Default slot to compose multiple nested steps -->\n <slot></slot>\n </ul>\n </div>\n </div>\n </li>\n</template>\n\n<style module>\n .step::before {\n content: '●';\n position: absolute;\n color: theme('colors.white');\n left: -28px;\n opacity: 0;\n transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1);\n }\n\n .title {\n font-weight: theme('fontWeight.medium');\n font-size: 1rem;\n margin-top: 1px;\n user-select: none;\n }\n\n .nested-step--active::before {\n opacity: 1;\n }\n\n .line {\n flex-grow: 0;\n transition: flex-grow 500ms cubic-bezier(0.87, 0, 0.13, 1);\n }\n\n .step:last-child .line {\n display: none;\n }\n\n .line--expanded {\n flex-grow: 1;\n }\n\n .circle {\n width: theme('spacing.6');\n height: theme('spacing.6');\n line-height: theme('spacing.6');\n border-radius: theme('borderRadius.full');\n display: grid;\n place-items: center;\n font-weight: theme('fontWeight.medium');\n transition: background-color 500ms, color 500ms;\n }\n\n .circle--todo {\n background-color: rgb(255 255 255 / 50%);\n color: #4d4a69;\n border: 1px solid #747293;\n }\n\n .circle--active {\n background-color: var(--color-blue-500);\n color: theme('colors.white');\n border: 1px solid transparent;\n }\n\n .circle--loading {\n background-color: theme('colors.white');\n border: 1px solid var(--color-ice-500);\n color: var(--color-ice-700);\n cursor: pointer;\n }\n\n .circle--completed {\n background-color: theme('colors.white');\n border: 1px solid var(--color-ice-500);\n color: var(--color-green-500);\n cursor: pointer;\n }\n\n .circle--error {\n background-color: theme('colors.white');\n border: 1px solid var(--color-ice-500);\n color: var(--color-red-500);\n cursor: pointer;\n }\n\n .nested {\n padding: calc(theme('spacing.3') + theme('spacing[1.5]')) 0;\n }\n\n .nested li + li {\n margin-top: theme('spacing.3');\n }\n\n .nested .title {\n font-weight: theme('fontWeight.normal');\n font-size: 0.9rem;\n }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","iconName","props","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAqDQA,IAAQC,KACRC,IAAUC,KAEVC,IAAkBC,EAAOC,CAAqB,GAE9CC,IAAeC,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,iBAAgB,YAAY,GAE3EK,IAAgBD,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,WAAU,OAAO,GAEjEM,IAAWF,EAAS,MACpBG,EAAM,UACD,YAEFA,EAAM,YAAY,iBAAiB,aAC3C;AAGD,WAAAC,EAAc,MAAM;AAClB,MAAIR,KACcA,EAAA,aAAaO,EAAM,MAAM;AAAA,IAC3C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Step.vue.d.ts
CHANGED
|
@@ -40,6 +40,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
|
|
|
40
40
|
nested: boolean;
|
|
41
41
|
step: undefined;
|
|
42
42
|
disabled: boolean;
|
|
43
|
+
loading: boolean;
|
|
43
44
|
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepProps>, {
|
|
44
45
|
active: boolean;
|
|
45
46
|
completed: boolean;
|
|
@@ -47,10 +48,12 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
|
|
|
47
48
|
nested: boolean;
|
|
48
49
|
step: undefined;
|
|
49
50
|
disabled: boolean;
|
|
51
|
+
loading: boolean;
|
|
50
52
|
}>>>, {
|
|
51
53
|
error: boolean;
|
|
52
54
|
disabled: boolean;
|
|
53
55
|
step: string;
|
|
56
|
+
loading: boolean;
|
|
54
57
|
active: boolean;
|
|
55
58
|
nested: boolean;
|
|
56
59
|
completed: boolean;
|
|
@@ -75,7 +78,7 @@ export declare interface StepProps {
|
|
|
75
78
|
*/
|
|
76
79
|
error?: boolean;
|
|
77
80
|
/**
|
|
78
|
-
* The text to display in the step
|
|
81
|
+
* The text to display in the step.
|
|
79
82
|
*/
|
|
80
83
|
text: string;
|
|
81
84
|
/**
|
|
@@ -90,6 +93,10 @@ export declare interface StepProps {
|
|
|
90
93
|
* Indicates if the step is disabled
|
|
91
94
|
*/
|
|
92
95
|
disabled?: boolean;
|
|
96
|
+
/**
|
|
97
|
+
* Indicates if the step is in a loading state
|
|
98
|
+
*/
|
|
99
|
+
loading?: boolean;
|
|
93
100
|
}
|
|
94
101
|
|
|
95
102
|
export { }
|
package/dist/Stepper.js
CHANGED
|
@@ -11,20 +11,20 @@ const x = /* @__PURE__ */ i({
|
|
|
11
11
|
theme: { default: "dark" }
|
|
12
12
|
},
|
|
13
13
|
emits: ["update:step", "update:substep"],
|
|
14
|
-
setup(o, { expose: r, emit:
|
|
14
|
+
setup(o, { expose: r, emit: a }) {
|
|
15
15
|
const e = o, t = v({ linear: e.linear, activeStep: e.step, activeSubstep: e.substep });
|
|
16
16
|
return s(
|
|
17
17
|
() => e.step,
|
|
18
|
-
(
|
|
18
|
+
(p) => t.activeStepIndex.value = p
|
|
19
19
|
), s(
|
|
20
20
|
() => e.substep,
|
|
21
|
-
(
|
|
21
|
+
(p) => t.activeSubstepIndex.value = p
|
|
22
22
|
), s(
|
|
23
23
|
() => t.activeStepIndex.value,
|
|
24
|
-
(
|
|
24
|
+
(p) => a("update:step", p)
|
|
25
25
|
), s(
|
|
26
26
|
() => t.activeSubstepIndex.value,
|
|
27
|
-
(
|
|
27
|
+
(p) => a("update:substep", p)
|
|
28
28
|
), n(S, {
|
|
29
29
|
registerStep: t.registerStep,
|
|
30
30
|
orientation: e.orientation,
|
|
@@ -35,7 +35,7 @@ const x = /* @__PURE__ */ i({
|
|
|
35
35
|
goTo: t.goTo,
|
|
36
36
|
isStepCompleted: t.isStepCompleted,
|
|
37
37
|
isStepActive: t.isStepActive
|
|
38
|
-
}), (
|
|
38
|
+
}), (p, m) => (l(), u("ul", {
|
|
39
39
|
class: c(["stash-stepper tw-flex", {
|
|
40
40
|
"tw-flex-col": e.orientation === "vertical",
|
|
41
41
|
"stash-stepper--vertical": e.orientation === "vertical",
|
|
@@ -43,7 +43,7 @@ const x = /* @__PURE__ */ i({
|
|
|
43
43
|
}]),
|
|
44
44
|
"data-test": "stash-stepper"
|
|
45
45
|
}, [
|
|
46
|
-
d(
|
|
46
|
+
d(p.$slots, "default")
|
|
47
47
|
], 2));
|
|
48
48
|
}
|
|
49
49
|
});
|
package/dist/Stepper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\n import { StepperOrientation, StepperTheme } from './Stepper.types';\n export * from './Stepper.types';\n\n export interface StepperProps {\n /**\n * The current step index\n */\n step?: number;\n /**\n * The current substep index\n */\n substep?: number;\n /**\n * A linear stepper prevents navigation to steps that are ahead of the completed ones\n */\n linear?: boolean;\n /**\n * Determines whether the stepper is horizontal or vertical\n */\n orientation?: StepperOrientation;\n /**\n * Determines the theme of the stepper\n */\n theme?: StepperTheme;\n }\n</script>\n\n<script setup lang=\"ts\">\n import { provide, watch } from 'vue';\n\n import useStepper from '../../composables/useStepper/useStepper';\n import { STEPPER_INJECTION_KEY } from './keys';\n\n const props = withDefaults(defineProps<StepperProps>(), {\n step: -1,\n substep: -1,\n linear: false,\n orientation: 'vertical',\n theme: 'dark',\n });\n\n const emit =\n defineEmits<{\n /**\n * Emitted when the step changes\n */\n (e: 'update:step', step: number): void;\n /**\n * Emitted when the substep changes\n */\n (e: 'update:substep', substep: number): void;\n }>();\n\n const stepper = useStepper({ linear: props.linear, activeStep: props.step, activeSubstep: props.substep });\n\n watch(\n () => props.step,\n (value) => (stepper.activeStepIndex.value = value),\n );\n\n watch(\n () => props.substep,\n (value) => (stepper.activeSubstepIndex.value = value),\n );\n\n watch(\n () => stepper.activeStepIndex.value,\n (value) => emit('update:step', value),\n );\n\n watch(\n () => stepper.activeSubstepIndex.value,\n (value) => emit('update:substep', value),\n );\n\n provide(STEPPER_INJECTION_KEY, {\n registerStep: stepper.registerStep,\n orientation: props.orientation,\n theme: props.theme,\n });\n\n defineExpose({\n back: stepper.back,\n next: stepper.next,\n goTo: stepper.goTo,\n isStepCompleted: stepper.isStepCompleted,\n isStepActive: stepper.isStepActive,\n });\n</script>\n\n<template>\n <ul\n class=\"stash-stepper tw-flex\"\n :class=\"{\n 'tw-flex-col': props.orientation === 'vertical',\n 'stash-stepper--vertical': props.orientation === 'vertical',\n 'stash-stepper--horizontal': props.orientation === 'horizontal',\n }\"\n data-test=\"stash-stepper\"\n >\n <!-- @slot Default slot to compose multiple steps -->\n <slot></slot>\n </ul>\n</template>\n"],"names":["stepper","useStepper","props","watch","value","emit","provide","STEPPER_INJECTION_KEY","__expose"],"mappings":";;;;;;;;;;;;;;iBAsDQA,IAAUC,EAAW,EAAE,QAAQC,EAAM,QAAQ,YAAYA,EAAM,MAAM,eAAeA,EAAM,QAAS,CAAA;AAEzG,WAAAC;AAAA,MACE,MAAMD,EAAM;AAAA,MACZ,CAACE,MAAWJ,EAAQ,gBAAgB,QAAQI;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMD,EAAM;AAAA,MACZ,CAACE,MAAWJ,EAAQ,mBAAmB,QAAQI;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMH,EAAQ,gBAAgB;AAAA,MAC9B,CAACI,MAAUC,EAAK,eAAeD,CAAK;AAAA,IAAA,GAGtCD;AAAA,MACE,MAAMH,EAAQ,mBAAmB;AAAA,MACjC,CAACI,MAAUC,EAAK,kBAAkBD,CAAK;AAAA,IAAA,GAGzCE,EAAQC,GAAuB;AAAA,MAC7B,cAAcP,EAAQ;AAAA,MACtB,aAAaE,EAAM;AAAA,MACnB,OAAOA,EAAM;AAAA,IAAA,CACd,GAEYM,EAAA;AAAA,MACX,MAAMR,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\n import { StepperOrientation, StepperTheme } from './Stepper.types';\n export * from './Stepper.types';\n\n export interface StepperProps {\n /**\n * The current step index\n */\n step?: number;\n /**\n * The current substep index\n */\n substep?: number;\n /**\n * A linear stepper prevents navigation to steps that are ahead of the completed ones\n */\n linear?: boolean;\n /**\n * Determines whether the stepper is horizontal or vertical\n */\n orientation?: StepperOrientation;\n /**\n * Determines the theme of the stepper\n */\n theme?: StepperTheme;\n }\n</script>\n\n<script setup lang=\"ts\">\n import { provide, watch } from 'vue';\n\n import useStepper from '../../composables/useStepper/useStepper';\n import { STEPPER_INJECTION_KEY } from './keys';\n\n const props = withDefaults(defineProps<StepperProps>(), {\n step: -1,\n substep: -1,\n linear: false,\n orientation: 'vertical',\n theme: 'dark',\n });\n\n const emit =\n defineEmits<{\n /**\n * Emitted when the step changes\n */\n (e: 'update:step', step: number): void;\n /**\n * Emitted when the substep changes\n */\n (e: 'update:substep', substep: number): void;\n }>();\n\n const stepper = useStepper({ linear: props.linear, activeStep: props.step, activeSubstep: props.substep });\n\n watch(\n () => props.step,\n (value) => (stepper.activeStepIndex.value = value),\n );\n\n watch(\n () => props.substep,\n (value) => (stepper.activeSubstepIndex.value = value),\n );\n\n watch(\n () => stepper.activeStepIndex.value,\n (value) => emit('update:step', value),\n );\n\n watch(\n () => stepper.activeSubstepIndex.value,\n (value) => emit('update:substep', value),\n );\n\n provide(STEPPER_INJECTION_KEY, {\n registerStep: stepper.registerStep,\n orientation: props.orientation,\n theme: props.theme,\n });\n\n defineExpose({\n back: stepper.back,\n next: stepper.next,\n goTo: stepper.goTo,\n isStepCompleted: stepper.isStepCompleted,\n isStepActive: stepper.isStepActive,\n });\n</script>\n\n<template>\n <ul\n class=\"stash-stepper tw-flex\"\n :class=\"{\n 'tw-flex-col': props.orientation === 'vertical',\n 'stash-stepper--vertical': props.orientation === 'vertical',\n 'stash-stepper--horizontal': props.orientation === 'horizontal',\n }\"\n data-test=\"stash-stepper\"\n >\n <!-- @slot Default slot to compose multiple steps -->\n <slot></slot>\n </ul>\n</template>\n\n<style>\n .stash-stepper--vertical .stash-step:last-child .stash-step--nested-steps {\n @apply tw-hidden;\n }\n</style>\n"],"names":["stepper","useStepper","props","watch","value","emit","provide","STEPPER_INJECTION_KEY","__expose"],"mappings":";;;;;;;;;;;;;;iBAsDQA,IAAUC,EAAW,EAAE,QAAQC,EAAM,QAAQ,YAAYA,EAAM,MAAM,eAAeA,EAAM,QAAS,CAAA;AAEzG,WAAAC;AAAA,MACE,MAAMD,EAAM;AAAA,MACZ,CAACE,MAAWJ,EAAQ,gBAAgB,QAAQI;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMD,EAAM;AAAA,MACZ,CAACE,MAAWJ,EAAQ,mBAAmB,QAAQI;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMH,EAAQ,gBAAgB;AAAA,MAC9B,CAACI,MAAUC,EAAK,eAAeD,CAAK;AAAA,IAAA,GAGtCD;AAAA,MACE,MAAMH,EAAQ,mBAAmB;AAAA,MACjC,CAACI,MAAUC,EAAK,kBAAkBD,CAAK;AAAA,IAAA,GAGzCE,EAAQC,GAAuB;AAAA,MAC7B,cAAcP,EAAQ;AAAA,MACtB,aAAaE,EAAM;AAAA,MACnB,OAAOA,EAAM;AAAA,IAAA,CACd,GAEYM,EAAA;AAAA,MACX,MAAMR,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;;;;;;;;;;;;"}
|