quasar 2.18.7 → 2.19.0

package/src/components/input/QInput.js

@@ -1,8 +1,25 @@
-import { h, ref, computed, watch, onBeforeUnmount, onMounted, nextTick, getCurrentInstance } from 'vue'
-
-import useField, { useFieldState, useFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private.use-field/use-field.js'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  onBeforeUnmount,
+  onMounted,
+  nextTick,
+  getCurrentInstance
+} from 'vue'
+
+import useField, {
+  useFieldState,
+  useFieldProps,
+  useFieldEmits,
+  fieldValueIsFilled
+} from '../../composables/private.use-field/use-field.js'
 import useMask, { useMaskProps } from './use-mask.js'
-import { useFormProps, useFormInputNameAttr } from '../../composables/use-form/private.use-form.js'
+import {
+  useFormProps,
+  useFormInputNameAttr
+} from '../../composables/use-form/private.use-form.js'
 import useFileFormDomProps from '../../composables/private.use-file/use-file-dom-props.js'
 import useKeyComposition from '../../composables/private.use-key-composition/use-key-composition.js'
 
@@ -24,7 +41,7 @@ export default createComponent({
     // override of useFieldProps > modelValue
     modelValue: __QUASAR_SSR_SERVER__
       ? {} // SSR does not know about FileList
-      : [ String, Number, FileList ],
+      : [String, Number, FileList],
 
     shadowText: String,
 
@@ -33,26 +50,33 @@ export default createComponent({
       default: 'text'
     },
 
-    debounce: [ String, Number ],
+    debounce: [String, Number],
 
     autogrow: Boolean, // makes a textarea
 
-    inputClass: [ Array, String, Object ],
-    inputStyle: [ Array, String, Object ]
+    inputClass: [Array, String, Object],
+    inputStyle: [Array, String, Object]
   },
 
   emits: [
     ...useFieldEmits,
-    'paste', 'change',
-    'keydown', 'click', 'animationend'
+    'paste',
+    'change',
+    'keydown',
+    'click',
+    'animationend'
   ],
 
-  setup (props, { emit, attrs }) {
+  setup(props, { emit, attrs }) {
     const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
     const temp = {}
-    let emitCachedValue = NaN, typedNumber, stopValueWatcher, emitTimer = null, emitValueFn
+    let emitCachedValue = NaN,
+      typedNumber,
+      stopValueWatcher,
+      emitTimer = null,
+      emitValueFn
 
     const inputRef = ref(null)
     const nameProp = useFormInputNameAttr(props)
@@ -73,13 +97,14 @@ export default createComponent({
 
     const state = useFieldState({ changeEvent: true })
 
-    const isTextarea = computed(() =>
-      props.type === 'textarea' || props.autogrow === true
+    const isTextarea = computed(
+      () => props.type === 'textarea' || props.autogrow === true
     )
 
-    const isTypeText = computed(() =>
-      isTextarea.value === true
-      || [ 'text', 'search', 'url', 'tel', 'password' ].includes(props.type)
+    const isTypeText = computed(
+      () =>
+        isTextarea.value === true ||
+        ['text', 'search', 'url', 'tel', 'password'].includes(props.type)
     )
 
     const onEvents = computed(() => {
@@ -96,7 +121,10 @@ export default createComponent({
         onFocus: stop
       }
 
-      evt.onCompositionstart = evt.onCompositionupdate = evt.onCompositionend = onComposition
+      evt.onCompositionstart =
+        evt.onCompositionupdate =
+        evt.onCompositionend =
+          onComposition
 
       if (hasMask.value === true) {
         evt.onKeydown = onMaskedKeydown
@@ -112,7 +140,7 @@ export default createComponent({
     })
 
     const inputAttrs = computed(() => {
-      const attrs = {
+      const acc = {
         tabindex: 0,
         'data-autofocus': props.autofocus === true || void 0,
         rows: props.type === 'textarea' ? 6 : void 0,
@@ -126,87 +154,97 @@ export default createComponent({
       }
 
       if (isTextarea.value === false) {
-        attrs.type = props.type
+        acc.type = props.type
       }
 
       if (props.autogrow === true) {
-        attrs.rows = 1
+        acc.rows = 1
       }
 
-      return attrs
+      return acc
     })
 
     // some browsers lose the native input value
     // so we need to reattach it dynamically
     // (like type="password" <-> type="text"; see #12078)
-    watch(() => props.type, () => {
-      if (inputRef.value) {
-        inputRef.value.value = props.modelValue
-      }
-    })
-
-    watch(() => props.modelValue, v => {
-      if (hasMask.value === true) {
-        if (stopValueWatcher === true) {
-          stopValueWatcher = false
-          if (String(v) === emitCachedValue) return
+    watch(
+      () => props.type,
+      () => {
+        if (inputRef.value) {
+          inputRef.value.value = props.modelValue
         }
-
-        updateMaskValue(v)
       }
-      else if (innerValue.value !== v) {
-        innerValue.value = v
+    )
 
-        if (
-          props.type === 'number'
-          && temp.hasOwnProperty('value') === true
-        ) {
-          if (typedNumber === true) {
-            typedNumber = false
+    watch(
+      () => props.modelValue,
+      v => {
+        if (hasMask.value === true) {
+          if (stopValueWatcher === true) {
+            stopValueWatcher = false
+            if (String(v) === emitCachedValue) return
           }
-          else {
-            delete temp.value
+
+          updateMaskValue(v)
+        } else if (innerValue.value !== v) {
+          innerValue.value = v
+
+          if (
+            props.type === 'number' &&
+            temp.hasOwnProperty('value') === true
+          ) {
+            if (typedNumber === true) {
+              typedNumber = false
+            } else {
+              delete temp.value
+            }
           }
         }
-      }
 
-      // textarea only
-      props.autogrow === true && nextTick(adjustHeight)
-    })
-
-    watch(() => props.autogrow, val => {
-      // textarea only
-      if (val === true) {
-        nextTick(adjustHeight)
+        // textarea only
+        if (props.autogrow === true) nextTick(adjustHeight)
       }
-      // if it has a number of rows set respect it
-      else if (inputRef.value !== null && attrs.rows > 0) {
-        inputRef.value.style.height = 'auto'
+    )
+
+    watch(
+      () => props.autogrow,
+      val => {
+        // textarea only
+        if (val === true) {
+          nextTick(adjustHeight)
+        }
+        // if it has a number of rows set respect it
+        else if (inputRef.value !== null && attrs.rows > 0) {
+          inputRef.value.style.height = 'auto'
+        }
       }
-    })
+    )
 
-    watch(() => props.dense, () => {
-      props.autogrow === true && nextTick(adjustHeight)
-    })
+    watch(
+      () => props.dense,
+      () => {
+        if (props.autogrow === true) nextTick(adjustHeight)
+      }
+    )
 
-    function focus () {
+    function focus() {
       addFocusFn(() => {
         const el = document.activeElement
         if (
-          inputRef.value !== null
-          && inputRef.value !== el
-          && (el === null || el.id !== state.targetUid.value)
+          inputRef.value !== null &&
+          inputRef.value !== el &&
+          (el === null || el.id !== state.targetUid.value)
         ) {
           inputRef.value.focus({ preventScroll: true })
         }
       })
     }
 
-    function select () {
+    function select() {
       inputRef.value?.select()
     }
 
-    function onPaste (e) {
+    function onPaste(e) {
       if (hasMask.value === true && props.reverseFillMask !== true) {
         const inp = e.target
         moveCursorForPaste(inp, inp.selectionStart, inp.selectionEnd)
@@ -215,7 +253,7 @@ export default createComponent({
       emit('paste', e)
     }
 
-    function onInput (e) {
+    function onInput(e) {
       if (!e || !e.target) return
 
       if (props.type === 'file') {
@@ -232,8 +270,7 @@ export default createComponent({
 
       if (hasMask.value === true) {
         updateMaskValue(val, false, e.inputType)
-      }
-      else {
+      } else {
         emitValue(val)
 
         if (isTypeText.value === true && e.target === document.activeElement) {
@@ -241,7 +278,10 @@ export default createComponent({
 
           if (selectionStart !== void 0 && selectionEnd !== void 0) {
             nextTick(() => {
-              if (e.target === document.activeElement && val.indexOf(e.target.value) === 0) {
+              if (
+                e.target === document.activeElement &&
+                val.indexOf(e.target.value) === 0
+              ) {
                 e.target.setSelectionRange(selectionStart, selectionEnd)
               }
             })
@@ -251,33 +291,30 @@ export default createComponent({
 
       // we need to trigger it immediately too,
       // to avoid "flickering"
-      props.autogrow === true && adjustHeight()
+      if (props.autogrow === true) adjustHeight()
     }
 
-    function onAnimationend (e) {
+    function onAnimationend(e) {
       emit('animationend', e)
       adjustHeight()
     }
 
-    function emitValue (val, stopWatcher) {
+    function emitValue(val, stopWatcher) {
       emitValueFn = () => {
         emitTimer = null
 
-        if (
-          props.type !== 'number'
-          && temp.hasOwnProperty('value') === true
-        ) {
+        if (props.type !== 'number' && temp.hasOwnProperty('value') === true) {
           delete temp.value
         }
 
         if (props.modelValue !== val && emitCachedValue !== val) {
           emitCachedValue = val
 
-          stopWatcher === true && (stopValueWatcher = true)
+          if (stopWatcher === true) stopValueWatcher = true
           emit('update:modelValue', val)
 
           nextTick(() => {
-            emitCachedValue === val && (emitCachedValue = NaN)
+            if (emitCachedValue === val) emitCachedValue = NaN
           })
         }
 
@@ -290,17 +327,16 @@ export default createComponent({
       }
 
       if (props.debounce !== void 0) {
-        emitTimer !== null && clearTimeout(emitTimer)
+        if (emitTimer !== null) clearTimeout(emitTimer)
         temp.value = val
         emitTimer = setTimeout(emitValueFn, props.debounce)
-      }
-      else {
+      } else {
         emitValueFn()
       }
     }
 
     // textarea only
-    function adjustHeight () {
+    function adjustHeight() {
       requestAnimationFrame(() => {
         const inp = inputRef.value
         if (inp !== null) {
@@ -308,9 +344,8 @@ export default createComponent({
           // chrome does not keep scroll #15498
           const { scrollTop } = inp
           // chrome calculates a smaller scrollHeight when in a .column container
-          const { overflowY, maxHeight } = $q.platform.is.firefox === true
-            ? {}
-            : window.getComputedStyle(inp)
+          const { overflowY, maxHeight } =
+            $q.platform.is.firefox === true ? {} : window.getComputedStyle(inp)
           // on firefox or if overflowY is specified as scroll #14263, #14344
           // we don't touch overflow
           // firefox is not so bad in the end
@@ -318,21 +353,24 @@ export default createComponent({
 
           // reset height of textarea to a small size to detect the real height
           // but keep the total control size the same
-          changeOverflow === true && (inp.style.overflowY = 'hidden')
-          parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
+          if (changeOverflow === true) inp.style.overflowY = 'hidden'
+          parentStyle.marginBottom = inp.scrollHeight - 1 + 'px'
           inp.style.height = '1px'
 
           inp.style.height = inp.scrollHeight + 'px'
           // we should allow scrollbars only
           // if there is maxHeight and content is taller than maxHeight
-          changeOverflow === true && (inp.style.overflowY = parseInt(maxHeight, 10) < inp.scrollHeight ? 'auto' : 'hidden')
+          if (changeOverflow === true) {
+            inp.style.overflowY =
+              parseInt(maxHeight, 10) < inp.scrollHeight ? 'auto' : 'hidden'
+          }
           parentStyle.marginBottom = ''
           inp.scrollTop = scrollTop
         }
       })
     }
 
-    function onChange (e) {
+    function onChange(e) {
       onComposition(e)
 
       if (emitTimer !== null) {
@@ -345,8 +383,8 @@ export default createComponent({
       emit('change', e.target.value)
     }
 
-    function onFinishEditing (e) {
-      e !== void 0 && stop(e)
+    function onFinishEditing(e) {
+      if (e !== void 0) stop(e)
 
       if (emitTimer !== null) {
         clearTimeout(emitTimer)
@@ -361,17 +399,22 @@ export default createComponent({
 
       // we need to use setTimeout instead of this.$nextTick
       // to avoid a bug where focusout is not emitted for type date/time/week/...
-      props.type !== 'file' && setTimeout(() => {
-        if (inputRef.value !== null) {
-          inputRef.value.value = innerValue.value !== void 0 ? innerValue.value : ''
-        }
-      })
+      if (props.type !== 'file') {
+        setTimeout(() => {
+          if (inputRef.value !== null) {
+            inputRef.value.value =
+              innerValue.value !== void 0 ? innerValue.value : ''
+          }
+        })
+      }
     }
 
-    function getCurValue () {
+    function getCurValue() {
       return temp.hasOwnProperty('value') === true
         ? temp.value
-        : (innerValue.value !== void 0 ? innerValue.value : '')
+        : innerValue.value !== void 0
+          ? innerValue.value
+          : ''
     }
 
     onBeforeUnmount(() => {
@@ -380,21 +423,23 @@ export default createComponent({
 
     onMounted(() => {
       // textarea only
-      props.autogrow === true && adjustHeight()
+      if (props.autogrow === true) adjustHeight()
     })
 
     Object.assign(state, {
       innerValue,
 
-      fieldClass: computed(() =>
-        `q-${ isTextarea.value === true ? 'textarea' : 'input' }`
-        + (props.autogrow === true ? ' q-textarea--autogrow' : '')
+      fieldClass: computed(
+        () =>
+          `q-${isTextarea.value === true ? 'textarea' : 'input'}` +
+          (props.autogrow === true ? ' q-textarea--autogrow' : '')
       ),
 
-      hasShadow: computed(() =>
-        props.type !== 'file'
-        && typeof props.shadowText === 'string'
-        && props.shadowText.length !== 0
+      hasShadow: computed(
+        () =>
+          props.type !== 'file' &&
+          typeof props.shadowText === 'string' &&
+          props.shadowText.length !== 0
       ),
 
       inputRef,
@@ -403,41 +448,38 @@ export default createComponent({
 
       hasValue,
 
-      floatingLabel: computed(() =>
-        (
-          hasValue.value === true
-          && (props.type !== 'number' || isNaN(innerValue.value) === false)
-        )
-        || fieldValueIsFilled(props.displayValue)
+      floatingLabel: computed(
+        () =>
+          (hasValue.value === true &&
+            (props.type !== 'number' || isNaN(innerValue.value) === false)) ||
+          fieldValueIsFilled(props.displayValue)
       ),
 
-      getControl: () => {
-        return h(isTextarea.value === true ? 'textarea' : 'input', {
+      getControl: () =>
+        h(isTextarea.value === true ? 'textarea' : 'input', {
           ref: inputRef,
-          class: [
-            'q-field__native q-placeholder',
-            props.inputClass
-          ],
+          class: ['q-field__native q-placeholder', props.inputClass],
           style: props.inputStyle,
           ...inputAttrs.value,
           ...onEvents.value,
-          ...(
-            props.type !== 'file'
-              ? { value: getCurValue() }
-              : formDomProps.value
-          )
-        })
-      },
-
-      getShadowControl: () => {
-        return h('div', {
-          class: 'q-field__native q-field__shadow absolute-bottom no-pointer-events'
-            + (isTextarea.value === true ? '' : ' text-no-wrap')
-        }, [
-          h('span', { class: 'invisible' }, getCurValue()),
-          h('span', props.shadowText)
-        ])
-      }
+          ...(props.type !== 'file'
+            ? { value: getCurValue() }
+            : formDomProps.value)
+        }),
+
+      getShadowControl: () =>
+        h(
+          'div',
+          {
+            class:
+              'q-field__native q-field__shadow absolute-bottom no-pointer-events' +
+              (isTextarea.value === true ? '' : ' text-no-wrap')
+          },
+          [
+            h('span', { class: 'invisible' }, getCurValue()),
+            h('span', props.shadowText)
+          ]
+        )
     })
 
     const renderFn = useField(state)

package/src/components/input/QInput.json

@@ -1,5 +1,9 @@
 {
-  "mixins": [ "composables/private.use-field/use-field", "components/input/use-mask", "composables/use-form/private.use-form" ],
+  "mixins": [
+    "composables/private.use-field/use-field",
+    "components/input/use-mask",
+    "composables/use-form/private.use-form"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/input"
@@ -8,15 +12,15 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "String", "Number", "FileList", "null", "undefined" ],
+      "type": ["String", "Number", "FileList", "null", "undefined"],
       "desc": "Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [ "# v-model=\"myText\"" ]
+      "examples": ["# v-model=\"myText\""]
     },
 
     "shadow-text": {
       "type": "String",
       "desc": "Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file",
-      "examples": [ "'rest of the fill value'" ],
+      "examples": ["'rest of the fill value'"],
       "category": "content"
     },
 
@@ -25,21 +29,30 @@
       "desc": "Input type",
       "default": "'text'",
       "values": [
-        "'text'", "'password'", "'textarea'", "'email'", "'search'",
-        "'tel'", "'file'", "'number'", "'url'", "'time'", "'date'",
+        "'text'",
+        "'password'",
+        "'textarea'",
+        "'email'",
+        "'search'",
+        "'tel'",
+        "'file'",
+        "'number'",
+        "'url'",
+        "'time'",
+        "'date'",
         "'datetime-local'"
       ],
       "category": "general"
     },
 
     "debounce": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Debounce amount (in milliseconds) when updating model",
       "category": "model"
     },
 
     "maxlength": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Specify a max length of model",
       "category": "model"
     },
@@ -51,18 +64,15 @@
     },
 
     "input-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying input tag",
-      "examples": [
-        "'my-special-class'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'my-special-class'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "input-style": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying input tag",
       "examples": [
@@ -81,7 +91,7 @@
     "update:model-value": {
       "params": {
         "value": {
-          "type": [ "String", "Number", "null" ]
+          "type": ["String", "Number", "null"]
         }
       }
     },

package/src/components/input/index.js

@@ -1,5 +1,3 @@
 import QInput from './QInput.js'
 
-export {
-  QInput
-}
+export { QInput }