feat(ui): Add support for global config for components & directives too quasarframework#6524

Author: rstoenescu

ui/build/build.api.js

@@ -37,8 +37,8 @@ function getMixedInAPI (api, mainFile) {
 
 const topSections = {
   plugin: [ 'meta', 'injection', 'quasarConfOptions', 'props', 'methods' ],
-  component: [ 'meta', 'behavior', 'props', 'slots', 'scopedSlots', 'events', 'methods' ],
-  directive: [ 'meta', 'value', 'arg', 'modifiers' ]
+  component: [ 'meta', 'behavior', 'quasarConfOptions', 'props', 'slots', 'scopedSlots', 'events', 'methods' ],
+  directive: [ 'meta', 'quasarConfOptions', 'value', 'arg', 'modifiers' ]
 }
 
 const objectTypes = {
@@ -167,7 +167,6 @@ const objectTypes = {
     isObject: [ 'params', 'returns' ]
   },
 
-  // plugin only
   quasarConfOptions: {
     props: [ 'propName', 'definition', 'link', 'addedIn' ],
     required: [ 'propName', 'definition' ]

ui/dev/quasar.conf.js

@@ -24,6 +24,7 @@ module.exports = function (ctx) {
 
     framework: {
       // iconSet: 'svg-mdi-v4',
+      // config: { ripple: { early: true } },
       all: true
     },
 

ui/dev/src/pages/css/material-ripples-2.vue

@@ -2,13 +2,15 @@
   <div class="q-layout-padding">
     <div class="q-gutter-sm">
       <q-btn label="Regular" @click="onClick" />
+      <q-btn label="Regular early=false" :ripple="{ early: false }" @click="onClick" />
       <q-btn label="Regular" loading @click="onClick" />
       <q-btn label="Link" type="a" href="about:blank" target="_blank" @click="onClick" />
     </div>
 
     <div class="q-gutter-sm q-pt-md">
-      <q-btn label="Regular early" :ripple="{ early: true }" @click="onClick" />
-      <q-btn label="Regular early" loading :ripple="{ early: true }" @click="onClick" />
+      <q-btn label="Regular early=true" :ripple="{ early: true }" @click="onClick" />
+      <q-btn label="Regular early=false" :ripple="{ early: false }" @click="onClick" />
+      <q-btn label="Regular early=true" loading :ripple="{ early: true }" @click="onClick" />
       <q-btn label="Link early" :ripple="{ early: true }" type="a" href="about:blank" target="_blank" @click="onClick" />
     </div>
   </div>

ui/src/directives/Ripple.js

@@ -4,6 +4,7 @@ import { addEvt, cleanEvt } from '../utils/touch.js'
 import { isKeyCode } from '../utils/key-composition.js'
 import { client } from '../plugins/Platform.js'
 import throttle from '../utils/throttle.js'
+import { $q } from '../install.js'
 
 function showRipple (evt, el, ctx, forceCenter) {
   ctx.modifiers.stop === true && stop(evt)
@@ -64,21 +65,14 @@ function updateCtx (ctx, { value, modifiers, arg }) {
   ctx.enabled = value !== false
 
   if (ctx.enabled === true) {
-    ctx.modifiers = Object(value) === value
-      ? {
-        early: value.early === true || modifiers.early === true,
-        stop: value.stop === true || modifiers.stop === true,
-        center: value.center === true || modifiers.center === true,
-        color: value.color || arg,
-        keyCodes: [].concat(value.keyCodes || 13)
-      }
-      : {
-        early: modifiers.early,
-        stop: modifiers.stop,
-        center: modifiers.center,
-        color: arg,
-        keyCodes: [ 13 ]
-      }
+    const cfg = Object.assign({}, $q.config.ripple, modifiers, value)
+    ctx.modifiers = {
+      early: cfg.early === true,
+      stop: cfg.stop === true,
+      center: cfg.center === true,
+      color: cfg.color || arg,
+      keyCodes: [].concat(cfg.keyCodes || 13)
+    }
   }
 }
 

ui/src/directives/Ripple.json

@@ -3,10 +3,49 @@
     "docsUrl": "https://v1.quasar.dev/vue-directives/material-ripple"
   },
 
+  "quasarConfOptions": {
+    "propName": "ripple",
+    "definition": {
+      "early": {
+        "type": "Boolean",
+        "desc": "Trigger early/immediately on user interaction"
+      },
+
+      "stop": {
+        "type": "Boolean",
+        "desc": "Stop click/touch event propagation"
+      },
+
+      "center": {
+        "type": "Boolean",
+        "desc": "Ripple starts from the absolute center"
+      },
+
+      "color": {
+        "type": "String",
+        "desc": "Color name from Quasar Color Palette; Overrides default dynamic color",
+        "examples": [ "orange-5" ]
+      },
+
+      "keyCodes": {
+        "type": [ "Array", "Number" ],
+        "desc": "List of keyCode that should trigger the ripple",
+        "examples": [ "[]", "[13, 32]" ]
+      }
+    },
+    "addedIn": "v1.9.8"
+  },
+
   "value": {
     "type": [ "Boolean", "Object" ],
     "desc": "Boolean (if just wanting to enable/disable) or Object for configuring more options",
     "definition": {
+      "early": {
+        "type": "Boolean",
+        "desc": "Trigger early/immediately on user interaction",
+        "addedIn": "v1.9.8"
+      },
+
       "stop": {
         "type": "Boolean",
         "desc": "Stop click/touch event propagation"
@@ -44,6 +83,13 @@
   },
 
   "modifiers": {
+    "early": {
+      "type": "Boolean",
+      "desc": "Trigger early/immediately on user interaction",
+      "reactive": true,
+      "addedIn": "v1.9.8"
+    },
+
     "stop": {
       "type": "Boolean",
       "desc": "Stop click/touch event propagation",

ui/src/install.js

@@ -17,14 +17,15 @@ export const queues = {
 }
 
 export const $q = {
-  version
+  version,
+  config: {}
 }
 
 export default function (Vue, opts = {}) {
   if (this.__qInstalled === true) { return }
   this.__qInstalled = true
 
-  const cfg = opts.config || {}
+  const cfg = $q.config = Object.freeze(opts.config || {})
 
   // required plugins
   Platform.install($q, queues)