quasar 2.18.6 → 2.19.0

package/src/components/fab/QFab.js

@@ -5,14 +5,17 @@ import QIcon from '../icon/QIcon.js'
 
 import useFab, { useFabProps } from './use-fab.js'
 import useId from '../../composables/use-id/use-id.js'
-import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js'
+import useModelToggle, {
+  useModelToggleProps,
+  useModelToggleEmits
+} from '../../composables/private.use-model-toggle/use-model-toggle.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
 import { fabKey } from '../../utils/private.symbols/symbols.js'
 
-const directions = [ 'up', 'right', 'down', 'left' ]
-const alignValues = [ 'left', 'center', 'right' ]
+const directions = ['up', 'right', 'down', 'left']
+const alignValues = ['left', 'center', 'right']
 
 export default createComponent({
   name: 'QFab',
@@ -47,12 +50,14 @@ export default createComponent({
 
   emits: useModelToggleEmits,
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const triggerRef = ref(null)
     const showing = ref(props.modelValue === true)
     const targetUid = useId()
 
-    const { proxy: { $q } } = getCurrentInstance()
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
     const { formClass, labelProps } = useFab(props, showing)
 
     const hideOnRouteChange = computed(() => props.persistent !== true)
@@ -64,16 +69,18 @@ export default createComponent({
 
     const slotScope = computed(() => ({ opened: showing.value }))
 
-    const classes = computed(() =>
-      'q-fab z-fab row inline justify-center'
-      + ` q-fab--align-${ props.verticalActionsAlign } ${ formClass.value }`
-      + (showing.value === true ? ' q-fab--opened' : ' q-fab--closed')
+    const classes = computed(
+      () =>
+        'q-fab z-fab row inline justify-center' +
+        ` q-fab--align-${props.verticalActionsAlign} ${formClass.value}` +
+        (showing.value === true ? ' q-fab--opened' : ' q-fab--closed')
     )
 
-    const actionClass = computed(() =>
-      'q-fab__actions flex no-wrap inline'
-      + ` q-fab__actions--${ props.direction }`
-      + ` q-fab__actions--${ showing.value === true ? 'opened' : 'closed' }`
+    const actionClass = computed(
+      () =>
+        'q-fab__actions flex no-wrap inline' +
+        ` q-fab__actions--${props.direction}` +
+        ` q-fab__actions--${showing.value === true ? 'opened' : 'closed'}`
     )
 
     const actionAttrs = computed(() => {
@@ -83,39 +90,51 @@ export default createComponent({
       }
 
       if (showing.value !== true) {
-        attrs[ 'aria-hidden' ] = 'true'
+        attrs['aria-hidden'] = 'true'
       }
 
       return attrs
     })
 
-    const iconHolderClass = computed(() =>
-      'q-fab__icon-holder '
-      + ` q-fab__icon-holder--${ showing.value === true ? 'opened' : 'closed' }`
+    const iconHolderClass = computed(
+      () =>
+        'q-fab__icon-holder ' +
+        ` q-fab__icon-holder--${showing.value === true ? 'opened' : 'closed'}`
     )
 
-    function getIcon (kebab, camel) {
-      const slotFn = slots[ kebab ]
-      const classes = `q-fab__${ kebab } absolute-full`
+    function getIcon(kebab, camel) {
+      const slotFn = slots[kebab]
+      const localClass = `q-fab__${kebab} absolute-full`
 
       return slotFn === void 0
-        ? h(QIcon, { class: classes, name: props[ camel ] || $q.iconSet.fab[ camel ] })
-        : h('div', { class: classes }, slotFn(slotScope.value))
+        ? h(QIcon, {
+            class: localClass,
+            name: props[camel] || $q.iconSet.fab[camel]
+          })
+        : h('div', { class: localClass }, slotFn(slotScope.value))
     }
 
-    function getTriggerContent () {
+    function getTriggerContent() {
       const child = []
 
-      props.hideIcon !== true && child.push(
-        h('div', { class: iconHolderClass.value }, [
-          getIcon('icon', 'icon'),
-          getIcon('active-icon', 'activeIcon')
-        ])
-      )
+      if (props.hideIcon !== true) {
+        child.push(
+          h('div', { class: iconHolderClass.value }, [
+            getIcon('icon', 'icon'),
+            getIcon('active-icon', 'activeIcon')
+          ])
+        )
+      }
 
       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 ])
+        child[labelProps.value.action](
+          h(
+            'div',
+            labelProps.value.data,
+            slots.label !== void 0
+              ? slots.label(slotScope.value)
+              : [props.label]
+          )
         )
       }
 
@@ -125,7 +144,7 @@ export default createComponent({
     provide(fabKey, {
       showing,
 
-      onChildClick (evt) {
+      onChildClick(evt) {
         hide(evt)
 
         if (evt?.qAvoidFocus !== true) {
@@ -134,27 +153,40 @@ export default createComponent({
       }
     })
 
-    return () => h('div', {
-      class: classes.value
-    }, [
-      h(QBtn, {
-        ref: triggerRef,
-        class: formClass.value,
-        ...props,
-        noWrap: true,
-        stack: props.stacked,
-        align: void 0,
-        icon: void 0,
-        label: void 0,
-        noCaps: true,
-        fab: true,
-        'aria-expanded': showing.value === true ? 'true' : 'false',
-        'aria-haspopup': 'true',
-        'aria-controls': targetUid.value,
-        onClick: toggle
-      }, getTriggerContent),
-
-      h('div', { class: actionClass.value, ...actionAttrs.value }, hSlot(slots.default))
-    ])
+    return () =>
+      h(
+        'div',
+        {
+          class: classes.value
+        },
+        [
+          h(
+            QBtn,
+            {
+              ref: triggerRef,
+              class: formClass.value,
+              ...props,
+              noWrap: true,
+              stack: props.stacked,
+              align: void 0,
+              icon: void 0,
+              label: void 0,
+              noCaps: true,
+              fab: true,
+              'aria-expanded': showing.value === true ? 'true' : 'false',
+              'aria-haspopup': 'true',
+              'aria-controls': targetUid.value,
+              onClick: toggle
+            },
+            getTriggerContent
+          ),
+
+          h(
+            'div',
+            { class: actionClass.value, ...actionAttrs.value },
+            hSlot(slots.default)
+          )
+        ]
+      )
   }
 })

package/src/components/fab/QFab.json

@@ -1,5 +1,8 @@
 {
-  "mixins": [ "composables/private.use-model-toggle/use-model-toggle", "components/fab/use-fab" ],
+  "mixins": [
+    "composables/private.use-model-toggle/use-model-toggle",
+    "components/fab/use-fab"
+  ],
 
   "props": {
     "model-value": {
@@ -28,7 +31,7 @@
       "type": "String",
       "desc": "Direction to expand Fab Actions to",
       "default": "'right'",
-      "values": [ "'up'", "'right'", "'down'", "'left'" ],
+      "values": ["'up'", "'right'", "'down'", "'left'"],
       "category": "behavior"
     },
 
@@ -36,7 +39,7 @@
       "type": "String",
       "desc": "The side of the Fab where Fab Actions will expand (only when direction is 'up' or 'down')",
       "default": "'center'",
-      "values": [ "'left'", "'center'", "'right'" ],
+      "values": ["'left'", "'center'", "'right'"],
       "category": "style|content"
     },
 

package/src/components/fab/QFabAction.js

@@ -34,13 +34,13 @@ export default createComponent({
       validator: v => anchorValues.includes(v)
     },
 
-    to: [ String, Object ],
+    to: [String, Object],
     replace: Boolean
   },
 
-  emits: [ 'click' ],
+  emits: ['click'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const $fab = inject(fabKey, () => ({
       showing: { value: true },
       onChildClick: noop
@@ -49,35 +49,35 @@ export default createComponent({
     const { formClass, labelProps } = useFab(props, $fab.showing)
 
     const classes = computed(() => {
-      const align = anchorMap[ props.anchor ]
-      return formClass.value + (align !== void 0 ? ` ${ align }` : '')
+      const align = anchorMap[props.anchor]
+      return formClass.value + (align !== void 0 ? ` ${align}` : '')
     })
 
-    const isDisabled = computed(() =>
-      props.disable === true
-      || $fab.showing.value !== true
+    const isDisabled = computed(
+      () => props.disable === true || $fab.showing.value !== true
     )
 
-    function click (e) {
+    function click(e) {
       $fab.onChildClick(e)
       emit('click', e)
     }
 
-    function getContent () {
+    function getContent() {
       const child = []
 
       if (slots.icon !== void 0) {
         child.push(slots.icon())
-      }
-      else if (props.icon !== '') {
-        child.push(
-          h(QIcon, { name: props.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 ])
+        child[labelProps.value.action](
+          h(
+            'div',
+            labelProps.value.data,
+            slots.label !== void 0 ? slots.label() : [props.label]
+          )
         )
       }
 
@@ -88,17 +88,22 @@ export default createComponent({
     const vm = getCurrentInstance()
     Object.assign(vm.proxy, { click })
 
-    return () => h(QBtn, {
-      class: classes.value,
-      ...props,
-      noWrap: true,
-      stack: props.stacked,
-      icon: void 0,
-      label: void 0,
-      noCaps: true,
-      fabMini: true,
-      disable: isDisabled.value,
-      onClick: click
-    }, getContent)
+    return () =>
+      h(
+        QBtn,
+        {
+          class: classes.value,
+          ...props,
+          noWrap: true,
+          stack: props.stacked,
+          icon: void 0,
+          label: void 0,
+          noCaps: true,
+          fabMini: true,
+          disable: isDisabled.value,
+          onClick: click
+        },
+        getContent
+      )
   }
 })

package/src/components/fab/QFabAction.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/fab/use-fab" ],
+  "mixins": ["components/fab/use-fab"],
 
   "props": {
     "icon": {
@@ -10,17 +10,14 @@
     "anchor": {
       "type": "String",
       "desc": "How to align the Fab Action relative to Fab expand side; By default it uses the align specified in QFab",
-      "values": [ "'start'", "'center'", "'end'" ],
+      "values": ["'start'", "'center'", "'end'"],
       "category": "style|content"
     },
 
     "to": {
-      "type": [ "String", "Object" ],
+      "type": ["String", "Object"],
       "desc": "Equivalent to Vue Router <router-link> 'to' property",
-      "examples": [
-        "'/home/dashboard'",
-        "{ name: 'my-route-name' }"
-      ],
+      "examples": ["'/home/dashboard'", "{ name: 'my-route-name' }"],
       "category": "router"
     },
 

package/src/components/fab/index.js

@@ -1,7 +1,4 @@
 import QFab from './QFab.js'
 import QFabAction from './QFabAction.js'
 
-export {
-  QFab,
-  QFabAction
-}
+export { QFab, QFabAction }

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

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 
-const labelPositions = [ 'top', 'right', 'bottom', 'left' ]
+const labelPositions = ['top', 'right', 'bottom', 'left']
 
 export const useFabProps = {
   type: {
@@ -21,7 +21,7 @@ export const useFabProps = {
   padding: String,
 
   label: {
-    type: [ String, Number ],
+    type: [String, Number],
     default: ''
   },
   labelPosition: {
@@ -33,39 +33,39 @@ export const useFabProps = {
   hideLabel: {
     type: Boolean
   },
-  labelClass: [ Array, String, Object ],
-  labelStyle: [ Array, String, Object ],
+  labelClass: [Array, String, Object],
+  labelStyle: [Array, String, Object],
 
   disable: Boolean,
 
-  tabindex: [ Number, String ]
+  tabindex: [Number, String]
 }
 
-export default function (props, showing) {
+export default function useFab(props, showing) {
   return {
-    formClass: computed(() =>
-      `q-fab--form-${ props.square === true ? 'square' : 'rounded' }`
+    formClass: computed(
+      () => `q-fab--form-${props.square === true ? 'square' : 'rounded'}`
     ),
 
-    stacked: computed(() =>
-      props.externalLabel === false
-      && [ 'top', 'bottom' ].includes(props.labelPosition)
+    stacked: computed(
+      () =>
+        props.externalLabel === false &&
+        ['top', 'bottom'].includes(props.labelPosition)
     ),
 
     labelProps: computed(() => {
       if (props.externalLabel === true) {
-        const hideLabel = props.hideLabel === null
-          ? showing.value === false
-          : props.hideLabel
+        const hideLabel =
+          props.hideLabel === null ? showing.value === false : props.hideLabel
 
         return {
           action: 'push',
           data: {
             class: [
               props.labelClass,
-              'q-fab__label q-tooltip--style q-fab__label--external'
-              + ` q-fab__label--external-${ props.labelPosition }`
-              + (hideLabel === true ? ' q-fab__label--external-hidden' : '')
+              'q-fab__label q-tooltip--style q-fab__label--external' +
+                ` q-fab__label--external-${props.labelPosition}` +
+                (hideLabel === true ? ' q-fab__label--external-hidden' : '')
             ],
             style: props.labelStyle
           }
@@ -73,14 +73,14 @@ export default function (props, showing) {
       }
 
       return {
-        action: [ 'left', 'top' ].includes(props.labelPosition)
+        action: ['left', 'top'].includes(props.labelPosition)
           ? 'unshift'
           : 'push',
         data: {
           class: [
             props.labelClass,
-            `q-fab__label q-fab__label--internal q-fab__label--internal-${ props.labelPosition }`
-            + (props.hideLabel === true ? ' q-fab__label--internal-hidden' : '')
+            `q-fab__label q-fab__label--internal q-fab__label--internal-${props.labelPosition}` +
+              (props.hideLabel === true ? ' q-fab__label--internal-hidden' : '')
           ],
           style: props.labelStyle
         }

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

@@ -4,11 +4,11 @@
   },
 
   "props": {
-    "type":{
+    "type": {
       "type": "String",
       "desc": "Define the button HTML DOM type",
       "default": "'a'",
-      "values": [ "'a'", "'submit'", "'button'", "'reset'" ],
+      "values": ["'a'", "'submit'", "'button'", "'reset'"],
       "category": "general"
     },
 
@@ -39,7 +39,7 @@
     "padding": {
       "type": "String",
       "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set",
-      "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'" ],
+      "examples": ["'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'"],
       "category": "style"
     },
 
@@ -64,9 +64,9 @@
     },
 
     "label": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "The label that will be shown when Fab is extended",
-      "examples": [ "'Button Label'" ],
+      "examples": ["'Button Label'"],
       "default": "''",
       "category": "content"
     },
@@ -74,30 +74,27 @@
     "label-position": {
       "type": "String",
       "desc": "Position of the label around the icon",
-      "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
+      "values": ["'top'", "'right'", "'bottom'", "'left'"],
       "default": "'right'",
       "category": "style|content"
     },
 
     "hide-label": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "desc": "Hide the label; Useful for animation purposes where you toggle the visibility of the label",
       "category": "style|content"
     },
 
     "label-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the label container",
-      "examples": [
-        "'my-special-class'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'my-special-class'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "label-style": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the label container",
       "examples": [

package/src/components/field/QField.js

@@ -1,4 +1,8 @@
-import useField, { useFieldState, useFieldProps, useFieldEmits } from '../../composables/private.use-field/use-field.js'
+import useField, {
+  useFieldState,
+  useFieldProps,
+  useFieldEmits
+} from '../../composables/private.use-field/use-field.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
@@ -18,9 +22,7 @@ export default createComponent({
 
   emits: useFieldEmits,
 
-  setup () {
-    return useField(
-      useFieldState({ tagProp: true })
-    )
+  setup() {
+    return useField(useFieldState({ tagProp: true }))
   }
 })

package/src/components/field/QField.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-field/use-field" ],
+  "mixins": ["composables/private.use-field/use-field"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/field"
@@ -7,7 +7,7 @@
 
   "props": {
     "maxlength": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Specify a max length of model",
       "category": "model"
     },
@@ -15,7 +15,7 @@
     "tag": {
       "extends": "tag",
       "default": "'label'",
-      "examples": [ "'div'", "'label'" ],
+      "examples": ["'div'", "'label'"],
       "addedIn": "v2.13.1"
     }
   },
@@ -27,7 +27,7 @@
         "id": {
           "type": "String",
           "desc": "Element id used in the 'for' attribute of the field label. Can be used to link the control to the label",
-          "examples": [ "'qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa'" ]
+          "examples": ["'qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa'"]
         },
         "field": {
           "type": "Element",
@@ -48,7 +48,7 @@
         "modelValue": {
           "type": "Any",
           "desc": "Field's value",
-          "examples": [ "0.241", "'Text'" ]
+          "examples": ["0.241", "'Text'"]
         },
         "emitValue": {
           "type": "Function",
@@ -58,7 +58,7 @@
               "type": "Any",
               "required": true,
               "desc": "Value to be emitted",
-              "examples": [ "0", "'Changed text'" ]
+              "examples": ["0", "'Changed text'"]
             }
           },
           "returns": null

package/src/components/field/QField.sass

@@ -401,14 +401,13 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
         opacity: 0
 
       .q-field__native, .q-field__input
-        &::-webkit-input-placeholder
-          color: transparent
-        &::-moz-placeholder
-          color: transparent
+
         &:-ms-input-placeholder
           color: transparent !important
-        &::-ms-input-placeholder
-          color: transparent
+
+        &::-webkit-input-placeholder,
+        &::-moz-placeholder,
+        &::-ms-input-placeholder,
         &::placeholder
           color: transparent
 

package/src/components/field/index.js

@@ -1,5 +1,3 @@
 import QField from './QField.js'
 
-export {
-  QField
-}
+export { QField }