cisse-vue-ui 0.6.0 → 0.7.0
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/{FilterTabs.vue_vue_type_script_setup_true_lang-AFYkni3y.js → FilterTabs.vue_vue_type_script_setup_true_lang-C5vnz3qo.js} +2 -2
- package/dist/{FilterTabs.vue_vue_type_script_setup_true_lang-AFYkni3y.js.map → FilterTabs.vue_vue_type_script_setup_true_lang-C5vnz3qo.js.map} +1 -1
- package/dist/{FormActions.vue_vue_type_script_setup_true_lang-d2aur5Pu.js → TagsInput-C4wBPfrj.js} +1525 -235
- package/dist/TagsInput-C4wBPfrj.js.map +1 -0
- package/dist/{FormActions.vue_vue_type_script_setup_true_lang-DzN_fbUC.cjs → TagsInput-ClqgyR9O.cjs} +1520 -230
- package/dist/TagsInput-ClqgyR9O.cjs.map +1 -0
- package/dist/cisse-vue-ui.css +10 -0
- package/dist/components/core/index.js +1 -1
- package/dist/components/form/EmailInput.stories.d.ts +13 -0
- package/dist/components/form/EmailInput.test.d.ts +1 -0
- package/dist/components/form/EmailInput.vue.d.ts +32 -0
- package/dist/components/form/InputWrapper.stories.d.ts +16 -0
- package/dist/components/form/InputWrapper.test.d.ts +1 -0
- package/dist/components/form/InputWrapper.vue.d.ts +40 -0
- package/dist/components/form/MoneyInput.stories.d.ts +16 -0
- package/dist/components/form/MoneyInput.test.d.ts +1 -0
- package/dist/components/form/MoneyInput.vue.d.ts +40 -0
- package/dist/components/form/NumberInput.stories.d.ts +14 -0
- package/dist/components/form/NumberInput.test.d.ts +1 -0
- package/dist/components/form/NumberInput.vue.d.ts +39 -0
- package/dist/components/form/OTPInput.stories.d.ts +13 -0
- package/dist/components/form/OTPInput.test.d.ts +1 -0
- package/dist/components/form/OTPInput.vue.d.ts +33 -0
- package/dist/components/form/PasswordInput.stories.d.ts +15 -0
- package/dist/components/form/PasswordInput.test.d.ts +1 -0
- package/dist/components/form/PasswordInput.vue.d.ts +36 -0
- package/dist/components/form/PercentInput.stories.d.ts +12 -0
- package/dist/components/form/PercentInput.test.d.ts +1 -0
- package/dist/components/form/PercentInput.vue.d.ts +38 -0
- package/dist/components/form/PhoneInput.stories.d.ts +13 -0
- package/dist/components/form/PhoneInput.test.d.ts +1 -0
- package/dist/components/form/PhoneInput.vue.d.ts +76 -0
- package/dist/components/form/QuantityInput.stories.d.ts +12 -0
- package/dist/components/form/QuantityInput.test.d.ts +1 -0
- package/dist/components/form/QuantityInput.vue.d.ts +32 -0
- package/dist/components/form/TagsInput.stories.d.ts +13 -0
- package/dist/components/form/TagsInput.test.d.ts +1 -0
- package/dist/components/form/TagsInput.vue.d.ts +37 -0
- package/dist/components/form/URLInput.stories.d.ts +11 -0
- package/dist/components/form/URLInput.test.d.ts +1 -0
- package/dist/components/form/URLInput.vue.d.ts +32 -0
- package/dist/components/form/index.cjs +29 -18
- package/dist/components/form/index.cjs.map +1 -1
- package/dist/components/form/index.d.ts +15 -0
- package/dist/components/form/index.js +14 -3
- package/dist/components/index.cjs +29 -18
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.js +15 -4
- package/dist/{index-Bp7Mpfbi.cjs → index-CRoTVc47.cjs} +31 -20
- package/dist/index-CRoTVc47.cjs.map +1 -0
- package/dist/index-D49k0PP0.js +95 -0
- package/dist/index-D49k0PP0.js.map +1 -0
- package/dist/{index-BaWpldIJ.js → index-SNefWfX0.js} +3 -3
- package/dist/{index-BaWpldIJ.js.map → index-SNefWfX0.js.map} +1 -1
- package/dist/index.cjs +30 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +26 -15
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/dist/FormActions.vue_vue_type_script_setup_true_lang-DzN_fbUC.cjs.map +0 -1
- package/dist/FormActions.vue_vue_type_script_setup_true_lang-d2aur5Pu.js.map +0 -1
- package/dist/index-6hQQcCpF.js +0 -84
- package/dist/index-6hQQcCpF.js.map +0 -1
- package/dist/index-Bp7Mpfbi.cjs.map +0 -1
package/dist/{FormActions.vue_vue_type_script_setup_true_lang-d2aur5Pu.js → TagsInput-C4wBPfrj.js}
RENAMED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineComponent, createElementBlock, openBlock, renderSlot, createTextVNode, toDisplayString, mergeModels, useModel, withDirectives, createBlock, createCommentVNode, unref, createElementVNode, mergeProps, vModelDynamic, computed, ref, watch, normalizeClass, createVNode, Teleport, Transition, withCtx, normalizeStyle, vModelText, Fragment, renderList, nextTick, withModifiers, withKeys, vShow } from "vue";
|
|
1
|
+
import { defineComponent, createElementBlock, openBlock, renderSlot, createTextVNode, toDisplayString, mergeModels, useModel, withDirectives, createBlock, createCommentVNode, unref, createElementVNode, mergeProps, vModelDynamic, computed, ref, watch, normalizeClass, createVNode, Teleport, Transition, withCtx, normalizeStyle, vModelText, Fragment, renderList, nextTick, withModifiers, withKeys, vShow, useSlots, createSlots, onMounted, TransitionGroup } from "vue";
|
|
2
2
|
import { u as useId } from "./useId-xeHj7rkg.js";
|
|
3
3
|
import { Icon } from "@iconify/vue";
|
|
4
4
|
import { u as useDropdown } from "./useDropdown-iVu14E6s.js";
|
|
5
5
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
|
|
6
|
-
import { o as onClickOutside,
|
|
7
|
-
import { _ as _sfc_main$
|
|
8
|
-
const _hoisted_1$
|
|
9
|
-
const _sfc_main$
|
|
6
|
+
import { o as onClickOutside, a as useDebounceFn } from "./index-SNefWfX0.js";
|
|
7
|
+
import { _ as _sfc_main$s } from "./Button.vue_vue_type_script_setup_true_lang-CBYr0Z2_.js";
|
|
8
|
+
const _hoisted_1$r = ["data-error", "for"];
|
|
9
|
+
const _sfc_main$r = /* @__PURE__ */ defineComponent({
|
|
10
10
|
__name: "FormLabel",
|
|
11
11
|
props: {
|
|
12
12
|
error: { type: [String, Boolean] },
|
|
@@ -20,12 +20,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
|
|
|
20
20
|
class: "block text-sm font-medium text-gray-700 data-[error=true]:text-red-500 dark:text-gray-300"
|
|
21
21
|
}, [
|
|
22
22
|
renderSlot(_ctx.$slots, "default")
|
|
23
|
-
], 8, _hoisted_1$
|
|
23
|
+
], 8, _hoisted_1$r);
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
|
-
const _hoisted_1$
|
|
28
|
-
const _sfc_main$
|
|
27
|
+
const _hoisted_1$q = ["id", "data-error", "role", "aria-live"];
|
|
28
|
+
const _sfc_main$q = /* @__PURE__ */ defineComponent({
|
|
29
29
|
__name: "FormHelp",
|
|
30
30
|
props: {
|
|
31
31
|
id: {},
|
|
@@ -44,18 +44,18 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
|
44
44
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
45
45
|
createTextVNode(toDisplayString(__props.text ?? ""), 1)
|
|
46
46
|
])
|
|
47
|
-
], 8, _hoisted_1$
|
|
47
|
+
], 8, _hoisted_1$q);
|
|
48
48
|
};
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
|
-
const _hoisted_1$
|
|
51
|
+
const _hoisted_1$p = {
|
|
52
52
|
key: 0,
|
|
53
53
|
class: "relative"
|
|
54
54
|
};
|
|
55
|
-
const _hoisted_2$
|
|
56
|
-
const _hoisted_3$
|
|
55
|
+
const _hoisted_2$j = ["id", "disabled", "name", "placeholder", "type", "required", "aria-invalid", "aria-required", "aria-describedby"];
|
|
56
|
+
const _hoisted_3$g = ["id", "disabled", "name", "placeholder", "type", "required", "aria-invalid", "aria-required", "aria-describedby"];
|
|
57
57
|
const baseInputClass = "block w-full rounded-xl border border-gray-200 bg-gray-50 text-sm text-gray-900 placeholder-gray-400 transition-all focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:bg-white focus:outline-hidden disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:bg-slate-600 dark:disabled:bg-slate-800 dark:disabled:text-gray-500";
|
|
58
|
-
const _sfc_main$
|
|
58
|
+
const _sfc_main$p = /* @__PURE__ */ defineComponent({
|
|
59
59
|
__name: "FormInput",
|
|
60
60
|
props: /* @__PURE__ */ mergeModels({
|
|
61
61
|
type: { default: "text" },
|
|
@@ -78,7 +78,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
|
78
78
|
const props = __props;
|
|
79
79
|
const modelValue = useModel(__props, "modelValue");
|
|
80
80
|
return (_ctx, _cache) => {
|
|
81
|
-
return props.icon || props.iconRight ? (openBlock(), createElementBlock("div", _hoisted_1$
|
|
81
|
+
return props.icon || props.iconRight ? (openBlock(), createElementBlock("div", _hoisted_1$p, [
|
|
82
82
|
props.icon ? (openBlock(), createBlock(unref(Icon), {
|
|
83
83
|
key: 0,
|
|
84
84
|
icon: props.icon,
|
|
@@ -101,7 +101,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
|
101
101
|
props.icon ? "pl-10" : "pl-4",
|
|
102
102
|
props.iconRight ? "pr-10" : "pr-4"
|
|
103
103
|
]
|
|
104
|
-
}, _ctx.$attrs), null, 16, _hoisted_2$
|
|
104
|
+
}, _ctx.$attrs), null, 16, _hoisted_2$j), [
|
|
105
105
|
[vModelDynamic, modelValue.value]
|
|
106
106
|
]),
|
|
107
107
|
props.iconRight ? (openBlock(), createBlock(unref(Icon), {
|
|
@@ -122,35 +122,35 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
|
122
122
|
"aria-required": props.required || void 0,
|
|
123
123
|
"aria-describedby": props.describedBy || void 0,
|
|
124
124
|
class: [baseInputClass, "px-4 py-3"]
|
|
125
|
-
}, _ctx.$attrs), null, 16, _hoisted_3$
|
|
125
|
+
}, _ctx.$attrs), null, 16, _hoisted_3$g)), [
|
|
126
126
|
[vModelDynamic, modelValue.value]
|
|
127
127
|
]);
|
|
128
128
|
};
|
|
129
129
|
}
|
|
130
130
|
});
|
|
131
|
-
const _hoisted_1$
|
|
132
|
-
const _hoisted_2$
|
|
133
|
-
const _hoisted_3$
|
|
134
|
-
const _hoisted_4$
|
|
135
|
-
const _hoisted_5$
|
|
131
|
+
const _hoisted_1$o = { class: "relative" };
|
|
132
|
+
const _hoisted_2$i = ["id", "disabled", "aria-expanded", "aria-controls", "aria-invalid", "aria-describedby"];
|
|
133
|
+
const _hoisted_3$f = { class: "flex-1 truncate" };
|
|
134
|
+
const _hoisted_4$b = ["id", "aria-label"];
|
|
135
|
+
const _hoisted_5$8 = {
|
|
136
136
|
key: 0,
|
|
137
137
|
class: "sticky top-0 border-b border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-gray-800"
|
|
138
138
|
};
|
|
139
|
-
const _hoisted_6$
|
|
140
|
-
const _hoisted_7$
|
|
139
|
+
const _hoisted_6$8 = { class: "flex items-center gap-2 rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 dark:border-gray-600 dark:bg-gray-900" };
|
|
140
|
+
const _hoisted_7$7 = {
|
|
141
141
|
key: 1,
|
|
142
142
|
class: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400",
|
|
143
143
|
role: "status"
|
|
144
144
|
};
|
|
145
|
-
const _hoisted_8$
|
|
146
|
-
const _hoisted_9$
|
|
147
|
-
const _hoisted_10$
|
|
145
|
+
const _hoisted_8$6 = { class: "py-1" };
|
|
146
|
+
const _hoisted_9$4 = ["aria-selected", "data-index", "onClick", "onMouseenter"];
|
|
147
|
+
const _hoisted_10$4 = {
|
|
148
148
|
key: 1,
|
|
149
149
|
class: "size-4 shrink-0",
|
|
150
150
|
"aria-hidden": "true"
|
|
151
151
|
};
|
|
152
|
-
const _hoisted_11$
|
|
153
|
-
const _sfc_main$
|
|
152
|
+
const _hoisted_11$4 = { class: "flex-1" };
|
|
153
|
+
const _sfc_main$o = /* @__PURE__ */ defineComponent({
|
|
154
154
|
__name: "FormSelect",
|
|
155
155
|
props: /* @__PURE__ */ mergeModels({
|
|
156
156
|
options: {},
|
|
@@ -270,7 +270,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
270
270
|
return [base, state, text, props.triggerClass];
|
|
271
271
|
});
|
|
272
272
|
return (_ctx, _cache) => {
|
|
273
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
273
|
+
return openBlock(), createElementBlock("div", _hoisted_1$o, [
|
|
274
274
|
createElementVNode("button", {
|
|
275
275
|
id: triggerId.value,
|
|
276
276
|
ref_key: "triggerRef",
|
|
@@ -290,14 +290,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
290
290
|
option: selectedOption.value,
|
|
291
291
|
placeholder: __props.placeholder
|
|
292
292
|
}, () => [
|
|
293
|
-
createElementVNode("span", _hoisted_3$
|
|
293
|
+
createElementVNode("span", _hoisted_3$f, toDisplayString(displayValue.value), 1)
|
|
294
294
|
]),
|
|
295
295
|
createVNode(unref(Icon), {
|
|
296
296
|
icon: "lucide:chevron-down",
|
|
297
297
|
class: normalizeClass(["size-4 shrink-0 text-gray-400 transition-transform", unref(isOpen) && "rotate-180"]),
|
|
298
298
|
"aria-hidden": "true"
|
|
299
299
|
}, null, 8, ["class"])
|
|
300
|
-
], 42, _hoisted_2$
|
|
300
|
+
], 42, _hoisted_2$i),
|
|
301
301
|
(openBlock(), createBlock(Teleport, {
|
|
302
302
|
to: "body",
|
|
303
303
|
disabled: !__props.teleport
|
|
@@ -324,8 +324,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
324
324
|
!__props.teleport && "absolute mt-1 w-full"
|
|
325
325
|
])
|
|
326
326
|
}, [
|
|
327
|
-
__props.searchable ? (openBlock(), createElementBlock("div", _hoisted_5$
|
|
328
|
-
createElementVNode("div", _hoisted_6$
|
|
327
|
+
__props.searchable ? (openBlock(), createElementBlock("div", _hoisted_5$8, [
|
|
328
|
+
createElementVNode("div", _hoisted_6$8, [
|
|
329
329
|
createVNode(unref(Icon), {
|
|
330
330
|
icon: "lucide:search",
|
|
331
331
|
class: "size-4 text-gray-400",
|
|
@@ -345,8 +345,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
345
345
|
])
|
|
346
346
|
])
|
|
347
347
|
])) : createCommentVNode("", true),
|
|
348
|
-
filteredOptions.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_7$
|
|
349
|
-
createElementVNode("div", _hoisted_8$
|
|
348
|
+
filteredOptions.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_7$7, toDisplayString(__props.noResultsText), 1)) : createCommentVNode("", true),
|
|
349
|
+
createElementVNode("div", _hoisted_8$6, [
|
|
350
350
|
(openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (option, index) => {
|
|
351
351
|
return openBlock(), createElementBlock("button", {
|
|
352
352
|
key: String(option.value),
|
|
@@ -373,13 +373,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
373
373
|
icon: "lucide:check",
|
|
374
374
|
class: "size-4 shrink-0 text-primary",
|
|
375
375
|
"aria-hidden": "true"
|
|
376
|
-
})) : (openBlock(), createElementBlock("span", _hoisted_10$
|
|
377
|
-
createElementVNode("span", _hoisted_11$
|
|
376
|
+
})) : (openBlock(), createElementBlock("span", _hoisted_10$4)),
|
|
377
|
+
createElementVNode("span", _hoisted_11$4, toDisplayString(option.label), 1)
|
|
378
378
|
])
|
|
379
|
-
], 42, _hoisted_9$
|
|
379
|
+
], 42, _hoisted_9$4);
|
|
380
380
|
}), 128))
|
|
381
381
|
])
|
|
382
|
-
], 14, _hoisted_4$
|
|
382
|
+
], 14, _hoisted_4$b)) : createCommentVNode("", true)
|
|
383
383
|
]),
|
|
384
384
|
_: 3
|
|
385
385
|
})
|
|
@@ -388,8 +388,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
388
388
|
};
|
|
389
389
|
}
|
|
390
390
|
});
|
|
391
|
-
const _hoisted_1$
|
|
392
|
-
const _sfc_main$
|
|
391
|
+
const _hoisted_1$n = ["hidden"];
|
|
392
|
+
const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
393
393
|
__name: "FormGroup",
|
|
394
394
|
props: /* @__PURE__ */ mergeModels({
|
|
395
395
|
label: {},
|
|
@@ -430,7 +430,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
430
430
|
}, [
|
|
431
431
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
432
432
|
renderSlot(_ctx.$slots, "label", {}, () => [
|
|
433
|
-
__props.label ? (openBlock(), createBlock(_sfc_main$
|
|
433
|
+
__props.label ? (openBlock(), createBlock(_sfc_main$r, {
|
|
434
434
|
key: 0,
|
|
435
435
|
"html-for": inputId.value,
|
|
436
436
|
error: __props.error
|
|
@@ -442,7 +442,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
442
442
|
}, 8, ["html-for", "error"])) : createCommentVNode("", true)
|
|
443
443
|
]),
|
|
444
444
|
renderSlot(_ctx.$slots, "input", {}, () => [
|
|
445
|
-
isSelect.value ? (openBlock(), createBlock(_sfc_main$
|
|
445
|
+
isSelect.value ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
|
|
446
446
|
key: 0,
|
|
447
447
|
modelValue: modelValue.value,
|
|
448
448
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
|
|
@@ -450,7 +450,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
450
450
|
id: inputId.value,
|
|
451
451
|
invalid: Boolean(__props.error),
|
|
452
452
|
"described-by": hasError.value ? helpId.value : void 0
|
|
453
|
-
}), null, 16, ["modelValue", "id", "invalid", "described-by"])) : (openBlock(), createBlock(_sfc_main$
|
|
453
|
+
}), null, 16, ["modelValue", "id", "invalid", "described-by"])) : (openBlock(), createBlock(_sfc_main$p, mergeProps({
|
|
454
454
|
key: 1,
|
|
455
455
|
modelValue: modelValue.value,
|
|
456
456
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event)
|
|
@@ -460,7 +460,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
460
460
|
"described-by": hasError.value ? helpId.value : void 0
|
|
461
461
|
}), null, 16, ["modelValue", "id", "invalid", "described-by"]))
|
|
462
462
|
]),
|
|
463
|
-
hasError.value ? (openBlock(), createBlock(_sfc_main$
|
|
463
|
+
hasError.value ? (openBlock(), createBlock(_sfc_main$q, {
|
|
464
464
|
key: 0,
|
|
465
465
|
id: helpId.value,
|
|
466
466
|
error: true
|
|
@@ -471,13 +471,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
471
471
|
_: 1
|
|
472
472
|
}, 8, ["id"])) : createCommentVNode("", true)
|
|
473
473
|
])
|
|
474
|
-
], 12, _hoisted_1$
|
|
474
|
+
], 12, _hoisted_1$n);
|
|
475
475
|
};
|
|
476
476
|
}
|
|
477
477
|
});
|
|
478
|
-
const _hoisted_1$
|
|
479
|
-
const _hoisted_2$
|
|
480
|
-
const _sfc_main$
|
|
478
|
+
const _hoisted_1$m = { class: "relative" };
|
|
479
|
+
const _hoisted_2$h = ["disabled", "placeholder", "value"];
|
|
480
|
+
const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|
481
481
|
__name: "SearchInput",
|
|
482
482
|
props: {
|
|
483
483
|
modelValue: {},
|
|
@@ -493,7 +493,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
493
493
|
emit("update:modelValue", target.value);
|
|
494
494
|
};
|
|
495
495
|
return (_ctx, _cache) => {
|
|
496
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
496
|
+
return openBlock(), createElementBlock("div", _hoisted_1$m, [
|
|
497
497
|
createVNode(unref(Icon), {
|
|
498
498
|
icon: __props.icon,
|
|
499
499
|
class: "absolute top-1/2 left-3 size-5 -translate-y-1/2 text-gray-400"
|
|
@@ -505,19 +505,19 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
505
505
|
class: "focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 bg-white py-2 pr-4 pl-10 text-gray-900 placeholder-gray-400 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500",
|
|
506
506
|
type: "text",
|
|
507
507
|
onInput: handleInput
|
|
508
|
-
}, null, 40, _hoisted_2$
|
|
508
|
+
}, null, 40, _hoisted_2$h)
|
|
509
509
|
]);
|
|
510
510
|
};
|
|
511
511
|
}
|
|
512
512
|
});
|
|
513
|
-
const _hoisted_1$
|
|
514
|
-
const _hoisted_2$
|
|
513
|
+
const _hoisted_1$l = ["id", "aria-checked", "aria-labelledby", "aria-describedby", "disabled"];
|
|
514
|
+
const _hoisted_2$g = {
|
|
515
515
|
key: 0,
|
|
516
516
|
class: "flex flex-col"
|
|
517
517
|
};
|
|
518
|
-
const _hoisted_3$
|
|
519
|
-
const _hoisted_4$
|
|
520
|
-
const _sfc_main$
|
|
518
|
+
const _hoisted_3$e = ["id"];
|
|
519
|
+
const _hoisted_4$a = ["id"];
|
|
520
|
+
const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|
521
521
|
__name: "Switch",
|
|
522
522
|
props: {
|
|
523
523
|
modelValue: { type: Boolean, default: false },
|
|
@@ -581,35 +581,35 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
|
581
581
|
]),
|
|
582
582
|
"aria-hidden": "true"
|
|
583
583
|
}, null, 2)
|
|
584
|
-
], 10, _hoisted_1$
|
|
585
|
-
__props.label || __props.description ? (openBlock(), createElementBlock("div", _hoisted_2$
|
|
584
|
+
], 10, _hoisted_1$l),
|
|
585
|
+
__props.label || __props.description ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
|
|
586
586
|
__props.label ? (openBlock(), createElementBlock("span", {
|
|
587
587
|
key: 0,
|
|
588
588
|
id: labelId.value,
|
|
589
589
|
class: "text-sm font-medium text-gray-900 dark:text-white"
|
|
590
|
-
}, toDisplayString(__props.label), 9, _hoisted_3$
|
|
590
|
+
}, toDisplayString(__props.label), 9, _hoisted_3$e)) : createCommentVNode("", true),
|
|
591
591
|
__props.description ? (openBlock(), createElementBlock("span", {
|
|
592
592
|
key: 1,
|
|
593
593
|
id: descriptionId.value,
|
|
594
594
|
class: "text-sm text-gray-500 dark:text-gray-400"
|
|
595
|
-
}, toDisplayString(__props.description), 9, _hoisted_4$
|
|
595
|
+
}, toDisplayString(__props.description), 9, _hoisted_4$a)) : createCommentVNode("", true)
|
|
596
596
|
])) : createCommentVNode("", true)
|
|
597
597
|
], 2);
|
|
598
598
|
};
|
|
599
599
|
}
|
|
600
600
|
});
|
|
601
|
-
const _hoisted_1$
|
|
602
|
-
const _hoisted_2$
|
|
601
|
+
const _hoisted_1$k = { class: "w-full" };
|
|
602
|
+
const _hoisted_2$f = {
|
|
603
603
|
key: 0,
|
|
604
604
|
class: "mb-2 flex justify-between text-sm"
|
|
605
605
|
};
|
|
606
|
-
const _hoisted_3$
|
|
607
|
-
const _hoisted_4$
|
|
608
|
-
const _hoisted_5$
|
|
609
|
-
const _hoisted_6$
|
|
610
|
-
const _hoisted_7$
|
|
611
|
-
const _hoisted_8$
|
|
612
|
-
const _sfc_main$
|
|
606
|
+
const _hoisted_3$d = { class: "text-gray-600 dark:text-gray-400" };
|
|
607
|
+
const _hoisted_4$9 = { class: "font-medium text-gray-900 dark:text-white" };
|
|
608
|
+
const _hoisted_5$7 = { class: "text-gray-600 dark:text-gray-400" };
|
|
609
|
+
const _hoisted_6$7 = { class: "relative" };
|
|
610
|
+
const _hoisted_7$6 = ["value", "min", "max", "step", "disabled"];
|
|
611
|
+
const _hoisted_8$5 = { class: "pointer-events-none absolute inset-y-0 left-0 flex items-center" };
|
|
612
|
+
const _sfc_main$k = /* @__PURE__ */ defineComponent({
|
|
613
613
|
__name: "Slider",
|
|
614
614
|
props: /* @__PURE__ */ mergeModels({
|
|
615
615
|
min: { default: 0 },
|
|
@@ -640,13 +640,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
640
640
|
modelValue.value = Number(target.value);
|
|
641
641
|
};
|
|
642
642
|
return (_ctx, _cache) => {
|
|
643
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
644
|
-
__props.showValue ? (openBlock(), createElementBlock("div", _hoisted_2$
|
|
645
|
-
createElementVNode("span", _hoisted_3$
|
|
646
|
-
createElementVNode("span", _hoisted_4$
|
|
647
|
-
createElementVNode("span", _hoisted_5$
|
|
643
|
+
return openBlock(), createElementBlock("div", _hoisted_1$k, [
|
|
644
|
+
__props.showValue ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
|
|
645
|
+
createElementVNode("span", _hoisted_3$d, toDisplayString(__props.min), 1),
|
|
646
|
+
createElementVNode("span", _hoisted_4$9, toDisplayString(displayValue.value), 1),
|
|
647
|
+
createElementVNode("span", _hoisted_5$7, toDisplayString(__props.max), 1)
|
|
648
648
|
])) : createCommentVNode("", true),
|
|
649
|
-
createElementVNode("div", _hoisted_6$
|
|
649
|
+
createElementVNode("div", _hoisted_6$7, [
|
|
650
650
|
createElementVNode("input", {
|
|
651
651
|
type: "range",
|
|
652
652
|
value: modelValue.value,
|
|
@@ -656,8 +656,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
656
656
|
disabled: __props.disabled,
|
|
657
657
|
class: "slider-input w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
|
|
658
658
|
onInput: handleInput
|
|
659
|
-
}, null, 40, _hoisted_7$
|
|
660
|
-
createElementVNode("div", _hoisted_8$
|
|
659
|
+
}, null, 40, _hoisted_7$6),
|
|
660
|
+
createElementVNode("div", _hoisted_8$5, [
|
|
661
661
|
createElementVNode("div", {
|
|
662
662
|
class: "h-2 rounded-full bg-primary",
|
|
663
663
|
style: normalizeStyle({ width: `${percentage.value}%` })
|
|
@@ -668,27 +668,27 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
668
668
|
};
|
|
669
669
|
}
|
|
670
670
|
});
|
|
671
|
-
const Slider = /* @__PURE__ */ _export_sfc(_sfc_main$
|
|
672
|
-
const _hoisted_1$
|
|
673
|
-
const _hoisted_2$
|
|
674
|
-
const _hoisted_3$
|
|
675
|
-
const _hoisted_4$
|
|
676
|
-
const _hoisted_5$
|
|
677
|
-
const _hoisted_6$
|
|
678
|
-
const _hoisted_7$
|
|
671
|
+
const Slider = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-c25e2c2a"]]);
|
|
672
|
+
const _hoisted_1$j = { class: "relative" };
|
|
673
|
+
const _hoisted_2$e = ["id", "disabled", "aria-expanded", "aria-controls"];
|
|
674
|
+
const _hoisted_3$c = { class: "flex-1 truncate" };
|
|
675
|
+
const _hoisted_4$8 = { class: "flex items-center gap-1" };
|
|
676
|
+
const _hoisted_5$6 = ["id", "aria-label"];
|
|
677
|
+
const _hoisted_6$6 = { class: "mb-4 flex items-center justify-between" };
|
|
678
|
+
const _hoisted_7$5 = {
|
|
679
679
|
class: "font-medium text-gray-900 dark:text-white",
|
|
680
680
|
"aria-live": "polite",
|
|
681
681
|
"aria-atomic": "true"
|
|
682
682
|
};
|
|
683
|
-
const _hoisted_8$
|
|
683
|
+
const _hoisted_8$4 = {
|
|
684
684
|
class: "mb-2 grid grid-cols-7 gap-1",
|
|
685
685
|
role: "row"
|
|
686
686
|
};
|
|
687
|
-
const _hoisted_9$
|
|
688
|
-
const _hoisted_10$
|
|
689
|
-
const _hoisted_11$
|
|
690
|
-
const _hoisted_12$
|
|
691
|
-
const _sfc_main$
|
|
687
|
+
const _hoisted_9$3 = ["abbr"];
|
|
688
|
+
const _hoisted_10$3 = ["id", "aria-label"];
|
|
689
|
+
const _hoisted_11$3 = ["aria-label", "aria-selected", "aria-disabled", "disabled", "onClick"];
|
|
690
|
+
const _hoisted_12$2 = { class: "mt-4 border-t border-gray-200 pt-3 dark:border-gray-700" };
|
|
691
|
+
const _sfc_main$j = /* @__PURE__ */ defineComponent({
|
|
692
692
|
__name: "DatePicker",
|
|
693
693
|
props: /* @__PURE__ */ mergeModels({
|
|
694
694
|
placeholder: { default: "Select date" },
|
|
@@ -812,7 +812,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
812
812
|
return formatter.format(date);
|
|
813
813
|
};
|
|
814
814
|
return (_ctx, _cache) => {
|
|
815
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
815
|
+
return openBlock(), createElementBlock("div", _hoisted_1$j, [
|
|
816
816
|
createElementVNode("button", {
|
|
817
817
|
id: triggerId.value,
|
|
818
818
|
ref_key: "triggerRef",
|
|
@@ -830,8 +830,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
830
830
|
onClick: _cache[0] || (_cache[0] = //@ts-ignore
|
|
831
831
|
(...args) => unref(toggle) && unref(toggle)(...args))
|
|
832
832
|
}, [
|
|
833
|
-
createElementVNode("span", _hoisted_3$
|
|
834
|
-
createElementVNode("div", _hoisted_4$
|
|
833
|
+
createElementVNode("span", _hoisted_3$c, toDisplayString(displayValue.value || __props.placeholder), 1),
|
|
834
|
+
createElementVNode("div", _hoisted_4$8, [
|
|
835
835
|
modelValue.value ? (openBlock(), createElementBlock("button", {
|
|
836
836
|
key: 0,
|
|
837
837
|
type: "button",
|
|
@@ -851,7 +851,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
851
851
|
"aria-hidden": "true"
|
|
852
852
|
})
|
|
853
853
|
])
|
|
854
|
-
], 10, _hoisted_2$
|
|
854
|
+
], 10, _hoisted_2$e),
|
|
855
855
|
(openBlock(), createBlock(Teleport, {
|
|
856
856
|
to: "body",
|
|
857
857
|
disabled: !__props.teleport
|
|
@@ -876,7 +876,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
876
876
|
style: normalizeStyle(unref(dropdownStyle)),
|
|
877
877
|
class: "z-9999 w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
|
|
878
878
|
}, [
|
|
879
|
-
createElementVNode("div", _hoisted_6$
|
|
879
|
+
createElementVNode("div", _hoisted_6$6, [
|
|
880
880
|
createElementVNode("button", {
|
|
881
881
|
type: "button",
|
|
882
882
|
class: "rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700",
|
|
@@ -889,7 +889,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
889
889
|
"aria-hidden": "true"
|
|
890
890
|
})
|
|
891
891
|
]),
|
|
892
|
-
createElementVNode("span", _hoisted_7$
|
|
892
|
+
createElementVNode("span", _hoisted_7$5, toDisplayString(monthYear.value), 1),
|
|
893
893
|
createElementVNode("button", {
|
|
894
894
|
type: "button",
|
|
895
895
|
class: "rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700",
|
|
@@ -903,14 +903,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
903
903
|
})
|
|
904
904
|
])
|
|
905
905
|
]),
|
|
906
|
-
createElementVNode("div", _hoisted_8$
|
|
906
|
+
createElementVNode("div", _hoisted_8$4, [
|
|
907
907
|
(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day) => {
|
|
908
908
|
return openBlock(), createElementBlock("div", {
|
|
909
909
|
key: day,
|
|
910
910
|
class: "text-center text-xs font-medium text-gray-500 dark:text-gray-400",
|
|
911
911
|
role: "columnheader",
|
|
912
912
|
abbr: day
|
|
913
|
-
}, toDisplayString(day), 9, _hoisted_9$
|
|
913
|
+
}, toDisplayString(day), 9, _hoisted_9$3);
|
|
914
914
|
}), 128))
|
|
915
915
|
]),
|
|
916
916
|
createElementVNode("div", {
|
|
@@ -937,17 +937,17 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
937
937
|
day.isSelected && "bg-primary text-white font-semibold"
|
|
938
938
|
]),
|
|
939
939
|
onClick: ($event) => selectDate(day)
|
|
940
|
-
}, toDisplayString(day.date.getDate()), 11, _hoisted_11$
|
|
940
|
+
}, toDisplayString(day.date.getDate()), 11, _hoisted_11$3);
|
|
941
941
|
}), 128))
|
|
942
|
-
], 8, _hoisted_10$
|
|
943
|
-
createElementVNode("div", _hoisted_12$
|
|
942
|
+
], 8, _hoisted_10$3),
|
|
943
|
+
createElementVNode("div", _hoisted_12$2, [
|
|
944
944
|
createElementVNode("button", {
|
|
945
945
|
type: "button",
|
|
946
946
|
class: "w-full rounded py-1.5 text-sm font-medium text-primary hover:bg-primary/10",
|
|
947
947
|
onClick: _cache[1] || (_cache[1] = ($event) => selectDate({ date: /* @__PURE__ */ new Date(), isDisabled: false }))
|
|
948
948
|
}, " Today ")
|
|
949
949
|
])
|
|
950
|
-
], 12, _hoisted_5$
|
|
950
|
+
], 12, _hoisted_5$6)) : createCommentVNode("", true)
|
|
951
951
|
]),
|
|
952
952
|
_: 1
|
|
953
953
|
})
|
|
@@ -956,27 +956,27 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
956
956
|
};
|
|
957
957
|
}
|
|
958
958
|
});
|
|
959
|
-
const _hoisted_1$
|
|
960
|
-
const _hoisted_2$
|
|
961
|
-
const _hoisted_3$
|
|
962
|
-
const _hoisted_4$
|
|
963
|
-
const _hoisted_5$
|
|
959
|
+
const _hoisted_1$i = { class: "space-y-4" };
|
|
960
|
+
const _hoisted_2$d = ["accept", "multiple", "disabled"];
|
|
961
|
+
const _hoisted_3$b = { class: "space-y-2" };
|
|
962
|
+
const _hoisted_4$7 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300" };
|
|
963
|
+
const _hoisted_5$5 = {
|
|
964
964
|
key: 0,
|
|
965
965
|
class: "text-xs text-gray-500 dark:text-gray-400"
|
|
966
966
|
};
|
|
967
|
-
const _hoisted_6$
|
|
967
|
+
const _hoisted_6$5 = {
|
|
968
968
|
key: 1,
|
|
969
969
|
class: "text-xs text-gray-500 dark:text-gray-400"
|
|
970
970
|
};
|
|
971
|
-
const _hoisted_7$
|
|
971
|
+
const _hoisted_7$4 = {
|
|
972
972
|
key: 0,
|
|
973
973
|
class: "space-y-2"
|
|
974
974
|
};
|
|
975
|
-
const _hoisted_8$
|
|
976
|
-
const _hoisted_9$
|
|
977
|
-
const _hoisted_10$
|
|
978
|
-
const _hoisted_11$
|
|
979
|
-
const _sfc_main$
|
|
975
|
+
const _hoisted_8$3 = { class: "flex-1 min-w-0" };
|
|
976
|
+
const _hoisted_9$2 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300 truncate" };
|
|
977
|
+
const _hoisted_10$2 = { class: "text-xs text-gray-500 dark:text-gray-400" };
|
|
978
|
+
const _hoisted_11$2 = ["onClick"];
|
|
979
|
+
const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|
980
980
|
__name: "FileUpload",
|
|
981
981
|
props: {
|
|
982
982
|
accept: {},
|
|
@@ -1104,7 +1104,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
1104
1104
|
return "heroicons:document";
|
|
1105
1105
|
};
|
|
1106
1106
|
return (_ctx, _cache) => {
|
|
1107
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
1107
|
+
return openBlock(), createElementBlock("div", _hoisted_1$i, [
|
|
1108
1108
|
createElementVNode("div", {
|
|
1109
1109
|
class: normalizeClass(dropzoneClasses.value),
|
|
1110
1110
|
onDrop: withModifiers(handleDrop, ["prevent"]),
|
|
@@ -1121,18 +1121,18 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
1121
1121
|
multiple: __props.multiple,
|
|
1122
1122
|
disabled: __props.disabled,
|
|
1123
1123
|
onChange: handleInputChange
|
|
1124
|
-
}, null, 40, _hoisted_2$
|
|
1125
|
-
createElementVNode("div", _hoisted_3$
|
|
1124
|
+
}, null, 40, _hoisted_2$d),
|
|
1125
|
+
createElementVNode("div", _hoisted_3$b, [
|
|
1126
1126
|
createVNode(unref(Icon), {
|
|
1127
1127
|
icon: "heroicons:cloud-arrow-up",
|
|
1128
1128
|
class: normalizeClass(["size-12 mx-auto text-gray-400", { "text-primary-500": isDragging.value }])
|
|
1129
1129
|
}, null, 8, ["class"]),
|
|
1130
|
-
createElementVNode("p", _hoisted_4$
|
|
1131
|
-
__props.description ? (openBlock(), createElementBlock("p", _hoisted_5$
|
|
1132
|
-
__props.maxSize ? (openBlock(), createElementBlock("p", _hoisted_6$
|
|
1130
|
+
createElementVNode("p", _hoisted_4$7, toDisplayString(__props.label), 1),
|
|
1131
|
+
__props.description ? (openBlock(), createElementBlock("p", _hoisted_5$5, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
|
|
1132
|
+
__props.maxSize ? (openBlock(), createElementBlock("p", _hoisted_6$5, " Max size: " + toDisplayString(formatSize(__props.maxSize)), 1)) : createCommentVNode("", true)
|
|
1133
1133
|
])
|
|
1134
1134
|
], 34),
|
|
1135
|
-
files.value.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_7$
|
|
1135
|
+
files.value.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_7$4, [
|
|
1136
1136
|
(openBlock(true), createElementBlock(Fragment, null, renderList(files.value, (uploadedFile) => {
|
|
1137
1137
|
return openBlock(), createElementBlock("li", {
|
|
1138
1138
|
key: uploadedFile.id,
|
|
@@ -1142,9 +1142,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
1142
1142
|
icon: getFileIcon(uploadedFile.file),
|
|
1143
1143
|
class: "size-8 text-gray-400"
|
|
1144
1144
|
}, null, 8, ["icon"]),
|
|
1145
|
-
createElementVNode("div", _hoisted_8$
|
|
1146
|
-
createElementVNode("p", _hoisted_9$
|
|
1147
|
-
createElementVNode("p", _hoisted_10$
|
|
1145
|
+
createElementVNode("div", _hoisted_8$3, [
|
|
1146
|
+
createElementVNode("p", _hoisted_9$2, toDisplayString(uploadedFile.file.name), 1),
|
|
1147
|
+
createElementVNode("p", _hoisted_10$2, toDisplayString(formatSize(uploadedFile.file.size)), 1)
|
|
1148
1148
|
]),
|
|
1149
1149
|
createElementVNode("button", {
|
|
1150
1150
|
type: "button",
|
|
@@ -1155,7 +1155,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
1155
1155
|
icon: "heroicons:x-mark",
|
|
1156
1156
|
class: "size-5"
|
|
1157
1157
|
})
|
|
1158
|
-
], 8, _hoisted_11$
|
|
1158
|
+
], 8, _hoisted_11$2)
|
|
1159
1159
|
]);
|
|
1160
1160
|
}), 128))
|
|
1161
1161
|
])) : createCommentVNode("", true)
|
|
@@ -1163,13 +1163,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
1163
1163
|
};
|
|
1164
1164
|
}
|
|
1165
1165
|
});
|
|
1166
|
-
const _hoisted_1$
|
|
1167
|
-
const _hoisted_2$
|
|
1168
|
-
const _hoisted_3$
|
|
1166
|
+
const _hoisted_1$h = { class: "flex items-center gap-1" };
|
|
1167
|
+
const _hoisted_2$c = ["disabled", "onClick", "onMousemove"];
|
|
1168
|
+
const _hoisted_3$a = {
|
|
1169
1169
|
key: 0,
|
|
1170
1170
|
class: "ml-2 text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
1171
1171
|
};
|
|
1172
|
-
const _sfc_main$
|
|
1172
|
+
const _sfc_main$h = /* @__PURE__ */ defineComponent({
|
|
1173
1173
|
__name: "Rating",
|
|
1174
1174
|
props: {
|
|
1175
1175
|
modelValue: { default: 0 },
|
|
@@ -1232,7 +1232,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
1232
1232
|
hoverValue.value = null;
|
|
1233
1233
|
};
|
|
1234
1234
|
return (_ctx, _cache) => {
|
|
1235
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
1235
|
+
return openBlock(), createElementBlock("div", _hoisted_1$h, [
|
|
1236
1236
|
createElementVNode("div", {
|
|
1237
1237
|
class: "flex items-center",
|
|
1238
1238
|
onMouseleave: handleMouseLeave
|
|
@@ -1264,29 +1264,29 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
1264
1264
|
class: normalizeClass([sizeClasses.value, __props.color])
|
|
1265
1265
|
}, null, 8, ["icon", "class"])
|
|
1266
1266
|
], 4)
|
|
1267
|
-
], 42, _hoisted_2$
|
|
1267
|
+
], 42, _hoisted_2$c);
|
|
1268
1268
|
}), 128))
|
|
1269
1269
|
], 32),
|
|
1270
|
-
__props.showValue ? (openBlock(), createElementBlock("span", _hoisted_3$
|
|
1270
|
+
__props.showValue ? (openBlock(), createElementBlock("span", _hoisted_3$a, toDisplayString(__props.modelValue.toFixed(__props.allowHalf ? 1 : 0)), 1)) : createCommentVNode("", true)
|
|
1271
1271
|
]);
|
|
1272
1272
|
};
|
|
1273
1273
|
}
|
|
1274
1274
|
});
|
|
1275
|
-
const _hoisted_1$
|
|
1276
|
-
const _hoisted_2$
|
|
1275
|
+
const _hoisted_1$g = { class: "relative inline-block" };
|
|
1276
|
+
const _hoisted_2$b = {
|
|
1277
1277
|
key: 0,
|
|
1278
1278
|
class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
|
|
1279
1279
|
};
|
|
1280
|
-
const _hoisted_3$
|
|
1281
|
-
const _hoisted_4$
|
|
1282
|
-
const _hoisted_5$
|
|
1283
|
-
const _hoisted_6$
|
|
1284
|
-
const _hoisted_7$
|
|
1280
|
+
const _hoisted_3$9 = ["disabled"];
|
|
1281
|
+
const _hoisted_4$6 = { class: "text-sm font-mono text-gray-700 dark:text-gray-300" };
|
|
1282
|
+
const _hoisted_5$4 = { class: "grid grid-cols-5 gap-2 mb-3" };
|
|
1283
|
+
const _hoisted_6$4 = ["title", "onClick"];
|
|
1284
|
+
const _hoisted_7$3 = {
|
|
1285
1285
|
key: 0,
|
|
1286
1286
|
class: "flex items-center gap-2 pt-3 border-t border-gray-200 dark:border-gray-700"
|
|
1287
1287
|
};
|
|
1288
|
-
const _hoisted_8$
|
|
1289
|
-
const _sfc_main$
|
|
1288
|
+
const _hoisted_8$2 = ["value"];
|
|
1289
|
+
const _sfc_main$g = /* @__PURE__ */ defineComponent({
|
|
1290
1290
|
__name: "ColorPicker",
|
|
1291
1291
|
props: {
|
|
1292
1292
|
modelValue: { default: "#3b82f6" },
|
|
@@ -1355,8 +1355,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
1355
1355
|
isOpen.value = false;
|
|
1356
1356
|
};
|
|
1357
1357
|
return (_ctx, _cache) => {
|
|
1358
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
1359
|
-
__props.label ? (openBlock(), createElementBlock("label", _hoisted_2$
|
|
1358
|
+
return openBlock(), createElementBlock("div", _hoisted_1$g, [
|
|
1359
|
+
__props.label ? (openBlock(), createElementBlock("label", _hoisted_2$b, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
|
|
1360
1360
|
createElementVNode("button", {
|
|
1361
1361
|
type: "button",
|
|
1362
1362
|
class: normalizeClass(["flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors", { "opacity-50 cursor-not-allowed": __props.disabled }]),
|
|
@@ -1367,12 +1367,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
1367
1367
|
class: "size-6 rounded border border-gray-200 dark:border-gray-600",
|
|
1368
1368
|
style: normalizeStyle({ backgroundColor: __props.modelValue })
|
|
1369
1369
|
}, null, 4),
|
|
1370
|
-
createElementVNode("span", _hoisted_4$
|
|
1370
|
+
createElementVNode("span", _hoisted_4$6, toDisplayString(__props.modelValue), 1),
|
|
1371
1371
|
createVNode(unref(Icon), {
|
|
1372
1372
|
icon: "heroicons:chevron-down",
|
|
1373
1373
|
class: normalizeClass(["size-4 text-gray-400", { "rotate-180": isOpen.value }])
|
|
1374
1374
|
}, null, 8, ["class"])
|
|
1375
|
-
], 10, _hoisted_3$
|
|
1375
|
+
], 10, _hoisted_3$9),
|
|
1376
1376
|
(openBlock(), createBlock(Teleport, {
|
|
1377
1377
|
to: teleportTarget.value,
|
|
1378
1378
|
disabled: teleportDisabled.value
|
|
@@ -1392,7 +1392,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
1392
1392
|
onClick: _cache[1] || (_cache[1] = withModifiers(() => {
|
|
1393
1393
|
}, ["stop"]))
|
|
1394
1394
|
}, [
|
|
1395
|
-
createElementVNode("div", _hoisted_5$
|
|
1395
|
+
createElementVNode("div", _hoisted_5$4, [
|
|
1396
1396
|
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.swatches, (color) => {
|
|
1397
1397
|
return openBlock(), createElementBlock("button", {
|
|
1398
1398
|
key: color,
|
|
@@ -1411,16 +1411,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
1411
1411
|
["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#eab308", "#f59e0b"].includes(color) ? "text-gray-800" : "text-white"
|
|
1412
1412
|
]])
|
|
1413
1413
|
}, null, 8, ["class"])) : createCommentVNode("", true)
|
|
1414
|
-
], 14, _hoisted_6$
|
|
1414
|
+
], 14, _hoisted_6$4);
|
|
1415
1415
|
}), 128))
|
|
1416
1416
|
]),
|
|
1417
|
-
__props.showInput ? (openBlock(), createElementBlock("div", _hoisted_7$
|
|
1417
|
+
__props.showInput ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
|
|
1418
1418
|
createElementVNode("input", {
|
|
1419
1419
|
type: "color",
|
|
1420
1420
|
value: __props.modelValue,
|
|
1421
1421
|
class: "size-8 rounded cursor-pointer border-0 p-0",
|
|
1422
1422
|
onInput: handleNativeInput
|
|
1423
|
-
}, null, 40, _hoisted_8$
|
|
1423
|
+
}, null, 40, _hoisted_8$2),
|
|
1424
1424
|
withDirectives(createElementVNode("input", {
|
|
1425
1425
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
|
|
1426
1426
|
type: "text",
|
|
@@ -1446,16 +1446,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
1446
1446
|
};
|
|
1447
1447
|
}
|
|
1448
1448
|
});
|
|
1449
|
-
const _hoisted_1$
|
|
1450
|
-
const _hoisted_2$
|
|
1449
|
+
const _hoisted_1$f = { class: "space-y-2" };
|
|
1450
|
+
const _hoisted_2$a = {
|
|
1451
1451
|
key: 0,
|
|
1452
1452
|
class: "flex justify-between text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
1453
1453
|
};
|
|
1454
|
-
const _hoisted_3$
|
|
1454
|
+
const _hoisted_3$8 = {
|
|
1455
1455
|
key: 1,
|
|
1456
1456
|
class: "flex justify-between text-xs text-gray-500 dark:text-gray-400"
|
|
1457
1457
|
};
|
|
1458
|
-
const _sfc_main$
|
|
1458
|
+
const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
1459
1459
|
__name: "RangeSlider",
|
|
1460
1460
|
props: {
|
|
1461
1461
|
modelValue: { default: () => [25, 75] },
|
|
@@ -1533,8 +1533,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
1533
1533
|
}
|
|
1534
1534
|
};
|
|
1535
1535
|
return (_ctx, _cache) => {
|
|
1536
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
1537
|
-
__props.showLabels ? (openBlock(), createElementBlock("div", _hoisted_2$
|
|
1536
|
+
return openBlock(), createElementBlock("div", _hoisted_1$f, [
|
|
1537
|
+
__props.showLabels ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
|
|
1538
1538
|
createElementVNode("span", null, toDisplayString(__props.formatLabel(minValue.value)), 1),
|
|
1539
1539
|
createElementVNode("span", null, toDisplayString(__props.formatLabel(maxValue.value)), 1)
|
|
1540
1540
|
])) : createCommentVNode("", true),
|
|
@@ -1567,7 +1567,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
1567
1567
|
onMousedown: _cache[1] || (_cache[1] = ($event) => handleMouseDown("max"))
|
|
1568
1568
|
}, null, 38)
|
|
1569
1569
|
], 2),
|
|
1570
|
-
__props.showMinMax ? (openBlock(), createElementBlock("div", _hoisted_3$
|
|
1570
|
+
__props.showMinMax ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
|
|
1571
1571
|
createElementVNode("span", null, toDisplayString(__props.formatLabel(__props.min)), 1),
|
|
1572
1572
|
createElementVNode("span", null, toDisplayString(__props.formatLabel(__props.max)), 1)
|
|
1573
1573
|
])) : createCommentVNode("", true)
|
|
@@ -1575,18 +1575,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
1575
1575
|
};
|
|
1576
1576
|
}
|
|
1577
1577
|
});
|
|
1578
|
-
const _hoisted_1$
|
|
1579
|
-
const _hoisted_2$
|
|
1580
|
-
const _hoisted_3$
|
|
1581
|
-
const _hoisted_4$
|
|
1582
|
-
const _hoisted_5$
|
|
1583
|
-
const _hoisted_6$
|
|
1584
|
-
const _hoisted_7$
|
|
1578
|
+
const _hoisted_1$e = ["aria-expanded", "aria-controls"];
|
|
1579
|
+
const _hoisted_2$9 = ["id", "name", "placeholder", "disabled", "aria-controls"];
|
|
1580
|
+
const _hoisted_3$7 = { class: "flex items-center gap-1" };
|
|
1581
|
+
const _hoisted_4$5 = ["id", "aria-label", "aria-multiselectable"];
|
|
1582
|
+
const _hoisted_5$3 = ["aria-selected", "aria-disabled", "disabled", "onClick"];
|
|
1583
|
+
const _hoisted_6$3 = { class: "flex-1" };
|
|
1584
|
+
const _hoisted_7$2 = {
|
|
1585
1585
|
key: 1,
|
|
1586
1586
|
class: "px-3 py-2 text-center text-sm text-gray-500 dark:text-gray-400",
|
|
1587
1587
|
role: "status"
|
|
1588
1588
|
};
|
|
1589
|
-
const _sfc_main$
|
|
1589
|
+
const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
1590
1590
|
__name: "Combobox",
|
|
1591
1591
|
props: {
|
|
1592
1592
|
modelValue: {},
|
|
@@ -1717,10 +1717,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1717
1717
|
class: "flex-1 border-none bg-transparent text-sm text-gray-900 outline-hidden placeholder:text-gray-400 dark:text-gray-100 dark:placeholder:text-gray-500",
|
|
1718
1718
|
onClick: _cache[1] || (_cache[1] = withModifiers(() => {
|
|
1719
1719
|
}, ["stop"]))
|
|
1720
|
-
}, null, 8, _hoisted_2$
|
|
1720
|
+
}, null, 8, _hoisted_2$9)), [
|
|
1721
1721
|
[vModelText, search.value]
|
|
1722
1722
|
]),
|
|
1723
|
-
createElementVNode("div", _hoisted_3$
|
|
1723
|
+
createElementVNode("div", _hoisted_3$7, [
|
|
1724
1724
|
__props.clearable && selectedOptions.value.length > 0 && !__props.disabled ? (openBlock(), createElementBlock("button", {
|
|
1725
1725
|
key: 0,
|
|
1726
1726
|
type: "button",
|
|
@@ -1743,7 +1743,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1743
1743
|
"aria-hidden": "true"
|
|
1744
1744
|
}, null, 8, ["class"])
|
|
1745
1745
|
])
|
|
1746
|
-
], 10, _hoisted_1$
|
|
1746
|
+
], 10, _hoisted_1$e),
|
|
1747
1747
|
(openBlock(), createBlock(Teleport, {
|
|
1748
1748
|
to: teleportTarget.value,
|
|
1749
1749
|
disabled: teleportDisabled.value
|
|
@@ -1793,16 +1793,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1793
1793
|
class: "size-3"
|
|
1794
1794
|
})) : createCommentVNode("", true)
|
|
1795
1795
|
], 2)) : createCommentVNode("", true),
|
|
1796
|
-
createElementVNode("span", _hoisted_6$
|
|
1796
|
+
createElementVNode("span", _hoisted_6$3, toDisplayString(option.label), 1),
|
|
1797
1797
|
!__props.multiple && isSelected(option) ? (openBlock(), createBlock(unref(Icon), {
|
|
1798
1798
|
key: 1,
|
|
1799
1799
|
icon: "lucide:check",
|
|
1800
1800
|
class: "size-4 text-primary",
|
|
1801
1801
|
"aria-hidden": "true"
|
|
1802
1802
|
})) : createCommentVNode("", true)
|
|
1803
|
-
], 10, _hoisted_5$
|
|
1804
|
-
}), 128)) : (openBlock(), createElementBlock("div", _hoisted_7$
|
|
1805
|
-
], 8, _hoisted_4$
|
|
1803
|
+
], 10, _hoisted_5$3);
|
|
1804
|
+
}), 128)) : (openBlock(), createElementBlock("div", _hoisted_7$2, toDisplayString(__props.noResultsText), 1))
|
|
1805
|
+
], 8, _hoisted_4$5)) : createCommentVNode("", true)
|
|
1806
1806
|
]),
|
|
1807
1807
|
_: 1
|
|
1808
1808
|
})
|
|
@@ -1811,30 +1811,30 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1811
1811
|
};
|
|
1812
1812
|
}
|
|
1813
1813
|
});
|
|
1814
|
-
const _hoisted_1$
|
|
1815
|
-
const _hoisted_2$
|
|
1814
|
+
const _hoisted_1$d = { class: "relative" };
|
|
1815
|
+
const _hoisted_2$8 = {
|
|
1816
1816
|
key: 0,
|
|
1817
1817
|
class: "text-red-500 ml-0.5"
|
|
1818
1818
|
};
|
|
1819
|
-
const _hoisted_3$
|
|
1820
|
-
const _hoisted_4$
|
|
1819
|
+
const _hoisted_3$6 = ["id", "disabled", "aria-invalid", "aria-describedby"];
|
|
1820
|
+
const _hoisted_4$4 = {
|
|
1821
1821
|
key: 0,
|
|
1822
1822
|
class: "flex items-center gap-2 flex-1"
|
|
1823
1823
|
};
|
|
1824
|
-
const _hoisted_5$
|
|
1825
|
-
const _hoisted_6$
|
|
1826
|
-
const _hoisted_7 = {
|
|
1824
|
+
const _hoisted_5$2 = { class: "flex size-8 items-center justify-center rounded bg-gray-100 dark:bg-gray-800" };
|
|
1825
|
+
const _hoisted_6$2 = { class: "text-gray-700 dark:text-gray-300 font-mono text-xs truncate" };
|
|
1826
|
+
const _hoisted_7$1 = {
|
|
1827
1827
|
key: 1,
|
|
1828
1828
|
class: "flex-1 text-gray-400 dark:text-gray-500"
|
|
1829
1829
|
};
|
|
1830
|
-
const _hoisted_8 = { class: "relative mb-4" };
|
|
1831
|
-
const _hoisted_9 = ["placeholder"];
|
|
1832
|
-
const _hoisted_10 = {
|
|
1830
|
+
const _hoisted_8$1 = { class: "relative mb-4" };
|
|
1831
|
+
const _hoisted_9$1 = ["placeholder"];
|
|
1832
|
+
const _hoisted_10$1 = {
|
|
1833
1833
|
key: 0,
|
|
1834
1834
|
class: "absolute right-3 top-1/2 -translate-y-1/2"
|
|
1835
1835
|
};
|
|
1836
|
-
const _hoisted_11 = { class: "max-h-64 overflow-y-auto" };
|
|
1837
|
-
const _hoisted_12 = {
|
|
1836
|
+
const _hoisted_11$1 = { class: "max-h-64 overflow-y-auto" };
|
|
1837
|
+
const _hoisted_12$1 = {
|
|
1838
1838
|
key: 0,
|
|
1839
1839
|
class: "py-8 text-center text-sm text-gray-500"
|
|
1840
1840
|
};
|
|
@@ -1845,7 +1845,7 @@ const _hoisted_13 = {
|
|
|
1845
1845
|
const _hoisted_14 = ["title", "onClick"];
|
|
1846
1846
|
const _hoisted_15 = { class: "mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-700" };
|
|
1847
1847
|
const _hoisted_16 = { class: "text-xs text-gray-500" };
|
|
1848
|
-
const _sfc_main$
|
|
1848
|
+
const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
1849
1849
|
__name: "IconPicker",
|
|
1850
1850
|
props: /* @__PURE__ */ mergeModels({
|
|
1851
1851
|
label: {},
|
|
@@ -1969,15 +1969,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
1969
1969
|
searchQuery.value = "";
|
|
1970
1970
|
}
|
|
1971
1971
|
return (_ctx, _cache) => {
|
|
1972
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
1973
|
-
__props.label ? (openBlock(), createBlock(_sfc_main$
|
|
1972
|
+
return openBlock(), createElementBlock("div", _hoisted_1$d, [
|
|
1973
|
+
__props.label ? (openBlock(), createBlock(_sfc_main$r, {
|
|
1974
1974
|
key: 0,
|
|
1975
1975
|
"html-for": inputId.value,
|
|
1976
1976
|
error: __props.error
|
|
1977
1977
|
}, {
|
|
1978
1978
|
default: withCtx(() => [
|
|
1979
1979
|
createTextVNode(toDisplayString(__props.label) + " ", 1),
|
|
1980
|
-
__props.required ? (openBlock(), createElementBlock("span", _hoisted_2$
|
|
1980
|
+
__props.required ? (openBlock(), createElementBlock("span", _hoisted_2$8, "*")) : createCommentVNode("", true)
|
|
1981
1981
|
]),
|
|
1982
1982
|
_: 1
|
|
1983
1983
|
}, 8, ["html-for", "error"])) : createCommentVNode("", true),
|
|
@@ -1993,15 +1993,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
1993
1993
|
]]),
|
|
1994
1994
|
onClick: openPicker
|
|
1995
1995
|
}, [
|
|
1996
|
-
modelValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$
|
|
1997
|
-
createElementVNode("div", _hoisted_5$
|
|
1996
|
+
modelValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
|
|
1997
|
+
createElementVNode("div", _hoisted_5$2, [
|
|
1998
1998
|
createVNode(unref(Icon), {
|
|
1999
1999
|
icon: modelValue.value,
|
|
2000
2000
|
class: "size-5 text-gray-700 dark:text-gray-300"
|
|
2001
2001
|
}, null, 8, ["icon"])
|
|
2002
2002
|
]),
|
|
2003
|
-
createElementVNode("span", _hoisted_6$
|
|
2004
|
-
])) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(__props.placeholder), 1)),
|
|
2003
|
+
createElementVNode("span", _hoisted_6$2, toDisplayString(modelValue.value), 1)
|
|
2004
|
+
])) : (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(__props.placeholder), 1)),
|
|
2005
2005
|
modelValue.value && !__props.disabled ? (openBlock(), createElementBlock("button", {
|
|
2006
2006
|
key: 2,
|
|
2007
2007
|
type: "button",
|
|
@@ -2017,8 +2017,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
2017
2017
|
icon: "lucide:chevron-down",
|
|
2018
2018
|
class: "size-4 text-gray-400"
|
|
2019
2019
|
})
|
|
2020
|
-
], 10, _hoisted_3$
|
|
2021
|
-
__props.help && !hasError.value ? (openBlock(), createBlock(_sfc_main$
|
|
2020
|
+
], 10, _hoisted_3$6),
|
|
2021
|
+
__props.help && !hasError.value ? (openBlock(), createBlock(_sfc_main$q, {
|
|
2022
2022
|
key: 1,
|
|
2023
2023
|
id: helpId.value
|
|
2024
2024
|
}, {
|
|
@@ -2027,7 +2027,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
2027
2027
|
]),
|
|
2028
2028
|
_: 1
|
|
2029
2029
|
}, 8, ["id"])) : createCommentVNode("", true),
|
|
2030
|
-
hasError.value ? (openBlock(), createBlock(_sfc_main$
|
|
2030
|
+
hasError.value ? (openBlock(), createBlock(_sfc_main$q, {
|
|
2031
2031
|
key: 2,
|
|
2032
2032
|
id: helpId.value,
|
|
2033
2033
|
error: true
|
|
@@ -2048,7 +2048,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
2048
2048
|
onClick: _cache[1] || (_cache[1] = withModifiers(() => {
|
|
2049
2049
|
}, ["stop"]))
|
|
2050
2050
|
}, [
|
|
2051
|
-
createElementVNode("div", _hoisted_8, [
|
|
2051
|
+
createElementVNode("div", _hoisted_8$1, [
|
|
2052
2052
|
createVNode(unref(Icon), {
|
|
2053
2053
|
icon: "lucide:search",
|
|
2054
2054
|
class: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400"
|
|
@@ -2059,18 +2059,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
2059
2059
|
placeholder: __props.placeholder,
|
|
2060
2060
|
class: "w-full rounded-md border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm text-gray-800 placeholder-gray-400 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500",
|
|
2061
2061
|
autofocus: ""
|
|
2062
|
-
}, null, 8, _hoisted_9), [
|
|
2062
|
+
}, null, 8, _hoisted_9$1), [
|
|
2063
2063
|
[vModelText, searchQuery.value]
|
|
2064
2064
|
]),
|
|
2065
|
-
isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
|
|
2065
|
+
isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
|
|
2066
2066
|
createVNode(unref(Icon), {
|
|
2067
2067
|
icon: "lucide:loader-2",
|
|
2068
2068
|
class: "size-4 animate-spin text-gray-400"
|
|
2069
2069
|
})
|
|
2070
2070
|
])) : createCommentVNode("", true)
|
|
2071
2071
|
]),
|
|
2072
|
-
createElementVNode("div", _hoisted_11, [
|
|
2073
|
-
displayedIcons.value.length === 0 && searchQuery.value ? (openBlock(), createElementBlock("div", _hoisted_12, ' Aucune icône trouvée pour "' + toDisplayString(searchQuery.value) + '" ', 1)) : (openBlock(), createElementBlock("div", _hoisted_13, [
|
|
2072
|
+
createElementVNode("div", _hoisted_11$1, [
|
|
2073
|
+
displayedIcons.value.length === 0 && searchQuery.value ? (openBlock(), createElementBlock("div", _hoisted_12$1, ' Aucune icône trouvée pour "' + toDisplayString(searchQuery.value) + '" ', 1)) : (openBlock(), createElementBlock("div", _hoisted_13, [
|
|
2074
2074
|
(openBlock(true), createElementBlock(Fragment, null, renderList(displayedIcons.value, (icon) => {
|
|
2075
2075
|
return openBlock(), createElementBlock("button", {
|
|
2076
2076
|
key: icon,
|
|
@@ -2104,19 +2104,19 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
2104
2104
|
};
|
|
2105
2105
|
}
|
|
2106
2106
|
});
|
|
2107
|
-
const _hoisted_1$
|
|
2108
|
-
const _hoisted_2 = { class: "flex items-center gap-3" };
|
|
2109
|
-
const _hoisted_3 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
|
|
2110
|
-
const _hoisted_4 = {
|
|
2107
|
+
const _hoisted_1$c = { class: "flex items-center justify-between" };
|
|
2108
|
+
const _hoisted_2$7 = { class: "flex items-center gap-3" };
|
|
2109
|
+
const _hoisted_3$5 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
|
|
2110
|
+
const _hoisted_4$3 = {
|
|
2111
2111
|
key: 0,
|
|
2112
2112
|
class: "text-sm text-gray-500 dark:text-gray-400"
|
|
2113
2113
|
};
|
|
2114
|
-
const _hoisted_5 = { class: "p-5 sm:p-6" };
|
|
2115
|
-
const _hoisted_6 = {
|
|
2114
|
+
const _hoisted_5$1 = { class: "p-5 sm:p-6" };
|
|
2115
|
+
const _hoisted_6$1 = {
|
|
2116
2116
|
key: 0,
|
|
2117
2117
|
class: "px-5 py-4 bg-gray-50 dark:bg-slate-800/50 border-t border-gray-100 dark:border-slate-700"
|
|
2118
2118
|
};
|
|
2119
|
-
const _sfc_main$
|
|
2119
|
+
const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
2120
2120
|
__name: "FormSection",
|
|
2121
2121
|
props: /* @__PURE__ */ mergeModels({
|
|
2122
2122
|
title: {},
|
|
@@ -2150,8 +2150,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
2150
2150
|
]),
|
|
2151
2151
|
onClick: _cache[0] || (_cache[0] = ($event) => __props.collapsible && toggleCollapse())
|
|
2152
2152
|
}, [
|
|
2153
|
-
createElementVNode("div", _hoisted_1$
|
|
2154
|
-
createElementVNode("div", _hoisted_2, [
|
|
2153
|
+
createElementVNode("div", _hoisted_1$c, [
|
|
2154
|
+
createElementVNode("div", _hoisted_2$7, [
|
|
2155
2155
|
__props.icon ? (openBlock(), createElementBlock("div", {
|
|
2156
2156
|
key: 0,
|
|
2157
2157
|
class: normalizeClass([
|
|
@@ -2176,12 +2176,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
2176
2176
|
}, null, 8, ["icon", "class"])
|
|
2177
2177
|
], 2)) : createCommentVNode("", true),
|
|
2178
2178
|
createElementVNode("div", null, [
|
|
2179
|
-
createElementVNode("h2", _hoisted_3, [
|
|
2179
|
+
createElementVNode("h2", _hoisted_3$5, [
|
|
2180
2180
|
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
2181
2181
|
createTextVNode(toDisplayString(__props.title), 1)
|
|
2182
2182
|
])
|
|
2183
2183
|
]),
|
|
2184
|
-
__props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_4, [
|
|
2184
|
+
__props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_4$3, [
|
|
2185
2185
|
renderSlot(_ctx.$slots, "subtitle", {}, () => [
|
|
2186
2186
|
createTextVNode(toDisplayString(__props.subtitle), 1)
|
|
2187
2187
|
])
|
|
@@ -2205,12 +2205,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
2205
2205
|
renderSlot(_ctx.$slots, "header-actions")
|
|
2206
2206
|
])
|
|
2207
2207
|
], 2),
|
|
2208
|
-
withDirectives(createElementVNode("div", _hoisted_5, [
|
|
2208
|
+
withDirectives(createElementVNode("div", _hoisted_5$1, [
|
|
2209
2209
|
renderSlot(_ctx.$slots, "default")
|
|
2210
2210
|
], 512), [
|
|
2211
2211
|
[vShow, !isCollapsed.value]
|
|
2212
2212
|
]),
|
|
2213
|
-
_ctx.$slots.footer ? withDirectives((openBlock(), createElementBlock("div", _hoisted_6, [
|
|
2213
|
+
_ctx.$slots.footer ? withDirectives((openBlock(), createElementBlock("div", _hoisted_6$1, [
|
|
2214
2214
|
renderSlot(_ctx.$slots, "footer")
|
|
2215
2215
|
], 512)), [
|
|
2216
2216
|
[vShow, !isCollapsed.value]
|
|
@@ -2219,8 +2219,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
2219
2219
|
};
|
|
2220
2220
|
}
|
|
2221
2221
|
});
|
|
2222
|
-
const _hoisted_1 = { key: 1 };
|
|
2223
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
2222
|
+
const _hoisted_1$b = { key: 1 };
|
|
2223
|
+
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
2224
2224
|
__name: "FormActions",
|
|
2225
2225
|
props: {
|
|
2226
2226
|
submitLabel: { default: "Enregistrer" },
|
|
@@ -2249,7 +2249,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2249
2249
|
__props.stackOnMobile && "flex-col sm:flex-row"
|
|
2250
2250
|
])
|
|
2251
2251
|
}, [
|
|
2252
|
-
__props.showCancel ? (openBlock(), createBlock(_sfc_main$
|
|
2252
|
+
__props.showCancel ? (openBlock(), createBlock(_sfc_main$s, {
|
|
2253
2253
|
key: 0,
|
|
2254
2254
|
type: "button",
|
|
2255
2255
|
variant: "outline",
|
|
@@ -2269,7 +2269,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2269
2269
|
]),
|
|
2270
2270
|
_: 1
|
|
2271
2271
|
}, 8, ["disabled", "class"])) : createCommentVNode("", true),
|
|
2272
|
-
createVNode(_sfc_main$
|
|
2272
|
+
createVNode(_sfc_main$s, {
|
|
2273
2273
|
type: "submit",
|
|
2274
2274
|
variant: __props.submitVariant,
|
|
2275
2275
|
disabled: __props.disabled || __props.loading,
|
|
@@ -2287,7 +2287,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2287
2287
|
class: "w-5 h-5"
|
|
2288
2288
|
}, null, 8, ["icon"])) : createCommentVNode("", true),
|
|
2289
2289
|
createTextVNode(" " + toDisplayString(__props.submitLabel), 1)
|
|
2290
|
-
], 64)) : (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.loadingLabel || __props.submitLabel + "..."), 1))
|
|
2290
|
+
], 64)) : (openBlock(), createElementBlock("span", _hoisted_1$b, toDisplayString(__props.loadingLabel || __props.submitLabel + "..."), 1))
|
|
2291
2291
|
]),
|
|
2292
2292
|
_: 1
|
|
2293
2293
|
}, 8, ["variant", "disabled", "loading", "class"]),
|
|
@@ -2296,23 +2296,1313 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2296
2296
|
};
|
|
2297
2297
|
}
|
|
2298
2298
|
});
|
|
2299
|
+
const _hoisted_1$a = {
|
|
2300
|
+
key: 0,
|
|
2301
|
+
class: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400"
|
|
2302
|
+
};
|
|
2303
|
+
const _hoisted_2$6 = {
|
|
2304
|
+
key: 1,
|
|
2305
|
+
class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1"
|
|
2306
|
+
};
|
|
2307
|
+
const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
2308
|
+
__name: "InputWrapper",
|
|
2309
|
+
props: {
|
|
2310
|
+
icon: {},
|
|
2311
|
+
iconRight: {},
|
|
2312
|
+
size: { default: "md" },
|
|
2313
|
+
invalid: { type: Boolean },
|
|
2314
|
+
disabled: { type: Boolean },
|
|
2315
|
+
wrapperClass: {}
|
|
2316
|
+
},
|
|
2317
|
+
setup(__props, { expose: __expose }) {
|
|
2318
|
+
const props = __props;
|
|
2319
|
+
const slots = useSlots();
|
|
2320
|
+
const hasLeftIcon = computed(() => props.icon || slots.icon);
|
|
2321
|
+
const hasRightContent = computed(() => props.iconRight || slots.actions);
|
|
2322
|
+
const inputClass = computed(() => [
|
|
2323
|
+
// Base styles
|
|
2324
|
+
"block w-full rounded-xl border text-sm transition-all",
|
|
2325
|
+
"border-gray-200 bg-gray-50 text-gray-900 placeholder-gray-400",
|
|
2326
|
+
"focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:bg-white focus:outline-hidden",
|
|
2327
|
+
"disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed",
|
|
2328
|
+
// Dark mode
|
|
2329
|
+
"dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-500",
|
|
2330
|
+
"dark:focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:bg-slate-600",
|
|
2331
|
+
"dark:disabled:bg-slate-800 dark:disabled:text-gray-500",
|
|
2332
|
+
// Padding based on icons/actions
|
|
2333
|
+
hasLeftIcon.value ? "pl-10" : "pl-4",
|
|
2334
|
+
hasRightContent.value ? "pr-10" : "pr-4",
|
|
2335
|
+
// Size
|
|
2336
|
+
props.size === "sm" && "py-2 text-xs",
|
|
2337
|
+
props.size === "md" && "py-3 text-sm",
|
|
2338
|
+
props.size === "lg" && "py-4 text-base",
|
|
2339
|
+
// Invalid state
|
|
2340
|
+
props.invalid && "border-red-500 focus:border-red-500 focus:ring-red-500 dark:border-red-500"
|
|
2341
|
+
]);
|
|
2342
|
+
__expose({ inputClass });
|
|
2343
|
+
return (_ctx, _cache) => {
|
|
2344
|
+
return openBlock(), createElementBlock("div", {
|
|
2345
|
+
class: normalizeClass(["relative", __props.wrapperClass])
|
|
2346
|
+
}, [
|
|
2347
|
+
hasLeftIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
|
|
2348
|
+
renderSlot(_ctx.$slots, "icon", {}, () => [
|
|
2349
|
+
__props.icon ? (openBlock(), createBlock(unref(Icon), {
|
|
2350
|
+
key: 0,
|
|
2351
|
+
icon: __props.icon,
|
|
2352
|
+
class: "size-5"
|
|
2353
|
+
}, null, 8, ["icon"])) : createCommentVNode("", true)
|
|
2354
|
+
])
|
|
2355
|
+
])) : createCommentVNode("", true),
|
|
2356
|
+
renderSlot(_ctx.$slots, "default", { inputClass: inputClass.value }),
|
|
2357
|
+
hasRightContent.value ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
|
|
2358
|
+
renderSlot(_ctx.$slots, "actions", {}, () => [
|
|
2359
|
+
__props.iconRight ? (openBlock(), createBlock(unref(Icon), {
|
|
2360
|
+
key: 0,
|
|
2361
|
+
icon: __props.iconRight,
|
|
2362
|
+
class: "size-5 text-gray-400 pointer-events-none"
|
|
2363
|
+
}, null, 8, ["icon"])) : createCommentVNode("", true)
|
|
2364
|
+
])
|
|
2365
|
+
])) : createCommentVNode("", true)
|
|
2366
|
+
], 2);
|
|
2367
|
+
};
|
|
2368
|
+
}
|
|
2369
|
+
});
|
|
2370
|
+
const _hoisted_1$9 = ["id", "name", "placeholder", "disabled", "required", "aria-invalid", "aria-required", "aria-describedby"];
|
|
2371
|
+
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
2372
|
+
__name: "EmailInput",
|
|
2373
|
+
props: /* @__PURE__ */ mergeModels({
|
|
2374
|
+
placeholder: { default: "Enter email address..." },
|
|
2375
|
+
size: { default: "md" },
|
|
2376
|
+
disabled: { type: Boolean },
|
|
2377
|
+
showValidation: { type: Boolean, default: true },
|
|
2378
|
+
name: {},
|
|
2379
|
+
id: {},
|
|
2380
|
+
required: { type: Boolean },
|
|
2381
|
+
describedBy: {}
|
|
2382
|
+
}, {
|
|
2383
|
+
"modelValue": { default: "" },
|
|
2384
|
+
"modelModifiers": {}
|
|
2385
|
+
}),
|
|
2386
|
+
emits: ["update:modelValue"],
|
|
2387
|
+
setup(__props) {
|
|
2388
|
+
const props = __props;
|
|
2389
|
+
const modelValue = useModel(__props, "modelValue");
|
|
2390
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
2391
|
+
const isValid = computed(() => {
|
|
2392
|
+
if (!modelValue.value) return null;
|
|
2393
|
+
return emailRegex.test(modelValue.value);
|
|
2394
|
+
});
|
|
2395
|
+
const isTouched = ref(false);
|
|
2396
|
+
const showStatus = computed(() => {
|
|
2397
|
+
return props.showValidation && isTouched.value && !!modelValue.value;
|
|
2398
|
+
});
|
|
2399
|
+
function handleBlur() {
|
|
2400
|
+
isTouched.value = true;
|
|
2401
|
+
}
|
|
2402
|
+
return (_ctx, _cache) => {
|
|
2403
|
+
return openBlock(), createBlock(_sfc_main$a, {
|
|
2404
|
+
icon: "lucide:mail",
|
|
2405
|
+
size: __props.size,
|
|
2406
|
+
disabled: __props.disabled,
|
|
2407
|
+
invalid: showStatus.value && isValid.value === false
|
|
2408
|
+
}, {
|
|
2409
|
+
default: withCtx(({ inputClass }) => [
|
|
2410
|
+
withDirectives(createElementVNode("input", {
|
|
2411
|
+
id: __props.id ?? __props.name,
|
|
2412
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
|
|
2413
|
+
type: "email",
|
|
2414
|
+
name: __props.name,
|
|
2415
|
+
placeholder: __props.placeholder,
|
|
2416
|
+
disabled: __props.disabled,
|
|
2417
|
+
required: __props.required,
|
|
2418
|
+
"aria-invalid": showStatus.value && isValid.value === false || void 0,
|
|
2419
|
+
"aria-required": __props.required || void 0,
|
|
2420
|
+
"aria-describedby": __props.describedBy,
|
|
2421
|
+
class: normalizeClass(inputClass),
|
|
2422
|
+
onBlur: handleBlur
|
|
2423
|
+
}, null, 42, _hoisted_1$9), [
|
|
2424
|
+
[vModelText, modelValue.value]
|
|
2425
|
+
])
|
|
2426
|
+
]),
|
|
2427
|
+
actions: withCtx(() => [
|
|
2428
|
+
showStatus.value && isValid.value ? (openBlock(), createBlock(unref(Icon), {
|
|
2429
|
+
key: 0,
|
|
2430
|
+
icon: "lucide:check-circle",
|
|
2431
|
+
class: "size-5 text-emerald-500"
|
|
2432
|
+
})) : showStatus.value && isValid.value === false ? (openBlock(), createBlock(unref(Icon), {
|
|
2433
|
+
key: 1,
|
|
2434
|
+
icon: "lucide:alert-circle",
|
|
2435
|
+
class: "size-5 text-red-500"
|
|
2436
|
+
})) : createCommentVNode("", true)
|
|
2437
|
+
]),
|
|
2438
|
+
_: 1
|
|
2439
|
+
}, 8, ["size", "disabled", "invalid"]);
|
|
2440
|
+
};
|
|
2441
|
+
}
|
|
2442
|
+
});
|
|
2443
|
+
const _hoisted_1$8 = ["id", "type", "name", "placeholder", "disabled", "required", "aria-required", "aria-describedby"];
|
|
2444
|
+
const _hoisted_2$5 = ["disabled"];
|
|
2445
|
+
const _hoisted_3$4 = {
|
|
2446
|
+
key: 0,
|
|
2447
|
+
class: "mt-2"
|
|
2448
|
+
};
|
|
2449
|
+
const _hoisted_4$2 = { class: "h-1.5 w-full rounded-full bg-gray-200 dark:bg-slate-700 overflow-hidden" };
|
|
2450
|
+
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
2451
|
+
__name: "PasswordInput",
|
|
2452
|
+
props: /* @__PURE__ */ mergeModels({
|
|
2453
|
+
placeholder: { default: "Enter password..." },
|
|
2454
|
+
size: { default: "md" },
|
|
2455
|
+
disabled: { type: Boolean },
|
|
2456
|
+
showStrength: { type: Boolean, default: false },
|
|
2457
|
+
name: {},
|
|
2458
|
+
id: {},
|
|
2459
|
+
required: { type: Boolean },
|
|
2460
|
+
describedBy: {},
|
|
2461
|
+
minLength: { default: 8 }
|
|
2462
|
+
}, {
|
|
2463
|
+
"modelValue": { default: "" },
|
|
2464
|
+
"modelModifiers": {}
|
|
2465
|
+
}),
|
|
2466
|
+
emits: ["update:modelValue"],
|
|
2467
|
+
setup(__props) {
|
|
2468
|
+
const props = __props;
|
|
2469
|
+
const modelValue = useModel(__props, "modelValue");
|
|
2470
|
+
const showPassword = ref(false);
|
|
2471
|
+
const strength = computed(() => {
|
|
2472
|
+
const password = modelValue.value;
|
|
2473
|
+
if (!password) return null;
|
|
2474
|
+
let score = 0;
|
|
2475
|
+
if (password.length >= props.minLength) score++;
|
|
2476
|
+
if (password.length >= 12) score++;
|
|
2477
|
+
if (/[a-z]/.test(password)) score++;
|
|
2478
|
+
if (/[A-Z]/.test(password)) score++;
|
|
2479
|
+
if (/[0-9]/.test(password)) score++;
|
|
2480
|
+
if (/[^a-zA-Z0-9]/.test(password)) score++;
|
|
2481
|
+
if (score <= 2) return "weak";
|
|
2482
|
+
if (score <= 3) return "fair";
|
|
2483
|
+
if (score <= 4) return "good";
|
|
2484
|
+
return "strong";
|
|
2485
|
+
});
|
|
2486
|
+
const strengthConfig = computed(() => {
|
|
2487
|
+
const configs = {
|
|
2488
|
+
weak: { label: "Weak", color: "bg-red-500", width: "w-1/4" },
|
|
2489
|
+
fair: { label: "Fair", color: "bg-orange-500", width: "w-2/4" },
|
|
2490
|
+
good: { label: "Good", color: "bg-yellow-500", width: "w-3/4" },
|
|
2491
|
+
strong: { label: "Strong", color: "bg-emerald-500", width: "w-full" }
|
|
2492
|
+
};
|
|
2493
|
+
return strength.value ? configs[strength.value] : null;
|
|
2494
|
+
});
|
|
2495
|
+
function toggleVisibility() {
|
|
2496
|
+
showPassword.value = !showPassword.value;
|
|
2497
|
+
}
|
|
2498
|
+
return (_ctx, _cache) => {
|
|
2499
|
+
var _a, _b;
|
|
2500
|
+
return openBlock(), createElementBlock("div", null, [
|
|
2501
|
+
createVNode(_sfc_main$a, {
|
|
2502
|
+
icon: "lucide:lock",
|
|
2503
|
+
size: __props.size,
|
|
2504
|
+
disabled: __props.disabled
|
|
2505
|
+
}, {
|
|
2506
|
+
default: withCtx(({ inputClass }) => [
|
|
2507
|
+
withDirectives(createElementVNode("input", {
|
|
2508
|
+
id: __props.id ?? __props.name,
|
|
2509
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
|
|
2510
|
+
type: showPassword.value ? "text" : "password",
|
|
2511
|
+
name: __props.name,
|
|
2512
|
+
placeholder: __props.placeholder,
|
|
2513
|
+
disabled: __props.disabled,
|
|
2514
|
+
required: __props.required,
|
|
2515
|
+
"aria-required": __props.required || void 0,
|
|
2516
|
+
"aria-describedby": __props.describedBy,
|
|
2517
|
+
class: normalizeClass(inputClass),
|
|
2518
|
+
autocomplete: "new-password"
|
|
2519
|
+
}, null, 10, _hoisted_1$8), [
|
|
2520
|
+
[vModelDynamic, modelValue.value]
|
|
2521
|
+
])
|
|
2522
|
+
]),
|
|
2523
|
+
actions: withCtx(() => [
|
|
2524
|
+
createElementVNode("button", {
|
|
2525
|
+
type: "button",
|
|
2526
|
+
disabled: __props.disabled,
|
|
2527
|
+
class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
|
|
2528
|
+
onClick: toggleVisibility
|
|
2529
|
+
}, [
|
|
2530
|
+
createVNode(unref(Icon), {
|
|
2531
|
+
icon: showPassword.value ? "lucide:eye-off" : "lucide:eye",
|
|
2532
|
+
class: "size-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
2533
|
+
}, null, 8, ["icon"])
|
|
2534
|
+
], 8, _hoisted_2$5)
|
|
2535
|
+
]),
|
|
2536
|
+
_: 1
|
|
2537
|
+
}, 8, ["size", "disabled"]),
|
|
2538
|
+
__props.showStrength && modelValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
|
|
2539
|
+
createElementVNode("div", _hoisted_4$2, [
|
|
2540
|
+
createElementVNode("div", {
|
|
2541
|
+
class: normalizeClass([
|
|
2542
|
+
"h-full rounded-full transition-all duration-300",
|
|
2543
|
+
(_a = strengthConfig.value) == null ? void 0 : _a.color,
|
|
2544
|
+
(_b = strengthConfig.value) == null ? void 0 : _b.width
|
|
2545
|
+
])
|
|
2546
|
+
}, null, 2)
|
|
2547
|
+
]),
|
|
2548
|
+
strengthConfig.value ? (openBlock(), createElementBlock("p", {
|
|
2549
|
+
key: 0,
|
|
2550
|
+
class: normalizeClass([
|
|
2551
|
+
"mt-1 text-xs font-medium",
|
|
2552
|
+
strength.value === "weak" && "text-red-500",
|
|
2553
|
+
strength.value === "fair" && "text-orange-500",
|
|
2554
|
+
strength.value === "good" && "text-yellow-600 dark:text-yellow-500",
|
|
2555
|
+
strength.value === "strong" && "text-emerald-500"
|
|
2556
|
+
])
|
|
2557
|
+
}, toDisplayString(strengthConfig.value.label), 3)) : createCommentVNode("", true)
|
|
2558
|
+
])) : createCommentVNode("", true)
|
|
2559
|
+
]);
|
|
2560
|
+
};
|
|
2561
|
+
}
|
|
2562
|
+
});
|
|
2563
|
+
const _hoisted_1$7 = ["disabled"];
|
|
2564
|
+
const _hoisted_2$4 = { class: "text-lg leading-none" };
|
|
2565
|
+
const _hoisted_3$3 = ["id", "value", "name", "placeholder", "disabled", "required", "aria-required", "aria-describedby"];
|
|
2566
|
+
const _hoisted_4$1 = { class: "text-xs text-gray-400 font-medium" };
|
|
2567
|
+
const _hoisted_5 = {
|
|
2568
|
+
key: 0,
|
|
2569
|
+
class: "absolute z-50 mt-1 w-full bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-lg overflow-hidden"
|
|
2570
|
+
};
|
|
2571
|
+
const _hoisted_6 = { class: "p-2 border-b border-gray-100 dark:border-slate-700" };
|
|
2572
|
+
const _hoisted_7 = { class: "max-h-48 overflow-y-auto" };
|
|
2573
|
+
const _hoisted_8 = ["onClick"];
|
|
2574
|
+
const _hoisted_9 = { class: "text-lg" };
|
|
2575
|
+
const _hoisted_10 = { class: "flex-1 text-sm text-gray-700 dark:text-gray-300" };
|
|
2576
|
+
const _hoisted_11 = { class: "text-sm text-gray-400" };
|
|
2577
|
+
const _hoisted_12 = {
|
|
2578
|
+
key: 0,
|
|
2579
|
+
class: "px-3 py-4 text-center text-sm text-gray-500"
|
|
2580
|
+
};
|
|
2581
|
+
const defaultCountries = [
|
|
2582
|
+
{ code: "FR", name: "France", dialCode: "+33", flag: "🇫🇷" },
|
|
2583
|
+
{ code: "US", name: "United States", dialCode: "+1", flag: "🇺🇸" },
|
|
2584
|
+
{ code: "GB", name: "United Kingdom", dialCode: "+44", flag: "🇬🇧" },
|
|
2585
|
+
{ code: "DE", name: "Germany", dialCode: "+49", flag: "🇩🇪" },
|
|
2586
|
+
{ code: "ES", name: "Spain", dialCode: "+34", flag: "🇪🇸" },
|
|
2587
|
+
{ code: "IT", name: "Italy", dialCode: "+39", flag: "🇮🇹" },
|
|
2588
|
+
{ code: "BE", name: "Belgium", dialCode: "+32", flag: "🇧🇪" },
|
|
2589
|
+
{ code: "CH", name: "Switzerland", dialCode: "+41", flag: "🇨🇭" },
|
|
2590
|
+
{ code: "CA", name: "Canada", dialCode: "+1", flag: "🇨🇦" },
|
|
2591
|
+
{ code: "AU", name: "Australia", dialCode: "+61", flag: "🇦🇺" },
|
|
2592
|
+
{ code: "ML", name: "Mali", dialCode: "+223", flag: "🇲🇱" },
|
|
2593
|
+
{ code: "SN", name: "Senegal", dialCode: "+221", flag: "🇸🇳" },
|
|
2594
|
+
{ code: "CI", name: "Côte d'Ivoire", dialCode: "+225", flag: "🇨🇮" },
|
|
2595
|
+
{ code: "MA", name: "Morocco", dialCode: "+212", flag: "🇲🇦" },
|
|
2596
|
+
{ code: "TN", name: "Tunisia", dialCode: "+216", flag: "🇹🇳" },
|
|
2597
|
+
{ code: "DZ", name: "Algeria", dialCode: "+213", flag: "🇩🇿" }
|
|
2598
|
+
];
|
|
2599
|
+
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
2600
|
+
__name: "PhoneInput",
|
|
2601
|
+
props: /* @__PURE__ */ mergeModels({
|
|
2602
|
+
placeholder: { default: "Phone number" },
|
|
2603
|
+
size: { default: "md" },
|
|
2604
|
+
disabled: { type: Boolean },
|
|
2605
|
+
name: {},
|
|
2606
|
+
id: {},
|
|
2607
|
+
required: { type: Boolean },
|
|
2608
|
+
describedBy: {},
|
|
2609
|
+
defaultCountry: { default: "FR" },
|
|
2610
|
+
countries: { default: () => defaultCountries }
|
|
2611
|
+
}, {
|
|
2612
|
+
"modelValue": { default: "" },
|
|
2613
|
+
"modelModifiers": {}
|
|
2614
|
+
}),
|
|
2615
|
+
emits: ["update:modelValue"],
|
|
2616
|
+
setup(__props, { expose: __expose }) {
|
|
2617
|
+
const props = __props;
|
|
2618
|
+
const modelValue = useModel(__props, "modelValue");
|
|
2619
|
+
const selectedCountry = ref(
|
|
2620
|
+
props.countries.find((c) => c.code === props.defaultCountry) || props.countries[0]
|
|
2621
|
+
);
|
|
2622
|
+
const showDropdown = ref(false);
|
|
2623
|
+
const searchQuery = ref("");
|
|
2624
|
+
const dropdownRef = ref(null);
|
|
2625
|
+
const filteredCountries = computed(() => {
|
|
2626
|
+
if (!searchQuery.value) return props.countries;
|
|
2627
|
+
const query = searchQuery.value.toLowerCase();
|
|
2628
|
+
return props.countries.filter(
|
|
2629
|
+
(c) => c.name.toLowerCase().includes(query) || c.dialCode.includes(query) || c.code.toLowerCase().includes(query)
|
|
2630
|
+
);
|
|
2631
|
+
});
|
|
2632
|
+
const fullNumber = computed(() => {
|
|
2633
|
+
if (!modelValue.value) return "";
|
|
2634
|
+
return `${selectedCountry.value.dialCode}${modelValue.value}`;
|
|
2635
|
+
});
|
|
2636
|
+
function selectCountry(country) {
|
|
2637
|
+
selectedCountry.value = country;
|
|
2638
|
+
showDropdown.value = false;
|
|
2639
|
+
searchQuery.value = "";
|
|
2640
|
+
}
|
|
2641
|
+
function formatPhoneNumber(value) {
|
|
2642
|
+
const cleaned = value.replace(/\D/g, "");
|
|
2643
|
+
return cleaned;
|
|
2644
|
+
}
|
|
2645
|
+
function handleInput(event) {
|
|
2646
|
+
const target = event.target;
|
|
2647
|
+
const formatted = formatPhoneNumber(target.value);
|
|
2648
|
+
modelValue.value = formatted;
|
|
2649
|
+
}
|
|
2650
|
+
function handleClickOutside(event) {
|
|
2651
|
+
if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
|
|
2652
|
+
showDropdown.value = false;
|
|
2653
|
+
searchQuery.value = "";
|
|
2654
|
+
}
|
|
2655
|
+
}
|
|
2656
|
+
watch(showDropdown, (isOpen) => {
|
|
2657
|
+
if (isOpen) {
|
|
2658
|
+
document.addEventListener("click", handleClickOutside);
|
|
2659
|
+
} else {
|
|
2660
|
+
document.removeEventListener("click", handleClickOutside);
|
|
2661
|
+
}
|
|
2662
|
+
});
|
|
2663
|
+
__expose({ selectedCountry, fullNumber });
|
|
2664
|
+
return (_ctx, _cache) => {
|
|
2665
|
+
return openBlock(), createElementBlock("div", {
|
|
2666
|
+
class: "relative",
|
|
2667
|
+
ref_key: "dropdownRef",
|
|
2668
|
+
ref: dropdownRef
|
|
2669
|
+
}, [
|
|
2670
|
+
createVNode(_sfc_main$a, {
|
|
2671
|
+
size: __props.size,
|
|
2672
|
+
disabled: __props.disabled
|
|
2673
|
+
}, {
|
|
2674
|
+
icon: withCtx(() => [
|
|
2675
|
+
createElementVNode("button", {
|
|
2676
|
+
type: "button",
|
|
2677
|
+
disabled: __props.disabled,
|
|
2678
|
+
class: "flex items-center gap-1 pr-2 border-r border-gray-200 dark:border-slate-600 hover:bg-gray-50 dark:hover:bg-slate-600 -ml-1 pl-1 py-1 rounded-l transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
|
|
2679
|
+
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => showDropdown.value = !showDropdown.value, ["stop"]))
|
|
2680
|
+
}, [
|
|
2681
|
+
createElementVNode("span", _hoisted_2$4, toDisplayString(selectedCountry.value.flag), 1),
|
|
2682
|
+
createVNode(unref(Icon), {
|
|
2683
|
+
icon: "lucide:chevron-down",
|
|
2684
|
+
class: normalizeClass([
|
|
2685
|
+
"size-3 text-gray-400 transition-transform",
|
|
2686
|
+
showDropdown.value && "rotate-180"
|
|
2687
|
+
])
|
|
2688
|
+
}, null, 8, ["class"])
|
|
2689
|
+
], 8, _hoisted_1$7)
|
|
2690
|
+
]),
|
|
2691
|
+
default: withCtx(({ inputClass }) => [
|
|
2692
|
+
createElementVNode("input", {
|
|
2693
|
+
id: __props.id ?? __props.name,
|
|
2694
|
+
value: modelValue.value,
|
|
2695
|
+
type: "tel",
|
|
2696
|
+
name: __props.name,
|
|
2697
|
+
placeholder: __props.placeholder,
|
|
2698
|
+
disabled: __props.disabled,
|
|
2699
|
+
required: __props.required,
|
|
2700
|
+
"aria-required": __props.required || void 0,
|
|
2701
|
+
"aria-describedby": __props.describedBy,
|
|
2702
|
+
class: normalizeClass([inputClass, "pl-20"]),
|
|
2703
|
+
onInput: handleInput
|
|
2704
|
+
}, null, 42, _hoisted_3$3)
|
|
2705
|
+
]),
|
|
2706
|
+
actions: withCtx(() => [
|
|
2707
|
+
createElementVNode("span", _hoisted_4$1, toDisplayString(selectedCountry.value.dialCode), 1)
|
|
2708
|
+
]),
|
|
2709
|
+
_: 1
|
|
2710
|
+
}, 8, ["size", "disabled"]),
|
|
2711
|
+
createVNode(Transition, {
|
|
2712
|
+
"enter-active-class": "transition-all duration-200 ease-out",
|
|
2713
|
+
"enter-from-class": "opacity-0 -translate-y-2",
|
|
2714
|
+
"enter-to-class": "opacity-100 translate-y-0",
|
|
2715
|
+
"leave-active-class": "transition-all duration-150 ease-in",
|
|
2716
|
+
"leave-from-class": "opacity-100 translate-y-0",
|
|
2717
|
+
"leave-to-class": "opacity-0 -translate-y-2"
|
|
2718
|
+
}, {
|
|
2719
|
+
default: withCtx(() => [
|
|
2720
|
+
showDropdown.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
|
2721
|
+
createElementVNode("div", _hoisted_6, [
|
|
2722
|
+
withDirectives(createElementVNode("input", {
|
|
2723
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
|
|
2724
|
+
type: "text",
|
|
2725
|
+
placeholder: "Search countries...",
|
|
2726
|
+
class: "w-full px-3 py-2 text-sm border border-gray-200 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
2727
|
+
}, null, 512), [
|
|
2728
|
+
[vModelText, searchQuery.value]
|
|
2729
|
+
])
|
|
2730
|
+
]),
|
|
2731
|
+
createElementVNode("ul", _hoisted_7, [
|
|
2732
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(filteredCountries.value, (country) => {
|
|
2733
|
+
return openBlock(), createElementBlock("li", {
|
|
2734
|
+
key: country.code,
|
|
2735
|
+
class: normalizeClass(["flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors", selectedCountry.value.code === country.code && "bg-primary-50 dark:bg-primary-900/20"]),
|
|
2736
|
+
onClick: ($event) => selectCountry(country)
|
|
2737
|
+
}, [
|
|
2738
|
+
createElementVNode("span", _hoisted_9, toDisplayString(country.flag), 1),
|
|
2739
|
+
createElementVNode("span", _hoisted_10, toDisplayString(country.name), 1),
|
|
2740
|
+
createElementVNode("span", _hoisted_11, toDisplayString(country.dialCode), 1)
|
|
2741
|
+
], 10, _hoisted_8);
|
|
2742
|
+
}), 128)),
|
|
2743
|
+
filteredCountries.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_12, " No countries found ")) : createCommentVNode("", true)
|
|
2744
|
+
])
|
|
2745
|
+
])) : createCommentVNode("", true)
|
|
2746
|
+
]),
|
|
2747
|
+
_: 1
|
|
2748
|
+
})
|
|
2749
|
+
], 512);
|
|
2750
|
+
};
|
|
2751
|
+
}
|
|
2752
|
+
});
|
|
2753
|
+
const _hoisted_1$6 = ["disabled"];
|
|
2754
|
+
const _hoisted_2$3 = ["id", "value", "name", "placeholder", "disabled", "required", "min", "max", "step", "aria-required", "aria-describedby"];
|
|
2755
|
+
const _hoisted_3$2 = ["disabled"];
|
|
2756
|
+
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
2757
|
+
__name: "NumberInput",
|
|
2758
|
+
props: /* @__PURE__ */ mergeModels({
|
|
2759
|
+
placeholder: { default: "0" },
|
|
2760
|
+
size: { default: "md" },
|
|
2761
|
+
disabled: { type: Boolean },
|
|
2762
|
+
min: {},
|
|
2763
|
+
max: {},
|
|
2764
|
+
step: { default: 1 },
|
|
2765
|
+
name: {},
|
|
2766
|
+
id: {},
|
|
2767
|
+
required: { type: Boolean },
|
|
2768
|
+
describedBy: {},
|
|
2769
|
+
showStepper: { type: Boolean, default: true }
|
|
2770
|
+
}, {
|
|
2771
|
+
"modelValue": { default: null },
|
|
2772
|
+
"modelModifiers": {}
|
|
2773
|
+
}),
|
|
2774
|
+
emits: ["update:modelValue"],
|
|
2775
|
+
setup(__props) {
|
|
2776
|
+
const props = __props;
|
|
2777
|
+
const modelValue = useModel(__props, "modelValue");
|
|
2778
|
+
const canDecrement = computed(() => {
|
|
2779
|
+
if (props.disabled) return false;
|
|
2780
|
+
if (modelValue.value === null) return true;
|
|
2781
|
+
if (props.min !== void 0) return modelValue.value > props.min;
|
|
2782
|
+
return true;
|
|
2783
|
+
});
|
|
2784
|
+
const canIncrement = computed(() => {
|
|
2785
|
+
if (props.disabled) return false;
|
|
2786
|
+
if (modelValue.value === null) return true;
|
|
2787
|
+
if (props.max !== void 0) return modelValue.value < props.max;
|
|
2788
|
+
return true;
|
|
2789
|
+
});
|
|
2790
|
+
function increment() {
|
|
2791
|
+
if (!canIncrement.value) return;
|
|
2792
|
+
const current = modelValue.value ?? 0;
|
|
2793
|
+
const newValue = current + props.step;
|
|
2794
|
+
modelValue.value = props.max !== void 0 ? Math.min(newValue, props.max) : newValue;
|
|
2795
|
+
}
|
|
2796
|
+
function decrement() {
|
|
2797
|
+
if (!canDecrement.value) return;
|
|
2798
|
+
const current = modelValue.value ?? 0;
|
|
2799
|
+
const newValue = current - props.step;
|
|
2800
|
+
modelValue.value = props.min !== void 0 ? Math.max(newValue, props.min) : newValue;
|
|
2801
|
+
}
|
|
2802
|
+
function handleInput(event) {
|
|
2803
|
+
const target = event.target;
|
|
2804
|
+
const value = target.value === "" ? null : parseFloat(target.value);
|
|
2805
|
+
if (value !== null && !isNaN(value)) {
|
|
2806
|
+
let clampedValue = value;
|
|
2807
|
+
if (props.min !== void 0) clampedValue = Math.max(clampedValue, props.min);
|
|
2808
|
+
if (props.max !== void 0) clampedValue = Math.min(clampedValue, props.max);
|
|
2809
|
+
modelValue.value = clampedValue;
|
|
2810
|
+
} else {
|
|
2811
|
+
modelValue.value = null;
|
|
2812
|
+
}
|
|
2813
|
+
}
|
|
2814
|
+
return (_ctx, _cache) => {
|
|
2815
|
+
return openBlock(), createBlock(_sfc_main$a, {
|
|
2816
|
+
size: __props.size,
|
|
2817
|
+
disabled: __props.disabled
|
|
2818
|
+
}, createSlots({
|
|
2819
|
+
default: withCtx(({ inputClass }) => [
|
|
2820
|
+
createElementVNode("input", {
|
|
2821
|
+
id: __props.id ?? __props.name,
|
|
2822
|
+
value: modelValue.value,
|
|
2823
|
+
type: "number",
|
|
2824
|
+
name: __props.name,
|
|
2825
|
+
placeholder: __props.placeholder,
|
|
2826
|
+
disabled: __props.disabled,
|
|
2827
|
+
required: __props.required,
|
|
2828
|
+
min: __props.min,
|
|
2829
|
+
max: __props.max,
|
|
2830
|
+
step: __props.step,
|
|
2831
|
+
"aria-required": __props.required || void 0,
|
|
2832
|
+
"aria-describedby": __props.describedBy,
|
|
2833
|
+
class: normalizeClass([inputClass, "text-center", __props.showStepper && "pl-12 pr-12"]),
|
|
2834
|
+
onInput: handleInput
|
|
2835
|
+
}, null, 42, _hoisted_2$3)
|
|
2836
|
+
]),
|
|
2837
|
+
_: 2
|
|
2838
|
+
}, [
|
|
2839
|
+
__props.showStepper ? {
|
|
2840
|
+
name: "icon",
|
|
2841
|
+
fn: withCtx(() => [
|
|
2842
|
+
createElementVNode("button", {
|
|
2843
|
+
type: "button",
|
|
2844
|
+
disabled: !canDecrement.value,
|
|
2845
|
+
class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
|
|
2846
|
+
onClick: decrement
|
|
2847
|
+
}, [
|
|
2848
|
+
createVNode(unref(Icon), {
|
|
2849
|
+
icon: "lucide:minus",
|
|
2850
|
+
class: "size-4 text-gray-500"
|
|
2851
|
+
})
|
|
2852
|
+
], 8, _hoisted_1$6)
|
|
2853
|
+
]),
|
|
2854
|
+
key: "0"
|
|
2855
|
+
} : void 0,
|
|
2856
|
+
__props.showStepper ? {
|
|
2857
|
+
name: "actions",
|
|
2858
|
+
fn: withCtx(() => [
|
|
2859
|
+
createElementVNode("button", {
|
|
2860
|
+
type: "button",
|
|
2861
|
+
disabled: !canIncrement.value,
|
|
2862
|
+
class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
|
|
2863
|
+
onClick: increment
|
|
2864
|
+
}, [
|
|
2865
|
+
createVNode(unref(Icon), {
|
|
2866
|
+
icon: "lucide:plus",
|
|
2867
|
+
class: "size-4 text-gray-500"
|
|
2868
|
+
})
|
|
2869
|
+
], 8, _hoisted_3$2)
|
|
2870
|
+
]),
|
|
2871
|
+
key: "1"
|
|
2872
|
+
} : void 0
|
|
2873
|
+
]), 1032, ["size", "disabled"]);
|
|
2874
|
+
};
|
|
2875
|
+
}
|
|
2876
|
+
});
|
|
2877
|
+
const _hoisted_1$5 = { class: "text-sm font-medium text-gray-500 dark:text-gray-400" };
|
|
2878
|
+
const _hoisted_2$2 = ["id", "value", "name", "placeholder", "disabled", "required", "aria-required", "aria-describedby"];
|
|
2879
|
+
const _hoisted_3$1 = { class: "text-sm font-medium text-gray-500 dark:text-gray-400" };
|
|
2880
|
+
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
2881
|
+
__name: "MoneyInput",
|
|
2882
|
+
props: /* @__PURE__ */ mergeModels({
|
|
2883
|
+
placeholder: { default: "0.00" },
|
|
2884
|
+
size: { default: "md" },
|
|
2885
|
+
disabled: { type: Boolean },
|
|
2886
|
+
currency: { default: "EUR" },
|
|
2887
|
+
min: {},
|
|
2888
|
+
max: {},
|
|
2889
|
+
decimals: { default: 2 },
|
|
2890
|
+
name: {},
|
|
2891
|
+
id: {},
|
|
2892
|
+
required: { type: Boolean },
|
|
2893
|
+
describedBy: {}
|
|
2894
|
+
}, {
|
|
2895
|
+
"modelValue": { default: null },
|
|
2896
|
+
"modelModifiers": {}
|
|
2897
|
+
}),
|
|
2898
|
+
emits: ["update:modelValue"],
|
|
2899
|
+
setup(__props) {
|
|
2900
|
+
const currencyConfig = {
|
|
2901
|
+
EUR: { symbol: "€", locale: "fr-FR", position: "suffix" },
|
|
2902
|
+
USD: { symbol: "$", locale: "en-US", position: "prefix" },
|
|
2903
|
+
GBP: { symbol: "£", locale: "en-GB", position: "prefix" },
|
|
2904
|
+
XOF: { symbol: "CFA", locale: "fr-FR", position: "suffix" },
|
|
2905
|
+
MAD: { symbol: "DH", locale: "fr-MA", position: "suffix" },
|
|
2906
|
+
CHF: { symbol: "CHF", locale: "fr-CH", position: "suffix" },
|
|
2907
|
+
CAD: { symbol: "CA$", locale: "en-CA", position: "prefix" }
|
|
2908
|
+
};
|
|
2909
|
+
const props = __props;
|
|
2910
|
+
const modelValue = useModel(__props, "modelValue");
|
|
2911
|
+
const config = computed(() => currencyConfig[props.currency]);
|
|
2912
|
+
const displayValue = ref("");
|
|
2913
|
+
function formatForDisplay(value) {
|
|
2914
|
+
if (value === null) return "";
|
|
2915
|
+
return value.toLocaleString(config.value.locale, {
|
|
2916
|
+
minimumFractionDigits: props.decimals,
|
|
2917
|
+
maximumFractionDigits: props.decimals
|
|
2918
|
+
});
|
|
2919
|
+
}
|
|
2920
|
+
function parseDisplayValue(value) {
|
|
2921
|
+
if (!value) return null;
|
|
2922
|
+
const cleaned = value.replace(/\s/g, "").replace(/,/g, ".");
|
|
2923
|
+
const parsed = parseFloat(cleaned);
|
|
2924
|
+
return isNaN(parsed) ? null : parsed;
|
|
2925
|
+
}
|
|
2926
|
+
watch(
|
|
2927
|
+
() => modelValue.value,
|
|
2928
|
+
(newValue) => {
|
|
2929
|
+
displayValue.value = formatForDisplay(newValue);
|
|
2930
|
+
},
|
|
2931
|
+
{ immediate: true }
|
|
2932
|
+
);
|
|
2933
|
+
function handleInput(event) {
|
|
2934
|
+
const target = event.target;
|
|
2935
|
+
displayValue.value = target.value;
|
|
2936
|
+
}
|
|
2937
|
+
function handleBlur() {
|
|
2938
|
+
const parsed = parseDisplayValue(displayValue.value);
|
|
2939
|
+
if (parsed !== null) {
|
|
2940
|
+
let clampedValue = parsed;
|
|
2941
|
+
if (props.min !== void 0) clampedValue = Math.max(clampedValue, props.min);
|
|
2942
|
+
if (props.max !== void 0) clampedValue = Math.min(clampedValue, props.max);
|
|
2943
|
+
modelValue.value = clampedValue;
|
|
2944
|
+
displayValue.value = formatForDisplay(clampedValue);
|
|
2945
|
+
} else {
|
|
2946
|
+
modelValue.value = null;
|
|
2947
|
+
displayValue.value = "";
|
|
2948
|
+
}
|
|
2949
|
+
}
|
|
2950
|
+
return (_ctx, _cache) => {
|
|
2951
|
+
return openBlock(), createBlock(_sfc_main$a, {
|
|
2952
|
+
size: __props.size,
|
|
2953
|
+
disabled: __props.disabled
|
|
2954
|
+
}, createSlots({
|
|
2955
|
+
default: withCtx(({ inputClass }) => [
|
|
2956
|
+
createElementVNode("input", {
|
|
2957
|
+
id: __props.id ?? __props.name,
|
|
2958
|
+
value: displayValue.value,
|
|
2959
|
+
type: "text",
|
|
2960
|
+
inputmode: "decimal",
|
|
2961
|
+
name: __props.name,
|
|
2962
|
+
placeholder: __props.placeholder,
|
|
2963
|
+
disabled: __props.disabled,
|
|
2964
|
+
required: __props.required,
|
|
2965
|
+
"aria-required": __props.required || void 0,
|
|
2966
|
+
"aria-describedby": __props.describedBy,
|
|
2967
|
+
class: normalizeClass([inputClass, "text-right"]),
|
|
2968
|
+
onInput: handleInput,
|
|
2969
|
+
onBlur: handleBlur
|
|
2970
|
+
}, null, 42, _hoisted_2$2)
|
|
2971
|
+
]),
|
|
2972
|
+
_: 2
|
|
2973
|
+
}, [
|
|
2974
|
+
config.value.position === "prefix" ? {
|
|
2975
|
+
name: "icon",
|
|
2976
|
+
fn: withCtx(() => [
|
|
2977
|
+
createElementVNode("span", _hoisted_1$5, toDisplayString(config.value.symbol), 1)
|
|
2978
|
+
]),
|
|
2979
|
+
key: "0"
|
|
2980
|
+
} : void 0,
|
|
2981
|
+
config.value.position === "suffix" ? {
|
|
2982
|
+
name: "actions",
|
|
2983
|
+
fn: withCtx(() => [
|
|
2984
|
+
createElementVNode("span", _hoisted_3$1, toDisplayString(config.value.symbol), 1)
|
|
2985
|
+
]),
|
|
2986
|
+
key: "1"
|
|
2987
|
+
} : void 0
|
|
2988
|
+
]), 1032, ["size", "disabled"]);
|
|
2989
|
+
};
|
|
2990
|
+
}
|
|
2991
|
+
});
|
|
2992
|
+
const _hoisted_1$4 = ["id", "value", "name", "placeholder", "disabled", "required", "min", "max", "step", "aria-required", "aria-describedby"];
|
|
2993
|
+
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
2994
|
+
__name: "PercentInput",
|
|
2995
|
+
props: /* @__PURE__ */ mergeModels({
|
|
2996
|
+
placeholder: { default: "0" },
|
|
2997
|
+
size: { default: "md" },
|
|
2998
|
+
disabled: { type: Boolean },
|
|
2999
|
+
min: { default: 0 },
|
|
3000
|
+
max: { default: 100 },
|
|
3001
|
+
decimals: { default: 0 },
|
|
3002
|
+
name: {},
|
|
3003
|
+
id: {},
|
|
3004
|
+
required: { type: Boolean },
|
|
3005
|
+
describedBy: {}
|
|
3006
|
+
}, {
|
|
3007
|
+
"modelValue": { default: null },
|
|
3008
|
+
"modelModifiers": {}
|
|
3009
|
+
}),
|
|
3010
|
+
emits: ["update:modelValue"],
|
|
3011
|
+
setup(__props) {
|
|
3012
|
+
const props = __props;
|
|
3013
|
+
const modelValue = useModel(__props, "modelValue");
|
|
3014
|
+
const displayValue = computed({
|
|
3015
|
+
get: () => modelValue.value !== null ? modelValue.value.toString() : "",
|
|
3016
|
+
set: (val) => {
|
|
3017
|
+
if (val === "") {
|
|
3018
|
+
modelValue.value = null;
|
|
3019
|
+
return;
|
|
3020
|
+
}
|
|
3021
|
+
const parsed = parseFloat(val);
|
|
3022
|
+
if (!isNaN(parsed)) {
|
|
3023
|
+
let clamped = parsed;
|
|
3024
|
+
if (props.min !== void 0) clamped = Math.max(clamped, props.min);
|
|
3025
|
+
if (props.max !== void 0) clamped = Math.min(clamped, props.max);
|
|
3026
|
+
modelValue.value = clamped;
|
|
3027
|
+
}
|
|
3028
|
+
}
|
|
3029
|
+
});
|
|
3030
|
+
function handleInput(event) {
|
|
3031
|
+
const target = event.target;
|
|
3032
|
+
displayValue.value = target.value;
|
|
3033
|
+
}
|
|
3034
|
+
return (_ctx, _cache) => {
|
|
3035
|
+
return openBlock(), createBlock(_sfc_main$a, {
|
|
3036
|
+
size: __props.size,
|
|
3037
|
+
disabled: __props.disabled
|
|
3038
|
+
}, {
|
|
3039
|
+
default: withCtx(({ inputClass }) => [
|
|
3040
|
+
createElementVNode("input", {
|
|
3041
|
+
id: __props.id ?? __props.name,
|
|
3042
|
+
value: displayValue.value,
|
|
3043
|
+
type: "number",
|
|
3044
|
+
inputmode: "decimal",
|
|
3045
|
+
name: __props.name,
|
|
3046
|
+
placeholder: __props.placeholder,
|
|
3047
|
+
disabled: __props.disabled,
|
|
3048
|
+
required: __props.required,
|
|
3049
|
+
min: __props.min,
|
|
3050
|
+
max: __props.max,
|
|
3051
|
+
step: __props.decimals > 0 ? Math.pow(10, -__props.decimals) : 1,
|
|
3052
|
+
"aria-required": __props.required || void 0,
|
|
3053
|
+
"aria-describedby": __props.describedBy,
|
|
3054
|
+
class: normalizeClass([inputClass, "text-right pr-10"]),
|
|
3055
|
+
onInput: handleInput
|
|
3056
|
+
}, null, 42, _hoisted_1$4)
|
|
3057
|
+
]),
|
|
3058
|
+
actions: withCtx(() => [..._cache[0] || (_cache[0] = [
|
|
3059
|
+
createElementVNode("span", { class: "text-sm font-medium text-gray-500 dark:text-gray-400" }, "%", -1)
|
|
3060
|
+
])]),
|
|
3061
|
+
_: 1
|
|
3062
|
+
}, 8, ["size", "disabled"]);
|
|
3063
|
+
};
|
|
3064
|
+
}
|
|
3065
|
+
});
|
|
3066
|
+
const _hoisted_1$3 = { class: "inline-flex items-center gap-2 bg-gray-50 dark:bg-slate-700 rounded-xl p-1 border border-gray-200 dark:border-slate-600" };
|
|
3067
|
+
const _hoisted_2$1 = ["disabled"];
|
|
3068
|
+
const _hoisted_3 = ["id", "value", "name", "disabled", "required", "min", "max"];
|
|
3069
|
+
const _hoisted_4 = ["disabled"];
|
|
3070
|
+
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
3071
|
+
__name: "QuantityInput",
|
|
3072
|
+
props: /* @__PURE__ */ mergeModels({
|
|
3073
|
+
size: { default: "md" },
|
|
3074
|
+
disabled: { type: Boolean },
|
|
3075
|
+
min: { default: 1 },
|
|
3076
|
+
max: {},
|
|
3077
|
+
step: { default: 1 },
|
|
3078
|
+
name: {},
|
|
3079
|
+
id: {},
|
|
3080
|
+
required: { type: Boolean }
|
|
3081
|
+
}, {
|
|
3082
|
+
"modelValue": { default: 1 },
|
|
3083
|
+
"modelModifiers": {}
|
|
3084
|
+
}),
|
|
3085
|
+
emits: ["update:modelValue"],
|
|
3086
|
+
setup(__props) {
|
|
3087
|
+
const props = __props;
|
|
3088
|
+
const modelValue = useModel(__props, "modelValue");
|
|
3089
|
+
const canDecrement = computed(() => {
|
|
3090
|
+
if (props.disabled) return false;
|
|
3091
|
+
if (props.min !== void 0) return modelValue.value > props.min;
|
|
3092
|
+
return true;
|
|
3093
|
+
});
|
|
3094
|
+
const canIncrement = computed(() => {
|
|
3095
|
+
if (props.disabled) return false;
|
|
3096
|
+
if (props.max !== void 0) return modelValue.value < props.max;
|
|
3097
|
+
return true;
|
|
3098
|
+
});
|
|
3099
|
+
function increment() {
|
|
3100
|
+
if (!canIncrement.value) return;
|
|
3101
|
+
const newValue = modelValue.value + props.step;
|
|
3102
|
+
modelValue.value = props.max !== void 0 ? Math.min(newValue, props.max) : newValue;
|
|
3103
|
+
}
|
|
3104
|
+
function decrement() {
|
|
3105
|
+
if (!canDecrement.value) return;
|
|
3106
|
+
const newValue = modelValue.value - props.step;
|
|
3107
|
+
modelValue.value = props.min !== void 0 ? Math.max(newValue, props.min) : newValue;
|
|
3108
|
+
}
|
|
3109
|
+
function handleInput(event) {
|
|
3110
|
+
const target = event.target;
|
|
3111
|
+
const value = parseInt(target.value, 10);
|
|
3112
|
+
if (!isNaN(value)) {
|
|
3113
|
+
let clampedValue = value;
|
|
3114
|
+
if (props.min !== void 0) clampedValue = Math.max(clampedValue, props.min);
|
|
3115
|
+
if (props.max !== void 0) clampedValue = Math.min(clampedValue, props.max);
|
|
3116
|
+
modelValue.value = clampedValue;
|
|
3117
|
+
}
|
|
3118
|
+
}
|
|
3119
|
+
const sizeClasses = computed(() => ({
|
|
3120
|
+
button: {
|
|
3121
|
+
sm: "size-7",
|
|
3122
|
+
md: "size-9",
|
|
3123
|
+
lg: "size-11"
|
|
3124
|
+
}[props.size],
|
|
3125
|
+
icon: {
|
|
3126
|
+
sm: "size-3",
|
|
3127
|
+
md: "size-4",
|
|
3128
|
+
lg: "size-5"
|
|
3129
|
+
}[props.size],
|
|
3130
|
+
input: {
|
|
3131
|
+
sm: "text-sm w-10",
|
|
3132
|
+
md: "text-base w-12",
|
|
3133
|
+
lg: "text-lg w-14"
|
|
3134
|
+
}[props.size]
|
|
3135
|
+
}));
|
|
3136
|
+
return (_ctx, _cache) => {
|
|
3137
|
+
return openBlock(), createElementBlock("div", _hoisted_1$3, [
|
|
3138
|
+
createElementVNode("button", {
|
|
3139
|
+
type: "button",
|
|
3140
|
+
disabled: !canDecrement.value,
|
|
3141
|
+
class: normalizeClass([
|
|
3142
|
+
"flex items-center justify-center rounded-lg bg-white dark:bg-slate-600 border border-gray-200 dark:border-slate-500 transition-all",
|
|
3143
|
+
"hover:bg-gray-50 dark:hover:bg-slate-500 hover:border-gray-300 dark:hover:border-slate-400",
|
|
3144
|
+
"disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-slate-600",
|
|
3145
|
+
"shadow-sm",
|
|
3146
|
+
sizeClasses.value.button
|
|
3147
|
+
]),
|
|
3148
|
+
onClick: decrement
|
|
3149
|
+
}, [
|
|
3150
|
+
createVNode(unref(Icon), {
|
|
3151
|
+
icon: "lucide:minus",
|
|
3152
|
+
class: normalizeClass(["text-gray-600 dark:text-gray-300", sizeClasses.value.icon])
|
|
3153
|
+
}, null, 8, ["class"])
|
|
3154
|
+
], 10, _hoisted_2$1),
|
|
3155
|
+
createElementVNode("input", {
|
|
3156
|
+
id: __props.id ?? __props.name,
|
|
3157
|
+
value: modelValue.value,
|
|
3158
|
+
type: "number",
|
|
3159
|
+
name: __props.name,
|
|
3160
|
+
disabled: __props.disabled,
|
|
3161
|
+
required: __props.required,
|
|
3162
|
+
min: __props.min,
|
|
3163
|
+
max: __props.max,
|
|
3164
|
+
class: normalizeClass([
|
|
3165
|
+
"bg-transparent text-center font-semibold text-gray-900 dark:text-white",
|
|
3166
|
+
"focus:outline-none appearance-none",
|
|
3167
|
+
"[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
|
3168
|
+
"disabled:opacity-50",
|
|
3169
|
+
sizeClasses.value.input
|
|
3170
|
+
]),
|
|
3171
|
+
onInput: handleInput
|
|
3172
|
+
}, null, 42, _hoisted_3),
|
|
3173
|
+
createElementVNode("button", {
|
|
3174
|
+
type: "button",
|
|
3175
|
+
disabled: !canIncrement.value,
|
|
3176
|
+
class: normalizeClass([
|
|
3177
|
+
"flex items-center justify-center rounded-lg bg-white dark:bg-slate-600 border border-gray-200 dark:border-slate-500 transition-all",
|
|
3178
|
+
"hover:bg-gray-50 dark:hover:bg-slate-500 hover:border-gray-300 dark:hover:border-slate-400",
|
|
3179
|
+
"disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-slate-600",
|
|
3180
|
+
"shadow-sm",
|
|
3181
|
+
sizeClasses.value.button
|
|
3182
|
+
]),
|
|
3183
|
+
onClick: increment
|
|
3184
|
+
}, [
|
|
3185
|
+
createVNode(unref(Icon), {
|
|
3186
|
+
icon: "lucide:plus",
|
|
3187
|
+
class: normalizeClass(["text-gray-600 dark:text-gray-300", sizeClasses.value.icon])
|
|
3188
|
+
}, null, 8, ["class"])
|
|
3189
|
+
], 10, _hoisted_4)
|
|
3190
|
+
]);
|
|
3191
|
+
};
|
|
3192
|
+
}
|
|
3193
|
+
});
|
|
3194
|
+
const _hoisted_1$2 = ["id", "name", "placeholder", "disabled", "required", "aria-invalid", "aria-required", "aria-describedby"];
|
|
3195
|
+
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
3196
|
+
__name: "URLInput",
|
|
3197
|
+
props: /* @__PURE__ */ mergeModels({
|
|
3198
|
+
placeholder: { default: "https://example.com" },
|
|
3199
|
+
size: { default: "md" },
|
|
3200
|
+
disabled: { type: Boolean },
|
|
3201
|
+
showValidation: { type: Boolean, default: true },
|
|
3202
|
+
name: {},
|
|
3203
|
+
id: {},
|
|
3204
|
+
required: { type: Boolean },
|
|
3205
|
+
describedBy: {}
|
|
3206
|
+
}, {
|
|
3207
|
+
"modelValue": { default: "" },
|
|
3208
|
+
"modelModifiers": {}
|
|
3209
|
+
}),
|
|
3210
|
+
emits: ["update:modelValue"],
|
|
3211
|
+
setup(__props) {
|
|
3212
|
+
const props = __props;
|
|
3213
|
+
const modelValue = useModel(__props, "modelValue");
|
|
3214
|
+
const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
|
|
3215
|
+
const isValid = computed(() => {
|
|
3216
|
+
if (!modelValue.value) return null;
|
|
3217
|
+
return urlRegex.test(modelValue.value);
|
|
3218
|
+
});
|
|
3219
|
+
const isTouched = ref(false);
|
|
3220
|
+
const showStatus = computed(() => {
|
|
3221
|
+
return props.showValidation && isTouched.value && !!modelValue.value;
|
|
3222
|
+
});
|
|
3223
|
+
function handleBlur() {
|
|
3224
|
+
isTouched.value = true;
|
|
3225
|
+
}
|
|
3226
|
+
function openUrl() {
|
|
3227
|
+
if (isValid.value && modelValue.value) {
|
|
3228
|
+
const url = modelValue.value.startsWith("http") ? modelValue.value : `https://${modelValue.value}`;
|
|
3229
|
+
window.open(url, "_blank");
|
|
3230
|
+
}
|
|
3231
|
+
}
|
|
3232
|
+
return (_ctx, _cache) => {
|
|
3233
|
+
return openBlock(), createBlock(_sfc_main$a, {
|
|
3234
|
+
icon: "lucide:link",
|
|
3235
|
+
size: __props.size,
|
|
3236
|
+
disabled: __props.disabled,
|
|
3237
|
+
invalid: showStatus.value && isValid.value === false
|
|
3238
|
+
}, {
|
|
3239
|
+
default: withCtx(({ inputClass }) => [
|
|
3240
|
+
withDirectives(createElementVNode("input", {
|
|
3241
|
+
id: __props.id ?? __props.name,
|
|
3242
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
|
|
3243
|
+
type: "url",
|
|
3244
|
+
name: __props.name,
|
|
3245
|
+
placeholder: __props.placeholder,
|
|
3246
|
+
disabled: __props.disabled,
|
|
3247
|
+
required: __props.required,
|
|
3248
|
+
"aria-invalid": showStatus.value && isValid.value === false || void 0,
|
|
3249
|
+
"aria-required": __props.required || void 0,
|
|
3250
|
+
"aria-describedby": __props.describedBy,
|
|
3251
|
+
class: normalizeClass(inputClass),
|
|
3252
|
+
onBlur: handleBlur
|
|
3253
|
+
}, null, 42, _hoisted_1$2), [
|
|
3254
|
+
[vModelText, modelValue.value]
|
|
3255
|
+
])
|
|
3256
|
+
]),
|
|
3257
|
+
actions: withCtx(() => [
|
|
3258
|
+
showStatus.value && isValid.value && modelValue.value ? (openBlock(), createElementBlock("button", {
|
|
3259
|
+
key: 0,
|
|
3260
|
+
type: "button",
|
|
3261
|
+
class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors",
|
|
3262
|
+
title: "Open URL",
|
|
3263
|
+
onClick: openUrl
|
|
3264
|
+
}, [
|
|
3265
|
+
createVNode(unref(Icon), {
|
|
3266
|
+
icon: "lucide:external-link",
|
|
3267
|
+
class: "size-4 text-gray-400 hover:text-primary-500"
|
|
3268
|
+
})
|
|
3269
|
+
])) : showStatus.value && isValid.value === false ? (openBlock(), createBlock(unref(Icon), {
|
|
3270
|
+
key: 1,
|
|
3271
|
+
icon: "lucide:alert-circle",
|
|
3272
|
+
class: "size-5 text-red-500"
|
|
3273
|
+
})) : createCommentVNode("", true)
|
|
3274
|
+
]),
|
|
3275
|
+
_: 1
|
|
3276
|
+
}, 8, ["size", "disabled", "invalid"]);
|
|
3277
|
+
};
|
|
3278
|
+
}
|
|
3279
|
+
});
|
|
3280
|
+
const _hoisted_1$1 = ["value", "type", "name", "disabled", "onInput", "onKeydown"];
|
|
3281
|
+
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
3282
|
+
__name: "OTPInput",
|
|
3283
|
+
props: /* @__PURE__ */ mergeModels({
|
|
3284
|
+
length: { default: 6 },
|
|
3285
|
+
size: { default: "md" },
|
|
3286
|
+
disabled: { type: Boolean },
|
|
3287
|
+
autoFocus: { type: Boolean, default: true },
|
|
3288
|
+
name: {},
|
|
3289
|
+
masked: { type: Boolean, default: false }
|
|
3290
|
+
}, {
|
|
3291
|
+
"modelValue": { default: "" },
|
|
3292
|
+
"modelModifiers": {}
|
|
3293
|
+
}),
|
|
3294
|
+
emits: /* @__PURE__ */ mergeModels(["complete"], ["update:modelValue"]),
|
|
3295
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
3296
|
+
const props = __props;
|
|
3297
|
+
const emit = __emit;
|
|
3298
|
+
const modelValue = useModel(__props, "modelValue");
|
|
3299
|
+
const inputRefs = ref([]);
|
|
3300
|
+
const digits = computed(() => {
|
|
3301
|
+
const arr = modelValue.value.split("");
|
|
3302
|
+
while (arr.length < props.length) {
|
|
3303
|
+
arr.push("");
|
|
3304
|
+
}
|
|
3305
|
+
return arr.slice(0, props.length);
|
|
3306
|
+
});
|
|
3307
|
+
const sizeClasses = computed(() => ({
|
|
3308
|
+
input: {
|
|
3309
|
+
sm: "size-10 text-lg",
|
|
3310
|
+
md: "size-12 text-xl",
|
|
3311
|
+
lg: "size-14 text-2xl"
|
|
3312
|
+
}[props.size],
|
|
3313
|
+
gap: {
|
|
3314
|
+
sm: "gap-2",
|
|
3315
|
+
md: "gap-3",
|
|
3316
|
+
lg: "gap-4"
|
|
3317
|
+
}[props.size]
|
|
3318
|
+
}));
|
|
3319
|
+
function updateValue(index, value) {
|
|
3320
|
+
const newDigits = [...digits.value];
|
|
3321
|
+
newDigits[index] = value.slice(-1);
|
|
3322
|
+
modelValue.value = newDigits.join("");
|
|
3323
|
+
if (modelValue.value.length === props.length && !modelValue.value.includes("")) {
|
|
3324
|
+
emit("complete", modelValue.value);
|
|
3325
|
+
}
|
|
3326
|
+
}
|
|
3327
|
+
function handleInput(event, index) {
|
|
3328
|
+
const target = event.target;
|
|
3329
|
+
const value = target.value.replace(/\D/g, "");
|
|
3330
|
+
if (value) {
|
|
3331
|
+
updateValue(index, value);
|
|
3332
|
+
if (index < props.length - 1) {
|
|
3333
|
+
nextTick(() => {
|
|
3334
|
+
var _a;
|
|
3335
|
+
(_a = inputRefs.value[index + 1]) == null ? void 0 : _a.focus();
|
|
3336
|
+
});
|
|
3337
|
+
}
|
|
3338
|
+
}
|
|
3339
|
+
}
|
|
3340
|
+
function handleKeydown(event, index) {
|
|
3341
|
+
var _a, _b, _c;
|
|
3342
|
+
const target = event.target;
|
|
3343
|
+
if (event.key === "Backspace") {
|
|
3344
|
+
if (!target.value && index > 0) {
|
|
3345
|
+
(_a = inputRefs.value[index - 1]) == null ? void 0 : _a.focus();
|
|
3346
|
+
}
|
|
3347
|
+
updateValue(index, "");
|
|
3348
|
+
} else if (event.key === "ArrowLeft" && index > 0) {
|
|
3349
|
+
(_b = inputRefs.value[index - 1]) == null ? void 0 : _b.focus();
|
|
3350
|
+
} else if (event.key === "ArrowRight" && index < props.length - 1) {
|
|
3351
|
+
(_c = inputRefs.value[index + 1]) == null ? void 0 : _c.focus();
|
|
3352
|
+
}
|
|
3353
|
+
}
|
|
3354
|
+
function handlePaste(event) {
|
|
3355
|
+
var _a;
|
|
3356
|
+
event.preventDefault();
|
|
3357
|
+
const pastedData = (_a = event.clipboardData) == null ? void 0 : _a.getData("text").replace(/\D/g, "").slice(0, props.length);
|
|
3358
|
+
if (pastedData) {
|
|
3359
|
+
modelValue.value = pastedData;
|
|
3360
|
+
const focusIndex = Math.min(pastedData.length, props.length - 1);
|
|
3361
|
+
nextTick(() => {
|
|
3362
|
+
var _a2;
|
|
3363
|
+
(_a2 = inputRefs.value[focusIndex]) == null ? void 0 : _a2.focus();
|
|
3364
|
+
});
|
|
3365
|
+
}
|
|
3366
|
+
}
|
|
3367
|
+
function handleFocus(event) {
|
|
3368
|
+
const target = event.target;
|
|
3369
|
+
target.select();
|
|
3370
|
+
}
|
|
3371
|
+
watch(
|
|
3372
|
+
() => modelValue.value,
|
|
3373
|
+
(newValue) => {
|
|
3374
|
+
if (newValue.length === props.length) {
|
|
3375
|
+
emit("complete", newValue);
|
|
3376
|
+
}
|
|
3377
|
+
}
|
|
3378
|
+
);
|
|
3379
|
+
onMounted(() => {
|
|
3380
|
+
var _a;
|
|
3381
|
+
if (props.autoFocus) {
|
|
3382
|
+
(_a = inputRefs.value[0]) == null ? void 0 : _a.focus();
|
|
3383
|
+
}
|
|
3384
|
+
});
|
|
3385
|
+
function setInputRef(el, index) {
|
|
3386
|
+
if (el) {
|
|
3387
|
+
inputRefs.value[index] = el;
|
|
3388
|
+
}
|
|
3389
|
+
}
|
|
3390
|
+
__expose({ focus: () => {
|
|
3391
|
+
var _a;
|
|
3392
|
+
return (_a = inputRefs.value[0]) == null ? void 0 : _a.focus();
|
|
3393
|
+
} });
|
|
3394
|
+
return (_ctx, _cache) => {
|
|
3395
|
+
return openBlock(), createElementBlock("div", {
|
|
3396
|
+
class: normalizeClass(["inline-flex", sizeClasses.value.gap])
|
|
3397
|
+
}, [
|
|
3398
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(digits.value, (digit, index) => {
|
|
3399
|
+
return openBlock(), createElementBlock("input", {
|
|
3400
|
+
key: index,
|
|
3401
|
+
ref_for: true,
|
|
3402
|
+
ref: (el) => setInputRef(el, index),
|
|
3403
|
+
value: digit,
|
|
3404
|
+
type: __props.masked ? "password" : "text",
|
|
3405
|
+
inputmode: "numeric",
|
|
3406
|
+
name: __props.name ? `${__props.name}-${index}` : void 0,
|
|
3407
|
+
disabled: __props.disabled,
|
|
3408
|
+
maxlength: "1",
|
|
3409
|
+
autocomplete: "one-time-code",
|
|
3410
|
+
class: normalizeClass([
|
|
3411
|
+
"text-center font-semibold rounded-xl border-2 transition-all",
|
|
3412
|
+
"bg-gray-50 dark:bg-slate-700 text-gray-900 dark:text-white",
|
|
3413
|
+
"border-gray-200 dark:border-slate-600",
|
|
3414
|
+
"focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none",
|
|
3415
|
+
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
3416
|
+
digit ? "border-primary-300 dark:border-primary-500/50" : "",
|
|
3417
|
+
sizeClasses.value.input
|
|
3418
|
+
]),
|
|
3419
|
+
onInput: ($event) => handleInput($event, index),
|
|
3420
|
+
onKeydown: ($event) => handleKeydown($event, index),
|
|
3421
|
+
onPaste: handlePaste,
|
|
3422
|
+
onFocus: handleFocus
|
|
3423
|
+
}, null, 42, _hoisted_1$1);
|
|
3424
|
+
}), 128))
|
|
3425
|
+
], 2);
|
|
3426
|
+
};
|
|
3427
|
+
}
|
|
3428
|
+
});
|
|
3429
|
+
const _hoisted_1 = ["onClick"];
|
|
3430
|
+
const _hoisted_2 = ["id", "name", "placeholder", "disabled", "required"];
|
|
3431
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
3432
|
+
__name: "TagsInput",
|
|
3433
|
+
props: /* @__PURE__ */ mergeModels({
|
|
3434
|
+
placeholder: { default: "Add tag..." },
|
|
3435
|
+
size: { default: "md" },
|
|
3436
|
+
disabled: { type: Boolean },
|
|
3437
|
+
max: {},
|
|
3438
|
+
allowDuplicates: { type: Boolean, default: false },
|
|
3439
|
+
name: {},
|
|
3440
|
+
id: {},
|
|
3441
|
+
required: { type: Boolean }
|
|
3442
|
+
}, {
|
|
3443
|
+
"modelValue": { default: () => [] },
|
|
3444
|
+
"modelModifiers": {}
|
|
3445
|
+
}),
|
|
3446
|
+
emits: ["update:modelValue"],
|
|
3447
|
+
setup(__props, { expose: __expose }) {
|
|
3448
|
+
const props = __props;
|
|
3449
|
+
const modelValue = useModel(__props, "modelValue");
|
|
3450
|
+
const inputValue = ref("");
|
|
3451
|
+
const inputRef = ref(null);
|
|
3452
|
+
const canAddMore = computed(() => {
|
|
3453
|
+
if (props.max !== void 0) return modelValue.value.length < props.max;
|
|
3454
|
+
return true;
|
|
3455
|
+
});
|
|
3456
|
+
const sizeClasses = computed(() => ({
|
|
3457
|
+
wrapper: {
|
|
3458
|
+
sm: "min-h-9 py-1.5 px-2 gap-1",
|
|
3459
|
+
md: "min-h-11 py-2 px-3 gap-1.5",
|
|
3460
|
+
lg: "min-h-13 py-2.5 px-4 gap-2"
|
|
3461
|
+
}[props.size],
|
|
3462
|
+
tag: {
|
|
3463
|
+
sm: "text-xs px-2 py-0.5",
|
|
3464
|
+
md: "text-sm px-2.5 py-1",
|
|
3465
|
+
lg: "text-base px-3 py-1.5"
|
|
3466
|
+
}[props.size],
|
|
3467
|
+
input: {
|
|
3468
|
+
sm: "text-xs",
|
|
3469
|
+
md: "text-sm",
|
|
3470
|
+
lg: "text-base"
|
|
3471
|
+
}[props.size],
|
|
3472
|
+
icon: {
|
|
3473
|
+
sm: "size-3",
|
|
3474
|
+
md: "size-3.5",
|
|
3475
|
+
lg: "size-4"
|
|
3476
|
+
}[props.size]
|
|
3477
|
+
}));
|
|
3478
|
+
function addTag(value) {
|
|
3479
|
+
const trimmed = value.trim();
|
|
3480
|
+
if (!trimmed) return;
|
|
3481
|
+
if (!canAddMore.value) return;
|
|
3482
|
+
if (!props.allowDuplicates && modelValue.value.includes(trimmed)) return;
|
|
3483
|
+
modelValue.value = [...modelValue.value, trimmed];
|
|
3484
|
+
inputValue.value = "";
|
|
3485
|
+
}
|
|
3486
|
+
function removeTag(index) {
|
|
3487
|
+
if (props.disabled) return;
|
|
3488
|
+
modelValue.value = modelValue.value.filter((_, i) => i !== index);
|
|
3489
|
+
}
|
|
3490
|
+
function handleKeydown(event) {
|
|
3491
|
+
if (event.key === "Enter" || event.key === ",") {
|
|
3492
|
+
event.preventDefault();
|
|
3493
|
+
addTag(inputValue.value);
|
|
3494
|
+
} else if (event.key === "Backspace" && !inputValue.value && modelValue.value.length > 0) {
|
|
3495
|
+
removeTag(modelValue.value.length - 1);
|
|
3496
|
+
}
|
|
3497
|
+
}
|
|
3498
|
+
function handleBlur() {
|
|
3499
|
+
if (inputValue.value) {
|
|
3500
|
+
addTag(inputValue.value);
|
|
3501
|
+
}
|
|
3502
|
+
}
|
|
3503
|
+
function focusInput() {
|
|
3504
|
+
var _a;
|
|
3505
|
+
(_a = inputRef.value) == null ? void 0 : _a.focus();
|
|
3506
|
+
}
|
|
3507
|
+
__expose({ focus: focusInput });
|
|
3508
|
+
return (_ctx, _cache) => {
|
|
3509
|
+
return openBlock(), createElementBlock("div", {
|
|
3510
|
+
class: normalizeClass([
|
|
3511
|
+
"flex flex-wrap items-center rounded-xl border transition-all cursor-text",
|
|
3512
|
+
"bg-gray-50 dark:bg-slate-700",
|
|
3513
|
+
"border-gray-200 dark:border-slate-600",
|
|
3514
|
+
"focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:bg-white dark:focus-within:bg-slate-600",
|
|
3515
|
+
__props.disabled && "opacity-50 cursor-not-allowed",
|
|
3516
|
+
sizeClasses.value.wrapper
|
|
3517
|
+
]),
|
|
3518
|
+
onClick: focusInput
|
|
3519
|
+
}, [
|
|
3520
|
+
createVNode(TransitionGroup, {
|
|
3521
|
+
name: "tag",
|
|
3522
|
+
tag: "div",
|
|
3523
|
+
class: "flex flex-wrap gap-1.5"
|
|
3524
|
+
}, {
|
|
3525
|
+
default: withCtx(() => [
|
|
3526
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(modelValue.value, (tag, index) => {
|
|
3527
|
+
return openBlock(), createElementBlock("span", {
|
|
3528
|
+
key: tag + index,
|
|
3529
|
+
class: normalizeClass([
|
|
3530
|
+
"inline-flex items-center gap-1 rounded-lg font-medium",
|
|
3531
|
+
"bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300",
|
|
3532
|
+
sizeClasses.value.tag
|
|
3533
|
+
])
|
|
3534
|
+
}, [
|
|
3535
|
+
createTextVNode(toDisplayString(tag) + " ", 1),
|
|
3536
|
+
!__props.disabled ? (openBlock(), createElementBlock("button", {
|
|
3537
|
+
key: 0,
|
|
3538
|
+
type: "button",
|
|
3539
|
+
class: "rounded-full hover:bg-primary-200 dark:hover:bg-primary-800/50 transition-colors p-0.5",
|
|
3540
|
+
onClick: withModifiers(($event) => removeTag(index), ["stop"])
|
|
3541
|
+
}, [
|
|
3542
|
+
createVNode(unref(Icon), {
|
|
3543
|
+
icon: "lucide:x",
|
|
3544
|
+
class: normalizeClass(["text-primary-500", sizeClasses.value.icon])
|
|
3545
|
+
}, null, 8, ["class"])
|
|
3546
|
+
], 8, _hoisted_1)) : createCommentVNode("", true)
|
|
3547
|
+
], 2);
|
|
3548
|
+
}), 128))
|
|
3549
|
+
]),
|
|
3550
|
+
_: 1
|
|
3551
|
+
}),
|
|
3552
|
+
canAddMore.value ? withDirectives((openBlock(), createElementBlock("input", {
|
|
3553
|
+
key: 0,
|
|
3554
|
+
id: __props.id ?? __props.name,
|
|
3555
|
+
ref_key: "inputRef",
|
|
3556
|
+
ref: inputRef,
|
|
3557
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
|
|
3558
|
+
type: "text",
|
|
3559
|
+
name: __props.name,
|
|
3560
|
+
placeholder: modelValue.value.length === 0 ? __props.placeholder : "",
|
|
3561
|
+
disabled: __props.disabled,
|
|
3562
|
+
required: __props.required && modelValue.value.length === 0,
|
|
3563
|
+
class: normalizeClass([
|
|
3564
|
+
"flex-1 min-w-20 bg-transparent border-none focus:outline-none",
|
|
3565
|
+
"text-gray-900 dark:text-white placeholder-gray-400",
|
|
3566
|
+
sizeClasses.value.input
|
|
3567
|
+
]),
|
|
3568
|
+
onKeydown: handleKeydown,
|
|
3569
|
+
onBlur: handleBlur
|
|
3570
|
+
}, null, 42, _hoisted_2)), [
|
|
3571
|
+
[vModelText, inputValue.value]
|
|
3572
|
+
]) : createCommentVNode("", true)
|
|
3573
|
+
], 2);
|
|
3574
|
+
};
|
|
3575
|
+
}
|
|
3576
|
+
});
|
|
3577
|
+
const TagsInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7949bfa4"]]);
|
|
2299
3578
|
export {
|
|
2300
3579
|
Slider as S,
|
|
2301
|
-
|
|
2302
|
-
_sfc_main$
|
|
2303
|
-
_sfc_main$
|
|
2304
|
-
_sfc_main$
|
|
2305
|
-
_sfc_main$
|
|
2306
|
-
_sfc_main$
|
|
2307
|
-
_sfc_main$
|
|
2308
|
-
_sfc_main$
|
|
2309
|
-
_sfc_main$
|
|
2310
|
-
_sfc_main$
|
|
2311
|
-
_sfc_main$
|
|
2312
|
-
_sfc_main$
|
|
2313
|
-
_sfc_main$
|
|
2314
|
-
_sfc_main$
|
|
2315
|
-
_sfc_main$
|
|
2316
|
-
_sfc_main as
|
|
3580
|
+
TagsInput as T,
|
|
3581
|
+
_sfc_main$r as _,
|
|
3582
|
+
_sfc_main$q as a,
|
|
3583
|
+
_sfc_main$p as b,
|
|
3584
|
+
_sfc_main$o as c,
|
|
3585
|
+
_sfc_main$n as d,
|
|
3586
|
+
_sfc_main$m as e,
|
|
3587
|
+
_sfc_main$l as f,
|
|
3588
|
+
_sfc_main$j as g,
|
|
3589
|
+
_sfc_main$i as h,
|
|
3590
|
+
_sfc_main$h as i,
|
|
3591
|
+
_sfc_main$g as j,
|
|
3592
|
+
_sfc_main$f as k,
|
|
3593
|
+
_sfc_main$e as l,
|
|
3594
|
+
_sfc_main$d as m,
|
|
3595
|
+
_sfc_main$c as n,
|
|
3596
|
+
_sfc_main$b as o,
|
|
3597
|
+
_sfc_main$a as p,
|
|
3598
|
+
_sfc_main$9 as q,
|
|
3599
|
+
_sfc_main$8 as r,
|
|
3600
|
+
_sfc_main$7 as s,
|
|
3601
|
+
_sfc_main$6 as t,
|
|
3602
|
+
_sfc_main$5 as u,
|
|
3603
|
+
_sfc_main$4 as v,
|
|
3604
|
+
_sfc_main$3 as w,
|
|
3605
|
+
_sfc_main$2 as x,
|
|
3606
|
+
_sfc_main$1 as y
|
|
2317
3607
|
};
|
|
2318
|
-
//# sourceMappingURL=
|
|
3608
|
+
//# sourceMappingURL=TagsInput-C4wBPfrj.js.map
|