quasar 2.15.1 → 2.15.3

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

@@ -1,11 +1,11 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useSize from '../../composables/private/use-size.js'
-import { useCircularCommonProps } from './use-circular-progress.js'
+import useSize from '../../composables/private.use-size/use-size.js'
+import { useCircularCommonProps } from './circular-progress.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hMergeSlotSafely } from '../../utils/private/render.js'
-import { between } from '../../utils/format.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hMergeSlotSafely } from '../../utils/private.render/render.js'
+import { between } from '../../utils/format/format.js'
 
 const
   radius = 50,

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

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-size" ],
+  "mixins": [ "composables/private.use-size/use-size" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/circular-progress"
@@ -8,21 +8,21 @@
   "props": {
     "value": {
       "type": "Number",
-      "default": 0,
+      "default": "0",
       "desc": "Current progress (must be between min/max)",
       "category": "model"
     },
 
     "min": {
       "type": "Number",
-      "default": 0,
+      "default": "0",
       "desc": "Minimum value defining 'no progress' (must be lower than 'max')",
       "category": "model"
     },
 
     "max": {
       "type": "Number",
-      "default": 100,
+      "default": "100",
       "desc": "Maximum value defining 100% progress made (must be higher than 'min')",
       "category": "model"
     },
@@ -45,8 +45,8 @@
     "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" ],
+      "default": "'0.25em'",
+      "examples": [ "'1em'", "'16px'", "'2rem'" ],
       "category": "style"
     },
 
@@ -59,7 +59,7 @@
 
     "thickness": {
       "type": "Number",
-      "default": 0.2,
+      "default": "0.2",
       "desc": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size",
       "category": "style"
     },
@@ -67,7 +67,7 @@
     "angle": {
       "type": "Number",
       "desc": "Angle to rotate progress arc by",
-      "default": 0,
+      "default": "0",
       "category": "content"
     },
 
@@ -97,7 +97,7 @@
 
     "animation-speed": {
       "extends": "animation-speed",
-      "default": 600,
+      "default": "600",
       "addedIn": "v2.3"
     }
   },

package/src/components/circular-progress/{use-circular-progress.js → circular-progress.js}

@@ -1,4 +1,4 @@
-import { useSizeProps } from '../../composables/private/use-size.js'
+import { useSizeProps } from '../../composables/private.use-size/use-size.js'
 
 // also used by QKnob
 export const useCircularCommonProps = {

package/src/components/circular-progress/circular-progress.test.js

@@ -0,0 +1,14 @@
+import { describe, test, expect } from 'vitest'
+
+import { useCircularCommonProps } from './circular-progress.js'
+
+describe('[circularProgress API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useCircularCommonProps]', () => {
+      test('is defined correctly', () => {
+        expect(useCircularCommonProps).toBeTypeOf('object')
+        expect(Object.keys(useCircularCommonProps)).not.toHaveLength(0)
+      })
+    })
+  })
+})

package/src/components/color/QColor.js

@@ -1,6 +1,6 @@
 import { h, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
 
-import TouchPan from '../../directives/TouchPan.js'
+import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import QSlider from '../slider/QSlider.js'
 import QIcon from '../icon/QIcon.js'
@@ -10,16 +10,16 @@ import QTab from '../tabs/QTab.js'
 import QTabPanels from '../tab-panels/QTabPanels.js'
 import QTabPanel from '../tab-panels/QTabPanel.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useRenderCache from '../../composables/use-render-cache.js'
-import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
+import { useFormInject, useFormProps } from '../../composables/use-form/private.use-form.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { testPattern } from '../../utils/patterns.js'
-import throttle from '../../utils/throttle.js'
-import { stop } from '../../utils/event.js'
-import { hexToRgb, rgbToHex, rgbToString, textToRgb, rgbToHsv, hsvToRgb, luminosity } from '../../utils/colors.js'
-import { hDir } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { testPattern } from '../../utils/patterns/patterns.js'
+import throttle from '../../utils/throttle/throttle.js'
+import { stop } from '../../utils/event/event.js'
+import { hexToRgb, rgbToHex, rgbToString, textToRgb, rgbToHsv, hsvToRgb, luminosity } from '../../utils/colors/colors.js'
+import { hDir } from '../../utils/private.render/render.js'
 
 const palette = [
   'rgb(255,204,204)', 'rgb(255,230,204)', 'rgb(255,255,204)', 'rgb(204,255,204)', 'rgb(204,255,230)', 'rgb(204,255,255)', 'rgb(204,230,255)', 'rgb(204,204,255)', 'rgb(230,204,255)', 'rgb(255,204,255)',

package/src/components/color/QColor.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-form" ],
+  "mixins": [ "composables/use-form/private.use-form" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/color-picker"
@@ -9,39 +9,37 @@
     "model-value": {
       "extends": "model-value",
       "type": [ "String", "null", "undefined" ],
-      "examples": [ "v-model=\"myColor\"" ]
+      "examples": [ "# v-model=\"myColor\"" ]
     },
 
     "default-value": {
       "type": "String",
       "desc": "The default value to show when the model doesn't have one",
-      "examples": [ "default-value=\"#c0c0c0\"" ],
+      "examples": [ "'#c0c0c0'" ],
       "category": "model"
     },
 
     "default-view": {
       "type": "String",
       "desc": "The default view of the picker",
-      "default": "spectrum",
-      "values": [ "spectrum", "tune", "palette" ],
+      "default": "'spectrum'",
+      "values": [ "'spectrum'", "'tune'", "'palette'" ],
       "category": "behavior"
     },
 
     "format-model": {
       "type": "String",
       "desc": "Forces a certain model format upon the model",
-      "default": "auto",
-      "values": [ "auto", "hex", "rgb", "hexa", "rgba" ],
+      "default": "'auto'",
+      "values": [ "'auto'", "'hex'", "'rgb'", "'hexa'", "'rgba'" ],
       "category": "model"
     },
 
     "palette": {
       "type": "Array",
       "desc": "Use a custom palette of colors for the palette tab",
-      "default": "(hard-coded palette)",
-      "examples": [
-        ":palette=\"[ '#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A' ]\""
-      ],
+      "default": "# hard-coded palette",
+      "examples": [ "[ '#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A' ]" ],
       "category": "content"
     },
 

package/src/components/date/QDate.js

@@ -2,17 +2,17 @@ import { h, ref, computed, watch, Transition, nextTick, getCurrentInstance } fro
 
 import QBtn from '../btn/QBtn.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useRenderCache from '../../composables/use-render-cache.js'
-import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
+import { useFormProps, useFormAttrs, useFormInject } from '../../composables/use-form/private.use-form.js'
 import useDatetime, { useDatetimeProps, useDatetimeEmits, getDayHash } from './use-datetime.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
-import { formatDate, __splitDate, getDateDiff } from '../../utils/date.js'
-import { pad } from '../../utils/format.js'
-import { jalaaliMonthLength, toGregorian } from '../../utils/private/date-persian.js'
-import { isObject } from '../../utils/is.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
+import { formatDate, __splitDate, getDateDiff } from '../../utils/date/date.js'
+import { pad } from '../../utils/format/format.js'
+import { jalaaliMonthLength, toGregorian } from '../../utils/date/private.persian.js'
+import { isObject } from '../../utils/is/is.js'
 
 const yearsInterval = 20
 const views = [ 'Calendar', 'Years', 'Months' ]

package/src/components/date/QDate.json

@@ -11,44 +11,44 @@
       "type": [ "String", "Array", "Object", "null", "undefined" ],
       "desc": "Date(s) of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
       "examples": [
-        "v-model=\"myDate\"",
-        "v-model=\"[myDate1, myDate2]\"",
-        "v-model=\"[{ from: myDateFrom, to: myDateTo }]\"",
-        "v-model=\"[myDate1, { from: myDateFrom, to: myDateTo }, myDate2]\""
+        "# v-model=\"myDate\"",
+        "# v-model=\"[myDate1, myDate2]\"",
+        "# v-model=\"[{ from: myDateFrom, to: myDateTo }]\"",
+        "# v-model=\"[myDate1, { from: myDateFrom, to: myDateTo }, myDate2]\""
       ]
     },
 
     "title": {
       "type": "String",
       "desc": "When specified, it overrides the default header title; Makes sense when not in 'minimal' mode",
-      "examples": [ "Birthday" ],
+      "examples": [ "'Birthday'" ],
       "category": "content"
     },
 
     "subtitle": {
       "type": "String",
       "desc": "When specified, it overrides the default header subtitle; Makes sense when not in 'minimal' mode",
-      "examples": [ "John Doe" ],
+      "examples": [ "'John Doe'" ],
       "category": "content"
     },
 
     "default-year-month": {
       "type": "String",
       "desc": "The default year and month to display (in YYYY/MM format) when model is unfilled (undefined or null); Please ensure it is within the navigation min/max year-month (if using them)",
-      "examples": [ "1986/02" ],
+      "examples": [ "'1986/02'" ],
       "category": "model"
     },
 
     "mask": {
-      "default": "YYYY/MM/DD",
-      "examples": [ "YYYY-MM-DD", "MMMM Do, YYYY", "YYYY-MM-DD HH:mm:ss" ]
+      "default": "'YYYY/MM/DD'",
+      "examples": [ "'YYYY-MM-DD'", "'MMMM Do, YYYY'", "'YYYY-MM-DD HH:mm:ss'" ]
     },
 
     "default-view": {
       "type": "String",
       "desc": "The view which will be displayed by default",
-      "default": "Calendar",
-      "values": [ "Calendar", "Months", "Years" ],
+      "default": "'Calendar'",
+      "values": [ "'Calendar'", "'Months'", "'Years'" ],
       "category": "model"
     },
 
@@ -65,7 +65,7 @@
         "date": {
           "type": "String",
           "desc": "The current date being processed.",
-          "examples": [ "2018/11/05", "2021/10/25" ]
+          "examples": [ "'2018/11/05'", "'2021/10/25'" ]
         }
       },
       "returns": {
@@ -73,8 +73,8 @@
         "desc": "If true, the current date will be highlighted"
       },
       "examples": [
-        ":events=\"['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']\"",
-        ":events=\"date => date[9] % 3 === 0\""
+        "[ '2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23' ]",
+        "date => (date[ 9 ] % 3 === 0)"
       ],
       "category": "model"
     },
@@ -86,17 +86,17 @@
         "date": {
           "type": "String",
           "desc": "The current date being processed.",
-          "examples": [ "2018/11/05", "2021/10/25" ]
+          "examples": [ "'2018/11/05'", "'2021/10/25'" ]
         }
       },
       "returns": {
         "type": "String",
         "desc": "Color for the current date.",
-        "examples": [ "teal", "orange" ]
+        "examples": [ "'teal'", "'orange'" ]
       },
       "examples": [
-        "teal-10",
-        ":event-color=\"(date) => date[9] % 2 === 0 ? 'teal' : 'orange'\""
+        "'teal-10'",
+        "date => (date[ 9 ] % 2 === 0 ? 'teal' : 'orange')"
       ],
       "category": "style"
     },
@@ -108,7 +108,7 @@
         "date": {
           "type": "String",
           "desc": "The current date being processed.",
-          "examples": [ "2018/11/05", "2021/10/25" ]
+          "examples": [ "'2018/11/05'", "'2021/10/25'" ]
         }
       },
       "returns": {
@@ -116,9 +116,9 @@
         "desc": "If true, the current date will be made available for selection"
       },
       "examples": [
-        ":options=\"['2018/11/05', '2018/11/12', '2018/11/19', '2018/11/26' ]\"",
-        ":options=\"date => date[9] % 3 === 0\"",
-        ":options=\"date => date >= '2018/11/03' && date <= '2018/11/15'\""
+        "[ '2018/11/05', '2018/11/12', '2018/11/19', '2018/11/26' ]",
+        "date => (date[ 9 ] % 3 === 0)",
+        "date => (date >= '2018/11/03' && date <= '2018/11/15')"
       ],
       "category": "model"
     },
@@ -126,14 +126,14 @@
     "navigation-min-year-month": {
       "type": "String",
       "desc": "Lock user from navigating below a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop",
-      "examples": [ "2020/07" ],
+      "examples": [ "'2020/07'" ],
       "category": "selection"
     },
 
     "navigation-max-year-month": {
       "type": "String",
       "desc": "Lock user from navigating above a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop",
-      "examples": [ "2020/10" ],
+      "examples": [ "'2020/10'" ],
       "category": "selection"
     },
 
@@ -146,10 +146,11 @@
     "first-day-of-week": {
       "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)",
+      "default": "# based on configured Quasar lang language",
       "examples": [
-        "first-day-of-week=\"1\"",
-        ":first-day-of-week=\"selectedFirstDayOfTheWeek\""
+        "1",
+        "# first-day-of-week=\"1\"",
+        "# :first-day-of-week=\"selectedFirstDayOfTheWeek\""
       ],
       "category": "model"
     },
@@ -201,7 +202,7 @@
         "reason": {
           "type": "String",
           "desc": "Reason of the user interaction (what was picked)",
-          "values": [ "add-day", "remove-day", "add-range", "remove-range", "mask", "locale", "year", "month" ]
+          "values": [ "'add-day'", "'remove-day'", "'add-range'", "'remove-range'", "'mask'", "'locale'", "'year'", "'month'" ]
         },
         "details": {
           "type": "Object",
@@ -379,7 +380,9 @@
 
   "methods": {
     "setToday": {
-      "desc": "Change model to today"
+      "desc": "Change model to today",
+      "params": null,
+      "returns": null
     },
 
     "setView": {
@@ -389,9 +392,10 @@
           "type": "String",
           "required": true,
           "desc": "QDate view name",
-          "values": [ "Calendar", "Months", "Years" ]
+          "values": [ "'Calendar'", "'Months'", "'Years'" ]
         }
-      }
+      },
+      "returns": null
     },
 
     "offsetCalendar": {
@@ -401,13 +405,14 @@
           "type": "String",
           "required": true,
           "desc": "What to increment/decrement",
-          "values": [ "month", "year" ]
+          "values": [ "'month'", "'year'" ]
         },
         "descending": {
           "type": "Boolean",
           "desc": "Decrement?"
         }
-      }
+      },
+      "returns": null
     },
 
     "setCalendarTo": {
@@ -421,7 +426,8 @@
           "type": "Number",
           "desc": "The month"
         }
-      }
+      },
+      "returns": null
     },
 
     "setEditingRange": {
@@ -463,7 +469,8 @@
             }
           }
         }
-      }
+      },
+      "returns": null
     }
   }
 }

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

@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 
-import { toJalaali } from '../../utils/private/date-persian.js'
-import { pad } from '../../utils/format.js'
+import { toJalaali } from '../../utils/date/private.persian.js'
+import { pad } from '../../utils/format/format.js'
 
 const calendars = [ 'gregorian', 'persian' ]
 

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

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-form" ],
+  "mixins": [ "composables/use-form/private.use-form" ],
 
   "props": {
     "landscape": {
@@ -17,27 +17,27 @@
     "locale": {
       "type": "Object",
       "desc": "Locale formatting options",
-      "examples": [ ":locale=\"{ monthsShort: ['Ian', 'Feb', 'Mar', '...'] }\"" ],
+      "examples": [ "{ monthsShort: [ 'Ian', 'Feb', 'Mar', '...' ] }" ],
       "definition": {
         "days": {
           "type": "Array",
           "desc": "List of full day names (DDDD), starting with Sunday",
-          "examples": [ "['Duminica', 'Luni', 'Marti', '...']" ]
+          "examples": [ "[ 'Duminica', 'Luni', 'Marti', '...' ]" ]
         },
         "daysShort": {
           "type": "Array",
           "desc": "List of short day names (DDD), starting with Sunday",
-          "examples": [ "['Dum', 'Lun', 'Mar', '...']" ]
+          "examples": [ "[ 'Dum', 'Lun', 'Mar', '...' ]" ]
         },
         "months": {
           "type": "Array",
           "desc": "List of full month names (MMMM), starting with January",
-          "examples": [ "['Ianuarie', 'Februarie', 'Martie', '...']" ]
+          "examples": [ "[ 'Ianuarie', 'Februarie', 'Martie', '...' ]" ]
         },
         "monthsShort": {
           "type": "Array",
           "desc": "List of short month names (MMM), starting with January",
-          "examples": [ "['Ian', 'Feb', 'Mar', '...']" ]
+          "examples": [ "[ 'Ian', 'Feb', 'Mar', '...' ]" ]
         }
       },
       "category": "model"
@@ -46,8 +46,8 @@
     "calendar": {
       "type": "String",
       "desc": "Specify calendar type",
-      "default": "gregorian",
-      "values": [ "gregorian", "persian" ],
+      "default": "'gregorian'",
+      "values": [ "'gregorian'", "'persian'" ],
       "category": "model"
     },
 

package/src/components/dialog/QDialog.js

@@ -1,19 +1,19 @@
 import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
 
-import useHistory from '../../composables/private/use-history.js'
-import useTimeout from '../../composables/use-timeout.js'
-import useTick from '../../composables/use-tick.js'
-import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
-import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
-import usePortal from '../../composables/private/use-portal.js'
-import usePreventScroll from '../../composables/private/use-prevent-scroll.js'
-
-import { createComponent } from '../../utils/private/create.js'
-import { childHasFocus } from '../../utils/dom.js'
-import { hSlot } from '../../utils/private/render.js'
-import { addEscapeKey, removeEscapeKey } from '../../utils/private/escape-key.js'
-import { addFocusout, removeFocusout } from '../../utils/private/focusout.js'
-import { addFocusFn } from '../../utils/private/focus-manager.js'
+import useHistory from '../../composables/private.use-history/use-history.js'
+import useTimeout from '../../composables/use-timeout/use-timeout.js'
+import useTick from '../../composables/use-tick/use-tick.js'
+import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js'
+import useTransition, { useTransitionProps } from '../../composables/private.use-transition/use-transition.js'
+import usePortal from '../../composables/private.use-portal/use-portal.js'
+import usePreventScroll from '../../composables/private.use-prevent-scroll/use-prevent-scroll.js'
+
+import { createComponent } from '../../utils/private.create/create.js'
+import { childHasFocus } from '../../utils/dom/dom.js'
+import { hSlot } from '../../utils/private.render/render.js'
+import { addEscapeKey, removeEscapeKey } from '../../utils/private.keyboard/escape-key.js'
+import { addFocusout, removeFocusout } from '../../utils/private.focus/focusout.js'
+import { addFocusFn } from '../../utils/private.focus/focus-manager.js'
 
 let maximizedModals = 0
 
@@ -235,6 +235,7 @@ export default createComponent({
           ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
           : void 0
         ) || refocusTarget).focus()
+
         refocusTarget = null
       }
 
@@ -250,16 +251,26 @@ export default createComponent({
       addFocusFn(() => {
         let node = innerRef.value
 
-        if (node === null || node.contains(document.activeElement) === true) {
-          return
+        if (node === null) return
+
+        if (selector !== void 0) {
+          const target = node.querySelector(selector)
+          if (target !== null) {
+            target.focus({ preventScroll: true })
+            return
+          }
         }
 
-        node = (selector !== '' ? node.querySelector(selector) : null)
-          || node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
-          || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
-          || node.querySelector('[autofocus], [data-autofocus]')
-          || node
-        node.focus({ preventScroll: true })
+        if (node.contains(document.activeElement) !== true) {
+          node = (
+            node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+            || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+            || node.querySelector('[autofocus], [data-autofocus]')
+            || node
+          )
+
+          node.focus({ preventScroll: true })
+        }
       })
     }