From 6974f2364533684858320ed1d4a6daa60c96ec5d Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 18 Dec 2024 18:07:33 +0100 Subject: [PATCH] docs(content): lint fix --- docs/content/1.getting-started/1.index.md | 1 + .../2.installation/1.nuxt.md | 1 + .../1.getting-started/2.installation/2.vue.md | 2 + docs/content/1.getting-started/3.theme.md | 40 +++++++++++++++++++ .../1.getting-started/4.icons/1.nuxt.md | 2 +- .../1.getting-started/4.icons/2.vue.md | 2 +- docs/content/1.getting-started/5.fonts.md | 4 ++ .../1.getting-started/7.i18n/1.nuxt.md | 2 + .../content/1.getting-started/7.i18n/2.vue.md | 2 + docs/content/3.components/drawer.md | 1 + docs/content/3.components/form.md | 3 ++ docs/content/3.components/link.md | 2 +- docs/content/3.components/navigation-menu.md | 1 + 13 files changed, 60 insertions(+), 3 deletions(-) diff --git a/docs/content/1.getting-started/1.index.md b/docs/content/1.getting-started/1.index.md index bb87e80f6c..53ef73f810 100644 --- a/docs/content/1.getting-started/1.index.md +++ b/docs/content/1.getting-started/1.index.md @@ -79,6 +79,7 @@ Learn how to install and configure Nuxt UI in a Vue project in the **Vue install We want to be transparent: migrating from Nuxt UI v2 to v3 will require significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up, resulting in a new library with enhanced capabilities. Key points to consider: + - A comprehensive migration guide will be available in the coming weeks. - Review the new documentation and components carefully before attempting to upgrade. - If you encounter any issues, please report them on our [GitHub repository](https://github.com/nuxt/ui/issues). diff --git a/docs/content/1.getting-started/2.installation/1.nuxt.md b/docs/content/1.getting-started/2.installation/1.nuxt.md index 1584d74b27..feded5cdbb 100644 --- a/docs/content/1.getting-started/2.installation/1.nuxt.md +++ b/docs/content/1.getting-started/2.installation/1.nuxt.md @@ -65,6 +65,7 @@ export default defineNuxtConfig({ css: ['~/assets/css/main.css'] }) ``` + :: ::callout{icon="i-simple-icons-visualstudiocode"} diff --git a/docs/content/1.getting-started/2.installation/2.vue.md b/docs/content/1.getting-started/2.installation/2.vue.md index 5d5eb41f79..d64f99a928 100644 --- a/docs/content/1.getting-started/2.installation/2.vue.md +++ b/docs/content/1.getting-started/2.installation/2.vue.md @@ -68,6 +68,7 @@ Nuxt UI registers `unplugin-auto-import` and `unplugin-vue-components`, which wi auto-imports.d.ts components.d.ts ``` + :: #### Use the Nuxt UI Vue plugin in your `main.ts` @@ -107,6 +108,7 @@ app.use(ui) app.mount('#app') ``` + :: ::callout{icon="i-simple-icons-visualstudiocode"} diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md index 81a5b28b22..3e506b7b7d 100644 --- a/docs/content/1.getting-started/3.theme.md +++ b/docs/content/1.getting-started/3.theme.md @@ -14,6 +14,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your ::module-only #ui :::div + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @@ -36,10 +37,12 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your --color-green-950: #052E16; } ``` + ::: #ui-pro :::div + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui-pro"; @@ -62,6 +65,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your --color-green-950: #052E16; } ``` + ::: :: @@ -80,22 +84,26 @@ This can be useful when writing Tailwind classes in markdown files with [`@nuxt/ ::module-only #ui :::div + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @source "../content"; ``` + ::: #ui-pro :::div + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui-pro"; @source "../content"; ``` + ::: :: @@ -110,22 +118,26 @@ You can use the `@plugin` directive to import Tailwind CSS plugins. ::module-only #ui :::div + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @plugin "@tailwindcss/typography"; ``` + ::: #ui-pro :::div + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui-pro"; @plugin "@tailwindcss/typography"; ``` + ::: :: @@ -172,6 +184,7 @@ export default defineAppConfig({ } }) ``` + :: #vue @@ -197,6 +210,7 @@ export default defineConfig({ ] }) ``` + :: :: @@ -240,6 +254,7 @@ export default defineNuxtConfig({ } }) ``` + ::: #vue @@ -267,6 +282,7 @@ export default defineConfig({ ] }) ``` + ::: :: @@ -278,6 +294,7 @@ However, you can generate these classes using Tailwind's `@theme` directive, all ::module-only #ui :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @@ -296,10 +313,12 @@ However, you can generate these classes using Tailwind's `@theme` directive, all --color-primary-950: var(--ui-color-primary-950); } ``` + ::: #ui-pro :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui-pro"; @@ -318,6 +337,7 @@ However, you can generate these classes using Tailwind's `@theme` directive, all --color-primary-950: var(--ui-color-primary-950); } ``` + ::: :: @@ -367,6 +387,7 @@ You can change which shade is used for each color on light and dark mode: ::module-only #ui :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @@ -379,10 +400,12 @@ You can change which shade is used for each color on light and dark mode: --ui-primary: var(--ui-color-primary-200); } ``` + ::: #ui-pro :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui-pro"; @@ -395,6 +418,7 @@ You can change which shade is used for each color on light and dark mode: --ui-primary: var(--ui-color-primary-200); } ``` + ::: :: @@ -486,6 +510,7 @@ body { @apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)]; } ``` + :: ::tip @@ -494,6 +519,7 @@ You can customize these CSS variables to tailor the appearance of your applicati ::module-only #ui :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @@ -508,10 +534,12 @@ You can customize these CSS variables to tailor the appearance of your applicati --ui-border: var(--ui-color-neutral-900); } ``` + ::: #ui-pro :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui-pro"; @@ -526,6 +554,7 @@ You can customize these CSS variables to tailor the appearance of your applicati --ui-border: var(--ui-color-neutral-900); } ``` + ::: :: @@ -551,6 +580,7 @@ You can customize the default radius value using the default Tailwind CSS variab ::module-only #ui :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @@ -559,10 +589,12 @@ You can customize the default radius value using the default Tailwind CSS variab --ui-radius: var(--radius-sm); } ``` + ::: #ui-pro :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui-pro"; @@ -571,6 +603,7 @@ You can customize the default radius value using the default Tailwind CSS variab --ui-radius: var(--radius-sm); } ``` + ::: :: @@ -592,6 +625,7 @@ You can customize the default container width using the default Tailwind CSS var ::module-only #ui :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @@ -604,10 +638,12 @@ You can customize the default container width using the default Tailwind CSS var --ui-container: var(--container-8xl); } ``` + ::: #ui-pro :::div{class="*:!mb-0 *:!mt-2.5"} + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui-pro"; @@ -620,6 +656,7 @@ You can customize the default container width using the default Tailwind CSS var --ui-container: var(--container-8xl); } ``` + ::: :: @@ -758,6 +795,7 @@ You can explore the theme for each component in two ways: - Check the `Theme` section in the documentation of each individual component. - Browse the source code directly in the GitHub repository at [`v3/src/theme`](https://github.com/nuxt/ui/tree/v3/src/theme). + :: ### Config @@ -780,6 +818,7 @@ export default defineAppConfig({ } }) ``` + :: #vue @@ -808,6 +847,7 @@ export default defineConfig({ ] }) ``` + :: :: diff --git a/docs/content/1.getting-started/4.icons/1.nuxt.md b/docs/content/1.getting-started/4.icons/1.nuxt.md index 802292a135..bfc1053975 100644 --- a/docs/content/1.getting-started/4.icons/1.nuxt.md +++ b/docs/content/1.getting-started/4.icons/1.nuxt.md @@ -34,7 +34,7 @@ props: :: ::note -You can use any name from the https://icones.js.org collection. +You can use any name from the collection. :: ### Component Props diff --git a/docs/content/1.getting-started/4.icons/2.vue.md b/docs/content/1.getting-started/4.icons/2.vue.md index ef3c6156a0..a23011b482 100644 --- a/docs/content/1.getting-started/4.icons/2.vue.md +++ b/docs/content/1.getting-started/4.icons/2.vue.md @@ -28,7 +28,7 @@ props: :: ::note -You can use any name from the https://icones.js.org collection. +You can use any name from the collection. :: ### Component Props diff --git a/docs/content/1.getting-started/5.fonts.md b/docs/content/1.getting-started/5.fonts.md index 2a4226ed78..e49f2a5bf0 100644 --- a/docs/content/1.getting-started/5.fonts.md +++ b/docs/content/1.getting-started/5.fonts.md @@ -16,6 +16,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font ::module-only #ui :::div + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @@ -24,10 +25,12 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font --font-sans: 'Public Sans', sans-serif; } ``` + ::: #ui-pro :::div + ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui-pro"; @@ -36,6 +39,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font --font-sans: 'Public Sans', sans-serif; } ``` + ::: :: diff --git a/docs/content/1.getting-started/7.i18n/1.nuxt.md b/docs/content/1.getting-started/7.i18n/1.nuxt.md index bbc2961f67..ace5b212ae 100644 --- a/docs/content/1.getting-started/7.i18n/1.nuxt.md +++ b/docs/content/1.getting-started/7.i18n/1.nuxt.md @@ -55,8 +55,10 @@ const locale = defineLocale({ ::tip Look at the `code` parameter, there you need to pass the iso code of the language. Example: + * `hi` Hindi (language) * `de-AT`: German (language) as used in Austria (region) + :: ### Dynamic locale diff --git a/docs/content/1.getting-started/7.i18n/2.vue.md b/docs/content/1.getting-started/7.i18n/2.vue.md index e0b68227ed..24f1f6b16e 100644 --- a/docs/content/1.getting-started/7.i18n/2.vue.md +++ b/docs/content/1.getting-started/7.i18n/2.vue.md @@ -57,8 +57,10 @@ const locale = defineLocale({ ::tip Look at the `code` parameter, there you need to pass the iso code of the language. Example: + * `hi` Hindi (language) * `de-AT`: German (language) as used in Austria (region) + :: ### Dynamic locale diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md index edd81448c5..d45adfa7ba 100644 --- a/docs/content/3.components/drawer.md +++ b/docs/content/3.components/drawer.md @@ -243,6 +243,7 @@ export default defineNuxtConfig({ } }) ``` + :: ## Examples diff --git a/docs/content/3.components/form.md b/docs/content/3.components/form.md index a4e13c2508..e8c9302d6d 100644 --- a/docs/content/3.components/form.md +++ b/docs/content/3.components/form.md @@ -15,6 +15,7 @@ It works with the [FormField](/components/form-field) component to display error ### Schema Validation It requires two props: + - `state` - a reactive object holding the form's state. - `schema` - a schema object from a validation library like [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi), [Valibot](https://github.com/fabian-hiller/valibot) or [Superstruct](https://github.com/ianstormtaylor/superstruct). @@ -73,6 +74,7 @@ Nested validation rules are handled using dot notation. For example, a rule like Use the `validate` prop to apply your own validation logic. The validation function must return a list of errors with the following attributes: + - `message` - the error message to display. - `name` - the `name` of the `FormField` to send the error to. @@ -91,6 +93,7 @@ props: ### Input Events The Form component automatically triggers validation when an input emits an `input`, `change`, or `blur` event. + - Validation on `input` occurs **as you type**. - Validation on `change` occurs when you **commit to a value**. - Validation on `blur` happens when an input **loses focus**. diff --git a/docs/content/3.components/link.md b/docs/content/3.components/link.md index e522e664f4..bc7b8c7419 100644 --- a/docs/content/3.components/link.md +++ b/docs/content/3.components/link.md @@ -13,7 +13,7 @@ The Link component is a wrapper around [``](https://nuxt.com/docs/api/ - `inactive-class` prop to set a class when the link is inactive, `active-class` is used when active. - `exact` prop to style with `active-class` when the link is active and the route is exactly the same as the current route. - `exact-query` and `exact-hash` props to style with `active-class` when the link is active and the query or hash is exactly the same as the current query or hash. - - use `exact-query="partial"` to style with `active-class` when the link is active and the query partially match the current query. + - use `exact-query="partial"` to style with `active-class` when the link is active and the query partially match the current query. The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide. diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md index 601509da5e..0d4fdcf2de 100644 --- a/docs/content/3.components/navigation-menu.md +++ b/docs/content/3.components/navigation-menu.md @@ -131,6 +131,7 @@ Each item can take a `children` array of objects with the following properties t - `icon?: string` - `class?: any` - `onSelect?(e: Event): void` + :: ### Orientation