@bridge-ui/vue 0.7.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ai/skills/bridge-ui-components/SKILL.md +2 -1
- package/ai/skills/bridge-ui-forms/SKILL.md +1 -1
- package/dist/Components/Accordion/composables/useAccordion.d.ts +1 -1
- package/dist/Components/ActionFooter/ActionFooter.js +5 -0
- package/dist/Components/ActionFooter/ActionFooter.vue.d.ts +10 -0
- package/dist/Components/ActionFooter/ActionFooter.vue_vue_type_script_setup_true_lang.js +35 -0
- package/dist/Components/ActionFooter/actionFooter.types.d.ts +107 -0
- package/dist/Components/ActionFooter/composables/useActionFooter.d.ts +35 -0
- package/dist/Components/ActionFooter/composables/useActionFooter.js +53 -0
- package/dist/Components/ActionFooter/index.d.ts +3 -0
- package/dist/Components/ActionFooter/index.js +3 -0
- package/dist/Components/Alert/Alert.vue_vue_type_script_setup_true_lang.js +13 -13
- package/dist/Components/Alert/alert.types.d.ts +7 -4
- package/dist/Components/Alert/composables/useAlert.d.ts +2 -1
- package/dist/Components/Alert/composables/useAlert.js +60 -57
- package/dist/Components/Autocomplete/Autocomplete.vue.d.ts +3 -3
- package/dist/Components/Autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/Autocomplete/autocomplete.types.d.ts +1 -1
- package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts +5 -3
- package/dist/Components/Autocomplete/composables/useAutocomplete.js +1 -1
- package/dist/Components/Badge/composables/useBadge.d.ts +1 -1
- package/dist/Components/BaseField/BaseField.vue_vue_type_script_setup_true_lang.js +9 -9
- package/dist/Components/BaseField/baseField.types.d.ts +15 -4
- package/dist/Components/BaseField/composables/useBaseField.d.ts +6 -2
- package/dist/Components/BaseField/composables/useBaseField.js +67 -67
- package/dist/Components/BreadcrumbItem/composables/useBreadcrumbItem.d.ts +3 -3
- package/dist/Components/Button/Button.vue_vue_type_script_setup_true_lang.js +24 -25
- package/dist/Components/Button/composables/useButton.d.ts +4 -2
- package/dist/Components/Button/composables/useButton.js +46 -40
- package/dist/Components/ButtonGroup/composables/useButtonGroup.d.ts +1 -1
- package/dist/Components/Calendar/composables/useCalendar.d.ts +1 -1
- package/dist/Components/CalendarDate/composables/useCalendarDate.d.ts +1 -1
- package/dist/Components/CalendarMonth/composables/useCalendarMonth.d.ts +1 -1
- package/dist/Components/CalendarRange/composables/useCalendarRange.d.ts +1 -1
- package/dist/Components/CalendarYear/composables/useCalendarYear.d.ts +1 -1
- package/dist/Components/Card/composables/useCard.d.ts +1 -1
- package/dist/Components/Chip/Chip.vue.d.ts +1 -1
- package/dist/Components/Chip/composables/useChip.d.ts +1 -1
- package/dist/Components/ColorField/ColorField.vue.d.ts +1 -1
- package/dist/Components/ColorField/ColorField.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/ColorField/colorField.types.d.ts +1 -1
- package/dist/Components/ColorField/composables/useColorField.d.ts +5 -3
- package/dist/Components/ColorField/composables/useColorField.js +1 -1
- package/dist/Components/ColorPicker/ColorPicker.vue_vue_type_script_setup_true_lang.js +41 -40
- package/dist/Components/ColorPicker/composables/useColorPicker.d.ts +1 -3
- package/dist/Components/ColorPicker/composables/useColorPicker.js +0 -2
- package/dist/Components/DataTable/DataTable.vue_vue_type_script_setup_true_lang.js +8 -0
- package/dist/Components/DataTable/DataTableFilterMenu.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/Components/DataTable/composables/useDataTable.d.ts +1 -1
- package/dist/Components/DataTable/composables/useDataTable.js +86 -86
- package/dist/Components/DataTable/composables/useDataTablePagination.d.ts +1 -1
- package/dist/Components/DataTable/dataTable.types.d.ts +22 -4
- package/dist/Components/DateField/DateField.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/DateField/composables/useDateField.d.ts +5 -3
- package/dist/Components/DateField/composables/useDateField.js +1 -1
- package/dist/Components/DateField/dateField.types.d.ts +1 -1
- package/dist/Components/DatePicker/DatePicker.vue_vue_type_script_setup_true_lang.js +18 -17
- package/dist/Components/DatePicker/composables/useDatePicker.d.ts +1 -3
- package/dist/Components/DatePicker/composables/useDatePicker.js +45 -48
- package/dist/Components/DateRangeField/DateRangeField.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts +5 -3
- package/dist/Components/DateRangeField/composables/useDateRangeField.js +1 -1
- package/dist/Components/DateRangeField/dateRangeField.types.d.ts +1 -1
- package/dist/Components/DateRangePicker/DateRangePicker.vue_vue_type_script_setup_true_lang.js +18 -17
- package/dist/Components/DateRangePicker/composables/useDateRangePicker.d.ts +1 -3
- package/dist/Components/DateRangePicker/composables/useDateRangePicker.js +45 -48
- package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts +5 -3
- package/dist/Components/DateTimeField/composables/useDateTimeField.js +1 -1
- package/dist/Components/DateTimeField/dateTimeField.types.d.ts +1 -1
- package/dist/Components/DateTimePicker/DateTimePicker.vue_vue_type_script_setup_true_lang.js +25 -24
- package/dist/Components/DateTimePicker/composables/useDateTimePicker.d.ts +1 -3
- package/dist/Components/DateTimePicker/composables/useDateTimePicker.js +75 -78
- package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts +5 -3
- package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.js +1 -1
- package/dist/Components/DateTimeRangeField/dateTimeRangeField.types.d.ts +1 -1
- package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js +29 -28
- package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.d.ts +1 -3
- package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js +84 -87
- package/dist/Components/Drawer/composables/useDrawer.js +75 -72
- package/dist/Components/FormControl/composables/useFormControl.d.ts +3 -1
- package/dist/Components/FormControl/composables/useFormControl.js +39 -38
- package/dist/Components/FormField/FilledFormField.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/Components/FormField/NotchedFormField.vue_vue_type_script_setup_true_lang.js +31 -31
- package/dist/Components/FormField/OutlinedFormField.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/Components/FormField/StackedFormField.vue_vue_type_script_setup_true_lang.js +34 -34
- package/dist/Components/FormField/UnderlinedFormField.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/Components/FormField/composables/useFormField.d.ts +7 -3
- package/dist/Components/FormField/composables/useFormField.js +148 -144
- package/dist/Components/FormField/formField.types.d.ts +14 -4
- package/dist/Components/ListItem/ListItem.vue.d.ts +1 -1
- package/dist/Components/ListItem/composables/useListItem.d.ts +1 -1
- package/dist/Components/Listbox/Listbox.vue.d.ts +4 -4
- package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js +69 -71
- package/dist/Components/Listbox/composables/useListbox.d.ts +0 -2
- package/dist/Components/Listbox/composables/useListbox.js +63 -66
- package/dist/Components/Menu/composables/useMenu.js +125 -121
- package/dist/Components/Modal/composables/useModal.js +117 -114
- package/dist/Components/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/Components/NumberField/composables/useNumberField.d.ts +4 -2
- package/dist/Components/OtpField/OtpField.vue.d.ts +1 -8
- package/dist/Components/OtpField/OtpField.vue_vue_type_script_setup_true_lang.js +7 -6
- package/dist/Components/OtpField/composables/useOtpField.d.ts +3 -1
- package/dist/Components/Pagination/composables/usePagination.d.ts +1 -1
- package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/Components/PasswordField/composables/usePasswordField.d.ts +4 -2
- package/dist/Components/Select/Select.vue.d.ts +2 -2
- package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/Select/composables/useSelect.d.ts +5 -3
- package/dist/Components/Select/composables/useSelect.js +1 -1
- package/dist/Components/Select/select.types.d.ts +1 -1
- package/dist/Components/Sidebar/composables/useSidebarList.js +1 -1
- package/dist/Components/Sidebar/composables/useSidebarShell.js +1 -1
- package/dist/Components/Slider/Slider.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/Components/Slider/composables/useSlider.d.ts +5 -3
- package/dist/Components/Snackbar/Snackbar.vue_vue_type_script_setup_true_lang.js +31 -28
- package/dist/Components/Snackbar/composables/useSnackbar.d.ts +2 -1
- package/dist/Components/Snackbar/composables/useSnackbar.js +135 -128
- package/dist/Components/Step/composables/useStep.d.ts +1 -1
- package/dist/Components/TextField/TextField.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/Components/TextField/composables/useTextField.d.ts +4 -2
- package/dist/Components/Textarea/Textarea.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/Components/Textarea/composables/useTextarea.d.ts +4 -2
- package/dist/Components/TimeField/TimeField.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/TimeField/composables/useTimeField.d.ts +5 -3
- package/dist/Components/TimeField/composables/useTimeField.js +1 -1
- package/dist/Components/TimeField/timeField.types.d.ts +1 -1
- package/dist/Components/TimePanel/composables/useTimePanel.d.ts +1 -1
- package/dist/Components/TimePicker/TimePicker.vue_vue_type_script_setup_true_lang.js +38 -37
- package/dist/Components/TimePicker/composables/useTimePicker.d.ts +1 -3
- package/dist/Components/TimePicker/composables/useTimePicker.js +54 -57
- package/dist/Components/TimeRangeField/TimeRangeField.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts +5 -3
- package/dist/Components/TimeRangeField/composables/useTimeRangeField.js +1 -1
- package/dist/Components/TimeRangeField/timeRangeField.types.d.ts +1 -1
- package/dist/Components/TimeRangePicker/TimeRangePicker.vue_vue_type_script_setup_true_lang.js +61 -60
- package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.d.ts +1 -3
- package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.js +41 -43
- package/dist/Components/ToggleGroup/composables/useToggleGroup.d.ts +1 -1
- package/dist/Components/Tooltip/Tooltip.vue.d.ts +1 -1
- package/dist/Components/Tooltip/composables/useTooltip.d.ts +1 -1
- package/dist/Components/Tooltip/composables/useTooltip.js +6 -1
- package/dist/Utils/index.d.ts +11 -2
- package/dist/Utils/index.js +31 -27
- package/dist/augments.d.ts +13 -8
- package/dist/index.d.ts +2 -0
- package/dist/index.js +162 -160
- package/docs/README.md +1 -0
- package/docs/components/ActionFooter.md +85 -0
- package/docs/components/Alert.md +4 -2
- package/docs/components/Autocomplete.md +2 -2
- package/docs/components/BaseField.md +19 -18
- package/docs/components/BridgeUIProvider.md +30 -7
- package/docs/components/ColorField.md +1 -1
- package/docs/components/ColorPicker.md +1 -1
- package/docs/components/DataTable.md +16 -4
- package/docs/components/DateField.md +1 -1
- package/docs/components/DatePicker.md +1 -1
- package/docs/components/DateRangeField.md +1 -1
- package/docs/components/DateRangePicker.md +1 -1
- package/docs/components/DateTimeField.md +1 -1
- package/docs/components/DateTimePicker.md +1 -1
- package/docs/components/DateTimeRangeField.md +1 -1
- package/docs/components/DateTimeRangePicker.md +1 -1
- package/docs/components/FormControl.md +1 -1
- package/docs/components/FormField.md +28 -27
- package/docs/components/Select.md +2 -2
- package/docs/components/TimeField.md +1 -1
- package/docs/components/TimePicker.md +1 -1
- package/docs/components/TimeRangeField.md +1 -1
- package/docs/components/TimeRangePicker.md +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -10,163 +10,165 @@ import m from "./Components/Accordion/Accordion.js";
|
|
|
10
10
|
import { useAccordionItem as h } from "./Components/AccordionItem/composables/useAccordionItem.js";
|
|
11
11
|
import g from "./Components/Icon/Icon.js";
|
|
12
12
|
import _ from "./Components/AccordionItem/AccordionItem.js";
|
|
13
|
-
import {
|
|
14
|
-
import y from "./Components/
|
|
15
|
-
import {
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import j from "./Components/
|
|
22
|
-
import {
|
|
23
|
-
import
|
|
24
|
-
import {
|
|
25
|
-
import F from "./Components/
|
|
26
|
-
import
|
|
27
|
-
import {
|
|
28
|
-
import R from "./Components/
|
|
29
|
-
import {
|
|
30
|
-
import B from "./Components/
|
|
31
|
-
import {
|
|
32
|
-
import H from "./Components/
|
|
33
|
-
import U from "./Components/
|
|
34
|
-
import
|
|
35
|
-
import G from "./Components/
|
|
36
|
-
import K from "./Components/
|
|
37
|
-
import q from "./Components/
|
|
38
|
-
import
|
|
39
|
-
import Y from "./Components/
|
|
40
|
-
import X from "./Components/
|
|
41
|
-
import Z from "./Components/
|
|
42
|
-
import Q from "./Components/
|
|
43
|
-
import $ from "./Components/
|
|
44
|
-
import
|
|
45
|
-
import te from "./Components/
|
|
46
|
-
import ne from "./Components/
|
|
47
|
-
import
|
|
48
|
-
import
|
|
49
|
-
import {
|
|
50
|
-
import oe from "./Components/
|
|
51
|
-
import se from "./Components/
|
|
52
|
-
import
|
|
53
|
-
import le from "./Components/
|
|
54
|
-
import {
|
|
55
|
-
import
|
|
56
|
-
import fe from "./Components/
|
|
57
|
-
import {
|
|
58
|
-
import me from "./Components/
|
|
59
|
-
import {
|
|
60
|
-
import ge from "./Components/
|
|
61
|
-
import _e from "./Components/
|
|
62
|
-
import
|
|
63
|
-
import
|
|
64
|
-
import be from "./Components/
|
|
65
|
-
import xe from "./Components/
|
|
66
|
-
import
|
|
67
|
-
import Ce from "./Components/
|
|
68
|
-
import {
|
|
69
|
-
import Te from "./Components/
|
|
70
|
-
import {
|
|
71
|
-
import De from "./Components/
|
|
72
|
-
import {
|
|
73
|
-
import
|
|
74
|
-
import Ae from "./Components/
|
|
75
|
-
import je from "./Components/
|
|
76
|
-
import
|
|
77
|
-
import
|
|
78
|
-
import Pe from "./Components/
|
|
79
|
-
import Fe from "./Components/
|
|
80
|
-
import
|
|
81
|
-
import
|
|
82
|
-
import Re from "./Components/
|
|
83
|
-
import ze from "./Components/
|
|
84
|
-
import
|
|
85
|
-
import
|
|
86
|
-
import {
|
|
87
|
-
import Ue from "./Components/
|
|
88
|
-
import We from "./Components/
|
|
89
|
-
import Ge from "./Components/
|
|
90
|
-
import
|
|
91
|
-
import
|
|
92
|
-
import Je from "./Components/
|
|
93
|
-
import Ye from "./Components/
|
|
94
|
-
import
|
|
95
|
-
import Ze from "./Components/
|
|
96
|
-
import {
|
|
97
|
-
import $e from "./Components/
|
|
98
|
-
import {
|
|
99
|
-
import tt from "./Components/
|
|
100
|
-
import {
|
|
101
|
-
import rt from "./Components/
|
|
102
|
-
import {
|
|
103
|
-
import at from "./Components/
|
|
104
|
-
import {
|
|
105
|
-
import st from "./Components/
|
|
106
|
-
import {
|
|
107
|
-
import lt from "./Components/
|
|
108
|
-
import ut from "./Components/
|
|
109
|
-
import dt from "./Components/
|
|
110
|
-
import
|
|
111
|
-
import
|
|
112
|
-
import {
|
|
113
|
-
import {
|
|
114
|
-
import {
|
|
115
|
-
import {
|
|
116
|
-
import {
|
|
117
|
-
import yt from "./Components/Sidebar/
|
|
118
|
-
import bt from "./Components/Sidebar/
|
|
119
|
-
import xt from "./Components/Sidebar/
|
|
120
|
-
import
|
|
121
|
-
import Ct from "./Components/
|
|
122
|
-
import wt from "./Components/
|
|
123
|
-
import Tt from "./Components/
|
|
124
|
-
import Et from "./Components/Sidebar/
|
|
125
|
-
import
|
|
126
|
-
import Ot from "./Components/
|
|
127
|
-
import {
|
|
128
|
-
import At from "./Components/
|
|
129
|
-
import {
|
|
130
|
-
import Mt from "./Components/
|
|
131
|
-
import {
|
|
132
|
-
import Pt from "./Components/
|
|
133
|
-
import {
|
|
134
|
-
import It from "./Components/
|
|
135
|
-
import {
|
|
136
|
-
import Rt from "./Components/
|
|
137
|
-
import {
|
|
138
|
-
import Bt from "./Components/
|
|
139
|
-
import {
|
|
140
|
-
import
|
|
141
|
-
import Ut from "./Components/
|
|
142
|
-
import {
|
|
143
|
-
import Gt from "./Components/
|
|
144
|
-
import {
|
|
145
|
-
import qt from "./Components/
|
|
146
|
-
import {
|
|
147
|
-
import Yt from "./Components/
|
|
148
|
-
import {
|
|
149
|
-
import Zt from "./Components/
|
|
150
|
-
import {
|
|
151
|
-
import $t from "./Components/
|
|
152
|
-
import {
|
|
153
|
-
import tn from "./Components/
|
|
154
|
-
import {
|
|
155
|
-
import
|
|
156
|
-
import an from "./Components/
|
|
157
|
-
import on from "./Components/
|
|
158
|
-
import
|
|
159
|
-
import
|
|
160
|
-
import ln from "./Components/
|
|
161
|
-
import un from "./Components/
|
|
162
|
-
import
|
|
163
|
-
import
|
|
164
|
-
import pn from "./Components/ToggleGroup/
|
|
165
|
-
import {
|
|
166
|
-
import hn from "./Components/
|
|
167
|
-
import gn from "./
|
|
168
|
-
import
|
|
169
|
-
import
|
|
170
|
-
import {
|
|
171
|
-
import {
|
|
172
|
-
|
|
13
|
+
import { useActionFooter as v } from "./Components/ActionFooter/composables/useActionFooter.js";
|
|
14
|
+
import { BUTTON_GROUP_INJECTION_KEY as y } from "./Components/ButtonGroup/buttonGroupInjectionKey.js";
|
|
15
|
+
import { useButton as b } from "./Components/Button/composables/useButton.js";
|
|
16
|
+
import x from "./Components/Button/Button.js";
|
|
17
|
+
import S from "./Components/ActionFooter/ActionFooter.js";
|
|
18
|
+
import { useAlert as C } from "./Components/Alert/composables/useAlert.js";
|
|
19
|
+
import w from "./Components/Alert/Alert.js";
|
|
20
|
+
import { useFormField as T } from "./Components/FormField/composables/useFormField.js";
|
|
21
|
+
import { findFirstEnabledOptionIndex as E, findLastEnabledOptionIndex as D, getListboxActiveDescendantId as O, getListboxOptionId as k, moveListboxHighlight as A, useListboxNavigation as j } from "./Components/Listbox/composables/useListboxNavigation.js";
|
|
22
|
+
import { useChip as M } from "./Components/Chip/composables/useChip.js";
|
|
23
|
+
import N from "./Components/Chip/Chip.js";
|
|
24
|
+
import { useLabel as P } from "./Components/Label/composables/useLabel.js";
|
|
25
|
+
import F from "./Components/Label/Label.js";
|
|
26
|
+
import I from "./Components/FormField/FormField.js";
|
|
27
|
+
import { useListbox as L } from "./Components/Listbox/composables/useListbox.js";
|
|
28
|
+
import { useFieldOverlay as R } from "./Components/FieldOverlay/composables/useFieldOverlay.js";
|
|
29
|
+
import { useDrawer as z } from "./Components/Drawer/composables/useDrawer.js";
|
|
30
|
+
import B from "./Components/Drawer/Drawer.js";
|
|
31
|
+
import { useMenu as V } from "./Components/Menu/composables/useMenu.js";
|
|
32
|
+
import H from "./Components/Menu/Menu.js";
|
|
33
|
+
import { useModal as U } from "./Components/Modal/composables/useModal.js";
|
|
34
|
+
import W from "./Components/Modal/Modal.js";
|
|
35
|
+
import G from "./Components/FieldOverlay/FieldOverlay.js";
|
|
36
|
+
import { useList as K } from "./Components/List/composables/useList.js";
|
|
37
|
+
import q from "./Components/List/List.js";
|
|
38
|
+
import J from "./Components/ListItem/ListItem.js";
|
|
39
|
+
import Y from "./Components/ListSection/ListSection.js";
|
|
40
|
+
import { useProgress as X } from "./Components/Progress/composables/useProgress.js";
|
|
41
|
+
import Z from "./Components/Progress/Progress.js";
|
|
42
|
+
import Q from "./Components/Listbox/Listbox.js";
|
|
43
|
+
import $ from "./Components/Autocomplete/Autocomplete.js";
|
|
44
|
+
import ee from "./Components/Autocomplete/AutocompleteOption.js";
|
|
45
|
+
import te from "./Components/Avatar/Avatar.js";
|
|
46
|
+
import { useBadge as ne } from "./Components/Badge/composables/useBadge.js";
|
|
47
|
+
import re from "./Components/Badge/Badge.js";
|
|
48
|
+
import ie from "./Components/BaseField/BaseField.js";
|
|
49
|
+
import { useBaseField as ae } from "./Components/BaseField/composables/useBaseField.js";
|
|
50
|
+
import { useBreadcrumb as oe } from "./Components/Breadcrumb/composables/useBreadcrumb.js";
|
|
51
|
+
import { useBreadcrumbItem as se } from "./Components/BreadcrumbItem/composables/useBreadcrumbItem.js";
|
|
52
|
+
import ce from "./Components/BreadcrumbItem/BreadcrumbItem.js";
|
|
53
|
+
import le from "./Components/Breadcrumb/Breadcrumb.js";
|
|
54
|
+
import { useButtonGroup as ue } from "./Components/ButtonGroup/composables/useButtonGroup.js";
|
|
55
|
+
import de from "./Components/ButtonGroup/ButtonGroup.js";
|
|
56
|
+
import { useCalendar as fe } from "./Components/Calendar/composables/useCalendar.js";
|
|
57
|
+
import { useCalendarDate as pe } from "./Components/CalendarDate/composables/useCalendarDate.js";
|
|
58
|
+
import me from "./Components/CalendarDate/CalendarDate.js";
|
|
59
|
+
import { useCalendarMonth as he } from "./Components/CalendarMonth/composables/useCalendarMonth.js";
|
|
60
|
+
import ge from "./Components/CalendarMonth/CalendarMonth.js";
|
|
61
|
+
import { useCalendarYear as _e } from "./Components/CalendarYear/composables/useCalendarYear.js";
|
|
62
|
+
import ve from "./Components/CalendarYear/CalendarYear.js";
|
|
63
|
+
import ye from "./Components/Calendar/Calendar.js";
|
|
64
|
+
import { useCalendarRange as be } from "./Components/CalendarRange/composables/useCalendarRange.js";
|
|
65
|
+
import { useDivider as xe } from "./Components/Divider/composables/useDivider.js";
|
|
66
|
+
import Se from "./Components/Divider/Divider.js";
|
|
67
|
+
import Ce from "./Components/CalendarRange/CalendarRange.js";
|
|
68
|
+
import { useCard as we } from "./Components/Card/composables/useCard.js";
|
|
69
|
+
import Te from "./Components/Card/Card.js";
|
|
70
|
+
import { useFormControl as Ee } from "./Components/FormControl/composables/useFormControl.js";
|
|
71
|
+
import De from "./Components/FormControl/FormControl.js";
|
|
72
|
+
import { useCheckbox as Oe } from "./Components/Checkbox/composables/useCheckbox.js";
|
|
73
|
+
import ke from "./Components/Checkbox/Checkbox.js";
|
|
74
|
+
import { useColorField as Ae } from "./Components/ColorField/composables/useColorField.js";
|
|
75
|
+
import { useColorPicker as je } from "./Components/ColorPicker/composables/useColorPicker.js";
|
|
76
|
+
import Me from "./Components/ColorPicker/ColorPicker.js";
|
|
77
|
+
import Ne from "./Components/ColorField/ColorField.js";
|
|
78
|
+
import { useDateField as Pe } from "./Components/DateField/composables/useDateField.js";
|
|
79
|
+
import { useDatePicker as Fe } from "./Components/DatePicker/composables/useDatePicker.js";
|
|
80
|
+
import Ie from "./Components/DatePicker/DatePicker.js";
|
|
81
|
+
import Le from "./Components/DateField/DateField.js";
|
|
82
|
+
import { useDateRangeField as Re } from "./Components/DateRangeField/composables/useDateRangeField.js";
|
|
83
|
+
import { useDateRangePicker as ze } from "./Components/DateRangePicker/composables/useDateRangePicker.js";
|
|
84
|
+
import Be from "./Components/DateRangePicker/DateRangePicker.js";
|
|
85
|
+
import Ve from "./Components/DateRangeField/DateRangeField.js";
|
|
86
|
+
import { useDateTimeField as He } from "./Components/DateTimeField/composables/useDateTimeField.js";
|
|
87
|
+
import { useDateTimePicker as Ue } from "./Components/DateTimePicker/composables/useDateTimePicker.js";
|
|
88
|
+
import { useTimePanel as We } from "./Components/TimePanel/composables/useTimePanel.js";
|
|
89
|
+
import Ge from "./Components/TimePanel/TimePanel.js";
|
|
90
|
+
import Ke from "./Components/DateTimePicker/DateTimePicker.js";
|
|
91
|
+
import qe from "./Components/DateTimeField/DateTimeField.js";
|
|
92
|
+
import { useDateTimeRangeField as Je } from "./Components/DateTimeRangeField/composables/useDateTimeRangeField.js";
|
|
93
|
+
import { useDateTimeRangePicker as Ye } from "./Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js";
|
|
94
|
+
import Xe from "./Components/DateTimeRangePicker/DateTimeRangePicker.js";
|
|
95
|
+
import Ze from "./Components/DateTimeRangeField/DateTimeRangeField.js";
|
|
96
|
+
import { useEmptyState as Qe } from "./Components/EmptyState/composables/useEmptyState.js";
|
|
97
|
+
import $e from "./Components/EmptyState/EmptyState.js";
|
|
98
|
+
import { useLink as et } from "./Components/Link/composables/useLink.js";
|
|
99
|
+
import tt from "./Components/Link/Link.js";
|
|
100
|
+
import { useNumberField as nt } from "./Components/NumberField/composables/useNumberField.js";
|
|
101
|
+
import rt from "./Components/NumberField/NumberField.js";
|
|
102
|
+
import { useOtpField as it } from "./Components/OtpField/composables/useOtpField.js";
|
|
103
|
+
import at from "./Components/OtpField/OtpField.js";
|
|
104
|
+
import { usePagination as ot } from "./Components/Pagination/composables/usePagination.js";
|
|
105
|
+
import st from "./Components/Pagination/Pagination.js";
|
|
106
|
+
import { usePasswordField as ct } from "./Components/PasswordField/composables/usePasswordField.js";
|
|
107
|
+
import lt from "./Components/PasswordField/PasswordField.js";
|
|
108
|
+
import { useRadio as ut } from "./Components/Radio/composables/useRadio.js";
|
|
109
|
+
import dt from "./Components/Radio/Radio.js";
|
|
110
|
+
import ft from "./Components/Select/Select.js";
|
|
111
|
+
import pt from "./Components/Select/SelectOption.js";
|
|
112
|
+
import { useSidebar as mt } from "./Components/Sidebar/composables/useSidebar.js";
|
|
113
|
+
import { useSidebarInset as ht } from "./Components/Sidebar/composables/useSidebarInset.js";
|
|
114
|
+
import { useSidebarList as gt } from "./Components/Sidebar/composables/useSidebarList.js";
|
|
115
|
+
import { useSidebarListItem as _t } from "./Components/Sidebar/composables/useSidebarListItem.js";
|
|
116
|
+
import { useSidebarProvider as vt } from "./Components/Sidebar/composables/useSidebarProvider.js";
|
|
117
|
+
import { useSidebarShell as yt } from "./Components/Sidebar/composables/useSidebarShell.js";
|
|
118
|
+
import { useSidebarTrigger as bt } from "./Components/Sidebar/composables/useSidebarTrigger.js";
|
|
119
|
+
import xt from "./Components/Sidebar/Sidebar.js";
|
|
120
|
+
import St from "./Components/Sidebar/SidebarInset.js";
|
|
121
|
+
import Ct from "./Components/Sidebar/SidebarList.js";
|
|
122
|
+
import { useTooltip as wt } from "./Components/Tooltip/composables/useTooltip.js";
|
|
123
|
+
import Tt from "./Components/Tooltip/Tooltip.js";
|
|
124
|
+
import Et from "./Components/Sidebar/SidebarListItem.js";
|
|
125
|
+
import Dt from "./Components/Sidebar/SidebarProvider.js";
|
|
126
|
+
import Ot from "./Components/Sidebar/SidebarTrigger.js";
|
|
127
|
+
import { useSkeleton as kt } from "./Components/Skeleton/composables/useSkeleton.js";
|
|
128
|
+
import At from "./Components/Skeleton/Skeleton.js";
|
|
129
|
+
import { useSlider as jt } from "./Components/Slider/composables/useSlider.js";
|
|
130
|
+
import Mt from "./Components/Slider/Slider.js";
|
|
131
|
+
import { useSnackbar as Nt } from "./Components/Snackbar/composables/useSnackbar.js";
|
|
132
|
+
import Pt from "./Components/Snackbar/Snackbar.js";
|
|
133
|
+
import { useSpinner as Ft } from "./Components/Spinner/composables/useSpinner.js";
|
|
134
|
+
import It from "./Components/Spinner/Spinner.js";
|
|
135
|
+
import { useStep as Lt } from "./Components/Step/composables/useStep.js";
|
|
136
|
+
import Rt from "./Components/Step/Step.js";
|
|
137
|
+
import { useStepper as zt } from "./Components/Stepper/composables/useStepper.js";
|
|
138
|
+
import Bt from "./Components/Stepper/Stepper.js";
|
|
139
|
+
import { useSwitch as Vt } from "./Components/Switch/composables/useSwitch.js";
|
|
140
|
+
import Ht from "./Components/Switch/Switch.js";
|
|
141
|
+
import { TABS_INJECTION_KEY as Ut } from "./Components/Tabs/tabsInjectionKey.js";
|
|
142
|
+
import { useTab as Wt } from "./Components/Tab/composables/useTab.js";
|
|
143
|
+
import Gt from "./Components/Tab/Tab.js";
|
|
144
|
+
import { useTabItem as Kt } from "./Components/TabItem/composables/useTabItem.js";
|
|
145
|
+
import qt from "./Components/TabItem/TabItem.js";
|
|
146
|
+
import { useTabList as Jt } from "./Components/TabList/composables/useTabList.js";
|
|
147
|
+
import Yt from "./Components/TabList/TabList.js";
|
|
148
|
+
import { useTabPanel as Xt } from "./Components/TabPanel/composables/useTabPanel.js";
|
|
149
|
+
import Zt from "./Components/TabPanel/TabPanel.js";
|
|
150
|
+
import { useTabs as Qt } from "./Components/Tabs/composables/useTabs.js";
|
|
151
|
+
import $t from "./Components/Tabs/Tabs.js";
|
|
152
|
+
import { useTextarea as en } from "./Components/Textarea/composables/useTextarea.js";
|
|
153
|
+
import tn from "./Components/Textarea/Textarea.js";
|
|
154
|
+
import { useTextField as nn } from "./Components/TextField/composables/useTextField.js";
|
|
155
|
+
import rn from "./Components/TextField/TextField.js";
|
|
156
|
+
import { useTimeField as an } from "./Components/TimeField/composables/useTimeField.js";
|
|
157
|
+
import { useTimePicker as on } from "./Components/TimePicker/composables/useTimePicker.js";
|
|
158
|
+
import sn from "./Components/TimePicker/TimePicker.js";
|
|
159
|
+
import cn from "./Components/TimeField/TimeField.js";
|
|
160
|
+
import { useTimeRangeField as ln } from "./Components/TimeRangeField/composables/useTimeRangeField.js";
|
|
161
|
+
import { useTimeRangePicker as un } from "./Components/TimeRangePicker/composables/useTimeRangePicker.js";
|
|
162
|
+
import dn from "./Components/TimeRangePicker/TimeRangePicker.js";
|
|
163
|
+
import fn from "./Components/TimeRangeField/TimeRangeField.js";
|
|
164
|
+
import { TOGGLE_GROUP_INJECTION_KEY as pn } from "./Components/ToggleGroup/toggleGroupInjectionKey.js";
|
|
165
|
+
import { useToggleGroup as mn } from "./Components/ToggleGroup/composables/useToggleGroup.js";
|
|
166
|
+
import hn from "./Components/ToggleGroup/ToggleGroup.js";
|
|
167
|
+
import { useToggleItem as gn } from "./Components/ToggleItem/composables/useToggleItem.js";
|
|
168
|
+
import _n from "./Components/ToggleItem/ToggleItem.js";
|
|
169
|
+
import vn from "./Provider/BridgeUIProvider.js";
|
|
170
|
+
import { createBridgeUI as yn } from "./Provider/createBridgeUI.js";
|
|
171
|
+
import { SEMANTIC_ICON_NAMES as bn, interpolateMessage as xn, resolveMessage as Sn, selectPluralMessage as Cn } from "@bridge-ui/core/Adapters";
|
|
172
|
+
import { cn as wn } from "@bridge-ui/core/Utils";
|
|
173
|
+
import { BRIDGE_UI_DEFAULT_GLOBAL as Tn, mergeBridgeUIComponents as En, mergeBridgeUIGlobal as Dn, resolveBridgeUIOptions as On } from "@bridge-ui/core/Config";
|
|
174
|
+
export { l as ACCORDION_INJECTION_KEY, m as Accordion, _ as AccordionItem, S as ActionFooter, w as Alert, $ as Autocomplete, ee as AutocompleteOption, te as Avatar, Tn as BRIDGE_UI_DEFAULT_GLOBAL, y as BUTTON_GROUP_INJECTION_KEY, re as Badge, ie as BaseField, le as Breadcrumb, ce as BreadcrumbItem, vn as BridgeUIProvider, x as Button, de as ButtonGroup, ye as Calendar, me as CalendarDate, ge as CalendarMonth, Ce as CalendarRange, ve as CalendarYear, Te as Card, ke as Checkbox, N as Chip, Ne as ColorField, Me as ColorPicker, Le as DateField, Ie as DatePicker, Ve as DateRangeField, Be as DateRangePicker, qe as DateTimeField, Ke as DateTimePicker, Ze as DateTimeRangeField, Xe as DateTimeRangePicker, Se as Divider, B as Drawer, $e as EmptyState, G as FieldOverlay, De as FormControl, I as FormField, g as Icon, F as Label, tt as Link, q as List, J as ListItem, Y as ListSection, Q as Listbox, H as Menu, W as Modal, rt as NumberField, at as OtpField, st as Pagination, lt as PasswordField, Z as Progress, dt as Radio, bn as SEMANTIC_ICON_NAMES, ft as Select, pt as SelectOption, xt as Sidebar, St as SidebarInset, Ct as SidebarList, Et as SidebarListItem, Dt as SidebarProvider, Ot as SidebarTrigger, At as Skeleton, Mt as Slider, Pt as Snackbar, It as Spinner, Rt as Step, Bt as Stepper, Ht as Switch, Ut as TABS_INJECTION_KEY, pn as TOGGLE_GROUP_INJECTION_KEY, Gt as Tab, qt as TabItem, Yt as TabList, Zt as TabPanel, $t as Tabs, rn as TextField, tn as Textarea, cn as TimeField, Ge as TimePanel, sn as TimePicker, fn as TimeRangeField, dn as TimeRangePicker, hn as ToggleGroup, _n as ToggleItem, Tt as Tooltip, wn as cn, yn as createBridgeUI, E as findFirstEnabledOptionIndex, D as findLastEnabledOptionIndex, O as getListboxActiveDescendantId, k as getListboxOptionId, xn as interpolateMessage, En as mergeBridgeUIComponents, Dn as mergeBridgeUIGlobal, A as moveListboxHighlight, On as resolveBridgeUIOptions, Sn as resolveMessage, Cn as selectPluralMessage, t as setDateAdapterForTests, i as setI18nAdapterForTests, s as setIconAdapterForTests, p as useAccordion, h as useAccordionItem, v as useActionFooter, C as useAlert, ne as useBadge, ae as useBaseField, oe as useBreadcrumb, se as useBreadcrumbItem, u as useBreakpoint, e as useBridgeUI, d as useBridgeUIComponent, f as useBridgeUIMergedRegistryClasses, b as useButton, ue as useButtonGroup, fe as useCalendar, pe as useCalendarDate, he as useCalendarMonth, be as useCalendarRange, _e as useCalendarYear, we as useCard, Oe as useCheckbox, M as useChip, Ae as useColorField, je as useColorPicker, n as useDateAdapter, r as useDateAdapterContext, Pe as useDateField, Fe as useDatePicker, Re as useDateRangeField, ze as useDateRangePicker, He as useDateTimeField, Ue as useDateTimePicker, Je as useDateTimeRangeField, Ye as useDateTimeRangePicker, xe as useDivider, z as useDrawer, Qe as useEmptyState, R as useFieldOverlay, Ee as useFormControl, T as useFormField, a as useI18nAdapter, c as useIconAdapter, P as useLabel, et as useLink, K as useList, L as useListbox, j as useListboxNavigation, V as useMenu, U as useModal, nt as useNumberField, it as useOtpField, ot as usePagination, ct as usePasswordField, X as useProgress, ut as useRadio, o as useResolveMessage, mt as useSidebar, ht as useSidebarInset, gt as useSidebarList, _t as useSidebarListItem, vt as useSidebarProvider, yt as useSidebarShell, bt as useSidebarTrigger, kt as useSkeleton, jt as useSlider, Nt as useSnackbar, Ft as useSpinner, Lt as useStep, zt as useStepper, Vt as useSwitch, Wt as useTab, Kt as useTabItem, Jt as useTabList, Xt as useTabPanel, Qt as useTabs, nn as useTextField, en as useTextarea, an as useTimeField, We as useTimePanel, on as useTimePicker, ln as useTimeRangeField, un as useTimeRangePicker, mn as useToggleGroup, gn as useToggleItem, wt as useTooltip };
|
package/docs/README.md
CHANGED
|
@@ -5,6 +5,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
|
|
|
5
5
|
## Components
|
|
6
6
|
|
|
7
7
|
- [Accordion](./components/Accordion.md)
|
|
8
|
+
- [ActionFooter](./components/ActionFooter.md)
|
|
8
9
|
- [Alert](./components/Alert.md)
|
|
9
10
|
- [Autocomplete](./components/Autocomplete.md)
|
|
10
11
|
- [Avatar](./components/Avatar.md)
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# ActionFooter
|
|
2
|
+
|
|
3
|
+
Cancel / Apply pair used as the default footer in pickers and listboxes. The host keeps the footer bar; `ActionFooter` only renders the buttons.
|
|
4
|
+
|
|
5
|
+
Theme both buttons once through `components.ActionFooter.defaultProps`. Instance `customProps.applyButton` / `cancelButton` still win.
|
|
6
|
+
|
|
7
|
+
## Import
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { ActionFooter } from "@bridge-ui/vue/Components/ActionFooter";
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Examples
|
|
14
|
+
|
|
15
|
+
### Usage
|
|
16
|
+
|
|
17
|
+
```vue
|
|
18
|
+
<ActionFooter v-on:apply="save" v-on:cancel="discard" />
|
|
19
|
+
|
|
20
|
+
<ActionFooter apply-label="Save" cancel-label="Discard" />
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Registry defaults
|
|
24
|
+
|
|
25
|
+
```vue
|
|
26
|
+
<BridgeUIProvider
|
|
27
|
+
:components="{
|
|
28
|
+
ActionFooter: {
|
|
29
|
+
defaultProps: {
|
|
30
|
+
applyColor: 'info',
|
|
31
|
+
cancelVariant: 'flat',
|
|
32
|
+
cancelColor: 'secondary',
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
}"
|
|
36
|
+
>
|
|
37
|
+
<DatePicker show-footer />
|
|
38
|
+
</BridgeUIProvider>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Instance override
|
|
42
|
+
|
|
43
|
+
```vue
|
|
44
|
+
<DatePicker
|
|
45
|
+
show-footer
|
|
46
|
+
:custom-props="{
|
|
47
|
+
applyButton: { color: 'error' },
|
|
48
|
+
}"
|
|
49
|
+
/>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### customProps
|
|
53
|
+
|
|
54
|
+
```vue
|
|
55
|
+
<ActionFooter
|
|
56
|
+
:custom-props="{
|
|
57
|
+
applyButton: { color: 'error' },
|
|
58
|
+
root: { 'data-testid': 'action-footer' },
|
|
59
|
+
}"
|
|
60
|
+
/>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Props
|
|
64
|
+
|
|
65
|
+
| Prop | Type | Default | Description |
|
|
66
|
+
| ---------------- | ------------------------- | ------------- | -------------------------------------------------------- |
|
|
67
|
+
| `apply-color` | `ButtonColor` | `"primary"` | Color of the Apply button. |
|
|
68
|
+
| `apply-label` | `string` | `"Apply"` | Label of the Apply button. Falls back to i18n `Apply`. |
|
|
69
|
+
| `apply-variant` | `ButtonVariant` | — | Variant of the Apply button. Falls back to `Button`. |
|
|
70
|
+
| `cancel-color` | `ButtonColor` | `"secondary"` | Color of the Cancel button. |
|
|
71
|
+
| `cancel-label` | `string` | `"Cancel"` | Label of the Cancel button. Falls back to i18n `Cancel`. |
|
|
72
|
+
| `cancel-variant` | `ButtonVariant` | `"flat"` | Variant of the Cancel button. |
|
|
73
|
+
| `classes` | `ActionFooterClasses` | — | Classes for `root`, `applyButton`, `cancelButton`. |
|
|
74
|
+
| `custom-props` | `ActionFooterCustomProps` | — | Extra props for internal parts. |
|
|
75
|
+
|
|
76
|
+
## Events
|
|
77
|
+
|
|
78
|
+
| Event | Type | Description |
|
|
79
|
+
| ------------- | ---- | ------------------------------- |
|
|
80
|
+
| `v-on:apply` | `()` | Emitted when Apply is pressed. |
|
|
81
|
+
| `v-on:cancel` | `()` | Emitted when Cancel is pressed. |
|
|
82
|
+
|
|
83
|
+
## Related components
|
|
84
|
+
|
|
85
|
+
Button, DatePicker, ColorPicker, Select
|
package/docs/components/Alert.md
CHANGED
|
@@ -15,6 +15,8 @@ import { Alert } from "@bridge-ui/vue/Components/Alert";
|
|
|
15
15
|
```vue
|
|
16
16
|
<Alert color="primary" title="Heads up" />
|
|
17
17
|
|
|
18
|
+
<Alert color="success">Saved successfully.</Alert>
|
|
19
|
+
|
|
18
20
|
<Alert color="error" title="Something went wrong">
|
|
19
21
|
Please try again in a few minutes.
|
|
20
22
|
</Alert>
|
|
@@ -81,10 +83,10 @@ import { Alert } from "@bridge-ui/vue/Components/Alert";
|
|
|
81
83
|
| `color` | `AlertColor` | "primary" | The color to apply to the alert. |
|
|
82
84
|
| `customProps` | `AlertCustomProps` | — | Extra props for internal parts (`icon`, `title`, `body`, etc.). Root HTML attributes stay on the component top level. |
|
|
83
85
|
| `icon` | `LucideIcon \| null` | — | The icon to apply to the alert. Use `null` to omit the prop icon. |
|
|
84
|
-
| `padding` | `AlertPadding` | "medium" |
|
|
86
|
+
| `padding` | `AlertPadding` | "medium" | Root padding scale. Each token also sets body indent under the title row. |
|
|
85
87
|
| `rounded` | `AlertRounded` | "sm" | The roundedness of the alert. |
|
|
86
88
|
| `shadow` | `AlertShadow` | "sm" | The shadow to apply to the alert. |
|
|
87
|
-
| `title` | `string` | — |
|
|
89
|
+
| `title` | `string` | — | Title in the heading row. When omitted, the default slot is used as the title. |
|
|
88
90
|
| `variant` | `AlertVariant` | "flat" | The variant of the alert. |
|
|
89
91
|
|
|
90
92
|
## Accessibility
|
|
@@ -160,7 +160,7 @@ When unset, `showFooter` defaults to `true` for `modal` / `drawer` overlays (`fa
|
|
|
160
160
|
| Prop | Type | Default | Description |
|
|
161
161
|
| ------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
|
162
162
|
| `asyncData` | `SelectAsyncData` | — | Remote data source. Implies `searchable`. |
|
|
163
|
-
| `clearable` | `boolean` | `
|
|
163
|
+
| `clearable` | `boolean` | `false` | Whether the value can be cleared. |
|
|
164
164
|
| `defaultValue` | `SelectModel` | — | Initial value when uncontrolled. |
|
|
165
165
|
| `disableMaxHeight` | `boolean` | `false` | When true, the dropdown options list is not height-limited. Forwarded to the internal `Listbox`. |
|
|
166
166
|
| `emptyMessage` | `string` | "No options" | Message when the filtered list is empty. |
|
|
@@ -215,4 +215,4 @@ See [FormField](./FormField.md) (building-block chrome). Field tokens live on `c
|
|
|
215
215
|
|
|
216
216
|
## Related components
|
|
217
217
|
|
|
218
|
-
Menu, Modal, Drawer, FieldOverlay, List, ListItem, ListSection, FormField
|
|
218
|
+
Menu, Modal, Drawer, FieldOverlay, List, ListItem, ListSection, FormField, ActionFooter
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# BaseField
|
|
2
2
|
|
|
3
|
-
> Building block for composite field chrome. Prefer `OtpField` / `Slider` in apps; BaseField remains exported for advanced composition.
|
|
3
|
+
> Building block for composite field chrome. Prefer `OtpField` / `Slider` in apps; BaseField remains exported for advanced composition. Theme shared chrome via `components.BaseField`.
|
|
4
4
|
|
|
5
5
|
Shared vertical field chrome (label, corner, start/end slots, description,
|
|
6
6
|
error message) for OtpField, Slider, and similar controls.
|
|
@@ -103,23 +103,24 @@ const field = useBaseField(() => ({
|
|
|
103
103
|
|
|
104
104
|
## Props
|
|
105
105
|
|
|
106
|
-
| Prop
|
|
107
|
-
|
|
|
108
|
-
| `classes`
|
|
109
|
-
| `controlId`
|
|
110
|
-
| `corner`
|
|
111
|
-
| `customProps`
|
|
112
|
-
| `description`
|
|
113
|
-
| `disabled`
|
|
114
|
-
| `error`
|
|
115
|
-
| `errorMessage`
|
|
116
|
-
| `field`
|
|
117
|
-
| `hideErrorMessage`
|
|
118
|
-
| `label`
|
|
119
|
-
| `readonly`
|
|
120
|
-
| `required`
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
106
|
+
| Prop | Type | Default | Description |
|
|
107
|
+
| ------------------------ | ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
108
|
+
| `classes` | `BaseFieldClasses` | — | Classes for the field chrome and control group layout. |
|
|
109
|
+
| `controlId` | `string` | auto | Id for the control group and related labels. |
|
|
110
|
+
| `corner` | `string` | — | Secondary header text at the inline end. |
|
|
111
|
+
| `customProps` | `BaseFieldCustomProps` | — | Extra props for internal parts (`root`, `group`, `label`, …). |
|
|
112
|
+
| `description` | `string` | — | Helper text below the control group. Hidden when `error` and an error message are set, unless `showDescriptionOnError`. |
|
|
113
|
+
| `disabled` | `boolean` | `false` | Disables the field control group. |
|
|
114
|
+
| `error` | `boolean` | `false` | Invalid styling on the label and control group. Hides description when an error message is shown, unless `showDescriptionOnError`. |
|
|
115
|
+
| `errorMessage` | `string` | — | Error message below the control group. |
|
|
116
|
+
| `field` | `UseBaseFieldReturn` | — | Pre-composed field chrome API from `useBaseField`. Used by `<BaseField :field="…" />`. |
|
|
117
|
+
| `hideErrorMessage` | `boolean` | `false` | When `true`, does not reserve the error row. That row is also omitted while a description is shown. |
|
|
118
|
+
| `label` | `string` | — | Primary label above the control group. |
|
|
119
|
+
| `readonly` | `boolean` | `false` | Read-only field control group. |
|
|
120
|
+
| `required` | `boolean` | `false` | Shows a required asterisk on the label. |
|
|
121
|
+
| `showDescriptionOnError` | `boolean` | `false` | When `true`, keeps the description visible while the field is invalid. |
|
|
122
|
+
| `size` | `BaseFieldSize` | `"md"` | Label typography and control group gap scale. |
|
|
123
|
+
| `slots` | `BaseFieldSlots` | — | `#label`, `#corner`, `#description`, `#errorMessage`, `#start`, `#end`, and default control. |
|
|
123
124
|
|
|
124
125
|
## Related components
|
|
125
126
|
|