fix(QField/QFile/QInput/QSelect): declare "maxlength" prop only for c…

…omponents using it; popupShow & popupHide should be declared only for QSelect; correctly override virtualScrollItemSize for QSelect; correctly override modelValue for QInput
quasarframework · May 3, 2024 · e3e45df · e3e45df
1 parent 30bb503
commit e3e45df
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 69 deletions.
diff --git a/ui/src/components/field/QField.json b/ui/src/components/field/QField.json
@@ -12,12 +12,6 @@
       "category": "model"
     },
 
-    "max-values": {
-      "type": [ "Number", "String" ],
-      "desc": "Used internally by QSelect",
-      "internal": true
-    },
-
     "tag": {
       "extends": "tag",
       "default": "'label'",
@@ -79,40 +73,7 @@
 
   "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": {
-          "extends": "evt"
-        }
-      }
-    },
-
-    "blur": {
-      "desc": "Emitted when component loses focus",
-      "params": {
-        "evt": {
-          "extends": "evt"
-        }
-      }
-    }
-  },
-
-  "methods": {
-    "focus": {
-      "desc": "Focus field",
-      "params": null,
-      "returns": null
-    },
-
-    "blur": {
-      "desc": "Blur field (lose focus)",
-      "params": null,
-      "returns": null
     }
   }
 }
diff --git a/ui/src/components/file/QFile.js b/ui/src/components/file/QFile.js
@@ -2,7 +2,7 @@ import { h, ref, computed, getCurrentInstance } from 'vue'
 
 import QChip from '../chip/QChip.js'
 
-import useField, { useFieldState, useFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private.use-field/use-field.js'
+import useField, { useFieldState, useNonInputFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private.use-field/use-field.js'
 import { useFormProps, useFormInputNameAttr } from '../../composables/use-form/private.use-form.js'
 import useFile, { useFileProps, useFileEmits } from '../../composables/private.use-file/use-file.js'
 import useFileFormDomProps from '../../composables/private.use-file/use-file-dom-props.js'
@@ -18,7 +18,7 @@ export default createComponent({
   inheritAttrs: false,
 
   props: {
-    ...useFieldProps,
+    ...useNonInputFieldProps,
     ...useFormProps,
     ...useFileProps,
 

diff --git a/ui/src/components/file/QFile.json b/ui/src/components/file/QFile.json
@@ -68,7 +68,8 @@
     },
 
     "tabindex": {
-      "extends": "tabindex"
+      "extends": "tabindex",
+      "default": "0"
     },
 
     "input-class": {
@@ -137,12 +138,6 @@
     }
   },
 
-  "events": {
-    "update:model-value": {
-      "extends": "update:model-value"
-    }
-  },
-
   "methods": {
     "removeAtIndex": {
       "desc": "Remove file located at specific index in the model",

diff --git a/ui/src/components/input/QInput.js b/ui/src/components/input/QInput.js
@@ -21,7 +21,8 @@ export default createComponent({
     ...useMaskProps,
     ...useFormProps,
 
-    modelValue: { required: false },
+    // override of useFieldProps > modelValue
+    modelValue: [ String, Number ],
 
     shadowText: String,
 

diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
@@ -37,6 +37,7 @@ export default createComponent({
     ...useFormProps,
     ...useFieldProps,
 
+    // override of useFieldProps > modelValue
     modelValue: {
       required: true
     },
@@ -107,20 +108,18 @@ export default createComponent({
 
     autocomplete: String,
 
-    transitionShow: String,
-    transitionHide: String,
-    transitionDuration: [ String, Number ],
+    transitionShow: {},
+    transitionHide: {},
+    transitionDuration: {},
 
     behavior: {
       type: String,
       validator: v => [ 'default', 'menu', 'dialog' ].includes(v),
       default: 'default'
     },
 
-    virtualScrollItemSize: {
-      type: [ Number, String ],
-      default: void 0
-    },
+    // override of useVirtualScrollProps > virtualScrollItemSize (no default)
+    virtualScrollItemSize: useVirtualScrollProps.virtualScrollItemSize.type,
 
     onNewValue: Function,
     onFilter: Function
@@ -130,6 +129,7 @@ export default createComponent({
     ...useFieldEmits,
     'add', 'remove', 'inputValue',
     'keyup', 'keypress', 'keydown',
+    'popupShow', 'popupHide',
     'filterAbort'
   ],
 

diff --git a/ui/src/components/select/QSelect.json b/ui/src/components/select/QSelect.json
@@ -325,20 +325,23 @@
       "extends": "transition",
       "desc": "Transition when showing the menu/dialog; One of Quasar's embedded transitions",
       "default": "'fade'",
+      "passthrough": "child",
       "category": "behavior"
     },
 
     "transition-hide": {
       "extends": "transition",
       "desc": "Transition when hiding the menu/dialog; One of Quasar's embedded transitions",
       "default": "'fade'",
+      "passthrough": "child",
       "category": "behavior"
     },
 
     "transition-duration": {
       "type": [ "String", "Number" ],
       "desc": "Transition duration when hiding the menu/dialog (in milliseconds, without unit)",
       "default": "300",
+      "passthrough": "child",
       "category": "behavior"
     },
 
@@ -482,10 +485,6 @@
   },
 
   "events": {
-    "update:model-value": {
-      "extends": "update:model-value"
-    },
-
     "input-value": {
       "desc": "Emitted when the value in the text input changes",
       "params": {
@@ -653,12 +652,6 @@
   },
 
   "methods": {
-    "focus": {
-      "desc": "Focus component",
-      "params": null,
-      "returns": null
-    },
-
     "showPopup": {
       "desc": "Focus and open popup",
       "params": null,

diff --git a/ui/src/composables/private.use-field/use-field.js b/ui/src/composables/private.use-field/use-field.js
@@ -18,7 +18,7 @@ export function fieldValueIsFilled (val) {
     && ('' + val).length !== 0
 }
 
-export const useFieldProps = {
+export const useNonInputFieldProps = {
   ...useDarkProps,
   ...useValidateProps,
 
@@ -61,12 +61,15 @@ export const useFieldProps = {
 
   autofocus: Boolean,
 
-  for: String,
+  for: String
+}
 
+export const useFieldProps = {
+  ...useNonInputFieldProps,
   maxlength: [ Number, String ]
 }
 
-export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popupShow', 'popupHide' ]
+export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur' ]
 
 export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
   const { props, proxy } = getCurrentInstance()

diff --git a/ui/src/composables/private.use-field/use-field.json b/ui/src/composables/private.use-field/use-field.json
@@ -212,6 +212,28 @@
   },
 
   "events": {
+    "update:model-value": {
+      "extends": "update:model-value"
+    },
+
+    "focus": {
+      "desc": "Emitted when component gets focused",
+      "params": {
+        "evt": {
+          "extends": "evt"
+        }
+      }
+    },
+
+    "blur": {
+      "desc": "Emitted when component loses focus",
+      "params": {
+        "evt": {
+          "extends": "evt"
+        }
+      }
+    },
+
     "clear": {
       "desc": "When using the 'clearable' property, this event is emitted when the clear icon is clicked",
       "params": {