quasar 2.3.1 → 2.4.0

package/src/components/color/QColor.sass

@@ -97,47 +97,34 @@
     border-radius: 50%
     transform: translate(-5px, -5px)
 
-  &__hue .q-slider__track-container
+  &__hue .q-slider__track
     background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important // @stylint ignore
     opacity: 1
 
-  &__alpha .q-slider__track-container
-    color: #fff
-    opacity: 1
-    height: 8px
-    background-color: #fff !important
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
-    &:after
+  &__alpha
+    .q-slider__track-container
+      padding-top: 0
+    .q-slider__track:before
       content: ''
       position: absolute
       top: 0
       right: 0
       bottom: 0
       left: 0
+      border-radius: inherit
       background: linear-gradient(90deg, rgba(255,255,255,0), $grey-7)
 
   &__sliders
-    padding: 4px 16px 16px
-
-    .q-slider__track-container
-      height: 10px
-      margin-top: -5px
-
-    .q-slider__track
-      display: none
+    padding: 0 16px
 
     .q-slider__thumb
+      color: $grey-9
       path
         stroke-width: 2px
         fill: transparent
     .q-slider--active path
       stroke-width: 3px
 
-    .q-slider
-      height: 16px
-      margin-top: 8px
-      color: $grey-9
-
   /* Tune Tab */
 
   &__tune-tab
@@ -188,5 +175,5 @@
     .q-color-picker__tune-tab input
       border: 1px solid rgba(#fff, .3)
 
-    .q-slider
-      color: $grey-5
+    .q-slider__thumb
+      color: $grey-1

package/src/components/date/QDate.json

@@ -209,35 +209,42 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year of the date that the user has clicked/tapped on",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month of the date that the user has clicked/tapped on",
               "__exemption": [ "examples" ]
             },
             "day": {
               "type": "Number",
+              "required": true,
               "desc": "The day of the month that the user has clicked/tapped on",
               "__exemption": [ "examples" ]
             },
             "from": {
               "type": "Object",
+              "required": false,
               "desc": "Object of properties of the range starting point (only if range)",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -245,20 +252,24 @@
             },
             "to": {
               "type": "Object",
+              "required": false,
               "desc": "Object of properties of the range ending point (only if range)",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -278,11 +289,13 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month",
               "__exemption": [ "examples" ]
             }
@@ -300,16 +313,19 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month",
               "__exemption": [ "examples" ]
             },
             "day": {
               "type": "Number",
+              "required": true,
               "desc": "The day of month",
               "__exemption": [ "examples" ]
             }
@@ -327,20 +343,24 @@
           "definition": {
             "from": {
               "type": "Object",
+              "required": true,
               "desc": "Definition of date from where the range begins",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -348,20 +368,24 @@
             },
             "to": {
               "type": "Object",
+              "required": true,
               "desc": "Definition of date to where the range ends",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -383,8 +407,8 @@
       "params": {
         "view": {
           "type": "String",
-          "desc": "QDate view name",
           "required": true,
+          "desc": "QDate view name",
           "values": [ "Calendar", "Months", "Years" ]
         }
       }

package/src/components/date/QDate.sass

@@ -95,6 +95,8 @@
     > div
       line-height: 30px
       text-align: center
+    > button
+      line-height: 22px
 
     &--out
       opacity: .18

package/src/components/drawer/QDrawer.js

@@ -330,6 +330,13 @@ export default createComponent({
       ] ]
     })
 
+    function updateBelowBreakpoint () {
+      updateLocal(belowBreakpoint, (
+        props.behavior === 'mobile'
+        || (props.behavior !== 'desktop' && $layout.totalWidth.value <= props.breakpoint)
+      ))
+    }
+
     watch(belowBreakpoint, val => {
       if (val === true) { // from lg to xs
         lastDesktopState = showing.value
@@ -351,13 +358,6 @@ export default createComponent({
       }
     })
 
-    watch($layout.totalWidth, val => {
-      updateLocal(belowBreakpoint, (
-        props.behavior === 'mobile'
-        || (props.behavior !== 'desktop' && val <= props.breakpoint)
-      ))
-    })
-
     watch(() => props.side, (newSide, oldSide) => {
       if ($layout.instances[ oldSide ] === instance) {
         $layout.instances[ oldSide ] = void 0
@@ -371,10 +371,20 @@ export default createComponent({
       $layout[ newSide ].offset = offset.value
     })
 
-    watch(() => props.behavior + props.breakpoint, updateBelowBreakpoint)
+    watch($layout.totalWidth, () => {
+      if ($layout.isContainer.value === true || document.qScrollPrevented !== true) {
+        updateBelowBreakpoint()
+      }
+    })
+
+    watch(
+      () => props.behavior + props.breakpoint,
+      updateBelowBreakpoint
+    )
 
     watch($layout.isContainer, val => {
       showing.value === true && preventBodyScroll(val !== true)
+      val === true && updateBelowBreakpoint()
     })
 
     watch($layout.scrollbarWidth, () => {
@@ -430,13 +440,6 @@ export default createComponent({
       }
     }
 
-    function updateBelowBreakpoint () {
-      updateLocal(belowBreakpoint, (
-        props.behavior === 'mobile'
-        || (props.behavior !== 'desktop' && $layout.totalWidth.value <= props.breakpoint)
-      ))
-    }
-
     function applyBackdrop (x) {
       flagBackdropBg.value = x
     }

package/src/components/editor/QEditor.js

@@ -80,12 +80,12 @@ export default createComponent({
   ],
 
   setup (props, { slots, emit, attrs }) {
-    const { proxy } = getCurrentInstance()
+    const { proxy, vnode } = getCurrentInstance()
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
     const { inFullscreen, toggleFullscreen } = useFullscreen()
-    const splitAttrs = useSplitAttrs(attrs)
+    const splitAttrs = useSplitAttrs(attrs, vnode)
 
     const rootRef = ref(null)
     const contentRef = ref(null)
@@ -502,7 +502,7 @@ export default createComponent({
       return h('div', {
         ref: rootRef,
         class: classes.value,
-        style: { height: inFullscreen.value === true ? '100vh' : null },
+        style: { height: inFullscreen.value === true ? '100%' : null },
         ...attributes.value,
         onFocusin,
         onFocusout

package/src/components/editor/QEditor.sass

@@ -6,7 +6,9 @@
   &.disabled
     border-style: dashed
 
-  > div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
+  > div:first-child,
+  &__toolbars-container,
+  &__toolbars-container > div:first-child
     border-top-left-radius: inherit
     border-top-right-radius: inherit
 
@@ -17,14 +19,18 @@
     border-bottom-left-radius: inherit
     border-bottom-right-radius: inherit
     overflow: auto
+    max-width: 100%
+
     pre
       white-space: pre-wrap
+
     hr
       border: 0
       outline: 0
       margin: 1px
       height: 1px
       background: $editor-hr-color
+
     &:empty:not(:focus):before
       content: attr(placeholder)
       opacity: .7
@@ -33,6 +39,9 @@
     border-bottom: 1px solid $editor-border-color
     min-height: 32px
 
+  &__toolbars-container
+    max-width: 100%
+
   .q-btn
     margin: $editor-button-gutter
 

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

@@ -96,7 +96,10 @@ export default createComponent({
     })
 
     const hasLink = computed(() =>
-      props.disable !== true && props.to !== void 0 && props.to !== null && props.to !== ''
+      props.disable !== true && (
+        props.href !== void 0
+        || (props.to !== void 0 && props.to !== null && props.to !== '')
+      )
     )
 
     const linkProps = computed(() => {

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

@@ -7,8 +7,9 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "desc": "Model of the component defining 'open' state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "category": "model"
+      "required": false
     },
 
     "icon": {

package/src/components/fab/QFab.js

@@ -59,6 +59,8 @@ export default createComponent({
       hideOnRouteChange
     })
 
+    const slotScope = computed(() => ({ opened: showing.value }))
+
     const classes = computed(() =>
       'q-fab z-fab row inline justify-center'
       + ` q-fab--align-${ props.verticalActionsAlign } ${ formClass.value }`
@@ -76,26 +78,30 @@ export default createComponent({
       + ` q-fab__icon-holder--${ showing.value === true ? 'opened' : 'closed' }`
     )
 
+    function getIcon (kebab, camel) {
+      const slotFn = slots[ kebab ]
+      const classes = `q-fab__${ kebab } absolute-full`
+
+      return slotFn === void 0
+        ? h(QIcon, { class: classes, name: props[ kebab ] || $q.iconSet.fab[ camel ] })
+        : h('div', { class: classes }, slotFn(slotScope.value))
+    }
+
     function getTriggerContent () {
       const child = []
 
       props.hideIcon !== true && child.push(
         h('div', { class: iconHolderClass.value }, [
-          h(QIcon, {
-            class: 'q-fab__icon absolute-full',
-            name: props.icon || $q.iconSet.fab.icon
-          }),
-
-          h(QIcon, {
-            class: 'q-fab__active-icon absolute-full',
-            name: props.activeIcon || $q.iconSet.fab.activeIcon
-          })
+          getIcon('icon', 'icon'),
+          getIcon('active-icon', 'activeIcon')
         ])
       )
 
-      props.label !== '' && child[ labelProps.value.action ](
-        h('div', labelProps.value.data, [ props.label ])
-      )
+      if (props.label !== '' || slots.label !== void 0) {
+        child[ labelProps.value.action ](
+          h('div', labelProps.value.data, slots.label !== void 0 ? slots.label(slotScope.value) : [ props.label ])
+        )
+      }
 
       return hMergeSlot(slots.tooltip, child)
     }

package/src/components/fab/QFab.json

@@ -3,8 +3,10 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "desc": "Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to 'update:modelValue' event",
-      "category": "model"
+      "category": "model",
+      "required": false
     },
 
     "icon": {
@@ -52,6 +54,39 @@
 
     "tooltip": {
       "desc": "Slot specifically designed for a QTooltip"
+    },
+
+    "icon": {
+      "desc": "Slot for icon shown when FAB is closed; Suggestion: QIcon",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      },
+      "addedIn": "v2.4"
+    },
+
+    "active-icon": {
+      "desc": "Slot for icon shown when FAB is opened; Suggestion: QIcon",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      },
+      "addedIn": "v2.4"
+    },
+
+    "label": {
+      "desc": "Slot for label",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      },
+      "addedIn": "v2.4"
     }
   },
 

package/src/components/fab/QFab.sass

@@ -134,7 +134,7 @@
     &--up, &--down
       left: 50%
       margin-left: -28px
-    
+
     &--opened
       opacity: 1
       transform: scale(1) translate(0, 0)

package/src/components/fab/QFabAction.js

@@ -66,13 +66,20 @@ export default createComponent({
     function getContent () {
       const child = []
 
-      props.icon !== '' && child.push(
-        h(QIcon, { name: props.icon })
-      )
-
-      props.label !== '' && child[ labelProps.value.action ](
-        h('div', labelProps.value.data, [ props.label ])
-      )
+      if (slots.icon !== void 0) {
+        child.push(slots.icon())
+      }
+      else if (props.icon !== '') {
+        child.push(
+          h(QIcon, { name: props.icon })
+        )
+      }
+
+      if (props.label !== '' || slots.label !== void 0) {
+        child[ labelProps.value.action ](
+          h('div', labelProps.value.data, slots.label !== void 0 ? slots.label() : [ props.label ])
+        )
+      }
 
       return hMergeSlot(slots.default, child)
     }

package/src/components/fab/QFabAction.json

@@ -35,6 +35,16 @@
   "slots": {
     "default": {
       "desc": "Suggestion for this slot: QTooltip"
+    },
+
+    "icon": {
+      "desc": "Slot for icon; Suggestion: QIcon",
+      "addedIn": "v2.4"
+    },
+
+    "label": {
+      "desc": "Slot for label",
+      "addedIn": "v2.4"
     }
   },
 

package/src/components/field/QField.json

@@ -30,9 +30,8 @@
           "examples": [ "qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa" ]
         },
         "field": {
-          "type": "Object",
-          "desc": "DOM element of the field",
-          "__exemption": [ "examples" ]
+          "type": "Element",
+          "desc": "DOM element of the field"
         },
         "editable": {
           "type": "Boolean",
@@ -57,6 +56,7 @@
           "params": {
             "value": {
               "type": "Any",
+              "required": true,
               "desc": "Value to be emitted",
               "examples": [ 0, "Changed text" ]
             }

package/src/components/file/QFile.js

@@ -9,6 +9,7 @@ import useFileFormDomProps from '../../composables/private/use-file-dom-props.js
 
 import { createComponent } from '../../utils/private/create.js'
 import { humanStorageSize } from '../../utils/format.js'
+import { prevent } from '../../utils/event.js'
 
 export default createComponent({
   name: 'QFile',
@@ -122,9 +123,16 @@ export default createComponent({
       emit('update:modelValue', props.multiple === true ? files : files[ 0 ])
     }
 
+    function onKeydown (e) {
+      // prevent form submit if ENTER is pressed
+      e.keyCode === 13 && prevent(e)
+    }
+
     function onKeyup (e) {
-      // only on ENTER
-      e.keyCode === 13 && pickFiles(e)
+      // only on ENTER and SPACE to match native input field
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        pickFiles(e)
+      }
     }
 
     function getFileInput () {
@@ -158,8 +166,7 @@ export default createComponent({
       return [
         h('input', {
           class: [ props.inputClass, 'q-file__filler' ],
-          style: props.inputStyle,
-          tabindex: -1
+          style: props.inputStyle
         })
       ]
     }
@@ -256,7 +263,7 @@ export default createComponent({
         }
 
         if (state.editable.value === true) {
-          Object.assign(data, { onDragover, onKeyup })
+          Object.assign(data, { onDragover, onKeydown, onKeyup })
         }
 
         return h('div', data, [ getInput() ].concat(getSelection()))

package/src/components/file/QFile.json

@@ -42,16 +42,19 @@
           "definition": {
             "totalSize": {
               "type": "String",
+              "required": true,
               "desc": "The total size of files in human readable format",
               "examples": [ "1.42MB" ]
             },
             "filesNumber": {
               "type": "Number",
+              "required": true,
               "desc": "Number of picked files",
               "examples": [ 5 ]
             },
             "maxFiles": {
               "type": [ "Number", "String" ],
+              "required": true,
               "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value",
               "examples": [ 5 ]
             }
@@ -111,9 +114,9 @@
         },
 
         "ref": {
-          "type": "Object",
-          "desc": "Reference to the QFile component",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QFile",
+          "desc": "Reference to the QFile component"
         }
       }
     },
@@ -128,9 +131,9 @@
         },
 
         "ref": {
-          "type": "Object",
-          "desc": "Reference to the QFile component",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QFile",
+          "desc": "Reference to the QFile component"
         }
       }
     }

package/src/components/file/QFile.sass

@@ -11,8 +11,10 @@
       cursor: pointer
 
   &__filler
-    opacity: 0
-    pointer-events: none
+    visibility: hidden
+    width: 100%
+    border: none
+    padding: 0
 
   &__dnd
     outline: 1px dashed currentColor