From 09b755ac082938a0c190adcf5bff3319731002eb Mon Sep 17 00:00:00 2001 From: Mike Newbon Date: Fri, 3 Oct 2025 23:06:55 +0200 Subject: [PATCH 1/3] Update the calender component to support 'variant' property, updated the theme doc for compound variants, updated the docs with a practical example and update the tests with variants and updated the snapshot. --- docs/content/docs/2.components/calendar.md | 22 + .../nuxt/app/pages/components/calendar.vue | 3 + src/runtime/components/Calendar.vue | 7 +- src/theme/calendar.ts | 66 +- test/components/Calendar.spec.ts | 2 + .../__snapshots__/Calendar.spec.ts.snap | 3302 ++++++++++------- 6 files changed, 2100 insertions(+), 1302 deletions(-) diff --git a/docs/content/docs/2.components/calendar.md b/docs/content/docs/2.components/calendar.md index ed187da943..b41625ab36 100644 --- a/docs/content/docs/2.components/calendar.md +++ b/docs/content/docs/2.components/calendar.md @@ -101,6 +101,28 @@ props: --- :: +### Variant + +Use the `variant` prop to change the variant of the calendar. + +::component-code +--- +cast: + defaultValue: DateRange +hide: + - range + - defaultValue + - defaultValue.start + - defaultValue.end +props: + variant: subtle + range: true + defaultValue: + start: [2022, 2, 3] + end: [2022, 2, 20] +--- +:: + ### Size Use the `size` prop to change the size of the calendar. diff --git a/playgrounds/nuxt/app/pages/components/calendar.vue b/playgrounds/nuxt/app/pages/components/calendar.vue index 622c8cd8aa..57f54e530e 100644 --- a/playgrounds/nuxt/app/pages/components/calendar.vue +++ b/playgrounds/nuxt/app/pages/components/calendar.vue @@ -10,10 +10,12 @@ const rangeValue = shallowRef({ }) const colors = Object.keys(theme.variants.color) +const variants = Object.keys(theme.variants.variant) const sizes = Object.keys(theme.variants.size) const attrs = reactive({ color: [theme.defaultVariants.color], + variant: [theme.defaultVariants.variant], size: [theme.defaultVariants.size] }) @@ -24,6 +26,7 @@ const range = ref(false)