quasar 2.1.0

package/src/components/spinner/QSpinnerPuff.json

@@ -0,0 +1,3 @@
+{
+  "mixins": [ "components/spinner/__spinner-mixin" ]
+}

package/src/components/spinner/QSpinnerRadio.js

@@ -0,0 +1,76 @@
+import { h, defineComponent } from 'vue'
+
+import useSpinner, { useSpinnerProps } from './use-spinner.js'
+
+const svg = [
+  h('g', {
+    transform: 'scale(0.55)'
+  }, [
+    h('circle', {
+      cx: '30',
+      cy: '150',
+      r: '30',
+      fill: 'currentColor'
+    }, [
+      h('animate', {
+        attributeName: 'opacity',
+        from: '0',
+        to: '1',
+        dur: '1s',
+        begin: '0',
+        repeatCount: 'indefinite',
+        keyTimes: '0;0.5;1',
+        values: '0;1;1'
+      })
+    ]),
+    h('path', {
+      d: 'M90,150h30c0-49.7-40.3-90-90-90v30C63.1,90,90,116.9,90,150z',
+      fill: 'currentColor'
+    }, [
+      h('animate', {
+        attributeName: 'opacity',
+        from: '0',
+        to: '1',
+        dur: '1s',
+        begin: '0.1',
+        repeatCount: 'indefinite',
+        keyTimes: '0;0.5;1',
+        values: '0;1;1'
+      })
+    ]),
+    h('path', {
+      d: 'M150,150h30C180,67.2,112.8,0,30,0v30C96.3,30,150,83.7,150,150z',
+      fill: 'currentColor'
+    }, [
+      h('animate', {
+        attributeName: 'opacity',
+        from: '0',
+        to: '1',
+        dur: '1s',
+        begin: '0.2',
+        repeatCount: 'indefinite',
+        keyTimes: '0;0.5;1',
+        values: '0;1;1'
+      })
+    ])
+  ])
+]
+
+export default defineComponent({
+  name: 'QSpinnerRadio',
+
+  props: useSpinnerProps,
+
+  setup (props) {
+    const { cSize, classes } = useSpinner(props)
+
+    return () => h('svg', {
+      class: classes.value,
+      width: cSize.value,
+      height: cSize.value,
+      viewBox: '0 0 100 100',
+      preserveAspectRatio: 'xMidYMid',
+      xmlns: 'http://www.w3.org/2000/svg'
+    }, svg)
+  }
+})

package/src/components/spinner/QSpinnerRadio.json

@@ -0,0 +1,3 @@
+{
+  "mixins": [ "components/spinner/__spinner-mixin" ]
+}

package/src/components/spinner/QSpinnerRings.js

@@ -0,0 +1,106 @@
+import { h, defineComponent } from 'vue'
+
+import useSpinner, { useSpinnerProps } from './use-spinner.js'
+
+const svg = [
+  h('g', {
+    fill: 'none',
+    'fill-rule': 'evenodd',
+    transform: 'translate(1 1)',
+    'stroke-width': '2'
+  }, [
+    h('circle', {
+      cx: '22',
+      cy: '22',
+      r: '6'
+    }, [
+      h('animate', {
+        attributeName: 'r',
+        begin: '1.5s',
+        dur: '3s',
+        values: '6;22',
+        calcMode: 'linear',
+        repeatCount: 'indefinite'
+      }),
+      h('animate', {
+        attributeName: 'stroke-opacity',
+        begin: '1.5s',
+        dur: '3s',
+        values: '1;0',
+        calcMode: 'linear',
+        repeatCount: 'indefinite'
+      }),
+      h('animate', {
+        attributeName: 'stroke-width',
+        begin: '1.5s',
+        dur: '3s',
+        values: '2;0',
+        calcMode: 'linear',
+        repeatCount: 'indefinite'
+      })
+    ]),
+    h('circle', {
+      cx: '22',
+      cy: '22',
+      r: '6'
+    }, [
+      h('animate', {
+        attributeName: 'r',
+        begin: '3s',
+        dur: '3s',
+        values: '6;22',
+        calcMode: 'linear',
+        repeatCount: 'indefinite'
+      }),
+      h('animate', {
+        attributeName: 'stroke-opacity',
+        begin: '3s',
+        dur: '3s',
+        values: '1;0',
+        calcMode: 'linear',
+        repeatCount: 'indefinite'
+      }),
+      h('animate', {
+        attributeName: 'stroke-width',
+        begin: '3s',
+        dur: '3s',
+        values: '2;0',
+        calcMode: 'linear',
+        repeatCount: 'indefinite'
+      })
+    ]),
+    h('circle', {
+      cx: '22',
+      cy: '22',
+      r: '8'
+    }, [
+      h('animate', {
+        attributeName: 'r',
+        begin: '0s',
+        dur: '1.5s',
+        values: '6;1;2;3;4;5;6',
+        calcMode: 'linear',
+        repeatCount: 'indefinite'
+      })
+    ])
+  ])
+]
+
+export default defineComponent({
+  name: 'QSpinnerRings',
+
+  props: useSpinnerProps,
+
+  setup (props) {
+    const { cSize, classes } = useSpinner(props)
+
+    return () => h('svg', {
+      class: classes.value,
+      stroke: 'currentColor',
+      width: cSize.value,
+      height: cSize.value,
+      viewBox: '0 0 45 45',
+      xmlns: 'http://www.w3.org/2000/svg'
+    }, svg)
+  }
+})

package/src/components/spinner/QSpinnerRings.json

@@ -0,0 +1,3 @@
+{
+  "mixins": [ "components/spinner/__spinner-mixin" ]
+}

package/src/components/spinner/QSpinnerTail.js

@@ -0,0 +1,83 @@
+import { h, defineComponent } from 'vue'
+
+import useSpinner, { useSpinnerProps } from './use-spinner.js'
+
+const svg = [
+  h('defs', [
+    h('linearGradient', {
+      x1: '8.042%',
+      y1: '0%',
+      x2: '65.682%',
+      y2: '23.865%',
+      id: 'a'
+    }, [
+      h('stop', {
+        'stop-color': 'currentColor',
+        'stop-opacity': '0',
+        offset: '0%'
+      }),
+      h('stop', {
+        'stop-color': 'currentColor',
+        'stop-opacity': '.631',
+        offset: '63.146%'
+      }),
+      h('stop', {
+        'stop-color': 'currentColor',
+        offset: '100%'
+      })
+    ])
+  ]),
+  h('g', {
+    transform: 'translate(1 1)',
+    fill: 'none',
+    'fill-rule': 'evenodd'
+  }, [
+    h('path', {
+      d: 'M36 18c0-9.94-8.06-18-18-18',
+      stroke: 'url(#a)',
+      'stroke-width': '2'
+    }, [
+      h('animateTransform', {
+        attributeName: 'transform',
+        type: 'rotate',
+        from: '0 18 18',
+        to: '360 18 18',
+        dur: '0.9s',
+        repeatCount: 'indefinite'
+      })
+    ]),
+    h('circle', {
+      fill: 'currentColor',
+      cx: '36',
+      cy: '18',
+      r: '1'
+    }, [
+      h('animateTransform', {
+        attributeName: 'transform',
+        type: 'rotate',
+        from: '0 18 18',
+        to: '360 18 18',
+        dur: '0.9s',
+        repeatCount: 'indefinite'
+      })
+    ])
+  ])
+]
+
+export default defineComponent({
+  name: 'QSpinnerTail',
+
+  props: useSpinnerProps,
+
+  setup (props) {
+    const { cSize, classes } = useSpinner(props)
+
+    return () => h('svg', {
+      class: classes.value,
+      width: cSize.value,
+      height: cSize.value,
+      viewBox: '0 0 38 38',
+      xmlns: 'http://www.w3.org/2000/svg'
+    }, svg)
+  }
+})

package/src/components/spinner/QSpinnerTail.json

@@ -0,0 +1,3 @@
+{
+  "mixins": [ "components/spinner/__spinner-mixin" ]
+}

package/src/components/spinner/__spinner-mixin.json

@@ -0,0 +1,13 @@
+{
+  "mixins": [ "composables/private/use-size" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/spinners"
+  },
+
+  "props": {
+    "color": {
+      "extends": "color"
+    }
+  }
+}

package/src/components/spinner/index.js

@@ -0,0 +1,51 @@
+import QSpinner from './QSpinner.js'
+
+import QSpinnerAudio from './QSpinnerAudio.js'
+import QSpinnerBall from './QSpinnerBall.js'
+import QSpinnerBars from './QSpinnerBars.js'
+import QSpinnerBox from './QSpinnerBox.js'
+import QSpinnerClock from './QSpinnerClock.js'
+import QSpinnerComment from './QSpinnerComment.js'
+import QSpinnerCube from './QSpinnerCube.js'
+import QSpinnerDots from './QSpinnerDots.js'
+import QSpinnerFacebook from './QSpinnerFacebook.js'
+import QSpinnerGears from './QSpinnerGears.js'
+import QSpinnerGrid from './QSpinnerGrid.js'
+import QSpinnerHearts from './QSpinnerHearts.js'
+import QSpinnerHourglass from './QSpinnerHourglass.js'
+import QSpinnerInfinity from './QSpinnerInfinity.js'
+import QSpinnerIos from './QSpinnerIos.js'
+import QSpinnerOrbit from './QSpinnerOrbit.js'
+import QSpinnerOval from './QSpinnerOval.js'
+import QSpinnerPie from './QSpinnerPie.js'
+import QSpinnerPuff from './QSpinnerPuff.js'
+import QSpinnerRadio from './QSpinnerRadio.js'
+import QSpinnerRings from './QSpinnerRings.js'
+import QSpinnerTail from './QSpinnerTail.js'
+
+export {
+  QSpinner,
+
+  QSpinnerAudio,
+  QSpinnerBall,
+  QSpinnerBars,
+  QSpinnerBox,
+  QSpinnerClock,
+  QSpinnerComment,
+  QSpinnerCube,
+  QSpinnerDots,
+  QSpinnerFacebook,
+  QSpinnerGears,
+  QSpinnerGrid,
+  QSpinnerHearts,
+  QSpinnerHourglass,
+  QSpinnerInfinity,
+  QSpinnerIos,
+  QSpinnerOrbit,
+  QSpinnerOval,
+  QSpinnerPie,
+  QSpinnerPuff,
+  QSpinnerRadio,
+  QSpinnerRings,
+  QSpinnerTail
+}

package/src/components/spinner/use-spinner.js

@@ -0,0 +1,24 @@
+import { computed } from 'vue'
+import { useSizeDefaults } from '../../composables/private/use-size.js'
+
+export const useSpinnerProps = {
+  size: {
+    type: [ Number, String ],
+    default: '1em'
+  },
+  color: String
+}
+
+export default function useSpinner (props) {
+  return {
+    cSize: computed(() => (
+      props.size in useSizeDefaults
+        ? `${ useSizeDefaults[ props.size ] }px`
+        : props.size
+    )),
+
+    classes: computed(() =>
+      'q-spinner' + (props.color ? ` text-${ props.color }` : '')
+    )
+  }
+}

package/src/components/splitter/QSplitter.js

@@ -0,0 +1,205 @@
+import { h, defineComponent, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
+
+import TouchPan from '../../directives/TouchPan.js'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+
+import { hSlot, hMergeSlot, hDir } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QSplitter',
+
+  props: {
+    ...useDarkProps,
+
+    modelValue: {
+      type: Number,
+      required: true
+    },
+    reverse: Boolean,
+    unit: {
+      type: String,
+      default: '%',
+      validator: v => [ '%', 'px' ].includes(v)
+    },
+
+    limits: {
+      type: Array,
+      validator: v => {
+        if (v.length !== 2) return false
+        if (typeof v[ 0 ] !== 'number' || typeof v[ 1 ] !== 'number') return false
+        return v[ 0 ] >= 0 && v[ 0 ] <= v[ 1 ]
+      }
+    },
+
+    emitImmediately: Boolean,
+
+    horizontal: Boolean,
+    disable: Boolean,
+
+    beforeClass: [ Array, String, Object ],
+    afterClass: [ Array, String, Object ],
+
+    separatorClass: [ Array, String, Object ],
+    separatorStyle: [ Array, String, Object ]
+  },
+
+  emits: [ 'update:modelValue' ],
+
+  setup (props, { slots, emit }) {
+    const { proxy: { $q } } = getCurrentInstance()
+    const isDark = useDark(props, $q)
+
+    const rootRef = ref(null)
+    const sideRefs = {
+      before: ref(null),
+      after: ref(null)
+    }
+
+    const classes = computed(() =>
+      'q-splitter no-wrap '
+      + `${ props.horizontal === true ? 'q-splitter--horizontal column' : 'q-splitter--vertical row' }`
+      + ` q-splitter--${ props.disable === true ? 'disabled' : 'workable' }`
+      + (isDark.value === true ? ' q-splitter--dark' : '')
+    )
+
+    const propName = computed(() => (props.horizontal === true ? 'height' : 'width'))
+    const side = computed(() => (props.reverse !== true ? 'before' : 'after'))
+
+    const computedLimits = computed(() => (
+      props.limits !== void 0
+        ? props.limits
+        : (props.unit === '%' ? [ 10, 90 ] : [ 50, Infinity ])
+    ))
+
+    function getCSSValue (value) {
+      return (props.unit === '%' ? value : Math.round(value)) + props.unit
+    }
+
+    const styles = computed(() => ({
+      [ side.value ]: {
+        [ propName.value ]: getCSSValue(props.modelValue)
+      }
+    }))
+
+    let __dir, __maxValue, __value, __multiplier, __normalized
+
+    function pan (evt) {
+      if (evt.isFirst === true) {
+        const size = rootRef.value.getBoundingClientRect()[ propName.value ]
+
+        __dir = props.horizontal === true ? 'up' : 'left'
+        __maxValue = props.unit === '%' ? 100 : size
+        __value = Math.min(__maxValue, computedLimits.value[ 1 ], Math.max(computedLimits.value[ 0 ], props.modelValue))
+        __multiplier = (props.reverse !== true ? 1 : -1)
+          * (props.horizontal === true ? 1 : ($q.lang.rtl === true ? -1 : 1))
+          * (props.unit === '%' ? (size === 0 ? 0 : 100 / size) : 1)
+
+        rootRef.value.classList.add('q-splitter--active')
+        return
+      }
+
+      if (evt.isFinal === true) {
+        if (__normalized !== props.modelValue) {
+          emit('update:modelValue', __normalized)
+        }
+
+        rootRef.value.classList.remove('q-splitter--active')
+        return
+      }
+
+      const val = __value
+        + __multiplier
+        * (evt.direction === __dir ? -1 : 1)
+        * evt.distance[ props.horizontal === true ? 'y' : 'x' ]
+
+      __normalized = Math.min(__maxValue, computedLimits.value[ 1 ], Math.max(computedLimits.value[ 0 ], val))
+
+      sideRefs[ side.value ].value.style[ propName.value ] = getCSSValue(__normalized)
+
+      if (props.emitImmediately === true && props.modelValue !== __normalized) {
+        emit('update:modelValue', __normalized)
+      }
+    }
+
+    const sepDirective = computed(() => {
+      // if props.disable !== true
+      return [ [
+        TouchPan,
+        pan,
+        void 0,
+        {
+          [ props.horizontal === true ? 'vertical' : 'horizontal' ]: true,
+          prevent: true,
+          stop: true,
+          mouse: true,
+          mouseAllDir: true
+        }
+      ] ]
+    })
+
+    function normalize (val, limits) {
+      if (val < limits[ 0 ]) {
+        emit('update:modelValue', limits[ 0 ])
+      }
+      else if (val > limits[ 1 ]) {
+        emit('update:modelValue', limits[ 1 ])
+      }
+    }
+
+    watch(() => props.modelValue, v => {
+      normalize(v, computedLimits.value)
+    })
+
+    watch(() => props.limits, () => {
+      nextTick(() => {
+        normalize(props.modelValue, computedLimits.value)
+      })
+    })
+
+    return () => {
+      const child = [
+        h('div', {
+          ref: sideRefs.before,
+          class: [
+            'q-splitter__panel q-splitter__before' + (props.reverse === true ? ' col' : ''),
+            props.beforeClass
+          ],
+          style: styles.value.before
+        }, hSlot(slots.before)),
+
+        h('div', {
+          class: [
+            'q-splitter__separator',
+            props.separatorClass
+          ],
+          style: props.separatorStyle,
+          'aria-disabled': props.disable === true ? 'true' : void 0
+        }, [
+          hDir(
+            'div',
+            { class: 'q-splitter__separator-area absolute-full' },
+            hSlot(slots.separator),
+            'sep',
+            props.disable !== true,
+            () => sepDirective.value
+          )
+        ]),
+
+        h('div', {
+          ref: sideRefs.after,
+          class: [
+            'q-splitter__panel q-splitter__after' + (props.reverse === true ? '' : ' col'),
+            props.afterClass
+          ],
+          style: styles.value.after
+        }, hSlot(slots.after))
+      ]
+
+      return h('div', {
+        class: classes.value,
+        ref: rootRef
+      }, hMergeSlot(slots.default, child))
+    }
+  }
+})