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

chore: up

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
playground/compodium/examples/UContainerExample.vue Normal file
View File

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

28
playground/compodium/examples/UContextMenuExample.vue Normal file
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>

12
playground/compodium/examples/UDrawerExample.vue Normal file
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>

9
playground/compodium/examples/UDropdownMenuExample.vue Normal file
View File

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

36
playground/compodium/examples/UFormExample.vue Normal file
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>

13
playground/compodium/examples/UFormFieldExample.vue Normal file
View File

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

11
playground/compodium/examples/UIconExample.vue Normal file
View File

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

11
playground/compodium/examples/UInputMenuExample.vue Normal file
View File

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

11
playground/compodium/examples/UKbdExample.vue Normal file
View File

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

5
playground/compodium/examples/ULinkExample.vue Normal file
View File

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

12
playground/compodium/examples/UModalExample.vue Normal file
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>

43
playground/compodium/examples/UNavigationMenuExample.vue Normal file
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>

11
playground/compodium/examples/UPaginationExample.vue Normal file
View File

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

12
playground/compodium/examples/UPopoverExample.vue Normal file
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>

11
playground/compodium/examples/URadioGroupExample.vue Normal file
View File

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

12
playground/compodium/examples/USelectExample.vue Normal file
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>

11
playground/compodium/examples/USelectMenuExample.vue Normal file
View File

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

3
playground/compodium/examples/USkeletonExample.vue Normal file
View File

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

12
playground/compodium/examples/USlideoverExample.vue Normal file
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>

51
playground/compodium/examples/UStepperExample.vue Normal file
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>

11
playground/compodium/examples/USwitchExample.vue Normal file
View File

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

48
playground/compodium/examples/UTableExample.vue Normal file
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>

23
playground/compodium/examples/UTabsExample.vue Normal file
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>

12
playground/compodium/examples/UToasterExample.vue Normal file
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>

17
playground/compodium/examples/UTooltipExample.vue Normal file
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>

42
playground/compodium/examples/UTreeExample.vue Normal file
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>