chore: up

This commit is contained in:
Romain Hamel
2025-03-28 08:58:21 +01:00
parent 664e940098
commit f941df1541
33 changed files with 587 additions and 10 deletions

View File

@@ -64,7 +64,7 @@
"prepack": "pnpm build",
"dev": "DEV=true nuxi dev playground",
"dev:build": "nuxi build playground",
"dev:vue": "DEV=true vite playground-vue",
"dev:vue": "DEV=true pnpm --filter playground-vue dev",
"dev:vue:build": "vite build playground-vue",
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
"docs": "DEV=true nuxi dev docs",

View File

@@ -16,6 +16,7 @@
"zod": "^3.24.2"
},
"devDependencies": {
"@compodium/vue": "https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d",
"@vitejs/plugin-vue": "^5.2.3",
"typescript": "^5.6.3",
"vite": "^6.2.3",

View File

@@ -10,7 +10,7 @@ const pages = import.meta.glob('../../playground/app/pages/**/*.vue')
const components = import.meta.glob('../../playground/app/components/**/*.vue')
const routes = Object.keys(pages).map((path) => {
const name = path.match(/\.\.\/\.\.\/playground\/app\/pages(.*)\.vue$/)![1].toLowerCase()
const name = path.match(/\.\.\/\.\.\/playground\/app\/pages(.*)\.vue$/)!.[1].toLowerCase()
return {
path: name === '/index' ? '/' : name,
component: pages[path]

View File

@@ -1,6 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { compodium } from '@compodium/vue'
import ui from '../src/vite'
// https://vitejs.dev/config/
@@ -25,7 +26,21 @@ export default defineConfig({
components: {
dirs: ['../playground/app/components']
}
}),
compodium({
dir: '../playground/compodium',
includeLibraryCollections: false,
componentDirs: [
{ path: '../src/runtime/components', prefix: 'U', pathPrefix: false }
],
extras: {
colors: {
neutral: 'slate'
}
}
})
],
optimizeDeps: {
// prevents reloading page when navigating between components

View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
}
})
</script>
<template>
<UContainer>
<Placeholder class="h-32 aspect-video" />
</UContainer>
</template>

View File

@@ -0,0 +1,28 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
items: [
{
label: 'System',
icon: 'i-lucide-monitor'
},
{
label: 'Light',
icon: 'i-lucide-sun'
},
{
label: 'Dark',
icon: 'i-lucide-moon'
}
]
}
})
</script>
<template>
<UContextMenu>
<Placeholder class="aspect-video w-72">
Right click here
</Placeholder>
</UContextMenu>
</template>

View File

@@ -0,0 +1,12 @@
<template>
<UDrawer>
<UButton
color="neutral"
variant="outline"
label="Open Drawer"
/>
<template #body>
<div class="size-96" />
</template>
</UDrawer>
</template>

View File

@@ -0,0 +1,9 @@
<template>
<UDropdownMenu>
<UButton
label="Open Menu"
color="neutral"
variant="outline"
/>
</UDropdownMenu>
</template>

View File

@@ -0,0 +1,36 @@
<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>

View File

@@ -0,0 +1,13 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
label: 'Label'
}
})
</script>
<template>
<UFormField>
<UInput />
</UFormField>
</template>

View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
name: 'lucide:rocket'
}
})
</script>
<template>
<UIcon />
</template>

View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
items: ['Option 1', 'Option 2', 'Option 3']
}
})
</script>
<template>
<UInputMenu />
</template>

View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
value: 'K'
}
})
</script>
<template>
<UKbd />
</template>

View File

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

View File

@@ -0,0 +1,12 @@
<template>
<UModal>
<UButton
label="Open Modal"
color="neutral"
variant="outline"
/>
<template #content>
<div class="h-72" />
</template>
</UModal>
</template>

View File

@@ -0,0 +1,43 @@
<script setup lang="ts">
extendCompodiumMeta({
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>
<template>
<UNavigationMenu />
</template>

View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
total: 50
}
})
</script>
<template>
<UPagination />
</template>

View File

@@ -0,0 +1,12 @@
<template>
<UPopover>
<UButton
label="Open Popover"
color="neutral"
variant="outline"
/>
<template #content>
<Placeholder class="aspect-video w-60" />
</template>
</UPopover>
</template>

View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
items: ['Option 1', 'Option 2', 'Option 3']
}
})
</script>
<template>
<URadioGroup />
</template>

View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
defaultValue: 'Option 1',
items: ['Option 1', 'Option 2', 'Option 3']
}
})
</script>
<template>
<USelect />
</template>

View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
items: ['Option 1', 'Option 2', 'Option 3']
}
})
</script>
<template>
<USelectMenu />
</template>

View File

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

View File

@@ -0,0 +1,12 @@
<template>
<USlideover>
<UButton
color="neutral"
variant="outline"
label="Open Slideover"
/>
<template #body>
<div class="size-96" />
</template>
</USlideover>
</template>

View File

@@ -0,0 +1,51 @@
<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 }">
<div class="size-full min-h-60 min-w-60 flex items-center justify-center">
{{ item.title }}
</div>
<div class="flex gap-2 justify-between mt-2">
<UButton
variant="outline"
leading-icon="i-lucide-arrow-left"
@click="stepper.previous()"
>
Back
</UButton>
<UButton
trailing-icon="i-lucide-arrow-right"
@click="stepper.next()"
>
Next
</UButton>
</div>
</template>
</UStepper>
</template>

View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
label: 'Switch me!'
}
})
</script>
<template>
<USwitch />
</template>

View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
import { ref } from 'vue'
const data = ref([
{
id: '4600',
date: '2024-03-11T15:30:00',
status: 'paid',
email: 'james.anderson@example.com',
amount: 594
},
{
id: '4599',
date: '2024-03-11T10:10:00',
status: 'failed',
email: 'mia.white@example.com',
amount: 276
},
{
id: '4598',
date: '2024-03-11T08:50:00',
status: 'refunded',
email: 'william.brown@example.com',
amount: 315
},
{
id: '4597',
date: '2024-03-10T19:45:00',
status: 'paid',
email: 'emma.davis@example.com',
amount: 529
},
{
id: '4596',
date: '2024-03-10T15:55:00',
status: 'paid',
email: 'ethan.harris@example.com',
amount: 639
}
])
</script>
<template>
<UTable
:data="data"
class="flex-1"
/>
</template>

View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
items: [{
label: 'Tab 1',
avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
content: 'This is the content shown for Tab 1'
}, {
label: 'Tab 2',
icon: 'i-lucide-user',
content: 'And, this is the content for Tab 2'
}, {
label: 'Tab 3',
icon: 'i-lucide-bell',
content: 'Finally, this is the content for Tab 3'
}]
}
})
</script>
<template>
<UTabs />
</template>

View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
const toast = useToast()
</script>
<template>
<UButton
color="neutral"
variant="outline"
label="Open Toast"
@click="toast.add({ title: 'Heads up!' })"
/>
</template>

View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
extendCompodiumMeta({
defaultProps: {
text: 'Tooltip'
}
})
</script>
<template>
<UTooltip v-bind="$attrs">
<UButton
label="Show Tooltip"
color="neutral"
variant="subtle"
/>
</UTooltip>
</template>

View File

@@ -0,0 +1,42 @@
<script setup lang="ts">
extendCompodiumMeta({
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>
<template>
<UTree />
</template>

View File

@@ -21,7 +21,7 @@ export default defineNuxtConfig({
compodium: {
includeLibraryCollections: false,
ignore: ['**/App.vue', '**/*Example.vue', '**/Placeholder.vue', '**/*Content.vue'],
ignore: ['**/App.vue', '**/*Example.vue', '**/Placeholder.vue', '**/*Content.vue', '**/*Provider.vue', 'UToast'],
extras: {
colors: {
neutral: 'slate'

View File

@@ -16,6 +16,6 @@
"zod": "^3.24.2"
},
"devDependencies": {
"@compodium/nuxt": "https://pkg.pr.new/romhml/compodium/@compodium/nuxt@18f083d"
"@compodium/nuxt": "https://pkg.pr.new/romhml/compodium/@compodium/nuxt@eefc5d8"
}
}

94
pnpm-lock.yaml generated
View File

@@ -324,8 +324,8 @@ importers:
version: 3.24.2
devDependencies:
'@compodium/nuxt':
specifier: https://pkg.pr.new/romhml/compodium/@compodium/nuxt@18f083d
version: https://pkg.pr.new/romhml/compodium/@compodium/nuxt@18f083d(magicast@0.3.5)(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
specifier: https://pkg.pr.new/romhml/compodium/@compodium/nuxt@eefc5d8
version: https://pkg.pr.new/romhml/compodium/@compodium/nuxt@eefc5d8(magicast@0.3.5)(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
playground-vue:
dependencies:
@@ -342,6 +342,9 @@ importers:
specifier: ^3.24.2
version: 3.24.2
devDependencies:
'@compodium/vue':
specifier: https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d
version: https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
'@vitejs/plugin-vue':
specifier: ^5.2.3
version: 5.2.3(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
@@ -563,10 +566,24 @@ packages:
vite:
optional: true
'@compodium/core@https://pkg.pr.new/romhml/compodium/@compodium/core@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc':
resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/core@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc}
version: 0.0.0-eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc
peerDependencies:
vite: '>=6'
vue: '>=3'
peerDependenciesMeta:
vite:
optional: true
'@compodium/examples@https://pkg.pr.new/romhml/compodium/@compodium/examples@18f083d1431d5d84f9d251ce996e186877e4ea5b':
resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/examples@18f083d1431d5d84f9d251ce996e186877e4ea5b}
version: 0.0.0-18f083d1431d5d84f9d251ce996e186877e4ea5b
'@compodium/examples@https://pkg.pr.new/romhml/compodium/@compodium/examples@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc':
resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/examples@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc}
version: 0.0.0-eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc
'@compodium/meta@https://pkg.pr.new/romhml/compodium/@compodium/meta@18f083d1431d5d84f9d251ce996e186877e4ea5b':
resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/meta@18f083d1431d5d84f9d251ce996e186877e4ea5b}
version: 0.0.0-18f083d1431d5d84f9d251ce996e186877e4ea5b
@@ -576,9 +593,24 @@ packages:
typescript:
optional: true
'@compodium/nuxt@https://pkg.pr.new/romhml/compodium/@compodium/nuxt@18f083d':
resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/nuxt@18f083d}
'@compodium/meta@https://pkg.pr.new/romhml/compodium/@compodium/meta@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc':
resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/meta@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc}
version: 0.0.0-eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc
peerDependencies:
typescript: 5.6.3
peerDependenciesMeta:
typescript:
optional: true
'@compodium/nuxt@https://pkg.pr.new/romhml/compodium/@compodium/nuxt@eefc5d8':
resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/nuxt@eefc5d8}
version: 0.0.0-eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc
'@compodium/vue@https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d':
resolution: {tarball: https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d}
version: 0.0.0-18f083d1431d5d84f9d251ce996e186877e4ea5b
peerDependencies:
vite: '>=6'
'@conventional-changelog/git-client@1.0.1':
resolution: {integrity: sha512-PJEqBwAleffCMETaVm/fUgHldzBE35JFk3/9LL6NUA5EXa3qednu+UT6M7E5iBu3zIQZCULYIiZ90fBYHt6xUw==}
@@ -7574,11 +7606,37 @@ snapshots:
transitivePeerDependencies:
- typescript
'@compodium/core@https://pkg.pr.new/romhml/compodium/@compodium/core@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@compodium/examples': https://pkg.pr.new/romhml/compodium/@compodium/examples@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc
'@compodium/meta': https://pkg.pr.new/romhml/compodium/@compodium/meta@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc(typescript@5.6.3)
'@vueuse/core': 13.0.0(vue@3.5.13(typescript@5.6.3))
chokidar: 3.6.0
hookable: 5.5.3
pathe: 2.0.3
scule: 1.3.0
sirv: 3.0.1
tinyglobby: 0.2.12
ufo: 1.5.4
unplugin: 2.2.2
unplugin-ast: 0.14.4
vue: 3.5.13(typescript@5.6.3)
zod: 3.24.2
optionalDependencies:
vite: 6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
transitivePeerDependencies:
- typescript
'@compodium/examples@https://pkg.pr.new/romhml/compodium/@compodium/examples@18f083d1431d5d84f9d251ce996e186877e4ea5b':
dependencies:
pathe: 2.0.3
scule: 1.3.0
'@compodium/examples@https://pkg.pr.new/romhml/compodium/@compodium/examples@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc':
dependencies:
pathe: 2.0.3
scule: 1.3.0
'@compodium/meta@https://pkg.pr.new/romhml/compodium/@compodium/meta@18f083d1431d5d84f9d251ce996e186877e4ea5b(typescript@5.6.3)':
dependencies:
'@volar/typescript': 2.4.12
@@ -7589,9 +7647,19 @@ snapshots:
optionalDependencies:
typescript: 5.6.3
'@compodium/nuxt@https://pkg.pr.new/romhml/compodium/@compodium/nuxt@18f083d(magicast@0.3.5)(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))':
'@compodium/meta@https://pkg.pr.new/romhml/compodium/@compodium/meta@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc(typescript@5.6.3)':
dependencies:
'@compodium/core': https://pkg.pr.new/romhml/compodium/@compodium/core@18f083d1431d5d84f9d251ce996e186877e4ea5b(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
'@volar/typescript': 2.4.12
'@vue/language-core': 2.2.8(typescript@5.6.3)
pathe: 2.0.3
vue-component-meta: 2.2.8(typescript@5.6.3)
vue-component-type-helpers: 2.2.8
optionalDependencies:
typescript: 5.6.3
'@compodium/nuxt@https://pkg.pr.new/romhml/compodium/@compodium/nuxt@eefc5d8(magicast@0.3.5)(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@compodium/core': https://pkg.pr.new/romhml/compodium/@compodium/core@eefc5d8fcee1b89fd0c89ab3f06bf351d04852cc(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
'@nuxt/devtools-kit': 2.3.1(magicast@0.3.5)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
'@nuxt/kit': 3.16.1(magicast@0.3.5)
consola: 3.4.2
@@ -7603,6 +7671,20 @@ snapshots:
- vite
- vue
'@compodium/vue@https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@compodium/core': https://pkg.pr.new/romhml/compodium/@compodium/core@18f083d1431d5d84f9d251ce996e186877e4ea5b(typescript@5.6.3)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
'@compodium/examples': https://pkg.pr.new/romhml/compodium/@compodium/examples@18f083d1431d5d84f9d251ce996e186877e4ea5b
'@vue/devtools-kit': 7.7.2
consola: 3.4.2
defu: 6.1.4
pathe: 2.0.3
unplugin: 2.2.2
vite: 6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
transitivePeerDependencies:
- typescript
- vue
'@conventional-changelog/git-client@1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.1.0)':
dependencies:
'@types/semver': 7.5.8