quasar 2.1.0

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

@@ -0,0 +1,141 @@
+{
+  "props": {
+    "virtual-scroll-horizontal": {
+      "type": "Boolean",
+      "desc": "Make virtual list work in horizontal mode",
+      "category": "behavior"
+    },
+
+    "virtual-scroll-slice-size": {
+      "type": [ "Number", "String" ],
+      "desc": "Minimum number of items to render in the virtual list",
+      "default": "30",
+      "examples": [ "virtual-scroll-slice-size=\"60\"" ],
+      "category": "virtual-scroll"
+    },
+
+    "virtual-scroll-slice-ratio-before": {
+      "type": [ "Number", "String" ],
+      "desc": "Ratio of number of items in visible zone to render before it",
+      "default": "1",
+      "examples": [ "virtual-scroll-slice-ratio-before=\"0.3\"" ],
+      "category": "virtual-scroll",
+      "addedIn": "v1.14.7"
+    },
+
+    "virtual-scroll-slice-ratio-after": {
+      "type": [ "Number", "String" ],
+      "desc": "Ratio of number of items in visible zone to render after it",
+      "default": "1",
+      "examples": [ "virtual-scroll-slice-ratio-after=\"2\"" ],
+      "category": "virtual-scroll",
+      "addedIn": "v1.14.7"
+    },
+
+    "virtual-scroll-item-size": {
+      "type": [ "Number", "String" ],
+      "desc": "Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item",
+      "default": "24",
+      "examples": [ "virtual-scroll-item-size=\"48\"" ],
+      "category": "virtual-scroll"
+    },
+
+    "virtual-scroll-sticky-size-start": {
+      "type": [ "Number", "String" ],
+      "desc": "Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision",
+      "default": "0",
+      "examples": [ "virtual-scroll-sticky-size-start=\"48\"" ],
+      "category": "virtual-scroll"
+    },
+
+    "virtual-scroll-sticky-size-end": {
+      "type": [ "Number", "String" ],
+      "desc": "Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision",
+      "default": "0",
+      "examples": [ "virtual-scroll-sticky-size-end=\"48\"" ],
+      "category": "virtual-scroll"
+    },
+
+    "table-colspan": {
+      "type": [ "Number", "String" ],
+      "desc": "The number of columns in the table (you need this if you use table-layout: fixed)",
+      "examples": [ "table-colspan=\"12\"" ],
+      "category": "virtual-scroll|content"
+    }
+  },
+
+  "events": {
+    "virtual-scroll": {
+      "desc": "Emitted when the virtual scroll occurs",
+      "params": {
+        "details": {
+          "type": "Object",
+          "desc": "Object of properties on the new scroll position",
+          "definition": {
+            "index": {
+              "type": "Number",
+              "desc": "Index of the list item that was scrolled into view (0 based)",
+              "examples": [ 30 ]
+            },
+            "from": {
+              "type": "Number",
+              "desc": "The index of the first list item that is rendered (0 based)",
+              "examples": [ 10 ]
+            },
+            "to": {
+              "type": "Number",
+              "desc": "The index of the last list item that is rendered (0 based)",
+              "examples": [ 50 ]
+            },
+            "direction": {
+              "type": "String",
+              "desc": "Direction of change",
+              "values": [ "increase", "decrease" ]
+            },
+            "ref": {
+              "type": "Object",
+              "desc": "Vue reference to the QVirtualList which triggered the event",
+              "__exemption": [
+                "examples"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
+
+  "methods": {
+    "scrollTo": {
+      "desc": "Scroll the virtual scroll list to the item with the specified index (0 based)",
+      "params": {
+        "index": {
+          "type": [ "String", "Number" ],
+          "desc": "The index of the list item (0 based)",
+          "required": true,
+          "examples": [ "1", 23 ]
+        },
+        "edge": {
+          "type": "String",
+          "desc": "The edge to align to if the item is not visible already (by default it aligns to end if scrolling towards the end and to start otherwise); If the '-force' version is used then it always aligns",
+          "values": [ "start", "center", "end", "start-force", "center-force", "end-force" ]
+        }
+      }
+    },
+
+    "reset": {
+      "desc": "Resets the virtual scroll computations; Needed for custom edge-cases"
+    },
+
+    "refresh": {
+      "desc": "Refreshes the virtual scroll list; Use it after appending items",
+      "params": {
+        "index": {
+          "type": [ "String", "Number" ],
+          "desc": "The index of the list item to scroll to after refresh (0 based); If it's not specified the scroll position is not changed; Use a negative value to keep scroll position",
+          "examples": [ "1", 23, -1 ]
+        }
+      }
+    }
+  }
+}

package/src/components.js

@@ -0,0 +1,79 @@
+export * from './components/ajax-bar/index.js'
+export * from './components/avatar/index.js'
+export * from './components/badge/index.js'
+export * from './components/banner/index.js'
+export * from './components/bar/index.js'
+export * from './components/breadcrumbs/index.js'
+export * from './components/btn/index.js'
+export * from './components/btn-dropdown/index.js'
+export * from './components/btn-group/index.js'
+export * from './components/btn-toggle/index.js'
+export * from './components/card/index.js'
+export * from './components/carousel/index.js'
+export * from './components/chat/index.js'
+export * from './components/checkbox/index.js'
+export * from './components/chip/index.js'
+export * from './components/circular-progress/index.js'
+export * from './components/color/index.js'
+export * from './components/date/index.js'
+export * from './components/dialog/index.js'
+export * from './components/drawer/index.js'
+export * from './components/editor/index.js'
+export * from './components/expansion-item/index.js'
+export * from './components/fab/index.js'
+export * from './components/field/index.js'
+export * from './components/file/index.js'
+export * from './components/footer/index.js'
+export * from './components/form/index.js'
+export * from './components/header/index.js'
+export * from './components/icon/index.js'
+export * from './components/img/index.js'
+export * from './components/infinite-scroll/index.js'
+export * from './components/inner-loading/index.js'
+export * from './components/input/index.js'
+export * from './components/intersection/index.js'
+export * from './components/item/index.js'
+export * from './components/knob/index.js'
+export * from './components/layout/index.js'
+export * from './components/markup-table/index.js'
+export * from './components/menu/index.js'
+export * from './components/no-ssr/index.js'
+export * from './components/option-group/index.js'
+export * from './components/page/index.js'
+export * from './components/page-scroller/index.js'
+export * from './components/page-sticky/index.js'
+export * from './components/pagination/index.js'
+export * from './components/parallax/index.js'
+export * from './components/popup-edit/index.js'
+export * from './components/popup-proxy/index.js'
+export * from './components/linear-progress/index.js'
+export * from './components/pull-to-refresh/index.js'
+export * from './components/radio/index.js'
+export * from './components/range/index.js'
+export * from './components/rating/index.js'
+export * from './components/resize-observer/index.js'
+export * from './components/responsive/index.js'
+export * from './components/scroll-area/index.js'
+export * from './components/scroll-observer/index.js'
+export * from './components/select/index.js'
+export * from './components/separator/index.js'
+export * from './components/skeleton/index.js'
+export * from './components/slide-item/index.js'
+export * from './components/slide-transition/index.js'
+export * from './components/slider/index.js'
+export * from './components/space/index.js'
+export * from './components/spinner/index.js'
+export * from './components/splitter/index.js'
+export * from './components/stepper/index.js'
+export * from './components/tab-panels/index.js'
+export * from './components/table/index.js'
+export * from './components/tabs/index.js'
+export * from './components/time/index.js'
+export * from './components/timeline/index.js'
+export * from './components/toggle/index.js'
+export * from './components/toolbar/index.js'
+export * from './components/tooltip/index.js'
+export * from './components/tree/index.js'
+export * from './components/uploader/index.js'
+export * from './components/video/index.js'
+export * from './components/virtual-scroll/index.js'

package/src/composables/private/use-align.js

@@ -0,0 +1,31 @@
+import { computed } from 'vue'
+
+export const alignMap = {
+  left: 'start',
+  center: 'center',
+  right: 'end',
+  between: 'between',
+  around: 'around',
+  evenly: 'evenly',
+  stretch: 'stretch'
+}
+
+export const alignValues = Object.keys(alignMap)
+
+export const useAlignProps = {
+  align: {
+    type: String,
+    validator: v => alignValues.includes(v)
+  }
+}
+
+export default function (props) {
+  // return alignClass
+  return computed(() => {
+    const align = props.align === void 0
+      ? props.vertical === true ? 'stretch' : 'left'
+      : props.align
+
+    return `${ props.vertical === true ? 'items' : 'justify' }-${ alignMap[ align ] }`
+  })
+}

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

@@ -0,0 +1,208 @@
+import { ref, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+
+import { clearSelection } from '../../utils/private/selection.js'
+import { addEvt, cleanEvt, prevent } from '../../utils/event.js'
+import { isKeyCode } from '../../utils/private/key-composition.js'
+
+export const useAnchorProps = {
+  target: {
+    default: true
+  },
+  noParentEvent: Boolean,
+  contextMenu: Boolean
+}
+
+export default function ({
+  showing,
+  avoidEmit, // required for QPopupProxy (true)
+  configureAnchorEl // optional
+}) {
+  const { props, proxy, emit } = getCurrentInstance()
+
+  const anchorEl = ref(null)
+
+  let touchTimer
+
+  function canShow (evt) {
+    // abort with no parent configured or on multi-touch
+    return anchorEl.value === null
+      ? false
+      : (evt === void 0 || evt.touches === void 0 || evt.touches.length <= 1)
+  }
+
+  const anchorEvents = {}
+
+  if (configureAnchorEl === void 0) {
+    // default configureAnchorEl is designed for
+    // QMenu & QPopupProxy (which is why it's handled here)
+
+    Object.assign(anchorEvents, {
+      hide (evt) {
+        proxy.hide(evt)
+      },
+
+      toggle (evt) {
+        proxy.toggle(evt)
+      },
+
+      toggleKey (evt) {
+        isKeyCode(evt, 13) === true && proxy.toggle(evt)
+      },
+
+      contextClick (evt) {
+        proxy.hide(evt)
+        nextTick(() => { proxy.show(evt) })
+        prevent(evt)
+      },
+
+      mobilePrevent: prevent,
+
+      mobileTouch (evt) {
+        anchorEvents.mobileCleanup(evt)
+
+        if (canShow(evt) !== true) {
+          return
+        }
+
+        proxy.hide(evt)
+        anchorEl.value.classList.add('non-selectable')
+
+        const target = evt.target
+        addEvt(anchorEvents, 'anchor', [
+          [ target, 'touchmove', 'mobileCleanup', 'passive' ],
+          [ target, 'touchend', 'mobileCleanup', 'passive' ],
+          [ target, 'touchcancel', 'mobileCleanup', 'passive' ],
+          [ anchorEl.value, 'contextmenu', 'mobilePrevent', 'notPassive' ]
+        ])
+
+        touchTimer = setTimeout(() => {
+          proxy.show(evt)
+        }, 300)
+      },
+
+      mobileCleanup (evt) {
+        anchorEl.value.classList.remove('non-selectable')
+        clearTimeout(touchTimer)
+
+        if (showing.value === true && evt !== void 0) {
+          clearSelection()
+        }
+      }
+    })
+
+    configureAnchorEl = function (context = props.contextMenu) {
+      if (props.noParentEvent === true || anchorEl.value === null) { return }
+
+      let evts
+
+      if (context === true) {
+        if (proxy.$q.platform.is.mobile === true) {
+          evts = [
+            [ anchorEl.value, 'touchstart', 'mobileTouch', 'passive' ]
+          ]
+        }
+        else {
+          evts = [
+            [ anchorEl.value, 'click', 'hide', 'passive' ],
+            [ anchorEl.value, 'contextmenu', 'contextClick', 'notPassive' ]
+          ]
+        }
+      }
+      else {
+        evts = [
+          [ anchorEl.value, 'click', 'toggle', 'passive' ],
+          [ anchorEl.value, 'keyup', 'toggleKey', 'passive' ]
+        ]
+      }
+
+      addEvt(anchorEvents, 'anchor', evts)
+    }
+  }
+
+  function unconfigureAnchorEl () {
+    cleanEvt(anchorEvents, 'anchor')
+  }
+
+  function setAnchorEl (el) {
+    anchorEl.value = el
+    while (anchorEl.value.classList.contains('q-anchor--skip')) {
+      anchorEl.value = anchorEl.value.parentNode
+    }
+    configureAnchorEl()
+  }
+
+  function pickAnchorEl () {
+    if (props.target === false || props.target === '') {
+      anchorEl.value = null
+    }
+    else if (props.target === true) {
+      setAnchorEl(proxy.$el.parentNode)
+    }
+    else {
+      let el = props.target
+
+      if (typeof props.target === 'string') {
+        try {
+          el = document.querySelector(props.target)
+        }
+        catch (err) {
+          el = void 0
+        }
+      }
+
+      if (el !== void 0 && el !== null) {
+        anchorEl.value = el.$el || el
+        configureAnchorEl()
+      }
+      else {
+        anchorEl.value = null
+        console.error(`Anchor: target "${ props.target }" not found`)
+      }
+    }
+  }
+
+  watch(() => props.contextMenu, val => {
+    if (anchorEl.value !== null) {
+      unconfigureAnchorEl()
+      configureAnchorEl(val)
+    }
+  })
+
+  watch(() => props.target, () => {
+    if (anchorEl.value !== null) {
+      unconfigureAnchorEl()
+    }
+
+    pickAnchorEl()
+  })
+
+  watch(() => props.noParentEvent, val => {
+    if (anchorEl.value !== null) {
+      if (val === true) {
+        unconfigureAnchorEl()
+      }
+      else {
+        configureAnchorEl()
+      }
+    }
+  })
+
+  onMounted(() => {
+    pickAnchorEl()
+
+    if (avoidEmit !== true && props.modelValue === true && anchorEl.value === null) {
+      emit('update:modelValue', false)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    clearTimeout(touchTimer)
+    unconfigureAnchorEl()
+  })
+
+  return {
+    anchorEl,
+    canShow,
+    anchorEvents
+  }
+}