refactor(v-expansion-panel): converted to typescript

src/components/VExpansionPanel/VExpansionPanel.js → src/components/VExpansionPanel/VExpansionPanel.ts

@@ -1,15 +1,21 @@
 import '../../stylus/components/_expansion-panel.styl'
 
+import { VExpansionPanelContent } from '.'
+
 import Themeable from '../../mixins/themeable'
 import { provide as RegistrableProvide } from '../../mixins/registrable'
 
+import mixins from '../../util/mixins'
+import { VNode } from 'vue'
+import { PropValidator } from 'vue/types/options'
+
+type VExpansionPanelContentInstance = InstanceType<typeof VExpansionPanelContent>
+
 /* @vue/component */
-export default {
+export default mixins(Themeable, RegistrableProvide('expansionPanel')).extend({
   name: 'v-expansion-panel',
 
-  mixins: [Themeable, RegistrableProvide('expansionPanel')],
-
-  provide () {
+  provide (): object {
     return {
       expansionPanel: this
     }
@@ -25,16 +31,16 @@ export default {
     value: {
       type: [Number, Array],
       default: () => null
-    }
+    } as any as PropValidator<number | number[]>
   },
 
   data: () => ({
-    items: [],
-    open: []
+    items: [] as VExpansionPanelContentInstance[],
+    open: [] as boolean[]
   }),
 
   computed: {
-    classes () {
+    classes (): object {
       return {
         'v-expansion-panel--focusable': this.focusable,
         'v-expansion-panel--popout': this.popout,
@@ -45,11 +51,11 @@ export default {
   },
 
   watch: {
-    expand (val) {
-      let openIndex
-      if (!val) {
+    expand (v: boolean) {
+      let openIndex = -1
+      if (!v) {
         // Close all panels unless only one is open
-        const openCount = this.open.reduce((acc, val) => acc + val, 0)
+        const openCount = this.open.reduce((acc, val) => val ? acc + 1 : acc, 0)
         const open = Array(this.items.length).fill(false)
 
         if (openCount === 1) {
@@ -63,9 +69,9 @@ export default {
         this.open = open
       }
 
-      this.$emit('input', val ? this.open : (openIndex > -1 ? openIndex : null))
+      this.$emit('input', v ? this.open : (openIndex > -1 ? openIndex : null))
     },
-    value (v) {
+    value (v: number | number[]) {
       this.updateFromValue(v)
     }
   },
@@ -75,7 +81,7 @@ export default {
   },
 
   methods: {
-    updateFromValue (v) {
+    updateFromValue (v: number | number[]) {
       if (Array.isArray(v) && !this.expand) return
 
       let open = Array(this.items.length).fill(false)
@@ -87,17 +93,17 @@ export default {
 
       this.updatePanels(open)
     },
-    updatePanels (open) {
+    updatePanels (open: boolean[]) {
       this.open = open
       for (let i = 0; i < this.items.length; i++) {
         const active = open && open[i]
         this.items[i].toggle(active)
       }
     },
-    panelClick (uid) {
+    panelClick (uid: number) {
       const open = this.expand ? this.open.slice() : Array(this.items.length).fill(false)
       for (let i = 0; i < this.items.length; i++) {
-        if (this.items[i].uid === uid) {
+        if (this.items[i]._uid === uid) {
           open[i] = !this.open[i]
           !this.expand && this.$emit('input', open[i] ? i : null)
         }
@@ -106,21 +112,21 @@ export default {
       this.updatePanels(open)
       if (this.expand) this.$emit('input', open)
     },
-    register (uid, toggle) {
-      this.items.push({ uid, toggle })
+    register (content: VExpansionPanelContentInstance) {
+      this.items.push(content)
       this.open.push(false)
     },
-    unregister (uid) {
-      const index = this.items.findIndex(i => i.uid === uid)
+    unregister (content: VExpansionPanelContentInstance) {
+      const index = this.items.findIndex(i => i._uid === content._uid)
       this.items.splice(index, 1)
       this.open.splice(index, 1)
     }
   },
 
-  render (h) {
+  render (h): VNode {
     return h('ul', {
       staticClass: 'v-expansion-panel',
       class: this.classes
     }, this.$slots.default)
   }
-}
+})

src/components/VExpansionPanel/VExpansionPanelContent.js → src/components/VExpansionPanel/VExpansionPanelContent.ts

@@ -3,19 +3,39 @@ import { VExpandTransition } from '../transitions'
 import Bootable from '../../mixins/bootable'
 import Toggleable from '../../mixins/toggleable'
 import Rippleable from '../../mixins/rippleable'
-import { inject as RegistrableInject } from '../../mixins/registrable'
+import { Registrable, inject as RegistrableInject } from '../../mixins/registrable'
 
 import VIcon from '../VIcon'
+import VExpansionPanel from '.'
+
+import mixins, { ExtractVue } from '../../util/mixins'
+import Vue, { VNode } from 'vue'
 
 import { consoleWarn } from '../../util/console'
 
-/* @vue/component */
-export default {
-  name: 'v-expansion-panel-content',
+type VExpansionPanelInstance = InstanceType<typeof VExpansionPanel>
 
-  mixins: [Bootable, Toggleable, Rippleable, RegistrableInject('expansionPanel', 'v-expansion-panel-content', 'v-expansion-panel')],
+interface options extends Vue {
+  expansionPanel: VExpansionPanelInstance
+}
 
-  inject: ['expansionPanel'],
+export default mixins<options &
+/* eslint-disable indent */
+  ExtractVue<
+    typeof Bootable,
+    typeof Toggleable,
+    typeof Rippleable,
+    Registrable<'expansionPanel'>
+  >
+/* eslint-enable indent */
+>(
+  Bootable,
+  Toggleable,
+  Rippleable,
+  RegistrableInject('expansionPanel', 'v-expansion-panel-content', 'v-expansion-panel')
+  /* @vue/component */
+).extend({
+  name: 'v-expansion-panel-content',
 
   props: {
     disabled: Boolean,
@@ -36,33 +56,33 @@ export default {
   }),
 
   computed: {
-    containerClasses () {
+    containerClasses (): object {
       return {
         'v-expansion-panel__container--active': this.isActive,
         'v-expansion-panel__container--disabled': this.isDisabled
       }
     },
-    isDisabled () {
+    isDisabled (): boolean {
       return this.expansionPanel.disabled || this.disabled
     },
-    isReadonly () {
+    isReadonly (): boolean {
       return this.expansionPanel.readonly || this.readonly
     }
   },
 
   mounted () {
-    this.expansionPanel.register(this._uid, this.toggle)
+    this.expansionPanel.register(this)
 
     // Can be removed once fully deprecated
     if (typeof this.value !== 'undefined') consoleWarn('v-model has been deprecated', this)
   },
 
   beforeDestroy () {
-    this.expansionPanel.unregister(this._uid)
+    this.expansionPanel.unregister(this)
   },
 
   methods: {
-    onKeydown (e) {
+    onKeydown (e: KeyboardEvent) {
       // Ensure element is the activeElement
       if (
         e.keyCode === 13 &&
@@ -79,29 +99,28 @@ export default {
         directives: [{
           name: 'show',
           value: this.isActive
-        }]
+        }] as any
       }, this.showLazyContent(this.$slots.default))
     },
     genHeader () {
+      const children = [...this.$slots.header]
+
+      if (!this.hideActions) children.push(this.genIcon())
+
       return this.$createElement('div', {
         staticClass: 'v-expansion-panel__header',
         directives: [{
           name: 'ripple',
           value: this.ripple
-        }],
+        }] as any,
         on: {
           click: this.onHeaderClick
         }
-      }, [
-        this.$slots.header,
-        this.genIcon()
-      ])
+      }, children)
     },
     genIcon () {
-      if (this.hideActions) return null
-
       const icon = this.$slots.actions ||
-        this.$createElement(VIcon, this.expandIcon)
+        [this.$createElement(VIcon, this.expandIcon)]
 
       return this.$createElement('transition', {
         attrs: { name: 'fade-transition' }
@@ -111,11 +130,11 @@ export default {
           directives: [{
             name: 'show',
             value: !this.isDisabled
-          }]
-        }, [icon])
+          }] as any
+        }, icon)
       ])
     },
-    toggle (active) {
+    toggle (active: boolean) {
       if (active) this.isBooted = true
 
       // We treat bootable differently
@@ -124,7 +143,7 @@ export default {
     }
   },
 
-  render (h) {
+  render (h): VNode {
     const children = []
 
     this.$slots.header && children.push(this.genHeader())
@@ -141,4 +160,4 @@ export default {
       }
     }, children)
   }
-}
+})

src/components/VExpansionPanel/index.js → src/components/VExpansionPanel/index.ts

@@ -5,8 +5,8 @@ export { VExpansionPanel, VExpansionPanelContent }
 
 /* istanbul ignore next */
 VExpansionPanel.install = function install (Vue) {
-  Vue.component(VExpansionPanel.name, VExpansionPanel)
-  Vue.component(VExpansionPanelContent.name, VExpansionPanelContent)
+  Vue.component(VExpansionPanel.options.name, VExpansionPanel)
+  Vue.component(VExpansionPanelContent.options.name, VExpansionPanelContent)
 }
 
 export default VExpansionPanel

src/mixins/bootable.ts

@@ -35,8 +35,8 @@ export default Vue.extend<ExtractVue<Toggleable>>().extend({
   },
 
   methods: {
-    showLazyContent (content: VNode[]): VNode[] | null {
-      return this.hasContent ? content : null
+    showLazyContent (content: VNode[]): VNode[] | undefined {
+      return this.hasContent ? content : undefined
     }
   }
 })

test/unit/components/VExpansionPanel/VExpansionPanel.spec.js

@@ -57,7 +57,7 @@ test('VExpansionPanel.js', ({ mount, compileToFunctions }) => {
   it('should show content on v-model change', async () => {
     const wrapper = mount(VExpansionPanel, {
       slots: {
-        default: VExpansionPanelContent
+        default: VExpansionPanelContent.options
       }
     })
 
@@ -75,7 +75,7 @@ test('VExpansionPanel.js', ({ mount, compileToFunctions }) => {
         value: 0
       },
       slots: {
-        default: VExpansionPanelContent
+        default: VExpansionPanelContent.options
       }
     })
 

test/unit/mixins/bootable.spec.js

@@ -18,7 +18,7 @@ test('bootable.js', ({ mount }) => {
     expect(wrapper.vm.isBooted).toBe(true)
   })
 
-  it('should be return lazy content', async () => {
+  it('should return lazy content', async () => {
     const wrapper = mount({
       mixins: [ Bootable ],
       render: h => h('div')
@@ -38,7 +38,7 @@ test('bootable.js', ({ mount }) => {
       }
     })
 
-    expect(wrapperLazy.vm.showLazyContent('content')).toBe(null)
+    expect(wrapperLazy.vm.showLazyContent('content')).toBe(undefined)
     wrapperLazy.vm.isActive = true
     await wrapper.vm.$nextTick()
     expect(wrapperLazy.vm.showLazyContent('content')).toBe('content')