quasar 2.2.3 → 2.2.4

package/dist/ssr-directives/Morph.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.2.3
+ * Quasar Framework v2.2.4
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/types/index.d.ts

@@ -11918,6 +11918,10 @@ export interface QTreeProps {
    * Color name for selected nodes (from the Quasar Color Palette)
    */
   selectedColor?: string | undefined;
+  /**
+   * Dense mode; occupies less space
+   */
+  dense?: boolean | undefined;
   /**
    * Notify the component that the background is a dark color
    */

package/dist/vetur/quasar-attributes.json

@@ -5347,6 +5347,10 @@
     "type": "string",
     "description": "Color name for selected nodes (from the Quasar Color Palette)"
   },
+  "q-tree/dense": {
+    "type": "boolean",
+    "description": "Dense mode; occupies less space"
+  },
   "q-tree/dark": {
     "type": "boolean",
     "description": "Notify the component that the background is a dark color"

package/dist/vetur/quasar-tags.json

@@ -1924,6 +1924,7 @@
       "control-color",
       "text-color",
       "selected-color",
+      "dense",
       "dark",
       "icon",
       "tick-strategy",

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -17427,6 +17427,16 @@
               "description": "Color name for selected nodes (from the Quasar Color Palette)\n\nExamples:\nprimary\nteal-10",
               "doc-url": "https://v2.quasar.dev/vue-components/tree"
             },
+            {
+              "name": "dense",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Dense mode; occupies less space",
+              "doc-url": "https://v2.quasar.dev/vue-components/tree",
+              "type": "boolean"
+            },
             {
               "name": "dark",
               "value": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.2.3",
+  "version": "2.2.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",

package/src/components/select/QSelect.js

@@ -933,6 +933,12 @@ export default createComponent({
     }
 
     function getAllOptions () {
+      if (noOptions.value === true) {
+        return slots[ 'no-option' ] !== void 0
+          ? slots[ 'no-option' ]({ inputValue: inputValue.value })
+          : void 0
+      }
+
       const fn = slots.option !== void 0
         ? slots.option
         : scope => {
@@ -1114,14 +1120,6 @@ export default createComponent({
     }
 
     function getMenu () {
-      const child = noOptions.value === true
-        ? (
-            slots[ 'no-option' ] !== void 0
-              ? () => slots[ 'no-option' ]({ inputValue: inputValue.value })
-              : void 0
-          )
-        : getAllOptions
-
       return h(QMenu, {
         ref: menuRef,
         class: menuContentClass.value,
@@ -1146,7 +1144,7 @@ export default createComponent({
         onBeforeShow: onControlPopupShow,
         onBeforeHide: onMenuBeforeHide,
         onShow: onMenuShow
-      }, child)
+      }, getAllOptions)
     }
 
     function onMenuBeforeHide (e) {
@@ -1203,15 +1201,7 @@ export default createComponent({
           ...listboxAttrs.value,
           onClick: prevent,
           onScrollPassive: onVirtualScrollEvt
-        }, (
-          noOptions.value === true
-            ? (
-                slots[ 'no-option' ] !== void 0
-                  ? slots[ 'no-option' ]({ inputValue: inputValue.value })
-                  : null
-              )
-            : getAllOptions()
-        ))
+        }, getAllOptions())
       )
 
       return h(QDialog, {

package/src/components/tabs/QTabs.js

@@ -63,7 +63,7 @@ export default createComponent({
 
     contentClass: String,
 
-    'onUpdate:modelValue': Function
+    'onUpdate:modelValue': [ Function, Array ]
   },
 
   setup (props, { slots, emit }) {

package/src/components/time/QTime.js

@@ -659,21 +659,22 @@ export default createComponent({
     function setHour (hour) {
       if (innerModel.value.hour !== hour) {
         innerModel.value.hour = hour
-        innerModel.value.minute = null
-        innerModel.value.second = null
+        verifyAndUpdate()
       }
     }
 
     function setMinute (minute) {
       if (innerModel.value.minute !== minute) {
         innerModel.value.minute = minute
-        innerModel.value.second = null
-        props.withSeconds !== true && updateValue({ minute })
+        verifyAndUpdate()
       }
     }
 
     function setSecond (second) {
-      innerModel.value.second !== second && updateValue({ second })
+      if (innerModel.value.second !== second) {
+        innerModel.value.second = second
+        verifyAndUpdate()
+      }
     }
 
     const setModel = {

package/src/components/tree/QTree.js

@@ -14,6 +14,8 @@ import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
 
+const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
+
 export default createComponent({
   name: 'QTree',
 
@@ -37,6 +39,8 @@ export default createComponent({
       default: 'children'
     },
 
+    dense: Boolean,
+
     color: String,
     controlColor: String,
     textColor: String,
@@ -47,7 +51,7 @@ export default createComponent({
     tickStrategy: {
       type: String,
       default: 'none',
-      validator: v => [ 'none', 'strict', 'leaf', 'leaf-filtered' ].includes(v)
+      validator: v => tickStrategyOptions.includes(v)
     },
     ticked: Array, // v-model:ticked
     expanded: Array, // v-model:expanded
@@ -92,7 +96,7 @@ export default createComponent({
     })
 
     const classes = computed(() =>
-      'q-tree'
+      `q-tree q-tree--${ props.dense === true ? 'dense' : 'standard' }`
       + (props.noConnectors === true ? ' q-tree--no-connectors' : '')
       + (isDark.value === true ? ' q-tree--dark' : '')
       + (props.color !== void 0 ? ` text-${ props.color }` : '')
@@ -534,13 +538,13 @@ export default createComponent({
 
           m.lazy === 'loading'
             ? h(QSpinner, {
-                class: 'q-tree__spinner q-mr-xs',
+                class: 'q-tree__spinner',
                 color: computedControlColor.value
               })
             : (
                 isParent === true
                   ? h(QIcon, {
-                      class: 'q-tree__arrow q-mr-xs'
+                      class: 'q-tree__arrow'
                     + (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
                       name: computedIcon.value,
                       onClick (e) { onExpandClick(node, m, e) }
@@ -550,7 +554,7 @@ export default createComponent({
 
           m.hasTicking === true && m.noTick !== true
             ? h(QCheckbox, {
-                class: 'q-mr-xs',
+                class: 'q-tree__tickbox',
                 modelValue: m.indeterminate === true ? null : m.ticked,
                 color: computedControlColor.value,
                 dark: isDark.value,

package/src/components/tree/QTree.json

@@ -61,6 +61,11 @@
       "desc": "Color name for selected nodes (from the Quasar Color Palette)"
     },
 
+    "dense": {
+      "extends": "dense",
+      "addedIn": "v2.2.4"
+    },
+
     "dark": {
       "extends": "dark"
     },

package/src/components/tree/QTree.sass

@@ -39,7 +39,7 @@
     position: absolute
     top: -3px
     bottom: 50%
-    width: 35px
+    width: 31px
     left: -35px
     border-left: 1px solid currentColor
     border-bottom: 1px solid currentColor
@@ -84,11 +84,13 @@
   &__node--selected .q-tree__node-header-content
     color: $grey
 
-  &__icon, &__node-header-content .q-icon, &__spinner
+  &__icon,
+  &__node-header-content .q-icon
     font-size: 21px
 
   &__img
     height: 42px
+    border-radius: 2px
 
   &__avatar, &__node-header-content .q-avatar
     font-size: 28px
@@ -96,15 +98,20 @@
     width: 28px
     height: 28px
 
-  &__arrow, &__spinner
+  &__arrow,
+  &__spinner
     font-size: 16px
 
   &__arrow
     transition: transform .3s
+    margin-right: 4px
 
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg)
 
+  &__tickbox
+    margin-right: 4px
+
   // remove connectors before root
   > .q-tree__node
     padding: 0
@@ -123,10 +130,51 @@
     .q-tree__node-body:after
       display: none !important
 
+  &--dense .q-tree
+    &__arrow,
+    &__spinner
+      margin-right: 1px
+
+    &__img
+      height: 32px
+
+    &__tickbox
+      margin-right: 3px
+
+    &__node
+      padding: 0
+      &:after
+        top: 0
+        left: -8px
+
+    &__node-header
+      margin-top: 0
+      padding: 1px
+      &:before
+        top: 0
+        left: -8px
+        width: 8px
+
+    &__node--child
+      padding-left: 17px
+      > .q-tree__node-header:before
+        left: -25px
+        width: 21px
+
+    &__node-body
+      padding: 0 0 2px
+
+    &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
+      padding: 0 0 2px 20px
+      &:after
+        left: 8px
+
+    &__children
+      padding-left: 16px
+
 [dir=rtl]
   .q-tree__arrow
     transform: rotate3d(0, 0, 1, 180deg) #{"/* rtl:ignore */"}
 
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg) #{"/* rtl:ignore */"}
-

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

@@ -260,20 +260,15 @@ export function getRenderer (getPlugin) {
   }
 
   function addFilesToQueue (e, fileList) {
-    const processedFiles = processFiles(e, fileList, state.files.value, true)
+    const localFiles = processFiles(e, fileList, state.files.value, true)
 
-    if (processedFiles === void 0) { return }
-
-    const localFiles = processedFiles
-      .filter(file => state.files.value.findIndex(f => file.name === f.name) === -1)
+    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-file.js

@@ -112,6 +112,14 @@ export default function ({
       files = [ files[ 0 ] ]
     }
 
+    // Avoid duplicate files
+    const filenameMap = currentFileList.map(entry => entry.name)
+    files = filterFiles(files, rejectedFiles, 'duplicate', file => {
+      return filenameMap.includes(file.name) === false
+    })
+
+    if (files.length === 0) { return done() }
+
     if (props.maxTotalSize !== void 0) {
       let size = append === true
         ? currentFileList.reduce((total, file) => total + file.size, 0)

package/src/composables/private/use-model-toggle.js

@@ -8,7 +8,7 @@ export const useModelToggleProps = {
     default: null
   },
 
-  'onUpdate:modelValue': Function
+  'onUpdate:modelValue': [ Function, Array ]
 }
 
 export const useModelToggleEmits = [

package/src/utils/date.js

@@ -403,7 +403,7 @@ export function __splitDate (str, mask, dateLocale, calendar, defaultModel) {
     }
   }
 
-  date.dateHash = date.year + '/' + pad(date.month) + '/' + pad(date.day)
+  date.dateHash = pad(date.year, 6) + '/' + pad(date.month) + '/' + pad(date.day)
   date.timeHash = pad(date.hour) + ':' + pad(date.minute) + ':' + pad(date.second) + tzString
 
   return date