quasar 2.1.0

package/src/components/input/use-mask.json

@@ -0,0 +1,31 @@
+{
+  "props": {
+    "mask": {
+      "type": "String",
+      "desc": "Custom mask or one of the predefined mask names",
+      "examples": [
+        "###-##", "date", "datetime", "time", "fulltime", "phone", "card"
+      ],
+      "category": "behavior"
+    },
+
+    "fill-mask": {
+      "type": [ "Boolean", "String" ],
+      "desc": "Fills string with specified characters (or underscore if value is not string) to fill mask's length",
+      "examples": [ "true", "'0'", "'_'" ],
+      "category": "behavior"
+    },
+
+    "reverse-fill-mask": {
+      "type": "Boolean",
+      "desc": "Fills string from the right side of the mask",
+      "category": "behavior"
+    },
+
+    "unmasked-value": {
+      "type": "Boolean",
+      "desc": "Model will be unmasked (won't contain tokens/separation characters)",
+      "category": "behavior"
+    }
+  }
+}

package/src/components/intersection/QIntersection.js

@@ -0,0 +1,97 @@
+import { h, defineComponent, ref, computed, Transition } from 'vue'
+
+import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
+
+import Intersection from '../../directives/Intersection.js'
+
+import { hSlot, hDir } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QIntersection',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+
+    once: Boolean,
+    transition: String,
+
+    ssrPrerender: Boolean,
+
+    margin: String,
+    threshold: [ Number, Array ],
+    root: {
+      default: null
+    },
+
+    disable: Boolean,
+
+    onVisibility: Function
+  },
+
+  setup (props, { slots, emit }) {
+    const showing = ref(isRuntimeSsrPreHydration.value === true ? props.ssrPrerender : false)
+
+    const intersectionProps = computed(() => (
+      props.root !== void 0 || props.margin !== void 0 || props.threshold !== void 0
+        ? {
+            handler: trigger,
+            cfg: {
+              root: props.root,
+              rootMargin: props.margin,
+              threshold: props.threshold
+            }
+          }
+        : trigger
+    ))
+
+    const hasDirective = computed(() =>
+      props.disable !== true
+      && (isRuntimeSsrPreHydration.value !== true || props.once !== true || props.ssrPrerender !== true)
+    )
+
+    const directives = computed(() => {
+      // if hasDirective.value === true
+      return [ [
+        Intersection,
+        intersectionProps.value,
+        void 0,
+        { once: props.once }
+      ] ]
+    })
+
+    function trigger (entry) {
+      if (showing.value !== entry.isIntersecting) {
+        showing.value = entry.isIntersecting
+        props.onVisibility !== void 0 && emit('visibility', showing.value)
+      }
+    }
+
+    function getContent () {
+      return showing.value === true
+        ? [ h('div', { key: 'content' }, hSlot(slots.default)) ]
+        : void 0
+    }
+
+    return () => {
+      const child = props.transition
+        ? [
+            h(Transition, {
+              name: 'q-transition--' + props.transition
+            }, getContent)
+          ]
+        : getContent()
+
+      return hDir(
+        props.tag,
+        { class: 'q-intersection' },
+        child,
+        'main',
+        hasDirective.value,
+        () => directives.value
+      )
+    }
+  }
+})

package/src/components/intersection/QIntersection.json

@@ -0,0 +1,78 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/intersection"
+  },
+
+  "props": {
+    "tag": {
+      "extends": "tag",
+      "default": "div",
+      "examples": [ "div", "span", "blockquote" ]
+    },
+
+    "once": {
+      "type": "Boolean",
+      "desc": "Get triggered only once",
+      "category": "behavior"
+    },
+
+    "ssr-prerender": {
+      "type": "Boolean",
+      "desc": "Pre-render content on server side if using SSR (use it to pre-render above the fold content)",
+      "category": "behavior"
+    },
+
+    "root": {
+      "type": "Element",
+      "desc": "[Intersection API root prop] Lets you define an alternative to the viewport as your root (through its DOM element); It is important to keep in mind that root needs to be an ancestor of the observed element",
+      "examples": [ "$refs.myTable.$el", "getElementById(\"myTable\")" ],
+      "category": "behavior"
+    },
+
+    "margin": {
+      "type": "String",
+      "desc": "[Intersection API rootMargin prop] Allows you to specify the margins for the root, effectively allowing you to either grow or shrink the area used for intersections",
+      "examples": [ "-20px 0px", "10px 20px 30px 40px" ],
+      "category": "behavior"
+    },
+
+    "threshold": {
+      "type": [ "Array", "Number" ],
+      "desc": "[Intersection API threshold prop] Threshold(s) at which to trigger, specified as a ratio, or list of ratios, of (visible area / total area) of the observed element",
+      "examples": [
+        "[ 0, 0.25, 0.5, 0.75, 1 ]",
+        ":threshold=\"1\""
+      ],
+      "category": "behavior"
+    },
+
+    "transition": {
+      "extends": "transition",
+      "category": "behavior"
+    },
+
+    "disable": {
+      "type": "Boolean",
+      "desc": "Disable visibility observable (content will remain as it was, visible or hidden)",
+      "category": "behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "extends": "default"
+    }
+  },
+
+  "events": {
+    "visibility": {
+      "desc": "Fires when visibility changes",
+      "params": {
+        "isVisible": {
+          "type": "Boolean",
+          "desc": "Visibility status (true/false)"
+        }
+      }
+    }
+  }
+}

package/src/components/intersection/QIntersection.sass

@@ -0,0 +1,2 @@
+.q-intersection
+  position: relative

package/src/components/intersection/index.js

@@ -0,0 +1,5 @@
+import QIntersection from './QIntersection.js'
+
+export {
+  QIntersection
+}

package/src/components/item/QItem.js

@@ -0,0 +1,156 @@
+import { h, defineComponent, ref, computed, getCurrentInstance } from 'vue'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
+
+import { hUniqueSlot } from '../../utils/private/render.js'
+import { stopAndPrevent } from '../../utils/event.js'
+import { isKeyCode } from '../../utils/private/key-composition.js'
+
+export default defineComponent({
+  name: 'QItem',
+
+  props: {
+    ...useDarkProps,
+    ...useRouterLinkProps,
+
+    tag: {
+      type: String,
+      default: 'div'
+    },
+
+    active: Boolean,
+
+    clickable: Boolean,
+    dense: Boolean,
+    insetLevel: Number,
+
+    tabindex: [ String, Number ],
+
+    focused: Boolean,
+    manualFocus: Boolean
+  },
+
+  emits: [ 'click', 'keyup' ],
+
+  setup (props, { slots, emit }) {
+    const { proxy: { $q } } = getCurrentInstance()
+
+    const isDark = useDark(props, $q)
+    const { hasLink, linkProps, linkClass, linkTag, navigateToLink } = useRouterLink()
+
+    const rootRef = ref(null)
+    const blurTargetRef = ref(null)
+
+    const isActionable = computed(() =>
+      props.clickable === true
+        || hasLink.value === true
+        || props.tag === 'a'
+        || props.tag === 'label'
+    )
+
+    const isClickable = computed(() =>
+      props.disable !== true && isActionable.value === true
+    )
+
+    const classes = computed(() =>
+      'q-item q-item-type row no-wrap'
+      + (props.dense === true ? ' q-item--dense' : '')
+      + (isDark.value === true ? ' q-item--dark' : '')
+      + (
+        hasLink.value === true
+          ? linkClass.value
+          : (
+              props.active === true
+                ? `${ props.activeClass !== void 0 ? ` ${ props.activeClass }` : '' } q-item--active`
+                : ''
+            )
+      )
+      + (props.disable === true ? ' disabled' : '')
+      + (
+        isClickable.value === true
+          ? ' q-item--clickable q-link cursor-pointer '
+            + (props.manualFocus === true ? 'q-manual-focusable' : 'q-focusable q-hoverable')
+            + (props.focused === true ? ' q-manual-focusable--focused' : '')
+          : ''
+      )
+    )
+
+    const style = computed(() => {
+      if (props.insetLevel === void 0) {
+        return null
+      }
+
+      const dir = $q.lang.rtl === true ? 'Right' : 'Left'
+      return {
+        [ 'padding' + dir ]: (16 + props.insetLevel * 56) + 'px'
+      }
+    })
+
+    function onClick (e) {
+      if (isClickable.value === true) {
+        if (blurTargetRef.value !== null) {
+          if (e.qKeyEvent !== true && document.activeElement === rootRef.value) {
+            blurTargetRef.value.focus()
+          }
+          else if (document.activeElement === blurTargetRef.value) {
+            rootRef.value.focus()
+          }
+        }
+
+        hasLink.value === true && navigateToLink(e)
+        emit('click', e)
+      }
+    }
+
+    function onKeyup (e) {
+      if (isClickable.value === true && isKeyCode(e, 13) === true) {
+        stopAndPrevent(e)
+
+        // for ripple
+        e.qKeyEvent = true
+
+        // for click trigger
+        const evt = new MouseEvent('click', e)
+        evt.qKeyEvent = true
+        rootRef.value.dispatchEvent(evt)
+      }
+
+      emit('keyup', e)
+    }
+
+    function getContent () {
+      const child = hUniqueSlot(slots.default, [])
+
+      isClickable.value === true && child.unshift(
+        h('div', { class: 'q-focus-helper', tabindex: -1, ref: blurTargetRef })
+      )
+
+      return child
+    }
+
+    return () => {
+      const data = {
+        ref: rootRef,
+        class: classes.value,
+        style: style.value,
+        onClick,
+        onKeyup
+      }
+
+      if (isClickable.value === true) {
+        data.tabindex = props.tabindex || '0'
+        Object.assign(data, linkProps.value)
+      }
+      else if (isActionable.value === true) {
+        data[ 'aria-disabled' ] = 'true'
+      }
+
+      return h(
+        linkTag.value,
+        data,
+        getContent()
+      )
+    }
+  }
+})

package/src/components/item/QItem.json

@@ -0,0 +1,65 @@
+{
+  "mixins": [ "composables/private/use-router-link" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/list-and-list-items"
+  },
+
+  "props": {
+    "active": {
+      "type": "Boolean",
+      "desc": "Put item into 'active' state",
+      "category": "state"
+    },
+
+    "dark": {
+      "extends": "dark"
+    },
+
+    "clickable": {
+      "type": "Boolean",
+      "desc": "Is QItem clickable? If it's the case, then it will add hover effects and emit 'click' events",
+      "category": "state"
+    },
+
+    "dense": {
+      "extends": "dense"
+    },
+
+    "inset-level": {
+      "type": "Number",
+      "desc": "Apply an inset; Useful when avatar/left side is missing but you want to align content with other items that do have a left side, or when you're building a menu",
+      "examples": [ ":inset-level=\"1\"" ],
+      "category": "content"
+    },
+
+    "tabindex": {
+      "extends": "tabindex"
+    },
+
+    "tag": {
+      "extends": "tag",
+      "desc": "HTML tag to render; Suggestion: use 'label' when encapsulating a QCheckbox/QRadio/QToggle so that when user clicks/taps on the whole item it will trigger a model change for the mentioned components",
+      "default": "div",
+      "examples": [ "a", "label", "div" ]
+    },
+
+    "manual-focus": {
+      "type": "Boolean",
+      "desc": "Put item into a manual focus state; Enables 'focused' prop which will determine if item is focused or not, rather than relying on native hover/focus states",
+      "category": "state"
+    },
+
+    "focused": {
+      "type": "Boolean",
+      "desc": "Determines focus state, ONLY if 'manual-focus' is enabled / set to true",
+      "category": "state"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "This is where QItem's content goes"
+    }
+  }
+}

package/src/components/item/QItem.sass

@@ -0,0 +1,119 @@
+.q-item
+  min-height: 48px
+  padding: 8px 16px
+  color: inherit
+  transition: color .3s, background-color .3s
+
+  &__section
+
+    &--side
+      color: $grey-7
+      align-items: flex-start
+      padding-right: 16px
+      width: auto
+      min-width: 0
+      max-width: 100%
+
+      > .q-icon
+        font-size: 24px
+
+      > .q-avatar
+        font-size: 40px
+
+    &--avatar
+      color: inherit
+      min-width: 56px
+
+    &--thumbnail
+      img
+        width: 100px
+        height: 56px
+
+    &--nowrap
+      white-space: nowrap
+
+  > .q-item__section--thumbnail:first-child,
+  > .q-focus-helper + .q-item__section--thumbnail
+    margin-left: -16px
+
+  > .q-item__section--thumbnail:last-of-type
+    margin-right: -16px
+
+  &__label
+    line-height: 1.2em !important
+    max-width: 100%
+
+    &--overline
+      color: rgba(0,0,0,.7)
+
+    &--caption
+      color: rgba(0,0,0,.54)
+
+    &--header
+      color: $grey-7
+      padding: 16px
+      font-size: .875rem
+      line-height: 1.25rem
+      letter-spacing: .01786em
+
+      .q-separator--spaced + &, .q-list--padding &
+        padding-top: 8px
+
+    & + .q-item__label
+      margin-top: 4px
+
+.q-item__section--main
+  width: auto
+  min-width: 0
+  max-width: 100%
+  flex: 10000 1 0%
+
+  & + &
+    margin-left: 8px
+
+  ~ .q-item__section--side
+    align-items: flex-end
+    padding-right: 0
+    padding-left: 16px
+
+  &.q-item__section--thumbnail
+    margin-left: 0
+    margin-right: -16px
+
+.q-list
+  &--bordered
+    border: 1px solid $separator-color
+  &--separator
+    > .q-item-type + .q-item-type,
+    > .q-virtual-scroll__content > .q-item-type + .q-item-type
+      border-top: 1px solid $separator-color
+  &--padding
+    padding: 8px 0
+
+.q-list--dense > .q-item, .q-item--dense
+  min-height: 32px
+  padding: 2px 16px
+
+.q-list--dark.q-list--separator
+  > .q-item-type + .q-item-type,
+  > .q-virtual-scroll__content > .q-item-type + .q-item-type
+    border-top-color: $separator-dark-color
+
+.q-list--dark, .q-item--dark
+  color: #fff
+  border-color: $separator-dark-color
+
+  .q-item__section--side:not(.q-item__section--avatar)
+    color: rgba(255,255,255,.7)
+
+  .q-item__label
+    &--header
+      color: rgba(255,255,255,.64)
+    &--overline, &--caption
+      color: rgba(255,255,255,.8)
+
+.q-item
+  position: relative
+
+  &.q-router-link--active, &--active
+    color: var(--q-primary)