mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 15:01: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`
|
||||
Reference in New Issue
Block a user