quasar 2.4.11 → 2.5.1

package/src/components/btn/__tests__/QBtn.spec.js

@@ -0,0 +1,55 @@
+describe('Btn API', () => {
+  describe('Props', () => {
+    describe('Category: behavior', () => {
+      describe('(prop): percentage', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dark-percentage', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): round', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(slot): loading', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): click', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): click', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

package/src/components/btn/__tests__/use-btn.spec.js

@@ -0,0 +1,189 @@
+describe('use-btn API', () => {
+  describe('Props', () => {
+    describe('Category: behavior|state', () => {
+      describe('(prop): loading', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: content', () => {
+      describe('(prop): label', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): icon', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): icon-right', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): no-caps', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): no-wrap', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): align', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): stack', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): stretch', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: general', () => {
+      describe('(prop): type', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): tabindex', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: navigation', () => {
+      describe('(prop): to', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): replace', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): href', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): target', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: state', () => {
+      describe('(prop): disable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): outline', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): flat', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): unelevated', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): rounded', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): push', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): glossy', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): fab', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): fab-mini', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): padding', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): text-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dense', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): ripple', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+})

package/src/components/btn-dropdown/QBtnDropdown.json

@@ -43,7 +43,8 @@
     },
 
     "content-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the menu",
       "examples": [
         "background-color: #ff0000",
@@ -53,7 +54,8 @@
     },
 
     "content-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the menu",
       "examples": [
         "my-special-class",

package/src/components/checkbox/QCheckbox.js

@@ -1,9 +1,12 @@
-import { h } from 'vue'
+import { h, computed } from 'vue'
+
+import QIcon from '../icon/QIcon.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from './use-checkbox.js'
 
 const bgNode = h('div', {
+  key: 'svg',
   class: 'q-checkbox__bg absolute'
 }, [
   h('svg', {
@@ -30,7 +33,35 @@ export default createComponent({
   props: useCheckboxProps,
   emits: useCheckboxEmits,
 
-  setup () {
-    return useCheckbox('checkbox', () => () => [ bgNode ])
+  setup (props) {
+    function getInner (isTrue, isIndeterminate) {
+      const icon = computed(() =>
+        (isTrue.value === true
+          ? props.checkedIcon
+          : (isIndeterminate.value === true
+              ? props.indeterminateIcon
+              : props.uncheckedIcon
+            )
+        ) || null
+      )
+
+      return () => (
+        icon.value !== null
+          ? [
+              h('div', {
+                key: 'icon',
+                class: 'q-checkbox__icon-container absolute flex flex-center no-wrap'
+              }, [
+                h(QIcon, {
+                  class: 'q-checkbox__icon',
+                  name: icon.value
+                })
+              ])
+            ]
+          : [ bgNode ]
+      )
+    }
+
+    return useCheckbox('checkbox', getInner)
   }
 })

package/src/components/checkbox/QCheckbox.json

@@ -3,5 +3,22 @@
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/checkbox"
+  },
+
+  "props": {
+    "checked-icon": {
+      "desc": "The icon to be used when the model is truthy (instead of the default design)",
+      "addedIn": "v2.5"
+    },
+
+    "unchecked-icon": {
+      "desc": "The icon to be used when the toggle is falsy (instead of the default design)",
+      "addedIn": "v2.5"
+    },
+
+    "indeterminate-icon": {
+      "desc": "The icon to be used when the model is indeterminate (instead of the default design)",
+      "addedIn": "v2.5"
+    }
   }
 }

package/src/components/checkbox/QCheckbox.sass

@@ -3,19 +3,27 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 .q-checkbox
   vertical-align: middle
 
-  &__bg
+  &__native
+    width: 1px
+    height: 1px
+
+  &__bg,
+  &__icon-container
     top: 25%
     left: 25%
     width: 50%
     height: 50%
+    user-select: none
+
+  &__bg
     border: 2px solid currentColor
     border-radius: 2px
     transition: background $checkbox-transition
     -webkit-print-color-adjust: exact
 
-  &__native
-    width: 1px
-    height: 1px
+  &__icon
+    color: currentColor
+    font-size: .6em
 
   &__svg
     color: #fff
@@ -68,12 +76,16 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &--dense
 
+    .q-checkbox__icon
+      font-size: .6em
+
     .q-checkbox__inner
       width: .5em
       min-width: .5em
       height: .5em
 
-    .q-checkbox__bg
+    .q-checkbox__bg,
+    .q-checkbox__icon-container
       left: 5%
       top: 5%
       width: 90%

package/src/components/checkbox/use-checkbox.js

@@ -24,6 +24,10 @@ export const useCheckboxProps = {
   falseValue: { default: false },
   indeterminateValue: { default: null },
 
+  checkedIcon: String,
+  uncheckedIcon: String,
+  indeterminateIcon: String,
+
   toggleOrder: {
     type: String,
     validator: v => v === 'tf' || v === 'ft'

package/src/components/checkbox/use-checkbox.json

@@ -66,6 +66,24 @@
       "category": "label"
     },
 
+    "checked-icon": {
+      "type": "String",
+      "examples": [ "visibility" ],
+      "category": "icons"
+    },
+
+    "unchecked-icon": {
+      "type": "String",
+      "examples": [ "visibility_off" ],
+      "category": "icons"
+    },
+
+    "indeterminate-icon": {
+      "type": "String",
+      "examples": [ "help" ],
+      "category": "icons"
+    },
+
     "color": {
       "extends": "color"
     },

package/src/components/chip/__tests__/QChip.spec.js

@@ -0,0 +1,155 @@
+describe('Chip API', () => {
+  describe('Props', () => {
+    describe('Category: content', () => {
+      describe('(prop): icon', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): icon-right', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): icon-remove', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): icon-selected', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): label', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: general', () => {
+      describe('(prop): tabindex', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: model', () => {
+      describe('(prop): model-value', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): selected', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: state', () => {
+      describe('(prop): clickable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): removable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): disable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): dense', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): size', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dark', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): text-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): square', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): outline', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): ripple', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): click', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(event): update:selected', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(event): remove', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})