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

chore(github): add playground job in module workflow (#4021)

Browse Source
This commit is contained in:
Benjamin Canac
2025-04-29 17:48:09 +02:00
committed by GitHub
parent 53f8b34bef
commit d7710795df
6 changed files with 126 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
playground/app/pages/components/carousel.vue
View File

@@ -28,7 +28,12 @@ const bind = computed(() => ({
dots: dots.value
}))
const items = Array.from({ length: 6 }).map((_, index) => index)
const items = Array.from({ length: 6 }).map((_, index) => ({
id: index,
title: `Item ${index + 1}`,
description: `Description for item ${index + 1}`,
src: `https://picsum.photos/640/640?v=${index}`
}))
</script>
<template>
@@ -60,23 +65,23 @@ const items = Array.from({ length: 6 }).map((_, index) => index)
</div>
<template v-if="classNames">
<UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ item: 'basis-[70%] transition-opacity ease-in-out [&:not(.is-snapped)]:opacity-10', container: 'h-[352px]' }" class="w-full max-w-xl mx-auto">
<img :src="`https://picsum.photos/600/350?v=${index}`" class="rounded-lg">
<UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ item: 'basis-[70%] transition-opacity ease-in-out [&:not(.is-snapped)]:opacity-10', container: 'h-[352px]' }" class="w-full max-w-xl mx-auto">
<img :src="item.src" class="rounded-lg">
</UCarousel>
</template>
<template v-else-if="autoHeight">
<UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ container: 'transition-[height] duration-200' }" class="w-full max-w-md mx-auto">
<img :src="`https://picsum.photos/600/${index % 2 === 0 ? 350 : 450}?v=${index}`" :class="index % 2 === 0 ? 'h-[350px]' : 'h-[450px]'" class="rounded-lg">
<UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ container: 'transition-[height] duration-200' }" class="w-full max-w-md mx-auto">
<img :src="item.src" class="rounded-lg">
</UCarousel>
</template>
<template v-else>
<UCarousel v-slot="{ index }" v-bind="bind" :items="items" class="w-[320px] mx-auto" :ui="{ container: 'h-[336px]' }">
<img :src="`https://picsum.photos/640/640?v=${index}`" class="rounded-lg">
<UCarousel v-slot="{ item }" v-bind="bind" :items="items" class="w-[320px] mx-auto" :ui="{ container: 'h-[336px]' }">
<img :src="item.src" class="rounded-lg">
</UCarousel>
<template v-if="orientation === 'horizontal'">
<UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ item: 'basis-1/3' }" class="w-full max-w-xs mx-auto">
<img :src="`https://picsum.photos/320/320?v=${index}`" class="rounded-lg">
<UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ item: 'basis-1/3' }" class="w-full max-w-xs mx-auto">
<img :src="item.src" class="rounded-lg">
</UCarousel>
</template>
</template>

72
playground/app/pages/components/shortcuts.vue
View File

@@ -1,3 +1,40 @@
<script setup lang="ts">
import type { ShortcutsConfig } from '@nuxt/ui/composables/defineShortcuts.js'
const logs = ref<string[]>([])
const shortcutsState = ref({
'a': {
label: 'A',
disabled: false,
usingInput: false
},
'shift_i': {
label: 'Shift+I',
disabled: false,
usingInput: false
},
'g-i': {
label: 'G->I',
disabled: false,
usingInput: false
}
})
const shortcuts = computed(() => {
return Object.entries(shortcutsState.value).reduce<ShortcutsConfig>((acc, [key, { label, disabled, usingInput }]) => {
if (disabled) {
return acc
}
acc[key] = {
handler: () => { logs.value.unshift(`"${label}" triggered`) },
usingInput
}
return acc
}, {})
})
defineShortcuts(shortcuts)
</script>
<template>
<div class="w-full flex flex-col gap-4">
<UCard class="flex-1">
@@ -43,38 +80,3 @@
</UCard>
</div>
</template>
<script setup lang="ts">
const logs = ref<string[]>([])
const shortcutsState = ref({
'a': {
label: 'A',
disabled: false,
usingInput: false
},
'shift_i': {
label: 'Shift+I',
disabled: false,
usingInput: false
},
'g-i': {
label: 'G->I',
disabled: false,
usingInput: false
}
})
const shortcuts = computed(() => {
return Object.entries(shortcutsState.value).reduce<ShortcutsConfig>((acc, [key, { label, disabled, usingInput }]) => {
if (disabled) {
return acc
}
acc[key] = {
handler: () => { logs.value.unshift(`"${label}" triggered`) },
usingInput
}
return acc
}, {})
})
defineShortcuts(shortcuts)
</script>