Skip to content

Commit

Permalink
feat(types): expose public interfaces for props and slots (#9763)
Browse files Browse the repository at this point in the history 
* refactor(types); extract public interfaces for VCalendar

* refactor(types); extract public interfaces for VData*

* refactor(types); extract public interfaces for VTreeview

* refactor(types); extract public interfaces for VDatePicker

* refactor(types); extract public interfaces for validatable

* chore: remove path alias

* chore: .ts => .d.ts

* export Touch directive types, some additional tweak

* chore: code style

* fix: @

* changed PropValidator to PropType, import PropType from vue

* refactor: move all public types to types/index.d.ts

* feat: add ItemPerPageOption interface

* fix: typo in interface name

* revert: unpublish some interfaces

* refactor: rename public interfaces

* feat: moar interfaces
  • Loading branch information
@jacekkarczmarczyk @johnleider
jacekkarczmarczyk authored and johnleider committed Dec 2, 2019
1 parent 2dba817 commit b03b507
Show file tree
Hide file tree
Showing 73 changed files with 612 additions and 590 deletions.
7 changes: 3 additions & 4 deletions packages/vuetify/src/components/VBanner/VBanner.ts
View file
Expand Up @@ -13,9 +13,8 @@ import { VExpandTransition } from '../transitions'
import Toggleable from '../../mixins/toggleable'

// Types
import { VNode } from 'vue/types'
import { VNode, PropType } from 'vue'
import mixins from '../../util/mixins'
import { PropValidator } from 'vue/types/options'

/* @vue/component */
export default mixins(
Expand All @@ -30,9 +29,9 @@ export default mixins(
icon: String,
iconColor: String,
mobileBreakPoint: {
type: [Number, String],
type: [Number, String] as PropType<string | number>,
default: 960,
} as PropValidator<string | number>,
},
singleLine: Boolean,
sticky: Boolean,
tile: {
Expand Down
7 changes: 3 additions & 4 deletions packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.ts
View file
Expand Up @@ -2,8 +2,7 @@
import './VBreadcrumbs.sass'

// Types
import { VNode } from 'vue'
import { PropValidator } from 'vue/types/options'
import { VNode, PropType } from 'vue'

// Components
import VBreadcrumbsItem from './VBreadcrumbsItem'
Expand All @@ -27,9 +26,9 @@ export default mixins(
default: '/',
},
items: {
type: Array,
type: Array as PropType<any[]>,
default: () => ([]),
} as PropValidator<any[]>,
},
large: Boolean,
},

Expand Down
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VBtn/VBtn.ts
View file
Expand Up @@ -20,7 +20,7 @@ import { breaking } from '../../util/console'

// Types
import { VNode } from 'vue'
import { PropValidator } from 'vue/types/options'
import { PropValidator, PropType } from 'vue/types/options'
import { RippleOptions } from '../../directives/ripple'

const baseMixins = mixins(
Expand Down Expand Up @@ -65,7 +65,7 @@ export default baseMixins.extend<options>().extend({
type: String,
default: 'button',
},
value: null as any as PropValidator<any>,
value: null as any as PropType<any>,
},

data: () => ({
Expand Down
18 changes: 9 additions & 9 deletions packages/vuetify/src/components/VCalendar/VCalendar.ts
View file
Expand Up @@ -13,8 +13,6 @@ import {
DAYS_IN_MONTH_MAX,
DAY_MIN,
DAYS_IN_WEEK,
VTimestamp,
VTime,
parseTimestamp,
validateTimestamp,
relativeDays,
Expand All @@ -26,17 +24,19 @@ import {
updateRelative,
getStartOfMonth,
getEndOfMonth,
VTime,
} from './util/timestamp'

// Calendars
import VCalendarMonthly from './VCalendarMonthly'
import VCalendarDaily from './VCalendarDaily'
import VCalendarWeekly from './VCalendarWeekly'
import { CalendarTimestamp } from 'types'

// Types
interface VCalendarRenderProps {
start: VTimestamp
end: VTimestamp
start: CalendarTimestamp
end: CalendarTimestamp
component: string | Component
maxDays: number
}
Expand All @@ -52,15 +52,15 @@ export default CalendarWithEvents.extend({
},

data: () => ({
lastStart: null as VTimestamp | null,
lastEnd: null as VTimestamp | null,
lastStart: null as CalendarTimestamp | null,
lastEnd: null as CalendarTimestamp | null,
}),

computed: {
parsedValue (): VTimestamp {
parsedValue (): CalendarTimestamp {
return (validateTimestamp(this.value)
? parseTimestamp(this.value)
: (this.parsedStart || this.times.today)) as VTimestamp
: (this.parsedStart || this.times.today)) as CalendarTimestamp
},
renderProps (): VCalendarRenderProps {
const around = this.parsedValue
Expand Down Expand Up @@ -216,7 +216,7 @@ export default CalendarWithEvents.extend({
}],
on: {
...this.$listeners,
'click:date': (day: VTimestamp) => {
'click:date': (day: CalendarTimestamp) => {
if (this.$listeners['input']) {
this.$emit('input', day.date)
}
Expand Down
16 changes: 8 additions & 8 deletions packages/vuetify/src/components/VCalendar/VCalendarDaily.ts
View file
Expand Up @@ -15,7 +15,7 @@ import CalendarWithIntervals from './mixins/calendar-with-intervals'

// Util
import { convertToUnit } from '../../util/helpers'
import { VTimestamp } from './util/timestamp'
import { CalendarTimestamp } from 'types'

/* @vue/component */
export default CalendarWithIntervals.extend({
Expand Down Expand Up @@ -72,7 +72,7 @@ export default CalendarWithIntervals.extend({
genHeadDays (): VNode[] {
return this.days.map(this.genHeadDay)
},
genHeadDay (day: VTimestamp, index: number): VNode {
genHeadDay (day: CalendarTimestamp, index: number): VNode {
const slot = this.$scopedSlots['day-header']

return this.$createElement('div', {
Expand All @@ -88,21 +88,21 @@ export default CalendarWithIntervals.extend({
slot ? slot({ ...day, index }) : '',
])
},
genHeadWeekday (day: VTimestamp): VNode {
genHeadWeekday (day: CalendarTimestamp): VNode {
const color = day.present ? this.color : undefined

return this.$createElement('div', this.setTextColor(color, {
staticClass: 'v-calendar-daily_head-weekday',
}), this.weekdayFormatter(day, this.shortWeekdays))
},
genHeadDayLabel (day: VTimestamp): VNode {
genHeadDayLabel (day: CalendarTimestamp): VNode {
return this.$createElement('div', {
staticClass: 'v-calendar-daily_head-day-label',
}, [
this.genHeadDayButton(day),
])
},
genHeadDayButton (day: VTimestamp): VNode {
genHeadDayButton (day: CalendarTimestamp): VNode {
const color = day.present ? this.color : 'transparent'

return this.$createElement(VBtn, {
Expand Down Expand Up @@ -156,7 +156,7 @@ export default CalendarWithIntervals.extend({
genDays (): VNode[] {
return this.days.map(this.genDay)
},
genDay (day: VTimestamp, index: number): VNode {
genDay (day: CalendarTimestamp, index: number): VNode {
const slot = this.$scopedSlots['day-body']
const scope = this.getSlotScope(day)

Expand All @@ -175,7 +175,7 @@ export default CalendarWithIntervals.extend({
genDayIntervals (index: number): VNode[] {
return this.intervals[index].map(this.genDayInterval)
},
genDayInterval (interval: VTimestamp): VNode {
genDayInterval (interval: CalendarTimestamp): VNode {
const height: string | undefined = convertToUnit(this.intervalHeight)
const styler = this.intervalStyle || this.intervalStyleDefault
const slot = this.$scopedSlots.interval
Expand Down Expand Up @@ -209,7 +209,7 @@ export default CalendarWithIntervals.extend({

return this.intervals[0].map(this.genIntervalLabel)
},
genIntervalLabel (interval: VTimestamp): VNode {
genIntervalLabel (interval: CalendarTimestamp): VNode {
const height: string | undefined = convertToUnit(this.intervalHeight)
const short: boolean = this.shortIntervals
const shower = this.showIntervalLabel || this.showIntervalLabelDefault
Expand Down
11 changes: 6 additions & 5 deletions packages/vuetify/src/components/VCalendar/VCalendarMonthly.ts
View file
Expand Up @@ -5,7 +5,8 @@ import './VCalendarWeekly.sass'
import VCalendarWeekly from './VCalendarWeekly'

// Util
import { VTimestamp, parseTimestamp, getStartOfMonth, getEndOfMonth } from './util/timestamp'
import { parseTimestamp, getStartOfMonth, getEndOfMonth } from './util/timestamp'
import { CalendarTimestamp } from 'types'

/* @vue/component */
export default VCalendarWeekly.extend({
Expand All @@ -15,11 +16,11 @@ export default VCalendarWeekly.extend({
staticClass (): string {
return 'v-calendar-monthly v-calendar-weekly'
},
parsedStart (): VTimestamp {
return getStartOfMonth(parseTimestamp(this.start) as VTimestamp)
parsedStart (): CalendarTimestamp {
return getStartOfMonth(parseTimestamp(this.start) as CalendarTimestamp)
},
parsedEnd (): VTimestamp {
return getEndOfMonth(parseTimestamp(this.end) as VTimestamp)
parsedEnd (): CalendarTimestamp {
return getEndOfMonth(parseTimestamp(this.end) as CalendarTimestamp)
},
},

Expand Down
25 changes: 12 additions & 13 deletions packages/vuetify/src/components/VCalendar/VCalendarWeekly.ts
View file
Expand Up @@ -13,12 +13,11 @@ import CalendarBase from './mixins/calendar-base'
// Util
import props from './util/props'
import {
VTimestamp,
VTimestampFormatter,
createDayList,
getDayIdentifier,
createNativeLocaleFormatter,
} from './util/timestamp'
import { CalendarTimestamp, CalendarFormatter } from 'types'

/* @vue/component */
export default CalendarBase.extend({
Expand All @@ -36,7 +35,7 @@ export default CalendarBase.extend({
parsedMinWeeks (): number {
return parseInt(this.minWeeks)
},
days (): VTimestamp[] {
days (): CalendarTimestamp[] {
const minDays = this.parsedMinWeeks * this.weekdays.length
const start = this.getStartOfWeek(this.parsedStart)
const end = this.getEndOfWeek(this.parsedEnd)
Expand All @@ -50,7 +49,7 @@ export default CalendarBase.extend({
minDays
)
},
todayWeek (): VTimestamp[] {
todayWeek (): CalendarTimestamp[] {
const today = this.times.today
const start = this.getStartOfWeek(today)
const end = this.getEndOfWeek(today)
Expand All @@ -64,9 +63,9 @@ export default CalendarBase.extend({
this.weekdays.length
)
},
monthFormatter (): VTimestampFormatter {
monthFormatter (): CalendarFormatter {
if (this.monthFormat) {
return this.monthFormat as VTimestampFormatter
return this.monthFormat as CalendarFormatter
}

const longOptions = { timeZone: 'UTC', month: 'long' }
Expand All @@ -80,7 +79,7 @@ export default CalendarBase.extend({
},

methods: {
isOutside (day: VTimestamp): boolean {
isOutside (day: CalendarTimestamp): boolean {
const dayIdentifier = getDayIdentifier(day)

return dayIdentifier < getDayIdentifier(this.parsedStart) ||
Expand All @@ -94,7 +93,7 @@ export default CalendarBase.extend({
genHeadDays (): VNode[] {
return this.todayWeek.map(this.genHeadDay)
},
genHeadDay (day: VTimestamp, index: number): VNode {
genHeadDay (day: CalendarTimestamp, index: number): VNode {
const outside = this.isOutside(this.days[index])
const color = day.present ? this.color : undefined

Expand All @@ -114,13 +113,13 @@ export default CalendarBase.extend({

return weeks
},
genWeek (week: VTimestamp[]): VNode {
genWeek (week: CalendarTimestamp[]): VNode {
return this.$createElement('div', {
key: week[0].date,
staticClass: 'v-calendar-weekly__week',
}, week.map(this.genDay))
},
genDay (day: VTimestamp, index: number): VNode {
genDay (day: CalendarTimestamp, index: number): VNode {
const outside = this.isOutside(day)
const slot = this.$scopedSlots.day
const scope = { outside, index, ...day }
Expand All @@ -137,7 +136,7 @@ export default CalendarBase.extend({
// (day.day === 1 && this.showMonthOnFirst) ? this.genDayMonth(day) : '',
])
},
genDayLabel (day: VTimestamp): VNode {
genDayLabel (day: CalendarTimestamp): VNode {
const slot = this.$scopedSlots['day-label']

return this.$createElement('div', {
Expand All @@ -146,7 +145,7 @@ export default CalendarBase.extend({
slot ? slot(day) as VNodeChildren : this.genDayLabelButton(day),
])
},
genDayLabelButton (day: VTimestamp): VNode {
genDayLabelButton (day: CalendarTimestamp): VNode {
const color = day.present ? this.color : 'transparent'
const hasMonth = day.day === 1 && this.showMonthOnFirst

Expand All @@ -166,7 +165,7 @@ export default CalendarBase.extend({
: this.dayFormatter(day, false)
)
},
genDayMonth (day: VTimestamp): VNode | string {
genDayMonth (day: CalendarTimestamp): VNode | string {
const color = day.present ? this.color : undefined
const slot = this.$scopedSlots['day-month']

Expand Down

0 comments on commit b03b507

Please sign in to comment.