quasar 2.18.6 → 2.19.0

package/src/components/splitter/QSplitter.json

@@ -8,7 +8,7 @@
       "extends": "model-value",
       "type": "Number",
       "desc": "Model of the component defining the size of first panel (or second if using reverse) in the unit specified (for '%' it's the split ratio percent - 0.0 < x < 100.0; for 'px' it's the size in px); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [ "# v-model=\"ratio\"" ]
+      "examples": ["# v-model=\"ratio\""]
     },
 
     "reverse": {
@@ -21,7 +21,7 @@
       "type": "String",
       "desc": "CSS unit for the model",
       "default": "'%'",
-      "values": [ "'%'", "'px'" ],
+      "values": ["'%'", "'px'"],
       "category": "model"
     },
 
@@ -42,7 +42,7 @@
       "desc": "An array of two values representing the minimum and maximum split size of the two panels; When 'px' unit is set then you can use Infinity as the second value to make it unbound on the other side; Default value: for '%' unit it is [10, 90], while for 'px' unit it is [50, Infinity]",
       "default": "# [10, 90]/[50, Infinity]",
       "__runtimeDefault": true,
-      "examples": [ "[ 30, 70 ]", "[ 0, Infinity ]" ],
+      "examples": ["[30, 70]", "[0, Infinity]"],
       "category": "content|model"
     },
 
@@ -51,40 +51,31 @@
     },
 
     "before-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the 'before' panel",
-      "examples": [
-        "'bg-deep-orange'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'bg-deep-orange'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "after-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the 'after' panel",
-      "examples": [
-        "'bg-deep-orange'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'bg-deep-orange'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "separator-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the splitter separator",
-      "examples": [
-        "'bg-deep-orange'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'bg-deep-orange'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "separator-style": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the splitter separator",
       "examples": [

package/src/components/splitter/index.js

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

package/src/components/stepper/QStep.js

@@ -7,21 +7,32 @@ import { usePanelChildProps } from '../../composables/private.use-panel/use-pane
 import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { stepperKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
+import {
+  stepperKey,
+  emptyRenderFn
+} from '../../utils/private.symbols/symbols.js'
 import { hSlot } from '../../utils/private.render/render.js'
 
-function getStepWrapper (slots) {
-  return h('div', {
-    class: 'q-stepper__step-content'
-  }, [
-    h('div', {
-      class: 'q-stepper__step-inner'
-    }, hSlot(slots.default))
-  ])
+function getStepWrapper(slots) {
+  return h(
+    'div',
+    {
+      class: 'q-stepper__step-content'
+    },
+    [
+      h(
+        'div',
+        {
+          class: 'q-stepper__step-inner'
+        },
+        hSlot(slots.default)
+      )
+    ]
+  )
 }
 
 const PanelWrapper = {
-  setup (_, { slots }) {
+  setup(_, { slots }) {
     return () => getStepWrapper(slots)
   }
 }
@@ -39,7 +50,7 @@ export default createComponent({
       required: true
     },
     caption: String,
-    prefix: [ String, Number ],
+    prefix: [String, Number],
 
     doneIcon: String,
     doneColor: String,
@@ -55,11 +66,13 @@ export default createComponent({
     done: Boolean,
     error: Boolean,
 
-    onScroll: [ Function, Array ]
+    onScroll: [Function, Array]
   },
 
-  setup (props, { slots, emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots, emit }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const $stepper = inject(stepperKey, emptyRenderFn)
     if ($stepper === emptyRenderFn) {
@@ -73,29 +86,30 @@ export default createComponent({
 
     const isActive = computed(() => $stepper.value.modelValue === props.name)
 
-    const scrollEvent = computed(() => (
-      ($q.platform.is.ios !== true && $q.platform.is.chrome === true)
-        || isActive.value !== true
-        || $stepper.value.vertical !== true
+    const scrollEvent = computed(() =>
+      ($q.platform.is.ios !== true && $q.platform.is.chrome === true) ||
+      isActive.value !== true ||
+      $stepper.value.vertical !== true
         ? {}
         : {
-            onScroll (e) {
+            onScroll(e) {
               const { target } = e
               if (target.scrollTop > 0) {
                 target.scrollTop = 0
               }
-              props.onScroll !== void 0 && emit('scroll', e)
+
+              if (props.onScroll !== void 0) emit('scroll', e)
             }
           }
-    ))
+    )
 
-    const contentKey = computed(() => (
+    const contentKey = computed(() =>
       typeof props.name === 'string' || typeof props.name === 'number'
         ? props.name
         : String(props.name)
-    ))
+    )
 
-    function getStepContent () {
+    function getStepContent() {
       const vertical = $stepper.value.vertical
 
       if (vertical === true && $stepper.value.keepAlive === true) {
@@ -106,7 +120,10 @@ export default createComponent({
             ? [
                 h(
                   $stepper.value.needsUniqueKeepAliveWrapper.value === true
-                    ? getCache(contentKey.value, () => ({ ...PanelWrapper, name: contentKey.value }))
+                    ? getCache(contentKey.value, () => ({
+                        ...PanelWrapper,
+                        name: contentKey.value
+                      }))
                     : PanelWrapper,
                   { key: contentKey.value },
                   slots.default
@@ -121,22 +138,28 @@ export default createComponent({
         : void 0
     }
 
-    return () => h(
-      'div',
-      { ref: rootRef, class: 'q-stepper__step', role: 'tabpanel', ...scrollEvent.value },
-      $stepper.value.vertical === true
-        ? [
-            h(StepHeader, {
-              stepper: $stepper.value,
-              step: props,
-              goToPanel: $stepper.value.goToPanel
-            }),
-
-            $stepper.value.animated === true
-              ? h(QSlideTransition, getStepContent)
-              : getStepContent()
-          ]
-        : [ getStepContent() ]
-    )
+    return () =>
+      h(
+        'div',
+        {
+          ref: rootRef,
+          class: 'q-stepper__step',
+          role: 'tabpanel',
+          ...scrollEvent.value
+        },
+        $stepper.value.vertical === true
+          ? [
+              h(StepHeader, {
+                stepper: $stepper.value,
+                step: props,
+                goToPanel: $stepper.value.goToPanel
+              }),
+
+              $stepper.value.animated === true
+                ? h(QSlideTransition, getStepContent)
+                : getStepContent()
+            ]
+          : [getStepContent()]
+      )
   }
 })

package/src/components/stepper/QStep.json

@@ -3,7 +3,7 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/stepper"
   },
 
-  "mixins": [ "composables/private.use-panel/use-panel.child" ],
+  "mixins": ["composables/private.use-panel/use-panel.child"],
 
   "props": {
     "icon": {
@@ -19,21 +19,21 @@
       "type": "String",
       "desc": "Step title",
       "required": true,
-      "examples": [ "'Ad Groups'", "'Payment'" ],
+      "examples": ["'Ad Groups'", "'Payment'"],
       "category": "header"
     },
 
     "caption": {
       "type": "String",
       "desc": "Step’s additional information that appears beneath the title",
-      "examples": [ "'Create an account'", "'Payment details'" ],
+      "examples": ["'Create an account'", "'Payment details'"],
       "category": "header"
     },
 
     "prefix": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Step's prefix (max 2 characters) which replaces the icon if step does not has error, is being edited or is marked as done",
-      "examples": [ "'1'", "2", "'A'", "'B'" ],
+      "examples": ["'1'", "2", "'A'", "'B'"],
       "category": "header"
     },
 

package/src/components/stepper/QStepper.js

@@ -2,8 +2,13 @@ import { h, computed, provide, getCurrentInstance } from 'vue'
 
 import StepHeader from './StepHeader.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import usePanel, { usePanelProps, usePanelEmits } from '../../composables/private.use-panel/use-panel.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
+import usePanel, {
+  usePanelProps,
+  usePanelEmits
+} from '../../composables/private.use-panel/use-panel.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { stepperKey } from '../../utils/private.symbols/symbols.js'
@@ -11,11 +16,11 @@ import { hSlot, hMergeSlot, hDir } from '../../utils/private.render/render.js'
 
 const camelRE = /(-\w)/g
 
-function camelizeProps (props) {
+function camelizeProps(props) {
   const acc = {}
   for (const key in props) {
-    const newKey = key.replace(camelRE, m => m[ 1 ].toUpperCase())
-    acc[ newKey ] = props[ key ]
+    const newKey = key.replace(camelRE, m => m[1].toUpperCase())
+    acc[newKey] = props[key]
   }
   return acc
 }
@@ -46,52 +51,66 @@ export default createComponent({
 
   emits: usePanelEmits,
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
     const {
-      updatePanelsList, isValidPanelName,
-      updatePanelIndex, getPanelContent,
-      getPanels, panelDirectives, goToPanel,
-      keepAliveProps, needsUniqueKeepAliveWrapper
-    } = usePanel()
-
-    provide(stepperKey, computed(() => ({
+      updatePanelsList,
+      isValidPanelName,
+      updatePanelIndex,
+      getPanelContent,
+      getPanels,
+      panelDirectives,
       goToPanel,
       keepAliveProps,
-      needsUniqueKeepAliveWrapper,
-      ...props
-    })))
-
-    const classes = computed(() =>
-      `q-stepper q-stepper--${ props.vertical === true ? 'vertical' : 'horizontal' }`
-      + (props.flat === true ? ' q-stepper--flat' : '')
-      + (props.bordered === true ? ' q-stepper--bordered' : '')
-      + (isDark.value === true ? ' q-stepper--dark q-dark' : '')
+      needsUniqueKeepAliveWrapper
+    } = usePanel()
+
+    provide(
+      stepperKey,
+      computed(() => ({
+        goToPanel,
+        keepAliveProps,
+        needsUniqueKeepAliveWrapper,
+        ...props
+      }))
     )
 
-    const headerClasses = computed(() =>
-      'q-stepper__header row items-stretch justify-between'
-      + ` q-stepper__header--${ props.alternativeLabels === true ? 'alternative' : 'standard' }-labels`
-      + (props.flat === false || props.bordered === true ? ' q-stepper__header--border' : '')
-      + (props.contracted === true ? ' q-stepper__header--contracted' : '')
-      + (props.headerClass !== void 0 ? ` ${ props.headerClass }` : '')
+    const classes = computed(
+      () =>
+        `q-stepper q-stepper--${props.vertical === true ? 'vertical' : 'horizontal'}` +
+        (props.flat === true ? ' q-stepper--flat' : '') +
+        (props.bordered === true ? ' q-stepper--bordered' : '') +
+        (isDark.value === true ? ' q-stepper--dark q-dark' : '')
     )
 
-    function getContent () {
+    const headerClasses = computed(
+      () =>
+        'q-stepper__header row items-stretch justify-between' +
+        ` q-stepper__header--${props.alternativeLabels === true ? 'alternative' : 'standard'}-labels` +
+        (props.flat === false || props.bordered === true
+          ? ' q-stepper__header--border'
+          : '') +
+        (props.contracted === true ? ' q-stepper__header--contracted' : '') +
+        (props.headerClass !== void 0 ? ` ${props.headerClass}` : '')
+    )
+
+    function getContent() {
       const top = hSlot(slots.message, [])
 
       if (props.vertical === true) {
-        isValidPanelName(props.modelValue) && updatePanelIndex()
+        if (isValidPanelName(props.modelValue)) updatePanelIndex()
 
-        const content = h('div', {
-          class: 'q-stepper__content'
-        }, hSlot(slots.default))
+        const content = h(
+          'div',
+          {
+            class: 'q-stepper__content'
+          },
+          hSlot(slots.default)
+        )
 
-        return top === void 0
-          ? [ content ]
-          : top.concat(content)
+        return top === void 0 ? [content] : top.concat(content)
       }
 
       return [
@@ -126,9 +145,13 @@ export default createComponent({
     return () => {
       updatePanelsList(slots)
 
-      return h('div', {
-        class: classes.value
-      }, hMergeSlot(slots.navigation, getContent()))
+      return h(
+        'div',
+        {
+          class: classes.value
+        },
+        hMergeSlot(slots.navigation, getContent())
+      )
     }
   }
 })

package/src/components/stepper/QStepper.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-panel/use-panel" ],
+  "mixins": ["composables/private.use-panel/use-panel"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/stepper"
@@ -88,7 +88,7 @@
     "header-class": {
       "type": "String",
       "desc": "Class definitions to be attributed to the header",
-      "examples": [ "'my-special-class'" ],
+      "examples": ["'my-special-class'"],
       "category": "style"
     }
   },

package/src/components/stepper/QStepperNavigation.js

@@ -6,7 +6,7 @@ import { hSlot } from '../../utils/private.render/render.js'
 export default createComponent({
   name: 'QStepperNavigation',
 
-  setup (_, { slots }) {
+  setup(_, { slots }) {
     return () => h('div', { class: 'q-stepper__nav' }, hSlot(slots.default))
   }
 })