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