Merge branch 'quasarframework:dev' into dev

create-quasar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quasar",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Scaffolds Quasar Apps, AppExtensions or UI kits",
   "type": "module",
   "author": {

create-quasar/templates/app/quasar-v2/ts-vite-2/BASE/_package.json

@@ -30,7 +30,7 @@
     "eslint-plugin-vue": "^9.30.0",
     "globals": "^15.12.0",
     "vue-tsc": "^2.0.29",
-    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/eslint-config-typescript": "^14.4.0",
     "vite-plugin-checker": "^0.8.0",
     <% } %>
     <% if (prettier) { %>

create-quasar/templates/app/quasar-v2/ts-vite-2/eslint/_eslint.config.js

@@ -2,10 +2,10 @@ import js from '@eslint/js'
 import globals from 'globals'
 import pluginVue from 'eslint-plugin-vue'
 import pluginQuasar from '@quasar/app-vite/eslint'
-import vueTsEslintConfig from '@vue/eslint-config-typescript'<% if (prettier) { %>
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'<% if (prettier) { %>
 import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
 
-export default [
+export default defineConfigWithVueTs(
   {
     /**
      * Ignore the following files.
@@ -18,7 +18,7 @@ export default [
     // ignores: []
   },
 
-  ...pluginQuasar.configs.recommended(),
+  pluginQuasar.configs.recommended(),
   js.configs.recommended,
 
   /**
@@ -33,7 +33,7 @@ export default [
    * pluginVue.configs["flat/recommended"]
    *   -> Above, plus rules to enforce subjective community defaults to ensure consistency.
    */
-  ...pluginVue.configs[ 'flat/essential' ],
+  pluginVue.configs[ 'flat/essential' ],
 
   {
     files: ['**/*.ts', '**/*.vue'],
@@ -45,20 +45,7 @@ export default [
     }
   },
   // https://github.com/vuejs/eslint-config-typescript
-  ...vueTsEslintConfig({
-    // Optional: extend additional configurations from typescript-eslint'.
-    // Supports all the configurations in
-    // https://typescript-eslint.io/users/configs#recommended-configurations
-    extends: [
-      // By default, only the 'recommendedTypeChecked' rules are enabled.
-      'recommendedTypeChecked'
-      // You can also manually enable the stylistic rules.
-      // "stylistic",
-
-      // Other utility configurations, such as 'eslintRecommended', (note that it's in camelCase)
-      // are also extendable here. But we don't recommend using them directly.
-    ]
-  }),
+  vueTsConfigs.recommendedTypeChecked,
 
   {
     languageOptions: {
@@ -96,4 +83,4 @@ export default [
   }<% if (prettier) { %>,
 
   prettierSkipFormatting<% } %>
-]
+)

create-quasar/templates/app/quasar-v2/ts-webpack-4/BASE/_package.json

@@ -30,7 +30,7 @@
     "eslint": "^9.14.0",
     "eslint-plugin-vue": "^9.30.0",
     "eslint-webpack-plugin": "^4.2.0",
-    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/eslint-config-typescript": "^14.4.0",
     "globals": "^15.12.0",
     <% } %>
     <% if (prettier) { %>

create-quasar/templates/app/quasar-v2/ts-webpack-4/eslint/_eslint.config.js

@@ -2,10 +2,10 @@ import js from '@eslint/js'
 import globals from 'globals'
 import pluginVue from 'eslint-plugin-vue'
 import pluginQuasar from '@quasar/app-webpack/eslint'
-import vueTsEslintConfig from '@vue/eslint-config-typescript'<% if (prettier) { %>
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'<% if (prettier) { %>
 import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
 
-export default [
+export default defineConfigWithVueTs(
   {
     /**
      * Ignore the following files.
@@ -18,7 +18,7 @@ export default [
     // ignores: []
   },
 
-  ...pluginQuasar.configs.recommended(),
+  pluginQuasar.configs.recommended(),
   js.configs.recommended,
 
   /**
@@ -33,7 +33,7 @@ export default [
    * pluginVue.configs["flat/recommended"]
    *   -> Above, plus rules to enforce subjective community defaults to ensure consistency.
    */
-  ...pluginVue.configs[ 'flat/essential' ],
+  pluginVue.configs[ 'flat/essential' ],
 
   // this rule needs to be above the vueTsEslintConfig to avoid error: 'You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file.'
  {
@@ -46,20 +46,7 @@ export default [
     }
   },
   // https://github.com/vuejs/eslint-config-typescript
-  ...vueTsEslintConfig({
-    // Optional: extend additional configurations from typescript-eslint'.
-    // Supports all the configurations in
-    // https://typescript-eslint.io/users/configs#recommended-configurations
-    extends: [
-       // By default, only the 'recommendedTypeChecked' rules are enabled.
-      'recommendedTypeChecked'
-      // You can also manually enable the stylistic rules.
-      // "stylistic",
-
-      // Other utility configurations, such as 'eslintRecommended', (note that it's in camelCase)
-      // are also extendable here. But we don't recommend using them directly.
-    ]
-  }),
+  vueTsConfigs.recommendedTypeChecked,
 
   {
     languageOptions: {
@@ -97,4 +84,4 @@ export default [
   }<% if (prettier) { %>,
 
   prettierSkipFormatting<% } %>
-]
+)

docs/src/assets/docs-homepage.js

@@ -8,7 +8,7 @@ import {
   mdiImageSizeSelectSmall,
   mdiTable,
   mdiHumanMaleBoard
-} from '@quasar/extras/mdi-v6'
+} from '@quasar/extras/mdi-v7'
 
 export const mostUsedPages = [
   {

docs/src/assets/links.header.js

@@ -5,7 +5,7 @@ import { fasCubes, fasBolt } from '@quasar/extras/fontawesome-v5'
 import {
   mdiBug, mdiClipboardText, mdiCodepen, mdiFlare, mdiFlask, mdiGithub, mdiJsfiddle, mdiPaletteSwatch, mdiPuzzle, mdiShoppingMusic,
   mdiStarCircle, mdiThemeLightDark, mdiViewDashboard, mdiSecurity, mdiMathIntegralBox
-} from '@quasar/extras/mdi-v6'
+} from '@quasar/extras/mdi-v7'
 
 import { socialLinks } from './links.social.js'
 

docs/src/assets/links.integrations.js

@@ -10,7 +10,7 @@ import {
   mdiServer, mdiStarCircle, mdiSvg,
   mdiTelevisionPlay,
   mdiTestTube
-} from '@quasar/extras/mdi-v6'
+} from '@quasar/extras/mdi-v7'
 
 export const platformIcons = [
   'img:https://cdn.quasar.dev/img/custom-svg-icons/chrome.svg',

docs/src/assets/links.social.js

@@ -1,12 +1,12 @@
-import { fabFacebook, fabGithub, fabXTwitter } from '@quasar/extras/fontawesome-v6'
-import { mdiDiscord, mdiForum } from '@quasar/extras/mdi-v6'
+import { fabFacebook, fabGithub, fabXTwitter, fabDiscord } from '@quasar/extras/fontawesome-v6'
+import { mdiForum } from '@quasar/extras/mdi-v7'
 
 export const socialLinks = {
   name: 'Social',
   mq: 1310,
   children: [
     { name: 'Github', icon: fabGithub, path: 'https://github.quasar.dev', external: true },
-    { name: 'Discord', icon: mdiDiscord, path: 'https://chat.quasar.dev', external: true },
+    { name: 'Discord', icon: fabDiscord, path: 'https://chat.quasar.dev', external: true },
     { name: 'Forum', icon: mdiForum, path: 'https://forum.quasar.dev', external: true },
     { name: 'X (Twitter)', icon: fabXTwitter, path: 'https://twitter.quasar.dev', external: true },
     { name: 'Facebook', icon: fabFacebook, path: 'https://facebook.quasar.dev', external: true }

docs/src/components/DocApi.vue

@@ -81,7 +81,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { mdiClose, mdiMagnify } from '@quasar/extras/mdi-v6'
+import { mdiClose, mdiMagnify } from '@quasar/extras/mdi-v7'
 
 import DocCardTitle from './DocCardTitle.vue'
 import DocApiEntry from './DocApiEntry.js'

docs/src/components/DocApiEntry.js

@@ -1,7 +1,7 @@
 import { h, ref } from 'vue'
 import { QBadge, QBtn, Notify, QBtnToggle } from 'quasar'
 import { copyToClipboard } from 'assets/page-utils.js'
-import { mdiMinusBox, mdiPlusBox } from '@quasar/extras/mdi-v6'
+import { mdiMinusBox, mdiPlusBox } from '@quasar/extras/mdi-v7'
 
 function copyPropName (propName) {
   copyToClipboard(propName)

docs/src/components/DocLink.vue

@@ -22,7 +22,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import { mdiLaunch } from '@quasar/extras/mdi-v6'
+import { mdiLaunch } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({ to: String })
 const internal = computed(() => props.to.charAt(0) === '/')

docs/src/components/DocTree.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v6'
+import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({
   def: Object

docs/src/components/SurveyCountdown.vue

@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { mdiFileDocumentEditOutline } from '@quasar/extras/mdi-v6'
+import { mdiFileDocumentEditOutline } from '@quasar/extras/mdi-v7'
 
 const confDate = new Date('2022-07-09T15:00:00.000Z').getTime()
 

docs/src/examples/QOptionGroup/CustomOptionProps.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="q-pa-lg">
+    <!-- as string -->
+    <q-option-group
+      v-model="modelOne"
+      :options="options"
+      color="primary"
+      option-value="key"
+      option-label="title"
+      option-disable="inactive"
+    />
+
+    <!-- or as function -->
+    <q-option-group
+      class="q-mt-lg"
+      v-model="modelTwo"
+      :options="options"
+      color="primary"
+      :option-value="optValueFn"
+      :option-label="optLabelFn"
+      :option-disable="optDisableFn"
+    />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup () {
+    return {
+      modelOne: ref('op1'),
+      modelTwo: ref('op1'),
+
+      options: [
+        {
+          title: 'Option 1',
+          key: 'op1',
+          inactive: false
+        },
+        {
+          title: 'Option 2 (disabled)',
+          key: 'op2',
+          inactive: true
+        },
+        {
+          title: 'Option 3',
+          key: 'op3',
+          inactive: false
+        }
+      ],
+
+      optValueFn: item => item.key,
+      optLabelFn: item => item.title,
+      optDisableFn: item => item.inactive
+    }
+  }
+}
+</script>

docs/src/examples/QTable/CustomColor.vue

@@ -2,9 +2,11 @@
   <div class="q-pa-md">
     <q-table
       color="primary"
-      card-class="bg-amber-5 text-brown"
-      table-class="text-grey-8"
+      card-class="bg-orange text-grey-10"
+      table-class="text-grey-1"
       table-header-class="text-brown"
+      :table-row-class-fn="rowClassFn"
+      :table-row-style-fn="rowStyleFn"
       flat
       bordered
       title="Treats"
@@ -142,7 +144,15 @@ export default {
   setup () {
     return {
       columns,
-      rows
+      rows,
+
+      rowClassFn (row) {
+        return row.calories % 2 === 0 ? 'bg-brown' : 'bg-primary'
+      },
+
+      rowStyleFn (row) {
+        return row.calories % 2 === 0 ? 'color:#ccc' : 'color:#fff'
+      }
     }
   }
 }

docs/src/layouts/builder/LayoutBuilder.vue

@@ -371,7 +371,7 @@ import { ref, reactive, computed } from 'vue'
 
 import {
   mdiMenu, mdiViewDashboard, mdiCog, mdiPlayCircleOutline
-} from '@quasar/extras/mdi-v6'
+} from '@quasar/extras/mdi-v7'
 
 import getMeta from 'assets/get-meta.js'
 import DocCode from 'src/components/DocCode.vue'

docs/src/layouts/doc-layout/DocDrawerMenu.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { mdiClose } from '@quasar/extras/mdi-v6'
+import { mdiClose } from '@quasar/extras/mdi-v7'
 
 import { useDocStore } from './store/index.js'
 

docs/src/layouts/doc-layout/DocDrawerToc.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import { mdiClose } from '@quasar/extras/mdi-v6'
+import { mdiClose } from '@quasar/extras/mdi-v7'
 
 import { useDocStore } from './store/index.js'
 

docs/src/layouts/doc-layout/DocHeader.vue

@@ -100,7 +100,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import { mdiCompare, mdiFolderPound } from '@quasar/extras/mdi-v6'
+import { mdiCompare, mdiFolderPound } from '@quasar/extras/mdi-v7'
 
 import { versionLinks, primaryToolbarLinks, secondaryToolbarLinks, moreLinks } from 'src/assets/links.header.js'
 import { socialLinks } from 'src/assets/links.social.js'

docs/src/layouts/doc-layout/DocHeaderMenu.js

@@ -1,6 +1,6 @@
 import { QMenu, QIcon, QList, QItem, QItemSection, QItemLabel, QSeparator, Screen } from 'quasar'
 import { h } from 'vue'
-import { mdiMenuRight } from '@quasar/extras/mdi-v6'
+import { mdiMenuRight } from '@quasar/extras/mdi-v7'
 
 const offset = [ 0, 4 ]
 

docs/src/layouts/doc-layout/DocHeaderTextLinks.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { mdiMenuDown } from '@quasar/extras/mdi-v6'
+import { mdiMenuDown } from '@quasar/extras/mdi-v7'
 
 import DocHeaderMenu from './DocHeaderMenu.js'
 

docs/src/layouts/doc-layout/DocLayout.vue

@@ -34,7 +34,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import { mdiArrowUp } from '@quasar/extras/mdi-v6'
+import { mdiArrowUp } from '@quasar/extras/mdi-v7'
 
 import { provideDocStore } from './store/index.js'
 

docs/src/layouts/doc-layout/DocPage.vue

@@ -86,7 +86,7 @@ import {
   mdiPencil,
   mdiFlash,
   mdiLaunch
-} from '@quasar/extras/mdi-v6'
+} from '@quasar/extras/mdi-v7'
 
 import DocLink from 'src/components/DocLink.vue'
 import DocPageToc from './DocPageToc.vue'