@leaflink/stash 47.3.3 → 47.3.5
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/TableRow.js +38 -38
- package/dist/TableRow.js.map +1 -1
- package/dist/useStepper.js +2 -2
- package/dist/useStepper.js.map +1 -1
- package/package.json +1 -1
package/dist/TableRow.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as N, useAttrs as A, useCssModule as D, useSlots as M, inject as V, ref as j, computed as _, watch as P, openBlock as c, createElementBlock as k, Fragment as q, createElementVNode as z, mergeProps as F, unref as e, createBlock as g, normalizeClass as i, withCtx as m, createVNode as w, createCommentVNode as x, renderSlot as y } from "vue";
|
|
2
2
|
import J from "lodash-es/uniqueId";
|
|
3
3
|
import { t as b } from "./locale.js";
|
|
4
4
|
import L from "./Checkbox.js";
|
|
@@ -11,7 +11,7 @@ import "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
|
|
|
11
11
|
import "./Illustration.vue_vue_type_script_setup_true_lang-e52df837.js";
|
|
12
12
|
import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
|
|
13
13
|
import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
|
|
14
|
-
import
|
|
14
|
+
import C from "./TableCell.js";
|
|
15
15
|
import { T as G, a as H } from "./Table.keys-cf93df19.js";
|
|
16
16
|
import { _ as K } from "./_plugin-vue_export-helper-dad06003.js";
|
|
17
17
|
import "lodash-es/get";
|
|
@@ -21,7 +21,7 @@ import "./Button.js";
|
|
|
21
21
|
import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
|
|
22
22
|
import "./Icon.js";
|
|
23
23
|
import "./index-79ce320f.js";
|
|
24
|
-
const Q = /* @__PURE__ */
|
|
24
|
+
const Q = /* @__PURE__ */ N({
|
|
25
25
|
inheritAttrs: !1,
|
|
26
26
|
__name: "TableRow",
|
|
27
27
|
props: {
|
|
@@ -31,98 +31,98 @@ const Q = /* @__PURE__ */ A({
|
|
|
31
31
|
isSelectDisabled: { type: Boolean, default: !1 }
|
|
32
32
|
},
|
|
33
33
|
emits: ["update:isSelected", "update:isExpanded"],
|
|
34
|
-
setup(
|
|
35
|
-
const n =
|
|
36
|
-
if (!
|
|
34
|
+
setup(S, { emit: f }) {
|
|
35
|
+
const n = S, T = A(), t = D(), r = M(), h = V(G.key);
|
|
36
|
+
if (!h)
|
|
37
37
|
throw new Error("TableRow must be used within a Table component");
|
|
38
|
-
const { hasActions:
|
|
38
|
+
const { hasActions: B, hasCustomExpandToggle: E, isExpandable: R, isSelectable: u, layout: d } = h, o = j(n.isExpanded), l = _(() => R.value && !!r.expansion), $ = _(() => {
|
|
39
39
|
var s;
|
|
40
|
-
let a = ((s =
|
|
41
|
-
return u.value && (a += 1), l.value && !
|
|
42
|
-
}),
|
|
43
|
-
function
|
|
40
|
+
let a = ((s = r.default) == null ? void 0 : s.call(r, { toggleExpand: p }).length) ?? 0;
|
|
41
|
+
return u.value && (a += 1), l.value && !E.value && (a += 1), a;
|
|
42
|
+
}), v = J("table-row-");
|
|
43
|
+
function p(a) {
|
|
44
44
|
if (!l.value)
|
|
45
45
|
throw new Error("Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.");
|
|
46
46
|
const s = typeof a == "boolean" ? a : !o.value;
|
|
47
47
|
o.value = s, f("update:isExpanded", s);
|
|
48
48
|
}
|
|
49
|
-
return
|
|
49
|
+
return P(
|
|
50
50
|
() => n.isExpanded,
|
|
51
|
-
() =>
|
|
52
|
-
), (a, s) => (
|
|
53
|
-
|
|
51
|
+
() => p(n.isExpanded)
|
|
52
|
+
), (a, s) => (c(), k(q, null, [
|
|
53
|
+
z("tr", F({
|
|
54
54
|
class: ["stash-table-row", [
|
|
55
55
|
e(t).root,
|
|
56
|
-
e(t)[`layout--${e(
|
|
56
|
+
e(t)[`layout--${e(d)}`],
|
|
57
57
|
{
|
|
58
58
|
[e(t)["is-expandable"]]: l.value,
|
|
59
59
|
[e(t)["is-expanded"]]: o.value,
|
|
60
60
|
[e(t)["root--hidden-divider"]]: a.hideExpansionDivider,
|
|
61
|
-
"tw-p-gutter": e(
|
|
62
|
-
"tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(
|
|
63
|
-
"tw-pt-[60px]": e(
|
|
61
|
+
"tw-p-gutter": e(d) === "stack",
|
|
62
|
+
"tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(d) === "stack" && !l.value,
|
|
63
|
+
"tw-pt-[60px]": e(B) && e(d) === "stack" && !e(u)
|
|
64
64
|
}
|
|
65
65
|
]],
|
|
66
66
|
"data-test": "stash-table-row"
|
|
67
|
-
}, e(
|
|
68
|
-
e(u) ? (
|
|
67
|
+
}, e(T)), [
|
|
68
|
+
e(u) ? (c(), g(C, {
|
|
69
69
|
key: 0,
|
|
70
70
|
"is-control": "",
|
|
71
|
-
class:
|
|
71
|
+
class: i(["stash-table-row__selection-cell tw-min-w-[48px]", e(t)["row-control-cell"]]),
|
|
72
72
|
"data-test": "stash-table-row|selection-cell"
|
|
73
73
|
}, {
|
|
74
74
|
default: m(() => [
|
|
75
75
|
w(L, {
|
|
76
|
-
class:
|
|
76
|
+
class: i(e(t)["row-selection-checkbox"]),
|
|
77
77
|
checked: n.isSelected,
|
|
78
78
|
disabled: n.isSelectDisabled,
|
|
79
79
|
title: e(b)("ll.select.self"),
|
|
80
|
-
"onUpdate:checked": s[0] || (s[0] = (
|
|
80
|
+
"onUpdate:checked": s[0] || (s[0] = (I) => f("update:isSelected", I))
|
|
81
81
|
}, null, 8, ["class", "checked", "disabled", "title"])
|
|
82
82
|
]),
|
|
83
83
|
_: 1
|
|
84
84
|
}, 8, ["class"])) : x("", !0),
|
|
85
|
-
l.value && !e(
|
|
85
|
+
l.value && !e(E) ? (c(), g(C, {
|
|
86
86
|
key: 1,
|
|
87
|
-
class:
|
|
87
|
+
class: i(["stash-table-row__toggle-expansion-cell tw-px-0", e(t)["row-control-cell"]]),
|
|
88
88
|
"data-test": "stash-table-row|custom-expansion-cell",
|
|
89
89
|
"is-control": ""
|
|
90
90
|
}, {
|
|
91
91
|
default: m(() => [
|
|
92
92
|
w(O, {
|
|
93
|
-
"aria-controls": e(
|
|
93
|
+
"aria-controls": e(v),
|
|
94
94
|
"aria-label": o.value ? e(b)("ll.table.collapseRow") : e(b)("ll.table.expandRow"),
|
|
95
95
|
direction: o.value ? "up" : "down",
|
|
96
96
|
"is-expanded": o.value,
|
|
97
|
-
onClick:
|
|
97
|
+
onClick: p
|
|
98
98
|
}, null, 8, ["aria-controls", "aria-label", "direction", "is-expanded"])
|
|
99
99
|
]),
|
|
100
100
|
_: 1
|
|
101
101
|
}, 8, ["class"])) : x("", !0),
|
|
102
|
-
|
|
102
|
+
y(a.$slots, "default", {
|
|
103
103
|
isRowExpanded: o.value,
|
|
104
|
-
toggleExpand:
|
|
104
|
+
toggleExpand: p
|
|
105
105
|
})
|
|
106
106
|
], 16),
|
|
107
|
-
l.value ? (
|
|
107
|
+
l.value ? (c(), k("tr", {
|
|
108
108
|
key: 0,
|
|
109
|
-
class: ["stash-table-row stash-table-row--expandable", e(t)["row-expansion"]],
|
|
109
|
+
class: i(["stash-table-row stash-table-row--expandable", e(t)["row-expansion"]]),
|
|
110
110
|
"data-test": "stash-table-row|expansion-row"
|
|
111
|
-
},
|
|
111
|
+
}, [
|
|
112
112
|
w(U, {
|
|
113
113
|
is: "td",
|
|
114
|
-
id: e(
|
|
115
|
-
class:
|
|
114
|
+
id: e(v),
|
|
115
|
+
class: i(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(t)["row-expansion-content"]]),
|
|
116
116
|
"data-test": "stash-table-row|expansion-cell",
|
|
117
|
-
colspan:
|
|
117
|
+
colspan: $.value,
|
|
118
118
|
"is-expanded": o.value
|
|
119
119
|
}, {
|
|
120
120
|
default: m(() => [
|
|
121
|
-
|
|
121
|
+
y(a.$slots, "expansion")
|
|
122
122
|
]),
|
|
123
123
|
_: 3
|
|
124
124
|
}, 8, ["id", "class", "colspan", "is-expanded"])
|
|
125
|
-
],
|
|
125
|
+
], 2)) : x("", !0)
|
|
126
126
|
], 64));
|
|
127
127
|
}
|
|
128
128
|
}), W = {
|
package/dist/TableRow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n import Expand from '../Expand/Expand.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableCell from '../TableCell/TableCell.vue';\n\n defineOptions({ inheritAttrs: false });\n\n export interface TableRowProps {\n hideExpansionDivider?: boolean;\n isExpanded?: boolean;\n isSelected?: boolean;\n isSelectDisabled?: boolean;\n }\n\n const props = withDefaults(defineProps<TableRowProps>(), {\n /**\n * If true, hides the divider between the parent row and expansion row\n */\n hideExpansionDivider: false,\n isExpanded: false,\n isSelected: false,\n isSelectDisabled: false,\n });\n\n const emit =\n defineEmits<{\n 'update:isSelected': [isChecked: CheckboxProps['checked']];\n 'update:isExpanded': [isExpanded: boolean];\n }>();\n\n const attrs = useAttrs();\n const classes = useCssModule();\n const slots = useSlots();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableRow must be used within a Table component');\n }\n\n const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n const isRowExpanded = ref(props.isExpanded);\n const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n const childCellCount = computed(() => {\n let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n if (isSelectable.value) {\n count += 1;\n }\n\n if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n count += 1;\n }\n\n return count;\n });\n const rowId = uniqueId('table-row-');\n\n function toggleExpand(value?: boolean) {\n if (!isRowExpandable.value) {\n throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n }\n\n const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n isRowExpanded.value = isExpanded;\n emit('update:isExpanded', isExpanded);\n }\n\n watch(\n () => props.isExpanded,\n () => toggleExpand(props.isExpanded),\n );\n</script>\n\n<template>\n <tr\n class=\"stash-table-row\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['is-expandable']]: isRowExpandable,\n [classes['is-expanded']]: isRowExpanded,\n [classes['root--hidden-divider']]: hideExpansionDivider,\n 'tw-p-gutter': layout === 'stack',\n 'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n 'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n },\n ]\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <TableCell\n v-if=\"isSelectable\"\n is-control\n class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n :class=\"classes['row-control-cell']\"\n data-test=\"stash-table-row|selection-cell\"\n >\n <Checkbox\n :class=\"classes['row-selection-checkbox']\"\n :checked=\"props.isSelected\"\n :disabled=\"props.isSelectDisabled\"\n :title=\"t('ll.select.self')\"\n @update:checked=\"emit('update:isSelected', $event)\"\n />\n </TableCell>\n <TableCell\n v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n data-test=\"stash-table-row|custom-expansion-cell\"\n is-control\n :class=\"classes['row-control-cell']\"\n >\n <ChevronToggle\n :aria-controls=\"rowId\"\n :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n :direction=\"isRowExpanded ? 'up' : 'down'\"\n :is-expanded=\"isRowExpanded\"\n @click=\"toggleExpand\"\n />\n </TableCell>\n <!-- @slot default -->\n <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n </tr>\n <tr\n v-if=\"isRowExpandable\"\n class=\"stash-table-row stash-table-row--expandable\"\n :class=\"classes['row-expansion']\"\n data-test=\"stash-table-row|expansion-row\"\n
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n import Expand from '../Expand/Expand.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableCell from '../TableCell/TableCell.vue';\n\n defineOptions({ inheritAttrs: false });\n\n export interface TableRowProps {\n hideExpansionDivider?: boolean;\n isExpanded?: boolean;\n isSelected?: boolean;\n isSelectDisabled?: boolean;\n }\n\n const props = withDefaults(defineProps<TableRowProps>(), {\n /**\n * If true, hides the divider between the parent row and expansion row\n */\n hideExpansionDivider: false,\n isExpanded: false,\n isSelected: false,\n isSelectDisabled: false,\n });\n\n const emit =\n defineEmits<{\n 'update:isSelected': [isChecked: CheckboxProps['checked']];\n 'update:isExpanded': [isExpanded: boolean];\n }>();\n\n const attrs = useAttrs();\n const classes = useCssModule();\n const slots = useSlots();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableRow must be used within a Table component');\n }\n\n const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n const isRowExpanded = ref(props.isExpanded);\n const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n const childCellCount = computed(() => {\n let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n if (isSelectable.value) {\n count += 1;\n }\n\n if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n count += 1;\n }\n\n return count;\n });\n const rowId = uniqueId('table-row-');\n\n function toggleExpand(value?: boolean) {\n if (!isRowExpandable.value) {\n throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n }\n\n const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n isRowExpanded.value = isExpanded;\n emit('update:isExpanded', isExpanded);\n }\n\n watch(\n () => props.isExpanded,\n () => toggleExpand(props.isExpanded),\n );\n</script>\n\n<template>\n <tr\n class=\"stash-table-row\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['is-expandable']]: isRowExpandable,\n [classes['is-expanded']]: isRowExpanded,\n [classes['root--hidden-divider']]: hideExpansionDivider,\n 'tw-p-gutter': layout === 'stack',\n 'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n 'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n },\n ]\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <TableCell\n v-if=\"isSelectable\"\n is-control\n class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n :class=\"classes['row-control-cell']\"\n data-test=\"stash-table-row|selection-cell\"\n >\n <Checkbox\n :class=\"classes['row-selection-checkbox']\"\n :checked=\"props.isSelected\"\n :disabled=\"props.isSelectDisabled\"\n :title=\"t('ll.select.self')\"\n @update:checked=\"emit('update:isSelected', $event)\"\n />\n </TableCell>\n <TableCell\n v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n data-test=\"stash-table-row|custom-expansion-cell\"\n is-control\n :class=\"classes['row-control-cell']\"\n >\n <ChevronToggle\n :aria-controls=\"rowId\"\n :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n :direction=\"isRowExpanded ? 'up' : 'down'\"\n :is-expanded=\"isRowExpanded\"\n @click=\"toggleExpand\"\n />\n </TableCell>\n <!-- @slot default -->\n <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n </tr>\n <tr\n v-if=\"isRowExpandable\"\n class=\"stash-table-row stash-table-row--expandable\"\n :class=\"classes['row-expansion']\"\n data-test=\"stash-table-row|expansion-row\"\n >\n <Expand\n is=\"td\"\n :id=\"rowId\"\n class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n data-test=\"stash-table-row|expansion-cell\"\n :class=\"classes['row-expansion-content']\"\n :colspan=\"childCellCount\"\n :is-expanded=\"isRowExpanded\"\n >\n <!-- @slot expansion, for expandable content -->\n <slot name=\"expansion\"></slot>\n </Expand>\n </tr>\n</template>\n\n<style module>\n .root {\n border: 0;\n }\n\n /**\n * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n */\n .is-expandable > td {\n border-bottom-color: var(--color-ice-200);\n transition: border-bottom-color 0.5s;\n }\n\n .root--hidden-divider.is-expanded > td {\n transition: border-bottom-color 0s;\n /**\n * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n */\n border-bottom-color: transparent;\n }\n\n .layout--scroll {\n border-radius: 0;\n box-shadow: none !important;\n margin: 0;\n }\n\n .layout--scroll:last-of-type {\n border: 0;\n }\n\n .layout--scroll:last-of-type td {\n border-bottom: none;\n }\n\n .layout--stack {\n align-items: stretch;\n background-color: var(--color-white);\n column-gap: var(--grid-gutter);\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n position: relative;\n row-gap: var(--grid-gutter);\n }\n\n .layout--stack:not(.is-expanded) {\n border-radius: theme('borderRadius.DEFAULT');\n transition: border-radius 0.5s;\n }\n\n .layout--stack.is-expanded {\n border-top-left-radius: theme('borderRadius.DEFAULT');\n border-top-right-radius: theme('borderRadius.DEFAULT');\n }\n\n .row-selection-checkbox label {\n padding: 0;\n min-height: theme('spacing.6');\n vertical-align: middle;\n }\n\n .layout--stack .row-control-cell {\n display: flex;\n align-items: center;\n min-width: 0;\n }\n\n /* On mobile, display controls on their own row, pushing other cells below */\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: 1;\n }\n\n .row-expansion-content {\n box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n }\n\n .layout--stack + .row-expansion,\n .layout--stack + .row-expansion > .row-expansion-content {\n display: block;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: 1px solid var(--color-ice-200);\n border-bottom-left-radius: theme('borderRadius.DEFAULT');\n border-bottom-right-radius: theme('borderRadius.DEFAULT');\n margin-bottom: theme('spacing.6');\n }\n\n .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n border-top: none;\n }\n\n /* On large screens, match the styles for layout-SCROLL */\n @media screen('lg') {\n .layout--stack {\n align-items: unset;\n background-color: unset;\n border: 0;\n border-bottom: 1px solid var(--color-ice-200);\n border-radius: 0;\n box-shadow: none;\n column-gap: unset;\n display: table-row;\n grid-template-columns: unset;\n row-gap: unset;\n }\n\n .layout--stack:last-of-type {\n border-bottom: 0;\n }\n\n .layout--stack .row-control-cell {\n display: table-cell;\n }\n\n .layout--stack + .row-expansion {\n display: table-row;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: unset;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n display: table-cell;\n margin-bottom: unset;\n }\n\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: unset;\n }\n }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,EAAa,SAAS,CAAC,CAACP,EAAM,SAAS,GAExEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/useStepper.js
CHANGED
|
@@ -28,9 +28,9 @@ function E(v = {
|
|
|
28
28
|
a.value[e.value].completed = !0, e.value = -1;
|
|
29
29
|
else if (s(e.value)) {
|
|
30
30
|
const i = l.value === -1, c = l.value === a.value[e.value].substeps.length - 1;
|
|
31
|
-
i ? l.value++ : c ? (a.value[e.value].substeps[l.value].completed = !0, l.value = -1, a.value[e.value].completed = !0, e.value++, s(e.value) && l.value++) : (a.value[e.value].substeps[l.value].completed = !0, l.value++);
|
|
31
|
+
i ? l.value++ : c ? (a.value[e.value].substeps[l.value].completed = !0, l.value = -1, a.value[e.value].completed = !0, e.value++, s(e.value) && l.value === -1 && l.value++) : (a.value[e.value].substeps[l.value].completed = !0, l.value++);
|
|
32
32
|
} else
|
|
33
|
-
a.value[e.value].completed = !0, e.value++, s(e.value) && l.value++;
|
|
33
|
+
a.value[e.value].completed = !0, e.value++, s(e.value) && l.value === -1 && l.value++;
|
|
34
34
|
}
|
|
35
35
|
function h() {
|
|
36
36
|
e.value !== -1 && (s(e.value) ? l.value === 0 ? (e.value--, l.value--, e.value >= 0 && s(e.value) && (l.value = a.value[e.value].substeps.length - 1)) : l.value-- : (e.value--, e.value >= 0 && s(e.value) && (l.value = a.value[e.value].substeps.length - 1)));
|
package/dist/useStepper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStepper.js","sources":["../src/composables/useStepper/useStepper.ts"],"sourcesContent":["import { computed, readonly, Ref, ref } from 'vue';\n\nexport interface StepDefinition {\n completed: boolean;\n substeps: Array<Omit<StepDefinition, 'substeps'>>;\n}\n\nexport interface StepperOptions {\n /**\n * If true, the stepper will prevent skipping steps\n */\n linear?: boolean;\n /**\n * The index of the active step\n */\n activeStep?: number;\n /**\n * The index of the active substep\n */\n activeSubstep?: number;\n /**\n * The stepper representation as an array of steps and substeps\n */\n steps?: Array<StepDefinition>;\n /**\n * A ref to the stepper element\n */\n ref?: Ref<HTMLUListElement | null>;\n}\n\nexport default function useStepper(\n options: StepperOptions = {\n linear: false,\n activeStep: -1,\n activeSubstep: -1,\n steps: [],\n },\n) {\n /**\n * The steps and substeps of the stepper, so we can keep track of their state.\n * Can be populated with the `steps` option, or via the `registerStep` function.\n */\n const steps = ref<Array<StepDefinition>>(options.steps ? options.steps : []);\n\n const stepCount = computed(() => steps.value.length);\n\n const activeStepIndex = ref(\n options.activeStep !== null && options.activeStep !== undefined ? options.activeStep : -1,\n );\n const activeSubstepIndex = ref(\n options.activeSubstep !== null && options.activeSubstep !== undefined ? options.activeSubstep : -1,\n );\n\n const stepElements = computed(() => {\n return Array.from((options.ref?.value?.children || []) as HTMLCollectionOf<HTMLLIElement>);\n });\n\n const activeStepElement = computed(() => stepElements.value[activeStepIndex.value]);\n\n /**\n * Returns true if the step at the given index has substeps\n * @param stepIndex The index of the step to check\n */\n function stepHasSubsteps(stepIndex: number): boolean {\n return !!steps.value[stepIndex].substeps.length;\n }\n\n /**\n * Goes to the next step or substep, while flagging the current one as completed.\n * If the current step has substeps, it will go to the next substep if there are any, or to the next substep.\n * And if the next step has substeps, automatically goes to the first substep\n */\n function next(): void {\n const hasNoActiveStep = activeStepIndex.value === -1;\n const isLastStep = activeStepIndex.value === steps.value.length - 1;\n\n // If there is no active step, we want to activate the first step\n if (hasNoActiveStep) {\n activeStepIndex.value++;\n\n // If the step we just navigated to has substeps, we want to activate the first substep\n if (stepHasSubsteps(activeStepIndex.value)) {\n activeSubstepIndex.value++;\n }\n } else if (isLastStep) {\n if (stepHasSubsteps(activeStepIndex.value)) {\n const hasNoActiveSubstep = activeSubstepIndex.value === -1;\n const isLastSubstep = activeSubstepIndex.value === steps.value[activeStepIndex.value].substeps.length - 1;\n\n // if there are no active substeps, we want to activate the first substep\n if (hasNoActiveSubstep) {\n activeSubstepIndex.value++;\n // if the active substep is the last one, we want to reset the step and substep to -1\n } else if (isLastSubstep) {\n steps.value[activeStepIndex.value].substeps[activeSubstepIndex.value].completed = true;\n activeSubstepIndex.value = -1;\n\n steps.value[activeStepIndex.value].completed = true;\n activeStepIndex.value = -1;\n // if there are more substeps, we want to complete the current one and proceed to the next substep\n } else {\n steps.value[activeStepIndex.value].substeps[activeSubstepIndex.value].completed = true;\n activeSubstepIndex.value++;\n }\n // If there are no substeps, we want to complete the current step and reset the step to -1\n } else {\n steps.value[activeStepIndex.value].completed = true;\n activeStepIndex.value = -1;\n }\n } else {\n if (stepHasSubsteps(activeStepIndex.value)) {\n const hasNoActiveSubstep = activeSubstepIndex.value === -1;\n const isLastSubstep = activeSubstepIndex.value === steps.value[activeStepIndex.value].substeps.length - 1;\n\n // if there are no active substeps, we want to activate the first substep\n if (hasNoActiveSubstep) {\n activeSubstepIndex.value++;\n // if the active substep is the last one, we want to go to the next step\n } else if (isLastSubstep) {\n steps.value[activeStepIndex.value].substeps[activeSubstepIndex.value].completed = true;\n activeSubstepIndex.value = -1;\n\n steps.value[activeStepIndex.value].completed = true;\n activeStepIndex.value++;\n\n // If the step we just navigated to has substeps, we want to activate the first substep right away\n if (stepHasSubsteps(activeStepIndex.value)) {\n activeSubstepIndex.value++;\n }\n // if there are more substeps, we want to complete the current one and proceed to the next substep\n } else {\n steps.value[activeStepIndex.value].substeps[activeSubstepIndex.value].completed = true;\n activeSubstepIndex.value++;\n }\n } else {\n steps.value[activeStepIndex.value].completed = true;\n activeStepIndex.value++;\n\n // If the step we just navigated to has substeps, we want to activate the first substep right away\n if (stepHasSubsteps(activeStepIndex.value)) {\n activeSubstepIndex.value++;\n }\n }\n }\n }\n\n function back(): void {\n // We don't want to go back if there is no active step\n if (activeStepIndex.value === -1) {\n return;\n }\n\n if (stepHasSubsteps(activeStepIndex.value)) {\n // If the active substep is the first one, we want to go back to the previous step\n if (activeSubstepIndex.value === 0) {\n activeStepIndex.value--;\n activeSubstepIndex.value--;\n\n // If the step that we just navigated to has substeps, we want to navigate to the last substep\n if (activeStepIndex.value >= 0 && stepHasSubsteps(activeStepIndex.value)) {\n activeSubstepIndex.value = steps.value[activeStepIndex.value].substeps.length - 1;\n }\n } else {\n activeSubstepIndex.value--;\n }\n } else {\n activeStepIndex.value--;\n\n // If the step that we just navigated to has substeps, we want to navigate to the last substep\n if (activeStepIndex.value >= 0 && stepHasSubsteps(activeStepIndex.value)) {\n activeSubstepIndex.value = steps.value[activeStepIndex.value].substeps.length - 1;\n }\n }\n }\n\n /**\n * Navigates to a specific step and substep.\n */\n function goTo(stepIndex: number, substepIndex = -1): void {\n // A linear stepper prevents navigation to incomplete steps\n if (options.linear) {\n if (isStepCompleted(stepIndex - 1) || stepIndex === 0) {\n if (stepHasSubsteps(stepIndex)) {\n if (substepIndex <= 0) {\n activeSubstepIndex.value = 0;\n } else if (isStepCompleted(stepIndex, substepIndex - 1)) {\n activeSubstepIndex.value = substepIndex;\n }\n }\n activeStepIndex.value = stepIndex;\n }\n } else {\n activeStepIndex.value = stepIndex;\n\n if (stepHasSubsteps(stepIndex)) {\n if (substepIndex < 0) {\n activeSubstepIndex.value = 0;\n } else {\n activeSubstepIndex.value = substepIndex;\n }\n }\n }\n }\n\n /**\n * Returns true if the step is completed.\n * if the substep index is provided, check if the substep is completed.\n */\n function isStepCompleted(stepIndex: number, substepIndex = -1): boolean {\n if (substepIndex >= 0) {\n return steps.value[stepIndex]?.substeps[substepIndex]?.completed;\n } else {\n return steps.value[stepIndex]?.completed;\n }\n }\n\n /**\n * Returns true if the step is active.\n * if the substep index is provided, check both if the step and the substep are active.\n */\n function isStepActive(stepIndex: number, substepIndex = -1): boolean {\n if (substepIndex >= 0) {\n return activeStepIndex.value === stepIndex && activeSubstepIndex.value === substepIndex;\n } else {\n return activeStepIndex.value === stepIndex;\n }\n }\n\n /**\n * Registers a new step or substep into the steps array\n */\n function registerStep(nested = false): void {\n if (nested && !steps.value.length) {\n throw new Error('Cannot register a substep without a parent step.');\n }\n\n if (nested) {\n steps.value[steps.value.length - 1].substeps.push({ completed: false });\n } else {\n steps.value.push({ completed: false, substeps: [] });\n }\n }\n\n return {\n steps: readonly(steps),\n stepCount,\n activeStepElement,\n activeStepIndex,\n activeSubstepIndex,\n registerStep,\n next,\n back,\n goTo,\n isStepActive,\n isStepCompleted,\n };\n}\n"],"names":["useStepper","options","steps","ref","stepCount","computed","activeStepIndex","activeSubstepIndex","stepElements","_b","_a","activeStepElement","stepHasSubsteps","stepIndex","next","hasNoActiveStep","isLastStep","hasNoActiveSubstep","isLastSubstep","back","goTo","substepIndex","isStepCompleted","_c","isStepActive","registerStep","nested","readonly"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useStepper.js","sources":["../src/composables/useStepper/useStepper.ts"],"sourcesContent":["import { computed, readonly, Ref, ref } from 'vue';\n\nexport interface StepDefinition {\n completed: boolean;\n substeps: Array<Omit<StepDefinition, 'substeps'>>;\n}\n\nexport interface StepperOptions {\n /**\n * If true, the stepper will prevent skipping steps\n */\n linear?: boolean;\n /**\n * The index of the active step\n */\n activeStep?: number;\n /**\n * The index of the active substep\n */\n activeSubstep?: number;\n /**\n * The stepper representation as an array of steps and substeps\n */\n steps?: Array<StepDefinition>;\n /**\n * A ref to the stepper element\n */\n ref?: Ref<HTMLUListElement | null>;\n}\n\nexport default function useStepper(\n options: StepperOptions = {\n linear: false,\n activeStep: -1,\n activeSubstep: -1,\n steps: [],\n },\n) {\n /**\n * The steps and substeps of the stepper, so we can keep track of their state.\n * Can be populated with the `steps` option, or via the `registerStep` function.\n */\n const steps = ref<Array<StepDefinition>>(options.steps ? options.steps : []);\n\n const stepCount = computed(() => steps.value.length);\n\n const activeStepIndex = ref(\n options.activeStep !== null && options.activeStep !== undefined ? options.activeStep : -1,\n );\n const activeSubstepIndex = ref(\n options.activeSubstep !== null && options.activeSubstep !== undefined ? options.activeSubstep : -1,\n );\n\n const stepElements = computed(() => {\n return Array.from((options.ref?.value?.children || []) as HTMLCollectionOf<HTMLLIElement>);\n });\n\n const activeStepElement = computed(() => stepElements.value[activeStepIndex.value]);\n\n /**\n * Returns true if the step at the given index has substeps\n * @param stepIndex The index of the step to check\n */\n function stepHasSubsteps(stepIndex: number): boolean {\n return !!steps.value[stepIndex].substeps.length;\n }\n\n /**\n * Goes to the next step or substep, while flagging the current one as completed.\n * If the current step has substeps, it will go to the next substep if there are any, or to the next substep.\n * And if the next step has substeps, automatically goes to the first substep\n */\n function next(): void {\n const hasNoActiveStep = activeStepIndex.value === -1;\n const isLastStep = activeStepIndex.value === steps.value.length - 1;\n\n // If there is no active step, we want to activate the first step\n if (hasNoActiveStep) {\n activeStepIndex.value++;\n\n // If the step we just navigated to has substeps, we want to activate the first substep\n if (stepHasSubsteps(activeStepIndex.value)) {\n activeSubstepIndex.value++;\n }\n } else if (isLastStep) {\n if (stepHasSubsteps(activeStepIndex.value)) {\n const hasNoActiveSubstep = activeSubstepIndex.value === -1;\n const isLastSubstep = activeSubstepIndex.value === steps.value[activeStepIndex.value].substeps.length - 1;\n\n // if there are no active substeps, we want to activate the first substep\n if (hasNoActiveSubstep) {\n activeSubstepIndex.value++;\n // if the active substep is the last one, we want to reset the step and substep to -1\n } else if (isLastSubstep) {\n steps.value[activeStepIndex.value].substeps[activeSubstepIndex.value].completed = true;\n activeSubstepIndex.value = -1;\n\n steps.value[activeStepIndex.value].completed = true;\n activeStepIndex.value = -1;\n // if there are more substeps, we want to complete the current one and proceed to the next substep\n } else {\n steps.value[activeStepIndex.value].substeps[activeSubstepIndex.value].completed = true;\n activeSubstepIndex.value++;\n }\n // If there are no substeps, we want to complete the current step and reset the step to -1\n } else {\n steps.value[activeStepIndex.value].completed = true;\n activeStepIndex.value = -1;\n }\n } else {\n if (stepHasSubsteps(activeStepIndex.value)) {\n const hasNoActiveSubstep = activeSubstepIndex.value === -1;\n const isLastSubstep = activeSubstepIndex.value === steps.value[activeStepIndex.value].substeps.length - 1;\n\n // if there are no active substeps, we want to activate the first substep\n if (hasNoActiveSubstep) {\n activeSubstepIndex.value++;\n // if the active substep is the last one, we want to go to the next step\n } else if (isLastSubstep) {\n steps.value[activeStepIndex.value].substeps[activeSubstepIndex.value].completed = true;\n activeSubstepIndex.value = -1;\n\n steps.value[activeStepIndex.value].completed = true;\n activeStepIndex.value++;\n\n // If the step we just navigated to has substeps, we want to activate the first substep right away\n if (stepHasSubsteps(activeStepIndex.value) && activeSubstepIndex.value === -1) {\n activeSubstepIndex.value++;\n }\n // if there are more substeps, we want to complete the current one and proceed to the next substep\n } else {\n steps.value[activeStepIndex.value].substeps[activeSubstepIndex.value].completed = true;\n activeSubstepIndex.value++;\n }\n } else {\n steps.value[activeStepIndex.value].completed = true;\n activeStepIndex.value++;\n\n // If the step we just navigated to has substeps, we want to activate the first substep right away\n if (stepHasSubsteps(activeStepIndex.value) && activeSubstepIndex.value === -1) {\n activeSubstepIndex.value++;\n }\n }\n }\n }\n\n function back(): void {\n // We don't want to go back if there is no active step\n if (activeStepIndex.value === -1) {\n return;\n }\n\n if (stepHasSubsteps(activeStepIndex.value)) {\n // If the active substep is the first one, we want to go back to the previous step\n if (activeSubstepIndex.value === 0) {\n activeStepIndex.value--;\n activeSubstepIndex.value--;\n\n // If the step that we just navigated to has substeps, we want to navigate to the last substep\n if (activeStepIndex.value >= 0 && stepHasSubsteps(activeStepIndex.value)) {\n activeSubstepIndex.value = steps.value[activeStepIndex.value].substeps.length - 1;\n }\n } else {\n activeSubstepIndex.value--;\n }\n } else {\n activeStepIndex.value--;\n\n // If the step that we just navigated to has substeps, we want to navigate to the last substep\n if (activeStepIndex.value >= 0 && stepHasSubsteps(activeStepIndex.value)) {\n activeSubstepIndex.value = steps.value[activeStepIndex.value].substeps.length - 1;\n }\n }\n }\n\n /**\n * Navigates to a specific step and substep.\n */\n function goTo(stepIndex: number, substepIndex = -1): void {\n // A linear stepper prevents navigation to incomplete steps\n if (options.linear) {\n if (isStepCompleted(stepIndex - 1) || stepIndex === 0) {\n if (stepHasSubsteps(stepIndex)) {\n if (substepIndex <= 0) {\n activeSubstepIndex.value = 0;\n } else if (isStepCompleted(stepIndex, substepIndex - 1)) {\n activeSubstepIndex.value = substepIndex;\n }\n }\n activeStepIndex.value = stepIndex;\n }\n } else {\n activeStepIndex.value = stepIndex;\n\n if (stepHasSubsteps(stepIndex)) {\n if (substepIndex < 0) {\n activeSubstepIndex.value = 0;\n } else {\n activeSubstepIndex.value = substepIndex;\n }\n }\n }\n }\n\n /**\n * Returns true if the step is completed.\n * if the substep index is provided, check if the substep is completed.\n */\n function isStepCompleted(stepIndex: number, substepIndex = -1): boolean {\n if (substepIndex >= 0) {\n return steps.value[stepIndex]?.substeps[substepIndex]?.completed;\n } else {\n return steps.value[stepIndex]?.completed;\n }\n }\n\n /**\n * Returns true if the step is active.\n * if the substep index is provided, check both if the step and the substep are active.\n */\n function isStepActive(stepIndex: number, substepIndex = -1): boolean {\n if (substepIndex >= 0) {\n return activeStepIndex.value === stepIndex && activeSubstepIndex.value === substepIndex;\n } else {\n return activeStepIndex.value === stepIndex;\n }\n }\n\n /**\n * Registers a new step or substep into the steps array\n */\n function registerStep(nested = false): void {\n if (nested && !steps.value.length) {\n throw new Error('Cannot register a substep without a parent step.');\n }\n\n if (nested) {\n steps.value[steps.value.length - 1].substeps.push({ completed: false });\n } else {\n steps.value.push({ completed: false, substeps: [] });\n }\n }\n\n return {\n steps: readonly(steps),\n stepCount,\n activeStepElement,\n activeStepIndex,\n activeSubstepIndex,\n registerStep,\n next,\n back,\n goTo,\n isStepActive,\n isStepCompleted,\n };\n}\n"],"names":["useStepper","options","steps","ref","stepCount","computed","activeStepIndex","activeSubstepIndex","stepElements","_b","_a","activeStepElement","stepHasSubsteps","stepIndex","next","hasNoActiveStep","isLastStep","hasNoActiveSubstep","isLastSubstep","back","goTo","substepIndex","isStepCompleted","_c","isStepActive","registerStep","nested","readonly"],"mappings":"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"}
|