28728635c9
* feat: Custom date picker * chore: Calender footer * chore: Minor fix * chore: Reset date picker * chore: Minor fix * feat: Toggle button * chore: Clean up * chore: Use font inter * chore: Cleanup and fix bugs * fix: custom date range reset the calendar * chore: fix logic bug * feat: Add manual date range * fix: styles in rtl * chore: Helper specs * chore: Clean up * chore: Review fixes * chore: remove magic strings * chore: Add comments * chore: Review fixes * chore: Clean up * chore: remove magic strings * fix: Use outline instead of border * chore: Minor style fix * chore: disable pointer events for the disabled dates * chore: Fix code climate --------- Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<script setup>
|
|
import { CALENDAR_PERIODS } from '../helpers/DatePickerHelper';
|
|
|
|
defineProps({
|
|
calendarType: {
|
|
type: String,
|
|
default: 'start',
|
|
},
|
|
firstButtonLabel: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
buttonLabel: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
viewMode: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
const emit = defineEmits(['prev', 'next', 'set-view']);
|
|
|
|
const { YEAR } = CALENDAR_PERIODS;
|
|
|
|
const onClickPrev = type => {
|
|
emit('prev', type);
|
|
};
|
|
|
|
const onClickNext = type => {
|
|
emit('next', type);
|
|
};
|
|
|
|
const onClickSetView = (type, mode) => {
|
|
emit('set-view', type, mode);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-start justify-between w-full h-9">
|
|
<button
|
|
class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
|
|
@click="onClickPrev(calendarType)"
|
|
>
|
|
<fluent-icon
|
|
icon="chevron-left"
|
|
size="14"
|
|
class="text-slate-900 dark:text-slate-50"
|
|
/>
|
|
</button>
|
|
<div class="flex items-center gap-1">
|
|
<button
|
|
v-if="firstButtonLabel"
|
|
class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50 hover:text-woot-600 dark:hover:text-woot-600"
|
|
@click="onClickSetView(calendarType, viewMode)"
|
|
>
|
|
{{ firstButtonLabel }}
|
|
</button>
|
|
<button
|
|
v-if="buttonLabel"
|
|
class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50"
|
|
:class="{ 'hover:text-woot-600 dark:hover:text-woot-600': viewMode }"
|
|
@click="onClickSetView(calendarType, YEAR)"
|
|
>
|
|
{{ buttonLabel }}
|
|
</button>
|
|
</div>
|
|
<button
|
|
class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
|
|
@click="onClickNext(calendarType)"
|
|
>
|
|
<fluent-icon
|
|
icon="chevron-right"
|
|
size="14"
|
|
class="text-slate-900 dark:text-slate-50"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</template>
|