@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VColorPicker/VColorPickerCanvas.mjs

@@ -1,24 +1,15 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPickerCanvas.sass"; // Helpers
+import "./VColorPickerCanvas.css"; // Utilities
 
-import { clamp, convertToUnit } from "../../util/helpers.mjs";
-import { fromHSVA, fromRGBA } from "./util/index.mjs"; // Types
+import { computed, onMounted, ref, watch } from 'vue';
+import { clamp, convertToUnit, defineComponent, getEventCoordinates } from "../../util/index.mjs"; // Types
 
-import Vue from 'vue';
-export default Vue.extend({
-  name: 'v-color-picker-canvas',
+export const VColorPickerCanvas = defineComponent({
+  name: 'VColorPickerCanvas',
   props: {
     color: {
-      type: Object,
-      default: () => fromRGBA({
-        r: 255,
-        g: 0,
-        b: 0,
-        a: 1
-      })
+      type: Object
     },
     disabled: Boolean,
     dotSize: {
@@ -34,64 +25,114 @@ export default Vue.extend({
       default: 300
     }
   },
-
-  data() {
-    return {
-      boundingRect: {
-        width: 0,
-        height: 0,
-        left: 0,
-        top: 0
-      }
-    };
+  emits: {
+    'update:color': color => true,
+    'update:position': hue => true
   },
 
-  computed: {
-    dot() {
-      if (!this.color) return {
-        x: 0,
-        y: 0
-      };
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const isInteracting = ref(false);
+    const isOutsideUpdate = ref(false);
+    const dotPosition = ref({
+      x: 0,
+      y: 0
+    });
+    const dotStyles = computed(() => {
+      const {
+        x,
+        y
+      } = dotPosition.value;
+      const radius = parseInt(props.dotSize, 10) / 2;
       return {
-        x: this.color.hsva.s * parseInt(this.width, 10),
-        y: (1 - this.color.hsva.v) * parseInt(this.height, 10)
+        width: convertToUnit(props.dotSize),
+        height: convertToUnit(props.dotSize),
+        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`
+      };
+    });
+    const canvasRef = ref();
+
+    function updateDotPosition(x, y, rect) {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = rect;
+      dotPosition.value = {
+        x: clamp(x - left, 0, width),
+        y: clamp(y - top, 0, height)
       };
     }
 
-  },
-  watch: {
-    'color.hue': 'updateCanvas'
-  },
+    function handleClick(e) {
+      if (props.disabled || !canvasRef.value) return;
+      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect());
+    }
 
-  mounted() {
-    this.updateCanvas();
-  },
+    function handleMouseDown(e) {
+      // To prevent selection while moving cursor
+      e.preventDefault();
+      if (props.disabled) return;
+      isInteracting.value = true;
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      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$h, _props$color, _props$color$a, _props$color2;
+
+      if (isOutsideUpdate.value) {
+        isOutsideUpdate.value = false;
+        return;
+      }
 
-  methods: {
-    emitColor(x, y) {
+      if (!canvasRef.value) return;
       const {
-        left,
-        top,
         width,
         height
-      } = this.boundingRect;
-      this.$emit('update:color', fromHSVA({
-        h: this.color.hue,
-        s: clamp(x - left, 0, width) / width,
-        v: 1 - clamp(y - top, 0, height) / height,
-        a: this.color.alpha
-      }));
-    },
+      } = canvasRef.value.getBoundingClientRect();
+      const {
+        x,
+        y
+      } = dotPosition.value;
+      emit('update:color', {
+        h: (_props$color$h = (_props$color = props.color) == null ? void 0 : _props$color.h) != null ? _props$color$h : 0,
+        s: clamp(x, 0, width) / width,
+        v: 1 - clamp(y, 0, height) / height,
+        a: (_props$color$a = (_props$color2 = props.color) == null ? void 0 : _props$color2.a) != null ? _props$color$a : 1
+      });
+    });
+
+    function updateCanvas() {
+      var _props$color$h2, _props$color3;
 
-    updateCanvas() {
-      if (!this.color) return;
-      const canvas = this.$refs.canvas;
+      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(${this.color.hue}, 100%, 50%, 1)`);
+      saturationGradient.addColorStop(1, `hsla(${(_props$color$h2 = (_props$color3 = props.color) == null ? void 0 : _props$color3.h) != null ? _props$color$h2 : 0}, 100%, 50%, 1)`);
       ctx.fillStyle = saturationGradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
@@ -101,74 +142,51 @@ export default Vue.extend({
 
       ctx.fillStyle = valueGradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
-    },
-
-    handleClick(e) {
-      if (this.disabled) return;
-      this.boundingRect = this.$el.getBoundingClientRect();
-      this.emitColor(e.clientX, e.clientY);
-    },
-
-    handleMouseDown(e) {
-      // To prevent selection while moving cursor
-      e.preventDefault();
-      if (this.disabled) return;
-      this.boundingRect = this.$el.getBoundingClientRect();
-      window.addEventListener('mousemove', this.handleMouseMove);
-      window.addEventListener('mouseup', this.handleMouseUp);
-    },
-
-    handleMouseMove(e) {
-      if (this.disabled) return;
-      this.emitColor(e.clientX, e.clientY);
-    },
-
-    handleMouseUp() {
-      window.removeEventListener('mousemove', this.handleMouseMove);
-      window.removeEventListener('mouseup', this.handleMouseUp);
-    },
-
-    genCanvas() {
-      return this.$createElement('canvas', {
-        ref: 'canvas',
-        attrs: {
-          width: this.width,
-          height: this.height
-        }
-      });
-    },
-
-    genDot() {
-      const radius = parseInt(this.dotSize, 10) / 2;
-      const x = convertToUnit(this.dot.x - radius);
-      const y = convertToUnit(this.dot.y - radius);
-      return this.$createElement('div', {
-        staticClass: 'v-color-picker__canvas-dot',
-        class: {
-          'v-color-picker__canvas-dot--disabled': this.disabled
-        },
-        style: {
-          width: convertToUnit(this.dotSize),
-          height: convertToUnit(this.dotSize),
-          transform: `translate(${x}, ${y})`
-        }
-      });
     }
 
-  },
+    watch(() => {
+      var _props$color4;
+
+      return (_props$color4 = props.color) == null ? void 0 : _props$color4.h;
+    }, updateCanvas, {
+      immediate: true
+    });
+    watch(() => props.color, () => {
+      if (isInteracting.value) {
+        isInteracting.value = false;
+        return;
+      }
 
-  render(h) {
-    return h('div', {
-      staticClass: 'v-color-picker__canvas',
-      style: {
-        width: convertToUnit(this.width),
-        height: convertToUnit(this.height)
+      if (!props.color) return;
+      isOutsideUpdate.value = true;
+      dotPosition.value = {
+        x: props.color.s * parseInt(props.width, 10),
+        y: (1 - props.color.v) * parseInt(props.height, 10)
+      };
+    }, {
+      deep: true,
+      immediate: true
+    });
+    onMounted(() => updateCanvas());
+    return () => _createVNode("div", {
+      "class": "v-color-picker-canvas",
+      "style": {
+        width: convertToUnit(props.width),
+        height: convertToUnit(props.height)
       },
-      on: {
-        click: this.handleClick,
-        mousedown: this.handleMouseDown
-      }
-    }, [this.genCanvas(), this.genDot()]);
+      "onClick": handleClick,
+      "onMousedown": handleMouseDown,
+      "onTouchstart": handleMouseDown
+    }, [_createVNode("canvas", {
+      "ref": canvasRef,
+      "width": props.width,
+      "height": props.height
+    }, null), _createVNode("div", {
+      "class": ['v-color-picker-canvas__dot', {
+        'v-color-picker-canvas__dot--disabled': props.disabled
+      }],
+      "style": dotStyles.value
+    }, null)]);
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.ts"],"names":["clamp","convertToUnit","fromHSVA","fromRGBA","Vue","extend","name","props","color","type","Object","default","r","g","b","a","disabled","Boolean","dotSize","Number","String","height","width","data","boundingRect","left","top","computed","dot","x","y","hsva","s","parseInt","v","watch","mounted","updateCanvas","methods","emitColor","$emit","h","hue","alpha","canvas","$refs","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","handleClick","e","$el","getBoundingClientRect","clientX","clientY","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","removeEventListener","genCanvas","$createElement","ref","attrs","genDot","radius","staticClass","class","style","transform","render","on","click","mousedown"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VColorPickerCanvas.sass'\n\n// Helpers\nimport { clamp, convertToUnit } from '../../util/helpers'\nimport { fromHSVA, VColorPickerColor, fromRGBA } from './util'\n\n// Types\nimport Vue, { VNode, PropType } from 'vue'\n\nexport default Vue.extend({\n  name: 'v-color-picker-canvas',\n\n  props: {\n    color: {\n      type: Object as PropType<VColorPickerColor>,\n      default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\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  data () {\n    return {\n      boundingRect: {\n        width: 0,\n        height: 0,\n        left: 0,\n        top: 0,\n      } as ClientRect,\n    }\n  },\n\n  computed: {\n    dot (): { x: number, y: number} {\n      if (!this.color) return { x: 0, y: 0 }\n\n      return {\n        x: this.color.hsva.s * parseInt(this.width, 10),\n        y: (1 - this.color.hsva.v) * parseInt(this.height, 10),\n      }\n    },\n  },\n\n  watch: {\n    'color.hue': 'updateCanvas',\n  },\n\n  mounted () {\n    this.updateCanvas()\n  },\n\n  methods: {\n    emitColor (x: number, y: number) {\n      const { left, top, width, height } = this.boundingRect\n\n      this.$emit('update:color', fromHSVA({\n        h: this.color.hue,\n        s: clamp(x - left, 0, width) / width,\n        v: 1 - clamp(y - top, 0, height) / height,\n        a: this.color.alpha,\n      }))\n    },\n    updateCanvas () {\n      if (!this.color) return\n\n      const canvas = this.$refs.canvas as HTMLCanvasElement\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(${this.color.hue}, 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    handleClick (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseDown (e: MouseEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n\n      window.addEventListener('mousemove', this.handleMouseMove)\n      window.addEventListener('mouseup', this.handleMouseUp)\n    },\n    handleMouseMove (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseUp () {\n      window.removeEventListener('mousemove', this.handleMouseMove)\n      window.removeEventListener('mouseup', this.handleMouseUp)\n    },\n    genCanvas (): VNode {\n      return this.$createElement('canvas', {\n        ref: 'canvas',\n        attrs: {\n          width: this.width,\n          height: this.height,\n        },\n      })\n    },\n    genDot (): VNode {\n      const radius = parseInt(this.dotSize, 10) / 2\n      const x = convertToUnit(this.dot.x - radius)\n      const y = convertToUnit(this.dot.y - radius)\n\n      return this.$createElement('div', {\n        staticClass: 'v-color-picker__canvas-dot',\n        class: {\n          'v-color-picker__canvas-dot--disabled': this.disabled,\n        },\n        style: {\n          width: convertToUnit(this.dotSize),\n          height: convertToUnit(this.dotSize),\n          transform: `translate(${x}, ${y})`,\n        },\n      })\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-color-picker__canvas',\n      style: {\n        width: convertToUnit(this.width),\n        height: convertToUnit(this.height),\n      },\n      on: {\n        click: this.handleClick,\n        mousedown: this.handleMouseDown,\n      },\n    }, [\n      this.genCanvas(),\n      this.genDot(),\n    ])\n  },\n})\n"],"file":"VColorPickerCanvas.mjs"}
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"names":["computed","onMounted","ref","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","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"],"mappings":"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","sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Utilities\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\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    return () => (\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})\n"],"file":"VColorPickerCanvas.mjs"}

package/lib/components/VColorPicker/VColorPickerCanvas.sass

@@ -1,12 +1,14 @@
-@import './_variables.scss'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
-.v-color-picker__canvas
+.v-color-picker-canvas
   $root: &
   position: relative
   overflow: hidden
   contain: strict
 
-  &-dot
+  &__dot
     position: absolute
     top: 0
     left: 0

package/lib/components/VColorPicker/VColorPickerEdit.css

@@ -0,0 +1,31 @@
+.v-color-picker-edit {
+  display: flex;
+}
+
+.v-color-picker-edit__input {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+}
+.v-color-picker-edit__input:not(:last-child).v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-edit__input:not(:last-child) {
+  margin-right: 8px;
+}
+.v-color-picker-edit__input:not(:last-child).v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-edit__input:not(:last-child) {
+  margin-left: 8px;
+}
+.v-color-picker-edit__input input {
+  border-radius: 4px;
+  margin-bottom: 8px;
+  min-width: 0;
+  outline: none;
+  text-align: center;
+  width: 100%;
+  height: 32px;
+  background: rgba(var(--v-theme-surface-variant), 0.2);
+  color: rgba(var(--v-theme-on-surface));
+}
+.v-color-picker-edit__input span {
+  font-size: 0.75rem;
+}

package/lib/components/VColorPicker/VColorPickerEdit.mjs

@@ -1,152 +1,92 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPickerEdit.sass"; // Components
-
-import VBtn from "../VBtn/index.mjs";
-import VIcon from "../VIcon/index.mjs"; // Helpers
-
-import { parseHex } from "../../util/colorUtils.mjs"; // Types
-
-import Vue from 'vue';
-import { fromRGBA, fromHexa, fromHSLA } from "./util/index.mjs";
-export const modes = {
-  rgba: {
-    inputs: [['r', 255, 'int'], ['g', 255, 'int'], ['b', 255, 'int'], ['a', 1, 'float']],
-    from: fromRGBA
-  },
-  hsla: {
-    inputs: [['h', 360, 'int'], ['s', 1, 'float'], ['l', 1, 'float'], ['a', 1, 'float']],
-    from: fromHSLA
-  },
-  hexa: {
-    from: fromHexa
-  }
+import "./VColorPickerEdit.css"; // Components
+
+import { VBtn } from "../VBtn/index.mjs"; // Utilities
+
+import { computed } from 'vue';
+import { defineComponent } from "../../util/index.mjs";
+import { modes } from "./util/index.mjs"; // Types
+
+const VColorPickerInput = _ref => {
+  let {
+    label,
+    ...rest
+  } = _ref;
+  return _createVNode("div", {
+    "class": "v-color-picker-edit__input"
+  }, [_createVNode("input", rest, null), _createVNode("span", null, [label])]);
 };
-export default Vue.extend({
-  name: 'v-color-picker-edit',
+
+export const VColorPickerEdit = defineComponent({
+  name: 'VColorPickerEdit',
   props: {
     color: Object,
     disabled: Boolean,
-    hideAlpha: Boolean,
-    hideModeSwitch: Boolean,
     mode: {
       type: String,
       default: 'rgba',
       validator: v => Object.keys(modes).includes(v)
+    },
+    modes: {
+      type: Array,
+      default: () => Object.keys(modes),
+      validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
     }
   },
-
-  data() {
-    return {
-      modes,
-      internalMode: this.mode
-    };
-  },
-
-  computed: {
-    currentMode() {
-      return this.modes[this.internalMode];
-    }
-
-  },
-  watch: {
-    mode(mode) {
-      this.internalMode = mode;
-    }
-
+  emits: {
+    'update:color': color => true,
+    'update:mode': mode => true
   },
 
-  created() {
-    this.internalMode = this.mode;
-  },
-
-  methods: {
-    getValue(v, type) {
-      if (type === 'float') return Math.round(v * 100) / 100;else if (type === 'int') return Math.round(v);else return 0;
-    },
-
-    parseValue(v, type) {
-      if (type === 'float') return parseFloat(v);else if (type === 'int') return parseInt(v, 10) || 0;else return 0;
-    },
-
-    changeMode() {
-      const modes = Object.keys(this.modes);
-      const index = modes.indexOf(this.internalMode);
-      const newMode = modes[(index + 1) % modes.length];
-      this.internalMode = newMode;
-      this.$emit('update:mode', newMode);
-    },
-
-    genInput(target, attrs, value, on) {
-      return this.$createElement('div', {
-        staticClass: 'v-color-picker__input'
-      }, [this.$createElement('input', {
-        key: target,
-        attrs,
-        domProps: {
-          value
-        },
-        on
-      }), this.$createElement('span', target.toUpperCase())]);
-    },
-
-    genInputs() {
-      if (this.internalMode === 'hexa') {
-        const hex = this.color.hexa;
-        const value = this.hideAlpha && hex.endsWith('FF') ? hex.substr(0, 7) : hex;
-        return this.genInput('hex', {
-          maxlength: this.hideAlpha ? 7 : 9,
-          disabled: this.disabled
-        }, value, {
-          change: e => {
-            const el = e.target;
-            this.$emit('update:color', this.currentMode.from(parseHex(el.value)));
+  setup(props, _ref2) {
+    let {
+      emit
+    } = _ref2;
+    const enabledModes = computed(() => {
+      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) : {};
+      return (_mode$inputs = mode.inputs) == null ? void 0 : _mode$inputs.map(_ref3 => {
+        let {
+          getValue,
+          getColor,
+          ...inputProps
+        } = _ref3;
+        return { ...mode.inputProps,
+          ...inputProps,
+          disabled: props.disabled,
+          value: getValue(color),
+          onChange: e => {
+            const target = e.target;
+            if (!target) return;
+            emit('update:color', mode.from(getColor(color, target.value)));
           }
-        });
-      } else {
-        const inputs = this.hideAlpha ? this.currentMode.inputs.slice(0, -1) : this.currentMode.inputs;
-        return inputs.map(([target, max, type]) => {
-          const value = this.color[this.internalMode];
-          return this.genInput(target, {
-            type: 'number',
-            min: 0,
-            max,
-            step: type === 'float' ? '0.01' : type === 'int' ? '1' : undefined,
-            disabled: this.disabled
-          }, this.getValue(value[target], type), {
-            input: e => {
-              const el = e.target;
-              const newVal = this.parseValue(el.value || '0', type);
-              this.$emit('update:color', this.currentMode.from(Object.assign({}, value, {
-                [target]: newVal
-              }), this.color.alpha));
-            }
-          });
-        });
-      }
-    },
-
-    genSwitch() {
-      return this.$createElement(VBtn, {
-        props: {
-          small: true,
-          icon: true,
-          disabled: this.disabled
-        },
-        on: {
-          click: this.changeMode
+        };
+      });
+    });
+    return () => {
+      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, {
+        "icon": "$unfold",
+        "size": "x-small",
+        "variant": "plain",
+        "onClick": () => {
+          const mi = enabledModes.value.findIndex(m => m.name === props.mode);
+          emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name);
         }
-      }, [this.$createElement(VIcon, '$unfold')]);
-    }
-
-  },
-
-  render(h) {
-    return h('div', {
-      staticClass: 'v-color-picker__edit'
-    }, [this.genInputs(), !this.hideModeSwitch && this.genSwitch()]);
+      }, null)]);
+    };
   }
 
 });