vuetify 3.1.15 → 3.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPicker.mjs","names":["makeVSheetProps","VSheet","VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","useProxiedModel","provideDefaults","defineComponent","HSVtoCSS","omit","useRender","extractColor","modes","nullColor","parseColor","onMounted","ref","VColorPicker","name","props","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","width","emits","color","setup","lastPickedColor","currentColor","undefined","c","value","h","updateColor","hsva","VSlider","trackColor","trackFillColor","sheetProps","filterProps","_createVNode","_mergeProps","rounded","elevation","theme","a","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { defineComponent, HSVtoCSS, omit, useRender } from '@/util'\nimport { extractColor, modes, nullColor, parseColor } from './util'\nimport { onMounted, ref } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  props: {\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,\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    showSwatches: Boolean,\n    swatches: Array as PropType<string[][]>,\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    ...omit(makeVSheetProps({ width: 300 }), [\n      'height',\n      'location',\n      'minHeight',\n      'maxHeight',\n      'minWidth',\n      'maxWidth',\n    ]),\n  },\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props) {\n    const mode = useProxiedModel(props, 'mode')\n    const lastPickedColor = ref<HSV | null>(null)\n    const currentColor = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        let c = parseColor(v)\n\n        if (!c) return null\n\n        if (lastPickedColor.value) {\n          c = { ...c, h: lastPickedColor.value.h }\n          lastPickedColor.value = null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n\n    const updateColor = (hsva: HSV) => {\n      currentColor.value = hsva\n      lastPickedColor.value = hsva\n    }\n\n    onMounted(() => {\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 [sheetProps] = VSheet.filterProps(props)\n\n      return (\n        <VSheet\n          rounded={ props.rounded }\n          elevation={ props.elevation }\n          theme={ props.theme }\n          class={[\n            'v-color-picker',\n          ]}\n          style={{\n            '--v-color-picker-color-hsv': HSVtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n          }}\n          { ...sheetProps }\n          maxWidth={ props.width }\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        </VSheet>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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"}
+{"version":3,"file":"VColorPicker.mjs","names":["makeVSheetProps","VSheet","VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","useProxiedModel","provideDefaults","defineComponent","HSVtoCSS","omit","useRender","extractColor","modes","nullColor","parseColor","onMounted","ref","VColorPicker","name","props","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","width","emits","color","setup","lastPickedColor","currentColor","undefined","c","value","h","updateColor","hsva","VSlider","trackColor","trackFillColor","sheetProps","filterProps","_createVNode","_mergeProps","rounded","elevation","theme","class","a","style","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { defineComponent, HSVtoCSS, omit, useRender } from '@/util'\nimport { extractColor, modes, nullColor, parseColor } from './util'\nimport { onMounted, ref } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  props: {\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,\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    showSwatches: Boolean,\n    swatches: Array as PropType<string[][]>,\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    ...omit(makeVSheetProps({ width: 300 }), [\n      'height',\n      'location',\n      'minHeight',\n      'maxHeight',\n      'minWidth',\n      'maxWidth',\n    ]),\n  },\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props) {\n    const mode = useProxiedModel(props, 'mode')\n    const lastPickedColor = ref<HSV | null>(null)\n    const currentColor = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        let c = parseColor(v)\n\n        if (!c) return null\n\n        if (lastPickedColor.value) {\n          c = { ...c, h: lastPickedColor.value.h }\n          lastPickedColor.value = null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n\n    const updateColor = (hsva: HSV) => {\n      currentColor.value = hsva\n      lastPickedColor.value = hsva\n    }\n\n    onMounted(() => {\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 [sheetProps] = VSheet.filterProps(props)\n\n      return (\n        <VSheet\n          rounded={ props.rounded }\n          elevation={ props.elevation }\n          theme={ props.theme }\n          class={[\n            'v-color-picker',\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          { ...sheetProps }\n          maxWidth={ props.width }\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        </VSheet>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,MAAM;AAAA,SACvBC,kBAAkB;AAAA,SAClBC,gBAAgB;AAAA,SAChBC,mBAAmB;AAAA,SACnBC,oBAAoB,sCAE7B;AAAA,SACSC,eAAe;AAAA,SACfC,eAAe,0CAExB;AAAA,SACSC,eAAe,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,SAAS;AAAA,SAC1CC,YAAY,EAAEC,KAAK,EAAEC,SAAS,EAAEC,UAAU;AACnD,SAASC,SAAS,EAAEC,GAAG,QAAQ,KAAK;;AAEpC;;AAIA,OAAO,MAAMC,YAAY,GAAGV,eAAe,CAAC;EAC1CW,IAAI,EAAE,cAAc;EAEpBC,KAAK,EAAE;IACLC,YAAY,EAAE;MACZC,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;MACtBC,OAAO,EAAE;IACX,CAAC;IACDC,QAAQ,EAAEC,OAAO;IACjBC,OAAO,EAAE;MACPN,IAAI,EAAE,CAACE,MAAM,EAAED,MAAM,CAAC;MACtBE,OAAO,EAAE;IACX,CAAC;IACDI,UAAU,EAAEF,OAAO;IACnBG,WAAW,EAAEH,OAAO;IACpBI,UAAU,EAAEJ,OAAO;IACnBK,IAAI,EAAE;MACJV,IAAI,EAAEC,MAAM;MACZE,OAAO,EAAE,MAAM;MACfQ,SAAS,EAAGC,CAAS,IAAKC,MAAM,CAACC,IAAI,CAACvB,KAAK,CAAC,CAACwB,QAAQ,CAACH,CAAC;IACzD,CAAC;IACDrB,KAAK,EAAE;MACLS,IAAI,EAAEgB,KAA2B;MACjCb,OAAO,EAAEA,CAAA,KAAMU,MAAM,CAACC,IAAI,CAACvB,KAAK,CAAC;MACjCoB,SAAS,EAAGC,CAAM,IAAKI,KAAK,CAACC,OAAO,CAACL,CAAC,CAAC,IAAIA,CAAC,CAACM,KAAK,CAACC,CAAC,IAAIN,MAAM,CAACC,IAAI,CAACvB,KAAK,CAAC,CAACwB,QAAQ,CAACI,CAAC,CAAC;IACxF,CAAC;IACDC,YAAY,EAAEf,OAAO;IACrBgB,QAAQ,EAAEL,KAA6B;IACvCM,iBAAiB,EAAE;MACjBtB,IAAI,EAAE,CAACE,MAAM,EAAED,MAAM,CAAC;MACtBE,OAAO,EAAE;IACX,CAAC;IACDoB,UAAU,EAAE;MACVvB,IAAI,EAAE,CAACa,MAAM,EAAEZ,MAAM;IACvB,CAAC;IAED,GAAGb,IAAI,CAACV,eAAe,CAAC;MAAE8C,KAAK,EAAE;IAAI,CAAC,CAAC,EAAE,CACvC,QAAQ,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,UAAU,CACX;EACH,CAAC;EAEDC,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK,IAAI;IACzC,aAAa,EAAGhB,IAAY,IAAK;EACnC,CAAC;EAEDiB,KAAKA,CAAE7B,KAAK,EAAE;IACZ,MAAMY,IAAI,GAAG1B,eAAe,CAACc,KAAK,EAAE,MAAM,CAAC;IAC3C,MAAM8B,eAAe,GAAGjC,GAAG,CAAa,IAAI,CAAC;IAC7C,MAAMkC,YAAY,GAAG7C,eAAe,CAClCc,KAAK,EACL,YAAY,EACZgC,SAAS,EACTlB,CAAC,IAAI;MACH,IAAImB,CAAC,GAAGtC,UAAU,CAACmB,CAAC,CAAC;MAErB,IAAI,CAACmB,CAAC,EAAE,OAAO,IAAI;MAEnB,IAAIH,eAAe,CAACI,KAAK,EAAE;QACzBD,CAAC,GAAG;UAAE,GAAGA,CAAC;UAAEE,CAAC,EAAEL,eAAe,CAACI,KAAK,CAACC;QAAE,CAAC;QACxCL,eAAe,CAACI,KAAK,GAAG,IAAI;MAC9B;MAEA,OAAOD,CAAC;IACV,CAAC,EACDnB,CAAC,IAAI;MACH,IAAI,CAACA,CAAC,EAAE,OAAO,IAAI;MAEnB,OAAOtB,YAAY,CAACsB,CAAC,EAAEd,KAAK,CAACyB,UAAU,CAAC;IAC1C,CAAC,CACF;IAED,MAAMW,WAAW,GAAIC,IAAS,IAAK;MACjCN,YAAY,CAACG,KAAK,GAAGG,IAAI;MACzBP,eAAe,CAACI,KAAK,GAAGG,IAAI;IAC9B,CAAC;IAEDzC,SAAS,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,CAACP,KAAK,CAACwB,QAAQ,CAACL,IAAI,CAACsB,KAAK,CAAC,EAAEtB,IAAI,CAACsB,KAAK,GAAGlC,KAAK,CAACP,KAAK,CAAC,CAAC,CAAC;IACpE,CAAC,CAAC;IAEFN,eAAe,CAAC;MACdmD,OAAO,EAAE;QACPV,KAAK,EAAEI,SAAS;QAChBO,UAAU,EAAEP,SAAS;QACrBQ,cAAc,EAAER;MAClB;IACF,CAAC,CAAC;IAEFzC,SAAS,CAAC,MAAM;MACd,MAAM,CAACkD,UAAU,CAAC,GAAG5D,MAAM,CAAC6D,WAAW,CAAC1C,KAAK,CAAC;MAE9C,OAAA2C,YAAA,CAAA9D,MAAA,EAAA+D,WAAA;QAAA,WAEc5C,KAAK,CAAC6C,OAAO;QAAA,aACX7C,KAAK,CAAC8C,SAAS;QAAA,SACnB9C,KAAK,CAAC+C,KAAK;QAAA,SACZ,CACL,gBAAgB,EAChB/C,KAAK,CAACgD,KAAK,CACZ;QAAA,SACM,CACL;UACE,4BAA4B,EAAE3D,QAAQ,CAAC;YAAE,IAAI0C,YAAY,CAACG,KAAK,IAAIxC,SAAS,CAAC;YAAEuD,CAAC,EAAE;UAAE,CAAC;QACvF,CAAC,EACDjD,KAAK,CAACkD,KAAK;MACZ,GACIT,UAAU;QAAA,YACJzC,KAAK,CAAC0B;MAAK;QAAArB,OAAA,EAAAA,CAAA,MAEpB,CAACL,KAAK,CAACS,UAAU,IAAAkC,YAAA,CAAA7D,kBAAA;UAAA,OAEX,QAAQ;UAAA,SACJiD,YAAY,CAACG,KAAK;UAAA,kBACTE,WAAW;UAAA,YACjBpC,KAAK,CAACM,QAAQ;UAAA,WACfN,KAAK,CAACQ,OAAO;UAAA,SACfR,KAAK,CAAC0B,KAAK;UAAA,UACV1B,KAAK,CAACC;QAAY,QAE9B,EAEC,CAAC,CAACD,KAAK,CAACU,WAAW,IAAI,CAACV,KAAK,CAACW,UAAU,KAAAgC,YAAA;UAAA,OAC/B,UAAU;UAAA,SAAO;QAA0B,IAChD,CAAC3C,KAAK,CAACU,WAAW,IAAAiC,YAAA,CAAA3D,mBAAA;UAAA,OAEZ,SAAS;UAAA,SACL+C,YAAY,CAACG,KAAK;UAAA,kBACTE,WAAW;UAAA,aAChB,CAACxB,IAAI,CAACsB,KAAK,CAACiB,QAAQ,CAAC,GAAG,CAAC;UAAA,YAC1BnD,KAAK,CAACM;QAAQ,QAE5B,EAEC,CAACN,KAAK,CAACW,UAAU,IAAAgC,YAAA,CAAA5D,gBAAA;UAAA,OAEX,MAAM;UAAA,SACFiB,KAAK,CAACP,KAAK;UAAA,QACZmB,IAAI,CAACsB,KAAK;UAAA,iBACDb,CAAC,IAAIT,IAAI,CAACsB,KAAK,GAAGb,CAAC;UAAA,SAC3BU,YAAY,CAACG,KAAK;UAAA,kBACTE,WAAW;UAAA,YACjBpC,KAAK,CAACM;QAAQ,QAE5B,EAEJ,EAECN,KAAK,CAACsB,YAAY,IAAAqB,YAAA,CAAA1D,oBAAA;UAAA,OAEZ,UAAU;UAAA,SACN8C,YAAY,CAACG,KAAK;UAAA,kBACTE,WAAW;UAAA,aAChBpC,KAAK,CAACwB,iBAAiB;UAAA,YACxBxB,KAAK,CAACuB,QAAQ;UAAA,YACdvB,KAAK,CAACM;QAAQ,QAE5B;MAAA;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VColorPicker/VColorPickerCanvas.mjs

@@ -3,6 +3,7 @@ import { createVNode as _createVNode } from "vue";
 import "./VColorPickerCanvas.css";
 
 // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
 import { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from "../../util/index.mjs";
 import { computed, onMounted, ref, watch } from 'vue';
@@ -27,7 +28,8 @@ export const VColorPickerCanvas = defineComponent({
     width: {
       type: [Number, String],
       default: 300
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true,
@@ -172,7 +174,8 @@ export const VColorPickerCanvas = defineComponent({
     onMounted(() => updateCanvas());
     useRender(() => _createVNode("div", {
       "ref": resizeRef,
-      "class": "v-color-picker-canvas",
+      "class": ['v-color-picker-canvas', props.class],
+      "style": props.style,
       "onClick": handleClick,
       "onMousedown": handleMouseDown,
       "onTouchstart": handleMouseDown

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerCanvas.mjs","names":["useResizeObserver","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","_ref","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","canvasWidth","parseFloat","canvasHeight","resizeRef","entries","offsetParent","contentRect","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","newVal","oldVal","flush","deep","_createVNode"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from '@/util'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Types\nimport type { HSV } 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<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\n  emits: {\n    'update:color': (color: HSV) => 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    const canvasWidth = ref(parseFloat(props.width))\n    const canvasHeight = ref(parseFloat(props.height))\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.value?.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 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 { x, y } = dotPosition.value\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    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    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      isOutsideUpdate.value = true\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=\"v-color-picker-canvas\"\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ 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":";AAAA;AACA;;AAEA;AAAA,SACSA,iBAAiB,gDAE1B;AAAA,SACSC,KAAK,EAAEC,aAAa,EAAEC,eAAe,EAAEC,mBAAmB,EAAEC,SAAS;AAC9E,SAASC,QAAQ,EAAEC,SAAS,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;;AAErD;;AAIA,OAAO,MAAMC,kBAAkB,GAAGP,eAAe,CAAC;EAChDQ,IAAI,EAAE,oBAAoB;EAE1BC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC;IACR,CAAC;IACDC,QAAQ,EAAEC,OAAO;IACjBC,OAAO,EAAE;MACPJ,IAAI,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC;MACtBC,OAAO,EAAE;IACX,CAAC;IACDC,MAAM,EAAE;MACNR,IAAI,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC;MACtBC,OAAO,EAAE;IACX,CAAC;IACDE,KAAK,EAAE;MACLT,IAAI,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC;MACtBC,OAAO,EAAE;IACX;EACF,CAAC;EAEDG,KAAK,EAAE;IACL,cAAc,EAAGX,KAAU,IAAK,IAAI;IACpC,iBAAiB,EAAGY,GAAQ,IAAK;EACnC,CAAC;EAEDC,KAAKA,CAAEd,KAAK,EAAAe,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpB,MAAME,aAAa,GAAGrB,GAAG,CAAC,KAAK,CAAC;IAChC,MAAMsB,eAAe,GAAGtB,GAAG,CAAC,KAAK,CAAC;IAClC,MAAMuB,WAAW,GAAGvB,GAAG,CAAC;MAAEwB,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAC,CAAC;IAEvC,MAAMC,SAAS,GAAG5B,QAAQ,CAAC,MAAM;MAC/B,MAAM;QAAE0B,CAAC;QAAEC;MAAE,CAAC,GAAGF,WAAW,CAACI,KAAK;MAClC,MAAMC,MAAM,GAAGC,QAAQ,CAACzB,KAAK,CAACM,OAAO,EAAE,EAAE,CAAC,GAAG,CAAC;MAE9C,OAAO;QACLK,KAAK,EAAErB,aAAa,CAACU,KAAK,CAACM,OAAO,CAAC;QACnCI,MAAM,EAAEpB,aAAa,CAACU,KAAK,CAACM,OAAO,CAAC;QACpCoB,SAAS,EAAG,aAAYpC,aAAa,CAAC8B,CAAC,GAAGI,MAAM,CAAE,KAAIlC,aAAa,CAAC+B,CAAC,GAAGG,MAAM,CAAE;MAClF,CAAC;IACH,CAAC,CAAC;IAEF,MAAMG,SAAS,GAAG/B,GAAG,EAA4B;IACjD,MAAMgC,WAAW,GAAGhC,GAAG,CAACiC,UAAU,CAAC7B,KAAK,CAACW,KAAK,CAAC,CAAC;IAChD,MAAMmB,YAAY,GAAGlC,GAAG,CAACiC,UAAU,CAAC7B,KAAK,CAACU,MAAM,CAAC,CAAC;IAClD,MAAM;MAAEqB;IAAU,CAAC,GAAG3C,iBAAiB,CAAC4C,OAAO,IAAI;MACjD,IAAI,CAACD,SAAS,CAACR,KAAK,EAAEU,YAAY,EAAE;MAEpC,MAAM;QAAEtB,KAAK;QAAED;MAAO,CAAC,GAAGsB,OAAO,CAAC,CAAC,CAAC,CAACE,WAAW;MAEhDN,WAAW,CAACL,KAAK,GAAGZ,KAAK;MACzBmB,YAAY,CAACP,KAAK,GAAGb,MAAM;IAC7B,CAAC,CAAC;IAEF,SAASyB,iBAAiBA,CAAEf,CAAS,EAAEC,CAAS,EAAEe,IAAa,EAAE;MAC/D,MAAM;QAAEC,IAAI;QAAEC,GAAG;QAAE3B,KAAK;QAAED;MAAO,CAAC,GAAG0B,IAAI;MACzCjB,WAAW,CAACI,KAAK,GAAG;QAClBH,CAAC,EAAE/B,KAAK,CAAC+B,CAAC,GAAGiB,IAAI,EAAE,CAAC,EAAE1B,KAAK,CAAC;QAC5BU,CAAC,EAAEhC,KAAK,CAACgC,CAAC,GAAGiB,GAAG,EAAE,CAAC,EAAE5B,MAAM;MAC7B,CAAC;IACH;IAEA,SAAS6B,WAAWA,CAAEC,CAAa,EAAE;MACnC,IAAIxC,KAAK,CAACI,QAAQ,IAAI,CAACuB,SAAS,CAACJ,KAAK,EAAE;MAExCY,iBAAiB,CAACK,CAAC,CAACC,OAAO,EAAED,CAAC,CAACE,OAAO,EAAEf,SAAS,CAACJ,KAAK,CAACoB,qBAAqB,EAAE,CAAC;IAClF;IAEA,SAASC,eAAeA,CAAEJ,CAA0B,EAAE;MACpD;MACAA,CAAC,CAACK,cAAc,EAAE;MAElB,IAAI7C,KAAK,CAACI,QAAQ,EAAE;MAEpBa,aAAa,CAACM,KAAK,GAAG,IAAI;MAE1BuB,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAEC,eAAe,CAAC;MACrDF,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEE,aAAa,CAAC;MACjDH,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAEC,eAAe,CAAC;MACrDF,MAAM,CAACC,gBAAgB,CAAC,UAAU,EAAEE,aAAa,CAAC;IACpD;IAEA,SAASD,eAAeA,CAAER,CAA0B,EAAE;MACpD,IAAIxC,KAAK,CAACI,QAAQ,IAAI,CAACuB,SAAS,CAACJ,KAAK,EAAE;MAExCN,aAAa,CAACM,KAAK,GAAG,IAAI;MAE1B,MAAM2B,MAAM,GAAG1D,mBAAmB,CAACgD,CAAC,CAAC;MAErCL,iBAAiB,CAACe,MAAM,CAACT,OAAO,EAAES,MAAM,CAACR,OAAO,EAAEf,SAAS,CAACJ,KAAK,CAACoB,qBAAqB,EAAE,CAAC;IAC5F;IAEA,SAASM,aAAaA,CAAA,EAAI;MACxBH,MAAM,CAACK,mBAAmB,CAAC,WAAW,EAAEH,eAAe,CAAC;MACxDF,MAAM,CAACK,mBAAmB,CAAC,SAAS,EAAEF,aAAa,CAAC;MACpDH,MAAM,CAACK,mBAAmB,CAAC,WAAW,EAAEH,eAAe,CAAC;MACxDF,MAAM,CAACK,mBAAmB,CAAC,UAAU,EAAEF,aAAa,CAAC;IACvD;IAEApD,KAAK,CAACsB,WAAW,EAAE,MAAM;MACvB,IAAID,eAAe,CAACK,KAAK,EAAE;QACzBL,eAAe,CAACK,KAAK,GAAG,KAAK;QAC7B;MACF;MAEA,IAAI,CAACI,SAAS,CAACJ,KAAK,EAAE;MAEtB,MAAM;QAAEH,CAAC;QAAEC;MAAE,CAAC,GAAGF,WAAW,CAACI,KAAK;MAElCP,IAAI,CAAC,cAAc,EAAE;QACnBoC,CAAC,EAAEpD,KAAK,CAACC,KAAK,EAAEmD,CAAC,IAAI,CAAC;QACtBC,CAAC,EAAEhE,KAAK,CAAC+B,CAAC,EAAE,CAAC,EAAEQ,WAAW,CAACL,KAAK,CAAC,GAAGK,WAAW,CAACL,KAAK;QACrD+B,CAAC,EAAE,CAAC,GAAGjE,KAAK,CAACgC,CAAC,EAAE,CAAC,EAAES,YAAY,CAACP,KAAK,CAAC,GAAGO,YAAY,CAACP,KAAK;QAC3DgC,CAAC,EAAEvD,KAAK,CAACC,KAAK,EAAEsD,CAAC,IAAI;MACvB,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,SAASC,YAAYA,CAAA,EAAI;MACvB,IAAI,CAAC7B,SAAS,CAACJ,KAAK,EAAE;MAEtB,MAAMkC,MAAM,GAAG9B,SAAS,CAACJ,KAAK;MAC9B,MAAMmC,GAAG,GAAGD,MAAM,CAACE,UAAU,CAAC,IAAI,CAAC;MAEnC,IAAI,CAACD,GAAG,EAAE;MAEV,MAAME,kBAAkB,GAAGF,GAAG,CAACG,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAEJ,MAAM,CAAC9C,KAAK,EAAE,CAAC,CAAC;MAC1EiD,kBAAkB,CAACE,YAAY,CAAC,CAAC,EAAE,sBAAsB,CAAC,EAAC;MAC3DF,kBAAkB,CAACE,YAAY,CAAC,CAAC,EAAG,QAAO9D,KAAK,CAACC,KAAK,EAAEmD,CAAC,IAAI,CAAE,iBAAgB,CAAC;MAChFM,GAAG,CAACK,SAAS,GAAGH,kBAAkB;MAClCF,GAAG,CAACM,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAEP,MAAM,CAAC9C,KAAK,EAAE8C,MAAM,CAAC/C,MAAM,CAAC;MAE/C,MAAMuD,aAAa,GAAGP,GAAG,CAACG,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAEJ,MAAM,CAAC/C,MAAM,CAAC;MACtEuD,aAAa,CAACH,YAAY,CAAC,CAAC,EAAE,sBAAsB,CAAC,EAAC;MACtDG,aAAa,CAACH,YAAY,CAAC,CAAC,EAAE,oBAAoB,CAAC,EAAC;MACpDJ,GAAG,CAACK,SAAS,GAAGE,aAAa;MAC7BP,GAAG,CAACM,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAEP,MAAM,CAAC9C,KAAK,EAAE8C,MAAM,CAAC/C,MAAM,CAAC;IACjD;IAEAb,KAAK,CAAC,MAAMG,KAAK,CAACC,KAAK,EAAEmD,CAAC,EAAEI,YAAY,EAAE;MAAEU,SAAS,EAAE;IAAK,CAAC,CAAC;IAC9DrE,KAAK,CAAC,MAAM,CAAC+B,WAAW,CAACL,KAAK,EAAEO,YAAY,CAACP,KAAK,CAAC,EAAE,CAAC4C,MAAM,EAAEC,MAAM,KAAK;MACvEZ,YAAY,EAAE;MACdrC,WAAW,CAACI,KAAK,GAAG;QAClBH,CAAC,EAAED,WAAW,CAACI,KAAK,CAACH,CAAC,GAAG+C,MAAM,CAAC,CAAC,CAAC,GAAGC,MAAM,CAAC,CAAC,CAAC;QAC9C/C,CAAC,EAAEF,WAAW,CAACI,KAAK,CAACF,CAAC,GAAG8C,MAAM,CAAC,CAAC,CAAC,GAAGC,MAAM,CAAC,CAAC;MAC/C,CAAC;IACH,CAAC,EAAE;MAAEC,KAAK,EAAE;IAAO,CAAC,CAAC;IAErBxE,KAAK,CAAC,MAAMG,KAAK,CAACC,KAAK,EAAE,MAAM;MAC7B,IAAIgB,aAAa,CAACM,KAAK,EAAE;QACvBN,aAAa,CAACM,KAAK,GAAG,KAAK;QAC3B;MACF;MAEAL,eAAe,CAACK,KAAK,GAAG,IAAI;MAE5BJ,WAAW,CAACI,KAAK,GAAGvB,KAAK,CAACC,KAAK,GAAG;QAChCmB,CAAC,EAAEpB,KAAK,CAACC,KAAK,CAACoD,CAAC,GAAGzB,WAAW,CAACL,KAAK;QACpCF,CAAC,EAAE,CAAC,CAAC,GAAGrB,KAAK,CAACC,KAAK,CAACqD,CAAC,IAAIxB,YAAY,CAACP;MACxC,CAAC,GAAG;QAAEH,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC;IACpB,CAAC,EAAE;MAAEiD,IAAI,EAAE,IAAI;MAAEJ,SAAS,EAAE;IAAK,CAAC,CAAC;IAEnCvE,SAAS,CAAC,MAAM6D,YAAY,EAAE,CAAC;IAE/B/D,SAAS,CAAC,MAAA8E,YAAA;MAAA,OAEAxC,SAAS;MAAA,SACT,uBAAuB;MAAA,WACnBQ,WAAW;MAAA,eACPK,eAAe;MAAA,gBACdA;IAAe,IAAA2B,YAAA;MAAA,OAGtB5C,SAAS;MAAA,SACPC,WAAW,CAACL,KAAK;MAAA,UAChBO,YAAY,CAACP;IAAK,UAE3BvB,KAAK,CAACC,KAAK,IAAAsE,YAAA;MAAA,SAEF,CACL,4BAA4B,EAC5B;QACE,sCAAsC,EAAEvE,KAAK,CAACI;MAChD,CAAC,CACF;MAAA,SACOkB,SAAS,CAACC;IAAK,QAE1B,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VColorPickerCanvas.mjs","names":["makeComponentProps","useResizeObserver","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","_ref","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","canvasWidth","parseFloat","canvasHeight","resizeRef","entries","offsetParent","contentRect","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","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 { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from '@/util'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Types\nimport type { HSV } 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<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  },\n\n  emits: {\n    'update:color': (color: HSV) => 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    const canvasWidth = ref(parseFloat(props.width))\n    const canvasHeight = ref(parseFloat(props.height))\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.value?.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 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 { x, y } = dotPosition.value\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    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    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      isOutsideUpdate.value = true\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        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ 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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"}

package/lib/components/VColorPicker/VColorPickerEdit.mjs

@@ -3,7 +3,8 @@ import { createVNode as _createVNode } from "vue";
 import "./VColorPickerEdit.css";
 
 // Components
-import { VBtn } from "../VBtn/index.mjs"; // Utilities
+import { VBtn } from "../VBtn/index.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
 import { computed } from 'vue';
 import { defineComponent, useRender } from "../../util/index.mjs";
 import { modes, nullColor } from "./util/index.mjs"; // Types
@@ -30,7 +31,8 @@ export const VColorPickerEdit = defineComponent({
       type: Array,
       default: () => Object.keys(modes),
       validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true,
@@ -70,7 +72,8 @@ export const VColorPickerEdit = defineComponent({
       });
     });
     useRender(() => _createVNode("div", {
-      "class": "v-color-picker-edit"
+      "class": ['v-color-picker-edit', props.class],
+      "style": 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.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerEdit.mjs","names":["VBtn","computed","defineComponent","useRender","modes","nullColor","VColorPickerInput","_ref","label","rest","_createVNode","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","emits","setup","_ref2","emit","enabledModes","map","key","inputs","value","find","to","_ref3","getValue","getColor","inputProps","onChange","e","target","from","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// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\nimport { modes, nullColor } 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 VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: {\n    color: Object as PropType<HSV | 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: HSV) => 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) : 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 ?? nullColor, 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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"}
+{"version":3,"file":"VColorPickerEdit.mjs","names":["VBtn","makeComponentProps","computed","defineComponent","useRender","modes","nullColor","VColorPickerInput","_ref","label","rest","_createVNode","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","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 { defineComponent, useRender } from '@/util'\nimport { modes, nullColor } 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 VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: {\n    color: Object as PropType<HSV | 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    ...makeComponentProps(),\n  },\n\n  emits: {\n    'update:color': (color: HSV) => 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) : 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 ?? 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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"}

package/lib/components/VColorPicker/VColorPickerPreview.mjs

@@ -3,7 +3,8 @@ import { createVNode as _createVNode } from "vue";
 import "./VColorPickerPreview.css";
 
 // Components
-import { VSlider } from "../VSlider/index.mjs"; // Utilities
+import { VSlider } from "../VSlider/index.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
 import { defineComponent, HSVtoCSS, useRender } from "../../util/index.mjs";
 import { nullColor } from "./util/index.mjs"; // Types
 export const VColorPickerPreview = defineComponent({
@@ -13,7 +14,8 @@ export const VColorPickerPreview = defineComponent({
       type: Object
     },
     disabled: Boolean,
-    hideAlpha: Boolean
+    hideAlpha: Boolean,
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true
@@ -25,7 +27,8 @@ export const VColorPickerPreview = defineComponent({
     useRender(() => _createVNode("div", {
       "class": ['v-color-picker-preview', {
         'v-color-picker-preview--hide-alpha': props.hideAlpha
-      }]
+      }, props.class],
+      "style": props.style
     }, [_createVNode("div", {
       "class": "v-color-picker-preview__dot"
     }, [_createVNode("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerPreview.mjs","names":["VSlider","defineComponent","HSVtoCSS","useRender","nullColor","VColorPickerPreview","name","props","color","type","Object","disabled","Boolean","hideAlpha","emits","setup","_ref","emit","_createVNode","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, HSVtoCSS, useRender } from '@/util'\nimport { nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: {\n    color: {\n      type: Object as PropType<HSV | null>,\n    },\n    disabled: Boolean,\n    hideAlpha: Boolean,\n  },\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-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: 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,OAAO,gCAEhB;AAAA,SACSC,eAAe,EAAEC,QAAQ,EAAEC,SAAS;AAAA,SACpCC,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,KAAU,IAAK;EAClC,CAAC;EAEDO,KAAKA,CAAER,KAAK,EAAAS,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpBb,SAAS,CAAC,MAAAe,YAAA;MAAA,SAEC,CACL,wBAAwB,EACxB;QACE,oCAAoC,EAAEX,KAAK,CAACM;MAC9C,CAAC;IACF,IAAAK,YAAA;MAAA,SAEU;IAA6B,IAAAA,YAAA;MAAA,SAC1B;QAAEC,UAAU,EAAEjB,QAAQ,CAACK,KAAK,CAACC,KAAK,IAAIJ,SAAS;MAAE;IAAC,YAAAc,YAAA;MAAA,SAGrD;IAAiC,IAAAA,YAAA,CAAAlB,OAAA;MAAA,SAElC,2DAA2D;MAAA,cACpDO,KAAK,CAACC,KAAK,EAAEY,CAAC;MAAA,uBACLA,CAAC,IAAIH,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIV,KAAK,CAACC,KAAK,IAAIJ,SAAS,CAAC;QAAEgB;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC;MAAA,OACF,CAAC;MAAA,OACD,GAAG;MAAA,YACEb,KAAK,CAACI,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA,kBACE,OAAO;MAAA;IAAA,UAItB,CAACJ,KAAK,CAACM,SAAS,IAAAK,YAAA,CAAAlB,OAAA;MAAA,SAER,6DAA6D;MAAA,cACtDO,KAAK,CAACC,KAAK,EAAEa,CAAC,IAAI,CAAC;MAAA,uBACVA,CAAC,IAAIJ,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIV,KAAK,CAACC,KAAK,IAAIJ,SAAS,CAAC;QAAEiB;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC,GAAG,GAAG;MAAA,OACR,CAAC;MAAA,OACD,CAAC;MAAA,YACId,KAAK,CAACI,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA,kBACE,OAAO;MAAA;IAAA,QAGzB,IAGN,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VColorPickerPreview.mjs","names":["VSlider","makeComponentProps","defineComponent","HSVtoCSS","useRender","nullColor","VColorPickerPreview","name","props","color","type","Object","disabled","Boolean","hideAlpha","emits","setup","_ref","emit","_createVNode","class","style","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VSlider } from '@/components/VSlider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { defineComponent, HSVtoCSS, useRender } from '@/util'\nimport { nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: {\n    color: {\n      type: Object as PropType<HSV | null>,\n    },\n    disabled: Boolean,\n    hideAlpha: Boolean,\n\n    ...makeComponentProps(),\n  },\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-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n          props.class,\n        ]}\n        style={ props.style }\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,OAAO,gCAEhB;AAAA,SACSC,kBAAkB,2CAE3B;AAAA,SACSC,eAAe,EAAEC,QAAQ,EAAEC,SAAS;AAAA,SACpCC,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,OAAO;IAElB,GAAGZ,kBAAkB;EACvB,CAAC;EAEDc,KAAK,EAAE;IACL,cAAc,EAAGN,KAAU,IAAK;EAClC,CAAC;EAEDO,KAAKA,CAAER,KAAK,EAAAS,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpBb,SAAS,CAAC,MAAAe,YAAA;MAAA,SAEC,CACL,wBAAwB,EACxB;QACE,oCAAoC,EAAEX,KAAK,CAACM;MAC9C,CAAC,EACDN,KAAK,CAACY,KAAK,CACZ;MAAA,SACOZ,KAAK,CAACa;IAAK,IAAAF,YAAA;MAAA,SAER;IAA6B,IAAAA,YAAA;MAAA,SAC1B;QAAEG,UAAU,EAAEnB,QAAQ,CAACK,KAAK,CAACC,KAAK,IAAIJ,SAAS;MAAE;IAAC,YAAAc,YAAA;MAAA,SAGrD;IAAiC,IAAAA,YAAA,CAAAnB,OAAA;MAAA,SAElC,2DAA2D;MAAA,cACpDQ,KAAK,CAACC,KAAK,EAAEc,CAAC;MAAA,uBACLA,CAAC,IAAIL,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIV,KAAK,CAACC,KAAK,IAAIJ,SAAS,CAAC;QAAEkB;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC;MAAA,OACF,CAAC;MAAA,OACD,GAAG;MAAA,YACEf,KAAK,CAACI,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA,kBACE,OAAO;MAAA;IAAA,UAItB,CAACJ,KAAK,CAACM,SAAS,IAAAK,YAAA,CAAAnB,OAAA;MAAA,SAER,6DAA6D;MAAA,cACtDQ,KAAK,CAACC,KAAK,EAAEe,CAAC,IAAI,CAAC;MAAA,uBACVA,CAAC,IAAIN,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIV,KAAK,CAACC,KAAK,IAAIJ,SAAS,CAAC;QAAEmB;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC,GAAG,GAAG;MAAA,OACR,CAAC;MAAA,OACD,CAAC;MAAA,YACIhB,KAAK,CAACI,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA,kBACE,OAAO;MAAA;IAAA,QAGzB,IAGN,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VColorPicker/VColorPickerSwatches.mjs

@@ -3,7 +3,8 @@ import { createVNode as _createVNode } from "vue";
 import "./VColorPickerSwatches.css";
 
 // Components
-import { VIcon } from "../VIcon/index.mjs"; // Utilities
+import { VIcon } from "../VIcon/index.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.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
@@ -22,7 +23,8 @@ export const VColorPickerSwatches = defineComponent({
     },
     disabled: Boolean,
     color: Object,
-    maxHeight: [Number, String]
+    maxHeight: [Number, String],
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true
@@ -32,10 +34,10 @@ export const VColorPickerSwatches = defineComponent({
       emit
     } = _ref;
     useRender(() => _createVNode("div", {
-      "class": "v-color-picker-swatches",
-      "style": {
+      "class": ['v-color-picker-swatches', props.class],
+      "style": [{
         maxHeight: convertToUnit(props.maxHeight)
-      }
+      }, props.style]
     }, [_createVNode("div", null, [props.swatches.map(swatch => _createVNode("div", {
       "class": "v-color-picker-swatches__swatch"
     }, [swatch.map(color => {

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","_ref","emit","_createVNode","swatch","hsva","onClick","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 { HSV } 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<HSV | null>,\n    maxHeight: [Number, String],\n  },\n\n  emits: {\n    'update:color': (color: HSV) => 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,kBAAkBA,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,EAAEA,CAAA,KAAMzB,kBAAkB,CAACD,MAAM;IAC1C,CAAC;IACD2B,QAAQ,EAAEC,OAAO;IACjBtB,KAAK,EAAEJ,MAA8B;IACrC2B,SAAS,EAAE,CAACC,MAAM,EAAEC,MAAM;EAC5B,CAAC;EAEDC,KAAK,EAAE;IACL,cAAc,EAAG1B,KAAU,IAAK;EAClC,CAAC;EAED2B,KAAKA,CAAEX,KAAK,EAAAY,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpBpC,SAAS,CAAC,MAAAsC,YAAA;MAAA,SAEA,yBAAyB;MAAA,SACxB;QACLP,SAAS,EAAEnC,aAAa,CAAC4B,KAAK,CAACO,SAAS;MAC1C;IAAC,IAAAO,YAAA,eAGGd,KAAK,CAACC,QAAQ,CAACnB,GAAG,CAACiC,MAAM,IAAAD,YAAA;MAAA,SACd;IAAiC,IACxCC,MAAM,CAACjC,GAAG,CAACE,KAAK,IAAI;MACpB,MAAMgC,IAAI,GAAGvC,UAAU,CAACO,KAAK,CAAC;MAE9B,OAAA8B,YAAA;QAAA,SAEU,gCAAgC;QAAA,WAC5BG,CAAA,KAAMD,IAAI,IAAIH,IAAI,CAAC,cAAc,EAAEG,IAAI;MAAC,IAAAF,YAAA;QAAA,SAEtC;UAAEI,UAAU,EAAElC;QAAM;MAAC,IAC7BgB,KAAK,CAAChB,KAAK,IAAIX,SAAS,CAAC2B,KAAK,CAAChB,KAAK,EAAEgC,IAAI,CAAC,GAAAF,YAAA,CAAA3C,KAAA;QAAA,QAC7B,SAAS;QAAA,QAAM,UAAU;QAAA,SAASI,WAAW,CAACS,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG;MAAO,WACnGmC,SAAS;IAKrB,CAAC,CAAC,EAEL,CAAC,IAGP,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VColorPickerSwatches.mjs","names":["VIcon","makeComponentProps","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","_ref","emit","_createVNode","class","style","swatch","hsva","onClick","background","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 { convertToUnit, deepEqual, defineComponent, getContrast, useRender } from '@/util'\nimport { parseColor } from './util'\nimport colors from '@/util/colors'\n\n// Types\nimport type { HSV } 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<HSV | null>,\n    maxHeight: [Number, String],\n\n    ...makeComponentProps(),\n  },\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 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,kBAAkB,2CAE3B;AAAA,SACSC,aAAa,EAAEC,SAAS,EAAEC,eAAe,EAAEC,WAAW,EAAEC,SAAS;AAAA,SACjEC,UAAU;AAAA,OACZC,MAAM,+BAEb;AAIA,SAASC,kBAAkBA,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,EAAEA,CAAA,KAAMzB,kBAAkB,CAACD,MAAM;IAC1C,CAAC;IACD2B,QAAQ,EAAEC,OAAO;IACjBtB,KAAK,EAAEJ,MAA8B;IACrC2B,SAAS,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;IAE3B,GAAGtC,kBAAkB;EACvB,CAAC;EAEDuC,KAAK,EAAE;IACL,cAAc,EAAG1B,KAAU,IAAK;EAClC,CAAC;EAED2B,KAAKA,CAAEX,KAAK,EAAAY,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpBpC,SAAS,CAAC,MAAAsC,YAAA;MAAA,SAEC,CACL,yBAAyB,EACzBd,KAAK,CAACe,KAAK,CACZ;MAAA,SACM,CACL;QAAER,SAAS,EAAEnC,aAAa,CAAC4B,KAAK,CAACO,SAAS;MAAE,CAAC,EAC7CP,KAAK,CAACgB,KAAK;IACZ,IAAAF,YAAA,eAGGd,KAAK,CAACC,QAAQ,CAACnB,GAAG,CAACmC,MAAM,IAAAH,YAAA;MAAA,SACd;IAAiC,IACxCG,MAAM,CAACnC,GAAG,CAACE,KAAK,IAAI;MACpB,MAAMkC,IAAI,GAAGzC,UAAU,CAACO,KAAK,CAAC;MAE9B,OAAA8B,YAAA;QAAA,SAEU,gCAAgC;QAAA,WAC5BK,CAAA,KAAMD,IAAI,IAAIL,IAAI,CAAC,cAAc,EAAEK,IAAI;MAAC,IAAAJ,YAAA;QAAA,SAEtC;UAAEM,UAAU,EAAEpC;QAAM;MAAC,IAC7BgB,KAAK,CAAChB,KAAK,IAAIX,SAAS,CAAC2B,KAAK,CAAChB,KAAK,EAAEkC,IAAI,CAAC,GAAAJ,YAAA,CAAA5C,KAAA;QAAA,QAC7B,SAAS;QAAA,QAAM,UAAU;QAAA,SAASK,WAAW,CAACS,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG;MAAO,WACnGqC,SAAS;IAKrB,CAAC,CAAC,EAEL,CAAC,IAGP,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VColorPicker/index.d.ts

@@ -11,6 +11,7 @@ declare const VColorPicker: {
         $data: {};
         $props: Partial<{
             width: NonNullable<string | number>;
+            style: vue.StyleValue;
             disabled: boolean;
             tag: string;
             mode: string;
@@ -34,6 +35,11 @@ declare const VColorPicker: {
                 type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
                 validator: (v: any) => boolean;
             };
+            style: {
+                type: PropType<vue.StyleValue>;
+                default: null;
+            };
+            class: PropType<any>;
             tag: {
                 type: StringConstructor;
                 default: string;
@@ -81,7 +87,7 @@ declare const VColorPicker: {
         }>> & {
             "onUpdate:modelValue"?: ((color: any) => any) | undefined;
             "onUpdate:mode"?: ((mode: string) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "width" | "disabled" | "tag" | "mode" | "rounded" | "dotSize" | "modes" | "hideCanvas" | "hideSliders" | "hideInputs" | "showSwatches" | "canvasHeight" | "swatchesMaxHeight">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "width" | "style" | "disabled" | "tag" | "mode" | "rounded" | "dotSize" | "modes" | "hideCanvas" | "hideSliders" | "hideInputs" | "showSwatches" | "canvasHeight" | "swatchesMaxHeight">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -106,6 +112,11 @@ declare const VColorPicker: {
                 type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
                 validator: (v: any) => boolean;
             };
+            style: {
+                type: PropType<vue.StyleValue>;
+                default: null;
+            };
+            class: PropType<any>;
             tag: {
                 type: StringConstructor;
                 default: string;
@@ -158,6 +169,7 @@ declare const VColorPicker: {
             'update:mode': (mode: string) => true;
         }, string, {
             width: NonNullable<string | number>;
+            style: vue.StyleValue;
             disabled: boolean;
             tag: string;
             mode: string;
@@ -201,6 +213,11 @@ declare const VColorPicker: {
             type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
             validator: (v: any) => boolean;
         };
+        style: {
+            type: PropType<vue.StyleValue>;
+            default: null;
+        };
+        class: PropType<any>;
         tag: {
             type: StringConstructor;
             default: string;
@@ -263,6 +280,11 @@ declare const VColorPicker: {
         type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
         validator: (v: any) => boolean;
     };
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
+    class: PropType<any>;
     tag: {
         type: StringConstructor;
         default: string;
@@ -315,6 +337,7 @@ declare const VColorPicker: {
     'update:mode': (mode: string) => true;
 }, string, {
     width: NonNullable<string | number>;
+    style: vue.StyleValue;
     disabled: boolean;
     tag: string;
     mode: string;
@@ -338,6 +361,11 @@ declare const VColorPicker: {
         type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
         validator: (v: any) => boolean;
     };
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
+    class: PropType<any>;
     tag: {
         type: StringConstructor;
         default: string;
@@ -393,6 +421,11 @@ declare const VColorPicker: {
         type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
         validator: (v: any) => boolean;
     };
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
+    class: PropType<any>;
     tag: {
         type: StringConstructor;
         default: string;

package/lib/components/VCombobox/VCombobox.mjs

@@ -287,7 +287,8 @@ export const VCombobox = genericComponent()({
           'v-combobox--chips': !!props.chips,
           'v-combobox--selecting-index': selectionIndex.value > -1,
           [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
-        }],
+        }, props.class],
+        "style": props.style,
         "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
         "readonly": props.readonly,
         "placeholder": isDirty ? undefined : props.placeholder,