quasar 2.13.0 → 2.14.0

package/lang/mk.js

@@ -24,10 +24,10 @@ module.exports = {
     collapse: label => (label ? `Собери на "${ label }"` : 'Собери')
   },
   date: {
-    days: 'Недела_Понеделник_Вторник_Среда_Четврток_Петок_Сабота'.split(''),
-    daysShort: 'Нед_Пон_Вто_Сре_Чет_Пет_Саб'.split(''),
-    months: 'Јануари_Февруари_Март_Април_Мај_Јуни_Јули_Август_Септември_Октомври_Ноември_Декември'.split(''),
-    monthsShort: 'Јан_Фев_Мар_Апр_Мај_Јун_Јул_Авг_Сеп_Окт_Ное_Дек'.split(''),
+    days: 'Недела_Понеделник_Вторник_Среда_Четврток_Петок_Сабота'.split('_'),
+    daysShort: 'Нед_Пон_Вто_Сре_Чет_Пет_Саб'.split('_'),
+    months: 'Јануари_Февруари_Март_Април_Мај_Јуни_Јули_Август_Септември_Октомври_Ноември_Декември'.split('_'),
+    monthsShort: 'Јан_Фев_Мар_Апр_Мај_Јун_Јул_Авг_Сеп_Окт_Ное_Дек'.split('_'),
     firstDayOfWeek: 0, // 0-6, 0 - Недела, 1 - Понеделник, ...
     format24h: false,
     pluralDay: 'денови'

package/lang/mk.mjs

@@ -19,10 +19,10 @@ export default {
     collapse: label => (label ? `Собери на "${ label }"` : 'Собери')
   },
   date: {
-    days: 'Недела_Понеделник_Вторник_Среда_Четврток_Петок_Сабота'.split(''),
-    daysShort: 'Нед_Пон_Вто_Сре_Чет_Пет_Саб'.split(''),
-    months: 'Јануари_Февруари_Март_Април_Мај_Јуни_Јули_Август_Септември_Октомври_Ноември_Декември'.split(''),
-    monthsShort: 'Јан_Фев_Мар_Апр_Мај_Јун_Јул_Авг_Сеп_Окт_Ное_Дек'.split(''),
+    days: 'Недела_Понеделник_Вторник_Среда_Четврток_Петок_Сабота'.split('_'),
+    daysShort: 'Нед_Пон_Вто_Сре_Чет_Пет_Саб'.split('_'),
+    months: 'Јануари_Февруари_Март_Април_Мај_Јуни_Јули_Август_Септември_Октомври_Ноември_Декември'.split('_'),
+    monthsShort: 'Јан_Фев_Мар_Апр_Мај_Јун_Јул_Авг_Сеп_Окт_Ное_Дек'.split('_'),
     firstDayOfWeek: 0, // 0-6, 0 - Недела, 1 - Понеделник, ...
     format24h: false,
     pluralDay: 'денови'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/api.extends.json

@@ -42,7 +42,8 @@
     },
 
     "dark": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Notify the component that the background is a dark color",
       "category": "style"
     },

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

@@ -174,7 +174,8 @@
     },
 
     "loading": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)",
       "category": "behavior|state"
     },

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

@@ -36,7 +36,7 @@
       "desc": "What model value should be considered as 'indeterminate'?",
       "default": null,
       "examples": [ 0, "not_answered" ],
-      "category": "behavior"
+      "category": "model"
     },
 
     "toggle-order": {

package/src/components/chip/QChip.json

@@ -59,7 +59,8 @@
     },
 
     "selected": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "sync": true,
       "desc": "Model for QChip if it's selected or not",
       "examples": [

package/src/components/date/QDate.js

@@ -898,17 +898,17 @@ export default createComponent({
 
     function updateViewModel (year, month, time) {
       if (minNav.value !== null && year <= minNav.value.year) {
-        year = minNav.value.year
-        if (month < minNav.value.month) {
+        if (month < minNav.value.month || year < minNav.value.year) {
           month = minNav.value.month
         }
+        year = minNav.value.year
       }
 
       if (maxNav.value !== null && year >= maxNav.value.year) {
-        year = maxNav.value.year
-        if (month > maxNav.value.month) {
+        if (month > maxNav.value.month || year > maxNav.value.year) {
           month = maxNav.value.month
         }
+        year = maxNav.value.year
       }
 
       if (time !== void 0) {

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

@@ -80,7 +80,8 @@
     },
 
     "hide-label": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Hide the label; Useful for animation purposes where you toggle the visibility of the label",
       "category": "style|content"
     },

package/src/components/field/QField.js

@@ -7,11 +7,23 @@ export default createComponent({
 
   inheritAttrs: false,
 
-  props: useFieldProps,
+  props: {
+    ...useFieldProps,
+
+    tag: {
+      type: String,
+      default: 'label'
+    }
+  },
 
   emits: useFieldEmits,
 
   setup () {
-    return useField(useFieldState())
+    return useField(
+      useFieldState({
+        requiredForAttr: false,
+        tagProp: true
+      })
+    )
   }
 })

package/src/components/field/QField.json

@@ -16,6 +16,13 @@
       "type": [ "Number", "String" ],
       "desc": "Used internally by QSelect",
       "internal": true
+    },
+
+    "tag": {
+      "extends": "tag",
+      "default": "label",
+      "examples": [ "div", "label" ],
+      "addedIn": "v2.13.1"
     }
   },
 

package/src/components/img/QImg.json

@@ -246,9 +246,9 @@
     "error": {
       "desc": "Emitted when browser could not load the image",
       "params": {
-        "src": {
-          "type": "Error",
-          "desc": "JS Error object"
+        "evt": {
+          "type": "Event",
+          "desc": "JS Event object (same as the browser's native 'error' event)"
         }
       }
     }

package/src/components/input/QInput.json

@@ -26,7 +26,8 @@
       "default": "text",
       "values": [
         "text", "password", "textarea", "email", "search",
-        "tel", "file", "number", "url", "time", "date"
+        "tel", "file", "number", "url", "time", "date",
+        "datetime-local"
       ],
       "category": "general"
     },

package/src/components/intersection/QIntersection.json

@@ -23,7 +23,8 @@
     },
 
     "root": {
-      "type": "Element",
+      "type": [ "Element", "null" ],
+      "default": null,
       "desc": "[Intersection API root prop] Lets you define an alternative to the viewport as your root (through its DOM element); It is important to keep in mind that root needs to be an ancestor of the observed element",
       "examples": [ "$refs.myTable.$el", "getElementById(\"myTable\")" ],
       "category": "behavior"

package/src/components/item/QItem.js

@@ -106,7 +106,7 @@ export default createComponent({
     }
 
     function onKeyup (e) {
-      if (isClickable.value === true && isKeyCode(e, 13) === true) {
+      if (isClickable.value === true && isKeyCode(e, [ 13, 32 ]) === true) {
         stopAndPrevent(e)
 
         // for ripple

package/src/components/item/QItem.json

@@ -7,10 +7,10 @@
 
   "props": {
     "active": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Put item into 'active' state",
-      "category": "state",
-      "default": null
+      "category": "state"
     },
 
     "dark": {

package/src/components/menu/QMenu.json

@@ -105,12 +105,16 @@
 
     "max-height": {
       "extends": "size",
+      "type": [ "String", "null" ],
+      "default": null,
       "desc": "The maximum height of the menu; Size in CSS units, including unit name",
       "category": "style"
     },
 
     "max-width": {
       "extends": "size",
+      "type": [ "String", "null" ],
+      "default": null,
       "desc": "The maximum width of the menu; Size in CSS units, including unit name",
       "category": "style"
     }

package/src/components/pagination/QPagination.json

@@ -80,25 +80,29 @@
     },
 
     "boundary-links": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Show boundary button links",
       "category": "content"
     },
 
     "boundary-numbers": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Always show first and last page buttons (if not using 'input')",
       "category": "content"
     },
 
     "direction-links": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Show direction buttons",
       "category": "content"
     },
 
     "ellipses": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Show ellipses (...) when pages are available",
       "category": "content"
     },
@@ -221,7 +225,7 @@
     },
 
     "ripple": {
-      "type": [ "Boolean", "Object" ],
+      "type": [ "Boolean", "Object", "null" ],
       "desc": "Configure buttons material ripple (disable it by setting it to 'false' or supply a config object); Does not applies to boundary and ellipsis buttons",
       "default": true,
       "examples": [ false, "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],

package/src/components/scroll-area/QScrollArea.json

@@ -73,7 +73,8 @@
     },
 
     "visible": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior",
       "category": "behavior"
     },

package/src/components/select/QSelect.json

@@ -152,7 +152,8 @@
     },
 
     "options-dark": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Options menu will be colored with a dark color",
       "category": "options"
     },

package/src/components/time/QTime.json

@@ -16,9 +16,9 @@
     },
 
     "format24h": {
-      "type": "Boolean",
-      "desc": "Forces 24 hour time display instead of AM/PM system",
-      "default": "(based on Quasar lang language being used)",
+      "type": [ "Boolean", "null" ],
+      "default": null,
+      "desc": "Forces 24 hour time display instead of AM/PM system; If prop is not set, then the default is based on Quasar lang language being used",
       "category": "behavior"
     },
 
@@ -33,6 +33,7 @@
     },
 
     "mask": {
+      "type": [ "String", "null" ],
       "default": "HH:mm",
       "examples": [ "HH:mm:ss", "YYYY-MM-DD HH:mm:ss", "HH:mm MMMM Do, YYYY" ]
     },

package/src/components/tooltip/QTooltip.json

@@ -8,12 +8,16 @@
   "props": {
     "max-height": {
       "extends": "size",
+      "type": [ "String", "null" ],
+      "default": null,
       "desc": "The maximum height of the Tooltip; Size in CSS units, including unit name",
       "category": "content"
     },
 
     "max-width": {
       "extends": "size",
+      "type": [ "String", "null" ],
+      "default": null,
       "desc": "The maximum width of the Tooltip; Size in CSS units, including unit name",
       "category": "content"
     },

package/src/components/virtual-scroll/use-virtual-scroll.json

@@ -7,7 +7,7 @@
     },
 
     "virtual-scroll-slice-size": {
-      "type": [ "Number", "String" ],
+      "type": [ "Number", "String", "null" ],
       "desc": "Minimum number of items to render in the virtual list",
       "default": "30",
       "examples": [ "virtual-scroll-slice-size=\"60\"" ],

package/src/composables/private/use-field.js

@@ -14,8 +14,10 @@ import uid from '../../utils/uid.js'
 import { prevent, stopAndPrevent } from '../../utils/event.js'
 import { addFocusFn, removeFocusFn } from '../../utils/private/focus-manager.js'
 
-function getTargetUid (val) {
-  return val === void 0 ? `f_${ uid() }` : val
+function getTargetUid (val, requiredForAttr) {
+  return val === void 0
+    ? (requiredForAttr === true ? `f_${ uid() }` : void 0)
+    : val
 }
 
 export function fieldValueIsFilled (val) {
@@ -74,12 +76,17 @@ export const useFieldProps = {
 
 export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popupShow', 'popupHide' ]
 
-export function useFieldState () {
+export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
   const { props, attrs, proxy, vnode } = getCurrentInstance()
 
   const isDark = useDark(props, proxy.$q)
 
   return {
+    requiredForAttr,
+    tag: tagProp === true
+      ? computed(() => props.tag)
+      : { value: 'label' },
+
     isDark,
 
     editable: computed(() =>
@@ -91,7 +98,9 @@ export function useFieldState () {
     hasPopupOpen: false,
 
     splitAttrs: useSplitAttrs(attrs, vnode),
-    targetUid: ref(getTargetUid(props.for)),
+    targetUid: ref(
+      getTargetUid(props.for, requiredForAttr)
+    ),
 
     rootRef: ref(null),
     targetRef: ref(null),
@@ -260,7 +269,7 @@ export default function (state) {
   watch(() => props.for, val => {
     // don't transform targetUid into a computed
     // prop as it will break SSR
-    state.targetUid.value = getTargetUid(val)
+    state.targetUid.value = getTargetUid(val, state.requiredForAttr)
   })
 
   function focusHandler () {
@@ -545,8 +554,12 @@ export default function (state) {
   })
 
   onMounted(() => {
-    if (isRuntimeSsrPreHydration.value === true && props.for === void 0) {
-      state.targetUid.value = getTargetUid()
+    if (
+      isRuntimeSsrPreHydration.value === true
+      && state.requiredForAttr === true
+      && props.for === void 0
+    ) {
+      state.targetUid.value = `f_${ uid() }` // getTargetUid(void 0, true)
     }
 
     props.autofocus === true && proxy.focus()
@@ -568,7 +581,7 @@ export default function (state) {
         }
       : attributes.value
 
-    return h('label', {
+    return h(state.tag.value, {
       ref: state.rootRef,
       class: [
         classes.value,

package/src/composables/private/use-validate.json

@@ -7,7 +7,8 @@
     },
 
     "error": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Does field have validation errors?",
       "category": "behavior"
     },

package/src/css/core/flex.sass

@@ -1,3 +1,5 @@
+@use 'sass:math'
+
 @import '../helpers/string.sass'
 
 @mixin fg($name, $size)
@@ -30,13 +32,13 @@
       .row
         #{str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
           height: auto
-          width: toFixed(percentage($i / $flex-cols), 10000)
+          width: toFixed(percentage(math.div($i, $flex-cols)), 10000)
         @if $i != 0 or $name != ''
           #{str-fe('> .offset<name>-<i>', $name, $noProcNotZero, $ic)}
-            margin-left: toFixed(percentage($i / $flex-cols), 10000)
+            margin-left: toFixed(percentage(math.div($i, $flex-cols)), 10000)
       .column
         #{str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
-          height: toFixed(percentage($i / $flex-cols), 10000)
+          height: toFixed(percentage(math.div($i, $flex-cols)), 10000)
           width: auto
       @if $size == 0 and $i == $flex-cols
         .row > .col-all

package/src/css/flex-addon.sass

@@ -1,3 +1,5 @@
+@use 'sass:math'
+
 @import './helpers/string.sass'
 @import './helpers/math.sass'
 
@@ -194,7 +196,7 @@
 
         @for $i from 0 through $flex-cols
           $ic: quote('' + $i)
-          $internal-size: toFixed(percentage($i / $flex-cols), 10000)
+          $internal-size: toFixed(percentage(math.div($i, $flex-cols)), 10000)
 
           #{str-fr('.row<name>', $name)}
             #{str-fe('> .col<name>-<i>', $name2c, $noProcNotZero2, $ic)}

package/src/css/helpers/math.sass

@@ -1,3 +1,5 @@
+@use 'sass:math'
+
 $PI: 3.14159265359
 
 @function pow($number, $exp)
@@ -21,22 +23,22 @@ $PI: 3.14159265359
 // toFixed(0.12345, 100) -> 0.12
 // toFixed(0.12345, 1000) -> 0.123
 @function toFixed($number, $power)
-  @return round($number * $power) / $power
+  @return math.div(round($number * $power), $power)
 
 @function sin($angle)
   $sin: 0
   // angle -> radians
-  $rad: $angle / 180 * $PI
+  $rad: math.div($angle, 180) * $PI
   // interval determines precision
   @for $i from 0 through 25
-    $sin: $sin + pow(-1, $i) * pow($rad, (2 * $i + 1)) / fact(2 * $i + 1)
+    $sin: $sin + math.div(pow(-1, $i) * pow($rad, (2 * $i + 1)), fact(2 * $i + 1))
   @return $sin
 
 @function cos($angle)
   $cos: 0
   // angle -> radians
-  $rad: $angle / 180 * $PI
+  $rad: math.div($angle, 180) * $PI
   // interval determines precision
   @for $i from 0 through 25
-    $cos: $cos + pow(-1, $i) * pow($rad, 2 * $i) / fact(2 * $i)
+    $cos: $cos + math.div(pow(-1, $i) * pow($rad, 2 * $i), fact(2 * $i))
   @return $cos