quasar 2.1.0

package/src/components/chip/QChip.sass

@@ -0,0 +1,83 @@
+$chip-height: 2em
+
+.q-chip
+  vertical-align: middle
+  border-radius: 16px
+  outline: 0
+  position: relative
+
+  height: $chip-height
+  max-width: 100%
+  margin: 4px
+
+  background: #e0e0e0
+  color: rgba(0,0,0,.87)
+
+  font-size: 14px
+  padding: .5em .9em
+
+  &--colored, &--dark
+    .q-chip__icon
+      color: inherit
+
+  &--outline
+    background: transparent !important
+    border: 1px solid currentColor
+
+  .q-avatar
+    font-size: $chip-height
+    margin-left: -.45em
+    margin-right: .2em
+    border-radius: 16px
+
+  &--selected
+    .q-avatar
+      display: none
+
+  &__icon
+    color: rgba(0,0,0,.54)
+    font-size: 1.5em
+    margin: -.2em
+
+    &--left
+      margin-right: .2em
+    &--right
+      margin-left: .2em
+    &--remove
+      margin-left: .1em
+      margin-right: -.5em
+      opacity: .6
+      outline: 0
+
+      &:hover,
+      &:focus
+        opacity: 1
+
+  &__content
+    white-space: nowrap
+
+  &--dense
+    border-radius: 12px
+    padding: 0 .4em
+    height: 1.5em
+
+    .q-avatar
+      font-size: 1.5em
+      margin-left: -.27em
+      margin-right: .1em
+      border-radius: 12px
+
+    .q-chip__icon
+      font-size: 1.25em
+      &--left
+        margin-right: .195em
+      &--remove
+        margin-right: -.25em
+
+  &--square
+    border-radius: $generic-border-radius
+    .q-avatar
+      border-radius: ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)
+
+body.desktop .q-chip--clickable:focus
+  box-shadow: $shadow-1

package/src/components/chip/index.js

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

package/src/components/circular-progress/QCircularProgress.js

@@ -0,0 +1,135 @@
+import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+
+import useSize from '../../composables/private/use-size.js'
+import { useCircularCommonProps } from './use-circular-progress.js'
+
+import { hMergeSlotSafely } from '../../utils/private/render.js'
+import { between } from '../../utils/format.js'
+
+const
+  radius = 50,
+  diameter = 2 * radius,
+  circumference = diameter * Math.PI,
+  strokeDashArray = Math.round(circumference * 1000) / 1000
+
+export default defineComponent({
+  name: 'QCircularProgress',
+
+  props: {
+    ...useCircularCommonProps,
+
+    value: {
+      type: Number,
+      default: 0
+    },
+
+    indeterminate: Boolean
+  },
+
+  setup (props, { slots }) {
+    const { proxy: { $q } } = getCurrentInstance()
+    const sizeStyle = useSize(props)
+
+    const svgStyle = computed(() => {
+      const angle = ($q.lang.rtl === true ? -1 : 1) * props.angle
+
+      return {
+        transform: props.reverse !== ($q.lang.rtl === true)
+          ? `scale3d(-1, 1, 1) rotate3d(0, 0, 1, ${ -90 - angle }deg)`
+          : `rotate3d(0, 0, 1, ${ angle - 90 }deg)`
+      }
+    })
+
+    const circleStyle = computed(() => (
+      props.instantFeedback !== true && props.indeterminate !== true
+        ? { transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease' }
+        : ''
+    ))
+
+    const viewBox = computed(() => diameter / (1 - props.thickness / 2))
+
+    const viewBoxAttr = computed(() =>
+      `${ viewBox.value / 2 } ${ viewBox.value / 2 } ${ viewBox.value } ${ viewBox.value }`
+    )
+
+    const normalized = computed(() => between(props.value, props.min, props.max))
+
+    const strokeDashOffset = computed(() => circumference * (
+      1 - (normalized.value - props.min) / (props.max - props.min)
+    ))
+
+    const strokeWidth = computed(() => props.thickness / 2 * viewBox.value)
+
+    function getCircle ({ thickness, offset, color, cls }) {
+      return h('circle', {
+        class: 'q-circular-progress__' + cls + (color !== void 0 ? ` text-${ color }` : ''),
+        style: circleStyle.value,
+        fill: 'transparent',
+        stroke: 'currentColor',
+        'stroke-width': thickness,
+        'stroke-dasharray': strokeDashArray,
+        'stroke-dashoffset': offset,
+        cx: viewBox.value,
+        cy: viewBox.value,
+        r: radius
+      })
+    }
+
+    return () => {
+      const svgChild = []
+
+      props.centerColor !== void 0 && props.centerColor !== 'transparent' && svgChild.push(
+        h('circle', {
+          class: `q-circular-progress__center text-${ props.centerColor }`,
+          fill: 'currentColor',
+          r: radius - strokeWidth.value / 2,
+          cx: viewBox.value,
+          cy: viewBox.value
+        })
+      )
+
+      props.trackColor !== void 0 && props.trackColor !== 'transparent' && svgChild.push(
+        getCircle({
+          cls: 'track',
+          thickness: strokeWidth.value,
+          offset: 0,
+          color: props.trackColor
+        })
+      )
+
+      svgChild.push(
+        getCircle({
+          cls: 'circle',
+          thickness: strokeWidth.value,
+          offset: strokeDashOffset.value,
+          color: props.color
+        })
+      )
+
+      const child = [
+        h('svg', {
+          class: 'q-circular-progress__svg',
+          style: svgStyle.value,
+          viewBox: viewBoxAttr.value,
+          'aria-hidden': 'true'
+        }, svgChild)
+      ]
+
+      props.showValue === true && child.push(
+        h('div', {
+          class: 'q-circular-progress__text absolute-full row flex-center content-center',
+          style: { fontSize: props.fontSize }
+        }, slots.default !== void 0 ? slots.default() : [ h('div', normalized.value) ])
+      )
+
+      return h('div', {
+        class: `q-circular-progress q-circular-progress--${ props.indeterminate === true ? 'in' : '' }determinate`,
+        style: sizeStyle.value,
+        role: 'progressbar',
+        'aria-valuemin': props.min,
+        'aria-valuemax': props.max,
+        'aria-valuenow': props.indeterminate === true ? void 0 : normalized.value
+      }, hMergeSlotSafely(slots.internal, child)) // "internal" is used by QKnob
+    }
+  }
+})

package/src/components/circular-progress/QCircularProgress.json

@@ -0,0 +1,107 @@
+{
+  "mixins": [ "composables/private/use-size" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/circular-progress"
+  },
+
+  "props": {
+    "value": {
+      "type": "Number",
+      "default": 0,
+      "desc": "Current progress (must be between min/max)",
+      "examples": [ 0, 100, 52.32 ],
+      "category": "model"
+    },
+
+    "min": {
+      "type": "Number",
+      "default": 0,
+      "desc": "Minimum value defining 'no progress' (must be lower than 'max')",
+      "examples": [ 0, 100, 52.32 ],
+      "category": "model"
+    },
+
+    "max": {
+      "type": "Number",
+      "default": 100,
+      "desc": "Maximum value defining 100% progress made (must be higher than 'min')",
+      "examples": [ 100, 52.32 ],
+      "category": "model"
+    },
+
+    "color": {
+      "extends": "color",
+      "desc": "Color name for the arc progress from the Quasar Color Palette"
+    },
+
+    "center-color": {
+      "extends": "color",
+      "desc": "Color name for the center part of the component from the Quasar Color Palette"
+    },
+
+    "track-color": {
+      "extends": "color",
+      "desc": "Color name for the track of the component from the Quasar Color Palette"
+    },
+
+    "font-size": {
+      "type": "String",
+      "desc": "Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size",
+      "default": "0.25em",
+      "examples": [ "1em", "16px", "2rem" ],
+      "category": "style"
+    },
+
+    "thickness": {
+      "type": "Number",
+      "default": 0.2,
+      "desc": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size",
+      "examples": [ 1, 0.3 ],
+      "category": "style"
+    },
+
+    "angle": {
+      "type": "Number",
+      "desc": "Angle to rotate progress arc by",
+      "default": 0,
+      "examples": [ 0, 40, 90 ],
+      "category": "content"
+    },
+
+    "indeterminate": {
+      "type": "Boolean",
+      "desc": "Put component into 'indeterminate' state; Ignores 'value' prop",
+      "category": "behavior"
+    },
+
+    "show-value": {
+      "type": "Boolean",
+      "desc": "Enables the default slot and uses it (if available), otherwise it displays the 'value' prop as text; Make sure the text has enough space to be displayed inside the component",
+      "category": "content|behavior"
+    },
+
+    "reverse": {
+      "type": "Boolean",
+      "desc": "Reverses the direction of progress; Only for determined state",
+      "category": "behavior"
+    },
+
+    "instant-feedback": {
+      "type": "Boolean",
+      "desc": "No animation when model changes",
+      "category": "behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Used for component content only if 'show-value' prop is set; Make sure the content has enough space to be displayed inside the component"
+    },
+
+    "internal": {
+      "desc": "Used by QKnob internally",
+      "internal": true
+    }
+  }
+}

package/src/components/circular-progress/QCircularProgress.sass

@@ -0,0 +1,38 @@
+.q-circular-progress
+  display: inline-block
+  position: relative
+  vertical-align: middle
+
+  width: 1em
+  height: 1em
+  line-height: 1
+
+  &.q-focusable
+    border-radius: 50%
+
+  &__svg
+    width: 100%
+    height: 100%
+
+  &__text
+    font-size: .25em
+
+  &--indeterminate
+    .q-circular-progress__svg
+      transform-origin: 50% 50%
+      animation: q-spin 2s linear infinite #{"/* rtl:ignore */"}
+    .q-circular-progress__circle
+      stroke-dasharray: 1 400
+      stroke-dashoffset: 0
+      animation: q-circular-progress-circle 1.5s ease-in-out infinite #{"/* rtl:ignore */"}
+
+@keyframes q-circular-progress-circle
+  0%
+    stroke-dasharray: 1, 400
+    stroke-dashoffset: 0
+  50%
+    stroke-dasharray: 400, 400
+    stroke-dashoffset: -100
+  100%
+    stroke-dasharray: 400, 400
+    stroke-dashoffset: -300

package/src/components/circular-progress/index.js

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

package/src/components/circular-progress/use-circular-progress.js

@@ -0,0 +1,38 @@
+import { useSizeProps } from '../../composables/private/use-size.js'
+
+// also used by QKnob
+export const useCircularCommonProps = {
+  ...useSizeProps,
+
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: 100
+  },
+
+  color: String,
+  centerColor: String,
+  trackColor: String,
+
+  fontSize: String,
+
+  // ratio
+  thickness: {
+    type: Number,
+    default: 0.2,
+    validator: v => v >= 0 && v <= 1
+  },
+
+  angle: {
+    type: Number,
+    default: 0
+  },
+
+  showValue: Boolean,
+  reverse: Boolean,
+
+  instantFeedback: Boolean
+}

package/src/components/color/QColor.js

@@ -0,0 +1,830 @@
+import { h, defineComponent, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
+
+import TouchPan from '../../directives/TouchPan.js'
+
+import QSlider from '../slider/QSlider.js'
+import QIcon from '../icon/QIcon.js'
+
+import QTabs from '../tabs/QTabs.js'
+import QTab from '../tabs/QTab.js'
+import QTabPanels from '../tab-panels/QTabPanels.js'
+import QTabPanel from '../tab-panels/QTabPanel.js'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useCache from '../../composables/private/use-cache.js'
+import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
+
+import { testPattern } from '../../utils/patterns.js'
+import throttle from '../../utils/throttle.js'
+import { stop } from '../../utils/event.js'
+import { hexToRgb, rgbToHex, rgbToString, textToRgb, rgbToHsv, hsvToRgb, luminosity } from '../../utils/colors.js'
+import { hDir } from '../../utils/private/render.js'
+
+const palette = [
+  'rgb(255,204,204)', 'rgb(255,230,204)', 'rgb(255,255,204)', 'rgb(204,255,204)', 'rgb(204,255,230)', 'rgb(204,255,255)', 'rgb(204,230,255)', 'rgb(204,204,255)', 'rgb(230,204,255)', 'rgb(255,204,255)',
+  'rgb(255,153,153)', 'rgb(255,204,153)', 'rgb(255,255,153)', 'rgb(153,255,153)', 'rgb(153,255,204)', 'rgb(153,255,255)', 'rgb(153,204,255)', 'rgb(153,153,255)', 'rgb(204,153,255)', 'rgb(255,153,255)',
+  'rgb(255,102,102)', 'rgb(255,179,102)', 'rgb(255,255,102)', 'rgb(102,255,102)', 'rgb(102,255,179)', 'rgb(102,255,255)', 'rgb(102,179,255)', 'rgb(102,102,255)', 'rgb(179,102,255)', 'rgb(255,102,255)',
+  'rgb(255,51,51)', 'rgb(255,153,51)', 'rgb(255,255,51)', 'rgb(51,255,51)', 'rgb(51,255,153)', 'rgb(51,255,255)', 'rgb(51,153,255)', 'rgb(51,51,255)', 'rgb(153,51,255)', 'rgb(255,51,255)',
+  'rgb(255,0,0)', 'rgb(255,128,0)', 'rgb(255,255,0)', 'rgb(0,255,0)', 'rgb(0,255,128)', 'rgb(0,255,255)', 'rgb(0,128,255)', 'rgb(0,0,255)', 'rgb(128,0,255)', 'rgb(255,0,255)',
+  'rgb(245,0,0)', 'rgb(245,123,0)', 'rgb(245,245,0)', 'rgb(0,245,0)', 'rgb(0,245,123)', 'rgb(0,245,245)', 'rgb(0,123,245)', 'rgb(0,0,245)', 'rgb(123,0,245)', 'rgb(245,0,245)',
+  'rgb(214,0,0)', 'rgb(214,108,0)', 'rgb(214,214,0)', 'rgb(0,214,0)', 'rgb(0,214,108)', 'rgb(0,214,214)', 'rgb(0,108,214)', 'rgb(0,0,214)', 'rgb(108,0,214)', 'rgb(214,0,214)',
+  'rgb(163,0,0)', 'rgb(163,82,0)', 'rgb(163,163,0)', 'rgb(0,163,0)', 'rgb(0,163,82)', 'rgb(0,163,163)', 'rgb(0,82,163)', 'rgb(0,0,163)', 'rgb(82,0,163)', 'rgb(163,0,163)',
+  'rgb(92,0,0)', 'rgb(92,46,0)', 'rgb(92,92,0)', 'rgb(0,92,0)', 'rgb(0,92,46)', 'rgb(0,92,92)', 'rgb(0,46,92)', 'rgb(0,0,92)', 'rgb(46,0,92)', 'rgb(92,0,92)',
+  'rgb(255,255,255)', 'rgb(205,205,205)', 'rgb(178,178,178)', 'rgb(153,153,153)', 'rgb(127,127,127)', 'rgb(102,102,102)', 'rgb(76,76,76)', 'rgb(51,51,51)', 'rgb(25,25,25)', 'rgb(0,0,0)'
+]
+
+const thumbPath = 'M5 5 h10 v10 h-10 v-10 z'
+
+export default defineComponent({
+  name: 'QColor',
+
+  props: {
+    ...useDarkProps,
+    ...useFormProps,
+
+    modelValue: String,
+
+    defaultValue: String,
+    defaultView: {
+      type: String,
+      default: 'spectrum',
+      validator: v => [ 'spectrum', 'tune', 'palette' ].includes(v)
+    },
+
+    formatModel: {
+      type: String,
+      default: 'auto',
+      validator: v => [ 'auto', 'hex', 'rgb', 'hexa', 'rgba' ].includes(v)
+    },
+
+    palette: Array,
+
+    noHeader: Boolean,
+    noFooter: Boolean,
+
+    square: Boolean,
+    flat: Boolean,
+    bordered: Boolean,
+
+    disable: Boolean,
+    readonly: Boolean
+  },
+
+  emits: [ 'update:modelValue', 'change' ],
+
+  setup (props, { emit }) {
+    const { proxy } = getCurrentInstance()
+    const { $q } = proxy
+
+    const isDark = useDark(props, $q)
+    const { getCache } = useCache()
+
+    const spectrumRef = ref(null)
+    const errorIconRef = ref(null)
+
+    const forceHex = computed(() => (
+      props.formatModel === 'auto'
+        ? null
+        : props.formatModel.indexOf('hex') > -1
+    ))
+
+    const forceAlpha = computed(() => (
+      props.formatModel === 'auto'
+        ? null
+        : props.formatModel.indexOf('a') > -1
+    ))
+
+    const topView = ref(
+      props.formatModel === 'auto'
+        ? (
+            (props.modelValue === void 0 || props.modelValue === null || props.modelValue === '' || props.modelValue.startsWith('#'))
+              ? 'hex'
+              : 'rgb'
+          )
+        : (props.formatModel.startsWith('hex') ? 'hex' : 'rgb')
+    )
+
+    const view = ref(props.defaultView)
+    const model = ref(parseModel(props.modelValue || props.defaultValue))
+
+    const editable = computed(() => props.disable !== true && props.readonly !== true)
+
+    const isHex = computed(() =>
+      props.modelValue === void 0
+      || props.modelValue === null
+      || props.modelValue === ''
+      || props.modelValue.startsWith('#')
+    )
+
+    const isOutputHex = computed(() => (
+      forceHex.value !== null
+        ? forceHex.value
+        : isHex.value
+    ))
+
+    const formAttrs = computed(() => ({
+      type: 'hidden',
+      name: props.name,
+      value: model.value[ isOutputHex.value === true ? 'hex' : 'rgb' ]
+    }))
+
+    const injectFormInput = useFormInject(formAttrs)
+
+    const hasAlpha = computed(() => (
+      forceAlpha.value !== null
+        ? forceAlpha.value
+        : model.value.a !== void 0
+    ))
+
+    const currentBgColor = computed(() => ({
+      backgroundColor: model.value.rgb || '#000'
+    }))
+
+    const headerClass = computed(() => {
+      const light = model.value.a !== void 0 && model.value.a < 65
+        ? true
+        : luminosity(model.value) > 0.4
+
+      return 'q-color-picker__header-content absolute-full'
+        + ` q-color-picker__header-content--${ light ? 'light' : 'dark' }`
+    })
+
+    const spectrumStyle = computed(() => ({
+      background: `hsl(${ model.value.h },100%,50%)`
+    }))
+
+    const spectrumPointerStyle = computed(() => ({
+      top: `${ 100 - model.value.v }%`,
+      [ $q.lang.rtl === true ? 'right' : 'left' ]: `${ model.value.s }%`
+    }))
+
+    const computedPalette = computed(() => (
+      props.palette !== void 0 && props.palette.length > 0
+        ? props.palette
+        : palette
+    ))
+
+    const classes = computed(() =>
+      'q-color-picker'
+      + (props.bordered === true ? ' q-color-picker--bordered' : '')
+      + (props.square === true ? ' q-color-picker--square no-border-radius' : '')
+      + (props.flat === true ? ' q-color-picker--flat no-shadow' : '')
+      + (props.disable === true ? ' disabled' : '')
+      + (isDark.value === true ? ' q-color-picker--dark q-dark' : '')
+    )
+
+    const attributes = computed(() => {
+      if (props.disable === true) {
+        return { 'aria-disabled': 'true' }
+      }
+      if (props.readonly === true) {
+        return { 'aria-readonly': 'true' }
+      }
+      return {}
+    })
+
+    const spectrumDirective = computed(() => {
+      // if editable.value === true
+      return [ [
+        TouchPan,
+        onSpectrumPan,
+        void 0,
+        { prevent: true, stop: true, mouse: true }
+      ] ]
+    })
+
+    watch(() => props.modelValue, v => {
+      const localModel = parseModel(v || props.defaultValue)
+      if (localModel.hex !== model.value.hex) {
+        model.value = localModel
+      }
+    })
+
+    watch(() => props.defaultValue, v => {
+      if (!props.modelValue && v) {
+        const localModel = parseModel(v)
+        if (localModel.hex !== model.value.hex) {
+          model.value = localModel
+        }
+      }
+    })
+
+    function updateModel (rgb, change) {
+      // update internally
+      model.value.hex = rgbToHex(rgb)
+      model.value.rgb = rgbToString(rgb)
+      model.value.r = rgb.r
+      model.value.g = rgb.g
+      model.value.b = rgb.b
+      model.value.a = rgb.a
+
+      const value = model.value[ isOutputHex.value === true ? 'hex' : 'rgb' ]
+
+      // emit new value
+      emit('update:modelValue', value)
+      change === true && emit('change', value)
+    }
+
+    function parseModel (v) {
+      const alpha = forceAlpha.value !== void 0
+        ? forceAlpha.value
+        : (
+            props.formatModel === 'auto'
+              ? null
+              : props.formatModel.indexOf('a') > -1
+          )
+
+      if (typeof v !== 'string' || v.length === 0 || testPattern.anyColor(v.replace(/ /g, '')) !== true) {
+        return {
+          h: 0,
+          s: 0,
+          v: 0,
+          r: 0,
+          g: 0,
+          b: 0,
+          a: alpha === true ? 100 : void 0,
+          hex: void 0,
+          rgb: void 0
+        }
+      }
+
+      const model = textToRgb(v)
+
+      if (alpha === true && model.a === void 0) {
+        model.a = 100
+      }
+
+      model.hex = rgbToHex(model)
+      model.rgb = rgbToString(model)
+
+      return Object.assign(model, rgbToHsv(model))
+    }
+
+    function changeSpectrum (left, top, change) {
+      const panel = spectrumRef.value
+      if (panel === null) { return }
+
+      const
+        width = panel.clientWidth,
+        height = panel.clientHeight,
+        rect = panel.getBoundingClientRect()
+
+      let x = Math.min(width, Math.max(0, left - rect.left))
+
+      if ($q.lang.rtl === true) {
+        x = width - x
+      }
+
+      const
+        y = Math.min(height, Math.max(0, top - rect.top)),
+        s = Math.round(100 * x / width),
+        v = Math.round(100 * Math.max(0, Math.min(1, -(y / height) + 1))),
+        rgb = hsvToRgb({
+          h: model.value.h,
+          s,
+          v,
+          a: hasAlpha.value === true ? model.value.a : void 0
+        })
+
+      model.value.s = s
+      model.value.v = v
+      updateModel(rgb, change)
+    }
+
+    function onHueChange (val, change) {
+      const h = Math.round(val)
+      const rgb = hsvToRgb({
+        h,
+        s: model.value.s,
+        v: model.value.v,
+        a: hasAlpha.value === true ? model.value.a : void 0
+      })
+
+      model.value.h = h
+      updateModel(rgb, change)
+    }
+
+    function onNumericChange (value, formatModel, max, evt, change) {
+      evt !== void 0 && stop(evt)
+
+      if (!/^[0-9]+$/.test(value)) {
+        change === true && proxy.$forceUpdate()
+        return
+      }
+
+      const val = Math.floor(Number(value))
+
+      if (val < 0 || val > max) {
+        change === true && proxy.$forceUpdate()
+        return
+      }
+
+      const rgb = {
+        r: formatModel === 'r' ? val : model.value.r,
+        g: formatModel === 'g' ? val : model.value.g,
+        b: formatModel === 'b' ? val : model.value.b,
+        a: hasAlpha.value === true
+          ? (formatModel === 'a' ? val : model.value.a)
+          : void 0
+      }
+
+      if (formatModel !== 'a') {
+        const hsv = rgbToHsv(rgb)
+        model.value.h = hsv.h
+        model.value.s = hsv.s
+        model.value.v = hsv.v
+      }
+
+      updateModel(rgb, change)
+
+      if (evt !== void 0 && change !== true && evt.target.selectionEnd !== void 0) {
+        const index = evt.target.selectionEnd
+        nextTick(() => {
+          evt.target.setSelectionRange(index, index)
+        })
+      }
+    }
+
+    function onEditorChange (evt, change) {
+      let rgb
+      const inp = evt.target.value
+
+      stop(evt)
+
+      if (topView.value === 'hex') {
+        if (
+          inp.length !== (hasAlpha.value === true ? 9 : 7)
+          || !/^#[0-9A-Fa-f]+$/.test(inp)
+        ) {
+          return true
+        }
+
+        rgb = hexToRgb(inp)
+      }
+      else {
+        let model
+
+        if (!inp.endsWith(')')) {
+          return true
+        }
+        else if (hasAlpha.value !== true && inp.startsWith('rgb(')) {
+          model = inp.substring(4, inp.length - 1).split(',').map(n => parseInt(n, 10))
+
+          if (
+            model.length !== 3
+            || !/^rgb\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3}\)$/.test(inp)
+          ) {
+            return true
+          }
+        }
+        else if (hasAlpha.value === true && inp.startsWith('rgba(')) {
+          model = inp.substring(5, inp.length - 1).split(',')
+
+          if (
+            model.length !== 4
+            || !/^rgba\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3},(0|0\.[0-9]+[1-9]|0\.[1-9]+|1)\)$/.test(inp)
+          ) {
+            return true
+          }
+
+          for (let i = 0; i < 3; i++) {
+            const v = parseInt(model[ i ], 10)
+            if (v < 0 || v > 255) {
+              return true
+            }
+            model[ i ] = v
+          }
+
+          const v = parseFloat(model[ 3 ])
+          if (v < 0 || v > 1) {
+            return true
+          }
+          model[ 3 ] = v
+        }
+        else {
+          return true
+        }
+
+        if (
+          model[ 0 ] < 0 || model[ 0 ] > 255
+          || model[ 1 ] < 0 || model[ 1 ] > 255
+          || model[ 2 ] < 0 || model[ 2 ] > 255
+          || (hasAlpha.value === true && (model[ 3 ] < 0 || model[ 3 ] > 1))
+        ) {
+          return true
+        }
+
+        rgb = {
+          r: model[ 0 ],
+          g: model[ 1 ],
+          b: model[ 2 ],
+          a: hasAlpha.value === true
+            ? model[ 3 ] * 100
+            : void 0
+        }
+      }
+
+      const hsv = rgbToHsv(rgb)
+      model.value.h = hsv.h
+      model.value.s = hsv.s
+      model.value.v = hsv.v
+
+      updateModel(rgb, change)
+
+      if (change !== true) {
+        const index = evt.target.selectionEnd
+        nextTick(() => {
+          evt.target.setSelectionRange(index, index)
+        })
+      }
+    }
+
+    function onPalettePick (color) {
+      const def = parseModel(color)
+      const rgb = { r: def.r, g: def.g, b: def.b, a: def.a }
+
+      if (rgb.a === void 0) {
+        rgb.a = model.value.a
+      }
+
+      model.value.h = def.h
+      model.value.s = def.s
+      model.value.v = def.v
+
+      updateModel(rgb, true)
+    }
+
+    function onSpectrumPan (evt) {
+      if (evt.isFinal) {
+        changeSpectrum(
+          evt.position.left,
+          evt.position.top,
+          true
+        )
+      }
+      else {
+        onSpectrumChange(evt)
+      }
+    }
+
+    const onSpectrumChange = throttle(
+      evt => { changeSpectrum(evt.position.left, evt.position.top) },
+      20
+    )
+
+    function onSpectrumClick (evt) {
+      changeSpectrum(
+        evt.pageX - window.pageXOffset,
+        evt.pageY - window.pageYOffset,
+        true
+      )
+    }
+
+    function onActivate (evt) {
+      changeSpectrum(
+        evt.pageX - window.pageXOffset,
+        evt.pageY - window.pageYOffset
+      )
+    }
+
+    function updateErrorIcon (val) {
+      // we MUST avoid vue triggering a render,
+      // so manually changing this
+      if (errorIconRef.value !== null) {
+        errorIconRef.value.$el.style.opacity = val ? 1 : 0
+      }
+    }
+
+    function getHeader () {
+      return h('div', {
+        class: 'q-color-picker__header relative-position overflow-hidden'
+      }, [
+        h('div', { class: 'q-color-picker__header-bg absolute-full' }),
+
+        h('div', {
+          class: headerClass.value,
+          style: currentBgColor.value
+        }, [
+          h(QTabs, {
+            modelValue: topView.value,
+            dense: true,
+            align: 'justify',
+            ...getCache('topVTab', {
+              'onUpdate:modelValue': val => { topView.value = val }
+            })
+          }, () => [
+            h(QTab, {
+              label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
+              name: 'hex',
+              ripple: false
+            }),
+
+            h(QTab, {
+              label: 'RGB' + (hasAlpha.value === true ? 'A' : ''),
+              name: 'rgb',
+              ripple: false
+            })
+          ]),
+
+          h('div', {
+            class: 'q-color-picker__header-banner row flex-center no-wrap'
+          }, [
+            h('input', {
+              class: 'fit',
+              value: model.value[ topView.value ],
+              ...(editable.value !== true
+                ? { readonly: true }
+                : {}
+              ),
+              ...getCache('topIn', {
+                onInput: evt => {
+                  updateErrorIcon(onEditorChange(evt) === true)
+                },
+                onChange: stop,
+                onBlur: evt => {
+                  onEditorChange(evt, true) === true && proxy.$forceUpdate()
+                  updateErrorIcon(false)
+                }
+              })
+            }),
+
+            h(QIcon, {
+              ref: errorIconRef,
+              class: 'q-color-picker__error-icon absolute no-pointer-events',
+              name: $q.iconSet.type.negative
+            })
+          ])
+        ])
+      ])
+    }
+
+    function getContent () {
+      return h(QTabPanels, {
+        modelValue: view.value,
+        animated: true
+      }, () => [
+        h(QTabPanel, {
+          class: 'q-color-picker__spectrum-tab overflow-hidden',
+          name: 'spectrum'
+        }, getSpectrumTab),
+
+        h(QTabPanel, {
+          class: 'q-pa-md q-color-picker__tune-tab',
+          name: 'tune'
+        }, getTuneTab),
+
+        h(QTabPanel, {
+          class: 'q-color-picker__palette-tab',
+          name: 'palette'
+        }, getPaletteTab)
+      ])
+    }
+
+    function getFooter () {
+      return h('div', {
+        class: 'q-color-picker__footer relative-position overflow-hidden'
+      }, [
+        h(QTabs, {
+          class: 'absolute-full',
+          modelValue: view.value,
+          dense: true,
+          align: 'justify',
+          ...getCache('ftIn', {
+            'onUpdate:modelValue': val => { view.value = val }
+          })
+        }, () => [
+          h(QTab, {
+            icon: $q.iconSet.colorPicker.spectrum,
+            name: 'spectrum',
+            ripple: false
+          }),
+
+          h(QTab, {
+            icon: $q.iconSet.colorPicker.tune,
+            name: 'tune',
+            ripple: false
+          }),
+
+          h(QTab, {
+            icon: $q.iconSet.colorPicker.palette,
+            name: 'palette',
+            ripple: false
+          })
+        ])
+      ])
+    }
+
+    function getSpectrumTab () {
+      const data = {
+        ref: spectrumRef,
+        class: 'q-color-picker__spectrum non-selectable relative-position cursor-pointer'
+          + (editable.value !== true ? ' readonly' : ''),
+        style: spectrumStyle.value,
+        ...(editable.value === true
+          ? {
+              onClick: onSpectrumClick,
+              onMousedown: onActivate
+            }
+          : {}
+        )
+      }
+
+      const child = [
+        h('div', { style: { paddingBottom: '100%' } }),
+        h('div', { class: 'q-color-picker__spectrum-white absolute-full' }),
+        h('div', { class: 'q-color-picker__spectrum-black absolute-full' }),
+        h('div', {
+          class: 'absolute',
+          style: spectrumPointerStyle.value
+        }, [
+          model.value.hex !== void 0
+            ? h('div', { class: 'q-color-picker__spectrum-circle' })
+            : null
+        ])
+      ]
+
+      const sliders = [
+        h('div', { class: 'q-color-picker__hue non-selectable' }, [
+          h(QSlider, {
+            modelValue: model.value.h,
+            min: 0,
+            max: 360,
+            fillHandleAlways: true,
+            readonly: editable.value !== true,
+            thumbPath,
+            'onUpdate:modelValue': onHueChange,
+            ...getCache('lazyhue', {
+              onChange: val => onHueChange(val, true)
+            })
+          })
+        ])
+      ]
+
+      hasAlpha.value === true && sliders.push(
+        h('div', { class: 'q-color-picker__alpha non-selectable' }, [
+          h(QSlider, {
+            modelValue: model.value.a,
+            min: 0,
+            max: 100,
+            fillHandleAlways: true,
+            readonly: editable.value !== true,
+            thumbPath,
+            ...getCache('alphaSlide', {
+              'onUpdate:modelValue': value => onNumericChange(value, 'a', 100),
+              onChange: value => onNumericChange(value, 'a', 100, void 0, true)
+            })
+          })
+        ])
+      )
+
+      return [
+        hDir('div', data, child, 'spec', editable.value, () => spectrumDirective.value),
+        h('div', { class: 'q-color-picker__sliders' }, sliders)
+      ]
+    }
+
+    function getTuneTab () {
+      return [
+        h('div', { class: 'row items-center no-wrap' }, [
+          h('div', 'R'),
+          h(QSlider, {
+            modelValue: model.value.r,
+            min: 0,
+            max: 255,
+            color: 'red',
+            dark: isDark.value,
+            readonly: editable.value !== true,
+            ...getCache('rSlide', {
+              'onUpdate:modelValue': value => onNumericChange(value, 'r', 255),
+              onChange: value => onNumericChange(value, 'r', 255, void 0, true)
+            })
+          }),
+          h('input', {
+            value: model.value.r,
+            maxlength: 3,
+            readonly: editable.value !== true,
+            onChange: stop,
+            ...getCache('rIn', {
+              onInput: evt => onNumericChange(evt.target.value, 'r', 255, evt),
+              onBlur: evt => onNumericChange(evt.target.value, 'r', 255, evt, true)
+            })
+          })
+        ]),
+
+        h('div', { class: 'row items-center no-wrap' }, [
+          h('div', 'G'),
+          h(QSlider, {
+            modelValue: model.value.g,
+            min: 0,
+            max: 255,
+            color: 'green',
+            dark: isDark.value,
+            readonly: editable.value !== true,
+            ...getCache('gSlide', {
+              'onUpdate:modelValue': value => onNumericChange(value, 'g', 255),
+              onChange: value => onNumericChange(value, 'g', 255, void 0, true)
+            })
+          }),
+          h('input', {
+            value: model.value.g,
+            maxlength: 3,
+            readonly: editable.value !== true,
+            onChange: stop,
+            ...getCache('gIn', {
+              onInput: evt => onNumericChange(evt.target.value, 'g', 255, evt),
+              onBlur: evt => onNumericChange(evt.target.value, 'g', 255, evt, true)
+            })
+          })
+        ]),
+
+        h('div', { class: 'row items-center no-wrap' }, [
+          h('div', 'B'),
+          h(QSlider, {
+            modelValue: model.value.b,
+            min: 0,
+            max: 255,
+            color: 'blue',
+            readonly: editable.value !== true,
+            dark: isDark.value,
+            ...getCache('bSlide', {
+              'onUpdate:modelValue': value => onNumericChange(value, 'b', 255),
+              onChange: value => onNumericChange(value, 'b', 255, void 0, true)
+            })
+          }),
+          h('input', {
+            value: model.value.b,
+            maxlength: 3,
+            readonly: editable.value !== true,
+            onChange: stop,
+            ...getCache('bIn', {
+              onInput: evt => onNumericChange(evt.target.value, 'b', 255, evt),
+              onBlur: evt => onNumericChange(evt.target.value, 'b', 255, evt, true)
+            })
+          })
+        ]),
+
+        hasAlpha.value === true ? h('div', { class: 'row items-center no-wrap' }, [
+          h('div', 'A'),
+          h(QSlider, {
+            modelValue: model.value.a,
+            color: 'grey',
+            readonly: editable.value !== true,
+            dark: isDark.value,
+            ...getCache('aSlide', {
+              'onUpdate:modelValue': value => onNumericChange(value, 'a', 100),
+              onChange: value => onNumericChange(value, 'a', 100, void 0, true)
+            })
+          }),
+          h('input', {
+            value: model.value.a,
+            maxlength: 3,
+            readonly: editable.value !== true,
+            onChange: stop,
+            ...getCache('aIn', {
+              onInput: evt => onNumericChange(evt.target.value, 'a', 100, evt),
+              onBlur: evt => onNumericChange(evt.target.value, 'a', 100, evt, true)
+            })
+          })
+        ]) : null
+      ]
+    }
+
+    function getPaletteTab () {
+      return [
+        h('div', {
+          class: 'row items-center q-color-picker__palette-rows'
+            + (editable.value === true ? ' q-color-picker__palette-rows--editable' : '')
+        }, computedPalette.value.map(color => h('div', {
+          class: 'q-color-picker__cube col-auto',
+          style: { backgroundColor: color },
+          ...(editable.value === true ? getCache('palette#' + color, {
+            onClick: () => {
+              onPalettePick(color)
+            }
+          }) : {})
+        })))
+      ]
+    }
+
+    return () => {
+      const child = [ getContent() ]
+
+      if (props.name !== void 0 && props.disable !== true) {
+        injectFormInput(child, 'push')
+      }
+
+      props.noHeader !== true && child.unshift(
+        getHeader()
+      )
+
+      props.noFooter !== true && child.push(
+        getFooter()
+      )
+
+      return h('div', {
+        class: classes.value,
+        ...attributes.value
+      }, child)
+    }
+  }
+})