quasar 2.18.7 → 2.19.1

package/src/components/pagination/QPagination.json

@@ -11,14 +11,14 @@
     },
 
     "min": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Minimum page (must be lower than 'max')",
       "default": "1",
       "category": "model"
     },
 
     "max": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Number of last page (must be higher than 'min')",
       "required": true,
       "category": "model"
@@ -32,7 +32,7 @@
     "size": {
       "type": "String",
       "desc": "Button size in CSS units, including unit name",
-      "examples": [ "'20px'" ],
+      "examples": ["'20px'"],
       "category": "style"
     },
 
@@ -72,43 +72,43 @@
         }
       },
       "returns": {
-        "type": [ "Object", "String" ],
+        "type": ["Object", "String"],
         "desc": "Object or String that can be passed to a <router-link> as 'to' parameter"
       },
-      "examples": [ "page => ({ query: { page } })" ],
+      "examples": ["page => ({ query: { page } })"],
       "category": "content"
     },
 
     "boundary-links": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "default": "null",
       "desc": "Show boundary button links",
       "category": "content"
     },
 
     "boundary-numbers": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "default": "null",
       "desc": "Always show first and last page buttons (if not using 'input')",
       "category": "content"
     },
 
     "direction-links": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "default": "null",
       "desc": "Show direction buttons",
       "category": "content"
     },
 
     "ellipses": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "default": "null",
       "desc": "Show ellipses (...) when pages are available",
       "category": "content"
     },
 
     "max-pages": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "default": "0",
       "desc": "Maximum number of page links to display at a time; 0 means Infinite",
       "category": "content"
@@ -152,7 +152,7 @@
     "active-design": {
       "type": "String",
       "desc": "The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)",
-      "values": [ "'flat'", "'outline'", "'push'", "'unelevated'", "''" ],
+      "values": ["'flat'", "'outline'", "'push'", "'unelevated'", "''"],
       "default": "''",
       "category": "style",
       "addedIn": "v2.10"
@@ -193,7 +193,14 @@
       "desc": "Apply custom gutter; Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl)",
       "default": "'2px'",
       "__runtimeDefault": true,
-      "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'", "'2px 2px 5px 7px'" ],
+      "examples": [
+        "'16px'",
+        "'10px 5px'",
+        "'2rem'",
+        "'xs'",
+        "'md lg'",
+        "'2px 2px 5px 7px'"
+      ],
       "category": "style",
       "addedIn": "v2.10"
     },
@@ -201,13 +208,20 @@
     "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'", "'2px 2px 5px 7px'" ],
+      "examples": [
+        "'16px'",
+        "'10px 5px'",
+        "'2rem'",
+        "'xs'",
+        "'md lg'",
+        "'2px 2px 5px 7px'"
+      ],
       "default": "'3px 2px'",
       "category": "style"
     },
 
     "input-style": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the input (if using one)",
       "examples": [
@@ -218,22 +232,22 @@
     },
 
     "input-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the input (if using one)",
-      "examples": [
-        "'my-special-class'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'my-special-class'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "ripple": {
-      "type": [ "Boolean", "Object", "null" ],
+      "type": ["Boolean", "Object", "null"],
       "desc": "Configure buttons material ripple (disable it by setting it to 'false' or supply a config object); Does not applies to boundary and ellipsis buttons",
       "default": "true",
       "__runtimeDefault": true,
-      "examples": [ "false", "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
+      "examples": [
+        "false",
+        "{ early: true, center: true, color: 'teal', keyCodes: [] }"
+      ],
       "category": "style"
     }
   },

package/src/components/pagination/index.js

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

package/src/components/parallax/QParallax.js

@@ -29,38 +29,48 @@ export default createComponent({
     onScroll: Function
   },
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const percentScrolled = ref(0)
     const rootRef = ref(null)
     const mediaParentRef = ref(null)
     const mediaRef = ref(null)
 
-    let isWorking, mediaEl, mediaHeight, resizeHandler, observer, localScrollTarget
-
-    watch(() => props.height, () => {
-      isWorking === true && updatePos()
-    })
-
-    watch(() => props.scrollTarget, () => {
-      if (isWorking === true) {
-        stop()
-        start()
+    let isWorking,
+      mediaEl,
+      mediaHeight,
+      resizeHandler,
+      observer,
+      localScrollTarget
+
+    watch(
+      () => props.height,
+      () => {
+        if (isWorking === true) updatePos()
       }
-    })
+    )
+
+    watch(
+      () => props.scrollTarget,
+      () => {
+        if (isWorking === true) {
+          stop()
+          start()
+        }
+      }
+    )
 
     let update = percentage => {
       percentScrolled.value = percentage
-      props.onScroll !== void 0 && emit('scroll', percentage)
+      if (props.onScroll !== void 0) emit('scroll', percentage)
     }
 
-    function updatePos () {
+    function updatePos() {
       let containerTop, containerHeight, containerBottom
 
       if (localScrollTarget === window) {
         containerTop = 0
         containerBottom = containerHeight = window.innerHeight
-      }
-      else {
+      } else {
         containerTop = offset(localScrollTarget).top
         containerHeight = height(localScrollTarget)
         containerBottom = containerTop + containerHeight
@@ -69,24 +79,30 @@ export default createComponent({
       const top = offset(rootRef.value).top
       const bottom = top + props.height
 
-      if (observer !== void 0 || (bottom > containerTop && top < containerBottom)) {
-        const percent = (containerBottom - top) / (props.height + containerHeight)
+      if (
+        observer !== void 0 ||
+        (bottom > containerTop && top < containerBottom)
+      ) {
+        const percent =
+          (containerBottom - top) / (props.height + containerHeight)
         setPos((mediaHeight - props.height) * percent * props.speed)
         update(percent)
       }
     }
 
-    let setPos = offset => {
+    let setPos = newOffset => {
       // apply it immediately without any delay
-      mediaEl.style.transform = `translate3d(-50%,${ Math.round(offset) }px,0)`
+      mediaEl.style.transform = `translate3d(-50%,${Math.round(newOffset)}px,0)`
     }
 
-    function onResize () {
-      mediaHeight = mediaEl.naturalHeight || mediaEl.videoHeight || height(mediaEl)
-      isWorking === true && updatePos()
+    function onResize() {
+      mediaHeight =
+        mediaEl.naturalHeight || mediaEl.videoHeight || height(mediaEl)
+
+      if (isWorking === true) updatePos()
     }
 
-    function start () {
+    function start() {
       isWorking = true
       localScrollTarget = getScrollTarget(rootRef.value, props.scrollTarget)
       localScrollTarget.addEventListener('scroll', updatePos, passive)
@@ -94,7 +110,7 @@ export default createComponent({
       updatePos()
     }
 
-    function stop () {
+    function stop() {
       if (isWorking === true) {
         isWorking = false
         localScrollTarget.removeEventListener('scroll', updatePos, passive)
@@ -111,9 +127,10 @@ export default createComponent({
       update = frameDebounce(update)
       resizeHandler = frameDebounce(onResize)
 
-      mediaEl = slots.media !== void 0
-        ? mediaParentRef.value.children[ 0 ]
-        : mediaRef.value
+      mediaEl =
+        slots.media !== void 0
+          ? mediaParentRef.value.children[0]
+          : mediaRef.value
 
       mediaEl.onload = mediaEl.onloadstart = mediaEl.loadedmetadata = onResize
       onResize()
@@ -121,13 +138,12 @@ export default createComponent({
 
       if (window.IntersectionObserver !== void 0) {
         observer = new IntersectionObserver(entries => {
-          const fn = entries[ 0 ].isIntersecting === true ? start : stop
+          const fn = entries[0].isIntersecting === true ? start : stop
           fn()
         })
 
         observer.observe(rootRef.value)
-      }
-      else {
+      } else {
         start()
       }
     })
@@ -138,30 +154,39 @@ export default createComponent({
       mediaEl.onload = mediaEl.onloadstart = mediaEl.loadedmetadata = null
     })
 
-    return () => {
-      return h('div', {
-        ref: rootRef,
-        class: 'q-parallax',
-        style: { height: `${ props.height }px` }
-      }, [
-        h('div', {
-          ref: mediaParentRef,
-          class: 'q-parallax__media absolute-full'
-        }, slots.media !== void 0 ? slots.media() : [
-          h('img', {
-            ref: mediaRef,
-            src: props.src
-          })
-        ]),
-
-        h(
-          'div',
-          { class: 'q-parallax__content absolute-full column flex-center' },
-          slots.content !== void 0
-            ? slots.content({ percentScrolled: percentScrolled.value })
-            : hSlot(slots.default)
-        )
-      ])
-    }
+    return () =>
+      h(
+        'div',
+        {
+          ref: rootRef,
+          class: 'q-parallax',
+          style: { height: `${props.height}px` }
+        },
+        [
+          h(
+            'div',
+            {
+              ref: mediaParentRef,
+              class: 'q-parallax__media absolute-full'
+            },
+            slots.media !== void 0
+              ? slots.media()
+              : [
+                  h('img', {
+                    ref: mediaRef,
+                    src: props.src
+                  })
+                ]
+          ),
+
+          h(
+            'div',
+            { class: 'q-parallax__content absolute-full column flex-center' },
+            slots.content !== void 0
+              ? slots.content({ percentScrolled: percentScrolled.value })
+              : hSlot(slots.default)
+          )
+        ]
+      )
   }
 })

package/src/components/parallax/index.js

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

package/src/components/popup-edit/QPopupEdit.js

@@ -42,11 +42,16 @@ export default createComponent({
   },
 
   emits: [
-    'update:modelValue', 'save', 'cancel',
-    'beforeShow', 'show', 'beforeHide', 'hide'
+    'update:modelValue',
+    'save',
+    'cancel',
+    'beforeShow',
+    'show',
+    'beforeHide',
+    'hide'
   ],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
@@ -57,17 +62,24 @@ export default createComponent({
 
     let validated = false
 
-    const scope = computed(() => {
-      return injectProp({
-        initialValue: initialValue.value,
-        validate: props.validate,
-        set,
-        cancel,
-        updatePosition
-      }, 'value', () => currentModel.value, val => { currentModel.value = val })
-    })
+    const scope = computed(() =>
+      injectProp(
+        {
+          initialValue: initialValue.value,
+          validate: props.validate,
+          set,
+          cancel,
+          updatePosition
+        },
+        'value',
+        () => currentModel.value,
+        val => {
+          currentModel.value = val
+        }
+      )
+    )
 
-    function set () {
+    function set() {
       if (props.validate(currentModel.value) === false) return
 
       if (hasModelChanged() === true) {
@@ -78,7 +90,7 @@ export default createComponent({
       closeMenu()
     }
 
-    function cancel () {
+    function cancel() {
       if (hasModelChanged() === true) {
         emit('cancel', currentModel.value, initialValue.value)
       }
@@ -86,39 +98,41 @@ export default createComponent({
       closeMenu()
     }
 
-    function updatePosition () {
+    function updatePosition() {
       nextTick(() => {
         menuRef.value.updatePosition()
       })
     }
 
-    function hasModelChanged () {
+    function hasModelChanged() {
       return isDeepEqual(currentModel.value, initialValue.value) === false
     }
 
-    function closeMenu () {
+    function closeMenu() {
       validated = true
       menuRef.value.hide()
     }
 
-    function onBeforeShow () {
+    function onBeforeShow() {
       validated = false
       initialValue.value = clone(props.modelValue)
       currentModel.value = clone(props.modelValue)
       emit('beforeShow')
     }
 
-    function onShow () {
+    function onShow() {
       emit('show')
     }
 
-    function onBeforeHide () {
+    function onBeforeHide() {
       if (validated === false && hasModelChanged() === true) {
-        if (props.autoSave === true && props.validate(currentModel.value) === true) {
+        if (
+          props.autoSave === true &&
+          props.validate(currentModel.value) === true
+        ) {
           emit('save', currentModel.value, initialValue.value)
           emit('update:modelValue', currentModel.value)
-        }
-        else {
+        } else {
           emit('cancel', currentModel.value, initialValue.value)
         }
       }
@@ -126,35 +140,42 @@ export default createComponent({
       emit('beforeHide')
     }
 
-    function onHide () {
+    function onHide() {
       emit('hide')
     }
 
-    function getContent () {
-      const child = slots.default !== void 0
-        ? [].concat(slots.default(scope.value))
-        : []
+    function getContent() {
+      const child =
+        slots.default !== void 0 ? [].concat(slots.default(scope.value)) : []
 
-      props.title && child.unshift(
-        h('div', { class: 'q-dialog__title q-mt-sm q-mb-sm' }, props.title)
-      )
+      if (props.title) {
+        child.unshift(
+          h('div', { class: 'q-dialog__title q-mt-sm q-mb-sm' }, props.title)
+        )
+      }
 
-      props.buttons === true && child.push(
-        h('div', { class: 'q-popup-edit__buttons row justify-center no-wrap' }, [
-          h(QBtn, {
-            flat: true,
-            color: props.color,
-            label: props.labelCancel || $q.lang.label.cancel,
-            onClick: cancel
-          }),
-          h(QBtn, {
-            flat: true,
-            color: props.color,
-            label: props.labelSet || $q.lang.label.set,
-            onClick: set
-          })
-        ])
-      )
+      if (props.buttons === true) {
+        child.push(
+          h(
+            'div',
+            { class: 'q-popup-edit__buttons row justify-center no-wrap' },
+            [
+              h(QBtn, {
+                flat: true,
+                color: props.color,
+                label: props.labelCancel || $q.lang.label.cancel,
+                onClick: cancel
+              }),
+              h(QBtn, {
+                flat: true,
+                color: props.color,
+                label: props.labelSet || $q.lang.label.set,
+                onClick: set
+              })
+            ]
+          )
+        )
+      }
 
       return child
     }
@@ -163,24 +184,32 @@ export default createComponent({
     Object.assign(proxy, {
       set,
       cancel,
-      show (e) { menuRef.value?.show(e) },
-      hide (e) { menuRef.value?.hide(e) },
+      show(e) {
+        menuRef.value?.show(e)
+      },
+      hide(e) {
+        menuRef.value?.hide(e)
+      },
       updatePosition
     })
 
     return () => {
       if (props.disable === true) return
 
-      return h(QMenu, {
-        ref: menuRef,
-        class: 'q-popup-edit',
-        cover: props.cover,
-        onBeforeShow,
-        onShow,
-        onBeforeHide,
-        onHide,
-        onEscapeKey: cancel
-      }, getContent)
+      return h(
+        QMenu,
+        {
+          ref: menuRef,
+          class: 'q-popup-edit',
+          cover: props.cover,
+          onBeforeShow,
+          onShow,
+          onBeforeHide,
+          onHide,
+          onEscapeKey: cancel
+        },
+        getContent
+      )
     }
   }
 })