cisse-vue-ui 0.3.2 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +666 -666
- package/dist/BadgeType.vue_vue_type_script_setup_true_lang-CJb63H1I.cjs.map +1 -1
- package/dist/BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js.map +1 -1
- package/dist/Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js.map +1 -1
- package/dist/Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs.map +1 -1
- package/dist/{Dropdown.vue_vue_type_script_setup_true_lang-B9DsCY8M.js → Dropdown.vue_vue_type_script_setup_true_lang-C3pr8BwC.js} +2 -2
- package/dist/Dropdown.vue_vue_type_script_setup_true_lang-C3pr8BwC.js.map +1 -0
- package/dist/{Dropdown.vue_vue_type_script_setup_true_lang-nMP2OxXp.cjs → Dropdown.vue_vue_type_script_setup_true_lang-DKxcVBKu.cjs} +2 -2
- package/dist/Dropdown.vue_vue_type_script_setup_true_lang-DKxcVBKu.cjs.map +1 -0
- package/dist/{PageLayout.vue_vue_type_script_setup_true_lang-Bnw5L-xO.cjs → PageLayout.vue_vue_type_script_setup_true_lang-1rNUMab6.cjs} +2 -2
- package/dist/PageLayout.vue_vue_type_script_setup_true_lang-1rNUMab6.cjs.map +1 -0
- package/dist/{PageLayout.vue_vue_type_script_setup_true_lang-D8uD3-Fe.js → PageLayout.vue_vue_type_script_setup_true_lang-DLfqj6EP.js} +2 -2
- package/dist/PageLayout.vue_vue_type_script_setup_true_lang-DLfqj6EP.js.map +1 -0
- package/dist/{DatePicker.vue_vue_type_script_setup_true_lang-CxddOiV4.cjs → RangeSlider.vue_vue_type_script_setup_true_lang-BRNkkx89.cjs} +715 -100
- package/dist/RangeSlider.vue_vue_type_script_setup_true_lang-BRNkkx89.cjs.map +1 -0
- package/dist/{DatePicker.vue_vue_type_script_setup_true_lang-DKDcnO28.js → RangeSlider.vue_vue_type_script_setup_true_lang-DD9UxnCU.js} +716 -101
- package/dist/RangeSlider.vue_vue_type_script_setup_true_lang-DD9UxnCU.js.map +1 -0
- package/dist/{Skeleton.vue_vue_type_script_setup_true_lang-DRC4EADS.js → Skeleton.vue_vue_type_script_setup_true_lang-BcWF7mwz.js} +2 -2
- package/dist/Skeleton.vue_vue_type_script_setup_true_lang-BcWF7mwz.js.map +1 -0
- package/dist/{Skeleton.vue_vue_type_script_setup_true_lang-D2S5g9s5.cjs → Skeleton.vue_vue_type_script_setup_true_lang-D-2qAhyG.cjs} +2 -2
- package/dist/Skeleton.vue_vue_type_script_setup_true_lang-D-2qAhyG.cjs.map +1 -0
- package/dist/{Popover.vue_vue_type_script_setup_true_lang-Q7gRZsT9.js → Timeline.vue_vue_type_script_setup_true_lang-BWIfzQOG.js} +591 -135
- package/dist/Timeline.vue_vue_type_script_setup_true_lang-BWIfzQOG.js.map +1 -0
- package/dist/{Popover.vue_vue_type_script_setup_true_lang-dvlDTcf1.cjs → Timeline.vue_vue_type_script_setup_true_lang-C2Mq4XOO.cjs} +578 -122
- package/dist/Timeline.vue_vue_type_script_setup_true_lang-C2Mq4XOO.cjs.map +1 -0
- package/dist/cisse-vue-ui.css +51 -51
- package/dist/components/core/Accordion.stories.d.ts +11 -0
- package/dist/components/core/Accordion.test.d.ts +1 -0
- package/dist/components/core/Accordion.vue.d.ts +27 -0
- package/dist/components/core/AccordionItem.vue.d.ts +27 -0
- package/dist/components/core/AutocompleteComponent.test.d.ts +1 -0
- package/dist/components/core/Breadcrumb.stories.d.ts +11 -0
- package/dist/components/core/Breadcrumb.test.d.ts +1 -0
- package/dist/components/core/Breadcrumb.vue.d.ts +26 -0
- package/dist/components/core/CardComponent.test.d.ts +1 -0
- package/dist/components/core/CollapsibleCard.test.d.ts +1 -0
- package/dist/components/core/Drawer.stories.d.ts +12 -0
- package/dist/components/core/Drawer.test.d.ts +1 -0
- package/dist/components/core/Drawer.vue.d.ts +50 -0
- package/dist/components/core/Dropdown.test.d.ts +1 -0
- package/dist/components/core/MenuItem.test.d.ts +1 -0
- package/dist/components/core/MobileList.test.d.ts +1 -0
- package/dist/components/core/Popover.test.d.ts +1 -0
- package/dist/components/core/ResponsiveList.test.d.ts +1 -0
- package/dist/components/core/StatusBadge.test.d.ts +1 -0
- package/dist/components/core/Stepper.test.d.ts +1 -0
- package/dist/components/core/TabPanel.test.d.ts +1 -0
- package/dist/components/core/TableAction.test.d.ts +1 -0
- package/dist/components/core/TableComponent.test.d.ts +1 -0
- package/dist/components/core/Tabs.test.d.ts +1 -0
- package/dist/components/core/Timeline.stories.d.ts +11 -0
- package/dist/components/core/Timeline.test.d.ts +1 -0
- package/dist/components/core/Timeline.vue.d.ts +34 -0
- package/dist/components/core/index.cjs +21 -16
- package/dist/components/core/index.cjs.map +1 -1
- package/dist/components/core/index.d.ts +9 -0
- package/dist/components/core/index.js +7 -2
- package/dist/components/feedback/EmptyState.test.d.ts +1 -0
- package/dist/components/feedback/LoadingSpinner.test.d.ts +1 -0
- package/dist/components/feedback/NotificationComponent.test.d.ts +1 -0
- package/dist/components/feedback/NotificationList.test.d.ts +1 -0
- package/dist/components/feedback/PaginationControls.test.d.ts +1 -0
- package/dist/components/feedback/Toast.test.d.ts +1 -0
- package/dist/components/feedback/ToastContainer.test.d.ts +1 -0
- package/dist/components/feedback/index.cjs +1 -1
- package/dist/components/feedback/index.js +1 -1
- package/dist/components/form/Checkbox.test.d.ts +1 -0
- package/dist/components/form/ColorPicker.stories.d.ts +12 -0
- package/dist/components/form/ColorPicker.test.d.ts +1 -0
- package/dist/components/form/ColorPicker.vue.d.ts +23 -0
- package/dist/components/form/DatePicker.test.d.ts +1 -0
- package/dist/components/form/FileUpload.stories.d.ts +12 -0
- package/dist/components/form/FileUpload.test.d.ts +1 -0
- package/dist/components/form/FileUpload.vue.d.ts +40 -0
- package/dist/components/form/FormGroup.test.d.ts +1 -0
- package/dist/components/form/FormHelp.test.d.ts +1 -0
- package/dist/components/form/FormInput.test.d.ts +1 -0
- package/dist/components/form/FormLabel.test.d.ts +1 -0
- package/dist/components/form/FormSelect.test.d.ts +1 -0
- package/dist/components/form/RangeSlider.stories.d.ts +13 -0
- package/dist/components/form/RangeSlider.test.d.ts +1 -0
- package/dist/components/form/RangeSlider.vue.d.ts +35 -0
- package/dist/components/form/Rating.stories.d.ts +16 -0
- package/dist/components/form/Rating.test.d.ts +1 -0
- package/dist/components/form/Rating.vue.d.ts +43 -0
- package/dist/components/form/SearchInput.test.d.ts +1 -0
- package/dist/components/form/Slider.test.d.ts +1 -0
- package/dist/components/form/Switch.test.d.ts +1 -0
- package/dist/components/form/index.cjs +14 -10
- package/dist/components/form/index.cjs.map +1 -1
- package/dist/components/form/index.d.ts +6 -0
- package/dist/components/form/index.js +5 -1
- package/dist/components/index.cjs +37 -28
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.js +16 -7
- package/dist/components/layout/BaseLayout.test.d.ts +1 -0
- package/dist/components/layout/PageLayout.test.d.ts +1 -0
- package/dist/components/layout/PageLayout.vue.d.ts +3 -3
- package/dist/components/layout/index.cjs +1 -1
- package/dist/components/layout/index.d.ts +1 -1
- package/dist/components/layout/index.js +1 -1
- package/dist/components/type/BadgeType.test.d.ts +1 -0
- package/dist/components/type/BooleanType.test.d.ts +1 -0
- package/dist/components/type/DateType.test.d.ts +1 -0
- package/dist/components/type/NumberType.test.d.ts +1 -0
- package/dist/components/type/TextType.test.d.ts +1 -0
- package/dist/index-B4NFaDHr.cjs +67 -0
- package/dist/index-B4NFaDHr.cjs.map +1 -0
- package/dist/index-C2DRkEjb.js +68 -0
- package/dist/index-C2DRkEjb.js.map +1 -0
- package/dist/index.cjs +38 -29
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +17 -8
- package/dist/style.css +2 -2
- package/dist/types/components.d.ts +1 -1
- package/dist/useDropdown-DHFnd259.cjs.map +1 -1
- package/dist/useDropdown-iVu14E6s.js.map +1 -1
- package/dist/useToast-DT9hFfpM.js.map +1 -1
- package/dist/useToast-nJXpFz_M.cjs.map +1 -1
- package/package.json +7 -2
- package/dist/DatePicker.vue_vue_type_script_setup_true_lang-CxddOiV4.cjs.map +0 -1
- package/dist/DatePicker.vue_vue_type_script_setup_true_lang-DKDcnO28.js.map +0 -1
- package/dist/Dropdown.vue_vue_type_script_setup_true_lang-B9DsCY8M.js.map +0 -1
- package/dist/Dropdown.vue_vue_type_script_setup_true_lang-nMP2OxXp.cjs.map +0 -1
- package/dist/PageLayout.vue_vue_type_script_setup_true_lang-Bnw5L-xO.cjs.map +0 -1
- package/dist/PageLayout.vue_vue_type_script_setup_true_lang-D8uD3-Fe.js.map +0 -1
- package/dist/Popover.vue_vue_type_script_setup_true_lang-Q7gRZsT9.js.map +0 -1
- package/dist/Popover.vue_vue_type_script_setup_true_lang-dvlDTcf1.cjs.map +0 -1
- package/dist/Skeleton.vue_vue_type_script_setup_true_lang-D2S5g9s5.cjs.map +0 -1
- package/dist/Skeleton.vue_vue_type_script_setup_true_lang-DRC4EADS.js.map +0 -1
- package/dist/index-DNndxsOE.cjs +0 -58
- package/dist/index-DNndxsOE.cjs.map +0 -1
- package/dist/index-_NEu9rf2.js +0 -59
- package/dist/index-_NEu9rf2.js.map +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent, createElementBlock, openBlock, renderSlot, createTextVNode, toDisplayString, mergeModels, useModel, withDirectives, mergeProps, vModelDynamic, ref, computed, watch, createElementVNode, createBlock, normalizeClass, createVNode, unref, Teleport, Transition, withCtx, createCommentVNode, normalizeStyle, vModelText, Fragment, renderList, nextTick, withModifiers } from "vue";
|
|
1
|
+
import { defineComponent, createElementBlock, openBlock, renderSlot, createTextVNode, toDisplayString, mergeModels, useModel, withDirectives, mergeProps, vModelDynamic, ref, computed, watch, createElementVNode, createBlock, normalizeClass, createVNode, unref, Teleport, Transition, withCtx, createCommentVNode, normalizeStyle, vModelText, Fragment, renderList, nextTick, withModifiers, withKeys } from "vue";
|
|
2
2
|
import { Icon } from "@iconify/vue";
|
|
3
3
|
import { u as useDropdown } from "./useDropdown-iVu14E6s.js";
|
|
4
4
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
|
|
5
|
-
const _hoisted_1$
|
|
6
|
-
const _sfc_main$
|
|
5
|
+
const _hoisted_1$c = ["data-error", "for"];
|
|
6
|
+
const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
7
7
|
__name: "FormLabel",
|
|
8
8
|
props: {
|
|
9
9
|
error: { type: [String, Boolean] },
|
|
@@ -17,12 +17,12 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
17
17
|
class: "block text-sm font-medium text-gray-700 data-[error=true]:text-red-500 dark:text-gray-300"
|
|
18
18
|
}, [
|
|
19
19
|
renderSlot(_ctx.$slots, "default")
|
|
20
|
-
], 8, _hoisted_1$
|
|
20
|
+
], 8, _hoisted_1$c);
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
const _hoisted_1$
|
|
25
|
-
const _sfc_main$
|
|
24
|
+
const _hoisted_1$b = ["data-error"];
|
|
25
|
+
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
26
26
|
__name: "FormHelp",
|
|
27
27
|
props: {
|
|
28
28
|
error: { type: Boolean },
|
|
@@ -37,12 +37,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
37
37
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
38
38
|
createTextVNode(toDisplayString(__props.text ?? ""), 1)
|
|
39
39
|
])
|
|
40
|
-
], 8, _hoisted_1$
|
|
40
|
+
], 8, _hoisted_1$b);
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
|
-
const _hoisted_1$
|
|
45
|
-
const _sfc_main$
|
|
44
|
+
const _hoisted_1$a = ["id", "disabled", "name", "placeholder", "type"];
|
|
45
|
+
const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
46
46
|
__name: "FormInput",
|
|
47
47
|
props: /* @__PURE__ */ mergeModels({
|
|
48
48
|
type: { default: "text" },
|
|
@@ -68,32 +68,32 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
68
68
|
placeholder: __props.placeholder,
|
|
69
69
|
type: __props.type,
|
|
70
70
|
class: "mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-gray-400 shadow-sm invalid:border-red-500 invalid:text-red-600 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none focus:invalid:border-red-500 focus:invalid:ring-red-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:placeholder-gray-500 dark:focus:border-primary dark:focus:ring-primary dark:disabled:border-gray-800 dark:disabled:bg-gray-950 dark:disabled:text-gray-500"
|
|
71
|
-
}, _ctx.$attrs), null, 16, _hoisted_1$
|
|
71
|
+
}, _ctx.$attrs), null, 16, _hoisted_1$a)), [
|
|
72
72
|
[vModelDynamic, modelValue.value]
|
|
73
73
|
]);
|
|
74
74
|
};
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
|
-
const _hoisted_1$
|
|
78
|
-
const _hoisted_2$
|
|
79
|
-
const _hoisted_3$
|
|
80
|
-
const _hoisted_4$
|
|
77
|
+
const _hoisted_1$9 = { class: "relative" };
|
|
78
|
+
const _hoisted_2$8 = ["id", "disabled"];
|
|
79
|
+
const _hoisted_3$7 = { class: "flex-1 truncate" };
|
|
80
|
+
const _hoisted_4$5 = {
|
|
81
81
|
key: 0,
|
|
82
82
|
class: "sticky top-0 border-b border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-gray-800"
|
|
83
83
|
};
|
|
84
|
-
const _hoisted_5$
|
|
85
|
-
const _hoisted_6$
|
|
84
|
+
const _hoisted_5$4 = { 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" };
|
|
85
|
+
const _hoisted_6$4 = {
|
|
86
86
|
key: 1,
|
|
87
87
|
class: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
|
|
88
88
|
};
|
|
89
|
-
const _hoisted_7$
|
|
90
|
-
const _hoisted_8$
|
|
91
|
-
const _hoisted_9$
|
|
89
|
+
const _hoisted_7$4 = { class: "py-1" };
|
|
90
|
+
const _hoisted_8$4 = ["data-index", "onClick", "onMouseenter"];
|
|
91
|
+
const _hoisted_9$2 = {
|
|
92
92
|
key: 1,
|
|
93
93
|
class: "size-4 shrink-0"
|
|
94
94
|
};
|
|
95
|
-
const _hoisted_10$
|
|
96
|
-
const _sfc_main$
|
|
95
|
+
const _hoisted_10$2 = { class: "flex-1" };
|
|
96
|
+
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
97
97
|
__name: "FormSelect",
|
|
98
98
|
props: /* @__PURE__ */ mergeModels({
|
|
99
99
|
options: {},
|
|
@@ -206,12 +206,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
206
206
|
return [base, state, text, props.triggerClass];
|
|
207
207
|
});
|
|
208
208
|
return (_ctx, _cache) => {
|
|
209
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
209
|
+
return openBlock(), createElementBlock("div", _hoisted_1$9, [
|
|
210
210
|
createElementVNode("button", {
|
|
211
|
+
id: __props.id ?? __props.name ?? void 0,
|
|
211
212
|
ref_key: "triggerRef",
|
|
212
213
|
ref: triggerRef,
|
|
213
214
|
type: "button",
|
|
214
|
-
id: __props.id ?? __props.name ?? void 0,
|
|
215
215
|
disabled: __props.disabled,
|
|
216
216
|
class: normalizeClass(triggerClasses.value),
|
|
217
217
|
onClick: toggle,
|
|
@@ -221,13 +221,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
221
221
|
option: selectedOption.value,
|
|
222
222
|
placeholder: __props.placeholder
|
|
223
223
|
}, () => [
|
|
224
|
-
createElementVNode("span", _hoisted_3$
|
|
224
|
+
createElementVNode("span", _hoisted_3$7, toDisplayString(displayValue.value), 1)
|
|
225
225
|
]),
|
|
226
226
|
createVNode(unref(Icon), {
|
|
227
227
|
icon: "lucide:chevron-down",
|
|
228
228
|
class: normalizeClass(["size-4 shrink-0 text-gray-400 transition-transform", unref(isOpen) && "rotate-180"])
|
|
229
229
|
}, null, 8, ["class"])
|
|
230
|
-
], 42, _hoisted_2$
|
|
230
|
+
], 42, _hoisted_2$8),
|
|
231
231
|
(openBlock(), createBlock(Teleport, {
|
|
232
232
|
to: "body",
|
|
233
233
|
disabled: !__props.teleport
|
|
@@ -251,8 +251,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
251
251
|
!__props.teleport && "absolute mt-1 w-full"
|
|
252
252
|
])
|
|
253
253
|
}, [
|
|
254
|
-
__props.searchable ? (openBlock(), createElementBlock("div", _hoisted_4$
|
|
255
|
-
createElementVNode("div", _hoisted_5$
|
|
254
|
+
__props.searchable ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
|
|
255
|
+
createElementVNode("div", _hoisted_5$4, [
|
|
256
256
|
createVNode(unref(Icon), {
|
|
257
257
|
icon: "lucide:search",
|
|
258
258
|
class: "size-4 text-gray-400"
|
|
@@ -270,8 +270,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
270
270
|
])
|
|
271
271
|
])
|
|
272
272
|
])) : createCommentVNode("", true),
|
|
273
|
-
filteredOptions.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_6$
|
|
274
|
-
createElementVNode("div", _hoisted_7$
|
|
273
|
+
filteredOptions.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_6$4, toDisplayString(__props.noResultsText), 1)) : createCommentVNode("", true),
|
|
274
|
+
createElementVNode("div", _hoisted_7$4, [
|
|
275
275
|
(openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (option, index) => {
|
|
276
276
|
return openBlock(), createElementBlock("button", {
|
|
277
277
|
key: String(option.value),
|
|
@@ -295,10 +295,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
295
295
|
key: 0,
|
|
296
296
|
icon: "lucide:check",
|
|
297
297
|
class: "size-4 shrink-0 text-primary"
|
|
298
|
-
})) : (openBlock(), createElementBlock("span", _hoisted_9$
|
|
299
|
-
createElementVNode("span", _hoisted_10$
|
|
298
|
+
})) : (openBlock(), createElementBlock("span", _hoisted_9$2)),
|
|
299
|
+
createElementVNode("span", _hoisted_10$2, toDisplayString(option.label), 1)
|
|
300
300
|
])
|
|
301
|
-
], 42, _hoisted_8$
|
|
301
|
+
], 42, _hoisted_8$4);
|
|
302
302
|
}), 128))
|
|
303
303
|
])
|
|
304
304
|
], 6)) : createCommentVNode("", true)
|
|
@@ -310,8 +310,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
310
310
|
};
|
|
311
311
|
}
|
|
312
312
|
});
|
|
313
|
-
const _hoisted_1$
|
|
314
|
-
const _sfc_main$
|
|
313
|
+
const _hoisted_1$8 = ["hidden"];
|
|
314
|
+
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
315
315
|
__name: "FormGroup",
|
|
316
316
|
props: /* @__PURE__ */ mergeModels({
|
|
317
317
|
label: {},
|
|
@@ -344,7 +344,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
344
344
|
}, [
|
|
345
345
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
346
346
|
renderSlot(_ctx.$slots, "label", {}, () => [
|
|
347
|
-
__props.label ? (openBlock(), createBlock(_sfc_main$
|
|
347
|
+
__props.label ? (openBlock(), createBlock(_sfc_main$c, {
|
|
348
348
|
key: 0,
|
|
349
349
|
"html-for": __props.id ?? __props.name,
|
|
350
350
|
error: __props.error
|
|
@@ -356,17 +356,17 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
356
356
|
}, 8, ["html-for", "error"])) : createCommentVNode("", true)
|
|
357
357
|
]),
|
|
358
358
|
renderSlot(_ctx.$slots, "input", {}, () => [
|
|
359
|
-
isSelect.value ? (openBlock(), createBlock(_sfc_main$
|
|
359
|
+
isSelect.value ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
|
|
360
360
|
key: 0,
|
|
361
361
|
modelValue: modelValue.value,
|
|
362
362
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
|
|
363
|
-
}, { ..._ctx.$attrs, ..._ctx.$props }), null, 16, ["modelValue"])) : (openBlock(), createBlock(_sfc_main$
|
|
363
|
+
}, { ..._ctx.$attrs, ..._ctx.$props }), null, 16, ["modelValue"])) : (openBlock(), createBlock(_sfc_main$a, mergeProps({
|
|
364
364
|
key: 1,
|
|
365
365
|
modelValue: modelValue.value,
|
|
366
366
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event)
|
|
367
367
|
}, { ..._ctx.$attrs, ..._ctx.$props }), null, 16, ["modelValue"]))
|
|
368
368
|
]),
|
|
369
|
-
__props.error && typeof __props.error === "string" ? (openBlock(), createBlock(_sfc_main$
|
|
369
|
+
__props.error && typeof __props.error === "string" ? (openBlock(), createBlock(_sfc_main$b, {
|
|
370
370
|
key: 0,
|
|
371
371
|
error: true
|
|
372
372
|
}, {
|
|
@@ -376,13 +376,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
376
376
|
_: 1
|
|
377
377
|
})) : createCommentVNode("", true)
|
|
378
378
|
])
|
|
379
|
-
], 12, _hoisted_1$
|
|
379
|
+
], 12, _hoisted_1$8);
|
|
380
380
|
};
|
|
381
381
|
}
|
|
382
382
|
});
|
|
383
|
-
const _hoisted_1$
|
|
384
|
-
const _hoisted_2$
|
|
385
|
-
const _sfc_main$
|
|
383
|
+
const _hoisted_1$7 = { class: "relative" };
|
|
384
|
+
const _hoisted_2$7 = ["disabled", "placeholder", "value"];
|
|
385
|
+
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
386
386
|
__name: "SearchInput",
|
|
387
387
|
props: {
|
|
388
388
|
modelValue: {},
|
|
@@ -398,7 +398,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
398
398
|
emit("update:modelValue", target.value);
|
|
399
399
|
};
|
|
400
400
|
return (_ctx, _cache) => {
|
|
401
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
401
|
+
return openBlock(), createElementBlock("div", _hoisted_1$7, [
|
|
402
402
|
createVNode(unref(Icon), {
|
|
403
403
|
icon: __props.icon,
|
|
404
404
|
class: "absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400"
|
|
@@ -410,25 +410,25 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
410
410
|
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",
|
|
411
411
|
type: "text",
|
|
412
412
|
onInput: handleInput
|
|
413
|
-
}, null, 40, _hoisted_2$
|
|
413
|
+
}, null, 40, _hoisted_2$7)
|
|
414
414
|
]);
|
|
415
415
|
};
|
|
416
416
|
}
|
|
417
417
|
});
|
|
418
|
-
const _hoisted_1$
|
|
419
|
-
const _hoisted_2$
|
|
418
|
+
const _hoisted_1$6 = ["aria-checked", "disabled"];
|
|
419
|
+
const _hoisted_2$6 = {
|
|
420
420
|
key: 0,
|
|
421
421
|
class: "flex flex-col"
|
|
422
422
|
};
|
|
423
|
-
const _hoisted_3$
|
|
423
|
+
const _hoisted_3$6 = {
|
|
424
424
|
key: 0,
|
|
425
425
|
class: "text-sm font-medium text-gray-900 dark:text-white"
|
|
426
426
|
};
|
|
427
|
-
const _hoisted_4$
|
|
427
|
+
const _hoisted_4$4 = {
|
|
428
428
|
key: 1,
|
|
429
429
|
class: "text-sm text-gray-500 dark:text-gray-400"
|
|
430
430
|
};
|
|
431
|
-
const _sfc_main$
|
|
431
|
+
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
432
432
|
__name: "Switch",
|
|
433
433
|
props: {
|
|
434
434
|
modelValue: { type: Boolean, default: false },
|
|
@@ -483,27 +483,27 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
483
483
|
__props.modelValue ? translateSizes[__props.size] : "translate-x-1"
|
|
484
484
|
])
|
|
485
485
|
}, null, 2)
|
|
486
|
-
], 10, _hoisted_1$
|
|
487
|
-
__props.label || __props.description ? (openBlock(), createElementBlock("div", _hoisted_2$
|
|
488
|
-
__props.label ? (openBlock(), createElementBlock("span", _hoisted_3$
|
|
489
|
-
__props.description ? (openBlock(), createElementBlock("span", _hoisted_4$
|
|
486
|
+
], 10, _hoisted_1$6),
|
|
487
|
+
__props.label || __props.description ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
|
|
488
|
+
__props.label ? (openBlock(), createElementBlock("span", _hoisted_3$6, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
|
|
489
|
+
__props.description ? (openBlock(), createElementBlock("span", _hoisted_4$4, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
|
|
490
490
|
])) : createCommentVNode("", true)
|
|
491
491
|
], 2);
|
|
492
492
|
};
|
|
493
493
|
}
|
|
494
494
|
});
|
|
495
|
-
const _hoisted_1$
|
|
496
|
-
const _hoisted_2$
|
|
495
|
+
const _hoisted_1$5 = { class: "w-full" };
|
|
496
|
+
const _hoisted_2$5 = {
|
|
497
497
|
key: 0,
|
|
498
498
|
class: "mb-2 flex justify-between text-sm"
|
|
499
499
|
};
|
|
500
|
-
const _hoisted_3$
|
|
501
|
-
const _hoisted_4$
|
|
502
|
-
const _hoisted_5$
|
|
503
|
-
const _hoisted_6$
|
|
504
|
-
const _hoisted_7$
|
|
505
|
-
const _hoisted_8$
|
|
506
|
-
const _sfc_main$
|
|
500
|
+
const _hoisted_3$5 = { class: "text-gray-600 dark:text-gray-400" };
|
|
501
|
+
const _hoisted_4$3 = { class: "font-medium text-gray-900 dark:text-white" };
|
|
502
|
+
const _hoisted_5$3 = { class: "text-gray-600 dark:text-gray-400" };
|
|
503
|
+
const _hoisted_6$3 = { class: "relative" };
|
|
504
|
+
const _hoisted_7$3 = ["value", "min", "max", "step", "disabled"];
|
|
505
|
+
const _hoisted_8$3 = { class: "pointer-events-none absolute inset-y-0 left-0 flex items-center" };
|
|
506
|
+
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
507
507
|
__name: "Slider",
|
|
508
508
|
props: /* @__PURE__ */ mergeModels({
|
|
509
509
|
min: { default: 0 },
|
|
@@ -534,13 +534,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
534
534
|
modelValue.value = Number(target.value);
|
|
535
535
|
};
|
|
536
536
|
return (_ctx, _cache) => {
|
|
537
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
538
|
-
__props.showValue ? (openBlock(), createElementBlock("div", _hoisted_2$
|
|
539
|
-
createElementVNode("span", _hoisted_3$
|
|
540
|
-
createElementVNode("span", _hoisted_4$
|
|
541
|
-
createElementVNode("span", _hoisted_5$
|
|
537
|
+
return openBlock(), createElementBlock("div", _hoisted_1$5, [
|
|
538
|
+
__props.showValue ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
|
|
539
|
+
createElementVNode("span", _hoisted_3$5, toDisplayString(__props.min), 1),
|
|
540
|
+
createElementVNode("span", _hoisted_4$3, toDisplayString(displayValue.value), 1),
|
|
541
|
+
createElementVNode("span", _hoisted_5$3, toDisplayString(__props.max), 1)
|
|
542
542
|
])) : createCommentVNode("", true),
|
|
543
|
-
createElementVNode("div", _hoisted_6$
|
|
543
|
+
createElementVNode("div", _hoisted_6$3, [
|
|
544
544
|
createElementVNode("input", {
|
|
545
545
|
type: "range",
|
|
546
546
|
value: modelValue.value,
|
|
@@ -550,8 +550,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
550
550
|
disabled: __props.disabled,
|
|
551
551
|
class: "slider-input w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
|
|
552
552
|
onInput: handleInput
|
|
553
|
-
}, null, 40, _hoisted_7$
|
|
554
|
-
createElementVNode("div", _hoisted_8$
|
|
553
|
+
}, null, 40, _hoisted_7$3),
|
|
554
|
+
createElementVNode("div", _hoisted_8$3, [
|
|
555
555
|
createElementVNode("div", {
|
|
556
556
|
class: "h-2 rounded-full bg-primary",
|
|
557
557
|
style: normalizeStyle({ width: `${percentage.value}%` })
|
|
@@ -562,18 +562,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
562
562
|
};
|
|
563
563
|
}
|
|
564
564
|
});
|
|
565
|
-
const Slider = /* @__PURE__ */ _export_sfc(_sfc_main$
|
|
566
|
-
const _hoisted_1 = { class: "relative" };
|
|
567
|
-
const _hoisted_2 = ["disabled"];
|
|
568
|
-
const _hoisted_3 = { class: "flex-1 truncate" };
|
|
569
|
-
const _hoisted_4 = { class: "flex items-center gap-1" };
|
|
570
|
-
const _hoisted_5 = { class: "mb-4 flex items-center justify-between" };
|
|
571
|
-
const _hoisted_6 = { class: "font-medium text-gray-900 dark:text-white" };
|
|
572
|
-
const _hoisted_7 = { class: "mb-2 grid grid-cols-7 gap-1" };
|
|
573
|
-
const _hoisted_8 = { class: "grid grid-cols-7 gap-1" };
|
|
574
|
-
const _hoisted_9 = ["disabled", "onClick"];
|
|
575
|
-
const _hoisted_10 = { class: "mt-4 border-t border-gray-200 pt-3 dark:border-gray-700" };
|
|
576
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
565
|
+
const Slider = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-c25e2c2a"]]);
|
|
566
|
+
const _hoisted_1$4 = { class: "relative" };
|
|
567
|
+
const _hoisted_2$4 = ["disabled"];
|
|
568
|
+
const _hoisted_3$4 = { class: "flex-1 truncate" };
|
|
569
|
+
const _hoisted_4$2 = { class: "flex items-center gap-1" };
|
|
570
|
+
const _hoisted_5$2 = { class: "mb-4 flex items-center justify-between" };
|
|
571
|
+
const _hoisted_6$2 = { class: "font-medium text-gray-900 dark:text-white" };
|
|
572
|
+
const _hoisted_7$2 = { class: "mb-2 grid grid-cols-7 gap-1" };
|
|
573
|
+
const _hoisted_8$2 = { class: "grid grid-cols-7 gap-1" };
|
|
574
|
+
const _hoisted_9$1 = ["disabled", "onClick"];
|
|
575
|
+
const _hoisted_10$1 = { class: "mt-4 border-t border-gray-200 pt-3 dark:border-gray-700" };
|
|
576
|
+
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
577
577
|
__name: "DatePicker",
|
|
578
578
|
props: /* @__PURE__ */ mergeModels({
|
|
579
579
|
placeholder: { default: "Select date" },
|
|
@@ -683,7 +683,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
683
683
|
modelValue.value = null;
|
|
684
684
|
};
|
|
685
685
|
return (_ctx, _cache) => {
|
|
686
|
-
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
686
|
+
return openBlock(), createElementBlock("div", _hoisted_1$4, [
|
|
687
687
|
createElementVNode("button", {
|
|
688
688
|
ref_key: "triggerRef",
|
|
689
689
|
ref: triggerRef,
|
|
@@ -697,8 +697,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
697
697
|
onClick: _cache[0] || (_cache[0] = //@ts-ignore
|
|
698
698
|
(...args) => unref(toggle) && unref(toggle)(...args))
|
|
699
699
|
}, [
|
|
700
|
-
createElementVNode("span", _hoisted_3, toDisplayString(displayValue.value || __props.placeholder), 1),
|
|
701
|
-
createElementVNode("div", _hoisted_4, [
|
|
700
|
+
createElementVNode("span", _hoisted_3$4, toDisplayString(displayValue.value || __props.placeholder), 1),
|
|
701
|
+
createElementVNode("div", _hoisted_4$2, [
|
|
702
702
|
modelValue.value ? (openBlock(), createElementBlock("button", {
|
|
703
703
|
key: 0,
|
|
704
704
|
type: "button",
|
|
@@ -715,7 +715,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
715
715
|
class: "size-4 text-gray-400"
|
|
716
716
|
})
|
|
717
717
|
])
|
|
718
|
-
], 10, _hoisted_2),
|
|
718
|
+
], 10, _hoisted_2$4),
|
|
719
719
|
(openBlock(), createBlock(Teleport, {
|
|
720
720
|
to: "body",
|
|
721
721
|
disabled: !__props.teleport
|
|
@@ -736,7 +736,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
736
736
|
style: normalizeStyle(unref(dropdownStyle)),
|
|
737
737
|
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"
|
|
738
738
|
}, [
|
|
739
|
-
createElementVNode("div", _hoisted_5, [
|
|
739
|
+
createElementVNode("div", _hoisted_5$2, [
|
|
740
740
|
createElementVNode("button", {
|
|
741
741
|
type: "button",
|
|
742
742
|
class: "rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700",
|
|
@@ -747,7 +747,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
747
747
|
class: "size-5 text-gray-600 dark:text-gray-400"
|
|
748
748
|
})
|
|
749
749
|
]),
|
|
750
|
-
createElementVNode("span", _hoisted_6, toDisplayString(monthYear.value), 1),
|
|
750
|
+
createElementVNode("span", _hoisted_6$2, toDisplayString(monthYear.value), 1),
|
|
751
751
|
createElementVNode("button", {
|
|
752
752
|
type: "button",
|
|
753
753
|
class: "rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700",
|
|
@@ -759,7 +759,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
759
759
|
})
|
|
760
760
|
])
|
|
761
761
|
]),
|
|
762
|
-
createElementVNode("div", _hoisted_7, [
|
|
762
|
+
createElementVNode("div", _hoisted_7$2, [
|
|
763
763
|
(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day) => {
|
|
764
764
|
return openBlock(), createElementBlock("div", {
|
|
765
765
|
key: day,
|
|
@@ -767,7 +767,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
767
767
|
}, toDisplayString(day), 1);
|
|
768
768
|
}), 128))
|
|
769
769
|
]),
|
|
770
|
-
createElementVNode("div", _hoisted_8, [
|
|
770
|
+
createElementVNode("div", _hoisted_8$2, [
|
|
771
771
|
(openBlock(true), createElementBlock(Fragment, null, renderList(calendarDays.value, (day, index) => {
|
|
772
772
|
return openBlock(), createElementBlock("button", {
|
|
773
773
|
key: index,
|
|
@@ -782,10 +782,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
782
782
|
day.isSelected && "bg-primary text-white font-semibold"
|
|
783
783
|
]),
|
|
784
784
|
onClick: ($event) => selectDate(day)
|
|
785
|
-
}, toDisplayString(day.date.getDate()), 11, _hoisted_9);
|
|
785
|
+
}, toDisplayString(day.date.getDate()), 11, _hoisted_9$1);
|
|
786
786
|
}), 128))
|
|
787
787
|
]),
|
|
788
|
-
createElementVNode("div", _hoisted_10, [
|
|
788
|
+
createElementVNode("div", _hoisted_10$1, [
|
|
789
789
|
createElementVNode("button", {
|
|
790
790
|
type: "button",
|
|
791
791
|
class: "w-full rounded py-1.5 text-sm font-medium text-primary hover:bg-primary/10",
|
|
@@ -801,15 +801,630 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
801
801
|
};
|
|
802
802
|
}
|
|
803
803
|
});
|
|
804
|
+
const _hoisted_1$3 = { class: "space-y-4" };
|
|
805
|
+
const _hoisted_2$3 = ["accept", "multiple", "disabled"];
|
|
806
|
+
const _hoisted_3$3 = { class: "space-y-2" };
|
|
807
|
+
const _hoisted_4$1 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300" };
|
|
808
|
+
const _hoisted_5$1 = {
|
|
809
|
+
key: 0,
|
|
810
|
+
class: "text-xs text-gray-500 dark:text-gray-400"
|
|
811
|
+
};
|
|
812
|
+
const _hoisted_6$1 = {
|
|
813
|
+
key: 1,
|
|
814
|
+
class: "text-xs text-gray-500 dark:text-gray-400"
|
|
815
|
+
};
|
|
816
|
+
const _hoisted_7$1 = {
|
|
817
|
+
key: 0,
|
|
818
|
+
class: "space-y-2"
|
|
819
|
+
};
|
|
820
|
+
const _hoisted_8$1 = { class: "flex-1 min-w-0" };
|
|
821
|
+
const _hoisted_9 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300 truncate" };
|
|
822
|
+
const _hoisted_10 = { class: "text-xs text-gray-500 dark:text-gray-400" };
|
|
823
|
+
const _hoisted_11 = ["onClick"];
|
|
824
|
+
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
825
|
+
__name: "FileUpload",
|
|
826
|
+
props: {
|
|
827
|
+
accept: {},
|
|
828
|
+
multiple: { type: Boolean, default: false },
|
|
829
|
+
maxSize: {},
|
|
830
|
+
maxFiles: {},
|
|
831
|
+
disabled: { type: Boolean, default: false },
|
|
832
|
+
label: { default: "Drop files here or click to upload" },
|
|
833
|
+
description: { default: "" }
|
|
834
|
+
},
|
|
835
|
+
emits: ["files-selected", "file-removed", "error"],
|
|
836
|
+
setup(__props, { emit: __emit }) {
|
|
837
|
+
const props = __props;
|
|
838
|
+
const emit = __emit;
|
|
839
|
+
const isDragging = ref(false);
|
|
840
|
+
const files = ref([]);
|
|
841
|
+
const inputRef = ref();
|
|
842
|
+
const formatSize = (bytes) => {
|
|
843
|
+
if (bytes === 0) return "0 B";
|
|
844
|
+
const k = 1024;
|
|
845
|
+
const sizes = ["B", "KB", "MB", "GB"];
|
|
846
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
847
|
+
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
|
|
848
|
+
};
|
|
849
|
+
const validateFile = (file) => {
|
|
850
|
+
var _a;
|
|
851
|
+
if (props.maxSize && file.size > props.maxSize) {
|
|
852
|
+
return `File too large. Max size: ${formatSize(props.maxSize)}`;
|
|
853
|
+
}
|
|
854
|
+
if (props.accept) {
|
|
855
|
+
const acceptedTypes = props.accept.split(",").map((t) => t.trim());
|
|
856
|
+
const fileType = file.type;
|
|
857
|
+
const fileExt = "." + ((_a = file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase());
|
|
858
|
+
const isAccepted = acceptedTypes.some((type) => {
|
|
859
|
+
if (type.startsWith(".")) {
|
|
860
|
+
return fileExt === type.toLowerCase();
|
|
861
|
+
}
|
|
862
|
+
if (type.endsWith("/*")) {
|
|
863
|
+
return fileType.startsWith(type.replace("/*", "/"));
|
|
864
|
+
}
|
|
865
|
+
return fileType === type;
|
|
866
|
+
});
|
|
867
|
+
if (!isAccepted) {
|
|
868
|
+
return `File type not accepted`;
|
|
869
|
+
}
|
|
870
|
+
}
|
|
871
|
+
return null;
|
|
872
|
+
};
|
|
873
|
+
const addFiles = (newFiles) => {
|
|
874
|
+
const fileArray = Array.from(newFiles);
|
|
875
|
+
const validFiles = [];
|
|
876
|
+
for (const file of fileArray) {
|
|
877
|
+
if (props.maxFiles && files.value.length + validFiles.length >= props.maxFiles) {
|
|
878
|
+
emit("error", `Maximum ${props.maxFiles} files allowed`);
|
|
879
|
+
break;
|
|
880
|
+
}
|
|
881
|
+
const error = validateFile(file);
|
|
882
|
+
if (error) {
|
|
883
|
+
emit("error", `${file.name}: ${error}`);
|
|
884
|
+
continue;
|
|
885
|
+
}
|
|
886
|
+
validFiles.push(file);
|
|
887
|
+
files.value.push({
|
|
888
|
+
file,
|
|
889
|
+
id: Math.random().toString(36).substring(2),
|
|
890
|
+
progress: 0,
|
|
891
|
+
status: "pending"
|
|
892
|
+
});
|
|
893
|
+
}
|
|
894
|
+
if (validFiles.length > 0) {
|
|
895
|
+
emit("files-selected", validFiles);
|
|
896
|
+
}
|
|
897
|
+
};
|
|
898
|
+
const removeFile = (id) => {
|
|
899
|
+
const index = files.value.findIndex((f) => f.id === id);
|
|
900
|
+
if (index > -1) {
|
|
901
|
+
const removed = files.value.splice(index, 1)[0];
|
|
902
|
+
emit("file-removed", removed.file);
|
|
903
|
+
}
|
|
904
|
+
};
|
|
905
|
+
const handleDrop = (e) => {
|
|
906
|
+
var _a;
|
|
907
|
+
isDragging.value = false;
|
|
908
|
+
if (props.disabled || !((_a = e.dataTransfer) == null ? void 0 : _a.files)) return;
|
|
909
|
+
addFiles(e.dataTransfer.files);
|
|
910
|
+
};
|
|
911
|
+
const handleDragOver = (e) => {
|
|
912
|
+
e.preventDefault();
|
|
913
|
+
if (!props.disabled) {
|
|
914
|
+
isDragging.value = true;
|
|
915
|
+
}
|
|
916
|
+
};
|
|
917
|
+
const handleDragLeave = () => {
|
|
918
|
+
isDragging.value = false;
|
|
919
|
+
};
|
|
920
|
+
const handleClick = () => {
|
|
921
|
+
var _a;
|
|
922
|
+
if (!props.disabled) {
|
|
923
|
+
(_a = inputRef.value) == null ? void 0 : _a.click();
|
|
924
|
+
}
|
|
925
|
+
};
|
|
926
|
+
const handleInputChange = (e) => {
|
|
927
|
+
const target = e.target;
|
|
928
|
+
if (target.files) {
|
|
929
|
+
addFiles(target.files);
|
|
930
|
+
target.value = "";
|
|
931
|
+
}
|
|
932
|
+
};
|
|
933
|
+
const dropzoneClasses = computed(() => {
|
|
934
|
+
const base = "relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors";
|
|
935
|
+
if (props.disabled) {
|
|
936
|
+
return `${base} border-gray-200 bg-gray-50 cursor-not-allowed dark:border-gray-700 dark:bg-gray-800`;
|
|
937
|
+
}
|
|
938
|
+
if (isDragging.value) {
|
|
939
|
+
return `${base} border-primary-500 bg-primary-50 dark:bg-primary-900/20`;
|
|
940
|
+
}
|
|
941
|
+
return `${base} border-gray-300 hover:border-primary-400 hover:bg-gray-50 dark:border-gray-600 dark:hover:border-primary-500 dark:hover:bg-gray-800`;
|
|
942
|
+
});
|
|
943
|
+
const getFileIcon = (file) => {
|
|
944
|
+
if (file.type.startsWith("image/")) return "heroicons:photo";
|
|
945
|
+
if (file.type.startsWith("video/")) return "heroicons:video-camera";
|
|
946
|
+
if (file.type.startsWith("audio/")) return "heroicons:musical-note";
|
|
947
|
+
if (file.type.includes("pdf")) return "heroicons:document-text";
|
|
948
|
+
if (file.type.includes("zip") || file.type.includes("rar")) return "heroicons:archive-box";
|
|
949
|
+
return "heroicons:document";
|
|
950
|
+
};
|
|
951
|
+
return (_ctx, _cache) => {
|
|
952
|
+
return openBlock(), createElementBlock("div", _hoisted_1$3, [
|
|
953
|
+
createElementVNode("div", {
|
|
954
|
+
class: normalizeClass(dropzoneClasses.value),
|
|
955
|
+
onDrop: withModifiers(handleDrop, ["prevent"]),
|
|
956
|
+
onDragover: handleDragOver,
|
|
957
|
+
onDragleave: handleDragLeave,
|
|
958
|
+
onClick: handleClick
|
|
959
|
+
}, [
|
|
960
|
+
createElementVNode("input", {
|
|
961
|
+
ref_key: "inputRef",
|
|
962
|
+
ref: inputRef,
|
|
963
|
+
type: "file",
|
|
964
|
+
class: "hidden",
|
|
965
|
+
accept: __props.accept,
|
|
966
|
+
multiple: __props.multiple,
|
|
967
|
+
disabled: __props.disabled,
|
|
968
|
+
onChange: handleInputChange
|
|
969
|
+
}, null, 40, _hoisted_2$3),
|
|
970
|
+
createElementVNode("div", _hoisted_3$3, [
|
|
971
|
+
createVNode(unref(Icon), {
|
|
972
|
+
icon: "heroicons:cloud-arrow-up",
|
|
973
|
+
class: normalizeClass(["w-12 h-12 mx-auto text-gray-400", { "text-primary-500": isDragging.value }])
|
|
974
|
+
}, null, 8, ["class"]),
|
|
975
|
+
createElementVNode("p", _hoisted_4$1, toDisplayString(__props.label), 1),
|
|
976
|
+
__props.description ? (openBlock(), createElementBlock("p", _hoisted_5$1, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
|
|
977
|
+
__props.maxSize ? (openBlock(), createElementBlock("p", _hoisted_6$1, " Max size: " + toDisplayString(formatSize(__props.maxSize)), 1)) : createCommentVNode("", true)
|
|
978
|
+
])
|
|
979
|
+
], 34),
|
|
980
|
+
files.value.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_7$1, [
|
|
981
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(files.value, (uploadedFile) => {
|
|
982
|
+
return openBlock(), createElementBlock("li", {
|
|
983
|
+
key: uploadedFile.id,
|
|
984
|
+
class: "flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
|
|
985
|
+
}, [
|
|
986
|
+
createVNode(unref(Icon), {
|
|
987
|
+
icon: getFileIcon(uploadedFile.file),
|
|
988
|
+
class: "w-8 h-8 text-gray-400"
|
|
989
|
+
}, null, 8, ["icon"]),
|
|
990
|
+
createElementVNode("div", _hoisted_8$1, [
|
|
991
|
+
createElementVNode("p", _hoisted_9, toDisplayString(uploadedFile.file.name), 1),
|
|
992
|
+
createElementVNode("p", _hoisted_10, toDisplayString(formatSize(uploadedFile.file.size)), 1)
|
|
993
|
+
]),
|
|
994
|
+
createElementVNode("button", {
|
|
995
|
+
type: "button",
|
|
996
|
+
class: "p-1 text-gray-400 hover:text-red-500 rounded",
|
|
997
|
+
onClick: withModifiers(($event) => removeFile(uploadedFile.id), ["stop"])
|
|
998
|
+
}, [
|
|
999
|
+
createVNode(unref(Icon), {
|
|
1000
|
+
icon: "heroicons:x-mark",
|
|
1001
|
+
class: "w-5 h-5"
|
|
1002
|
+
})
|
|
1003
|
+
], 8, _hoisted_11)
|
|
1004
|
+
]);
|
|
1005
|
+
}), 128))
|
|
1006
|
+
])) : createCommentVNode("", true)
|
|
1007
|
+
]);
|
|
1008
|
+
};
|
|
1009
|
+
}
|
|
1010
|
+
});
|
|
1011
|
+
const _hoisted_1$2 = { class: "flex items-center gap-1" };
|
|
1012
|
+
const _hoisted_2$2 = ["disabled", "onClick", "onMousemove"];
|
|
1013
|
+
const _hoisted_3$2 = {
|
|
1014
|
+
key: 0,
|
|
1015
|
+
class: "ml-2 text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
1016
|
+
};
|
|
1017
|
+
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1018
|
+
__name: "Rating",
|
|
1019
|
+
props: {
|
|
1020
|
+
modelValue: { default: 0 },
|
|
1021
|
+
max: { default: 5 },
|
|
1022
|
+
allowHalf: { type: Boolean, default: false },
|
|
1023
|
+
readonly: { type: Boolean, default: false },
|
|
1024
|
+
disabled: { type: Boolean, default: false },
|
|
1025
|
+
size: { default: "md" },
|
|
1026
|
+
filledIcon: { default: "heroicons:star-solid" },
|
|
1027
|
+
emptyIcon: { default: "heroicons:star" },
|
|
1028
|
+
halfIcon: { default: "heroicons:star-solid" },
|
|
1029
|
+
color: { default: "text-yellow-400" },
|
|
1030
|
+
showValue: { type: Boolean, default: false }
|
|
1031
|
+
},
|
|
1032
|
+
emits: ["update:modelValue"],
|
|
1033
|
+
setup(__props, { emit: __emit }) {
|
|
1034
|
+
const props = __props;
|
|
1035
|
+
const emit = __emit;
|
|
1036
|
+
const hoverValue = ref(null);
|
|
1037
|
+
const displayValue = computed(() => {
|
|
1038
|
+
return hoverValue.value !== null ? hoverValue.value : props.modelValue;
|
|
1039
|
+
});
|
|
1040
|
+
const sizeClasses = computed(() => {
|
|
1041
|
+
switch (props.size) {
|
|
1042
|
+
case "sm":
|
|
1043
|
+
return "w-4 h-4";
|
|
1044
|
+
case "lg":
|
|
1045
|
+
return "w-8 h-8";
|
|
1046
|
+
default:
|
|
1047
|
+
return "w-6 h-6";
|
|
1048
|
+
}
|
|
1049
|
+
});
|
|
1050
|
+
const getStarState = (index) => {
|
|
1051
|
+
const value = displayValue.value;
|
|
1052
|
+
if (value >= index) return "full";
|
|
1053
|
+
if (props.allowHalf && value >= index - 0.5) return "half";
|
|
1054
|
+
return "empty";
|
|
1055
|
+
};
|
|
1056
|
+
const handleClick = (index, event) => {
|
|
1057
|
+
if (props.readonly || props.disabled) return;
|
|
1058
|
+
let value = index;
|
|
1059
|
+
if (props.allowHalf) {
|
|
1060
|
+
const rect = event.target.getBoundingClientRect();
|
|
1061
|
+
const isLeftHalf = event.clientX - rect.left < rect.width / 2;
|
|
1062
|
+
value = isLeftHalf ? index - 0.5 : index;
|
|
1063
|
+
}
|
|
1064
|
+
emit("update:modelValue", value);
|
|
1065
|
+
};
|
|
1066
|
+
const handleMouseMove = (index, event) => {
|
|
1067
|
+
if (props.readonly || props.disabled) return;
|
|
1068
|
+
let value = index;
|
|
1069
|
+
if (props.allowHalf) {
|
|
1070
|
+
const rect = event.target.getBoundingClientRect();
|
|
1071
|
+
const isLeftHalf = event.clientX - rect.left < rect.width / 2;
|
|
1072
|
+
value = isLeftHalf ? index - 0.5 : index;
|
|
1073
|
+
}
|
|
1074
|
+
hoverValue.value = value;
|
|
1075
|
+
};
|
|
1076
|
+
const handleMouseLeave = () => {
|
|
1077
|
+
hoverValue.value = null;
|
|
1078
|
+
};
|
|
1079
|
+
return (_ctx, _cache) => {
|
|
1080
|
+
return openBlock(), createElementBlock("div", _hoisted_1$2, [
|
|
1081
|
+
createElementVNode("div", {
|
|
1082
|
+
class: "flex items-center",
|
|
1083
|
+
onMouseleave: handleMouseLeave
|
|
1084
|
+
}, [
|
|
1085
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.max, (index) => {
|
|
1086
|
+
return openBlock(), createElementBlock("button", {
|
|
1087
|
+
key: index,
|
|
1088
|
+
type: "button",
|
|
1089
|
+
class: normalizeClass(["relative focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 rounded", [
|
|
1090
|
+
__props.readonly || __props.disabled ? "cursor-default" : "cursor-pointer",
|
|
1091
|
+
__props.disabled && "opacity-50"
|
|
1092
|
+
]]),
|
|
1093
|
+
disabled: __props.readonly || __props.disabled,
|
|
1094
|
+
onClick: ($event) => handleClick(index, $event),
|
|
1095
|
+
onMousemove: ($event) => handleMouseMove(index, $event)
|
|
1096
|
+
}, [
|
|
1097
|
+
createVNode(unref(Icon), {
|
|
1098
|
+
icon: __props.emptyIcon,
|
|
1099
|
+
class: normalizeClass([sizeClasses.value, "text-gray-300 dark:text-gray-600"])
|
|
1100
|
+
}, null, 8, ["icon", "class"]),
|
|
1101
|
+
createElementVNode("div", {
|
|
1102
|
+
class: "absolute inset-0 overflow-hidden",
|
|
1103
|
+
style: normalizeStyle({
|
|
1104
|
+
width: getStarState(index) === "full" ? "100%" : getStarState(index) === "half" ? "50%" : "0%"
|
|
1105
|
+
})
|
|
1106
|
+
}, [
|
|
1107
|
+
createVNode(unref(Icon), {
|
|
1108
|
+
icon: __props.filledIcon,
|
|
1109
|
+
class: normalizeClass([sizeClasses.value, __props.color])
|
|
1110
|
+
}, null, 8, ["icon", "class"])
|
|
1111
|
+
], 4)
|
|
1112
|
+
], 42, _hoisted_2$2);
|
|
1113
|
+
}), 128))
|
|
1114
|
+
], 32),
|
|
1115
|
+
__props.showValue ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(__props.modelValue.toFixed(__props.allowHalf ? 1 : 0)), 1)) : createCommentVNode("", true)
|
|
1116
|
+
]);
|
|
1117
|
+
};
|
|
1118
|
+
}
|
|
1119
|
+
});
|
|
1120
|
+
const _hoisted_1$1 = { class: "relative inline-block" };
|
|
1121
|
+
const _hoisted_2$1 = {
|
|
1122
|
+
key: 0,
|
|
1123
|
+
class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
|
|
1124
|
+
};
|
|
1125
|
+
const _hoisted_3$1 = ["disabled"];
|
|
1126
|
+
const _hoisted_4 = { class: "text-sm font-mono text-gray-700 dark:text-gray-300" };
|
|
1127
|
+
const _hoisted_5 = { class: "grid grid-cols-5 gap-2 mb-3" };
|
|
1128
|
+
const _hoisted_6 = ["title", "onClick"];
|
|
1129
|
+
const _hoisted_7 = {
|
|
1130
|
+
key: 0,
|
|
1131
|
+
class: "flex items-center gap-2 pt-3 border-t border-gray-200 dark:border-gray-700"
|
|
1132
|
+
};
|
|
1133
|
+
const _hoisted_8 = ["value"];
|
|
1134
|
+
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
1135
|
+
__name: "ColorPicker",
|
|
1136
|
+
props: {
|
|
1137
|
+
modelValue: { default: "#3b82f6" },
|
|
1138
|
+
swatches: { default: () => [
|
|
1139
|
+
"#ef4444",
|
|
1140
|
+
"#f97316",
|
|
1141
|
+
"#f59e0b",
|
|
1142
|
+
"#eab308",
|
|
1143
|
+
"#84cc16",
|
|
1144
|
+
"#22c55e",
|
|
1145
|
+
"#10b981",
|
|
1146
|
+
"#14b8a6",
|
|
1147
|
+
"#06b6d4",
|
|
1148
|
+
"#0ea5e9",
|
|
1149
|
+
"#3b82f6",
|
|
1150
|
+
"#6366f1",
|
|
1151
|
+
"#8b5cf6",
|
|
1152
|
+
"#a855f7",
|
|
1153
|
+
"#d946ef",
|
|
1154
|
+
"#ec4899",
|
|
1155
|
+
"#f43f5e",
|
|
1156
|
+
"#78716c",
|
|
1157
|
+
"#737373",
|
|
1158
|
+
"#000000"
|
|
1159
|
+
] },
|
|
1160
|
+
showInput: { type: Boolean, default: true },
|
|
1161
|
+
disabled: { type: Boolean, default: false },
|
|
1162
|
+
label: {}
|
|
1163
|
+
},
|
|
1164
|
+
emits: ["update:modelValue"],
|
|
1165
|
+
setup(__props, { emit: __emit }) {
|
|
1166
|
+
const props = __props;
|
|
1167
|
+
const emit = __emit;
|
|
1168
|
+
const isOpen = ref(false);
|
|
1169
|
+
const inputValue = ref(props.modelValue);
|
|
1170
|
+
watch(
|
|
1171
|
+
() => props.modelValue,
|
|
1172
|
+
(newValue) => {
|
|
1173
|
+
inputValue.value = newValue;
|
|
1174
|
+
}
|
|
1175
|
+
);
|
|
1176
|
+
const selectColor = (color) => {
|
|
1177
|
+
emit("update:modelValue", color);
|
|
1178
|
+
inputValue.value = color;
|
|
1179
|
+
};
|
|
1180
|
+
const handleInputChange = () => {
|
|
1181
|
+
const color = inputValue.value;
|
|
1182
|
+
if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(color)) {
|
|
1183
|
+
emit("update:modelValue", color);
|
|
1184
|
+
}
|
|
1185
|
+
};
|
|
1186
|
+
const handleNativeInput = (event) => {
|
|
1187
|
+
const color = event.target.value;
|
|
1188
|
+
emit("update:modelValue", color);
|
|
1189
|
+
inputValue.value = color;
|
|
1190
|
+
};
|
|
1191
|
+
const togglePicker = () => {
|
|
1192
|
+
if (!props.disabled) {
|
|
1193
|
+
isOpen.value = !isOpen.value;
|
|
1194
|
+
}
|
|
1195
|
+
};
|
|
1196
|
+
const closePicker = () => {
|
|
1197
|
+
isOpen.value = false;
|
|
1198
|
+
};
|
|
1199
|
+
return (_ctx, _cache) => {
|
|
1200
|
+
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
1201
|
+
__props.label ? (openBlock(), createElementBlock("label", _hoisted_2$1, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
|
|
1202
|
+
createElementVNode("button", {
|
|
1203
|
+
type: "button",
|
|
1204
|
+
class: normalizeClass(["flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors", { "opacity-50 cursor-not-allowed": __props.disabled }]),
|
|
1205
|
+
disabled: __props.disabled,
|
|
1206
|
+
onClick: togglePicker
|
|
1207
|
+
}, [
|
|
1208
|
+
createElementVNode("span", {
|
|
1209
|
+
class: "w-6 h-6 rounded border border-gray-200 dark:border-gray-600",
|
|
1210
|
+
style: normalizeStyle({ backgroundColor: __props.modelValue })
|
|
1211
|
+
}, null, 4),
|
|
1212
|
+
createElementVNode("span", _hoisted_4, toDisplayString(__props.modelValue), 1),
|
|
1213
|
+
createVNode(unref(Icon), {
|
|
1214
|
+
icon: "heroicons:chevron-down",
|
|
1215
|
+
class: normalizeClass(["w-4 h-4 text-gray-400", { "rotate-180": isOpen.value }])
|
|
1216
|
+
}, null, 8, ["class"])
|
|
1217
|
+
], 10, _hoisted_3$1),
|
|
1218
|
+
createVNode(Transition, {
|
|
1219
|
+
"enter-active-class": "transition duration-100 ease-out",
|
|
1220
|
+
"enter-from-class": "opacity-0 scale-95",
|
|
1221
|
+
"enter-to-class": "opacity-100 scale-100",
|
|
1222
|
+
"leave-active-class": "transition duration-75 ease-in",
|
|
1223
|
+
"leave-from-class": "opacity-100 scale-100",
|
|
1224
|
+
"leave-to-class": "opacity-0 scale-95"
|
|
1225
|
+
}, {
|
|
1226
|
+
default: withCtx(() => [
|
|
1227
|
+
isOpen.value ? (openBlock(), createElementBlock("div", {
|
|
1228
|
+
key: 0,
|
|
1229
|
+
class: "absolute z-50 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg",
|
|
1230
|
+
onClick: _cache[1] || (_cache[1] = withModifiers(() => {
|
|
1231
|
+
}, ["stop"]))
|
|
1232
|
+
}, [
|
|
1233
|
+
createElementVNode("div", _hoisted_5, [
|
|
1234
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.swatches, (color) => {
|
|
1235
|
+
return openBlock(), createElementBlock("button", {
|
|
1236
|
+
key: color,
|
|
1237
|
+
type: "button",
|
|
1238
|
+
class: normalizeClass(["w-8 h-8 rounded-lg border-2 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1", [
|
|
1239
|
+
__props.modelValue === color ? "border-primary-500 ring-2 ring-primary-500 ring-offset-1" : "border-transparent"
|
|
1240
|
+
]]),
|
|
1241
|
+
style: normalizeStyle({ backgroundColor: color }),
|
|
1242
|
+
title: color,
|
|
1243
|
+
onClick: ($event) => selectColor(color)
|
|
1244
|
+
}, [
|
|
1245
|
+
__props.modelValue === color ? (openBlock(), createBlock(unref(Icon), {
|
|
1246
|
+
key: 0,
|
|
1247
|
+
icon: "heroicons:check",
|
|
1248
|
+
class: normalizeClass(["w-4 h-4 mx-auto", [
|
|
1249
|
+
["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#eab308", "#f59e0b"].includes(color) ? "text-gray-800" : "text-white"
|
|
1250
|
+
]])
|
|
1251
|
+
}, null, 8, ["class"])) : createCommentVNode("", true)
|
|
1252
|
+
], 14, _hoisted_6);
|
|
1253
|
+
}), 128))
|
|
1254
|
+
]),
|
|
1255
|
+
__props.showInput ? (openBlock(), createElementBlock("div", _hoisted_7, [
|
|
1256
|
+
createElementVNode("input", {
|
|
1257
|
+
type: "color",
|
|
1258
|
+
value: __props.modelValue,
|
|
1259
|
+
class: "w-8 h-8 rounded cursor-pointer border-0 p-0",
|
|
1260
|
+
onInput: handleNativeInput
|
|
1261
|
+
}, null, 40, _hoisted_8),
|
|
1262
|
+
withDirectives(createElementVNode("input", {
|
|
1263
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
|
|
1264
|
+
type: "text",
|
|
1265
|
+
class: "flex-1 px-2 py-1 text-sm font-mono border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white",
|
|
1266
|
+
placeholder: "#000000",
|
|
1267
|
+
onChange: handleInputChange,
|
|
1268
|
+
onKeyup: withKeys(handleInputChange, ["enter"])
|
|
1269
|
+
}, null, 544), [
|
|
1270
|
+
[vModelText, inputValue.value]
|
|
1271
|
+
])
|
|
1272
|
+
])) : createCommentVNode("", true)
|
|
1273
|
+
])) : createCommentVNode("", true)
|
|
1274
|
+
]),
|
|
1275
|
+
_: 1
|
|
1276
|
+
}),
|
|
1277
|
+
isOpen.value ? (openBlock(), createElementBlock("div", {
|
|
1278
|
+
key: 1,
|
|
1279
|
+
class: "fixed inset-0 z-40",
|
|
1280
|
+
onClick: closePicker
|
|
1281
|
+
})) : createCommentVNode("", true)
|
|
1282
|
+
]);
|
|
1283
|
+
};
|
|
1284
|
+
}
|
|
1285
|
+
});
|
|
1286
|
+
const _hoisted_1 = { class: "space-y-2" };
|
|
1287
|
+
const _hoisted_2 = {
|
|
1288
|
+
key: 0,
|
|
1289
|
+
class: "flex justify-between text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
1290
|
+
};
|
|
1291
|
+
const _hoisted_3 = {
|
|
1292
|
+
key: 1,
|
|
1293
|
+
class: "flex justify-between text-xs text-gray-500 dark:text-gray-400"
|
|
1294
|
+
};
|
|
1295
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
1296
|
+
__name: "RangeSlider",
|
|
1297
|
+
props: {
|
|
1298
|
+
modelValue: { default: () => [25, 75] },
|
|
1299
|
+
min: { default: 0 },
|
|
1300
|
+
max: { default: 100 },
|
|
1301
|
+
step: { default: 1 },
|
|
1302
|
+
disabled: { type: Boolean, default: false },
|
|
1303
|
+
showLabels: { type: Boolean, default: true },
|
|
1304
|
+
showMinMax: { type: Boolean, default: true },
|
|
1305
|
+
formatLabel: { type: Function, default: (v) => v.toString() }
|
|
1306
|
+
},
|
|
1307
|
+
emits: ["update:modelValue"],
|
|
1308
|
+
setup(__props, { emit: __emit }) {
|
|
1309
|
+
const props = __props;
|
|
1310
|
+
const emit = __emit;
|
|
1311
|
+
const sliderRef = ref();
|
|
1312
|
+
const dragging = ref(null);
|
|
1313
|
+
const minValue = computed(() => props.modelValue[0]);
|
|
1314
|
+
const maxValue = computed(() => props.modelValue[1]);
|
|
1315
|
+
const minPercent = computed(() => {
|
|
1316
|
+
return (minValue.value - props.min) / (props.max - props.min) * 100;
|
|
1317
|
+
});
|
|
1318
|
+
const maxPercent = computed(() => {
|
|
1319
|
+
return (maxValue.value - props.min) / (props.max - props.min) * 100;
|
|
1320
|
+
});
|
|
1321
|
+
const rangeStyle = computed(() => ({
|
|
1322
|
+
left: `${minPercent.value}%`,
|
|
1323
|
+
width: `${maxPercent.value - minPercent.value}%`
|
|
1324
|
+
}));
|
|
1325
|
+
const getValueFromPosition = (clientX) => {
|
|
1326
|
+
if (!sliderRef.value) return props.min;
|
|
1327
|
+
const rect = sliderRef.value.getBoundingClientRect();
|
|
1328
|
+
const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
|
1329
|
+
const rawValue = props.min + percent * (props.max - props.min);
|
|
1330
|
+
const steppedValue = Math.round(rawValue / props.step) * props.step;
|
|
1331
|
+
return Math.max(props.min, Math.min(props.max, steppedValue));
|
|
1332
|
+
};
|
|
1333
|
+
const updateValue = (handle, newValue) => {
|
|
1334
|
+
const [currentMin, currentMax] = props.modelValue;
|
|
1335
|
+
if (handle === "min") {
|
|
1336
|
+
const clampedValue = Math.min(newValue, currentMax);
|
|
1337
|
+
emit("update:modelValue", [clampedValue, currentMax]);
|
|
1338
|
+
} else {
|
|
1339
|
+
const clampedValue = Math.max(newValue, currentMin);
|
|
1340
|
+
emit("update:modelValue", [currentMin, clampedValue]);
|
|
1341
|
+
}
|
|
1342
|
+
};
|
|
1343
|
+
const handleMouseDown = (handle) => (event) => {
|
|
1344
|
+
if (props.disabled) return;
|
|
1345
|
+
event.preventDefault();
|
|
1346
|
+
dragging.value = handle;
|
|
1347
|
+
const handleMouseMove = (e) => {
|
|
1348
|
+
if (dragging.value) {
|
|
1349
|
+
const value = getValueFromPosition(e.clientX);
|
|
1350
|
+
updateValue(dragging.value, value);
|
|
1351
|
+
}
|
|
1352
|
+
};
|
|
1353
|
+
const handleMouseUp = () => {
|
|
1354
|
+
dragging.value = null;
|
|
1355
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
1356
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
1357
|
+
};
|
|
1358
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
1359
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
1360
|
+
};
|
|
1361
|
+
const handleTrackClick = (event) => {
|
|
1362
|
+
if (props.disabled) return;
|
|
1363
|
+
const value = getValueFromPosition(event.clientX);
|
|
1364
|
+
const distToMin = Math.abs(value - minValue.value);
|
|
1365
|
+
const distToMax = Math.abs(value - maxValue.value);
|
|
1366
|
+
if (distToMin <= distToMax) {
|
|
1367
|
+
updateValue("min", value);
|
|
1368
|
+
} else {
|
|
1369
|
+
updateValue("max", value);
|
|
1370
|
+
}
|
|
1371
|
+
};
|
|
1372
|
+
return (_ctx, _cache) => {
|
|
1373
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
1374
|
+
__props.showLabels ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
|
1375
|
+
createElementVNode("span", null, toDisplayString(__props.formatLabel(minValue.value)), 1),
|
|
1376
|
+
createElementVNode("span", null, toDisplayString(__props.formatLabel(maxValue.value)), 1)
|
|
1377
|
+
])) : createCommentVNode("", true),
|
|
1378
|
+
createElementVNode("div", {
|
|
1379
|
+
ref_key: "sliderRef",
|
|
1380
|
+
ref: sliderRef,
|
|
1381
|
+
class: normalizeClass(["relative h-2 rounded-full cursor-pointer", [
|
|
1382
|
+
__props.disabled ? "bg-gray-200 dark:bg-gray-700 cursor-not-allowed" : "bg-gray-200 dark:bg-gray-700"
|
|
1383
|
+
]]),
|
|
1384
|
+
onClick: handleTrackClick
|
|
1385
|
+
}, [
|
|
1386
|
+
createElementVNode("div", {
|
|
1387
|
+
class: normalizeClass(["absolute h-full rounded-full", [__props.disabled ? "bg-gray-400" : "bg-primary-500"]]),
|
|
1388
|
+
style: normalizeStyle(rangeStyle.value)
|
|
1389
|
+
}, null, 6),
|
|
1390
|
+
createElementVNode("div", {
|
|
1391
|
+
class: normalizeClass(["absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-5 h-5 rounded-full border-2 shadow transition-shadow", [
|
|
1392
|
+
__props.disabled ? "bg-gray-300 border-gray-400 cursor-not-allowed" : "bg-white border-primary-500 cursor-grab hover:shadow-md active:cursor-grabbing",
|
|
1393
|
+
dragging.value === "min" && "ring-4 ring-primary-200 dark:ring-primary-800"
|
|
1394
|
+
]]),
|
|
1395
|
+
style: normalizeStyle({ left: `${minPercent.value}%` }),
|
|
1396
|
+
onMousedown: _cache[0] || (_cache[0] = ($event) => handleMouseDown("min"))
|
|
1397
|
+
}, null, 38),
|
|
1398
|
+
createElementVNode("div", {
|
|
1399
|
+
class: normalizeClass(["absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-5 h-5 rounded-full border-2 shadow transition-shadow", [
|
|
1400
|
+
__props.disabled ? "bg-gray-300 border-gray-400 cursor-not-allowed" : "bg-white border-primary-500 cursor-grab hover:shadow-md active:cursor-grabbing",
|
|
1401
|
+
dragging.value === "max" && "ring-4 ring-primary-200 dark:ring-primary-800"
|
|
1402
|
+
]]),
|
|
1403
|
+
style: normalizeStyle({ left: `${maxPercent.value}%` }),
|
|
1404
|
+
onMousedown: _cache[1] || (_cache[1] = ($event) => handleMouseDown("max"))
|
|
1405
|
+
}, null, 38)
|
|
1406
|
+
], 2),
|
|
1407
|
+
__props.showMinMax ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
1408
|
+
createElementVNode("span", null, toDisplayString(__props.formatLabel(__props.min)), 1),
|
|
1409
|
+
createElementVNode("span", null, toDisplayString(__props.formatLabel(__props.max)), 1)
|
|
1410
|
+
])) : createCommentVNode("", true)
|
|
1411
|
+
]);
|
|
1412
|
+
};
|
|
1413
|
+
}
|
|
1414
|
+
});
|
|
804
1415
|
export {
|
|
805
1416
|
Slider as S,
|
|
806
|
-
_sfc_main$
|
|
807
|
-
_sfc_main$
|
|
808
|
-
_sfc_main$
|
|
809
|
-
_sfc_main$
|
|
810
|
-
_sfc_main$
|
|
811
|
-
_sfc_main$
|
|
812
|
-
_sfc_main$
|
|
813
|
-
_sfc_main as g
|
|
1417
|
+
_sfc_main$c as _,
|
|
1418
|
+
_sfc_main$b as a,
|
|
1419
|
+
_sfc_main$a as b,
|
|
1420
|
+
_sfc_main$9 as c,
|
|
1421
|
+
_sfc_main$8 as d,
|
|
1422
|
+
_sfc_main$7 as e,
|
|
1423
|
+
_sfc_main$6 as f,
|
|
1424
|
+
_sfc_main$4 as g,
|
|
1425
|
+
_sfc_main$3 as h,
|
|
1426
|
+
_sfc_main$2 as i,
|
|
1427
|
+
_sfc_main$1 as j,
|
|
1428
|
+
_sfc_main as k
|
|
814
1429
|
};
|
|
815
|
-
//# sourceMappingURL=
|
|
1430
|
+
//# sourceMappingURL=RangeSlider.vue_vue_type_script_setup_true_lang-DD9UxnCU.js.map
|