quasar 2.4.11 → 2.5.1

package/src/components/tabs/__tests__/QRouteTab.spec.js

@@ -0,0 +1,9 @@
+describe('RouteTab API', () => {
+  describe('Events', () => {
+    describe('(event): click', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

package/src/components/tabs/__tests__/QTab.spec.js

@@ -0,0 +1,79 @@
+describe('Tab API', () => {
+  describe('Props', () => {
+    describe('Category: content', () => {
+      describe('(prop): icon', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): label', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): alert', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): alert-icon', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): no-caps', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: general', () => {
+      describe('(prop): name', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): tabindex', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: state', () => {
+      describe('(prop): disable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): content-class', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): ripple', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

package/src/components/tabs/__tests__/QTabs.spec.js

@@ -0,0 +1,147 @@
+describe('Tabs API', () => {
+  describe('Props', () => {
+    describe('Category: content', () => {
+      describe('(prop): vertical', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): outside-arrows', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): mobile-arrows', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): align', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): left-icon', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): right-icon', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): stretch', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): shrink', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): switch-indicator', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): narrow-indicator', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): inline-label', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): no-caps', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: content|behavior', () => {
+      describe('(prop): breakpoint', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: model', () => {
+      describe('(prop): model-value', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): active-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): active-bg-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): indicator-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): content-class', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): active-class', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dense', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): update:model-value', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

package/src/components/time/QTime.json

@@ -47,12 +47,12 @@
           "examples": [ 15 ]
         },
         "min": {
-          "type": "Number",
+          "type": [ "Number", "null" ],
           "desc": "Minutes",
           "examples": [ 38 ]
         },
         "sec": {
-          "type": "Number",
+          "type": [ "Number", "null" ],
           "desc": "Seconds",
           "examples": [ 12 ]
         }

package/src/components/toggle/QToggle.js

@@ -13,10 +13,6 @@ export default createComponent({
     ...useCheckboxProps,
 
     icon: String,
-    checkedIcon: String,
-    uncheckedIcon: String,
-    indeterminateIcon: String,
-
     iconColor: String
   },
 
@@ -24,29 +20,25 @@ export default createComponent({
 
   setup (props) {
     function getInner (isTrue, isIndeterminate) {
-      const computedIcon = computed(() =>
+      const icon = computed(() =>
         (isTrue.value === true
           ? props.checkedIcon
           : (isIndeterminate.value === true ? props.indeterminateIcon : props.uncheckedIcon)
         ) || props.icon
       )
 
-      const computedIconColor = computed(() => {
-        if (isTrue.value === true) {
-          return props.iconColor
-        }
-      })
+      const color = computed(() => (isTrue.value === true ? props.iconColor : null))
 
       return () => [
         h('div', { class: 'q-toggle__track' }),
 
         h('div', {
           class: 'q-toggle__thumb absolute flex flex-center no-wrap'
-        }, computedIcon.value !== void 0
+        }, icon.value !== void 0
           ? [
               h(QIcon, {
-                name: computedIcon.value,
-                color: computedIconColor.value
+                name: icon.value,
+                color: color.value
               })
             ]
           : void 0

package/src/components/toggle/QToggle.json

@@ -11,24 +11,15 @@
     },
 
     "checked-icon": {
-      "type": "String",
-      "desc": "The icon to be used when the toggle is on",
-      "examples": [ "visibility" ],
-      "category": "content"
+      "desc": "The icon to be used when the toggle is on"
     },
 
     "unchecked-icon": {
-      "type": "String",
-      "desc": "The icon to be used when the toggle is off",
-      "examples": [ "visibility_off" ],
-      "category": "content"
+      "desc": "The icon to be used when the toggle is off"
     },
 
     "indeterminate-icon": {
-      "type": "String",
-      "desc": "The icon to be used when the model is indeterminate",
-      "examples": [ "help" ],
-      "category": "content"
+      "desc": "The icon to be used when the model is indeterminate"
     },
 
     "icon-color": {

package/src/components/uploader/__tests__/QUploader.spec.js

@@ -0,0 +1,161 @@
+describe('Uploader API', () => {
+  describe('Props', () => {
+    describe('Category: behavior', () => {
+      describe('(prop): auto-upload', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): hide-upload-btn', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: content', () => {
+      describe('(prop): label', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): no-thumbnails', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: state', () => {
+      describe('(prop): disable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): readonly', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): text-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dark', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): square', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): flat', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): bordered', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): header', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(slot): list', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): added', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(event): removed', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(event): start', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(event): finish', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): upload', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): abort', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): reset', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): removeUploadedFiles', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): removeQueuedFiles', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): removeFile', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -559,13 +559,14 @@ export function useVirtualScroll ({
     prevToIndex = -1
     prevScrollStart = void 0
 
+    virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from)
+    virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value)
+
     if (toIndex >= 0) {
       updateVirtualScrollSizes(virtualScrollSliceRange.value.from)
       nextTick(() => { scrollTo(toIndex) })
     }
     else {
-      virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from)
-      virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value)
       onVirtualScrollEvt()
     }
   }
@@ -590,7 +591,9 @@ export function useVirtualScroll ({
 
     localScrollViewSize = scrollViewSize
 
-    const multiplier = 1 + props.virtualScrollSliceRatioBefore + props.virtualScrollSliceRatioAfter
+    const virtualScrollSliceRatioBefore = parseFloat(props.virtualScrollSliceRatioBefore) || 0
+    const virtualScrollSliceRatioAfter = parseFloat(props.virtualScrollSliceRatioAfter) || 0
+    const multiplier = 1 + virtualScrollSliceRatioBefore + virtualScrollSliceRatioAfter
     const view = scrollViewSize === void 0 || scrollViewSize <= 0
       ? 1
       : Math.ceil(scrollViewSize / virtualScrollItemSizeComputed.value)
@@ -603,9 +606,9 @@ export function useVirtualScroll ({
 
     virtualScrollSliceSizeComputed.value = {
       total: Math.ceil(baseSize * multiplier),
-      start: Math.ceil(baseSize * props.virtualScrollSliceRatioBefore),
-      center: Math.ceil(baseSize * (0.5 + props.virtualScrollSliceRatioBefore)),
-      end: Math.ceil(baseSize * (1 + props.virtualScrollSliceRatioBefore)),
+      start: Math.ceil(baseSize * virtualScrollSliceRatioBefore),
+      center: Math.ceil(baseSize * (0.5 + virtualScrollSliceRatioBefore)),
+      end: Math.ceil(baseSize * (1 + virtualScrollSliceRatioBefore)),
       view
     }
   }

package/src/composables/private/__tests__/FieldWrapper.vue

@@ -0,0 +1,39 @@
+<template>
+  <div style="margin: 150px auto" class="row justify-center" data-cy="wrapper">
+    <q-select data-cy="select" class="select-root" ref="compRef" v-bind="$attrs" style="min-width: 300px"></q-select>
+  </div>
+  <q-btn class="hidden" data-cy="method-show" @click="show" />
+  <q-btn class="hidden" data-cy="method-hide" @click="hide" />
+  <q-btn class="hidden" data-cy="method-toggle" @click="toggle" />
+  <q-btn class="hidden" data-cy="method-focus" @click="focusMethod" />
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  inheritAttrs: false,
+  setup () {
+    const compRef = ref(null)
+
+    function show () {
+      compRef.value.show()
+    }
+
+    function hide () {
+      compRef.value.hide()
+    }
+
+    function toggle () {
+      compRef.value.toggle()
+    }
+
+    function focusMethod () {
+      compRef.value.focus()
+    }
+
+    return { compRef, show, hide, toggle, focusMethod }
+  }
+})
+
+</script>

package/src/composables/private/__tests__/use-anchor.spec.js

@@ -0,0 +1,99 @@
+import { mount } from '@cypress/vue'
+import WrapperOne from './../../../components/menu/__tests__/WrapperOne.vue'
+
+describe('use-anchor API', () => {
+  describe('Props', () => {
+    describe('Category: behavior', () => {
+      describe('(prop): target', () => {
+        it('should use another target using a CSS selector', () => {
+          mount(WrapperOne, {
+            attrs: {
+              target: '.other-target'
+            }
+          })
+
+          // Click on parent element should not show menu
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu')
+            .should('not.exist')
+
+          // Click on other target should show menu
+          cy.dataCy('other-target')
+            .click()
+          cy.dataCy('menu')
+            .should('exist')
+        })
+
+        it('should not show when target is false', () => {
+          mount(WrapperOne, {
+            attrs: {
+              target: false
+            }
+          })
+
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu')
+            .should('not.exist')
+        })
+      })
+
+      describe('(prop): no-parent-event', () => {
+        it('should not show when clicking parent with no-parent-event true', () => {
+          mount(WrapperOne, {
+            attrs: {
+              'no-parent-event': true
+            }
+          })
+
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu')
+            .should('not.exist')
+        })
+
+        it('should show when clicking parent with no-parent-event false', () => {
+          mount(WrapperOne, {
+            attrs: {
+              'no-parent-event': false
+            }
+          })
+
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu')
+            .should('exist')
+        })
+      })
+
+      describe('(prop): context-menu', () => {
+        it('should not show when left clicking parent', () => {
+          mount(WrapperOne, {
+            attrs: {
+              'context-menu': true
+            }
+          })
+
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu')
+            .should('not.exist')
+        })
+
+        it('should show when right clicking parent', () => {
+          mount(WrapperOne, {
+            attrs: {
+              'context-menu': true
+            }
+          })
+
+          cy.dataCy('wrapper')
+            .rightclick()
+          cy.dataCy('menu')
+            .should('exist')
+        })
+      })
+    })
+  })
+})