docs(date-picker): improve component

Resolves #2082

docs/components/date-picker/DatePicker.vue

@@ -1,5 +1,4 @@
 <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'
@@ -26,10 +25,6 @@ const date = computed({
   }
 })
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-const smallerThanSm = breakpoints.smaller('sm')
-
 const attrs = {
   'transparent': true,
   'borderless': true,
@@ -40,8 +35,17 @@ const attrs = {
 </script>
 
 <template>
-  <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-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end"
+    v-model.range="date"
+    :columns="2"
+    v-bind="{ ...attrs, ...$attrs }"
+  />
+  <VCalendarDatePicker
+    v-else
+    v-model="date"
+    v-bind="{ ...attrs, ...$attrs }"
+  />
 </template>
 
 <style>

docs/content/2.components/date-picker.md

@@ -38,9 +38,14 @@ The following example is styled based on the `primary` and `gray` colors and sup
 ```vue [components/DatePicker.vue]
 <script setup lang="ts">
 import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+// @ts-ignore
 import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
 import 'v-calendar/dist/style.css'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = defineProps({
   modelValue: {
     type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
@@ -59,17 +64,26 @@ const date = computed({
 })
 
 const attrs = {
-  transparent: true,
-  borderless: true,
-  color: 'primary',
+  'transparent': true,
+  'borderless': true,
+  'color': 'primary',
   'is-dark': { selector: 'html', darkClass: 'dark' },
-  'first-day-of-week': 2,
+  'first-day-of-week': 2
 }
 </script>
 
 <template>
-  <VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" />
-  <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
+  <VCalendarDatePicker
+    v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end"
+    v-model.range="date"
+    :columns="2"
+    v-bind="{ ...attrs, ...$attrs }"
+  />
+  <VCalendarDatePicker
+    v-else
+    v-model="date"
+    v-bind="{ ...attrs, ...$attrs }"
+  />
 </template>
 
 <style>