quasar 2.2.3 → 2.3.2

package/dist/vetur/quasar-attributes.json

@@ -1027,6 +1027,10 @@
     "type": "boolean",
     "description": "No animation when model changes"
   },
+  "q-circular-progress/animation-speed": {
+    "type": "string|number",
+    "description": "Animation speed (in milliseconds, without unit)"
+  },
   "q-color/name": {
     "type": "string",
     "description": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL"
@@ -2132,7 +2136,7 @@
     "description": "Adds a default shadow to the footer"
   },
   "q-footer/height-hint": {
-    "type": "number|string ",
+    "type": "number|string",
     "description": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter"
   },
   "q-form/autofocus": {
@@ -2172,7 +2176,7 @@
     "description": "Adds a default shadow to the header"
   },
   "q-header/height-hint": {
-    "type": "number|string ",
+    "type": "number|string",
     "description": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader"
   },
   "q-icon/size": {
@@ -2575,6 +2579,10 @@
     "type": "string",
     "description": "One of Quasar's embedded transitions"
   },
+  "q-intersection/transition-duration": {
+    "type": "string|number",
+    "description": "Transition duration (in milliseconds, without unit)"
+  },
   "q-intersection/disable": {
     "type": "boolean",
     "description": "Disable visibility observable (content will remain as it was, visible or hidden)"
@@ -2819,6 +2827,10 @@
     "type": "boolean",
     "description": "No transition when model changes"
   },
+  "q-linear-progress/animation-speed": {
+    "type": "string|number",
+    "description": "Animation speed (in milliseconds, without unit)"
+  },
   "q-markup-table/dense": {
     "type": "boolean",
     "description": "Dense mode; occupies less space"
@@ -5347,6 +5359,10 @@
     "type": "string",
     "description": "Color name for selected nodes (from the Quasar Color Palette)"
   },
+  "q-tree/dense": {
+    "type": "boolean",
+    "description": "Dense mode; occupies less space"
+  },
   "q-tree/dark": {
     "type": "boolean",
     "description": "Notify the component that the background is a dark color"

package/dist/vetur/quasar-tags.json

@@ -357,7 +357,8 @@
       "indeterminate",
       "show-value",
       "reverse",
-      "instant-feedback"
+      "instant-feedback",
+      "animation-speed"
     ],
     "description": ""
   },
@@ -844,6 +845,7 @@
       "margin",
       "threshold",
       "transition",
+      "transition-duration",
       "disable"
     ],
     "description": ""
@@ -939,7 +941,8 @@
       "indeterminate",
       "query",
       "rounded",
-      "instant-feedback"
+      "instant-feedback",
+      "animation-speed"
     ],
     "description": ""
   },
@@ -1924,6 +1927,7 @@
       "control-color",
       "text-color",
       "selected-color",
+      "dense",
       "dark",
       "icon",
       "tick-strategy",

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.2.3",
+  "version": "2.3.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -3155,6 +3155,16 @@
               "description": "No animation when model changes",
               "doc-url": "https://v2.quasar.dev/vue-components/circular-progress",
               "type": "boolean"
+            },
+            {
+              "name": "animation-speed",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Animation speed (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/circular-progress",
+              "default": "600"
             }
           ],
           "slots": [
@@ -6705,7 +6715,7 @@
               "name": "height-hint",
               "value": {
                 "kind": "expression",
-                "type": "number|String "
+                "type": "number|string"
               },
               "description": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter\n\nExamples:\n150",
               "doc-url": "https://v2.quasar.dev/layout/header-and-footer",
@@ -6897,7 +6907,7 @@
               "name": "height-hint",
               "value": {
                 "kind": "expression",
-                "type": "number|String "
+                "type": "number|string"
               },
               "description": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader\n\nExamples:\n150",
               "doc-url": "https://v2.quasar.dev/layout/header-and-footer",
@@ -8140,6 +8150,16 @@
               "description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
               "doc-url": "https://v2.quasar.dev/vue-components/intersection"
             },
+            {
+              "name": "transition-duration",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Transition duration (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/intersection",
+              "default": "300"
+            },
             {
               "name": "disable",
               "value": {
@@ -8952,6 +8972,16 @@
               "description": "No transition when model changes",
               "doc-url": "https://v2.quasar.dev/vue-components/linear-progress",
               "type": "boolean"
+            },
+            {
+              "name": "animation-speed",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Animation speed (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/linear-progress",
+              "default": "300"
             }
           ],
           "slots": [
@@ -11517,6 +11547,7 @@
                 {
                   "name": "info",
                   "type": "object",
+                  "description": "An object containing scroll information",
                   "doc-url": "https://v2.quasar.dev/vue-components/scroll-area"
                 }
               ],
@@ -17427,6 +17458,16 @@
               "description": "Color name for selected nodes (from the Quasar Color Palette)\n\nExamples:\nprimary\nteal-10",
               "doc-url": "https://v2.quasar.dev/vue-components/tree"
             },
+            {
+              "name": "dense",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Dense mode; occupies less space",
+              "doc-url": "https://v2.quasar.dev/vue-components/tree",
+              "type": "boolean"
+            },
             {
               "name": "dark",
               "value": {

package/icon-set/svg-ionicons-v6.js

@@ -0,0 +1,225 @@
+
+import {
+  ionCheckmark,
+  ionAlert,
+  ionInformationCircleOutline,
+  ionArrowUp,
+  ionArrowForward,
+  ionArrowDown,
+  ionArrowBack,
+  ionCaretDownOutline,
+  ionAperture,
+  ionOptions,
+  ionApps,
+  ionRefresh,
+  ionSquare,
+  ionCloseCircle,
+  ionTime,
+  ionCalendar,
+  ionLink,
+  ionExpand,
+  ionChatboxEllipses,
+  ionPrint,
+  ionArrowUndo,
+  ionArrowRedo,
+  ionCodeSlash,
+  ionAdd,
+  ionClose,
+  ionPlaySkipBackCircle,
+  ionPlaySkipForwardCircle,
+  ionStar,
+  ionCreate,
+  ionWarning,
+  ionPlay,
+  ionAddCircle,
+  ionCloudUpload,
+  ionTrash,
+  ionCheckmarkDone,
+  ionChevronDown,
+  ionChevronUp,
+  ionChevronBack,
+  ionChevronForward,
+  ionChevronBackCircle,
+  ionChevronForwardCircle
+} from '@quasar/extras/ionicons-v6'
+
+// there are some icons that are needed but not available
+// so we import them from MDI as svgs
+
+import {
+  mdiFormatBold,
+  mdiFormatItalic,
+  mdiFormatStrikethroughVariant,
+  mdiFormatUnderline,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatSubscript,
+  mdiFormatSuperscript,
+  mdiFormatAlignLeft,
+  mdiFormatAlignCenter,
+  mdiFormatAlignRight,
+  mdiFormatAlignJustify,
+  mdiFormatIndentDecrease,
+  mdiFormatIndentIncrease,
+  mdiFormatClear,
+  mdiFormatColorText,
+  mdiFormatSize,
+  mdiMinus,
+  mdiFormatHeader1,
+  mdiFormatHeader2,
+  mdiFormatHeader3,
+  mdiFormatHeader4,
+  mdiFormatHeader5,
+  mdiFormatHeader6,
+  mdiNumeric1Box,
+  mdiNumeric2Box,
+  mdiNumeric3Box,
+  mdiNumeric4Box,
+  mdiNumeric5Box,
+  mdiNumeric6Box,
+  mdiNumeric7Box,
+  mdiFormatFont
+} from '@quasar/extras/mdi-v6'
+
+export default {
+  name: 'svg-ionicons-v6',
+  type: {
+    positive: ionCheckmark,
+    negative: ionAlert,
+    info: ionInformationCircleOutline,
+    warning: ionAlert
+  },
+  arrow: {
+    up: ionArrowUp,
+    right: ionArrowForward,
+    down: ionArrowDown,
+    left: ionArrowBack,
+    dropdown: ionCaretDownOutline
+  },
+  chevron: {
+    left: ionArrowBack,
+    right: ionArrowForward
+  },
+  colorPicker: {
+    spectrum: ionAperture,
+    tune: ionOptions,
+    palette: ionApps
+  },
+  pullToRefresh: {
+    icon: ionRefresh
+  },
+  carousel: {
+    left: ionChevronBack,
+    right: ionChevronForward,
+    up: ionChevronUp,
+    down: ionChevronDown,
+    navigationIcon: ionSquare
+  },
+  chip: {
+    remove: ionCloseCircle,
+    selected: ionCheckmark
+  },
+  datetime: {
+    arrowLeft: ionChevronBack,
+    arrowRight: ionChevronForward,
+    now: ionTime,
+    today: ionCalendar
+  },
+  editor: { // requires Material icons for some as Ionicons simply does not have everything needed
+    hyperlink: ionLink,
+    toggleFullscreen: ionExpand,
+    quote: ionChatboxEllipses,
+    print: ionPrint,
+    undo: ionArrowUndo,
+    redo: ionArrowRedo,
+    code: ionCodeSlash,
+    viewSource: ionCodeSlash,
+
+    bold: mdiFormatBold,
+    italic: mdiFormatItalic,
+    strikethrough: mdiFormatStrikethroughVariant,
+    underline: mdiFormatUnderline,
+    unorderedList: mdiFormatListBulleted,
+    orderedList: mdiFormatListNumbered,
+    subscript: mdiFormatSubscript,
+    superscript: mdiFormatSuperscript,
+    left: mdiFormatAlignLeft,
+    center: mdiFormatAlignCenter,
+    right: mdiFormatAlignRight,
+    justify: mdiFormatAlignJustify,
+    outdent: mdiFormatIndentDecrease,
+    indent: mdiFormatIndentIncrease,
+    removeFormat: mdiFormatClear,
+    formatting: mdiFormatColorText,
+    fontSize: mdiFormatSize,
+    align: mdiFormatAlignLeft,
+    hr: mdiMinus,
+    heading: mdiFormatSize,
+    heading1: mdiFormatHeader1,
+    heading2: mdiFormatHeader2,
+    heading3: mdiFormatHeader3,
+    heading4: mdiFormatHeader4,
+    heading5: mdiFormatHeader5,
+    heading6: mdiFormatHeader6,
+    size: mdiFormatSize,
+    size1: mdiNumeric1Box,
+    size2: mdiNumeric2Box,
+    size3: mdiNumeric3Box,
+    size4: mdiNumeric4Box,
+    size5: mdiNumeric5Box,
+    size6: mdiNumeric6Box,
+    size7: mdiNumeric7Box,
+    font: mdiFormatFont
+  },
+  expansionItem: {
+    icon: ionCaretDownOutline,
+    denseIcon: ionCaretDownOutline
+  },
+  fab: {
+    icon: ionAdd,
+    activeIcon: ionClose
+  },
+  field: {
+    clear: ionCloseCircle,
+    error: ionAlert
+  },
+  pagination: {
+    first: ionPlaySkipBackCircle,
+    prev: ionChevronBackCircle,
+    next: ionChevronForwardCircle,
+    last: ionPlaySkipForwardCircle
+  },
+  rating: {
+    icon: ionStar
+  },
+  stepper: {
+    done: ionCheckmark,
+    active: ionCreate,
+    error: ionWarning
+  },
+  tabs: {
+    left: ionChevronBack,
+    right: ionChevronForward,
+    up: ionChevronUp,
+    down: ionChevronDown
+  },
+  table: {
+    arrowUp: ionArrowUp,
+    warning: ionWarning,
+    firstPage: ionPlaySkipBackCircle,
+    prevPage: ionChevronBackCircle,
+    nextPage: ionChevronForwardCircle,
+    lastPage: ionPlaySkipForwardCircle
+  },
+  tree: {
+    icon: ionPlay
+  },
+  uploader: {
+    done: ionCheckmark,
+    clear: ionClose,
+    add: ionAddCircle,
+    upload: ionCloudUpload,
+    removeQueue: ionTrash,
+    removeUploaded: ionCheckmarkDone
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.2.3",
+  "version": "2.3.2",
   "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",
@@ -63,10 +63,12 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app": "^3.0.0",
-    "@quasar/extras": "^1.11.0",
+    "@quasar/extras": "^1.12.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "babel-preset-es2015-rollup": "^3.0.0",
+    "cli-highlight": "^2.1.11",
+    "diff": "^5.0.0",
     "eslint": "^7.4.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-friendly-formatter": "^4.0.1",
@@ -75,6 +77,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^7.0.0",
     "eslint-webpack-plugin": "^2.4.1",
+    "fast-glob": "^3.2.7",
     "json-beautify": "^1.1.1",
     "module-alias": "^2.2.2",
     "prettier": "^2.4.1",

package/src/api.extends.json

@@ -95,6 +95,13 @@
       "category": "transition"
     },
 
+    "animation-speed": {
+      "type": [ "String", "Number" ],
+      "desc": "Animation speed (in milliseconds, without unit)",
+      "examples": [ 500, "1200" ],
+      "category": "style"
+    },
+
     "model-value": {
       "desc": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
       "required": true,

package/src/body.js

@@ -82,12 +82,18 @@ export default {
       }
 
       ssrContext._meta.bodyClasses += cls.join(' ')
-      return
-    }
 
-    const { $q } = opts
+      const brand = $q.config.brand
+      if (brand !== void 0) {
+        const vars = Object.keys(brand)
+          .map(key => `--q-${ key }:${ brand[ key ] };`)
+          .join('')
+
+        ssrContext._meta.endingHeadTags += `<style>:root{${ vars }}</style>`
+      }
 
-    $q.config.brand !== void 0 && setColors($q.config.brand)
+      return
+    }
 
     if (this.__installed === true) { return }
 
@@ -95,6 +101,10 @@ export default {
       applyClientSsrCorrections()
     }
     else {
+      const { $q } = opts
+
+      $q.config.brand !== void 0 && setColors($q.config.brand)
+
       const cls = getBodyClasses(client, $q.config)
       document.body.classList.add.apply(document.body.classList, cls)
     }

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

@@ -24,6 +24,11 @@ export default createComponent({
       default: 0
     },
 
+    animationSpeed: {
+      type: [ String, Number ],
+      default: 600
+    },
+
     indeterminate: Boolean
   },
 
@@ -43,7 +48,7 @@ export default createComponent({
 
     const circleStyle = computed(() => (
       props.instantFeedback !== true && props.indeterminate !== true
-        ? { transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease' }
+        ? { transition: `stroke-dashoffset ${ props.animationSpeed }ms ease 0s, stroke ${ props.animationSpeed }ms ease` }
         : ''
     ))
 

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

@@ -91,6 +91,12 @@
       "type": "Boolean",
       "desc": "No animation when model changes",
       "category": "behavior"
+    },
+
+    "animation-speed": {
+      "extends": "animation-speed",
+      "default": 600,
+      "addedIn": "v2.3"
     }
   },
 

package/src/components/date/QDate.json

@@ -61,6 +61,17 @@
     "events": {
       "type": [ "Array", "Function" ],
       "desc": "A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not); If using a function then for best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "date": {
+          "type": "String",
+          "desc": "The current date being processed.",
+          "examples": [ "2018/11/05", "2021/10/25" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "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\""
@@ -71,6 +82,18 @@
     "event-color": {
       "type": [ "String", "Function" ],
       "desc": "Color name (from the Quasar Color Palette); If using a function, it receives the date as a String and must return a String (color for the received date); If using a function then for best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "date": {
+          "type": "String",
+          "desc": "The current date being processed.",
+          "examples": [ "2018/11/05", "2021/10/25" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "Color for the current date.",
+        "examples": [ "teal", "orange" ]
+      },
       "examples": [
         "teal-10",
         ":event-color=\"(date) => date[9] % 2 === 0 ? 'teal' : 'orange'\""
@@ -81,6 +104,17 @@
     "options": {
       "type": [ "Array", "Function" ],
       "desc": "Optionally configure the days that are selectable; If using a function, it receives the date as a String and must return a Boolean (is date acceptable or not); If using a function then for best performance, reference it from your scope and do not define it inline; Incompatible with 'range' prop",
+      "params": {
+        "date": {
+          "type": "String",
+          "desc": "The current date being processed.",
+          "examples": [ "2018/11/05", "2021/10/25" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "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\"",

package/src/components/editor/QEditor.js

@@ -80,12 +80,12 @@ export default createComponent({
   ],
 
   setup (props, { slots, emit, attrs }) {
-    const { proxy } = getCurrentInstance()
+    const { proxy, vnode } = getCurrentInstance()
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
     const { inFullscreen, toggleFullscreen } = useFullscreen()
-    const splitAttrs = useSplitAttrs(attrs)
+    const splitAttrs = useSplitAttrs(attrs, vnode)
 
     const rootRef = ref(null)
     const contentRef = ref(null)

package/src/components/editor/QEditor.json

@@ -120,8 +120,12 @@
         },
         "disable": {
           "type": [ "Boolean", "Function" ],
-          "desc": "Is button disabled? If specifying a function, return a Boolean value.",
-          "examples": [ "() => this.userIsActive()" ]
+          "desc": "Is button disabled?",
+          "returns": {
+            "type": "Boolean",
+            "desc": "If true, the button will be disabled"
+          },
+          "examples": [ "!user.active", "() => !checkIfUserIsActive()" ]
         },
         "type": {
           "type": "String",

package/src/components/footer/QFooter.json

@@ -32,7 +32,7 @@
     },
 
     "height-hint": {
-      "type": [ "Number", "String " ],
+      "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter",
       "default": 50,
       "examples": [ "150" ],

package/src/components/header/QHeader.json

@@ -42,7 +42,7 @@
     },
 
     "height-hint": {
-      "type": [ "Number", "String " ],
+      "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader",
       "default": 50,
       "examples": [ "150" ],

package/src/components/icon/QIcon.js

@@ -33,7 +33,7 @@ const mRE = /^M/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faLaRE = /^[l|f]a[s|r|l|b|d]? /
+const faLaRE = /^[l|f]a[s|r|l|b|d|k]? /
 
 export default createComponent({
   name: 'QIcon',