Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clicking of month selection and styling of popover

Browse Source
This commit is contained in:
wasimTQ 2024-02-01 20:33:57 +08:00
parent 8875261576
commit 5479324bcd
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
View File

@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
import type { Calendar } from 'v-calendar' import type { Calendar } from 'v-calendar'
import { DatePicker } from 'v-calendar' import { DatePicker } from 'v-calendar'
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
import { computed, nextTick, onMounted, ref, useSlots } from 'vue' import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
import { isVCalendarSlot } from '.' import { isVCalendarSlot } from '.'
import { buttonVariants } from '@/lib/registry/default/ui/button'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { buttonVariants } from '@/lib/registry/default/ui/button'
/* Extracted from v-calendar */ /* Extracted from v-calendar */
type DatePickerModel = DatePickerDate | DatePickerRangeObject type DatePickerModel = DatePickerDate | DatePickerRangeObject
@ -105,7 +105,7 @@ const vCalendarSlots = computed(() => {
</div> </div>
</template> </template>
<style lang="postcss"> <style lang="css">
.calendar { .calendar {
@apply p-3 text-center; @apply p-3 text-center;
} }
@ -113,7 +113,25 @@ const vCalendarSlots = computed(() => {
@apply grid gap-4; @apply grid gap-4;
} }
.calendar .vc-title { .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 rounded-md max-w-xs border bg-slate-700;
}
.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 { .calendar .vc-pane-header-wrapper {
@apply hidden; @apply hidden;