@kokoccc/vuetify 1.0.1

package/src/components/VSparkline/helpers/core.ts

@@ -0,0 +1,51 @@
+import { Point, Boundary, Bar } from '../VSparkline'
+
+export function genPoints (
+  values: number[],
+  boundary: Boundary
+): Point[] {
+  const { minX, maxX, minY, maxY } = boundary
+  const totalValues = values.length
+  const maxValue = Math.max(...values)
+  const minValue = Math.min(...values)
+
+  const gridX = (maxX - minX) / (totalValues - 1)
+  const gridY = (maxY - minY) / ((maxValue - minValue) || 1)
+
+  return values.map((value, index) => {
+    return {
+      x: minX + index * gridX,
+      y: maxY - (value - minValue) * gridY,
+      value,
+    }
+  })
+}
+
+export function genBars (
+  values: number[],
+  boundary: Boundary
+): Bar[] {
+  const { minX, maxX, minY, maxY } = boundary
+  const totalValues = values.length
+  let maxValue = Math.max(...values)
+  let minValue = Math.min(...values)
+
+  if (minValue > 0) minValue = 0
+  if (maxValue < 0) maxValue = 0
+
+  const gridX = maxX / totalValues
+  const gridY = (maxY - minY) / ((maxValue - minValue) || 1)
+  const horizonY = maxY - Math.abs(minValue * gridY)
+
+  return values.map((value, index) => {
+    const height = Math.abs(gridY * value)
+
+    return {
+      x: minX + index * gridX,
+      y: horizonY - height +
+        +(value < 0) * height,
+      height,
+      value,
+    }
+  })
+}

package/src/components/VSparkline/helpers/math.ts

@@ -0,0 +1,31 @@
+import { Point } from '../VSparkline'
+
+function int (value: string | number): number {
+  return parseInt(value, 10)
+}
+
+/**
+ * https://en.wikipedia.org/wiki/Collinearity
+ * x=(x1+x2)/2
+ * y=(y1+y2)/2
+ */
+export function checkCollinear (p0: Point, p1: Point, p2: Point): boolean {
+  return int(p0.x + p2.x) === int(2 * p1.x) && int(p0.y + p2.y) === int(2 * p1.y)
+}
+
+export function getDistance (p1: Point, p2: Point): number {
+  return Math.sqrt(
+    Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)
+  )
+}
+
+export function moveTo (to: Point, from: Point, radius: number) {
+  const vector = { x: to.x - from.x, y: to.y - from.y }
+  const length = Math.sqrt((vector.x * vector.x) + (vector.y * vector.y))
+  const unitVector = { x: vector.x / length, y: vector.y / length }
+
+  return {
+    x: from.x + unitVector.x * radius,
+    y: from.y + unitVector.y * radius,
+  }
+}

package/src/components/VSparkline/helpers/path.ts

@@ -0,0 +1,38 @@
+import { Point } from '../VSparkline'
+import { checkCollinear, getDistance, moveTo } from './math'
+
+/**
+ * From https://github.com/unsplash/react-trend/blob/master/src/helpers/DOM.helpers.js#L18
+ */
+export function genPath (points: Point[], radius: number, fill = false, height = 75) {
+  const start = points.shift()!
+  const end = points[points.length - 1]
+
+  return (
+    (fill ? `M${start.x} ${height - start.x + 2} L${start.x} ${start.y}` : `M${start.x} ${start.y}`) +
+    points
+      .map((point, index) => {
+        const next = points[index + 1]
+        const prev = points[index - 1] || start
+        const isCollinear = next && checkCollinear(next, point, prev)
+
+        if (!next || isCollinear) {
+          return `L${point.x} ${point.y}`
+        }
+
+        const threshold = Math.min(
+          getDistance(prev, point),
+          getDistance(next, point)
+        )
+        const isTooCloseForRadius = threshold / 2 < radius
+        const radiusForPoint = isTooCloseForRadius ? threshold / 2 : radius
+
+        const before = moveTo(prev, point, radiusForPoint)
+        const after = moveTo(next, point, radiusForPoint)
+
+        return `L${before.x} ${before.y}S${point.x} ${point.y} ${after.x} ${after.y}`
+      })
+      .join('') +
+    (fill ? `L${end.x} ${height - start.x + 2} Z` : '')
+  )
+}

package/src/components/VSparkline/index.ts

@@ -0,0 +1,5 @@
+import VSparkline from './VSparkline'
+
+export { VSparkline }
+
+export default VSparkline

package/src/components/VSpeedDial/VSpeedDial.sass

@@ -0,0 +1,79 @@
+@import './_variables.scss'
+
+.v-speed-dial
+  position: relative
+  z-index: $speed-dial-z-index
+
+  &--absolute
+    position: absolute
+
+  &--fixed
+    position: fixed
+
+  &--fixed,
+  &--absolute
+    z-index: 4
+
+    & > .v-btn--floating
+      margin: 0
+
+  &--top
+    top: map-get($grid-gutters, 'lg')
+
+  &--bottom
+    bottom: map-get($grid-gutters, 'lg')
+
+  &--left
+    left: map-get($grid-gutters, 'lg')
+
+  &--right
+    right: map-get($grid-gutters, 'lg')
+
+  &--direction
+    &-left,
+    &-right
+      .v-speed-dial__list
+        height: 100%
+        top: 0
+        padding: 0 $speed-dial-padding
+
+    &-top,
+    &-bottom
+      .v-speed-dial__list
+        left: 0
+        width: 100%
+
+    &-top
+      .v-speed-dial__list
+        flex-direction: column-reverse
+        bottom: 100%
+
+    &-right
+      .v-speed-dial__list
+        flex-direction: row
+        left: 100%
+
+    &-bottom
+      .v-speed-dial__list
+        flex-direction: column
+        top: 100%
+
+    &-left
+      .v-speed-dial__list
+        flex-direction: row-reverse
+        right: 100%
+
+/** Elements */
+.v-speed-dial__list
+  align-items: center
+  display: flex
+  justify-content: center
+  padding: $speed-dial-padding 0
+  position: absolute
+
+  .v-btn
+    margin: $speed-dial-button-margin
+
+/** Modifiers */
+.v-speed-dial:not(.v-speed-dial--is-active) .v-speed-dial__list
+  pointer-events: none

package/src/components/VSpeedDial/VSpeedDial.ts

@@ -0,0 +1,99 @@
+import { TransitionGroup, h, VNode, VNodeData, withDirectives } from 'vue'
+// Styles
+import './VSpeedDial.sass'
+
+// Mixins
+import Toggleable from '../../mixins/toggleable'
+import Positionable from '../../mixins/positionable'
+import Transitionable from '../../mixins/transitionable'
+
+// Directives
+import ClickOutside from '../../directives/click-outside'
+
+// Types
+import mixins from '../../util/mixins'
+
+import { Prop } from 'vue/types/options'
+import { getSlot } from '../../util/helpers'
+
+/* @vue/component */
+export default mixins(Positionable, Toggleable, Transitionable).extend({
+  name: 'v-speed-dial',
+
+  props: {
+    direction: {
+      type: String as Prop<'top' | 'right' | 'bottom' | 'left'>,
+      default: 'top',
+      validator: (val: string) => {
+        return ['top', 'right', 'bottom', 'left'].includes(val)
+      },
+    },
+    openOnHover: Boolean,
+    transition: {
+      type: String,
+      default: 'scale-transition',
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  computed: {
+    classes (): object {
+      return {
+        'v-speed-dial': true,
+        'v-speed-dial--top': this.top,
+        'v-speed-dial--right': this.right,
+        'v-speed-dial--bottom': this.bottom,
+        'v-speed-dial--left': this.left,
+        'v-speed-dial--absolute': this.absolute,
+        'v-speed-dial--fixed': this.fixed,
+        [`v-speed-dial--direction-${this.direction}`]: true,
+        'v-speed-dial--is-active': this.isActive,
+      }
+    },
+  },
+
+  render (): VNode {
+    let children: VNode[] = []
+    const data: VNodeData = {
+      class: this.classes,
+      onClick: () => (this.isActive = !this.isActive),
+    }
+
+    if (this.openOnHover) {
+      data.onMouseenter = () => (this.isActive = true)
+      data.onMouseleave = () => (this.isActive = false)
+    }
+
+    if (this.isActive) {
+      let btnCount = 0
+      children = (getSlot(this) || []).map((b, i) => {
+        const componentName = b.type && typeof b.type === 'object' && 'name' in b.type ? b.type.name : null
+        if (b.tag && (componentName === 'v-btn' || componentName === 'v-tooltip')) {
+          btnCount++
+          return h('div', {
+            style: {
+              transitionDelay: btnCount * 0.05 + 's',
+            },
+            key: i,
+          }, [b])
+        } else {
+          b.key = i
+          return b
+        }
+      })
+    }
+
+    const list = h(TransitionGroup, {
+      class: 'v-speed-dial__list',
+      name: this.transition,
+      mode: this.mode,
+      origin: this.origin,
+      tag: 'div',
+    }, children)
+
+    return withDirectives(h('div', data, [getSlot(this, 'activator'), list]), [
+      [ClickOutside, () => (this.isActive = false)],
+    ])
+  },
+})

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

@@ -0,0 +1,93 @@
+// Components
+import VSpeedDial from '../VSpeedDial'
+import VBtn from '../../VBtn/VBtn'
+import VTooltip from '../../VTooltip/VTooltip'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { h } from 'vue'
+
+describe('VSpeedDial.ts', () => {
+  type Instance = InstanceType<typeof VSpeedDial>
+  let mountFunction: (options?: object) => Wrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VSpeedDial, {
+        ...options,
+      })
+    }
+  })
+
+  it('should render component and match snapshot', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render active component and match snapshot', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: () => h('span', 'test'),
+      },
+      data: () => ({ isActive: true }),
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with custom direction and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        direction: 'right',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should activate on click', async () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.isActive).toBe(false)
+    await wrapper.trigger('click')
+    expect(wrapper.vm.isActive).toBe(true)
+  })
+
+  it('should activate on hover', async () => {
+    const wrapper = mountFunction({
+      props: {
+        openOnHover: true,
+      },
+    })
+
+    expect(wrapper.vm.isActive).toBe(false)
+    await wrapper.trigger('mouseenter')
+    expect(wrapper.vm.isActive).toBe(true)
+    await wrapper.trigger('mouseleave')
+    expect(wrapper.vm.isActive).toBe(false)
+  })
+
+  it('should render v-btn and v-tooltip components when active', () => {
+    const wrapper = mount(VSpeedDial, {
+      slots: {
+        default: () => [h(VBtn, { key: 'btn' }), h(VTooltip, { key: 'tooltip' })],
+      },
+      data: () => ({ isActive: true }),
+    })
+
+    expect(wrapper.findComponent(VBtn).exists()).toBe(true)
+    expect(wrapper.findComponent(VTooltip).exists()).toBe(true)
+
+    const speedDialList = wrapper.find('.v-speed-dial__list')
+    expect(speedDialList.exists()).toBe(true)
+    expect(speedDialList.findComponent(VBtn).exists()).toBe(true)
+    expect(speedDialList.findComponent(VTooltip).exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VSpeedDial.ts should render active component and match snapshot 1`] = `
+<div class="v-speed-dial v-speed-dial--direction-top v-speed-dial--is-active">
+  <div class="v-speed-dial__list">
+    <span>
+      test
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VSpeedDial.ts should render component and match snapshot 1`] = `
+<div class="v-speed-dial v-speed-dial--direction-top">
+  <div class="v-speed-dial__list">
+  </div>
+</div>
+`;
+
+exports[`VSpeedDial.ts should render component with custom direction and match snapshot 1`] = `
+<div class="v-speed-dial v-speed-dial--direction-right">
+  <div class="v-speed-dial__list">
+  </div>
+</div>
+`;

package/src/components/VSpeedDial/_variables.scss

@@ -0,0 +1,5 @@
+@import '../../styles/styles.sass';
+
+$speed-dial-padding: 16px !default;
+$speed-dial-button-margin: 6px !default;
+$speed-dial-z-index: 1 !default;

package/src/components/VSpeedDial/index.ts

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

package/src/components/VStepper/VStepper.sass

@@ -0,0 +1,236 @@
+@import './_variables.scss'
+
++theme(v-stepper) using ($material)
+  background: map-get($material, 'bg-color')
+
+  .v-stepper__step
+    &:not(.v-stepper__step--active):not(.v-stepper__step--complete):not(.v-stepper__step--error)
+      .v-stepper__step__step
+        background: rgba(map-get($material, 'fg-color'), map-get($material, 'disabledORhints-text-percent'))
+
+    &__step
+      color: map-deep-get($material, 'stepper', 'active')
+
+      .v-icon
+        color: map-deep-get($material, 'stepper', 'active')
+
+  .v-stepper__header
+    .v-divider
+      border-color: rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
+
+  .v-stepper__step
+    &--active
+      .v-stepper__label
+        text-shadow: 0px 0px 0px rgba(map-get($material, 'fg-color'), 1)
+
+    &--editable:hover
+      background: rgba(map-get($material, 'fg-color'), .06)
+
+      .v-stepper__label
+        text-shadow: 0px 0px 0px rgba(map-get($material, 'fg-color'), 1)
+
+    &--complete
+      .v-stepper__label
+        color: map-deep-get($material, 'stepper', 'completed')
+
+    &--inactive
+      &.v-stepper__step--editable:not(.v-stepper__step--error)
+        &:hover
+          .v-stepper__step__step
+            background: map-deep-get($material, 'stepper', 'hover')
+
+  .v-stepper__label
+    color: rgba(map-get($material, 'fg-color'), map-get($material, 'disabledORhints-text-percent'))
+
+    small
+      color: rgba(map-get($material, 'fg-color'), map-get($material, 'secondary-text-percent'))
+
+  &--non-linear
+    .v-stepper__step:not(.v-stepper__step--complete):not(.v-stepper__step--error)
+      .v-stepper__label
+        color: rgba(map-get($material, 'fg-color'), map-get($material, 'secondary-text-percent'))
+
+  &--vertical
+    .v-stepper__content:not(:last-child)
+      +ltr()
+        border-left: 1px solid rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
+
+      +rtl()
+        border-right: 1px solid rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
+
++sheet(v-stepper, $stepper-elevation, $stepper-border-radius, $stepper-shaped-border-radius)
+
+.v-stepper
+  border-radius: $stepper-border-radius
+  overflow: hidden
+  position: relative
+
+  &__header
+    height: $stepper-header-height
+    align-items: stretch
+    display: flex
+    flex-wrap: wrap
+    justify-content: space-between
+    +elevation($stepper-header-elevation)
+
+    .v-divider
+      align-self: center
+      margin: $stepper-header-divider-margin
+
+  &__items
+    position: relative
+    overflow: hidden
+
+  &__step__step
+    align-items: center
+    border-radius: 50%
+    display: inline-flex
+    font-size: $stepper-step-step-font-size
+    justify-content: center
+    height: $stepper-step-step-height
+    min-width: $stepper-step-step-min-width
+    width: $stepper-step-step-width
+    transition: .3s map-get($transition, 'fast-in-fast-out')
+
+    +ltr()
+      margin-right: $stepper-step-step-margin
+
+    +rtl()
+      margin-left: $stepper-step-step-margin
+
+    .v-icon.v-icon
+      font-size: $stepper-step-step-icon-font-size
+
+      &.v-icon--svg
+        height: $stepper-step-step-icon-font-size
+        width: $stepper-step-step-icon-font-size
+
+  &__step
+    align-items: center
+    display: flex
+    flex-direction: row
+    padding: $stepper-step-padding
+    position: relative
+
+    &--active
+      .v-stepper__label
+        transition: .3s map-get($transition, 'ease-in-out')
+
+    &--editable
+      cursor: pointer
+
+    &.v-stepper__step--error
+      .v-stepper__step__step
+        background: transparent
+        color: inherit
+
+        .v-icon
+          font-size: $stepper-step-error-icon-font-size
+          color: inherit
+
+      .v-stepper & .v-stepper__label
+        color: inherit
+        text-shadow: none
+        font-weight: 500
+
+        small
+          color: inherit
+
+  &__label
+    display: block
+    flex-grow: 1
+    line-height: $stepper-label-line-height
+
+    +ltr()
+      text-align: left
+
+    +rtl()
+      text-align: right
+
+    small
+      display: block
+      font-size: $stepper-label-small-font-size
+      font-weight: $stepper-label-small-font-weight
+      text-shadow: none
+
+  &__wrapper
+    overflow: hidden
+    transition: none
+
+  &__content
+    top: 0
+    padding: $stepper-content-padding
+    flex: 1 0 auto
+    // Chrome has an issue with overflow hidden for rendering
+    // Originally used translateZ but this messes up fixed
+    // elements within the stepper
+    // Fix for #512 and #620
+    // overflow: hidden
+    width: 100%
+
+    > .v-btn
+      margin: $stepper-content-btn-margin
+
+  &--flat
+    +elevation(0, true)
+
+  &--is-booted
+    .v-stepper__content, .v-stepper__wrapper
+      transition: .3s map-get($transition, 'swing')
+
+  &--vertical
+    padding-bottom: $stepper-vertical-padding-bottom
+
+    .v-stepper__content
+      +ltr()
+        padding: $stepper-vertical-content-ltr-padding
+      +rtl()
+        padding: $stepper-vertical-content-rtl-padding
+
+      width: auto
+      +ltr()
+        margin: $stepper-vertical-content-ltr-margin
+
+      +rtl()
+        margin: $stepper-vertical-content-rtl-margin
+
+    .v-stepper__step
+      padding: $stepper-vertical-step-padding
+
+    .v-stepper__step__step
+      +ltr()
+        margin-right: $stepper-vertical-step-step-margin
+
+      +rtl()
+        margin-left: $stepper-vertical-step-step-margin
+
+  &--alt-labels
+    .v-stepper__header
+      height: auto
+
+      .v-divider
+        margin: $stepper-alt-labels-header-divider
+        align-self: flex-start
+
+    .v-stepper__step
+      flex-direction: column
+      justify-content: flex-start
+      align-items: center
+      flex-basis: $stepper-alt-labels-flex-basis
+
+      small
+        text-align: center
+
+    .v-stepper__step__step
+      margin-bottom: $stepper-alt-labels-step-step-margin-bottom
+      margin-left: 0
+      margin-right: 0
+
+@media #{map-get($display-breakpoints, 'sm-and-down')}
+  .v-stepper:not(.v-stepper--vertical)
+    .v-stepper__label
+      display: none
+
+    .v-stepper__step__step
+      margin-left: 0
+      margin-right: 0