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

feat(module)!: remove devtools in favor of compodium (#3380)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2025-02-28 15:33:13 +01:00
committed by GitHub
parent c140f5edeb
commit 7a8c00c374
103 changed files with 52 additions and 2090 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/defaults.ts
View File

@@ -22,9 +22,6 @@ export const defaultOptions = {
theme: {
colors: undefined,
transitions: true
},
devtools: {
enabled: true
}
}

148
src/devtools/meta.ts
View File

@@ -1,148 +0,0 @@
import type { ViteDevServer } from 'vite'
import { kebabCase, camelCase } from 'scule'
import defu from 'defu'
import fs from 'node:fs'
import type { Resolver } from '@nuxt/kit'
import type { ComponentMeta } from 'vue-component-meta'
import type { DevtoolsMeta } from '../runtime/composables/extendDevtoolsMeta'
import type { ModuleOptions } from '../module'
export type Component = {
slug: string
label: string
meta?: ComponentMeta & { devtools: DevtoolsMeta<any> }
defaultVariants: Record<string, any>
}
const devtoolsComponentMeta: Record<string, any> = {}
function extractDevtoolsMeta(code: string): string | null {
const match = code.match(/extendDevtoolsMeta(?:<.*?>)?\(/)
if (!match) return null
const startIndex = code.indexOf(match[0]) + match[0].length
let openBraceCount = 0
let closeBraceCount = 0
let endIndex = startIndex
for (let i = startIndex; i < code.length; i++) {
if (code[i] === '{') openBraceCount++
if (code[i] === '}') closeBraceCount++
if (openBraceCount > 0 && openBraceCount === closeBraceCount) {
endIndex = i + 1
break
}
}
// Return only the object inside extendDevtoolsMeta
return code.slice(startIndex, endIndex).trim()
}
// A Plugin to parse additional metadata for the Nuxt UI Devtools.
export function devtoolsMetaPlugin({ resolve, options, templates }: { resolve: Resolver['resolve'], options: ModuleOptions, templates: Record<string, any> }) {
return {
name: 'ui-devtools-component-meta',
enforce: 'pre' as const,
async transform(code: string, id: string) {
if (!id.match(/\/runtime\/components\/\w+.vue/)) return
const fileName = id.split('/')[id.split('/').length - 1]
if (code && fileName) {
const slug = kebabCase(fileName.replace(/\..*/, ''))
const match = extractDevtoolsMeta(code)
if (match) {
const metaObject = new Function(`return ${match}`)()
devtoolsComponentMeta[slug] = { meta: { devtools: { ...metaObject } } }
}
}
return {
code
}
},
configureServer(server: ViteDevServer) {
server.middlewares.use('/__nuxt_ui__/devtools/api/component-meta', async (_req, res) => {
res.setHeader('Content-Type', 'application/json')
try {
const componentMeta = await import('./.component-meta/component-meta')
const meta = defu(
Object.entries(componentMeta.default).reduce((acc, [key, value]: [string, any]) => {
if (!key.startsWith('U')) return acc
const name = key.substring(1)
const slug = kebabCase(name)
const template = templates?.[camelCase(name)]
if (devtoolsComponentMeta[slug] === undefined) {
const path = resolve(`./runtime/components/${name}.vue`)
const code = fs.readFileSync(path, 'utf-8')
const match = extractDevtoolsMeta(code)
if (match) {
const metaObject = new Function(`return ${match}`)()
devtoolsComponentMeta[slug] = { meta: { devtools: { ...metaObject } } }
} else {
devtoolsComponentMeta[slug] = null
}
}
value.meta.props = value.meta.props.map((prop: any) => {
let defaultValue = prop.default
? prop.default
: prop?.tags?.find((tag: any) =>
tag.name === 'defaultValue'
&& !tag.text?.includes('appConfig'))?.text
?? template?.defaultVariants?.[prop.name]
if (typeof defaultValue === 'string') defaultValue = defaultValue?.replace(/\s+as\s+\w+$/g, '').replaceAll(/["'`]/g, '')
if (defaultValue === 'true') defaultValue = true
if (defaultValue === 'false') defaultValue = false
if (!Number.isNaN(Number.parseInt(defaultValue))) defaultValue = Number.parseInt(defaultValue)
return {
...prop,
default: defaultValue
}
})
const label = key.replace(/^U/, options.prefix ?? 'U')
acc[kebabCase(key.replace(/^U/, ''))] = { ...value, label, slug }
return acc
}, {} as Record<string, any>),
devtoolsComponentMeta
)
res.end(JSON.stringify(meta))
} catch (error) {
console.error(`Failed to fetch component meta`, error)
res.statusCode = 500
res.end(JSON.stringify({ error: 'Failed to fetch component meta' }))
}
})
server.middlewares.use('/__nuxt_ui__/devtools/api/component-example', async (req, res) => {
const query = new URL(req.url!, 'http://localhost').searchParams
const name = query.get('component')
if (!name) {
res.statusCode = 400
res.end(JSON.stringify({ error: 'Component name is required' }))
return
}
try {
const path = resolve(`./devtools/runtime/examples/${name}.vue`)
const source = fs.readFileSync(path, 'utf-8')
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify({ component: name, source }))
} catch (error) {
console.error(`Failed to read component source for ${name}:`, error)
res.statusCode = 500
res.end(JSON.stringify({ error: 'Failed to read component source' }))
}
})
}
}
}

72
src/devtools/runtime/DevtoolsRenderer.vue
View File

@@ -1,72 +0,0 @@
<script setup lang="ts">
import { onUnmounted, onMounted, reactive } from 'vue'
import { pascalCase } from 'scule'
import { defineAsyncComponent, useRoute } from '#imports'
import { useColorMode } from '@vueuse/core'
const route = useRoute()
const component = route.query?.example
? defineAsyncComponent(() => import(`./examples/${route.query.example}.vue`))
: route.params?.slug && defineAsyncComponent(() => import(`../../runtime/components/${pascalCase(route.params.slug as string)}.vue`))
const state = reactive<{ slots?: any, props?: any }>({})
function onUpdateRenderer(event: Event & { data?: any }) {
state.props = { ...event.data.props }
state.slots = { ...event.data.slots }
}
const mode = useColorMode()
function setColorMode(event: Event & { isDark?: boolean }) {
mode.value = event.isDark ? 'dark' : 'light'
}
onMounted(() => {
window.parent.addEventListener('nuxt-ui-devtools:update-renderer', onUpdateRenderer)
window.parent.addEventListener('nuxt-ui-devtools:set-color-mode', setColorMode)
})
onUnmounted(() => {
window.parent.removeEventListener('nuxt-ui-devtools:update-renderer', onUpdateRenderer)
window.parent.removeEventListener('nuxt-ui-devtools:set-color-mode', setColorMode)
})
onMounted(async () => {
const event: Event = new Event('nuxt-ui-devtools:component-loaded')
window.parent.dispatchEvent(event)
})
onMounted(() => {
if (!route.query?.example) return
})
</script>
<template>
<div id="ui-devtools-renderer" class="nuxt-ui-component-renderer">
<UApp :toaster="null">
<component :is="component" v-if="component" v-bind="state.props" :class="state?.slots?.base" :ui="state.slots" />
</UApp>
</div>
</template>
<style>
.nuxt-ui-component-renderer {
position: 'relative';
height: 100vh;
width: 100vw;
padding: 32px;
display: flex;
justify-content: center;
align-items: center;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Cpath fill='none' stroke='hsla(0, 0%25, 98%25, 1)' stroke-width='.2' d='M10 0v20ZM0 10h20Z'/%3E%3C/svg%3E");
background-size: 40px 40px;
}
.dark .nuxt-ui-component-renderer {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect width='100%25' height='100%25' fill='hsl(0, 0%25, 8.5%25)'/%3E%3Cpath fill='none' stroke='hsl(0, 0%25, 11.0%25)' stroke-width='.2' d='M10 0v20ZM0 10h20Z'/%3E%3C/svg%3E");
background-size: 40px 40px;
}
</style>

7
src/devtools/runtime/examples/AvatarGroupExample.vue
View File

@@ -1,7 +0,0 @@
<template>
<UAvatarGroup>
<UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
<UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
<UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
</UAvatarGroup>
</template>

8
src/devtools/runtime/examples/ButtonGroupExample.vue
View File

@@ -1,8 +0,0 @@
<template>
<UButtonGroup>
<UInput placeholder="Search..." />
<UButton color="neutral" variant="outline">
Button
</UButton>
</UButtonGroup>
</template>

13
src/devtools/runtime/examples/CardExample.vue
View File

@@ -1,13 +0,0 @@
<template>
<div class="flex flex-col gap-4">
<UCard class="w-96">
<template #header>
<div class="bg-(--ui-bg-accented)/40 h-8" />
</template>
<div class="bg-(--ui-bg-accented)/40 h-32" />
<template #footer>
<div class="bg-(--ui-bg-accented)/40 h-8" />
</template>
</UCard>
</div>
</template>

13
src/devtools/runtime/examples/CarouselExample.vue
View File

@@ -1,13 +0,0 @@
<template>
<UCarousel
v-slot="{ item }"
class="basis-1/3"
:items="[
'https://picsum.photos/320/320?v=1',
'https://picsum.photos/320/320?v=2',
'https://picsum.photos/320/320?v=3'
]"
>
<img :src="item" class="rounded-lg basis-1/3">
</UCarousel>
</template>

5
src/devtools/runtime/examples/ChipExample.vue
View File

@@ -1,5 +0,0 @@
<template>
<UChip>
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
</UChip>
</template>

8
src/devtools/runtime/examples/CollapsibleExample.vue
View File

@@ -1,8 +0,0 @@
<template>
<UCollapsible class="w-48">
<UButton label="Open Collapse" block />
<template #content>
<div class="bg-(--ui-bg-accented)/40 h-60" />
</template>
</UCollapsible>
</template>

29
src/devtools/runtime/examples/CommandPaletteExample.vue
View File

@@ -1,29 +0,0 @@
<script setup lang="ts">
const groups = [{
id: 'actions',
items: [{
label: 'Add new file',
suffix: 'Create a new file in the current directory or workspace.',
icon: 'i-lucide-file-plus'
}, {
label: 'Add new folder',
suffix: 'Create a new folder in the current directory or workspace.',
icon: 'i-lucide-folder-plus',
kbds: ['meta', 'F']
}, {
label: 'Add hashtag',
suffix: 'Add a hashtag to the current item.',
icon: 'i-lucide-hash',
kbds: ['meta', 'H']
}, {
label: 'Add label',
suffix: 'Add a label to the current item.',
icon: 'i-lucide-tag',
kbds: ['meta', 'L']
}]
}]
</script>
<template>
<UCommandPalette :groups="groups" />
</template>

5
src/devtools/runtime/examples/ContainerExample.vue
View File

@@ -1,5 +0,0 @@
<template>
<UContainer>
<div class="bg-(--ui-bg-accented)/40 h-60 aspect-video w-72" />
</UContainer>
</template>

5
src/devtools/runtime/examples/ContextMenuExample.vue
View File

@@ -1,5 +0,0 @@
<template>
<UContextMenu>
<div class="bg-(--ui-bg-accented)/40 h-60 w-72" />
</UContextMenu>
</template>

8
src/devtools/runtime/examples/DrawerExample.vue
View File

@@ -1,8 +0,0 @@
<template>
<UDrawer>
<UButton label="Open Drawer" />
<template #body>
<div class="size-96" />
</template>
</UDrawer>
</template>

5
src/devtools/runtime/examples/DropdownMenuExample.vue
View File

@@ -1,5 +0,0 @@
<template>
<UDropdownMenu>
<UButton label="Open Dropdown" />
</UDropdownMenu>
</template>

30
src/devtools/runtime/examples/FormExample.vue
View File

@@ -1,30 +0,0 @@
<script setup lang="ts">
import { reactive } from 'vue'
const state = reactive({ email: undefined, password: undefined })
function validate(data: Partial<typeof state>) {
const errors: Array<{ name: string, message: string }> = []
if (!data.email) errors.push({ name: 'email', message: 'Required' })
if (!data.password) errors.push({ name: 'password', message: 'Required' })
return errors
}
</script>
<template>
<UForm
:validate="validate"
:state="state"
class="space-y-4"
>
<UFormField name="email" label="Email">
<UInput v-model="state.email" />
</UFormField>
<UFormField name="password" label="Password">
<UInput v-model="state.password" />
</UFormField>
<UButton type="submit">
Submit
</UButton>
</UForm>
</template>

5
src/devtools/runtime/examples/FormFieldExample.vue
View File

@@ -1,5 +0,0 @@
<template>
<UFormField>
<UInput />
</UFormField>
</template>

5
src/devtools/runtime/examples/LinkExample.vue
View File

@@ -1,5 +0,0 @@
<template>
<ULink>
Link
</ULink>
</template>

8
src/devtools/runtime/examples/ModalExample.vue
View File

@@ -1,8 +0,0 @@
<template>
<UModal>
<UButton label="Open Modal" />
<template #content>
<div class="h-72" />
</template>
</UModal>
</template>

8
src/devtools/runtime/examples/PopoverExample.vue
View File

@@ -1,8 +0,0 @@
<template>
<UPopover>
<UButton label="Open Collapse" />
<template #content>
<div class="bg-(--ui-bg-accented)/40 h-24 w-60" />
</template>
</UPopover>
</template>

3
src/devtools/runtime/examples/SkeletonExample.vue
View File

@@ -1,3 +0,0 @@
<template>
<USkeleton class="h-32 w-96" />
</template>

8
src/devtools/runtime/examples/SlideoverExample.vue
View File

@@ -1,8 +0,0 @@
<template>
<USlideover>
<UButton label="Open Slideover" />
<template #body>
<div class="size-96" />
</template>
</USlideover>
</template>

44
src/devtools/runtime/examples/StepperExample.vue
View File

@@ -1,44 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue'
const items = [
{
slot: 'address',
title: 'Address',
description: 'Add your address here',
icon: 'i-lucide-house'
}, {
slot: 'shipping',
title: 'Shipping',
description: 'Set your preferred shipping method',
icon: 'i-lucide-truck'
}, {
slot: 'checkout',
title: 'Checkout',
description: 'Confirm your order'
}
]
const stepper = ref()
</script>
<template>
<UStepper
ref="stepper"
:items="items"
>
<template #content="{ item }">
<Placeholder class="size-full min-h-60 min-w-60">
{{ item.title }}
</Placeholder>
<div class="flex gap-2 justify-between mt-2">
<UButton variant="outline" :disabled="!stepper?.hasPrevious" leading-icon="i-lucide-arrow-left" @click="stepper.previous()">
Back
</UButton>
<UButton :disabled="!stepper?.hasNext" trailing-icon="i-lucide-arrow-right" @click="stepper.next()">
Next
</UButton>
</div>
</template>
</UStepper>
</template>

11
src/devtools/runtime/examples/ToasterExample.vue
View File

@@ -1,11 +0,0 @@
<script setup>
import { useToast } from '#imports'
const toast = useToast()
</script>
<template>
<UToaster>
<UButton label="Open toast" @click="toast.add({ title: 'Heads up!' })" />
</UToaster>
</template>

5
src/devtools/runtime/examples/TooltipExample.vue
View File

@@ -1,5 +0,0 @@
<template>
<UTooltip>
<div class="bg-(--ui-bg-accented)/40 size-20" />
</UTooltip>
</template>

93
src/module.ts
View File

@@ -1,10 +1,6 @@
import { defu } from 'defu'
import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule, extendPages, hasNuxtModule } from '@nuxt/kit'
import { addTemplates, buildTemplates } from './templates'
import { addCustomTab, startSubprocess } from '@nuxt/devtools-kit'
import sirv from 'sirv'
import { getPort } from 'get-port-please'
import { devtoolsMetaPlugin } from './devtools/meta'
import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule, hasNuxtModule } from '@nuxt/kit'
import { addTemplates } from './templates'
import { defaultOptions, getDefaultUiConfig, resolveColors } from './defaults'
export type * from './runtime/types'
@@ -50,17 +46,6 @@ export interface ModuleOptions {
*/
transitions?: boolean
}
/**
* Configuration for the Nuxt UI devtools.
*/
devtools?: {
/**
* Enable or disable Nuxt UI devtools.
* @defaultValue `true`
*/
enabled?: boolean
}
}
export default defineNuxtModule<ModuleOptions>({
@@ -123,79 +108,5 @@ export default defineNuxtModule<ModuleOptions>({
addImportsDir(resolve('./runtime/composables'))
addTemplates(options, nuxt, resolve)
if (nuxt.options.dev && nuxt.options.devtools.enabled && options.devtools?.enabled) {
const templates = buildTemplates(options)
nuxt.options.vite = defu(nuxt.options?.vite, { plugins: [devtoolsMetaPlugin({ resolve, templates, options })] })
// Runs UI devtools in a subprocess for local development
if (process.env.NUXT_UI_DEVTOOLS_LOCAL) {
const PORT = await getPort({ port: 42124 })
nuxt.hook('app:resolve', () => {
startSubprocess(
{
command: 'pnpm',
args: ['nuxi', 'dev'],
cwd: './devtools',
stdio: 'pipe',
env: {
PORT: PORT.toString()
}
},
{
id: 'ui:devtools:local',
name: 'Nuxt UI DevTools Local',
icon: 'logos-nuxt-icon'
},
nuxt
)
})
nuxt.hook('vite:extendConfig', (config) => {
config.server ||= {}
config.server.proxy ||= {}
config.server.proxy['/__nuxt_ui__/devtools'] = {
target: `http://localhost:${PORT}`,
changeOrigin: true,
followRedirects: true,
ws: true,
rewriteWsOrigin: true
}
})
} else {
nuxt.hook('vite:serverCreated', async (server) => {
server.middlewares.use('/__nuxt_ui__/devtools', sirv(resolve('../dist/client/devtools'), {
single: true,
dev: true
}))
})
}
nuxt.options.routeRules = defu(nuxt.options.routeRules, { '/__nuxt_ui__/**': { ssr: false } })
extendPages((pages) => {
if (pages.length) {
pages.unshift({
name: 'ui-devtools',
path: '/__nuxt_ui__/components/:slug',
file: resolve('./devtools/runtime/DevtoolsRenderer.vue'),
meta: {
// https://github.com/nuxt/nuxt/pull/29366
// isolate: true
layout: false
}
})
}
})
addCustomTab({
name: 'nuxt-ui',
title: 'Nuxt UI',
icon: '/__nuxt_ui__/devtools/favicon.svg',
view: {
type: 'iframe',
src: '/__nuxt_ui__/devtools'
}
})
}
}
})

32
src/runtime/components/Accordion.vue
View File

@@ -3,7 +3,6 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/accordion'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { DynamicSlots } from '../types/utils'
@@ -54,37 +53,6 @@ export type AccordionSlots<T extends { slot?: string }> = {
content: SlotProps<T>
body: SlotProps<T>
} & DynamicSlots<T, SlotProps<T>>
extendDevtoolsMeta({
defaultProps: {
items: [{
label: 'Getting Started',
icon: 'i-lucide-info',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Installation',
icon: 'i-lucide-download',
disabled: true,
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Theming',
icon: 'i-lucide-pipette',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Layouts',
icon: 'i-lucide-layout-dashboard',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Components',
icon: 'i-lucide-layers-3',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Utilities',
icon: 'i-lucide-wrench',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}]
}
})
</script>
<script setup lang="ts" generic="T extends AccordionItem">

3
src/runtime/components/Alert.vue
View File

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/alert'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, ButtonProps } from '../types'
@@ -60,8 +59,6 @@ export interface AlertSlots {
actions(props?: {}): any
close(props: { ui: any }): any
}
extendDevtoolsMeta<AlertProps>({ defaultProps: { title: 'Heads up!' } })
</script>
<script setup lang="ts">

3
src/runtime/components/App.vue
View File

@@ -1,7 +1,6 @@
<script lang="ts">
import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
import { localeContextInjectionKey } from '../composables/useLocale'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import type { ToasterProps, Locale } from '../types'
export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
@@ -17,8 +16,6 @@ export interface AppSlots {
export default {
name: 'App'
}
extendDevtoolsMeta({ ignore: true })
</script>
<script setup lang="ts">

3
src/runtime/components/Avatar.vue
View File

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/avatar'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigAvatar = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
@@ -30,8 +29,6 @@ export interface AvatarProps {
export interface AvatarSlots {
default(props?: {}): any
}
extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', alt: 'Benjamin Canac' } })
</script>
<script setup lang="ts">

3
src/runtime/components/AvatarGroup.vue
View File

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/avatar-group'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigAvatarGroup = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
@@ -30,8 +29,6 @@ export interface AvatarGroupProps {
export interface AvatarGroupSlots {
default(props?: {}): any
}
extendDevtoolsMeta({ example: 'AvatarGroupExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/Badge.vue
View File

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/badge'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import { tv } from '../utils/tv'
import type { AvatarProps } from '../types'
@@ -57,8 +56,6 @@ const ui = computed(() => badge({
size: buttonGroupSize.value || props.size,
buttonGroup: orientation.value
}))
extendDevtoolsMeta({ defaultProps: { label: 'Badge' } })
</script>
<template>

26
src/runtime/components/Breadcrumb.vue
View File

@@ -2,7 +2,6 @@
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/breadcrumb'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, LinkProps } from '../types'
import type { DynamicSlots, PartialString } from '../types/utils'
@@ -48,31 +47,6 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
'item-trailing': SlotProps<T>
'separator'(props?: {}): any
} & DynamicSlots<T, SlotProps<T>>
extendDevtoolsMeta({
defaultProps: {
items: [
{ label: 'Home', to: '/' },
{
slot: 'dropdown',
icon: 'i-lucide-ellipsis',
children: [{
label: 'Documentation'
}, {
label: 'Themes'
}, {
label: 'GitHub'
}]
}, {
label: 'Components',
disabled: true
}, {
label: 'Breadcrumb',
to: '/components/breadcrumb'
}
]
}
})
</script>
<script setup lang="ts" generic="T extends BreadcrumbItem">

4
src/runtime/components/Button.vue
View File

@@ -5,7 +5,6 @@ import _appConfig from '#build/app.config'
import theme from '#build/ui/button'
import type { LinkProps } from './Link.vue'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps } from '../types'
import type { PartialString } from '../types/utils'
@@ -32,9 +31,6 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
ui?: PartialString<typeof button.slots>
}
// Injects props to use as default in the devtools playground.
extendDevtoolsMeta<ButtonProps>({ defaultProps: { label: 'Click me!' } })
export interface ButtonSlots {
leading(props?: {}): any
default(props?: {}): any

3
src/runtime/components/ButtonGroup.vue
View File

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/button-group'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigButtonGroup = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
@@ -30,8 +29,6 @@ export interface ButtonGroupProps {
export interface ButtonGroupSlots {
default(props?: {}): any
}
extendDevtoolsMeta({ example: 'ButtonGroupExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/Card.vue
View File

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/card'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigCard = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
@@ -28,8 +27,6 @@ export interface CardSlots {
default(props?: {}): any
footer(props?: {}): any
}
extendDevtoolsMeta({ example: 'CardExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/Carousel.vue
View File

@@ -11,7 +11,6 @@ import type { FadeOptionsType } from 'embla-carousel-fade'
import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
import _appConfig from '#build/app.config'
import theme from '#build/ui/carousel'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { ButtonProps } from '../types'
import type { PartialString } from '../types/utils'
@@ -97,8 +96,6 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
export type CarouselSlots<T> = {
default(props: { item: T, index: number }): any
}
extendDevtoolsMeta({ example: 'CarouselExample' })
</script>
<script setup lang="ts" generic="T extends AcceptableValue">

3
src/runtime/components/Checkbox.vue
View File

@@ -4,7 +4,6 @@ import type { CheckboxRootProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/checkbox'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigCheckbox = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
@@ -45,8 +44,6 @@ export interface CheckboxSlots {
label(props: { label?: string }): any
description(props: { description?: string }): any
}
extendDevtoolsMeta({ defaultProps: { label: 'Check me!' } })
</script>
<script setup lang="ts">

3
src/runtime/components/Chip.vue
View File

@@ -3,7 +3,6 @@ import type { VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/chip'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigChip = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
@@ -39,8 +38,6 @@ export interface ChipSlots {
default(props?: {}): any
content(props?: {}): any
}
extendDevtoolsMeta({ example: 'ChipExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/Collapsible.vue
View File

@@ -3,7 +3,6 @@ import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/collapsible'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigCollapsible = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
@@ -26,8 +25,6 @@ export interface CollapsibleSlots {
default(props: { open: boolean }): any
content(props?: {}): any
}
extendDevtoolsMeta({ example: 'CollapsibleExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/CommandPalette.vue
View File

@@ -6,7 +6,6 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
import _appConfig from '#build/app.config'
import theme from '#build/ui/command-palette'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types'
import type { DynamicSlots, PartialString } from '../types/utils'
@@ -122,8 +121,6 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
} & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
extendDevtoolsMeta({ example: 'CommandPaletteExample', ignoreProps: ['groups'] })
</script>
<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">

3
src/runtime/components/Container.vue
View File

@@ -2,7 +2,6 @@
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/container'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigContainer = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
@@ -21,8 +20,6 @@ export interface ContainerProps {
export interface ContainerSlots {
default(props?: {}): any
}
extendDevtoolsMeta({ example: 'ContainerExample' })
</script>
<script setup lang="ts">

62
src/runtime/components/ContextMenu.vue
View File

@@ -4,7 +4,6 @@ import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProp
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/context-menu'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, KbdProps, LinkProps } from '../types'
import type { DynamicSlots, PartialString } from '../types/utils'
@@ -85,67 +84,6 @@ export type ContextMenuSlots<T extends { slot?: string }> = {
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
} & DynamicSlots<T, SlotProps<T>>
extendDevtoolsMeta({
example: 'ContextMenuExample',
ignoreProps: ['items'],
defaultProps: {
items: [
[{
label: 'My account',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
}],
[{
label: 'Appearance',
children: [{
label: 'System',
icon: 'i-lucide-monitor'
}, {
label: 'Light',
icon: 'i-lucide-sun'
}, {
label: 'Dark',
icon: 'i-lucide-moon'
}]
}],
[{
label: 'Show Sidebar',
kbds: ['meta', 'S']
}, {
label: 'Show Toolbar',
kbds: ['shift', 'meta', 'D']
}, {
label: 'Collapse Pinned Tabs',
disabled: true
}], [{
label: 'Refresh the Page'
}, {
label: 'Clear Cookies and Refresh'
}, {
label: 'Clear Cache and Refresh'
}, {
type: 'separator'
}, {
label: 'Developer',
children: [[{
label: 'View Source',
kbds: ['option', 'meta', 'U']
}, {
label: 'Developer Tools',
kbds: ['option', 'meta', 'I']
}], [{
label: 'Inspect Elements',
kbds: ['option', 'meta', 'C']
}], [{
label: 'JavaScript Console',
kbds: ['option', 'meta', 'J']
}]]
}]
]
}
})
</script>
<script setup lang="ts" generic="T extends ContextMenuItem">

3
src/runtime/components/Drawer.vue
View File

@@ -4,7 +4,6 @@ import type { DialogContentProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/drawer'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigDrawer = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
@@ -62,8 +61,6 @@ export interface DrawerSlots {
body(props?: {}): any
footer(props?: {}): any
}
extendDevtoolsMeta({ example: 'DrawerExample' })
</script>
<script setup lang="ts">

50
src/runtime/components/DropdownMenu.vue
View File

@@ -4,7 +4,6 @@ import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentP
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/dropdown-menu'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, KbdProps, LinkProps } from '../types'
import type { DynamicSlots, PartialString } from '../types/utils'
@@ -93,55 +92,6 @@ export type DropdownMenuSlots<T extends { slot?: string }> = {
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
} & DynamicSlots<T, SlotProps<T>>
extendDevtoolsMeta({
example: 'DropdownMenuExample',
ignoreProps: ['items'],
defaultProps: {
items: [
[{
label: 'My account',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
},
type: 'label'
}], [{
label: 'Profile',
icon: 'i-lucide-user',
slot: 'custom'
}, {
label: 'Billing',
icon: 'i-lucide-credit-card',
kbds: ['meta', 'b']
}, {
label: 'Settings',
icon: 'i-lucide-cog',
kbds: ['?']
}], [{
label: 'Invite users',
icon: 'i-lucide-user-plus',
children: [[{
label: 'Invite by email',
icon: 'i-lucide-send-horizontal'
}, {
label: 'Invite by link',
icon: 'i-lucide-link',
kbds: ['meta', 'i']
}]]
}],
[{
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt/ui',
target: '_blank'
}, {
label: 'Support',
icon: 'i-lucide-life-buoy',
to: '/components/dropdown-menu'
}]
]
}
})
</script>
<script setup lang="ts" generic="T extends DropdownMenuItem">

3
src/runtime/components/Form.vue
View File

@@ -2,7 +2,6 @@
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/form'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
import type { DeepReadonly } from 'vue'
@@ -32,8 +31,6 @@ export interface FormEmits<T extends object> {
export interface FormSlots {
default(props?: {}): any
}
extendDevtoolsMeta({ example: 'FormExample' })
</script>
<script lang="ts" setup generic="T extends object">

3
src/runtime/components/FormField.vue
View File

@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/form-field'
import { tv } from '../utils/tv'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
const appConfigFormField = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
@@ -43,8 +42,6 @@ export interface FormFieldSlots {
error(props: { error?: string | boolean }): any
default(props: { error?: string | boolean }): any
}
extendDevtoolsMeta({ example: 'FormFieldExample', defaultProps: { label: 'Label' } })
</script>
<script setup lang="ts">

3
src/runtime/components/InputMenu.vue
View File

@@ -6,7 +6,6 @@ import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/input-menu'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, ChipProps, InputProps } from '../types'
import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -137,8 +136,6 @@ export interface InputMenuSlots<T, M extends boolean> {
'tags-item-delete': SlotProps<T>
'create-item-label'(props: { item: string }): any
}
extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
</script>
<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">

2
src/runtime/components/Kbd.vue
View File

@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/kbd'
import type { KbdKey } from '../composables/useKbd'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigKbd = _appConfig as AppConfig & { ui: { kbd: Partial<typeof theme> } }
@@ -28,7 +27,6 @@ export interface KbdProps {
export interface KbdSlots {
default(props?: {}): any
}
extendDevtoolsMeta({ defaultProps: { value: 'K' } })
</script>
<script setup lang="ts">

3
src/runtime/components/Link.vue
View File

@@ -5,7 +5,6 @@ import _appConfig from '#build/app.config'
import type { RouterLinkProps, RouteLocationRaw } from 'vue-router'
import theme from '#build/ui/link'
import { tv } from '../utils/tv'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
/**
@@ -88,8 +87,6 @@ export interface LinkProps extends NuxtLinkProps {
export interface LinkSlots {
default(props: { active: boolean }): any
}
extendDevtoolsMeta({ example: 'LinkExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/Modal.vue
View File

@@ -3,7 +3,6 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/modal'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { ButtonProps } from '../types'
@@ -70,8 +69,6 @@ export interface ModalSlots {
body(props?: {}): any
footer(props?: {}): any
}
extendDevtoolsMeta({ example: 'ModalExample' })
</script>
<script setup lang="ts">

40
src/runtime/components/NavigationMenu.vue
View File

@@ -4,7 +4,6 @@ import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuCo
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/navigation-menu'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, BadgeProps, LinkProps } from '../types'
import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString } from '../types/utils'
@@ -109,45 +108,6 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
'item-trailing': SlotProps<T>
'item-content': SlotProps<T>
} & DynamicSlots<T, SlotProps<T>>
extendDevtoolsMeta({
ignoreProps: ['items'],
defaultProps: {
items: [
[{
label: 'Documentation',
icon: 'i-lucide-book-open',
badge: 10,
children: [{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
}, {
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
}, {
label: 'Theming',
description: 'Learn how to customize the look and feel of the components.',
icon: 'i-lucide-swatch-book'
}, {
label: 'Shortcuts',
description: 'Learn how to display and define keyboard shortcuts in your app.',
icon: 'i-lucide-monitor'
}]
}, {
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt/ui',
target: '_blank'
}, {
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}]
]
}
})
</script>
<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<NavigationMenuItem>">

3
src/runtime/components/Pagination.vue
View File

@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
import type { RouteLocationRaw } from '#vue-router'
import _appConfig from '#build/app.config'
import theme from '#build/ui/pagination'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { ButtonProps } from '../types'
@@ -98,8 +97,6 @@ export interface PaginationSlots {
index: number
}): any
}
extendDevtoolsMeta({ defaultProps: { total: 50 } })
</script>
<script setup lang="ts">

3
src/runtime/components/Popover.vue
View File

@@ -4,7 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/popover'
import { tv } from '../utils/tv'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
const appConfigPopover = _appConfig as AppConfig & { ui: { popover: Partial<typeof theme> } }
@@ -46,8 +45,6 @@ export interface PopoverSlots {
default(props: { open: boolean }): any
content(props?: {}): any
}
extendDevtoolsMeta({ example: 'PopoverExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/RadioGroup.vue
View File

@@ -4,7 +4,6 @@ import type { RadioGroupRootProps, RadioGroupRootEmits, AcceptableValue } from '
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/radio-group'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigRadioGroup = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
@@ -65,8 +64,6 @@ export interface RadioGroupSlots<T> {
label: SlotProps<T>
description: SlotProps<T>
}
extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
</script>
<script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">

3
src/runtime/components/Select.vue
View File

@@ -5,7 +5,6 @@ import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/select'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, ChipProps, InputProps } from '../types'
import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -102,8 +101,6 @@ export interface SelectSlots<T, M extends boolean> {
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
}
extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
</script>
<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">

3
src/runtime/components/SelectMenu.vue
View File

@@ -5,7 +5,6 @@ import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/select-menu'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, ChipProps, InputProps } from '../types'
import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -128,8 +127,6 @@ export interface SelectMenuSlots<T, M extends boolean> {
'item-trailing': SlotProps<T>
'create-item-label'(props: { item: string }): any
}
extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
</script>
<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">

3
src/runtime/components/Skeleton.vue
View File

@@ -3,7 +3,6 @@ import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/skeleton'
import { tv } from '../utils/tv'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
const appConfigSkeleton = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
@@ -17,8 +16,6 @@ export interface SkeletonProps {
as?: any
class?: any
}
extendDevtoolsMeta({ example: 'SkeletonExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/Slideover.vue
View File

@@ -4,7 +4,6 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/slideover'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { ButtonProps } from '../types'
@@ -69,8 +68,6 @@ export interface SlideoverSlots {
body(props?: {}): any
footer(props?: {}): any
}
extendDevtoolsMeta({ example: 'SlideoverExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/Stepper.vue
View File

@@ -4,7 +4,6 @@ import type { StepperRootProps, StepperRootEmits } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/stepper'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { DynamicSlots } from '../types/utils'
@@ -56,8 +55,6 @@ export type StepperSlots<T extends StepperItem> = {
description: SlotProps<T>
content: SlotProps<T>
} & DynamicSlots<T, SlotProps<T>>
extendDevtoolsMeta({ example: 'StepperExample' })
</script>
<script setup lang="ts" generic="T extends StepperItem">

3
src/runtime/components/Switch.vue
View File

@@ -4,7 +4,6 @@ import type { SwitchRootProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/switch'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { PartialString } from '../types/utils'
@@ -47,8 +46,6 @@ export interface SwitchSlots {
label(props: { label?: string }): any
description(props: { description?: string }): any
}
extendDevtoolsMeta({ defaultProps: { label: 'Switch me!' } })
</script>
<script setup lang="ts">

19
src/runtime/components/Tabs.vue
View File

@@ -4,7 +4,6 @@ import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/tabs'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps } from '../types'
import type { DynamicSlots, PartialString } from '../types/utils'
@@ -65,24 +64,6 @@ export type TabsSlots<T extends { slot?: string }> = {
trailing: SlotProps<T>
content: SlotProps<T>
} & DynamicSlots<T, SlotProps<T>>
extendDevtoolsMeta({
defaultProps: {
items: [{
label: 'Tab1',
avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
content: 'This is the content shown for Tab1'
}, {
label: 'Tab2',
icon: 'i-lucide-user',
content: 'And, this is the content for Tab2'
}, {
label: 'Tab3',
icon: 'i-lucide-bell',
content: 'Finally, this is the content for Tab3'
}]
}
})
</script>
<script setup lang="ts" generic="T extends TabsItem">

3
src/runtime/components/Toast.vue
View File

@@ -4,7 +4,6 @@ import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/toast'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, ButtonProps } from '../types'
import type { StringOrVNode } from '../types/utils'
@@ -58,8 +57,6 @@ export interface ToastSlots {
actions(props?: {}): any
close(props: { ui: any }): any
}
extendDevtoolsMeta<ToastProps>({ ignore: true })
</script>
<script setup lang="ts">

3
src/runtime/components/Toaster.vue
View File

@@ -4,7 +4,6 @@ import type { ToastProviderProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/toaster'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
const appConfigToaster = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
@@ -36,8 +35,6 @@ export interface ToasterSlots {
export default {
name: 'Toaster'
}
extendDevtoolsMeta({ example: 'ToasterExample' })
</script>
<script setup lang="ts">

3
src/runtime/components/Tooltip.vue
View File

@@ -3,7 +3,6 @@ import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipAr
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/tooltip'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { KbdProps } from '../types'
@@ -41,8 +40,6 @@ export interface TooltipSlots {
default(props: { open: boolean }): any
content(props?: {}): any
}
extendDevtoolsMeta({ example: 'TooltipExample', defaultProps: { text: 'Hello world!' } })
</script>
<script setup lang="ts">

36
src/runtime/components/Tree.vue
View File

@@ -4,7 +4,6 @@ import type { TreeRootProps, TreeRootEmits } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/tree'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { PartialString, DynamicSlots, MaybeMultipleModelValue, SelectItemKey } from '../types/utils'
@@ -83,41 +82,6 @@ export type TreeSlots<T extends { slot?: string }> = {
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
} & DynamicSlots<T, SlotProps<T>>
extendDevtoolsMeta({ defaultProps: {
items: [
{
label: 'app',
icon: 'i-lucide-folder',
defaultExpanded: true,
children: [{
label: 'composables',
icon: 'i-lucide-folder',
defaultExpanded: true,
children: [
{ label: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
{ label: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' }
]
},
{
label: 'components',
icon: 'i-lucide-folder',
children: [
{
label: 'Home',
icon: 'i-lucide-folder',
children: [
{ label: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
{ label: 'Button.vue', icon: 'vscode-icons:file-type-vue' }
]
}
]
}]
},
{ label: 'app.vue', icon: 'vscode-icons:file-type-vue' },
{ label: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' }
]
} })
</script>
<script setup lang="ts" generic="T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined">

8
src/runtime/composables/extendDevtoolsMeta.ts
View File

@@ -1,8 +0,0 @@
export type DevtoolsMeta<T> = {
defaultProps?: T
example?: string
ignore?: boolean
ignoreProps?: string[]
}
export function extendDevtoolsMeta<T>(_meta: DevtoolsMeta<T>) { }

2
src/unplugin.ts
View File

@@ -55,7 +55,7 @@ export interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode'
export const runtimeDir = normalize(fileURLToPath(new URL('./runtime', import.meta.url)))
export const NuxtUIPlugin = createUnplugin<NuxtUIOptions | undefined>((_options = {}, meta) => {
const options = defu(_options, { fonts: false, devtools: { enabled: false } }, defaultOptions)
const options = defu(_options, { fonts: false }, defaultOptions)
options.theme = options.theme || {}
options.theme.colors = resolveColors(options.theme.colors)