@kokoccc/vuetify 1.0.1

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VDialog.ts should render a disabled component and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;
+
+exports[`VDialog.ts should render a eager component and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;
+
+exports[`VDialog.ts should render a fullscreen component and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;
+
+exports[`VDialog.ts should render a persistent component and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;
+
+exports[`VDialog.ts should render a scrollable component and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;
+
+exports[`VDialog.ts should render component and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;
+
+exports[`VDialog.ts should render component with custom origin and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;
+
+exports[`VDialog.ts should render component with custom transition and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;
+
+exports[`VDialog.ts should render component with custom width (max-width) and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;
+
+exports[`VDialog.ts should render component with custom width and match snapshot 1`] = `
+<div class="v-dialog__container">
+</div>
+`;

package/src/components/VDialog/_variables.scss

@@ -0,0 +1,13 @@
+@import '../../styles/styles.sass';
+
+$dialog-border-radius: $border-radius-root !default;
+$dialog-card-subtitle-padding: 0 24px 20px !default;
+$dialog-card-actions-padding: 8px 16px !default;
+$dialog-card-text-padding: 0 24px 20px !default;
+$dialog-card-title-font-size: map-deep-get($headings, 'h6', 'size') !default;
+$dialog-card-title-font-weight: map-deep-get($headings, 'h6', 'weight') !default;
+$dialog-card-title-letter-spacing: map-deep-get($headings, 'h6', 'letter-spacing') !default;
+$dialog-card-title-padding: 16px 24px 10px !default;
+$dialog-elevation: 24 !default;
+$dialog-margin: 24px !default;
+$dialog-max-height: 90% !default;

package/src/components/VDialog/index.ts

@@ -0,0 +1,4 @@
+import VDialog from './VDialog'
+
+export { VDialog }
+export default VDialog

package/src/components/VDivider/VDivider.sass

@@ -0,0 +1,40 @@
+@import './_variables.scss'
+
++theme(v-divider) using ($material)
+  border-color: map-get($material, 'dividers')
+
+.v-divider
+  display: block
+  flex: 1 1 0px
+  max-width: 100%
+  height: 0px
+  max-height: 0px
+  border: solid
+  border-width: thin 0 0 0
+  transition: inherit
+
+  &--inset:not(.v-divider--vertical)
+    max-width: calc(100% - #{$divider-inset-margin})
+    +ltr()
+      margin-left: $divider-inset-margin
+
+    +rtl()
+      margin-right: $divider-inset-margin
+
+  &--vertical
+    align-self: stretch
+    border: solid
+    border-width: 0 thin 0 0
+    display: inline-flex
+    height: inherit
+    min-height: 100%
+    max-height: 100%
+    max-width: 0px
+    width: 0px
+    vertical-align: text-bottom
+    margin: 0 -1px // Prevent wrapping in flex layouts
+
+    &.v-divider--inset
+      margin-top: $divider-inset-margin-top
+      min-height: 0
+      max-height: $divider-inset-max-height

package/src/components/VDivider/VDivider.ts

@@ -0,0 +1,40 @@
+import {h} from 'vue'
+// Styles
+import './VDivider.sass'
+
+// Types
+import { VNode, defineComponent } from 'vue'
+
+// Mixins
+import Themeable from '../../mixins/themeable'
+import mergeData from '../../util/mergeData'
+
+
+export default defineComponent({
+  name: 'v-divider',
+  extends: Themeable,
+
+  props: {
+    inset: Boolean,
+    vertical: Boolean,
+  },
+
+  render (): VNode {
+    // WAI-ARIA attributes
+    let orientation
+    if (!this.$attrs.role || this.$attrs.role === 'separator') {
+      orientation = this.vertical ? 'vertical' : 'horizontal'
+    }
+    return h('hr', mergeData({
+      class: {
+        'v-divider': true,
+        'v-divider--inset': this.inset,
+        'v-divider--vertical': this.vertical,
+        ...this.themeClasses,
+      },
+      role: 'separator',
+      'aria-orientation': orientation,
+      ...this.$listeners
+    }, this.$attrs))
+  },
+})

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

@@ -0,0 +1,98 @@
+// Components
+import VDivider from '../VDivider'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+describe('VDivider', () => {
+  type Instance = InstanceType<typeof VDivider>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VDivider, {
+        ...options,
+      })
+    }
+  })
+
+  it('should render component and match snapshot', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render an inset component', () => {
+    const wrapper = mountFunction({
+      props: { inset: true },
+    })
+
+    expect(wrapper.classes('v-divider--inset')).toBe(true)
+  })
+
+  it('should render a light component', () => {
+    const wrapper = mountFunction({
+      props: { light: true },
+    })
+
+    expect(wrapper.classes('theme--light')).toBe(true)
+  })
+
+  it('should render a dark component', () => {
+    const wrapper = mountFunction({
+      props: { dark: true },
+    })
+
+    expect(wrapper.classes('theme--dark')).toBe(true)
+  })
+
+  it('should render a vertical component', () => {
+    const wrapper = mountFunction({
+      props: { vertical: true },
+    })
+
+    expect(wrapper.classes('v-divider--vertical')).toBe(true)
+  })
+
+  it('should have separator role by default', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.attributes('role')).toBe('separator')
+  })
+
+  it('should have aria-orientation horizontal by default', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.attributes('aria-orientation')).toBe('horizontal')
+  })
+
+  it('should have aria-orientation vertical if vertical prop is set', () => {
+    const wrapper = mountFunction({
+      props: { vertical: true },
+    })
+
+    expect(wrapper.attributes('aria-orientation')).toBe('vertical')
+  })
+
+  it('should have presentation role if set in attrs', () => {
+    const wrapper = mountFunction({
+      attrs: { role: 'presentation' },
+    })
+
+    expect(wrapper.attributes('role')).toBe('presentation')
+  })
+
+  it('should have no aria-orientation if presentation role is set in attrs', () => {
+    const wrapper = mountFunction({
+      attrs: { role: 'presentation' },
+    })
+
+    expect(wrapper.attributes('aria-orientation')).toBeUndefined()
+  })
+})

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

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VDivider should render component and match snapshot 1`] = `
+<hr class="v-divider theme--light"
+    role="separator"
+    aria-orientation="horizontal"
+>
+`;

package/src/components/VDivider/_variables.scss

@@ -0,0 +1,5 @@
+@import '../../styles/styles.sass';
+
+$divider-inset-margin: 72px !default;
+$divider-inset-margin-top: 8px !default;
+$divider-inset-max-height: calc(100% - 16px) !default;

package/src/components/VDivider/index.ts

@@ -0,0 +1,4 @@
+import VDivider from './VDivider'
+
+export { VDivider }
+export default VDivider

package/src/components/VExpansionPanel/VExpansionPanel.sass

@@ -0,0 +1,211 @@
+@import './_variables.scss'
+
+// Theme
++theme(v-expansion-panels) using ($material)
+  .v-expansion-panel
+    background-color: map-get($material, 'cards')
+    color: map-deep-get($material, 'text', 'primary')
+
+    &--disabled
+      color: map-deep-get($material, 'text', 'disabled')
+
+    &:not(:first-child)::after
+      border-color: map-get($material, 'dividers')
+
+  .v-expansion-panel-header
+    .v-expansion-panel-header__icon
+      .v-icon
+        color: map-deep-get($material, 'icons', 'active')
+
+  &.v-expansion-panels--focusable
+    .v-expansion-panel-header
+      +states($material)
+
+  &.v-expansion-panels--hover
+    > .v-expansion-panel
+      > .v-expansion-panel-header
+        &:hover::before
+          opacity: map-deep-get($material, 'states', 'hover')
+
+// Block
+.v-expansion-panels
+  border-radius: $expansion-panel-border-radius
+  display: flex
+  flex-wrap: wrap
+  justify-content: center
+  list-style-type: none
+  padding: 0
+  width: 100%
+  z-index: 1
+
+  > *
+    cursor: auto
+
+  > *:first-child
+    border-top-left-radius: inherit
+    border-top-right-radius: inherit
+
+  > *:last-child
+    border-bottom-left-radius: inherit
+    border-bottom-right-radius: inherit
+
+  // round corners on non-accordion/tile panels
+  &:not(&--accordion):not(&--tile)
+    > .v-expansion-panel
+      &--active
+        border-radius: $expansion-panel-border-radius
+
+        + .v-expansion-panel
+          border-top-left-radius: $expansion-panel-border-radius
+          border-top-right-radius: $expansion-panel-border-radius
+
+      &--next-active
+        border-bottom-left-radius: $expansion-panel-border-radius
+        border-bottom-right-radius: $expansion-panel-border-radius
+
+        .v-expansion-panel-header
+          border-bottom-left-radius: inherit
+          border-bottom-right-radius: inherit
+
+// Element
+.v-expansion-panel
+  flex: 1 0 100%
+  max-width: 100%
+  position: relative
+  transition: .3s map-get($transition, 'swing')
+
+  &::before
+    border-radius: inherit
+    bottom: 0
+    content: ''
+    left: 0
+    position: absolute
+    right: 0
+    top: 0
+    z-index: -1
+    +elevationTransition()
+    +elevation(2)
+
+  &:not(:first-child)::after
+    border-top: thin solid
+    content: ''
+    left: 0
+    position: absolute
+    right: 0
+    top: 0
+    transition: .2s border-color map-get($transition, 'fast-out-slow-in'), .2s opacity map-get($transition, 'fast-out-slow-in')
+
+  &--disabled
+    .v-expansion-panel-header
+      pointer-events: none
+
+  &--active
+    &:not(:first-child),
+    + .v-expansion-panel
+      margin-top: $expansion-panel-active-margin
+
+      &::after
+        opacity: 0
+
+    > .v-expansion-panel-header
+         min-height: $expansion-panel-active-header-min-height
+
+    > .v-expansion-panel-header--active .v-expansion-panel-header__icon
+      &:not(.v-expansion-panel-header__icon--disable-rotate) .v-icon
+        transform: rotate(-180deg)
+
+.v-expansion-panel-header__icon
+  display: inline-flex
+  margin-bottom: -4px
+  margin-top: -4px
+  user-select: none
+
+  +ltr()
+    margin-left: auto
+
+  +rtl()
+    margin-right: auto
+
+.v-expansion-panel-header
+  align-items: center
+  border-top-left-radius: inherit
+  border-top-right-radius: inherit
+  display: flex
+  font-size: $expansion-panel-header-font-size
+  line-height: 1
+  min-height: $expansion-panel-header-min-height
+  outline: none
+  padding: $expansion-panel-header-padding
+  position: relative
+  transition: .3s min-height map-get($transition, 'swing')
+  width: 100%
+
+  +ltr()
+    text-align: left
+
+  +rtl()
+    text-align: right
+
+  &:not(.v-expansion-panel-header--mousedown):focus::before
+    opacity: 0.12
+
+  &:before
+    background-color: currentColor
+    border-radius: inherit
+    bottom: 0
+    content: ''
+    left: 0
+    opacity: 0
+    pointer-events: none
+    position: absolute
+    right: 0
+    top: 0
+    transition: .3s opacity map-get($transition, 'swing')
+
+  > *:not(.v-expansion-panel-header__icon)
+    flex: 1 1 auto
+
+.v-expansion-panel-content
+  display: flex
+
+  &__wrap
+    padding: $expansion-panel-content-padding
+    flex: 1 1 auto
+    max-width: 100%
+
+// Modifier
+.v-expansion-panels--accordion
+  > .v-expansion-panel
+    margin-top: 0
+
+    &::after
+      opacity: 1
+
+.v-expansion-panels--popout
+  > .v-expansion-panel
+    max-width: $expansion-panel-popout-max-width
+
+    &--active
+      max-width: $expansion-panel-popout-active-max-width
+
+.v-expansion-panels--inset
+  > .v-expansion-panel
+    max-width: $expansion-panel-inset-max-width
+
+    &--active
+      max-width: $expansion-panel-inset-active-max-width
+
+.v-expansion-panels--flat
+  > .v-expansion-panel
+    &::after
+      border-top: none
+
+    &::before
+      +elevation(0)
+
+.v-expansion-panels--tile
+  border-radius: 0
+
+  > .v-expansion-panel
+    &::before
+      border-radius: 0

package/src/components/VExpansionPanel/VExpansionPanel.ts

@@ -0,0 +1,98 @@
+import {h} from 'vue'
+// Components
+import VExpansionPanels from './VExpansionPanels'
+import VExpansionPanelHeader from './VExpansionPanelHeader'
+import VExpansionPanelContent from './VExpansionPanelContent'
+
+// Mixins
+import { factory as GroupableFactory } from '../../mixins/groupable'
+import { provide as RegistrableProvide } from '../../mixins/registrable'
+
+// Utilities
+import { getSlot } from '../../util/helpers'
+import mixins from '../../util/mixins'
+
+// Types
+import { VNode } from 'vue'
+
+type VExpansionPanelHeaderInstance = InstanceType<typeof VExpansionPanelHeader>
+type VExpansionPanelContentInstance = InstanceType<typeof VExpansionPanelContent>
+
+export default mixins(
+  GroupableFactory<'expansionPanels', typeof VExpansionPanels>('expansionPanels', 'v-expansion-panel', 'v-expansion-panels'),
+  RegistrableProvide('expansionPanel', true)
+  /* @vue/component */
+).extend({
+  name: 'v-expansion-panel',
+
+  emits: [
+    'click',
+    'change',
+  ],
+
+  props: {
+    disabled: Boolean,
+    readonly: Boolean,
+  },
+
+  data () {
+    return {
+      content: null as VExpansionPanelContentInstance | null,
+      header: null as VExpansionPanelHeaderInstance | null,
+      nextIsActive: false,
+    }
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        'v-expansion-panel--active': this.isActive,
+        'v-expansion-panel--next-active': this.nextIsActive,
+        'v-expansion-panel--disabled': this.isDisabled,
+        ...this.groupClasses,
+      }
+    },
+    isDisabled (): boolean {
+      return this.expansionPanels.disabled || this.disabled
+    },
+    isReadonly (): boolean {
+      return this.expansionPanels.readonly || this.readonly
+    },
+  },
+
+  methods: {
+    registerContent (vm: VExpansionPanelContentInstance) {
+      this.content = vm
+    },
+    unregisterContent () {
+      this.content = null
+    },
+    registerHeader (vm: VExpansionPanelHeaderInstance) {
+      this.header = vm
+      vm.$on('click', this.onClick)
+    },
+    unregisterHeader () {
+      this.header = null
+    },
+    onClick (e: MouseEvent) {
+      if (e.detail) this.header!.$el.blur()
+
+      this.$emit('click', e)
+
+      this.isReadonly || this.isDisabled || this.toggle()
+    },
+    toggle () {
+      this.$nextTick(() => {
+        this.$emit('change')
+        this.$emitLegacy('change')
+      })
+    },
+  },
+
+  render (): VNode {
+    return h('div', {
+      class: ['v-expansion-panel', this.classes],
+      'aria-expanded': String(this.isActive),
+    }, getSlot(this))
+  },
+})

package/src/components/VExpansionPanel/VExpansionPanelContent.ts

@@ -0,0 +1,73 @@
+import { h, vShow, withDirectives, VNode, Component } from 'vue'
+// Components
+import VExpansionPanel from './VExpansionPanel'
+import { VExpandTransition } from '../transitions'
+
+// Mixins
+import Bootable from '../../mixins/bootable'
+import Colorable from '../../mixins/colorable'
+import { inject as RegistrableInject } from '../../mixins/registrable'
+
+// Utilities
+import { getSlot } from '../../util/helpers'
+import mixins, { ExtractVue } from '../../util/mixins'
+
+const baseMixins = mixins(
+  Bootable,
+  Colorable,
+  RegistrableInject<'expansionPanel', Component>('expansionPanel', 'v-expansion-panel-content', 'v-expansion-panel')
+)
+
+interface options extends ExtractVue<typeof baseMixins> {
+  expansionPanel: InstanceType<typeof VExpansionPanel>
+}
+
+/* @vue/component */
+export default baseMixins.extend({
+  name: 'v-expansion-panel-content',
+
+  data: () => ({
+    isActive: false,
+  }),
+
+  computed: {
+    parentIsActive (): boolean {
+      return this.expansionPanel.isActive
+    },
+  },
+
+  watch: {
+    parentIsActive: {
+      immediate: true,
+      handler (val, oldVal) {
+        if (val) this.isBooted = true
+
+        if (oldVal == null) this.isActive = val
+        else this.$nextTick(() => this.isActive = val)
+      },
+    },
+  },
+
+  created () {
+    this.expansionPanel.registerContent(this)
+  },
+
+  beforeUnmount () {
+    this.expansionPanel.unregisterContent()
+  },
+
+  render (): VNode {
+    return h(VExpandTransition, {}, () => this.showLazyContent(() => [
+      withDirectives(h('div', this.setBackgroundColor(this.color, {
+        class: 'v-expansion-panel-content',
+      }), [
+        h('div', { class: 'v-expansion-panel-content__wrap' }, getSlot(this, 'default', { open: this.isActive })),
+      ]), [
+        [
+          vShow,
+          this.isActive,
+        ],
+      ]),
+    ]))
+  },
+})