quasar 2.1.0

package/src/components/tooltip/QTooltip.json

@@ -0,0 +1,113 @@
+{
+  "mixins": [ "composables/private/use-model-toggle", "composables/private/use-portal", "composables/private/use-transition" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/tooltip"
+  },
+
+  "props": {
+    "max-height": {
+      "extends": "size",
+      "desc": "The maximum height of the Tooltip; Size in CSS units, including unit name",
+      "category": "content"
+    },
+
+    "max-width": {
+      "extends": "size",
+      "desc": "The maximum width of the Tooltip; Size in CSS units, including unit name",
+      "category": "content"
+    },
+
+    "transition-show": {
+      "default": "jump-down"
+    },
+
+    "transition-hide": {
+      "default": "jump-up"
+    },
+
+    "anchor": {
+      "type": "String",
+      "desc": "Two values setting the starting position or anchor point of the Tooltip relative to its target",
+      "values": [
+        "top left", "top middle", "top right", "top start", "top end",
+        "center left", "center middle", "center right", "center start", "center end",
+        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+      ],
+      "default": "bottom middle",
+      "examples": [ "top left", "bottom right" ],
+      "category": "position"
+    },
+
+    "self": {
+      "type": "String",
+      "desc": "Two values setting the Tooltip's own position relative to its target",
+      "values": [
+        "top left", "top middle", "top right", "top start", "top end",
+        "center left", "center middle", "center right", "center start", "center end",
+        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+      ],
+      "default": "top middle",
+      "examples": [ "top left", "bottom right" ],
+      "category": "position"
+    },
+
+    "offset": {
+      "type": "Array",
+      "desc": "An array of two numbers to offset the Tooltip horizontally and vertically in pixels",
+      "default": "[14, 14]",
+      "examples": [ "[8, 8]", "[5, 10]" ],
+      "category": "position"
+    },
+
+    "scroll-target": {
+      "extends": "scroll-target"
+    },
+
+    "target": {
+      "type": [ "Boolean", "String" ],
+      "desc": "Configure a target element to trigger Tooltip toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)",
+      "default": true,
+      "values": [ "(Boolean) true", "(Boolean) false", "(CSS selector)" ],
+      "examples": [
+        ":target=\"false\"",
+        "target=\".my-parent\""
+      ],
+      "category": "behavior"
+    },
+
+    "no-parent-event": {
+      "type": "Boolean",
+      "desc": "Skips attaching events to the target DOM element (that trigger the element to get shown)",
+      "category": "behavior"
+    },
+
+    "delay": {
+      "type": "Number",
+      "desc": "Configure Tooltip to appear with delay",
+      "default": 0,
+      "examples": [ ":delay=\"550\"" ],
+      "category": "behavior"
+    },
+
+    "hide-delay": {
+      "type": "Number",
+      "desc": "Configure Tooltip to disappear with delay",
+      "default": 0,
+      "examples": [ ":hide-delay=\"650\"" ],
+      "category": "behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "extends": "default"
+    }
+  },
+
+  "methods": {
+    "updatePosition": {
+      "desc": "There are some custom scenarios for which Quasar cannot automatically reposition the tooltip without significant performance drawbacks so the optimal solution is for you to call this method when you need it"
+    }
+  }
+}

package/src/components/tooltip/QTooltip.sass

@@ -0,0 +1,18 @@
+.q-tooltip--style
+  font-size: $tooltip-fontsize
+  color: $tooltip-color
+  background: $tooltip-background
+  border-radius: $tooltip-border-radius
+  text-transform: none
+  font-weight: normal
+
+.q-tooltip
+  z-index: $z-tooltip
+  position: fixed !important
+  overflow-y: auto
+  overflow-x: hidden
+  padding: $tooltip-padding
+
+  @media (max-width: $breakpoint-xs-max)
+    font-size: $tooltip-mobile-fontsize
+    padding: $tooltip-mobile-padding

package/src/components/tooltip/index.js

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

package/src/components/tree/QTree.js

@@ -0,0 +1,694 @@
+import {
+  h, defineComponent, ref, computed, watch,
+  withDirectives, vShow, nextTick, getCurrentInstance, onBeforeUpdate
+} from 'vue'
+
+import QIcon from '../icon/QIcon.js'
+import QCheckbox from '../checkbox/QCheckbox.js'
+import QSlideTransition from '../slide-transition/QSlideTransition.js'
+import QSpinner from '../spinner/QSpinner.js'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+
+import { stopAndPrevent } from '../../utils/event.js'
+import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
+
+export default defineComponent({
+  name: 'QTree',
+
+  props: {
+    ...useDarkProps,
+
+    nodes: {
+      type: Array,
+      required: true
+    },
+    nodeKey: {
+      type: String,
+      required: true
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    childrenKey: {
+      type: String,
+      default: 'children'
+    },
+
+    color: String,
+    controlColor: String,
+    textColor: String,
+    selectedColor: String,
+
+    icon: String,
+
+    tickStrategy: {
+      type: String,
+      default: 'none',
+      validator: v => [ 'none', 'strict', 'leaf', 'leaf-filtered' ].includes(v)
+    },
+    ticked: Array, // v-model:ticked
+    expanded: Array, // v-model:expanded
+    selected: {}, // v-model:selected
+
+    defaultExpandAll: Boolean,
+    accordion: Boolean,
+
+    filter: String,
+    filterMethod: Function,
+
+    duration: Number,
+    noConnectors: Boolean,
+
+    noNodesLabel: String,
+    noResultsLabel: String
+  },
+
+  emits: [
+    'update:expanded',
+    'update:ticked',
+    'update:selected',
+    'lazy-load',
+    'after-show',
+    'after-hide'
+  ],
+
+  setup (props, { slots, emit }) {
+    const { proxy } = getCurrentInstance()
+    const { $q } = proxy
+
+    const isDark = useDark(props, $q)
+
+    const lazy = ref({})
+    const innerTicked = ref(props.ticked || [])
+    const innerExpanded = ref(props.expanded || [])
+
+    let blurTargets = {}
+
+    onBeforeUpdate(() => {
+      blurTargets = {}
+    })
+
+    const classes = computed(() =>
+      'q-tree'
+      + (props.noConnectors === true ? ' q-tree--no-connectors' : '')
+      + (isDark.value === true ? ' q-tree--dark' : '')
+      + (props.color !== void 0 ? ` text-${ props.color }` : '')
+    )
+
+    const hasSelection = computed(() => props.selected !== void 0)
+
+    const computedIcon = computed(() => props.icon || $q.iconSet.tree.icon)
+
+    const computedControlColor = computed(() => props.controlColor || props.color)
+
+    const textColorClass = computed(() => (
+      props.textColor !== void 0
+        ? ` text-${ props.textColor }`
+        : ''
+    ))
+
+    const selectedColorClass = computed(() => {
+      const color = props.selectedColor || props.color
+      return color ? ` text-${ color }` : ''
+    })
+
+    const computedFilterMethod = computed(() => (
+      props.filterMethod !== void 0
+        ? props.filterMethod
+        : (node, filter) => {
+            const filt = filter.toLowerCase()
+            return node[ props.labelKey ]
+            && node[ props.labelKey ].toLowerCase().indexOf(filt) > -1
+          }
+    ))
+
+    const meta = computed(() => {
+      const meta = {}
+
+      const travel = (node, parent) => {
+        const tickStrategy = node.tickStrategy || (parent ? parent.tickStrategy : props.tickStrategy)
+        const
+          key = node[ props.nodeKey ],
+          isParent = node[ props.childrenKey ] && node[ props.childrenKey ].length > 0,
+          isLeaf = isParent !== true,
+          selectable = node.disabled !== true && hasSelection.value === true && node.selectable !== false,
+          expandable = node.disabled !== true && node.expandable !== false,
+          hasTicking = tickStrategy !== 'none',
+          strictTicking = tickStrategy === 'strict',
+          leafFilteredTicking = tickStrategy === 'leaf-filtered',
+          leafTicking = tickStrategy === 'leaf' || tickStrategy === 'leaf-filtered'
+
+        let tickable = node.disabled !== true && node.tickable !== false
+        if (leafTicking === true && tickable === true && parent && parent.tickable !== true) {
+          tickable = false
+        }
+
+        let localLazy = node.lazy
+        if (
+          localLazy === true
+          && lazy.value[ key ] !== void 0
+          && Array.isArray(node[ props.childrenKey ]) === true
+        ) {
+          localLazy = lazy.value[ key ]
+        }
+
+        const m = {
+          key,
+          parent,
+          isParent,
+          isLeaf,
+          lazy: localLazy,
+          disabled: node.disabled,
+          link: node.disabled !== true && (selectable === true || (expandable === true && (isParent === true || localLazy === true))),
+          children: [],
+          matchesFilter: props.filter ? computedFilterMethod.value(node, props.filter) : true,
+
+          selected: key === props.selected && selectable === true,
+          selectable,
+          expanded: isParent === true ? innerExpanded.value.includes(key) : false,
+          expandable,
+          noTick: node.noTick === true || (strictTicking !== true && localLazy && localLazy !== 'loaded'),
+          tickable,
+          tickStrategy,
+          hasTicking,
+          strictTicking,
+          leafFilteredTicking,
+          leafTicking,
+          ticked: strictTicking === true
+            ? innerTicked.value.includes(key)
+            : (isLeaf === true ? innerTicked.value.includes(key) : false)
+        }
+
+        meta[ key ] = m
+
+        if (isParent === true) {
+          m.children = node[ props.childrenKey ].map(n => travel(n, m))
+
+          if (props.filter) {
+            if (m.matchesFilter !== true) {
+              m.matchesFilter = m.children.some(n => n.matchesFilter)
+            }
+            else if (
+              m.noTick !== true
+              && m.disabled !== true
+              && m.tickable === true
+              && leafFilteredTicking === true
+              && m.children.every(n => n.matchesFilter !== true || n.noTick === true || n.tickable !== true) === true
+            ) {
+              m.tickable = false
+            }
+          }
+
+          if (m.matchesFilter === true) {
+            if (m.noTick !== true && strictTicking !== true && m.children.every(n => n.noTick) === true) {
+              m.noTick = true
+            }
+
+            if (leafTicking) {
+              m.ticked = false
+              m.indeterminate = m.children.some(node => node.indeterminate === true)
+              m.tickable = m.tickable === true && m.children.some(node => node.tickable)
+
+              if (m.indeterminate !== true) {
+                const sel = m.children
+                  .reduce((acc, meta) => (meta.ticked === true ? acc + 1 : acc), 0)
+
+                if (sel === m.children.length) {
+                  m.ticked = true
+                }
+                else if (sel > 0) {
+                  m.indeterminate = true
+                }
+              }
+
+              if (m.indeterminate === true) {
+                m.indeterminateNextState = m.children
+                  .every(meta => meta.tickable !== true || meta.ticked !== true)
+              }
+            }
+          }
+        }
+
+        return m
+      }
+
+      props.nodes.forEach(node => travel(node, null))
+      return meta
+    })
+
+    watch(() => props.ticked, val => {
+      innerTicked.value = val
+    })
+
+    watch(() => props.expanded, val => {
+      innerExpanded.value = val
+    })
+
+    function getNodeByKey (key) {
+      const reduce = [].reduce
+
+      const find = (result, node) => {
+        if (result || !node) {
+          return result
+        }
+        if (Array.isArray(node) === true) {
+          return reduce.call(Object(node), find, result)
+        }
+        if (node[ props.nodeKey ] === key) {
+          return node
+        }
+        if (node[ props.childrenKey ]) {
+          return find(null, node[ props.childrenKey ])
+        }
+      }
+
+      return find(null, props.nodes)
+    }
+
+    function getTickedNodes () {
+      return innerTicked.value.map(key => getNodeByKey(key))
+    }
+
+    function getExpandedNodes () {
+      return innerExpanded.value.map(key => getNodeByKey(key))
+    }
+
+    function isExpanded (key) {
+      return key && meta.value[ key ]
+        ? meta.value[ key ].expanded
+        : false
+    }
+
+    function collapseAll () {
+      if (props.expanded !== void 0) {
+        emit('update:expanded', [])
+      }
+      else {
+        innerExpanded.value = []
+      }
+    }
+
+    function expandAll () {
+      const
+        expanded = innerExpanded.value,
+        travel = node => {
+          if (node[ props.childrenKey ] && node[ props.childrenKey ].length > 0) {
+            if (node.expandable !== false && node.disabled !== true) {
+              expanded.push(node[ props.nodeKey ])
+              node[ props.childrenKey ].forEach(travel)
+            }
+          }
+        }
+
+      props.nodes.forEach(travel)
+
+      if (props.expanded !== void 0) {
+        emit('update:expanded', expanded)
+      }
+      else {
+        innerExpanded.value = expanded
+      }
+    }
+
+    function setExpanded (key, state, node = getNodeByKey(key), m = meta.value[ key ]) {
+      if (m.lazy && m.lazy !== 'loaded') {
+        if (m.lazy === 'loading') {
+          return
+        }
+
+        lazy.value[ key ] = 'loading'
+        if (Array.isArray(node[ props.childrenKey ]) !== true) {
+          node[ props.childrenKey ] = []
+        }
+        emit('lazy-load', {
+          node,
+          key,
+          done: children => {
+            lazy.value[ key ] = 'loaded'
+            node[ props.childrenKey ] = Array.isArray(children) === true ? children : []
+            nextTick(() => {
+              const localMeta = meta.value[ key ]
+              if (localMeta && localMeta.isParent === true) {
+                localSetExpanded(key, true)
+              }
+            })
+          },
+          fail: () => {
+            delete lazy.value[ key ]
+            if (node[ props.childrenKey ].length === 0) {
+              delete node[ props.childrenKey ]
+            }
+          }
+        })
+      }
+      else if (m.isParent === true && m.expandable === true) {
+        localSetExpanded(key, state)
+      }
+    }
+
+    function localSetExpanded (key, state) {
+      let target = innerExpanded.value
+      const shouldEmit = props.expanded !== void 0
+
+      if (shouldEmit === true) {
+        target = target.slice()
+      }
+
+      if (state) {
+        if (props.accordion) {
+          if (meta.value[ key ]) {
+            const collapse = []
+            if (meta.value[ key ].parent) {
+              meta.value[ key ].parent.children.forEach(m => {
+                if (m.key !== key && m.expandable === true) {
+                  collapse.push(m.key)
+                }
+              })
+            }
+            else {
+              props.nodes.forEach(node => {
+                const k = node[ props.nodeKey ]
+                if (k !== key) {
+                  collapse.push(k)
+                }
+              })
+            }
+            if (collapse.length > 0) {
+              target = target.filter(k => collapse.includes(k) === false)
+            }
+          }
+        }
+
+        target = target.concat([ key ])
+          .filter((key, index, self) => self.indexOf(key) === index)
+      }
+      else {
+        target = target.filter(k => k !== key)
+      }
+
+      if (shouldEmit === true) {
+        emit('update:expanded', target)
+      }
+      else {
+        innerExpanded.value = target
+      }
+    }
+
+    function isTicked (key) {
+      return key && meta.value[ key ]
+        ? meta.value[ key ].ticked
+        : false
+    }
+
+    function setTicked (keys, state) {
+      let target = innerTicked.value
+      const shouldEmit = props.ticked !== void 0
+
+      if (shouldEmit === true) {
+        target = target.slice()
+      }
+
+      if (state) {
+        target = target.concat(keys)
+          .filter((key, index, self) => self.indexOf(key) === index)
+      }
+      else {
+        target = target.filter(k => keys.includes(k) === false)
+      }
+
+      if (shouldEmit === true) {
+        emit('update:ticked', target)
+      }
+    }
+
+    function getSlotScope (node, meta, key) {
+      const scope = { tree: proxy, node, key, color: props.color, dark: isDark.value }
+
+      Object.defineProperty(scope, 'expanded', {
+        get: () => { return meta.expanded },
+        set: val => { val !== meta.expanded && setExpanded(key, val) },
+        configurable: true,
+        enumerable: true
+      })
+      Object.defineProperty(scope, 'ticked', {
+        get: () => { return meta.ticked },
+        set: val => { val !== meta.ticked && setTicked([ key ], val) },
+        configurable: true,
+        enumerable: true
+      })
+
+      return scope
+    }
+
+    function getChildren (nodes) {
+      return (
+        props.filter
+          ? nodes.filter(n => meta.value[ n[ props.nodeKey ] ].matchesFilter)
+          : nodes
+      ).map(child => getNode(child))
+    }
+
+    function getNodeMedia (node) {
+      if (node.icon !== void 0) {
+        return h(QIcon, {
+          class: 'q-tree__icon q-mr-sm',
+          name: node.icon,
+          color: node.iconColor
+        })
+      }
+      const src = node.img || node.avatar
+      if (src) {
+        return h('img', {
+          class: `q-tree__${ node.img ? 'img' : 'avatar' } q-mr-sm`,
+          src
+        })
+      }
+    }
+
+    function onShow () {
+      emit('after-show')
+    }
+
+    function onHide () {
+      emit('after-hide')
+    }
+
+    function getNode (node) {
+      const
+        key = node[ props.nodeKey ],
+        m = meta.value[ key ],
+        header = node.header
+          ? slots[ `header-${ node.header }` ] || slots[ 'default-header' ]
+          : slots[ 'default-header' ]
+
+      const children = m.isParent === true
+        ? getChildren(node[ props.childrenKey ])
+        : []
+
+      const isParent = children.length > 0 || (m.lazy && m.lazy !== 'loaded')
+
+      let body = node.body
+        ? slots[ `body-${ node.body }` ] || slots[ 'default-body' ]
+        : slots[ 'default-body' ]
+      const slotScope = header !== void 0 || body !== void 0
+        ? getSlotScope(node, m, key)
+        : null
+
+      if (body !== void 0) {
+        body = h('div', { class: 'q-tree__node-body relative-position' }, [
+          h('div', { class: textColorClass.value }, [
+            body(slotScope)
+          ])
+        ])
+      }
+
+      return h('div', {
+        key,
+        class: 'q-tree__node relative-position'
+          + ` q-tree__node--${ isParent === true ? 'parent' : 'child' }`
+      }, [
+        h('div', {
+          class: 'q-tree__node-header relative-position row no-wrap items-center'
+            + (m.link === true ? ' q-tree__node--link q-hoverable q-focusable' : '')
+            + (m.selected === true ? ' q-tree__node--selected' : '')
+            + (m.disabled === true ? ' q-tree__node--disabled' : ''),
+          tabindex: m.link === true ? 0 : -1,
+          onClick: (e) => {
+            onClick(node, m, e)
+          },
+          onKeypress (e) {
+            if (shouldIgnoreKey(e) !== true) {
+              if (e.keyCode === 13) { onClick(node, m, e, true) }
+              else if (e.keyCode === 32) { onExpandClick(node, m, e, true) }
+            }
+          }
+        }, [
+          h('div', {
+            class: 'q-focus-helper',
+            tabindex: -1,
+            ref: el => { blurTargets[ m.key ] = el }
+          }),
+
+          m.lazy === 'loading'
+            ? h(QSpinner, {
+                class: 'q-tree__spinner q-mr-xs',
+                color: computedControlColor.value
+              })
+            : (
+                isParent === true
+                  ? h(QIcon, {
+                      class: 'q-tree__arrow q-mr-xs'
+                    + (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
+                      name: computedIcon.value,
+                      onClick (e) { onExpandClick(node, m, e) }
+                    })
+                  : null
+              ),
+
+          m.hasTicking === true && m.noTick !== true
+            ? h(QCheckbox, {
+                class: 'q-mr-xs',
+                modelValue: m.indeterminate === true ? null : m.ticked,
+                color: computedControlColor.value,
+                dark: isDark.value,
+                dense: true,
+                keepColor: true,
+                disable: m.tickable !== true,
+                onKeydown: stopAndPrevent,
+                'onUpdate:modelValue': v => {
+                  onTickedClick(m, v)
+                }
+              })
+            : null,
+
+          h('div', {
+            class: 'q-tree__node-header-content col row no-wrap items-center'
+              + (m.selected === true ? selectedColorClass.value : textColorClass.value)
+          }, [
+            header
+              ? header(slotScope)
+              : [
+                  getNodeMedia(node),
+                  h('div', node[ props.labelKey ])
+                ]
+          ])
+        ]),
+
+        isParent === true
+          ? h(QSlideTransition, {
+              duration: props.duration,
+              onShow,
+              onHide
+            }, () => withDirectives(
+              h('div', {
+                class: 'q-tree__node-collapsible' + textColorClass.value,
+                key: `${ key }__q`
+              }, [
+                body,
+                h('div', {
+                  class: 'q-tree__children'
+                  + (m.disabled === true ? ' q-tree__node--disabled' : '')
+                }, children)
+              ]),
+              [ [ vShow, m.expanded ] ]
+            ))
+          : body
+      ])
+    }
+
+    function blur (key) {
+      const blurTarget = blurTargets[ key ]
+      blurTarget && blurTarget.focus()
+    }
+
+    function onClick (node, meta, e, keyboard) {
+      keyboard !== true && blur(meta.key)
+
+      if (hasSelection.value) {
+        if (meta.selectable) {
+          emit('update:selected', meta.key !== props.selected ? meta.key : null)
+        }
+      }
+      else {
+        onExpandClick(node, meta, e, keyboard)
+      }
+
+      if (typeof node.handler === 'function') {
+        node.handler(node)
+      }
+    }
+
+    function onExpandClick (node, meta, e, keyboard) {
+      if (e !== void 0) {
+        stopAndPrevent(e)
+      }
+      keyboard !== true && blur(meta.key)
+      setExpanded(meta.key, !meta.expanded, node, meta)
+    }
+
+    function onTickedClick (meta, state) {
+      if (meta.indeterminate === true) {
+        state = meta.indeterminateNextState
+      }
+      if (meta.strictTicking) {
+        setTicked([ meta.key ], state)
+      }
+      else if (meta.leafTicking) {
+        const keys = []
+        const travel = meta => {
+          if (meta.isParent) {
+            if (state !== true && meta.noTick !== true && meta.tickable === true) {
+              keys.push(meta.key)
+            }
+            if (meta.leafTicking === true) {
+              meta.children.forEach(travel)
+            }
+          }
+          else if (
+            meta.noTick !== true
+            && meta.tickable === true
+            && (meta.leafFilteredTicking !== true || meta.matchesFilter === true)
+          ) {
+            keys.push(meta.key)
+          }
+        }
+        travel(meta)
+        setTicked(keys, state)
+      }
+    }
+
+    // expose public methods
+    Object.assign(proxy, {
+      getNodeByKey,
+      getTickedNodes,
+      getExpandedNodes,
+      isExpanded,
+      collapseAll,
+      expandAll,
+      setExpanded,
+      isTicked,
+      setTicked
+    })
+
+    props.defaultExpandAll === true && expandAll()
+
+    return () => {
+      const children = getChildren(props.nodes)
+
+      return h(
+        'div', {
+          class: classes.value
+        },
+        children.length === 0
+          ? (
+              props.filter
+                ? props.noResultsLabel || $q.lang.tree.noResults
+                : props.noNodesLabel || $q.lang.tree.noNodes
+            )
+          : children
+      )
+    }
+  }
+})