@kokoccc/vuetify 1.0.1

package/src/components/VSelect/__tests__/__snapshots__/VSelectList.spec.ts.snap

@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VSelectList.ts should display falsy items 1`] = `
+<div class="v-sheet theme--light v-list v-select-list theme--light"
+     role="listbox"
+     tabindex="-1"
+>
+  <div aria-selected="false"
+       id="list-item-39-0"
+       role="option"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light"
+  >
+    <div class="v-list-item__content">
+      <div class="v-list-item__title">
+        0
+      </div>
+    </div>
+  </div>
+  <div aria-selected="false"
+       id="list-item-39-1"
+       role="option"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light"
+  >
+    <div class="v-list-item__content">
+      <div class="v-list-item__title">
+        null
+      </div>
+    </div>
+  </div>
+  <div aria-selected="false"
+       id="list-item-39-2"
+       role="option"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light"
+  >
+    <div class="v-list-item__content">
+      <div class="v-list-item__title">
+        false
+      </div>
+    </div>
+  </div>
+  <div aria-selected="false"
+       id="list-item-39-3"
+       role="option"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light"
+  >
+    <div class="v-list-item__content">
+      <div class="v-list-item__title">
+        undefined
+      </div>
+    </div>
+  </div>
+  <div aria-selected="false"
+       id="list-item-39-4"
+       role="option"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light"
+  >
+    <div class="v-list-item__content">
+      <div class="v-list-item__title">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VSelectList.ts should display no-data-text when item slot is provided 1`] = `
+<div class="v-sheet theme--light v-list v-select-list theme--light"
+     role="listbox"
+     tabindex="-1"
+>
+  <div tabindex="-1"
+       class="v-list-item theme--light"
+  >
+    <div class="v-list-item__content">
+      <div class="v-list-item__title">
+        undefined
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VSelectList.ts should generate children 1`] = `
+<div class="v-sheet theme--light v-list v-select-list theme--light"
+     role="listbox"
+     tabindex="-1"
+>
+  <div header="true"
+       class="v-subheader theme--light"
+  >
+    true
+  </div>
+  <hr divider="true"
+      class="v-divider theme--light"
+      role="separator"
+      aria-orientation="horizontal"
+  >
+  <div aria-selected="false"
+       id="list-item-16-2"
+       role="option"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light"
+  >
+    <div class="v-list-item__content">
+      <div class="v-list-item__title">
+        foo
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/VSelect/_variables.scss

@@ -0,0 +1,22 @@
+@import '../../styles/styles.sass';
+
+$select-chip-margin: 4px !default;
+$select-dense-chip-margin: 0 4px 0 4px !default;
+$select-selected-chip-opacity: .22 !default;
+$select-prefix-line-height: 20px !default;
+$select-prefix-top: 7px !default;
+$select-selections-padding-top: 20px !default;
+$select-outlined-selections-padding-top: 8px 0 !default;
+$select-outlined-dense-selections-padding-top: 4px 0 !default;
+$select-chips-selections-padding-top: 42px !default;
+$select-active-icon-flip: true !default;
+$select-chips-dense-selections-padding-top: 40px !default;
+$select-active-chip-opacity: 0.2 !default;
+$select-small-chips-selections-min-height: 26px !default;
+$select-chips-box-enclosed-selections-min-height: 68px !default;
+$select-chips-dense-selections-min-height: 40px !default;
+$select-small-chips-dense-selections-min-height: 38px !default;
+$select-selections-line-height: 18px !default;
+$select-selections-margin: 7px 4px 7px 0 !default;
+$select-selections-min-height: 10px !default;
+$select-dense-selections-margin: 5px 4px 3px 0 !default;

package/src/components/VSelect/index.ts

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

package/src/components/VSheet/VSheet.sass

@@ -0,0 +1,15 @@
+// Imports
+@import './_variables.scss'
+
+// Theme
++theme(v-sheet) using ($material)
+  background-color: map-get($material, 'cards')
+  border-color: map-get($material, 'cards')
+  color: map-deep-get($material, 'text', 'primary')
+
+  &--outlined
+    border: $sheet-outlined-border-width solid map-get($material, 'dividers')
+
+// Sheet
+.v-sheet
+  +paper($sheet-elevation, $sheet-border-radius, $sheet-shaped-border-radius)

package/src/components/VSheet/VSheet.ts

@@ -0,0 +1,69 @@
+import {h} from 'vue'
+// Styles
+import './VSheet.sass'
+
+// Mixins
+import BindsAttrs from '../../mixins/binds-attrs'
+import Colorable from '../../mixins/colorable'
+import Elevatable from '../../mixins/elevatable'
+import Measurable from '../../mixins/measurable'
+import Roundable from '../../mixins/roundable'
+import Themeable from '../../mixins/themeable'
+
+// Helpers
+import mixins from '../../util/mixins'
+
+// Types
+import { VNode, defineComponent } from 'vue'
+
+/* @vue/component */
+export default defineComponent({
+  name: 'v-sheet',
+  mixins: [
+    BindsAttrs,
+    Colorable,
+    Elevatable,
+    Measurable,
+    Roundable,
+    Themeable
+  ],
+
+  props: {
+    outlined: Boolean,
+    shaped: Boolean,
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        'v-sheet': true,
+        'v-sheet--outlined': this.outlined,
+        'v-sheet--shaped': this.shaped,
+        ...this.themeClasses,
+        ...this.elevationClasses,
+        ...this.roundedClasses,
+      }
+    },
+    styles (): object {
+      return this.measurableStyles
+    },
+  },
+
+  render (): VNode {
+    const data = {
+      class: this.classes,
+      style: this.styles,
+      ...this.listeners$,
+    }
+
+    return h(
+      this.tag,
+      this.setBackgroundColor(this.color, data),
+      this.$slots.default?.()
+    )
+  },
+})

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

@@ -0,0 +1,48 @@
+// Libraries
+import { defineComponent } from 'vue'
+
+// Components
+import VSheet from '../VSheet'
+
+// Utilities
+import {
+  shallowMount,
+  VueWrapper,
+} from '@vue/test-utils'
+
+describe('VSheet.ts', () => {
+  let mountFunction: (options?: Record<string, any>) => VueWrapper<any>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return shallowMount(VSheet, options)
+    }
+  })
+
+  it('should render component and match snapshot', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render a colored paper', () => {
+    const wrapper = mountFunction({
+      props: {
+        color: 'blue lighten-1',
+      },
+    })
+
+    expect(wrapper.element.classList).toContain('blue')
+    expect(wrapper.element.classList).toContain('lighten-1')
+  })
+
+  it('should render a tile paper', () => {
+    const wrapper = mountFunction({
+      props: {
+        tile: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VSheet.ts should render a tile paper 1`] = `
+<div class="v-sheet theme--light rounded-0">
+</div>
+`;
+
+exports[`VSheet.ts should render component and match snapshot 1`] = `
+<div class="v-sheet theme--light">
+</div>
+`;

package/src/components/VSheet/_variables.scss

@@ -0,0 +1,6 @@
+@import '../../styles/styles.sass';
+
+$sheet-border-radius: 0 !default;
+$sheet-elevation: 0 !default;
+$sheet-outlined-border-width: thin !default;
+$sheet-shaped-border-radius: map-get($rounded, 'xl') $sheet-border-radius !default;

package/src/components/VSheet/index.ts

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

package/src/components/VSkeletonLoader/VSkeletonLoader.sass

@@ -0,0 +1,377 @@
+// Imports
+@import './_variables.scss'
+@import '../VAvatar/_variables.scss'
+
+// Theme
++theme(v-skeleton-loader) using ($material)
+  .v-skeleton-loader__bone::after
+    background: map-get($material, 'skeleton')
+
+  .v-skeleton-loader__avatar,
+  .v-skeleton-loader__button,
+  .v-skeleton-loader__chip,
+  .v-skeleton-loader__divider,
+  .v-skeleton-loader__heading,
+  .v-skeleton-loader__image,
+  .v-skeleton-loader__text
+    background: map-get($material, 'dividers')
+
+  .v-skeleton-loader__actions,
+  .v-skeleton-loader__article,
+  .v-skeleton-loader__card-heading,
+  .v-skeleton-loader__card-text,
+  .v-skeleton-loader__date-picker,
+  .v-skeleton-loader__list-item,
+  .v-skeleton-loader__list-item-avatar,
+  .v-skeleton-loader__list-item-text,
+  .v-skeleton-loader__list-item-two-line,
+  .v-skeleton-loader__list-item-avatar-two-line,
+  .v-skeleton-loader__list-item-three-line,
+  .v-skeleton-loader__list-item-avatar-three-line,
+  .v-skeleton-loader__table-heading,
+  .v-skeleton-loader__table-thead,
+  .v-skeleton-loader__table-tbody,
+  .v-skeleton-loader__table-tfoot
+    background: map-get($material, 'cards')
+
+.v-skeleton-loader
+  border-radius: $skeleton-loader-border-radius
+  position: relative
+  vertical-align: top
+
+  &__actions
+    padding: $skeleton-loader-actions-padding
+    text-align: right
+
+    .v-skeleton-loader__button
+      display: inline-block
+
+      &:first-child
+        +ltr()
+          margin-right: $skeleton-loader-actions-button-margin
+
+        +rtl()
+          margin-left: $skeleton-loader-actions-button-margin
+
+
+  .v-skeleton-loader__list-item,
+  .v-skeleton-loader__list-item-avatar,
+  .v-skeleton-loader__list-item-text,
+  .v-skeleton-loader__list-item-two-line,
+  .v-skeleton-loader__list-item-avatar-two-line,
+  .v-skeleton-loader__list-item-three-line,
+  .v-skeleton-loader__list-item-avatar-three-line
+    border-radius: $skeleton-loader-border-radius
+
+  .v-skeleton-loader__actions,
+  .v-skeleton-loader__article,
+  .v-skeleton-loader__card,
+  .v-skeleton-loader__card-avatar,
+  .v-skeleton-loader__card-heading,
+  .v-skeleton-loader__card-text,
+  .v-skeleton-loader__date-picker,
+  .v-skeleton-loader__date-picker-options,
+  .v-skeleton-loader__date-picker-days,
+  .v-skeleton-loader__list-item,
+  .v-skeleton-loader__list-item-avatar,
+  .v-skeleton-loader__list-item-text,
+  .v-skeleton-loader__list-item-two-line,
+  .v-skeleton-loader__list-item-avatar-two-line,
+  .v-skeleton-loader__list-item-three-line,
+  .v-skeleton-loader__list-item-avatar-three-line,
+  .v-skeleton-loader__paragraph,
+  .v-skeleton-loader__sentences,
+  .v-skeleton-loader__table,
+  .v-skeleton-loader__table-cell,
+  .v-skeleton-loader__table-heading,
+  .v-skeleton-loader__table-thead,
+  .v-skeleton-loader__table-tbody,
+  .v-skeleton-loader__table-tfoot,
+  .v-skeleton-loader__table-row,
+  .v-skeleton-loader__table-row-divider
+    &::after
+      display: none
+
+  &__article
+    .v-skeleton-loader__heading
+      +ltr()
+        margin: $skeleton-loader-article-heading-margin-top-left 0 $skeleton-loader-article-heading-margin-x $skeleton-loader-article-heading-margin-top-left
+
+      +rtl()
+        margin: $skeleton-loader-article-heading-margin-top-left $skeleton-loader-article-heading-margin-x 0 $skeleton-loader-article-heading-margin-top-left
+
+    .v-skeleton-loader__paragraph
+      padding: $skeleton-loader-article-paragraph-padding
+
+  &__bone
+    border-radius: inherit
+    overflow: hidden
+    position: relative
+
+    &::after
+      animation: $skeleton-loader-loading-animation
+      content: ''
+      height: 100%
+      left: 0
+      position: absolute
+      right: 0
+      top: 0
+      transform: $skeleton-loader-loading-transform
+      z-index: 1
+
+  &__avatar
+    border-radius: $avatar-border-radius
+    height: $skeleton-loader-avatar-height
+    width: $skeleton-loader-avatar-width
+
+  &__button
+    border-radius: $skeleton-loader-button-border-radius
+    height: $skeleton-loader-button-height
+    width: $skeleton-loader-button-width
+
+  &__card
+    .v-skeleton-loader__image
+      border-radius: 0
+
+  &__card-heading
+    .v-skeleton-loader__heading
+      margin: $skeleton-loader-card-heading-loader-heading-margin
+
+  &__card-text
+    padding: $skeleton-loader-card-text-padding
+
+  &__chip
+    border-radius: $skeleton-loader-chip-border-radius
+    height: $skeleton-loader-chip-height
+    width: $skeleton-loader-chip-width
+
+  &__date-picker
+    border-radius: $skeleton-loader-date-picker-border-radius
+
+    .v-skeleton-loader__list-item:first-child
+      .v-skeleton-loader__text
+        max-width: 88px
+        width: 20%
+
+    .v-skeleton-loader__heading
+      max-width: 256px
+      width: 40%
+
+  &__date-picker-days
+    display: flex
+    flex-wrap: wrap
+    padding: $skeleton-loader-date-picker-days-padding
+    margin: 0 auto
+
+    .v-skeleton-loader__avatar
+      border-radius: $skeleton-loader-border-radius
+      flex: 1 1 auto
+      margin: $skeleton-loader-date-picker-days-margin
+      height: $skeleton-loader-date-picker-days-height
+      width: $skeleton-loader-date-picker-days-width
+
+  &__date-picker-options
+    align-items: center
+    display: flex
+    padding: $skeleton-loader-date-picker-options-padding
+
+    .v-skeleton-loader__avatar
+      height: $skeleton-loader-date-picker-options-avatar-height
+      width: $skeleton-loader-date-picker-options-avatar-width
+
+      &:nth-child(2)
+        margin-left: auto
+
+        +ltr()
+          margin-right: $skeleton-loader-date-picker-options-avatar-child-margin
+
+        +rtl()
+          margin-left: $skeleton-loader-date-picker-options-avatar-child-margin
+
+    .v-skeleton-loader__text.v-skeleton-loader__bone:first-child
+      margin-bottom: 0px
+      max-width: 50%
+      width: 456px
+
+  &__divider
+    border-radius: $skeleton-loader-divider-border-radius
+    height: $skeleton-loader-divider-height
+
+  &__heading
+    border-radius: $skeleton-loader-heading-border-radius
+    height: $skeleton-loader-heading-height
+    width: 45%
+
+  &__image
+    height: $skeleton-loader-image-height
+    border-radius: 0
+
+    ~ .v-skeleton-loader__card-heading
+      border-radius: 0
+
+    &:first-child, &:last-child
+      border-radius: inherit
+
+  &__list-item
+    height: $skeleton-loader-list-item-height
+
+  &__list-item-three-line
+    flex-wrap: wrap
+
+    > *
+      flex: 1 0 100%
+      width: 100%
+
+  &__list-item-avatar,
+  &__list-item-avatar-two-line,
+  &__list-item-avatar-three-line
+    .v-skeleton-loader__avatar
+      height: $skeleton-loader-item-avatar-height
+      width: $skeleton-loader-item-avatar-width
+
+  &__list-item-avatar
+    height: $skeleton-loader-avatar-height
+
+  &__list-item-two-line,
+  &__list-item-avatar-two-line
+    height: $skeleton-loader-item-two-line-height
+
+  &__list-item-three-line,
+  &__list-item-avatar-three-line
+    height: $skeleton-loader-item-three-line-height
+
+  &__list-item-avatar-three-line
+    .v-skeleton-loader__avatar
+      align-self: flex-start
+
+  &__list-item,
+  &__list-item-avatar,
+  &__list-item-two-line,
+  &__list-item-three-line,
+  &__list-item-avatar-two-line,
+  &__list-item-avatar-three-line
+    align-content: center
+    align-items: center
+    display: flex
+    flex-wrap: wrap
+    padding: $skeleton-loader-item-padding
+
+    .v-skeleton-loader__avatar
+      +ltr()
+        margin-right: $skeleton-loader-item-avatar-margin
+
+      +rtl()
+        margin-left: $skeleton-loader-item-avatar-margin
+
+    .v-skeleton-loader__text:last-child,
+    .v-skeleton-loader__text:only-child
+      margin-bottom: 0
+
+  &__paragraph,
+  &__sentences
+    flex: 1 0 auto
+
+  &__paragraph
+    &:not(:last-child)
+      margin-bottom: 6px
+
+    .v-skeleton-loader__text:nth-child(1)
+      max-width: 100%
+
+    .v-skeleton-loader__text:nth-child(2)
+      max-width: 50%
+
+    .v-skeleton-loader__text:nth-child(3)
+      max-width: 70%
+
+  &__sentences
+    .v-skeleton-loader__text:nth-child(2)
+      max-width: 70%
+
+    &:not(:last-child)
+      margin-bottom: 6px
+
+  &__table-heading
+    align-items: center
+    display: flex
+    justify-content: space-between
+    padding: $skeleton-loader-table-heading-padding
+
+    .v-skeleton-loader__heading
+      max-width: 15%
+
+    .v-skeleton-loader__text
+      max-width: 40%
+
+  &__table-thead
+    display: flex
+    justify-content: space-between
+    padding: $skeleton-loader-table-thead-padding
+
+    .v-skeleton-loader__heading
+      max-width: 5%
+
+  &__table-tbody
+    padding: $skeleton-loader-table-tbody-padding
+
+  &__table-tfoot
+    align-items: center
+    display: flex
+    justify-content: flex-end
+    padding: $skeleton-loader-table-tfoot-padding
+
+    > *
+      +ltr()
+        margin-left: $skeleton-loader-table-tfoot-children-margin
+
+      +rtl()
+        margin-right: $skeleton-loader-table-tfoot-children-margin
+
+    .v-skeleton-loader__avatar
+      height: $skeleton-loader-table-tfoot-avatar-height
+      width: $skeleton-loader-table-tfoot-avatar-width
+
+    .v-skeleton-loader__text
+      margin-bottom: 0
+
+      &:nth-child(1)
+        max-width: 128px
+
+      &:nth-child(2)
+        max-width: 64px
+
+  &__table-row
+    display: flex
+    justify-content: space-between
+
+  &__table-cell
+    align-items: center
+    display: flex
+    height: $skeleton-loader-table-cell-height
+    width: $skeleton-loader-table-cell-width
+
+    .v-skeleton-loader__text
+      margin-bottom: 0
+
+  &__text
+    border-radius: $skeleton-loader-text-border-radius
+    flex: 1 0 auto
+    height: $skeleton-loader-text-height
+    margin-bottom: 6px
+
+  &--boilerplate
+    .v-skeleton-loader__bone:after
+      display: none
+
+  &--is-loading
+    overflow: hidden
+
+  &--tile
+    border-radius: 0
+
+    .v-skeleton-loader__bone
+      border-radius: 0
+
+@keyframes loading
+  100%
+    transform: translateX(100%)