diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue index fa97db6a..b773c0da 100644 --- a/src/runtime/components/Accordion.vue +++ b/src/runtime/components/Accordion.vue @@ -20,7 +20,12 @@ export interface AccordionItem extends Partial extends Omit { items?: T[] + /** + * The icon displayed on the right side of the trigger. + * @defaultValue `appConfig.ui.icons.chevronDown` + */ trailingIcon?: string + /** The content of the accordion. */ content?: Omit class?: any ui?: Partial diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue index d4b6f3a5..07cb6513 100644 --- a/src/runtime/components/Alert.vue +++ b/src/runtime/components/Alert.vue @@ -20,6 +20,11 @@ export interface AlertProps extends Omit { avatar?: AvatarProps color?: AlertVariants['color'] variant?: AlertVariants['variant'] + /** + * Display a list of actions: + * - under the title and description if multiline + * - next to the close button if not multiline + */ actions?: ButtonProps[] /** * Display a close button to dismiss the alert. diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue index 8389284e..fbb5829d 100644 --- a/src/runtime/components/AvatarGroup.vue +++ b/src/runtime/components/AvatarGroup.vue @@ -13,6 +13,9 @@ type AvatarGroupVariants = VariantProps export interface AvatarGroupProps extends Omit { size?: AvatarGroupVariants['size'] + /** + * The maximum number of avatars to display. + */ max?: number | string class?: any ui?: Partial diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue index 7e20c014..352b383e 100644 --- a/src/runtime/components/Breadcrumb.vue +++ b/src/runtime/components/Breadcrumb.vue @@ -20,6 +20,10 @@ export interface BreadcrumbItem extends Omit { export interface BreadcrumbProps extends Omit { items?: T[] + /** + * The icon to use as a separator. + * @defaultValue `appConfig.ui.icons.chevronRight` + */ separatorIcon?: string class?: any ui?: Partial diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue index aeaf83a6..f1c8334b 100644 --- a/src/runtime/components/Button.vue +++ b/src/runtime/components/Button.vue @@ -17,7 +17,9 @@ export interface ButtonProps extends UseComponentIconsProps, Omit diff --git a/src/runtime/components/ButtonGroup.vue b/src/runtime/components/ButtonGroup.vue index 2cdd0ceb..52657b91 100644 --- a/src/runtime/components/ButtonGroup.vue +++ b/src/runtime/components/ButtonGroup.vue @@ -14,6 +14,10 @@ type ButtonGroupVariants = VariantProps export interface ButtonGroupProps extends Omit { size?: ButtonProps['size'] + /** + * The orientation the buttons are laid out. + * @defaultValue `'horizontal'` + */ orientation?: ButtonGroupVariants['orientation'] class?: any } diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue index 5d6beaf4..0291e0f3 100644 --- a/src/runtime/components/Checkbox.vue +++ b/src/runtime/components/Checkbox.vue @@ -28,6 +28,7 @@ export interface CheckboxProps extends Omit diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue index 49a3a4f6..f187948b 100644 --- a/src/runtime/components/ContextMenu.vue +++ b/src/runtime/components/ContextMenu.vue @@ -31,7 +31,12 @@ export interface ContextMenuItem extends Omit, Pic export interface ContextMenuProps extends Omit, Pick { items?: T[] | T[][] + /** The content of the menu. */ content?: Omit + /** + * Render the menu in a portal. + * @defaultValue `true` + */ portal?: boolean class?: any ui?: Partial diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue index 11ea15ce..5bcdc1bb 100644 --- a/src/runtime/components/Drawer.vue +++ b/src/runtime/components/Drawer.vue @@ -13,8 +13,13 @@ const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) }) export interface DrawerProps extends Omit { title?: string description?: string + /** The content of the drawer. */ content?: Omit overlay?: boolean + /** + * Render the drawer in a portal. + * @defaultValue `true` + */ portal?: boolean class?: any ui?: Partial diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue index 119d8c5f..ce86adf1 100644 --- a/src/runtime/components/DropdownMenu.vue +++ b/src/runtime/components/DropdownMenu.vue @@ -31,8 +31,20 @@ export interface DropdownMenuItem extends Omit, Pi export interface DropdownMenuProps extends Omit, Pick { items?: T[] | T[][] + /** + * The content of the menu. + * @defaultValue `{ side: 'bottom', sideOffset: 8 }` + */ content?: Omit + /** + * Display an arrow alongside the menu. + * @defaultValue `false` + */ arrow?: boolean | Omit + /** + * Render the menu in a portal. + * @defaultValue `true` + */ portal?: boolean class?: any ui?: Partial diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index c0c7c73a..2736dd18 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -54,8 +54,20 @@ export interface InputMenuProps extends Omit, 'asChild' * @defaultValue `appConfig.ui.icons.close` */ deleteIcon?: string + /** + * The content of the menu. + * @defaultValue `{ side: 'bottom', sideOffset: 8, position: 'popper' }` + */ content?: Omit + /** + * Display an arrow alongside the menu. + * @defaultValue `false` + */ arrow?: boolean | Omit + /** + * Render the menu in a portal. + * @defaultValue `true` + */ portal?: boolean /** * Whether to filter items or not, can be an array of fields to filter. @@ -193,9 +205,9 @@ onMounted(() => { v-slot="{ modelValue: tags }: { modelValue: AcceptableValue[] }" :model-value="(modelValue as string[])" :disabled="disabled" - @blur="emitFormBlur()" delimiter="" as-child + @blur="emitFormBlur()" > diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue index afe81fc3..09d501c6 100644 --- a/src/runtime/components/Modal.vue +++ b/src/runtime/components/Modal.vue @@ -13,10 +13,15 @@ const modal = tv({ extend: tv(theme), ...(appConfig.ui?.modal || {}) }) export interface ModalProps extends DialogRootProps { title?: string description?: string + /** The content of the modal. */ content?: Omit overlay?: boolean transition?: boolean fullscreen?: boolean + /** + * Render the modal in a portal. + * @defaultValue `true` + */ portal?: boolean /** * Display a close button to dismiss the modal. diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue index fcd40597..250f9232 100644 --- a/src/runtime/components/NavigationMenu.vue +++ b/src/runtime/components/NavigationMenu.vue @@ -31,7 +31,7 @@ export interface NavigationMenuItem extends Omit, Pick -export interface NavigationMenuProps extends Omit { +export interface NavigationMenuProps extends Omit { /** * The icon displayed to open the menu. * @defaultValue `appConfig.ui.icons.chevronDown` @@ -41,11 +41,19 @@ export interface NavigationMenuProps extends Omit + /** + * Display an arrow alongside the menu. + * @defaultValue `false` + */ arrow?: boolean class?: any ui?: Partial diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue index a15da4ed..a8056735 100644 --- a/src/runtime/components/Pagination.vue +++ b/src/runtime/components/Pagination.vue @@ -12,19 +12,63 @@ const appConfig = _appConfig as AppConfig & { ui: { pagination: Partial { + /** + * The icon to use for the first page control. + * @defaultValue `appConfig.ui.icons.chevronDoubleLeft` + */ firstIcon?: string + /** + * The icon to use for the previous page control. + * @defaultValue `appConfig.ui.icons.chevronLeft` + */ prevIcon?: string + /** + * The icon to use for the next page control. + * @defaultValue `appConfig.ui.icons.chevronRight` + */ nextIcon?: string + /** + * The icon to use for the last page control. + * @defaultValue `appConfig.ui.icons.chevronDoubleRight` + */ lastIcon?: string + /** + * The icon to use for the ellipsis control. + * @defaultValue `appConfig.ui.icons.ellipsis` + */ ellipsisIcon?: string + /** + * The color of the pagination controls. + * @defaultValue `'white'` + */ color?: ButtonProps['color'] + /** + * The variant of the pagination controls. + * @defaultValue `'solid'` + */ variant?: ButtonProps['variant'] + /** + * The color of the active pagination control. + * @defaultValue `'black'` + */ activeColor?: ButtonProps['color'] + /** + * The variant of the active pagination control. + * @defaultValue `'solid'` + */ activeVariant?: ButtonProps['variant'] + /** + * Whether to show the first, previous, next, and last controls. + * @defaultValue `true` + */ showControls?: boolean size?: ButtonProps['size'] - class?: any + /** + * A function to render page controls as links. + * @param page The page number to navigate to. + */ to?: (page: number) => RouteLocationRaw + class?: any ui?: Partial } diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue index 7df06758..f62862d5 100644 --- a/src/runtime/components/Popover.vue +++ b/src/runtime/components/Popover.vue @@ -15,8 +15,20 @@ export interface PopoverProps extends PopoverRootProps, Pick + /** + * Display an arrow alongside the popover. + * @defaultValue `false` + */ arrow?: boolean | Omit + /** + * Render the popover in a portal. + * @defaultValue `true` + */ portal?: boolean class?: any ui?: Partial diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue index 9aea94fc..f50210aa 100644 --- a/src/runtime/components/Progress.vue +++ b/src/runtime/components/Progress.vue @@ -17,6 +17,10 @@ export interface ProgressProps extends Omit extends Omit { +export interface RadioGroupProps extends Omit { legend?: string items?: T[] - class?: any size?: RadioGroupVariants['size'] color?: RadioGroupVariants['color'] + /** + * The orientation the radio buttons are laid out. + * @defaultValue `'vertical'` + */ + orientation?: RadioGroupRootProps['orientation'] + class?: any ui?: Partial } @@ -43,7 +48,9 @@ import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardP import { reactivePick } from '@vueuse/core' import { useId, useFormField } from '#imports' -const props = withDefaults(defineProps>(), { orientation: 'vertical' }) +const props = withDefaults(defineProps>(), { + orientation: 'vertical' +}) const emits = defineEmits() const slots = defineSlots>() diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue index 04e40311..835dc60f 100644 --- a/src/runtime/components/Select.vue +++ b/src/runtime/components/Select.vue @@ -43,8 +43,20 @@ export interface SelectProps extends Omit * @defaultValue `appConfig.ui.icons.check` */ selectedIcon?: string + /** + * The content of the menu. + * @defaultValue `{ side: 'bottom', sideOffset: 8, position: 'popper' }` + */ content?: Omit + /** + * Display an arrow alongside the menu. + * @defaultValue `false` + */ arrow?: boolean | Omit + /** + * Render the menu in a portal. + * @defaultValue `true` + */ portal?: boolean items?: T[] | T[][] class?: any diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index 06054bd9..bcb0e190 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -46,8 +46,20 @@ export interface SelectMenuProps extends Omit, 'asChild' * @defaultValue `appConfig.ui.icons.check` */ selectedIcon?: string + /** + * The content of the menu. + * @defaultValue `{ side: 'bottom', sideOffset: 8, position: 'popper' }` + */ content?: Omit + /** + * Display an arrow alongside the menu. + * @defaultValue `false` + */ arrow?: boolean | Omit + /** + * Render the menu in a portal. + * @defaultValue `true` + */ portal?: boolean /** * Whether to filter items or not, can be an array of fields to filter. diff --git a/src/runtime/components/Separator.vue b/src/runtime/components/Separator.vue index 1a08516a..69fc3081 100644 --- a/src/runtime/components/Separator.vue +++ b/src/runtime/components/Separator.vue @@ -12,13 +12,21 @@ const separator = tv({ extend: tv(theme), ...(appConfig.ui?.separator || {}) }) type SeparatorVariants = VariantProps -export interface SeparatorProps extends Omit<_SeparatorProps, 'asChild'> { +export interface SeparatorProps extends Omit<_SeparatorProps, 'asChild' | 'orientation'> { + /** Display a label in the middle. */ label?: string + /** Display an icon in the middle. */ icon?: string + /** Display an avatar in the middle. */ avatar?: AvatarProps color?: SeparatorVariants['color'] size?: SeparatorVariants['size'] type?: SeparatorVariants['type'] + /** + * The orientation of the separator. + * @defaultValue `'horizontal'` + */ + orientation?: _SeparatorProps['orientation'] class?: any ui?: Partial } diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue index 52fa60e9..491e7618 100644 --- a/src/runtime/components/Slideover.vue +++ b/src/runtime/components/Slideover.vue @@ -15,10 +15,23 @@ type SlideoverVariants = VariantProps export interface SlideoverProps extends DialogRootProps { title?: string description?: string + /** The content of the slideover. */ content?: Omit + /** + * Display an overlay behind the slideover. + * @defaultValue `true` + */ overlay?: boolean + /** + * Open & close the slideover with a transition. + * @defaultValue `true` + */ transition?: boolean side?: SlideoverVariants['side'] + /** + * Render the slideover in a portal. + * @defaultValue `true` + */ portal?: boolean /** * Display a close button to dismiss the slideover. diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue index 630c9b52..add6750a 100644 --- a/src/runtime/components/Slider.vue +++ b/src/runtime/components/Slider.vue @@ -11,9 +11,15 @@ const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) }) type SliderVariants = VariantProps -export interface SliderProps extends Omit { +export interface SliderProps extends Omit { size?: SliderVariants['size'] color?: SliderVariants['color'] + /** + * The orientation of the slider. + * @defaultValue `'horizontal'` + */ + orientation?: SliderRootProps['orientation'] + /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */ defaultValue?: number | number[] class?: any ui?: Partial diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue index 2ca49834..253c6bd9 100644 --- a/src/runtime/components/Switch.vue +++ b/src/runtime/components/Switch.vue @@ -27,6 +27,7 @@ export interface SwitchProps extends Omit diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue index 2954ba2b..18fb6b12 100644 --- a/src/runtime/components/Tabs.vue +++ b/src/runtime/components/Tabs.vue @@ -21,11 +21,20 @@ export interface TabsItem extends Partial -export interface TabsProps extends Omit { +export interface TabsProps extends Omit { items?: T[] color?: TabsVariants['color'] variant?: TabsVariants['variant'] size?: TabsVariants['size'] + /** + * The orientation of the tabs. + * @defaultValue `'horizontal'` + */ + orientation?: TabsRootProps['orientation'] + /** + * The content of the tabs, can be disabled to prevent rendering the content. + * @defaultValue `true` + */ content?: boolean | Omit class?: any ui?: Partial diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue index 0bc26c1a..22e12932 100644 --- a/src/runtime/components/Toast.vue +++ b/src/runtime/components/Toast.vue @@ -19,6 +19,11 @@ export interface ToastProps extends Omit export interface ToasterProps extends Omit { position?: ToasterVariants['position'] + /** + * Expand the toasts to show multiple toasts at once. + * @defaultValue `true` + */ expand?: boolean class?: any ui?: Partial diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue index 4cc0c12b..574aa9ce 100644 --- a/src/runtime/components/Tooltip.vue +++ b/src/runtime/components/Tooltip.vue @@ -11,10 +11,24 @@ const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial + /** + * Display an arrow alongside the tooltip. + * @defaultValue `false` + */ arrow?: boolean | Omit + /** + * Render the tooltip in a portal. + * @defaultValue `true` + */ portal?: boolean class?: any ui?: Partial