feat(Calendar/DatePicker): expose more attribute as slotProps

unovue · Feb 18, 2025 · 357b6b8 · 357b6b8
1 parent 9d9582b
commit 357b6b8
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 2 deletions.
diff --git a/docs/content/meta/CalendarCellTrigger.md b/docs/content/meta/CalendarCellTrigger.md
@@ -38,5 +38,30 @@
     'name': 'disabled',
     'description': '<p>Current disable state</p>\n',
     'type': 'boolean'
+  },
+  {
+    'name': 'selected',
+    'description': '<p>Current selected state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'today',
+    'description': '<p>Current today state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'outsideView',
+    'description': '<p>Current outside view state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'outsideVisibleView',
+    'description': '<p>Current outside visible view state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'unavailable',
+    'description': '<p>Current unavailable state</p>\n',
+    'type': 'boolean'
   }
 ]" />
diff --git a/docs/content/meta/DatePickerCellTrigger.md b/docs/content/meta/DatePickerCellTrigger.md
@@ -38,5 +38,30 @@
     'name': 'disabled',
     'description': '<p>Current disable state</p>\n',
     'type': 'boolean'
+  },
+  {
+    'name': 'selected',
+    'description': '<p>Current selected state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'today',
+    'description': '<p>Current today state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'outsideView',
+    'description': '<p>Current outside view state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'outsideVisibleView',
+    'description': '<p>Current outside visible view state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'unavailable',
+    'description': '<p>Current unavailable state</p>\n',
+    'type': 'boolean'
   }
 ]" />
diff --git a/docs/content/meta/DateRangePickerCellTrigger.md b/docs/content/meta/DateRangePickerCellTrigger.md
@@ -38,5 +38,55 @@
     'name': 'disabled',
     'description': '<p>Current disable state</p>\n',
     'type': 'boolean'
+  },
+  {
+    'name': 'selected',
+    'description': '<p>Current selected state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'today',
+    'description': '<p>Current today state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'outsideView',
+    'description': '<p>Current outside view state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'outsideVisibleView',
+    'description': '<p>Current outside visible view state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'unavailable',
+    'description': '<p>Current unavailable state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'highlighted',
+    'description': '<p>Current highlighted state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'highlightedStart',
+    'description': '<p>Current highlighted start state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'highlightedEnd',
+    'description': '<p>Current highlighted end state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'selectionStart',
+    'description': '<p>Current selection start state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'selectionEnd',
+    'description': '<p>Current selection end state</p>\n',
+    'type': 'boolean'
   }
 ]" />
diff --git a/docs/content/meta/RangeCalendarCellTrigger.md b/docs/content/meta/RangeCalendarCellTrigger.md
@@ -38,5 +38,55 @@
     'name': 'disabled',
     'description': '<p>Current disable state</p>\n',
     'type': 'boolean'
+  },
+  {
+    'name': 'selected',
+    'description': '<p>Current selected state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'today',
+    'description': '<p>Current today state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'outsideView',
+    'description': '<p>Current outside view state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'outsideVisibleView',
+    'description': '<p>Current outside visible view state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'unavailable',
+    'description': '<p>Current unavailable state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'highlighted',
+    'description': '<p>Current highlighted state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'highlightedStart',
+    'description': '<p>Current highlighted start state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'highlightedEnd',
+    'description': '<p>Current highlighted end state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'selectionStart',
+    'description': '<p>Current selection start state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'selectionEnd',
+    'description': '<p>Current selection end state</p>\n',
+    'type': 'boolean'
   }
 ]" />
diff --git a/packages/core/src/Calendar/CalendarCellTrigger.vue b/packages/core/src/Calendar/CalendarCellTrigger.vue
@@ -24,6 +24,16 @@ export interface CalendarCellTriggerSlot {
     dayValue: string
     /** Current disable state */
     disabled: boolean
+    /** Current selected state */
+    selected: boolean
+    /** Current today state */
+    today: boolean
+    /** Current outside view state */
+    outsideView: boolean
+    /** Current outside visible view state */
+    outsideVisibleView: boolean
+    /** Current unavailable state */
+    unavailable: boolean
   }) => any
 }
 </script>
@@ -56,7 +66,7 @@ const labelText = computed(() => {
 
 const isDisabled = computed(() => rootContext.isDateDisabled(props.day))
 const isUnavailable = computed(() =>
-  rootContext.isDateUnavailable?.(props.day),
+  rootContext.isDateUnavailable?.(props.day) ?? false,
 )
 const isDateToday = computed(() => {
   return isToday(props.day, getLocalTimeZone())
@@ -179,6 +189,11 @@ function handleArrowKey(e: KeyboardEvent) {
     <slot
       :day-value="dayValue"
       :disabled="isDisabled"
+      :today="isDateToday"
+      :selected="isSelectedDate"
+      :outside-view="isOutsideView"
+      :outside-visible-view="isOutsideVisibleView"
+      :unavailable="isUnavailable"
     >
       {{ dayValue }}
     </slot>

diff --git a/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue b/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue
@@ -22,6 +22,27 @@ export interface RangeCalendarCellTriggerSlot {
     dayValue: string
     /** Current disable state */
     disabled: boolean
+    /** Current selected state */
+    selected: boolean
+    /** Current today state */
+    today: boolean
+    /** Current outside view state */
+    outsideView: boolean
+    /** Current outside visible view state */
+    outsideVisibleView: boolean
+    /** Current unavailable state */
+    unavailable: boolean
+    /** Current highlighted state */
+    highlighted: boolean
+    /** Current highlighted start state */
+    highlightedStart: boolean
+    /** Current highlighted end state */
+    highlightedEnd: boolean
+    /** Current selection start state */
+    selectionStart: boolean
+    /** Current selection end state */
+    selectionEnd: boolean
+
   }) => any
 }
 </script>
@@ -47,7 +68,7 @@ const labelText = computed(() => rootContext.formatter.custom(toDate(props.day),
 }))
 
 const isDisabled = computed(() => rootContext.isDateDisabled(props.day))
-const isUnavailable = computed(() => rootContext.isDateUnavailable?.(props.day))
+const isUnavailable = computed(() => rootContext.isDateUnavailable?.(props.day) ?? false)
 const isSelectedDate = computed(() => rootContext.isSelected(props.day))
 const isSelectionStart = computed(() => rootContext.isSelectionStart(props.day))
 const isSelectionEnd = computed(() => rootContext.isSelectionEnd(props.day))
@@ -223,6 +244,16 @@ function handleArrowKey(e: KeyboardEvent) {
     <slot
       :day-value="dayValue"
       :disabled="isDisabled"
+      :today="isDateToday"
+      :selected="isSelectedDate"
+      :outside-view="isOutsideView"
+      :outside-visible-view="isOutsideVisibleView"
+      :unavailable="isUnavailable"
+      :highlighted="isHighlighted && !isUnavailable"
+      :highlighted-start="isHighlightStart"
+      :highlighted-end="isHighlightEnd"
+      :selection-start="isSelectionStart"
+      :selection-end="isSelectionEnd"
     >
       {{ dayValue }}
     </slot>