@kokoccc/vuetify 1.0.1

package/src/components/VTimePicker/__tests__/__snapshots__/VTimePickerClock.spec.ts.snap

@@ -0,0 +1,286 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VTimePickerClock.js should render component 1`] = `
+<div class="v-time-picker-clock theme--light">
+  <div class="v-time-picker-clock__inner">
+    <div class="v-time-picker-clock__hand accent"
+         style="transform: rotate(60deg) scaleY(1);"
+    >
+    </div>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 50%; top: 0%;"
+    >
+      <span>
+        0
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 75%; top: 6.698729810778062%;"
+    >
+      <span>
+        5
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--active v-time-picker-clock__item--disabled accent"
+          style="left: 93.30127018922192%; top: 24.999999999999993%;"
+    >
+      <span>
+        10
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 100%; top: 50%;"
+    >
+      <span>
+        15
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 93.30127018922194%; top: 74.99999999999999%;"
+    >
+      <span>
+        20
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 75.00000000000001%; top: 93.30127018922192%;"
+    >
+      <span>
+        25
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 50.00000000000001%; top: 100%;"
+    >
+      <span>
+        30
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 25.000000000000014%; top: 93.30127018922194%;"
+    >
+      <span>
+        35
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 6.698729810778076%; top: 75.00000000000003%;"
+    >
+      <span>
+        40
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 0%; top: 50.00000000000001%;"
+    >
+      <span>
+        45
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 6.6987298107780475%; top: 25.000000000000032%;"
+    >
+      <span>
+        50
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 24.99999999999998%; top: 6.698729810778083%;"
+    >
+      <span>
+        55
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VTimePickerClock.js should render component with double prop 1`] = `
+<div class="v-time-picker-clock theme--light">
+  <div class="v-time-picker-clock__inner">
+    <div class="v-time-picker-clock__hand accent"
+         style="transform: rotate(120deg) scaleY(1);"
+    >
+    </div>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 50%; top: 0%;"
+    >
+      <span>
+        0
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 93.30127018922192%; top: 24.999999999999993%;"
+    >
+      <span>
+        5
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--active v-time-picker-clock__item--disabled accent"
+          style="left: 93.30127018922194%; top: 74.99999999999999%;"
+    >
+      <span>
+        10
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 50.00000000000001%; top: 100%;"
+    >
+      <span>
+        15
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 6.698729810778076%; top: 75.00000000000003%;"
+    >
+      <span>
+        20
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 6.6987298107780475%; top: 25.000000000000032%;"
+    >
+      <span>
+        25
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 49.99999999999999%; top: 19%;"
+    >
+      <span>
+        30
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 76.84678751731758%; top: 34.499999999999986%;"
+    >
+      <span>
+        35
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 76.84678751731761%; top: 65.49999999999997%;"
+    >
+      <span>
+        40
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 50.000000000000014%; top: 81%;"
+    >
+      <span>
+        45
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 23.153212482682427%; top: 65.50000000000004%;"
+    >
+      <span>
+        50
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item"
+          style="left: 23.153212482682385%; top: 34.50000000000003%;"
+    >
+      <span>
+        55
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VTimePickerClock.js should render disabled component 1`] = `
+<div class="v-time-picker-clock theme--light">
+  <div class="v-time-picker-clock__inner">
+    <div class="v-time-picker-clock__hand accent"
+         style="transform: rotate(60deg) scaleY(1);"
+    >
+    </div>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 50%; top: 0%;"
+    >
+      <span>
+        0
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 75%; top: 6.698729810778062%;"
+    >
+      <span>
+        5
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--active v-time-picker-clock__item--disabled accent"
+          style="left: 93.30127018922192%; top: 24.999999999999993%;"
+    >
+      <span>
+        10
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 100%; top: 50%;"
+    >
+      <span>
+        15
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 93.30127018922194%; top: 74.99999999999999%;"
+    >
+      <span>
+        20
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 75.00000000000001%; top: 93.30127018922192%;"
+    >
+      <span>
+        25
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 50.00000000000001%; top: 100%;"
+    >
+      <span>
+        30
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 25.000000000000014%; top: 93.30127018922194%;"
+    >
+      <span>
+        35
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 6.698729810778076%; top: 75.00000000000003%;"
+    >
+      <span>
+        40
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 0%; top: 50.00000000000001%;"
+    >
+      <span>
+        45
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 6.6987298107780475%; top: 25.000000000000032%;"
+    >
+      <span>
+        50
+      </span>
+    </span>
+    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
+          style="left: 24.99999999999998%; top: 6.698729810778083%;"
+    >
+      <span>
+        55
+      </span>
+    </span>
+  </div>
+</div>
+`;

package/src/components/VTimePicker/__tests__/__snapshots__/VTimePickerTitle.spec.ts.snap

@@ -0,0 +1,185 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VTimePickerTitle.ts should render component in 12hr 1`] = `
+<div class="v-time-picker-title">
+  <div class="v-time-picker-title__time">
+    <div class="v-picker__title__btn">
+      2
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn">
+      13
+    </div>
+  </div>
+  <div class="v-time-picker-title__ampm">
+    <div class="v-picker__title__btn">
+      AM
+    </div>
+    <div class="v-picker__title__btn v-picker__title__btn--active">
+      PM
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTimePickerTitle.ts should render component in 12hr. with useSeconds 1`] = `
+<div class="v-time-picker-title">
+  <div class="v-time-picker-title__time">
+    <div class="v-picker__title__btn">
+      2
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn">
+      13
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn">
+      25
+    </div>
+  </div>
+  <div class="v-time-picker-title__ampm">
+    <div class="v-picker__title__btn">
+      AM
+    </div>
+    <div class="v-picker__title__btn v-picker__title__btn--active">
+      PM
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTimePickerTitle.ts should render component in 24hr 1`] = `
+<div class="v-time-picker-title">
+  <div class="v-time-picker-title__time">
+    <div class="v-picker__title__btn">
+      14
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn">
+      13
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTimePickerTitle.ts should render component in 24hr. with useSeconds 1`] = `
+<div class="v-time-picker-title">
+  <div class="v-time-picker-title__time">
+    <div class="v-picker__title__btn">
+      14
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn">
+      13
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn">
+      25
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTimePickerTitle.ts should render component when selecting hour 1`] = `
+<div class="v-time-picker-title">
+  <div class="v-time-picker-title__time">
+    <div class="v-picker__title__btn v-picker__title__btn--active">
+      14
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn">
+      13
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTimePickerTitle.ts should render component when selecting hour. with useSeconds 1`] = `
+<div class="v-time-picker-title">
+  <div class="v-time-picker-title__time">
+    <div class="v-picker__title__btn v-picker__title__btn--active">
+      14
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn">
+      13
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn">
+      25
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTimePickerTitle.ts should render disabled component 1`] = `
+<div class="v-time-picker-title">
+  <div class="v-time-picker-title__time">
+    <div class="v-picker__title__btn v-picker__title__btn--readonly">
+      2
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn v-picker__title__btn--readonly">
+      13
+    </div>
+  </div>
+  <div class="v-time-picker-title__ampm">
+    <div class="v-picker__title__btn v-picker__title__btn--readonly">
+      AM
+    </div>
+    <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
+      PM
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTimePickerTitle.ts should render disabled component. with useSeconds 1`] = `
+<div class="v-time-picker-title">
+  <div class="v-time-picker-title__time">
+    <div class="v-picker__title__btn v-picker__title__btn--readonly">
+      2
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn v-picker__title__btn--readonly">
+      13
+    </div>
+    <span>
+      :
+    </span>
+    <div class="v-picker__title__btn v-picker__title__btn--readonly">
+      --
+    </div>
+  </div>
+  <div class="v-time-picker-title__ampm">
+    <div class="v-picker__title__btn v-picker__title__btn--readonly">
+      AM
+    </div>
+    <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
+      PM
+    </div>
+  </div>
+</div>
+`;

package/src/components/VTimePicker/_variables.scss

@@ -0,0 +1,28 @@
+@import '../../styles/styles.sass';
+
+$time-picker-title-color: map-get($shades, 'white') !default;
+$time-picker-title-btn-height: 70px !default;
+$time-picker-landscape-title-btn-height: 55px !default;
+$time-picker-ampm-title-margin-start: 8px !default;
+$time-picker-ampm-title-margin-bottom: 6px !default;
+$time-picker-ampm-title-margin: 0 0 $time-picker-ampm-title-margin-bottom $time-picker-ampm-title-margin-start !default;  // TODO: remove in 3.0
+$time-picker-ampm-title-margin-ltr: $time-picker-ampm-title-margin !default;
+$time-picker-ampm-title-margin-rtl: 0 $time-picker-ampm-title-margin-start $time-picker-ampm-title-margin-bottom 0 !default;
+$time-picker-ampm-title-font-size: 16px !default;
+$time-picker-landscape-ampm-title-margin: 16px 0 0 !default;
+$time-picker-number-font-size: 16px !default;
+$time-picker-indicator-size: 40px !default;
+$time-picker-clock-padding: 10px !default;
+$time-picker-clock-max-width: 290px !default;
+$time-picker-clock-hand-height: calc(50% - 4px) !default;
+$time-picker-clock-hand-width: 2px !default;
+$time-picker-clock-hand-left: calc(50% - 1px) !default;
+$time-picker-clock-center-size: 8px !default;
+$time-picker-clock-end-size: 10px !default;
+$time-picker-clock-end-top: -4px !default;
+$time-picker-clock-inner-hand-height: 14px !default;
+$time-picker-clock-inner-offset: 27px !default;
+$time-picker-ampm-padding: 10px !default;
+$time-picker-clock-end-border-width: 2px !default;
+$time-picker-clock-end-border-style: solid !default;
+$time-picker-clock-end-border-color: inherit !default;

package/src/components/VTimePicker/index.ts

@@ -0,0 +1,13 @@
+import VTimePicker from './VTimePicker'
+import VTimePickerClock from './VTimePickerClock'
+import VTimePickerTitle from './VTimePickerTitle'
+
+export { VTimePicker, VTimePickerClock, VTimePickerTitle }
+
+export default {
+  $_vuetify_subcomponents: {
+    VTimePicker,
+    VTimePickerClock,
+    VTimePickerTitle,
+  },
+}

package/src/components/VTimeline/VTimeline.sass

@@ -0,0 +1,167 @@
+// Imports
+@import './_variables.scss'
+@import './_mixins.sass'
+
+/**
+ * .v-timeline::before - center divider
+ * .v-card::before - arrow shadow (conflicts with active link overlay)
+ * .v-card::after - arrow
+ */
+
+// Theme
++theme(v-timeline) using ($material)
+  &::before
+    background: map-get($material, 'dividers')
+
+  .v-timeline-item
+    &__dot
+      background: map-get($material, 'cards')
+
+    .v-card
+      &:not(.v-card--link)::before
+        border-right-color: $shadow-key-ambient-opacity
+
+// Elements
+.v-timeline
+  padding-top: $timeline-item-padding
+  position: relative
+
+  &::before
+    bottom: 0
+    content: ''
+    height: 100%
+    position: absolute
+    top: 0
+    width: $timeline-line-width
+
+.v-timeline-item
+  display: flex
+  padding-bottom: $timeline-item-padding
+
+.v-timeline-item__body
+  position: relative
+  height: 100%
+  flex: 1 1 auto
+
+.v-timeline-item__divider
+  position: relative
+  min-width: $timeline-divider-width
+  display: flex
+  align-items: center
+  justify-content: center
+
+.v-timeline-item__dot
+  z-index: 2
+  border-radius: 50%
+  +elevation(1)
+  +timeline-dots($timeline-dot-regular-size, $timeline-inner-dot-regular-size)
+
+  &--small
+    +timeline-dots($timeline-dot-small-size, $timeline-inner-dot-small-size)
+
+  &--large
+    +timeline-dots($timeline-dot-large-size, $timeline-inner-dot-large-size)
+
+.v-timeline-item__inner-dot
+  border-radius: 50%
+  display: flex
+  justify-content: center
+  align-items: center
+
+.v-timeline-item__opposite
+  flex: 1 1 auto
+  align-self: center
+  max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width / 2})
+
+// Before/after directions
+.v-timeline:not(.v-timeline--dense):not(.v-timeline--reverse)
+  .v-timeline-item
+    &:nth-child(odd):not(.v-timeline-item--before), &--after
+      +timeline-item-align(left)
+      +timeline-wedge-align(left)
+      .v-timeline-item__body
+        max-width: calc(#{100% - $timeline-divider-center} - #{$timeline-divider-width / 2})
+
+    &:nth-child(even):not(.v-timeline-item--after), &--before
+      +timeline-item-align(right)
+      +timeline-wedge-align(right)
+      .v-timeline-item__body
+        max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width / 2})
+
+// Wedge
+.v-timeline-item__body
+  > .v-card:not(.v-card--flat)
+    &:not(.v-card--link)::before,
+    &::after
+      content: ''
+      position: absolute
+      border-top: $timeline-wedge-size solid transparent
+      border-bottom: $timeline-wedge-size solid transparent
+      border-right: $timeline-wedge-size solid black
+      top: calc(50% - #{$timeline-wedge-size})
+
+    &::after
+      border-right-color: inherit
+
+    &:not(.v-card--link)::before
+      top: calc(50% - #{$timeline-wedge-size} + 2px)
+
+// Modifiers
+.v-timeline--align-top
+  .v-timeline-item__dot
+    align-self: start
+
+  .v-timeline-item__body
+    > .v-card
+      &::after
+        top: calc(0% + #{$timeline-wedge-size})
+
+      &:not(.v-card--link)::before
+        top: calc(0% + #{$timeline-wedge-size} + 2px)
+
+.v-timeline:not(.v-timeline--dense):not(.v-timeline--reverse)
+  +timeline-line-align($timeline-divider-center, left, right)
+
+.v-timeline--reverse:not(.v-timeline--dense)
+  +timeline-line-align($timeline-divider-center, right, left)
+
+  .v-timeline-item
+    &:nth-child(odd):not(.v-timeline-item--after), &--before
+      +timeline-item-align(right)
+      +timeline-wedge-align(right)
+      .v-timeline-item__body
+        max-width: calc(#{100% - $timeline-divider-center} - #{$timeline-divider-width / 2})
+
+    &:nth-child(even):not(.v-timeline-item--before), &--after
+      +timeline-item-align(left)
+      +timeline-wedge-align(left)
+      .v-timeline-item__body
+        max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width / 2})
+
+.v-timeline--reverse.v-timeline--dense
+  +timeline-line-align($timeline-divider-width / 2, right, left)
+
+.v-timeline--dense:not(.v-timeline--reverse)
+  +timeline-line-align($timeline-divider-width / 2, left, right)
+
+.v-timeline--dense
+  .v-timeline-item
+    flex-direction: row-reverse !important
+    +timeline-wedge-align(left)
+
+  .v-timeline-item__body
+    max-width: calc(100% - #{$timeline-divider-width})
+
+  .v-timeline-item__opposite
+    display: none
+
+.v-timeline--reverse.v-timeline--dense
+  .v-timeline-item
+    flex-direction: row !important
+    +timeline-wedge-align(right)
+
+.v-timeline-item--fill-dot
+  .v-timeline-item__inner-dot
+    height: inherit
+    margin: 0
+    width: inherit