quasar 2.1.0

package/src/components/toggle/QToggle.json

@@ -0,0 +1,39 @@
+{
+  "mixins": [ "components/checkbox/use-checkbox" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/toggle"
+  },
+
+  "props": {
+    "icon": {
+      "extends": "icon"
+    },
+
+    "checked-icon": {
+      "type": "String",
+      "desc": "The icon to be used when the toggle is on",
+      "examples": [ "visibility" ],
+      "category": "content"
+    },
+
+    "unchecked-icon": {
+      "type": "String",
+      "desc": "The icon to be used when the toggle is off",
+      "examples": [ "visibility_off" ],
+      "category": "content"
+    },
+
+    "indeterminate-icon": {
+      "type": "String",
+      "desc": "The icon to be used when the model is indeterminate",
+      "examples": [ "help" ],
+      "category": "content"
+    },
+
+    "icon-color": {
+      "extends": "color",
+      "desc": "Override default icon color (for truthy state only); Color name for component from the Quasar Color Palette"
+    }
+  }
+}

package/src/components/toggle/QToggle.sass

@@ -0,0 +1,132 @@
+$toggle-transition: .22s cubic-bezier(.4,0,.2,1)
+
+.q-toggle
+  vertical-align: middle
+
+  &__native
+    width: 1px
+    height: 1px
+
+  &__track
+    height: .35em
+    border-radius: .175em
+    opacity: .38
+    background: currentColor
+
+  &__thumb
+    top: .25em
+    left: .25em
+    width: .5em
+    height: .5em
+    transition: left $toggle-transition
+    user-select: none
+    z-index: 0
+
+    &:after
+      content: ''
+      position: absolute
+      top: 0
+      right: 0
+      bottom: 0
+      left: 0
+      border-radius: 50%
+      background: #fff
+      box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
+
+    .q-icon
+      font-size: .3em
+      min-width: 1em
+      color: #000
+      opacity: .54
+      z-index: 1
+
+  &__inner
+    font-size: 40px
+    width: 1.4em
+    min-width: 1.4em
+    height: 1em
+    padding: .325em .3em
+    -webkit-print-color-adjust: exact
+
+    &--indet
+      .q-toggle__thumb
+        left: .45em
+
+    &--truthy
+      color: var(--q-primary)
+      .q-toggle__track
+        opacity: .54
+      .q-toggle__thumb
+        left: .65em
+
+        &:after
+          background-color: currentColor
+
+        .q-icon
+          color: #fff
+          opacity: 1
+
+  &.disabled
+    opacity: .75 !important
+
+  &--dark
+    .q-toggle__inner
+      color: #fff
+      &--truthy
+        color: var(--q-primary)
+    .q-toggle__thumb:before
+      opacity: .32 !important
+
+  &--dense
+
+    .q-toggle__inner
+      width: .8em
+      min-width: .8em
+      height: .5em
+      padding: .07625em 0
+
+    .q-toggle__thumb
+      top: 0
+      left: 0
+
+    .q-toggle__inner--indet
+      .q-toggle__thumb
+        left: .15em
+    .q-toggle__inner--truthy
+      .q-toggle__thumb
+        left: .3em
+
+    .q-toggle__label
+      padding-left: .5em
+
+    &.reverse .q-toggle__label
+      padding-left: 0
+      padding-right: .5em
+
+body.desktop
+
+  .q-toggle:not(.disabled)
+    .q-toggle__thumb:before
+      content: ''
+      position: absolute
+      top: 0
+      right: 0
+      bottom: 0
+      left: 0
+      border-radius: 50%
+      background: currentColor
+      opacity: .12
+      transform: scale3d(0, 0, 1)
+      transition: transform $option-focus-transition
+
+    &:focus,
+    &:hover
+      .q-toggle__thumb:before
+        transform: scale3d(2, 2, 1)
+
+  .q-toggle--dense:not(.disabled)
+    &:focus,
+    &:hover
+      .q-toggle__thumb:before
+        transform: scale3d(1.5, 1.5, 1)
+

package/src/components/toggle/index.js

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

package/src/components/toolbar/QToolbar.js

@@ -0,0 +1,20 @@
+import { h, defineComponent, computed } from 'vue'
+
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QToolbar',
+
+  props: {
+    inset: Boolean
+  },
+
+  setup (props, { slots }) {
+    const classes = computed(() =>
+      'q-toolbar row no-wrap items-center'
+      + (props.inset === true ? ' q-toolbar--inset' : '')
+    )
+
+    return () => h('div', { class: classes.value }, hSlot(slots.default))
+  }
+})

package/src/components/toolbar/QToolbar.json

@@ -0,0 +1,19 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/toolbar"
+  },
+
+  "props": {
+    "inset": {
+      "type": "Boolean",
+      "desc": "Apply an inset to content (useful for subsequent toolbars)",
+      "category": "content"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "extends": "default"
+    }
+  }
+}

package/src/components/toolbar/QToolbar.sass

@@ -0,0 +1,25 @@
+.q-toolbar
+  position: relative
+  padding: $toolbar-padding
+  min-height: $toolbar-min-height
+  width: 100%
+
+  &--inset
+    padding-left: $toolbar-inset-size
+
+  .q-avatar
+    font-size: 38px
+
+.q-toolbar__title
+  flex: 1 1 0%
+  min-width: 1px
+  max-width: 100%
+  font-size: $toolbar-title-font-size
+  font-weight: $toolbar-title-font-weight
+  letter-spacing: $toolbar-title-letter-spacing
+  padding: $toolbar-title-padding
+
+  &:first-child
+    padding-left: 0
+  &:last-child
+    padding-right: 0

package/src/components/toolbar/QToolbarTitle.js

@@ -0,0 +1,20 @@
+import { h, defineComponent, computed } from 'vue'
+
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QToolbarTitle',
+
+  props: {
+    shrink: Boolean
+  },
+
+  setup (props, { slots }) {
+    const classes = computed(() =>
+      'q-toolbar__title ellipsis'
+      + (props.shrink === true ? ' col-shrink' : '')
+    )
+
+    return () => h('div', { class: classes.value }, hSlot(slots.default))
+  }
+})

package/src/components/toolbar/QToolbarTitle.json

@@ -0,0 +1,19 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/toolbar"
+  },
+
+  "props": {
+    "shrink": {
+      "type": "Boolean",
+      "desc": "By default, QToolbarTitle is set to grow to the available space. However, you can reverse that with this prop",
+      "category": "behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "extends": "default"
+    }
+  }
+}

package/src/components/toolbar/index.js

@@ -0,0 +1,7 @@
+import QToolbar from './QToolbar.js'
+import QToolbarTitle from './QToolbarTitle.js'
+
+export {
+  QToolbar,
+  QToolbarTitle
+}

package/src/components/tooltip/QTooltip.js

@@ -0,0 +1,309 @@
+import { h, defineComponent, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
+
+import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
+import useScrollTarget from '../../composables/private/use-scroll-target.js'
+import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
+import usePortal from '../../composables/private/use-portal.js'
+import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
+import useTick from '../../composables/private/use-tick.js'
+import useTimeout from '../../composables/private/use-timeout.js'
+
+import { getScrollTarget } from '../../utils/scroll.js'
+import { stopAndPrevent, addEvt, cleanEvt } from '../../utils/event.js'
+import { clearSelection } from '../../utils/private/selection.js'
+import { hSlot } from '../../utils/private/render.js'
+import { addClickOutside, removeClickOutside } from '../../utils/private/click-outside.js'
+import {
+  validatePosition, validateOffset, setPosition, parsePosition
+} from '../../utils/private/position-engine.js'
+
+export default defineComponent({
+  name: 'QTooltip',
+
+  inheritAttrs: false,
+
+  props: {
+    ...useAnchorProps,
+    ...useModelToggleProps,
+    ...useTransitionProps,
+
+    maxHeight: {
+      type: String,
+      default: null
+    },
+    maxWidth: {
+      type: String,
+      default: null
+    },
+
+    transitionShow: {
+      default: 'jump-down'
+    },
+    transitionHide: {
+      default: 'jump-up'
+    },
+
+    anchor: {
+      type: String,
+      default: 'bottom middle',
+      validator: validatePosition
+    },
+    self: {
+      type: String,
+      default: 'top middle',
+      validator: validatePosition
+    },
+    offset: {
+      type: Array,
+      default: () => [ 14, 14 ],
+      validator: validateOffset
+    },
+
+    scrollTarget: {
+      default: void 0
+    },
+
+    delay: {
+      type: Number,
+      default: 0
+    },
+
+    hideDelay: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  emits: [
+    ...useModelToggleEmits
+  ],
+
+  setup (props, { slots, emit, attrs }) {
+    let unwatchPosition, observer
+
+    const vm = getCurrentInstance()
+    const { proxy: { $q } } = vm
+
+    const innerRef = ref(null)
+    const showing = ref(false)
+
+    const anchorOrigin = computed(() => parsePosition(props.anchor, $q.lang.rtl))
+    const selfOrigin = computed(() => parsePosition(props.self, $q.lang.rtl))
+    const hideOnRouteChange = computed(() => props.persistent !== true)
+
+    const { registerTick, removeTick, prepareTick } = useTick()
+    const { registerTimeout, removeTimeout } = useTimeout()
+    const { transition, transitionStyle } = useTransition(props, showing)
+    const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget)
+
+    const { anchorEl, canShow, anchorEvents } = useAnchor({ showing, configureAnchorEl })
+
+    const { show, hide } = useModelToggle({
+      showing, canShow, handleShow, handleHide,
+      hideOnRouteChange,
+      processOnMount: true
+    })
+
+    Object.assign(anchorEvents, { delayShow, delayHide })
+
+    const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent)
+
+    // if we're on mobile, let's improve the experience
+    // by closing it when user taps outside of it
+    if ($q.platform.is.mobile === true) {
+      const clickOutsideProps = {
+        anchorEl,
+        innerRef,
+        onClickOutside (e) {
+          hide(e)
+
+          // prevent click if it's on a dialog backdrop
+          if (e.target.classList.contains('q-dialog__backdrop')) {
+            stopAndPrevent(e)
+          }
+
+          return true
+        }
+      }
+
+      const hasClickOutside = computed(() =>
+        // it doesn't has external model
+        // (null is the default value)
+        props.modelValue === null
+        // and it's not persistent
+        && props.persistent !== true
+        && showing.value === true
+      )
+
+      watch(hasClickOutside, val => {
+        const fn = val === true ? addClickOutside : removeClickOutside
+        fn(clickOutsideProps)
+      })
+
+      onBeforeUnmount(() => {
+        removeClickOutside(clickOutsideProps)
+      })
+    }
+
+    function handleShow (evt) {
+      removeTick()
+      removeTimeout()
+
+      showPortal()
+
+      registerTick(() => {
+        observer = new MutationObserver(() => updatePosition())
+        observer.observe(innerRef.value, { attributes: false, childList: true, characterData: true, subtree: true })
+        updatePosition()
+        configureScrollTarget()
+      })
+      prepareTick()
+
+      if (unwatchPosition === void 0) {
+        unwatchPosition = watch(
+          () => $q.screen.width + '|' + $q.screen.height + '|' + props.self + '|' + props.anchor + '|' + $q.lang.rtl,
+          updatePosition
+        )
+      }
+
+      registerTimeout(() => {
+        showPortal(true) // done showing portal
+        emit('show', evt)
+      }, props.transitionDuration)
+    }
+
+    function handleHide (evt) {
+      removeTick()
+      removeTimeout()
+
+      anchorCleanup()
+
+      registerTimeout(() => {
+        hidePortal()
+        emit('hide', evt)
+      }, props.transitionDuration)
+    }
+
+    function anchorCleanup () {
+      if (observer !== void 0) {
+        observer.disconnect()
+        observer = void 0
+      }
+
+      if (unwatchPosition !== void 0) {
+        unwatchPosition()
+        unwatchPosition = void 0
+      }
+
+      unconfigureScrollTarget()
+      cleanEvt(anchorEvents, 'tooltipTemp')
+    }
+
+    function updatePosition () {
+      const el = innerRef.value
+
+      if (anchorEl.value === null || !el) {
+        return
+      }
+
+      setPosition({
+        el,
+        offset: props.offset,
+        anchorEl: anchorEl.value,
+        anchorOrigin: anchorOrigin.value,
+        selfOrigin: selfOrigin.value,
+        maxHeight: props.maxHeight,
+        maxWidth: props.maxWidth
+      })
+    }
+
+    function delayShow (evt) {
+      if ($q.platform.is.mobile === true) {
+        clearSelection()
+        document.body.classList.add('non-selectable')
+
+        const target = anchorEl.value
+        const evts = [ 'touchmove', 'touchcancel', 'touchend', 'click' ]
+          .map(e => ([ target, e, 'delayHide', 'passiveCapture' ]))
+
+        addEvt(anchorEvents, 'tooltipTemp', evts)
+      }
+
+      registerTimeout(() => {
+        show(evt)
+      }, props.delay)
+    }
+
+    function delayHide (evt) {
+      removeTimeout()
+
+      if ($q.platform.is.mobile === true) {
+        cleanEvt(anchorEvents, 'tooltipTemp')
+        clearSelection()
+        // delay needed otherwise selection still occurs
+        setTimeout(() => {
+          document.body.classList.remove('non-selectable')
+        }, 10)
+      }
+
+      registerTimeout(() => {
+        hide(evt)
+      }, props.hideDelay)
+    }
+
+    function configureAnchorEl () {
+      if (props.noParentEvent === true || anchorEl.value === null) { return }
+
+      const evts = $q.platform.is.mobile === true
+        ? [
+            [ anchorEl.value, 'touchstart', 'delayShow', 'passive' ]
+          ]
+        : [
+            [ anchorEl.value, 'mouseenter', 'delayShow', 'passive' ],
+            [ anchorEl.value, 'mouseleave', 'delayHide', 'passive' ]
+          ]
+
+      addEvt(anchorEvents, 'anchor', evts)
+    }
+
+    function configureScrollTarget () {
+      if (anchorEl.value !== null || props.scrollTarget !== void 0) {
+        localScrollTarget.value = getScrollTarget(anchorEl.value, props.scrollTarget)
+        const fn = props.noParentEvent === true
+          ? updatePosition
+          : hide
+
+        changeScrollEvent(localScrollTarget.value, fn)
+      }
+    }
+
+    function getTooltipContent () {
+      return showing.value === true
+        ? h('div', {
+            ...attrs,
+            ref: innerRef,
+            class: [
+              'q-tooltip q-tooltip--style q-position-engine no-pointer-events',
+              attrs.class
+            ],
+            style: transitionStyle.value,
+            role: 'complementary'
+          }, hSlot(slots.default))
+        : null
+    }
+
+    function renderPortalContent () {
+      return h(Transition, {
+        name: transition.value,
+        appear: true
+      }, getTooltipContent)
+    }
+
+    onBeforeUnmount(anchorCleanup)
+
+    // expose public methods
+    Object.assign(vm.proxy, { updatePosition })
+
+    return renderPortal
+  }
+})