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

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

View File

@@ -11,7 +11,7 @@ assignees: ''
Before reporting a bug, please make sure that you have read through our documentation and you think your problem is indeed an issue related to our module. --> Before reporting a bug, please make sure that you have read through our documentation and you think your problem is indeed an issue related to our module. -->
### Version ### Version
@nuxthq/ui: <!-- ex: v2.0.0 --> @nuxt/ui: <!-- ex: v2.0.0 -->
nuxt: <!-- ex: v3.5.0 --> nuxt: <!-- ex: v3.5.0 -->
### Reproduction Link ### Reproduction Link
@@ -19,7 +19,7 @@ nuxt: <!-- ex: v3.5.0 -->
<!-- <!--
A minimal test case based on one of: A minimal test case based on one of:
- a GitHub repository that can reproduce the bug - a GitHub repository that can reproduce the bug
- https://stackblitz.com/edit/nuxtlabs-ui - https://stackblitz.com/edit/nuxt-ui
--> -->
### Steps to reproduce ### Steps to reproduce

View File

@@ -1,4 +1,4 @@
[![nuxt-ui-social-card](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxtlabs.com) [![nuxt-ui-social-card](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
# Nuxt UI # Nuxt UI
@@ -21,19 +21,19 @@ Is has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://v
- Bundled icons - Bundled icons
- Fully typed - Fully typed
Read more on [ui.nuxtlabs.com](https://ui.nuxtlabs.com) Read more on [ui.nuxt.com](https://ui.nuxt.com)
## Installation ## Installation
```bash ```bash
# Using npm # Using npm
npm install @nuxthq/ui npm install @nuxt/ui
# Using yarn # Using yarn
yarn add @nuxthq/ui yarn add @nuxt/ui
# Using pnpm # Using pnpm
pnpm add @nuxthq/ui pnpm add @nuxt/ui
``` ```
Then, register the module in your `nuxt.config.ts`: Then, register the module in your `nuxt.config.ts`:
@@ -41,24 +41,24 @@ Then, register the module in your `nuxt.config.ts`:
```js ```js
export default defineNuxtConfig({ export default defineNuxtConfig({
modules: [ modules: [
'@nuxthq/ui' '@nuxt/ui'
] ]
}) })
``` ```
If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`: If you want latest updates, please use `@nuxt/ui-edge` in your `package.json`:
```json ```json
{ {
"devDependencies": { "devDependencies": {
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest" "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
} }
} }
``` ```
## Documentation ## Documentation
Visit https://ui.nuxtlabs.com to explore the documentation. Visit https://ui.nuxt.com to explore the documentation.
## Credits ## Credits
@@ -72,17 +72,17 @@ Visit https://ui.nuxtlabs.com to explore the documentation.
## License ## License
Licensed under the [MIT license](https://github.com/nuxtlabs/ui/blob/dev/LICENSE.md). Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md).
<!-- Badges --> <!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@nuxthq/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@nuxthq/ui [npm-version-href]: https://npmjs.com/package/@nuxt/ui
[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxthq/ui.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@nuxthq/ui [npm-downloads-href]: https://npmjs.com/package/@nuxt/ui
[license-src]: https://img.shields.io/github/license/nuxtlabs/ui.svg?style=flat&colorA=18181B&colorB=28CF8D [license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://github.com/nuxtlabs/ui/blob/main/LICENSE [license-href]: https://github.com/nuxt/ui/blob/main/LICENSE
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com [nuxt-href]: https://nuxt.com

View File

@@ -61,7 +61,7 @@ useHead({
], ],
link: [ link: [
{ rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }, { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
{ rel: 'canonical', href: `https://ui.nuxtlabs.com${withoutTrailingSlash(route.path)}` } { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
], ],
htmlAttrs: { htmlAttrs: {
lang: 'en' lang: 'en'

View File

@@ -17,7 +17,7 @@
<template #center> <template #center>
<span class="text-sm text-gray-600 dark:text-gray-300"> <span class="text-sm text-gray-600 dark:text-gray-300">
Published under <NuxtLink to="https://github.com/nuxtlabs/ui" target="_blank" class="text-gray-900 dark:text-white"> Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
MIT License MIT License
</NuxtLink> </NuxtLink>
</span> </span>
@@ -26,7 +26,7 @@
<template #right> <template #right>
<USocialButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" /> <USocialButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" />
<USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxtlabs" /> <USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxtlabs" />
<USocialButton aria-label="Nuxt Image on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui" /> <USocialButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" />
</template> </template>
</UFooter> </UFooter>
</template> </template>

View File

@@ -23,7 +23,7 @@
<UColorModeButton v-if="!$colorMode.forced" /> <UColorModeButton v-if="!$colorMode.forced" />
<USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" /> <USocialButton to="https://github.com/nuxt/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
</template> </template>
<template #panel> <template #panel>
@@ -54,12 +54,12 @@ const links = computed(() => {
}, { }, {
label: 'Playground', label: 'Playground',
icon: 'i-simple-icons-stackblitz', icon: 'i-simple-icons-stackblitz',
to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue', to: 'https://stackblitz.com/edit/nuxt-ui?file=app.config.ts,app.vue',
target: '_blank' target: '_blank'
}, { }, {
label: 'Releases', label: 'Releases',
icon: 'i-heroicons-rocket-launch-solid', icon: 'i-heroicons-rocket-launch-solid',
to: 'https://github.com/nuxtlabs/ui/releases', to: 'https://github.com/nuxt/ui/releases',
target: '_blank' target: '_blank'
}] }]
}) })

View File

@@ -53,7 +53,7 @@ const items = [{
Installation Installation
</h3> </h3>
<p class="text-sm text-gray-500 dark:text-gray-400"> <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>
<p> <p>
{{ description }} {{ description }}
@@ -61,9 +61,9 @@ const items = [{
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<code>$ npm install @nuxthq/ui</code> <code>$ npm install @nuxt/ui</code>
<code>$ nnpm install -D @nuxthq/ui</code> <code>$ nnpm install -D @nuxt/ui</code>
<code>$ pnpm i -D @nuxthq/ui</code> <code>$ pnpm i -D @nuxt/ui</code>
</div> </div>
</template> </template>
</UAccordion> </UAccordion>

View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' 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({ const state = ref({
email: undefined, email: undefined,

View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { z } from 'zod' import { z } from 'zod'
import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types' import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const options = [ const options = [
{ label: 'Option 1', value: 'option-1' }, { label: 'Option 1', value: 'option-1' },

View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import Joi from 'joi' 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({ const schema = Joi.object({
email: Joi.string().required(), email: Joi.string().required(),

View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { object, string, InferType } from 'yup' 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({ const schema = object({
email: string().email('Invalid email').required('Required'), email: string().email('Invalid email').required('Required'),

View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { z } from 'zod' 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({ const schema = z.object({
email: z.string().email('Invalid email'), email: z.string().email('Invalid email'),

View File

@@ -4,20 +4,20 @@ description: 'Learn how to install and configure the module in your Nuxt app.'
## Quick Start ## Quick Start
1. Install `@nuxthq/ui` dependency to your project: 1. Install `@nuxt/ui` dependency to your project:
::code-group ::code-group
```sh [pnpm] ```sh [pnpm]
pnpm i -D @nuxthq/ui pnpm i -D @nuxt/ui
``` ```
```bash [yarn] ```bash [yarn]
yarn add -D @nuxthq/ui yarn add -D @nuxt/ui
``` ```
```bash [npm] ```bash [npm]
npm install -D @nuxthq/ui npm install -D @nuxt/ui
``` ```
:: ::
@@ -26,7 +26,7 @@ npm install -D @nuxthq/ui
```ts [nuxt.config] ```ts [nuxt.config]
export default defineNuxtConfig({ 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] ```ts [nuxt.config.ts]
export default defineNuxtConfig({ export default defineNuxtConfig({
modules: ['@nuxthq/ui'], modules: ['@nuxt/ui'],
ui: { ui: {
global: true, global: true,
icons: ['mdi', 'simple-icons'] icons: ['mdi', 'simple-icons']
@@ -138,14 +138,14 @@ export default defineNuxtConfig({
## Edge ## 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: Update your `package.json` to the following:
```json [package.json] ```json [package.json]
{ {
"devDependencies": { "devDependencies": {
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest" "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
} }
} }
``` ```

View File

@@ -79,7 +79,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
### `app.config.ts` ### `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] ```ts [app.config.ts]
export default defineAppConfig({ export default defineAppConfig({

View File

@@ -4,7 +4,7 @@ description: Discover some real-life examples of components you can build.
--- ---
::callout{icon="i-heroicons-wrench-screwdriver"} ::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 ## Components
@@ -147,7 +147,7 @@ padding: false
:table-example-advanced :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! Take a look at the component!
:: ::
@@ -170,7 +170,7 @@ padding: false
:command-palette-theme-algolia{class="max-h-[480px] rounded-md"} :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! Take a look at the component!
:: ::
@@ -185,7 +185,7 @@ padding: false
:command-palette-theme-raycast{class="max-h-[480px] rounded-md"} :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! 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 :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! Take a look at the component!
:: ::

View File

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

View File

@@ -3,7 +3,7 @@ description: Display togglable accordion panels.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 - label: Disclosure
icon: i-simple-icons-headlessui icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/disclosure' to: 'https://headlessui.com/vue/disclosure'
@@ -254,7 +254,7 @@ const items = [{
Installation Installation
</h3> </h3>
<p class="text-sm text-gray-500 dark:text-gray-400"> <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>
<p> <p>
{{ description }} {{ description }}
@@ -262,9 +262,9 @@ const items = [{
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<code>$ npm install @nuxthq/ui</code> <code>$ npm install @nuxt/ui</code>
<code>$ nnpm install -D @nuxthq/ui</code> <code>$ nnpm install -D @nuxt/ui</code>
<code>$ pnpm i -D @nuxthq/ui</code> <code>$ pnpm i -D @nuxt/ui</code>
</div> </div>
</template> </template>
</UAccordion> </UAccordion>

View File

@@ -3,7 +3,7 @@ description: Display an alert element to draw attention.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display an image that represents a resource or a group of resources
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display a short text to represent a status or a category.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Create a button with icon or link capabilities.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display a list of actions in a dropdown menu.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 - label: Menu
icon: i-simple-icons-headlessui icon: i-simple-icons-headlessui
to: https://headlessui.com/vue/menu to: https://headlessui.com/vue/menu

View File

@@ -3,7 +3,7 @@ description: Display an icon from Iconify library.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -4,7 +4,7 @@ description: Display a keyboard key in a text block.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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: navigation:
title: 'Kbd' title: 'Kbd'
--- ---

View File

@@ -4,7 +4,7 @@ description: Render a NuxtLink but with superpowers.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display an input field.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Collect and validate form data.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage
@@ -25,7 +25,7 @@ The Form component requires the `validate` and `state` props for form validation
```vue ```vue
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' 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({ const state = ref({
email: undefined, 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"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { object, string, InferType } from 'yup' 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({ const schema = object({
email: string().email('Invalid email').required('Required'), email: string().email('Invalid email').required('Required'),
@@ -137,7 +137,7 @@ async function submit (event: FormSubmitEvent<Schema>) {
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { z } from 'zod' 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({ const schema = z.object({
email: z.string().email('Invalid email'), email: z.string().email('Invalid email'),
@@ -190,7 +190,7 @@ async function submit (event: FormSubmitEvent<Schema>) {
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import Joi from 'joi' 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({ const schema = Joi.object({
email: Joi.string().required(), email: Joi.string().required(),
@@ -279,7 +279,7 @@ You can manually set errors after form submission if required. To do this, simpl
```vue ```vue
<script setup lang="ts"> <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({ const state = ref({
email: undefined, email: undefined,

View File

@@ -3,7 +3,7 @@ description: Display a textarea field.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display a select field.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## 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. Adding a `disabled` key to the objects will control the disabled state of the option.

View File

@@ -4,7 +4,7 @@ description: Display a select menu with advanced features.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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' - label: 'Listbox'
icon: i-simple-icons-headlessui icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/listbox' to: 'https://headlessui.com/vue/listbox'

View File

@@ -3,7 +3,7 @@ description: Display a checkbox field.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display a radio field.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display a toggle field.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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' - label: 'Switch'
icon: i-simple-icons-headlessui icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/switch' to: 'https://headlessui.com/vue/switch'

View File

@@ -3,7 +3,7 @@ description: Display a range field
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -4,7 +4,7 @@ description: Display a label and additional informations around a form element.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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
--- ---

View File

@@ -3,7 +3,7 @@ description: 'Display data in a table.'
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -4,7 +4,7 @@ description: Display a vertical navigation.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -4,7 +4,7 @@ description: Add a customizable command palette to your app.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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' - label: 'Combobox'
icon: i-simple-icons-headlessui icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/combobox' to: 'https://headlessui.com/vue/combobox'

View File

@@ -3,7 +3,7 @@ description: Add a pagination to handle pages.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: A set of tab panels that are displayed one at a time.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display a modal within your application.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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' - label: 'Dialog'
icon: i-simple-icons-headlessui icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/dialog' to: 'https://headlessui.com/vue/dialog'

View File

@@ -3,7 +3,7 @@ description: Display a dialog that slides in from the edge of the screen.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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' - label: 'Dialog'
icon: i-simple-icons-headlessui icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/dialog' to: 'https://headlessui.com/vue/dialog'

View File

@@ -3,7 +3,7 @@ description: Display a non-modal dialog that floats around a trigger element.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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' - label: 'Popover'
icon: i-simple-icons-headlessui icon: i-simple-icons-headlessui
to: 'https://headlessui.com/vue/popover' to: 'https://headlessui.com/vue/popover'

View File

@@ -3,7 +3,7 @@ description: Display content that appears on hover next to an element.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -4,7 +4,7 @@ description: Display a menu that appears on right click.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display a toast notification in your app.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display a card for content with a header, body and footer.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: A container lets you center and constrain the width of your content
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -3,7 +3,7 @@ description: Display a placeholder while content is loading.
links: links:
- label: GitHub - label: GitHub
icon: i-simple-icons-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 ## Usage

View File

@@ -30,12 +30,12 @@ const anchors = [{
}, { }, {
label: 'Playground', label: 'Playground',
icon: 'i-simple-icons-stackblitz', icon: 'i-simple-icons-stackblitz',
to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue', to: 'https://stackblitz.com/edit/nuxt-ui?file=app.config.ts,app.vue',
target: '_blank' target: '_blank'
}, { }, {
label: 'Releases', label: 'Releases',
icon: 'i-heroicons-rocket-launch-solid', icon: 'i-heroicons-rocket-launch-solid',
to: 'https://github.com/nuxtlabs/ui/releases', to: 'https://github.com/nuxt/ui/releases',
target: '_blank' target: '_blank'
}] }]
</script> </script>

View File

@@ -42,7 +42,7 @@ export default defineNuxtConfig({
main: { main: {
prefix: '/main', prefix: '/main',
driver: 'github', driver: 'github',
repo: 'nuxtlabs/ui', repo: 'nuxt/ui',
branch: 'main', branch: 'main',
dir: 'docs/content' dir: 'docs/content'
} }

View File

@@ -1,8 +1,8 @@
{ {
"name": "@nuxthq/ui-docs", "name": "@nuxt/ui-docs",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@nuxthq/ui": "workspace:latest" "@nuxt/ui": "workspace:latest"
}, },
"devDependencies": { "devDependencies": {
"@iconify-json/heroicons": "latest", "@iconify-json/heroicons": "latest",

View File

@@ -65,12 +65,12 @@ const headline = computed(() => findPageHeadline(page.value))
const links = computed(() => [{ const links = computed(() => [{
icon: 'i-heroicons-pencil-square', icon: 'i-heroicons-pencil-square',
label: 'Edit this page', label: 'Edit this page',
to: `https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page?.value?._file}`, to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`,
target: '_blank' target: '_blank'
}, { }, {
icon: 'i-heroicons-star', icon: 'i-heroicons-star',
label: 'Star on GitHub', label: 'Star on GitHub',
to: 'https://github.com/nuxtlabs/ui', to: 'https://github.com/nuxt/ui',
target: '_blank' target: '_blank'
}, { }, {
icon: 'i-heroicons-book-open', icon: 'i-heroicons-book-open',

View File

@@ -141,14 +141,14 @@
</template> </template>
<div class="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16"> <div class="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16">
<NuxtLink class="text-center group" to="https://npmjs.org/package/@nuxthq/ui" target="_blank"> <NuxtLink class="text-center group" to="https://npmjs.org/package/@nuxt/ui" target="_blank">
<p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400"> <p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
{{ format(module.stats.downloads) }}+ {{ format(module.stats.downloads) }}+
</p> </p>
<p>monthly downloads</p> <p>monthly downloads</p>
</NuxtLink> </NuxtLink>
<NuxtLink class="text-center group" to="https://github.com/nuxtlabs/ui" target="_blank"> <NuxtLink class="text-center group" to="https://github.com/nuxt/ui" target="_blank">
<p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400"> <p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
{{ format(module.stats.stars) }}+ {{ format(module.stats.stars) }}+
</p> </p>
@@ -177,7 +177,7 @@ const { data: module } = await useFetch<{
transform: (module) => pick(module, ['stats', 'contributors']) transform: (module) => pick(module, ['stats', 'contributors'])
}) })
const source = ref('npm i @nuxthq/ui') const source = ref('npm i @nuxt/ui')
const { copy, copied } = useClipboard({ source }) const { copy, copied } = useClipboard({ source })
const breakpoints = useBreakpoints(breakpointsTailwind) const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -192,8 +192,8 @@ useSeoMeta({
ogTitle: page.value.title, ogTitle: page.value.title,
description: page.value.description, description: page.value.description,
ogDescription: page.value.description, ogDescription: page.value.description,
ogImage: 'https://ui.nuxtlabs.com/social-card.png', ogImage: 'https://ui.nuxt.com/social-card.png',
twitterImage: 'https://ui.nuxtlabs.com/social-card.png' twitterImage: 'https://ui.nuxt.com/social-card.png'
}) })
const { format } = Intl.NumberFormat('en-GB', { notation: 'compact' }) const { format } = Intl.NumberFormat('en-GB', { notation: 'compact' })

View File

@@ -1,7 +1,7 @@
{ {
"name": "@nuxthq/ui", "name": "@nuxt/ui",
"version": "2.7.0", "version": "2.7.0",
"repository": "https://github.com/nuxtlabs/ui", "repository": "https://github.com/nuxt/ui",
"license": "MIT", "license": "MIT",
"exports": { "exports": {
".": { ".": {

7
pnpm-lock.yaml generated
View File

@@ -110,7 +110,7 @@ importers:
docs: docs:
dependencies: dependencies:
'@nuxthq/ui': '@nuxt/ui':
specifier: workspace:latest specifier: workspace:latest
version: link:.. version: link:..
devDependencies: devDependencies:
@@ -131,7 +131,7 @@ importers:
version: 0.2.0(eslint@8.48.0) version: 0.2.0(eslint@8.48.0)
'@nuxthq/elements': '@nuxthq/elements':
specifier: npm:@nuxthq/elements-edge@0.0.1-28233683.5219c54 specifier: npm:@nuxthq/elements-edge@0.0.1-28233683.5219c54
version: /@nuxthq/elements-edge@0.0.1-28233683.5219c54(@nuxt/content@2.8.2)(@nuxthq/ui@)(vue@3.3.4) version: /@nuxthq/elements-edge@0.0.1-28233683.5219c54(@nuxt/content@2.8.2)(vue@3.3.4)
'@nuxthq/studio': '@nuxthq/studio':
specifier: ^0.13.4 specifier: ^0.13.4
version: 0.13.4(rollup@3.28.1) version: 0.13.4(rollup@3.28.1)
@@ -1664,14 +1664,13 @@ packages:
- vue-tsc - vue-tsc
dev: true dev: true
/@nuxthq/elements-edge@0.0.1-28233683.5219c54(@nuxt/content@2.8.2)(@nuxthq/ui@)(vue@3.3.4): /@nuxthq/elements-edge@0.0.1-28233683.5219c54(@nuxt/content@2.8.2)(vue@3.3.4):
resolution: {integrity: sha512-9xoFzuXWGoH6WJPUNHWRgb3RHJ9Btpvrliai5E68tcD5JNBF8rolwBOZJ2GE+1tDLS4MhcD3ps9UAIDiin/qBQ==} resolution: {integrity: sha512-9xoFzuXWGoH6WJPUNHWRgb3RHJ9Btpvrliai5E68tcD5JNBF8rolwBOZJ2GE+1tDLS4MhcD3ps9UAIDiin/qBQ==}
peerDependencies: peerDependencies:
'@nuxt/content': latest '@nuxt/content': latest
'@nuxthq/ui': npm:@nuxthq/ui-edge@latest '@nuxthq/ui': npm:@nuxthq/ui-edge@latest
dependencies: dependencies:
'@nuxt/content': 2.8.2(rollup@3.28.1)(vue@3.3.4) '@nuxt/content': 2.8.2(rollup@3.28.1)(vue@3.3.4)
'@nuxthq/ui': 'link:'
'@vueuse/core': 10.4.1(vue@3.3.4) '@vueuse/core': 10.4.1(vue@3.3.4)
lodash-es: 4.17.21 lodash-es: 4.17.21
ofetch: 1.3.3 ofetch: 1.3.3

View File

@@ -18,5 +18,5 @@ if [[ ! -z ${NODE_AUTH_TOKEN} ]] ; then
fi fi
# Release package # Release package
echo "Publishing @nuxthq/ui" echo "Publishing @nuxt/ui"
npm publish -q --access public npm publish -q --access public

View File

@@ -15,5 +15,5 @@ if [[ ! -z ${NODE_AUTH_TOKEN} ]] ; then
fi fi
# Release package # Release package
echo "Publishing @nuxthq/ui" echo "Publishing @nuxt/ui"
npm publish -q --access public npm publish -q --access public

View File

@@ -12,10 +12,10 @@ export default defineNuxtPlugin(() => {
const gray: Record<string, string> | undefined = colors[appConfig.ui.gray] const gray: Record<string, string> | undefined = colors[appConfig.ui.gray]
if (!primary) { if (!primary) {
console.warn(`[@nuxthq/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`) console.warn(`[@nuxt/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`)
} }
if (!gray) { if (!gray) {
console.warn(`[@nuxthq/ui] Gray color '${appConfig.ui.gray}' not found in Tailwind config`) console.warn(`[@nuxt/ui] Gray color '${appConfig.ui.gray}' not found in Tailwind config`)
} }
return `:root { return `:root {