Skip to content

Commit

Permalink
fix: month and year popover (#317)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wasimTQ
wasimTQ authored Feb 2, 2024
1 parent a829212 commit 6d24fb8
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 26 deletions.
34 changes: 30 additions & 4 deletions apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
import type { Calendar } from 'v-calendar'
import { DatePicker } from 'v-calendar'
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
import { isVCalendarSlot } from '.'
import { buttonVariants } from '@/lib/registry/default/ui/button'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/lib/registry/default/ui/button'
/* Extracted from v-calendar */
type DatePickerModel = DatePickerDate | DatePickerRangeObject
Expand Down Expand Up @@ -100,19 +100,45 @@ const vCalendarSlots = computed(() => {
<template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
<slot :name="slot" v-bind="scope" />
</template>

<template #nav-prev-button>
<ChevronLeft />
</template>

<template #nav-next-button>
<ChevronRight />
</template>
</DatePicker>
</div>
</template>

<style lang="postcss">
<style lang="css">
.calendar {
@apply p-3 text-center;
}
.calendar .vc-pane-layout {
@apply grid gap-4;
}
.calendar .vc-title {
@apply text-sm font-medium pointer-events-none;
@apply text-sm font-medium relative z-20;
}
.vc-popover-content-wrapper .vc-popover-content {
@apply mt-3 rounded-md max-w-xs border bg-background;
}
.vc-popover-content-wrapper .vc-nav-header {
@apply flex justify-between items-center p-2;
}
.vc-popover-content-wrapper .vc-nav-items {
@apply grid grid-cols-4 gap-2 p-2;
}
.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
@apply rounded-md px-2 py-1;
}
.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
@apply text-muted-foreground bg-muted;
}
.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
@apply bg-primary text-primary-foreground;
}
.calendar .vc-pane-header-wrapper {
@apply hidden;
Expand Down
64 changes: 42 additions & 22 deletions apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
import type { Calendar } from 'v-calendar'
import { DatePicker } from 'v-calendar'
import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
import { isVCalendarSlot } from '.'
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
/* Extracted from v-calendar */
type DatePickerModel = DatePickerDate | DatePickerRangeObject
Expand All @@ -29,7 +29,8 @@ interface SimpleDateParts {
defineOptions({
inheritAttrs: false,
})
const props = withDefaults(defineProps< {
const props = withDefaults(defineProps<{
modelValue?: string | number | Date | DatePickerModel
modelModifiers?: object
columns?: number
Expand Down Expand Up @@ -89,8 +90,8 @@ const vCalendarSlots = computed(() => {

<DatePicker
ref="datePicker"
v-bind="$attrs"
v-model="modelValue"
v-bind="$attrs"
:model-modifiers="modelModifiers"
class="calendar"
trim-weeks
Expand All @@ -100,19 +101,45 @@ const vCalendarSlots = computed(() => {
<template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
<slot :name="slot" v-bind="scope" />
</template>

<template #nav-prev-button>
<ChevronLeft />
</template>

<template #nav-next-button>
<ChevronRight />
</template>
</DatePicker>
</div>
</template>

<style lang="postcss">
<style lang="css">
.calendar {
@apply p-3 text-center;
}
.calendar .vc-pane-layout {
@apply grid gap-4;
}
.calendar .vc-title {
@apply text-sm font-medium pointer-events-none;
@apply text-sm font-medium relative z-20;
}
.vc-popover-content-wrapper .vc-popover-content {
@apply mt-3 rounded-md max-w-xs border bg-background;
}
.vc-popover-content-wrapper .vc-nav-header {
@apply flex justify-between items-center p-2;
}
.vc-popover-content-wrapper .vc-nav-items {
@apply grid grid-cols-4 gap-2 p-2;
}
.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
@apply rounded-md px-2 py-1;
}
.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
@apply text-muted-foreground bg-muted;
}
.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
@apply bg-primary text-primary-foreground;
}
.calendar .vc-pane-header-wrapper {
@apply hidden;
Expand All @@ -124,14 +151,14 @@ const vCalendarSlots = computed(() => {
@apply flex;
}
.calendar .vc-weekday {
@apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
}
.calendar .vc-weekday-1 {
@apply pr-3;
}
.calendar .vc-weekday-7 {
@apply pl-3;
}
@apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
}
.calendar .vc-weekday-1 {
@apply pr-3;
}
.calendar .vc-weekday-7 {
@apply pl-3;
}
.calendar .vc-weeks {
@apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
}
Expand All @@ -151,7 +178,7 @@ const vCalendarSlots = computed(() => {
@apply rounded-md;
}
.calendar .vc-day-content {
@apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;
@apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
}
.calendar .vc-day-content:not(.vc-highlight-content-light) {
@apply rounded-md;
Expand All @@ -177,7 +204,6 @@ const vCalendarSlots = computed(() => {
--vc-slide-duration: 0.15s;
--vc-slide-timing: ease;
}
.calendar .vc-fade-enter-active,
.calendar .vc-fade-leave-active,
.calendar .vc-slide-left-enter-active,
Expand All @@ -204,7 +230,6 @@ const vCalendarSlots = computed(() => {
backface-visibility: hidden;
pointer-events: none;
}
.calendar .vc-none-leave-active,
.calendar .vc-fade-leave-active,
.calendar .vc-slide-left-leave-active,
Expand All @@ -214,7 +239,6 @@ const vCalendarSlots = computed(() => {
position: absolute !important;
width: 100%;
}
.calendar .vc-none-enter-from,
.calendar .vc-none-leave-to,
.calendar .vc-fade-enter-from,
Expand All @@ -231,31 +255,27 @@ const vCalendarSlots = computed(() => {
.calendar .vc-slide-fade-leave-to {
opacity: 0;
}
.calendar .vc-slide-left-enter-from,
.calendar .vc-slide-right-leave-to,
.calendar .vc-slide-fade-enter-from.direction-left,
.calendar .vc-slide-fade-leave-to.direction-left {
-webkit-transform: translateX(var(--vc-slide-translate));
transform: translateX(var(--vc-slide-translate));
}
.calendar .vc-slide-right-enter-from,
.calendar .vc-slide-left-leave-to,
.calendar .vc-slide-fade-enter-from.direction-right,
.calendar .vc-slide-fade-leave-to.direction-right {
-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
transform: translateX(calc(-1 * var(--vc-slide-translate)));
}
.calendar .vc-slide-up-enter-from,
.calendar .vc-slide-down-leave-to,
.calendar .vc-slide-fade-enter-from.direction-top,
.calendar .vc-slide-fade-leave-to.direction-top {
-webkit-transform: translateY(var(--vc-slide-translate));
transform: translateY(var(--vc-slide-translate));
}
.calendar .vc-slide-down-enter-from,
.calendar .vc-slide-up-leave-to,
.calendar .vc-slide-fade-enter-from.direction-bottom,
Expand Down

0 comments on commit 6d24fb8

Please sign in to comment.