quasar 2.2.2 → 2.3.1

package/src/components/spinner/QSpinnerIos.js

@@ -1,7 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const svg = [
   h('g', {
     'stroke-width': '4',
@@ -154,7 +156,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerIos',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerOrbit.js

@@ -1,7 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const svg = [
   h('circle', {
     cx: '50',
@@ -31,7 +33,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerOrbit',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerOval.js

@@ -1,7 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const svg = [
   h('g', {
     transform: 'translate(1 1)',
@@ -30,7 +32,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerOval',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerPie.js

@@ -1,7 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const svg = [
   h('path', {
     d: 'M0 50A50 50 0 0 1 50 0L50 50L0 50',
@@ -61,7 +63,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerPie',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerPuff.js

@@ -1,7 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const svg = [
   h('g', {
     fill: 'none',
@@ -63,7 +65,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerPuff',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerRadio.js

@@ -1,7 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const svg = [
   h('g', {
     transform: 'scale(0.55)'
@@ -56,7 +58,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerRadio',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerRings.js

@@ -1,7 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const svg = [
   h('g', {
     fill: 'none',
@@ -86,7 +88,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerRings',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerTail.js

@@ -1,7 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const svg = [
   h('defs', [
     h('linearGradient', {
@@ -64,7 +66,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerTail',
 
   props: useSpinnerProps,

package/src/components/splitter/QSplitter.js

@@ -1,12 +1,13 @@
-import { h, defineComponent, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
 
 import TouchPan from '../../directives/TouchPan.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hMergeSlot, hDir } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QSplitter',
 
   props: {

package/src/components/stepper/QStep.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, nextTick, inject, KeepAlive } from 'vue'
+import { h, ref, computed, watch, nextTick, inject, KeepAlive } from 'vue'
 
 import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import StepHeader from './StepHeader.js'
@@ -6,6 +6,7 @@ import StepHeader from './StepHeader.js'
 import { usePanelChildProps } from '../../composables/private/use-panel.js'
 import useCache from '../../composables/private/use-cache.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stepperKey } from '../../utils/private/symbols.js'
 import { hSlot } from '../../utils/private/render.js'
 
@@ -25,7 +26,7 @@ const PanelWrapper = {
   }
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QStep',
 
   props: {

package/src/components/stepper/QStepper.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed, provide, getCurrentInstance } from 'vue'
+import { h, computed, provide, getCurrentInstance } from 'vue'
 
 import StepHeader from './StepHeader.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import usePanel, { usePanelProps, usePanelEmits } from '../../composables/private/use-panel.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stepperKey } from '../../utils/private/symbols.js'
 import { hSlot, hMergeSlot, hDir } from '../../utils/private/render.js'
 
@@ -19,7 +20,7 @@ function camelizeProps (props) {
   return acc
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QStepper',
 
   props: {

package/src/components/stepper/QStepperNavigation.js

@@ -1,8 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QStepperNavigation',
 
   setup (_, { slots }) {

package/src/components/stepper/StepHeader.js

@@ -1,9 +1,11 @@
-import { h, defineComponent, ref, computed, withDirectives, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import Ripple from '../../directives/Ripple.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'StepHeader',
 
   props: {

package/src/components/tab-panels/QTabPanel.js

@@ -1,9 +1,11 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import { usePanelChildProps } from '../../composables/private/use-panel.js'
+
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTabPanel',
 
   props: usePanelChildProps,

package/src/components/tab-panels/QTabPanels.js

@@ -1,11 +1,12 @@
-import { defineComponent, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import usePanel, { usePanelProps, usePanelEmits } from '../../composables/private/use-panel.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hDir } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTabPanels',
 
   props: {

package/src/components/table/QTable.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
 import QTh from './QTh.js'
 
@@ -23,12 +23,14 @@ import { useTableRowSelection, useTableRowSelectionProps, useTableRowSelectionEm
 import { useTableRowExpand, useTableRowExpandProps, useTableRowExpandEmits } from './table-row-expand.js'
 import { useTableColumnSelection, useTableColumnSelectionProps } from './table-column-selection.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const bottomClass = 'q-table__bottom row items-center'
 
 const commonVirtPropsObj = {}
 commonVirtPropsList.forEach(p => { commonVirtPropsObj[ p ] = {} })
 
-export default defineComponent({
+export default createComponent({
   name: 'QTable',
 
   props: {

package/src/components/table/QTable.json

@@ -17,6 +17,18 @@
       "type": [ "String", "Function" ],
       "desc": "Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc); The value of property must be string or a function taking a row and returning the desired (nested) key in the row; If supplying a function then for best performance, reference it from your scope and do not define it inline",
       "default": "id",
+      "params": {
+        "row": {
+          "type": "Object",
+          "desc": "The current row being processed",
+          "examples": [ "{ name: 'Lorem Ipsum', price: 19 }" ]
+        }
+      },
+      "returns": {
+        "type": "Any",
+        "desc": "Current row's key",
+        "examples": [ "'34f39dda-6206-4071-a9df-4393aabe49ac'", "34" ]
+      },
       "examples": [ "row-key=\"name\"", ":row-key=\"row => row.name\"" ],
       "category": "general"
     },
@@ -146,7 +158,19 @@
           "type": [ "String", "Function" ],
           "desc": "Row Object property to determine value for this column or function which maps to the required property",
           "required": true,
-          "examples": [ "name", "row => row.some.nested.prop" ]
+          "params": {
+            "row": {
+              "type": "Object",
+              "desc": "The current row being processed",
+              "examples": [ "{ name: 'Lorem Ipsum', prices: { active: 19, old: 25, list: 29 } }" ]
+            }
+          },
+          "returns": {
+            "type": "Any",
+            "desc": "Value for this column",
+            "examples": [ "19" ]
+          },
+          "examples": [ "name", "row => row.prices.active" ]
         },
         "required": {
           "type": "Boolean",
@@ -228,17 +252,39 @@
         "style": {
           "type": [ "String", "Function" ],
           "desc": "Style to apply on normal cells of the column",
+          "params": {
+            "row": {
+              "type": "Object",
+              "desc": "The current row being processed",
+              "examples": [ "{ name: 'Frozen Yogurt', calories: 159 }" ]
+            }
+          },
+          "returns": {
+            "type": "String",
+            "__exemption": [ "desc", "examples" ]
+          },
           "examples": [
-            "width: 500px",
-            "row => (row.calories % 2 === 0 ? 'width:10px' : 'font-size:2em')"
+            "'width: 500px'",
+            "row => (row.calories % 2 === 0 ? 'width: 10px' : 'font-size: 2em; font-weight: bold')"
           ]
         },
         "classes": {
           "type": [ "String", "Function" ],
           "desc": "Classes to add on normal cells of the column",
+          "params": {
+            "row": {
+              "type": "Object",
+              "desc": "The current row being processed",
+              "examples": [ "{ name: 'Frozen Yogurt', calories: 159 }" ]
+            }
+          },
+          "returns": {
+            "type": "String",
+            "__exemption": [ "desc", "examples" ]
+          },
           "examples": [
-            "my-special-class",
-            "row => (row.calories % 2 === 0 ? 'bg-green' : 'bg-yellow')"
+            "'my-special-class bg-primary'",
+            "row => (row.calories % 2 === 0 ? 'bg-green text-white' : 'bg-yellow')"
           ]
         },
         "headerStyle": {

package/src/components/table/QTd.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTd',
 
   props: {

package/src/components/table/QTh.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, getCurrentInstance } from 'vue'
+import { h, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hUniqueSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTh',
 
   props: {

package/src/components/table/QTr.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTr',
 
   props: {

package/src/components/table/table-pagination.js

@@ -26,7 +26,7 @@ export const useTablePaginationProps = {
     default: () => [ 5, 7, 10, 15, 20, 25, 50, 0 ]
   },
 
-  'onUpdate:pagination': Function
+  'onUpdate:pagination': [ Function, Array ]
 }
 
 export function useTablePaginationState (vm, getCellValue) {
@@ -76,7 +76,7 @@ export function useTablePaginationState (vm, getCellValue) {
       ...val
     })
 
-    if (samePagination(computedPagination.value, newPagination)) {
+    if (samePagination(computedPagination.value, newPagination) === true) {
       if (isServerSide.value === true && forceServerRequest === true) {
         sendServerRequest(newPagination)
       }

package/src/components/tabs/QRouteTab.js

@@ -1,9 +1,11 @@
-import { defineComponent, computed, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 import useTab, { useTabProps, useTabEmits } from './use-tab.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QRouteTab',
 
   props: {

package/src/components/tabs/QRouteTab.json

@@ -24,29 +24,7 @@
         "navigateFn": {
           "type": "Function",
           "desc": "When you need to control the time at which the tab should trigger the route navigation then set 'evt.navigate' to false and call this function; Useful if you have async work to be done before the actual route navigation",
-          "params": {
-            "to": {
-              "type": [ "String", "Object" ],
-              "desc": "Equivalent to Vue Router <router-link> 'to' property",
-              "examples": [
-                "/home/dashboard",
-                "{ name: 'my-route-name' }"
-              ],
-              "default": "Tab's 'to' property"
-            },
-
-            "append": {
-              "type": "Boolean",
-              "desc": "Equivalent to Vue Router <router-link> 'append' property",
-              "default": "Tab's 'append' property"
-            },
-
-            "replace": {
-              "type": "Boolean",
-              "desc": "Equivalent to Vue Router <router-link> 'replace' property",
-              "default": "Tab's 'replace' property"
-            }
-          },
+          "params": null,
           "returns": null
         }
       }

package/src/components/tabs/QTab.js

@@ -1,8 +1,8 @@
-import { defineComponent } from 'vue'
-
 import useTab, { useTabProps, useTabEmits } from './use-tab.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QTab',
 
   props: useTabProps,

package/src/components/tabs/QTabs.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, getCurrentInstance, provide } from 'vue'
+import { h, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, getCurrentInstance, provide } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
@@ -6,6 +6,7 @@ import QResizeObserver from '../resize-observer/QResizeObserver.js'
 import useTick from '../../composables/private/use-tick.js'
 import useTimeout from '../../composables/private/use-timeout.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { noop } from '../../utils/event.js'
 import { hSlot } from '../../utils/private/render.js'
 import { tabsKey } from '../../utils/private/symbols.js'
@@ -22,7 +23,7 @@ function getIndicatorClass (color, top, vertical) {
 const alignValues = [ 'left', 'center', 'right', 'justify' ]
 const emptyFn = () => {}
 
-export default defineComponent({
+export default createComponent({
   name: 'QTabs',
 
   props: {
@@ -62,7 +63,7 @@ export default defineComponent({
 
     contentClass: String,
 
-    'onUpdate:modelValue': Function
+    'onUpdate:modelValue': [ Function, Array ]
   },
 
   setup (props, { slots, emit }) {

package/src/components/time/QTime.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, withDirectives, Transition, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, withDirectives, Transition, nextTick, getCurrentInstance } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import TouchPan from '../../directives/TouchPan.js'
@@ -7,6 +7,7 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
 import useDatetime, { useDatetimeProps, useDatetimeEmits, getDayHash } from '../date/use-datetime.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { formatDate, __splitDate } from '../../utils/date.js'
 import { position } from '../../utils/event.js'
@@ -36,7 +37,7 @@ function getCurrentTime () {
   }
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QTime',
 
   props: {
@@ -658,21 +659,22 @@ export default defineComponent({
     function setHour (hour) {
       if (innerModel.value.hour !== hour) {
         innerModel.value.hour = hour
-        innerModel.value.minute = null
-        innerModel.value.second = null
+        verifyAndUpdate()
       }
     }
 
     function setMinute (minute) {
       if (innerModel.value.minute !== minute) {
         innerModel.value.minute = minute
-        innerModel.value.second = null
-        props.withSeconds !== true && updateValue({ minute })
+        verifyAndUpdate()
       }
     }
 
     function setSecond (second) {
-      innerModel.value.second !== second && updateValue({ second })
+      if (innerModel.value.second !== second) {
+        innerModel.value.second = second
+        verifyAndUpdate()
+      }
     }
 
     const setModel = {

package/src/components/timeline/QTimeline.js

@@ -1,11 +1,12 @@
-import { h, defineComponent, computed, provide, getCurrentInstance } from 'vue'
+import { h, computed, provide, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { timelineKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTimeline',
 
   props: {

package/src/components/timeline/QTimelineEntry.js

@@ -1,11 +1,12 @@
-import { h, defineComponent, computed, inject } from 'vue'
+import { h, computed, inject } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hUniqueSlot } from '../../utils/private/render.js'
 import { timelineKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTimelineEntry',
 
   props: {

package/src/components/toggle/QToggle.js

@@ -1,9 +1,12 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
+
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from '../checkbox/use-checkbox.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QToggle',
 
   props: {

package/src/components/toolbar/QToolbar.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QToolbar',
 
   props: {