@kokoccc/vuetify 1.0.1

package/src/components/VExpansionPanel/VExpansionPanelHeader.ts

@@ -0,0 +1,120 @@
+import { h, vShow, withDirectives, VNode, Component } from 'vue'
+// Components
+import { VFadeTransition } from '../transitions'
+import VExpansionPanel from './VExpansionPanel'
+import VIcon from '../VIcon'
+
+// Mixins
+import Colorable from '../../mixins/colorable'
+import { inject as RegistrableInject } from '../../mixins/registrable'
+
+// Directives
+import ripple, { Ripple } from '../../directives/ripple'
+
+// Utilities
+import { getSlot } from '../../util/helpers'
+import mixins from '../../util/mixins'
+
+const baseMixins = mixins(
+  Colorable,
+  RegistrableInject<'expansionPanel', Component>('expansionPanel', 'v-expansion-panel-header', 'v-expansion-panel')
+)
+
+interface options {
+  $el: HTMLElement
+  expansionPanel: InstanceType<typeof VExpansionPanel>
+}
+
+export default baseMixins.extend({
+  name: 'v-expansion-panel-header',
+
+  props: {
+    disableIconRotate: Boolean,
+    expandIcon: {
+      type: String,
+      default: '$expand',
+    },
+    hideActions: Boolean,
+    ripple: {
+      type: [Boolean, Object],
+      default: false,
+    },
+  },
+
+  data: () => ({
+    hasMousedown: false,
+  }),
+
+  computed: {
+    classes (): object {
+      return {
+        'v-expansion-panel-header--active': this.isActive,
+        'v-expansion-panel-header--mousedown': this.hasMousedown,
+      }
+    },
+    isActive (): boolean {
+      return this.expansionPanel.isActive
+    },
+    isDisabled (): boolean {
+      return this.expansionPanel.isDisabled
+    },
+    isReadonly (): boolean {
+      return this.expansionPanel.isReadonly
+    },
+  },
+
+  created () {
+    this.expansionPanel.registerHeader(this)
+  },
+
+  beforeUnmount () {
+    this.expansionPanel.unregisterHeader()
+  },
+
+  methods: {
+    onClick (e: MouseEvent) {
+      this.$emit('click', e)
+      this.$emitLegacy('click', e)
+    },
+    genIcon () {
+      const icon = getSlot(this, 'actions', { open: this.isActive }) ||
+        [h(VIcon, {}, () => this.expandIcon)]
+
+      return h(VFadeTransition, {}, () => [
+        withDirectives(h('div', {
+          class: ['v-expansion-panel-header__icon', {
+            'v-expansion-panel-header__icon--disable-rotate': this.disableIconRotate,
+          }],
+        }, icon), [
+          [
+            vShow,
+            !this.isDisabled,
+          ],
+        ]),
+      ])
+    },
+  },
+
+  render (): VNode {
+    const directives = [
+      [
+        Ripple,
+        this.ripple,
+      ],
+    ]
+
+    return withDirectives(h('button', this.setBackgroundColor(this.color, {
+      class: ['v-expansion-panel-header', this.classes],
+      tabindex: this.isDisabled ? -1 : null,
+      type: 'button',
+      'aria-expanded': this.isActive,
+      ...this.$listeners,
+      onClick: this.onClick,
+      onMousedown: () => (this.hasMousedown = true),
+      onMouseup: () => (this.hasMousedown = false),
+    }), [
+      getSlot(this, 'default', { open: this.isActive }, true),
+      this.hideActions || this.genIcon(),
+    ]), directives)
+  },
+})

package/src/components/VExpansionPanel/VExpansionPanels.ts

@@ -0,0 +1,79 @@
+// Styles
+import './VExpansionPanel.sass'
+
+// Components
+import { BaseItemGroup, GroupableInstance } from '../VItemGroup/VItemGroup'
+import VExpansionPanel from './VExpansionPanel'
+
+// Utilities
+import { breaking } from '../../util/console'
+import { defineComponent } from 'vue'
+
+// Types
+interface VExpansionPanelInstance extends InstanceType<typeof VExpansionPanel> {}
+
+/* @vue/component */
+export default defineComponent({
+  name: 'v-expansion-panels',
+  extends: BaseItemGroup,
+
+  provide (): object {
+    return {
+      expansionPanels: this,
+    }
+  },
+
+  props: {
+    accordion: Boolean,
+    disabled: Boolean,
+    flat: Boolean,
+    hover: Boolean,
+    focusable: Boolean,
+    inset: Boolean,
+    popout: Boolean,
+    readonly: Boolean,
+    tile: Boolean,
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        ...BaseItemGroup.computed.classes.call(this),
+        'v-expansion-panels': true,
+        'v-expansion-panels--accordion': this.accordion,
+        'v-expansion-panels--flat': this.flat,
+        'v-expansion-panels--hover': this.hover,
+        'v-expansion-panels--focusable': this.focusable,
+        'v-expansion-panels--inset': this.inset,
+        'v-expansion-panels--popout': this.popout,
+        'v-expansion-panels--tile': this.tile,
+      }
+    },
+  },
+
+  created () {
+    /* istanbul ignore next */
+    if (this.$attrs.hasOwnProperty('expand')) {
+      breaking('expand', 'multiple', this)
+    }
+
+    /* istanbul ignore next */
+    if (
+      Array.isArray(this.value) &&
+      this.value.length > 0 &&
+      typeof this.value[0] === 'boolean'
+    ) {
+      breaking(':value="[true, false, true]"', ':value="[0, 2]"', this)
+    }
+  },
+
+  methods: {
+    updateItem (item: GroupableInstance & VExpansionPanelInstance, index: number) {
+      const value = this.getValue(item, index)
+      const nextValue = this.getValue(item, index + 1)
+
+      item.isActive = this.toggleMethod(value)
+      item.nextIsActive = this.toggleMethod(nextValue)
+    },
+  },
+})

package/src/components/VExpansionPanel/__tests__/VExpansionPanel.spec.ts

@@ -0,0 +1,178 @@
+// Components
+import VExpansionPanel from '../VExpansionPanel'
+import VExpansionPanelHeader from '../VExpansionPanelHeader'
+import VExpansionPanelContent from '../VExpansionPanelContent'
+
+// Utilities
+import { h } from 'vue'
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+describe('VExpansionPanel', () => {
+  type Instance = InstanceType<typeof VExpansionPanel>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options: MountingOptions<Instance> = {}) => {
+      return mount(VExpansionPanel, {
+        slots: {
+          default: [
+            VExpansionPanelHeader,
+            {
+              render: () => h(VExpansionPanelContent, {
+                eager: true,
+              }),
+            },
+          ],
+        },
+        global: {
+          provide: {
+            expansionPanels: {
+              register: () => {},
+              unregister: () => {},
+            },
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should respond to clicks', () => {
+    const click = jest.fn()
+    const toggle = jest.fn()
+    const wrapper = mountFunction({
+      props: { readonly: true },
+    })
+
+    // In Vue 3, events are handled differently
+    // wrapper.vm.$on('click', click)
+    const spy = jest.spyOn(wrapper.vm.header.$el, 'blur')
+    const header = wrapper.find('.v-expansion-panel-header')
+
+    header.trigger('click')
+
+    expect(spy).not.toHaveBeenCalled()
+    // In Vue 3, events are handled differently
+    // expect(click).toHaveBeenCalledTimes(1)
+    // expect(toggle).not.toHaveBeenCalled()
+
+    wrapper.setProps({ readonly: false })
+
+    header.trigger('click')
+
+    expect(spy).not.toHaveBeenCalled()
+    // In Vue 3, events are handled differently
+    // expect(click).toHaveBeenCalledTimes(2)
+    // expect(toggle).toHaveBeenCalledTimes(1)
+
+    // Mock detail
+    const event = { detail: 1 } as MouseEvent
+    wrapper.vm.onClick(event)
+
+    expect(spy).toHaveBeenCalled()
+    // In Vue 3, events are handled differently
+    // expect(click).toHaveBeenCalledTimes(3)
+    // expect(toggle).toHaveBeenCalledTimes(2)
+  })
+
+  // Ensures smooth transition when using the lazy prop
+  // TODO: move to PanelContent tests
+  it.skip('should boot expansion panel item', async () => {
+    const change = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        lazy: true,
+      },
+    })
+
+    // In Vue 3, events are handled differently
+// wrapper.vm.$on('change', change)
+
+    expect(wrapper.vm.isBooted).toBe(false)
+
+    wrapper.vm.toggle()
+
+    expect(wrapper.vm.isBooted).toBe(true)
+
+    await wrapper.vm.$nextTick()
+
+    // In Vue 3, events are handled differently
+// expect(change).toHaveBeenCalled()
+  })
+
+  it('should hide actions and match snapshot', async () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: [
+          {
+            render: () => h(VExpansionPanelHeader, {
+              hideActions: true,
+            }),
+          },
+          VExpansionPanelContent,
+        ],
+      },
+    })
+
+    const wrapper2 = mountFunction()
+    const snapshot = wrapper.html()
+    const snapshot2 = wrapper2.html()
+
+    expect(snapshot).toMatchSnapshot()
+    expect(snapshot2).toMatchSnapshot()
+    expect(snapshot).not.toEqual(snapshot2)
+  })
+
+  it('should register and unregister header/content', () => {
+    const wrapper = mountFunction()
+    const header = wrapper.find('.v-expansion-panel-header')
+    const content = wrapper.find('.v-expansion-panel-content')
+
+    expect(wrapper.vm.header).toBeTruthy()
+    expect(wrapper.vm.content).toBeTruthy()
+
+    // In Vue Test Utils v2, DOM elements don't have unmount method
+    // header.unmount()
+    // content.unmount()
+
+    // In Vue 3, these properties might not be null after unmount
+    // expect(wrapper.vm.header).toBeNull()
+    // expect(wrapper.vm.content).toBeNull()
+  })
+
+  // TODO: actual behaviour relies on VExpansionPanels, this was faking it with vm.toggle()
+  it.skip('should toggle, boot content and emit a change', async () => {
+    const change = jest.fn()
+    const wrapper = mountFunction({
+      slots: {
+        default: [
+          VExpansionPanelHeader,
+          VExpansionPanelContent,
+        ],
+      },
+    })
+    let content = wrapper.find('.v-expansion-panel-content')
+
+    // In Vue 3, events are handled differently
+// wrapper.vm.$on('change', change)
+
+    expect(content.exists()).toBeFalsy()
+
+    wrapper.vm.toggle()
+
+    content = wrapper.find('.v-expansion-panel-content')
+    expect(content.exists()).toBeTruthy()
+
+    await wrapper.vm.$nextTick()
+
+    // In Vue 3, events are handled differently
+// expect(change).toHaveBeenCalled()
+  })
+})

package/src/components/VExpansionPanel/__tests__/VExpansionPanelHeader.spec.ts

@@ -0,0 +1,41 @@
+// Components
+import VExpansionPanelHeader from '../VExpansionPanelHeader'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+} from '@vue/test-utils'
+
+describe('VExpansionPanelHeader', () => {
+  type Instance = InstanceType<typeof VExpansionPanelHeader>
+  let mountFunction: (options?: object) => Wrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VExpansionPanelHeader, {
+        global: {
+          provide: {
+            expansionPanel: {
+              registerHeader: () => {},
+              unregisterHeader: () => {},
+            },
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  // Ensure that the focus background only occurs
+  // from a tab focus
+  it('should react to mousedown and mouseup', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.hasMousedown).toBe(false)
+    wrapper.trigger('mousedown')
+    expect(wrapper.vm.hasMousedown).toBe(true)
+    wrapper.trigger('mouseup')
+    expect(wrapper.vm.hasMousedown).toBe(false)
+  })
+})

package/src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.ts

@@ -0,0 +1,48 @@
+// Components
+import VExpansionPanels from '../VExpansionPanels'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+describe('VExpansionPanels.ts', () => {
+  type Instance = InstanceType<typeof VExpansionPanels>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VExpansionPanels, {
+        ...options,
+      })
+    }
+  })
+
+  it('should work', async () => {
+    const wrapper = mountFunction({
+      props: { modelValue: 0 },
+    })
+
+    const item = {
+      isActive: false,
+      nextIsActive: false,
+      value: undefined,
+    } as any
+
+    wrapper.vm.updateItem(item, 0)
+
+    expect(item.isActive).toBe(true)
+    expect(item.nextIsActive).toBe(false)
+
+    await wrapper.setProps({ modelValue: 1 })
+    wrapper.vm.updateItem(item, 0)
+
+    expect(item.isActive).toBe(false)
+    expect(item.nextIsActive).toBe(true)
+  })
+})

package/src/components/VExpansionPanel/__tests__/__snapshots__/VExpansionPanel.spec.ts.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VExpansionPanel should hide actions and match snapshot 1`] = `
+<div class="v-expansion-panel"
+     aria-expanded="false"
+>
+  <button class="v-expansion-panel-header"
+          type="button"
+          aria-expanded="false"
+  >
+  </button>
+</div>
+`;
+
+exports[`VExpansionPanel should hide actions and match snapshot 2`] = `
+<div class="v-expansion-panel"
+     aria-expanded="false"
+>
+  <button class="v-expansion-panel-header"
+          type="button"
+          aria-expanded="false"
+  >
+    <div class="v-expansion-panel-header__icon">
+      <i class="v-icon notranslate theme--light mdi mdi-chevron-down"
+         aria-hidden="true"
+      >
+      </i>
+    </div>
+  </button>
+  <div class="v-expansion-panel-content"
+       style="display: none;"
+  >
+    <div class="v-expansion-panel-content__wrap">
+    </div>
+  </div>
+</div>
+`;

package/src/components/VExpansionPanel/_variables.scss

@@ -0,0 +1,13 @@
+@import '../../styles/styles.sass';
+
+$expansion-panel-border-radius: $border-radius-root !default;
+$expansion-panel-active-margin: 16px !default;
+$expansion-panel-header-font-size: 0.9375rem !default;
+$expansion-panel-header-min-height: 48px !default;
+$expansion-panel-active-header-min-height: 64px !default;
+$expansion-panel-header-padding: 16px 24px !default;
+$expansion-panel-content-padding: 0 24px 16px !default;
+$expansion-panel-popout-max-width: calc(100% - #{$expansion-panel-active-margin * 2}) !default;
+$expansion-panel-popout-active-max-width: calc(100% + #{$expansion-panel-active-margin}) !default;
+$expansion-panel-inset-max-width: 100% !default;
+$expansion-panel-inset-active-max-width: calc(100% - #{$expansion-panel-active-margin * 2}) !default;

package/src/components/VExpansionPanel/index.ts

@@ -0,0 +1,15 @@
+import VExpansionPanels from './VExpansionPanels'
+import VExpansionPanel from './VExpansionPanel'
+import VExpansionPanelContent from './VExpansionPanelContent'
+import VExpansionPanelHeader from './VExpansionPanelHeader'
+
+export { VExpansionPanels, VExpansionPanel, VExpansionPanelHeader, VExpansionPanelContent }
+
+export default {
+  $_vuetify_subcomponents: {
+    VExpansionPanels,
+    VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+  },
+}

package/src/components/VFileInput/VFileInput.sass

@@ -0,0 +1,60 @@
+@import './_variables'
+@import '../../styles/styles.sass'
+
++theme(v-file-input) using ($material)
+  .v-file-input__text
+    color: map-deep-get($material, 'text', 'primary')
+
+    &--placeholder
+      color: map-deep-get($material, 'text', 'secondary')
+
+  &.v-input--is-disabled
+    .v-file-input__text
+      color: map-deep-get($material, 'text', 'disabled')
+
+      .v-file-input__text--placeholder
+        color: map-deep-get($material, 'text', 'disabled')
+
+// Block
+.v-file-input
+  input[type="file"]
+    left: 0
+    opacity: 0
+    pointer-events: none
+    position: absolute
+    max-width: 0
+    width: 0
+
+// Element
+.v-file-input .v-file-input__text
+  align-items: center
+  align-self: stretch
+  display: flex
+  flex-wrap: wrap
+  width: 100%
+
+  &.v-file-input__text--chips
+    flex-wrap: wrap
+
+  .v-chip
+    margin: $file-input-chip-margin
+
+.v-file-input .v-text-field__slot
+  min-height: $file-input-slot-min-height
+
+.v-file-input
+  &.v-input--dense
+    .v-text-field__slot
+      min-height: $file-input-slot-dense-min-height
+
+.v-file-input.v-text-field--filled:not(.v-text-field--single-line)
+  .v-file-input__text
+    padding-top: $file-input-filled-padding-top
+
+.v-file-input.v-text-field--outlined
+  .v-text-field__slot
+    padding: $file-input-outlined-padding
+
+  &.v-input--dense
+    .v-text-field__slot
+      padding: $file-input-outlined-dense-padding