quasar 2.1.0

package/src/components/field/QField.js

@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue'
+
+import useField, { useFieldState, useFieldProps, useFieldEmits } from '../../composables/private/use-field.js'
+
+export default defineComponent({
+  name: 'QField',
+
+  inheritAttrs: false,
+
+  props: useFieldProps,
+
+  emits: useFieldEmits,
+
+  setup () {
+    return useField(useFieldState())
+  }
+})

package/src/components/field/QField.json

@@ -0,0 +1,112 @@
+{
+  "mixins": [ "composables/private/use-field" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/field"
+  },
+
+  "props": {
+    "maxlength": {
+      "type": [ "String", "Number" ],
+      "desc": "Specify a max length of model",
+      "examples": [ "12" ],
+      "category": "model"
+    },
+
+    "max-values": {
+      "type": [ "Number", "String" ],
+      "desc": "Used internally by QSelect",
+      "internal": true
+    }
+  },
+
+  "slots": {
+    "control": {
+      "desc": "Slot for controls; Suggestion QSlider, QRange, QKnob, ...",
+      "scope": {
+        "id": {
+          "type": "String",
+          "desc": "Element id used in the `for` attribute of the field label. Can be used to link the control to the label",
+          "examples": [ "qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa" ]
+        },
+        "field": {
+          "type": "Object",
+          "desc": "DOM element of the field",
+          "__exemption": [ "examples" ]
+        },
+        "editable": {
+          "type": "Boolean",
+          "desc": "Field is editable"
+        },
+        "focused": {
+          "type": "Boolean",
+          "desc": "Field has focus"
+        },
+        "floatingLabel": {
+          "type": "Boolean",
+          "desc": "Field's label is floating"
+        },
+        "value": {
+          "type": "Any",
+          "desc": "Field's value",
+          "examples": [ 0.241, "Text" ]
+        },
+        "emitValue": {
+          "type": "Function",
+          "desc": "Function that emits an @input event in the context of the field",
+          "params": {
+            "value": {
+              "type": "Any",
+              "desc": "Value to be emitted",
+              "examples": [ 0, "Changed text" ]
+            }
+          },
+          "returns": null
+        }
+      }
+    },
+
+    "rawControl": {
+      "internal": true
+    }
+  },
+
+  "events": {
+    "update:model-value": {
+      "extends": "update:model-value",
+      "desc": "Emitted when the model changes, only when used with 'clearable' or the 'control' scoped slot."
+    },
+
+    "focus": {
+      "desc": "Emitted when component gets focused",
+      "params": {
+        "evt": {
+          "type": "Object",
+          "desc": "JS event object",
+          "__exemption": [ "examples" ]
+        }
+      }
+    },
+
+    "blur": {
+      "desc": "Emitted when component loses focus",
+      "params": {
+        "evt": {
+          "type": "Object",
+          "desc": "JS event object",
+          "__exemption": [ "examples" ]
+        }
+      }
+    }
+  },
+
+  "methods": {
+    "focus": {
+      "desc": "Focus field"
+    },
+
+    "blur": {
+      "desc": "Blur field (lose focus)"
+    }
+  }
+}

package/src/components/field/QField.sass

@@ -0,0 +1,535 @@
+$field-transition: .36s cubic-bezier(.4,0,.2,1)
+// right changes quicker and overflows the container
+$field-transition-label-right-down: .396s cubic-bezier(.4,0,.2,1)
+$field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
+
+.q-field
+  font-size: $input-font-size
+
+  ::-ms-clear,
+  ::-ms-reveal
+    display: none
+
+  &--with-bottom
+    padding-bottom: 20px
+
+  &__marginal
+    height: 56px
+    color: rgba(0,0,0,.54)
+    font-size: 24px
+
+    > * + *
+      margin-left: 2px
+
+    .q-avatar
+      font-size: 32px
+
+  &__before, &__prepend
+    padding-right: 12px
+
+  &__after, &__append
+    padding-left: 12px
+
+    &:empty
+      display: none
+
+  &__append + &__append
+    padding-left: 2px
+
+  &__inner
+    text-align: left
+
+  &__bottom
+    font-size: 12px
+    min-height: 20px
+    line-height: 1
+    color: rgba(0,0,0,.54)
+    padding: 8px 12px 0
+
+    &--animated
+      transform: translateY(100%)
+      position: absolute
+      left: 0
+      right: 0
+      bottom: 0
+
+  &__messages
+    line-height: 1
+
+    > div
+      word-break: break-word
+      word-wrap: break-word
+      overflow-wrap: break-word
+
+      & + div
+        margin-top: 4px
+
+  &__counter
+    padding-left: 8px
+    line-height: 1
+
+  &--item-aligned
+    padding: 8px 16px
+
+    .q-field__before
+      min-width: 56px
+
+  &__control-container
+    height: inherit
+
+  &__control
+    color: var(--q-primary)
+    height: 56px
+    max-width: 100%
+    outline: none
+
+    &:before, &:after
+      content: ''
+      position: absolute
+      top: 0
+      right: 0
+      bottom: 0
+      left: 0
+      pointer-events: none
+    &:before
+      border-radius: inherit
+
+  &__shadow
+    top: 8px
+    opacity: 0
+    overflow: hidden
+    white-space: pre-wrap
+    transition: opacity $field-transition
+
+    + .q-field__native
+      &::placeholder
+        transition: opacity $field-transition
+      &:focus::placeholder
+        opacity: 0
+
+  &__native, &__prefix, &__suffix, &__input
+    font-weight: 400
+    line-height: 28px
+    letter-spacing: .00937em
+    text-decoration: inherit
+    text-transform: inherit
+    border: none
+    border-radius: 0
+    background: none
+    color: $input-text-color
+    outline: 0
+    padding: 6px 0
+
+  &__native, &__input
+    width: 100%
+    min-width: 0 // needed for FF
+    outline: 0 !important // needed for FF
+
+    &:-webkit-autofill
+      -webkit-animation-name: q-autofill
+      -webkit-animation-fill-mode: both
+
+    &:-webkit-autofill + .q-field__label
+      transform: translateY(-40%) scale(.75)
+    &[type="number"]:invalid + .q-field__label
+      transform: translateY(-40%) scale(.75)
+
+    &:invalid
+      box-shadow: none
+
+  &__native[type="file"]
+    line-height: 1em // needed for Chrome type="file"
+  &__input
+    padding: 0
+    height: 0
+    min-height: 24px
+    line-height: 24px
+  &__prefix, &__suffix
+    transition: opacity $field-transition
+    white-space: nowrap
+  &__prefix
+    padding-right: 4px
+  &__suffix
+    padding-left: 4px
+
+  &--readonly, &--disabled
+    .q-placeholder // override "disable" CSS on it
+      opacity: 1 !important
+
+  &--readonly
+    &.q-field--labeled
+      .q-field__native, .q-field__input
+        cursor: default
+    &.q-field--float
+      .q-field__native, .q-field__input
+        cursor: text
+
+  &--disabled
+    .q-field__inner
+      cursor: not-allowed
+
+    .q-field__control
+      pointer-events: none
+
+    .q-field__control > div
+      opacity: .6 !important
+
+      &, * // @stylint ignore
+        outline: 0 !important
+
+  &__label
+    left: 0
+    right: 0
+    top: 18px
+    color: $input-label-color
+    font-size: 16px
+    line-height: 20px
+    font-weight: 400
+    letter-spacing: .00937em
+    text-decoration: inherit
+    text-transform: inherit
+    transform-origin: left top
+    transition: transform $field-transition, right $field-transition-label-right-up
+
+  &--float .q-field__label
+    transform: translateY(-40%) scale(.75)
+    right: calc(-100% / 3)
+    transition: transform $field-transition, right $field-transition-label-right-down
+
+  &--highlighted
+    .q-field__label
+      color: currentColor
+    .q-field__shadow
+      opacity: .5
+
+  &--filled
+
+    .q-field__control
+      padding: 0 12px
+      background: rgba(0,0,0,.05)
+      border-radius: $generic-border-radius $generic-border-radius 0 0
+
+      &:before
+        background: rgba(0,0,0,.05)
+        border-bottom: 1px solid rgba(0,0,0,.42)
+        opacity: 0
+        transition: opacity $field-transition, background $field-transition
+
+      &:hover:before
+        opacity: 1
+
+      &:after
+        height: 2px
+        top: auto
+        transform-origin: center bottom
+        transform: scale3d(0, 1, 1)
+        background: currentColor
+        transition: transform $field-transition
+
+    &.q-field--rounded .q-field__control
+      border-radius: 28px 28px 0 0
+
+    &.q-field--highlighted
+      .q-field__control
+        &:before
+          opacity: 1
+          background: rgba(0,0,0,.12)
+        &:after
+          transform: scale3d(1, 1, 1)
+
+    &.q-field--dark
+      .q-field__control, .q-field__control:before
+        background: rgba(255,255,255,.07)
+      &.q-field--highlighted .q-field__control:before
+        background: rgba(255,255,255,.1)
+
+    &.q-field--readonly
+      .q-field__control:before
+        opacity: 1
+        background: transparent
+        border-bottom-style: dashed
+
+  &--outlined
+
+    .q-field__control
+      border-radius: $generic-border-radius
+      padding: 0 12px
+
+      &:before
+        border: 1px solid rgba(0,0,0,.24)
+        transition: border-color $field-transition
+      &:hover:before
+        border-color: #000
+
+      &:after
+        height: inherit
+        border-radius: inherit
+        border: 2px solid transparent
+        transition: border-color $field-transition
+
+    .q-field__native,
+    .q-field__input
+      &:-webkit-autofill
+        margin-top: 1px
+        margin-bottom: 1px
+
+    &.q-field--rounded .q-field__control
+      border-radius: 28px
+
+    &.q-field--highlighted
+      // prevent rounded border imperfections to be seen through the :after border
+      .q-field__control:hover:before
+        border-color: transparent
+      .q-field__control:after
+        border-color: currentColor
+        border-width: 2px
+        transform: scale3d(1, 1, 1)
+
+    &.q-field--readonly
+      .q-field__control:before
+        border-style: dashed
+
+  &--standard
+
+    .q-field__control
+      &:before
+        border-bottom: 1px solid rgba(0,0,0,.24)
+        transition: border-color $field-transition
+
+      &:hover:before
+        border-color: #000
+
+      &:after
+        height: 2px
+        top: auto
+        border-bottom-left-radius: inherit
+        border-bottom-right-radius: inherit
+        transform-origin: center bottom
+        transform: scale3d(0, 1, 1)
+        background: currentColor
+        transition: transform $field-transition
+
+    &.q-field--highlighted
+      .q-field__control:after
+        transform: scale3d(1, 1, 1)
+
+    &.q-field--readonly
+      .q-field__control:before
+        border-bottom-style: dashed
+
+  &--dark
+
+    .q-field__control:before
+      border-color: rgba(255,255,255,.6)
+
+    .q-field__control:hover:before
+      border-color: #fff
+
+    .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
+      color: #fff
+
+    &:not(.q-field--highlighted) .q-field__label, .q-field__marginal, .q-field__bottom
+      color: rgba(255,255,255,.7)
+
+  &--standout
+
+    .q-field__control
+      padding: 0 12px
+      background: rgba(0,0,0,.05)
+      border-radius: $generic-border-radius
+      transition: box-shadow $field-transition, background-color $field-transition
+
+      &:before
+        background: rgba(0,0,0,.07)
+        opacity: 0
+        transition: opacity $field-transition, background $field-transition
+
+      &:hover:before
+        opacity: 1
+
+    &.q-field--rounded .q-field__control
+      border-radius: 28px
+
+    &.q-field--highlighted
+      .q-field__control
+        box-shadow: $shadow-2
+        background: #000
+      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
+        color: #fff
+
+    &.q-field--readonly
+      .q-field__control:before
+        opacity: 1
+        background: transparent
+        border: 1px dashed rgba(0,0,0,.24)
+
+    &.q-field--dark
+      .q-field__control
+        background: rgba(255,255,255,.07)
+        &:before
+          background: rgba(255,255,255,.07)
+      &.q-field--highlighted
+        .q-field__control
+          background: #fff
+        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
+          color: #000
+      &.q-field--readonly
+        .q-field__control:before
+          border-color: rgba(255,255,255,.24)
+
+  &--labeled
+    .q-field__native, .q-field__prefix, .q-field__suffix
+      line-height: 24px
+      padding-top: 24px
+      padding-bottom: 8px
+
+    .q-field__shadow
+      top: 0
+
+    &:not(.q-field--float)
+      .q-field__prefix, .q-field__suffix
+        opacity: 0
+
+      .q-field__native, .q-field__input
+        &::-webkit-input-placeholder
+          color: transparent
+        &::-moz-placeholder
+          color: transparent
+        &:-ms-input-placeholder
+          color: transparent !important
+        &::-ms-input-placeholder
+          color: transparent
+        &::placeholder
+          color: transparent
+
+    &.q-field--dense
+      .q-field__native, .q-field__prefix, .q-field__suffix
+        padding-top: 14px
+        padding-bottom: 2px
+
+  &--dense
+    .q-field__shadow
+      top: 0
+    .q-field__control, .q-field__marginal
+      height: 40px
+    .q-field__bottom
+      font-size: 11px
+
+    .q-field__label
+      font-size: 14px
+      top: 10px
+    .q-field__before, .q-field__prepend
+      padding-right: 6px
+    .q-field__after, .q-field__append
+      padding-left: 6px
+    .q-field__append + .q-field__append
+      padding-left: 2px
+
+    .q-field__marginal
+      .q-avatar
+        font-size: 24px
+
+    &.q-field--float .q-field__label
+      transform: translateY(-30%) scale(.75)
+
+    .q-field__native, .q-field__input
+      &:-webkit-autofill + .q-field__label
+        transform: translateY(-30%) scale(.75)
+      &[type="number"]:invalid + .q-field__label
+        transform: translateY(-30%) scale(.75)
+
+  &--borderless, &--standard
+
+    .q-field__bottom,
+    &.q-field--dense .q-field__control
+      padding-left: 0
+      padding-right: 0
+
+  &--error
+    .q-field__label
+      animation: q-field-label .36s
+
+    .q-field__bottom
+      color: var(--q-negative)
+
+  &__focusable-action
+    opacity: 0.6
+    cursor: pointer
+    outline: 0 !important
+    border: 0
+    color: inherit
+    background: transparent
+    padding: 0
+
+    &:hover,
+    &:focus
+      opacity: 1
+
+  &--auto-height
+
+    .q-field__control
+      height: auto
+
+    .q-field__control, .q-field__native
+      min-height: 56px
+
+    .q-field__native
+      align-items: center
+
+    .q-field__control-container
+      padding-top: 0
+
+    .q-field__native, .q-field__prefix, .q-field__suffix
+      line-height: 18px
+
+    &.q-field--labeled
+      .q-field__control-container
+        padding-top: 24px
+      .q-field__shadow
+        top: 24px
+      .q-field__native, .q-field__prefix, .q-field__suffix
+        padding-top: 0
+      .q-field__native
+        min-height: 24px
+
+    &.q-field--dense
+      .q-field__control, .q-field__native
+        min-height: 40px
+
+      &.q-field--labeled
+        .q-field__control-container
+          padding-top: 14px
+        .q-field__shadow
+          top: 14px
+        .q-field__native
+          min-height: 24px
+
+  &--square .q-field__control
+    border-radius: 0 !important
+
+.q-transition--field-message
+  &-enter-active,
+  &-leave-active
+    transition: transform .6s cubic-bezier(.86,0,.07,1), opacity .6s cubic-bezier(.86,0,.07,1)
+
+  &-enter-from, &-leave-to
+    opacity: 0
+    transform: translateY(-10px)
+
+  &-leave-from, &-leave-active
+    position: absolute
+
+@keyframes q-field-label
+  40%
+    margin-left: 2px
+
+  60%, 80%
+    margin-left: -2px
+
+  70%, 90%
+    margin-left: 2px
+
+@keyframes q-autofill
+  to
+    background: transparent
+    color: $input-autofill-color