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

docs(date-picker): improve examples responsive

Browse Source
This commit is contained in:
Benjamin Canac
2024-02-28 11:13:13 +01:00
parent cdf6ff7152
commit 7dd9ee528e
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/components/content/examples/DatePickerRangeExample.vue
View File

@@ -27,8 +27,8 @@ function selectRange (duration: Duration) {
</UButton> </UButton>
<template #panel="{ close }"> <template #panel="{ close }">
<div class="flex items-center divide-x divide-gray-200 dark:divide-gray-800"> <div class="flex items-center sm:divide-x divide-gray-200 dark:divide-gray-800">
<div class="flex flex-col py-4"> <div class="hidden sm:flex flex-col py-4">
<UButton <UButton
v-for="(range, index) in ranges" v-for="(range, index) in ranges"
:key="index" :key="index"
@@ -37,6 +37,7 @@ function selectRange (duration: Duration) {
variant="ghost" variant="ghost"
class="rounded-none px-6" class="rounded-none px-6"
:class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']" :class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
truncate
@click="selectRange(range.duration)" @click="selectRange(range.duration)"
/> />
</div> </div>

7
docs/components/date-picker/DatePicker.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
import { DatePicker as VCalendarDatePicker } from 'v-calendar' import { DatePicker as VCalendarDatePicker } from 'v-calendar'
// @ts-ignore // @ts-ignore
import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker' import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
@@ -25,6 +26,10 @@ const date = computed({
} }
}) })
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanSm = breakpoints.smaller('sm')
const attrs = { const attrs = {
transparent: true, transparent: true,
borderless: true, borderless: true,
@@ -35,7 +40,7 @@ const attrs = {
</script> </script>
<template> <template>
<VCalendarDatePicker v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" /> <VCalendarDatePicker v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end" v-model.range="date" :columns="smallerThanSm ? 1 : 2" :rows="smallerThanSm ? 2 : 1" v-bind="{ ...attrs, ...$attrs }" />
<VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" /> <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
</template> </template>