quasar 2.15.4 → 2.16.0

package/src/components/spinner/QSpinnerTail.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerTail from './QSpinnerTail.js'
+
+describe('[QSpinnerTail API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerTail)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerTail)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/spinner.json

@@ -8,6 +8,11 @@
   "props": {
     "color": {
       "extends": "color"
+    },
+
+    "size": {
+      "type": [ "String", "Number" ],
+      "default": "'1em'"
     }
   }
 }

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

@@ -3,7 +3,7 @@ import { useSizeDefaults } from '../../composables/private.use-size/use-size.js'
 
 export const useSpinnerProps = {
   size: {
-    type: [ Number, String ],
+    type: [ String, Number ],
     default: '1em'
   },
   color: String

package/src/components/spinner/use-spinner.test.js

@@ -0,0 +1,59 @@
+import { describe, test, expect } from 'vitest'
+
+import useSpinner, { useSpinnerProps } from './use-spinner.js'
+import { useSizeDefaults } from 'quasar/src/composables/private.use-size/use-size.js'
+
+describe('[useSpinner API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useSpinnerProps]', () => {
+      test('is defined correctly', () => {
+        expect(useSpinnerProps).toBeTypeOf('object')
+        expect(Object.keys(useSpinnerProps)).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value when missing props', () => {
+        const result = useSpinner({})
+        expect(result).toStrictEqual({
+          cSize: expect.$ref(void 0),
+          classes: expect.$ref('q-spinner')
+        })
+      })
+
+      test('has correct return value when props.size has unit', () => {
+        const result = useSpinner({ size: '2em' })
+        expect(result).toStrictEqual({
+          cSize: expect.$ref('2em'),
+          classes: expect.$ref('q-spinner')
+        })
+      })
+
+      test('has correct return value when props.size is xl', () => {
+        const result = useSpinner({ size: 'xl' })
+        expect(result).toStrictEqual({
+          cSize: expect.$ref(`${ useSizeDefaults.xl }px`),
+          classes: expect.$ref('q-spinner')
+        })
+      })
+
+      test('has correct return value when props.color is defined', () => {
+        const result = useSpinner({ color: 'red' })
+        expect(result).toStrictEqual({
+          cSize: expect.$ref(void 0),
+          classes: expect.$ref('q-spinner text-red')
+        })
+      })
+
+      test('has correct return value when props.size & props.color are defined', () => {
+        const result = useSpinner({ size: '500em', color: 'bogus-color' })
+        expect(result).toStrictEqual({
+          cSize: expect.$ref('500em'),
+          classes: expect.$ref('q-spinner text-bogus-color')
+        })
+      })
+    })
+  })
+})

package/src/components/splitter/QSplitter.json

@@ -41,6 +41,7 @@
       "type": "Array",
       "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 ]" ],
       "category": "content|model"
     },
@@ -94,9 +95,8 @@
     },
 
     "dark": {
-      "type": "Boolean",
-      "desc": "Applies a default lighter color on the separator; To be used when background is darker; Avoid using when you are overriding through separator-class or separator-style props",
-      "category": "style"
+      "extends": "dark",
+      "desc": "Applies a default lighter color on the separator; To be used when background is darker; Avoid using when you are overriding through separator-class or separator-style props"
     }
   },
 

package/src/components/stepper/QStep.json

@@ -94,5 +94,11 @@
     "default": {
       "desc": "The content of the step; Can also contain a QStepperNavigation if you want to handle step navigation and don't have a global navigation in place"
     }
+  },
+
+  "events": {
+    "scroll": {
+      "internal": true
+    }
   }
 }

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

@@ -5,6 +5,12 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/tab-panels"
   },
 
+  "props": {
+    "dark": {
+      "extends": "dark"
+    }
+  },
+
   "slots": {
     "default": {
       "extends": "default"

package/src/components/table/QTable.js

@@ -13,7 +13,7 @@ import QBtn from '../btn/QBtn.js'
 import getTableMiddle from './get-table-middle.js'
 
 import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import { commonVirtPropsList } from '../virtual-scroll/use-virtual-scroll.js'
+import { commonVirtScrollPropsList } from '../virtual-scroll/use-virtual-scroll.js'
 import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private.use-fullscreen/use-fullscreen.js'
 
 import { useTableSort, useTableSortProps } from './table-sort.js'
@@ -28,8 +28,8 @@ import { createComponent } from '../../utils/private.create/create.js'
 
 const bottomClass = 'q-table__bottom row items-center'
 
-const commonVirtPropsObj = {}
-commonVirtPropsList.forEach(p => { commonVirtPropsObj[ p ] = {} })
+const virtScrollPassthroughProps = {}
+commonVirtScrollPropsList.forEach(p => { virtScrollPassthroughProps[ p ] = {} })
 
 export default createComponent({
   name: 'QTable',
@@ -71,10 +71,8 @@ export default createComponent({
     wrapCells: Boolean,
 
     virtualScroll: Boolean,
-    virtualScrollTarget: {
-      default: void 0
-    },
-    ...commonVirtPropsObj,
+    virtualScrollTarget: {},
+    ...virtScrollPassthroughProps,
 
     noDataLabel: String,
     noResultsLabel: String,
@@ -266,7 +264,7 @@ export default createComponent({
     const virtProps = computed(() => {
       const acc = {}
 
-      commonVirtPropsList
+      commonVirtScrollPropsList
         .forEach(p => { acc[ p ] = props[ p ] })
 
       if (acc.virtualScrollItemSize === void 0) {

package/src/components/table/QTable.json

@@ -41,13 +41,15 @@
     },
 
     "virtual-scroll-target": {
-      "extends": "scroll-target"
+      "extends": "scroll-target",
+      "passthrough": "child"
     },
 
     "virtual-scroll-slice-size": {
-      "type": [ "Number", "String" ],
+      "type": [ "Number", "String", "null" ],
       "desc": "Minimum number of rows to render in the virtual list",
       "default": "30",
+      "passthrough": "child",
       "category": "virtual-scroll"
     },
 
@@ -55,6 +57,7 @@
       "type": [ "Number", "String" ],
       "desc": "Ratio of number of rows in visible zone to render before it",
       "default": "1",
+      "passthrough": "child",
       "category": "virtual-scroll"
     },
 
@@ -62,6 +65,7 @@
       "type": [ "Number", "String" ],
       "desc": "Ratio of number of rows in visible zone to render after it",
       "default": "1",
+      "passthrough": "child",
       "category": "virtual-scroll"
     },
 
@@ -69,6 +73,7 @@
       "type": [ "Number", "String" ],
       "desc": "Default size in pixels of a row; This value is used for rendering the initial table; Try to use a value close to the minimum size of a row; Default value: 48 (24 if dense)",
       "default": "# 48/24",
+      "passthrough": "child",
       "category": "virtual-scroll"
     },
 
@@ -76,6 +81,7 @@
       "type": [ "Number", "String" ],
       "desc": "Size in pixels of the sticky header (if using one); A correct value will improve scroll precision; Will be also used for non-virtual-scroll tables for fixing top alignment when using scrollTo method",
       "default": "0",
+      "passthrough": "child",
       "category": "virtual-scroll|behavior"
     },
 
@@ -83,13 +89,15 @@
       "type": [ "Number", "String" ],
       "desc": "Size in pixels of the sticky footer part (if using one); A correct value will improve scroll precision",
       "default": "0",
+      "passthrough": "child",
       "category": "virtual-scroll"
     },
 
     "table-colspan": {
       "type": [ "Number", "String" ],
       "desc": "The number of columns in the table (you need this if you use table-layout: fixed)",
-      "category": "virtual-scroll|content"
+      "category": "virtual-scroll|content",
+      "passthrough": "child"
     },
 
     "color": {
@@ -257,7 +265,7 @@
             "desc": "Comparison result of term 'a' with term 'b'. Less than 0 when 'a' should come first; greater than 0 if 'b' should come first; equal to 0 if their position must not be changed with respect to each other",
             "examples": [ "-1", "0", "1" ]
           },
-          "addedIn": "v2.13.0"
+          "addedIn": "v2.13"
         },
         "sortOrder": {
           "type": "String",
@@ -661,7 +669,6 @@
         "type": "Array",
         "desc": "Filtered rows"
       },
-      "default": "# see source code",
       "examples": [ "# see source code" ],
       "category": "filter"
     },
@@ -703,7 +710,7 @@
     "rows-per-page-options": {
       "type": "Array",
       "desc": "Options for user to pick (Numbers); Number 0 means 'Show all rows in one page'",
-      "default": "[ 3, 5, 7, 10, 15, 20, 25, 50, 0 ]",
+      "default": "[ 5, 7, 10, 15, 20, 25, 50, 0 ]",
       "examples": [ "[ 10, 20 ]" ],
       "category": "pagination"
     },
@@ -728,7 +735,6 @@
     "expanded": {
       "type": "Array",
       "desc": "Keeps the array with expanded rows keys",
-      "default": "[]",
       "syncable": true,
       "examples": [ "# v-model:expanded=\"expanded\"" ],
       "category": "expansion"
@@ -756,7 +762,6 @@
         "type": "Array",
         "desc": "Sorted rows"
       },
-      "default": "# see source code",
       "examples": [ "# see source code" ],
       "category": "sorting"
     }

package/src/components/table/QTh.json

@@ -22,5 +22,9 @@
     "default": {
       "extends": "default"
     }
+  },
+
+  "events": {
+    "click": { "internal": true }
   }
 }

package/src/components/tabs/QRouteTab.json

@@ -1,13 +1,14 @@
 {
+  "mixins": [ "components/tabs/use-tab", "composables/private.use-router-link/use-router-link" ],
+
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/tabs"
   },
 
-  "mixins": [ "components/tabs/QTab", "composables/private.use-router-link/use-router-link" ],
-
   "events": {
     "click": {
       "desc": "Emitted when the component is clicked",
+      "internal": false,
       "params": {
         "evt": {
           "extends": "evt",

package/src/components/tabs/QTab.json

@@ -3,69 +3,5 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/tabs"
   },
 
-  "props": {
-    "icon": {
-      "extends": "icon"
-    },
-
-    "label": {
-      "type": [ "Number", "String" ],
-      "desc": "A number or string to label the tab",
-      "examples": [ "'Home'" ],
-      "category": "content"
-    },
-
-    "alert": {
-      "type": [ "Boolean", "String" ],
-      "desc": "Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color",
-      "examples": [ "'purple'" ],
-      "category": "content"
-    },
-
-    "alert-icon": {
-      "type": "String",
-      "desc": "Adds a floating icon to the tab, notifying the user there are some updates; It's displayed only if 'alert' is set; Can use the color specified by 'alert' prop",
-      "examples": [ "'alarm_on'" ],
-      "category": "content"
-    },
-
-    "name": {
-      "type": [ "Number", "String" ],
-      "desc": "Panel name",
-      "default": "# a random UUID",
-      "examples": [ "'home'", "1" ],
-      "category": "general"
-    },
-
-    "no-caps": {
-      "type": "Boolean",
-      "desc": "Turns off capitalizing all letters within the tab (which is the default)",
-      "category": "content"
-    },
-
-    "content-class": {
-      "type": "String",
-      "desc": "Class definitions to be attributed to the content wrapper",
-      "examples": [ "'my-special-class'" ],
-      "category": "style"
-    },
-
-    "ripple": {
-      "extends": "ripple"
-    },
-
-    "tabindex": {
-      "extends": "tabindex"
-    },
-
-    "disable": {
-      "extends": "disable"
-    }
-  },
-
-  "slots": {
-    "default": {
-      "desc": "Suggestion: QMenu, QTooltip"
-    }
-  }
+  "mixins": [ "components/tabs/use-tab" ]
 }

package/src/components/tabs/use-tab.json

@@ -0,0 +1,72 @@
+{
+  "props": {
+    "icon": {
+      "extends": "icon"
+    },
+
+    "label": {
+      "type": [ "Number", "String" ],
+      "desc": "A number or string to label the tab",
+      "examples": [ "'Home'" ],
+      "category": "content"
+    },
+
+    "alert": {
+      "type": [ "Boolean", "String" ],
+      "desc": "Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color",
+      "examples": [ "'purple'" ],
+      "category": "content"
+    },
+
+    "alert-icon": {
+      "type": "String",
+      "desc": "Adds a floating icon to the tab, notifying the user there are some updates; It's displayed only if 'alert' is set; Can use the color specified by 'alert' prop",
+      "examples": [ "'alarm_on'" ],
+      "category": "content"
+    },
+
+    "name": {
+      "type": [ "Number", "String" ],
+      "desc": "Panel name",
+      "default": "# a random UUID",
+      "examples": [ "'home'", "1" ],
+      "category": "general"
+    },
+
+    "no-caps": {
+      "type": "Boolean",
+      "desc": "Turns off capitalizing all letters within the tab (which is the default)",
+      "category": "content"
+    },
+
+    "content-class": {
+      "type": "String",
+      "desc": "Class definitions to be attributed to the content wrapper",
+      "examples": [ "'my-special-class'" ],
+      "category": "style"
+    },
+
+    "ripple": {
+      "extends": "ripple"
+    },
+
+    "tabindex": {
+      "extends": "tabindex"
+    },
+
+    "disable": {
+      "extends": "disable"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Suggestion: QMenu, QTooltip"
+    }
+  },
+
+  "events": {
+    "click": { "internal": true },
+    "keydown": { "internal": true }
+  }
+}

package/src/components/time/QTime.js

@@ -46,7 +46,13 @@ export default createComponent({
     ...useFormProps,
     ...useDatetimeProps,
 
+    modelValue: {
+      required: true,
+      validator: val => (typeof val === 'string' || val === null)
+    },
+
     mask: {
+      ...useDatetimeProps.mask,
       default: null
     },
 

package/src/components/time/QTime.json

@@ -24,6 +24,7 @@
       "type": "String",
       "desc": "The default date to use (in YYYY/MM/DD format) when model is unfilled (undefined or null)",
       "default": "# current day",
+      "__runtimeDefault": true,
       "examples": [ "'1995/02/23'" ],
       "category": "model"
     },
@@ -31,6 +32,7 @@
     "mask": {
       "type": [ "String", "null" ],
       "default": "'HH:mm'",
+      "__runtimeDefault": true,
       "examples": [ "'HH:mm:ss'", "'YYYY-MM-DD HH:mm:ss'", "'HH:mm MMMM Do, YYYY'" ]
     },
 

package/src/components/timeline/QTimeline.json

@@ -5,7 +5,8 @@
 
   "props": {
     "color": {
-      "extends": "color"
+      "extends": "color",
+      "default": "'primary'"
     },
 
     "side": {

package/src/components/toolbar/QToolbar.test.js

@@ -6,10 +6,6 @@ import QToolbar from './QToolbar.js'
 describe('[QToolbar API]', () => {
   describe('[Props]', () => {
     describe('[(prop)inset]', () => {
-      test('is defined correctly', () => {
-        expect(QToolbar.props.inset).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QToolbar)
         const target = wrapper.get('.q-toolbar')

package/src/components/toolbar/QToolbarTitle.test.js

@@ -6,10 +6,6 @@ import QToolbarTitle from './QToolbarTitle.js'
 describe('[QToolbarTitle API]', () => {
   describe('[Props]', () => {
     describe('[(prop)shrink]', () => {
-      test('is defined correctly', () => {
-        expect(QToolbarTitle.props.shrink).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QToolbarTitle)
         const target = wrapper.get('.q-toolbar__title')

package/src/components/tooltip/QTooltip.js

@@ -1,6 +1,6 @@
 import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
 
-import useAnchor, { useAnchorProps } from '../../composables/private.use-anchor/use-anchor.js'
+import useAnchor, { useAnchorStaticProps } from '../../composables/private.use-anchor/use-anchor.js'
 import useScrollTarget from '../../composables/private.use-scroll-target/use-scroll-target.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 import usePortal from '../../composables/private.use-portal/use-portal.js'
@@ -9,7 +9,7 @@ import useTick from '../../composables/use-tick/use-tick.js'
 import useTimeout from '../../composables/use-timeout/use-timeout.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { getScrollTarget } from '../../utils/scroll/scroll.js'
+import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { stopAndPrevent, addEvt, cleanEvt } from '../../utils/event/event.js'
 import { clearSelection } from '../../utils/private.selection/selection.js'
 import { hSlot } from '../../utils/private.render/render.js'
@@ -24,7 +24,7 @@ export default createComponent({
   inheritAttrs: false,
 
   props: {
-    ...useAnchorProps,
+    ...useAnchorStaticProps,
     ...useModelToggleProps,
     ...useTransitionProps,
 
@@ -38,9 +38,11 @@ export default createComponent({
     },
 
     transitionShow: {
+      ...useTransitionProps.transitionShow,
       default: 'jump-down'
     },
     transitionHide: {
+      ...useTransitionProps.transitionHide,
       default: 'jump-up'
     },
 
@@ -60,9 +62,7 @@ export default createComponent({
       validator: validateOffset
     },
 
-    scrollTarget: {
-      default: void 0
-    },
+    scrollTarget: scrollTargetProp,
 
     delay: {
       type: Number,

package/src/components/tooltip/QTooltip.json

@@ -1,5 +1,10 @@
 {
-  "mixins": [ "composables/private.use-model-toggle/use-model-toggle", "composables/private.use-portal/use-portal", "composables/private.use-transition/use-transition" ],
+  "mixins": [
+    "composables/private.use-model-toggle/use-model-toggle",
+    "composables/private.use-anchor/use-anchor-static",
+    "composables/private.use-portal/use-portal",
+    "composables/private.use-transition/use-transition"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/tooltip"
@@ -66,20 +71,6 @@
       "extends": "scroll-target"
     },
 
-    "target": {
-      "type": [ "Boolean", "String" ],
-      "desc": "Configure a target element to trigger Tooltip toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)",
-      "default": "true",
-      "examples": [ "# :target=\"false\"", "# target=\".my-parent\"" ],
-      "category": "behavior"
-    },
-
-    "no-parent-event": {
-      "type": "Boolean",
-      "desc": "Skips attaching events to the target DOM element (that trigger the element to get shown)",
-      "category": "behavior"
-    },
-
     "delay": {
       "type": "Number",
       "desc": "Configure Tooltip to appear with delay",

package/src/components/tree/QTree.js

@@ -66,7 +66,7 @@ export default createComponent({
     filter: String,
     filterMethod: Function,
 
-    duration: Number,
+    duration: {},
     noConnectors: Boolean,
     noTransition: Boolean,