arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 08:20:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: migrate to https://ui.nuxt.com and @nuxt/ui (#616)

Browse Source
This commit is contained in:
Benjamin Canac
2023-09-07 14:26:12 +02:00
parent 9f9d8f5cec
commit 22f7536154
58 changed files with 112 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/content/1.getting-started/2.installation.md
View File

@@ -4,20 +4,20 @@ description: 'Learn how to install and configure the module in your Nuxt app.'
## Quick Start
1. Install `@nuxthq/ui` dependency to your project:
1. Install `@nuxt/ui` dependency to your project:
::code-group
```sh [pnpm]
pnpm i -D @nuxthq/ui
pnpm i -D @nuxt/ui
```
```bash [yarn]
yarn add -D @nuxthq/ui
yarn add -D @nuxt/ui
```
```bash [npm]
npm install -D @nuxthq/ui
npm install -D @nuxt/ui
```
::
@@ -26,7 +26,7 @@ npm install -D @nuxthq/ui
```ts [nuxt.config]
export default defineNuxtConfig({
modules: ['@nuxthq/ui']
modules: ['@nuxt/ui']
})
```
@@ -128,7 +128,7 @@ Configure options in your `nuxt.config.ts` as such:
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxthq/ui'],
modules: ['@nuxt/ui'],
ui: {
global: true,
icons: ['mdi', 'simple-icons']
@@ -138,14 +138,14 @@ export default defineNuxtConfig({
## Edge
To use the latest updates pushed on the [`dev`](https://github.com/nuxtlabs/ui/tree/dev) branch, you can use `@nuxthq/ui-edge`.
To use the latest updates pushed on the [`dev`](https://github.com/nuxt/ui/tree/dev) branch, you can use `@nuxt/ui-edge`.
Update your `package.json` to the following:
```json [package.json]
{
"devDependencies": {
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
"@nuxt/ui": "npm:@nuxt/ui-edge@latest"
}
}
```

2
docs/content/1.getting-started/3.theming.md
View File

@@ -79,7 +79,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
### `app.config.ts`
Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({

10
docs/content/1.getting-started/5.examples.md
View File

@@ -4,7 +4,7 @@ description: Discover some real-life examples of components you can build.
---
::callout{icon="i-heroicons-wrench-screwdriver"}
If you have any ideas of examples you'd like to see, please comment on [this issue](https://github.com/nuxtlabs/ui/issues/297).
If you have any ideas of examples you'd like to see, please comment on [this issue](https://github.com/nuxt/ui/issues/297).
::
## Components
@@ -147,7 +147,7 @@ padding: false
:table-example-advanced
::
::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue"}
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue"}
Take a look at the component!
::
@@ -170,7 +170,7 @@ padding: false
:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
::
::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
Take a look at the component!
::
@@ -185,7 +185,7 @@ padding: false
:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
::
::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
Take a look at the component!
::
@@ -278,6 +278,6 @@ Here are some examples of how components look like in RTL mode.
:pagination-example-r-t-l
::
::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
Take a look at the component!
::

2
docs/content/1.getting-started/6.roadmap.md
View File

@@ -1,6 +1,6 @@
---
title: Roadmap
description: Discover our Volta board for @nuxthq/ui development status.
description: Discover our Volta board for @nuxt/ui development status.
toc: false
---

10
docs/content/2.elements/1.accordion.md
View File

@@ -3,7 +3,7 @@ description: Display togglable accordion panels.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Accordion.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Accordion.vue
- label: Disclosure
icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/disclosure'
@@ -254,7 +254,7 @@ const items = [{
Installation
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">
Install <code>@nuxthq/ui</code> dependency to your project:
Install <code>@nuxt/ui</code> dependency to your project:
</p>
<p>
{{ description }}
@@ -262,9 +262,9 @@ const items = [{
</div>
<div class="flex flex-col items-center">
<code>$ npm install @nuxthq/ui</code>
<code>$ nnpm install -D @nuxthq/ui</code>
<code>$ pnpm i -D @nuxthq/ui</code>
<code>$ npm install @nuxt/ui</code>
<code>$ nnpm install -D @nuxt/ui</code>
<code>$ pnpm i -D @nuxt/ui</code>
</div>
</template>
</UAccordion>

2
docs/content/2.elements/2.alert.md
View File

@@ -3,7 +3,7 @@ description: Display an alert element to draw attention.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Alert.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Alert.vue
---
## Usage

2
docs/content/2.elements/3.avatar.md
View File

@@ -3,7 +3,7 @@ description: Display an image that represents a resource or a group of resources
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Avatar.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Avatar.vue
---
## Usage

2
docs/content/2.elements/4.badge.md
View File

@@ -3,7 +3,7 @@ description: Display a short text to represent a status or a category.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Badge.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Badge.vue
---
## Usage

2
docs/content/2.elements/5.button.md
View File

@@ -3,7 +3,7 @@ description: Create a button with icon or link capabilities.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Button.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Button.vue
---
## Usage

2
docs/content/2.elements/6.dropdown.md
View File

@@ -3,7 +3,7 @@ description: Display a list of actions in a dropdown menu.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Dropdown.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Dropdown.vue
- label: Menu
icon: i-simple-icons-headlessui
to: https://headlessui.com/vue/menu

2
docs/content/2.elements/7.icon.md
View File

@@ -3,7 +3,7 @@ description: Display an icon from Iconify library.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Icon.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Icon.vue
---
## Usage

2
docs/content/2.elements/8.kbd.md
View File

@@ -4,7 +4,7 @@ description: Display a keyboard key in a text block.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Kbd.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Kbd.vue
navigation:
title: 'Kbd'
---

2
docs/content/2.elements/9.link.md
View File

@@ -4,7 +4,7 @@ description: Render a NuxtLink but with superpowers.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Link.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Link.vue
---
## Usage

2
docs/content/3.forms/1.input.md
View File

@@ -3,7 +3,7 @@ description: Display an input field.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Input.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Input.vue
---
## Usage

12
docs/content/3.forms/10.form.md
View File

@@ -3,7 +3,7 @@ description: Collect and validate form data.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Form.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Form.vue
---
## Usage
@@ -25,7 +25,7 @@ The Form component requires the `validate` and `state` props for form validation
```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { FormError, FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const state = ref({
email: undefined,
@@ -82,7 +82,7 @@ You can provide a schema from [Yup](#yup), [Zod](#zod) or [Joi](#joi) through th
<script setup lang="ts">
import { ref } from 'vue'
import { object, string, InferType } from 'yup'
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const schema = object({
email: string().email('Invalid email').required('Required'),
@@ -137,7 +137,7 @@ async function submit (event: FormSubmitEvent<Schema>) {
<script setup lang="ts">
import { ref } from 'vue'
import { z } from 'zod'
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const schema = z.object({
email: z.string().email('Invalid email'),
@@ -190,7 +190,7 @@ async function submit (event: FormSubmitEvent<Schema>) {
<script setup lang="ts">
import { ref } from 'vue'
import Joi from 'joi'
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const schema = Joi.object({
email: Joi.string().required(),
@@ -279,7 +279,7 @@ You can manually set errors after form submission if required. To do this, simpl
```vue
<script setup lang="ts">
import type { FormError, FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const state = ref({
email: undefined,

2
docs/content/3.forms/2.textarea.md
View File

@@ -3,7 +3,7 @@ description: Display a textarea field.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Textarea.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Textarea.vue
---
## Usage

4
docs/content/3.forms/3.select.md
View File

@@ -3,7 +3,7 @@ description: Display a select field.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Select.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Select.vue
---
## Usage
@@ -30,7 +30,7 @@ const country = ref(countries[0])
```
::
When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
Adding a `disabled` key to the objects will control the disabled state of the option.

2
docs/content/3.forms/4.select-menu.md
View File

@@ -4,7 +4,7 @@ description: Display a select menu with advanced features.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue
- label: 'Listbox'
icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/listbox'

2
docs/content/3.forms/5.checkbox.md
View File

@@ -3,7 +3,7 @@ description: Display a checkbox field.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Checkbox.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Checkbox.vue
---
## Usage

2
docs/content/3.forms/6.radio.md
View File

@@ -3,7 +3,7 @@ description: Display a radio field.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Radio.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Radio.vue
---
## Usage

2
docs/content/3.forms/7.toggle.md
View File

@@ -3,7 +3,7 @@ description: Display a toggle field.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Toggle.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Toggle.vue
- label: 'Switch'
icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/switch'

2
docs/content/3.forms/8.range.md
View File

@@ -3,7 +3,7 @@ description: Display a range field
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Range.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Range.vue
---
## Usage

2
docs/content/3.forms/9.form-group.md
View File

@@ -4,7 +4,7 @@ description: Display a label and additional informations around a form element.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/FormGroup.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/FormGroup.vue
---

2
docs/content/4.data/1.table.md
View File

@@ -3,7 +3,7 @@ description: 'Display data in a table.'
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/data/Table.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/data/Table.vue
---
## Usage

2
docs/content/5.navigation/1.vertical-navigation.md
View File

@@ -4,7 +4,7 @@ description: Display a vertical navigation.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/VerticalNavigation.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/VerticalNavigation.vue
---
## Usage

2
docs/content/5.navigation/2.command-palette.md
View File

@@ -4,7 +4,7 @@ description: Add a customizable command palette to your app.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue
- label: 'Combobox'
icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/combobox'

2
docs/content/5.navigation/3.pagination.md
View File

@@ -3,7 +3,7 @@ description: Add a pagination to handle pages.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Pagination.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Pagination.vue
---
## Usage

2
docs/content/5.navigation/4.tabs.md
View File

@@ -3,7 +3,7 @@ description: A set of tab panels that are displayed one at a time.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
---
## Usage

2
docs/content/6.overlays/1.modal.md
View File

@@ -3,7 +3,7 @@ description: Display a modal within your application.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Modal.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Modal.vue
- label: 'Dialog'
icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/dialog'

2
docs/content/6.overlays/2.slideover.md
View File

@@ -3,7 +3,7 @@ description: Display a dialog that slides in from the edge of the screen.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Slideover.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Slideover.vue
- label: 'Dialog'
icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/dialog'

2
docs/content/6.overlays/3.popover.md
View File

@@ -3,7 +3,7 @@ description: Display a non-modal dialog that floats around a trigger element.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Popover.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Popover.vue
- label: 'Popover'
icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/popover'

2
docs/content/6.overlays/4.tooltip.md
View File

@@ -3,7 +3,7 @@ description: Display content that appears on hover next to an element.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Tooltip.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Tooltip.vue
---
## Usage

2
docs/content/6.overlays/5.context-menu.md
View File

@@ -4,7 +4,7 @@ description: Display a menu that appears on right click.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/ContextMenu.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/ContextMenu.vue
---
## Usage

2
docs/content/6.overlays/6.notification.md
View File

@@ -3,7 +3,7 @@ description: Display a toast notification in your app.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Notification.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Notification.vue
---
## Usage

2
docs/content/7.layout/1.card.md
View File

@@ -3,7 +3,7 @@ description: Display a card for content with a header, body and footer.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/layout/Card.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Card.vue
---
## Usage

2
docs/content/7.layout/2.container.md
View File

@@ -3,7 +3,7 @@ description: A container lets you center and constrain the width of your content
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/layout/Container.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Container.vue
---
## Usage

2
docs/content/7.layout/3.skeleton.md
View File

@@ -3,7 +3,7 @@ description: Display a placeholder while content is loading.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/layout/Skeleton.vue
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Skeleton.vue
---
## Usage