feat(ts/use-validation): Greatly improve the 'rules' prop type (fix: #…

…11043) (#11597) * feat(ts&api): Allow tsType for Array type * feat(ts/use-validation): Greatly improve the 'rules' prop type
quasarframework · Dec 8, 2021 · 9579815 · 9579815
1 parent 107190e
commit 9579815
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 2 deletions.
diff --git a/ui/build/build.api.js b/ui/build/build.api.js
@@ -74,7 +74,7 @@ const objectTypes = {
   },
 
   Array: {
-    props: [ 'tsInjectionPoint', 'desc', 'required', 'reactive', 'sync', 'link', 'values', 'default', 'definition', 'examples', 'category', 'addedIn', 'internal' ],
+    props: [ 'tsInjectionPoint', 'tsType', 'desc', 'required', 'reactive', 'sync', 'link', 'values', 'default', 'definition', 'examples', 'category', 'addedIn', 'internal' ],
     required: [ 'desc', 'examples' ],
     isBoolean: [ 'tsInjectionPoint', 'required', 'reactive', 'sync', 'internal' ],
     isObject: [ 'definition' ],

diff --git a/ui/build/build.types.js b/ui/build/build.types.js
@@ -48,7 +48,7 @@ const dontNarrowValues = [
 
 function convertTypeVal (type, def) {
   if (def.tsType !== void 0) {
-    return def.tsType
+    return `${ def.tsType }${ def.type === 'Array' ? '[]' : '' }`
   }
 
   if (def.values && type === 'String') {

diff --git a/ui/src/composables/private/use-validate.json b/ui/src/composables/private/use-validate.json
@@ -28,6 +28,7 @@
 
     "rules": {
       "type": "Array",
+      "tsType": "ValidationRule",
       "desc": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules",
       "examples": [
         ":rules=\"[ val => val.length <= 3 || 'Please use maximum 3 characters' ]\"",

diff --git a/ui/src/utils/patterns.js b/ui/src/utils/patterns.js
@@ -7,6 +7,7 @@ const
   rgb = /^rgb\(((0|[1-9][\d]?|1[\d]{0,2}|2[\d]?|2[0-4][\d]|25[0-5]),){2}(0|[1-9][\d]?|1[\d]{0,2}|2[\d]?|2[0-4][\d]|25[0-5])\)$/,
   rgba = /^rgba\(((0|[1-9][\d]?|1[\d]{0,2}|2[\d]?|2[0-4][\d]|25[0-5]),){2}(0|[1-9][\d]?|1[\d]{0,2}|2[\d]?|2[0-4][\d]|25[0-5]),(0|0\.[0-9]+[1-9]|0\.[1-9]+|1)\)$/
 
+// Keep in sync with ui/types/api/validation.d.ts
 export const testPattern = {
   date: v => /^-?[\d]+\/[0-1]\d\/[0-3]\d$/.test(v),
   time: v => /^([0-1]?\d|2[0-3]):[0-5]\d$/.test(v),

diff --git a/ui/types/api.d.ts b/ui/types/api.d.ts
@@ -1,2 +1,3 @@
 export * from "./api/cookies";
 export * from "./api/web-storage";
+export * from "./api/validation";
diff --git a/ui/types/api/validation.d.ts b/ui/types/api/validation.d.ts
@@ -0,0 +1,4 @@
+// Keep in sync with ui/src/utils/patterns.js
+export type EmbeddedValidationRule = "date" | "time" | "fulltime" | "timeOrFulltime" | "hexColor" | "hexaColor" | "hexOrHexaColor" | "rgbColor" | "rgbaColor" | "rgbOrRgbaColor" | "hexOrRgbColor" | "hexaOrRgbaColor" | "anyColor";
+
+export type ValidationRule<T = any> = EmbeddedValidationRule | ((value: T) => boolean | string);