@dimailn/vuetify 2.7.2-alpha0

package/src/components/VPagination/_variables.scss

@@ -0,0 +1,16 @@
+@import '../../styles/styles.sass';
+
+$pagination-border-radius: $border-radius-root !default;
+$pagination-disabled-opacity: 0.6 !default;
+$pagination-item-font-size: map-deep-get($headings, 'subtitle-1', 'size') !default;
+$pagination-item-height: 34px !default;
+$pagination-item-margin: .3rem !default;
+$pagination-item-min-width: 34px !default;
+$pagination-item-padding: 0 5px !default;
+$pagination-more-height: 32px !default;
+$pagination-more-margin: .3rem !default;
+$pagination-more-width: 32px !default;
+$pagination-navigation-disabled-opacity: 0.6 !default;
+$pagination-navigation-height: 32px !default;
+$pagination-navigation-margin: .3rem 10px !default;
+$pagination-navigation-width: 32px !default;

package/src/components/VPagination/index.ts

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

package/src/components/VParallax/VParallax.sass

@@ -0,0 +1,37 @@
+@import './_variables.scss'
+
+.v-parallax
+  position: relative
+  overflow: hidden
+  z-index: 0
+
+  &__image-container
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    z-index: 1
+    contain: strict
+
+  &__image
+    position: absolute
+    bottom: 0
+    left: 50%
+    min-width: 100%
+    min-height: 100%
+    display: none
+    transform: translate(-50%, 0)
+    will-change: transform
+    transition: $parallax-transition
+    z-index: 1
+
+  &__content
+    color: map-get($shades, 'white')
+    height: 100%
+    z-index: 2
+    position: relative
+    display: flex
+    flex-direction: column
+    justify-content: center
+    padding: $parallax-padding

package/src/components/VParallax/VParallax.ts

@@ -0,0 +1,108 @@
+import {h} from 'vue'
+// Style
+import './VParallax.sass'
+
+// Mixins
+import Translatable from '../../mixins/translatable'
+import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
+
+// Types
+import { VNode, VNodeData } from 'vue/types/vnode'
+
+const baseMixins = mixins(
+  Translatable
+)
+interface options extends InstanceType<typeof baseMixins> {
+  $refs: {
+    img: HTMLImageElement
+  }
+}
+
+/* @vue/component */
+export default baseMixins.extend({
+  name: 'v-parallax',
+
+  props: {
+    alt: {
+      type: String,
+      default: '',
+    },
+    height: {
+      type: [String, Number],
+      default: 500,
+    },
+    src: String,
+    srcset: String,
+  },
+
+  data: () => ({
+    isBooted: false,
+  }),
+
+  computed: {
+    styles (): object {
+      return {
+        display: 'block',
+        opacity: this.isBooted ? 1 : 0,
+        transform: `translate(-50%, ${this.parallax}px)`,
+      }
+    },
+  },
+
+  mounted () {
+    this.init()
+  },
+
+  methods: {
+    init () {
+      const img = this.$refs.img
+
+      if (!img) return
+
+      if (img.complete) {
+        this.translate()
+        this.listeners()
+      } else {
+        img.addEventListener('load', () => {
+          this.translate()
+          this.listeners()
+        }, false)
+      }
+
+      this.isBooted = true
+    },
+    objHeight () {
+      return this.$refs.img.naturalHeight
+    },
+  },
+
+  render (): VNode {
+    const imgData: VNodeData = {
+      class: 'v-parallax__image',
+      style: this.styles,
+      src: this.src,
+      srcset: this.srcset,
+      alt: this.alt,
+      ref: 'img',
+    }
+
+    const container = h('div', {
+      class: 'v-parallax__image-container',
+    }, [
+      h('img', imgData),
+    ])
+
+    const content = h('div', {
+      class: 'v-parallax__content',
+    }, getSlot(this))
+
+    return h('div', {
+      class: 'v-parallax',
+      style: {
+        height: `${this.height}px`,
+      },
+      ...this.$listeners,
+    }, [container, content])
+  },
+})

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

@@ -0,0 +1,52 @@
+// Components
+import VParallax from '../VParallax'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+} from '@vue/test-utils'
+
+describe('VParallax.ts', () => {
+  type Instance = InstanceType<typeof VParallax>
+  let mountFunction: (options?: object) => Wrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VParallax, {
+        ...options,
+      })
+    }
+  })
+
+  it('should render', async () => {
+    const wrapper = mountFunction({
+      attachToDocument: true,
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should use alt tag when supplied', async () => {
+    const wrapper = mountFunction({
+      attachToDocument: true,
+      propsData: {
+        alt: 'name',
+      },
+    })
+
+    const img = wrapper.find('img')
+    expect(img.attributes('alt')).toBe('name')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should use empty alt tag when not supplied', async () => {
+    const wrapper = mountFunction({
+      attachToDocument: true,
+    })
+
+    const img = wrapper.find('img')
+    expect(img.attributes('alt')).toBe('')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

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

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VParallax.ts should render 1`] = `
+<div class="v-parallax"
+     style="height: 500px;"
+>
+  <div class="v-parallax__image-container">
+    <img alt
+         class="v-parallax__image"
+         style="display: block; opacity: 0; transform: translate(-50%, 0px);"
+    >
+  </div>
+  <div class="v-parallax__content">
+  </div>
+</div>
+`;
+
+exports[`VParallax.ts should use alt tag when supplied 1`] = `
+<div class="v-parallax"
+     style="height: 500px;"
+>
+  <div class="v-parallax__image-container">
+    <img alt="name"
+         class="v-parallax__image"
+         style="display: block; opacity: 1; transform: translate(-50%, 0px);"
+    >
+  </div>
+  <div class="v-parallax__content">
+  </div>
+</div>
+`;
+
+exports[`VParallax.ts should use empty alt tag when not supplied 1`] = `
+<div class="v-parallax"
+     style="height: 500px;"
+>
+  <div class="v-parallax__image-container">
+    <img alt
+         class="v-parallax__image"
+         style="display: block; opacity: 1; transform: translate(-50%, 0px);"
+    >
+  </div>
+  <div class="v-parallax__content">
+  </div>
+</div>
+`;

package/src/components/VParallax/_variables.scss

@@ -0,0 +1,4 @@
+@import '../../styles/styles.sass';
+
+$parallax-transition: .3s opacity map-get($transition, 'swing') !default;
+$parallax-padding: 0 1rem !default;

package/src/components/VParallax/index.ts

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

package/src/components/VPicker/VPicker.sass

@@ -0,0 +1,94 @@
+@import './_variables.scss'
+
+// Theme
++theme(v-picker__title) using ($material)
+  background: map-deep-get($material, 'picker', 'title')
+
++theme(v-picker__body) using ($material)
+  background: map-deep-get($material, 'picker', 'body')
+
+.v-picker
+  border-radius: $picker-border-radius
+  contain: layout style
+  display: inline-flex
+  flex-direction: column
+  font-size: $picker-font-size
+  vertical-align: top
+  position: relative
+
+.v-picker--full-width
+  display: flex
+  width: 100%
+
+  > .v-picker__body
+    margin: initial
+
+.v-picker__title
+  color: map-get($shades, 'white')
+  border-top-left-radius: $picker-border-radius
+  border-top-right-radius: $picker-border-radius
+  padding: $picker-title-padding
+
+.v-picker__title__btn
+  transition: $primary-transition
+
+  &:not(.v-picker__title__btn--active)
+    opacity: $picker-inactive-btn-opacity
+    cursor: pointer
+
+    &:hover:not(:focus)
+      opacity: 1
+
+.v-picker__title__btn--readonly
+  pointer-events: none
+
+
+.v-picker__title__btn--active
+    opacity: $picker-active-btn-opacity
+
+.v-picker__body
+  height: auto
+  overflow: hidden
+  position: relative
+  z-index: 0
+
+  flex: 1 0 auto
+  display: flex
+  flex-direction: column
+  align-items: center
+  margin: 0 auto
+
+  > div
+    width: 100%
+
+    &.fade-transition-leave-active
+      position: absolute
+
+.v-picker--landscape
+  .v-picker__title
+    border-top-right-radius: 0
+    border-bottom-right-radius: 0
+    width: $picker-landscape-title-width
+    position: absolute
+    top: 0
+    height: 100%
+    z-index: 1
+
+    +ltr()
+      left: 0
+
+    +rtl()
+      right: 0
+
+  .v-picker__body:not(.v-picker__body--no-title),
+  .v-picker__actions:not(.v-picker__actions--no-title)
+    +ltr()
+      margin-left: $picker-landscape-title-width
+      margin-right: 0
+
+    +rtl()
+      margin-right: $picker-landscape-title-width
+      margin-left: 0
+
+.v-picker--flat
+  +elevation(0)

package/src/components/VPicker/VPicker.ts

@@ -0,0 +1,97 @@
+import {h, Transition} from 'vue'
+import './VPicker.sass'
+import '../VCard/VCard.sass'
+
+// Mixins
+import Colorable from '../../mixins/colorable'
+import Elevatable from '../../mixins/elevatable'
+import Themeable from '../../mixins/themeable'
+
+// Helpers
+import { convertToUnit, getSlot } from '../../util/helpers'
+
+// Types
+import { VNode } from 'vue/types'
+import mixins from '../../util/mixins'
+
+/* @vue/component */
+export default mixins(
+  Colorable,
+  Elevatable,
+  Themeable
+).extend({
+  name: 'v-picker',
+
+  props: {
+    flat: Boolean,
+    fullWidth: Boolean,
+    landscape: Boolean,
+    noTitle: Boolean,
+    transition: {
+      type: String,
+      default: 'fade-transition',
+    },
+    width: {
+      type: [Number, String],
+      default: 290,
+    },
+  },
+
+  computed: {
+    computedTitleColor (): string | false {
+      const defaultTitleColor = this.isDark ? false : (this.color || 'primary')
+      return this.color || defaultTitleColor
+    },
+  },
+
+  methods: {
+    genTitle () {
+      return h('div', this.setBackgroundColor(this.computedTitleColor, {
+        class: ['v-picker__title', {
+          'v-picker__title--landscape': this.landscape,
+        }],
+      }), getSlot(this, 'title'))
+    },
+    genBodyTransition () {
+      return h(Transition, {
+        name: this.transition,
+      }, getSlot(this))
+    },
+    genBody () {
+      return h('div', {
+        class: ['v-picker__body', {
+          'v-picker__body--no-title': this.noTitle,
+          ...this.themeClasses,
+        }],
+        style: this.fullWidth ? undefined : {
+          width: convertToUnit(this.width),
+        },
+      }, [
+        this.genBodyTransition(),
+      ])
+    },
+    genActions () {
+      return h('div', {
+        class: ['v-picker__actions v-card__actions', {
+          'v-picker__actions--no-title': this.noTitle,
+        }],
+      }, getSlot(this, 'actions'))
+    },
+  },
+
+  render (): VNode {
+    return h('div', {
+      class: ['v-picker v-card', {
+        'v-picker--flat': this.flat,
+        'v-picker--landscape': this.landscape,
+        'v-picker--full-width': this.fullWidth,
+        ...this.themeClasses,
+        ...this.elevationClasses,
+      }],
+    }, [
+      this.$slots.title ? this.genTitle() : null,
+      this.genBody(),
+      this.$slots.actions ? this.genActions() : null,
+    ])
+  },
+})

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

@@ -0,0 +1,100 @@
+// Components
+import VPicker from '../VPicker'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+} from '@vue/test-utils'
+import { compileToFunctions } from 'vue-template-compiler'
+
+describe('VPicker.ts', () => {
+  type Instance = InstanceType<typeof VPicker>
+  let mountFunction: (options?: object) => Wrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VPicker, {
+        ...options,
+      })
+    }
+  })
+
+  it('should render component without title and match snapshot', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: [compileToFunctions('<span>default</span>')],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with title and match snapshot', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: [compileToFunctions('<span>default</span>')],
+        title: [compileToFunctions('<span>title</span>')],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render flat component and match snapshot', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: [compileToFunctions('<span>default</span>')],
+        title: [compileToFunctions('<span>title</span>')],
+      },
+      props: {
+        flat: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with elevation and match snapshot', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: [compileToFunctions('<span>default</span>')],
+        title: [compileToFunctions('<span>title</span>')],
+      },
+      props: {
+        elevation: 15,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render dark component and match snapshot', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        dark: true,
+      },
+      slots: {
+        default: [compileToFunctions('<span>default</span>')],
+        title: [compileToFunctions('<span>title</span>')],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render colored component', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        color: 'orange lighten-1',
+      },
+      slots: {
+        title: [compileToFunctions('<span>title</span>')],
+      },
+    })
+
+    const title = wrapper.find('.v-picker__title')
+    expect(title.classes('orange')).toBe(true)
+    expect(title.classes('lighten-1')).toBe(true)
+  })
+})

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

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VPicker.ts should render component with elevation and match snapshot 1`] = `
+<div class="v-picker v-card theme--light">
+  <div class="v-picker__title primary">
+    <span>
+      title
+    </span>
+  </div>
+  <div class="v-picker__body theme--light"
+       style="width: 290px;"
+  >
+    <span>
+      default
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VPicker.ts should render component with title and match snapshot 1`] = `
+<div class="v-picker v-card theme--light">
+  <div class="v-picker__title primary">
+    <span>
+      title
+    </span>
+  </div>
+  <div class="v-picker__body theme--light"
+       style="width: 290px;"
+  >
+    <span>
+      default
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VPicker.ts should render component without title and match snapshot 1`] = `
+<div class="v-picker v-card theme--light">
+  <div class="v-picker__body theme--light"
+       style="width: 290px;"
+  >
+    <span>
+      default
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VPicker.ts should render dark component and match snapshot 1`] = `
+<div class="v-picker v-card theme--dark">
+  <div class="v-picker__title">
+    <span>
+      title
+    </span>
+  </div>
+  <div class="v-picker__body theme--dark"
+       style="width: 290px;"
+  >
+    <span>
+      default
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VPicker.ts should render flat component and match snapshot 1`] = `
+<div class="v-picker v-card theme--light">
+  <div class="v-picker__title primary">
+    <span>
+      title
+    </span>
+  </div>
+  <div class="v-picker__body theme--light"
+       style="width: 290px;"
+  >
+    <span>
+      default
+    </span>
+  </div>
+</div>
+`;

package/src/components/VPicker/_variables.scss

@@ -0,0 +1,8 @@
+@import '../../styles/styles.sass';
+
+$picker-border-radius: $border-radius-root !default;
+$picker-title-padding: 16px !default;
+$picker-inactive-btn-opacity: .6 !default;
+$picker-active-btn-opacity: 1 !default;
+$picker-landscape-title-width: 170px !default;
+$picker-font-size: 1rem !default;

package/src/components/VPicker/index.ts

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