vuetify 3.8.5 → 3.8.7

package/lib/components/VColorPicker/VColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPicker.js","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","makeVPickerProps","VPicker","useRtl","provideDefaults","useProxiedModel","computed","onBeforeMount","ref","watch","extractColor","modes","nullColor","consoleWarn","defineComponent","HSVtoCSS","parseColor","propsFactory","RGBtoHSV","useRender","makeVColorPickerProps","canvasHeight","type","String","Number","default","disabled","Boolean","dotSize","hideCanvas","hideSliders","hideInputs","mode","validator","v","Object","keys","includes","Array","isArray","every","m","showSwatches","swatches","swatchesMaxHeight","modelValue","hideHeader","VColorPicker","name","props","emits","color","setup","_ref","slots","hue","model","undefined","c","err","currentColor","value","h","rtlClasses","externalChange","immediate","updateColor","hsva","VSlider","trackColor","trackFillColor","pickerProps","filterProps","_createVNode","_mergeProps","class","a","style","_Fragment","width","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\nimport { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker'\n\n// Composables\nimport { useRtl } from '@/composables'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, onBeforeMount, ref, watch } from 'vue'\nimport { extractColor, modes, nullColor } from './util'\nimport { consoleWarn, defineComponent, HSVtoCSS, parseColor, propsFactory, RGBtoHSV, useRender } from '@/util'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, HSV } from '@/util'\n\nexport const makeVColorPickerProps = propsFactory({\n  canvasHeight: {\n    type: [String, Number],\n    default: 150,\n  },\n  disabled: Boolean,\n  dotSize: {\n    type: [Number, String],\n    default: 10,\n  },\n  hideCanvas: Boolean,\n  hideSliders: Boolean,\n  hideInputs: Boolean,\n  mode: {\n    type: String as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\n    default: () => Object.keys(modes),\n    validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n  },\n  showSwatches: Boolean,\n  swatches: Array as PropType<DeepReadonly<Color[][]>>,\n  swatchesMaxHeight: {\n    type: [Number, String],\n    default: 150,\n  },\n  modelValue: {\n    type: [Object, String] as PropType<Record<string, unknown> | string | undefined | null>,\n  },\n\n  ...makeVPickerProps({ hideHeader: true }),\n}, 'VColorPicker')\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  props: makeVColorPickerProps(),\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: keyof typeof modes) => true,\n  },\n\n  setup (props, { slots }) {\n    const mode = useProxiedModel(props, 'mode')\n    const hue = ref<number | null>(null)\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        if (v == null || v === '') return null\n\n        let c: HSV\n        try {\n          c = RGBtoHSV(parseColor(v as any))\n        } catch (err) {\n          consoleWarn(err as any)\n          return null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n    const currentColor = computed(() => {\n      return model.value\n        ? { ...model.value, h: hue.value ?? model.value.h }\n        : null\n    })\n    const { rtlClasses } = useRtl()\n\n    let externalChange = true\n    watch(model, v => {\n      if (!externalChange) {\n        // prevent hue shift from rgb conversion inaccuracy\n        externalChange = true\n        return\n      }\n      if (!v) return\n      hue.value = v.h\n    }, { immediate: true })\n\n    const updateColor = (hsva: HSV) => {\n      externalChange = false\n      hue.value = hsva.h\n      model.value = hsva\n    }\n\n    onBeforeMount(() => {\n      if (!props.modes.includes(mode.value)) mode.value = props.modes[0]\n    })\n\n    provideDefaults({\n      VSlider: {\n        color: undefined,\n        trackColor: undefined,\n        trackFillColor: undefined,\n      },\n    })\n\n    useRender(() => {\n      const pickerProps = VPicker.filterProps(props)\n\n      return (\n        <VPicker\n          { ...pickerProps }\n          class={[\n            'v-color-picker',\n            rtlClasses.value,\n            props.class,\n          ]}\n          style={[\n            {\n              '--v-color-picker-color-hsv': HSVtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n            },\n            props.style,\n          ]}\n          v-slots={{\n            ...slots,\n            default: () => (\n              <>\n                { !props.hideCanvas && (\n                  <VColorPickerCanvas\n                    key=\"canvas\"\n                    color={ currentColor.value }\n                    onUpdate:color={ updateColor }\n                    disabled={ props.disabled }\n                    dotSize={ props.dotSize }\n                    width={ props.width }\n                    height={ props.canvasHeight }\n                  />\n                )}\n\n                { (!props.hideSliders || !props.hideInputs) && (\n                  <div key=\"controls\" class=\"v-color-picker__controls\">\n                    { !props.hideSliders && (\n                      <VColorPickerPreview\n                        key=\"preview\"\n                        color={ currentColor.value }\n                        onUpdate:color={ updateColor }\n                        hideAlpha={ !mode.value.endsWith('a') }\n                        disabled={ props.disabled }\n                      />\n                    )}\n\n                    { !props.hideInputs && (\n                      <VColorPickerEdit\n                        key=\"edit\"\n                        modes={ props.modes }\n                        mode={ mode.value }\n                        onUpdate:mode={ m => mode.value = m }\n                        color={ currentColor.value }\n                        onUpdate:color={ updateColor }\n                        disabled={ props.disabled }\n                      />\n                    )}\n                  </div>\n                )}\n\n                { props.showSwatches && (\n                  <VColorPickerSwatches\n                    key=\"swatches\"\n                    color={ currentColor.value }\n                    onUpdate:color={ updateColor }\n                    maxHeight={ props.swatchesMaxHeight }\n                    swatches={ props.swatches }\n                    disabled={ props.disabled }\n                  />\n                )}\n              </>\n            ),\n          }}\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorPicker.js","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","makeVPickerProps","VPicker","useRtl","provideDefaults","useProxiedModel","computed","onBeforeMount","ref","watch","extractColor","modes","nullColor","consoleWarn","defineComponent","HSVtoCSS","parseColor","propsFactory","RGBtoHSV","useRender","makeVColorPickerProps","canvasHeight","type","String","Number","default","disabled","Boolean","dotSize","hideCanvas","hideSliders","hideInputs","mode","validator","v","Object","keys","includes","Array","isArray","every","m","showSwatches","swatches","swatchesMaxHeight","modelValue","hideHeader","VColorPicker","name","props","emits","color","setup","_ref","slots","hue","model","undefined","c","err","currentColor","value","h","rtlClasses","externalChange","immediate","updateColor","hsva","VSlider","trackColor","trackFillColor","pickerProps","filterProps","_createVNode","_mergeProps","class","a","style","_createElementVNode","_Fragment","width","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\nimport { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker'\n\n// Composables\nimport { useRtl } from '@/composables'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, onBeforeMount, ref, watch } from 'vue'\nimport { extractColor, modes, nullColor } from './util'\nimport { consoleWarn, defineComponent, HSVtoCSS, parseColor, propsFactory, RGBtoHSV, useRender } from '@/util'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, HSV } from '@/util'\n\nexport const makeVColorPickerProps = propsFactory({\n  canvasHeight: {\n    type: [String, Number],\n    default: 150,\n  },\n  disabled: Boolean,\n  dotSize: {\n    type: [Number, String],\n    default: 10,\n  },\n  hideCanvas: Boolean,\n  hideSliders: Boolean,\n  hideInputs: Boolean,\n  mode: {\n    type: String as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\n    default: () => Object.keys(modes),\n    validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n  },\n  showSwatches: Boolean,\n  swatches: Array as PropType<DeepReadonly<Color[][]>>,\n  swatchesMaxHeight: {\n    type: [Number, String],\n    default: 150,\n  },\n  modelValue: {\n    type: [Object, String] as PropType<Record<string, unknown> | string | undefined | null>,\n  },\n\n  ...makeVPickerProps({ hideHeader: true }),\n}, 'VColorPicker')\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  props: makeVColorPickerProps(),\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: keyof typeof modes) => true,\n  },\n\n  setup (props, { slots }) {\n    const mode = useProxiedModel(props, 'mode')\n    const hue = ref<number | null>(null)\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        if (v == null || v === '') return null\n\n        let c: HSV\n        try {\n          c = RGBtoHSV(parseColor(v as any))\n        } catch (err) {\n          consoleWarn(err as any)\n          return null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n    const currentColor = computed(() => {\n      return model.value\n        ? { ...model.value, h: hue.value ?? model.value.h }\n        : null\n    })\n    const { rtlClasses } = useRtl()\n\n    let externalChange = true\n    watch(model, v => {\n      if (!externalChange) {\n        // prevent hue shift from rgb conversion inaccuracy\n        externalChange = true\n        return\n      }\n      if (!v) return\n      hue.value = v.h\n    }, { immediate: true })\n\n    const updateColor = (hsva: HSV) => {\n      externalChange = false\n      hue.value = hsva.h\n      model.value = hsva\n    }\n\n    onBeforeMount(() => {\n      if (!props.modes.includes(mode.value)) mode.value = props.modes[0]\n    })\n\n    provideDefaults({\n      VSlider: {\n        color: undefined,\n        trackColor: undefined,\n        trackFillColor: undefined,\n      },\n    })\n\n    useRender(() => {\n      const pickerProps = VPicker.filterProps(props)\n\n      return (\n        <VPicker\n          { ...pickerProps }\n          class={[\n            'v-color-picker',\n            rtlClasses.value,\n            props.class,\n          ]}\n          style={[\n            {\n              '--v-color-picker-color-hsv': HSVtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n            },\n            props.style,\n          ]}\n          v-slots={{\n            ...slots,\n            default: () => (\n              <>\n                { !props.hideCanvas && (\n                  <VColorPickerCanvas\n                    key=\"canvas\"\n                    color={ currentColor.value }\n                    onUpdate:color={ updateColor }\n                    disabled={ props.disabled }\n                    dotSize={ props.dotSize }\n                    width={ props.width }\n                    height={ props.canvasHeight }\n                  />\n                )}\n\n                { (!props.hideSliders || !props.hideInputs) && (\n                  <div key=\"controls\" class=\"v-color-picker__controls\">\n                    { !props.hideSliders && (\n                      <VColorPickerPreview\n                        key=\"preview\"\n                        color={ currentColor.value }\n                        onUpdate:color={ updateColor }\n                        hideAlpha={ !mode.value.endsWith('a') }\n                        disabled={ props.disabled }\n                      />\n                    )}\n\n                    { !props.hideInputs && (\n                      <VColorPickerEdit\n                        key=\"edit\"\n                        modes={ props.modes }\n                        mode={ mode.value }\n                        onUpdate:mode={ m => mode.value = m }\n                        color={ currentColor.value }\n                        onUpdate:color={ updateColor }\n                        disabled={ props.disabled }\n                      />\n                    )}\n                  </div>\n                )}\n\n                { props.showSwatches && (\n                  <VColorPickerSwatches\n                    key=\"swatches\"\n                    color={ currentColor.value }\n                    onUpdate:color={ updateColor }\n                    maxHeight={ props.swatchesMaxHeight }\n                    swatches={ props.swatches }\n                    disabled={ props.disabled }\n                  />\n                )}\n              </>\n            ),\n          }}\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VColorPicker/VColorPickerCanvas.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
 // Styles
 import "./VColorPickerCanvas.css";
 
@@ -166,21 +166,21 @@ export const VColorPickerCanvas = defineComponent({
       immediate: true
     });
     onMounted(() => updateCanvas());
-    useRender(() => _createVNode("div", {
+    useRender(() => _createElementVNode("div", {
       "ref": resizeRef,
-      "class": ['v-color-picker-canvas', props.class],
-      "style": props.style,
+      "class": _normalizeClass(['v-color-picker-canvas', props.class]),
+      "style": _normalizeStyle(props.style),
       "onMousedown": handleMouseDown,
       "onTouchstartPassive": handleMouseDown
-    }, [_createVNode("canvas", {
+    }, [_createElementVNode("canvas", {
       "ref": canvasRef,
       "width": canvasWidth.value,
       "height": canvasHeight.value
-    }, null), props.color && _createVNode("div", {
-      "class": ['v-color-picker-canvas__dot', {
+    }, null), props.color && _createElementVNode("div", {
+      "class": _normalizeClass(['v-color-picker-canvas__dot', {
         'v-color-picker-canvas__dot--disabled': props.disabled
-      }],
-      "style": dotStyles.value
+      }]),
+      "style": _normalizeStyle(dotStyles.value)
     }, null)]));
     return {};
   }

package/lib/components/VColorPicker/VColorPickerCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerCanvas.js","names":["makeComponentProps","useResizeObserver","computed","onMounted","ref","shallowRef","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","canvasRef","canvasWidth","parseFloat","canvasHeight","_dotPosition","x","y","dotPosition","get","value","set","val","h","s","v","a","dotStyles","radius","parseInt","transform","resizeRef","entries","el","offsetParent","contentRect","updateDotPosition","rect","left","top","handleMouseDown","e","preventDefault","handleMouseMove","window","addEventListener","handleMouseUp","coords","clientX","clientY","getBoundingClientRect","removeEventListener","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","newVal","oldVal","flush","deep","_createVNode","class","style"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onMounted, ref, shallowRef, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerCanvasProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  dotSize: {\n    type: [Number, String],\n    default: 10,\n  },\n  height: {\n    type: [Number, String],\n    default: 150,\n  },\n  width: {\n    type: [Number, String],\n    default: 300,\n  },\n\n  ...makeComponentProps(),\n}, 'VColorPickerCanvas')\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: makeVColorPickerCanvasProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = shallowRef(false)\n    const canvasRef = ref<HTMLCanvasElement | null>()\n    const canvasWidth = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(parseFloat(props.height))\n\n    const _dotPosition = ref({ x: 0, y: 0 })\n    const dotPosition = computed({\n      get: () => _dotPosition.value,\n      set (val) {\n        if (!canvasRef.value) return\n\n        const { x, y } = val\n        _dotPosition.value = val\n\n        emit('update:color', {\n          h: props.color?.h ?? 0,\n          s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,\n          v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,\n          a: props.color?.a ?? 1,\n        })\n      },\n    })\n\n    const dotStyles = computed(() => {\n      const { x, y } = dotPosition.value\n      const radius = parseInt(props.dotSize, 10) / 2\n\n      return {\n        width: convertToUnit(props.dotSize),\n        height: convertToUnit(props.dotSize),\n        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`,\n      }\n    })\n\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.el?.offsetParent) return\n\n      const { width, height } = entries[0].contentRect\n\n      canvasWidth.value = width\n      canvasHeight.value = height\n    })\n\n    function updateDotPosition (x: number, y: number, rect: DOMRect) {\n      const { left, top, width, height } = rect\n      dotPosition.value = {\n        x: clamp(x - left, 0, width),\n        y: clamp(y - top, 0, height),\n      }\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      if (e.type === 'mousedown') {\n        // Prevent text selection while dragging\n        e.preventDefault()\n      }\n\n      if (props.disabled) return\n\n      handleMouseMove(e)\n\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n      window.addEventListener('touchmove', handleMouseMove)\n      window.addEventListener('touchend', handleMouseUp)\n    }\n\n    function handleMouseMove (e: MouseEvent | TouchEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      isInteracting.value = true\n\n      const coords = getEventCoordinates(e)\n\n      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseUp () {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n      window.removeEventListener('touchmove', handleMouseMove)\n      window.removeEventListener('touchend', handleMouseUp)\n    }\n\n    function updateCanvas () {\n      if (!canvasRef.value) return\n\n      const canvas = canvasRef.value\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${props.color?.h ?? 0}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 0%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    }\n\n    watch(() => props.color?.h, updateCanvas, { immediate: true })\n    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {\n      updateCanvas()\n      _dotPosition.value = {\n        x: dotPosition.value.x * newVal[0] / oldVal[0],\n        y: dotPosition.value.y * newVal[1] / oldVal[1],\n      }\n    }, { flush: 'post' })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      _dotPosition.value = props.color ? {\n        x: props.color.s * canvasWidth.value,\n        y: (1 - props.color.v) * canvasHeight.value,\n      } : { x: 0, y: 0 }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-color-picker-canvas',\n          props.class,\n        ]}\n        style={ props.style }\n        onMousedown={ handleMouseDown }\n        onTouchstartPassive={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ canvasWidth.value }\n          height={ canvasHeight.value }\n        />\n        { props.color && (\n          <div\n            class={[\n              'v-color-picker-canvas__dot',\n              {\n                'v-color-picker-canvas__dot--disabled': props.disabled,\n              },\n            ]}\n            style={ dotStyles.value }\n          />\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorPickerCanvas.js","names":["makeComponentProps","useResizeObserver","computed","onMounted","ref","shallowRef","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","canvasRef","canvasWidth","parseFloat","canvasHeight","_dotPosition","x","y","dotPosition","get","value","set","val","h","s","v","a","dotStyles","radius","parseInt","transform","resizeRef","entries","el","offsetParent","contentRect","updateDotPosition","rect","left","top","handleMouseDown","e","preventDefault","handleMouseMove","window","addEventListener","handleMouseUp","coords","clientX","clientY","getBoundingClientRect","removeEventListener","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","newVal","oldVal","flush","deep","_createElementVNode","_normalizeClass","class","_normalizeStyle","style"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onMounted, ref, shallowRef, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerCanvasProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  dotSize: {\n    type: [Number, String],\n    default: 10,\n  },\n  height: {\n    type: [Number, String],\n    default: 150,\n  },\n  width: {\n    type: [Number, String],\n    default: 300,\n  },\n\n  ...makeComponentProps(),\n}, 'VColorPickerCanvas')\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: makeVColorPickerCanvasProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = shallowRef(false)\n    const canvasRef = ref<HTMLCanvasElement | null>()\n    const canvasWidth = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(parseFloat(props.height))\n\n    const _dotPosition = ref({ x: 0, y: 0 })\n    const dotPosition = computed({\n      get: () => _dotPosition.value,\n      set (val) {\n        if (!canvasRef.value) return\n\n        const { x, y } = val\n        _dotPosition.value = val\n\n        emit('update:color', {\n          h: props.color?.h ?? 0,\n          s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,\n          v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,\n          a: props.color?.a ?? 1,\n        })\n      },\n    })\n\n    const dotStyles = computed(() => {\n      const { x, y } = dotPosition.value\n      const radius = parseInt(props.dotSize, 10) / 2\n\n      return {\n        width: convertToUnit(props.dotSize),\n        height: convertToUnit(props.dotSize),\n        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`,\n      }\n    })\n\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.el?.offsetParent) return\n\n      const { width, height } = entries[0].contentRect\n\n      canvasWidth.value = width\n      canvasHeight.value = height\n    })\n\n    function updateDotPosition (x: number, y: number, rect: DOMRect) {\n      const { left, top, width, height } = rect\n      dotPosition.value = {\n        x: clamp(x - left, 0, width),\n        y: clamp(y - top, 0, height),\n      }\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      if (e.type === 'mousedown') {\n        // Prevent text selection while dragging\n        e.preventDefault()\n      }\n\n      if (props.disabled) return\n\n      handleMouseMove(e)\n\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n      window.addEventListener('touchmove', handleMouseMove)\n      window.addEventListener('touchend', handleMouseUp)\n    }\n\n    function handleMouseMove (e: MouseEvent | TouchEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      isInteracting.value = true\n\n      const coords = getEventCoordinates(e)\n\n      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseUp () {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n      window.removeEventListener('touchmove', handleMouseMove)\n      window.removeEventListener('touchend', handleMouseUp)\n    }\n\n    function updateCanvas () {\n      if (!canvasRef.value) return\n\n      const canvas = canvasRef.value\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${props.color?.h ?? 0}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 0%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    }\n\n    watch(() => props.color?.h, updateCanvas, { immediate: true })\n    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {\n      updateCanvas()\n      _dotPosition.value = {\n        x: dotPosition.value.x * newVal[0] / oldVal[0],\n        y: dotPosition.value.y * newVal[1] / oldVal[1],\n      }\n    }, { flush: 'post' })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      _dotPosition.value = props.color ? {\n        x: props.color.s * canvasWidth.value,\n        y: (1 - props.color.v) * canvasHeight.value,\n      } : { x: 0, y: 0 }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-color-picker-canvas',\n          props.class,\n        ]}\n        style={ props.style }\n        onMousedown={ handleMouseDown }\n        onTouchstartPassive={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ canvasWidth.value }\n          height={ canvasHeight.value }\n        />\n        { props.color && (\n          <div\n            class={[\n              'v-color-picker-canvas__dot',\n              {\n                'v-color-picker-canvas__dot--disabled': props.disabled,\n              },\n            ]}\n            style={ dotStyles.value }\n          />\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VColorPicker/VColorPickerEdit.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
 // Styles
 import "./VColorPickerEdit.css";
 
@@ -13,9 +13,9 @@ const VColorPickerInput = _ref => {
     label,
     ...rest
   } = _ref;
-  return _createVNode("div", {
+  return _createElementVNode("div", {
     "class": "v-color-picker-edit__input"
-  }, [_createVNode("input", rest, null), _createVNode("span", null, [label])]);
+  }, [_createElementVNode("input", _normalizeProps(_guardReactiveProps(rest)), null), _createElementVNode("span", null, [label])]);
 };
 export const makeVColorPickerEditProps = propsFactory({
   color: Object,
@@ -72,9 +72,9 @@ export const VColorPickerEdit = defineComponent({
         };
       });
     });
-    useRender(() => _createVNode("div", {
-      "class": ['v-color-picker-edit', props.class],
-      "style": props.style
+    useRender(() => _createElementVNode("div", {
+      "class": _normalizeClass(['v-color-picker-edit', props.class]),
+      "style": _normalizeStyle(props.style)
     }, [inputs.value?.map(props => _createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && _createVNode(VBtn, {
       "icon": "$unfold",
       "size": "x-small",

package/lib/components/VColorPicker/VColorPickerEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerEdit.js","names":["VBtn","makeComponentProps","computed","modes","nullColor","defineComponent","propsFactory","useRender","VColorPickerInput","_ref","label","rest","_createVNode","makeVColorPickerEditProps","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","VColorPickerEdit","name","props","emits","setup","_ref2","emit","enabledModes","map","key","inputs","value","find","to","_ref3","getValue","getColor","inputProps","onChange","e","target","from","class","style","length","onClick","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { computed } from 'vue'\nimport { modes, nullColor } from './util'\nimport { defineComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util/colorUtils'\n\nconst VColorPickerInput = ({ label, ...rest }: any) => {\n  return (\n    <div\n      class=\"v-color-picker-edit__input\"\n    >\n      <input { ...rest } />\n      <span>{ label }</span>\n    </div>\n  )\n}\n\nexport const makeVColorPickerEditProps = propsFactory({\n  color: Object as PropType<HSV | null>,\n  disabled: Boolean,\n  mode: {\n    type: String as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\n    default: () => Object.keys(modes),\n    validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n  },\n\n  ...makeComponentProps(),\n}, 'VColorPickerEdit')\n\nexport const VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: makeVColorPickerEditProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:mode': (mode: keyof typeof modes) => true,\n  },\n\n  setup (props, { emit }) {\n    const enabledModes = computed(() => {\n      return props.modes.map(key => ({ ...modes[key], name: key }))\n    })\n\n    const inputs = computed(() => {\n      const mode = enabledModes.value.find(m => m.name === props.mode)\n\n      if (!mode) return []\n\n      const color = props.color ? mode.to(props.color) : null\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: color && getValue(color),\n          onChange: (e: InputEvent) => {\n            const target = e.target as HTMLInputElement | null\n\n            if (!target) return\n\n            emit('update:color', mode.from(getColor(color ?? mode.to(nullColor), target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-edit',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { inputs.value?.map(props => (\n          <VColorPickerInput { ...props } />\n        ))}\n        { enabledModes.value.length > 1 && (\n          <VBtn\n            icon=\"$unfold\"\n            size=\"x-small\"\n            variant=\"plain\"\n            onClick={ () => {\n              const mi = enabledModes.value.findIndex(m => m.name === props.mode)\n\n              emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name)\n            }}\n          />\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerEdit = InstanceType<typeof VColorPickerEdit>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorPickerEdit.js","names":["VBtn","makeComponentProps","computed","modes","nullColor","defineComponent","propsFactory","useRender","VColorPickerInput","_ref","label","rest","_createElementVNode","_normalizeProps","_guardReactiveProps","makeVColorPickerEditProps","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","VColorPickerEdit","name","props","emits","setup","_ref2","emit","enabledModes","map","key","inputs","value","find","to","_ref3","getValue","getColor","inputProps","onChange","e","target","from","_normalizeClass","class","_normalizeStyle","style","_createVNode","length","onClick","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { computed } from 'vue'\nimport { modes, nullColor } from './util'\nimport { defineComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util/colorUtils'\n\nconst VColorPickerInput = ({ label, ...rest }: any) => {\n  return (\n    <div\n      class=\"v-color-picker-edit__input\"\n    >\n      <input { ...rest } />\n      <span>{ label }</span>\n    </div>\n  )\n}\n\nexport const makeVColorPickerEditProps = propsFactory({\n  color: Object as PropType<HSV | null>,\n  disabled: Boolean,\n  mode: {\n    type: String as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\n    default: () => Object.keys(modes),\n    validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n  },\n\n  ...makeComponentProps(),\n}, 'VColorPickerEdit')\n\nexport const VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: makeVColorPickerEditProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:mode': (mode: keyof typeof modes) => true,\n  },\n\n  setup (props, { emit }) {\n    const enabledModes = computed(() => {\n      return props.modes.map(key => ({ ...modes[key], name: key }))\n    })\n\n    const inputs = computed(() => {\n      const mode = enabledModes.value.find(m => m.name === props.mode)\n\n      if (!mode) return []\n\n      const color = props.color ? mode.to(props.color) : null\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: color && getValue(color),\n          onChange: (e: InputEvent) => {\n            const target = e.target as HTMLInputElement | null\n\n            if (!target) return\n\n            emit('update:color', mode.from(getColor(color ?? mode.to(nullColor), target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-edit',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { inputs.value?.map(props => (\n          <VColorPickerInput { ...props } />\n        ))}\n        { enabledModes.value.length > 1 && (\n          <VBtn\n            icon=\"$unfold\"\n            size=\"x-small\"\n            variant=\"plain\"\n            onClick={ () => {\n              const mi = enabledModes.value.findIndex(m => m.name === props.mode)\n\n              emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name)\n            }}\n          />\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerEdit = InstanceType<typeof VColorPickerEdit>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VColorPicker/VColorPickerPreview.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, normalizeClass as _normalizeClass } from "vue";
 // Styles
 import "./VColorPickerPreview.css";
 
@@ -43,12 +43,12 @@ export const VColorPickerPreview = defineComponent({
         });
       } catch (e) {}
     }
-    useRender(() => _createVNode("div", {
-      "class": ['v-color-picker-preview', {
+    useRender(() => _createElementVNode("div", {
+      "class": _normalizeClass(['v-color-picker-preview', {
         'v-color-picker-preview--hide-alpha': props.hideAlpha
-      }, props.class],
-      "style": props.style
-    }, [SUPPORTS_EYE_DROPPER && _createVNode("div", {
+      }, props.class]),
+      "style": _normalizeStyle(props.style)
+    }, [SUPPORTS_EYE_DROPPER && _createElementVNode("div", {
       "class": "v-color-picker-preview__eye-dropper",
       "key": "eyeDropper"
     }, [_createVNode(VBtn, {
@@ -57,13 +57,13 @@ export const VColorPickerPreview = defineComponent({
       "icon": "$eyeDropper",
       "variant": "plain",
       "onClick": openEyeDropper
-    }, null)]), _createVNode("div", {
+    }, null)]), _createElementVNode("div", {
       "class": "v-color-picker-preview__dot"
-    }, [_createVNode("div", {
-      "style": {
+    }, [_createElementVNode("div", {
+      "style": _normalizeStyle({
         background: HSVtoCSS(props.color ?? nullColor)
-      }
-    }, null)]), _createVNode("div", {
+      })
+    }, null)]), _createElementVNode("div", {
       "class": "v-color-picker-preview__sliders"
     }, [_createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__hue",

package/lib/components/VColorPicker/VColorPickerPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerPreview.js","names":["VBtn","VSlider","makeComponentProps","onUnmounted","nullColor","defineComponent","HSVtoCSS","parseColor","propsFactory","RGBtoHSV","SUPPORTS_EYE_DROPPER","useRender","makeVColorPickerPreviewProps","color","type","Object","disabled","Boolean","hideAlpha","VColorPickerPreview","name","props","emits","setup","_ref","emit","abortController","AbortController","abort","openEyeDropper","eyeDropper","window","EyeDropper","result","open","signal","colorHexValue","sRGBHex","e","_createVNode","class","style","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VSlider } from '@/components/VSlider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { onUnmounted } from 'vue'\nimport { nullColor } from './util'\nimport {\n  defineComponent,\n  HSVtoCSS,\n  parseColor,\n  propsFactory,\n  RGBtoHSV,\n  SUPPORTS_EYE_DROPPER,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerPreviewProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  hideAlpha: Boolean,\n\n  ...makeComponentProps(),\n}, 'VColorPickerPreview')\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: makeVColorPickerPreviewProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    const abortController = new AbortController()\n\n    onUnmounted(() => abortController.abort())\n\n    async function openEyeDropper () {\n      if (!SUPPORTS_EYE_DROPPER || props.disabled) return\n\n      const eyeDropper = new window.EyeDropper()\n      try {\n        const result = await eyeDropper.open({ signal: abortController.signal })\n        const colorHexValue = RGBtoHSV(parseColor(result.sRGBHex))\n        emit('update:color', { ...(props.color ?? nullColor), ...colorHexValue })\n      } catch (e) {}\n    }\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { SUPPORTS_EYE_DROPPER && (\n          <div class=\"v-color-picker-preview__eye-dropper\" key=\"eyeDropper\">\n            <VBtn density=\"comfortable\" disabled={ props.disabled } icon=\"$eyeDropper\" variant=\"plain\" onClick={ openEyeDropper } />\n          </div>\n        )}\n\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVtoCSS(props.color ?? nullColor) }} />\n        </div>\n\n        <div class=\"v-color-picker-preview__sliders\">\n          <VSlider\n            class=\"v-color-picker-preview__track v-color-picker-preview__hue\"\n            modelValue={ props.color?.h }\n            onUpdate:modelValue={ h => emit('update:color', { ...(props.color ?? nullColor), h }) }\n            step={ 0 }\n            min={ 0 }\n            max={ 360 }\n            disabled={ props.disabled }\n            thumbSize={ 14 }\n            trackSize={ 8 }\n            trackFillColor=\"white\"\n            hideDetails\n          />\n\n          { !props.hideAlpha && (\n            <VSlider\n              class=\"v-color-picker-preview__track v-color-picker-preview__alpha\"\n              modelValue={ props.color?.a ?? 1 }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 1 / 256 }\n              min={ 0 }\n              max={ 1 }\n              disabled={ props.disabled }\n              thumbSize={ 14 }\n              trackSize={ 8 }\n              trackFillColor=\"white\"\n              hideDetails\n            />\n          )}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerPreview = InstanceType<typeof VColorPickerPreview>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI;AAAA,SACJC,OAAO,+BAEhB;AAAA,SACSC,kBAAkB,0CAE3B;AACA,SAASC,WAAW,QAAQ,KAAK;AAAA,SACxBC,SAAS;AAAA,SAEhBC,eAAe,EACfC,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,oBAAoB,EACpBC,SAAS,+BAGX;AAIA,OAAO,MAAMC,4BAA4B,GAAGJ,YAAY,CAAC;EACvDK,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EACDC,QAAQ,EAAEC,OAAO;EACjBC,SAAS,EAAED,OAAO;EAElB,GAAGf,kBAAkB,CAAC;AACxB,CAAC,EAAE,qBAAqB,CAAC;AAEzB,OAAO,MAAMiB,mBAAmB,GAAGd,eAAe,CAAC;EACjDe,IAAI,EAAE,qBAAqB;EAE3BC,KAAK,EAAET,4BAA4B,CAAC,CAAC;EAErCU,KAAK,EAAE;IACL,cAAc,EAAGT,KAAU,IAAK;EAClC,CAAC;EAEDU,KAAKA,CAAEF,KAAK,EAAAG,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpB,MAAME,eAAe,GAAG,IAAIC,eAAe,CAAC,CAAC;IAE7CxB,WAAW,CAAC,MAAMuB,eAAe,CAACE,KAAK,CAAC,CAAC,CAAC;IAE1C,eAAeC,cAAcA,CAAA,EAAI;MAC/B,IAAI,CAACnB,oBAAoB,IAAIW,KAAK,CAACL,QAAQ,EAAE;MAE7C,MAAMc,UAAU,GAAG,IAAIC,MAAM,CAACC,UAAU,CAAC,CAAC;MAC1C,IAAI;QACF,MAAMC,MAAM,GAAG,MAAMH,UAAU,CAACI,IAAI,CAAC;UAAEC,MAAM,EAAET,eAAe,CAACS;QAAO,CAAC,CAAC;QACxE,MAAMC,aAAa,GAAG3B,QAAQ,CAACF,UAAU,CAAC0B,MAAM,CAACI,OAAO,CAAC,CAAC;QAC1DZ,IAAI,CAAC,cAAc,EAAE;UAAE,IAAIJ,KAAK,CAACR,KAAK,IAAIT,SAAS,CAAC;UAAE,GAAGgC;QAAc,CAAC,CAAC;MAC3E,CAAC,CAAC,OAAOE,CAAC,EAAE,CAAC;IACf;IAEA3B,SAAS,CAAC,MAAA4B,YAAA;MAAA,SAEC,CACL,wBAAwB,EACxB;QACE,oCAAoC,EAAElB,KAAK,CAACH;MAC9C,CAAC,EACDG,KAAK,CAACmB,KAAK,CACZ;MAAA,SACOnB,KAAK,CAACoB;IAAK,IAEjB/B,oBAAoB,IAAA6B,YAAA;MAAA;MAAA;IAAA,IAAAA,YAAA,CAAAvC,IAAA;MAAA;MAAA,YAEqBqB,KAAK,CAACL,QAAQ;MAAA;MAAA;MAAA,WAAgDa;IAAc,UAEtH,EAAAU,YAAA;MAAA;IAAA,IAAAA,YAAA;MAAA,SAGa;QAAEG,UAAU,EAAEpC,QAAQ,CAACe,KAAK,CAACR,KAAK,IAAIT,SAAS;MAAE;IAAC,YAAAmC,YAAA;MAAA;IAAA,IAAAA,YAAA,CAAAtC,OAAA;MAAA;MAAA,cAM/CoB,KAAK,CAACR,KAAK,EAAE8B,CAAC;MAAA,uBACLA,CAAC,IAAIlB,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIJ,KAAK,CAACR,KAAK,IAAIT,SAAS,CAAC;QAAEuC;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC;MAAA,OACF,CAAC;MAAA,OACD,GAAG;MAAA,YACEtB,KAAK,CAACL,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA;MAAA;IAAA,UAKb,CAACK,KAAK,CAACH,SAAS,IAAAqB,YAAA,CAAAtC,OAAA;MAAA;MAAA,cAGDoB,KAAK,CAACR,KAAK,EAAE+B,CAAC,IAAI,CAAC;MAAA,uBACVA,CAAC,IAAInB,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIJ,KAAK,CAACR,KAAK,IAAIT,SAAS,CAAC;QAAEwC;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC,GAAG,GAAG;MAAA,OACR,CAAC;MAAA,OACD,CAAC;MAAA,YACIvB,KAAK,CAACL,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA;MAAA;IAAA,QAIhB,IAGN,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VColorPickerPreview.js","names":["VBtn","VSlider","makeComponentProps","onUnmounted","nullColor","defineComponent","HSVtoCSS","parseColor","propsFactory","RGBtoHSV","SUPPORTS_EYE_DROPPER","useRender","makeVColorPickerPreviewProps","color","type","Object","disabled","Boolean","hideAlpha","VColorPickerPreview","name","props","emits","setup","_ref","emit","abortController","AbortController","abort","openEyeDropper","eyeDropper","window","EyeDropper","result","open","signal","colorHexValue","sRGBHex","e","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","_createVNode","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VSlider } from '@/components/VSlider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { onUnmounted } from 'vue'\nimport { nullColor } from './util'\nimport {\n  defineComponent,\n  HSVtoCSS,\n  parseColor,\n  propsFactory,\n  RGBtoHSV,\n  SUPPORTS_EYE_DROPPER,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerPreviewProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  hideAlpha: Boolean,\n\n  ...makeComponentProps(),\n}, 'VColorPickerPreview')\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: makeVColorPickerPreviewProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    const abortController = new AbortController()\n\n    onUnmounted(() => abortController.abort())\n\n    async function openEyeDropper () {\n      if (!SUPPORTS_EYE_DROPPER || props.disabled) return\n\n      const eyeDropper = new window.EyeDropper()\n      try {\n        const result = await eyeDropper.open({ signal: abortController.signal })\n        const colorHexValue = RGBtoHSV(parseColor(result.sRGBHex))\n        emit('update:color', { ...(props.color ?? nullColor), ...colorHexValue })\n      } catch (e) {}\n    }\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { SUPPORTS_EYE_DROPPER && (\n          <div class=\"v-color-picker-preview__eye-dropper\" key=\"eyeDropper\">\n            <VBtn density=\"comfortable\" disabled={ props.disabled } icon=\"$eyeDropper\" variant=\"plain\" onClick={ openEyeDropper } />\n          </div>\n        )}\n\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVtoCSS(props.color ?? nullColor) }} />\n        </div>\n\n        <div class=\"v-color-picker-preview__sliders\">\n          <VSlider\n            class=\"v-color-picker-preview__track v-color-picker-preview__hue\"\n            modelValue={ props.color?.h }\n            onUpdate:modelValue={ h => emit('update:color', { ...(props.color ?? nullColor), h }) }\n            step={ 0 }\n            min={ 0 }\n            max={ 360 }\n            disabled={ props.disabled }\n            thumbSize={ 14 }\n            trackSize={ 8 }\n            trackFillColor=\"white\"\n            hideDetails\n          />\n\n          { !props.hideAlpha && (\n            <VSlider\n              class=\"v-color-picker-preview__track v-color-picker-preview__alpha\"\n              modelValue={ props.color?.a ?? 1 }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 1 / 256 }\n              min={ 0 }\n              max={ 1 }\n              disabled={ props.disabled }\n              thumbSize={ 14 }\n              trackSize={ 8 }\n              trackFillColor=\"white\"\n              hideDetails\n            />\n          )}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerPreview = InstanceType<typeof VColorPickerPreview>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VColorPicker/VColorPickerSwatches.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
 // Styles
 import "./VColorPickerSwatches.css";
 
@@ -33,24 +33,24 @@ export const VColorPickerSwatches = defineComponent({
     let {
       emit
     } = _ref;
-    useRender(() => _createVNode("div", {
-      "class": ['v-color-picker-swatches', props.class],
-      "style": [{
+    useRender(() => _createElementVNode("div", {
+      "class": _normalizeClass(['v-color-picker-swatches', props.class]),
+      "style": _normalizeStyle([{
         maxHeight: convertToUnit(props.maxHeight)
-      }, props.style]
-    }, [_createVNode("div", null, [props.swatches.map(swatch => _createVNode("div", {
+      }, props.style])
+    }, [_createElementVNode("div", null, [props.swatches.map(swatch => _createElementVNode("div", {
       "class": "v-color-picker-swatches__swatch"
     }, [swatch.map(color => {
       const rgba = parseColor(color);
       const hsva = RGBtoHSV(rgba);
       const background = RGBtoCSS(rgba);
-      return _createVNode("div", {
+      return _createElementVNode("div", {
         "class": "v-color-picker-swatches__color",
         "onClick": () => hsva && emit('update:color', hsva)
-      }, [_createVNode("div", {
-        "style": {
+      }, [_createElementVNode("div", {
+        "style": _normalizeStyle({
           background
-        }
+        })
       }, [props.color && deepEqual(props.color, hsva) ? _createVNode(VIcon, {
         "size": "x-small",
         "icon": "$success",

package/lib/components/VColorPicker/VColorPickerSwatches.js.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerSwatches.js","names":["VIcon","makeComponentProps","convertToUnit","deepEqual","defineComponent","getContrast","parseColor","propsFactory","RGBtoCSS","RGBtoHSV","useRender","colors","makeVColorPickerSwatchesProps","swatches","type","Array","default","parseDefaultColors","disabled","Boolean","color","Object","maxHeight","Number","String","keys","map","key","base","darken4","darken3","darken2","darken1","lighten1","lighten2","lighten3","lighten4","lighten5","black","white","transparent","VColorPickerSwatches","name","props","emits","setup","_ref","emit","_createVNode","class","style","swatch","rgba","hsva","background","onClick","undefined"],"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport {\n  convertToUnit,\n  deepEqual,\n  defineComponent,\n  getContrast,\n  parseColor,\n  propsFactory,\n  RGBtoCSS,\n  RGBtoHSV,\n  useRender,\n} from '@/util'\nimport colors from '@/util/colors'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, HSV } from '@/util'\n\nexport const makeVColorPickerSwatchesProps = propsFactory({\n  swatches: {\n    type: Array as PropType<DeepReadonly<Color[][]>>,\n    default: () => parseDefaultColors(colors),\n  },\n  disabled: Boolean,\n  color: Object as PropType<HSV | null>,\n  maxHeight: [Number, String],\n\n  ...makeComponentProps(),\n}, 'VColorPickerSwatches')\n\nfunction parseDefaultColors (colors: Record<string, Record<string, string>>) {\n  return Object.keys(colors).map(key => {\n    const color = colors[key]\n    return color.base ? [\n      color.base,\n      color.darken4,\n      color.darken3,\n      color.darken2,\n      color.darken1,\n      color.lighten1,\n      color.lighten2,\n      color.lighten3,\n      color.lighten4,\n      color.lighten5,\n    ] : [\n      color.black,\n      color.white,\n      color.transparent,\n    ]\n  })\n}\n\nexport const VColorPickerSwatches = defineComponent({\n  name: 'VColorPickerSwatches',\n\n  props: makeVColorPickerSwatchesProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-swatches',\n          props.class,\n        ]}\n        style={[\n          { maxHeight: convertToUnit(props.maxHeight) },\n          props.style,\n        ]}\n      >\n        <div>\n          { props.swatches.map(swatch => (\n            <div class=\"v-color-picker-swatches__swatch\">\n              { swatch.map(color => {\n                const rgba = parseColor(color)\n                const hsva = RGBtoHSV(rgba)\n                const background = RGBtoCSS(rgba)\n\n                return (\n                  <div\n                    class=\"v-color-picker-swatches__color\"\n                    onClick={ () => hsva && emit('update:color', hsva) }\n                  >\n                    <div style={{ background }}>\n                      { props.color && deepEqual(props.color, hsva)\n                        ? <VIcon size=\"x-small\" icon=\"$success\" color={ getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black' } />\n                        : undefined\n                      }\n                    </div>\n                  </div>\n                )\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerSwatches = InstanceType<typeof VColorPickerSwatches>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorPickerSwatches.js","names":["VIcon","makeComponentProps","convertToUnit","deepEqual","defineComponent","getContrast","parseColor","propsFactory","RGBtoCSS","RGBtoHSV","useRender","colors","makeVColorPickerSwatchesProps","swatches","type","Array","default","parseDefaultColors","disabled","Boolean","color","Object","maxHeight","Number","String","keys","map","key","base","darken4","darken3","darken2","darken1","lighten1","lighten2","lighten3","lighten4","lighten5","black","white","transparent","VColorPickerSwatches","name","props","emits","setup","_ref","emit","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","swatch","rgba","hsva","background","onClick","_createVNode","undefined"],"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport {\n  convertToUnit,\n  deepEqual,\n  defineComponent,\n  getContrast,\n  parseColor,\n  propsFactory,\n  RGBtoCSS,\n  RGBtoHSV,\n  useRender,\n} from '@/util'\nimport colors from '@/util/colors'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, HSV } from '@/util'\n\nexport const makeVColorPickerSwatchesProps = propsFactory({\n  swatches: {\n    type: Array as PropType<DeepReadonly<Color[][]>>,\n    default: () => parseDefaultColors(colors),\n  },\n  disabled: Boolean,\n  color: Object as PropType<HSV | null>,\n  maxHeight: [Number, String],\n\n  ...makeComponentProps(),\n}, 'VColorPickerSwatches')\n\nfunction parseDefaultColors (colors: Record<string, Record<string, string>>) {\n  return Object.keys(colors).map(key => {\n    const color = colors[key]\n    return color.base ? [\n      color.base,\n      color.darken4,\n      color.darken3,\n      color.darken2,\n      color.darken1,\n      color.lighten1,\n      color.lighten2,\n      color.lighten3,\n      color.lighten4,\n      color.lighten5,\n    ] : [\n      color.black,\n      color.white,\n      color.transparent,\n    ]\n  })\n}\n\nexport const VColorPickerSwatches = defineComponent({\n  name: 'VColorPickerSwatches',\n\n  props: makeVColorPickerSwatchesProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-swatches',\n          props.class,\n        ]}\n        style={[\n          { maxHeight: convertToUnit(props.maxHeight) },\n          props.style,\n        ]}\n      >\n        <div>\n          { props.swatches.map(swatch => (\n            <div class=\"v-color-picker-swatches__swatch\">\n              { swatch.map(color => {\n                const rgba = parseColor(color)\n                const hsva = RGBtoHSV(rgba)\n                const background = RGBtoCSS(rgba)\n\n                return (\n                  <div\n                    class=\"v-color-picker-swatches__color\"\n                    onClick={ () => hsva && emit('update:color', hsva) }\n                  >\n                    <div style={{ background }}>\n                      { props.color && deepEqual(props.color, hsva)\n                        ? <VIcon size=\"x-small\" icon=\"$success\" color={ getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black' } />\n                        : undefined\n                      }\n                    </div>\n                  </div>\n                )\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerSwatches = InstanceType<typeof VColorPickerSwatches>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,KAAK,6BAEd;AAAA,SACSC,kBAAkB,0CAE3B;AAAA,SAEEC,aAAa,EACbC,SAAS,EACTC,eAAe,EACfC,WAAW,EACXC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,QAAQ,EACRC,SAAS;AAAA,OAEJC,MAAM,8BAEb;AAIA,OAAO,MAAMC,6BAA6B,GAAGL,YAAY,CAAC;EACxDM,QAAQ,EAAE;IACRC,IAAI,EAAEC,KAA0C;IAChDC,OAAO,EAAEA,CAAA,KAAMC,kBAAkB,CAACN,MAAM;EAC1C,CAAC;EACDO,QAAQ,EAAEC,OAAO;EACjBC,KAAK,EAAEC,MAA8B;EACrCC,SAAS,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EAE3B,GAAGvB,kBAAkB,CAAC;AACxB,CAAC,EAAE,sBAAsB,CAAC;AAE1B,SAASgB,kBAAkBA,CAAEN,MAA8C,EAAE;EAC3E,OAAOU,MAAM,CAACI,IAAI,CAACd,MAAM,CAAC,CAACe,GAAG,CAACC,GAAG,IAAI;IACpC,MAAMP,KAAK,GAAGT,MAAM,CAACgB,GAAG,CAAC;IACzB,OAAOP,KAAK,CAACQ,IAAI,GAAG,CAClBR,KAAK,CAACQ,IAAI,EACVR,KAAK,CAACS,OAAO,EACbT,KAAK,CAACU,OAAO,EACbV,KAAK,CAACW,OAAO,EACbX,KAAK,CAACY,OAAO,EACbZ,KAAK,CAACa,QAAQ,EACdb,KAAK,CAACc,QAAQ,EACdd,KAAK,CAACe,QAAQ,EACdf,KAAK,CAACgB,QAAQ,EACdhB,KAAK,CAACiB,QAAQ,CACf,GAAG,CACFjB,KAAK,CAACkB,KAAK,EACXlB,KAAK,CAACmB,KAAK,EACXnB,KAAK,CAACoB,WAAW,CAClB;EACH,CAAC,CAAC;AACJ;AAEA,OAAO,MAAMC,oBAAoB,GAAGrC,eAAe,CAAC;EAClDsC,IAAI,EAAE,sBAAsB;EAE5BC,KAAK,EAAE/B,6BAA6B,CAAC,CAAC;EAEtCgC,KAAK,EAAE;IACL,cAAc,EAAGxB,KAAU,IAAK;EAClC,CAAC;EAEDyB,KAAKA,CAAEF,KAAK,EAAAG,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpBpC,SAAS,CAAC,MAAAsC,mBAAA;MAAA,SAAAC,eAAA,CAEC,CACL,yBAAyB,EACzBN,KAAK,CAACO,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACL;QAAE7B,SAAS,EAAEpB,aAAa,CAACyC,KAAK,CAACrB,SAAS;MAAE,CAAC,EAC7CqB,KAAK,CAACS,KAAK,CACZ;IAAA,IAAAJ,mBAAA,eAGGL,KAAK,CAAC9B,QAAQ,CAACa,GAAG,CAAC2B,MAAM,IAAAL,mBAAA;MAAA;IAAA,IAErBK,MAAM,CAAC3B,GAAG,CAACN,KAAK,IAAI;MACpB,MAAMkC,IAAI,GAAGhD,UAAU,CAACc,KAAK,CAAC;MAC9B,MAAMmC,IAAI,GAAG9C,QAAQ,CAAC6C,IAAI,CAAC;MAC3B,MAAME,UAAU,GAAGhD,QAAQ,CAAC8C,IAAI,CAAC;MAEjC,OAAAN,mBAAA;QAAA;QAAA,WAGcS,CAAA,KAAMF,IAAI,IAAIR,IAAI,CAAC,cAAc,EAAEQ,IAAI;MAAC,IAAAP,mBAAA;QAAA,SAAAG,eAAA,CAEtC;UAAEK;QAAW,CAAC;MAAA,IACtBb,KAAK,CAACvB,KAAK,IAAIjB,SAAS,CAACwC,KAAK,CAACvB,KAAK,EAAEmC,IAAI,CAAC,GAAAG,YAAA,CAAA1D,KAAA;QAAA;QAAA;QAAA,SACKK,WAAW,CAACe,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG;MAAO,WACnGuC,SAAS;IAKrB,CAAC,CAAC,EAEL,CAAC,IAGP,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}