quasar 2.6.1 → 2.6.4

package/icon-set/svg-fontawesome-v5.mjs

@@ -0,0 +1,197 @@
+
+/*
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its webfont counterpart (same filename without "svg-" prefix).
+ * Edit that file instead (fontawesome-v5.mjs).
+ */
+
+import {
+  fasCheck,
+  fasExclamationTriangle,
+  fasInfoCircle,
+  fasExclamation,
+  fasArrowUp,
+  fasArrowRight,
+  fasArrowDown,
+  fasArrowLeft,
+  fasCaretDown,
+  fasChevronLeft,
+  fasChevronRight,
+  fasEyeDropper,
+  fasSlidersH,
+  fasSwatchbook,
+  fasSyncAlt,
+  fasChevronUp,
+  fasChevronDown,
+  fasCircle,
+  fasTimesCircle,
+  farClock,
+  farCalendarCheck,
+  fasBold,
+  fasItalic,
+  fasStrikethrough,
+  fasUnderline,
+  fasListUl,
+  fasListOl,
+  fasSubscript,
+  fasSuperscript,
+  fasLink,
+  fasExpandArrowsAlt,
+  fasQuoteRight,
+  fasAlignLeft,
+  fasAlignCenter,
+  fasAlignRight,
+  fasAlignJustify,
+  fasPrint,
+  fasOutdent,
+  fasIndent,
+  fasEraser,
+  fasHeading,
+  fasTextHeight,
+  farMinusSquare,
+  fasUndo,
+  fasRedo,
+  fasCode,
+  fasFont,
+  fasPlus,
+  fasTimes,
+  fasExclamationCircle,
+  fasStepBackward,
+  fasStepForward,
+  fasStar,
+  fasPencilAlt,
+  fasPlay,
+  fasPlusSquare,
+  fasUpload,
+  fasStream,
+  fasClipboardCheck
+} from '@quasar/extras/fontawesome-v5'
+
+export default {
+  name: 'svg-fontawesome-v5',
+  type: {
+    positive: fasCheck,
+    negative: fasExclamationTriangle,
+    info: fasInfoCircle,
+    warning: fasExclamation
+  },
+  arrow: {
+    up: fasArrowUp,
+    right: fasArrowRight,
+    down: fasArrowDown,
+    left: fasArrowLeft,
+    dropdown: fasCaretDown
+  },
+  chevron: {
+    left: fasChevronLeft,
+    right: fasChevronRight
+  },
+  colorPicker: {
+    spectrum: fasEyeDropper,
+    tune: fasSlidersH,
+    palette: fasSwatchbook
+  },
+  pullToRefresh: {
+    icon: fasSyncAlt
+  },
+  carousel: {
+    left: fasChevronLeft,
+    right: fasChevronRight,
+    up: fasChevronUp,
+    down: fasChevronDown,
+    navigationIcon: fasCircle
+  },
+  chip: {
+    remove: fasTimesCircle,
+    selected: fasCheck
+  },
+  datetime: {
+    arrowLeft: fasChevronLeft,
+    arrowRight: fasChevronRight,
+    now: farClock,
+    today: farCalendarCheck
+  },
+  editor: {
+    bold: fasBold,
+    italic: fasItalic,
+    strikethrough: fasStrikethrough,
+    underline: fasUnderline,
+    unorderedList: fasListUl,
+    orderedList: fasListOl,
+    subscript: fasSubscript,
+    superscript: fasSuperscript,
+    hyperlink: fasLink,
+    toggleFullscreen: fasExpandArrowsAlt,
+    quote: fasQuoteRight,
+    left: fasAlignLeft,
+    center: fasAlignCenter,
+    right: fasAlignRight,
+    justify: fasAlignJustify,
+    print: fasPrint,
+    outdent: fasOutdent,
+    indent: fasIndent,
+    removeFormat: fasEraser,
+    formatting: fasHeading,
+    fontSize: fasTextHeight,
+    align: fasAlignLeft,
+    hr: farMinusSquare,
+    undo: fasUndo,
+    redo: fasRedo,
+    heading: fasHeading,
+    code: fasCode,
+    size: fasTextHeight,
+    font: fasFont,
+    viewSource: fasCode
+  },
+  expansionItem: {
+    icon: fasChevronDown,
+    denseIcon: fasCaretDown
+  },
+  fab: {
+    icon: fasPlus,
+    activeIcon: fasTimes
+  },
+  field: {
+    clear: fasTimesCircle,
+    error: fasExclamationCircle
+  },
+  pagination: {
+    first: fasStepBackward,
+    prev: fasChevronLeft,
+    next: fasChevronRight,
+    last: fasStepForward
+  },
+  rating: {
+    icon: fasStar
+  },
+  stepper: {
+    done: fasCheck,
+    active: fasPencilAlt,
+    error: fasExclamationTriangle
+  },
+  tabs: {
+    left: fasChevronLeft,
+    right: fasChevronRight,
+    up: fasChevronUp,
+    down: fasChevronDown
+  },
+  table: {
+    arrowUp: fasArrowUp,
+    warning: fasExclamationTriangle,
+    firstPage: fasStepBackward,
+    prevPage: fasChevronLeft,
+    nextPage: fasChevronRight,
+    lastPage: fasStepForward
+  },
+  tree: {
+    icon: fasPlay
+  },
+  uploader: {
+    done: fasCheck,
+    clear: fasTimes,
+    add: fasPlusSquare,
+    upload: fasUpload,
+    removeQueue: fasStream,
+    removeUploaded: fasClipboardCheck
+  }
+}

package/lang/ar-TN.js

@@ -0,0 +1,101 @@
+/**
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its .mjs counterpart (same filename but with .mjs extension).
+ * Edit that file instead (ar-TN.mjs).
+ */
+module.exports = {
+  isoName: 'ar-TN',
+  nativeName: 'العربية (تونس)',
+  rtl: true,
+  label: {
+    clear: 'مسح',
+    ok: 'حسناً',
+    cancel: 'إلغاء',
+    close: 'إغلاق',
+    set: 'ضبط',
+    select: 'تحديد',
+    reset: 'إعادة ضبط',
+    remove: 'حذف',
+    update: 'تحديث',
+    create: 'إنشاء',
+    search: 'بحث',
+    filter: 'ترشيح',
+    refresh: 'تحديث'
+  },
+  date: {
+    days: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
+    daysShort: 'أحد_إثن_ثلا_أرب_خمي_جمع_سبت'.split('_'),
+    months: 'جانفي_فيفري_مارس_أفريل_ماي_جوان_جويلية_أوت_سبتمبر_أكتوبر_نوفمبر_ديسمبر'.split('_'),
+    monthsShort: 'جان_فيف_مار_أفر_ماي_جوا_جوي_أوت_سبت_أكت_نوف_ديس'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'أيام'
+  },
+  table: {
+    noData: 'لا توجد بيانات',
+    noResults: 'لا توجد نتائج',
+    loading: 'جارٍ التحميل...',
+    selectedRecords: rows => (
+      rows === 0
+        ? 'لا توجد مُدخَلات محدّدة.'
+        : rows === 1
+          ? 'مُدخَلة واحدة محدّدة.'
+          : rows === 2
+            ? 'مُدخَلتان محدّدتان.'
+            : 'عدد المُدخَلات المحدّدة ' + 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/lang/ar-TN.mjs

@@ -0,0 +1,96 @@
+export default {
+  isoName: 'ar-TN',
+  nativeName: 'العربية (تونس)',
+  rtl: true,
+  label: {
+    clear: 'مسح',
+    ok: 'حسناً',
+    cancel: 'إلغاء',
+    close: 'إغلاق',
+    set: 'ضبط',
+    select: 'تحديد',
+    reset: 'إعادة ضبط',
+    remove: 'حذف',
+    update: 'تحديث',
+    create: 'إنشاء',
+    search: 'بحث',
+    filter: 'ترشيح',
+    refresh: 'تحديث'
+  },
+  date: {
+    days: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
+    daysShort: 'أحد_إثن_ثلا_أرب_خمي_جمع_سبت'.split('_'),
+    months: 'جانفي_فيفري_مارس_أفريل_ماي_جوان_جويلية_أوت_سبتمبر_أكتوبر_نوفمبر_ديسمبر'.split('_'),
+    monthsShort: 'جان_فيف_مار_أفر_ماي_جوا_جوي_أوت_سبت_أكت_نوف_ديس'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'أيام'
+  },
+  table: {
+    noData: 'لا توجد بيانات',
+    noResults: 'لا توجد نتائج',
+    loading: 'جارٍ التحميل...',
+    selectedRecords: rows => (
+      rows === 0
+        ? 'لا توجد مُدخَلات محدّدة.'
+        : rows === 1
+          ? 'مُدخَلة واحدة محدّدة.'
+          : rows === 2
+            ? 'مُدخَلتان محدّدتان.'
+            : 'عدد المُدخَلات المحدّدة ' + 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/lang/index.json

@@ -1,4 +1,8 @@
 [
+  {
+    "isoName": "ar-TN",
+    "nativeName": "العربية (تونس)"
+  },
   {
     "isoName": "ar",
     "nativeName": "العربية"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.6.1",
+  "version": "2.6.4",
   "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()