quasar 2.15.4 → 2.16.1

package/src/components/card/QCardActions.json

@@ -8,6 +8,7 @@
       "type": "String",
       "desc": "Specify how to align the actions; For horizontal mode, the default is 'left', while for vertical mode, the default is 'stretch'",
       "default": "# 'left'/'stretch'",
+      "__runtimeDefault": true,
       "values": [ "'left'", "'center'", "'right'", "'between'", "'around'", "'evenly'", "'stretch'" ],
       "category": "content"
     },

package/src/components/carousel/QCarousel.js

@@ -87,6 +87,10 @@ export default createComponent({
 
     const direction = computed(() => (props.vertical === true ? 'vertical' : 'horizontal'))
 
+    const navigationPosition = computed(() => props.navigationPosition
+      || (props.vertical === true ? 'right' : 'bottom')
+    )
+
     const classes = computed(() =>
       `q-carousel q-panel-parent q-carousel--with${ props.padding === true ? '' : 'out' }-padding`
       + (inFullscreen.value === true ? ' fullscreen' : '')
@@ -108,9 +112,6 @@ export default createComponent({
 
     const navIcon = computed(() => props.navigationIcon || $q.iconSet.carousel.navigationIcon)
     const navActiveIcon = computed(() => props.navigationActiveIcon || navIcon.value)
-    const navigationPosition = computed(() => props.navigationPosition
-      || (props.vertical === true ? 'right' : 'bottom')
-    )
 
     const controlProps = computed(() => ({
       color: props.controlColor,

package/src/components/carousel/QCarousel.json

@@ -35,13 +35,13 @@
       "type": "String",
       "desc": "Type of button to use for controls (arrows, navigation)",
       "values": [ "'regular'", "'flat'", "'outline'", "'push'", "'unelevated'" ],
+      "default": "'flat'",
       "category": "style"
     },
 
     "autoplay": {
       "type": [ "Number", "Boolean" ],
       "desc": "Jump to next slide (if 'true' or val > 0) or previous slide (if val < 0) at fixed time intervals (in milliseconds); 'false' disables autoplay, 'true' enables it for 5000ms intervals",
-      "default": "false",
       "examples": [
         "true",
         "false",
@@ -74,6 +74,7 @@
       "type": "String",
       "desc": "Side to stick navigation to",
       "default": "# 'bottom'/'right'",
+      "__runtimeDefault": true,
       "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
       "category": "content"
     },
@@ -94,11 +95,13 @@
     },
 
     "transition-prev": {
-      "default": "'fade'"
+      "default": "'fade'",
+      "__delete": [ "__runtimeDefault" ]
     },
 
     "transition-next": {
-      "default": "'fade'"
+      "default": "'fade'",
+      "__delete": [ "__runtimeDefault" ]
     }
   },
 

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

@@ -5,6 +5,7 @@
     "model-value": {
       "extends": "model-value",
       "type": [ "Any", "Array" ],
+      "default": "null",
       "examples": [ "false", "[ 'car', 'building' ]" ]
     },
 
@@ -42,7 +43,6 @@
     "toggle-order": {
       "type": "String",
       "desc": "Determines toggle order of the two states ('t' stands for state of true, 'f' for state of false); If 'toggle-indeterminate' is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> ...",
-      "default": "'tf'",
       "values": [ "'tf'", "'ft'" ],
       "category": "behavior"
     },

package/src/components/chip/QChip.test.js

@@ -6,10 +6,6 @@ import QChip, { defaultSizes } from './QChip.js'
 describe('[QChip API]', () => {
   describe('[Props]', () => {
     describe('[(prop)dense]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.dense).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip)
         const target = wrapper.get('.q-chip')
@@ -28,10 +24,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)size]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.size).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const wrapper = mount(QChip)
         const target = wrapper.get('.q-chip')
@@ -56,10 +48,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)dark]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.dark).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip)
         const target = wrapper.get('.q-chip')
@@ -94,10 +82,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)icon]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.icon).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'map'
         const wrapper = mount(QChip)
@@ -116,10 +100,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)icon-right]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.iconRight).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'map'
         const wrapper = mount(QChip)
@@ -138,10 +118,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)icon-remove]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.iconRemove).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'map'
         const wrapper = mount(QChip)
@@ -164,10 +140,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)icon-selected]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.iconSelected).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'map'
         const wrapper = mount(QChip)
@@ -191,10 +163,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)label]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.label).toBeDefined()
-      })
-
       test.each([
         [ 'String', 'John Doe' ],
         [ 'Number', 22 ]
@@ -217,10 +185,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)color]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.color).toBeDefined()
-      })
-
       test('with default design', async () => {
         const propVal = 'red'
         const wrapper = mount(QChip)
@@ -262,10 +226,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)text-color]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.textColor).toBeDefined()
-      })
-
       test('with default design', async () => {
         const propVal = 'red'
         const wrapper = mount(QChip)
@@ -368,10 +328,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)model-value]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.modelValue).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip, {
           props: {
@@ -394,10 +350,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)selected]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.selected).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip)
         const target = wrapper.get('.q-chip')
@@ -438,10 +390,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)square]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.square).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip)
         const target = wrapper.get('.q-chip')
@@ -464,10 +412,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)outline]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.outline).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip)
         const target = wrapper.get('.q-chip')
@@ -486,10 +430,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)clickable]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.clickable).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip)
         const target = wrapper.get('.q-chip')
@@ -512,10 +452,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)removable]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.removable).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip)
 
@@ -535,10 +471,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)ripple]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.ripple).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip)
 
@@ -580,10 +512,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)remove-aria-label]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.removeAriaLabel).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'Remove item'
         const wrapper = mount(QChip, {
@@ -612,10 +540,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)tabindex]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.tabindex).toBeDefined()
-      })
-
       test.each([
         [ 'Number', 100 ],
         [ 'String', '100' ]
@@ -677,10 +601,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)disable]', () => {
-      test('is defined correctly', () => {
-        expect(QChip.props.disable).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QChip)
 
@@ -715,13 +635,6 @@ describe('[QChip API]', () => {
 
   describe('[Events]', () => {
     describe('[(event)click]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QChip.emits?.includes('click')
-          ^ (QChip.props?.onClick !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting when clickable', async () => {
         const wrapper = mount(QChip, {
           props: {
@@ -795,13 +708,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(event)update:selected]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QChip.emits?.includes('update:selected')
-          ^ (QChip.props?.[ 'onUpdate:selected' ] !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         const wrapper = mount(QChip, {
           props: {
@@ -843,13 +749,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(event)remove]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QChip.emits?.includes('remove')
-          ^ (QChip.props?.onRemove !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         const wrapper = mount(QChip, {
           props: {
@@ -869,13 +768,6 @@ describe('[QChip API]', () => {
     })
 
     describe('[(event)update:model-value]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QChip.emits?.includes('update:modelValue')
-          ^ (QChip.props?.[ 'onUpdate:modelValue' ] !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         const wrapper = mount(QChip, {
           props: {

package/src/components/circular-progress/QCircularProgress.json

@@ -45,7 +45,6 @@
     "font-size": {
       "type": "String",
       "desc": "Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size",
-      "default": "'0.25em'",
       "examples": [ "'1em'", "'16px'", "'2rem'" ],
       "category": "style"
     },

package/src/components/color/QColor.json

@@ -39,6 +39,7 @@
       "type": "Array",
       "desc": "Use a custom palette of colors for the palette tab",
       "default": "# hard-coded palette",
+      "__runtimeDefault": true,
       "examples": [ "[ '#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A' ]" ],
       "category": "content"
     },

package/src/components/date/QDate.js

@@ -32,6 +32,11 @@ export default createComponent({
     ...useFormProps,
     ...useDarkProps,
 
+    modelValue: {
+      required: true,
+      validator: val => (typeof val === 'string' || Array.isArray(val) === true || Object(val) === val || val === null)
+    },
+
     multiple: Boolean,
     range: Boolean,
 
@@ -39,6 +44,7 @@ export default createComponent({
     subtitle: String,
 
     mask: {
+      ...useDatetimeProps.mask,
       // this mask is forced
       // when using persian calendar
       default: 'YYYY/MM/DD'
@@ -112,7 +118,7 @@ export default createComponent({
 
     const view = ref(props.defaultView)
 
-    const direction = $q.lang.rtl === true ? 'right' : 'left'
+    const direction = computed(() => ($q.lang.rtl === true ? 'right' : 'left'))
     const monthDirection = ref(direction.value)
     const yearDirection = ref(direction.value)
 
@@ -931,7 +937,7 @@ export default createComponent({
       const newHash = year + '/' + pad(month) + '/01'
 
       if (newHash !== viewModel.value.dateHash) {
-        monthDirection.value = (viewModel.value.dateHash < newHash) === ($q.lang.rtl !== true) ? 'left' : 'right'
+        monthDirection.value = (viewModel.value.dateHash < newHash) === direction.value
         if (year !== viewModel.value.year) {
           yearDirection.value = monthDirection.value
         }

package/src/components/date/QDate.json

@@ -147,6 +147,7 @@
       "type": [ "String", "Number" ],
       "desc": "Sets the day of the week that is considered the first day (0 - Sunday, 1 - Monday, ...); This day will show in the left-most column of the calendar",
       "default": "# based on configured Quasar lang language",
+      "__runtimeDefault": true,
       "examples": [
         "1",
         "# first-day-of-week=\"1\"",

package/src/components/date/use-datetime.js

@@ -6,9 +6,7 @@ import { pad } from '../../utils/format/format.js'
 const calendars = [ 'gregorian', 'persian' ]
 
 export const useDatetimeProps = {
-  modelValue: {
-    required: true
-  },
+  // should define modelValue in the target component
 
   mask: {
     type: String

package/src/components/dialog/QDialog.js

@@ -69,8 +69,7 @@ export default createComponent({
     position: {
       type: String,
       default: 'standard',
-      validator: val => val === 'standard'
-        || [ 'top', 'bottom', 'left', 'right' ].includes(val)
+      validator: val => [ 'standard', 'top', 'bottom', 'left', 'right' ].includes(val)
     }
   },
 

package/src/components/dialog/QDialog.json

@@ -117,6 +117,14 @@
       "desc": "Allow elements outside of the Dialog to be focusable; By default, for accessibility reasons, QDialog does not allow outer focus",
       "category": "behavior",
       "addedIn": "v2.7.2"
+    },
+
+    "transition-show": {
+      "__runtimeDefault": true
+    },
+
+    "transition-hide": {
+      "__runtimeDefault": true
     }
   },
 
@@ -127,7 +135,9 @@
 
     "escape-key": {
       "desc": "Emitted when ESC key is pressed; Does not get emitted if Dialog is 'persistent' or it has 'no-esc-key' set"
-    }
+    },
+
+    "click": { "internal": true }
   },
 
   "methods": {