@vuetify/nightly 3.0.0-beta.13 → 3.0.0-beta.15

package/lib/components/VColorPicker/VColorPickerCanvas.mjs

@@ -1,9 +1,12 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPickerCanvas.css"; // Utilities
+import "./VColorPickerCanvas.css";
 
+// Utilities
 import { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from "../../util/index.mjs";
-import { computed, onMounted, ref, watch } from 'vue'; // Types
+import { computed, onMounted, ref, watch } from 'vue';
+
+// Types
 
 export const VColorPickerCanvas = defineComponent({
   name: 'VColorPickerCanvas',
@@ -29,7 +32,6 @@ export const VColorPickerCanvas = defineComponent({
     'update:color': color => true,
     'update:position': hue => true
   },
-
   setup(props, _ref) {
     let {
       emit
@@ -53,7 +55,6 @@ export const VColorPickerCanvas = defineComponent({
       };
     });
     const canvasRef = ref();
-
     function updateDotPosition(x, y, rect) {
       const {
         left,
@@ -66,12 +67,10 @@ export const VColorPickerCanvas = defineComponent({
         y: clamp(y - top, 0, height)
       };
     }
-
     function handleClick(e) {
       if (props.disabled || !canvasRef.value) return;
       updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect());
     }
-
     function handleMouseDown(e) {
       // To prevent selection while moving cursor
       e.preventDefault();
@@ -82,29 +81,24 @@ export const VColorPickerCanvas = defineComponent({
       window.addEventListener('touchmove', handleMouseMove);
       window.addEventListener('touchend', handleMouseUp);
     }
-
     function handleMouseMove(e) {
       if (props.disabled || !canvasRef.value) return;
       isInteracting.value = true;
       const coords = getEventCoordinates(e);
       updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect());
     }
-
     function handleMouseUp() {
       window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('mouseup', handleMouseUp);
       window.removeEventListener('touchmove', handleMouseMove);
       window.removeEventListener('touchend', handleMouseUp);
     }
-
     watch(dotPosition, () => {
       var _props$color, _props$color2;
-
       if (isOutsideUpdate.value) {
         isOutsideUpdate.value = false;
         return;
       }
-
       if (!canvasRef.value) return;
       const {
         width,
@@ -121,32 +115,25 @@ export const VColorPickerCanvas = defineComponent({
         a: ((_props$color2 = props.color) == null ? void 0 : _props$color2.a) ?? 1
       });
     });
-
     function updateCanvas() {
       var _props$color3;
-
       if (!canvasRef.value) return;
       const canvas = canvasRef.value;
       const ctx = canvas.getContext('2d');
       if (!ctx) return;
       const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
       saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)'); // white
-
       saturationGradient.addColorStop(1, `hsla(${((_props$color3 = props.color) == null ? void 0 : _props$color3.h) ?? 0}, 100%, 50%, 1)`);
       ctx.fillStyle = saturationGradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
       valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)'); // transparent
-
       valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)'); // black
-
       ctx.fillStyle = valueGradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
-
     watch(() => {
       var _props$color4;
-
       return (_props$color4 = props.color) == null ? void 0 : _props$color4.h;
     }, updateCanvas, {
       immediate: true
@@ -156,7 +143,6 @@ export const VColorPickerCanvas = defineComponent({
         isInteracting.value = false;
         return;
       }
-
       if (!props.color) return;
       isOutsideUpdate.value = true;
       dotPosition.value = {
@@ -189,6 +175,5 @@ export const VColorPickerCanvas = defineComponent({
     }, null)]));
     return {};
   }
-
 });
 //# sourceMappingURL=VColorPickerCanvas.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerCanvas.mjs","names":["clamp","convertToUnit","defineComponent","getEventCoordinates","useRender","computed","onMounted","ref","watch","VColorPickerCanvas","name","props","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","emits","hue","setup","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","updateDotPosition","rect","left","top","handleClick","e","clientX","clientY","getBoundingClientRect","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","coords","removeEventListener","h","s","v","a","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","deep"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Utilities\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from '@/util'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Types\nimport type { HSVA } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | 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\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = ref(false)\n    const isOutsideUpdate = ref(false)\n    const dotPosition = ref({ x: 0, y: 0 })\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 canvasRef = ref<HTMLCanvasElement | null>()\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 handleClick (e: MouseEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (props.disabled) return\n\n      isInteracting.value = true\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    watch(dotPosition, () => {\n      if (isOutsideUpdate.value) {\n        isOutsideUpdate.value = false\n        return\n      }\n\n      if (!canvasRef.value) return\n\n      const { width, height } = canvasRef.value.getBoundingClientRect()\n      const { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, width) / width,\n        v: 1 - clamp(y, 0, height) / height,\n        a: props.color?.a ?? 1,\n      })\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%, 100%, 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\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      if (!props.color) return\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = {\n        x: props.color.s * parseInt(props.width, 10),\n        y: (1 - props.color.v) * parseInt(props.height, 10),\n      }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        class=\"v-color-picker-canvas\"\n        style={{\n          width: convertToUnit(props.width),\n          height: convertToUnit(props.height),\n        }}\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ props.width }\n          height={ props.height }\n        />\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      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"VColorPickerCanvas.mjs","names":["clamp","convertToUnit","defineComponent","getEventCoordinates","useRender","computed","onMounted","ref","watch","VColorPickerCanvas","name","props","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","emits","hue","setup","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","updateDotPosition","rect","left","top","handleClick","e","clientX","clientY","getBoundingClientRect","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","coords","removeEventListener","h","s","v","a","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","deep"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Utilities\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from '@/util'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Types\nimport type { HSVA } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | 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\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = ref(false)\n    const isOutsideUpdate = ref(false)\n    const dotPosition = ref({ x: 0, y: 0 })\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 canvasRef = ref<HTMLCanvasElement | null>()\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 handleClick (e: MouseEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (props.disabled) return\n\n      isInteracting.value = true\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    watch(dotPosition, () => {\n      if (isOutsideUpdate.value) {\n        isOutsideUpdate.value = false\n        return\n      }\n\n      if (!canvasRef.value) return\n\n      const { width, height } = canvasRef.value.getBoundingClientRect()\n      const { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, width) / width,\n        v: 1 - clamp(y, 0, height) / height,\n        a: props.color?.a ?? 1,\n      })\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%, 100%, 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\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      if (!props.color) return\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = {\n        x: props.color.s * parseInt(props.width, 10),\n        y: (1 - props.color.v) * parseInt(props.height, 10),\n      }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        class=\"v-color-picker-canvas\"\n        style={{\n          width: convertToUnit(props.width),\n          height: convertToUnit(props.height),\n        }}\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ props.width }\n          height={ props.height }\n        />\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      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPickerEdit.mjs

@@ -1,13 +1,12 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPickerEdit.css"; // Components
+import "./VColorPickerEdit.css";
 
+// Components
 import { VBtn } from "../VBtn/index.mjs"; // Utilities
-
 import { computed } from 'vue';
 import { defineComponent, useRender } from "../../util/index.mjs";
 import { modes } from "./util/index.mjs"; // Types
-
 const VColorPickerInput = _ref => {
   let {
     label,
@@ -17,7 +16,6 @@ const VColorPickerInput = _ref => {
     "class": "v-color-picker-edit__input"
   }, [_createVNode("input", rest, null), _createVNode("span", null, [label])]);
 };
-
 export const VColorPickerEdit = defineComponent({
   name: 'VColorPickerEdit',
   props: {
@@ -38,19 +36,18 @@ export const VColorPickerEdit = defineComponent({
     'update:color': color => true,
     'update:mode': mode => true
   },
-
   setup(props, _ref2) {
     let {
       emit
     } = _ref2;
     const enabledModes = computed(() => {
-      return props.modes.map(key => ({ ...modes[key],
+      return props.modes.map(key => ({
+        ...modes[key],
         name: key
       }));
     });
     const inputs = computed(() => {
       var _mode$inputs;
-
       const mode = enabledModes.value.find(m => m.name === props.mode);
       if (!mode) return [];
       const color = props.color ? mode.to(props.color) : {};
@@ -60,7 +57,8 @@ export const VColorPickerEdit = defineComponent({
           getColor,
           ...inputProps
         } = _ref3;
-        return { ...mode.inputProps,
+        return {
+          ...mode.inputProps,
           ...inputProps,
           disabled: props.disabled,
           value: getValue(color),
@@ -74,7 +72,6 @@ export const VColorPickerEdit = defineComponent({
     });
     useRender(() => {
       var _inputs$value;
-
       return _createVNode("div", {
         "class": "v-color-picker-edit"
       }, [(_inputs$value = inputs.value) == null ? void 0 : _inputs$value.map(props => _createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && _createVNode(VBtn, {
@@ -89,6 +86,5 @@ export const VColorPickerEdit = defineComponent({
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VColorPickerEdit.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerEdit.mjs","names":["VBtn","computed","defineComponent","useRender","modes","VColorPickerInput","label","rest","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","emits","setup","emit","enabledModes","map","key","inputs","value","find","to","getValue","getColor","inputProps","onChange","e","target","from","length","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\nimport { modes } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } 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 VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: {\n    color: Object as PropType<HSVA | null>,\n    disabled: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    modes: {\n      type: Array as PropType<string[]>,\n      default: () => Object.keys(modes),\n      validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n    },\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:mode': (mode: string) => 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) : {}\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: 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, target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class=\"v-color-picker-edit\"\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"],"mappings":"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"}
+{"version":3,"file":"VColorPickerEdit.mjs","names":["VBtn","computed","defineComponent","useRender","modes","VColorPickerInput","label","rest","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","emits","setup","emit","enabledModes","map","key","inputs","value","find","to","getValue","getColor","inputProps","onChange","e","target","from","length","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\nimport { modes } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } 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 VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: {\n    color: Object as PropType<HSVA | null>,\n    disabled: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    modes: {\n      type: Array as PropType<string[]>,\n      default: () => Object.keys(modes),\n      validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n    },\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:mode': (mode: string) => 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) : {}\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: 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, target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class=\"v-color-picker-edit\"\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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"}

package/lib/components/VColorPicker/VColorPickerPreview.mjs

@@ -1,12 +1,11 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPickerPreview.css"; // Components
+import "./VColorPickerPreview.css";
 
+// Components
 import { VSlider } from "../VSlider/index.mjs"; // Utilities
-
 import { defineComponent, HSVAtoCSS, useRender } from "../../util/index.mjs";
 import { nullColor } from "./util/index.mjs"; // Types
-
 export const VColorPickerPreview = defineComponent({
   name: 'VColorPickerPreview',
   props: {
@@ -19,14 +18,12 @@ export const VColorPickerPreview = defineComponent({
   emits: {
     'update:color': color => true
   },
-
   setup(props, _ref) {
     let {
       emit
     } = _ref;
     useRender(() => {
       var _props$color, _props$color2;
-
       return _createVNode("div", {
         "class": ['v-color-picker-preview', {
           'v-color-picker-preview--hide-alpha': props.hideAlpha
@@ -42,7 +39,8 @@ export const VColorPickerPreview = defineComponent({
       }, [_createVNode(VSlider, {
         "class": "v-color-picker-preview__track v-color-picker-preview__hue",
         "modelValue": (_props$color = props.color) == null ? void 0 : _props$color.h,
-        "onUpdate:modelValue": h => emit('update:color', { ...(props.color ?? nullColor),
+        "onUpdate:modelValue": h => emit('update:color', {
+          ...(props.color ?? nullColor),
           h
         }),
         "step": 0,
@@ -56,7 +54,8 @@ export const VColorPickerPreview = defineComponent({
       }, null), !props.hideAlpha && _createVNode(VSlider, {
         "class": "v-color-picker-preview__track v-color-picker-preview__alpha",
         "modelValue": (_props$color2 = props.color) == null ? void 0 : _props$color2.a,
-        "onUpdate:modelValue": a => emit('update:color', { ...(props.color ?? nullColor),
+        "onUpdate:modelValue": a => emit('update:color', {
+          ...(props.color ?? nullColor),
           a
         }),
         "step": 0,
@@ -71,6 +70,5 @@ export const VColorPickerPreview = defineComponent({
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VColorPickerPreview.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerPreview.mjs","names":["VSlider","defineComponent","HSVAtoCSS","useRender","nullColor","VColorPickerPreview","name","props","color","type","Object","disabled","Boolean","hideAlpha","emits","setup","emit","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VSlider } from '@/components/VSlider'\n\n// Utilities\nimport { defineComponent, HSVAtoCSS, useRender } from '@/util'\nimport { nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | null>,\n    },\n    disabled: Boolean,\n    hideAlpha: Boolean,\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n        ]}\n      >\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVAtoCSS(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 }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 0 }\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"],"mappings":";AAAA;AACA,mC,CAEA;;SACSA,O,gCAET;;SACSC,e,EAAiBC,S,EAAWC,S;SAC5BC,S,4BAET;;AAIA,OAAO,MAAMC,mBAAmB,GAAGJ,eAAe,CAAC;EACjDK,IAAI,EAAE,qBAD2C;EAGjDC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC;IADD,CADF;IAILC,QAAQ,EAAEC,OAJL;IAKLC,SAAS,EAAED;EALN,CAH0C;EAWjDE,KAAK,EAAE;IACL,gBAAiBN,KAAD,IAAiB;EAD5B,CAX0C;;EAejDO,KAAK,CAAER,KAAF,QAAmB;IAAA,IAAV;MAAES;IAAF,CAAU;IACtBb,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,wBADK,EAEL;UACE,sCAAsCI,KAAK,CAACM;QAD9C,CAFK;MAFD;QAAA,SASK;MATL;QAAA,SAUQ;UAAEI,UAAU,EAAEf,SAAS,CAACK,KAAK,CAACC,KAAN,IAAeJ,SAAhB;QAAvB;MAVR;QAAA,SAaK;MAbL;QAAA,SAeI,2DAfJ;QAAA,8BAgBWG,KAAK,CAACC,KAhBjB,qBAgBW,aAAaU,CAhBxB;QAAA,uBAiBoBA,CAAC,IAAIF,IAAI,CAAC,cAAD,EAAiB,EAAE,IAAIT,KAAK,CAACC,KAAN,IAAeJ,SAAnB,CAAF;UAAiCc;QAAjC,CAAjB,CAjB7B;QAAA,QAkBK,CAlBL;QAAA,OAmBI,CAnBJ;QAAA,OAoBI,GApBJ;QAAA,YAqBSX,KAAK,CAACI,QArBf;QAAA,aAsBU,EAtBV;QAAA,aAuBU,CAvBV;QAAA,kBAwBa,OAxBb;QAAA;MAAA,UA4BF,CAACJ,KAAK,CAACM,SAAP;QAAA,SAEQ,6DAFR;QAAA,+BAGeN,KAAK,CAACC,KAHrB,qBAGe,cAAaW,CAH5B;QAAA,uBAIwBA,CAAC,IAAIH,IAAI,CAAC,cAAD,EAAiB,EAAE,IAAIT,KAAK,CAACC,KAAN,IAAeJ,SAAnB,CAAF;UAAiCe;QAAjC,CAAjB,CAJjC;QAAA,QAKS,CALT;QAAA,OAMQ,CANR;QAAA,OAOQ,CAPR;QAAA,YAQaZ,KAAK,CAACI,QARnB;QAAA,aASc,EATd;QAAA,aAUc,CAVd;QAAA,kBAWiB,OAXjB;QAAA;MAAA,QA5BE;IAAA,CAAD,CAAT;IA+CA,OAAO,EAAP;EACD;;AAhEgD,CAAD,CAA3C"}
+{"version":3,"file":"VColorPickerPreview.mjs","names":["VSlider","defineComponent","HSVAtoCSS","useRender","nullColor","VColorPickerPreview","name","props","color","type","Object","disabled","Boolean","hideAlpha","emits","setup","emit","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VSlider } from '@/components/VSlider'\n\n// Utilities\nimport { defineComponent, HSVAtoCSS, useRender } from '@/util'\nimport { nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | null>,\n    },\n    disabled: Boolean,\n    hideAlpha: Boolean,\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n        ]}\n      >\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVAtoCSS(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 }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 0 }\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,OAAO,gCAEhB;AAAA,SACSC,eAAe,EAAEC,SAAS,EAAEC,SAAS;AAAA,SACrCC,SAAS,4BAElB;AAIA,OAAO,MAAMC,mBAAmB,GAAGJ,eAAe,CAAC;EACjDK,IAAI,EAAE,qBAAqB;EAE3BC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC;IACR,CAAC;IACDC,QAAQ,EAAEC,OAAO;IACjBC,SAAS,EAAED;EACb,CAAC;EAEDE,KAAK,EAAE;IACL,cAAc,EAAGN,KAAW,IAAK;EACnC,CAAC;EAEDO,KAAK,CAAER,KAAK,QAAY;IAAA,IAAV;MAAES;IAAK,CAAC;IACpBb,SAAS,CAAC;MAAA;MAAA;QAAA,SAEC,CACL,wBAAwB,EACxB;UACE,oCAAoC,EAAEI,KAAK,CAACM;QAC9C,CAAC;MACF;QAAA,SAEU;MAA6B;QAAA,SAC1B;UAAEI,UAAU,EAAEf,SAAS,CAACK,KAAK,CAACC,KAAK,IAAIJ,SAAS;QAAE;MAAC;QAAA,SAGtD;MAAiC;QAAA,SAElC,2DAA2D;QAAA,8BACpDG,KAAK,CAACC,KAAK,qBAAX,aAAaU,CAAC;QAAA,uBACLA,CAAC,IAAIF,IAAI,CAAC,cAAc,EAAE;UAAE,IAAIT,KAAK,CAACC,KAAK,IAAIJ,SAAS,CAAC;UAAEc;QAAE,CAAC,CAAC;QAAA,QAC9E,CAAC;QAAA,OACF,CAAC;QAAA,OACD,GAAG;QAAA,YACEX,KAAK,CAACI,QAAQ;QAAA,aACb,EAAE;QAAA,aACF,CAAC;QAAA,kBACE,OAAO;QAAA;MAAA,UAItB,CAACJ,KAAK,CAACM,SAAS;QAAA,SAER,6DAA6D;QAAA,+BACtDN,KAAK,CAACC,KAAK,qBAAX,cAAaW,CAAC;QAAA,uBACLA,CAAC,IAAIH,IAAI,CAAC,cAAc,EAAE;UAAE,IAAIT,KAAK,CAACC,KAAK,IAAIJ,SAAS,CAAC;UAAEe;QAAE,CAAC,CAAC;QAAA,QAC9E,CAAC;QAAA,OACF,CAAC;QAAA,OACD,CAAC;QAAA,YACIZ,KAAK,CAACI,QAAQ;QAAA,aACb,EAAE;QAAA,aACF,CAAC;QAAA,kBACE,OAAO;QAAA;MAAA,QAGzB;IAAA,CAGN,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VColorPicker/VColorPickerSwatches.mjs

@@ -1,20 +1,18 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPickerSwatches.css"; // Components
+import "./VColorPickerSwatches.css";
 
+// Components
 import { VIcon } from "../VIcon/index.mjs"; // Utilities
-
 import { convertToUnit, deepEqual, defineComponent, getContrast, useRender } from "../../util/index.mjs";
 import { parseColor } from "./util/index.mjs";
 import colors from "../../util/colors.mjs"; // Types
-
 function parseDefaultColors(colors) {
   return Object.keys(colors).map(key => {
     const color = colors[key];
     return color.base ? [color.base, color.darken4, color.darken3, color.darken2, color.darken1, color.lighten1, color.lighten2, color.lighten3, color.lighten4, color.lighten5] : [color.black, color.white, color.transparent];
   });
 }
-
 export const VColorPickerSwatches = defineComponent({
   name: 'VColorPickerSwatches',
   props: {
@@ -29,7 +27,6 @@ export const VColorPickerSwatches = defineComponent({
   emits: {
     'update:color': color => true
   },
-
   setup(props, _ref) {
     let {
       emit
@@ -58,6 +55,5 @@ export const VColorPickerSwatches = defineComponent({
     })]))])]));
     return {};
   }
-
 });
 //# sourceMappingURL=VColorPickerSwatches.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerSwatches.mjs","names":["VIcon","convertToUnit","deepEqual","defineComponent","getContrast","useRender","parseColor","colors","parseDefaultColors","Object","keys","map","key","color","base","darken4","darken3","darken2","darken1","lighten1","lighten2","lighten3","lighten4","lighten5","black","white","transparent","VColorPickerSwatches","name","props","swatches","type","Array","default","disabled","Boolean","maxHeight","Number","String","emits","setup","emit","swatch","hsva","background","undefined"],"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Utilities\nimport { convertToUnit, deepEqual, defineComponent, getContrast, useRender } from '@/util'\nimport { parseColor } from './util'\nimport colors from '@/util/colors'\n\n// Types\nimport type { HSVA } from '@/util'\nimport type { PropType } from 'vue'\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: {\n    swatches: {\n      type: Array as PropType<string[][]>,\n      default: () => parseDefaultColors(colors),\n    },\n    disabled: Boolean,\n    color: Object as PropType<HSVA | null>,\n    maxHeight: [Number, String],\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class=\"v-color-picker-swatches\"\n        style={{\n          maxHeight: convertToUnit(props.maxHeight),\n        }}\n      >\n        <div>\n          { props.swatches.map(swatch => (\n            <div class=\"v-color-picker-swatches__swatch\">\n              { swatch.map(color => {\n                const hsva = parseColor(color)\n\n                return (\n                  <div\n                    class=\"v-color-picker-swatches__color\"\n                    onClick={() => hsva && emit('update:color', hsva)}\n                  >\n                    <div style={{ background: color }}>\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"],"mappings":";AAAA;AACA,oC,CAEA;;SACSA,K,8BAET;;SACSC,a,EAAeC,S,EAAWC,e,EAAiBC,W,EAAaC,S;SACxDC,U;OACFC,M,+BAEP;;AAIA,SAASC,kBAAT,CAA6BD,MAA7B,EAA6E;EAC3E,OAAOE,MAAM,CAACC,IAAP,CAAYH,MAAZ,EAAoBI,GAApB,CAAwBC,GAAG,IAAI;IACpC,MAAMC,KAAK,GAAGN,MAAM,CAACK,GAAD,CAApB;IACA,OAAOC,KAAK,CAACC,IAAN,GAAa,CAClBD,KAAK,CAACC,IADY,EAElBD,KAAK,CAACE,OAFY,EAGlBF,KAAK,CAACG,OAHY,EAIlBH,KAAK,CAACI,OAJY,EAKlBJ,KAAK,CAACK,OALY,EAMlBL,KAAK,CAACM,QANY,EAOlBN,KAAK,CAACO,QAPY,EAQlBP,KAAK,CAACQ,QARY,EASlBR,KAAK,CAACS,QATY,EAUlBT,KAAK,CAACU,QAVY,CAAb,GAWH,CACFV,KAAK,CAACW,KADJ,EAEFX,KAAK,CAACY,KAFJ,EAGFZ,KAAK,CAACa,WAHJ,CAXJ;EAgBD,CAlBM,CAAP;AAmBD;;AAED,OAAO,MAAMC,oBAAoB,GAAGxB,eAAe,CAAC;EAClDyB,IAAI,EAAE,sBAD4C;EAGlDC,KAAK,EAAE;IACLC,QAAQ,EAAE;MACRC,IAAI,EAAEC,KADE;MAERC,OAAO,EAAE,MAAMzB,kBAAkB,CAACD,MAAD;IAFzB,CADL;IAKL2B,QAAQ,EAAEC,OALL;IAMLtB,KAAK,EAAEJ,MANF;IAOL2B,SAAS,EAAE,CAACC,MAAD,EAASC,MAAT;EAPN,CAH2C;EAalDC,KAAK,EAAE;IACL,gBAAiB1B,KAAD,IAAiB;EAD5B,CAb2C;;EAiBlD2B,KAAK,CAAEX,KAAF,QAAmB;IAAA,IAAV;MAAEY;IAAF,CAAU;IACtBpC,SAAS,CAAC;MAAA,SAEA,yBAFA;MAAA,SAGC;QACL+B,SAAS,EAAEnC,aAAa,CAAC4B,KAAK,CAACO,SAAP;MADnB;IAHD,+BAQFP,KAAK,CAACC,QAAN,CAAenB,GAAf,CAAmB+B,MAAM;MAAA,SACd;IADc,IAErBA,MAAM,CAAC/B,GAAP,CAAWE,KAAK,IAAI;MACpB,MAAM8B,IAAI,GAAGrC,UAAU,CAACO,KAAD,CAAvB;MAEA;QAAA,SAEU,gCAFV;QAAA,WAGa,MAAM8B,IAAI,IAAIF,IAAI,CAAC,cAAD,EAAiBE,IAAjB;MAH/B;QAAA,SAKgB;UAAEC,UAAU,EAAE/B;QAAd;MALhB,IAMQgB,KAAK,CAAChB,KAAN,IAAeX,SAAS,CAAC2B,KAAK,CAAChB,KAAP,EAAc8B,IAAd,CAAxB;QAAA,QACc,SADd;QAAA,QAC6B,UAD7B;QAAA,SAC+CvC,WAAW,CAACS,KAAD,EAAQ,SAAR,CAAX,GAAgC,CAAhC,GAAoC,OAApC,GAA8C;MAD7F,WAEEgC,SARV;IAaD,CAhBC,CAFqB,EAAzB,CARE,IAAD,CAAT;IAiCA,OAAO,EAAP;EACD;;AApDiD,CAAD,CAA5C"}
+{"version":3,"file":"VColorPickerSwatches.mjs","names":["VIcon","convertToUnit","deepEqual","defineComponent","getContrast","useRender","parseColor","colors","parseDefaultColors","Object","keys","map","key","color","base","darken4","darken3","darken2","darken1","lighten1","lighten2","lighten3","lighten4","lighten5","black","white","transparent","VColorPickerSwatches","name","props","swatches","type","Array","default","disabled","Boolean","maxHeight","Number","String","emits","setup","emit","swatch","hsva","background","undefined"],"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Utilities\nimport { convertToUnit, deepEqual, defineComponent, getContrast, useRender } from '@/util'\nimport { parseColor } from './util'\nimport colors from '@/util/colors'\n\n// Types\nimport type { HSVA } from '@/util'\nimport type { PropType } from 'vue'\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: {\n    swatches: {\n      type: Array as PropType<string[][]>,\n      default: () => parseDefaultColors(colors),\n    },\n    disabled: Boolean,\n    color: Object as PropType<HSVA | null>,\n    maxHeight: [Number, String],\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class=\"v-color-picker-swatches\"\n        style={{\n          maxHeight: convertToUnit(props.maxHeight),\n        }}\n      >\n        <div>\n          { props.swatches.map(swatch => (\n            <div class=\"v-color-picker-swatches__swatch\">\n              { swatch.map(color => {\n                const hsva = parseColor(color)\n\n                return (\n                  <div\n                    class=\"v-color-picker-swatches__color\"\n                    onClick={() => hsva && emit('update:color', hsva)}\n                  >\n                    <div style={{ background: color }}>\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,8BAEd;AAAA,SACSC,aAAa,EAAEC,SAAS,EAAEC,eAAe,EAAEC,WAAW,EAAEC,SAAS;AAAA,SACjEC,UAAU;AAAA,OACZC,MAAM,+BAEb;AAIA,SAASC,kBAAkB,CAAED,MAA8C,EAAE;EAC3E,OAAOE,MAAM,CAACC,IAAI,CAACH,MAAM,CAAC,CAACI,GAAG,CAACC,GAAG,IAAI;IACpC,MAAMC,KAAK,GAAGN,MAAM,CAACK,GAAG,CAAC;IACzB,OAAOC,KAAK,CAACC,IAAI,GAAG,CAClBD,KAAK,CAACC,IAAI,EACVD,KAAK,CAACE,OAAO,EACbF,KAAK,CAACG,OAAO,EACbH,KAAK,CAACI,OAAO,EACbJ,KAAK,CAACK,OAAO,EACbL,KAAK,CAACM,QAAQ,EACdN,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACQ,QAAQ,EACdR,KAAK,CAACS,QAAQ,EACdT,KAAK,CAACU,QAAQ,CACf,GAAG,CACFV,KAAK,CAACW,KAAK,EACXX,KAAK,CAACY,KAAK,EACXZ,KAAK,CAACa,WAAW,CAClB;EACH,CAAC,CAAC;AACJ;AAEA,OAAO,MAAMC,oBAAoB,GAAGxB,eAAe,CAAC;EAClDyB,IAAI,EAAE,sBAAsB;EAE5BC,KAAK,EAAE;IACLC,QAAQ,EAAE;MACRC,IAAI,EAAEC,KAA6B;MACnCC,OAAO,EAAE,MAAMzB,kBAAkB,CAACD,MAAM;IAC1C,CAAC;IACD2B,QAAQ,EAAEC,OAAO;IACjBtB,KAAK,EAAEJ,MAA+B;IACtC2B,SAAS,EAAE,CAACC,MAAM,EAAEC,MAAM;EAC5B,CAAC;EAEDC,KAAK,EAAE;IACL,cAAc,EAAG1B,KAAW,IAAK;EACnC,CAAC;EAED2B,KAAK,CAAEX,KAAK,QAAY;IAAA,IAAV;MAAEY;IAAK,CAAC;IACpBpC,SAAS,CAAC;MAAA,SAEA,yBAAyB;MAAA,SACxB;QACL+B,SAAS,EAAEnC,aAAa,CAAC4B,KAAK,CAACO,SAAS;MAC1C;IAAC,+BAGGP,KAAK,CAACC,QAAQ,CAACnB,GAAG,CAAC+B,MAAM;MAAA,SACd;IAAiC,IACxCA,MAAM,CAAC/B,GAAG,CAACE,KAAK,IAAI;MACpB,MAAM8B,IAAI,GAAGrC,UAAU,CAACO,KAAK,CAAC;MAE9B;QAAA,SAEU,gCAAgC;QAAA,WAC7B,MAAM8B,IAAI,IAAIF,IAAI,CAAC,cAAc,EAAEE,IAAI;MAAC;QAAA,SAErC;UAAEC,UAAU,EAAE/B;QAAM;MAAC,IAC7BgB,KAAK,CAAChB,KAAK,IAAIX,SAAS,CAAC2B,KAAK,CAAChB,KAAK,EAAE8B,IAAI,CAAC;QAAA,QAC7B,SAAS;QAAA,QAAM,UAAU;QAAA,SAAQvC,WAAW,CAACS,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG;MAAO,WAClGgC,SAAS;IAKrB,CAAC,CAAC,EAEL,CAAC,IAGP,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VColorPicker/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["VColorPicker"],"sources":["../../../src/components/VColorPicker/index.ts"],"sourcesContent":["export { VColorPicker } from './VColorPicker'\n"],"mappings":"SAASA,Y"}
+{"version":3,"file":"index.mjs","names":["VColorPicker"],"sources":["../../../src/components/VColorPicker/index.ts"],"sourcesContent":["export { VColorPicker } from './VColorPicker'\n"],"mappings":"SAASA,YAAY"}

package/lib/components/VColorPicker/util/index.mjs

@@ -1,21 +1,16 @@
 var _rgba$inputs;
-
 // Utilities
 import { HexToHSVA, HSLAtoHSVA, HSVAtoHex, HSVAtoHSLA, HSVAtoRGBA, parseHex, RGBAtoHSVA } from "../../../util/colorUtils.mjs"; // Types
-
 function has(obj, key) {
   return key.every(k => obj.hasOwnProperty(k));
 }
-
 export function parseColor(color) {
   if (!color) return null;
   let hsva = null;
-
   if (typeof color === 'string') {
     const hex = parseHex(color);
     hsva = HexToHSVA(hex);
   }
-
   if (typeof color === 'object') {
     if (has(color, ['r', 'g', 'b'])) {
       hsva = RGBAtoHSVA(color);
@@ -25,12 +20,11 @@ export function parseColor(color) {
       hsva = color;
     }
   }
-
-  return hsva != null ? { ...hsva,
+  return hsva != null ? {
+    ...hsva,
     a: hsva.a ?? 1
   } : null;
 }
-
 function stripAlpha(color, stripAlpha) {
   if (stripAlpha) {
     const {
@@ -39,35 +33,28 @@ function stripAlpha(color, stripAlpha) {
     } = color;
     return rest;
   }
-
   return color;
 }
-
 export function extractColor(color, input) {
   if (input == null || typeof input === 'string') {
     const hex = HSVAtoHex(color);
     if (color.a === 1) return hex.slice(0, 7);else return hex;
   }
-
   if (typeof input === 'object') {
     let converted;
     if (has(input, ['r', 'g', 'b'])) converted = HSVAtoRGBA(color);else if (has(input, ['h', 's', 'l'])) converted = HSVAtoHSLA(color);else if (has(input, ['h', 's', 'v'])) converted = color;
     return stripAlpha(converted, !has(input, ['a']));
   }
-
   return color;
 }
 export function hasAlpha(color) {
   if (!color) return false;
-
   if (typeof color === 'string') {
     return color.length > 7;
   }
-
   if (typeof color === 'object') {
     return has(color, ['a']) || has(color, ['alpha']);
   }
-
   return false;
 }
 export const nullColor = {
@@ -86,7 +73,8 @@ const rgba = {
     max: 255,
     step: 1,
     getValue: c => Math.round(c.r),
-    getColor: (c, v) => ({ ...c,
+    getColor: (c, v) => ({
+      ...c,
       r: Number(v)
     })
   }, {
@@ -94,7 +82,8 @@ const rgba = {
     max: 255,
     step: 1,
     getValue: c => Math.round(c.g),
-    getColor: (c, v) => ({ ...c,
+    getColor: (c, v) => ({
+      ...c,
       g: Number(v)
     })
   }, {
@@ -102,7 +91,8 @@ const rgba = {
     max: 255,
     step: 1,
     getValue: c => Math.round(c.b),
-    getColor: (c, v) => ({ ...c,
+    getColor: (c, v) => ({
+      ...c,
       b: Number(v)
     })
   }, {
@@ -110,14 +100,16 @@ const rgba = {
     max: 1,
     step: 0.01,
     getValue: c => Math.round(c.a * 100) / 100,
-    getColor: (c, v) => ({ ...c,
+    getColor: (c, v) => ({
+      ...c,
       a: Number(v)
     })
   }],
   to: HSVAtoRGBA,
   from: RGBAtoHSVA
 };
-const rgb = { ...rgba,
+const rgb = {
+  ...rgba,
   inputs: (_rgba$inputs = rgba.inputs) == null ? void 0 : _rgba$inputs.slice(0, 3)
 };
 const hsla = {
@@ -130,7 +122,8 @@ const hsla = {
     max: 360,
     step: 1,
     getValue: c => Math.round(c.h),
-    getColor: (c, v) => ({ ...c,
+    getColor: (c, v) => ({
+      ...c,
       h: Number(v)
     })
   }, {
@@ -138,7 +131,8 @@ const hsla = {
     max: 1,
     step: 0.01,
     getValue: c => Math.round(c.s * 100) / 100,
-    getColor: (c, v) => ({ ...c,
+    getColor: (c, v) => ({
+      ...c,
       s: Number(v)
     })
   }, {
@@ -146,7 +140,8 @@ const hsla = {
     max: 1,
     step: 0.01,
     getValue: c => Math.round(c.l * 100) / 100,
-    getColor: (c, v) => ({ ...c,
+    getColor: (c, v) => ({
+      ...c,
       l: Number(v)
     })
   }, {
@@ -154,14 +149,16 @@ const hsla = {
     max: 1,
     step: 0.01,
     getValue: c => Math.round(c.a * 100) / 100,
-    getColor: (c, v) => ({ ...c,
+    getColor: (c, v) => ({
+      ...c,
       a: Number(v)
     })
   }],
   to: HSVAtoHSLA,
   from: HSLAtoHSVA
 };
-const hsl = { ...hsla,
+const hsl = {
+  ...hsla,
   inputs: hsla.inputs.slice(0, 3)
 };
 const hexa = {
@@ -176,7 +173,8 @@ const hexa = {
   to: HSVAtoHex,
   from: HexToHSVA
 };
-const hex = { ...hexa,
+const hex = {
+  ...hexa,
   inputs: [{
     label: 'HEX',
     getValue: c => c.slice(0, 7),