mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 17:00:36 +01:00
Merge branch 'v3' into feat/init-blog
This commit is contained in:
Hugo Richard
GitHub
@@ -22,9 +22,7 @@ onMounted(() => {
|
||||
|
||||
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
|
||||
|
||||
const githubLink = computed(() => {
|
||||
return `https://github.com/nuxt/${value.value}`
|
||||
})
|
||||
const githubLink = computed(() => `https://github.com/nuxt/${value.value}`)
|
||||
|
||||
const desktopLinks = computed(() => props.links.map(({ icon, ...link }) => link))
|
||||
const mobileLinks = computed(() => [
|
||||
@@ -36,6 +34,16 @@ const mobileLinks = computed(() => [
|
||||
target: '_blank'
|
||||
}
|
||||
])
|
||||
|
||||
const items = computed(() => {
|
||||
const ui2 = { label: 'v2.22.0', to: 'https://ui2.nuxt.com' }
|
||||
const uiPro1 = { label: 'v1.8.0', to: 'https://ui2.nuxt.com/pro' }
|
||||
|
||||
return [
|
||||
{ label: `v${config.version}`, active: true, color: 'primary' as const, checked: true, type: 'checkbox' as const },
|
||||
route.path === '/' ? ui2 : route.path.startsWith('/pro') ? uiPro1 : module.value === 'ui-pro' ? uiPro1 : ui2
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -53,7 +61,7 @@ const mobileLinks = computed(() => [
|
||||
<UDropdownMenu
|
||||
v-slot="{ open }"
|
||||
:modal="false"
|
||||
:items="[{ label: `v${config.version}`, active: true, color: 'primary', checked: true, type: 'checkbox' }, { label: module === 'ui-pro' ? 'v1.7.1' : 'v2.21.1', to: module === 'ui-pro' ? 'https://ui2.nuxt.com/pro' : 'https://ui2.nuxt.com' }]"
|
||||
:items="items"
|
||||
:ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
|
||||
size="xs"
|
||||
>
|
||||
|
||||
@@ -26,6 +26,7 @@ function getEmojiFlag(locale: string): string {
|
||||
km: 'kh', // Khmer -> Cambodia
|
||||
ko: 'kr', // Korean -> South Korea
|
||||
ky: 'kg', // Kyrgyz -> Kyrgyzstan
|
||||
lb: 'lu', // Luxembourgish -> Luxembourg
|
||||
ms: 'my', // Malay -> Malaysia
|
||||
nb: 'no', // Norwegian Bokmål -> Norway
|
||||
sl: 'si', // Slovenian -> Slovenia
|
||||
|
||||
@@ -83,7 +83,7 @@ const groups = [
|
||||
</template>
|
||||
|
||||
<template #billing-label="{ item }">
|
||||
{{ item.label }}
|
||||
<span class="font-medium text-primary">{{ item.label }}</span>
|
||||
|
||||
<UBadge variant="subtle" size="sm">
|
||||
50% off
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
const toast = useToast()
|
||||
|
||||
const groups = [{
|
||||
id: 'actions',
|
||||
label: 'Actions',
|
||||
items: [{
|
||||
label: 'Create new',
|
||||
icon: 'i-lucide-plus',
|
||||
children: [{
|
||||
label: 'New file',
|
||||
icon: 'i-lucide-file-plus',
|
||||
suffix: 'Create a new file in the current directory',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'New file created!' })
|
||||
},
|
||||
kbds: ['meta', 'N']
|
||||
}, {
|
||||
label: 'New folder',
|
||||
icon: 'i-lucide-folder-plus',
|
||||
suffix: 'Create a new folder in the current directory',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'New folder created!' })
|
||||
},
|
||||
kbds: ['meta', 'F']
|
||||
}, {
|
||||
label: 'New project',
|
||||
icon: 'i-lucide-folder-git',
|
||||
suffix: 'Create a new project from a template',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'New project created!' })
|
||||
},
|
||||
kbds: ['meta', 'P']
|
||||
}]
|
||||
}, {
|
||||
label: 'Share',
|
||||
icon: 'i-lucide-share',
|
||||
children: [{
|
||||
label: 'Copy link',
|
||||
icon: 'i-lucide-link',
|
||||
suffix: 'Copy a link to the current item',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Link copied to clipboard!' })
|
||||
},
|
||||
kbds: ['meta', 'L']
|
||||
}, {
|
||||
label: 'Share via email',
|
||||
icon: 'i-lucide-mail',
|
||||
suffix: 'Share the current item via email',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Share via email dialog opened!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Share on social',
|
||||
icon: 'i-lucide-share-2',
|
||||
suffix: 'Share the current item on social media',
|
||||
children: [{
|
||||
label: 'Twitter',
|
||||
icon: 'i-simple-icons-twitter',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Shared on Twitter!' })
|
||||
}
|
||||
}, {
|
||||
label: 'LinkedIn',
|
||||
icon: 'i-simple-icons-linkedin',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Shared on LinkedIn!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Facebook',
|
||||
icon: 'i-simple-icons-facebook',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Shared on Facebook!' })
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: 'Settings',
|
||||
icon: 'i-lucide-settings',
|
||||
children: [{
|
||||
label: 'General',
|
||||
icon: 'i-lucide-sliders',
|
||||
suffix: 'Configure general settings',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'General settings opened!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Appearance',
|
||||
icon: 'i-lucide-palette',
|
||||
suffix: 'Customize the appearance',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Appearance settings opened!' })
|
||||
}
|
||||
}, {
|
||||
label: 'Security',
|
||||
icon: 'i-lucide-shield',
|
||||
suffix: 'Manage security settings',
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault()
|
||||
toast.add({ title: 'Security settings opened!' })
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette :groups="groups" class="flex-1" />
|
||||
</template>
|
||||
@@ -15,6 +15,9 @@ const schema = z.object({
|
||||
select: z.string().refine(value => value === 'option-2', {
|
||||
message: 'Select Option 2'
|
||||
}),
|
||||
selectMultiple: z.array(z.string()).refine(values => values.includes('option-2'), {
|
||||
message: 'Include Option 2'
|
||||
}),
|
||||
selectMenu: z.any().refine(option => option?.value === 'option-2', {
|
||||
message: 'Select Option 2'
|
||||
}),
|
||||
@@ -81,6 +84,10 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
|
||||
<USelect v-model="state.select" :items="items" class="w-full" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="selectMultiple" label="Select (Multiple)">
|
||||
<USelect v-model="state.selectMultiple" multiple :items="items" class="w-full" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="selectMenu" label="Select Menu">
|
||||
<USelectMenu v-model="state.selectMenu" :items="items" class="w-full" />
|
||||
</UFormField>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
const tags = ref(['Vue'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UFormField label="Tags" required>
|
||||
<UInputTags v-model="tags" placeholder="Enter tags..." />
|
||||
</UFormField>
|
||||
</template>
|
||||
@@ -10,7 +10,7 @@ const domain = ref(domains[0])
|
||||
v-model="value"
|
||||
placeholder="nuxt"
|
||||
:ui="{
|
||||
base: 'pl-[57px]',
|
||||
base: 'pl-14.5',
|
||||
leading: 'pointer-events-none'
|
||||
}"
|
||||
>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
const value = ref('npx nuxi module add ui')
|
||||
const value = ref('npx nuxt module add ui')
|
||||
const copied = ref(false)
|
||||
|
||||
function copy() {
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { vMaska } from 'maska/vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2">
|
||||
<UInput v-maska="'#### #### #### ####'" placeholder="4242 4242 4242 4242" icon="i-lucide-credit-card" />
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UInput v-maska="'##/##'" placeholder="MM/YY" icon="i-lucide-calendar" />
|
||||
<UInput v-maska="'###'" placeholder="CVC" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -10,8 +10,8 @@ const open = ref(false)
|
||||
<Placeholder class="h-48" />
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<UButton label="Cancel" color="neutral" variant="outline" @click="open = false" />
|
||||
<template #footer="{ close }">
|
||||
<UButton label="Cancel" color="neutral" variant="outline" @click="close" />
|
||||
<UButton label="Submit" color="neutral" />
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
@@ -10,8 +10,8 @@ const open = ref(false)
|
||||
<Placeholder class="h-full" />
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<UButton label="Cancel" color="neutral" variant="outline" @click="open = false" />
|
||||
<template #footer="{ close }">
|
||||
<UButton label="Cancel" color="neutral" variant="outline" @click="close" />
|
||||
<UButton label="Submit" color="neutral" />
|
||||
</template>
|
||||
</USlideover>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import type { TimelineItem } from '@nuxt/ui'
|
||||
|
||||
const items: TimelineItem[] = [{
|
||||
date: 'Mar 15, 2025',
|
||||
title: 'Project Kickoff',
|
||||
icon: 'i-lucide-rocket',
|
||||
value: 'kickoff'
|
||||
}, {
|
||||
date: 'Mar 22, 2025',
|
||||
title: 'Design Phase',
|
||||
icon: 'i-lucide-palette',
|
||||
value: 'design'
|
||||
}, {
|
||||
date: 'Mar 29, 2025',
|
||||
title: 'Development Sprint',
|
||||
icon: 'i-lucide-code',
|
||||
value: 'development'
|
||||
}, {
|
||||
date: 'Apr 5, 2025',
|
||||
title: 'Testing & Deployment',
|
||||
icon: 'i-lucide-check-circle',
|
||||
value: 'deployment'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTimeline
|
||||
:items="items"
|
||||
:ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
|
||||
:default-value="2"
|
||||
class="translate-x-[calc(50%-1rem)]"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import type { TimelineItem } from '@nuxt/ui'
|
||||
|
||||
const items = [{
|
||||
date: 'Mar 15, 2025',
|
||||
title: 'Project Kickoff',
|
||||
subtitle: 'Project Initiation',
|
||||
description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
|
||||
icon: 'i-lucide-rocket',
|
||||
value: 'kickoff'
|
||||
}, {
|
||||
date: 'Mar 22, 2025',
|
||||
title: 'Design Phase',
|
||||
description: 'User research and design workshops. Created wireframes and prototypes for user testing.',
|
||||
icon: 'i-lucide-palette',
|
||||
value: 'design'
|
||||
}, {
|
||||
date: 'Mar 29, 2025',
|
||||
title: 'Development Sprint',
|
||||
description: 'Frontend and backend development. Implemented core features and integrated with APIs.',
|
||||
icon: 'i-lucide-code',
|
||||
value: 'development',
|
||||
slot: 'development' as const,
|
||||
developers: [
|
||||
{
|
||||
src: 'https://github.com/J-Michalek.png'
|
||||
}, {
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
date: 'Apr 5, 2025',
|
||||
title: 'Testing & Deployment',
|
||||
description: 'QA testing and performance optimization. Deployed the application to production.',
|
||||
icon: 'i-lucide-check-circle',
|
||||
value: 'deployment'
|
||||
}] satisfies TimelineItem[]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTimeline :items="items" :default-value="2" class="w-96">
|
||||
<template #development-title="{ item }">
|
||||
<div class="flex items-center gap-1">
|
||||
<span>{{ item.title }}</span>
|
||||
|
||||
<UAvatarGroup size="2xs">
|
||||
<UAvatar v-for="(developer, index) of item.developers" :key="index" v-bind="developer" />
|
||||
</UAvatarGroup>
|
||||
</div>
|
||||
</template>
|
||||
</UTimeline>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import type { TimelineItem } from '@nuxt/ui'
|
||||
|
||||
const items: TimelineItem[] = [{
|
||||
date: 'Mar 15, 2025',
|
||||
title: 'Project Kickoff',
|
||||
description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
|
||||
icon: 'i-lucide-rocket',
|
||||
value: 'kickoff'
|
||||
}, {
|
||||
date: 'Mar 22, 2025',
|
||||
title: 'Design Phase',
|
||||
description: 'User research and design workshops. Created wireframes and prototypes for user testing.',
|
||||
icon: 'i-lucide-palette',
|
||||
value: 'design'
|
||||
}, {
|
||||
date: 'Mar 29, 2025',
|
||||
title: 'Development Sprint',
|
||||
description: 'Frontend and backend development. Implemented core features and integrated with APIs.',
|
||||
icon: 'i-lucide-code',
|
||||
value: 'development'
|
||||
}, {
|
||||
date: 'Apr 5, 2025',
|
||||
title: 'Testing & Deployment',
|
||||
description: 'QA testing and performance optimization. Deployed the application to production.',
|
||||
icon: 'i-lucide-check-circle',
|
||||
value: 'deployment'
|
||||
}]
|
||||
|
||||
const active = ref(0)
|
||||
|
||||
// Note: This is for demonstration purposes only. Don't do this at home.
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
active.value = (active.value + 1) % items.length
|
||||
}, 2000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTimeline v-model="active" :items="items" class="w-96" />
|
||||
</template>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
import type { TimelineItem } from '@nuxt/ui'
|
||||
import { useTimeAgo } from '@vueuse/core'
|
||||
|
||||
const items = [{
|
||||
username: 'J-Michalek',
|
||||
date: '2025-05-24T14:58:55Z',
|
||||
action: 'opened this',
|
||||
avatar: {
|
||||
src: 'https://github.com/J-Michalek.png'
|
||||
}
|
||||
}, {
|
||||
username: 'J-Michalek',
|
||||
date: '2025-05-26T19:30:14+02:00',
|
||||
action: 'marked this pull request as ready for review',
|
||||
icon: 'i-lucide-check-circle'
|
||||
}, {
|
||||
username: 'benjamincanac',
|
||||
date: '2025-05-27T11:01:20Z',
|
||||
action: 'commented on this',
|
||||
description: 'I\'ve made a few changes, let me know what you think! Basically I updated the design, removed unnecessary divs, used Avatar component for the indicator since it supports icon already.',
|
||||
avatar: {
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
}
|
||||
}, {
|
||||
username: 'J-Michalek',
|
||||
date: '2025-05-27T11:01:20Z',
|
||||
action: 'commented on this',
|
||||
description: 'Looks great! Good job on cleaning it up.',
|
||||
avatar: {
|
||||
src: 'https://github.com/J-Michalek.png'
|
||||
}
|
||||
}, {
|
||||
username: 'benjamincanac',
|
||||
date: '2025-05-27T11:01:20Z',
|
||||
action: 'merged this',
|
||||
icon: 'i-lucide-git-merge'
|
||||
}] satisfies TimelineItem[]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTimeline
|
||||
:items="items"
|
||||
size="xs"
|
||||
class="w-96"
|
||||
:ui="{
|
||||
date: 'float-end ms-1',
|
||||
description: 'px-3 py-2 ring ring-default mt-2 rounded-md text-default'
|
||||
}"
|
||||
>
|
||||
<template #title="{ item }">
|
||||
<span>{{ item.username }}</span>
|
||||
<span class="font-normal text-muted"> {{ item.action }}</span>
|
||||
</template>
|
||||
|
||||
<template #date="{ item }">
|
||||
{{ useTimeAgo(new Date(item.date)) }}
|
||||
</template>
|
||||
</UTimeline>
|
||||
</template>
|
||||
@@ -84,7 +84,7 @@ You can play with Nuxt UI components as well as your app components directly fro
|
||||
Install the module to your Nuxt application with one command:
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi module add compodium
|
||||
npx nuxt module add compodium
|
||||
```
|
||||
::
|
||||
|
||||
|
||||
@@ -115,7 +115,7 @@ Start your project using the [nuxt/starter#ui](https://github.com/nuxt/starter/t
|
||||
Create a new project locally by running the following command:
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t ui <my-app>
|
||||
npm create nuxt@latest -- -t ui
|
||||
```
|
||||
|
||||
::note
|
||||
|
||||
@@ -78,6 +78,22 @@ components.d.ts
|
||||
|
||||
::
|
||||
|
||||
::tip
|
||||
Internally, Nuxt UI relies on custom alias to resolve the theme types. If you're using TypeScript, you should add an alias to your `tsconfig` to enable auto-completion in your `vite.config.ts`.
|
||||
|
||||
```json [tsconfig.node.json]
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"#build/ui": [
|
||||
"./node_modules/@nuxt/ui/.nuxt/ui"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
::
|
||||
|
||||
#### Use the Nuxt UI Vue plugin in your `main.ts`
|
||||
|
||||
```ts [main.ts]{3,14}
|
||||
@@ -179,7 +195,7 @@ Start your project using the [nuxtlabs/nuxt-ui-vue-starter](https://github.com/n
|
||||
Create a new project locally by running the following command:
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t github:nuxtlabs/nuxt-ui-vue-starter <my-app>
|
||||
npm create nuxt@latest -- -t github:nuxtlabs/nuxt-ui-vue-starter
|
||||
```
|
||||
|
||||
::note
|
||||
|
||||
@@ -60,7 +60,7 @@ import { fr } from '@nuxt/ui-pro/locale'
|
||||
|
||||
### Custom locale
|
||||
|
||||
You also have the option to add your own locale using `defineLocale`:
|
||||
You can create your own locale using the `defineLocale` composable:
|
||||
|
||||
::module-only
|
||||
|
||||
@@ -125,6 +125,65 @@ Look at the `code` parameter, there you need to pass the iso code of the languag
|
||||
|
||||
::
|
||||
|
||||
### Extend locale :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:
|
||||
|
||||
::module-only
|
||||
|
||||
#ui
|
||||
:::div
|
||||
|
||||
```vue [app.vue]
|
||||
<script setup lang="ts">
|
||||
import { en } from '@nuxt/ui/locale'
|
||||
|
||||
const locale = extendLocale(en, {
|
||||
code: 'en-GB',
|
||||
messages: {
|
||||
commandPalette: {
|
||||
placeholder: 'Search a component...'
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UApp :locale="locale">
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#ui-pro
|
||||
:::div
|
||||
|
||||
```vue [app.vue]
|
||||
<script setup lang="ts">
|
||||
import { en } from '@nuxt/ui-pro/locale'
|
||||
|
||||
const locale = extendLocale(en, {
|
||||
code: 'en-GB',
|
||||
messages: {
|
||||
commandPalette: {
|
||||
placeholder: 'Search a component...'
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UApp :locale="locale">
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
### Dynamic locale
|
||||
|
||||
To dynamically switch between languages, you can use the [Nuxt I18n](https://i18n.nuxtjs.org/) module.
|
||||
|
||||
@@ -60,7 +60,7 @@ import { fr } from '@nuxt/ui-pro/locale'
|
||||
|
||||
### Custom locale
|
||||
|
||||
You also have the option to add your locale using `defineLocale`:
|
||||
You can create your own locale using the `defineLocale` composable:
|
||||
|
||||
::module-only
|
||||
|
||||
@@ -127,6 +127,67 @@ Look at the `code` parameter, there you need to pass the iso code of the languag
|
||||
|
||||
::
|
||||
|
||||
### Extend locale :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:
|
||||
|
||||
::module-only
|
||||
|
||||
#ui
|
||||
:::div
|
||||
|
||||
```vue [App.vue]
|
||||
<script setup lang="ts">
|
||||
import { en } from '@nuxt/ui/locale'
|
||||
import { extendLocale } from '@nuxt/ui/composables/defineLocale.js'
|
||||
|
||||
const locale = extendLocale(en, {
|
||||
code: 'en-GB',
|
||||
messages: {
|
||||
commandPalette: {
|
||||
placeholder: 'Search a component...'
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UApp :locale="locale">
|
||||
<RouterView />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#ui-pro
|
||||
:::div
|
||||
|
||||
```vue [App.vue]
|
||||
<script setup lang="ts">
|
||||
import { en } from '@nuxt/ui-pro/locale'
|
||||
import { extendLocale } from '@nuxt/ui/composables/defineLocale.js'
|
||||
|
||||
const locale = extendLocale(en, {
|
||||
code: 'en-GB',
|
||||
messages: {
|
||||
commandPalette: {
|
||||
placeholder: 'Search a component...'
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UApp :locale="locale">
|
||||
<RouterView />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
### Dynamic locale
|
||||
|
||||
To dynamically switch between languages, you can use the [Vue I18n](https://vue-i18n.intlify.dev/) plugin.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: useOverlay
|
||||
description: "A composable to programmatically control overlays."
|
||||
description: 'A composable to programmatically control overlays.'
|
||||
---
|
||||
|
||||
## Usage
|
||||
@@ -9,9 +9,11 @@ Use the auto-imported `useOverlay` composable to programmatically control [Modal
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { LazyModalExample } from '#components'
|
||||
|
||||
const overlay = useOverlay()
|
||||
|
||||
const modal = overlay.create(MyModal)
|
||||
const modal = overlay.create(LazyModalExample)
|
||||
|
||||
async function openModal() {
|
||||
modal.open()
|
||||
@@ -29,71 +31,73 @@ In order to return a value from the overlay, the `overlay.open().instance.result
|
||||
|
||||
### `create(component: T, options: OverlayOptions): OverlayInstance`
|
||||
|
||||
Creates an overlay, and returns a factory instance
|
||||
Create an overlay, and return a factory instance.
|
||||
|
||||
- Parameters:
|
||||
- `component`: The overlay component
|
||||
- `options` The overlay options
|
||||
- `defaultOpen?: boolean` Opens the overlay immediately after being created `default: false`
|
||||
- `component`: The overlay component.
|
||||
- `options`:
|
||||
- `defaultOpen?: boolean` Open the overlay immediately after being created. Defaults to `false`.
|
||||
- `props?: ComponentProps`: An optional object of props to pass to the rendered component.
|
||||
- `destroyOnClose?: boolean` Removes the overlay from memory when closed `default: false`
|
||||
- `destroyOnClose?: boolean` Removes the overlay from memory when closed. Defaults to `false`.
|
||||
|
||||
### `open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T>`
|
||||
|
||||
Opens the overlay using its `id`
|
||||
Open an overlay by its `id`.
|
||||
|
||||
- Parameters:
|
||||
- `id`: The identifier of the overlay
|
||||
- `id`: The identifier of the overlay.
|
||||
- `props`: An optional object of props to pass to the rendered component.
|
||||
|
||||
### `close(id: symbol, value?: any): void`
|
||||
|
||||
Close an overlay using its `id`
|
||||
Close an overlay by its `id`.
|
||||
|
||||
- Parameters:
|
||||
- `id`: The identifier of the overlay
|
||||
- `value`: A value to resolve the overlay promise with
|
||||
- `id`: The identifier of the overlay.
|
||||
- `value`: A value to resolve the overlay promise with.
|
||||
|
||||
### `patch(id: symbol, props: ComponentProps<T>): void`
|
||||
|
||||
Update an overlay using its `id`
|
||||
Update an overlay by its `id`.
|
||||
|
||||
- Parameters:
|
||||
- `id`: The identifier of the overlay
|
||||
- `id`: The identifier of the overlay.
|
||||
- `props`: An object of props to update on the rendered component.
|
||||
|
||||
### `unMount(id: symbol): void`
|
||||
### `unmount(id: symbol): void`
|
||||
|
||||
Removes the overlay from the DOM using its `id`
|
||||
Remove an overlay from the DOM by its `id`.
|
||||
|
||||
- Parameters:
|
||||
- `id`: The identifier of the overlay
|
||||
- `id`: The identifier of the overlay.
|
||||
|
||||
### `isOpen(id: symbol): boolean`
|
||||
|
||||
Checks if an overlay its open using its `id`
|
||||
Check if an overlay is open using its `id`.
|
||||
|
||||
- Parameters:
|
||||
- `id`: The identifier of the overlay
|
||||
- `id`: The identifier of the overlay.
|
||||
|
||||
### `overlays: Overlay[]`
|
||||
|
||||
In-memory list of overlays that were created
|
||||
In-memory list of all overlays that were created.
|
||||
|
||||
## Overlay Instance API
|
||||
## Instance API
|
||||
|
||||
### `open(props?: ComponentProps<T>): Promise<OpenedOverlay<T>>`
|
||||
|
||||
Opens the overlay
|
||||
Open the overlay.
|
||||
|
||||
- Parameters:
|
||||
- `props`: An optional object of props to pass to the rendered component.
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { LazyModalExample } from '#components'
|
||||
|
||||
const overlay = useOverlay()
|
||||
|
||||
const modal = overlay.create(MyModalContent)
|
||||
const modal = overlay.create(LazyModalExample)
|
||||
|
||||
function openModal() {
|
||||
modal.open({
|
||||
@@ -105,23 +109,25 @@ function openModal() {
|
||||
|
||||
### `close(value?: any): void`
|
||||
|
||||
Close the overlay
|
||||
Close the overlay.
|
||||
|
||||
- Parameters:
|
||||
- `value`: A value to resolve the overlay promise with
|
||||
- `value`: A value to resolve the overlay promise with.
|
||||
|
||||
### `patch(props: ComponentProps<T>)`
|
||||
|
||||
Updates the props of the overlay.
|
||||
Update the props of the overlay.
|
||||
|
||||
- Parameters:
|
||||
- `props`: An object of props to update on the rendered component.
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { LazyModalExample } from '#components'
|
||||
|
||||
const overlay = useOverlay()
|
||||
|
||||
const modal = overlay.create(MyModal, {
|
||||
const modal = overlay.create(LazyModalExample, {
|
||||
title: 'Welcome'
|
||||
})
|
||||
|
||||
@@ -141,6 +147,8 @@ Here's a complete example of how to use the `useOverlay` composable:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ModalA, ModalB, SlideoverA } from '#components'
|
||||
|
||||
const overlay = useOverlay()
|
||||
|
||||
// Create with default props
|
||||
@@ -150,7 +158,7 @@ const modalB = overlay.create(ModalB)
|
||||
const slideoverA = overlay.create(SlideoverA)
|
||||
|
||||
const openModalA = () => {
|
||||
// Open Modal A, but override the title prop
|
||||
// Open modalA, but override the title prop
|
||||
modalA.open({ title: 'Hello' })
|
||||
}
|
||||
|
||||
@@ -160,16 +168,37 @@ const openModalB = async () => {
|
||||
|
||||
const input = await modalBInstance.result
|
||||
|
||||
// Pass the result from modalB to the slideover, and open it.
|
||||
// Pass the result from modalB to the slideover, and open it
|
||||
slideoverA.open({ input })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<button @click="openModal">Open Modal</button>
|
||||
</div>
|
||||
<button @click="openModalA">Open Modal</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
In this example, we're using the `useOverlay` composable to control multiple modals and slideovers.
|
||||
|
||||
## Caveats
|
||||
|
||||
### Provide / Inject
|
||||
|
||||
When opening overlays programmatically (e.g. modals, slideovers, etc), the overlay component can only access injected values from the component containing `UApp` (typically `app.vue` or layout components). This is because overlays are mounted outside of the page context by the `UApp` component.
|
||||
|
||||
As such, using `provide()` in pages or parent components isn't supported directly. To pass provided values to overlays, the recommended approach is to use props instead:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { LazyModalExample } from '#components'
|
||||
|
||||
const providedValue = inject('valueProvidedInPage')
|
||||
|
||||
const modal = overlay.create(LazyModalExample, {
|
||||
props: {
|
||||
providedValue,
|
||||
otherData: someValue
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
@@ -52,9 +52,11 @@ Each group contains an `items` array of objects that define the commands. Each i
|
||||
- `loading?: boolean`{lang="ts-type"}
|
||||
- `disabled?: boolean`{lang="ts-type"}
|
||||
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
|
||||
- `placeholder?: string`{lang="ts-type"} :badge{label="Soon"}
|
||||
- `children?: CommandPaletteItem[]`{lang="ts-type"} :badge{label="Soon"}
|
||||
- `onSelect?(e?: Event): void`{lang="ts-type"}
|
||||
- `class?: any`{lang="ts-type"}
|
||||
- `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue,}`{lang="ts-type"}
|
||||
- `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
|
||||
|
||||
You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
|
||||
|
||||
@@ -110,6 +112,10 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
::tip{to="#with-children-in-items"}
|
||||
Each item can take a `children` array of objects with the following properties to create submenus:
|
||||
::
|
||||
|
||||
### Multiple
|
||||
|
||||
Use the `multiple` prop to allow multiple selections.
|
||||
@@ -246,6 +252,128 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.se
|
||||
:::
|
||||
::
|
||||
|
||||
### Selected Icon
|
||||
|
||||
Use the `selected-icon` prop to customize the selected item [Icon](/components/icon). Defaults to `i-lucide-check`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- groups
|
||||
- modelValue
|
||||
- multiple
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
- modelValue
|
||||
class: '!p-0'
|
||||
props:
|
||||
multiple: true
|
||||
autofocus: false
|
||||
modelValue:
|
||||
- label: 'Benjamin Canac'
|
||||
suffix: 'benjamincanac'
|
||||
avatar:
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
selectedIcon: 'i-lucide-circle-check'
|
||||
groups:
|
||||
- id: 'users'
|
||||
label: 'Users'
|
||||
items:
|
||||
- label: 'Benjamin Canac'
|
||||
suffix: 'benjamincanac'
|
||||
avatar:
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
- label: 'Sylvain Marroufin'
|
||||
suffix: 'smarroufin'
|
||||
avatar:
|
||||
src: 'https://github.com/smarroufin.png'
|
||||
- label: 'Sébastien Chopin'
|
||||
suffix: 'atinux'
|
||||
avatar:
|
||||
src: 'https://github.com/atinux.png'
|
||||
- label: 'Romain Hamel'
|
||||
suffix: 'romhml'
|
||||
avatar:
|
||||
src: 'https://github.com/romhml.png'
|
||||
- label: 'Haytham A. Salama'
|
||||
suffix: 'Haythamasalama'
|
||||
avatar:
|
||||
src: 'https://github.com/Haythamasalama.png'
|
||||
- label: 'Daniel Roe'
|
||||
suffix: 'danielroe'
|
||||
avatar:
|
||||
src: 'https://github.com/danielroe.png'
|
||||
- label: 'Neil Richter'
|
||||
suffix: 'noook'
|
||||
avatar:
|
||||
src: 'https://github.com/noook.png'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Trailing Icon :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) when an item has children. Defaults to `i-lucide-chevron-right`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
prettier: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- groups
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
trailingIcon: 'i-lucide-arrow-right'
|
||||
groups:
|
||||
- id: 'actions'
|
||||
items:
|
||||
- label: 'Share'
|
||||
icon: 'i-lucide-share'
|
||||
children:
|
||||
- label: 'Email'
|
||||
icon: 'i-lucide-mail'
|
||||
- label: 'Copy'
|
||||
icon: 'i-lucide-copy'
|
||||
- label: 'Link'
|
||||
icon: 'i-lucide-link'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronRight` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` prop to show a loading icon on the CommandPalette.
|
||||
@@ -321,37 +449,6 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.lo
|
||||
:::
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the CommandPalette.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- groups
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
disabled: true
|
||||
groups:
|
||||
- id: 'apps'
|
||||
items:
|
||||
- label: 'Calendar'
|
||||
icon: 'i-lucide-calendar'
|
||||
- label: 'Music'
|
||||
icon: 'i-lucide-music'
|
||||
- label: 'Maps'
|
||||
icon: 'i-lucide-map'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
### Close
|
||||
|
||||
Use the `close` prop to display a [Button](/components/button) to dismiss the CommandPalette.
|
||||
@@ -468,6 +565,124 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
|
||||
:::
|
||||
::
|
||||
|
||||
### Back :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.
|
||||
|
||||
You can pass any property from the [Button](/components/button) component to customize it.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
prettier: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- back.color
|
||||
- groups
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
back:
|
||||
color: primary
|
||||
groups:
|
||||
- id: 'actions'
|
||||
items:
|
||||
- label: 'Share'
|
||||
icon: 'i-lucide-share'
|
||||
children:
|
||||
- label: 'Email'
|
||||
icon: 'i-lucide-mail'
|
||||
- label: 'Copy'
|
||||
icon: 'i-lucide-copy'
|
||||
- label: 'Link'
|
||||
icon: 'i-lucide-link'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
### Back Icon :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `back-icon` prop to customize the back button [Icon](/components/icon). Defaults to `i-lucide-arrow-left`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- class
|
||||
- groups
|
||||
- back
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
back: true
|
||||
backIcon: 'i-lucide-house'
|
||||
groups:
|
||||
- id: 'actions'
|
||||
items:
|
||||
- label: 'Share'
|
||||
icon: 'i-lucide-share'
|
||||
children:
|
||||
- label: 'Email'
|
||||
icon: 'i-lucide-mail'
|
||||
- label: 'Copy'
|
||||
icon: 'i-lucide-copy'
|
||||
- label: 'Link'
|
||||
icon: 'i-lucide-link'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.arrowLeft` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.arrowLeft` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the CommandPalette.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
hide:
|
||||
- autofocus
|
||||
ignore:
|
||||
- groups
|
||||
- class
|
||||
external:
|
||||
- groups
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
disabled: true
|
||||
groups:
|
||||
- id: 'apps'
|
||||
items:
|
||||
- label: 'Calendar'
|
||||
icon: 'i-lucide-calendar'
|
||||
- label: 'Music'
|
||||
icon: 'i-lucide-music'
|
||||
- label: 'Maps'
|
||||
icon: 'i-lucide-map'
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
### Control selected item(s)
|
||||
@@ -502,6 +717,28 @@ props:
|
||||
This example uses the `@update:model-value` event to reset the search term when an item is selected.
|
||||
::
|
||||
|
||||
### With children in items :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
You can create hierarchical menus by using the `children` property in items. When an item has children, it will automatically display a chevron icon and enable navigation into a submenu.
|
||||
|
||||
::component-example
|
||||
---
|
||||
collapse: true
|
||||
prettier: true
|
||||
name: 'command-palette-items-children-example'
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
When navigating into a submenu:
|
||||
- The search term is reset
|
||||
- A back button appears in the input
|
||||
- You can go back to the previous group by pressing the :kbd{value="backspace"} key
|
||||
::
|
||||
|
||||
### With fetched items
|
||||
|
||||
You can fetch items from an API and use them in the CommandPalette.
|
||||
@@ -658,6 +895,7 @@ You will have access to the following slots:
|
||||
|
||||
::component-example
|
||||
---
|
||||
collapse: true
|
||||
name: 'command-palette-custom-slot-example'
|
||||
class: '!p-0'
|
||||
props:
|
||||
|
||||
@@ -135,7 +135,7 @@ props:
|
||||
|
||||
### Multiple
|
||||
|
||||
Use the `multiple` prop to allow multiple selections, the selected items will be displayed as badges.
|
||||
Use the `multiple` prop to allow multiple selections, the selected items will be displayed as tags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
@@ -166,7 +166,7 @@ Ensure to pass an array to the `default-value` prop or the `v-model` directive.
|
||||
|
||||
### Delete Icon
|
||||
|
||||
With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-lucide-x`.
|
||||
With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
@@ -782,6 +782,14 @@ name: 'input-menu-countries-example'
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
| ---- | ---- |
|
||||
| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: InputNumber
|
||||
description: Input numerical values with a customizable range.
|
||||
description: An input for numerical values with a customizable range.
|
||||
category: form
|
||||
links:
|
||||
- label: NumberField
|
||||
@@ -287,8 +287,8 @@ name: 'input-number-slots-example'
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
|----------------------------|-------------------------------------------------|
|
||||
| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
|
||||
| -------------------------- | ----------------------------------------------- |
|
||||
| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof NumberFieldInput> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
|
||||
285
docs/content/3.components/input-tags.md
Normal file
285
docs/content/3.components/input-tags.md
Normal file
@@ -0,0 +1,285 @@
|
||||
---
|
||||
title: InputTags
|
||||
description: An input element that displays interactive tags.
|
||||
category: form
|
||||
links:
|
||||
- label: InputTags
|
||||
icon: i-custom-reka-ui
|
||||
to: https://reka-ui.com/docs/components/tags-input
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputTags.vue
|
||||
navigation.badge: Soon
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Use the `v-model` directive to control the value of the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
---
|
||||
::
|
||||
|
||||
Use the `default-value` prop to set the initial value when you do not need to control its state.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- defaultValue
|
||||
props:
|
||||
defaultValue: ['Vue']
|
||||
---
|
||||
::
|
||||
|
||||
### Placeholder
|
||||
|
||||
Use the `placeholder` prop to set a placeholder text.
|
||||
|
||||
::component-code
|
||||
---
|
||||
props:
|
||||
placeholder: 'Enter tags...'
|
||||
---
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
Use the `color` prop to change the ring color when the InputTags is focused.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
color: neutral
|
||||
highlight: true
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
|
||||
::
|
||||
|
||||
### Variants
|
||||
|
||||
Use the `variant` prop to change the appearance of the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
variant: subtle
|
||||
color: neutral
|
||||
highlight: false
|
||||
---
|
||||
::
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` prop to adjust the size of the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
size: xl
|
||||
---
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use the `icon` prop to show an [Icon](/components/icon) inside the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
icon: 'i-lucide-search'
|
||||
size: md
|
||||
variant: outline
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
|
||||
::
|
||||
|
||||
### Avatar
|
||||
|
||||
Use the `avatar` prop to show an [Avatar](/components/avatar) inside the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
avatar:
|
||||
src: 'https://github.com/vuejs.png'
|
||||
size: md
|
||||
variant: outline
|
||||
---
|
||||
::
|
||||
|
||||
### Delete Icon
|
||||
|
||||
Use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
deleteIcon: 'i-lucide-trash'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` prop to show a loading icon on the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
loading: true
|
||||
trailing: false
|
||||
---
|
||||
::
|
||||
|
||||
### Loading Icon
|
||||
|
||||
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
loading: true
|
||||
loadingIcon: 'i-lucide-loader'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
disabled: true
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
### Within a FormField
|
||||
|
||||
You can use the InputTags within a [FormField](/components/form-field) component to display a label, help text, required indicator, etc.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'input-tags-form-field-example'
|
||||
---
|
||||
::
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
:component-props
|
||||
|
||||
### Slots
|
||||
|
||||
:component-slots
|
||||
|
||||
### Emits
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
| -------------------------- | ----------------------------------------------- |
|
||||
| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof TagsInputInput> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
@@ -278,6 +278,16 @@ name: 'input-kbd-example'
|
||||
This example uses the `defineShortcuts` composable to focus the Input when the :kbd{value="/"} key is pressed.
|
||||
::
|
||||
|
||||
### With mask
|
||||
|
||||
There's no built-in support for masks, but you can use libraries like [maska](https://github.com/beholdr/maska) to mask the Input.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'input-mask-example'
|
||||
---
|
||||
::
|
||||
|
||||
### With floating label
|
||||
|
||||
You can use the `#default` slot to add a floating label to the Input.
|
||||
|
||||
@@ -305,13 +305,13 @@ slots:
|
||||
|
||||
### Programmatic usage
|
||||
|
||||
You can use the [`useOverlay`](/composables/use-overlay) composable to open a Modal programatically.
|
||||
You can use the [`useOverlay`](/composables/use-overlay) composable to open a Modal programmatically.
|
||||
|
||||
::warning
|
||||
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`OverlayProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/OverlayProvider.vue) component.
|
||||
::
|
||||
|
||||
First, create a modal component that will be opened programatically:
|
||||
First, create a modal component that will be opened programmatically:
|
||||
|
||||
::component-example
|
||||
---
|
||||
|
||||
@@ -180,6 +180,8 @@ props:
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
|
||||
@@ -815,6 +815,14 @@ name: 'select-menu-countries-example'
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
| ---- | ---- |
|
||||
| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
|
||||
@@ -709,6 +709,14 @@ collapse: true
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
| ---- | ---- |
|
||||
| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof SelectTrigger> \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
|
||||
@@ -304,13 +304,13 @@ slots:
|
||||
|
||||
### Programmatic usage
|
||||
|
||||
You can use the [`useOverlay`](/composables/use-overlay) composable to open a Slideover programatically.
|
||||
You can use the [`useOverlay`](/composables/use-overlay) composable to open a Slideover programmatically.
|
||||
|
||||
::warning
|
||||
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`OverlayProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/OverlayProvider.vue) component.
|
||||
::
|
||||
|
||||
First, create a slideover component that will be opened programatically:
|
||||
First, create a slideover component that will be opened programmatically:
|
||||
|
||||
::component-example
|
||||
---
|
||||
|
||||
@@ -200,6 +200,10 @@ Use the `#content` slot to customize the content of each item.
|
||||
|
||||
Use the `slot` property to customize a specific item.
|
||||
|
||||
You will have access to the following slots:
|
||||
|
||||
- `#{{ item.slot }}`{lang="ts-type"}
|
||||
|
||||
:component-example{name="stepper-custom-slot-example"}
|
||||
|
||||
## API
|
||||
|
||||
@@ -222,6 +222,10 @@ Use the `#content` slot to customize the content of each item.
|
||||
|
||||
Use the `slot` property to customize a specific item.
|
||||
|
||||
You will have access to the following slots:
|
||||
|
||||
- `#{{ item.slot }}`{lang="ts-type"}
|
||||
|
||||
:component-example{name="tabs-custom-slot-example"}
|
||||
|
||||
## API
|
||||
@@ -238,6 +242,14 @@ Use the `slot` property to customize a specific item.
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
| ---- | ---- |
|
||||
| `triggersRef`{lang="ts-type"} | `Ref<ComponentPublicInstance[]>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
|
||||
269
docs/content/3.components/timeline.md
Normal file
269
docs/content/3.components/timeline.md
Normal file
@@ -0,0 +1,269 @@
|
||||
---
|
||||
title: Timeline
|
||||
description: 'A component that displays a sequence of events with dates, titles, icons or avatars.'
|
||||
category: data
|
||||
links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Timeline.vue
|
||||
navigation.badge: Soon
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
### Items
|
||||
|
||||
Use the `items` prop as an array of objects with the following properties:
|
||||
|
||||
- `date?: string`{lang="ts-type"}
|
||||
- `title?: string`{lang="ts-type"}
|
||||
- `description?: AvatarProps`{lang="ts-type"}
|
||||
- `icon?: string`{lang="ts-type"}
|
||||
- `avatar?: AvatarProps`{lang="ts-type"}
|
||||
- `value?: string | number`{lang="ts-type"}
|
||||
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
|
||||
- `class?: any`{lang="ts-type"}
|
||||
- `ui?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
defaultValue: 2
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization. Deployed the application to production.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-96'
|
||||
---
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
Use the `color` prop to change the color of the active items in a Timeline.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
color: neutral
|
||||
defaultValue: 2
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization. Deployed the application to production.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-96'
|
||||
---
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the Timeline.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
size: xs
|
||||
defaultValue: 2
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization. Deployed the application to production.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-96'
|
||||
---
|
||||
::
|
||||
|
||||
### Orientation
|
||||
|
||||
Use the `orientation` prop to change the orientation of the Timeline. Defaults to `vertical`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
orientation: 'horizontal'
|
||||
defaultValue: 2
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-full'
|
||||
class: 'overflow-x-auto'
|
||||
---
|
||||
::
|
||||
|
||||
### Reverse
|
||||
|
||||
Use the reverse prop to reverse the direction of the Timeline.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- items
|
||||
- class
|
||||
- defaultValue
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- TimelineItem[]
|
||||
props:
|
||||
reverse: true
|
||||
modelValue: 2
|
||||
orientation: 'vertical'
|
||||
items:
|
||||
- date: 'Mar 15, 2025'
|
||||
title: 'Project Kickoff'
|
||||
description: 'Kicked off the project with team alignment.'
|
||||
icon: 'i-lucide-rocket'
|
||||
- date: 'Mar 22 2025'
|
||||
title: 'Design Phase'
|
||||
description: 'User research and design workshops.'
|
||||
icon: 'i-lucide-palette'
|
||||
- date: 'Mar 29 2025'
|
||||
title: 'Development Sprint'
|
||||
description: 'Frontend and backend development.'
|
||||
icon: 'i-lucide-code'
|
||||
- date: 'Apr 5 2025'
|
||||
title: 'Testing & Deployment'
|
||||
description: 'QA testing and performance optimization.'
|
||||
icon: 'i-lucide-check-circle'
|
||||
class: 'w-full'
|
||||
class: 'overflow-x-auto'
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
### Control active item
|
||||
|
||||
You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
|
||||
|
||||
:component-example{name="timeline-model-value-example" prettier}
|
||||
|
||||
::tip
|
||||
You can also pass the `value` of one of the items if provided.
|
||||
::
|
||||
|
||||
### With alternating layout
|
||||
|
||||
Use the `ui` prop to create a Timeline with alternating layout.
|
||||
|
||||
:component-example{name="timeline-alternating-layout-example" prettier}
|
||||
|
||||
### With custom slot
|
||||
|
||||
Use the `slot` property to customize a specific item.
|
||||
|
||||
You will have access to the following slots:
|
||||
|
||||
- `#{{ item.slot }}-indicator`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-date`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-title`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-description`{lang="ts-type"}
|
||||
|
||||
:component-example{name="timeline-custom-slot-example" prettier}
|
||||
|
||||
### With slots
|
||||
|
||||
Use the available slots to create a more complex Timeline.
|
||||
|
||||
:component-example{name="timeline-slots-example" prettier}
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
:component-props
|
||||
|
||||
### Slots
|
||||
|
||||
:component-slots
|
||||
|
||||
### Emits
|
||||
|
||||
:component-emits
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
@@ -407,7 +407,14 @@ This lets you select a parent item without expanding or collapsing its children.
|
||||
|
||||
### With custom slot
|
||||
|
||||
Use the `item.slot` property to customize a specific item.
|
||||
Use the `slot` property to customize a specific item.
|
||||
|
||||
You will have access to the following slots:
|
||||
|
||||
- `#{{ item.slot }}`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-leading`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-label`{lang="ts-type"}
|
||||
- `#{{ item.slot }}-trailing`{lang="ts-type"}
|
||||
|
||||
::component-example
|
||||
---
|
||||
|
||||
@@ -33,7 +33,7 @@ export default defineNuxtModule((_, nuxt) => {
|
||||
}
|
||||
|
||||
const name = template.name.toLowerCase().replace(/\s/g, '-')
|
||||
const filename = join(process.cwd(), 'docs/public/assets/showcase', `${name}.png`)
|
||||
const filename = join(nuxt.options.rootDir, 'public/assets/showcase', `${name}.png`)
|
||||
|
||||
if (existsSync(filename)) {
|
||||
continue
|
||||
|
||||
@@ -2,41 +2,49 @@
|
||||
"private": true,
|
||||
"name": "@nuxt/ui-docs",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "nuxt dev",
|
||||
"build": "nuxt build",
|
||||
"generate": "nuxt generate",
|
||||
"typecheck": "nuxt typecheck"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ai-sdk/vue": "^1.2.12",
|
||||
"@iconify-json/logos": "^1.2.4",
|
||||
"@iconify-json/lucide": "^1.2.44",
|
||||
"@iconify-json/simple-icons": "^1.2.35",
|
||||
"@iconify-json/vscode-icons": "^1.2.21",
|
||||
"@nuxt/content": "^3.5.1",
|
||||
"@iconify-json/lucide": "^1.2.49",
|
||||
"@iconify-json/simple-icons": "^1.2.38",
|
||||
"@iconify-json/vscode-icons": "^1.2.23",
|
||||
"@nuxt/content": "^3.6.0",
|
||||
"@nuxt/image": "^1.10.0",
|
||||
"@nuxt/ui": "latest",
|
||||
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@f06b49c",
|
||||
"@nuxthub/core": "^0.8.27",
|
||||
"@nuxt/ui": "workspace:*",
|
||||
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@beebbd4",
|
||||
"@nuxthub/core": "^0.9.0",
|
||||
"@nuxtjs/plausible": "^1.2.0",
|
||||
"@octokit/rest": "^21.1.1",
|
||||
"@octokit/rest": "^22.0.0",
|
||||
"@rollup/plugin-yaml": "^4.1.2",
|
||||
"@vueuse/integrations": "^13.2.0",
|
||||
"@vueuse/nuxt": "^13.2.0",
|
||||
"@vueuse/integrations": "^13.3.0",
|
||||
"@vueuse/nuxt": "^13.3.0",
|
||||
"ai": "^4.3.16",
|
||||
"better-sqlite3": "^11.10.0",
|
||||
"capture-website": "^4.2.0",
|
||||
"joi": "^17.13.3",
|
||||
"motion-v": "^1.1.1",
|
||||
"nuxt": "^3.17.4",
|
||||
"maska": "^3.1.1",
|
||||
"motion-v": "^1.2.1",
|
||||
"nuxt": "^3.17.5",
|
||||
"nuxt-component-meta": "^0.11.0",
|
||||
"nuxt-llms": "^0.1.2",
|
||||
"nuxt-og-image": "^5.1.4",
|
||||
"nuxt-llms": "^0.1.3",
|
||||
"nuxt-og-image": "^5.1.6",
|
||||
"prettier": "^3.5.3",
|
||||
"shiki-transformer-color-highlight": "^1.0.0",
|
||||
"sortablejs": "^1.15.6",
|
||||
"superstruct": "^2.0.2",
|
||||
"ufo": "^1.6.1",
|
||||
"valibot": "^1.1.0",
|
||||
"workers-ai-provider": "^0.5.2",
|
||||
"workers-ai-provider": "^0.6.1",
|
||||
"yup": "^1.6.1",
|
||||
"zod": "^3.25.28"
|
||||
"zod": "^3.25.64"
|
||||
},
|
||||
"devDependencies": {
|
||||
"wrangler": "^4.16.1"
|
||||
"wrangler": "^4.20.0"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
docs/public/components/dark/input-tags.png
Normal file
BIN
docs/public/components/dark/input-tags.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
docs/public/components/dark/timeline.png
Normal file
BIN
docs/public/components/dark/timeline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/public/components/light/input-tags.png
Normal file
BIN
docs/public/components/light/input-tags.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
docs/public/components/light/timeline.png
Normal file
BIN
docs/public/components/light/timeline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Reference in New Issue
Block a user