mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 15:58:38 +01:00
63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { DatePicker as VCalendarDatePicker } from 'v-calendar'
|
|
import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
|
|
import 'v-calendar/dist/style.css'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
|
|
default: null
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:model-value', 'close'])
|
|
|
|
const date = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => {
|
|
emit('update:model-value', value)
|
|
emit('close')
|
|
}
|
|
})
|
|
|
|
const attrs = {
|
|
transparent: true,
|
|
borderless: true,
|
|
color: 'primary',
|
|
'is-dark': { selector: 'html', darkClass: 'dark' },
|
|
'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 }" />
|
|
</template>
|
|
|
|
<style>
|
|
:root {
|
|
--vc-gray-50: rgb(var(--color-gray-50));
|
|
--vc-gray-100: rgb(var(--color-gray-100));
|
|
--vc-gray-200: rgb(var(--color-gray-200));
|
|
--vc-gray-300: rgb(var(--color-gray-300));
|
|
--vc-gray-400: rgb(var(--color-gray-400));
|
|
--vc-gray-500: rgb(var(--color-gray-500));
|
|
--vc-gray-600: rgb(var(--color-gray-600));
|
|
--vc-gray-700: rgb(var(--color-gray-700));
|
|
--vc-gray-800: rgb(var(--color-gray-800));
|
|
--vc-gray-900: rgb(var(--color-gray-900));
|
|
}
|
|
|
|
.vc-primary {
|
|
--vc-accent-50: rgb(var(--color-primary-50));
|
|
--vc-accent-100: rgb(var(--color-primary-100));
|
|
--vc-accent-200: rgb(var(--color-primary-200));
|
|
--vc-accent-300: rgb(var(--color-primary-300));
|
|
--vc-accent-400: rgb(var(--color-primary-400));
|
|
--vc-accent-500: rgb(var(--color-primary-500));
|
|
--vc-accent-600: rgb(var(--color-primary-600));
|
|
--vc-accent-700: rgb(var(--color-primary-700));
|
|
--vc-accent-800: rgb(var(--color-primary-800));
|
|
--vc-accent-900: rgb(var(--color-primary-900));
|
|
}
|
|
</style> |