quasar 2.6.0 → 2.6.3

package/lang/vi.mjs

@@ -0,0 +1,91 @@
+export default {
+  isoName: 'vi',
+  nativeName: 'Tiếng Việt',
+  label: {
+    clear: 'Xóa hết',
+    ok: 'OK',
+    cancel: 'Hủy',
+    close: 'Đóng',
+    set: 'Thiết đặt',
+    select: 'Chọn',
+    reset: 'Đặt lại',
+    remove: 'Gỡ bỏ',
+    update: 'Cập nhật',
+    create: 'Tạo',
+    search: 'Tìm kiếm',
+    filter: 'Bộ lọc',
+    refresh: 'Làm mới'
+  },
+  date: {
+    days: 'Chủ Nhật_Thứ Hai_Thứ Ba_Thứ Tư_Thứ Năm_Thứ Sáu_Thứ Bảy'.split('_'),
+    daysShort: 'CN_T2_T3_T4_T5_T6_T7'.split('_'),
+    months: 'Tháng Một_Tháng Hai_Tháng Ba_Tháng Tư_Tháng Năm_Tháng Sáu_Tháng Bảy_Tháng Tám_Tháng Chín_Tháng Mười_Tháng Mười Một_Tháng Mười Hai'.split('_'),
+    monthsShort: 'Th1_Th2_Th3_Th4_Th5_Th6_Th7_Th8_Th9_Th10_Th11_Th12'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'ngày'
+  },
+  table: {
+    noData: 'Không có dữ liệu',
+    noResults: 'Không tìm thấy kết quả',
+    loading: 'Đang tải',
+    selectedRecords: rows => (
+      rows === 1
+        ? '1 hàng đã chọn.'
+        : (rows === 0 ? 'Không có hàng nào' : rows) + ' hàng đã chọn.'
+    ),
+    recordsPerPage: 'Hàng trên mỗi trang:',
+    allRows: 'Tất cả',
+    pagination: (start, end, total) => start + '-' + end + ' của ' + total,
+    columns: 'Cột'
+  },
+  editor: {
+    url: 'URL',
+    bold: 'Đậm',
+    italic: 'Nghiêng',
+    strikethrough: 'Gạch giữa',
+    underline: 'Gạch dưới',
+    unorderedList: 'Danh sách không theo thứ tự',
+    orderedList: 'Danh sách theo thứ tự',
+    subscript: 'Chỉ số dưới',
+    superscript: 'Chỉ số trên',
+    hyperlink: 'Liên kết',
+    toggleFullscreen: 'Điều chỉnh chế độ toàn màn hình',
+    quote: 'Trích dẫn',
+    left: 'Căn trái',
+    center: 'Căn giữa',
+    right: 'Căn phải',
+    justify: 'Căn đều 2 bên',
+    print: 'In',
+    outdent: 'Giảm lề',
+    indent: 'Tăng lề',
+    removeFormat: 'Xóa định dạng',
+    formatting: 'Định dạng',
+    fontSize: 'Kích cỡ phông',
+    align: 'Căn chỉnh',
+    hr: 'Chèn Quy Tắc Ngang',
+    undo: 'Hoàn tác',
+    redo: 'Làm lại',
+    heading1: 'Tiêu đề 1',
+    heading2: 'Tiêu đề 2',
+    heading3: 'Tiêu đề 3',
+    heading4: 'Tiêu đề 4',
+    heading5: 'Tiêu đề 5',
+    heading6: 'Tiêu đề 6',
+    paragraph: 'Đoạn',
+    code: 'Mã',
+    size1: 'Rất nhỏ',
+    size2: 'Nhỏ vừa',
+    size3: 'Thường',
+    size4: 'To vừa',
+    size5: 'To',
+    size6: 'Rất To',
+    size7: 'Tối đa',
+    defaultFont: 'Phông mặc định',
+    viewSource: 'Xem nguồn'
+  },
+  tree: {
+    noNodes: 'Không có nốt nào có sẵn',
+    noResults: 'Không tìm thấy các nốt'
+  }
+}

package/lang/zh-CN.js

@@ -1,4 +1,9 @@
-export default {
+/**
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its .mjs counterpart (same filename but with .mjs extension).
+ * Edit that file instead (zh-CN.mjs).
+ */
+module.exports = {
   isoName: 'zh-CN',
   nativeName: '中文(简体)',
   label: {

package/lang/zh-CN.mjs

@@ -0,0 +1,90 @@
+export default {
+  isoName: 'zh-CN',
+  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-CN', {
+      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: '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: '标题一',
+    heading2: '标题二',
+    heading3: '标题三',
+    heading4: '标题四',
+    heading5: '标题五',
+    heading6: '标题六',
+    paragraph: '段落',
+    code: '代码',
+    size1: '非常小',
+    size2: '比较小',
+    size3: '正常',
+    size4: '中等偏大',
+    size5: '大',
+    size6: '非常大',
+    size7: '超级大',
+    defaultFont: '默认字体',
+    viewSource: '查看资料'
+  },
+  tree: {
+    noNodes: '没有可用节点',
+    noResults: '找不到匹配的节点'
+  }
+}

package/lang/zh-TW.js

@@ -1,4 +1,9 @@
-export default {
+/**
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its .mjs counterpart (same filename but with .mjs extension).
+ * Edit that file instead (zh-TW.mjs).
+ */
+module.exports = {
   isoName: 'zh-TW',
   nativeName: '中文（繁體）',
   label: {

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.6.0",
+  "version": "2.6.3",
   "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/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/checkbox/QCheckbox.js

@@ -50,7 +50,7 @@ export default createComponent({
           ? [
               h('div', {
                 key: 'icon',
-                class: 'q-checkbox__icon-container absolute flex flex-center no-wrap'
+                class: 'q-checkbox__icon-container absolute-full flex flex-center no-wrap'
               }, [
                 h(QIcon, {
                   class: 'q-checkbox__icon',

package/src/components/checkbox/QCheckbox.sass

@@ -9,13 +9,13 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &__bg,
   &__icon-container
+    user-select: none
+
+  &__bg
     top: 25%
     left: 25%
     width: 50%
     height: 50%
-    user-select: none
-
-  &__bg
     border: 2px solid currentColor
     border-radius: 2px
     transition: background $checkbox-transition
@@ -23,7 +23,7 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &__icon
     color: currentColor
-    font-size: .6em
+    font-size: .5em
 
   &__svg
     color: #fff
@@ -76,16 +76,12 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &--dense
 
-    .q-checkbox__icon
-      font-size: .6em
-
     .q-checkbox__inner
       width: .5em
       min-width: .5em
       height: .5em
 
-    .q-checkbox__bg,
-    .q-checkbox__icon-container
+    .q-checkbox__bg
       left: 5%
       top: 5%
       width: 90%

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

@@ -239,14 +239,14 @@ export default createComponent({
     function getButtons () {
       const child = []
 
-      props.cancel && child.push(
-        h(QBtn, cancelProps.value)
-      )
-
       props.ok && child.push(
         h(QBtn, okProps.value)
       )
 
+      props.cancel && child.push(
+        h(QBtn, cancelProps.value)
+      )
+
       return h(QCardActions, {
         class: props.stackButtons === true ? 'items-end' : '',
         vertical: props.stackButtons,

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/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/icon/QIcon.js

@@ -11,13 +11,13 @@ const sameFn = i => i
 const ionFn = i => `ionicons ${ i }`
 
 const libMap = {
+  'mdi-': i => `mdi ${ i }`,
   'icon-': sameFn, // fontawesome equiv
   'bt-': i => `bt ${ i }`,
   'eva-': i => `eva ${ i }`,
   'ion-md': ionFn,
   'ion-ios': ionFn,
   'ion-logo': ionFn,
-  'mdi-': i => `mdi ${ i }`,
   'iconfont ': sameFn,
   'ti-': i => `themify-icon ${ i }`,
   'bi-': i => `bootstrap-icons ${ i }`
@@ -35,8 +35,7 @@ const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faLaRE = /^[lf]a[srlbdk]? /
-const fa6RE = /^fa-(brand|regular|solid)/
+const faRE = /^(fa-(solid|regular|light|brands|duotone|thin)|[lf]a[srlbdk]?) /
 
 export default createComponent({
   name: 'QIcon',
@@ -130,7 +129,7 @@ export default createComponent({
       if (matches !== null) {
         cls = libMap[ matches[ 1 ] ](icon)
       }
-      else if (faLaRE.test(icon) === true || fa6RE.test(icon) === true) {
+      else if (faRE.test(icon) === true) {
         cls = icon
       }
       else if (ionRE.test(icon) === true) {

package/src/components/radio/QRadio.js

@@ -142,7 +142,7 @@ export default createComponent({
         ? [
             h('div', {
               key: 'icon',
-              class: 'q-radio__icon-container absolute flex flex-center no-wrap'
+              class: 'q-radio__icon-container absolute-full flex flex-center no-wrap'
             }, [
               h(QIcon, {
                 class: 'q-radio__icon',

package/src/components/radio/QRadio.sass

@@ -9,20 +9,20 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &__bg,
   &__icon-container
+    user-select: none
+
+  &__bg
     top: 25%
     left: 25%
     width: 50%
     height: 50%
-    user-select: none
-
-  &__bg
     -webkit-print-color-adjust: exact
     path
       fill: currentColor
 
   &__icon
     color: currentColor
-    font-size: .6em
+    font-size: .5em
 
   &__check
     transform-origin: 50% 50%
@@ -56,16 +56,12 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &--dense
 
-    .q-checkbox__icon
-      font-size: .6em
-
     .q-radio__inner
       width: .5em
       min-width: .5em
       height: .5em
 
-    .q-radio__bg,
-    .q-radio__icon-container
+    .q-radio__bg
       left: 0
       top: 0
       width: 100%

package/src/components/select/QSelect.js

@@ -175,6 +175,7 @@ export default createComponent({
       localResetVirtualScroll,
       padVirtualScroll,
       onVirtualScrollEvt,
+      reset,
       scrollTo,
       setVirtualScrollSize
     } = useVirtualScroll({
@@ -432,6 +433,8 @@ export default createComponent({
 
     watch(menu, updateMenu)
 
+    watch(virtualScrollLength, rerenderMenu)
+
     function getEmittingOptionValue (opt) {
       return props.emitValue === true
         ? getOptionValue.value(opt)
@@ -1339,6 +1342,18 @@ export default createComponent({
       setOptionIndex(optionIndex)
     }
 
+    function rerenderMenu () {
+      if (menu.value === true && state.innerLoading.value === false) {
+        reset()
+
+        nextTick(() => {
+          if (menu.value === true && state.innerLoading.value === false) {
+            updateMenu(true)
+          }
+        })
+      }
+    }
+
     function updateMenuPosition () {
       if (dialog.value === false && menuRef.value !== null) {
         menuRef.value.updatePosition()

package/src/components/table/QTable.js

@@ -71,6 +71,9 @@ export default createComponent({
     wrapCells: Boolean,
 
     virtualScroll: Boolean,
+    virtualScrollTarget: {
+      default: void 0
+    },
     ...commonVirtPropsObj,
 
     noDataLabel: String,
@@ -313,6 +316,7 @@ export default createComponent({
           class: props.tableClass,
           style: props.tableStyle,
           ...virtProps.value,
+          scrollTarget: props.virtualScrollTarget,
           items: computedRows.value,
           type: '__qtable',
           tableColspan: computedColspan.value,

package/src/components/table/QTable.json

@@ -39,6 +39,10 @@
       "category": "virtual-scroll"
     },
 
+    "virtual-scroll-target": {
+      "extends": "scroll-target"
+    },
+
     "virtual-scroll-slice-size": {
       "type": [ "Number", "String" ],
       "desc": "Minimum number of rows to render in the virtual list",

package/src/components/table/QTh.js

@@ -19,10 +19,13 @@ export default createComponent({
     const vm = getCurrentInstance()
     const { proxy: { $q } } = vm
 
+    const onClick = evt => { emit('click', evt) }
+
     return () => {
       if (props.props === void 0) {
         return h('th', {
-          class: props.autoWidth === true ? 'q-table--col-auto-width' : ''
+          class: props.autoWidth === true ? 'q-table--col-auto-width' : '',
+          onClick
         }, hSlot(slots.default))
       }
 
@@ -60,7 +63,7 @@ export default createComponent({
         style: col.headerStyle,
         onClick: evt => {
           col.sortable === true && props.props.sort(col) // eslint-disable-line
-          emit('click', evt)
+          onClick(evt)
         }
       }
 

package/src/components/virtual-scroll/QVirtualScroll.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
+import { h, ref, computed, watch, onBeforeMount, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
 
 import QList from '../item/QList.js'
 import QMarkupTable from '../markup-table/QMarkupTable.js'
@@ -136,6 +136,14 @@ export default createComponent({
       configureScrollTarget()
     })
 
+    onActivated(() => {
+      configureScrollTarget()
+    })
+
+    onDeactivated(() => {
+      unconfigureScrollTarget()
+    })
+
     onBeforeUnmount(() => {
       unconfigureScrollTarget()
     })

package/src/composables/private/__tests__/use-transition.spec.js

@@ -13,7 +13,7 @@ describe('use-transition API', () => {
             .should('have.class', 'q-transition--fade-enter-active')
         })
 
-        it('should use a different show transtion if defined', () => {
+        it('should use a different show transition if defined', () => {
           const transition = 'scale'
           mount(WrapperOne, {
             attrs: {
@@ -40,7 +40,7 @@ describe('use-transition API', () => {
             .should('have.class', 'q-transition--fade-leave-active')
         })
 
-        it('should use a different hide transtion if defined', () => {
+        it('should use a different hide transition if defined', () => {
           const transition = 'scale'
           mount(WrapperOne, {
             attrs: {