mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { splitByCase, upperFirst } from 'scule'
|
|
|
|
useHead({
|
|
bodyAttrs: {
|
|
class: 'antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
|
|
}
|
|
})
|
|
|
|
const appConfig = useAppConfig()
|
|
|
|
const components = [
|
|
'accordion',
|
|
'alert',
|
|
'avatar',
|
|
'badge',
|
|
'breadcrumb',
|
|
'button',
|
|
'card',
|
|
'checkbox',
|
|
'chip',
|
|
'collapsible',
|
|
'context-menu',
|
|
'command-palette',
|
|
'drawer',
|
|
'dropdown-menu',
|
|
'form',
|
|
'form-field',
|
|
'input',
|
|
'input-menu',
|
|
'kbd',
|
|
'link',
|
|
'modal',
|
|
'navigation-menu',
|
|
'pagination',
|
|
'popover',
|
|
'radio-group',
|
|
'separator',
|
|
'shortcuts',
|
|
'skeleton',
|
|
'slideover',
|
|
'slider',
|
|
'switch',
|
|
'tabs',
|
|
'textarea',
|
|
'toast',
|
|
'tooltip'
|
|
]
|
|
|
|
function upperName(name: string) {
|
|
return splitByCase(name).map(p => upperFirst(p)).join('')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UApp :toaster="appConfig.toaster">
|
|
<div class="min-h-screen w-screen overflow-hidden flex flex-col items-center justify-center overflow-y-auto bg-white dark:bg-gray-900" vaul-drawer-wrapper>
|
|
<UNavigationMenu :items="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800 overflow-x-auto px-2" />
|
|
|
|
<div class="flex-1 flex flex-col items-center justify-center w-full py-12 px-4">
|
|
<NuxtPage />
|
|
</div>
|
|
</div>
|
|
</UApp>
|
|
</template>
|