mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-26 09:50:33 +01:00
docs: update
This commit is contained in:
Benjamin Canac
@@ -1,206 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const refs = ref([])
|
||||
const section = ref()
|
||||
|
||||
const { stop } = useIntersectionObserver(
|
||||
section,
|
||||
([{ isIntersecting }]) => {
|
||||
if (!isIntersecting) {
|
||||
return
|
||||
}
|
||||
|
||||
refs.value.forEach(element => element.style.animationPlayState = 'running')
|
||||
|
||||
stop()
|
||||
},
|
||||
{ threshold: 0.3 }
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
refs.value.forEach((element) => {
|
||||
if (!element) {
|
||||
return
|
||||
}
|
||||
|
||||
element.style.animationFillMode = 'forwards'
|
||||
element.style.transformOrigin = 'center'
|
||||
element.style.animationPlayState = 'paused'
|
||||
element.style.animationDuration = '1s'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ULandingGrid ref="section" class="lg:grid-cols-10 lg:gap-8">
|
||||
<div :ref="(el) => (refs[1] = el)" class="col-span-8 flex items-center animate-top">
|
||||
<RangeExample />
|
||||
</div>
|
||||
|
||||
<div :ref="(el) => (refs[2] = el)" class="col-span-2 row-span-2 flex items-center animate-right">
|
||||
<RadioExample />
|
||||
</div>
|
||||
|
||||
<div :ref="(el) => (refs[4] = el)" class="col-span-2 animate-left z-10">
|
||||
<DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
:ref="(el) => (refs[3] = el)"
|
||||
class="col-span-6 flex flex-wrap items-center justify-between gap-1 animate-bottom"
|
||||
>
|
||||
<UAvatarGroup :max="2">
|
||||
<UAvatar
|
||||
src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
|
||||
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
|
||||
alt="benjamincanac"
|
||||
width="40"
|
||||
height="40"
|
||||
loading="lazy"
|
||||
/>
|
||||
<UAvatar
|
||||
src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
|
||||
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
|
||||
alt="Atinux"
|
||||
width="40"
|
||||
height="40"
|
||||
loading="lazy"
|
||||
/>
|
||||
<UAvatar
|
||||
src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
|
||||
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
|
||||
alt="smarroufin"
|
||||
width="40"
|
||||
height="40"
|
||||
loading="lazy"
|
||||
/>
|
||||
</UAvatarGroup>
|
||||
|
||||
<UButton label="Button" loading />
|
||||
|
||||
<UBadge label="Badge" />
|
||||
|
||||
<UColorModeToggle />
|
||||
|
||||
<PaginationExampleBasic />
|
||||
</div>
|
||||
|
||||
<div :ref="(el) => (refs[5] = el)" class="col-span-3 row-span-8 gap-6 flex flex-col justify-between animate-left">
|
||||
<UNotification
|
||||
:id="1"
|
||||
title="Notification"
|
||||
description="This is a notification!"
|
||||
icon="i-heroicons-command-line"
|
||||
:ui="{ shadow: 'shadow' }"
|
||||
:close-button="null"
|
||||
:timeout="30000"
|
||||
/>
|
||||
|
||||
<TabsExampleItemCustomSlot />
|
||||
|
||||
<UCard class="flex-shrink-0">
|
||||
<div class="flex items-center gap-4 justify-center">
|
||||
<USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
|
||||
<div class="space-y-3 flex-1">
|
||||
<USkeleton class="h-4 w-full" />
|
||||
<USkeleton class="h-4 w-2/3" />
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div :ref="(el) => (refs[6] = el)" class="col-span-5 row-span-2 flex flex-col animate-bottom">
|
||||
<UCard
|
||||
:ui="{ body: { base: 'flex-1 flex flex-col overflow-y-auto', padding: '' } }"
|
||||
class="col-span-4 row-span-6 flex-1 flex flex-col"
|
||||
>
|
||||
<CommandPaletteExampleGroups />
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div :ref="(el) => (refs[7] = el)" class="col-span-2 row-span-2 gap-6 flex flex-col animate-right z-10">
|
||||
<CheckboxExample />
|
||||
|
||||
<InputExampleClearable />
|
||||
|
||||
<UFormGroup label="Labels">
|
||||
<SelectMenuExampleCreatable />
|
||||
</UFormGroup>
|
||||
|
||||
<UCard :ui="{ body: { padding: '!p-1' } }">
|
||||
<VerticalNavigationExampleAvatarSlot />
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div :ref="(el) => (refs[8] = el)" class="col-span-7 row-span-6 animate-bottom">
|
||||
<UCard :ui="{ body: { padding: '' } }">
|
||||
<TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
|
||||
</UCard>
|
||||
</div>
|
||||
</ULandingGrid>
|
||||
</template>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
.animate-top {
|
||||
animation: translateDown;
|
||||
}
|
||||
|
||||
.animate-bottom {
|
||||
animation: translateUp;
|
||||
}
|
||||
|
||||
.animate-left {
|
||||
animation: translateLeft;
|
||||
}
|
||||
|
||||
.animate-right {
|
||||
animation-name: translateRight;
|
||||
}
|
||||
|
||||
@keyframes translateDown {
|
||||
0% {
|
||||
transform: translate3D(0, -100px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateUp {
|
||||
0% {
|
||||
transform: translate3D(0, 100px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateLeft {
|
||||
0% {
|
||||
transform: translate3D(-100px, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3D(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateRight {
|
||||
0% {
|
||||
transform: translate3D(100px, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3D(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="rounded-xl border border-gray-800/10 dark:border-gray-200/10 bg-gray-200/20 dark:bg-gray-700/20 p-4 flex-1 w-full">
|
||||
<div class="relative h-full">
|
||||
<TransitionGroup name="fade">
|
||||
<HomeProDemoBlock v-for="(block, index) in blocks" :key="index" :block="block">
|
||||
<template v-for="(_, name) in $slots" #[name]="slotData">
|
||||
<slot :name="name" v-bind="slotData" />
|
||||
</template>
|
||||
</HomeProDemoBlock>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { HomeProBlock } from '~/types'
|
||||
|
||||
defineProps<{ blocks: HomeProBlock[] }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
:id="block.id"
|
||||
:class="twMerge(
|
||||
'absolute rounded-lg flex items-center justify-center',
|
||||
block.class,
|
||||
!block.slot && (block.inactive || block.inactive === undefined ? 'border border-gray-800/10 dark:border-gray-200/10 bg-gray-200/20 dark:bg-gray-700/20 transition-[background,text] duration-500' : 'bg-primary transition-[background,text] duration-500'),
|
||||
block.name?.startsWith('#') && 'border-dashed'
|
||||
)"
|
||||
:style="block.style"
|
||||
>
|
||||
<NuxtLink v-if="block.to && !block.inactive" :to="block.to" class="focus:outline-none" tabindex="-1">
|
||||
<span class="absolute inset-0" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
|
||||
<template v-if="block.inactive">
|
||||
<TransitionGroup name="fade">
|
||||
<HomeProDemoBlock v-for="(subComponent, subIndex) in block.children" :key="subIndex" :block="subComponent">
|
||||
<template v-for="(_, name) in $slots" #[name]="slotData: any">
|
||||
<slot :name="name" v-bind="slotData" />
|
||||
</template>
|
||||
</HomeProDemoBlock>
|
||||
</TransitionGroup>
|
||||
</template>
|
||||
<template v-else-if="block.slot">
|
||||
<slot :name="block.slot" />
|
||||
</template>
|
||||
<p
|
||||
v-else
|
||||
class="font-semibold flex flex-col gap-1 text-center"
|
||||
:class="[
|
||||
!block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900'),
|
||||
]"
|
||||
>
|
||||
{{ block.name }}
|
||||
|
||||
<span v-if="block.description" class="font-normal">{{ block.description }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import type { HomeProBlock } from '~/types'
|
||||
|
||||
defineProps<{ block: HomeProBlock }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<Transition appear name="fade">
|
||||
<div
|
||||
:style="{
|
||||
'--cell': `${width / cols}px`,
|
||||
'--rows': rows - 1
|
||||
}"
|
||||
>
|
||||
<div
|
||||
ref="el"
|
||||
class="absolute inset-0 grid justify-center auto-rows-[--cell] -space-y-px"
|
||||
>
|
||||
<div v-for="(row, rowIndex) in grid" :key="rowIndex" class="grid grid-flow-col auto-cols-[--cell] flex-1 -space-x-px">
|
||||
<div
|
||||
v-for="(cell, cellIndex) in row"
|
||||
:key="cellIndex"
|
||||
class="relative border border-primary-200/50 dark:border-primary-900/25"
|
||||
>
|
||||
<div class="absolute inset-0 bg-primary-500/10 hover:bg-primary-500/20 dark:bg-primary-400/5 dark:hover:bg-primary-400/10 opacity-0 transition-opacity will-change-[opacity] duration-1000" :class="[cell && 'opacity-100 cursor-pointer']" @click="cell && removeCell(rowIndex, cellIndex)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-[calc((var(--cell)*var(--rows))+1px)] inset-x-0 h-[calc(var(--cell)*2)] bg-gradient-to-t from-white dark:from-gray-900 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useElementSize } from '@vueuse/core'
|
||||
|
||||
const el = ref(null)
|
||||
const grid = ref([])
|
||||
const rows = ref(0)
|
||||
const cols = ref(0)
|
||||
|
||||
const { width, height } = useElementSize(el)
|
||||
|
||||
function createGrid () {
|
||||
grid.value = []
|
||||
|
||||
for (let i = 0; i <= rows.value; i++) {
|
||||
grid.value.push(new Array(cols.value).fill(null))
|
||||
}
|
||||
}
|
||||
|
||||
function createNewCell () {
|
||||
const x = Math.floor(Math.random() * cols.value)
|
||||
|
||||
grid.value[0][x] = true
|
||||
}
|
||||
|
||||
function moveCellsDown () {
|
||||
for (let row = rows.value - 1; row >= 0; row--) {
|
||||
for (let col = 0; col < cols.value; col++) {
|
||||
if (grid.value[row][col] !== null && grid.value[row + 1][col] === null) {
|
||||
grid.value[row + 1][col] = grid.value[row][col]
|
||||
grid.value[row][col] = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (grid.value[rows.value].every(cell => cell !== null)) {
|
||||
for (let col = 0; col < cols.value; col++) {
|
||||
grid.value[rows.value][col] = null
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function removeCell (row, col) {
|
||||
grid.value[row][col] = null
|
||||
}
|
||||
|
||||
function calcGrid () {
|
||||
const base = Math.ceil(width.value / 60)
|
||||
const cell = width.value / base
|
||||
|
||||
rows.value = Math.ceil(height.value / cell)
|
||||
cols.value = width.value / cell
|
||||
|
||||
createGrid()
|
||||
}
|
||||
|
||||
watch(width, calcGrid)
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(calcGrid, 50)
|
||||
|
||||
setInterval(() => {
|
||||
moveCellsDown()
|
||||
createNewCell()
|
||||
}, 1000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user