@kokoccc/vuetify 1.0.1

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

@@ -0,0 +1,301 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VTextField.ts should apply theme to label, counter, messages and icons 1`] = `
+<div class="v-input theme--light v-text-field">
+  <div class="v-input__prepend-outer">
+    <div class="v-input__icon v-input__icon--prepend">
+      <i class="v-icon notranslate theme--light material-icons"
+         aria-hidden="true"
+      >
+      </i>
+    </div>
+  </div>
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-input__prepend-inner">
+        <div class="v-input__icon v-input__icon--prepend-inner">
+          <i class="v-icon notranslate theme--light prepend prepend-inner"
+             aria-hidden="true"
+          >
+          </i>
+        </div>
+      </div>
+      <div class="v-text-field__slot">
+        <label class="v-label theme--light"
+               for="input-189"
+               aria-hidden="false"
+               style="left: 0px; position: absolute;"
+        >
+          foo
+        </label>
+        <input id="input-189"
+               type="text"
+        >
+      </div>
+      <div class="v-input__append-inner">
+        <div class="v-input__icon v-input__icon--append">
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
+          >
+          </i>
+        </div>
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+          <div class="v-messages__message">
+            bar
+          </div>
+        </div>
+      </div>
+      <div class="v-counter theme--light">
+        0
+      </div>
+    </div>
+  </div>
+  <div class="v-input__append-outer">
+    <div class="v-input__icon v-input__icon--append-outer">
+      <i class="v-icon notranslate theme--light append append-outer"
+         aria-hidden="true"
+      >
+      </i>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextField.ts should have prefix and suffix 1`] = `
+<div class="v-input theme--light v-text-field v-text-field--prefix">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <div class="v-text-field__prefix">
+          $
+        </div>
+        <input id="input-119"
+               type="text"
+        >
+        <div class="v-text-field__suffix">
+          .com
+        </div>
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextField.ts should hide messages if no messages and hide-details is auto 1`] = `
+<div class="v-input v-input--hide-details theme--light v-text-field">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <input id="input-207"
+               type="text"
+        >
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextField.ts should hide messages if no messages and hide-details is auto 2`] = `
+<div class="v-input theme--light v-text-field">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <input id="input-207"
+               type="text"
+        >
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+      <div class="v-counter theme--light">
+        0 / 7
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextField.ts should hide messages if no messages and hide-details is auto 3`] = `
+<div class="v-input v-input--has-state theme--light v-text-field error--text">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <input id="input-207"
+               type="text"
+        >
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light error--text"
+           role="alert"
+      >
+        <div class="v-messages__wrapper">
+          <div class="v-messages__message message-transition-enter-from message-transition-enter-active">
+            required
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextField.ts should not display counter when set to false/undefined/null 1`] = `
+<div class="v-input theme--light v-text-field"
+     maxlength="50"
+>
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <input maxlength="50"
+               id="input-35"
+               type="text"
+        >
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+      <div class="v-counter theme--light">
+        0 / 50
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextField.ts should not display counter when set to false/undefined/null 2`] = `
+<div class="v-input theme--light v-text-field"
+     maxlength="50"
+>
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <input maxlength="50"
+               id="input-35"
+               type="text"
+        >
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextField.ts should render component and match snapshot 1`] = `
+<div class="v-input theme--light v-text-field">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <input id="input-1"
+               type="text"
+        >
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextField.ts should render component with async loading and custom progress and match snapshot 1`] = `
+<div class="v-input v-input--is-loading theme--light v-text-field">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <input id="input-102"
+               type="text"
+        >
+      </div>
+      <div class="v-progress-linear v-progress-linear--visible theme--light"
+           role="progressbar"
+           aria-valuemin="0"
+           aria-valuemax="100"
+           style="height: 7px;"
+      >
+        <div class="v-progress-linear__background orange"
+             style="opacity: 0.3; left: 0%; width: 100%;"
+        >
+        </div>
+        <div class="v-progress-linear__buffer">
+        </div>
+        <div class="v-progress-linear__indeterminate v-progress-linear__indeterminate--active">
+          <div class="v-progress-linear__indeterminate long orange">
+          </div>
+          <div class="v-progress-linear__indeterminate short orange">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextField.ts should render component with async loading and match snapshot 1`] = `
+<div class="v-input v-input--is-loading theme--light v-text-field">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <input id="input-94"
+               type="text"
+        >
+      </div>
+      <div class="v-progress-linear v-progress-linear--absolute v-progress-linear--visible theme--light"
+           role="progressbar"
+           aria-valuemin="0"
+           aria-valuemax="100"
+           style="height: 2px;"
+      >
+        <div class="v-progress-linear__background primary"
+             style="opacity: 0.3; left: 0%; width: 100%;"
+        >
+        </div>
+        <div class="v-progress-linear__buffer">
+        </div>
+        <div class="v-progress-linear__indeterminate v-progress-linear__indeterminate--active">
+          <div class="v-progress-linear__indeterminate long primary">
+          </div>
+          <div class="v-progress-linear__indeterminate short primary">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/VTextField/_mixins.sass

@@ -0,0 +1,18 @@
+@mixin prepend-append-margin-top($margin-top)
+  .v-input__prepend-outer,
+  .v-input__prepend-inner,
+  .v-input__append-inner,
+  .v-input__append-outer
+    margin-top: $margin-top
+
+@mixin outer-margin-top($margin-top)
+  .v-input__prepend-outer,
+  .v-input__append-outer
+    margin-top: $margin-top
+
+@mixin label-position($top, $translateY, $scale: .75)
+  .v-label
+    top: $top
+
+    &--active
+      transform: translateY($translateY) scale($scale)

package/src/components/VTextField/_variables.scss

@@ -0,0 +1,51 @@
+@import '../../styles/styles.sass';
+
+$text-field-border-radius: $border-radius-root !default;
+$text-field-line-height: 20px !default;
+$text-field-padding: 8px 0 8px !default;
+$text-field-dense-padding: 4px 0 2px !default;
+$text-field-append-prepend-margin: 4px !default;
+$text-field-dense-append-prepend-margin: 0px !default;
+$text-field-dense-icon-append-prepend-margin-top: 8px !default;
+$text-field-filled-full-width-outlined-slot-min-height: 56px !default;
+$text-field-filled-full-width-outlined-dense-slot-min-height: 52px !default;
+$text-field-filled-full-width-outlined-single-line-slot-min-height: 40px !default;
+$text-field-filled-border-radius: $text-field-border-radius $text-field-border-radius 0 0 !default;
+$text-field-counter-margin: 8px !default;
+$text-field-label-top: 6px !default;
+$text-field-label-active-transform: translateY(-18px) scale(.75) !default;
+$text-field-details-min-height: 14px !default;
+$text-field-filled-full-width-label-top: 18px !default;
+$text-field-filled-full-width-label-active-transform: translateY(-6px) scale(.75) !default;
+$text-field-dense-label-top: 17px !default;
+$text-field-dense-label-active-transform: translateY(-10px) scale(.75) !default;
+$text-field-single-line-label-top: 11px !default;
+$text-field-filled-margin-top: 22px !default;
+$text-field-enclosed-prepend-append-margin-top: 17px !default;
+$text-field-dense-prepend-append-margin-top: 14px !default;
+$text-field-single-line-prepend-append-margin-top: 9px !default;
+$text-field-outlined-prepend-append-margin-top: 8px !default;
+$text-field-enclosed-details-padding: 0 12px !default;
+$text-field-details-padding-top: 0px !default;
+$text-field-details-margin-bottom: 8px !default;
+$text-field-outlined-margin-bottom: 16px !default;
+$text-field-outlined-label-position-x: 18px !default;
+$text-field-outlined-label-position-y: -24px !default;
+$text-field-outlined-dense-label-position-x: 10px !default;
+$text-field-outlined-dense-label-position-y: -16px !default;
+$text-field-prefix-max-height: 32px !default;
+$text-field-outlined-append-prepend-outer-margin-top: 18px !default;
+$text-field-outlined-fieldset-top: -5px !default;
+$text-field-outlined-fieldset-border-width: 1px !default;
+$text-field-outlined-fieldset-padding: 8px !default;
+$text-field-outlined-legend-line-height: 11px !default;
+$text-field-rounded-legend-margin: 12px !default;
+$text-field-rounded-border-radius: 28px !default;
+$text-field-shaped-border-radius: 16px 16px 0 0 !default;
+$text-field-outlined-fieldset-border: 2px solid currentColor !default;
+$text-field-outlined-rounded-slot-padding: 0 24px !default;
+$text-field-solo-label-top: calc(50% - 9px) !default;
+$text-field-solo-control-min-height: 48px !default;
+$text-field-solo-dense-control-min-height: 38px !default;
+$text-field-solo-outer-margin-top: 12px !default;
+$text-field-solo-dense-outer-margin-top: 7px !default;

package/src/components/VTextField/index.ts

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

package/src/components/VTextarea/VTextarea.sass

@@ -0,0 +1,113 @@
+@import './_variables.scss'
+
++theme(v-textarea) using ($material)
+  &.v-text-field--solo-inverted
+    &.v-input--is-focused
+      textarea
+        color: map-deep-get($material, 'inputs', 'solo-inverted-focused-text')
+
+      textarea::placeholder
+        color: map-deep-get($material, 'inputs', 'solo-inverted-focused-placeholder')
+
+.v-textarea
+  textarea
+    align-self: stretch
+    flex: 1 1 auto
+    line-height: $textarea-line-height
+    max-width: 100%
+    min-height: $textarea-min-height
+    outline: none
+    padding: $textarea-padding
+    width: 100%
+
+  .v-text-field__prefix,
+  .v-text-field__suffix
+    padding-top: $textarea-prefix-padding-top
+    align-self: start
+
+  &.v-text-field--box,
+  &.v-text-field--enclosed
+    .v-text-field__prefix,
+    textarea
+      margin-top: $textarea-box-enclosed-prefix-margin-top
+
+    &.v-text-field--single-line,
+    &.v-text-field--outlined
+      &:not(.v-input--dense)
+        .v-text-field__prefix,
+        .v-text-field__suffix,
+        textarea
+          margin-top: $textarea-box-enclosed-single-outlined-margin-top
+
+        .v-label
+          top: $textarea-box-enclosed-single-outlined-label-top
+
+      &.v-input--dense
+        .v-text-field__prefix,
+        .v-text-field__suffix,
+        textarea
+          margin-top: $textarea-dense-box-enclosed-single-outlined-margin-top
+
+        .v-input__prepend-inner,
+        .v-input__prepend-outer,
+        .v-input__append-inner,
+        .v-input__append-outer
+          align-self: flex-start
+          margin-top: $textarea-dense-append-prepend-margin-top
+
+  &.v-text-field--solo
+    align-items: flex-start
+
+    .v-input__control
+      textarea
+        caret-color: auto
+
+    // Essentially revert styles
+    // applied by v-text-field
+    .v-input__prepend-inner,
+    .v-input__prepend-outer,
+    .v-input__append-inner,
+    .v-input__append-outer
+      align-self: flex-start
+      margin-top: $textarea-solo-append-prepend-margin-top
+
+    .v-input__append-inner
+      +ltr()
+        padding-left: $textarea-solo-append-padding
+
+      +rtl()
+        padding-right: $textarea-solo-append-padding
+
+  &--auto-grow
+    textarea
+      overflow: hidden
+
+  &--no-resize
+    textarea
+      resize: none
+
+  &.v-text-field--enclosed
+    .v-text-field__slot
+      align-self: stretch
+
+      +ltr()
+        margin-right: $textarea-enclosed-text-slot-margin
+
+      +rtl()
+        margin-left: $textarea-enclosed-text-slot-margin
+
+      textarea
+        +ltr()
+          padding-right: $textarea-enclosed-text-slot-padding
+
+        +rtl()
+          padding-left: $textarea-enclosed-text-slot-padding
+
+    &.v-text-field--reverse
+      .v-text-field__slot
+        .v-label
+          +ltr()
+            margin-right: -$textarea-enclosed-text-slot-margin
+
+          +rtl()
+            margin-left: -$textarea-enclosed-text-slot-margin

package/src/components/VTextarea/VTextarea.ts

@@ -0,0 +1,117 @@
+// Styles
+import './VTextarea.sass'
+
+// Extensions
+import VTextField from '../VTextField/VTextField'
+
+// Utilities
+import mixins from '../../util/mixins'
+
+// Types
+import Vue from 'vue'
+
+interface options extends Vue {
+  $refs: {
+    input: HTMLTextAreaElement
+  }
+}
+
+const baseMixins = mixins<options &
+  InstanceType<typeof VTextField>
+>(
+  VTextField
+)
+
+/* @vue/component */
+export default baseMixins.extend({
+  name: 'v-textarea',
+
+  props: {
+    autoGrow: Boolean,
+    noResize: Boolean,
+    rowHeight: {
+      type: [Number, String],
+      default: 24,
+      validator: (v: any) => !isNaN(parseFloat(v)),
+    },
+    rows: {
+      type: [Number, String],
+      default: 5,
+      validator: (v: any) => !isNaN(parseInt(v, 10)),
+    },
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        'v-textarea': true,
+        'v-textarea--auto-grow': this.autoGrow,
+        'v-textarea--no-resize': this.noResizeHandle,
+        ...VTextField.computed.classes.call(this),
+      }
+    },
+    noResizeHandle (): boolean {
+      return this.noResize || this.autoGrow
+    },
+  },
+
+  watch: {
+    autoGrow (val: boolean) {
+      this.$nextTick(() => {
+        val
+          ? this.calculateInputHeight()
+          : this.$refs.input?.style.removeProperty('height')
+      })
+    },
+    lazyValue () {
+      this.autoGrow && this.$nextTick(this.calculateInputHeight)
+    },
+    rowHeight () {
+      this.autoGrow && this.$nextTick(this.calculateInputHeight)
+    },
+  },
+
+  mounted () {
+    setTimeout(() => {
+      this.autoGrow && this.calculateInputHeight()
+    }, 0)
+  },
+
+  methods: {
+    calculateInputHeight () {
+      const input = this.$refs.input
+      if (!input) return
+
+      input.style.height = '0'
+      const height = input.scrollHeight
+      const minHeight = parseInt(this.rows, 10) * parseFloat(this.rowHeight)
+      // This has to be done ASAP, waiting for Vue
+      // to update the DOM causes ugly layout jumping
+      input.style.height = Math.max(minHeight, height) + 'px'
+    },
+    genInput () {
+      const input = VTextField.methods.genInput.call(this)
+
+      input.tag = 'textarea'
+      input.type = 'textarea'
+      delete input.props.type
+      input.props.rows = this.rows
+
+      return input
+    },
+    onInput (e: Event) {
+      VTextField.methods.onInput.call(this, e)
+      this.autoGrow && this.calculateInputHeight()
+    },
+    onKeyDown (e: KeyboardEvent) {
+      // Prevents closing of a
+      // dialog when pressing
+      // enter
+      if (this.isFocused && e.keyCode === 13) {
+        e.stopPropagation()
+      }
+
+      this.$emit('keydown', e)
+    },
+  },
+})