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

docs(date-picker): improve component

Browse Source 
Resolves #2082
This commit is contained in:
Benjamin Canac
2024-11-05 17:35:49 +01:00
parent c5f76a25db
commit 22da1a839a
2 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

26
docs/content/2.components/date-picker.md
View File

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