quasar 2.1.0

package/src/components/popup-proxy/index.js

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

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -0,0 +1,213 @@
+import { h, defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+
+import QIcon from '../icon/QIcon.js'
+import QSpinner from '../spinner/QSpinner.js'
+import TouchPan from '../../directives/TouchPan.js'
+
+import { getScrollTarget, getVerticalScrollPosition } from '../../utils/scroll.js'
+import { between } from '../../utils/format.js'
+import { prevent } from '../../utils/event.js'
+import { hSlot, hDir } from '../../utils/private/render.js'
+
+const
+  PULLER_HEIGHT = 40,
+  OFFSET_TOP = 20
+
+export default defineComponent({
+  name: 'QPullToRefresh',
+
+  props: {
+    color: String,
+    bgColor: String,
+    icon: String,
+    noMouse: Boolean,
+    disable: Boolean,
+
+    scrollTarget: {
+      default: void 0
+    }
+  },
+
+  emits: [ 'refresh' ],
+
+  setup (props, { slots, emit }) {
+    const { proxy } = getCurrentInstance()
+    const { $q } = proxy
+
+    const state = ref('pull')
+    const pullRatio = ref(0)
+    const pulling = ref(false)
+    const pullPosition = ref(-PULLER_HEIGHT)
+    const animating = ref(false)
+    const positionCSS = ref({})
+
+    const style = computed(() => ({
+      opacity: pullRatio.value,
+      transform: `translateY(${ pullPosition.value }px) rotate(${ pullRatio.value * 360 }deg)`
+    }))
+
+    const classes = computed(() =>
+      'q-pull-to-refresh__puller row flex-center'
+      + (animating.value === true ? ' q-pull-to-refresh__puller--animating' : '')
+      + (props.bgColor !== void 0 ? ` bg-${ props.bgColor }` : '')
+    )
+
+    function pull (event) {
+      if (event.isFinal === true) {
+        if (pulling.value === true) {
+          pulling.value = false
+
+          if (state.value === 'pulled') {
+            state.value = 'refreshing'
+            animateTo({ pos: OFFSET_TOP })
+            trigger()
+          }
+          else if (state.value === 'pull') {
+            animateTo({ pos: -PULLER_HEIGHT, ratio: 0 })
+          }
+        }
+
+        return
+      }
+
+      if (animating.value === true || state.value === 'refreshing') {
+        return false
+      }
+
+      if (event.isFirst === true) {
+        if (getVerticalScrollPosition(localScrollTarget) !== 0 || event.direction !== "down") {
+          if (pulling.value === true) {
+            pulling.value = false
+            state.value = 'pull'
+            animateTo({ pos: -PULLER_HEIGHT, ratio: 0 })
+          }
+
+          return false
+        }
+
+        pulling.value = true
+
+        const { top, left } = $el.getBoundingClientRect()
+        positionCSS.value = {
+          top: top + 'px',
+          left: left + 'px',
+          width: window.getComputedStyle($el).getPropertyValue('width')
+        }
+      }
+
+      prevent(event.evt)
+
+      const distance = Math.min(140, Math.max(0, event.distance.y))
+      pullPosition.value = distance - PULLER_HEIGHT
+      pullRatio.value = between(distance / (OFFSET_TOP + PULLER_HEIGHT), 0, 1)
+
+      const newState = pullPosition.value > OFFSET_TOP ? 'pulled' : 'pull'
+
+      if (state.value !== newState) {
+        state.value = newState
+      }
+    }
+
+    const directives = computed(() => {
+      // if props.disable === false
+      const modifiers = {
+        down: true,
+        mightPrevent: true
+      }
+
+      if (props.noMouse !== true) {
+        modifiers.mouse = true
+      }
+
+      return [ [
+        TouchPan,
+        pull,
+        void 0,
+        modifiers
+      ] ]
+    })
+
+    const contentClass = computed(() =>
+      `q-pull-to-refresh__content${ pulling.value === true ? ' no-pointer-events' : '' }`
+    )
+
+    function trigger () {
+      emit('refresh', () => {
+        animateTo({ pos: -PULLER_HEIGHT, ratio: 0 }, () => {
+          state.value = 'pull'
+        })
+      })
+    }
+
+    function animateTo ({ pos, ratio }, done) {
+      animating.value = true
+      pullPosition.value = pos
+
+      if (ratio !== void 0) {
+        pullRatio.value = ratio
+      }
+
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        animating.value = false
+        done && done()
+      }, 300)
+    }
+
+    // expose public methods
+    Object.assign(proxy, { trigger, updateScrollTarget })
+
+    let $el, localScrollTarget, timer
+
+    function updateScrollTarget () {
+      localScrollTarget = getScrollTarget($el, props.scrollTarget)
+    }
+
+    watch(() => props.scrollTarget, updateScrollTarget)
+
+    onMounted(() => {
+      $el = proxy.$el
+      updateScrollTarget()
+    })
+
+    onBeforeUnmount(() => {
+      clearTimeout(timer)
+    })
+
+    return () => {
+      const child = [
+        h('div', { class: contentClass.value }, hSlot(slots.default)),
+
+        h('div', {
+          class: 'q-pull-to-refresh__puller-container fixed row flex-center no-pointer-events z-top',
+          style: positionCSS.value
+        }, [
+          h('div', {
+            class: classes.value,
+            style: style.value
+          }, [
+            state.value !== 'refreshing'
+              ? h(QIcon, {
+                  name: props.icon || $q.iconSet.pullToRefresh.icon,
+                  color: props.color,
+                  size: '32px'
+                })
+              : h(QSpinner, {
+                size: '24px',
+                color: props.color
+              })
+          ])
+        ])
+      ]
+
+      return hDir(
+        'div',
+        { class: 'q-pull-to-refresh' },
+        child,
+        'main',
+        props.disable === false,
+        () => directives.value
+      )
+    }
+  }
+})

package/src/components/pull-to-refresh/QPullToRefresh.json

@@ -0,0 +1,66 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/pull-to-refresh"
+  },
+
+  "props": {
+    "color": {
+      "desc": "Color name for the icon from the Quasar Color Palette",
+      "extends": "color"
+    },
+
+    "bg-color": {
+      "desc": "Color name for background of the icon container from the Quasar Color Palette",
+      "extends": "color"
+    },
+
+    "icon": {
+      "extends": "icon",
+      "desc": "Icon to display when refreshing the content"
+    },
+
+    "no-mouse": {
+      "type": "Boolean",
+      "desc": "Don't listen for mouse events",
+      "category": "behavior"
+    },
+
+    "disable": {
+      "extends": "disable"
+    },
+
+    "scroll-target": {
+      "extends": "scroll-target"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Content (area controlled by the component) goes here"
+    }
+  },
+
+  "events": {
+    "refresh": {
+      "desc": "Called whenever a refresh is triggered; at this time, your function should load more data",
+      "params": {
+        "done": {
+          "type": "Function",
+          "desc": "Call the done() function when your data has been refreshed",
+          "params": null,
+          "returns": null
+        }
+      }
+    }
+  },
+
+  "methods": {
+    "trigger": {
+      "desc": "Triggers a refresh"
+    },
+
+    "updateScrollTarget": {
+      "desc": "Updates the scroll target; Useful when the parent elements change so that the scrolling target also changes"
+    }
+  }
+}

package/src/components/pull-to-refresh/QPullToRefresh.sass

@@ -0,0 +1,13 @@
+.q-pull-to-refresh
+  position: relative
+
+  &__puller
+    border-radius: 50%
+    width: 40px
+    height: 40px
+    color: var(--q-primary)
+    background: #fff
+    box-shadow: 0 0 4px 0 rgba(0,0,0,.3)
+
+    &--animating
+      transition: transform .3s, opacity .3s

package/src/components/pull-to-refresh/index.js

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

package/src/components/radio/QRadio.js

@@ -0,0 +1,179 @@
+import { h, defineComponent, ref, computed, getCurrentInstance } from 'vue'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useSize, { useSizeProps } from '../../composables/private/use-size.js'
+import useRefocusTarget from '../../composables/private/use-refocus-target.js'
+import { useFormProps, useFormInject } from '../../composables/private/use-form.js'
+
+import optionSizes from '../../utils/private/option-sizes.js'
+import { stopAndPrevent } from '../../utils/event.js'
+import { hSlot, hMergeSlot } from '../../utils/private/render.js'
+
+const svg = h('svg', {
+  class: 'q-radio__bg absolute non-selectable',
+  viewBox: '0 0 24 24',
+  'aria-hidden': 'true'
+}, [
+  h('path', {
+    d: 'M12,22a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10a10,10 0 0 1 10,10a10,10 0 0 1 -10,10m0,-22a12,12 0 0 0 -12,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12'
+  }),
+
+  h('path', {
+    class: 'q-radio__check',
+    d: 'M12,6a6,6 0 0 0 -6,6a6,6 0 0 0 6,6a6,6 0 0 0 6,-6a6,6 0 0 0 -6,-6'
+  })
+])
+
+export default defineComponent({
+  name: 'QRadio',
+
+  props: {
+    ...useDarkProps,
+    ...useSizeProps,
+    ...useFormProps,
+
+    modelValue: {
+      required: true
+    },
+    val: {
+      required: true
+    },
+
+    label: String,
+    leftLabel: Boolean,
+
+    color: String,
+    keepColor: Boolean,
+    dense: Boolean,
+
+    disable: Boolean,
+    tabindex: [ String, Number ]
+  },
+
+  emits: [ 'update:modelValue' ],
+
+  setup (props, { slots, emit }) {
+    const { proxy } = getCurrentInstance()
+
+    const isDark = useDark(props, proxy.$q)
+    const sizeStyle = useSize(props, optionSizes)
+
+    const rootRef = ref(null)
+    const { refocusTargetEl, refocusTarget } = useRefocusTarget(props, rootRef)
+
+    const isTrue = computed(() => props.modelValue === props.val)
+
+    const classes = computed(() =>
+      'q-radio cursor-pointer no-outline row inline no-wrap items-center'
+      + (props.disable === true ? ' disabled' : '')
+      + (isDark.value === true ? ' q-radio--dark' : '')
+      + (props.dense === true ? ' q-radio--dense' : '')
+      + (props.leftLabel === true ? ' reverse' : '')
+    )
+
+    const innerClass = computed(() => {
+      const color = props.color !== void 0 && (
+        props.keepColor === true
+        || isTrue.value === true
+      )
+        ? ` text-${ props.color }`
+        : ''
+
+      return 'q-radio__inner relative-position '
+        + `q-radio__inner--${ isTrue.value === true ? 'truthy' : 'falsy' }${ color }`
+    })
+
+    const tabindex = computed(() => (
+      props.disable === true ? -1 : props.tabindex || 0
+    ))
+
+    const formAttrs = computed(() => {
+      const prop = { type: 'radio' }
+
+      props.name !== void 0 && Object.assign(prop, {
+        name: props.name,
+        value: props.val
+      })
+
+      return prop
+    })
+
+    const formDomProps = computed(() => (
+      props.name !== void 0 && isTrue.value === true
+        ? { checked: true }
+        : {}
+    ))
+
+    const injectFormInput = useFormInject(formAttrs, formDomProps)
+
+    function onClick (e) {
+      if (e !== void 0) {
+        stopAndPrevent(e)
+        refocusTarget(e)
+      }
+
+      if (props.disable !== true && isTrue.value !== true) {
+        emit('update:modelValue', props.val, e)
+      }
+    }
+
+    function onKeydown (e) {
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        stopAndPrevent(e)
+      }
+    }
+
+    function onKeyup (e) {
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        onClick(e)
+      }
+    }
+
+    // expose public methods
+    Object.assign(proxy, { set: onClick })
+
+    return () => {
+      const content = [ svg ]
+
+      props.disable !== true && injectFormInput(
+        content,
+        'unshift',
+        ' q-radio__native q-ma-none q-pa-none'
+      )
+
+      const child = [
+        h('div', {
+          class: innerClass.value,
+          style: sizeStyle.value
+        }, content)
+      ]
+
+      if (refocusTargetEl.value !== null) {
+        child.push(refocusTargetEl.value)
+      }
+
+      const label = props.label !== void 0
+        ? hMergeSlot(slots.default, [ props.label ])
+        : hSlot(slots.default)
+
+      label !== void 0 && child.push(
+        h('div', {
+          class: 'q-radio__label q-anchor--skip'
+        }, label)
+      )
+
+      return h('div', {
+        ref: rootRef,
+        class: classes.value,
+        tabindex: tabindex.value,
+        role: 'radio',
+        'aria-label': props.label,
+        'aria-checked': isTrue.value === true ? 'true' : 'false',
+        'aria-disabled': props.disable === true ? 'true' : void 0,
+        onClick,
+        onKeydown,
+        onKeyup
+      }, child)
+    }
+  }
+})