From 7dd9ee528e3496fe357d9734904bf5e8bd8c8c89 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 28 Feb 2024 11:13:13 +0100
Subject: [PATCH] docs(date-picker): improve examples responsive

---
 .../components/content/examples/DatePickerRangeExample.vue | 5 +++--
 docs/components/date-picker/DatePicker.vue                 | 7 ++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/components/content/examples/DatePickerRangeExample.vue b/docs/components/content/examples/DatePickerRangeExample.vue
index 37c0992a..657b78ac 100644
--- a/docs/components/content/examples/DatePickerRangeExample.vue
+++ b/docs/components/content/examples/DatePickerRangeExample.vue
@@ -27,8 +27,8 @@ function selectRange (duration: Duration) {
     </UButton>
 
     <template #panel="{ close }">
-      <div class="flex items-center divide-x divide-gray-200 dark:divide-gray-800">
-        <div class="flex flex-col py-4">
+      <div class="flex items-center sm:divide-x divide-gray-200 dark:divide-gray-800">
+        <div class="hidden sm:flex flex-col py-4">
           <UButton
             v-for="(range, index) in ranges"
             :key="index"
@@ -37,6 +37,7 @@ function selectRange (duration: Duration) {
             variant="ghost"
             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']"
+            truncate
             @click="selectRange(range.duration)"
           />
         </div>
diff --git a/docs/components/date-picker/DatePicker.vue b/docs/components/date-picker/DatePicker.vue
index 3a64cae1..ad3168c8 100644
--- a/docs/components/date-picker/DatePicker.vue
+++ b/docs/components/date-picker/DatePicker.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
 import { DatePicker as VCalendarDatePicker } from 'v-calendar'
 // @ts-ignore
 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 = {
   transparent: true,
   borderless: true,
@@ -35,7 +40,7 @@ const attrs = {
 </script>
 
 <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 }" />
 </template>