UniformGrid

1<script setup lang="ts">2import { Button, UniformGrid } from '@vitral/vue';3import { ref } from 'vue';4 5const count = ref(7);6</script>7 8<template>9    <div class="controls">10        <Button icon="minus" severity="secondary" aria-label="Remove a cell" :disabled="count <= 1" @click="count--" />11        <Button icon="plus" severity="secondary" aria-label="Add a cell" @click="count++" />12        <small style="color: var(--vt-text-muted-color)">{{ count }} children</small>13    </div>14    <UniformGrid class="frame square">15        <div v-for="n in count" :key="n" class="box" :class="`c${((n - 1) % 5) + 1}`">{{ n }}</div>16    </UniformGrid>17</template>18 19<style scoped>20.controls {21    display: flex;22    align-items: center;23    gap: 0.5rem;24    width: 100%;25}26 27.frame {28    width: 100%;29    padding: 0.5rem;30    border: 1px dashed color-mix(in srgb, var(--vt-text-color) 30%, transparent);31    border-radius: var(--vt-border-radius-md);32}33 34.square {35    max-width: 22rem;36}37 38.box {39    --c: var(--vt-chart-1);40    display: flex;41    align-items: center;42    justify-content: center;43    min-height: 2.5rem;44    padding: 0.375rem;45    font-size: 0.8125rem;46    text-align: center;47    color: var(--vt-text-color);48    background: color-mix(in srgb, var(--c) 18%, transparent);49    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);50    border-radius: var(--vt-border-radius-sm);51}52 53.c1 {54    --c: var(--vt-chart-1);55}56 57.c2 {58    --c: var(--vt-chart-2);59}60 61.c3 {62    --c: var(--vt-chart-3);63}64 65.c4 {66    --c: var(--vt-chart-4);67}68 69.c5 {70    --c: var(--vt-chart-5);71}72</style>

1<script setup lang="ts">2import { UniformGrid } from '@vitral/vue';3</script>4 5<template>6    <UniformGrid class="frame" :columns="4">7        <div v-for="n in 10" :key="n" class="box" :class="[`c${((n - 1) % 5) + 1}`, { tall: n === 6 }]">{{ n === 6 ? 'A taller cell sets every row' : n }}</div>8    </UniformGrid>9</template>10 11<style scoped>12.frame {13    width: 100%;14    padding: 0.5rem;15    border: 1px dashed color-mix(in srgb, var(--vt-text-color) 30%, transparent);16    border-radius: var(--vt-border-radius-md);17}18 19.box {20    --c: var(--vt-chart-1);21    display: flex;22    align-items: center;23    justify-content: center;24    min-height: 2.5rem;25    padding: 0.375rem;26    font-size: 0.8125rem;27    text-align: center;28    color: var(--vt-text-color);29    background: color-mix(in srgb, var(--c) 18%, transparent);30    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);31    border-radius: var(--vt-border-radius-sm);32}33 34.tall {35    min-height: 4.5rem;36}37 38.c1 {39    --c: var(--vt-chart-1);40}41 42.c2 {43    --c: var(--vt-chart-2);44}45 46.c3 {47    --c: var(--vt-chart-3);48}49 50.c4 {51    --c: var(--vt-chart-4);52}53 54.c5 {55    --c: var(--vt-chart-5);56}57</style>

1<script setup lang="ts">2import { UniformGrid, useLocale } from '@vitral/vue';3import { computed } from 'vue';4 5const { locale } = useLocale();6const today = new Date();7const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);8const daysInMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();9const title = computed(() => `${locale.value.monthNames[today.getMonth()]} ${today.getFullYear()}`);10const firstDay = computed(() => locale.value.firstDayOfWeek);11const weekdays = computed(() => Array.from({ length: 7 }, (_, i) => locale.value.dayNamesMin[(i + firstDay.value) % 7]));12const offset = computed(() => (monthStart.getDay() - firstDay.value + 7) % 7);13</script>14 15<template>16    <div class="calendar">17        <strong>{{ title }}</strong>18        <UniformGrid :columns="7" :spacing="2" aria-hidden="true">19            <span v-for="day in weekdays" :key="day" class="weekday">{{ day }}</span>20        </UniformGrid>21        <UniformGrid :columns="7" :first-column="offset" :spacing="2">22            <span v-for="day in daysInMonth" :key="day" class="day" :class="{ today: day === today.getDate() }">{{ day }}</span>23        </UniformGrid>24    </div>25</template>26 27<style scoped>28.calendar {29    display: flex;30    flex-direction: column;31    gap: 0.5rem;32    width: 17rem;33    padding: 0.75rem;34    background: var(--vt-overlay-popover-background);35    border: 1px solid var(--vt-overlay-popover-border-color);36    border-radius: var(--vt-border-radius-lg);37}38 39.weekday {40    font-size: 0.75rem;41    text-align: center;42    color: var(--vt-text-muted-color);43}44 45.day {46    padding: 0.375rem 0;47    text-align: center;48    border-radius: var(--vt-border-radius-pill);49}50 51.day:hover {52    background: var(--vt-content-hover-background);53}54 55.today {56    color: var(--vt-primary-contrast-color);57    background: var(--vt-primary-color);58}59 60.today:hover {61    background: var(--vt-primary-hover-color);62}63</style>