* 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>
29 lines
754 B
Vue
29 lines
754 B
Vue
<script setup>
|
|
const emit = defineEmits(['clear', 'apply']);
|
|
|
|
const onClickClear = () => {
|
|
emit('clear');
|
|
};
|
|
|
|
const onClickApply = () => {
|
|
emit('change');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-[56px] flex justify-between px-5 py-3 items-center">
|
|
<button
|
|
class="p-1.5 rounded-lg w-fit text-sm font-medium text-slate-600 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-100"
|
|
@click="onClickClear"
|
|
>
|
|
{{ $t('DATE_PICKER.CLEAR_BUTTON') }}
|
|
</button>
|
|
<button
|
|
class="p-1.5 rounded-lg w-fit text-sm font-medium text-woot-500 dark:text-woot-300 hover:text-woot-700 dark:hover:text-woot-500"
|
|
@click="onClickApply"
|
|
>
|
|
{{ $t('DATE_PICKER.APPLY_BUTTON') }}
|
|
</button>
|
|
</div>
|
|
</template>
|