docs(VCalendar): fix api types

Author: johnleider

packages/api-generator/src/locale/en/VCalendar.json

@@ -0,0 +1,9 @@
+{
+  "props": {
+    "hideDayHeader": "Determines whether the day header is visible in the calendar day view.",
+    "intervals": "Specifies the total number of time intervals for the day in the calendar view."
+  },
+  "exposed": {
+    "intervals": "Computed reference containing details about each interval in the day view."
+  }
+}

packages/api-generator/src/locale/en/VCalendarDaily.json

@@ -0,0 +1,12 @@
+{
+  "props": {
+    "nextIcon": "The icon to use for the next button.",
+    "prevIcon": "The icon to use for the prev button.",
+    "viewMode": "The current view mode of the calendar."
+  },
+  "events": {
+    "click:next": "Event emitted when clicking the next button.",
+    "click:prev": "Event emitted when clicking the prev button.",
+    "click:toToday": "Event emitted when clicking the today button."
+  }
+}

packages/api-generator/src/locale/en/VCalendarDay.json

@@ -0,0 +1,16 @@
+{
+  "props": {
+    "day": "Represents the specific day associated with the interval.",
+    "dayIndex": "Index of the day this interval is a part of, in a week or month view.",
+    "events": "Array of events specific to this interval.",
+    "index": "Index or position of the interval in the day view.",
+    "intervalDivisions": "Number of subdivisions within this interval.",
+    "intervalDuration": "Duration of this specific interval in minutes.",
+    "intervalFormat": "Formatting rule for displaying the interval, as a string or function.",
+    "intervalHeight": "Height of the interval in pixels in the calendar view.",
+    "intervalStart": "Starting time for this specific interval."
+  },
+  "exposed": {
+    "interval": "Computed reference for the interval, including label, start and end times, and associated events."
+  }
+}

packages/api-generator/src/locale/en/VCalendarHeader.json

@@ -0,0 +1,10 @@
+{
+  "props": {
+    "allDay": "Indicates whether the event spans the entire day.",
+    "event": "The event object associated with this calendar interval.",
+    "interval": "The specific time interval this event is associated with.",
+    "intervalDivisions": "Number of subdivisions within the interval for this event.",
+    "intervalDuration": "Duration of the interval in which this event occurs, in minutes.",
+    "intervalHeight": "Height of the interval in the calendar view, in pixels."
+  }
+}

packages/api-generator/src/locale/en/VCalendarInterval.json

@@ -0,0 +1,9 @@
+{
+  "props": {
+    "day": "Represents the specific day in the month view of the calendar.",
+    "events": "Array of events associated with this specific day."
+  },
+  "slots": {
+    "content": "Slot for custom content related to the day in the month view."
+  }
+}

packages/api-generator/src/locale/en/VCalendarIntervalEvent.json

@@ -3,7 +3,7 @@ import './VCalendar.sass'
 
 // Components
 import { makeVCalendarDayProps, VCalendarDay } from './VCalendarDay'
-import { VCalendarHeader } from './VCalendarHeader'
+import { makeVCalendarHeaderProps, VCalendarHeader } from './VCalendarHeader'
 import { VCalendarMonthDay } from './VCalendarMonthDay'
 
 // Composables
@@ -17,21 +17,14 @@ import { chunkArray, genericComponent, propsFactory, useRender } from '@/util'
 export const makeVCalendarProps = propsFactory({
   hideHeader: Boolean,
   hideWeekNumber: Boolean,
-  title: String,
-  type: {
-    type: String,
-    default: 'month',
-    validator (val: string) {
-      return ['month', 'week', 'day'].includes(val)
-    },
-  },
   weekdays: {
     type: Array<number>,
     default: () => [0, 1, 2, 3, 4, 5, 6],
   },
 
   ...makeCalendarProps(),
   ...makeVCalendarDayProps(),
+  ...makeVCalendarHeaderProps(),
 }, 'VCalender')
 
 export type VCalendarSlots = {
@@ -57,25 +50,25 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
     const dayNames = adapter.getWeekdays()
 
     function onClickNext () {
-      if (props.type === 'month') {
+      if (props.viewMode === 'month') {
         model.value = [adapter.addMonths(model.value[0], 1)]
       }
-      if (props.type === 'week') {
+      if (props.viewMode === 'week') {
         model.value = [adapter.addDays(model.value[0], 7)]
       }
-      if (props.type === 'day') {
+      if (props.viewMode === 'day') {
         model.value = [adapter.addDays(model.value[0], 1)]
       }
     }
 
     function onClickPrev () {
-      if (props.type === 'month') {
+      if (props.viewMode === 'month') {
         model.value = [adapter.addMonths(model.value[0], -1)]
       }
-      if (props.type === 'week') {
+      if (props.viewMode === 'week') {
         model.value = [adapter.addDays(model.value[0], -7)]
       }
-      if (props.type === 'day') {
+      if (props.viewMode === 'day') {
         model.value = [adapter.addDays(model.value[0], -1)]
       }
     }
@@ -90,14 +83,15 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
 
     useRender(() => {
       const calendarDayProps = VCalendarDay.filterProps(props)
+      const calendarHeaderProps = VCalendarHeader.filterProps(props)
 
       return (
         <div class={[
           'v-calendar',
           {
-            'v-calendar-monthly': props.type === 'month',
-            'v-calendar-weekly': props.type === 'week',
-            'v-calendar-day': props.type === 'day',
+            'v-calendar-monthly': props.viewMode === 'month',
+            'v-calendar-weekly': props.viewMode === 'week',
+            'v-calendar-day': props.viewMode === 'day',
           },
         ]}
         >
@@ -106,6 +100,7 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
               !slots.header ? (
                 <VCalendarHeader
                   key="calendar-header"
+                  { ...calendarHeaderProps }
                   title={ title.value }
                   onClick:next={ onClickNext }
                   onClick:prev={ onClickPrev }
@@ -118,7 +113,7 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
           </div>
 
           <div class="v-calendar__container">
-            { props.type === 'month' && !props.hideDayHeader && (
+            { props.viewMode === 'month' && !props.hideDayHeader && (
               <div
                 class={
                   [
@@ -140,7 +135,7 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
               </div>
             )}
 
-            { props.type === 'month' && (
+            { props.viewMode === 'month' && (
               <div
                 key="VCalendarMonth"
                 class={
@@ -169,7 +164,7 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
               </div>
             )}
 
-            { props.type === 'week' && (
+            { props.viewMode === 'week' && (
               daysInWeek.value.map((day, i) => (
                 <VCalendarDay
                   { ...calendarDayProps }
@@ -180,7 +175,7 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
               ))
             )}
 
-            { props.type === 'day' && (
+            { props.viewMode === 'day' && (
               <VCalendarDay
                 { ...calendarDayProps }
                 day={ genDays([model.value[0] as Date], adapter.date() as Date)[0] }

packages/api-generator/src/locale/en/VCalendarMonthDay.json

@@ -10,13 +10,16 @@ import { useLocale } from '@/composables/locale'
 // Utilities
 import { genericComponent, propsFactory, useRender } from '@/util'
 
+// Types
+import type { PropType } from 'vue'
+
 export const makeVCalendarHeaderProps = propsFactory({
   nextIcon: {
-    type: [String],
+    type: String,
     default: '$next',
   },
   prevIcon: {
-    type: [String],
+    type: String,
     default: '$prev',
   },
   title: String,
@@ -25,7 +28,7 @@ export const makeVCalendarHeaderProps = propsFactory({
     default: '$vuetify.calendar.today',
   },
   viewMode: {
-    type: String,
+    type: String as PropType<'month' | 'week' | 'day'>,
     default: 'month',
   },
 }, 'VCalendarHeader')