feat(Calendar): slot export (#851)

* feat: expose Calendar fields in slots * docs: generate docs for slot props
radix-vue · Apr 16, 2024 · e21c8ca · e21c8ca
1 parent 3a6c377
commit e21c8ca
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 2 deletions.
diff --git a/docs/content/meta/CalendarRoot.md b/docs/content/meta/CalendarRoot.md
@@ -181,5 +181,20 @@
     'name': 'weekDays',
     'description': '<p>The days of the week</p>\n',
     'type': 'string[]'
+  },
+  {
+    'name': 'weekStartsOn',
+    'description': '<p>The start of the week</p>\n',
+    'type': '0 | 1 | 2 | 3 | 4 | 5 | 6'
+  },
+  {
+    'name': 'locale',
+    'description': '<p>The calendar locale</p>\n',
+    'type': 'string'
+  },
+  {
+    'name': 'fixedWeeks',
+    'description': '<p>Whether or not to always display 6 weeks in the calendar</p>\n',
+    'type': 'boolean'
   }
 ]" />
diff --git a/docs/content/meta/DatePickerCalendar.md b/docs/content/meta/DatePickerCalendar.md
@@ -16,5 +16,20 @@
     'name': 'weekDays',
     'description': '',
     'type': 'string[]'
+  },
+  {
+    'name': 'weekStartsOn',
+    'description': '',
+    'type': '0 | 1 | 2 | 3 | 4 | 5 | 6'
+  },
+  {
+    'name': 'locale',
+    'description': '',
+    'type': 'string'
+  },
+  {
+    'name': 'fixedWeeks',
+    'description': '',
+    'type': 'boolean'
   }
 ]" />
diff --git a/docs/content/meta/DateRangePickerCalendar.md b/docs/content/meta/DateRangePickerCalendar.md
@@ -16,5 +16,20 @@
     'name': 'weekDays',
     'description': '',
     'type': 'string[]'
+  },
+  {
+    'name': 'weekStartsOn',
+    'description': '',
+    'type': '0 | 1 | 2 | 3 | 4 | 5 | 6'
+  },
+  {
+    'name': 'locale',
+    'description': '',
+    'type': 'string'
+  },
+  {
+    'name': 'fixedWeeks',
+    'description': '',
+    'type': 'boolean'
   }
 ]" />
diff --git a/docs/content/meta/RangeCalendarRoot.md b/docs/content/meta/RangeCalendarRoot.md
@@ -180,5 +180,20 @@
     'name': 'weekDays',
     'description': '<p>The days of the week</p>\n',
     'type': 'string[]'
+  },
+  {
+    'name': 'weekStartsOn',
+    'description': '<p>The start of the week</p>\n',
+    'type': '0 | 1 | 2 | 3 | 4 | 5 | 6'
+  },
+  {
+    'name': 'locale',
+    'description': '<p>The calendar locale</p>\n',
+    'type': 'string'
+  },
+  {
+    'name': 'fixedWeeks',
+    'description': '<p>Whether or not to always display 6 weeks in the calendar</p>\n',
+    'type': 'boolean'
   }
 ]" />
diff --git a/packages/radix-vue/src/Calendar/CalendarRoot.vue b/packages/radix-vue/src/Calendar/CalendarRoot.vue
@@ -142,6 +142,12 @@ defineSlots<{
     grid: Grid<DateValue>[]
     /** The days of the week */
     weekDays: string[]
+    /** The start of the week */
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
+    /** The calendar locale */
+    locale: string
+    /** Whether or not to always display 6 weeks in the calendar */
+    fixedWeeks: boolean
   }): any
 }>()
 
@@ -328,6 +334,9 @@ provideCalendarRootContext({
       :date="placeholder"
       :grid="grid"
       :week-days="weekdays"
+      :week-starts-on="weekStartsOn"
+      :locale="locale"
+      :fixed-weeks="fixedWeeks"
     />
     <div
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"

diff --git a/packages/radix-vue/src/DatePicker/DatePickerCalendar.vue b/packages/radix-vue/src/DatePicker/DatePickerCalendar.vue
@@ -10,7 +10,7 @@ const rootContext = injectDatePickerRootContext()
 
 <template>
   <CalendarRoot
-    v-slot="{ weekDays, grid, date }"
+    v-slot="{ weekDays, grid, date, weekStartsOn, locale, fixedWeeks }"
     v-bind="{
       isDateDisabled: rootContext.isDateDisabled,
       isDateUnavailable: rootContext.isDateUnavailable,
@@ -44,6 +44,9 @@ const rootContext = injectDatePickerRootContext()
       :date="date"
       :grid="grid"
       :week-days="weekDays"
+      :week-starts-on="weekStartsOn"
+      :locale="locale"
+      :fixed-weeks="fixedWeeks"
     />
   </CalendarRoot>
 </template>
diff --git a/packages/radix-vue/src/DateRangePicker/DateRangePickerCalendar.vue b/packages/radix-vue/src/DateRangePicker/DateRangePickerCalendar.vue
@@ -10,7 +10,7 @@ const rootContext = injectDateRangePickerRootContext()
 
 <template>
   <RangeCalendarRoot
-    v-slot="{ weekDays, grid, date }"
+    v-slot="{ weekDays, grid, date, weekStartsOn, locale, fixedWeeks }"
     v-bind="{
       isDateDisabled: rootContext.isDateDisabled,
       isDateUnavailable: rootContext.isDateUnavailable,
@@ -46,6 +46,9 @@ const rootContext = injectDateRangePickerRootContext()
       :date="date"
       :grid="grid"
       :week-days="weekDays"
+      :week-starts-on="weekStartsOn"
+      :locale="locale"
+      :fixed-weeks="fixedWeeks"
     />
   </RangeCalendarRoot>
 </template>
diff --git a/packages/radix-vue/src/RangeCalendar/RangeCalendarRoot.vue b/packages/radix-vue/src/RangeCalendar/RangeCalendarRoot.vue
@@ -137,6 +137,12 @@ defineSlots<{
     grid: Grid<DateValue>[]
     /** The days of the week */
     weekDays: string[]
+    /** The start of the week */
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
+    /** The calendar locale */
+    locale: string
+    /** Whether or not to always display 6 weeks in the calendar */
+    fixedWeeks: boolean
   }): any
 }>()
 
@@ -343,6 +349,9 @@ onMounted(() => {
       :date="placeholder"
       :grid="grid"
       :week-days="weekdays"
+      :week-starts-on="weekStartsOn"
+      :locale="locale"
+      :fixed-weeks="fixedWeeks"
     />
   </Primitive>
 </template>