@kokoccc/vuetify 1.0.1

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

@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VImg.ts should display placeholders 1`] = `
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-image: url(lazy_src); background-position: center center;"
+  >
+  </div>
+  <div class="v-image__placeholder fade-transition-enter-from fade-transition-enter-active">
+    <div>
+      loading...
+    </div>
+  </div>
+  <div class="v-responsive__content">
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should display placeholders 2`] = `
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-image: url(lazy_src); background-position: center center;"
+  >
+  </div>
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
+       style="background-image: url(full_src); background-position: center center;"
+  >
+  </div>
+  <div class="v-image__placeholder fade-transition-enter-from fade-transition-leave-from fade-transition-leave-active">
+    <div>
+      loading...
+    </div>
+  </div>
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should have aria attributes 1`] = `
+<div aria-label="this is not a decorative image"
+     role="img"
+     class="theme--light v-image v-responsive"
+>
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
+  >
+  </div>
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
+       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
+  >
+  </div>
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should load 1`] = `
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
+  >
+  </div>
+  <div class="v-responsive__content">
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should load 2`] = `
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
+  >
+  </div>
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
+       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
+  >
+  </div>
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should override vuetify-loader values 1`] = `
+<div class="theme--light v-image v-responsive">
+  <div style="padding-bottom: 50%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-image: url(lazySrc_manual); background-position: center center;"
+  >
+  </div>
+  <div class="v-responsive__content">
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should update src 1`] = `
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
+  >
+  </div>
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
+       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
+  >
+  </div>
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should update src 2`] = `
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
+  >
+  </div>
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
+       style="background-image: url(LOAD_SUCCESS_SRC1); background-position: center center;"
+  >
+  </div>
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should update src while still loading 1`] = `
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
+  >
+  </div>
+  <div class="v-responsive__content">
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should update src while still loading 2`] = `
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
+  >
+  </div>
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
+       style="background-image: url(LOAD_SUCCESS_SRC1); background-position: center center;"
+  >
+  </div>
+  <div class="v-responsive__content"
+       style="width: 1600px;"
+  >
+  </div>
+</div>
+`;
+
+exports[`VImg.ts should use vuetify-loader data 1`] = `
+<div class="theme--light v-image v-responsive">
+  <div style="padding-bottom: 100%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-image: url(lazySrc_auto); background-position: center center;"
+  >
+  </div>
+  <div class="v-responsive__content">
+  </div>
+</div>
+`;

package/src/components/VImg/_variables.scss

@@ -0,0 +1,3 @@
+@import '../../styles/styles.sass';
+
+$img-preload-filter: blur(2px) !default;

package/src/components/VImg/index.ts

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

package/src/components/VInput/VInput.sass

@@ -0,0 +1,132 @@
+@import './_variables.scss'
+
+/* Theme */
++theme(v-input) using ($material)
+  color: map-deep-get($material, 'text', 'primary')
+
+  input,
+  textarea
+    color: map-deep-get($material, 'text', 'primary')
+
+  input::placeholder,
+  textarea::placeholder
+    color: map-deep-get($material, 'text', 'disabled')
+
+  &--is-disabled
+    color: map-deep-get($material, 'text', 'disabled')
+
+    input,
+    textarea
+      color: map-deep-get($material, 'text', 'disabled')
+
+.v-input
+  align-items: flex-start
+  display: flex
+  flex: 1 1 auto
+  font-size: $input-font-size
+  letter-spacing: $input-letter-spacing
+  max-width: 100%
+  text-align: $input-text-align
+
+  .v-progress-linear
+    top: calc(100% - 1px)
+    left: 0
+
+  input
+    max-height: $input-max-height
+
+  input,
+  textarea
+    // Remove Firefox red outline
+    &:invalid
+      box-shadow: none
+
+    &:focus,
+    &:active
+      outline: none
+
+  .v-label
+    height: $input-label-height
+    line-height: $input-label-height
+    letter-spacing: $input-label-letter-spacing
+
+  &__append-outer,
+  &__prepend-outer
+    display: inline-flex
+    margin-bottom: 4px
+    margin-top: 4px
+    line-height: 1
+
+    .v-icon
+      user-select: none
+
+  &__append-outer
+    +ltr()
+      margin-left: $input-prepend-append-outer-margin
+
+    +rtl()
+      margin-right: $input-prepend-append-outer-margin
+
+  &__prepend-outer
+    +ltr()
+      margin-right: $input-prepend-append-outer-margin
+
+    +rtl()
+      margin-left: $input-prepend-append-outer-margin
+
+  &__control
+    display: flex
+    flex-direction: column
+    height: auto
+    flex-grow: 1
+    flex-wrap: wrap
+    min-width: 0
+    width: 100% // For IE11
+
+  &__icon
+    align-items: center
+    display: inline-flex
+    height: $input-icon-height
+    flex: 1 0 auto
+    justify-content: center
+    min-width: $input-icon-min-width
+    width: $input-icon-width
+
+    &--clear
+      border-radius: 50%
+
+      .v-icon--disabled
+        visibility: hidden
+
+  &__slot
+    align-items: center
+    display: flex
+    margin-bottom: $input-slot-margin-bottom
+    min-height: inherit
+    position: relative
+    transition: $primary-transition
+    transition-property: height, min-height
+    width: 100%
+
+  &--dense > .v-input__control > .v-input__slot
+    margin-bottom: $input-dense-slot-margin-bottom
+
+  &--is-loading > .v-input__control > .v-input__slot
+    &:before,
+    &:after
+      display: none
+
+  &--hide-details > .v-input__control > .v-input__slot
+    margin-bottom: 0
+
+  &--has-state
+    &.error--text .v-label
+      animation: v-shake .6s map-get($transition, 'swing')
+
+  &--hide-spin-buttons
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button
+      -webkit-appearance: none
+      margin: 0
+    input[type=number]
+      -moz-appearance: textfield

package/src/components/VInput/VInput.ts

@@ -0,0 +1,348 @@
+// Styles
+import './VInput.sass'
+
+// Components
+import VIcon from '../VIcon'
+import VLabel from '../VLabel'
+import VMessages from '../VMessages'
+
+// Mixins
+import BindsAttrs from '../../mixins/binds-attrs'
+import Validatable from '../../mixins/validatable'
+
+// Utilities
+import {
+  convertToUnit,
+  getSlot,
+  kebabCase,
+  normalizeClasses,
+} from '../../util/helpers'
+import mergeData from '../../util/mergeData'
+import { breaking } from '../../util/console'
+
+// Types
+import { VNode, VNodeData, PropType, h, getCurrentInstance } from 'vue'
+import mixins from '../../util/mixins'
+import { InputValidationRule } from 'vuetify/types'
+
+const baseMixins = mixins(
+  BindsAttrs,
+  Validatable,
+)
+
+interface options extends InstanceType<typeof baseMixins> {
+  /* eslint-disable-next-line camelcase */
+  $_modelEvent: string
+}
+
+/* @vue/component */
+export default baseMixins.extend({
+  name: 'v-input',
+
+  inheritAttrs: false,
+
+  props: {
+    appendIcon: String,
+    backgroundColor: {
+      type: String,
+      default: '',
+    },
+    dense: Boolean,
+    height: [Number, String],
+    hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,
+    hideSpinButtons: Boolean,
+    hint: String,
+    id: String,
+    label: String,
+    loading: Boolean,
+    persistentHint: Boolean,
+    prependIcon: String,
+    modelValue: null as any as PropType<any>,
+  },
+
+  emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'update:error'],
+
+  data () {
+    return {
+      lazyValue: this.modelValue,
+      hasMouseDown: false,
+    }
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        'v-input--has-state': this.hasState,
+        'v-input--hide-details': !this.showDetails,
+        'v-input--is-label-active': this.isLabelActive,
+        'v-input--is-dirty': this.isDirty,
+        'v-input--is-disabled': this.isDisabled,
+        'v-input--is-focused': this.isFocused,
+        // <v-switch loading>.loading === '' so we can't just cast to boolean
+        'v-input--is-loading': this.loading !== false && this.loading != null,
+        'v-input--is-readonly': this.isReadonly,
+        'v-input--dense': this.dense,
+        'v-input--hide-spin-buttons': this.hideSpinButtons,
+        ...this.themeClasses,
+      }
+    },
+    computedId (): string {
+      return this.id || `input-${this.$.uid}`
+    },
+    hasDetails (): boolean {
+      return this.messagesToDisplay.length > 0
+    },
+    hasHint (): boolean {
+      return !this.hasMessages &&
+        !!this.hint &&
+        (this.persistentHint || this.isFocused)
+    },
+    hasLabel (): boolean {
+      return !!(this.$slots.label || this.label)
+    },
+    // Proxy for `lazyValue`
+    // This allows an input
+    // to function without
+    // a provided model
+    internalValue: {
+      get (): any {
+        return this.lazyValue
+      },
+      set (val: any) {
+        this.lazyValue = val
+        this.$emit(this.$_modelEvent, val)
+
+        if ('$_emitChangeEvent' in this) {
+          this.$emit('change', val)
+        }
+      },
+    },
+    isDirty (): boolean {
+      return !!this.lazyValue
+    },
+    isLabelActive (): boolean {
+      return this.isDirty
+    },
+    messagesToDisplay (): string[] {
+      if (this.hasHint) return [this.hint]
+
+      if (!this.hasMessages) return []
+
+      return this.validations.map((validation: string | InputValidationRule) => {
+        if (typeof validation === 'string') return validation
+
+        const validationResult = validation(this.internalValue)
+
+        return typeof validationResult === 'string' ? validationResult : ''
+      }).filter(message => message !== '')
+    },
+    showDetails (): boolean {
+      return this.hideDetails === false || (this.hideDetails === 'auto' && this.hasDetails)
+    },
+  },
+
+  watch: {
+    modelValue (val) {
+      this.lazyValue = val
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  beforeCreate () {
+    // v-radio-group needs to emit a different event
+    // https://github.com/vuetifyjs/vuetify/issues/4752
+    this.$_modelEvent = /*(this.$options.model && this.$options.model.event) ||*/ 'update:modelValue'
+  },
+
+  methods: {
+    genContent () {
+      return [
+        this.genPrependSlot(),
+        this.genControl(),
+        this.genAppendSlot(),
+      ]
+    },
+    genControl () {
+      return h('div', {
+        class: 'v-input__control',
+        title: this.attrs$.title,
+      }, [
+        this.genInputSlot(),
+        this.genMessages(),
+      ])
+    },
+    genDefaultSlot () {
+      return [
+        this.genLabel(),
+        getSlot(this),
+      ]
+    },
+    genIcon (
+      type: string,
+      cb?: (e: Event) => void,
+      extraData: VNodeData = {}
+    ) {
+      const icon = (this as any)[`${type}Icon`]
+      const eventName = `click:${kebabCase(type)}`
+      const hasListener = !!(this.listeners$[eventName] || cb)
+
+      const localeKey = {
+        prepend: 'prependAction',
+        prependInner: 'prependAction',
+        append: 'appendAction',
+        appendOuter: 'appendAction',
+        clear: 'clear',
+      }[type]
+      const label = hasListener && localeKey
+        ? this.$vuetify.lang.t(`$vuetify.input.${localeKey}`, this.label ?? '')
+        : undefined
+
+      const data = mergeData({
+        'aria-label': label,
+        color: this.validationState,
+        dark: this.dark,
+        disabled: this.isDisabled,
+        light: this.light,
+        tabindex: type === 'clear' ? -1 : undefined,
+        ...(!hasListener
+          ? {}
+          : {
+            onClick: (e: Event) => {
+              e.preventDefault()
+              e.stopPropagation()
+
+              this.$emit(eventName, e)
+              cb && cb(e)
+            },
+            // Container has g event that will
+            // trigger menu open if enclosed
+            onMouseup: (e: Event) => {
+              e.preventDefault()
+              e.stopPropagation()
+            },
+          }),
+      }, extraData)
+
+      return h('div', {
+        class: {
+          'v-input__icon': true,
+          [`v-input__icon--${kebabCase(type)}`]: type
+        },
+      }, [
+        h(
+          VIcon,
+          data,
+          () => icon
+        ),
+      ])
+    },
+    genInputSlot () {
+      return h('div', this.setBackgroundColor(this.backgroundColor, {
+        class: { 'v-input__slot': true },
+        style: { height: convertToUnit(this.height) },
+        onClick: this.onClick,
+        onMousedown: this.onMouseDown,
+        onMouseup: this.onMouseUp,
+        ref: 'input-slot',
+      }), [this.genDefaultSlot()])
+    },
+    genLabel () {
+      if (!this.hasLabel) return null
+
+      return h(VLabel, {
+        color: this.validationState,
+        dark: this.dark,
+        disabled: this.isDisabled,
+        focused: this.hasState,
+        for: this.computedId,
+        light: this.light,
+      }, () => getSlot(this, 'label') || this.label)
+    },
+    genMessages () {
+      if (!this.showDetails) return null
+
+      return h(VMessages, {
+        color: this.hasHint ? '' : this.validationState,
+        dark: this.dark,
+        light: this.light,
+        modelValue: this.messagesToDisplay,
+        role: this.hasMessages ? 'alert' : null,
+      }, { default: getSlot(this, 'message') })
+    },
+    genSlot (
+      type: string,
+      location: string,
+      slot: (VNode | VNode[])[]
+    ) {
+      if (!slot.length) return null
+
+      const ref = `${type}-${location}`
+
+      slot = slot.map(child => child instanceof Function ? child() : child)
+
+      return h('div', {
+        class: `v-input__${ref}`,
+        ref,
+      }, slot)
+    },
+    genPrependSlot () {
+      const slot = []
+
+      if (this.$slots.prepend) {
+        slot.push(this.$slots.prepend)
+      } else if (this.prependIcon) {
+        slot.push(this.genIcon('prepend'))
+      }
+
+      return this.genSlot('prepend', 'outer', slot)
+    },
+    genAppendSlot () {
+      const slot = []
+
+      // Append icon for text field was really
+      // an appended inner icon, v-text-field
+      // will overwrite this method in order to obtain
+      // backwards compat
+      if (this.$slots.append) {
+        slot.push(this.$slots.append)
+      } else if (this.appendIcon) {
+        slot.push(this.genIcon('append'))
+      }
+
+      return this.genSlot('append', 'outer', slot)
+    },
+    onClick (e: Event) {
+      this.$emit('click', e)
+    },
+    onMouseDown (e: Event) {
+      this.hasMouseDown = true
+      this.$emit('mousedown', e)
+    },
+    onMouseUp (e: Event) {
+      this.hasMouseDown = false
+      this.$emit('mouseup', e)
+    },
+  },
+
+  render (): VNode {
+    const { class: additionalClasses, ...restAttrs } = this.$attrs as Record<string, any>
+
+    return h('div', this.setTextColor(this.validationState, {
+      class: { 'v-input': true, ...this.classes, ...normalizeClasses(additionalClasses) },
+      ...restAttrs,
+    }), {
+      default: () => this.genContent(),
+    })
+  },
+})