@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.
Files changed (195) hide show
  1. package/ai/skills/bridge-ui-components/SKILL.md +5 -3
  2. package/ai/skills/bridge-ui-forms/SKILL.md +4 -2
  3. package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts +1 -2
  4. package/dist/Components/Autocomplete/composables/useAutocomplete.js +112 -114
  5. package/dist/Components/BaseField/baseField.types.d.ts +1 -8
  6. package/dist/Components/BaseField/composables/useBaseField.js +79 -83
  7. package/dist/Components/Calendar/Calendar.vue_vue_type_script_setup_true_lang.js +2 -1
  8. package/dist/Components/Calendar/calendar.types.d.ts +14 -21
  9. package/dist/Components/Calendar/composables/useCalendar.d.ts +2 -2
  10. package/dist/Components/Calendar/composables/useCalendar.js +101 -98
  11. package/dist/Components/Calendar/index.d.ts +1 -1
  12. package/dist/Components/CalendarDate/CalendarDate.vue_vue_type_script_setup_true_lang.js +1 -1
  13. package/dist/Components/CalendarDate/calendarDate.types.d.ts +7 -21
  14. package/dist/Components/CalendarDate/composables/useCalendarDate.d.ts +1 -1
  15. package/dist/Components/CalendarDate/composables/useCalendarDate.js +81 -73
  16. package/dist/Components/CalendarDate/index.d.ts +1 -1
  17. package/dist/Components/CalendarMonth/CalendarMonth.vue_vue_type_script_setup_true_lang.js +1 -1
  18. package/dist/Components/CalendarMonth/calendarMonth.types.d.ts +7 -17
  19. package/dist/Components/CalendarMonth/composables/useCalendarMonth.d.ts +1 -1
  20. package/dist/Components/CalendarMonth/composables/useCalendarMonth.js +58 -50
  21. package/dist/Components/CalendarMonth/index.d.ts +1 -1
  22. package/dist/Components/CalendarRange/CalendarRange.vue_vue_type_script_setup_true_lang.js +4 -3
  23. package/dist/Components/CalendarRange/calendarRange.types.d.ts +14 -21
  24. package/dist/Components/CalendarRange/composables/useCalendarRange.d.ts +3 -3
  25. package/dist/Components/CalendarRange/composables/useCalendarRange.js +121 -120
  26. package/dist/Components/CalendarRange/index.d.ts +1 -1
  27. package/dist/Components/CalendarYear/CalendarYear.vue_vue_type_script_setup_true_lang.js +1 -1
  28. package/dist/Components/CalendarYear/calendarYear.types.d.ts +7 -17
  29. package/dist/Components/CalendarYear/composables/useCalendarYear.d.ts +1 -1
  30. package/dist/Components/CalendarYear/composables/useCalendarYear.js +60 -52
  31. package/dist/Components/CalendarYear/index.d.ts +1 -1
  32. package/dist/Components/Checkbox/composables/useCheckbox.js +23 -19
  33. package/dist/Components/ColorField/ColorField.js +5 -0
  34. package/dist/Components/ColorField/ColorField.vue.d.ts +38 -0
  35. package/dist/Components/ColorField/ColorField.vue_vue_type_script_setup_true_lang.js +149 -0
  36. package/dist/Components/ColorField/colorField.types.d.ts +179 -0
  37. package/dist/Components/ColorField/composables/useColorField.d.ts +748 -0
  38. package/dist/Components/ColorField/composables/useColorField.js +182 -0
  39. package/dist/Components/ColorField/index.d.ts +3 -0
  40. package/dist/Components/ColorField/index.js +3 -0
  41. package/dist/Components/ColorPicker/ColorPicker.js +5 -0
  42. package/dist/Components/ColorPicker/ColorPicker.vue.d.ts +21 -0
  43. package/dist/Components/ColorPicker/ColorPicker.vue_vue_type_script_setup_true_lang.js +91 -0
  44. package/dist/Components/ColorPicker/colorPicker.types.d.ts +200 -0
  45. package/dist/Components/ColorPicker/composables/useColorPicker.d.ts +111 -0
  46. package/dist/Components/ColorPicker/composables/useColorPicker.js +253 -0
  47. package/dist/Components/ColorPicker/index.d.ts +3 -0
  48. package/dist/Components/ColorPicker/index.js +3 -0
  49. package/dist/Components/DateField/DateField.vue.d.ts +1 -0
  50. package/dist/Components/DateField/DateField.vue_vue_type_script_setup_true_lang.js +13 -31
  51. package/dist/Components/DateField/composables/useDateField.d.ts +3 -4
  52. package/dist/Components/DateField/composables/useDateField.js +95 -107
  53. package/dist/Components/DateField/dateField.types.d.ts +16 -0
  54. package/dist/Components/DatePicker/DatePicker.vue_vue_type_script_setup_true_lang.js +10 -7
  55. package/dist/Components/DatePicker/composables/useDatePicker.d.ts +1 -6
  56. package/dist/Components/DatePicker/composables/useDatePicker.js +8 -10
  57. package/dist/Components/DatePicker/datePicker.types.d.ts +14 -29
  58. package/dist/Components/DatePicker/index.d.ts +1 -1
  59. package/dist/Components/DateRangeField/DateRangeField.vue.d.ts +1 -0
  60. package/dist/Components/DateRangeField/DateRangeField.vue_vue_type_script_setup_true_lang.js +39 -30
  61. package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts +4 -3
  62. package/dist/Components/DateRangeField/composables/useDateRangeField.js +55 -48
  63. package/dist/Components/DateRangeField/dateRangeField.types.d.ts +16 -0
  64. package/dist/Components/DateRangePicker/DateRangePicker.vue_vue_type_script_setup_true_lang.js +10 -7
  65. package/dist/Components/DateRangePicker/composables/useDateRangePicker.d.ts +1 -6
  66. package/dist/Components/DateRangePicker/composables/useDateRangePicker.js +8 -10
  67. package/dist/Components/DateRangePicker/dateRangePicker.types.d.ts +14 -29
  68. package/dist/Components/DateRangePicker/index.d.ts +1 -1
  69. package/dist/Components/DateTimeField/DateTimeField.vue.d.ts +1 -0
  70. package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js +13 -6
  71. package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts +4 -3
  72. package/dist/Components/DateTimeField/composables/useDateTimeField.js +64 -84
  73. package/dist/Components/DateTimeField/dateTimeField.types.d.ts +16 -0
  74. package/dist/Components/DateTimePicker/DateTimePicker.vue_vue_type_script_setup_true_lang.js +26 -21
  75. package/dist/Components/DateTimePicker/composables/useDateTimePicker.d.ts +1 -10
  76. package/dist/Components/DateTimePicker/composables/useDateTimePicker.js +33 -40
  77. package/dist/Components/DateTimePicker/dateTimePicker.types.d.ts +14 -36
  78. package/dist/Components/DateTimePicker/index.d.ts +1 -1
  79. package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue.d.ts +1 -0
  80. package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue_vue_type_script_setup_true_lang.js +44 -37
  81. package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts +4 -3
  82. package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.js +46 -66
  83. package/dist/Components/DateTimeRangeField/dateTimeRangeField.types.d.ts +16 -0
  84. package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js +34 -27
  85. package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.d.ts +1 -10
  86. package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js +39 -45
  87. package/dist/Components/DateTimeRangePicker/dateTimeRangePicker.types.d.ts +14 -36
  88. package/dist/Components/DateTimeRangePicker/index.d.ts +1 -1
  89. package/dist/Components/Drawer/Drawer.vue_vue_type_script_setup_true_lang.js +4 -3
  90. package/dist/Components/FieldOverlay/composables/useFieldOverlay.js +20 -12
  91. package/dist/Components/FieldOverlay/fieldOverlay.types.d.ts +3 -0
  92. package/dist/Components/FormControl/composables/useFormControl.js +61 -65
  93. package/dist/Components/FormControl/formControl.types.d.ts +1 -7
  94. package/dist/Components/FormField/composables/useFormField.d.ts +1 -1
  95. package/dist/Components/FormField/composables/useFormField.js +115 -116
  96. package/dist/Components/FormField/formField.types.d.ts +1 -7
  97. package/dist/Components/Label/composables/useLabel.js +28 -28
  98. package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js +2 -3
  99. package/dist/Components/Listbox/composables/useListbox.d.ts +5 -14
  100. package/dist/Components/Listbox/composables/useListbox.js +57 -54
  101. package/dist/Components/Listbox/index.d.ts +0 -1
  102. package/dist/Components/Listbox/listbox.types.d.ts +6 -12
  103. package/dist/Components/Menu/Menu.vue_vue_type_script_setup_true_lang.js +3 -5
  104. package/dist/Components/Modal/Modal.vue_vue_type_script_setup_true_lang.js +4 -3
  105. package/dist/Components/OtpField/composables/useOtpField.js +95 -94
  106. package/dist/Components/OtpField/otpField.types.d.ts +2 -9
  107. package/dist/Components/Radio/composables/useRadio.js +24 -20
  108. package/dist/Components/Select/composables/useSelect.d.ts +1 -2
  109. package/dist/Components/Select/composables/useSelect.js +21 -23
  110. package/dist/Components/Slider/composables/useSlider.js +167 -163
  111. package/dist/Components/Slider/slider.types.d.ts +2 -9
  112. package/dist/Components/Snackbar/Snackbar.vue_vue_type_script_setup_true_lang.js +3 -2
  113. package/dist/Components/Step/Step.js +5 -0
  114. package/dist/Components/Step/Step.vue.d.ts +11 -0
  115. package/dist/Components/Step/Step.vue_vue_type_script_setup_true_lang.js +32 -0
  116. package/dist/Components/Step/composables/useStep.d.ts +56 -0
  117. package/dist/Components/Step/composables/useStep.js +162 -0
  118. package/dist/Components/Step/index.d.ts +3 -0
  119. package/dist/Components/Step/index.js +3 -0
  120. package/dist/Components/Step/step.types.d.ts +160 -0
  121. package/dist/Components/Stepper/Stepper.js +5 -0
  122. package/dist/Components/Stepper/Stepper.vue.d.ts +24 -0
  123. package/dist/Components/Stepper/Stepper.vue_vue_type_script_setup_true_lang.js +33 -0
  124. package/dist/Components/Stepper/composables/useStepper.d.ts +18 -0
  125. package/dist/Components/Stepper/composables/useStepper.js +91 -0
  126. package/dist/Components/Stepper/index.d.ts +4 -0
  127. package/dist/Components/Stepper/index.js +4 -0
  128. package/dist/Components/Stepper/stepper.types.d.ts +93 -0
  129. package/dist/Components/Stepper/stepperInjectionKey.d.ts +77 -0
  130. package/dist/Components/Stepper/stepperInjectionKey.js +4 -0
  131. package/dist/Components/Switch/composables/useSwitch.js +28 -24
  132. package/dist/Components/TimeField/TimeField.vue.d.ts +1 -0
  133. package/dist/Components/TimeField/TimeField.vue_vue_type_script_setup_true_lang.js +34 -25
  134. package/dist/Components/TimeField/composables/useTimeField.d.ts +4 -3
  135. package/dist/Components/TimeField/composables/useTimeField.js +67 -60
  136. package/dist/Components/TimeField/timeField.types.d.ts +16 -0
  137. package/dist/Components/TimePanel/TimePanel.vue_vue_type_script_setup_true_lang.js +2 -1
  138. package/dist/Components/TimePanel/composables/useTimePanel.d.ts +1 -1
  139. package/dist/Components/TimePanel/composables/useTimePanel.js +65 -54
  140. package/dist/Components/TimePanel/index.d.ts +1 -1
  141. package/dist/Components/TimePanel/timePanel.types.d.ts +14 -17
  142. package/dist/Components/TimePicker/TimePicker.vue_vue_type_script_setup_true_lang.js +16 -13
  143. package/dist/Components/TimePicker/composables/useTimePicker.d.ts +1 -5
  144. package/dist/Components/TimePicker/composables/useTimePicker.js +17 -18
  145. package/dist/Components/TimePicker/index.d.ts +1 -1
  146. package/dist/Components/TimePicker/timePicker.types.d.ts +14 -24
  147. package/dist/Components/TimeRangeField/TimeRangeField.vue.d.ts +1 -0
  148. package/dist/Components/TimeRangeField/TimeRangeField.vue_vue_type_script_setup_true_lang.js +34 -25
  149. package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts +4 -3
  150. package/dist/Components/TimeRangeField/composables/useTimeRangeField.js +88 -81
  151. package/dist/Components/TimeRangeField/timeRangeField.types.d.ts +16 -0
  152. package/dist/Components/TimeRangePicker/TimeRangePicker.vue_vue_type_script_setup_true_lang.js +23 -18
  153. package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.d.ts +1 -5
  154. package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.js +32 -33
  155. package/dist/Components/TimeRangePicker/index.d.ts +1 -1
  156. package/dist/Components/TimeRangePicker/timeRangePicker.types.d.ts +14 -24
  157. package/dist/Components/Tooltip/Tooltip.vue_vue_type_script_setup_true_lang.js +4 -6
  158. package/dist/Utils/index.d.ts +9 -0
  159. package/dist/Utils/index.js +23 -12
  160. package/dist/index.d.ts +20 -12
  161. package/dist/index.js +88 -80
  162. package/docs/README.md +3 -0
  163. package/docs/components/Autocomplete.md +1 -1
  164. package/docs/components/BaseField.md +1 -1
  165. package/docs/components/BridgeUIProvider.md +12 -14
  166. package/docs/components/Calendar.md +4 -1
  167. package/docs/components/CalendarDate.md +3 -1
  168. package/docs/components/CalendarMonth.md +3 -1
  169. package/docs/components/CalendarRange.md +4 -1
  170. package/docs/components/CalendarYear.md +18 -16
  171. package/docs/components/ColorField.md +93 -0
  172. package/docs/components/ColorPicker.md +78 -0
  173. package/docs/components/DateField.md +9 -0
  174. package/docs/components/DatePicker.md +4 -1
  175. package/docs/components/DateRangeField.md +30 -22
  176. package/docs/components/DateRangePicker.md +4 -1
  177. package/docs/components/DateTimeField.md +35 -28
  178. package/docs/components/DateTimePicker.md +4 -1
  179. package/docs/components/DateTimeRangeField.md +36 -28
  180. package/docs/components/DateTimeRangePicker.md +4 -1
  181. package/docs/components/FieldOverlay.md +5 -4
  182. package/docs/components/FormControl.md +1 -1
  183. package/docs/components/Select.md +1 -1
  184. package/docs/components/Stepper.md +60 -0
  185. package/docs/components/TimeField.md +24 -17
  186. package/docs/components/TimePanel.md +4 -1
  187. package/docs/components/TimePicker.md +4 -1
  188. package/docs/components/TimeRangeField.md +25 -17
  189. package/docs/components/TimeRangePicker.md +4 -1
  190. package/docs/examples/icon-fontawesome.ts +2 -0
  191. package/docs/examples/icon-heroicons.ts +2 -0
  192. package/docs/examples/icon-lucide.ts +2 -0
  193. package/docs/examples/icon-phosphor.ts +2 -0
  194. package/docs/examples/icon-tabler.ts +2 -0
  195. package/package.json +2 -2
@@ -0,0 +1,4 @@
1
+ //#region src/Components/Stepper/stepperInjectionKey.ts
2
+ var e = Symbol("bridge-stepper");
3
+ //#endregion
4
+ export { e as STEPPER_INJECTION_KEY };
@@ -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, switchInvalidatedProps as u, switchRoundedProps as d, switchSizeProps as f } from "@bridge-ui/core/Tokens";
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 s(e, C.value.color ?? "primary");
40
- }), k = i(() => m(u, w.value?.tokens?.invalidated)), A = i(() => x.invalidated.value ? k.value : O.value), j = i(() => {
41
- let e = m(f, w.value?.tokens?.size);
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
- }), M = i(() => {
44
- let e = m(d, w.value?.tokens?.rounded);
47
+ }), A = i(() => {
48
+ let e = m(u, w.value?.tokens?.rounded);
45
49
  return s(e, C.value.rounded ?? "full");
46
- }), N = i(() => e({
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"]), p({
55
+ }, c(S.value.inheritedAttrs, ["class"]), f({
52
56
  "sr-only": !0,
53
57
  [E.value.input ?? ""]: !0
54
- }))), P = i(() => e(T.value?.track, { "aria-hidden": !0 }, p({
58
+ }))), M = i(() => e(T.value?.track, { "aria-hidden": !0 }, f({
55
59
  "block cursor-pointer transition ease-in-out duration-100": !0,
56
- [j.value?.track ?? ""]: !0,
57
- [M.value ?? ""]: !0,
58
- [A.value?.track ?? ""]: !D.value,
59
- [A.value?.trackChecked ?? ""]: D.value,
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
- }))), F = i(() => e(T.value?.thumb, { "aria-hidden": !0 }, p({
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
- [j.value?.thumb ?? ""]: !0,
64
- [j.value?.thumbCheckedTranslate ?? ""]: D.value,
65
- [A.value?.thumb ?? ""]: !0,
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({}, {}, p({
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
- [M.value ?? ""]: !0,
73
- [A.value?.focus ?? ""]: !0
76
+ [A.value ?? ""]: !0,
77
+ [O.value?.focus ?? ""]: !0
74
78
  }))),
75
- inputBind: N,
79
+ inputBind: j,
76
80
  isChecked: D,
77
- thumbBind: F,
78
- trackBind: P,
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, overlay: B, timeOnly: V, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, pickerClass: J, clearIconSize: Y, showClearIcon: X, handleOpenChange: Z, handlePickerChange: Q, handlePickerCancel: $, overlayCustomProps: ee, timePickerCustomProps: te } = o(P, R, F);
78
- return (e, o) => (x(), d(c, null, [m(T(i), { field: T(H) }, p({
79
- default: D(() => [f("div", j, [f("input", b(g(T(U))), null, 16), T(X) ? (x(), d("span", v({ key: 0 }, T(W), {
80
- onClick: o[0] ||= (...e) => T(G) && T(G)(...e),
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(G) && T(G)(...e), ["prevent"]), ["enter"]), o[2] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["space"])]
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(Y)
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(B),
97
+ overlay: T(V),
93
98
  "model-value": T(z),
94
- "custom-props": T(ee),
95
- "onUpdate:modelValue": T(Z)
99
+ "custom-props": T(te),
100
+ "onUpdate:modelValue": T(Q)
96
101
  }, {
97
102
  default: D(() => [m(T(s), {
98
- value: T(K),
99
- class: y(T(J)),
100
- ampm: T(V).ampm,
101
- "show-footer": T(q),
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(V).maxTime,
104
- "min-time": T(V).minTime,
105
- interval: T(V).interval,
106
- "time-zone": T(V).timeZone,
107
- onChange: T(Q),
108
- onCancel: T($),
109
- "show-seconds": T(V).showSeconds,
110
- color: T(H).merged.value.color,
111
- "custom-props": T(te),
112
- disabled: T(H).isDisabled.value,
113
- "disable-times": T(V).disableTimes,
114
- rounded: T(H).merged.value.rounded
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<"w-full shadow-none" | undefined>;
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 s, useFormField as c } from "../../FormField/composables/useFormField.js";
6
- import { computed as l, ref as u, useAttrs as d, useSlots as f } from "vue";
7
- import { get as p, isNil as m, omit as h } from "es-toolkit/compat";
8
- import { isFieldOverlayDialog as g, resolveFieldOverlay as _ } from "@bridge-ui/core/Domain";
9
- import { listboxColorProps as v } from "@bridge-ui/core/Tokens";
10
- import { cn as y, splitComponentProps as b } from "@bridge-ui/core/Utils";
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 x = [
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 S(e, t, n, r, i) {
28
- return m(e) ? "" : t.formatTime(e, n, {
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 = d(), D = f(), O = e(), k = r(), A = t(), j = u(!1), M = u(null), N = l(() => b({
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: x
40
- })), P = l(() => N.value.componentProps), F = l(() => A(P.value.timeZone)), I = l(() => w.value ?? null), L = l(() => P.value.clearable !== !1), R = l(() => !m(I.value)), z = l(() => _(P.value.overlay, k.mobile)), B = l(() => g(z.value) ? "w-full shadow-none" : void 0), V = (e) => {
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 H(e) {
49
+ function U(e) {
44
50
  j.value !== e && (j.value = e, T(e ? "open" : "close"));
45
51
  }
46
- let ee = l(() => h(N.value.inheritedAttrs, ["class"])), U = l(() => {
47
- let e = b({
48
- bridgeKeys: s,
49
- props: ee.value
50
- }).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timePicker: o, ...c } = P.value.customProps ?? {};
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
- ...c,
57
- container: i(c.container, {}, {
58
- ref: V,
59
- class: y({ "cursor-pointer": !C.disabled && !C.readonly }),
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]") || H(!0);
67
+ C.disabled || C.readonly || e.target.closest("[data-field-clear]") || U(!0);
62
68
  }
63
69
  })
64
70
  }
65
71
  };
66
- }), W = c(() => U.value, {
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" }), G = l(() => R.value && L.value && !C.readonly && !W.isDisabled.value), K = l(() => S(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
73
- function q(e) {
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 J = o({
82
+ let X = o({
77
83
  overlay: z,
78
84
  componentName: "TimeField",
79
85
  showFooter: () => P.value.showFooter
80
86
  });
81
- function Y(e) {
82
- if (q(e), J.value) {
87
+ function Z(e) {
88
+ if (Y(e), X.value) {
83
89
  T("apply");
84
90
  return;
85
91
  }
86
- H(!1);
92
+ U(!1);
87
93
  }
88
- function X() {
94
+ function Q() {
89
95
  T("cancel");
90
96
  }
91
- function Z(e) {
92
- e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (q(null), T("clear"), H(!1));
97
+ function $(e) {
98
+ e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (Y(null), T("clear"), U(!1));
93
99
  }
94
- function Q(e) {
100
+ function te(e) {
95
101
  e.preventDefault();
96
102
  }
97
- let $ = l(() => i({
98
- readonly: !0,
99
- value: K.value,
103
+ let ne = u(() => i({
104
+ value: J.value,
105
+ readonly: !P.value.editable || K.inputBind.value.readonly,
100
106
  onFocus: (e) => {
101
- W.inputBind.value.onFocus?.(e), H(!0);
107
+ K.inputBind.value.onFocus?.(e), U(!0);
102
108
  },
103
109
  onKeydown: (e) => {
104
- W.inputBind.value.onKeydown?.(e), e.key === "Escape" && H(!1);
110
+ K.inputBind.value.onKeydown?.(e), e.key === "Escape" && U(!1);
105
111
  }
106
- }, void 0, W.inputBind.value)), te = l(() => P.value.overlay), ne = l(() => {
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: y("min-w-0", e?.classes?.content)
123
+ content: b("min-w-0", e?.classes?.content)
118
124
  }
119
125
  }
120
126
  };
121
- }), re = l(() => P.value.customProps?.timePicker), ie = l(() => a(W.merged.value.size)), ae = l(() => p(v, [W.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
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
- overlay: te,
130
+ fill: B,
131
+ overlay: re,
125
132
  hasValue: R,
126
133
  timeOnly: P,
127
- formField: W,
128
- inputBind: $,
134
+ formField: K,
135
+ inputBind: ne,
129
136
  clearable: L,
130
- clearBind: l(() => i({}, {}, {
137
+ clearBind: u(() => i({}, {}, {
131
138
  tabindex: 0,
132
139
  role: "button",
133
140
  "data-field-clear": !0,
134
- onMousedown: Q,
135
- class: y({
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
- [ae.value]: !0,
144
+ [se.value]: !0,
138
145
  [P.value.classes?.clear ?? ""]: !0
139
146
  })
140
147
  })),
141
- clearValue: Z,
148
+ clearValue: $,
142
149
  modelValue: I,
143
- showFooter: J,
144
- pickerClass: B,
150
+ showFooter: X,
151
+ pickerClass: V,
145
152
  containerRef: M,
146
- clearIconSize: ie,
147
- showClearIcon: G,
148
- handleOpenChange: H,
149
- handlePickerChange: Y,
150
- handlePickerCancel: X,
151
- overlayCustomProps: ne,
152
- timePickerCustomProps: re
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" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
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, {