quasar 1.18.10 → 1.19.2

package/lang/sm.js

@@ -0,0 +1,93 @@
+export default {
+  isoName: 'sm',
+  nativeName: 'Fa\'asāmoa',
+  label: {
+    clear: 'Kilia',
+    ok: '\'Oukei',
+    cancel: 'Fa\'alēaogāina',
+    close: 'Tapuni',
+    set: 'Seti',
+    select: 'Filifili',
+    reset: 'Toe seti',
+    remove: '\'Ave\'ese',
+    update: 'Fa\'afou',
+    create: 'Fatu',
+    search: 'Sā\'ili',
+    filter: 'Fa\'amamā',
+    refresh: 'Fa\'afou'
+  },
+  date: {
+    days: 'Aso Sā_Aso Gafua_Aso Lua_Aso Lulu_Aso Tofi_Aso Faraile_Aso To\'onai'.split('_'),
+    daysShort: 'Sā_Gaf_Lua_Lul_Tof_Far_Too'.split('_'),
+    months: 'Ianuari_Fepuari_Mati_\'Aperila_Mē_Iuni_Iulai_\'Aokuso_Sētema_\'Oketopa_Nōvema_Tēsema'.split('_'),
+    monthsShort: 'Ian_Fep_Mat_Ape_Mē_Iun_Iul_Auk_Sēt_Oke_Nōv_Tēs'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'aso'
+  },
+  table: {
+    noData: 'Lēai ni fa\'amatalaga o maua',
+    noResults: 'Lēai ni fa\'amaumauga na maua',
+    loading: '\'Āmatalia...',
+    selectedRecords: function (rows) {
+      return rows === 1
+        ? '1 le laina \'ua filifilia.'
+        : (rows === 0 ? 'Lēai ni' : rows) + ' laina \'ua filifilia.'
+    },
+    recordsPerPage: 'Laina \'i le ītūlau:',
+    allRows: 'Laina \'uma',
+    pagination: function (start, end, total) {
+      return start + '-' + end + ' o ' + total
+    },
+    columns: 'Poutū'
+  },
+  editor: {
+    url: 'Tuātusi initaneti',
+    bold: 'Fa\'aolaola',
+    italic: 'Fa\'api\'o',
+    strikethrough: 'Kolosi',
+    underline: 'Vase lalo',
+    unorderedList: 'Lisi \'e fe\'i fa\'atulagaina',
+    orderedList: 'Lisi \'ua fa\'atulagaina',
+    subscript: 'Fa\'anini\'i i lalo',
+    superscript: 'Fa\'anini\'i i luga',
+    hyperlink: 'So\'otaga initaneti',
+    toggleFullscreen: 'Fa\'atelē ma fa\'alititi le va\'ai',
+    quote: 'Saunoaga',
+    left: 'Ōgatasi agavale',
+    center: 'Ōgatasi \'ogātotonu',
+    right: 'Ōgatasi taumatau',
+    justify: 'Ōgatasi lautele',
+    print: 'Lolomi',
+    outdent: 'Fa\'alaititi le va',
+    indent: 'Fa\'atelē le va',
+    removeFormat: '\'Ave\'ese le fa\'atulagaga',
+    formatting: 'Fa\'atulagaga',
+    fontSize: 'Telē o le mata\'itusi',
+    align: 'Ōgatasi',
+    hr: 'Fa\'aopoopo se laina',
+    undo: 'Toe \'ave\'ese',
+    redo: 'Toe fai',
+    heading1: 'Ulutala 1',
+    heading2: 'Ulutala 2',
+    heading3: 'Ulutala 3',
+    heading4: 'Ulutala 4',
+    heading5: 'Ulutala 5',
+    heading6: 'Ulutala 6',
+    paragraph: 'Palakalafa',
+    code: 'Fa\'ailo fa\'akomepiuta',
+    size1: 'Matuā laitiiti',
+    size2: 'Fa\'alaititi',
+    size3: 'Tūlaga masani',
+    size4: 'Lāpo\'a feololo',
+    size5: 'Lāpo\'a',
+    size6: 'Lāpo\'a atu',
+    size7: 'Pito i lāpo\'a',
+    defaultFont: 'Foliga fou ole mata\'itusi',
+    viewSource: 'Va\'ai \'ile tusitusiga fa\'akomepiuta'
+  },
+  tree: {
+    noNodes: 'Lēai ni vāega o maua',
+    noResults: 'Lēai ni vāega na maua'
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "1.18.10",
+  "version": "1.19.2",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "module": "src/index.esm.js",
   "typings": "dist/types/index.d.ts",

package/src/components/btn/QBtn.js

@@ -320,11 +320,11 @@ export default Vue.extend({
     if (this.loading === true && this.percentage !== void 0) {
       child.push(
         h('span', {
-          staticClass: 'q-btn__progress absolute-full overflow-hidden'
+          staticClass: 'q-btn__progress absolute-full overflow-hidden',
+          class: this.darkPercentage === true ? 'q-btn__progress--dark' : ''
         }, [
           h('span', {
             staticClass: 'q-btn__progress-indicator fit block',
-            class: this.darkPercentage === true ? 'q-btn__progress--dark' : '',
             style: this.percentageStyle
           })
         ])

package/src/components/editor/QEditor.js

@@ -379,33 +379,14 @@ export default Vue.extend({
       }
     },
 
-    __onMousedown () {
+    // mousedown, touchstart
+    __onPointerStart (e) {
       this.__offsetBottom = void 0
+      this.qListeners[e.type] !== void 0 && this.$emit(e.type, e)
     },
 
-    __onMouseup (e) {
+    __onSelectionchange () {
       this.caret.save()
-      if (this.qListeners.mouseup !== void 0) {
-        this.$emit('mouseup', e)
-      }
-    },
-
-    __onKeyup (e) {
-      this.caret.save()
-      if (this.qListeners.keyup !== void 0) {
-        this.$emit('keyup', e)
-      }
-    },
-
-    __onTouchstart () {
-      this.__offsetBottom = void 0
-    },
-
-    __onTouchend (e) {
-      this.caret.save()
-      if (this.qListeners.touchend !== void 0) {
-        this.$emit('touchend', e)
-      }
     },
 
     runCmd (cmd, param, update = true) {
@@ -468,6 +449,12 @@ export default Vue.extend({
     this.caret = new Caret(this.$refs.content, this)
     this.__setContent(this.value)
     this.refreshToolbar()
+
+    document.addEventListener('selectionchange', this.__onSelectionchange)
+  },
+
+  beforeDestroy () {
+    document.removeEventListener('selectionchange', this.__onSelectionchange)
   },
 
   render (h) {
@@ -505,13 +492,8 @@ export default Vue.extend({
       focus: this.__onFocus,
 
       // clean saved scroll position
-      mousedown: this.__onMousedown,
-      touchstart: this.__onTouchstart,
-
-      // save caret
-      mouseup: this.__onMouseup,
-      keyup: this.__onKeyup,
-      touchend: this.__onTouchend
+      mousedown: this.__onPointerStart,
+      touchstart: this.__onPointerStart
     }
 
     return h('div', {

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

@@ -198,7 +198,7 @@ export 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/field/QField.js

@@ -365,8 +365,9 @@ export default Vue.extend({
             ref: 'target',
             staticClass: 'q-field__native row',
             attrs: {
+              tabindex: -1,
               ...this.qAttrs,
-              'data-autofocus': this.autofocus
+              'data-autofocus': this.autofocus || void 0
             }
           }, this.$scopedSlots.control(this.controlSlotScope))
         )
@@ -542,7 +543,7 @@ export default Vue.extend({
     const attrs = this.__getControl === void 0 && this.$scopedSlots.control === void 0
       ? {
         ...this.qAttrs,
-        'data-autofocus': this.autofocus,
+        'data-autofocus': this.autofocus || void 0,
         ...this.attrs
       }
       : this.attrs

package/src/components/file/QFile.js

@@ -95,6 +95,10 @@ export default Vue.extend({
 
     isAppending () {
       return this.multiple === true && this.append === true
+    },
+
+    fieldClass () {
+      return 'q-file q-field--auto-height' + (this.dnd === true ? ' q-file--dnd' : '')
     }
   },
 
@@ -261,8 +265,6 @@ export default Vue.extend({
   },
 
   created () {
-    this.fieldClass = 'q-file q-field--auto-height'
-
     // necessary for QField's clearable
     // and FileValueMixin
     this.type = 'file'

package/src/components/icon/QIcon.js

@@ -30,8 +30,15 @@ const matMap = {
   s_: '-sharp'
 }
 
+const symMap = {
+  sym_o_: '-outlined',
+  sym_r_: '-rounded',
+  sym_s_: '-sharp'
+}
+
 const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
 const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
+const symRE = new RegExp('^(' + Object.keys(symMap).join('|') + ')')
 const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
@@ -136,6 +143,22 @@ export default Vue.extend({
       else if (ionRE.test(icon) === true) {
         cls = `ionicons ion-${this.$q.platform.is.ios === true ? 'ios' : 'md'}${icon.substr(3)}`
       }
+      else if (symRE.test(icon) === true) {
+        // "notranslate" class is for Google Translate
+        // to avoid tampering with Material Symbols ligature font
+        //
+        // Caution: To be able to add suffix to the class name,
+        // keep the 'material-symbols' at the end of the string.
+        cls = 'notranslate material-symbols'
+
+        const matches = icon.match(symRE)
+        if (matches !== null) {
+          icon = icon.substring(6)
+          cls += symMap[ matches[ 1 ] ]
+        }
+
+        content = icon
+      }
       else {
         // "notranslate" class is for Google Translate
         // to avoid tampering with Material Icons ligature font
@@ -187,7 +210,7 @@ export default Vue.extend({
       return h('span', data, mergeSlot([
         h('svg', {
           attrs: {
-            viewBox: this.type.viewBox,
+            viewBox: this.type.viewBox || '0 0 24 24',
             focusable: 'false' /* needed for IE11 */
           }
         }, this.type.nodes)

package/src/components/icon/QIcon.sass

@@ -2,6 +2,7 @@
   line-height: 1
   width: 1em
   height: 1em
+  flex-shrink: 0
   letter-spacing: normal
   text-transform: none
   white-space: nowrap
@@ -21,14 +22,17 @@
 
   > svg,
   > img
-    width: 1em
-    height: 1em
+    width: 100%
+    height: 100%
 
 .q-icon,
 .material-icons,
 .material-icons-outlined,
 .material-icons-round,
-.material-icons-sharp
+.material-icons-sharp,
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp
   user-select: none
   cursor: inherit
   font-size: inherit

package/src/components/icon/QIcon.styl

@@ -2,6 +2,7 @@
   line-height: 1
   width: 1em
   height: 1em
+  flex-shrink: 0
   letter-spacing: normal
   text-transform: none
   white-space: nowrap
@@ -21,14 +22,17 @@
 
   > svg,
   > img
-    width: 1em
-    height: 1em
+    width: 100%
+    height: 100%
 
 .q-icon,
 .material-icons,
 .material-icons-outlined,
 .material-icons-round,
-.material-icons-sharp
+.material-icons-sharp,
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp
   user-select: none
   cursor: inherit
   font-size: inherit

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

@@ -150,6 +150,16 @@ export default Vue.extend({
 
       if (this.isWorking === true) {
         this.__scrollTarget.addEventListener('scroll', this.poll, passive)
+
+        if (this.reverse === true) {
+          const
+            scrollHeight = getScrollHeight(this.__scrollTarget),
+            containerHeight = height(this.__scrollTarget)
+
+          setScrollPosition(this.__scrollTarget, scrollHeight - containerHeight)
+        }
+
+        this.immediatePoll()
       }
     },
 
@@ -181,16 +191,6 @@ export default Vue.extend({
     this.__setDebounce(this.debounce)
 
     this.updateScrollTarget()
-
-    if (this.reverse === true) {
-      const
-        scrollHeight = getScrollHeight(this.__scrollTarget),
-        containerHeight = height(this.__scrollTarget)
-
-      setScrollPosition(this.__scrollTarget, scrollHeight - containerHeight)
-    }
-
-    this.immediatePoll()
   },
 
   activated () {

package/src/components/input/QInput.js

@@ -154,7 +154,7 @@ export default Vue.extend({
     inputAttrs () {
       const attrs = {
         tabindex: 0,
-        'data-autofocus': this.autofocus,
+        'data-autofocus': this.autofocus || void 0,
         rows: this.type === 'textarea' ? 6 : void 0,
         'aria-label': this.label,
         name: this.nameProp,
@@ -207,7 +207,7 @@ export default Vue.extend({
     },
 
     __onInput (e) {
-      if (!e || !e.target || e.target.composing === true) {
+      if (!e || !e.target || e.target.qComposing === true) {
         return
       }
 
@@ -285,13 +285,16 @@ export default Vue.extend({
       const inp = this.$refs.input
       if (inp !== void 0) {
         const parentStyle = inp.parentNode.style
+        const { overflow } = inp.style
 
         // reset height of textarea to a small size to detect the real height
         // but keep the total control size the same
         parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
         inp.style.height = '1px'
+        inp.style.overflow = 'hidden'
 
         inp.style.height = inp.scrollHeight + 'px'
+        inp.style.overflow = overflow
         parentStyle.marginBottom = ''
       }
     },

package/src/components/layout/QLayout.js

@@ -137,6 +137,7 @@ export default Vue.extend({
     const layout = h('div', {
       class: this.classes,
       style: this.style,
+      attrs: { tabindex: -1 },
       on: { ...this.qListeners }
     }, mergeSlot([
       h(QScrollObserver, {

package/src/components/select/QSelect.js

@@ -164,13 +164,18 @@ export default Vue.extend({
       this.__updateMenu(show)
     },
 
-    virtualScrollLength () {
+    virtualScrollLength (newLength, oldLength) {
       if (this.menu === true && this.innerLoading === false) {
-        this.reset()
+        this.__resetVirtualScroll(-1, true)
 
         this.$nextTick(() => {
           if (this.menu === true && this.innerLoading === false) {
-            this.__updateMenu(true)
+            if (newLength > oldLength) {
+              this.__resetVirtualScroll()
+            }
+            else {
+              this.__updateMenu(true)
+            }
           }
         })
       }
@@ -408,7 +413,7 @@ export default Vue.extend({
 
     virtualScrollItemSizeComputed () {
       return this.virtualScrollItemSize === void 0
-        ? (this.dense === true ? 24 : 48)
+        ? (this.optionsDense === true ? 24 : 48)
         : this.virtualScrollItemSize
     },
 
@@ -1088,7 +1093,7 @@ export default Vue.extend({
           maxlength: this.maxlength, // this is converted to prop by QField
           tabindex: this.tabindex,
           autocomplete: this.autocomplete,
-          'data-autofocus': fromDialog === true ? false : this.autofocus,
+          'data-autofocus': (fromDialog !== true && this.autofocus) || void 0,
           disabled: this.disable === true,
           readonly: this.readonly === true
         },
@@ -1109,7 +1114,7 @@ export default Vue.extend({
     __onInput (e) {
       clearTimeout(this.inputTimer)
 
-      if (e && e.target && e.target.composing === true) {
+      if (e && e.target && e.target.qComposing === true) {
         return
       }
 

package/src/components/table/QTable.sass

@@ -186,7 +186,7 @@
  * Separators
  */
 .q-table--horizontal-separator, .q-table--cell-separator
-  thead th, tbody tr:not(:last-child) td
+  thead th, tbody tr:not(:last-child) > td
     border-bottom-width: 1px
 
 .q-table--vertical-separator, .q-table--cell-separator

package/src/components/table/QTable.styl

@@ -186,7 +186,7 @@
  * Separators
  */
 .q-table--horizontal-separator, .q-table--cell-separator
-  thead th, tbody tr:not(:last-child) td
+  thead th, tbody tr:not(:last-child) > td
     border-bottom-width: 1px
 
 .q-table--vertical-separator, .q-table--cell-separator

package/src/components/uploader/QUploaderBase.js

@@ -316,28 +316,32 @@ export default Vue.extend({
 
       return [
         h('div', {
-          staticClass: 'q-uploader__header-content flex flex-center no-wrap q-gutter-xs'
+          staticClass: 'q-uploader__header-content column'
         }, [
-          this.__getBtn(h, this.queuedFiles.length > 0, 'removeQueue', this.removeQueuedFiles),
-          this.__getBtn(h, this.uploadedFiles.length > 0, 'removeUploaded', this.removeUploadedFiles),
-
-          this.isUploading === true
-            ? h(QSpinner, { staticClass: 'q-uploader__spinner' })
-            : null,
-
-          h('div', { staticClass: 'col column justify-center' }, [
-            this.label !== void 0
-              ? h('div', { staticClass: 'q-uploader__title' }, [ this.label ])
+          h('div', {
+            staticClass: 'flex flex-center no-wrap q-gutter-xs'
+          }, [
+            this.__getBtn(h, this.queuedFiles.length > 0, 'removeQueue', this.removeQueuedFiles),
+            this.__getBtn(h, this.uploadedFiles.length > 0, 'removeUploaded', this.removeUploadedFiles),
+
+            this.isUploading === true
+              ? h(QSpinner, { staticClass: 'q-uploader__spinner' })
               : null,
 
-            h('div', { staticClass: 'q-uploader__subtitle' }, [
-              this.uploadSizeLabel + ' / ' + this.uploadProgressLabel
-            ])
-          ]),
+            h('div', { staticClass: 'col column justify-center' }, [
+              this.label !== void 0
+                ? h('div', { staticClass: 'q-uploader__title' }, [ this.label ])
+                : null,
+
+              h('div', { staticClass: 'q-uploader__subtitle' }, [
+                this.uploadSizeLabel + ' / ' + this.uploadProgressLabel
+              ])
+            ]),
 
-          this.__getBtn(h, this.canAddFiles, 'add', this.pickFiles),
-          this.__getBtn(h, this.hideUploadBtn === false && this.canUpload === true, 'upload', this.upload),
-          this.__getBtn(h, this.isUploading, 'clear', this.abort)
+            this.__getBtn(h, this.canAddFiles, 'add', this.pickFiles),
+            this.__getBtn(h, this.hideUploadBtn === false && this.canUpload === true, 'upload', this.upload),
+            this.__getBtn(h, this.isUploading, 'clear', this.abort)
+          ])
         ])
       ]
     },
@@ -438,7 +442,8 @@ export default Vue.extend({
         'q-uploader--bordered': this.bordered,
         'q-uploader--square no-border-radius': this.square,
         'q-uploader--flat no-shadow': this.flat,
-        'disabled q-uploader--disable': this.disable
+        'disabled q-uploader--disable': this.disable,
+        'q-uploader--dnd': this.dnd
       },
       on: this.canAddFiles === true
         ? cache(this, 'drag', {

package/src/css/core/colors.sass

@@ -7,6 +7,7 @@
   --q-color-info:         #{$info}
   --q-color-warning:      #{$warning}
   --q-color-dark:         #{$dark}
+  --q-color-dark-page:    #{$dark-page}
 
 .text-dark
   color: $dark !important

package/src/css/core/colors.styl

@@ -7,6 +7,7 @@
   --q-color-info:         $info
   --q-color-warning:      $warning
   --q-color-dark:         $dark
+  --q-color-dark-page:    $dark-page
 
 .text-dark
   color: $dark !important

package/src/css/core/dark.sass

@@ -1,6 +1,7 @@
 body.body--dark
   color: #fff
   background: $dark-page
+  background: var(--q-color-dark-page)
 
 .q-dark
   color: #fff

package/src/css/core/dark.styl

@@ -1,6 +1,7 @@
 body.body--dark
   color: #fff
   background: $dark-page
+  background: var(--q-color-dark-page)
 
 .q-dark
   color: #fff

package/src/directives/Ripple.js

@@ -101,11 +101,7 @@ export default {
           evt.qSkipRipple !== true &&
           // on ENTER in form IE emits a PointerEvent with negative client cordinates
           (client.is.ie !== true || evt.clientX >= 0) &&
-          (
-            ctx.modifiers.early === true
-              ? ['mousedown', 'touchstart'].includes(evt.type) === true
-              : evt.type === 'click'
-          )
+          evt.type === (ctx.modifiers.early === true ? 'pointerdown' : 'click')
         ) {
           showRipple(evt, el, ctx, evt.qKeyEvent === true)
         }
@@ -128,8 +124,7 @@ export default {
     el.__qripple = ctx
 
     addEvt(ctx, 'main', [
-      [ el, 'mousedown', 'start', 'passive' ],
-      [ el, 'touchstart', 'start', 'passive' ],
+      [ el, 'pointerdown', 'start', 'passive' ],
       [ el, 'click', 'start', 'passive' ],
       [ el, 'keydown', 'keystart', 'passive' ],
       [ el, 'keyup', 'keystart', 'passive' ]

package/src/mixins/anchor.js

@@ -139,7 +139,7 @@ export default {
     },
 
     __pickAnchorEl () {
-      if (this.target === false || this.target === '') {
+      if (this.target === false || this.target === '' || this.parentEl === null) {
         this.anchorEl = void 0
       }
       else if (this.target === true) {

package/src/mixins/composition.js

@@ -1,28 +1,31 @@
+import { client } from '../plugins/Platform.js'
+
 const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
 const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u
 const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/
+const isPlainText = /[a-z0-9_ -]$/i
 
 export default {
   methods: {
     __onComposition (e) {
       if (e.type === 'compositionend' || e.type === 'change') {
-        if (e.target.composing !== true) { return }
-        e.target.composing = false
+        if (e.target.qComposing !== true) { return }
+        e.target.qComposing = false
         this.__onInput(e)
       }
-      else if (e.type === 'compositionupdate') {
-        if (
-          typeof e.data === 'string' &&
-          isJapanese.test(e.data) === false &&
-          isChinese.test(e.data) === false &&
-          isKorean.test(e.data) === false
-        ) {
-          e.target.composing = false
+      else if (
+        e.type === 'compositionupdate' &&
+        e.target.qComposing !== true &&
+        typeof e.data === 'string'
+      ) {
+        const isComposing = client.is.firefox === true
+          ? isPlainText.test(e.data) === false
+          : isJapanese.test(e.data) === true || isChinese.test(e.data) === true || isKorean.test(e.data) === true
+
+        if (isComposing === true) {
+          e.target.qComposing = true
         }
       }
-      else {
-        e.target.composing = true
-      }
     }
   }
 }