quasar 2.5.5 → 2.6.2

package/lang/zh-TW.mjs

@@ -0,0 +1,90 @@
+export default {
+  isoName: 'zh-TW',
+  nativeName: '中文（繁體）',
+  label: {
+    clear: '清除',
+    ok: '確定',
+    cancel: '取消',
+    close: '關閉',
+    set: '設定',
+    select: '選擇',
+    reset: '重置',
+    remove: '移除',
+    update: '更新',
+    create: '新增',
+    search: '搜尋',
+    filter: '篩選',
+    refresh: '更新'
+  },
+  date: {
+    days: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
+    daysShort: '週日_週一_週二_週三_週四_週五_週六'.split('_'),
+    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
+    monthsShort: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
+    headerTitle: date => new Intl.DateTimeFormat('zh-TW', {
+      weekday: 'short', month: 'short', day: 'numeric'
+    }).format(date),
+    firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: '日'
+  },
+  table: {
+    noData: '沒有資料',
+    noResults: '沒有相符資料',
+    loading: '載入中...',
+    selectedRecords: rows => '已選擇 ' + rows + ' 列',
+    recordsPerPage: '每頁列數：',
+    allRows: '全部',
+    pagination: (start, end, total) => start + '-' + end + ' 列，共 ' + total + ' 列',
+    columns: '欄位'
+  },
+  editor: {
+    url: '網址',
+    bold: '粗體',
+    italic: '斜體',
+    strikethrough: '刪除線',
+    underline: '下劃線',
+    unorderedList: '項目符號清單',
+    orderedList: '編號清單',
+    subscript: '下標',
+    superscript: '上標',
+    hyperlink: '超連結',
+    toggleFullscreen: '切換全螢幕',
+    quote: '段落引用',
+    left: '靠左對齊',
+    center: '置中對齊',
+    right: '靠右對齊',
+    justify: '分散對齊',
+    print: '列印',
+    outdent: '減少縮排',
+    indent: '增加縮排',
+    removeFormat: '清除格式',
+    formatting: '區塊元素',
+    fontSize: '字型大小',
+    align: '對齊',
+    hr: '水平分隔線',
+    undo: '復原',
+    redo: '取消復原',
+    heading1: '標題 1',
+    heading2: '標題 2',
+    heading3: '標題 3',
+    heading4: '標題 4',
+    heading5: '標題 5',
+    heading6: '標題 6',
+    paragraph: '段落',
+    code: '程式碼',
+    size1: '非常小',
+    size2: '稍小',
+    size3: '正常',
+    size4: '稍大',
+    size5: '大',
+    size6: '非常大',
+    size7: '超級大',
+    defaultFont: '預設字型',
+    viewSource: '切換原始碼'
+  },
+  tree: {
+    noNodes: '沒有節點',
+    noResults: '沒有相符節點'
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.5.5",
+  "version": "2.6.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",
@@ -17,7 +17,9 @@
   "scripts": {
     "clean": "node build/script.clean.js",
     "dev": "cd ./dev && node ./script.dev.js dev && cd ..",
+    "dev:build": "cd ./dev && node ./script.build.js dev && cd ..",
     "dev:ssr": "cd ./dev && node ./script.dev.js dev -m ssr && cd ..",
+    "dev:build:ssr": "cd ./dev && node ./script.build.js dev -m ssr && cd ..",
     "dev:cordova:ios": "cd ./dev && node ./script.dev.js dev -m cordova -T ios && cd ..",
     "dev:cordova:android": "cd ./dev && node ./script.dev.js dev -m cordova -T android && cd ..",
     "dev:capacitor:ios": "cd ./dev && node ./script.dev.js dev -m capacitor -T ios && cd ..",
@@ -64,14 +66,15 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "@babel/eslint-parser": "^7.13.14",
-    "@quasar/app": "^3.0.0",
+    "@quasar/app-vite": "^1.0.0-beta.5",
     "@quasar/extras": "^1.12.0",
     "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.1",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
+    "autoprefixer": "^10.4.4",
     "babel-preset-es2015-rollup": "^3.0.0",
     "cli-highlight": "^2.1.11",
+    "cssnano": "^5.1.4",
     "diff": "^5.0.0",
     "eslint": "^7.4.0",
     "eslint-config-standard": "^16.0.2",
@@ -82,16 +85,15 @@
     "eslint-plugin-node": "^11.1.0",
     "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",
+    "postcss-rtlcss": "^3.5.3",
     "prettier": "^2.4.1",
     "quasar": "^2.1.9",
     "recast": "^0.18.5",
     "rimraf": "^3.0.1",
     "rollup": "^2.34.0",
-    "rollup-plugin-typescript2": "^0.29.0",
     "table": "^6.0.4",
     "tslib": "^2.0.3",
     "uglify-es": "^3.3.9",

package/src/components/btn/QBtn.js

@@ -84,7 +84,7 @@ export default createComponent({
           onClick,
           onKeydown,
           onMousedown,
-          onTouchstartPassive
+          onTouchstart
         }
       }
 
@@ -153,12 +153,12 @@ export default createComponent({
       // is it already destroyed?
       if (rootRef.value === null) { return }
 
-      if (isKeyCode(e, [ 13, 32 ]) === true) {
-        stopAndPrevent(e)
+      emit('keydown', e)
 
-        if (keyboardTarget !== rootRef.value) {
-          keyboardTarget !== null && cleanup()
+      if (isKeyCode(e, [ 13, 32 ]) === true && keyboardTarget !== rootRef.value) {
+        keyboardTarget !== null && cleanup()
 
+        if (e.defaultPrevented !== true) {
           // focus external button if the focus helper was focused before
           rootRef.value.focus()
 
@@ -167,15 +167,19 @@ export default createComponent({
           document.addEventListener('keyup', onPressEnd, true)
           rootRef.value.addEventListener('blur', onPressEnd, passiveCapture)
         }
-      }
 
-      emit('keydown', e)
+        stopAndPrevent(e)
+      }
     }
 
-    function onTouchstartPassive (e) {
+    function onTouchstart (e) {
       // is it already destroyed?
       if (rootRef.value === null) { return }
 
+      emit('touchstart', e)
+
+      if (e.defaultPrevented === true) { return }
+
       if (touchTarget !== rootRef.value) {
         touchTarget !== null && cleanup()
         touchTarget = rootRef.value
@@ -192,23 +196,21 @@ export default createComponent({
       mouseTimer = setTimeout(() => {
         avoidMouseRipple = false
       }, 200)
-
-      emit('touchstart', e)
     }
 
     function onMousedown (e) {
       // is it already destroyed?
       if (rootRef.value === null) { return }
 
-      if (mouseTarget !== rootRef.value) {
+      e.qSkipRipple = avoidMouseRipple === true
+      emit('mousedown', e)
+
+      if (e.defaultPrevented !== true && mouseTarget !== rootRef.value) {
         mouseTarget !== null && cleanup()
         mouseTarget = rootRef.value
         rootRef.value.classList.add('q-btn--active')
         document.addEventListener('mouseup', onPressEnd, passiveCapture)
       }
-
-      e.qSkipRipple = avoidMouseRipple === true
-      emit('mousedown', e)
     }
 
     function onPressEnd (e) {

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

@@ -88,13 +88,13 @@ export default function (props) {
 
     return props.padding !== void 0
       ? Object.assign({}, obj, {
-          padding: props.padding
-            .split(/\s+/)
-            .map(v => (v in padding ? padding[ v ] + 'px' : v))
-            .join(' '),
-          minWidth: '0',
-          minHeight: '0'
-        })
+        padding: props.padding
+          .split(/\s+/)
+          .map(v => (v in padding ? padding[ v ] + 'px' : v))
+          .join(' '),
+        minWidth: '0',
+        minHeight: '0'
+      })
       : obj
   })
 

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

@@ -16,7 +16,7 @@
 
     "to": {
       "type": [ "String", "Object" ],
-      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used",
+      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used",
       "examples": [
         "/home/dashboard",
         ":to=\"{ name: 'my-route-name' }\""
@@ -26,7 +26,7 @@
 
     "replace": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used",
+      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used",
       "category": "navigation"
     },
 

package/src/components/date/QDate.js

@@ -12,7 +12,7 @@ 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 { isPlainObject } from '../../utils/private/is.js'
+import { isObject } from '../../utils/private/is.js'
 
 const yearsInterval = 20
 const views = [ 'Calendar', 'Years', 'Months' ]
@@ -165,7 +165,7 @@ export default createComponent({
     const rangeModel = computed(() => {
       const fn = date => decodeString(date, innerMask.value, innerLocale.value)
       return normalizedModel.value
-        .filter(date => isPlainObject(date) === true && date.from !== void 0 && date.to !== void 0)
+        .filter(date => isObject(date) === true && date.from !== void 0 && date.to !== void 0)
         .map(range => ({ from: fn(range.from), to: fn(range.to) }))
         .filter(range => range.from.dateHash !== null && range.to.dateHash !== null && range.from.dateHash < range.to.dateHash)
     })

package/src/components/dialog/QDialog.js

@@ -381,11 +381,11 @@ export default createComponent({
         }, () => (
           useBackdrop.value === true
             ? h('div', {
-                class: 'q-dialog__backdrop fixed-full',
-                style: transitionStyle.value,
-                'aria-hidden': 'true',
-                onMousedown: onBackdropClick
-              })
+              class: 'q-dialog__backdrop fixed-full',
+              style: transitionStyle.value,
+              'aria-hidden': 'true',
+              onMousedown: onBackdropClick
+            })
             : null
         )),
 
@@ -395,12 +395,12 @@ export default createComponent({
           () => (
             showing.value === true
               ? h('div', {
-                  ref: innerRef,
-                  class: classes.value,
-                  style: transitionStyle.value,
-                  tabindex: -1,
-                  ...onEvents.value
-                }, hSlot(slots.default))
+                ref: innerRef,
+                class: classes.value,
+                style: transitionStyle.value,
+                tabindex: -1,
+                ...onEvents.value
+              }, hSlot(slots.default))
               : null
           )
         )

package/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -61,9 +61,9 @@ export default createComponent({
 
         return action.label === void 0
           ? h(QSeparator, {
-              class: 'col-all',
-              dark: isDark.value
-            })
+            class: 'col-all',
+            dark: isDark.value
+          })
           : h('div', {
             class: [
               'q-bottom-sheet__item q-hoverable q-focusable cursor-pointer relative-position',
@@ -80,9 +80,9 @@ export default createComponent({
               : (
                   img
                     ? h('img', {
-                        class: action.avatar ? 'q-bottom-sheet__avatar' : '',
-                        src: img
-                      })
+                      class: action.avatar ? 'q-bottom-sheet__avatar' : '',
+                      src: img
+                    })
                     : h('div', { class: 'q-bottom-sheet__empty-icon' })
                 ),
 
@@ -114,9 +114,9 @@ export default createComponent({
                   : (
                       img
                         ? h('img', {
-                            class: action.avatar ? 'q-bottom-sheet__avatar' : '',
-                            src: img
-                          })
+                          class: action.avatar ? 'q-bottom-sheet__avatar' : '',
+                          src: img
+                        })
                         : null
                     )
               )
@@ -145,8 +145,8 @@ export default createComponent({
       child.push(
         props.grid === true
           ? h('div', {
-              class: 'row items-stretch justify-start'
-            }, getGrid())
+            class: 'row items-stretch justify-start'
+          }, getGrid())
           : h('div', getList())
       )
 

package/src/components/dialog-plugin/DialogPlugin.js

@@ -17,7 +17,7 @@ import { createComponent } from '../../utils/private/create.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import { isKeyCode } from '../../utils/private/key-composition.js'
-import { isPlainObject } from '../../utils/private/is.js'
+import { isObject } from '../../utils/private/is.js'
 
 export default createComponent({
   name: 'DialogPlugin',
@@ -81,7 +81,7 @@ export default createComponent({
       props.progress === false
         ? null
         : (
-            isPlainObject(props.progress) === true
+            isObject(props.progress) === true
               ? {
                   component: props.progress.spinner || QSpinner,
                   props: { color: props.progress.color || vmColor.value }
@@ -110,7 +110,7 @@ export default createComponent({
     })
 
     const okLabel = computed(() => (
-      isPlainObject(props.ok) === true
+      isObject(props.ok) === true
         ? $q.lang.label.ok
         : (
             props.ok === true
@@ -120,7 +120,7 @@ export default createComponent({
     ))
 
     const cancelLabel = computed(() => (
-      isPlainObject(props.cancel) === true
+      isObject(props.cancel) === true
         ? $q.lang.label.cancel
         : (
             props.cancel === true
@@ -146,7 +146,7 @@ export default createComponent({
       label: okLabel.value,
       ripple: false,
       disable: okDisabled.value,
-      ...(isPlainObject(props.ok) === true ? props.ok : { flat: true }),
+      ...(isObject(props.ok) === true ? props.ok : { flat: true }),
       'data-autofocus': (props.focus === 'ok' && hasForm.value !== true) || void 0,
       onClick: onOk
     }))
@@ -155,7 +155,7 @@ export default createComponent({
       color: vmColor.value,
       label: cancelLabel.value,
       ripple: false,
-      ...(isPlainObject(props.cancel) === true ? props.cancel : { flat: true }),
+      ...(isObject(props.cancel) === true ? props.cancel : { flat: true }),
       'data-autofocus': (props.focus === 'cancel' && hasForm.value !== true) || void 0,
       onClick: onCancel
     }))

package/src/components/editor/QEditor.js

@@ -180,17 +180,17 @@ export default createComponent({
       const userDef = props.definitions || {}
       const def = props.definitions || props.fonts
         ? extend(
-            true,
-            {},
-            buttonDef.value,
-            userDef,
-            getFonts(
-              defaultFont,
-              $q.lang.editor.defaultFont,
-              $q.iconSet.editor.font,
-              props.fonts
-            )
+          true,
+          {},
+          buttonDef.value,
+          userDef,
+          getFonts(
+            defaultFont,
+            $q.lang.editor.defaultFont,
+            $q.iconSet.editor.font,
+            props.fonts
           )
+        )
         : buttonDef.value
 
       return props.toolbar.map(

package/src/components/editor/editor-caret.js

@@ -198,7 +198,7 @@ export default class Caret {
       return false
     }
 
-    if (el !== null && list.includes(el.nodeName.toLowerCase()) === true) {
+    if (list.includes(el.nodeName.toLowerCase()) === true) {
       return true
     }
 

package/src/components/editor/editor-utils.js

@@ -34,8 +34,8 @@ function getBtn (eVm, btn, clickHandler, active = false) {
   if (btn.tip && eVm.$q.platform.is.desktop) {
     const Key = btn.key
       ? h('div', [
-          h('small', `(CTRL + ${ String.fromCharCode(btn.key) })`)
-        ])
+        h('small', `(CTRL + ${ String.fromCharCode(btn.key) })`)
+      ])
       : null
     child.push(
       h(QTooltip, { delay: 1000 }, () => [

package/src/components/fab/QFab.js

@@ -83,7 +83,7 @@ export default createComponent({
       const classes = `q-fab__${ kebab } absolute-full`
 
       return slotFn === void 0
-        ? h(QIcon, { class: classes, name: props[ kebab ] || $q.iconSet.fab[ camel ] })
+        ? h(QIcon, { class: classes, name: props[ camel ] || $q.iconSet.fab[ camel ] })
         : h('div', { class: classes }, slotFn(slotScope.value))
     }
 

package/src/components/file/QFile.js

@@ -58,6 +58,7 @@ export default createComponent({
     const {
       pickFiles,
       onDragover,
+      onDragleave,
       processFiles,
       getDndNode
     } = useFile({ editable: state.editable, dnd, getFileInput, addFilesToQueue })
@@ -263,7 +264,7 @@ export default createComponent({
         }
 
         if (state.editable.value === true) {
-          Object.assign(data, { onDragover, onKeydown, onKeyup })
+          Object.assign(data, { onDragover, onDragleave, onKeydown, onKeyup })
         }
 
         return h('div', data, [ getInput() ].concat(getSelection()))

package/src/components/icon/QIcon.js

@@ -36,6 +36,7 @@ const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
 const faLaRE = /^[lf]a[srlbdk]? /
+const fa6RE = /^fa-(solid|regular|light|brands|duotone|thin)/
 
 export default createComponent({
   name: 'QIcon',
@@ -129,7 +130,7 @@ export default createComponent({
       if (matches !== null) {
         cls = libMap[ matches[ 1 ] ](icon)
       }
-      else if (faLaRE.test(icon) === true) {
+      else if (faLaRE.test(icon) === true || fa6RE.test(icon) === true) {
         cls = icon
       }
       else if (ionRE.test(icon) === true) {

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -120,7 +120,9 @@ export default createComponent({
         isWorking.value = false
         isFetching.value = false
         localScrollTarget.removeEventListener('scroll', poll, passive)
-        poll !== void 0 && poll.cancel()
+        if (poll !== void 0 && poll.cancel !== void 0) {
+          poll.cancel()
+        }
       }
     }
 

package/src/components/inner-loading/QInnerLoading.js

@@ -39,7 +39,7 @@ export default createComponent({
 
     const labelClass = computed(() =>
       'q-inner-loading__label'
-      + (props.labelClass !== void 0 ? ` ${ props.labelClass}` : '')
+      + (props.labelClass !== void 0 ? ` ${ props.labelClass }` : '')
     )
 
     function getInner () {
@@ -65,12 +65,12 @@ export default createComponent({
     function getContent () {
       return props.showing === true
         ? h(
-            'div',
-            { class: classes.value, style: transitionStyle.value },
-            slots.default !== void 0
-              ? slots.default()
-              : getInner()
-          )
+          'div',
+          { class: classes.value, style: transitionStyle.value },
+          slots.default !== void 0
+            ? slots.default()
+            : getInner()
+        )
         : null
     }
 

package/src/components/input/QInput.js

@@ -138,7 +138,10 @@ export default createComponent({
       if (hasMask.value === true) {
         if (stopValueWatcher === true) {
           stopValueWatcher = false
-          return
+
+          if (String(v) === emitCachedValue) {
+            return
+          }
         }
 
         updateMaskValue(v)

package/src/components/knob/QKnob.js

@@ -203,11 +203,14 @@ export default createComponent({
         angle = centerPosition.left < pos.left ? angle + 90 : 270 - angle
       }
 
-      if (props.angle) {
+      if ($q.lang.rtl === true) {
+        angle = normalizeToInterval(-angle - props.angle, 0, 360)
+      }
+      else if (props.angle) {
         angle = normalizeToInterval(angle - props.angle, 0, 360)
       }
 
-      if ($q.lang.rtl === true) {
+      if (props.reverse === true) {
         angle = 360 - angle
       }
 

package/src/components/knob/QKnob.json

@@ -51,6 +51,12 @@
       "category": "model"
     },
 
+    "reverse": {
+      "type": "Boolean",
+      "desc": "Reverses the direction of progress",
+      "category": "behavior"
+    },
+
     "instant-feedback": {
       "type": "Boolean",
       "desc": "No animation when model changes",

package/src/components/linear-progress/QLinearProgress.sass

@@ -6,6 +6,7 @@
   font-size: 4px
   height: 1em
   color: var(--q-primary)
+  transform: scale3d(1, 1, 1)
 
   &__model, &__track
     transform-origin: 0 0

package/src/components/menu/QMenu.js

@@ -349,19 +349,19 @@ export default createComponent({
         () => (
           showing.value === true
             ? h('div', {
-                ...attrs,
-                ref: innerRef,
-                tabindex: -1,
-                class: [
-                  'q-menu q-position-engine scroll' + menuClass.value,
-                  attrs.class
-                ],
-                style: [
-                  attrs.style,
-                  transitionStyle.value
-                ],
-                ...onEvents.value
-              }, hSlot(slots.default))
+              ...attrs,
+              ref: innerRef,
+              tabindex: -1,
+              class: [
+                'q-menu q-position-engine scroll' + menuClass.value,
+                attrs.class
+              ],
+              style: [
+                attrs.style,
+                transitionStyle.value
+              ],
+              ...onEvents.value
+            }, hSlot(slots.default))
             : null
         )
       )

package/src/components/page-scroller/QPageScroller.js

@@ -98,10 +98,10 @@ export default createComponent({
     function getContent () {
       return showing.value === true
         ? h('div', {
-            ref: rootRef,
-            class: 'q-page-scroller',
-            onClick
-          }, getStickyContent(slots))
+          ref: rootRef,
+          class: 'q-page-scroller',
+          onClick
+        }, getStickyContent(slots))
         : null
     }