quasar 2.18.7 → 2.19.0

package/src/components/option-group/QOptionGroup.js

@@ -6,7 +6,9 @@ import QToggle from '../toggle/QToggle.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
 import { isObject } from '../../utils/is/is.js'
 
 const components = {
@@ -17,14 +19,12 @@ const components = {
 
 const typeValues = Object.keys(components)
 
-function getPropValueFn (userPropName, defaultPropName) {
+function getPropValueFn(userPropName, defaultPropName) {
   if (typeof userPropName === 'function') return userPropName
 
-  const propName = userPropName !== void 0
-    ? userPropName
-    : defaultPropName
+  const propName = userPropName !== void 0 ? userPropName : defaultPropName
 
-  return opt => opt[ propName ]
+  return opt => opt[propName]
 }
 
 export default createComponent({
@@ -42,9 +42,9 @@ export default createComponent({
       default: () => []
     },
 
-    optionValue: [ Function, String ],
-    optionLabel: [ Function, String ],
-    optionDisable: [ Function, String ],
+    optionValue: [Function, String],
+    optionLabel: [Function, String],
+    optionDisable: [Function, String],
 
     name: String,
 
@@ -65,10 +65,12 @@ export default createComponent({
     disable: Boolean
   },
 
-  emits: [ 'update:modelValue' ],
+  emits: ['update:modelValue'],
 
-  setup (props, { emit, slots }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { emit, slots }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const arrayModel = Array.isArray(props.modelValue)
 
@@ -76,78 +78,94 @@ export default createComponent({
       if (arrayModel === true) {
         console.error('q-option-group: model should not be array')
       }
-    }
-    else if (arrayModel === false) {
+    } else if (arrayModel === false) {
       console.error('q-option-group: model should be array in your case')
     }
 
     const isDark = useDark(props, $q)
-    const component = computed(() => components[ props.type ])
-
-    const getOptionValue = computed(() => getPropValueFn(props.optionValue, 'value'))
-    const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, 'label'))
-    const getOptionDisable = computed(() => getPropValueFn(props.optionDisable, 'disable'))
-
-    const innerOptions = computed(() => props.options.map(opt => ({
-      val: getOptionValue.value(opt),
-      name: opt.name === void 0 ? props.name : opt.name,
-      disable: props.disable || getOptionDisable.value(opt),
-      leftLabel: opt.leftLabel === void 0 ? props.leftLabel : opt.leftLabel,
-      color: opt.color === void 0 ? props.color : opt.color,
-      checkedIcon: opt.checkedIcon,
-      uncheckedIcon: opt.uncheckedIcon,
-      dark: opt.dark === void 0 ? isDark.value : opt.dark,
-      size: opt.size === void 0 ? props.size : opt.size,
-      dense: props.dense,
-      keepColor: opt.keepColor === void 0 ? props.keepColor : opt.keepColor
-    })))
-
-    const classes = computed(() =>
-      'q-option-group q-gutter-x-sm'
-      + (props.inline === true ? ' q-option-group--inline' : '')
+    const component = computed(() => components[props.type])
+
+    const getOptionValue = computed(() =>
+      getPropValueFn(props.optionValue, 'value')
+    )
+    const getOptionLabel = computed(() =>
+      getPropValueFn(props.optionLabel, 'label')
+    )
+    const getOptionDisable = computed(() =>
+      getPropValueFn(props.optionDisable, 'disable')
+    )
+
+    const innerOptions = computed(() =>
+      props.options.map(opt => ({
+        val: getOptionValue.value(opt),
+        name: opt.name === void 0 ? props.name : opt.name,
+        disable: props.disable || getOptionDisable.value(opt),
+        leftLabel: opt.leftLabel === void 0 ? props.leftLabel : opt.leftLabel,
+        color: opt.color === void 0 ? props.color : opt.color,
+        checkedIcon: opt.checkedIcon,
+        uncheckedIcon: opt.uncheckedIcon,
+        dark: opt.dark === void 0 ? isDark.value : opt.dark,
+        size: opt.size === void 0 ? props.size : opt.size,
+        dense: props.dense,
+        keepColor: opt.keepColor === void 0 ? props.keepColor : opt.keepColor
+      }))
+    )
+
+    const classes = computed(
+      () =>
+        'q-option-group q-gutter-x-sm' +
+        (props.inline === true ? ' q-option-group--inline' : '')
     )
 
     const attrs = computed(() => {
-      const attrs = { role: 'group' }
+      const acc = { role: 'group' }
 
       if (props.type === 'radio') {
-        attrs.role = 'radiogroup'
+        acc.role = 'radiogroup'
 
         if (props.disable === true) {
-          attrs[ 'aria-disabled' ] = 'true'
+          acc['aria-disabled'] = 'true'
         }
       }
 
-      return attrs
+      return acc
     })
 
-    function onUpdateModelValue (value) {
+    function onUpdateModelValue(value) {
       emit('update:modelValue', value)
     }
 
-    return () => h('div', {
-      class: classes.value,
-      ...attrs.value
-    }, props.options.map((opt, i) => {
-      // TODO: (Qv3) Make the 'opt' a separate property instead of
-      // the whole scope for consistency and flexibility
-      // (e.g. { opt } instead of opt)
-      const child = slots[ 'label-' + i ] !== void 0
-        ? () => slots[ 'label-' + i ](opt)
-        : (
-            slots.label !== void 0
-              ? () => slots.label(opt)
-              : void 0
-          )
-
-      return h('div', [
-        h(component.value, {
-          label: child === void 0 ? getOptionLabel.value(opt) : null,
-          modelValue: props.modelValue,
-          'onUpdate:modelValue': onUpdateModelValue,
-          ...innerOptions.value[ i ]
-        }, child)
-      ])
-    }))
+    return () =>
+      h(
+        'div',
+        {
+          class: classes.value,
+          ...attrs.value
+        },
+        props.options.map((opt, i) => {
+          // TODO: (Qv3) Make the 'opt' a separate property instead of
+          // the whole scope for consistency and flexibility
+          // (e.g. { opt } instead of opt)
+          const child =
+            slots['label-' + i] !== void 0
+              ? () => slots['label-' + i](opt)
+              : slots.label !== void 0
+                ? () => slots.label(opt)
+                : void 0
+
+          return h('div', [
+            h(
+              component.value,
+              {
+                label: child === void 0 ? getOptionLabel.value(opt) : null,
+                modelValue: props.modelValue,
+                'onUpdate:modelValue': onUpdateModelValue,
+                ...innerOptions.value[i]
+              },
+              child
+            )
+          ])
+        })
+      )
   }
 })

package/src/components/option-group/QOptionGroup.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-size/use-size" ],
+  "mixins": ["composables/private.use-size/use-size"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/option-group"
@@ -9,7 +9,7 @@
     "model-value": {
       "extends": "model-value",
       "type": "Any",
-      "examples": [ "# v-model=\"group\"" ]
+      "examples": ["# v-model=\"group\""]
     },
 
     "options": {
@@ -20,21 +20,27 @@
         "...props": {
           "type": "Any",
           "desc": "Any other props from QToggle, QCheckbox, or QRadio",
-          "examples": [ "# val=\"car\"", "# :true-value=\"trueValue\"", "# checked-icon=\"visibility\"" ]
+          "examples": [
+            "# val=\"car\"",
+            "# :true-value=\"trueValue\"",
+            "# checked-icon=\"visibility\""
+          ]
         }
       },
-      "examples": [ "[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true } ]" ],
+      "examples": [
+        "[{ label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true }]"
+      ],
       "category": "options"
     },
 
     "option-value": {
-      "type": [ "Function", "String" ],
+      "type": ["Function", "String"],
       "desc": "Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "'value'",
       "__runtimeDefault": true,
       "params": {
         "option": {
-          "type": [ "String", "Object" ],
+          "type": ["String", "Object"],
           "desc": "The current option being processed",
           "examples": [
             "'Tesla'",
@@ -46,7 +52,7 @@
       "returns": {
         "type": "Any",
         "desc": "Value of the current option",
-        "examples": [ "'car'", "34" ]
+        "examples": ["'car'", "34"]
       },
       "examples": [
         "'modelNumber'",
@@ -57,13 +63,13 @@
     },
 
     "option-label": {
-      "type": [ "Function", "String" ],
+      "type": ["Function", "String"],
       "desc": "Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "'label'",
       "__runtimeDefault": true,
       "params": {
         "option": {
-          "type": [ "String", "Object" ],
+          "type": ["String", "Object"],
           "desc": "The current option being processed",
           "examples": [
             "'Tesla'",
@@ -75,7 +81,7 @@
       "returns": {
         "type": "String",
         "desc": "Label of the current option",
-        "examples": [ "'Tesla'", "'iPhone'" ]
+        "examples": ["'Tesla'", "'iPhone'"]
       },
       "examples": [
         "'itemName'",
@@ -86,13 +92,13 @@
     },
 
     "option-disable": {
-      "type": [ "Function", "String" ],
+      "type": ["Function", "String"],
       "desc": "Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "'disable'",
       "__runtimeDefault": true,
       "params": {
         "option": {
-          "type": [ "String", "Object" ],
+          "type": ["String", "Object"],
           "desc": "The current option being processed",
           "examples": [
             "'Tesla'",
@@ -116,14 +122,14 @@
     "name": {
       "type": "String",
       "desc": "Used to specify the name of the controls; Useful if dealing with forms submitted directly to a URL",
-      "examples": [ "'car_id'" ],
+      "examples": ["'car_id'"],
       "category": "behavior"
     },
 
     "type": {
       "type": "String",
       "desc": "The type of input component to be used",
-      "values": [ "'radio'", "'checkbox'", "'toggle'" ],
+      "values": ["'radio'", "'checkbox'", "'toggle'"],
       "default": "'radio'",
       "category": "content"
     },
@@ -146,7 +152,7 @@
       "extends": "dense"
     },
 
-    "left-label":  {
+    "left-label": {
       "type": "Boolean",
       "desc": "Label (if any specified) should be displayed on the left side of the input components",
       "category": "content"
@@ -175,13 +181,13 @@
               "type": "String",
               "desc": "Label to display along the component",
               "required": true,
-              "examples": [ "'Option 1'", "'Option 2'", "'Option 3'" ]
+              "examples": ["'Option 1'", "'Option 2'", "'Option 3'"]
             },
             "value": {
               "type": "Any",
               "desc": "Value of the option that will be used by the component model",
               "required": true,
-              "examples": [ "'op1'", "'op2'", "'op3'" ]
+              "examples": ["'op1'", "'op2'", "'op3'"]
             },
             "disable": {
               "type": "Boolean",
@@ -190,7 +196,11 @@
             "...props": {
               "type": "Any",
               "desc": "Any other props from QToggle, QCheckbox, or QRadio",
-              "examples": [ "# val=\"car\"", "# :true-value=\"trueValue\"", "# checked-icon=\"visibility\"" ]
+              "examples": [
+                "# val=\"car\"",
+                "# :true-value=\"trueValue\"",
+                "# checked-icon=\"visibility\""
+              ]
             }
           }
         }
@@ -209,13 +219,13 @@
               "type": "String",
               "desc": "Label to display along the component",
               "required": true,
-              "examples": [ "'Option 1'", "'Option 2'", "'Option 3'" ]
+              "examples": ["'Option 1'", "'Option 2'", "'Option 3'"]
             },
             "value": {
               "type": "Any",
               "desc": "Value of the option that will be used by the component model",
               "required": true,
-              "examples": [ "'op1'", "'op2'", "'op3'" ]
+              "examples": ["'op1'", "'op2'", "'op3'"]
             },
             "disable": {
               "type": "Boolean",
@@ -224,7 +234,11 @@
             "...props": {
               "type": "Any",
               "desc": "Any other props from QToggle, QCheckbox, or QRadio",
-              "examples": [ "# val=\"car\"", "# :true-value=\"trueValue\"", "# checked-icon=\"visibility\"" ]
+              "examples": [
+                "# val=\"car\"",
+                "# :true-value=\"trueValue\"",
+                "# checked-icon=\"visibility\""
+              ]
             }
           }
         }

package/src/components/option-group/index.js

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

package/src/components/page/QPage.js

@@ -2,7 +2,11 @@ import { h, computed, inject, getCurrentInstance } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
-import { pageContainerKey, layoutKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
+import {
+  pageContainerKey,
+  layoutKey,
+  emptyRenderFn
+} from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({
   name: 'QPage',
@@ -12,8 +16,10 @@ export default createComponent({
     styleFn: Function
   },
 
-  setup (props, { slots }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const $layout = inject(layoutKey, emptyRenderFn)
     if ($layout === emptyRenderFn) {
@@ -28,36 +34,43 @@ export default createComponent({
     }
 
     const style = computed(() => {
-      const offset
-        = ($layout.header.space === true ? $layout.header.size : 0)
-        + ($layout.footer.space === true ? $layout.footer.size : 0)
+      const offset =
+        ($layout.header.space === true ? $layout.header.size : 0) +
+        ($layout.footer.space === true ? $layout.footer.size : 0)
 
       if (typeof props.styleFn === 'function') {
-        const height = $layout.isContainer.value === true
-          ? $layout.containerHeight.value
-          : $q.screen.height
+        const height =
+          $layout.isContainer.value === true
+            ? $layout.containerHeight.value
+            : $q.screen.height
 
         return props.styleFn(offset, height)
       }
 
       return {
-        minHeight: $layout.isContainer.value === true
-          ? ($layout.containerHeight.value - offset) + 'px'
-          : (
-              $q.screen.height === 0
-                ? (offset !== 0 ? `calc(100vh - ${ offset }px)` : '100vh')
-                : ($q.screen.height - offset) + 'px'
-            )
+        minHeight:
+          $layout.isContainer.value === true
+            ? $layout.containerHeight.value - offset + 'px'
+            : $q.screen.height === 0
+              ? offset !== 0
+                ? `calc(100vh - ${offset}px)`
+                : '100vh'
+              : $q.screen.height - offset + 'px'
       }
     })
 
-    const classes = computed(() =>
-      `q-page${ props.padding === true ? ' q-layout-padding' : '' }`
+    const classes = computed(
+      () => `q-page${props.padding === true ? ' q-layout-padding' : ''}`
     )
 
-    return () => h('main', {
-      class: classes.value,
-      style: style.value
-    }, hSlot(slots.default))
+    return () =>
+      h(
+        'main',
+        {
+          class: classes.value,
+          style: style.value
+        },
+        hSlot(slots.default)
+      )
   }
 })

package/src/components/page/QPage.json

@@ -27,7 +27,7 @@
         "type": "Object",
         "desc": "Object with CSS properties to apply to Page DOM element"
       },
-      "examples": [ "(offset, height) => ({ minHeight: offset + 'px' })" ],
+      "examples": ["(offset, height) => ({ minHeight: offset + 'px' })"],
       "category": "style"
     }
   },

package/src/components/page/QPageContainer.js

@@ -2,13 +2,19 @@ import { h, computed, provide, inject, getCurrentInstance } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
-import { pageContainerKey, layoutKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
+import {
+  pageContainerKey,
+  layoutKey,
+  emptyRenderFn
+} from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({
   name: 'QPageContainer',
 
-  setup (_, { slots }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(_, { slots }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const $layout = inject(layoutKey, emptyRenderFn)
     if ($layout === emptyRenderFn) {
@@ -22,24 +28,31 @@ export default createComponent({
       const css = {}
 
       if ($layout.header.space === true) {
-        css.paddingTop = `${ $layout.header.size }px`
+        css.paddingTop = `${$layout.header.size}px`
       }
       if ($layout.right.space === true) {
-        css[ `padding${ $q.lang.rtl === true ? 'Left' : 'Right' }` ] = `${ $layout.right.size }px`
+        css[`padding${$q.lang.rtl === true ? 'Left' : 'Right'}`] =
+          `${$layout.right.size}px`
       }
       if ($layout.footer.space === true) {
-        css.paddingBottom = `${ $layout.footer.size }px`
+        css.paddingBottom = `${$layout.footer.size}px`
       }
       if ($layout.left.space === true) {
-        css[ `padding${ $q.lang.rtl === true ? 'Right' : 'Left' }` ] = `${ $layout.left.size }px`
+        css[`padding${$q.lang.rtl === true ? 'Right' : 'Left'}`] =
+          `${$layout.left.size}px`
       }
 
       return css
     })
 
-    return () => h('div', {
-      class: 'q-page-container',
-      style: style.value
-    }, hSlot(slots.default))
+    return () =>
+      h(
+        'div',
+        {
+          class: 'q-page-container',
+          style: style.value
+        },
+        hSlot(slots.default)
+      )
   }
 })

package/src/components/page/index.js

@@ -1,7 +1,4 @@
 import QPage from './QPage.js'
 import QPageContainer from './QPageContainer.js'
 
-export {
-  QPage,
-  QPageContainer
-}
+export { QPage, QPageContainer }