@pequity/squirrel 8.3.1 → 8.3.2
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/cjs/index.js +69 -18
- package/dist/cjs/p-steps.js +0 -2
- package/dist/es/chunks/p-dropdown-select.js +2 -2
- package/dist/es/index.js +102 -51
- package/dist/es/p-dropdown-select.js +1 -1
- package/dist/es/p-steps.js +1 -4
- package/dist/squirrel/components/index.d.ts +2 -1
- package/dist/squirrel/components/p-steps/p-steps.types.d.ts +5 -0
- package/dist/squirrel/components/p-steps/p-steps.vue.d.ts +14 -15
- package/dist/squirrel.css +74 -74
- package/package.json +5 -5
- package/squirrel/components/index.ts +2 -0
- package/squirrel/components/p-steps/__snapshots__/{p-steps.spec.js.snap → p-steps.spec.ts.snap} +5 -5
- package/squirrel/components/p-steps/p-steps.spec.ts +203 -0
- package/squirrel/components/p-steps/p-steps.stories.js +32 -4
- package/squirrel/components/p-steps/p-steps.types.ts +5 -0
- package/squirrel/components/p-steps/p-steps.vue +30 -21
- package/dist/cjs/chunks/p-steps.js +0 -55
- package/dist/es/chunks/p-steps.js +0 -56
- package/squirrel/components/p-steps/p-steps.spec.js +0 -126
package/dist/cjs/index.js
CHANGED
|
@@ -42,7 +42,6 @@ const string = require("./string.js");
|
|
|
42
42
|
const text = require("./text.js");
|
|
43
43
|
const pSelectPill = require("./p-select-pill.js");
|
|
44
44
|
const pSkeletonLoader = require("./p-skeleton-loader.js");
|
|
45
|
-
const pSteps_vue_vue_type_script_setup_true_lang = require("./chunks/p-steps.js");
|
|
46
45
|
const pTable$1 = require("./p-table.js");
|
|
47
46
|
const usePTableColResize = require("./usePTableColResize.js");
|
|
48
47
|
const pTableHeaderCell = require("./p-table-header-cell.js");
|
|
@@ -65,12 +64,12 @@ const object = require("./object.js");
|
|
|
65
64
|
const pagination = require("./pagination.js");
|
|
66
65
|
const sanitization = require("./sanitization.js");
|
|
67
66
|
const index = require("./chunks/index.js");
|
|
68
|
-
const _hoisted_1$
|
|
69
|
-
const _hoisted_2$
|
|
67
|
+
const _hoisted_1$4 = ["data-has-error"];
|
|
68
|
+
const _hoisted_2$4 = {
|
|
70
69
|
key: 0,
|
|
71
70
|
class: "flex h-28 flex-col items-center justify-center"
|
|
72
71
|
};
|
|
73
|
-
const _hoisted_3$
|
|
72
|
+
const _hoisted_3$4 = {
|
|
74
73
|
key: 0,
|
|
75
74
|
class: "flex flex-col items-center"
|
|
76
75
|
};
|
|
@@ -86,7 +85,7 @@ const _hoisted_9 = { class: "max-h-48 overflow-y-auto overflow-x-hidden" };
|
|
|
86
85
|
const _hoisted_10 = ["title"];
|
|
87
86
|
const _hoisted_11 = ["onClick"];
|
|
88
87
|
const _hoisted_12 = { class: "mt-1 text-xs text-p-gray-40" };
|
|
89
|
-
const _sfc_main$
|
|
88
|
+
const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
|
|
90
89
|
...{
|
|
91
90
|
name: "PFileUpload"
|
|
92
91
|
},
|
|
@@ -254,8 +253,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
|
|
|
254
253
|
onDrop: vue.withModifiers(onDrop, ["prevent", "stop"]),
|
|
255
254
|
onClick: openFileDialog
|
|
256
255
|
}, [
|
|
257
|
-
!maxFilesReached.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$
|
|
258
|
-
!isDraggingOver.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$
|
|
256
|
+
!maxFilesReached.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
|
|
257
|
+
!isDraggingOver.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [
|
|
259
258
|
vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
260
259
|
icon: "upload",
|
|
261
260
|
width: "32",
|
|
@@ -322,13 +321,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
|
|
|
322
321
|
[vue.vShow, __props.errorMsg]
|
|
323
322
|
]),
|
|
324
323
|
vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(__props.multiple ? `Max ${__props.maxNumberOfFiles}` : "One") + " " + vue.toDisplayString(acceptFileTypes.value) + " " + vue.toDisplayString(__props.multiple ? "files" : "file") + " with size less than " + vue.toDisplayString(vue.unref(pFileUpload.formatBytes)(__props.maxSizeInBytes)) + " " + vue.toDisplayString(__props.multiple ? "each" : ""), 1)
|
|
325
|
-
], 10, _hoisted_1$
|
|
324
|
+
], 10, _hoisted_1$4);
|
|
326
325
|
};
|
|
327
326
|
}
|
|
328
327
|
});
|
|
329
|
-
const _hoisted_1$
|
|
330
|
-
const _hoisted_2$
|
|
331
|
-
const _hoisted_3$
|
|
328
|
+
const _hoisted_1$3 = ["data-has-error"];
|
|
329
|
+
const _hoisted_2$3 = { class: "text-p-purple-60" };
|
|
330
|
+
const _hoisted_3$3 = { class: "flex flex-row" };
|
|
332
331
|
const _hoisted_4$2 = ["onClick"];
|
|
333
332
|
const _hoisted_5$2 = ["title"];
|
|
334
333
|
const _hoisted_6$2 = {
|
|
@@ -336,7 +335,7 @@ const _hoisted_6$2 = {
|
|
|
336
335
|
class: "ml-auto fill-p-purple-60 pl-2",
|
|
337
336
|
src: pDropdownSelect_vue_vue_type_script_setup_true_lang._imports_0
|
|
338
337
|
};
|
|
339
|
-
const _sfc_main$
|
|
338
|
+
const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
|
|
340
339
|
...{
|
|
341
340
|
name: "PSelectList",
|
|
342
341
|
inheritAttrs: false
|
|
@@ -544,8 +543,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
544
543
|
ref: actionsContainer,
|
|
545
544
|
class: "flex flex-row justify-between text-xs font-semibold text-primary"
|
|
546
545
|
}, [
|
|
547
|
-
vue.createElementVNode("p", _hoisted_2$
|
|
548
|
-
vue.createElementVNode("div", _hoisted_3$
|
|
546
|
+
vue.createElementVNode("p", _hoisted_2$3, vue.toDisplayString(vue.unref(computedItems).length) + " items", 1),
|
|
547
|
+
vue.createElementVNode("div", _hoisted_3$3, [
|
|
549
548
|
vue.unref(computedItems).length === vue.unref(internalItems).length ? (vue.openBlock(), vue.createElementBlock("a", {
|
|
550
549
|
key: 0,
|
|
551
550
|
class: vue.normalizeClass([
|
|
@@ -657,7 +656,59 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
657
656
|
}, vue.toDisplayString(__props.errorMsg), 3), [
|
|
658
657
|
[vue.vShow, __props.errorMsg]
|
|
659
658
|
])
|
|
660
|
-
], 14, _hoisted_1$
|
|
659
|
+
], 14, _hoisted_1$3);
|
|
660
|
+
};
|
|
661
|
+
}
|
|
662
|
+
});
|
|
663
|
+
const _hoisted_1$2 = { class: "flex items-center gap-2" };
|
|
664
|
+
const _hoisted_2$2 = ["onClick"];
|
|
665
|
+
const _hoisted_3$2 = {
|
|
666
|
+
key: 0,
|
|
667
|
+
class: "flex items-center"
|
|
668
|
+
};
|
|
669
|
+
const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
670
|
+
...{
|
|
671
|
+
name: "PSteps"
|
|
672
|
+
},
|
|
673
|
+
__name: "p-steps",
|
|
674
|
+
props: {
|
|
675
|
+
activeStep: { default: null },
|
|
676
|
+
steps: { default: () => [] },
|
|
677
|
+
clickable: { type: Boolean, default: false }
|
|
678
|
+
},
|
|
679
|
+
emits: ["click:step"],
|
|
680
|
+
setup(__props, { emit: __emit }) {
|
|
681
|
+
const props = __props;
|
|
682
|
+
const emit = __emit;
|
|
683
|
+
const activeStepIndex = vue.computed(() => props.steps.findIndex((s) => s.value === props.activeStep));
|
|
684
|
+
const stepClasses = (step, stepIndex) => {
|
|
685
|
+
if (step.value === props.activeStep) {
|
|
686
|
+
return "border-p-blue-50 bg-p-blue-50 text-surface";
|
|
687
|
+
}
|
|
688
|
+
if (activeStepIndex.value < stepIndex) {
|
|
689
|
+
return "border-p-gray-30 text-p-gray-30";
|
|
690
|
+
}
|
|
691
|
+
return "border-p-blue-50 text-p-blue-50";
|
|
692
|
+
};
|
|
693
|
+
return (_ctx, _cache) => {
|
|
694
|
+
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
|
|
695
|
+
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.steps, (step, i) => {
|
|
696
|
+
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
|
|
697
|
+
key: step.value
|
|
698
|
+
}, [
|
|
699
|
+
vue.createElementVNode("div", {
|
|
700
|
+
class: vue.normalizeClass(["text-nowrap rounded-full border px-4 py-1 text-sm font-semibold", [stepClasses(step, i), { "cursor-pointer": _ctx.clickable && !step.disabled }]]),
|
|
701
|
+
onClick: ($event) => emit("click:step", step, i)
|
|
702
|
+
}, vue.toDisplayString(step.text || vue.unref(lodashEs.startCase)(String(step.value))), 11, _hoisted_2$2),
|
|
703
|
+
i < _ctx.steps.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
|
|
704
|
+
vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
705
|
+
icon: "material-symbols:arrow-right-alt-rounded",
|
|
706
|
+
class: vue.normalizeClass([activeStepIndex.value <= i ? "text-p-gray-30" : "text-p-blue-50"])
|
|
707
|
+
}, null, 8, ["class"])
|
|
708
|
+
])) : vue.createCommentVNode("", true)
|
|
709
|
+
], 64);
|
|
710
|
+
}), 128))
|
|
711
|
+
]);
|
|
661
712
|
};
|
|
662
713
|
}
|
|
663
714
|
});
|
|
@@ -1020,7 +1071,6 @@ exports.toString = string.toString;
|
|
|
1020
1071
|
exports.splitStringForHighlight = text.splitStringForHighlight;
|
|
1021
1072
|
exports.PSelectPill = pSelectPill;
|
|
1022
1073
|
exports.PSkeletonLoader = pSkeletonLoader;
|
|
1023
|
-
exports.PSteps = pSteps_vue_vue_type_script_setup_true_lang._sfc_main;
|
|
1024
1074
|
exports.MIN_WIDTH_COL_RESIZE = pTable$1.MIN_WIDTH_COL_RESIZE;
|
|
1025
1075
|
exports.colsInjectionKey = pTable$1.colsInjectionKey;
|
|
1026
1076
|
exports.isColsResizableInjectionKey = pTable$1.isColsResizableInjectionKey;
|
|
@@ -1053,7 +1103,8 @@ exports.createTV = index.fe;
|
|
|
1053
1103
|
exports.defaultConfig = index.ie;
|
|
1054
1104
|
exports.tv = index.ce;
|
|
1055
1105
|
exports.voidEmpty = index.x;
|
|
1056
|
-
exports.PFileUpload = _sfc_main$
|
|
1057
|
-
exports.PSelectList = _sfc_main$
|
|
1106
|
+
exports.PFileUpload = _sfc_main$4;
|
|
1107
|
+
exports.PSelectList = _sfc_main$3;
|
|
1108
|
+
exports.PSteps = _sfc_main$2;
|
|
1058
1109
|
exports.PTable = pTable;
|
|
1059
1110
|
exports.PTableSort = _sfc_main;
|
package/dist/cjs/p-steps.js
CHANGED
package/dist/es/index.js
CHANGED
|
@@ -9,39 +9,38 @@ import { default as default4 } from "./p-close-btn.js";
|
|
|
9
9
|
import { _ as _6 } from "./chunks/p-date-picker.js";
|
|
10
10
|
import { default as default5 } from "./p-drawer.js";
|
|
11
11
|
import { default as default6 } from "./p-dropdown.js";
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
12
|
+
import { a as _imports_0$1 } from "./chunks/p-dropdown-select.js";
|
|
13
|
+
import { _ as _7 } from "./chunks/p-dropdown-select.js";
|
|
14
14
|
import { defineComponent, shallowRef, ref, computed, onMounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, withDirectives, unref, toDisplayString, withModifiers, createVNode, createTextVNode, Fragment, renderList, vShow, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, onBeforeUnmount, watch, mergeProps, toHandlers, createBlock, withCtx } from "vue";
|
|
15
15
|
import { formatBytes, getFileExtension } from "./p-file-upload.js";
|
|
16
|
-
import { _ as _sfc_main$
|
|
16
|
+
import { _ as _sfc_main$5 } from "./chunks/p-icon.js";
|
|
17
17
|
import { useInputClasses } from "./useInputClasses.js";
|
|
18
|
-
import { uniq, kebabCase } from "lodash-es";
|
|
18
|
+
import { uniq, startCase, kebabCase } from "lodash-es";
|
|
19
19
|
import { useToast } from "vue-toastification";
|
|
20
20
|
import { P_ICON_ALIASES } from "./p-icon.js";
|
|
21
|
-
import { _ as
|
|
22
|
-
import { _ as
|
|
23
|
-
import { _ as
|
|
24
|
-
import { _ as
|
|
25
|
-
import { _ as
|
|
21
|
+
import { _ as _8 } from "./chunks/p-info-icon.js";
|
|
22
|
+
import { _ as _9 } from "./chunks/p-inline-date-picker.js";
|
|
23
|
+
import { _ as _10 } from "./chunks/p-input.js";
|
|
24
|
+
import { _ as _11 } from "./chunks/p-input-number.js";
|
|
25
|
+
import { _ as _12 } from "./chunks/p-input-percent.js";
|
|
26
26
|
import PInputSearch from "./p-input-search.js";
|
|
27
|
-
import { _ as
|
|
27
|
+
import { _ as _13 } from "./chunks/p-link.js";
|
|
28
28
|
import { default as default7 } from "./p-loading.js";
|
|
29
29
|
import { usePLoading } from "./usePLoading.js";
|
|
30
30
|
import { default as default8 } from "./p-modal.js";
|
|
31
31
|
import { usePModal } from "./usePModal.js";
|
|
32
|
-
import { _ as
|
|
33
|
-
import { _ as
|
|
34
|
-
import { _ as
|
|
35
|
-
import { _ as
|
|
36
|
-
import { _ as
|
|
37
|
-
import { _ as
|
|
32
|
+
import { _ as _14 } from "./chunks/p-pagination.js";
|
|
33
|
+
import { _ as _15 } from "./chunks/p-pagination-info.js";
|
|
34
|
+
import { _ as _16 } from "./chunks/p-progress-bar.js";
|
|
35
|
+
import { _ as _17 } from "./chunks/p-ring-loader.js";
|
|
36
|
+
import { _ as _18 } from "./chunks/p-select.js";
|
|
37
|
+
import { _ as _19 } from "./chunks/p-select-btn.js";
|
|
38
38
|
import { SIZES } from "./p-select-list.js";
|
|
39
39
|
import { useSelectList } from "./useSelectList.js";
|
|
40
40
|
import { toString } from "./string.js";
|
|
41
41
|
import { splitStringForHighlight } from "./text.js";
|
|
42
42
|
import { default as default9 } from "./p-select-pill.js";
|
|
43
43
|
import { default as default10 } from "./p-skeleton-loader.js";
|
|
44
|
-
import { _ as _19 } from "./chunks/p-steps.js";
|
|
45
44
|
import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, isColsResizableInjectionKey } from "./p-table.js";
|
|
46
45
|
import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
|
|
47
46
|
import { usePTableColResize } from "./usePTableColResize.js";
|
|
@@ -65,12 +64,12 @@ import { isObject } from "./object.js";
|
|
|
65
64
|
import { createPagingRange } from "./pagination.js";
|
|
66
65
|
import { sanitizeUrl } from "./sanitization.js";
|
|
67
66
|
import { M, N, f, i, c, x } from "./chunks/index.js";
|
|
68
|
-
const _hoisted_1$
|
|
69
|
-
const _hoisted_2$
|
|
67
|
+
const _hoisted_1$4 = ["data-has-error"];
|
|
68
|
+
const _hoisted_2$4 = {
|
|
70
69
|
key: 0,
|
|
71
70
|
class: "flex h-28 flex-col items-center justify-center"
|
|
72
71
|
};
|
|
73
|
-
const _hoisted_3$
|
|
72
|
+
const _hoisted_3$4 = {
|
|
74
73
|
key: 0,
|
|
75
74
|
class: "flex flex-col items-center"
|
|
76
75
|
};
|
|
@@ -86,7 +85,7 @@ const _hoisted_9 = { class: "max-h-48 overflow-y-auto overflow-x-hidden" };
|
|
|
86
85
|
const _hoisted_10 = ["title"];
|
|
87
86
|
const _hoisted_11 = ["onClick"];
|
|
88
87
|
const _hoisted_12 = { class: "mt-1 text-xs text-p-gray-40" };
|
|
89
|
-
const _sfc_main$
|
|
88
|
+
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
90
89
|
...{
|
|
91
90
|
name: "PFileUpload"
|
|
92
91
|
},
|
|
@@ -254,9 +253,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
254
253
|
onDrop: withModifiers(onDrop, ["prevent", "stop"]),
|
|
255
254
|
onClick: openFileDialog
|
|
256
255
|
}, [
|
|
257
|
-
!maxFilesReached.value ? (openBlock(), createElementBlock("div", _hoisted_2$
|
|
258
|
-
!isDraggingOver.value ? (openBlock(), createElementBlock("div", _hoisted_3$
|
|
259
|
-
createVNode(_sfc_main$
|
|
256
|
+
!maxFilesReached.value ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
|
|
257
|
+
!isDraggingOver.value ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
|
|
258
|
+
createVNode(_sfc_main$5, {
|
|
260
259
|
icon: "upload",
|
|
261
260
|
width: "32",
|
|
262
261
|
class: "text-p-gray-50"
|
|
@@ -266,7 +265,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
266
265
|
createElementVNode("span", _hoisted_5$3, "select " + toDisplayString(fileWord.value), 1)
|
|
267
266
|
])
|
|
268
267
|
])) : (openBlock(), createElementBlock("div", _hoisted_6$3, [
|
|
269
|
-
createVNode(_sfc_main$
|
|
268
|
+
createVNode(_sfc_main$5, {
|
|
270
269
|
icon: "tdesign:drag-drop",
|
|
271
270
|
width: "32",
|
|
272
271
|
class: "text-primary"
|
|
@@ -306,7 +305,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
306
305
|
class: "h-5 shrink-0 cursor-pointer overflow-hidden",
|
|
307
306
|
onClick: withModifiers(($event) => removeFile(index), ["stop"])
|
|
308
307
|
}, [
|
|
309
|
-
createVNode(_sfc_main$
|
|
308
|
+
createVNode(_sfc_main$5, {
|
|
310
309
|
icon: "weui:close2-outlined",
|
|
311
310
|
width: "20",
|
|
312
311
|
class: "text-p-gray-60 hover:text-on-error"
|
|
@@ -322,13 +321,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
322
321
|
[vShow, __props.errorMsg]
|
|
323
322
|
]),
|
|
324
323
|
createElementVNode("div", _hoisted_12, toDisplayString(__props.multiple ? `Max ${__props.maxNumberOfFiles}` : "One") + " " + toDisplayString(acceptFileTypes.value) + " " + toDisplayString(__props.multiple ? "files" : "file") + " with size less than " + toDisplayString(unref(formatBytes)(__props.maxSizeInBytes)) + " " + toDisplayString(__props.multiple ? "each" : ""), 1)
|
|
325
|
-
], 10, _hoisted_1$
|
|
324
|
+
], 10, _hoisted_1$4);
|
|
326
325
|
};
|
|
327
326
|
}
|
|
328
327
|
});
|
|
329
|
-
const _hoisted_1$
|
|
330
|
-
const _hoisted_2$
|
|
331
|
-
const _hoisted_3$
|
|
328
|
+
const _hoisted_1$3 = ["data-has-error"];
|
|
329
|
+
const _hoisted_2$3 = { class: "text-p-purple-60" };
|
|
330
|
+
const _hoisted_3$3 = { class: "flex flex-row" };
|
|
332
331
|
const _hoisted_4$2 = ["onClick"];
|
|
333
332
|
const _hoisted_5$2 = ["title"];
|
|
334
333
|
const _hoisted_6$2 = {
|
|
@@ -336,7 +335,7 @@ const _hoisted_6$2 = {
|
|
|
336
335
|
class: "ml-auto fill-p-purple-60 pl-2",
|
|
337
336
|
src: _imports_0$1
|
|
338
337
|
};
|
|
339
|
-
const _sfc_main$
|
|
338
|
+
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
340
339
|
...{
|
|
341
340
|
name: "PSelectList",
|
|
342
341
|
inheritAttrs: false
|
|
@@ -544,8 +543,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
544
543
|
ref: actionsContainer,
|
|
545
544
|
class: "flex flex-row justify-between text-xs font-semibold text-primary"
|
|
546
545
|
}, [
|
|
547
|
-
createElementVNode("p", _hoisted_2$
|
|
548
|
-
createElementVNode("div", _hoisted_3$
|
|
546
|
+
createElementVNode("p", _hoisted_2$3, toDisplayString(unref(computedItems).length) + " items", 1),
|
|
547
|
+
createElementVNode("div", _hoisted_3$3, [
|
|
549
548
|
unref(computedItems).length === unref(internalItems).length ? (openBlock(), createElementBlock("a", {
|
|
550
549
|
key: 0,
|
|
551
550
|
class: normalizeClass([
|
|
@@ -657,7 +656,59 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
657
656
|
}, toDisplayString(__props.errorMsg), 3), [
|
|
658
657
|
[vShow, __props.errorMsg]
|
|
659
658
|
])
|
|
660
|
-
], 14, _hoisted_1$
|
|
659
|
+
], 14, _hoisted_1$3);
|
|
660
|
+
};
|
|
661
|
+
}
|
|
662
|
+
});
|
|
663
|
+
const _hoisted_1$2 = { class: "flex items-center gap-2" };
|
|
664
|
+
const _hoisted_2$2 = ["onClick"];
|
|
665
|
+
const _hoisted_3$2 = {
|
|
666
|
+
key: 0,
|
|
667
|
+
class: "flex items-center"
|
|
668
|
+
};
|
|
669
|
+
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
670
|
+
...{
|
|
671
|
+
name: "PSteps"
|
|
672
|
+
},
|
|
673
|
+
__name: "p-steps",
|
|
674
|
+
props: {
|
|
675
|
+
activeStep: { default: null },
|
|
676
|
+
steps: { default: () => [] },
|
|
677
|
+
clickable: { type: Boolean, default: false }
|
|
678
|
+
},
|
|
679
|
+
emits: ["click:step"],
|
|
680
|
+
setup(__props, { emit: __emit }) {
|
|
681
|
+
const props = __props;
|
|
682
|
+
const emit = __emit;
|
|
683
|
+
const activeStepIndex = computed(() => props.steps.findIndex((s) => s.value === props.activeStep));
|
|
684
|
+
const stepClasses = (step, stepIndex) => {
|
|
685
|
+
if (step.value === props.activeStep) {
|
|
686
|
+
return "border-p-blue-50 bg-p-blue-50 text-surface";
|
|
687
|
+
}
|
|
688
|
+
if (activeStepIndex.value < stepIndex) {
|
|
689
|
+
return "border-p-gray-30 text-p-gray-30";
|
|
690
|
+
}
|
|
691
|
+
return "border-p-blue-50 text-p-blue-50";
|
|
692
|
+
};
|
|
693
|
+
return (_ctx, _cache) => {
|
|
694
|
+
return openBlock(), createElementBlock("div", _hoisted_1$2, [
|
|
695
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.steps, (step, i2) => {
|
|
696
|
+
return openBlock(), createElementBlock(Fragment, {
|
|
697
|
+
key: step.value
|
|
698
|
+
}, [
|
|
699
|
+
createElementVNode("div", {
|
|
700
|
+
class: normalizeClass(["text-nowrap rounded-full border px-4 py-1 text-sm font-semibold", [stepClasses(step, i2), { "cursor-pointer": _ctx.clickable && !step.disabled }]]),
|
|
701
|
+
onClick: ($event) => emit("click:step", step, i2)
|
|
702
|
+
}, toDisplayString(step.text || unref(startCase)(String(step.value))), 11, _hoisted_2$2),
|
|
703
|
+
i2 < _ctx.steps.length - 1 ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
|
|
704
|
+
createVNode(_sfc_main$5, {
|
|
705
|
+
icon: "material-symbols:arrow-right-alt-rounded",
|
|
706
|
+
class: normalizeClass([activeStepIndex.value <= i2 ? "text-p-gray-30" : "text-p-blue-50"])
|
|
707
|
+
}, null, 8, ["class"])
|
|
708
|
+
])) : createCommentVNode("", true)
|
|
709
|
+
], 64);
|
|
710
|
+
}), 128))
|
|
711
|
+
]);
|
|
661
712
|
};
|
|
662
713
|
}
|
|
663
714
|
});
|
|
@@ -997,29 +1048,29 @@ export {
|
|
|
997
1048
|
_6 as PDatePicker,
|
|
998
1049
|
default5 as PDrawer,
|
|
999
1050
|
default6 as PDropdown,
|
|
1000
|
-
|
|
1001
|
-
_sfc_main$
|
|
1051
|
+
_7 as PDropdownSelect,
|
|
1052
|
+
_sfc_main$4 as PFileUpload,
|
|
1002
1053
|
default11 as PFilterIcon,
|
|
1003
|
-
_sfc_main$
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1054
|
+
_sfc_main$5 as PIcon,
|
|
1055
|
+
_8 as PInfoIcon,
|
|
1056
|
+
_9 as PInlineDatePicker,
|
|
1057
|
+
_10 as PInput,
|
|
1058
|
+
_11 as PInputNumber,
|
|
1059
|
+
_12 as PInputPercent,
|
|
1009
1060
|
PInputSearch,
|
|
1010
|
-
|
|
1061
|
+
_13 as PLink,
|
|
1011
1062
|
default7 as PLoading,
|
|
1012
1063
|
default8 as PModal,
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
_sfc_main$
|
|
1064
|
+
_14 as PPagination,
|
|
1065
|
+
_15 as PPaginationInfo,
|
|
1066
|
+
_16 as PProgressBar,
|
|
1067
|
+
_17 as PRingLoader,
|
|
1068
|
+
_18 as PSelect,
|
|
1069
|
+
_19 as PSelectBtn,
|
|
1070
|
+
_sfc_main$3 as PSelectList,
|
|
1020
1071
|
default9 as PSelectPill,
|
|
1021
1072
|
default10 as PSkeletonLoader,
|
|
1022
|
-
|
|
1073
|
+
_sfc_main$2 as PSteps,
|
|
1023
1074
|
pTable as PTable,
|
|
1024
1075
|
PTableHeaderCell,
|
|
1025
1076
|
_20 as PTableLoader,
|
package/dist/es/p-steps.js
CHANGED
|
@@ -37,6 +37,7 @@ import PSelectList from './p-select-list/p-select-list.vue';
|
|
|
37
37
|
import { useSelectList } from './p-select-list/useSelectList';
|
|
38
38
|
import PSelectPill from './p-select-pill/p-select-pill.vue';
|
|
39
39
|
import PSkeletonLoader from './p-skeleton-loader/p-skeleton-loader.vue';
|
|
40
|
+
import type { StepItem } from './p-steps/p-steps.types';
|
|
40
41
|
import PSteps from './p-steps/p-steps.vue';
|
|
41
42
|
import { colsInjectionKey, type HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, type TableCol, type ThAttrs } from './p-table/p-table.types';
|
|
42
43
|
import PTable from './p-table/p-table.vue';
|
|
@@ -51,4 +52,4 @@ import PTableTd from './p-table-td/p-table-td.vue';
|
|
|
51
52
|
import PTabs from './p-tabs/p-tabs.vue';
|
|
52
53
|
import PTextarea from './p-textarea/p-textarea.vue';
|
|
53
54
|
import PToggle from './p-toggle/p-toggle.vue';
|
|
54
|
-
export { colsInjectionKey, FileUploadFile, HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, P_ICON_ALIASES, PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PIcon, PIconAlias, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PSteps, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, Size, SORTING_TYPES, SortingType, SortingTypeWithoutNoSorting, TableCol, ThAttrs, usePLoading, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, };
|
|
55
|
+
export { colsInjectionKey, FileUploadFile, HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, P_ICON_ALIASES, PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PIcon, PIconAlias, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PSteps, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, Size, SORTING_TYPES, SortingType, SortingTypeWithoutNoSorting, StepItem, TableCol, ThAttrs, usePLoading, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, };
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
} & Partial<{}>> & import("vue").PublicProps;
|
|
7
|
-
expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
|
|
8
|
-
attrs: any;
|
|
9
|
-
slots: {};
|
|
10
|
-
emit: {};
|
|
11
|
-
}>) => import("vue").VNode & {
|
|
12
|
-
__ctx?: Awaited<typeof __VLS_setup>;
|
|
1
|
+
import type { StepItem } from './p-steps.types';
|
|
2
|
+
type Props = {
|
|
3
|
+
activeStep?: StepItem['value'];
|
|
4
|
+
steps?: readonly StepItem[];
|
|
5
|
+
clickable?: boolean;
|
|
13
6
|
};
|
|
7
|
+
declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
8
|
+
"click:step": (step: StepItem, index: number) => any;
|
|
9
|
+
}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
|
|
10
|
+
"onClick:step"?: ((step: StepItem, index: number) => any) | undefined;
|
|
11
|
+
}>, {
|
|
12
|
+
activeStep: StepItem["value"];
|
|
13
|
+
steps: readonly StepItem[];
|
|
14
|
+
clickable: boolean;
|
|
15
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
14
16
|
export default _default;
|
|
15
|
-
type __VLS_PrettifyLocal<T> = {
|
|
16
|
-
[K in keyof T]: T[K];
|
|
17
|
-
} & {};
|