@bridge-ui/vue 0.0.6 → 0.0.8
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/AGENTS.md +31 -0
- package/ai/README.md +35 -0
- package/ai/guidelines/core.md +44 -0
- package/ai/llms.txt +38 -0
- package/ai/skills/bridge-ui-components/SKILL.md +37 -0
- package/ai/skills/bridge-ui-forms/SKILL.md +38 -0
- package/ai/skills/bridge-ui-overlays/SKILL.md +37 -0
- package/ai/skills/bridge-ui-setup/SKILL.md +38 -0
- package/bin/__tests__/ai.test.ts +319 -0
- package/bin/ai.mjs +469 -0
- package/dist/Actions/Snackbar/BridgeSnackbarAction.vue_vue_type_script_setup_true_lang.js +8 -8
- package/dist/Actions/Snackbar/BridgeSnackbarHost.vue_vue_type_script_setup_true_lang.js +5 -5
- package/dist/Actions/Snackbar/createBridgeSnackbarApi.js +17 -17
- package/dist/Adapters/I18n/index.d.ts +1 -1
- package/dist/Adapters/I18n/index.js +2 -2
- package/dist/Adapters/I18n/useI18nAdapter.d.ts +7 -3
- package/dist/Adapters/I18n/useI18nAdapter.js +12 -7
- package/dist/Adapters/Icon/useIconAdapter.d.ts +1 -1
- package/dist/Adapters/index.d.ts +1 -1
- package/dist/Adapters/index.js +3 -3
- package/dist/Components/Alert/composables/useAlert.js +17 -17
- package/dist/Components/Autocomplete/Autocomplete.js +5 -0
- package/dist/Components/Autocomplete/Autocomplete.vue.d.ts +40 -0
- package/dist/Components/Autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js +197 -0
- package/dist/Components/Autocomplete/AutocompleteOption.js +5 -0
- package/dist/Components/Autocomplete/AutocompleteOption.vue.d.ts +4 -0
- package/dist/Components/Autocomplete/AutocompleteOption.vue_vue_type_script_setup_true_lang.js +32 -0
- package/dist/Components/Autocomplete/autocomplete.types.d.ts +285 -0
- package/dist/Components/Autocomplete/autocompleteInjectionKey.d.ts +7 -0
- package/dist/Components/Autocomplete/autocompleteInjectionKey.js +4 -0
- package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts +763 -0
- package/dist/Components/Autocomplete/composables/useAutocomplete.js +386 -0
- package/dist/Components/Autocomplete/index.d.ts +4 -0
- package/dist/Components/Autocomplete/index.js +4 -0
- package/dist/Components/Avatar/composables/useAvatar.d.ts +1 -1
- package/dist/Components/Avatar/composables/useAvatar.js +13 -13
- package/dist/Components/Badge/composables/useBadge.js +8 -8
- package/dist/Components/BaseField/BaseField.js +5 -0
- package/dist/Components/BaseField/BaseField.vue.d.ts +15 -0
- package/dist/Components/BaseField/BaseField.vue_vue_type_script_setup_true_lang.js +41 -0
- package/dist/Components/BaseField/BaseFieldLabel.js +5 -0
- package/dist/Components/BaseField/BaseFieldLabel.vue.d.ts +7 -0
- package/dist/Components/BaseField/BaseFieldLabel.vue_vue_type_script_setup_true_lang.js +16 -0
- package/dist/Components/BaseField/baseField.types.d.ts +222 -0
- package/dist/Components/BaseField/composables/useBaseField.d.ts +55 -0
- package/dist/Components/BaseField/composables/useBaseField.js +131 -0
- package/dist/Components/BaseField/index.d.ts +4 -0
- package/dist/Components/BaseField/index.js +3 -0
- package/dist/Components/Button/composables/useButton.d.ts +1 -1
- package/dist/Components/Button/composables/useButton.js +14 -14
- package/dist/Components/Card/composables/useCard.js +27 -27
- package/dist/Components/Checkbox/Checkbox.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/Components/Checkbox/composables/useCheckbox.d.ts +3 -3
- package/dist/Components/Checkbox/composables/useCheckbox.js +9 -9
- package/dist/Components/Chip/Chip.vue.d.ts +1 -1
- package/dist/Components/Chip/composables/useChip.d.ts +1 -1
- package/dist/Components/Chip/composables/useChip.js +6 -6
- package/dist/Components/Divider/composables/useDivider.js +5 -5
- package/dist/Components/Drawer/Drawer.vue.d.ts +2 -2
- package/dist/Components/Drawer/composables/useDrawer.d.ts +1 -1
- package/dist/Components/Drawer/composables/useDrawer.js +23 -23
- package/dist/Components/FormControl/FormControl.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/Components/FormControl/composables/useFormControl.d.ts +13 -4
- package/dist/Components/FormControl/composables/useFormControl.js +63 -59
- package/dist/Components/FormControl/formControl.types.d.ts +6 -6
- package/dist/Components/FormControl/index.d.ts +1 -1
- package/dist/Components/FormField/FilledFormField.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/Components/FormField/NotchedFormField.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/Components/FormField/OutlinedFormField.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/Components/FormField/StackedFormField.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/Components/FormField/UnderlinedFormField.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/Components/FormField/composables/useFormField.d.ts +7 -3
- package/dist/Components/FormField/composables/useFormField.js +29 -29
- package/dist/Components/FormField/formField.types.d.ts +14 -14
- package/dist/Components/Icon/composables/useIcon.js +5 -5
- package/dist/Components/Label/composables/useLabel.js +5 -5
- package/dist/Components/Link/composables/useLink.js +9 -9
- package/dist/Components/List/composables/useList.js +6 -6
- package/dist/Components/ListItem/ListItem.vue.d.ts +1 -1
- package/dist/Components/ListItem/composables/useListItem.d.ts +1 -1
- package/dist/Components/ListItem/composables/useListItem.js +20 -20
- package/dist/Components/ListSection/composables/useListSection.js +8 -8
- package/dist/Components/Listbox/Listbox.vue.d.ts +3 -3
- package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js +29 -28
- package/dist/Components/Listbox/composables/useListbox.d.ts +10 -1
- package/dist/Components/Listbox/composables/useListbox.js +23 -23
- package/dist/Components/Listbox/index.d.ts +1 -0
- package/dist/Components/Listbox/index.js +3 -3
- package/dist/Components/Listbox/listbox.types.d.ts +6 -0
- package/dist/Components/Menu/Menu.vue.d.ts +2 -2
- package/dist/Components/Menu/composables/useMenu.js +43 -43
- package/dist/Components/Modal/Modal.vue.d.ts +2 -2
- package/dist/Components/Modal/composables/useModal.d.ts +1 -1
- package/dist/Components/Modal/composables/useModal.js +18 -18
- package/dist/Components/NumberField/NumberField.vue.d.ts +2 -2
- package/dist/Components/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js +34 -34
- package/dist/Components/NumberField/composables/useNumberField.d.ts +4 -4
- package/dist/Components/NumberField/composables/useNumberField.js +13 -10
- package/dist/Components/OtpField/OtpField.js +5 -0
- package/dist/Components/OtpField/OtpField.vue.d.ts +31 -0
- package/dist/Components/OtpField/OtpField.vue_vue_type_script_setup_true_lang.js +62 -0
- package/dist/Components/OtpField/composables/useOtpField.d.ts +287 -0
- package/dist/Components/OtpField/composables/useOtpField.js +154 -0
- package/dist/Components/OtpField/index.d.ts +4 -0
- package/dist/Components/OtpField/index.js +3 -0
- package/dist/Components/OtpField/otpField.types.d.ts +120 -0
- package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js +23 -23
- package/dist/Components/PasswordField/composables/usePasswordField.d.ts +4 -4
- package/dist/Components/PasswordField/composables/usePasswordField.js +6 -3
- package/dist/Components/Progress/composables/useProgress.js +11 -11
- package/dist/Components/Radio/Radio.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/Components/Radio/composables/useRadio.d.ts +3 -3
- package/dist/Components/Radio/composables/useRadio.js +9 -9
- package/dist/Components/Select/Select.vue.d.ts +5 -5
- package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js +16 -13
- package/dist/Components/Select/composables/useSelect.d.ts +5 -4
- package/dist/Components/Select/composables/useSelect.js +167 -163
- package/dist/Components/Skeleton/composables/useSkeleton.js +5 -5
- package/dist/Components/Slider/Slider.js +5 -0
- package/dist/Components/Slider/Slider.vue.d.ts +25 -0
- package/dist/Components/Slider/Slider.vue_vue_type_script_setup_true_lang.js +113 -0
- package/dist/Components/Slider/composables/useSlider.d.ts +482 -0
- package/dist/Components/Slider/composables/useSlider.js +287 -0
- package/dist/Components/Slider/index.d.ts +4 -0
- package/dist/Components/Slider/index.js +3 -0
- package/dist/Components/Slider/slider.types.d.ts +169 -0
- package/dist/Components/Snackbar/Snackbar.vue.d.ts +2 -2
- package/dist/Components/Snackbar/Snackbar.vue_vue_type_script_setup_true_lang.js +54 -54
- package/dist/Components/Snackbar/composables/useSnackbar.js +115 -115
- package/dist/Components/Spinner/composables/useSpinner.js +11 -11
- package/dist/Components/Switch/Switch.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/Components/Switch/composables/useSwitch.d.ts +3 -3
- package/dist/Components/Switch/composables/useSwitch.js +9 -9
- package/dist/Components/Tab/composables/useTab.js +11 -11
- package/dist/Components/TabList/composables/useTabList.js +7 -7
- package/dist/Components/TabPanel/composables/useTabPanel.js +7 -7
- package/dist/Components/Tabs/Tabs.vue.d.ts +2 -2
- package/dist/Components/Tabs/composables/useTabs.js +22 -22
- package/dist/Components/TextField/TextField.vue.d.ts +1 -1
- package/dist/Components/TextField/TextField.vue_vue_type_script_setup_true_lang.js +6 -6
- package/dist/Components/TextField/composables/useTextField.d.ts +4 -4
- package/dist/Components/TextField/composables/useTextField.js +2 -2
- package/dist/Components/Textarea/Textarea.vue.d.ts +1 -1
- package/dist/Components/Textarea/Textarea.vue_vue_type_script_setup_true_lang.js +6 -6
- package/dist/Components/Textarea/composables/useTextarea.d.ts +4 -4
- package/dist/Components/Textarea/composables/useTextarea.js +10 -9
- package/dist/Components/Tooltip/composables/useTooltip.js +17 -17
- package/dist/Provider/bridgeUITypes.d.ts +4 -1
- package/dist/Provider/createBridgeUIApi.js +13 -1
- package/dist/Utils/index.d.ts +3 -3
- package/dist/Utils/index.js +11 -8
- package/dist/Utils/useBreakpoint.js +7 -7
- package/dist/augments.d.ts +29 -17
- package/dist/index.d.ts +11 -3
- package/dist/index.js +88 -80
- package/docs/README.md +56 -0
- package/docs/components/Alert.md +96 -0
- package/docs/components/Autocomplete.md +198 -0
- package/docs/components/Avatar.md +60 -0
- package/docs/components/Badge.md +47 -0
- package/docs/components/BaseField.md +126 -0
- package/docs/components/BridgeUIProvider.md +151 -0
- package/docs/components/Button.md +93 -0
- package/docs/components/Card.md +287 -0
- package/docs/components/Checkbox.md +87 -0
- package/docs/components/Divider.md +56 -0
- package/docs/components/Drawer.md +137 -0
- package/docs/components/FormControl.md +66 -0
- package/docs/components/FormField.md +71 -0
- package/docs/components/I18n.md +125 -0
- package/docs/components/Icon.md +88 -0
- package/docs/components/Label.md +31 -0
- package/docs/components/Link.md +71 -0
- package/docs/components/List.md +167 -0
- package/docs/components/Menu.md +97 -0
- package/docs/components/Modal.md +154 -0
- package/docs/components/NumberField.md +80 -0
- package/docs/components/OtpField.md +133 -0
- package/docs/components/PasswordField.md +82 -0
- package/docs/components/Progress.md +68 -0
- package/docs/components/Radio.md +91 -0
- package/docs/components/Select.md +181 -0
- package/docs/components/Skeleton.md +38 -0
- package/docs/components/Slider.md +140 -0
- package/docs/components/Snackbar.md +99 -0
- package/docs/components/Spinner.md +61 -0
- package/docs/components/Switch.md +72 -0
- package/docs/components/Tabs.md +207 -0
- package/docs/components/TextField.md +72 -0
- package/docs/components/Textarea.md +80 -0
- package/docs/components/Tooltip.md +125 -0
- package/docs/components/useBreakpoint.md +100 -0
- package/docs/components/useDialogAction.md +97 -0
- package/docs/components/useDrawerAction.md +75 -0
- package/docs/components/useModalAction.md +75 -0
- package/docs/components/useSnackbarAction.md +85 -0
- package/docs/examples/i18n-dictionary.ts +48 -0
- package/docs/examples/i18n-vue-i18n.ts +34 -0
- package/docs/examples/icon-fontawesome.ts +112 -0
- package/docs/examples/icon-heroicons.ts +57 -0
- package/docs/examples/icon-lucide.ts +57 -0
- package/docs/examples/icon-phosphor.ts +57 -0
- package/docs/examples/icon-tabler.ts +57 -0
- package/package.json +13 -5
package/dist/augments.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { AlertClasses, AlertProps } from './Components/Alert';
|
|
2
|
+
import { AutocompleteClasses, AutocompleteProps } from './Components/Autocomplete';
|
|
2
3
|
import { AvatarClasses, AvatarProps } from './Components/Avatar';
|
|
3
4
|
import { BadgeClasses, BadgeProps } from './Components/Badge';
|
|
4
5
|
import { ButtonClasses, ButtonProps } from './Components/Button';
|
|
@@ -6,8 +7,6 @@ import { CardClasses, CardProps } from './Components/Card';
|
|
|
6
7
|
import { CheckboxClasses, CheckboxProps } from './Components/Checkbox';
|
|
7
8
|
import { ChipClasses, ChipProps } from './Components/Chip';
|
|
8
9
|
import { DividerClasses, DividerProps } from './Components/Divider';
|
|
9
|
-
import { FormControlClasses, FormControlProps } from './Components/FormControl';
|
|
10
|
-
import { FormFieldClasses, FormFieldProps } from './Components/FormField';
|
|
11
10
|
import { IconProps } from './Components/Icon';
|
|
12
11
|
import { LabelClasses, LabelProps } from './Components/Label';
|
|
13
12
|
import { LinkClasses, LinkProps } from './Components/Link';
|
|
@@ -16,21 +15,28 @@ import { ListItemClasses, ListItemProps } from './Components/ListItem';
|
|
|
16
15
|
import { ListSectionClasses } from './Components/ListSection';
|
|
17
16
|
import { MenuClasses, MenuProps } from './Components/Menu';
|
|
18
17
|
import { ModalClasses, ModalProps } from './Components/Modal';
|
|
19
|
-
import { NumberFieldClasses } from './Components/NumberField';
|
|
20
|
-
import {
|
|
18
|
+
import { NumberFieldClasses, NumberFieldProps } from './Components/NumberField';
|
|
19
|
+
import { OtpFieldClasses, OtpFieldProps } from './Components/OtpField';
|
|
20
|
+
import { PasswordFieldClasses, PasswordFieldProps } from './Components/PasswordField';
|
|
21
21
|
import { ProgressClasses, ProgressProps } from './Components/Progress';
|
|
22
22
|
import { RadioClasses, RadioProps } from './Components/Radio';
|
|
23
23
|
import { SelectClasses, SelectProps } from './Components/Select';
|
|
24
24
|
import { SkeletonClasses, SkeletonProps } from './Components/Skeleton';
|
|
25
|
+
import { SliderClasses, SliderProps } from './Components/Slider';
|
|
25
26
|
import { SnackbarClasses, SnackbarProps } from './Components/Snackbar';
|
|
26
27
|
import { SpinnerClasses, SpinnerProps } from './Components/Spinner';
|
|
27
28
|
import { SwitchClasses, SwitchProps } from './Components/Switch';
|
|
28
29
|
import { TextareaClasses, TextareaProps } from './Components/Textarea';
|
|
30
|
+
import { TextFieldClasses, TextFieldProps } from './Components/TextField';
|
|
29
31
|
declare module "@bridge-ui/core" {
|
|
30
32
|
interface AlertConfigOverrides {
|
|
31
33
|
classes: AlertClasses;
|
|
32
34
|
defaultProps: Partial<Pick<AlertProps, "color" | "shadow" | "padding" | "rounded" | "variant">>;
|
|
33
35
|
}
|
|
36
|
+
interface AutocompleteConfigOverrides {
|
|
37
|
+
classes: AutocompleteClasses;
|
|
38
|
+
defaultProps: Partial<Pick<AutocompleteProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "hideErrorMessage">>;
|
|
39
|
+
}
|
|
34
40
|
interface AvatarConfigOverrides {
|
|
35
41
|
classes: AvatarClasses;
|
|
36
42
|
defaultProps: Partial<Pick<AvatarProps, "size" | "color" | "rounded">>;
|
|
@@ -49,7 +55,7 @@ declare module "@bridge-ui/core" {
|
|
|
49
55
|
}
|
|
50
56
|
interface CheckboxConfigOverrides {
|
|
51
57
|
classes: CheckboxClasses;
|
|
52
|
-
defaultProps: Partial<Pick<CheckboxProps, "size" | "color" | "rounded">>;
|
|
58
|
+
defaultProps: Partial<Pick<CheckboxProps, "size" | "color" | "rounded" | "hideErrorMessage">>;
|
|
53
59
|
}
|
|
54
60
|
interface ChipConfigOverrides {
|
|
55
61
|
classes: ChipClasses;
|
|
@@ -59,14 +65,6 @@ declare module "@bridge-ui/core" {
|
|
|
59
65
|
classes: DividerClasses;
|
|
60
66
|
defaultProps: Partial<Pick<DividerProps, "color" | "orientation">>;
|
|
61
67
|
}
|
|
62
|
-
interface FormControlConfigOverrides {
|
|
63
|
-
classes: FormControlClasses;
|
|
64
|
-
defaultProps: Partial<Pick<FormControlProps, "size" | "error" | "withoutErrorMessage">>;
|
|
65
|
-
}
|
|
66
|
-
interface FormFieldConfigOverrides {
|
|
67
|
-
classes: FormFieldClasses;
|
|
68
|
-
defaultProps: Partial<Pick<FormFieldProps, "size" | "color" | "rounded" | "variant" | "errorIcon" | "withErrorIcon">>;
|
|
69
|
-
}
|
|
70
68
|
interface IconConfigOverrides {
|
|
71
69
|
defaultProps: Partial<Pick<IconProps, "size">>;
|
|
72
70
|
}
|
|
@@ -98,9 +96,15 @@ declare module "@bridge-ui/core" {
|
|
|
98
96
|
}
|
|
99
97
|
interface NumberFieldConfigOverrides {
|
|
100
98
|
classes: NumberFieldClasses;
|
|
99
|
+
defaultProps: Partial<Pick<NumberFieldProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "hideErrorMessage">>;
|
|
100
|
+
}
|
|
101
|
+
interface OtpFieldConfigOverrides {
|
|
102
|
+
classes: OtpFieldClasses;
|
|
103
|
+
defaultProps: Partial<Pick<OtpFieldProps, "size" | "type" | "color" | "length" | "rounded" | "variant" | "hideErrorMessage">>;
|
|
101
104
|
}
|
|
102
105
|
interface PasswordFieldConfigOverrides {
|
|
103
106
|
classes: PasswordFieldClasses;
|
|
107
|
+
defaultProps: Partial<Pick<PasswordFieldProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "hideErrorMessage">>;
|
|
104
108
|
}
|
|
105
109
|
interface ProgressConfigOverrides {
|
|
106
110
|
classes: ProgressClasses;
|
|
@@ -108,7 +112,7 @@ declare module "@bridge-ui/core" {
|
|
|
108
112
|
}
|
|
109
113
|
interface RadioConfigOverrides {
|
|
110
114
|
classes: RadioClasses;
|
|
111
|
-
defaultProps: Partial<Pick<RadioProps, "size" | "color" | "rounded">>;
|
|
115
|
+
defaultProps: Partial<Pick<RadioProps, "size" | "color" | "rounded" | "hideErrorMessage">>;
|
|
112
116
|
}
|
|
113
117
|
interface SnackbarConfigOverrides {
|
|
114
118
|
classes: SnackbarClasses;
|
|
@@ -116,22 +120,30 @@ declare module "@bridge-ui/core" {
|
|
|
116
120
|
}
|
|
117
121
|
interface SelectConfigOverrides {
|
|
118
122
|
classes: SelectClasses;
|
|
119
|
-
defaultProps: Partial<Pick<SelectProps, "size" | "color" | "rounded" | "variant">>;
|
|
123
|
+
defaultProps: Partial<Pick<SelectProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "hideErrorMessage">>;
|
|
120
124
|
}
|
|
121
125
|
interface SkeletonConfigOverrides {
|
|
122
126
|
classes: SkeletonClasses;
|
|
123
127
|
defaultProps: Partial<Pick<SkeletonProps, "rounded">>;
|
|
124
128
|
}
|
|
129
|
+
interface SliderConfigOverrides {
|
|
130
|
+
classes: SliderClasses;
|
|
131
|
+
defaultProps: Partial<Pick<SliderProps, "max" | "min" | "size" | "step" | "color" | "rounded" | "showStops" | "showTooltip" | "hideErrorMessage">>;
|
|
132
|
+
}
|
|
125
133
|
interface SpinnerConfigOverrides {
|
|
126
134
|
classes: SpinnerClasses;
|
|
127
135
|
defaultProps: Partial<Pick<SpinnerProps, "size" | "color" | "variant" | "thickness" | "enableTrack" | "disableShrink">>;
|
|
128
136
|
}
|
|
129
137
|
interface SwitchConfigOverrides {
|
|
130
138
|
classes: SwitchClasses;
|
|
131
|
-
defaultProps: Partial<Pick<SwitchProps, "size" | "color" | "rounded">>;
|
|
139
|
+
defaultProps: Partial<Pick<SwitchProps, "size" | "color" | "rounded" | "hideErrorMessage">>;
|
|
132
140
|
}
|
|
133
141
|
interface TextareaConfigOverrides {
|
|
134
142
|
classes: TextareaClasses;
|
|
135
|
-
defaultProps: Partial<Pick<TextareaProps, "resize" | "autosize">>;
|
|
143
|
+
defaultProps: Partial<Pick<TextareaProps, "size" | "color" | "resize" | "rounded" | "variant" | "autosize" | "showErrorIcon" | "hideErrorMessage">>;
|
|
144
|
+
}
|
|
145
|
+
interface TextFieldConfigOverrides {
|
|
146
|
+
classes: TextFieldClasses;
|
|
147
|
+
defaultProps: Partial<Pick<TextFieldProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "hideErrorMessage">>;
|
|
136
148
|
}
|
|
137
149
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
export { setI18nAdapterForTests, useI18nAdapter } from './Adapters/I18n';
|
|
1
|
+
export { setI18nAdapterForTests, useI18nAdapter, useResolveMessage, } from './Adapters/I18n';
|
|
2
2
|
export { setIconAdapterForTests, useIconAdapter } from './Adapters/Icon';
|
|
3
3
|
export type { IconElement, IconSource, SemanticIconName, } from './Adapters/Icon';
|
|
4
4
|
export { Alert, useAlert } from './Components/Alert';
|
|
5
5
|
export type { AlertClasses, AlertColorOverrides, AlertPaddingOverrides, AlertProps, AlertRoundedOverrides, AlertShadowOverrides, AlertSlots, AlertVariantOverrides, } from './Components/Alert';
|
|
6
|
+
export { Autocomplete, AutocompleteOption } from './Components/Autocomplete';
|
|
7
|
+
export type { AutocompleteClasses, AutocompleteEmits, AutocompleteOptionData, AutocompleteOptionProps, AutocompleteProps, AutocompleteSlots, } from './Components/Autocomplete';
|
|
6
8
|
export { Avatar } from './Components/Avatar';
|
|
7
9
|
export type { AvatarClasses, AvatarColorOverrides, AvatarCustomProps, AvatarProps, AvatarRoundedOverrides, AvatarSizeOverrides, AvatarSlots, } from './Components/Avatar';
|
|
8
10
|
export { Badge, useBadge } from './Components/Badge';
|
|
9
11
|
export type { BadgeClasses, BadgeColorOverrides, BadgeDensityOverrides, BadgeOwnProps, BadgeProps, BadgeRoundedOverrides, BadgeSizeOverrides, BadgeSlots, BadgeVariantOverrides, } from './Components/Badge';
|
|
12
|
+
export { BaseField, useBaseField } from './Components/BaseField';
|
|
13
|
+
export type { BaseFieldClasses, BaseFieldCustomProps, BaseFieldOptions, BaseFieldOwnProps, BaseFieldProps, BaseFieldSizeOverrides, BaseFieldSlots, UseBaseFieldReturn, } from './Components/BaseField';
|
|
10
14
|
export { Button, useButton } from './Components/Button';
|
|
11
15
|
export type { ButtonClasses, ButtonColorOverrides, ButtonDensityOverrides, ButtonProps, ButtonRoundedOverrides, ButtonSizeOverrides, ButtonSlots, ButtonVariantOverrides, } from './Components/Button';
|
|
12
16
|
export { Card, useCard } from './Components/Card';
|
|
@@ -32,7 +36,7 @@ export type { LinkClasses, LinkColorOverrides, LinkCustomProps, LinkOwnProps, Li
|
|
|
32
36
|
export { List, useList } from './Components/List';
|
|
33
37
|
export type { ListClasses, ListContextValue, ListCustomProps, ListOwnProps, ListProps, } from './Components/List';
|
|
34
38
|
export { Listbox, findFirstEnabledOptionIndex, findLastEnabledOptionIndex, getListboxActiveDescendantId, getListboxOptionId, moveListboxHighlight, useListbox, useListboxNavigation, } from './Components/Listbox';
|
|
35
|
-
export type { ListboxClasses, ListboxColorOverrides, ListboxCustomProps, ListboxEmits, ListboxOption, ListboxOwnProps, ListboxProps, ListboxSlots, ListboxValue, } from './Components/Listbox';
|
|
39
|
+
export type { ListboxClasses, ListboxColorOverrides, ListboxCustomProps, ListboxEmits, ListboxEntry, ListboxOption, ListboxOwnProps, ListboxProps, ListboxSlots, ListboxValue, } from './Components/Listbox';
|
|
36
40
|
export { ListItem } from './Components/ListItem';
|
|
37
41
|
export type { ListItemClasses, ListItemCustomProps, ListItemOwnProps, ListItemProps, ListItemSlots, } from './Components/ListItem';
|
|
38
42
|
export { ListSection } from './Components/ListSection';
|
|
@@ -43,6 +47,8 @@ export { Modal, useModal } from './Components/Modal';
|
|
|
43
47
|
export type { ModalAlignOverrides, ModalBlurOverrides, ModalClasses, ModalCustomProps, ModalEmits, ModalOwnProps, ModalProps, ModalSizeOverrides, ModalSlots, } from './Components/Modal';
|
|
44
48
|
export { NumberField, useNumberField } from './Components/NumberField';
|
|
45
49
|
export type { NumberFieldClasses, NumberFieldCustomProps, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './Components/NumberField';
|
|
50
|
+
export { OtpField, useOtpField } from './Components/OtpField';
|
|
51
|
+
export type { OtpFieldClasses, OtpFieldCustomProps, OtpFieldEmits, OtpFieldOwnProps, OtpFieldProps, OtpFieldSlots, UseOtpFieldOptions, } from './Components/OtpField';
|
|
46
52
|
export { PasswordField, usePasswordField } from './Components/PasswordField';
|
|
47
53
|
export type { PasswordFieldClasses, PasswordFieldCustomProps, PasswordFieldOwnProps, PasswordFieldProps, PasswordFieldSlots, } from './Components/PasswordField';
|
|
48
54
|
export { Progress, useProgress } from './Components/Progress';
|
|
@@ -53,6 +59,8 @@ export { Select, SelectOption } from './Components/Select';
|
|
|
53
59
|
export type { SelectAsyncData, SelectClasses, SelectEmits, SelectModel, SelectOptionData, SelectOptionProps, SelectProps, SelectSlots, SelectValue, } from './Components/Select';
|
|
54
60
|
export { Skeleton, useSkeleton } from './Components/Skeleton';
|
|
55
61
|
export type { SkeletonClasses, SkeletonOwnProps, SkeletonProps, SkeletonRoundedOverrides, } from './Components/Skeleton';
|
|
62
|
+
export { Slider, useSlider } from './Components/Slider';
|
|
63
|
+
export type { SliderClasses, SliderColorOverrides, SliderCustomProps, SliderEmits, SliderOwnProps, SliderProps, SliderRangeValue, SliderRoundedOverrides, SliderSizeOverrides, SliderSlots, SliderStop, SliderStopInput, UseSliderOptions, UseSliderReturn, } from './Components/Slider';
|
|
56
64
|
export { Snackbar, useSnackbar } from './Components/Snackbar';
|
|
57
65
|
export type { SnackbarClasses, SnackbarColorOverrides, SnackbarCustomProps, SnackbarEmits, SnackbarOwnProps, SnackbarPaddingOverrides, SnackbarProps, SnackbarSlots, SnackbarTransitionOverrides, } from './Components/Snackbar';
|
|
58
66
|
export { Spinner, useSpinner } from './Components/Spinner';
|
|
@@ -79,5 +87,5 @@ export { BridgeUIProvider, createBridgeUI, useBridgeUI } from './Provider';
|
|
|
79
87
|
export type { BridgeUIContextApi } from './Provider';
|
|
80
88
|
export { useBreakpoint, useBridgeUIComponent, useBridgeUIMergedRegistryClasses, } from './Utils';
|
|
81
89
|
export type { UseBreakpointOptions } from './Utils';
|
|
82
|
-
export { BRIDGE_UI_DEFAULT_GLOBAL, SEMANTIC_ICON_NAMES, cn,
|
|
90
|
+
export { BRIDGE_UI_DEFAULT_GLOBAL, SEMANTIC_ICON_NAMES, cn, mergeBridgeUIComponents, mergeBridgeUIGlobal, resolveBridgeUIOptions, resolveMessage, } from '@bridge-ui/core';
|
|
83
91
|
export type { I18nAdapter, IconAdapter, SemanticIconNameOverrides, } from '@bridge-ui/core';
|
package/dist/index.js
CHANGED
|
@@ -1,81 +1,89 @@
|
|
|
1
1
|
import { useBridgeUI as e } from "./Provider/useBridgeUI.js";
|
|
2
|
-
import { setI18nAdapterForTests as t, useI18nAdapter as n } from "./Adapters/I18n/useI18nAdapter.js";
|
|
3
|
-
import { setIconAdapterForTests as
|
|
4
|
-
import { useBreakpoint as
|
|
5
|
-
import { useBridgeUIComponent as
|
|
6
|
-
import { useAlert as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import
|
|
29
|
-
import
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
import {
|
|
33
|
-
import
|
|
34
|
-
import
|
|
35
|
-
import {
|
|
36
|
-
import
|
|
37
|
-
import
|
|
38
|
-
import
|
|
39
|
-
import
|
|
40
|
-
import
|
|
41
|
-
import
|
|
42
|
-
import
|
|
43
|
-
import {
|
|
44
|
-
import
|
|
45
|
-
import {
|
|
46
|
-
import
|
|
47
|
-
import {
|
|
48
|
-
import
|
|
49
|
-
import {
|
|
50
|
-
import
|
|
51
|
-
import
|
|
52
|
-
import
|
|
53
|
-
import {
|
|
54
|
-
import
|
|
55
|
-
import {
|
|
56
|
-
import
|
|
57
|
-
import
|
|
58
|
-
import
|
|
59
|
-
import {
|
|
60
|
-
import
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import
|
|
64
|
-
import
|
|
65
|
-
import
|
|
66
|
-
import
|
|
67
|
-
import
|
|
68
|
-
import
|
|
69
|
-
import
|
|
70
|
-
import
|
|
71
|
-
import
|
|
72
|
-
import {
|
|
73
|
-
import
|
|
74
|
-
import {
|
|
75
|
-
import
|
|
76
|
-
import {
|
|
77
|
-
import
|
|
78
|
-
import
|
|
79
|
-
import
|
|
80
|
-
import {
|
|
81
|
-
|
|
2
|
+
import { setI18nAdapterForTests as t, useI18nAdapter as n, useResolveMessage as r } from "./Adapters/I18n/useI18nAdapter.js";
|
|
3
|
+
import { setIconAdapterForTests as i, useIconAdapter as a } from "./Adapters/Icon/useIconAdapter.js";
|
|
4
|
+
import { useBreakpoint as o } from "./Utils/useBreakpoint.js";
|
|
5
|
+
import { useBridgeUIComponent as s, useBridgeUIMergedRegistryClasses as c } from "./Utils/index.js";
|
|
6
|
+
import { useAlert as l } from "./Components/Alert/composables/useAlert.js";
|
|
7
|
+
import u from "./Components/Icon/Icon.js";
|
|
8
|
+
import d from "./Components/Alert/Alert.js";
|
|
9
|
+
import { useFormField as f } from "./Components/FormField/composables/useFormField.js";
|
|
10
|
+
import { findFirstEnabledOptionIndex as p, findLastEnabledOptionIndex as m, getListboxActiveDescendantId as h, getListboxOptionId as g, moveListboxHighlight as _, useListboxNavigation as v } from "./Components/Listbox/composables/useListboxNavigation.js";
|
|
11
|
+
import { useChip as y } from "./Components/Chip/composables/useChip.js";
|
|
12
|
+
import b from "./Components/Chip/Chip.js";
|
|
13
|
+
import { useLabel as x } from "./Components/Label/composables/useLabel.js";
|
|
14
|
+
import S from "./Components/Label/Label.js";
|
|
15
|
+
import C from "./Components/FormField/FormField.js";
|
|
16
|
+
import { useListbox as w } from "./Components/Listbox/composables/useListbox.js";
|
|
17
|
+
import { useList as T } from "./Components/List/composables/useList.js";
|
|
18
|
+
import E from "./Components/List/List.js";
|
|
19
|
+
import D from "./Components/ListItem/ListItem.js";
|
|
20
|
+
import O from "./Components/ListSection/ListSection.js";
|
|
21
|
+
import { useMenu as k } from "./Components/Menu/composables/useMenu.js";
|
|
22
|
+
import A from "./Components/Menu/Menu.js";
|
|
23
|
+
import { useProgress as j } from "./Components/Progress/composables/useProgress.js";
|
|
24
|
+
import M from "./Components/Progress/Progress.js";
|
|
25
|
+
import N from "./Components/Listbox/Listbox.js";
|
|
26
|
+
import P from "./Components/Autocomplete/Autocomplete.js";
|
|
27
|
+
import F from "./Components/Autocomplete/AutocompleteOption.js";
|
|
28
|
+
import I from "./Components/Avatar/Avatar.js";
|
|
29
|
+
import { useBadge as L } from "./Components/Badge/composables/useBadge.js";
|
|
30
|
+
import R from "./Components/Badge/Badge.js";
|
|
31
|
+
import z from "./Components/BaseField/BaseField.js";
|
|
32
|
+
import { useBaseField as B } from "./Components/BaseField/composables/useBaseField.js";
|
|
33
|
+
import { useButton as V } from "./Components/Button/composables/useButton.js";
|
|
34
|
+
import H from "./Components/Button/Button.js";
|
|
35
|
+
import { useCard as U } from "./Components/Card/composables/useCard.js";
|
|
36
|
+
import W from "./Components/Card/Card.js";
|
|
37
|
+
import { useFormControl as G } from "./Components/FormControl/composables/useFormControl.js";
|
|
38
|
+
import K from "./Components/FormControl/FormControl.js";
|
|
39
|
+
import { useCheckbox as q } from "./Components/Checkbox/composables/useCheckbox.js";
|
|
40
|
+
import J from "./Components/Checkbox/Checkbox.js";
|
|
41
|
+
import { useDivider as Y } from "./Components/Divider/composables/useDivider.js";
|
|
42
|
+
import X from "./Components/Divider/Divider.js";
|
|
43
|
+
import { useDrawer as Z } from "./Components/Drawer/composables/useDrawer.js";
|
|
44
|
+
import Q from "./Components/Drawer/Drawer.js";
|
|
45
|
+
import { useLink as $ } from "./Components/Link/composables/useLink.js";
|
|
46
|
+
import ee from "./Components/Link/Link.js";
|
|
47
|
+
import { useModal as te } from "./Components/Modal/composables/useModal.js";
|
|
48
|
+
import ne from "./Components/Modal/Modal.js";
|
|
49
|
+
import { useNumberField as re } from "./Components/NumberField/composables/useNumberField.js";
|
|
50
|
+
import ie from "./Components/NumberField/NumberField.js";
|
|
51
|
+
import { useOtpField as ae } from "./Components/OtpField/composables/useOtpField.js";
|
|
52
|
+
import oe from "./Components/OtpField/OtpField.js";
|
|
53
|
+
import { usePasswordField as se } from "./Components/PasswordField/composables/usePasswordField.js";
|
|
54
|
+
import ce from "./Components/PasswordField/PasswordField.js";
|
|
55
|
+
import { useRadio as le } from "./Components/Radio/composables/useRadio.js";
|
|
56
|
+
import ue from "./Components/Radio/Radio.js";
|
|
57
|
+
import de from "./Components/Select/Select.js";
|
|
58
|
+
import fe from "./Components/Select/SelectOption.js";
|
|
59
|
+
import { useSkeleton as pe } from "./Components/Skeleton/composables/useSkeleton.js";
|
|
60
|
+
import me from "./Components/Skeleton/Skeleton.js";
|
|
61
|
+
import { useSlider as he } from "./Components/Slider/composables/useSlider.js";
|
|
62
|
+
import { useTooltip as ge } from "./Components/Tooltip/composables/useTooltip.js";
|
|
63
|
+
import _e from "./Components/Tooltip/Tooltip.js";
|
|
64
|
+
import ve from "./Components/Slider/Slider.js";
|
|
65
|
+
import { useSnackbar as ye } from "./Components/Snackbar/composables/useSnackbar.js";
|
|
66
|
+
import be from "./Components/Snackbar/Snackbar.js";
|
|
67
|
+
import { useSpinner as xe } from "./Components/Spinner/composables/useSpinner.js";
|
|
68
|
+
import Se from "./Components/Spinner/Spinner.js";
|
|
69
|
+
import { useSwitch as Ce } from "./Components/Switch/composables/useSwitch.js";
|
|
70
|
+
import we from "./Components/Switch/Switch.js";
|
|
71
|
+
import { TABS_INJECTION_KEY as Te } from "./Components/Tabs/tabsInjectionKey.js";
|
|
72
|
+
import { useTab as Ee } from "./Components/Tab/composables/useTab.js";
|
|
73
|
+
import De from "./Components/Tab/Tab.js";
|
|
74
|
+
import { useTabItem as Oe } from "./Components/TabItem/composables/useTabItem.js";
|
|
75
|
+
import ke from "./Components/TabItem/TabItem.js";
|
|
76
|
+
import { useTabList as Ae } from "./Components/TabList/composables/useTabList.js";
|
|
77
|
+
import je from "./Components/TabList/TabList.js";
|
|
78
|
+
import { useTabPanel as Me } from "./Components/TabPanel/composables/useTabPanel.js";
|
|
79
|
+
import Ne from "./Components/TabPanel/TabPanel.js";
|
|
80
|
+
import { useTabs as Pe } from "./Components/Tabs/composables/useTabs.js";
|
|
81
|
+
import Fe from "./Components/Tabs/Tabs.js";
|
|
82
|
+
import { useTextarea as Ie } from "./Components/Textarea/composables/useTextarea.js";
|
|
83
|
+
import Le from "./Components/Textarea/Textarea.js";
|
|
84
|
+
import { useTextField as Re } from "./Components/TextField/composables/useTextField.js";
|
|
85
|
+
import ze from "./Components/TextField/TextField.js";
|
|
86
|
+
import Be from "./Provider/BridgeUIProvider.js";
|
|
87
|
+
import { createBridgeUI as Ve } from "./Provider/createBridgeUI.js";
|
|
88
|
+
import { BRIDGE_UI_DEFAULT_GLOBAL as He, SEMANTIC_ICON_NAMES as Ue, cn as We, mergeBridgeUIComponents as Ge, mergeBridgeUIGlobal as Ke, resolveBridgeUIOptions as qe, resolveMessage as Je } from "@bridge-ui/core";
|
|
89
|
+
export { d as Alert, P as Autocomplete, F as AutocompleteOption, I as Avatar, He as BRIDGE_UI_DEFAULT_GLOBAL, R as Badge, z as BaseField, Be as BridgeUIProvider, H as Button, W as Card, J as Checkbox, b as Chip, X as Divider, Q as Drawer, K as FormControl, C as FormField, u as Icon, S as Label, ee as Link, E as List, D as ListItem, O as ListSection, N as Listbox, A as Menu, ne as Modal, ie as NumberField, oe as OtpField, ce as PasswordField, M as Progress, ue as Radio, Ue as SEMANTIC_ICON_NAMES, de as Select, fe as SelectOption, me as Skeleton, ve as Slider, be as Snackbar, Se as Spinner, we as Switch, Te as TABS_INJECTION_KEY, De as Tab, ke as TabItem, je as TabList, Ne as TabPanel, Fe as Tabs, ze as TextField, Le as Textarea, _e as Tooltip, We as cn, Ve as createBridgeUI, p as findFirstEnabledOptionIndex, m as findLastEnabledOptionIndex, h as getListboxActiveDescendantId, g as getListboxOptionId, Ge as mergeBridgeUIComponents, Ke as mergeBridgeUIGlobal, _ as moveListboxHighlight, qe as resolveBridgeUIOptions, Je as resolveMessage, t as setI18nAdapterForTests, i as setIconAdapterForTests, l as useAlert, L as useBadge, B as useBaseField, o as useBreakpoint, e as useBridgeUI, s as useBridgeUIComponent, c as useBridgeUIMergedRegistryClasses, V as useButton, U as useCard, q as useCheckbox, y as useChip, Y as useDivider, Z as useDrawer, G as useFormControl, f as useFormField, n as useI18nAdapter, a as useIconAdapter, x as useLabel, $ as useLink, T as useList, w as useListbox, v as useListboxNavigation, k as useMenu, te as useModal, re as useNumberField, ae as useOtpField, se as usePasswordField, j as useProgress, le as useRadio, r as useResolveMessage, pe as useSkeleton, he as useSlider, ye as useSnackbar, xe as useSpinner, Ce as useSwitch, Ee as useTab, Oe as useTabItem, Ae as useTabList, Me as useTabPanel, Pe as useTabs, Re as useTextField, Ie as useTextarea, ge as useTooltip };
|
package/docs/README.md
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# @bridge-ui/vue — docs
|
|
2
|
+
|
|
3
|
+
Component reference and adapter samples for **Vue**. This folder ships with the npm package.
|
|
4
|
+
|
|
5
|
+
## Components
|
|
6
|
+
|
|
7
|
+
- [Alert](./components/Alert.md)
|
|
8
|
+
- [Autocomplete](./components/Autocomplete.md)
|
|
9
|
+
- [Avatar](./components/Avatar.md)
|
|
10
|
+
- [Badge](./components/Badge.md)
|
|
11
|
+
- [BaseField](./components/BaseField.md)
|
|
12
|
+
- [BridgeUIProvider](./components/BridgeUIProvider.md)
|
|
13
|
+
- [Button](./components/Button.md)
|
|
14
|
+
- [Card](./components/Card.md)
|
|
15
|
+
- [Checkbox](./components/Checkbox.md)
|
|
16
|
+
- [Divider](./components/Divider.md)
|
|
17
|
+
- [Drawer](./components/Drawer.md)
|
|
18
|
+
- [FormControl](./components/FormControl.md)
|
|
19
|
+
- [FormField](./components/FormField.md)
|
|
20
|
+
- [I18n](./components/I18n.md)
|
|
21
|
+
- [Icon](./components/Icon.md)
|
|
22
|
+
- [Label](./components/Label.md)
|
|
23
|
+
- [Link](./components/Link.md)
|
|
24
|
+
- [List](./components/List.md)
|
|
25
|
+
- [Menu](./components/Menu.md)
|
|
26
|
+
- [Modal](./components/Modal.md)
|
|
27
|
+
- [NumberField](./components/NumberField.md)
|
|
28
|
+
- [OtpField](./components/OtpField.md)
|
|
29
|
+
- [PasswordField](./components/PasswordField.md)
|
|
30
|
+
- [Progress](./components/Progress.md)
|
|
31
|
+
- [Radio](./components/Radio.md)
|
|
32
|
+
- [Select](./components/Select.md)
|
|
33
|
+
- [Skeleton](./components/Skeleton.md)
|
|
34
|
+
- [Slider](./components/Slider.md)
|
|
35
|
+
- [Snackbar](./components/Snackbar.md)
|
|
36
|
+
- [Spinner](./components/Spinner.md)
|
|
37
|
+
- [Switch](./components/Switch.md)
|
|
38
|
+
- [Tabs](./components/Tabs.md)
|
|
39
|
+
- [TextField](./components/TextField.md)
|
|
40
|
+
- [Textarea](./components/Textarea.md)
|
|
41
|
+
- [Tooltip](./components/Tooltip.md)
|
|
42
|
+
- [useBreakpoint](./components/useBreakpoint.md)
|
|
43
|
+
- [useDialogAction](./components/useDialogAction.md)
|
|
44
|
+
- [useDrawerAction](./components/useDrawerAction.md)
|
|
45
|
+
- [useModalAction](./components/useModalAction.md)
|
|
46
|
+
- [useSnackbarAction](./components/useSnackbarAction.md)
|
|
47
|
+
|
|
48
|
+
## Examples (adapters)
|
|
49
|
+
|
|
50
|
+
- [`examples/i18n-dictionary.ts`](./examples/i18n-dictionary.ts)
|
|
51
|
+
- [`examples/i18n-vue-i18n.ts`](./examples/i18n-vue-i18n.ts)
|
|
52
|
+
- [`examples/icon-fontawesome.ts`](./examples/icon-fontawesome.ts)
|
|
53
|
+
- [`examples/icon-heroicons.ts`](./examples/icon-heroicons.ts)
|
|
54
|
+
- [`examples/icon-lucide.ts`](./examples/icon-lucide.ts)
|
|
55
|
+
- [`examples/icon-phosphor.ts`](./examples/icon-phosphor.ts)
|
|
56
|
+
- [`examples/icon-tabler.ts`](./examples/icon-tabler.ts)
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# Alert
|
|
2
|
+
|
|
3
|
+
Alert banner for feedback messages. Does not set `role` or `aria-live` by default — pass them when the message is urgent or dynamic.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```ts
|
|
8
|
+
import { Alert } from "@bridge-ui/vue/Components/Alert";
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Examples
|
|
12
|
+
|
|
13
|
+
### Usage
|
|
14
|
+
|
|
15
|
+
```vue
|
|
16
|
+
<Alert color="primary" title="Heads up" />
|
|
17
|
+
|
|
18
|
+
<Alert color="error" title="Something went wrong">
|
|
19
|
+
Please try again in a few minutes.
|
|
20
|
+
</Alert>
|
|
21
|
+
|
|
22
|
+
<Alert title="Saved" color="success" variant="outline">
|
|
23
|
+
Your changes were saved successfully.
|
|
24
|
+
</Alert>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Customization
|
|
28
|
+
|
|
29
|
+
```vue
|
|
30
|
+
<Alert
|
|
31
|
+
rounded="2xl"
|
|
32
|
+
variant="flat"
|
|
33
|
+
color="primary"
|
|
34
|
+
title="Alert Message!"
|
|
35
|
+
:classes="{
|
|
36
|
+
title: 'text-2xl italic font-extrabold',
|
|
37
|
+
}"
|
|
38
|
+
/>
|
|
39
|
+
|
|
40
|
+
<Alert color="primary" title="Alert Message!">
|
|
41
|
+
<template #action>
|
|
42
|
+
<Button size="sm" variant="flat" color="primary">Dismiss</Button>
|
|
43
|
+
</template>
|
|
44
|
+
</Alert>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Footer slot
|
|
48
|
+
|
|
49
|
+
```vue
|
|
50
|
+
<Alert variant="solid" color="secondary" title="Alert Message!">
|
|
51
|
+
<template #footer>
|
|
52
|
+
<Button size="sm" color="secondary">Cancel</Button>
|
|
53
|
+
|
|
54
|
+
<Button size="sm" color="secondary">Confirm</Button>
|
|
55
|
+
</template>
|
|
56
|
+
</Alert>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### customProps
|
|
60
|
+
|
|
61
|
+
```vue
|
|
62
|
+
<Alert
|
|
63
|
+
color="info"
|
|
64
|
+
title="Forwarded part attributes"
|
|
65
|
+
:custom-props="{
|
|
66
|
+
title: { id: 'alert-title' },
|
|
67
|
+
icon: { 'aria-hidden': true },
|
|
68
|
+
body: { 'aria-labelledby': 'alert-title' },
|
|
69
|
+
root: { id: 'alert-root', role: 'status' },
|
|
70
|
+
}"
|
|
71
|
+
>
|
|
72
|
+
Inspect the DOM for ids on each part.
|
|
73
|
+
</Alert>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Props
|
|
77
|
+
|
|
78
|
+
| Prop | Type | Default | Description |
|
|
79
|
+
| ------------- | -------------------- | --------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
80
|
+
| `classes` | `AlertClasses` | — | The classes to apply to the alert. |
|
|
81
|
+
| `color` | `AlertColor` | "primary" | The color to apply to the alert. |
|
|
82
|
+
| `customProps` | `AlertCustomProps` | — | Extra props for internal parts (`icon`, `title`, `body`, etc.). Root HTML attributes stay on the component top level. |
|
|
83
|
+
| `icon` | `LucideIcon \| null` | — | The icon to apply to the alert. Use `null` to omit the prop icon. |
|
|
84
|
+
| `padding` | `AlertPadding` | "medium" | The padding to apply to the alert. |
|
|
85
|
+
| `rounded` | `AlertRounded` | "sm" | The roundedness of the alert. |
|
|
86
|
+
| `shadow` | `AlertShadow` | "sm" | The shadow to apply to the alert. |
|
|
87
|
+
| `title` | `string` | — | The title to apply to the alert. |
|
|
88
|
+
| `variant` | `AlertVariant` | "flat" | The variant of the alert. |
|
|
89
|
+
|
|
90
|
+
## Accessibility
|
|
91
|
+
|
|
92
|
+
For urgent dynamic messages use `role="alert"` and optionally `aria-live="assertive"`. For non-interrupting updates use `role="status"` and `aria-live="polite"`.
|
|
93
|
+
|
|
94
|
+
## Related components
|
|
95
|
+
|
|
96
|
+
Button, Icon, Snackbar
|