@leaflink/stash 51.0.0 → 51.0.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/Step.js +12 -11
- package/dist/Step.js.map +1 -1
- package/package.json +1 -1
package/dist/Step.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as x, useSlots as g, useCssModule as y, inject as k, computed as d, onBeforeMount as b, createElementBlock as r, openBlock as i, normalizeClass as a, unref as t, createCommentVNode as
|
|
1
|
+
import { defineComponent as x, useSlots as g, useCssModule as y, inject as k, computed as d, onBeforeMount as b, createElementBlock as r, openBlock as i, normalizeClass as a, unref as t, createCommentVNode as u, createElementVNode as n, createBlock as B, toDisplayString as _, createTextVNode as N, renderSlot as C } from "vue";
|
|
2
2
|
import { t as E } from "./locale.js";
|
|
3
3
|
import T from "./Icon.js";
|
|
4
4
|
import { S as z } from "./keys-C8Zfr_By.js";
|
|
@@ -16,7 +16,7 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
|
|
|
16
16
|
loading: { type: Boolean, default: !1 }
|
|
17
17
|
},
|
|
18
18
|
setup(m) {
|
|
19
|
-
const e = m,
|
|
19
|
+
const e = m, w = g(), s = y(), l = k(z), c = d(() => (l == null ? void 0 : l.orientation) === "horizontal"), p = d(() => (l == null ? void 0 : l.theme) === "light"), o = l == null ? void 0 : l.showResponsiveNav, v = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), h = d(
|
|
20
20
|
() => E("ll.stepper.currentStep", { num: e.step, total: String(l == null ? void 0 : l.stepCount.value) })
|
|
21
21
|
);
|
|
22
22
|
return b(() => {
|
|
@@ -33,7 +33,7 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
|
|
|
33
33
|
]]),
|
|
34
34
|
"data-test": "stash-step"
|
|
35
35
|
}, [
|
|
36
|
-
e.nested ?
|
|
36
|
+
e.nested ? u("", !0) : (i(), r("div", {
|
|
37
37
|
key: 0,
|
|
38
38
|
class: a(["stash-step__indicator tw-flex tw-flex-col tw-items-center", { "tw-mr-3": !t(o) }]),
|
|
39
39
|
"data-test": "stash-step|indicator"
|
|
@@ -55,7 +55,7 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
|
|
|
55
55
|
name: v.value,
|
|
56
56
|
class: a({ "fx-spin": e.loading }),
|
|
57
57
|
size: "dense"
|
|
58
|
-
}, null, 8, ["name", "class"])) : (i(), r("span", S,
|
|
58
|
+
}, null, 8, ["name", "class"])) : (i(), r("span", S, _(e.step), 1))
|
|
59
59
|
], 2),
|
|
60
60
|
n("div", {
|
|
61
61
|
class: a(["tw-my-1.5 tw-w-px tw-bg-ice-500", [
|
|
@@ -74,9 +74,10 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
|
|
|
74
74
|
]])
|
|
75
75
|
}, [
|
|
76
76
|
n("div", {
|
|
77
|
-
class: a(["stash-step__title
|
|
77
|
+
class: a(["stash-step__title", [
|
|
78
78
|
t(s).title,
|
|
79
79
|
{
|
|
80
|
+
"tw-whitespace-nowrap": c.value,
|
|
80
81
|
"tw-cursor-pointer": !e.active && (e.completed || e.error),
|
|
81
82
|
"tw-cursor-not-allowed": e.disabled,
|
|
82
83
|
"tw-text-ice-900": p.value,
|
|
@@ -87,12 +88,12 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
|
|
|
87
88
|
]]),
|
|
88
89
|
"data-test": "stash-step|title"
|
|
89
90
|
}, [
|
|
90
|
-
N(
|
|
91
|
+
N(_(e.text) + " ", 1),
|
|
91
92
|
t(o) ? (i(), r("p", {
|
|
92
93
|
key: 0,
|
|
93
|
-
class: a(["stash-step__pagination-label tw-mb-0 tw-
|
|
94
|
+
class: a(["stash-step__pagination-label tw-mb-0 tw-text-center tw-text-xs", p.value ? "tw-text-ice-700" : "tw-text-white"]),
|
|
94
95
|
"data-test": "stash-step|pagination-label"
|
|
95
|
-
},
|
|
96
|
+
}, _(h.value), 3)) : u("", !0)
|
|
96
97
|
], 2),
|
|
97
98
|
c.value ? (i(), r("div", {
|
|
98
99
|
key: 0,
|
|
@@ -103,12 +104,12 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
|
|
|
103
104
|
"tw-mx-1.5 tw-border-t group-last:tw-hidden": !t(o)
|
|
104
105
|
}
|
|
105
106
|
])
|
|
106
|
-
}, null, 2)) :
|
|
107
|
+
}, null, 2)) : u("", !0),
|
|
107
108
|
n("div", {
|
|
108
|
-
class: a(["stash-step--nested-steps", { "tw-pb-9": !f.nested && !t(
|
|
109
|
+
class: a(["stash-step--nested-steps", { "tw-pb-9": !f.nested && !t(w).default, "tw-hidden": c.value }])
|
|
109
110
|
}, [
|
|
110
111
|
n("ul", {
|
|
111
|
-
class: a([t(s).nested, { "tw-hidden": !t(
|
|
112
|
+
class: a([t(s).nested, { "tw-hidden": !t(w).default }])
|
|
112
113
|
}, [
|
|
113
114
|
C(f.$slots, "default")
|
|
114
115
|
], 2)
|
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 { t } from '../../locale';\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 showResponsiveNav = injectedStepper?.showResponsiveNav;\n\n const iconName = computed(() => {\n if (props.loading) {\n return 'working';\n }\n return props.completed ? 'circle-check' : 'circle-info';\n });\n\n const currentStepText = computed(() =>\n t('ll.stepper.currentStep', { num: props.step, total: String(injectedStepper?.stepCount.value) }),\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 {\n [classes['nested-step--active']]: props.nested && props.active,\n 'last:tw-w-auto': isHorizontal && !showResponsiveNav,\n [classes['stash-step--singular']]: showResponsiveNav,\n 'tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center': showResponsiveNav,\n },\n ]\"\n >\n <div\n v-if=\"!props.nested\"\n class=\"stash-step__indicator tw-flex tw-flex-col tw-items-center\"\n :class=\"{ 'tw-mr-3': !showResponsiveNav }\"\n data-test=\"stash-step|indicator\"\n >\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 <!-- step title, line(s), and nested steps -->\n <div\n class=\"tw-flex\"\n :class=\"[\n {\n 'tw-w-full tw-flex-row tw-items-center': isHorizontal,\n 'tw-mt-1.5 tw-justify-center': showResponsiveNav,\n 'tw-flex-col': !isHorizontal || showResponsiveNav,\n },\n ]\"\n >\n <div\n class=\"stash-step__title
|
|
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 { t } from '../../locale';\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 showResponsiveNav = injectedStepper?.showResponsiveNav;\n\n const iconName = computed(() => {\n if (props.loading) {\n return 'working';\n }\n return props.completed ? 'circle-check' : 'circle-info';\n });\n\n const currentStepText = computed(() =>\n t('ll.stepper.currentStep', { num: props.step, total: String(injectedStepper?.stepCount.value) }),\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 {\n [classes['nested-step--active']]: props.nested && props.active,\n 'last:tw-w-auto': isHorizontal && !showResponsiveNav,\n [classes['stash-step--singular']]: showResponsiveNav,\n 'tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center': showResponsiveNav,\n },\n ]\"\n >\n <div\n v-if=\"!props.nested\"\n class=\"stash-step__indicator tw-flex tw-flex-col tw-items-center\"\n :class=\"{ 'tw-mr-3': !showResponsiveNav }\"\n data-test=\"stash-step|indicator\"\n >\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 <!-- step title, line(s), and nested steps -->\n <div\n class=\"tw-flex\"\n :class=\"[\n {\n 'tw-w-full tw-flex-row tw-items-center': isHorizontal,\n 'tw-mt-1.5 tw-justify-center': showResponsiveNav,\n 'tw-flex-col': !isHorizontal || showResponsiveNav,\n },\n ]\"\n >\n <div\n class=\"stash-step__title\"\n data-test=\"stash-step|title\"\n :class=\"[\n classes.title,\n {\n 'tw-whitespace-nowrap': isHorizontal,\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 'tw-place-self-center': showResponsiveNav,\n },\n ]\"\n >\n {{ props.text }}\n <p\n v-if=\"showResponsiveNav\"\n class=\"stash-step__pagination-label tw-mb-0 tw-text-center tw-text-xs\"\n data-test=\"stash-step|pagination-label\"\n :class=\"isLightThemed ? 'tw-text-ice-700' : 'tw-text-white'\"\n >\n {{ currentStepText }}\n </p>\n </div>\n <div\n v-if=\"isHorizontal\"\n :class=\"[\n classes.line,\n {\n [classes['line--expanded']]: props.completed || props.active,\n 'tw-mx-1.5 tw-border-t group-last:tw-hidden': !showResponsiveNav,\n },\n ]\"\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 .line--expanded {\n flex-grow: 1;\n }\n\n .stash-step--singular .line {\n @apply tw-absolute\n tw-inset-x-0\n tw-top-3\n tw-h-px\n tw-border-t-0\n before:tw-absolute\n before:tw-left-0\n before:tw-right-2/4\n before:tw-mr-16\n before:tw-block\n before:tw-h-px\n before:tw-bg-ice-500\n after:tw-absolute\n after:tw-left-2/4\n after:tw-right-0\n after:tw-ml-16\n after:tw-block\n after:tw-h-px\n after:tw-bg-ice-500;\n }\n\n .stash-step--singular .line::after,\n .stash-step--singular .line::before {\n content: '';\n }\n\n .step:not(.stash-step--singular):last-child .line {\n display: none;\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:\n background-color 500ms,\n 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":["props","__props","slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","showResponsiveNav","iconName","currentStepText","t","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GAURC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,IAAkBC,EAAOC,CAAqB,GAE9CC,IAAeC,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,iBAAgB,YAAY,GAE3EK,IAAgBD,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,WAAU,OAAO,GAEjEM,IAAoBN,KAAA,gBAAAA,EAAiB,mBAErCO,IAAWH,EAAS,MACpBV,EAAM,UACD,YAEFA,EAAM,YAAY,iBAAiB,aAC3C,GAEKc,IAAkBJ;AAAA,MAAS,MAC/BK,EAAE,0BAA0B,EAAE,KAAKf,EAAM,MAAM,OAAO,OAAOM,KAAA,gBAAAA,EAAiB,UAAU,KAAK,EAAG,CAAA;AAAA,IAClG;AAGA,WAAAU,EAAc,MAAM;AAClB,MAAIV,KACcA,EAAA,aAAaN,EAAM,MAAM;AAAA,IAC3C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|