mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 06:51:46 +01:00
feat: rewrite to use app config and rework docs (#143)
Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
GitHub
62
docs/content/1.getting-started/1.installation.md
Normal file
62
docs/content/1.getting-started/1.installation.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: 'nuxthq/ui'
|
||||
description: 'Components library as a Nuxt3 module using TailwindCSS based on TailwindUI.'
|
||||
navigation:
|
||||
title: Installation
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
1. Install `@nuxthq/ui` dependency to your project:
|
||||
|
||||
::code-group
|
||||
|
||||
```bash [yarn]
|
||||
yarn add -D @nuxthq/ui
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install -D @nuxthq/ui
|
||||
```
|
||||
|
||||
```sh [pnpm]
|
||||
pnpm i -D @nuxthq/ui
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
2. Add it to your `modules` section in your `nuxt.config`:
|
||||
|
||||
```ts [nuxt.config]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxthq/ui']
|
||||
})
|
||||
```
|
||||
|
||||
::alert
|
||||
That's it! You can now use all the components and composables in your Nuxt app ✨
|
||||
::
|
||||
|
||||
## Options
|
||||
|
||||
| Key | Default | Description |
|
||||
| ------------------------ | ---------------------- | ------------------------------------------------ |
|
||||
| `prefix` | `u` | Define the prefix of the imported components. |
|
||||
| `global` | `false` | Expose components globally. |
|
||||
| `icons` | `['heroicons']` | Icon collections to load. |
|
||||
|
||||
## Edge channel
|
||||
|
||||
To use the latest updates pushed on the [`dev`](https://github.com/nuxtlabs/ui/tree/dev) branch, you can use `@nuxthq/ui-edge`.
|
||||
|
||||
Update your `package.json` to the following:
|
||||
|
||||
```json [package.json]
|
||||
{
|
||||
"devDependencies": {
|
||||
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then run `npm install` or `yarn install`.
|
||||
1
docs/content/1.getting-started/2.theming.md
Normal file
1
docs/content/1.getting-started/2.theming.md
Normal file
@@ -0,0 +1 @@
|
||||
## Overview
|
||||
7
docs/content/1.getting-started/3.shortcuts.md
Normal file
7
docs/content/1.getting-started/3.shortcuts.md
Normal file
@@ -0,0 +1,7 @@
|
||||
## Overview
|
||||
|
||||
## Composables
|
||||
|
||||
## `defineShortcuts`
|
||||
|
||||
## `useShortcuts`
|
||||
152
docs/content/1.getting-started/4.migration.md
Normal file
152
docs/content/1.getting-started/4.migration.md
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
navigation: false
|
||||
---
|
||||
|
||||
## Breaking Changes
|
||||
|
||||
Classes to invert dark mode like `u-text-gray-900` have been removed.
|
||||
|
||||
- Components now have a `ui` prop to override the entire preset instead of individual props
|
||||
- Components prop `popperOptions` has been renamed to `popper`
|
||||
- `Alert`, `AlertDialog`, `Tabs` and `Pills` components have been removed
|
||||
|
||||
### `Avatar`
|
||||
|
||||
- `wrapperClass`, `backgroundClass`, `placeholderClass` and `roundedClass` props have been removed in favor of `ui`
|
||||
- `rounded` prop is now a class defaulting to `rounded-full` instead of a boolean prop, can be overriden through `ui.avatar.rounded`
|
||||
- `chip` prop is now `chipVariant`
|
||||
- `ui.avatar.size` and `ui.avatar.chip.size` `xxs` and `xxxs` have been renamed respectively to `2xs` and `3xs`
|
||||
|
||||
### `AvatarGroup`
|
||||
|
||||
- `ringClass` and `marginClass` props have been removed in favor of `ui`
|
||||
- `group` prop has been removed in favor of slots
|
||||
|
||||
### `Badge`
|
||||
|
||||
- `baseClass` prop has been removed in favor of `ui`
|
||||
- `rounded` prop is now a class defaulting to `rounded-md` instead of a boolean prop, can be overriden through `ui.badge.rounded`
|
||||
- `color` prop has been added to change the color scheme of the badge
|
||||
- `variant` prop is now the variant instead of the color
|
||||
- `font-medium` has been moved from `ui.badge.base` to `ui.badge.font`
|
||||
|
||||
### `Button`
|
||||
|
||||
- `customClass` prop have been removed
|
||||
- `baseClass`, `iconBaseClass` and `roundedClass` props have been removed in favor of `ui`
|
||||
- `leadingIconClass` and `trailingIconClass` props have been removed
|
||||
- `rounded` prop is now a class defaulting to `rounded-md` instead of a boolean prop, can be overriden through `ui.button.rounded`
|
||||
- `color` prop has been added to change the color scheme of the badge
|
||||
- `variant` prop is now the variant instead of the color
|
||||
- `labelCompact` and `compact` props have been removed entirely alongside preset `ui.button.compact` and `ui.button.icon.leading.compactSpacing` and `ui.button.icon.trailing.compactSpacing`
|
||||
- `padded` prop has been added to remove padding
|
||||
- `ui.button.size.xxs` has been renamed to `ui.button.size.2xs`
|
||||
- `ui.button.size.2xl` has been introduced
|
||||
- `ui.button.gap` has been introduced to replace margins defined in `ui.button.icon.leading.spacing` and `ui.button.icon.trailing.spacing`
|
||||
- `ui.button.icon.leading.spacing` and `ui.button.icon.trailing.spacing` that added negative margin to icons have been removed to keep consitency when surcharging a button through default slot (code has only been commented for now)
|
||||
- `font-medium` has been moved from `ui.button.base` to `ui.button.font`
|
||||
|
||||
### `ButtonGroup`
|
||||
|
||||
- New component
|
||||
|
||||
### `Dropdown`
|
||||
|
||||
- `wrapperClass`, `containerClass`, `widthClass`, `backgroundClass`, `shadowClass`, `roundedClass`, `ringClass`, `divideClass`, `baseClass`, `transitionClass`, `groupClass`, `itemBaseClass`, `itemActiveClass`, `itemInactiveClass`, `itemDisabledClass`, `itemIconClass`, `itemAvatarClass` and `itemShortcutsClass` props have been removed in favor of `ui`
|
||||
- preset has been updated to improve dark mode
|
||||
|
||||
### `Card`
|
||||
|
||||
- `baseClass`, `backgroundClass`, `borderColorClass`, `shadowClass`, `ringClass`, `roundedClass`, `bodyClass`, `bodyBackgroundClass`, `headerClass`, `headerBackgroundClass`, `footerClass`, `footerBackgroundClass` props have been removed in favor of `ui`
|
||||
- `rounded` prop is now a class defaulting to `rounded-lg` instead of a boolean prop, can be overriden through `ui.avatar.rounded`
|
||||
- `padded` prop has been removed, use `ui.rounded = 'sm:rounded-lg'` instead when false
|
||||
- `ui.card.border` has been removed in favor of `ui.card.divide`
|
||||
- `ui.card.header` & `ui.card.footer` are now `{ spacing: '', background: '' }`
|
||||
|
||||
### `Container`
|
||||
|
||||
- `constrainedClass` prop has been removed in favor of `ui`
|
||||
- `ui.container.base` and `ui.container.spacing` have been added
|
||||
- `padded` prop has been removed, use `ui.spacing = 'sm:px-6 lg:px-8'` instead when false
|
||||
- `constrained` prop has been removed, use `ui.constrained = ''` instead when false
|
||||
|
||||
### `Input`
|
||||
|
||||
- `wrapperClass`, `baseClass`, `iconBaseClass` and `customClass` props have been removed in favor of `ui`
|
||||
|
||||
### `FormGroup`
|
||||
|
||||
- Renamed to `InputGroup`
|
||||
- `wrapperClass`, `containerClass`, `labelClass`, `labelWrapperClass`, `descriptionClass`, `requiredClass` and `hintClass` props have been removed in favor of `ui`
|
||||
|
||||
### `Textarea`
|
||||
|
||||
- `wrapperClass`, `baseClass` and `customClass` props have been removed in favor of `ui`
|
||||
- `resize` is now false by default
|
||||
|
||||
### `Select`
|
||||
|
||||
- `wrapperClass`, `baseClass`, `iconBaseClass` and `customClass` props have been removed in favor of `ui`
|
||||
|
||||
### `SelectCustom`
|
||||
|
||||
- Renamed to `SelectMenu`
|
||||
- `placeholder` prop is now `null` by default
|
||||
- `nullable` prop has been removed
|
||||
- `textAttribute` has been renamed to `optionAttribute` and now defaults to `label`
|
||||
- `wrapperClass`, `baseClass`, `iconBaseClass`, `customClass`, `listBaseClass`, `listContainerClass`, `listWidthClass`, `listInputClass`, `listTransitionClass`, `listOptionBaseClass`, `listOptionContainerClass`, `listOptionActiveClass`, `listOptionInactiveClass`, `listOptionSelectedClass`, `listOptionUnselectedClass`, `listOptionDisabledClass`, `listOptionEmptyClass`, `listOptionIcon`, `listOptionIconBaseClass`, `listOptionIconActiveClass`, `listOptionIconInactiveClass` and `listOptionIconSizeClass` props have been removed in favor of `ui`
|
||||
- `ui.selectCustom.list` has been moved to the root of `ui.selectMenu`, the component now uses `ui.select` to render the default slot
|
||||
|
||||
### `Radio`
|
||||
|
||||
- `wrapperClass`, `baseClass`, `labelClass`, `requiredClass`, `helpClass` and `customClass` props have been removed in favor of `ui`
|
||||
|
||||
### `Checkbox`
|
||||
|
||||
- `wrapperClass`, `baseClass`, `labelClass`, `requiredClass`, `helpClass` and `customClass` props have been removed in favor of `ui`
|
||||
|
||||
### `Toggle`
|
||||
|
||||
- `baseClass`, `activeClass`, `inactiveClass`, `containerBaseClass`, `containerActiveClass`, `containerInactiveClass`, `iconBaseClass`, `iconActiveClass`, `iconInactiveClass`, `iconOnClass` and `iconOffClass` props have been removed in favor of `ui`
|
||||
|
||||
### `CommandPalette`
|
||||
|
||||
- `inputCloseIcon` and `emptyIcon` props have been removed in favor of `ui`
|
||||
- `inputIcon` prop has been renamed to `icon`
|
||||
- `inputPlaceholder` prop has been renamed to `placeholder`
|
||||
- `options` prop has been renamed to `fuse` to follow the `popper` and `ui` props convention
|
||||
|
||||
### `Modal`
|
||||
|
||||
- `wrapperClass`, `innerClass`, `containerClass`, `baseClass`, `backgroundClass`, `overlayBackgroundClass`, `overlayTransitionClass`, `shadowClass`, `ringClass`, `roundedClass`, `widthClass` and `transitionClass` props have been removed in favor of `ui`
|
||||
- `innerStyle` prop has been removed
|
||||
- `#header` and `#footer` slots have been removed
|
||||
|
||||
### `Slideover`
|
||||
|
||||
- `wrapperClass`, `baseClass`, `backgroundClass`, `overlayBackgroundClass`, `overlayTransitionClass`, `widthClass`, `headerClass` and `transitionClass` props have been removed in favor of `ui`
|
||||
- `#header` slot has been removed
|
||||
|
||||
### `Popover`
|
||||
|
||||
- `wrapperClass`, `containerClass`, `widthClass`, `baseClass`, `backgroundClass`, `shadowClass`, `roundedClass`, `ringClass` and `transitionClass` props have been removed in favor of `ui`
|
||||
|
||||
### `Tooltip`
|
||||
|
||||
- `wrapperClass`, `containerClass`, `baseClass`, `widthClass`, `backgroundClass`, `shadowClass`, `ringClass`, `roundedClass`, `shortcutsClass` and `transitionClass` props have been removed in favor of `ui`
|
||||
|
||||
### `ContextMenu`
|
||||
|
||||
- `wrapperClass`, `containerClass`, `widthClass`, `backgroundClass`, `shadowClass`, `roundedClass`, `ringClass`, `baseClass` and `transitionClass`
|
||||
|
||||
### `Notification`
|
||||
|
||||
- `backgroundClass`, `shadowClass`, `ringClass`, `roundedClass`, `transitionClass`, `customClass` and `iconBaseClass` props have been removed in favor of `ui`
|
||||
- `type` prop has been removed
|
||||
- `ui.notification.type` and `ui.notification.icon.color` have been removed
|
||||
- `ui.notification.close.icon.name` has been moved to `ui.notification.default.closeIcon`
|
||||
|
||||
### `useToast`
|
||||
|
||||
- `addNotification` and `removeNotification` have been renamed to `add` and `remove`
|
||||
- `success`, `info`, `warning` and `error` methods have been removed as `type` disappeared from `Notification`
|
||||
100
docs/content/2.elements/1.avatar.md
Normal file
100
docs/content/2.elements/1.avatar.md
Normal file
@@ -0,0 +1,100 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
alt: 'Avatar'
|
||||
---
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the Avatar.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
size: 'md'
|
||||
baseProps:
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
alt: 'Avatar'
|
||||
---
|
||||
::
|
||||
|
||||
### Chip
|
||||
|
||||
Use the `chipColor`, `chipVariant` and `chipPosition` props to display a chip on the Avatar.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
chipColor: 'primary'
|
||||
chipVariant: 'solid'
|
||||
chipPosition: 'top-right'
|
||||
baseProps:
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
alt: 'Avatar'
|
||||
---
|
||||
::
|
||||
|
||||
### Placeholder
|
||||
|
||||
If there is an error loading the `src` of the avatar or `src` is null a background placeholder will be displayed, customizable in `ui.avatar.background`.
|
||||
|
||||
If there's an `alt` prop initials will be displayed on top of the background, customizable in `ui.avatar.placeholder`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
alt: 'Benjamin Canac'
|
||||
---
|
||||
::
|
||||
|
||||
### Group
|
||||
|
||||
To stack avatars as a group, use the `AvatarGroup` component.
|
||||
|
||||
- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
|
||||
- To size all the avatars equally, pass the `size` prop
|
||||
- To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`
|
||||
|
||||
::component-card{slug="AvatarGroup"}
|
||||
---
|
||||
props:
|
||||
size: 'md'
|
||||
max: 2
|
||||
ui:
|
||||
size:
|
||||
'3xs': ''
|
||||
'2xs': ''
|
||||
xs: ''
|
||||
sm: ''
|
||||
md: ''
|
||||
lg: ''
|
||||
xl: ''
|
||||
'2xl': ''
|
||||
'3xl': ''
|
||||
code: |
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
|
||||
---
|
||||
|
||||
#default
|
||||
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
|
||||
:u-avatar{src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Avatar"}
|
||||
:u-avatar{src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="Avatar"}
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
59
docs/content/2.elements/2.badge.md
Normal file
59
docs/content/2.elements/2.badge.md
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Use the default slot to set the text of the Badge.
|
||||
|
||||
::component-card
|
||||
---
|
||||
code: Badge
|
||||
---
|
||||
|
||||
Badge
|
||||
::
|
||||
|
||||
You can also use the `label` prop:
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
label: Badge
|
||||
---
|
||||
::
|
||||
|
||||
### Style
|
||||
|
||||
Use the `color` and `variant` props to change the visual style of the Badge.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
color: 'primary'
|
||||
variant: 'solid'
|
||||
---
|
||||
|
||||
Badge
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the Badge.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
size: 'md'
|
||||
---
|
||||
|
||||
Badge
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
280
docs/content/2.elements/3.button.md
Normal file
280
docs/content/2.elements/3.button.md
Normal file
@@ -0,0 +1,280 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Use the default slot to set the text of the Button.
|
||||
|
||||
::component-card
|
||||
---
|
||||
code: Button
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
You can also use the `label` prop.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
label: Button
|
||||
---
|
||||
::
|
||||
|
||||
### Style
|
||||
|
||||
Use the `color` and `variant` props to change the visual style of the Button.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
color: 'primary'
|
||||
variant: 'solid'
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
Besides all the colors from the `ui.colors` object, you can also use the `white` and `gray` and `black` colors with their pre-defined variants.
|
||||
|
||||
#### White
|
||||
|
||||
::component-card
|
||||
---
|
||||
backgroundClass: 'bg-gray-50 dark:bg-gray-800'
|
||||
props:
|
||||
color: 'white'
|
||||
variant: 'solid'
|
||||
ui:
|
||||
variant:
|
||||
solid: 1
|
||||
ghost: 1
|
||||
excludedProps:
|
||||
- color
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
#### Gray
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
color: 'gray'
|
||||
variant: 'solid'
|
||||
ui:
|
||||
variant:
|
||||
solid: 1
|
||||
ghost: 1
|
||||
link: 1
|
||||
excludedProps:
|
||||
- color
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
#### Black
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
color: 'black'
|
||||
variant: 'solid'
|
||||
ui:
|
||||
variant:
|
||||
solid: 1
|
||||
link: 1
|
||||
excludedProps:
|
||||
- color
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the Button.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
size: 'sm'
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
Use the `leading` and `trailing` props to set the icon position or the `leadingIcon` and `trailingIcon` props to set a different icon for each position.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
icon: 'i-heroicons-pencil-square'
|
||||
size: 'sm'
|
||||
color: 'primary'
|
||||
variant: 'solid'
|
||||
label: Button
|
||||
trailing: false
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
The `label` as prop or slot is optional so you can use the Button as an icon-only button.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
icon: 'i-heroicons-pencil-square'
|
||||
size: 'sm'
|
||||
color: 'primary'
|
||||
square: true
|
||||
variant: 'solid'
|
||||
excludedProps:
|
||||
- icon
|
||||
- square
|
||||
---
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the Button.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
disabled: true
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` prop to show a loading icon and disable the Button.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
loading: true
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
### Block
|
||||
|
||||
Use the `block` prop to make the Button fill the width of its container.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
block: true
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
### Link
|
||||
|
||||
Use the `to` prop to make the Button a link.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
to: 'https://volta.net'
|
||||
target: '_blank'
|
||||
---
|
||||
|
||||
Button
|
||||
::
|
||||
|
||||
### Padded
|
||||
|
||||
Use the `padded` prop to remove the padding of the Button.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
padded: false
|
||||
baseProps:
|
||||
color: 'gray'
|
||||
variant: 'link'
|
||||
icon: 'i-heroicons-x-mark-20-solid'
|
||||
---
|
||||
::
|
||||
|
||||
### Square
|
||||
|
||||
Use the `square` prop to force the Button to have the same padding horizontally and vertically.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
square: true
|
||||
baseProps:
|
||||
label: 'Button'
|
||||
color: 'gray'
|
||||
variant: 'solid'
|
||||
---
|
||||
::
|
||||
|
||||
### Truncate
|
||||
|
||||
Use the `truncate` prop to truncate the label of the Button.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
truncate: true
|
||||
class: 'w-20'
|
||||
label: 'Button with a long text'
|
||||
excludedProps:
|
||||
- class
|
||||
---
|
||||
::
|
||||
|
||||
### Group
|
||||
|
||||
To stack buttons as a group, use the `ButtonGroup` component.
|
||||
|
||||
- To size all the buttons equally, pass the `size` prop
|
||||
- To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
|
||||
|
||||
::component-card{slug="ButtonGroup"}
|
||||
---
|
||||
props:
|
||||
size: 'sm'
|
||||
ui:
|
||||
size:
|
||||
xxs: ''
|
||||
xs: ''
|
||||
sm: ''
|
||||
md: ''
|
||||
lg: ''
|
||||
xl: ''
|
||||
code: |
|
||||
<UButton label="Action" color="white" />
|
||||
<UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
|
||||
---
|
||||
|
||||
#default
|
||||
:u-button{label="Action" color="white"}
|
||||
:u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"}
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
56
docs/content/2.elements/4.dropdown.md
Normal file
56
docs/content/2.elements/4.dropdown.md
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
github: true
|
||||
headlessui:
|
||||
label: 'Menu'
|
||||
to: 'https://headlessui.com/vue/menu'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:dropdown-example
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const items = [
|
||||
[{
|
||||
label: 'Profile',
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
}
|
||||
}], [{
|
||||
label: 'Edit',
|
||||
icon: 'i-heroicons-pencil-square-20-solid'
|
||||
}, {
|
||||
label: 'Duplicate',
|
||||
icon: 'i-heroicons-document-duplicate-20-solid'
|
||||
}], [{
|
||||
label: 'Archive',
|
||||
icon: 'i-heroicons-archive-box-20-solid'
|
||||
}, {
|
||||
label: 'Move',
|
||||
icon: 'i-heroicons-arrow-right-circle-20-solid'
|
||||
}], [{
|
||||
label: 'Delete',
|
||||
icon: 'i-heroicons-trash-20-solid'
|
||||
}]
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
|
||||
<UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
|
||||
</UDropdown>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
91
docs/content/3.forms/1.input.md
Normal file
91
docs/content/3.forms/1.input.md
Normal file
@@ -0,0 +1,91 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
name: 'input'
|
||||
---
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the Input.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
name: 'input'
|
||||
props:
|
||||
size: 'sm'
|
||||
---
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
Use the `leading` and `trailing` props to set the icon position or the `leadingIcon` and `trailingIcon` props to set a different icon for each position.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
name: 'input'
|
||||
props:
|
||||
icon: 'i-heroicons-magnifying-glass-20-solid'
|
||||
appearance: 'white'
|
||||
size: 'sm'
|
||||
trailing: false
|
||||
placeholder: 'Search...'
|
||||
excludedProps:
|
||||
- icon
|
||||
- placeholder
|
||||
---
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the Input.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
name: 'input'
|
||||
props:
|
||||
placeholder: 'Search...'
|
||||
appearance: 'white'
|
||||
disabled: true
|
||||
excludedProps:
|
||||
- placeholder
|
||||
---
|
||||
::
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` prop to show a loading icon and disable the Input.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
name: 'input'
|
||||
placeholder: 'Search'
|
||||
props:
|
||||
loading: true
|
||||
icon: 'i-heroicons-magnifying-glass-20-solid'
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
### Group
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
20
docs/content/3.forms/2.textarea.md
Normal file
20
docs/content/3.forms/2.textarea.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
name: 'textarea'
|
||||
---
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
25
docs/content/3.forms/3.select.md
Normal file
25
docs/content/3.forms/3.select.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
name: 'select'
|
||||
modelValue: 'Canada'
|
||||
options:
|
||||
- 'United States'
|
||||
- 'Canada'
|
||||
- 'Mexico'
|
||||
---
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
185
docs/content/3.forms/4.select-menu.md
Normal file
185
docs/content/3.forms/4.select-menu.md
Normal file
@@ -0,0 +1,185 @@
|
||||
---
|
||||
github: true
|
||||
headlessui:
|
||||
label: 'Listbox'
|
||||
to: 'https://headlessui.com/vue/listbox'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:select-menu-example-basic{class="max-w-[12rem] w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
|
||||
|
||||
const selected = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu v-model="selected" :options="people" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can use multiple values but you have to override the `#label` slot and handle the display yourself.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:select-menu-example-multiple{class="max-w-[12rem] w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
|
||||
|
||||
const selected = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu v-model="selected" :options="people" multiple>
|
||||
<template #label>
|
||||
<span v-if="selected.length" class="font-medium truncate">{{ selected.join(', ') }}</span>
|
||||
<span v-else class="block truncate text-gray-400 dark:text-gray-500">Select people</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can also override the default slot entirely.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:select-menu-example-button{class="max-w-[12rem] w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
|
||||
|
||||
const selected = ref(people[3])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu v-slot="{ open }" v-model="selected" :options="people">
|
||||
<UButton>
|
||||
{{ selected }}
|
||||
|
||||
<UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
|
||||
</UButton>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:select-menu-example-objects{class="max-w-[12rem] w-full"}
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [{
|
||||
id: 'benjamincanac',
|
||||
label: 'benjamincanac',
|
||||
href: 'https://github.com/benjamincanac',
|
||||
target: '_blank',
|
||||
avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
|
||||
},
|
||||
{
|
||||
id: 'Atinux',
|
||||
label: 'Atinux',
|
||||
href: 'https://github.com/Atinux',
|
||||
target: '_blank',
|
||||
avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
|
||||
},
|
||||
{
|
||||
id: 'smarroufin',
|
||||
label: 'smarroufin',
|
||||
href: 'https://github.com/smarroufin',
|
||||
target: '_blank',
|
||||
avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
|
||||
},
|
||||
{
|
||||
id: 'nobody',
|
||||
label: 'Nobody',
|
||||
icon: 'i-heroicons-user-circle'
|
||||
}]
|
||||
|
||||
const selected = ref(people[0])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu v-model="selected" :options="people">
|
||||
<template #label>
|
||||
<UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4" />
|
||||
<UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" />
|
||||
|
||||
{{ selected.label }}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
class: 'max-w-[12rem] w-full'
|
||||
placeholder: 'Select a person'
|
||||
options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
|
||||
props:
|
||||
icon: 'i-heroicons-magnifying-glass-20-solid'
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
### Search
|
||||
|
||||
Use the `searchable` prop to enable search.
|
||||
|
||||
This will use HeadlessUI [Combobox](https://headlessui.com/vue/combobox) component instead of [Listbox](https://headlessui.com/vue/listbox).
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
class: 'max-w-[12rem] w-full'
|
||||
placeholder: 'Select a person'
|
||||
options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
|
||||
props:
|
||||
searchable: true
|
||||
---
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the SelectMenu.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
class: 'max-w-[12rem] w-full'
|
||||
placeholder: 'Select a person'
|
||||
options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
|
||||
props:
|
||||
disabled: true
|
||||
---
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
16
docs/content/3.forms/5.checkbox.md
Normal file
16
docs/content/3.forms/5.checkbox.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-card
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
16
docs/content/3.forms/6.radio.md
Normal file
16
docs/content/3.forms/6.radio.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-card
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
19
docs/content/3.forms/7.toggle.md
Normal file
19
docs/content/3.forms/7.toggle.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
github: true
|
||||
headlessui:
|
||||
label: 'Switch'
|
||||
to: 'https://headlessui.com/vue/switch'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-card
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
46
docs/content/4.navigation/1.vertical-navigation.md
Normal file
46
docs/content/4.navigation/1.vertical-navigation.md
Normal file
@@ -0,0 +1,46 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:vertical-navigation-example
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const links = [{
|
||||
label: 'Profile',
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
}
|
||||
}, {
|
||||
label: 'Installation',
|
||||
icon: 'i-heroicons-home',
|
||||
to: '/getting-started/installation'
|
||||
}, {
|
||||
label: 'Vertical Navigation',
|
||||
icon: 'i-heroicons-chart-bar',
|
||||
to: '/navigation/vertical-navigation'
|
||||
}, {
|
||||
label: 'Command Palette',
|
||||
icon: 'i-heroicons-command-line',
|
||||
to: '/navigation/command-palette'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UVerticalNavigation :links="links" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
273
docs/content/4.navigation/2.command-palette.md
Normal file
273
docs/content/4.navigation/2.command-palette.md
Normal file
@@ -0,0 +1,273 @@
|
||||
---
|
||||
github: true
|
||||
headlessui:
|
||||
label: 'Combobox'
|
||||
to: 'https://headlessui.com/vue/combobox'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Use a `v-model` to display a searchable and selectable list of commands.
|
||||
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
---
|
||||
|
||||
#default
|
||||
:command-palette-example-basic{class="h-[257px]"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [
|
||||
{ id: 1, label: 'Wade Cooper' },
|
||||
{ id: 2, label: 'Arlene Mccoy' },
|
||||
{ id: 3, label: 'Devon Webb' },
|
||||
{ id: 4, label: 'Tom Cook' },
|
||||
{ id: 5, label: 'Tanya Fox' },
|
||||
{ id: 6, label: 'Hellen Schmidt' },
|
||||
{ id: 7, label: 'Caroline Schultz' },
|
||||
{ id: 8, label: 'Mason Heaney' },
|
||||
{ id: 9, label: 'Claudie Smitham' },
|
||||
{ id: 10, label: 'Emil Schaefer' }
|
||||
]
|
||||
|
||||
const selected = ref([people[3]])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette
|
||||
v-model="selected"
|
||||
multiple
|
||||
nullable
|
||||
:groups="[{ key: 'people', commands: people }]"
|
||||
:fuse="{ resultLimit: 6 }"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can put a `CommandPalette` anywhere you want but it's most commonly used inside of a modal.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:command-palette-example-modal
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const open = ref(false)
|
||||
|
||||
const people = [
|
||||
{ id: 1, label: 'Wade Cooper' },
|
||||
{ id: 2, label: 'Arlene Mccoy' },
|
||||
{ id: 3, label: 'Devon Webb' },
|
||||
{ id: 4, label: 'Tom Cook' },
|
||||
{ id: 5, label: 'Tanya Fox' },
|
||||
{ id: 6, label: 'Hellen Schmidt' },
|
||||
{ id: 7, label: 'Caroline Schultz' },
|
||||
{ id: 8, label: 'Mason Heaney' },
|
||||
{ id: 9, label: 'Claudie Smitham' },
|
||||
{ id: 10, label: 'Emil Schaefer' }
|
||||
]
|
||||
|
||||
const selected = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UButton label="Open" @click="open = true" />
|
||||
|
||||
<UModal v-model="open">
|
||||
<UCommandPalette
|
||||
v-model="selected"
|
||||
multiple
|
||||
nullable
|
||||
:groups="[{ key: 'people', commands: people }]"
|
||||
/>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can pass multiple groups of commands to the component. Each group will be separated by a divider and will display a label.
|
||||
|
||||
Without a `v-model`, you can also listen on `@update:model-value` to navigate to a link or do something else when a command is clicked.
|
||||
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
---
|
||||
|
||||
#default
|
||||
:command-palette-example-groups{class="h-[274px]"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const router = useRouter()
|
||||
|
||||
const commandPaletteRef = ref()
|
||||
|
||||
const users = [
|
||||
{ id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } },
|
||||
{ id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' } },
|
||||
{ id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' } }
|
||||
]
|
||||
|
||||
const actions = [
|
||||
{ id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file') },
|
||||
{ id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder') },
|
||||
{ id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag') },
|
||||
{ id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label') }
|
||||
]
|
||||
|
||||
const groups = computed(() => commandPaletteRef.value?.query
|
||||
? [{
|
||||
key: 'users',
|
||||
commands: users
|
||||
}]
|
||||
: [{
|
||||
key: 'recent',
|
||||
label: 'Recent searches',
|
||||
commands: users.slice(0, 1)
|
||||
}, {
|
||||
key: 'actions',
|
||||
commands: actions
|
||||
}])
|
||||
|
||||
function onSelect (option) {
|
||||
if (option.click) {
|
||||
option.click()
|
||||
} else if (option.to) {
|
||||
router.push(option.to)
|
||||
} else if (option.href) {
|
||||
window.open(option.href, '_blank')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette ref="commandPaletteRef" :groups="groups" @update:model-value="onSelect" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
padding: false
|
||||
baseProps:
|
||||
empty: null
|
||||
props:
|
||||
icon: 'i-heroicons-command-line'
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
### Placeholder
|
||||
|
||||
Use the `placeholder` prop to change the input placeholder
|
||||
|
||||
::component-card
|
||||
---
|
||||
padding: false
|
||||
baseProps:
|
||||
empty: null
|
||||
props:
|
||||
placeholder: 'Type a command...'
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
### Close
|
||||
|
||||
Use the `close` prop to display a close button on the right side of the input.
|
||||
|
||||
You can pass all the props of the [Button](/elements/button) component to customize it through the `close` prop or globally through `ui.commandPalette.default.close`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
padding: false
|
||||
baseProps:
|
||||
empty: null
|
||||
props:
|
||||
close:
|
||||
icon: 'i-heroicons-x-mark-20-solid'
|
||||
color: 'gray'
|
||||
variant: 'link'
|
||||
padded: false
|
||||
excludedProps:
|
||||
- close
|
||||
---
|
||||
::
|
||||
|
||||
### Empty
|
||||
|
||||
Use the `empty` prop to display a message when there are no results.
|
||||
|
||||
You can pass an `object` through the `empty` prop or globally through `ui.commandPalette.default.empty`. Here is the default:
|
||||
|
||||
::component-card
|
||||
---
|
||||
padding: false
|
||||
baseProps:
|
||||
placeholder: 'Type something to see the empty label change'
|
||||
props:
|
||||
empty:
|
||||
icon: 'i-heroicons-magnifying-glass-20-solid'
|
||||
label: "We couldn't find any items."
|
||||
queryLabel: "We couldn't find any items with that term. Please try again."
|
||||
excludedProps:
|
||||
- empty
|
||||
---
|
||||
::
|
||||
|
||||
## Themes
|
||||
|
||||
Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
|
||||
|
||||
### Algolia
|
||||
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
---
|
||||
|
||||
#default
|
||||
:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
|
||||
::
|
||||
|
||||
::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/docs/rework/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
|
||||
Take a look at the component!
|
||||
::
|
||||
|
||||
### Raycast
|
||||
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
---
|
||||
|
||||
#default
|
||||
:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
|
||||
::
|
||||
|
||||
::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/docs/rework/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
|
||||
Take a look at the component!
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
72
docs/content/5.overlays/1.modal.md
Normal file
72
docs/content/5.overlays/1.modal.md
Normal file
@@ -0,0 +1,72 @@
|
||||
---
|
||||
github: true
|
||||
headlessui:
|
||||
label: 'Dialog'
|
||||
to: 'https://headlessui.com/vue/dialog'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:modal-example-basic
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UButton label="Open" @click="open = true" />
|
||||
|
||||
<UModal v-model="open">
|
||||
<!-- Content -->
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:modal-example-card
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UButton label="Open" @click="open = true" />
|
||||
|
||||
<UModal v-model="open">
|
||||
<UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
<template #header>
|
||||
<!-- Content -->
|
||||
</template>
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
<template #footer>
|
||||
<!-- Content -->
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
37
docs/content/5.overlays/2.slideover.md
Normal file
37
docs/content/5.overlays/2.slideover.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
github: true
|
||||
headlessui:
|
||||
label: 'Dialog'
|
||||
to: 'https://headlessui.com/vue/dialog'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:slideover-example
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UButton label="Open" @click="open = true" />
|
||||
|
||||
<USlideover v-model="open">
|
||||
<!-- Content -->
|
||||
</USlideover>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
33
docs/content/5.overlays/3.popover.md
Normal file
33
docs/content/5.overlays/3.popover.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
github: true
|
||||
headlessui:
|
||||
label: 'Popover'
|
||||
to: 'https://headlessui.com/vue/popover'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:popover-example
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UPopover>
|
||||
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
|
||||
|
||||
<template #panel>
|
||||
<!-- Content -->
|
||||
</template>
|
||||
</UPopover>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
26
docs/content/5.overlays/4.tooltip.md
Normal file
26
docs/content/5.overlays/4.tooltip.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tooltip-example
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UTooltip text="Tooltip">
|
||||
<UButton color="gray" label="Button" />
|
||||
</UTooltip>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
49
docs/content/5.overlays/5.context-menu.md
Normal file
49
docs/content/5.overlays/5.context-menu.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:context-menu-example
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const { x, y } = useMouse()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
|
||||
|
||||
function openContextMenu () {
|
||||
const top = unref(y)
|
||||
const left = unref(x)
|
||||
|
||||
virtualElement.value.getBoundingClientRect = () => ({
|
||||
width: 0,
|
||||
height: 0,
|
||||
top,
|
||||
left
|
||||
})
|
||||
|
||||
isOpen.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div @contextmenu.prevent="openContextMenu">
|
||||
<UContextMenu v-model="isOpen" :virtual-element="virtualElement" width-class="w-48">
|
||||
<!-- Content -->
|
||||
</UContextMenu>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
249
docs/content/5.overlays/6.notification.md
Normal file
249
docs/content/5.overlays/6.notification.md
Normal file
@@ -0,0 +1,249 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
First of all, add the `Notifications` component to your app, preferably inside `app.vue`.
|
||||
|
||||
This component will render by default the notifications at the bottom right of the screen. You can configure its behaviour in the `app.config.ts` through `ui.notifications`.
|
||||
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
<div>
|
||||
<UContainer>
|
||||
<NuxtPage />
|
||||
</UContainer>
|
||||
|
||||
<UNotifications />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Then, you can use the `useToast` composable to add notifications to your app:
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:notification-example-basic
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Description
|
||||
|
||||
You can add a `description` in addition of the `title`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 2
|
||||
timeout: 0
|
||||
props:
|
||||
title: 'Notification'
|
||||
description: 'This is a notification.'
|
||||
---
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 3
|
||||
timeout: 0
|
||||
title: 'Notification'
|
||||
props:
|
||||
icon: 'i-heroicons-check-circle'
|
||||
description: 'This is a notification.'
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
### Avatar
|
||||
|
||||
Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 4
|
||||
timeout: 0
|
||||
title: 'Notification'
|
||||
description: 'This is a notification.'
|
||||
props:
|
||||
avatar:
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
excludedProps:
|
||||
- avatar
|
||||
---
|
||||
::
|
||||
|
||||
### Timeout
|
||||
|
||||
Use the `timeout` prop to configure how long the Notification will remain. Set it to `0` to disable the timeout.
|
||||
|
||||
You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 5
|
||||
title: 'Notification'
|
||||
description: 'This is a notification.'
|
||||
props:
|
||||
timeout: 10000
|
||||
---
|
||||
::
|
||||
|
||||
### Click
|
||||
|
||||
Use the `click` prop to execute a function when the Notification is clicked.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:notification-example-click
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
|
||||
function onClick () {
|
||||
alert('Clicked!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Callback
|
||||
|
||||
Use the `callback` prop to execute a function when the Notification expires.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:notification-example-callback
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
|
||||
function onCallback () {
|
||||
alert('Notification expired!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Close
|
||||
|
||||
Use the `close` prop to hide or customize the close button on the Notification.
|
||||
|
||||
You can pass all the props of the [Button](/elements/button) component to customize it through the `close` prop or globally through `ui.notifications.default.close`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 6
|
||||
title: 'Notification'
|
||||
timeout: 0
|
||||
props:
|
||||
close:
|
||||
icon: 'i-heroicons-archive-box-x-mark'
|
||||
color: 'primary'
|
||||
variant: 'outline'
|
||||
padded: true
|
||||
size: '2xs'
|
||||
ui:
|
||||
rounded: 'rounded-full'
|
||||
excludedProps:
|
||||
- close
|
||||
---
|
||||
::
|
||||
|
||||
### Actions
|
||||
|
||||
Use the `actions` prop to add actions to the Notification.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:notification-example-actions
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" @click="toast.add({ title: 'Click me', click: () => alert('Clicked!') })" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
Like for `close`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notifications.default.action`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 6
|
||||
title: 'Notification'
|
||||
timeout: 0
|
||||
props:
|
||||
actions:
|
||||
- variant: 'ghost'
|
||||
color: 'gray'
|
||||
label: Action 1
|
||||
- variant: 'solid'
|
||||
color: 'gray'
|
||||
label: Action 2
|
||||
excludedProps:
|
||||
- actions
|
||||
---
|
||||
::
|
||||
|
||||
Actions will render differently whether you have a `description` set.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 6
|
||||
title: 'Notification'
|
||||
description: 'This is a notification.'
|
||||
timeout: 0
|
||||
props:
|
||||
actions:
|
||||
- variant: 'solid'
|
||||
color: 'primary'
|
||||
label: Action 1
|
||||
- variant: 'outline'
|
||||
color: 'primary'
|
||||
label: Action 2
|
||||
excludedProps:
|
||||
- actions
|
||||
---
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
35
docs/content/6.layout/1.card.md
Normal file
35
docs/content/6.layout/1.card.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:card-example{class="w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header />
|
||||
|
||||
Body
|
||||
|
||||
<template #footer />
|
||||
</UCard>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Slots
|
||||
|
||||
:component-slots
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
25
docs/content/6.layout/2.container.md
Normal file
25
docs/content/6.layout/2.container.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
github: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:container-example{class="w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UContainer>Content</UContainer>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
Reference in New Issue
Block a user