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

nekosaur · 2018-07-13T19:33:36Z

Description

Converted v-expansion-panel to typescript. Had to disable two tests because of vuejs/vue-test-utils#824

Motivation and Context

because!

How Has This Been Tested?

visually, jest

Markup:

<template>
  <v-app>
    <div class="text-xs-center mb-3">{{ panel }}</div>
    <v-expansion-panel
      v-model="panel"
      expand
    >
      <v-expansion-panel-content
        v-for="(item, i) in 5"
        :key="i"
      >
        <div slot="header">Item</div>
        <v-card>
          <v-card-text class="grey lighten-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>

    <div class="d-flex justify-between align-center mb-3">
      <v-btn @click="all">all</v-btn>
      <v-btn @click="none">none</v-btn>
    </div>

    <v-expansion-panel
      v-model="panel2"
      expand
    >
      <v-expansion-panel-content
        v-for="(item,i) in items"
        :key="i"
      >
        <div slot="header">Item</div>
        <v-card>
          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>

    <v-expansion-panel>
      <v-expansion-panel-content
        v-for="(item,i) in 5"
        :key="i"
        expand-icon="mdi-menu-down"
      >
        <div slot="header">Item</div>
        <v-card>
          <v-card-text class="grey lighten-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</template>

<script>
  export default {
    data () {
      return {
        panel: [false, true, true],
        panel2: [],
        items: 5
      }
    },
    methods: {
      // Create an array the length of our items
      // with all values as true
      all () {
        this.panel2 = [...Array(this.items).keys()].map(_ => true)
      },
      // Reset the panel
      none () {
        this.panel2 = []
      }
    }
  }
</script>

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

The PR title is no longer than 64 characters.
The PR is submitted to the correct branch (master for bug fixes, dev for new features and breaking changes).
My code follows the code style of this project.
My change requires a change to the documentation.
I have created a PR in the documentation with the necessary changes.

codecov · 2018-07-13T19:33:41Z

Codecov Report

Merging #4609 into master will decrease coverage by 0.02%.
The diff coverage is 88.88%.

@@            Coverage Diff             @@
##           master    #4609      +/-   ##
==========================================
- Coverage   90.17%   90.14%   -0.03%     
==========================================
  Files         206      206              
  Lines        4914     4920       +6     
  Branches     1246     1249       +3     
==========================================
+ Hits         4431     4435       +4     
- Misses        387      389       +2     
  Partials       96       96

Impacted Files	Coverage Δ
src/components/VExpansionPanel/index.ts	`100% <ø> (ø)`
src/mixins/bootable.ts	`100% <100%> (ø)`	⬆️
...mponents/VExpansionPanel/VExpansionPanelContent.ts	`85.29% <87.5%> (ø)`
src/components/VExpansionPanel/VExpansionPanel.ts	`93.33% <88.88%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 52f7357...1f9b4ff. Read the comment docs.

KaelWD · 2018-07-14T07:25:41Z

src/components/VExpansionPanel/VExpansionPanelContent.ts

  },

  methods: {
-    onKeydown (e) {
+    onKeydown (e: any) {


e is a KeyboardEvent

KaelWD · 2018-07-14T07:26:57Z

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

@@ -69,7 +70,8 @@ test('VExpansionPanel.js', ({ mount, compileToFunctions }) => {
    expect(wrapper.first('.v-expansion-panel__container--active')).not.toBe(null)
  })

-  it('should show content on mount using v-model', async () => {
+  // TODO: Enable again when using vue-test-utils and https://github.com/vuejs/vue-test-utils/issues/824 is solved
+  it.skip('should show content on mount using v-model', async () => {


Does slots: { default: VExpansionPanelContent.options } work here?

KaelWD · 2018-07-14T11:53:53Z

src/components/VExpansionPanel/VExpansionPanel.ts

 import Themeable from '../../mixins/themeable'
 import { provide as RegistrableProvide } from '../../mixins/registrable'

+import mixins from '../../util/mixins'
+import { VNode } from '../../../node_modules/vue'
+import { PropValidator } from '../../../node_modules/vue/types/options'


Use absolute paths

KaelWD · 2018-07-14T11:54:25Z

src/components/VExpansionPanel/VExpansionPanel.ts

@@ -25,16 +31,16 @@ export default {
    value: {
      type: [Number, Array],
      default: () => null
-    }
+    } as any as PropValidator<number | number[]>


Is any needed here?

I saw it being done in the code somewhere, and simply as PropValidator<number | number[]> threw errors.

ok that's fine then, just checking.

KaelWD · 2018-07-14T11:58:12Z

src/components/VExpansionPanel/VExpansionPanel.ts

@@ -46,10 +52,10 @@ export default {

  watch: {
    expand (val) {


annotate watch params, they're any by default. (shit decision by vue)

KaelWD · 2018-07-14T13:42:43Z

src/components/VExpansionPanel/VExpansionPanelContent.ts

+import VExpansionPanel from '.'
+
+import mixins, { ExtractVue } from '../../util/mixins'
+import Vue, { VNode } from '../../../node_modules/vue'


Another one

dammit. seems like it's the vscode 1.25 update that's causing it

lock · 2019-04-15T04:21:11Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

nekosaur added 2 commits July 13, 2018 19:27

chore: renamed files to ts

ab6e5c2

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

8985469

nekosaur self-assigned this Jul 13, 2018

KaelWD reviewed Jul 14, 2018

View reviewed changes

nekosaur added 2 commits July 14, 2018 10:53

refactor: event is KeyboardEvent

8150a10

test: .options seems to work

520313b

KaelWD reviewed Jul 14, 2018

View reviewed changes

refactor: fixed imports and annotated watch params

9ff4aba

KaelWD reviewed Jul 14, 2018

View reviewed changes

nekosaur added 2 commits July 14, 2018 17:05

refactor: fixed import

9b7fdd9

refactor: removed $el definition

1f9b4ff

KaelWD approved these changes Jul 14, 2018

View reviewed changes

KaelWD merged commit 5bb7952 into master Jul 14, 2018

KaelWD deleted the refactor/expansion-panel-ts branch July 14, 2018 15:57

lock bot locked as resolved and limited conversation to collaborators Apr 15, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nekosaur commented Jul 13, 2018

codecov bot commented Jul 13, 2018 •

edited

Loading

KaelWD Jul 14, 2018

KaelWD Jul 14, 2018

KaelWD Jul 14, 2018

KaelWD Jul 14, 2018

nekosaur Jul 14, 2018

KaelWD Jul 14, 2018

KaelWD Jul 14, 2018 •

edited

Loading

KaelWD Jul 14, 2018

nekosaur Jul 14, 2018

lock bot commented Apr 15, 2019

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

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

Conversation

nekosaur commented Jul 13, 2018

Description

Motivation and Context

How Has This Been Tested?

Markup:

Types of changes

Checklist:

codecov bot commented Jul 13, 2018 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KaelWD Jul 14, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lock bot commented Apr 15, 2019

codecov bot commented Jul 13, 2018 •

edited

Loading

KaelWD Jul 14, 2018 •

edited

Loading