quasar 2.5.4 → 2.6.1

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.4",
+  "version": "2.6.1",
   "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

@@ -47,7 +47,7 @@
 
     "icon": {
       "type": "String",
-      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
+      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
       "examples": [
         "map",
         "ion-add",

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/date/QDate.js

@@ -12,6 +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 { isObject } from '../../utils/private/is.js'
 
 const yearsInterval = 20
 const views = [ 'Calendar', 'Years', 'Months' ]
@@ -164,7 +165,7 @@ export default createComponent({
     const rangeModel = computed(() => {
       const fn = date => decodeString(date, innerMask.value, innerLocale.value)
       return normalizedModel.value
-        .filter(date => Object(date) === date && 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)
     })
@@ -1217,24 +1218,24 @@ export default createComponent({
             }, days.value.map(day => h('div', { class: day.classes }, [
               day.in === true
                 ? h(
-                    QBtn, {
-                      class: day.today === true ? 'q-date__today' : '',
-                      dense: true,
-                      flat: day.flat,
-                      unelevated: day.unelevated,
-                      color: day.color,
-                      textColor: day.textColor,
-                      label: day.i,
-                      tabindex: tabindex.value,
-                      ...getCache('day#' + day.i, {
-                        onClick: () => { onDayClick(day.i) },
-                        onMouseover: () => { onDayMouseover(day.i) }
-                      })
-                    },
-                    day.event !== false
-                      ? () => h('div', { class: 'q-date__event bg-' + day.event })
-                      : null
-                  )
+                  QBtn, {
+                    class: day.today === true ? 'q-date__today' : '',
+                    dense: true,
+                    flat: day.flat,
+                    unelevated: day.unelevated,
+                    color: day.color,
+                    textColor: day.textColor,
+                    label: day.i,
+                    tabindex: tabindex.value,
+                    ...getCache('day#' + day.i, {
+                      onClick: () => { onDayClick(day.i) },
+                      onMouseover: () => { onDayMouseover(day.i) }
+                    })
+                  },
+                  day.event !== false
+                    ? () => h('div', { class: 'q-date__event bg-' + day.event })
+                    : null
+                )
                 : h('div', '' + day.i)
             ]))))
           ])

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

@@ -57,7 +57,9 @@ export default function (props, $q) {
   })
 
   function getLocale () {
-    return props.locale || $q.lang.date
+    return props.locale !== void 0
+      ? { ...$q.lang.date, ...props.locale }
+      : $q.lang.date
   }
 
   function getCurrentDate (dateOnly) {

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,6 +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 { isObject } from '../../utils/private/is.js'
 
 export default createComponent({
   name: 'DialogPlugin',
@@ -80,7 +81,7 @@ export default createComponent({
       props.progress === false
         ? null
         : (
-            Object(props.progress) === props.progress
+            isObject(props.progress) === true
               ? {
                   component: props.progress.spinner || QSpinner,
                   props: { color: props.progress.color || vmColor.value }
@@ -109,7 +110,7 @@ export default createComponent({
     })
 
     const okLabel = computed(() => (
-      Object(props.ok) === props.ok
+      isObject(props.ok) === true
         ? $q.lang.label.ok
         : (
             props.ok === true
@@ -119,7 +120,7 @@ export default createComponent({
     ))
 
     const cancelLabel = computed(() => (
-      Object(props.cancel) === props.cancel
+      isObject(props.cancel) === true
         ? $q.lang.label.cancel
         : (
             props.cancel === true
@@ -145,7 +146,7 @@ export default createComponent({
       label: okLabel.value,
       ripple: false,
       disable: okDisabled.value,
-      ...(Object(props.ok) === props.ok ? props.ok : { flat: true }),
+      ...(isObject(props.ok) === true ? props.ok : { flat: true }),
       'data-autofocus': (props.focus === 'ok' && hasForm.value !== true) || void 0,
       onClick: onOk
     }))
@@ -154,7 +155,7 @@ export default createComponent({
       color: vmColor.value,
       label: cancelLabel.value,
       ripple: false,
-      ...(Object(props.cancel) === props.cancel ? props.cancel : { flat: true }),
+      ...(isObject(props.cancel) === true ? props.cancel : { flat: true }),
       'data-autofocus': (props.focus === 'cancel' && hasForm.value !== true) || void 0,
       onClick: onCancel
     }))
@@ -201,9 +202,9 @@ export default createComponent({
     function getSection (classes, text) {
       return props.html === true
         ? h(QCardSection, {
-            class: classes,
-            innerHTML: text
-          })
+          class: classes,
+          innerHTML: text
+        })
         : h(QCardSection, { class: classes }, () => text)
     }
 

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-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/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/form/QForm.json

@@ -40,8 +40,9 @@
       "desc": "Emitted when all validations have passed when tethered to a submit button",
       "params": {
         "evt": {
-          "type": "SubmitEvent",
-          "desc": "Form submission event object"
+          "type": [ "Event", "SubmitEvent" ],
+          "desc": "Form submission event object",
+          "__exemption": [ "examples" ]
         }
       }
     },

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-(brand|regular|solid)/
 
 export default createComponent({
   name: 'QIcon',
@@ -69,7 +70,7 @@ export default createComponent({
       let cls
       let icon = props.name
 
-      if (!icon) {
+      if (icon === 'none' || !icon) {
         return { none: true }
       }
 
@@ -78,6 +79,9 @@ export default createComponent({
         if (res !== void 0) {
           if (res.icon !== void 0) {
             icon = res.icon
+            if (icon === 'none' || !icon) {
+              return { none: true }
+            }
           }
           else {
             return {
@@ -126,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/icon/QIcon.json

@@ -14,9 +14,7 @@
     },
 
     "name": {
-      "type": "String",
-      "desc": "Name of the icon, following Quasar convention",
-      "examples": [ "map", "ion-add" ],
+      "extends": "icon",
       "category": "model"
     },
 

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