@bridge-ui/vue 0.0.11 → 0.1.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/ai/skills/bridge-ui-components/SKILL.md +5 -3
- package/ai/skills/bridge-ui-forms/SKILL.md +4 -2
- package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts +1 -2
- package/dist/Components/Autocomplete/composables/useAutocomplete.js +112 -114
- package/dist/Components/BaseField/baseField.types.d.ts +1 -8
- package/dist/Components/BaseField/composables/useBaseField.js +79 -83
- package/dist/Components/Calendar/Calendar.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/Calendar/calendar.types.d.ts +14 -21
- package/dist/Components/Calendar/composables/useCalendar.d.ts +2 -2
- package/dist/Components/Calendar/composables/useCalendar.js +101 -98
- package/dist/Components/Calendar/index.d.ts +1 -1
- package/dist/Components/CalendarDate/CalendarDate.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/Components/CalendarDate/calendarDate.types.d.ts +7 -21
- package/dist/Components/CalendarDate/composables/useCalendarDate.d.ts +1 -1
- package/dist/Components/CalendarDate/composables/useCalendarDate.js +81 -73
- package/dist/Components/CalendarDate/index.d.ts +1 -1
- package/dist/Components/CalendarMonth/CalendarMonth.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/Components/CalendarMonth/calendarMonth.types.d.ts +7 -17
- package/dist/Components/CalendarMonth/composables/useCalendarMonth.d.ts +1 -1
- package/dist/Components/CalendarMonth/composables/useCalendarMonth.js +58 -50
- package/dist/Components/CalendarMonth/index.d.ts +1 -1
- package/dist/Components/CalendarRange/CalendarRange.vue_vue_type_script_setup_true_lang.js +4 -3
- package/dist/Components/CalendarRange/calendarRange.types.d.ts +14 -21
- package/dist/Components/CalendarRange/composables/useCalendarRange.d.ts +3 -3
- package/dist/Components/CalendarRange/composables/useCalendarRange.js +121 -120
- package/dist/Components/CalendarRange/index.d.ts +1 -1
- package/dist/Components/CalendarYear/CalendarYear.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/Components/CalendarYear/calendarYear.types.d.ts +7 -17
- package/dist/Components/CalendarYear/composables/useCalendarYear.d.ts +1 -1
- package/dist/Components/CalendarYear/composables/useCalendarYear.js +60 -52
- package/dist/Components/CalendarYear/index.d.ts +1 -1
- package/dist/Components/Checkbox/composables/useCheckbox.js +23 -19
- package/dist/Components/ColorField/ColorField.js +5 -0
- package/dist/Components/ColorField/ColorField.vue.d.ts +38 -0
- package/dist/Components/ColorField/ColorField.vue_vue_type_script_setup_true_lang.js +149 -0
- package/dist/Components/ColorField/colorField.types.d.ts +179 -0
- package/dist/Components/ColorField/composables/useColorField.d.ts +748 -0
- package/dist/Components/ColorField/composables/useColorField.js +182 -0
- package/dist/Components/ColorField/index.d.ts +3 -0
- package/dist/Components/ColorField/index.js +3 -0
- package/dist/Components/ColorPicker/ColorPicker.js +5 -0
- package/dist/Components/ColorPicker/ColorPicker.vue.d.ts +21 -0
- package/dist/Components/ColorPicker/ColorPicker.vue_vue_type_script_setup_true_lang.js +91 -0
- package/dist/Components/ColorPicker/colorPicker.types.d.ts +200 -0
- package/dist/Components/ColorPicker/composables/useColorPicker.d.ts +111 -0
- package/dist/Components/ColorPicker/composables/useColorPicker.js +253 -0
- package/dist/Components/ColorPicker/index.d.ts +3 -0
- package/dist/Components/ColorPicker/index.js +3 -0
- package/dist/Components/DateField/DateField.vue.d.ts +1 -0
- package/dist/Components/DateField/DateField.vue_vue_type_script_setup_true_lang.js +13 -31
- package/dist/Components/DateField/composables/useDateField.d.ts +3 -4
- package/dist/Components/DateField/composables/useDateField.js +95 -107
- package/dist/Components/DateField/dateField.types.d.ts +16 -0
- package/dist/Components/DatePicker/DatePicker.vue_vue_type_script_setup_true_lang.js +10 -7
- package/dist/Components/DatePicker/composables/useDatePicker.d.ts +1 -6
- package/dist/Components/DatePicker/composables/useDatePicker.js +8 -10
- package/dist/Components/DatePicker/datePicker.types.d.ts +14 -29
- package/dist/Components/DatePicker/index.d.ts +1 -1
- package/dist/Components/DateRangeField/DateRangeField.vue.d.ts +1 -0
- package/dist/Components/DateRangeField/DateRangeField.vue_vue_type_script_setup_true_lang.js +39 -30
- package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts +4 -3
- package/dist/Components/DateRangeField/composables/useDateRangeField.js +55 -48
- package/dist/Components/DateRangeField/dateRangeField.types.d.ts +16 -0
- package/dist/Components/DateRangePicker/DateRangePicker.vue_vue_type_script_setup_true_lang.js +10 -7
- package/dist/Components/DateRangePicker/composables/useDateRangePicker.d.ts +1 -6
- package/dist/Components/DateRangePicker/composables/useDateRangePicker.js +8 -10
- package/dist/Components/DateRangePicker/dateRangePicker.types.d.ts +14 -29
- package/dist/Components/DateRangePicker/index.d.ts +1 -1
- package/dist/Components/DateTimeField/DateTimeField.vue.d.ts +1 -0
- package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js +13 -6
- package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts +4 -3
- package/dist/Components/DateTimeField/composables/useDateTimeField.js +64 -84
- package/dist/Components/DateTimeField/dateTimeField.types.d.ts +16 -0
- package/dist/Components/DateTimePicker/DateTimePicker.vue_vue_type_script_setup_true_lang.js +26 -21
- package/dist/Components/DateTimePicker/composables/useDateTimePicker.d.ts +1 -10
- package/dist/Components/DateTimePicker/composables/useDateTimePicker.js +33 -40
- package/dist/Components/DateTimePicker/dateTimePicker.types.d.ts +14 -36
- package/dist/Components/DateTimePicker/index.d.ts +1 -1
- package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue.d.ts +1 -0
- package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue_vue_type_script_setup_true_lang.js +44 -37
- package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts +4 -3
- package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.js +46 -66
- package/dist/Components/DateTimeRangeField/dateTimeRangeField.types.d.ts +16 -0
- package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js +34 -27
- package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.d.ts +1 -10
- package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js +39 -45
- package/dist/Components/DateTimeRangePicker/dateTimeRangePicker.types.d.ts +14 -36
- package/dist/Components/DateTimeRangePicker/index.d.ts +1 -1
- package/dist/Components/Drawer/Drawer.vue_vue_type_script_setup_true_lang.js +4 -3
- package/dist/Components/FieldOverlay/composables/useFieldOverlay.js +20 -12
- package/dist/Components/FieldOverlay/fieldOverlay.types.d.ts +3 -0
- package/dist/Components/FormControl/composables/useFormControl.js +61 -65
- package/dist/Components/FormControl/formControl.types.d.ts +1 -7
- package/dist/Components/FormField/composables/useFormField.d.ts +1 -1
- package/dist/Components/FormField/composables/useFormField.js +115 -116
- package/dist/Components/FormField/formField.types.d.ts +1 -7
- package/dist/Components/Label/composables/useLabel.js +28 -28
- package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js +2 -3
- package/dist/Components/Listbox/composables/useListbox.d.ts +5 -14
- package/dist/Components/Listbox/composables/useListbox.js +57 -54
- package/dist/Components/Listbox/index.d.ts +0 -1
- package/dist/Components/Listbox/listbox.types.d.ts +6 -12
- package/dist/Components/Menu/Menu.vue_vue_type_script_setup_true_lang.js +3 -5
- package/dist/Components/Modal/Modal.vue_vue_type_script_setup_true_lang.js +4 -3
- package/dist/Components/OtpField/composables/useOtpField.js +95 -94
- package/dist/Components/OtpField/otpField.types.d.ts +2 -9
- package/dist/Components/Radio/composables/useRadio.js +24 -20
- package/dist/Components/Select/composables/useSelect.d.ts +1 -2
- package/dist/Components/Select/composables/useSelect.js +21 -23
- package/dist/Components/Slider/composables/useSlider.js +167 -163
- package/dist/Components/Slider/slider.types.d.ts +2 -9
- package/dist/Components/Snackbar/Snackbar.vue_vue_type_script_setup_true_lang.js +3 -2
- package/dist/Components/Step/Step.js +5 -0
- package/dist/Components/Step/Step.vue.d.ts +11 -0
- package/dist/Components/Step/Step.vue_vue_type_script_setup_true_lang.js +32 -0
- package/dist/Components/Step/composables/useStep.d.ts +56 -0
- package/dist/Components/Step/composables/useStep.js +162 -0
- package/dist/Components/Step/index.d.ts +3 -0
- package/dist/Components/Step/index.js +3 -0
- package/dist/Components/Step/step.types.d.ts +160 -0
- package/dist/Components/Stepper/Stepper.js +5 -0
- package/dist/Components/Stepper/Stepper.vue.d.ts +24 -0
- package/dist/Components/Stepper/Stepper.vue_vue_type_script_setup_true_lang.js +33 -0
- package/dist/Components/Stepper/composables/useStepper.d.ts +18 -0
- package/dist/Components/Stepper/composables/useStepper.js +91 -0
- package/dist/Components/Stepper/index.d.ts +4 -0
- package/dist/Components/Stepper/index.js +4 -0
- package/dist/Components/Stepper/stepper.types.d.ts +93 -0
- package/dist/Components/Stepper/stepperInjectionKey.d.ts +77 -0
- package/dist/Components/Stepper/stepperInjectionKey.js +4 -0
- package/dist/Components/Switch/composables/useSwitch.js +28 -24
- package/dist/Components/TimeField/TimeField.vue.d.ts +1 -0
- package/dist/Components/TimeField/TimeField.vue_vue_type_script_setup_true_lang.js +34 -25
- package/dist/Components/TimeField/composables/useTimeField.d.ts +4 -3
- package/dist/Components/TimeField/composables/useTimeField.js +67 -60
- package/dist/Components/TimeField/timeField.types.d.ts +16 -0
- package/dist/Components/TimePanel/TimePanel.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/TimePanel/composables/useTimePanel.d.ts +1 -1
- package/dist/Components/TimePanel/composables/useTimePanel.js +65 -54
- package/dist/Components/TimePanel/index.d.ts +1 -1
- package/dist/Components/TimePanel/timePanel.types.d.ts +14 -17
- package/dist/Components/TimePicker/TimePicker.vue_vue_type_script_setup_true_lang.js +16 -13
- package/dist/Components/TimePicker/composables/useTimePicker.d.ts +1 -5
- package/dist/Components/TimePicker/composables/useTimePicker.js +17 -18
- package/dist/Components/TimePicker/index.d.ts +1 -1
- package/dist/Components/TimePicker/timePicker.types.d.ts +14 -24
- package/dist/Components/TimeRangeField/TimeRangeField.vue.d.ts +1 -0
- package/dist/Components/TimeRangeField/TimeRangeField.vue_vue_type_script_setup_true_lang.js +34 -25
- package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts +4 -3
- package/dist/Components/TimeRangeField/composables/useTimeRangeField.js +88 -81
- package/dist/Components/TimeRangeField/timeRangeField.types.d.ts +16 -0
- package/dist/Components/TimeRangePicker/TimeRangePicker.vue_vue_type_script_setup_true_lang.js +23 -18
- package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.d.ts +1 -5
- package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.js +32 -33
- package/dist/Components/TimeRangePicker/index.d.ts +1 -1
- package/dist/Components/TimeRangePicker/timeRangePicker.types.d.ts +14 -24
- package/dist/Components/Tooltip/Tooltip.vue_vue_type_script_setup_true_lang.js +4 -6
- package/dist/Utils/index.d.ts +9 -0
- package/dist/Utils/index.js +23 -12
- package/dist/index.d.ts +20 -12
- package/dist/index.js +88 -80
- package/docs/README.md +3 -0
- package/docs/components/Autocomplete.md +1 -1
- package/docs/components/BaseField.md +1 -1
- package/docs/components/BridgeUIProvider.md +12 -14
- package/docs/components/Calendar.md +4 -1
- package/docs/components/CalendarDate.md +3 -1
- package/docs/components/CalendarMonth.md +3 -1
- package/docs/components/CalendarRange.md +4 -1
- package/docs/components/CalendarYear.md +18 -16
- package/docs/components/ColorField.md +93 -0
- package/docs/components/ColorPicker.md +78 -0
- package/docs/components/DateField.md +9 -0
- package/docs/components/DatePicker.md +4 -1
- package/docs/components/DateRangeField.md +30 -22
- package/docs/components/DateRangePicker.md +4 -1
- package/docs/components/DateTimeField.md +35 -28
- package/docs/components/DateTimePicker.md +4 -1
- package/docs/components/DateTimeRangeField.md +36 -28
- package/docs/components/DateTimeRangePicker.md +4 -1
- package/docs/components/FieldOverlay.md +5 -4
- package/docs/components/FormControl.md +1 -1
- package/docs/components/Select.md +1 -1
- package/docs/components/Stepper.md +60 -0
- package/docs/components/TimeField.md +24 -17
- package/docs/components/TimePanel.md +4 -1
- package/docs/components/TimePicker.md +4 -1
- package/docs/components/TimeRangeField.md +25 -17
- package/docs/components/TimeRangePicker.md +4 -1
- package/docs/examples/icon-fontawesome.ts +2 -0
- package/docs/examples/icon-heroicons.ts +2 -0
- package/docs/examples/icon-lucide.ts +2 -0
- package/docs/examples/icon-phosphor.ts +2 -0
- package/docs/examples/icon-tabler.ts +2 -0
- package/package.json +2 -2
|
@@ -2,8 +2,8 @@ import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistr
|
|
|
2
2
|
import { useFormControl as r } from "../../FormControl/composables/useFormControl.js";
|
|
3
3
|
import { computed as i, toValue as a, useAttrs as o } from "vue";
|
|
4
4
|
import { get as s, omit as c } from "es-toolkit/compat";
|
|
5
|
-
import { switchColorProps as l,
|
|
6
|
-
import { cn as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
|
|
5
|
+
import { switchColorProps as l, switchRoundedProps as u, switchSizeProps as d } from "@bridge-ui/core/Tokens";
|
|
6
|
+
import { cn as f, getColorToken as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
|
|
7
7
|
//#region src/Components/Switch/composables/useSwitch.ts
|
|
8
8
|
var g = [
|
|
9
9
|
"size",
|
|
@@ -36,46 +36,50 @@ function _(_, v, y) {
|
|
|
36
36
|
props: () => S.value.componentProps
|
|
37
37
|
}), D = i(() => !!a(y)), O = i(() => {
|
|
38
38
|
let e = m(l, w.value?.tokens?.color);
|
|
39
|
-
return
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
return p({
|
|
40
|
+
tokens: e,
|
|
41
|
+
color: C.value.color,
|
|
42
|
+
invalid: x.invalidated.value
|
|
43
|
+
});
|
|
44
|
+
}), k = i(() => {
|
|
45
|
+
let e = m(d, w.value?.tokens?.size);
|
|
42
46
|
return s(e, C.value.size ?? "sm");
|
|
43
|
-
}),
|
|
44
|
-
let e = m(
|
|
47
|
+
}), A = i(() => {
|
|
48
|
+
let e = m(u, w.value?.tokens?.rounded);
|
|
45
49
|
return s(e, C.value.rounded ?? "full");
|
|
46
|
-
}),
|
|
50
|
+
}), j = i(() => e({
|
|
47
51
|
...T.value?.input,
|
|
48
52
|
...x.controlBind.value,
|
|
49
53
|
role: "switch",
|
|
50
54
|
type: "checkbox"
|
|
51
|
-
}, c(S.value.inheritedAttrs, ["class"]),
|
|
55
|
+
}, c(S.value.inheritedAttrs, ["class"]), f({
|
|
52
56
|
"sr-only": !0,
|
|
53
57
|
[E.value.input ?? ""]: !0
|
|
54
|
-
}))),
|
|
58
|
+
}))), M = i(() => e(T.value?.track, { "aria-hidden": !0 }, f({
|
|
55
59
|
"block cursor-pointer transition ease-in-out duration-100": !0,
|
|
56
|
-
[
|
|
57
|
-
[
|
|
58
|
-
[
|
|
59
|
-
[
|
|
60
|
+
[k.value?.track ?? ""]: !0,
|
|
61
|
+
[A.value ?? ""]: !0,
|
|
62
|
+
[O.value?.track ?? ""]: !D.value,
|
|
63
|
+
[O.value?.trackChecked ?? ""]: D.value,
|
|
60
64
|
[E.value.track ?? ""]: !0
|
|
61
|
-
}))),
|
|
65
|
+
}))), N = i(() => e(T.value?.thumb, { "aria-hidden": !0 }, f({
|
|
62
66
|
"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full shadow-sm transition ease-in-out duration-200": !0,
|
|
63
|
-
[
|
|
64
|
-
[
|
|
65
|
-
[
|
|
67
|
+
[k.value?.thumb ?? ""]: !0,
|
|
68
|
+
[k.value?.thumbCheckedTranslate ?? ""]: D.value,
|
|
69
|
+
[O.value?.thumb ?? ""]: !0,
|
|
66
70
|
[E.value.thumb ?? ""]: !0
|
|
67
71
|
})));
|
|
68
72
|
return {
|
|
69
|
-
fieldBind: i(() => e({}, {},
|
|
73
|
+
fieldBind: i(() => e({}, {}, f({
|
|
70
74
|
"relative inline-flex shrink-0 select-none": !0,
|
|
71
75
|
"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-offset-2": !0,
|
|
72
|
-
[
|
|
73
|
-
[
|
|
76
|
+
[A.value ?? ""]: !0,
|
|
77
|
+
[O.value?.focus ?? ""]: !0
|
|
74
78
|
}))),
|
|
75
|
-
inputBind:
|
|
79
|
+
inputBind: j,
|
|
76
80
|
isChecked: D,
|
|
77
|
-
thumbBind:
|
|
78
|
-
trackBind:
|
|
81
|
+
thumbBind: N,
|
|
82
|
+
trackBind: M,
|
|
79
83
|
formControl: x
|
|
80
84
|
};
|
|
81
85
|
}
|
|
@@ -23,6 +23,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
|
|
|
23
23
|
onOpen?: (() => any) | undefined;
|
|
24
24
|
"onUpdate:modelValue"?: ((value: Date | null | undefined) => any) | undefined;
|
|
25
25
|
}>, {
|
|
26
|
+
fill: boolean;
|
|
26
27
|
showFooter: boolean;
|
|
27
28
|
showErrorIcon: boolean;
|
|
28
29
|
clearable: boolean;
|
|
@@ -22,6 +22,11 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
|
|
|
22
22
|
customProps: {},
|
|
23
23
|
defaultValue: {},
|
|
24
24
|
disableTimes: {},
|
|
25
|
+
editable: { type: Boolean },
|
|
26
|
+
fill: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: void 0
|
|
29
|
+
},
|
|
25
30
|
interval: {},
|
|
26
31
|
maxTime: {},
|
|
27
32
|
minTime: {},
|
|
@@ -74,49 +79,52 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
|
|
|
74
79
|
N.value = e, L.value = e;
|
|
75
80
|
},
|
|
76
81
|
get: () => A(N.value) ? L.value : N.value
|
|
77
|
-
}), { open: z,
|
|
78
|
-
return (e, o) => (x(), d(c, null, [m(T(i), { field: T(
|
|
79
|
-
default: D(() => [f("div", j, [f("input", b(g(T(
|
|
80
|
-
onClick: o[0] ||= (...e) => T(
|
|
82
|
+
}), { open: z, fill: B, overlay: V, timeOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: ee, overlayCustomProps: te, timePickerCustomProps: ne } = o(P, R, F);
|
|
83
|
+
return (e, o) => (x(), d(c, null, [m(T(i), { field: T(U) }, p({
|
|
84
|
+
default: D(() => [f("div", j, [f("input", b(g(T(W))), null, 16), T(Z) ? (x(), d("span", v({ key: 0 }, T(G), {
|
|
85
|
+
onClick: o[0] ||= (...e) => T(K) && T(K)(...e),
|
|
81
86
|
"aria-label": T(I)("Clear"),
|
|
82
|
-
onKeydown: [o[1] ||= O(k((...e) => T(
|
|
87
|
+
onKeydown: [o[1] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["enter"]), o[2] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["space"])]
|
|
83
88
|
}), [m(T(n), v({
|
|
84
89
|
icon: "clear",
|
|
85
|
-
size: T(
|
|
90
|
+
size: T(X)
|
|
86
91
|
}, P.customProps?.clearIcon), null, 16, ["size"])], 16, M)) : u("", !0)])]),
|
|
87
92
|
_: 2
|
|
88
93
|
}, [C(T(t)(T(r), e.$slots), (t) => ({
|
|
89
94
|
name: t,
|
|
90
95
|
fn: D((n) => [w(e.$slots, t, b(g(n || {})))])
|
|
91
96
|
}))]), 1032, ["field"]), m(T(a), {
|
|
92
|
-
overlay: T(
|
|
97
|
+
overlay: T(V),
|
|
93
98
|
"model-value": T(z),
|
|
94
|
-
"custom-props": T(
|
|
95
|
-
"onUpdate:modelValue": T(
|
|
99
|
+
"custom-props": T(te),
|
|
100
|
+
"onUpdate:modelValue": T(Q)
|
|
96
101
|
}, {
|
|
97
102
|
default: D(() => [m(T(s), {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
103
|
+
fill: T(B),
|
|
104
|
+
value: T(q),
|
|
105
|
+
class: y(T(Y)),
|
|
106
|
+
ampm: T(H).ampm,
|
|
107
|
+
"show-footer": T(J),
|
|
102
108
|
"read-only": P.readonly,
|
|
103
|
-
"max-time": T(
|
|
104
|
-
"min-time": T(
|
|
105
|
-
interval: T(
|
|
106
|
-
"time-zone": T(
|
|
107
|
-
onChange: T(
|
|
108
|
-
onCancel: T(
|
|
109
|
-
"show-seconds": T(
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
109
|
+
"max-time": T(H).maxTime,
|
|
110
|
+
"min-time": T(H).minTime,
|
|
111
|
+
interval: T(H).interval,
|
|
112
|
+
"time-zone": T(H).timeZone,
|
|
113
|
+
onChange: T($),
|
|
114
|
+
onCancel: T(ee),
|
|
115
|
+
"show-seconds": T(H).showSeconds,
|
|
116
|
+
error: T(U).invalidated.value,
|
|
117
|
+
color: T(U).merged.value.color,
|
|
118
|
+
"custom-props": T(ne),
|
|
119
|
+
disabled: T(U).isDisabled.value,
|
|
120
|
+
"disable-times": T(H).disableTimes,
|
|
121
|
+
rounded: T(U).merged.value.rounded
|
|
115
122
|
}, p({ _: 2 }, [e.$slots.footer ? {
|
|
116
123
|
name: "footer",
|
|
117
124
|
fn: D((t) => [w(e.$slots, "footer", b(g(t)))]),
|
|
118
125
|
key: "0"
|
|
119
126
|
} : void 0]), 1032, [
|
|
127
|
+
"fill",
|
|
120
128
|
"value",
|
|
121
129
|
"class",
|
|
122
130
|
"ampm",
|
|
@@ -129,6 +137,7 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
|
|
|
129
137
|
"onChange",
|
|
130
138
|
"onCancel",
|
|
131
139
|
"show-seconds",
|
|
140
|
+
"error",
|
|
132
141
|
"color",
|
|
133
142
|
"custom-props",
|
|
134
143
|
"disabled",
|
|
@@ -7,9 +7,10 @@ import { TimeFieldEmits, TimeFieldOwnProps } from '../timeField.types';
|
|
|
7
7
|
*/
|
|
8
8
|
export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null | TimeValue | undefined>, emit: SetupContext<TimeFieldEmits>["emit"]): {
|
|
9
9
|
open: Ref<boolean, boolean>;
|
|
10
|
+
fill: import('vue').ComputedRef<boolean>;
|
|
10
11
|
overlay: import('vue').ComputedRef<import('@bridge-ui/core/Domain').FieldOverlayMode | undefined>;
|
|
11
12
|
hasValue: import('vue').ComputedRef<boolean>;
|
|
12
|
-
timeOnly: import('vue').ComputedRef<Pick<TimeFieldOwnProps & Record<string, unknown>, "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
|
|
13
|
+
timeOnly: import('vue').ComputedRef<Pick<TimeFieldOwnProps & Record<string, unknown>, "fill" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "timeZone" | "editable" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
|
|
13
14
|
formField: {
|
|
14
15
|
slots: Readonly<{
|
|
15
16
|
[name: string]: import('vue').Slot<any> | undefined;
|
|
@@ -686,8 +687,8 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
|
|
|
686
687
|
onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
|
|
687
688
|
onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
|
|
688
689
|
}, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, "class", {
|
|
689
|
-
readonly: boolean;
|
|
690
690
|
value: string;
|
|
691
|
+
readonly: boolean;
|
|
691
692
|
onFocus: (event: FocusEvent) => void;
|
|
692
693
|
onKeydown: (event: KeyboardEvent) => void;
|
|
693
694
|
}, undefined>>;
|
|
@@ -702,7 +703,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
|
|
|
702
703
|
clearValue: (event?: Event) => void;
|
|
703
704
|
modelValue: import('vue').ComputedRef<Date | null>;
|
|
704
705
|
showFooter: import('vue').ComputedRef<boolean>;
|
|
705
|
-
pickerClass: import('vue').ComputedRef<
|
|
706
|
+
pickerClass: import('vue').ComputedRef<string | undefined>;
|
|
706
707
|
containerRef: Ref<HTMLElement | null, HTMLElement | null>;
|
|
707
708
|
clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
|
|
708
709
|
showClearIcon: import('vue').ComputedRef<boolean>;
|
|
@@ -1,20 +1,22 @@
|
|
|
1
1
|
import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
|
|
2
2
|
import { hasNamedSlot as n } from "../../../Utils/slotOrProp.js";
|
|
3
3
|
import { useBreakpoint as r } from "../../../Utils/useBreakpoint.js";
|
|
4
|
-
import { mergePartBind as i, resolveFieldAdornmentIconSize as a, useFieldShowFooter as o } from "../../../Utils/index.js";
|
|
5
|
-
import { formFieldBridgeKeys as
|
|
6
|
-
import { computed as
|
|
7
|
-
import { get as
|
|
8
|
-
import {
|
|
9
|
-
import { listboxColorProps as
|
|
10
|
-
import { cn as
|
|
4
|
+
import { mergePartBind as i, resolveFieldAdornmentIconSize as a, useFieldShowFooter as o, usePickerFill as s } from "../../../Utils/index.js";
|
|
5
|
+
import { formFieldBridgeKeys as c, useFormField as l } from "../../FormField/composables/useFormField.js";
|
|
6
|
+
import { computed as u, ref as d, useAttrs as f, useSlots as p } from "vue";
|
|
7
|
+
import { get as m, isNil as h, omit as g } from "es-toolkit/compat";
|
|
8
|
+
import { resolveFieldOverlay as _, resolveFieldPickerClassName as v } from "@bridge-ui/core/Domain";
|
|
9
|
+
import { listboxColorProps as y } from "@bridge-ui/core/Tokens";
|
|
10
|
+
import { cn as b, splitComponentProps as x } from "@bridge-ui/core/Utils";
|
|
11
11
|
//#region src/Components/TimeField/composables/useTimeField.ts
|
|
12
|
-
var
|
|
12
|
+
var S = [
|
|
13
13
|
"ampm",
|
|
14
|
+
"fill",
|
|
14
15
|
"classes",
|
|
15
16
|
"maxTime",
|
|
16
17
|
"minTime",
|
|
17
18
|
"overlay",
|
|
19
|
+
"editable",
|
|
18
20
|
"interval",
|
|
19
21
|
"timeZone",
|
|
20
22
|
"clearable",
|
|
@@ -24,86 +26,90 @@ var x = [
|
|
|
24
26
|
"defaultValue",
|
|
25
27
|
"disableTimes"
|
|
26
28
|
];
|
|
27
|
-
function
|
|
28
|
-
return
|
|
29
|
+
function ee(e, t, n, r, i) {
|
|
30
|
+
return h(e) ? "" : t.formatTime(e, n, {
|
|
29
31
|
ampm: r,
|
|
30
32
|
showSeconds: i
|
|
31
33
|
});
|
|
32
34
|
}
|
|
33
35
|
function C(C, w, T) {
|
|
34
|
-
let E =
|
|
36
|
+
let E = f(), D = p(), O = e(), k = r(), A = t(), j = d(!1), M = d(null), N = u(() => x({
|
|
35
37
|
props: {
|
|
36
38
|
...E,
|
|
37
39
|
...C
|
|
38
40
|
},
|
|
39
|
-
bridgeKeys:
|
|
40
|
-
})), P =
|
|
41
|
+
bridgeKeys: S
|
|
42
|
+
})), P = u(() => N.value.componentProps), F = u(() => A(P.value.timeZone)), I = u(() => w.value ?? null), L = u(() => P.value.clearable !== !1), R = u(() => !h(I.value)), z = u(() => _(P.value.overlay, k.mobile)), B = s({
|
|
43
|
+
overlay: z,
|
|
44
|
+
componentName: "TimeField",
|
|
45
|
+
fill: () => P.value.fill
|
|
46
|
+
}), V = u(() => v(B.value, z.value)), H = (e) => {
|
|
41
47
|
M.value = e instanceof HTMLElement ? e : null;
|
|
42
48
|
};
|
|
43
|
-
function
|
|
49
|
+
function U(e) {
|
|
44
50
|
j.value !== e && (j.value = e, T(e ? "open" : "close"));
|
|
45
51
|
}
|
|
46
|
-
let
|
|
47
|
-
let e =
|
|
48
|
-
bridgeKeys:
|
|
49
|
-
props:
|
|
50
|
-
}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timePicker: o, ...
|
|
52
|
+
let W = u(() => g(N.value.inheritedAttrs, ["class"])), G = u(() => {
|
|
53
|
+
let e = x({
|
|
54
|
+
bridgeKeys: c,
|
|
55
|
+
props: W.value
|
|
56
|
+
}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timePicker: o, ...s } = P.value.customProps ?? {};
|
|
51
57
|
return {
|
|
52
58
|
...e,
|
|
53
59
|
endIcon: t,
|
|
54
60
|
classes: P.value.classes,
|
|
55
61
|
customProps: {
|
|
56
|
-
...
|
|
57
|
-
container: i(
|
|
58
|
-
ref:
|
|
59
|
-
class:
|
|
62
|
+
...s,
|
|
63
|
+
container: i(s.container, {}, {
|
|
64
|
+
ref: H,
|
|
65
|
+
class: b({ "cursor-pointer": !C.disabled && !C.readonly }),
|
|
60
66
|
onClick: (e) => {
|
|
61
|
-
C.disabled || C.readonly || e.target.closest("[data-field-clear]") ||
|
|
67
|
+
C.disabled || C.readonly || e.target.closest("[data-field-clear]") || U(!0);
|
|
62
68
|
}
|
|
63
69
|
})
|
|
64
70
|
}
|
|
65
71
|
};
|
|
66
|
-
}),
|
|
72
|
+
}), K = l(() => G.value, {
|
|
67
73
|
size: "md",
|
|
68
74
|
rounded: "md",
|
|
69
75
|
color: "primary",
|
|
70
76
|
variant: "outline",
|
|
71
77
|
showErrorIcon: !0
|
|
72
|
-
}, { componentName: "TimeField" }),
|
|
73
|
-
function
|
|
78
|
+
}, { componentName: "TimeField" }), q = u(() => R.value && L.value && !C.readonly && !K.isDisabled.value), J = u(() => ee(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
|
|
79
|
+
function Y(e) {
|
|
74
80
|
w.value = e, T("change", e);
|
|
75
81
|
}
|
|
76
|
-
let
|
|
82
|
+
let X = o({
|
|
77
83
|
overlay: z,
|
|
78
84
|
componentName: "TimeField",
|
|
79
85
|
showFooter: () => P.value.showFooter
|
|
80
86
|
});
|
|
81
|
-
function
|
|
82
|
-
if (
|
|
87
|
+
function Z(e) {
|
|
88
|
+
if (Y(e), X.value) {
|
|
83
89
|
T("apply");
|
|
84
90
|
return;
|
|
85
91
|
}
|
|
86
|
-
|
|
92
|
+
U(!1);
|
|
87
93
|
}
|
|
88
|
-
function
|
|
94
|
+
function Q() {
|
|
89
95
|
T("cancel");
|
|
90
96
|
}
|
|
91
|
-
function
|
|
92
|
-
e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (
|
|
97
|
+
function $(e) {
|
|
98
|
+
e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (Y(null), T("clear"), U(!1));
|
|
93
99
|
}
|
|
94
|
-
function
|
|
100
|
+
function te(e) {
|
|
95
101
|
e.preventDefault();
|
|
96
102
|
}
|
|
97
|
-
let
|
|
98
|
-
|
|
99
|
-
|
|
103
|
+
let ne = u(() => i({
|
|
104
|
+
value: J.value,
|
|
105
|
+
readonly: !P.value.editable || K.inputBind.value.readonly,
|
|
100
106
|
onFocus: (e) => {
|
|
101
|
-
|
|
107
|
+
K.inputBind.value.onFocus?.(e), U(!0);
|
|
102
108
|
},
|
|
103
109
|
onKeydown: (e) => {
|
|
104
|
-
|
|
110
|
+
K.inputBind.value.onKeydown?.(e), e.key === "Escape" && U(!1);
|
|
105
111
|
}
|
|
106
|
-
}, void 0,
|
|
112
|
+
}, void 0, K.inputBind.value)), re = u(() => P.value.overlay), ie = u(() => {
|
|
107
113
|
let e = P.value.customProps?.menu;
|
|
108
114
|
return {
|
|
109
115
|
modal: P.value.customProps?.modal,
|
|
@@ -114,42 +120,43 @@ function C(C, w, T) {
|
|
|
114
120
|
...e,
|
|
115
121
|
classes: {
|
|
116
122
|
...e?.classes,
|
|
117
|
-
content:
|
|
123
|
+
content: b("min-w-0", e?.classes?.content)
|
|
118
124
|
}
|
|
119
125
|
}
|
|
120
126
|
};
|
|
121
|
-
}),
|
|
127
|
+
}), ae = u(() => P.value.customProps?.timePicker), oe = u(() => a(K.merged.value.size)), se = u(() => m(y, [K.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
|
|
122
128
|
return {
|
|
123
129
|
open: j,
|
|
124
|
-
|
|
130
|
+
fill: B,
|
|
131
|
+
overlay: re,
|
|
125
132
|
hasValue: R,
|
|
126
133
|
timeOnly: P,
|
|
127
|
-
formField:
|
|
128
|
-
inputBind:
|
|
134
|
+
formField: K,
|
|
135
|
+
inputBind: ne,
|
|
129
136
|
clearable: L,
|
|
130
|
-
clearBind:
|
|
137
|
+
clearBind: u(() => i({}, {}, {
|
|
131
138
|
tabindex: 0,
|
|
132
139
|
role: "button",
|
|
133
140
|
"data-field-clear": !0,
|
|
134
|
-
onMousedown:
|
|
135
|
-
class:
|
|
141
|
+
onMousedown: te,
|
|
142
|
+
class: b({
|
|
136
143
|
"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
|
|
137
|
-
[
|
|
144
|
+
[se.value]: !0,
|
|
138
145
|
[P.value.classes?.clear ?? ""]: !0
|
|
139
146
|
})
|
|
140
147
|
})),
|
|
141
|
-
clearValue:
|
|
148
|
+
clearValue: $,
|
|
142
149
|
modelValue: I,
|
|
143
|
-
showFooter:
|
|
144
|
-
pickerClass:
|
|
150
|
+
showFooter: X,
|
|
151
|
+
pickerClass: V,
|
|
145
152
|
containerRef: M,
|
|
146
|
-
clearIconSize:
|
|
147
|
-
showClearIcon:
|
|
148
|
-
handleOpenChange:
|
|
149
|
-
handlePickerChange:
|
|
150
|
-
handlePickerCancel:
|
|
151
|
-
overlayCustomProps:
|
|
152
|
-
timePickerCustomProps:
|
|
153
|
+
clearIconSize: oe,
|
|
154
|
+
showClearIcon: q,
|
|
155
|
+
handleOpenChange: U,
|
|
156
|
+
handlePickerChange: Z,
|
|
157
|
+
handlePickerCancel: Q,
|
|
158
|
+
overlayCustomProps: ie,
|
|
159
|
+
timePickerCustomProps: ae
|
|
153
160
|
};
|
|
154
161
|
}
|
|
155
162
|
//#endregion
|
|
@@ -108,6 +108,22 @@ export interface TimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "cl
|
|
|
108
108
|
* @default undefined
|
|
109
109
|
*/
|
|
110
110
|
disableTimes?: DisableTimesInput;
|
|
111
|
+
/**
|
|
112
|
+
* Unlocks the input for typing. The field does not parse or commit typed
|
|
113
|
+
* text; use the picker (or your own component) to update the value. When
|
|
114
|
+
* unset, the input is read-only.
|
|
115
|
+
*
|
|
116
|
+
* @default false
|
|
117
|
+
*/
|
|
118
|
+
editable?: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* When `true`, the picker fills the overlay width.
|
|
121
|
+
* When `false`, it stays at its minimum width.
|
|
122
|
+
* Unset: `true` for `drawer`, `false` for `menu` and `modal`.
|
|
123
|
+
*
|
|
124
|
+
* @default undefined
|
|
125
|
+
*/
|
|
126
|
+
fill?: boolean;
|
|
111
127
|
/**
|
|
112
128
|
* Minute step between options.
|
|
113
129
|
*
|
|
@@ -12,6 +12,8 @@ var y = /*@__PURE__*/ a({
|
|
|
12
12
|
customProps: {},
|
|
13
13
|
disabled: { type: Boolean },
|
|
14
14
|
disableTimes: {},
|
|
15
|
+
error: { type: Boolean },
|
|
16
|
+
fill: { type: Boolean },
|
|
15
17
|
interval: {},
|
|
16
18
|
maxTime: {},
|
|
17
19
|
minTime: {},
|
|
@@ -19,7 +21,6 @@ var y = /*@__PURE__*/ a({
|
|
|
19
21
|
rounded: {},
|
|
20
22
|
showSeconds: { type: Boolean },
|
|
21
23
|
timeZone: {},
|
|
22
|
-
tokens: {},
|
|
23
24
|
value: {}
|
|
24
25
|
},
|
|
25
26
|
emits: ["change"],
|
|
@@ -22,7 +22,7 @@ export type TimePanelItem = {
|
|
|
22
22
|
*/
|
|
23
23
|
export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>, libDefaults: TimePanelLibDefaults, emit: (event: "change", value: Date | null) => void): {
|
|
24
24
|
merged: import('vue').ComputedRef<TimePanelMerged>;
|
|
25
|
-
rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePanelOwnProps, "color" | "
|
|
25
|
+
rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePanelOwnProps, "error" | "color" | "fill" | "value" | "classes" | "customProps" | "rounded" | "disabled" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
|
|
26
26
|
hourItems: import('vue').ComputedRef<TimePanelItem[]>;
|
|
27
27
|
columnBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
|
|
28
28
|
getHourBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
|