quasar 2.7.5 → 2.7.6

package/dist/types/api/qtable.d.ts

@@ -1,12 +1,12 @@
 // Error on "quasar" import shown in IDE is normal, as we only have Components/Directives/Plugins types after the build step
 // The import will work correctly at runtime
-import { QTable } from "quasar";
+import { QTableProps } from "quasar";
 
 export type QTableColumn<
   Row extends Record<string, any> = any,
-  K = Row extends Record<string, any> ? keyof Row : string,
-  Field = K | ((row: Row) => any)
-> = Omit<NonNullable<QTable["columns"]>[0], "field" | "format"> & {
+  Key = keyof Row extends string ? keyof Row : string,
+  Field = Key | ((row: Row) => any)
+> = Omit<NonNullable<QTableProps["columns"]>[number], "field" | "format"> & {
   field: Field;
   format?: (val: any, row: Row) => string;
 };

package/dist/types/index.d.ts

@@ -1222,6 +1222,10 @@ export interface QBtnDropdownProps {
    * Use 'push' design
    */
   push?: boolean | undefined;
+  /**
+   * Removes border-radius so borders are squared
+   */
+  square?: boolean | undefined;
   /**
    * Applies a glossy effect
    */
@@ -1468,6 +1472,10 @@ export interface QBtnGroupProps {
    * Applies a more prominent border-radius for squared shape buttons
    */
   rounded?: boolean | undefined;
+  /**
+   * Removes border-radius so borders are squared
+   */
+  square?: boolean | undefined;
   /**
    * Use 'push' design for buttons
    */
@@ -1701,6 +1709,10 @@ export interface QBtnProps {
    * Use 'push' design
    */
   push?: boolean | undefined;
+  /**
+   * Removes border-radius so borders are squared
+   */
+  square?: boolean | undefined;
   /**
    * Applies a glossy effect
    */
@@ -3664,8 +3676,14 @@ export interface QExpansionItemSlots {
   default: () => VNode[];
   /**
    * Slot used for overriding default header
+   * @param scope
    */
-  header: () => VNode[];
+  header: (scope: {
+    /**
+     * QExpansionItem expanded status
+     */
+    expanded: boolean;
+  }) => VNode[];
 }
 
 export interface QExpansionItem

package/dist/vetur/quasar-attributes.json

@@ -239,6 +239,10 @@
     "type": "boolean",
     "description": "Use 'push' design"
   },
+  "q-btn-dropdown/square": {
+    "type": "boolean",
+    "description": "Removes border-radius so borders are squared"
+  },
   "q-btn-dropdown/glossy": {
     "type": "boolean",
     "description": "Applies a glossy effect"
@@ -379,6 +383,10 @@
     "type": "boolean",
     "description": "Applies a more prominent border-radius for squared shape buttons"
   },
+  "q-btn-group/square": {
+    "type": "boolean",
+    "description": "Removes border-radius so borders are squared"
+  },
   "q-btn-group/push": {
     "type": "boolean",
     "description": "Use 'push' design for buttons"
@@ -547,6 +555,10 @@
     "type": "boolean",
     "description": "Use 'push' design"
   },
+  "q-btn/square": {
+    "type": "boolean",
+    "description": "Removes border-radius so borders are squared"
+  },
   "q-btn/glossy": {
     "type": "boolean",
     "description": "Applies a glossy effect"

package/dist/vetur/quasar-tags.json

@@ -96,6 +96,7 @@
       "unelevated",
       "rounded",
       "push",
+      "square",
       "glossy",
       "fab",
       "fab-mini",
@@ -136,6 +137,7 @@
       "flat",
       "unelevated",
       "rounded",
+      "square",
       "push",
       "stretch",
       "glossy"
@@ -188,6 +190,7 @@
       "unelevated",
       "rounded",
       "push",
+      "square",
       "glossy",
       "fab",
       "fab-mini",

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -735,6 +735,16 @@
               "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
               "type": "boolean"
             },
+            {
+              "name": "square",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Removes border-radius so borders are squared",
+              "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
+              "type": "boolean"
+            },
             {
               "name": "glossy",
               "value": {
@@ -1180,6 +1190,16 @@
               "doc-url": "https://v2.quasar.dev/vue-components/button-group",
               "type": "boolean"
             },
+            {
+              "name": "square",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Removes border-radius so borders are squared",
+              "doc-url": "https://v2.quasar.dev/vue-components/button-group",
+              "type": "boolean"
+            },
             {
               "name": "push",
               "value": {
@@ -1648,6 +1668,16 @@
               "doc-url": "https://v2.quasar.dev/vue-components/button",
               "type": "boolean"
             },
+            {
+              "name": "square",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Removes border-radius so borders are squared",
+              "doc-url": "https://v2.quasar.dev/vue-components/button",
+              "type": "boolean"
+            },
             {
               "name": "glossy",
               "value": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "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/components/btn/QBtn.sass

@@ -94,6 +94,9 @@
     min-width: 3em
     min-height: 3em
 
+  &--square
+    border-radius: 0
+
   &--flat, &--outline, &--unelevated
     &:before
       box-shadow: none

package/src/components/btn/use-btn.js

@@ -38,6 +38,7 @@ export const useBtnProps = {
   iconRight: String,
 
   round: Boolean,
+  square: Boolean,
   outline: Boolean,
   flat: Boolean,
   unelevated: Boolean,
@@ -171,8 +172,11 @@ export default function (props) {
       colors = `text-${ props.textColor }`
     }
 
-    return `q-btn--${ design.value } `
-      + `q-btn--${ props.round === true ? 'round' : `rectangle${ isRounded.value === true ? ' q-btn--rounded' : '' }` }`
+    const shape = props.round === true
+      ? 'round'
+      : `rectangle${ isRounded.value === true ? ' q-btn--rounded' : (props.square === true ? ' q-btn--square' : '') }`
+
+    return `q-btn--${ design.value } q-btn--${ shape }`
       + (colors !== void 0 ? ' ' + colors : '')
       + (isActionable.value === true ? ' q-btn--actionable q-focusable q-hoverable' : (props.disable === true ? ' disabled' : ''))
       + (props.fab === true ? ' q-btn--fab' : (props.fabMini === true ? ' q-btn--fab-mini' : ''))
@@ -180,6 +184,7 @@ export default function (props) {
       + (props.dense === true ? ' q-btn--dense' : '')
       + (props.stretch === true ? ' no-border-radius self-stretch' : '')
       + (props.glossy === true ? ' glossy' : '')
+      + (props.square ? ' q-btn--square' : '')
   })
 
   const innerClasses = computed(() =>

package/src/components/btn/use-btn.json

@@ -91,6 +91,11 @@
       "category": "style"
     },
 
+    "square": {
+      "extends": "square",
+      "addedIn": "v2.7.6"
+    },
+
     "glossy": {
       "type": "Boolean",
       "desc": "Applies a glossy effect",

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -181,6 +181,7 @@ export default createComponent({
         outline: props.outline,
         flat: props.flat,
         rounded: props.rounded,
+        square: props.square,
         push: props.push,
         unelevated: props.unelevated,
         glossy: props.glossy,

package/src/components/btn-group/QBtnGroup.js

@@ -11,6 +11,7 @@ export default createComponent({
     outline: Boolean,
     flat: Boolean,
     rounded: Boolean,
+    square: Boolean,
     push: Boolean,
     stretch: Boolean,
     glossy: Boolean,
@@ -19,7 +20,7 @@ export default createComponent({
 
   setup (props, { slots }) {
     const classes = computed(() => {
-      const cls = [ 'unelevated', 'outline', 'flat', 'rounded', 'push', 'stretch', 'glossy' ]
+      const cls = [ 'unelevated', 'outline', 'flat', 'rounded', 'square', 'push', 'stretch', 'glossy' ]
         .filter(t => props[ t ] === true)
         .map(t => `q-btn-group--${ t }`).join(' ')
 

package/src/components/btn-group/QBtnGroup.json

@@ -34,6 +34,11 @@
       "category": "style"
     },
 
+    "square": {
+      "extends": "square",
+      "addedIn": "v2.7.6"
+    },
+
     "push": {
       "type": "Boolean",
       "desc": "Use 'push' design for buttons",

package/src/components/btn-group/QBtnGroup.sass

@@ -56,6 +56,9 @@
   &--rounded
     border-radius: $button-rounded-border-radius
 
+  &--square
+    border-radius: 0
+
   &--flat, &--outline, &--unelevated
     box-shadow: none
 

package/src/components/expansion-item/QExpansionItem.js

@@ -235,7 +235,7 @@ export default createComponent({
       let child
 
       if (slots.header !== void 0) {
-        child = [].concat(slots.header())
+        child = [].concat(slots.header({ expanded: showing.value === true }))
       }
       else {
         child = [

package/src/components/expansion-item/QExpansionItem.json

@@ -163,7 +163,14 @@
     },
 
     "header": {
-      "desc": "Slot used for overriding default header"
+      "desc": "Slot used for overriding default header",
+      "scope": {
+        "expanded": {
+          "type": "Boolean",
+          "desc": "QExpansionItem expanded status",
+          "addedIn": "v2.7.6"
+        }
+      }
     }
   },
 

package/src/components/file/QFile.js

@@ -147,6 +147,11 @@ export default createComponent({
 
     function addFilesToQueue (e, fileList) {
       const files = processFiles(e, fileList, innerValue.value, isAppending.value)
+      const fileInput = getFileInput()
+
+      if (fileInput !== void 0 && fileInput !== null) {
+        fileInput.value = ''
+      }
 
       // if nothing to do...
       if (files === void 0) { return }

package/src/components/select/QSelect.js

@@ -1439,6 +1439,7 @@ export default createComponent({
 
       floatingLabel: computed(() =>
         (props.hideSelected !== true && hasValue.value === true)
+        || typeof inputValue.value === 'number'
         || inputValue.value.length > 0
         || fieldValueIsFilled(props.displayValue)
       ),

package/src/components/tabs/use-tab.js

@@ -138,9 +138,16 @@ export default function (props, slots, emit, routerProps) {
     if (isKeyCode(e, [ 13, 32 ])) {
       onClick(e, true)
     }
-    else if (shouldIgnoreKey(e) !== true && e.keyCode >= 35 && e.keyCode <= 40) {
+    else if (
+      shouldIgnoreKey(e) !== true
+      && e.keyCode >= 35
+      && e.keyCode <= 40
+      && e.altKey !== true
+      && e.metaKey !== true
+    ) {
       $tabs.onKbdNavigate(e.keyCode, proxy.$el) === true && stopAndPrevent(e)
     }
+
     emit('keydown', e)
   }
 

package/src/components/uploader/uploader-core.js

@@ -264,14 +264,14 @@ export function getRenderer (getPlugin) {
 
   function addFilesToQueue (e, fileList) {
     const localFiles = processFiles(e, fileList, state.files.value, true)
-
-    if (localFiles === void 0) { return }
-
     const fileInput = getFileInput()
+
     if (fileInput !== void 0 && fileInput !== null) {
       fileInput.value = ''
     }
 
+    if (localFiles === void 0) { return }
+
     localFiles.forEach(file => {
       state.updateFileStatus(file, 'idle')
       uploadSize.value += file.size

package/src/composables/private/use-refocus-target.js

@@ -4,7 +4,7 @@ export default function (props, rootRef) {
   const refocusRef = ref(null)
 
   const refocusTargetEl = computed(() => {
-    if (props.disable !== true) {
+    if (props.disable === true) {
       return null
     }
 

package/src/directives/Ripple.js

@@ -78,8 +78,14 @@ export default createDirective(__QUASAR_SSR_SERVER__
       name: 'ripple',
 
       beforeMount (el, binding) {
+        const cfg = binding.instance.$.appContext.config.globalProperties.$q.config || {}
+
+        if (cfg.ripple === false) {
+          return
+        }
+
         const ctx = {
-          cfg: binding.instance.$.appContext.config.globalProperties.$q.config,
+          cfg,
           enabled: binding.value !== false,
           modifiers: {},
           abort: [],
@@ -121,19 +127,23 @@ export default createDirective(__QUASAR_SSR_SERVER__
       updated (el, binding) {
         if (binding.oldValue !== binding.value) {
           const ctx = el.__qripple
-          ctx.enabled = binding.value !== false
+          if (ctx !== void 0) {
+            ctx.enabled = binding.value !== false
 
-          if (ctx.enabled === true && Object(binding.value) === binding.value) {
-            updateModifiers(ctx, binding)
+            if (ctx.enabled === true && Object(binding.value) === binding.value) {
+              updateModifiers(ctx, binding)
+            }
           }
         }
       },
 
       beforeUnmount (el) {
         const ctx = el.__qripple
-        ctx.abort.forEach(fn => { fn() })
-        cleanEvt(ctx, 'main')
-        delete el._qripple
+        if (ctx !== void 0) {
+          ctx.abort.forEach(fn => { fn() })
+          cleanEvt(ctx, 'main')
+          delete el._qripple
+        }
       }
     }
 )

package/src/utils/private/global-dialog.js

@@ -1,4 +1,4 @@
-import { h, ref, nextTick } from 'vue'
+import { h, ref } from 'vue'
 
 import { createChildApp } from '../../install-quasar.js'
 import { createGlobalNode, removeGlobalNode } from './global-nodes.js'
@@ -73,10 +73,10 @@ export default function (DefaultComponent, supportsCustomComponent, parentApp) {
 
         // account for "script setup" + async component way of declaring component
         if (
-          target.component.subTree &&
-          target.component.subTree.component &&
-          target.component.subTree.component.proxy &&
-          target.component.subTree.component.proxy[ cmd ]
+          target.component.subTree
+          && target.component.subTree.component
+          && target.component.subTree.component.proxy
+          && target.component.subTree.component.proxy[ cmd ]
         ) {
           target.component.subTree.component.proxy[ cmd ]()
           return
@@ -149,25 +149,19 @@ export default function (DefaultComponent, supportsCustomComponent, parentApp) {
         ...props,
         ref: dialogRef,
         onOk,
-        onHide
+        onHide,
+        onVnodeMounted (...args) {
+          if (typeof props.onVnodeMounted === 'function') {
+            props.onVnodeMounted(...args)
+          }
+
+          applyState('show')
+        }
       })
     }, parentApp)
 
     vm = app.mount(el)
 
-    function show () {
-      applyState('show')
-    }
-
-    if (typeof DialogComponent.__asyncLoader === 'function') {
-      DialogComponent.__asyncLoader().then(() => {
-        nextTick(show)
-      })
-    }
-    else {
-      nextTick(show)
-    }
-
     return API
   }
 }