diff --git a/packages/vuetify/src/components/VAlert/VAlert.ts b/packages/vuetify/src/components/VAlert/VAlert.ts index f19d9f16d57..32a1602886c 100644 --- a/packages/vuetify/src/components/VAlert/VAlert.ts +++ b/packages/vuetify/src/components/VAlert/VAlert.ts @@ -16,6 +16,7 @@ import Transitionable from '../../mixins/transitionable' // Utilities import mixins from '../../util/mixins' import { breaking } from '../../util/console' +import { getSlot } from '../../util/helpers' // Types import { VNodeData } from 'vue' @@ -188,10 +189,10 @@ export default mixins( methods: { genWrapper (): VNode { const children = [ - this.$slots.prepend || this.__cachedIcon, + getSlot(this, 'prepend') || this.__cachedIcon, this.genContent(), this.__cachedBorder, - this.$slots.append, + getSlot(this, 'append'), this.$scopedSlots.close ? this.$scopedSlots.close({ toggle: this.toggle }) : this.__cachedDismissible, @@ -206,7 +207,7 @@ export default mixins( genContent (): VNode { return this.$createElement('div', { staticClass: 'v-alert__content', - }, this.$slots.default) + }, getSlot(this)) }, genAlert (): VNode { let data: VNodeData = { diff --git a/packages/vuetify/src/components/VApp/VApp.ts b/packages/vuetify/src/components/VApp/VApp.ts index 7ed665b34d2..61a0561943e 100644 --- a/packages/vuetify/src/components/VApp/VApp.ts +++ b/packages/vuetify/src/components/VApp/VApp.ts @@ -6,6 +6,7 @@ import Themeable from '../../mixins/themeable' // Utilities import mixins from '../../util/mixins' +import { getSlot } from '../../util/helpers' /* @vue/component */ export default mixins( @@ -41,7 +42,7 @@ export default mixins( }, render (h) { - const wrapper = h('div', { staticClass: 'v-application--wrap' }, this.$slots.default) + const wrapper = h('div', { staticClass: 'v-application--wrap' }, getSlot(this)) return h('div', { staticClass: 'v-application', diff --git a/packages/vuetify/src/components/VAppBar/VAppBarTitle.ts b/packages/vuetify/src/components/VAppBar/VAppBarTitle.ts index c9cc159dfcc..899890158ba 100644 --- a/packages/vuetify/src/components/VAppBar/VAppBarTitle.ts +++ b/packages/vuetify/src/components/VAppBar/VAppBarTitle.ts @@ -7,7 +7,7 @@ import { ExtractVue } from '../../util/mixins' import VAppBar from './VAppBar' // Utilities -import { convertToUnit } from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' import { easeInOutCubic } from '../../services/goto/easing-patterns' const base = inject<'VAppBar', typeof VAppBar>('VAppBar', 'v-app-bar-title', 'v-app-bar') @@ -67,14 +67,14 @@ export default base.extend().extend({ class: 'v-app-bar-title__content', style: this.styles, ref: 'content', - }, [this.$slots.default]), + }, getSlot(this)), h('div', { class: 'v-app-bar-title__placeholder', style: { visibility: this.VAppBar.scrollRatio ? 'hidden' : 'visible', }, ref: 'placeholder', - }, [this.$slots.default]), + }, getSlot(this)), ]) }, }) diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.ts b/packages/vuetify/src/components/VAvatar/VAvatar.ts index 9954d799a8c..79bcbd3a404 100644 --- a/packages/vuetify/src/components/VAvatar/VAvatar.ts +++ b/packages/vuetify/src/components/VAvatar/VAvatar.ts @@ -6,7 +6,7 @@ import Measurable from '../../mixins/measurable' import Roundable from '../../mixins/roundable' // Utilities -import { convertToUnit } from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -55,6 +55,6 @@ export default mixins( on: this.$listeners, } - return h('div', this.setBackgroundColor(this.color, data), this.$slots.default) + return h('div', this.setBackgroundColor(this.color, data), getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VBanner/VBanner.ts b/packages/vuetify/src/components/VBanner/VBanner.ts index 9d6875aa250..65fbba355d3 100644 --- a/packages/vuetify/src/components/VBanner/VBanner.ts +++ b/packages/vuetify/src/components/VBanner/VBanner.ts @@ -15,10 +15,7 @@ import Toggleable from '../../mixins/toggleable' // Utilities import mixins from '../../util/mixins' -import { - convertToUnit, - getSlot, -} from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' // Typeslint import { VNode } from 'vue' @@ -56,7 +53,7 @@ export default mixins( } }, hasIcon (): boolean { - return Boolean(this.icon || this.$slots.icon) + return Boolean(this.icon || this.$slots.icon || this.$scopedSlots.icon) }, isSticky (): boolean { return this.sticky || this.app @@ -99,7 +96,7 @@ export default mixins( }, }, [this.icon]) } else { - content = this.$slots.icon + content = getSlot(this, 'icon') } return this.$createElement(VAvatar, { @@ -116,7 +113,7 @@ export default mixins( genText () { return this.$createElement('div', { staticClass: 'v-banner__text', - }, this.$slots.default) + }, getSlot(this)) }, genActions () { const children = getSlot(this, 'actions', { diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.ts b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.ts index 4822cd884c3..4639ac54eb7 100644 --- a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.ts +++ b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.ts @@ -14,6 +14,7 @@ import { factory as ToggleableFactory } from '../../mixins/toggleable' // Utilities import mixins from '../../util/mixins' import { breaking } from '../../util/console' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -152,6 +153,6 @@ export default mixins( }) } - return h(ButtonGroup, this.setTextColor(this.color, data), this.$slots.default) + return h(ButtonGroup, this.setTextColor(this.color, data), getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.ts b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.ts index fb83733799c..bd68be05991 100644 --- a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.ts +++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.ts @@ -14,6 +14,7 @@ import Themeable from '../../mixins/themeable' // Utils import mixins from '../../util/mixins' +import { getSlot } from '../../util/helpers' export default mixins( Themeable @@ -67,7 +68,7 @@ export default mixins( }, render (h): VNode { - const children = this.$slots.default || this.genItems() + const children = getSlot(this) || this.genItems() return h('ul', { staticClass: 'v-breadcrumbs', diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.ts b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.ts index f5e8221d676..d25cdbaa2d6 100644 --- a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.ts +++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.ts @@ -1,6 +1,7 @@ import Routable from '../../mixins/routable' import mixins from '../../util/mixins' +import { getSlot } from '../../util/helpers' import { VNode } from 'vue' /* @vue/component */ @@ -39,7 +40,7 @@ export default mixins(Routable).extend({ ...data.attrs, 'aria-current': this.isActive && this.isLink ? 'page' : undefined, }, - }, this.$slots.default), + }, getSlot(this)), ]) }, }) diff --git a/packages/vuetify/src/components/VBtn/VBtn.ts b/packages/vuetify/src/components/VBtn/VBtn.ts index 85869fce880..78e15213398 100644 --- a/packages/vuetify/src/components/VBtn/VBtn.ts +++ b/packages/vuetify/src/components/VBtn/VBtn.ts @@ -18,6 +18,7 @@ import Sizeable from '../../mixins/sizeable' // Utilities import mixins, { ExtractVue } from '../../util/mixins' import { breaking } from '../../util/console' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -167,12 +168,12 @@ export default baseMixins.extend().extend({ genContent (): VNode { return this.$createElement('span', { staticClass: 'v-btn__content', - }, this.$slots.default) + }, getSlot(this)) }, genLoader (): VNode { return this.$createElement('span', { class: 'v-btn__loader', - }, this.$slots.loader || [this.$createElement(VProgressCircular, { + }, getSlot(this, 'loader') || [this.$createElement(VProgressCircular, { props: { indeterminate: true, size: 23, diff --git a/packages/vuetify/src/components/VCard/VCard.ts b/packages/vuetify/src/components/VCard/VCard.ts index d47053e117a..7c35585ced4 100644 --- a/packages/vuetify/src/components/VCard/VCard.ts +++ b/packages/vuetify/src/components/VCard/VCard.ts @@ -10,6 +10,7 @@ import Routable from '../../mixins/routable' // Helpers import mixins from '../../util/mixins' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -86,7 +87,7 @@ export default mixins( return h(tag, this.setBackgroundColor(this.color, data), [ this.genProgress(), - this.$slots.default, + getSlot(this), ]) }, }) diff --git a/packages/vuetify/src/components/VChip/VChip.ts b/packages/vuetify/src/components/VChip/VChip.ts index 7a31f34a6db..4e4cd55a5fc 100644 --- a/packages/vuetify/src/components/VChip/VChip.ts +++ b/packages/vuetify/src/components/VChip/VChip.ts @@ -19,6 +19,7 @@ import Sizeable from '../../mixins/sizeable' // Utilities import { breaking } from '../../util/console' +import { getSlot } from '../../util/helpers' // Types import { PropValidator, PropType } from 'vue/types/options' @@ -169,7 +170,7 @@ export default mixins( staticClass: 'v-chip__content', }, [ this.filter && this.genFilter(), - this.$slots.default, + getSlot(this), this.hasClose && this.genClose(), ]) }, diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts index 0fa4da28af1..a1d1b191ed1 100644 --- a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts +++ b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts @@ -256,13 +256,13 @@ export default mixins( }, genEmpty (originalItemsLength: number, filteredItemsLength: number) { if (originalItemsLength === 0 && this.loading) { - const loading = this.$slots.loading || this.$vuetify.lang.t(this.loadingText) + const loading = getSlot(this, 'loading') || this.$vuetify.lang.t(this.loadingText) return this.genEmptyWrapper(loading) } else if (originalItemsLength === 0) { - const noData = this.$slots['no-data'] || this.$vuetify.lang.t(this.noDataText) + const noData = getSlot(this, 'noData') || this.$vuetify.lang.t(this.noDataText) return this.genEmptyWrapper(noData) } else if (filteredItemsLength === 0) { - const noResults = this.$slots['no-results'] || this.$vuetify.lang.t(this.noResultsText) + const noResults = getSlot(this, 'noResults') || this.$vuetify.lang.t(this.noResultsText) return this.genEmptyWrapper(noResults) } diff --git a/packages/vuetify/src/components/VDataTable/VEditDialog.ts b/packages/vuetify/src/components/VDataTable/VEditDialog.ts index 48b3cd48bba..dfe4f08d429 100644 --- a/packages/vuetify/src/components/VDataTable/VEditDialog.ts +++ b/packages/vuetify/src/components/VDataTable/VEditDialog.ts @@ -6,7 +6,7 @@ import Returnable from '../../mixins/returnable' import Themeable from '../../mixins/themeable' // Utils -import { keyCodes } from '../../util/helpers' +import { getSlot, keyCodes } from '../../util/helpers' // Component import VBtn from '../VBtn' @@ -96,7 +96,7 @@ export default mixins(Returnable, Themeable).extend({ }, }, ref: 'content', - }, [this.$slots.input]) + }, getSlot(this, 'input')) }, }, @@ -127,7 +127,7 @@ export default mixins(Returnable, Themeable).extend({ }, [ h('span', { staticClass: 'v-small-dialog__activator__content', - }, this.$slots.default), + }, getSlot(this)), ]) }, }, diff --git a/packages/vuetify/src/components/VDataTable/VSimpleTable.ts b/packages/vuetify/src/components/VDataTable/VSimpleTable.ts index a6953395e22..f6fd4ab7690 100644 --- a/packages/vuetify/src/components/VDataTable/VSimpleTable.ts +++ b/packages/vuetify/src/components/VDataTable/VSimpleTable.ts @@ -1,6 +1,6 @@ import './VSimpleTable.sass' -import { convertToUnit } from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' import Themeable from '../../mixins/themeable' import mixins from '../../util/mixins' import { VNode } from 'vue' @@ -35,7 +35,7 @@ export default mixins(Themeable).extend({ height: convertToUnit(this.height), }, }, [ - this.$createElement('table', this.$slots.default), + this.$createElement('table', getSlot(this)), ]) }, }, @@ -45,9 +45,9 @@ export default mixins(Themeable).extend({ staticClass: 'v-data-table', class: this.classes, }, [ - this.$slots.top, + getSlot(this, 'top'), this.genWrapper(), - this.$slots.bottom, + getSlot(this, 'bottom'), ]) }, }) diff --git a/packages/vuetify/src/components/VDataTable/VVirtualTable.ts b/packages/vuetify/src/components/VDataTable/VVirtualTable.ts index 515858cd59d..a2004af9c48 100644 --- a/packages/vuetify/src/components/VDataTable/VVirtualTable.ts +++ b/packages/vuetify/src/components/VDataTable/VVirtualTable.ts @@ -9,7 +9,7 @@ import { PropValidator } from 'vue/types/options' import mixins from '../../util/mixins' // Utiltiies -import { convertToUnit, debounce } from '../../util/helpers' +import { convertToUnit, debounce, getSlot } from '../../util/helpers' // Types const baseMixins = mixins(VSimpleTable) @@ -155,9 +155,9 @@ export default baseMixins.extend().extend({ staticClass: 'v-data-table v-virtual-table', class: this.classes, }, [ - this.$slots.top, + getSlot(this, 'top'), this.genWrapper(), - this.$slots.bottom, + getSlot(this, 'bottom'), ]) }, }) diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.ts b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.ts index 516bd802079..f5b635be7ea 100644 --- a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.ts +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.ts @@ -12,6 +12,7 @@ import Themeable from '../../mixins/themeable' // Utils import { createNativeLocaleFormatter, monthChange } from './util' import mixins from '../../util/mixins' +import { getSlot } from '../../util/helpers' // Types import { VNode, PropType } from 'vue' @@ -117,7 +118,7 @@ export default mixins( on: { click: () => this.$emit('toggle'), }, - }, [this.$slots.default || this.formatter(String(this.value))])]) + }, getSlot(this) || [this.formatter(String(this.value))])]) const transition = this.$createElement('transition', { props: { diff --git a/packages/vuetify/src/components/VFooter/VFooter.ts b/packages/vuetify/src/components/VFooter/VFooter.ts index f241b0c23fc..df4fb85303a 100644 --- a/packages/vuetify/src/components/VFooter/VFooter.ts +++ b/packages/vuetify/src/components/VFooter/VFooter.ts @@ -10,7 +10,7 @@ import SSRBootable from '../../mixins/ssr-bootable' // Utilities import mixins from '../../util/mixins' -import { convertToUnit } from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' // Types import { VNode } from 'vue/types/vnode' @@ -110,6 +110,6 @@ export default mixins( style: this.styles, }) - return h(this.tag, data, this.$slots.default) + return h(this.tag, data, getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VForm/VForm.ts b/packages/vuetify/src/components/VForm/VForm.ts index bf5c1a7eed8..801da295a3d 100644 --- a/packages/vuetify/src/components/VForm/VForm.ts +++ b/packages/vuetify/src/components/VForm/VForm.ts @@ -8,6 +8,7 @@ import { provide as RegistrableProvide } from '../../mixins/registrable' // Helpers import { VNode } from 'vue' +import { getSlot } from '../../util/helpers' type ErrorBag = Record type VInputInstance = InstanceType @@ -139,6 +140,6 @@ export default mixins( on: { submit: (e: Event) => this.$emit('submit', e), }, - }, this.$slots.default) + }, getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VInput/VInput.ts b/packages/vuetify/src/components/VInput/VInput.ts index eafdb9cc700..4468adfbf26 100644 --- a/packages/vuetify/src/components/VInput/VInput.ts +++ b/packages/vuetify/src/components/VInput/VInput.ts @@ -165,7 +165,7 @@ export default baseMixins.extend().extend({ genDefaultSlot () { return [ this.genLabel(), - this.$slots.default, + getSlot(this), ] }, genIcon ( @@ -251,7 +251,7 @@ export default baseMixins.extend().extend({ for: this.computedId, light: this.light, }, - }, this.$slots.label || this.label) + }, getSlot(this, 'label') || this.label) }, genMessages () { if (!this.showDetails) return null diff --git a/packages/vuetify/src/components/VItemGroup/VItemGroup.ts b/packages/vuetify/src/components/VItemGroup/VItemGroup.ts index 72d9923611f..780a2e3876c 100644 --- a/packages/vuetify/src/components/VItemGroup/VItemGroup.ts +++ b/packages/vuetify/src/components/VItemGroup/VItemGroup.ts @@ -10,6 +10,7 @@ import Themeable from '../../mixins/themeable' // Utilities import mixins from '../../util/mixins' import { consoleWarn } from '../../util/console' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue/types' @@ -254,7 +255,7 @@ export const BaseItemGroup = mixins( }, render (h): VNode { - return h(this.tag, this.genData(), this.$slots.default) + return h(this.tag, this.genData(), getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VList/VList.ts b/packages/vuetify/src/components/VList/VList.ts index 355fb2bdc4e..d565c369a51 100644 --- a/packages/vuetify/src/components/VList/VList.ts +++ b/packages/vuetify/src/components/VList/VList.ts @@ -4,6 +4,7 @@ import VListGroup from './VListGroup' // Components import VSheet from '../VSheet/VSheet' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -96,6 +97,6 @@ export default VSheet.extend().extend({ }, } - return h(this.tag, this.setBackgroundColor(this.color, data), [this.$slots.default]) + return h(this.tag, this.setBackgroundColor(this.color, data), getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VList/VListGroup.ts b/packages/vuetify/src/components/VList/VListGroup.ts index 1d4db04e6af..cb9b3bb7c3d 100644 --- a/packages/vuetify/src/components/VList/VListGroup.ts +++ b/packages/vuetify/src/components/VList/VListGroup.ts @@ -125,13 +125,14 @@ export default baseMixins.extend().extend({ }, genAppendIcon (): VNode | null { const icon = !this.subGroup ? this.appendIcon : false + const slot = getSlot(this, 'appendIcon') - if (!icon && !this.$slots.appendIcon) return null + if (!icon && !slot) return null return this.$createElement(VListItemIcon, { staticClass: 'v-list-group__header__append-icon', }, [ - this.$slots.appendIcon || this.genIcon(icon), + slot || this.genIcon(icon), ]) }, genHeader (): VNode { @@ -157,7 +158,7 @@ export default baseMixins.extend().extend({ }, }, [ this.genPrependIcon(), - this.$slots.activator, + getSlot(this, 'activator'), this.genAppendIcon(), ]) }, @@ -176,13 +177,14 @@ export default baseMixins.extend().extend({ const icon = this.subGroup && this.prependIcon == null ? '$subgroup' : this.prependIcon + const slot = getSlot(this, 'prependIcon') - if (!icon && !this.$slots.prependIcon) return null + if (!icon && !slot) return null return this.$createElement(VListItemIcon, { staticClass: 'v-list-group__header__prepend-icon', }, [ - this.$slots.prependIcon || this.genIcon(icon), + slot || this.genIcon(icon), ]) }, onRouteChange (to: Route) { diff --git a/packages/vuetify/src/components/VList/VListItem.ts b/packages/vuetify/src/components/VList/VListItem.ts index b5a386b1733..65faed907f3 100644 --- a/packages/vuetify/src/components/VList/VListItem.ts +++ b/packages/vuetify/src/components/VList/VListItem.ts @@ -12,7 +12,7 @@ import { factory as ToggleableFactory } from '../../mixins/toggleable' import Ripple from '../../directives/ripple' // Utilities -import { keyCodes } from './../../util/helpers' +import { getSlot, keyCodes } from './../../util/helpers' import { ExtractVue } from './../../util/mixins' import { removed } from '../../util/console' @@ -183,12 +183,10 @@ export default baseMixins.extend().extend({ delete data.nativeOn } - const children = this.$scopedSlots.default - ? this.$scopedSlots.default({ - active: this.isActive, - toggle: this.toggle, - }) - : this.$slots.default + const children = getSlot(this, 'default', { + active: this.isActive, + toggle: this.toggle, + }) return h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children) }, diff --git a/packages/vuetify/src/components/VMain/VMain.ts b/packages/vuetify/src/components/VMain/VMain.ts index abe918906e8..dbd3b546b02 100644 --- a/packages/vuetify/src/components/VMain/VMain.ts +++ b/packages/vuetify/src/components/VMain/VMain.ts @@ -3,6 +3,7 @@ import './VMain.sass' // Mixins import SSRBootable from '../../mixins/ssr-bootable' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -44,7 +45,7 @@ export default SSRBootable.extend({ h( 'div', { staticClass: 'v-main__wrap' }, - this.$slots.default + getSlot(this), ), ]) }, diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.ts b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.ts index 8637ba9aa7c..b5eff098926 100644 --- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.ts +++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.ts @@ -385,7 +385,7 @@ export default baseMixins.extend({ genContent () { return this.$createElement('div', { staticClass: 'v-navigation-drawer__content', - }, this.$slots.default) + }, getSlot(this)) }, genBorder () { return this.$createElement('div', { diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.ts b/packages/vuetify/src/components/VOverlay/VOverlay.ts index f9b50897707..4e70ffe3049 100644 --- a/packages/vuetify/src/components/VOverlay/VOverlay.ts +++ b/packages/vuetify/src/components/VOverlay/VOverlay.ts @@ -8,6 +8,7 @@ import Toggleable from './../../mixins/toggleable' // Utilities import mixins from '../../util/mixins' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -75,7 +76,7 @@ export default mixins( genContent () { return this.$createElement('div', { staticClass: 'v-overlay__content', - }, this.$slots.default) + }, getSlot(this)) }, }, diff --git a/packages/vuetify/src/components/VParallax/VParallax.ts b/packages/vuetify/src/components/VParallax/VParallax.ts index bf3c4f91fc2..8e051ae8ee1 100644 --- a/packages/vuetify/src/components/VParallax/VParallax.ts +++ b/packages/vuetify/src/components/VParallax/VParallax.ts @@ -3,10 +3,11 @@ import './VParallax.sass' // Mixins import Translatable from '../../mixins/translatable' +import mixins from '../../util/mixins' +import { getSlot } from '../../util/helpers' // Types import { VNode, VNodeData } from 'vue/types/vnode' -import mixins from '../../util/mixins' const baseMixins = mixins( Translatable @@ -95,7 +96,7 @@ export default baseMixins.extend().extend({ const content = h('div', { staticClass: 'v-parallax__content', - }, this.$slots.default) + }, getSlot(this)) return h('div', { staticClass: 'v-parallax', diff --git a/packages/vuetify/src/components/VPicker/VPicker.ts b/packages/vuetify/src/components/VPicker/VPicker.ts index fe927b1d54b..88c65acfda0 100644 --- a/packages/vuetify/src/components/VPicker/VPicker.ts +++ b/packages/vuetify/src/components/VPicker/VPicker.ts @@ -7,7 +7,7 @@ import Elevatable from '../../mixins/elevatable' import Themeable from '../../mixins/themeable' // Helpers -import { convertToUnit } from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' // Types import { VNode } from 'vue/types' @@ -50,14 +50,14 @@ export default mixins( class: { 'v-picker__title--landscape': this.landscape, }, - }), this.$slots.title) + }), getSlot(this, 'title')) }, genBodyTransition () { return this.$createElement('transition', { props: { name: this.transition, }, - }, this.$slots.default) + }, getSlot(this)) }, genBody () { return this.$createElement('div', { @@ -79,7 +79,7 @@ export default mixins( class: { 'v-picker__actions--no-title': this.noTitle, }, - }, this.$slots.actions) + }, getSlot(this, 'actions')) }, }, diff --git a/packages/vuetify/src/components/VProgressCircular/VProgressCircular.ts b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.ts index 5b89fbf7683..daf7dd16fcd 100644 --- a/packages/vuetify/src/components/VProgressCircular/VProgressCircular.ts +++ b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.ts @@ -8,7 +8,7 @@ import intersect from '../../directives/intersect' import Colorable from '../../mixins/colorable' // Utils -import { convertToUnit } from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' // Types import { VNode, VNodeChildren } from 'vue' @@ -136,7 +136,7 @@ export default Colorable.extend({ genInfo (): VNode { return this.$createElement('div', { staticClass: 'v-progress-circular__info', - }, this.$slots.default) + }, getSlot(this)) }, onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) { this.isVisible = isIntersecting diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts index dbffa9ca52c..aa09a677a9f 100644 --- a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts +++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts @@ -20,7 +20,7 @@ import mixins, { ExtractVue } from '../../util/mixins' // Types import Vue, { VNode } from 'vue' -import { composedPath } from '../../util/helpers' +import { composedPath, getSlot } from '../../util/helpers' interface TouchEvent { touchstartX: number @@ -283,7 +283,7 @@ export const BaseSlideGroup = mixins { + children = (getSlot(this) || []).map((b, i) => { if (b.tag && typeof b.componentOptions !== 'undefined' && (b.componentOptions.Ctor.options.name === 'v-btn' || b.componentOptions.Ctor.options.name === 'v-tooltip')) { btnCount++ return h('div', { @@ -97,6 +98,6 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({ }, }, children) - return h('div', data, [this.$slots.activator, list]) + return h('div', data, [getSlot(this, 'activator'), list]) }, }) diff --git a/packages/vuetify/src/components/VStepper/VStepper.ts b/packages/vuetify/src/components/VStepper/VStepper.ts index 3cb4e7f9212..acba18822e9 100644 --- a/packages/vuetify/src/components/VStepper/VStepper.ts +++ b/packages/vuetify/src/components/VStepper/VStepper.ts @@ -15,6 +15,7 @@ import Proxyable from '../../mixins/proxyable' // Utilities import mixins from '../../util/mixins' import { breaking } from '../../util/console' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -135,6 +136,6 @@ export default baseMixins.extend({ staticClass: 'v-stepper', class: this.classes, style: this.styles, - }, this.$slots.default) + }, getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VStepper/VStepperContent.ts b/packages/vuetify/src/components/VStepper/VStepperContent.ts index 6ac562896c7..879499a03a7 100644 --- a/packages/vuetify/src/components/VStepper/VStepperContent.ts +++ b/packages/vuetify/src/components/VStepper/VStepperContent.ts @@ -8,7 +8,7 @@ import { import { inject as RegistrableInject } from '../../mixins/registrable' // Helpers -import { convertToUnit } from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' // Utilities import mixins from '../../util/mixins' @@ -155,7 +155,7 @@ export default baseMixins.extend().extend({ }] } - const wrapper = h('div', wrapperData, [this.$slots.default]) + const wrapper = h('div', wrapperData, getSlot(this)) const content = h('div', contentData, [wrapper]) return h(this.computedTransition, { diff --git a/packages/vuetify/src/components/VStepper/VStepperStep.ts b/packages/vuetify/src/components/VStepper/VStepperStep.ts index d8b0c85e6cc..f760a49989d 100644 --- a/packages/vuetify/src/components/VStepper/VStepperStep.ts +++ b/packages/vuetify/src/components/VStepper/VStepperStep.ts @@ -10,7 +10,7 @@ import ripple from '../../directives/ripple' // Utilities import mixins from '../../util/mixins' -import { keyCodes } from '../../util/helpers' +import { getSlot, keyCodes } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -106,7 +106,7 @@ export default baseMixins.extend().extend({ genLabel () { return this.$createElement('div', { staticClass: 'v-stepper__label', - }, this.$slots.default) + }, getSlot(this)) }, genStep () { const color = (!this.hasError && (this.complete || this.isActive)) ? this.color : false diff --git a/packages/vuetify/src/components/VSubheader/VSubheader.ts b/packages/vuetify/src/components/VSubheader/VSubheader.ts index 20b8e6c90ee..661a9b80d88 100644 --- a/packages/vuetify/src/components/VSubheader/VSubheader.ts +++ b/packages/vuetify/src/components/VSubheader/VSubheader.ts @@ -4,6 +4,7 @@ import './VSubheader.sass' // Mixins import Themeable from '../../mixins/themeable' import mixins from '../../util/mixins' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -27,6 +28,6 @@ export default mixins( }, attrs: this.$attrs, on: this.$listeners, - }, this.$slots.default) + }, getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.ts b/packages/vuetify/src/components/VSwitch/VSwitch.ts index 84e68eb9b2e..f822f3a4f4d 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.ts +++ b/packages/vuetify/src/components/VSwitch/VSwitch.ts @@ -14,7 +14,7 @@ import { VFabTransition } from '../transitions' import VProgressCircular from '../VProgressCircular/VProgressCircular' // Helpers -import { keyCodes } from '../../util/helpers' +import { getSlot, keyCodes } from '../../util/helpers' // Types import { VNode, VNodeData } from 'vue' @@ -109,7 +109,7 @@ export default Selectable.extend({ return this.$createElement(VFabTransition, {}, [ this.loading === false ? null - : this.$slots.progress || this.$createElement(VProgressCircular, { + : getSlot(this, 'progress') || this.$createElement(VProgressCircular, { props: { color: (this.loading === true || this.loading === '') ? (this.color || 'primary') diff --git a/packages/vuetify/src/components/VTabs/VTab.ts b/packages/vuetify/src/components/VTabs/VTab.ts index 2e7353ebfac..b18dd6b5cc6 100644 --- a/packages/vuetify/src/components/VTabs/VTab.ts +++ b/packages/vuetify/src/components/VTabs/VTab.ts @@ -4,7 +4,7 @@ import Routable from '../../mixins/routable' import Themeable from '../../mixins/themeable' // Utilities -import { keyCodes } from './../../util/helpers' +import { getSlot, keyCodes } from './../../util/helpers' import mixins from '../../util/mixins' import { ExtractVue } from './../../util/mixins' @@ -129,6 +129,6 @@ export default baseMixins.extend().extend( }, } - return h(tag, data, this.$slots.default) + return h(tag, data, getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VTabs/VTabs.ts b/packages/vuetify/src/components/VTabs/VTabs.ts index 6981d293df5..2eea7747348 100644 --- a/packages/vuetify/src/components/VTabs/VTabs.ts +++ b/packages/vuetify/src/components/VTabs/VTabs.ts @@ -15,7 +15,7 @@ import Themeable from '../../mixins/themeable' import Resize from '../../directives/resize' // Utilities -import { convertToUnit } from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' import { ExtractVue } from './../../util/mixins' import mixins from '../../util/mixins' @@ -268,7 +268,7 @@ export default baseMixins.extend().extend({ let slider = null const item = [] const tab = [] - const slot = this.$slots.default || [] + const slot = getSlot(this) || [] const length = slot.length for (let i = 0; i < length; i++) { diff --git a/packages/vuetify/src/components/VTextField/VTextField.ts b/packages/vuetify/src/components/VTextField/VTextField.ts index e3a03bd9f8c..27118e3042d 100644 --- a/packages/vuetify/src/components/VTextField/VTextField.ts +++ b/packages/vuetify/src/components/VTextField/VTextField.ts @@ -19,7 +19,7 @@ import ripple from '../../directives/ripple' // Utilities import { attachedRoot } from '../../util/dom' -import { convertToUnit, keyCodes } from '../../util/helpers' +import { convertToUnit, getSlot, keyCodes } from '../../util/helpers' import { breaking, consoleWarn } from '../../util/console' // Types @@ -372,7 +372,7 @@ export default baseMixins.extend().extend({ }, } - return this.$createElement(VLabel, data, this.$slots.label || this.label) + return this.$createElement(VLabel, data, getSlot(this, 'label') || this.label) }, genLegend () { const width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0 diff --git a/packages/vuetify/src/components/VTimeline/VTimeline.ts b/packages/vuetify/src/components/VTimeline/VTimeline.ts index 2a0becb8c4d..eb9813d39e0 100644 --- a/packages/vuetify/src/components/VTimeline/VTimeline.ts +++ b/packages/vuetify/src/components/VTimeline/VTimeline.ts @@ -7,6 +7,7 @@ import mixins from '../../util/mixins' // Mixins import Themeable from '../../mixins/themeable' +import { getSlot } from '../../util/helpers' export default mixins( Themeable @@ -39,6 +40,6 @@ export default mixins( return h('div', { staticClass: 'v-timeline', class: this.classes, - }, this.$slots.default) + }, getSlot(this)) }, }) diff --git a/packages/vuetify/src/components/VTimeline/VTimelineItem.ts b/packages/vuetify/src/components/VTimeline/VTimelineItem.ts index 0a156d5c902..c0d9b40ce8f 100644 --- a/packages/vuetify/src/components/VTimeline/VTimelineItem.ts +++ b/packages/vuetify/src/components/VTimeline/VTimelineItem.ts @@ -9,6 +9,7 @@ import VIcon from '../VIcon' // Mixins import Themeable from '../../mixins/themeable' import Colorable from '../../mixins/colorable' +import { getSlot } from '../../util/helpers' const baseMixins = mixins( Colorable, @@ -52,14 +53,10 @@ export default baseMixins.extend().extend({ genBody () { return this.$createElement('div', { staticClass: 'v-timeline-item__body', - }, this.$slots.default) + }, getSlot(this)) }, genIcon (): VNode | VNode[] { - if (this.$slots.icon) { - return this.$slots.icon - } - - return this.$createElement(VIcon, { + return getSlot(this, 'icon') || this.$createElement(VIcon, { props: { color: this.iconColor, dark: !this.theme.isDark, @@ -96,7 +93,7 @@ export default baseMixins.extend().extend({ genOpposite () { return this.$createElement('div', { staticClass: 'v-timeline-item__opposite', - }, this.$slots.opposite) + }, getSlot(this, 'opposite')) }, }, diff --git a/packages/vuetify/src/components/VWindow/VWindow.ts b/packages/vuetify/src/components/VWindow/VWindow.ts index 0009d6bdd43..bad7fd194d1 100644 --- a/packages/vuetify/src/components/VWindow/VWindow.ts +++ b/packages/vuetify/src/components/VWindow/VWindow.ts @@ -13,6 +13,7 @@ import Touch from '../../directives/touch' import VBtn from '../VBtn' import VIcon from '../VIcon' import { BaseItemGroup } from '../VItemGroup/VItemGroup' +import { getSlot } from '../../util/helpers' /* @vue/component */ export default BaseItemGroup.extend({ @@ -118,7 +119,7 @@ export default BaseItemGroup.extend({ methods: { genDefaultSlot () { - return this.$slots.default + return getSlot(this) }, genContainer (): VNode { const children = [this.genDefaultSlot()] diff --git a/packages/vuetify/src/components/VWindow/VWindowItem.ts b/packages/vuetify/src/components/VWindow/VWindowItem.ts index da3dacdfdb7..dcebf272c7e 100644 --- a/packages/vuetify/src/components/VWindow/VWindowItem.ts +++ b/packages/vuetify/src/components/VWindow/VWindowItem.ts @@ -9,7 +9,7 @@ import { factory as GroupableFactory } from '../../mixins/groupable' import Touch from '../../directives/touch' // Utilities -import { convertToUnit } from '../../util/helpers' +import { convertToUnit, getSlot } from '../../util/helpers' import mixins, { ExtractVue } from '../../util/mixins' // Types @@ -75,7 +75,7 @@ export default baseMixins.extend().extend( methods: { genDefaultSlot () { - return this.$slots.default + return getSlot(this) }, genWindowItem () { return this.$createElement('div', { diff --git a/packages/vuetify/src/mixins/loadable/index.ts b/packages/vuetify/src/mixins/loadable/index.ts index b5c80a972b7..3c73f0b07d5 100644 --- a/packages/vuetify/src/mixins/loadable/index.ts +++ b/packages/vuetify/src/mixins/loadable/index.ts @@ -1,5 +1,6 @@ import Vue, { VNode } from 'vue' import VProgressLinear from '../../components/VProgressLinear' +import { getSlot } from '../../util/helpers' interface colorable extends Vue { color?: string @@ -33,7 +34,7 @@ export default Vue.extend().extend({ genProgress (): VNode | VNode[] | null { if (this.loading === false) return null - return this.$slots.progress || this.$createElement(VProgressLinear, { + return getSlot(this, 'progress') || this.$createElement(VProgressLinear, { props: { absolute: true, color: (this.loading === true || this.loading === '') diff --git a/packages/vuetify/src/mixins/picker/index.ts b/packages/vuetify/src/mixins/picker/index.ts index ea2e4a59137..c2ab6214e1d 100644 --- a/packages/vuetify/src/mixins/picker/index.ts +++ b/packages/vuetify/src/mixins/picker/index.ts @@ -8,6 +8,7 @@ import Themeable from '../themeable' // Utils import mixins from '../../util/mixins' +import { getSlot } from '../../util/helpers' // Types import { VNode } from 'vue' @@ -43,7 +44,7 @@ export default mixins( return this.$scopedSlots.default ? this.$scopedSlots.default({ save: (this as any).save, cancel: (this as any).cancel, - }) : this.$slots.default + }) : getSlot(this) }, genPicker (staticClass: string) { const children: VNode[] = [] diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts index 92bd7a078b4..7a920c460f4 100644 --- a/packages/vuetify/src/util/helpers.ts +++ b/packages/vuetify/src/util/helpers.ts @@ -409,10 +409,15 @@ export function getPrefixedScopedSlots (prefix: string, scopedSlots: any) { } export function getSlot (vm: Vue, name = 'default', data?: object | (() => object), optional = false) { + const kebabName = kebabCase(name) if (vm.$scopedSlots.hasOwnProperty(name)) { return vm.$scopedSlots[name]!(data instanceof Function ? data() : data) + } else if (vm.$scopedSlots.hasOwnProperty(kebabName)) { + return vm.$scopedSlots[kebabName]!(data instanceof Function ? data() : data) } else if (vm.$slots.hasOwnProperty(name) && (!data || optional)) { return vm.$slots[name] + } else if (vm.$slots.hasOwnProperty(kebabName) && (!data || optional)) { + return vm.$slots[kebabName] } return undefined }