@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerEdit.ts"],"names":["VBtn","VIcon","parseHex","Vue","fromRGBA","fromHexa","fromHSLA","modes","rgba","inputs","from","hsla","hexa","extend","name","props","color","Object","disabled","Boolean","hideAlpha","hideModeSwitch","mode","type","String","default","validator","v","keys","includes","data","internalMode","computed","currentMode","watch","created","methods","getValue","Math","round","parseValue","parseFloat","parseInt","changeMode","index","indexOf","newMode","length","$emit","genInput","target","attrs","value","on","$createElement","staticClass","key","domProps","toUpperCase","genInputs","hex","endsWith","substr","maxlength","change","e","el","slice","map","max","min","step","undefined","input","newVal","assign","alpha","genSwitch","small","icon","click","render","h"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport VBtn from '../VBtn'\nimport VIcon from '../VIcon'\n\n// Helpers\nimport { parseHex } from '../../util/colorUtils'\n\n// Types\nimport Vue, { VNode, PropType } from 'vue'\nimport { VColorPickerColor, fromRGBA, fromHexa, fromHSLA } from './util'\n\ntype Input = [string, number, string]\n\nexport type Mode = {\n  inputs?: Input[]\n  from: Function\n}\n\nexport const modes = {\n  rgba: {\n    inputs: [\n      ['r', 255, 'int'],\n      ['g', 255, 'int'],\n      ['b', 255, 'int'],\n      ['a', 1, 'float'],\n    ],\n    from: fromRGBA,\n  },\n  hsla: {\n    inputs: [\n      ['h', 360, 'int'],\n      ['s', 1, 'float'],\n      ['l', 1, 'float'],\n      ['a', 1, 'float'],\n    ],\n    from: fromHSLA,\n  },\n  hexa: {\n    from: fromHexa,\n  },\n} as { [key: string]: Mode }\n\nexport default Vue.extend({\n  name: 'v-color-picker-edit',\n\n  props: {\n    color: Object as PropType<VColorPickerColor>,\n    disabled: Boolean,\n    hideAlpha: Boolean,\n    hideModeSwitch: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n  },\n\n  data () {\n    return {\n      modes,\n      internalMode: this.mode,\n    }\n  },\n\n  computed: {\n    currentMode (): Mode {\n      return this.modes[this.internalMode]\n    },\n  },\n\n  watch: {\n    mode (mode) {\n      this.internalMode = mode\n    },\n  },\n\n  created () {\n    this.internalMode = this.mode\n  },\n\n  methods: {\n    getValue (v: any, type: string) {\n      if (type === 'float') return Math.round(v * 100) / 100\n      else if (type === 'int') return Math.round(v)\n      else return 0\n    },\n    parseValue (v: string, type: string) {\n      if (type === 'float') return parseFloat(v)\n      else if (type === 'int') return parseInt(v, 10) || 0\n      else return 0\n    },\n    changeMode () {\n      const modes = Object.keys(this.modes)\n      const index = modes.indexOf(this.internalMode)\n      const newMode = modes[(index + 1) % modes.length]\n      this.internalMode = newMode\n      this.$emit('update:mode', newMode)\n    },\n    genInput (target: string, attrs: any, value: any, on: any): VNode {\n      return this.$createElement('div', {\n        staticClass: 'v-color-picker__input',\n      }, [\n        this.$createElement('input', {\n          key: target,\n          attrs,\n          domProps: {\n            value,\n          },\n          on,\n        }),\n        this.$createElement('span', target.toUpperCase()),\n      ])\n    },\n    genInputs (): VNode[] | VNode {\n      if (this.internalMode === 'hexa') {\n        const hex = this.color.hexa\n        const value = this.hideAlpha && hex.endsWith('FF') ? hex.substr(0, 7) : hex\n        return this.genInput(\n          'hex',\n          {\n            maxlength: this.hideAlpha ? 7 : 9,\n            disabled: this.disabled,\n          },\n          value,\n          {\n            change: (e: Event) => {\n              const el = e.target as HTMLInputElement\n              this.$emit('update:color', this.currentMode.from(parseHex(el.value)))\n            },\n          }\n        )\n      } else {\n        const inputs = this.hideAlpha ? this.currentMode.inputs!.slice(0, -1) : this.currentMode.inputs!\n        return inputs.map(([target, max, type]) => {\n          const value = this.color[this.internalMode as keyof VColorPickerColor] as any\n          return this.genInput(\n            target,\n            {\n              type: 'number',\n              min: 0,\n              max,\n              step: type === 'float' ? '0.01' : type === 'int' ? '1' : undefined,\n              disabled: this.disabled,\n            },\n            this.getValue(value[target], type),\n            {\n              input: (e: Event) => {\n                const el = e.target as HTMLInputElement\n                const newVal = this.parseValue(el.value || '0', type)\n\n                this.$emit('update:color', this.currentMode.from(\n                  Object.assign({}, value, { [target]: newVal }),\n                  this.color.alpha\n                ))\n              },\n            }\n          )\n        })\n      }\n    },\n    genSwitch (): VNode {\n      return this.$createElement(VBtn, {\n        props: {\n          small: true,\n          icon: true,\n          disabled: this.disabled,\n        },\n        on: {\n          click: this.changeMode,\n        },\n      }, [\n        this.$createElement(VIcon, '$unfold'),\n      ])\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-color-picker__edit',\n    }, [\n      this.genInputs(),\n      !this.hideModeSwitch && this.genSwitch(),\n    ])\n  },\n})\n"],"file":"VColorPickerEdit.mjs"}
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"names":["VBtn","computed","defineComponent","modes","VColorPickerInput","label","rest","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","emits","setup","emit","enabledModes","map","key","inputs","value","find","to","getValue","getColor","inputProps","onChange","e","target","from","length","mi","findIndex"],"mappings":"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","sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent } from '@/util'\nimport { modes } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util/colorUtils'\n\nconst VColorPickerInput = ({ label, ...rest }: any) => {\n  return (\n    <div\n      class=\"v-color-picker-edit__input\"\n    >\n      <input {...rest} />\n      <span>{ label }</span>\n    </div>\n  )\n}\n\nexport const VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: {\n    color: Object as PropType<HSVA | null>,\n    disabled: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    modes: {\n      type: Array as PropType<string[]>,\n      default: () => Object.keys(modes),\n      validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n    },\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props, { emit }) {\n    const enabledModes = computed(() => {\n      return props.modes.map(key => ({ ...modes[key], name: key }))\n    })\n\n    const inputs = computed(() => {\n      const mode = enabledModes.value.find(m => m.name === props.mode)\n\n      if (!mode) return []\n\n      const color = props.color ? mode.to(props.color) : {}\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: getValue(color),\n          onChange: (e: InputEvent) => {\n            const target = e.target as HTMLInputElement | null\n\n            if (!target) return\n\n            emit('update:color', mode.from(getColor(color, target.value)))\n          },\n        }\n      })\n    })\n\n    return () => (\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})\n"],"file":"VColorPickerEdit.mjs"}

package/lib/components/VColorPicker/VColorPickerEdit.sass

@@ -1,10 +1,11 @@
-@import './_variables.scss'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
-.v-color-picker__edit
-  margin-top: $color-picker-edit-margin-top
+.v-color-picker-edit
   display: flex
 
-.v-color-picker__input
+.v-color-picker-edit__input
   width: 100%
   display: flex
   flex-wrap: wrap
@@ -12,10 +13,10 @@
   text-align: center
 
   &:not(:last-child)
-    +ltr()
+    +tools.ltr()
       margin-right: $color-picker-input-margin
 
-    +rtl()
+    +tools.rtl()
       margin-left: $color-picker-input-margin
 
   input
@@ -26,6 +27,8 @@
     text-align: center
     width: 100%
     height: $color-picker-input-height
+    background: rgba(var(--v-theme-surface-variant), .2)
+    color: rgba(var(--v-theme-on-surface))
 
   span
     font-size: $color-picker-input-font-size

package/lib/components/VColorPicker/VColorPickerPreview.css

@@ -0,0 +1,67 @@
+.v-color-picker-preview__alpha .v-slider-track__background {
+  background-color: transparent !important;
+}
+.v-color-picker-preview__alpha .v-slider-track__background.v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-preview__alpha .v-slider-track__background {
+  background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv));
+}
+.v-color-picker-preview__alpha .v-slider-track__background.v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-preview__alpha .v-slider-track__background {
+  background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv));
+}
+.v-color-picker-preview__alpha .v-slider-track__background::after {
+  content: "";
+  z-index: -1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
+  border-radius: inherit;
+}
+
+.v-color-picker-preview__sliders {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+
+.v-color-picker-preview__dot {
+  position: relative;
+  height: 30px;
+  width: 30px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.v-color-picker-preview__dot.v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-preview__dot {
+  margin-right: 24px;
+}
+.v-color-picker-preview__dot.v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-preview__dot {
+  margin-left: 24px;
+}
+.v-color-picker-preview__dot > div {
+  width: 100%;
+  height: 100%;
+}
+
+.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background.v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
+  background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background.v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
+  background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.v-color-picker-preview__track {
+  position: relative;
+  width: 100%;
+  margin: 0 !important;
+}
+.v-color-picker-preview__track .v-slider-track__fill {
+  display: none;
+}
+
+.v-color-picker-preview {
+  align-items: center;
+  display: flex;
+  margin-bottom: 24px;
+}

package/lib/components/VColorPicker/VColorPickerPreview.mjs

@@ -1,100 +1,82 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPickerPreview.sass"; // Components
+import "./VColorPickerPreview.css"; // Components
 
-import VSlider from "../VSlider/VSlider.mjs"; // Utilities
+import { VSlider } from "../VSlider/index.mjs"; // Utilities
 
-import { RGBtoCSS, RGBAtoCSS } from "../../util/colorUtils.mjs"; // Types
+import { defineComponent, HSVAtoCSS } from "../../util/index.mjs";
+import { nullColor } from "./util/index.mjs"; // Types
 
-import Vue from 'vue';
-import { fromHSVA } from "./util/index.mjs";
-export default Vue.extend({
-  name: 'v-color-picker-preview',
+export const VColorPickerPreview = defineComponent({
+  name: 'VColorPickerPreview',
   props: {
-    color: Object,
+    color: {
+      type: Object
+    },
     disabled: Boolean,
     hideAlpha: Boolean
   },
-  methods: {
-    genAlpha() {
-      return this.genTrack({
-        staticClass: 'v-color-picker__alpha',
-        props: {
-          thumbColor: 'grey lighten-2',
-          hideDetails: true,
-          value: this.color.alpha,
-          step: 0,
-          min: 0,
-          max: 1
-        },
-        style: {
-          backgroundImage: this.disabled ? undefined : "linear-gradient(to ".concat(this.$vuetify.rtl ? 'left' : 'right', ", transparent, ").concat(RGBtoCSS(this.color.rgba), ")")
-        },
-        on: {
-          input: val => this.color.alpha !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva,
-            a: val
-          }))
-        }
-      });
-    },
+  emits: {
+    'update:color': color => true
+  },
 
-    genSliders() {
-      return this.$createElement('div', {
-        staticClass: 'v-color-picker__sliders'
-      }, [this.genHue(), !this.hideAlpha && this.genAlpha()]);
-    },
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    return () => {
+      var _props$color, _props$color2, _props$color4;
 
-    genDot() {
-      return this.$createElement('div', {
-        staticClass: 'v-color-picker__dot'
-      }, [this.$createElement('div', {
-        style: {
-          background: RGBAtoCSS(this.color.rgba)
+      return _createVNode("div", {
+        "class": ['v-color-picker-preview', {
+          'v-color-picker-preview--hide-alpha': props.hideAlpha
+        }]
+      }, [_createVNode("div", {
+        "class": "v-color-picker-preview__dot"
+      }, [_createVNode("div", {
+        "style": {
+          background: HSVAtoCSS((_props$color = props.color) != null ? _props$color : nullColor)
         }
-      })]);
-    },
+      }, null)]), _createVNode("div", {
+        "class": "v-color-picker-preview__sliders"
+      }, [_createVNode(VSlider, {
+        "class": "v-color-picker-preview__track v-color-picker-preview__hue",
+        "modelValue": (_props$color2 = props.color) == null ? void 0 : _props$color2.h,
+        "onUpdate:modelValue": h => {
+          var _props$color3;
 
-    genHue() {
-      return this.genTrack({
-        staticClass: 'v-color-picker__hue',
-        props: {
-          thumbColor: 'grey lighten-2',
-          hideDetails: true,
-          value: this.color.hue,
-          step: 0,
-          min: 0,
-          max: 360
+          return emit('update:color', { ...((_props$color3 = props.color) != null ? _props$color3 : nullColor),
+            h
+          });
         },
-        on: {
-          input: val => this.color.hue !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva,
-            h: val
-          }))
-        }
-      });
-    },
-
-    genTrack(options) {
-      return this.$createElement(VSlider, {
-        class: 'v-color-picker__track',
-        ...options,
-        props: {
-          disabled: this.disabled,
-          ...options.props
-        }
-      });
-    }
-
-  },
+        "step": 0,
+        "min": 0,
+        "max": 360,
+        "disabled": props.disabled,
+        "thumbSize": 14,
+        "trackSize": 8,
+        "trackFillColor": "white",
+        "hideDetails": true
+      }, null), !props.hideAlpha && _createVNode(VSlider, {
+        "class": "v-color-picker-preview__track v-color-picker-preview__alpha",
+        "modelValue": (_props$color4 = props.color) == null ? void 0 : _props$color4.a,
+        "onUpdate:modelValue": a => {
+          var _props$color5;
 
-  render(h) {
-    return h('div', {
-      staticClass: 'v-color-picker__preview',
-      class: {
-        'v-color-picker__preview--hide-alpha': this.hideAlpha
-      }
-    }, [this.genDot(), this.genSliders()]);
+          return emit('update:color', { ...((_props$color5 = props.color) != null ? _props$color5 : nullColor),
+            a
+          });
+        },
+        "step": 0,
+        "min": 0,
+        "max": 1,
+        "disabled": props.disabled,
+        "thumbSize": 14,
+        "trackSize": 8,
+        "trackFillColor": "white",
+        "hideDetails": true
+      }, null)])]);
+    };
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerPreview.ts"],"names":["VSlider","RGBtoCSS","RGBAtoCSS","Vue","fromHSVA","extend","name","props","color","Object","disabled","Boolean","hideAlpha","methods","genAlpha","genTrack","staticClass","thumbColor","hideDetails","value","alpha","step","min","max","style","backgroundImage","undefined","$vuetify","rtl","rgba","on","input","val","$emit","hsva","a","genSliders","$createElement","genHue","genDot","background","hue","h","options","class","render"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport VSlider from '../VSlider/VSlider'\n\n// Utilities\nimport { RGBtoCSS, RGBAtoCSS } from '../../util/colorUtils'\n\n// Types\nimport Vue, { VNode, VNodeData, PropType } from 'vue'\nimport { VColorPickerColor, fromHSVA } from './util'\n\nexport default Vue.extend({\n  name: 'v-color-picker-preview',\n\n  props: {\n    color: Object as PropType<VColorPickerColor>,\n    disabled: Boolean,\n    hideAlpha: Boolean,\n  },\n\n  methods: {\n    genAlpha (): VNode {\n      return this.genTrack({\n        staticClass: 'v-color-picker__alpha',\n        props: {\n          thumbColor: 'grey lighten-2',\n          hideDetails: true,\n          value: this.color.alpha,\n          step: 0,\n          min: 0,\n          max: 1,\n        },\n        style: {\n          backgroundImage: this.disabled\n            ? undefined\n            : `linear-gradient(to ${this.$vuetify.rtl ? 'left' : 'right'}, transparent, ${RGBtoCSS(this.color.rgba)})`,\n        },\n        on: {\n          input: (val: number) => this.color.alpha !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva, a: val })),\n        },\n      })\n    },\n    genSliders (): VNode {\n      return this.$createElement('div', {\n        staticClass: 'v-color-picker__sliders',\n      }, [\n        this.genHue(),\n        !this.hideAlpha && this.genAlpha(),\n      ])\n    },\n    genDot (): VNode {\n      return this.$createElement('div', {\n        staticClass: 'v-color-picker__dot',\n      }, [\n        this.$createElement('div', {\n          style: {\n            background: RGBAtoCSS(this.color.rgba),\n          },\n        }),\n      ])\n    },\n    genHue (): VNode {\n      return this.genTrack({\n        staticClass: 'v-color-picker__hue',\n        props: {\n          thumbColor: 'grey lighten-2',\n          hideDetails: true,\n          value: this.color.hue,\n          step: 0,\n          min: 0,\n          max: 360,\n        },\n        on: {\n          input: (val: number) => this.color.hue !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva, h: val })),\n        },\n      })\n    },\n    genTrack (options: VNodeData): VNode {\n      return this.$createElement(VSlider, {\n        class: 'v-color-picker__track',\n        ...options,\n        props: {\n          disabled: this.disabled,\n          ...options.props,\n        },\n      })\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-color-picker__preview',\n      class: {\n        'v-color-picker__preview--hide-alpha': this.hideAlpha,\n      },\n    }, [\n      this.genDot(),\n      this.genSliders(),\n    ])\n  },\n})\n"],"file":"VColorPickerPreview.mjs"}
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"names":["VSlider","defineComponent","HSVAtoCSS","nullColor","VColorPickerPreview","name","props","color","type","Object","disabled","Boolean","hideAlpha","emits","setup","emit","background","h","a"],"mappings":";AAAA;AACA,mC,CAEA;;SACSA,O,gCAET;;SACSC,e,EAAiBC,S;SACjBC,S,4BAET;;AAIA,OAAO,MAAMC,mBAAmB,GAAGH,eAAe,CAAC;AACjDI,EAAAA,IAAI,EAAE,qBAD2C;AAGjDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC;AADD,KADF;AAILC,IAAAA,QAAQ,EAAEC,OAJL;AAKLC,IAAAA,SAAS,EAAED;AALN,GAH0C;AAWjDE,EAAAA,KAAK,EAAE;AACL,oBAAiBN,KAAD,IAAiB;AAD5B,GAX0C;;AAejDO,EAAAA,KAAK,CAAER,KAAF,QAAmB;AAAA,QAAV;AAAES,MAAAA;AAAF,KAAU;AACtB,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,wBADK,EAEL;AACE,gDAAsCT,KAAK,CAACM;AAD9C,SAFK;AAFJ;AAAA,iBASQ;AATR;AAAA,iBAUW;AAAEI,UAAAA,UAAU,EAAEd,SAAS,iBAACI,KAAK,CAACC,KAAP,2BAAgBJ,SAAhB;AAAvB;AAVX;AAAA,iBAYQ;AAZR;AAAA,iBAcO,2DAdP;AAAA,uCAecG,KAAK,CAACC,KAfpB,qBAec,cAAaU,CAf3B;AAAA,+BAgBuBA,CAAC;AAAA;;AAAA,iBAAIF,IAAI,CAAC,cAAD,EAAiB,EAAE,qBAAIT,KAAK,CAACC,KAAV,4BAAmBJ,SAAnB,CAAF;AAAiCc,YAAAA;AAAjC,WAAjB,CAAR;AAAA,SAhBxB;AAAA,gBAiBQ,CAjBR;AAAA,eAkBO,CAlBP;AAAA,eAmBO,GAnBP;AAAA,oBAoBYX,KAAK,CAACI,QApBlB;AAAA,qBAqBa,EArBb;AAAA,qBAsBa,CAtBb;AAAA,0BAuBgB,OAvBhB;AAAA;AAAA,gBA0BC,CAACJ,KAAK,CAACM,SAAP;AAAA,iBAEQ,6DAFR;AAAA,uCAGeN,KAAK,CAACC,KAHrB,qBAGe,cAAaW,CAH5B;AAAA,+BAIwBA,CAAC;AAAA;;AAAA,iBAAIH,IAAI,CAAC,cAAD,EAAiB,EAAE,qBAAIT,KAAK,CAACC,KAAV,4BAAmBJ,SAAnB,CAAF;AAAiCe,YAAAA;AAAjC,WAAjB,CAAR;AAAA,SAJzB;AAAA,gBAKS,CALT;AAAA,eAMQ,CANR;AAAA,eAOQ,CAPR;AAAA,oBAQaZ,KAAK,CAACI,QARnB;AAAA,qBASc,EATd;AAAA,qBAUc,CAVd;AAAA,0BAWiB,OAXjB;AAAA;AAAA,cA1BD;AAAA,KAAP;AA4CD;;AA5DgD,CAAD,CAA3C","sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VSlider } from '@/components/VSlider'\n\n// Utilities\nimport { defineComponent, HSVAtoCSS } from '@/util'\nimport { nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | null>,\n    },\n    disabled: Boolean,\n    hideAlpha: Boolean,\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n  },\n\n  setup (props, { emit }) {\n    return () => (\n      <div\n        class={[\n          'v-color-picker-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n        ]}\n      >\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVAtoCSS(props.color ?? nullColor) }} />\n        </div>\n        <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          { !props.hideAlpha && (\n            <VSlider\n              class=\"v-color-picker-preview__track v-color-picker-preview__alpha\"\n              modelValue={ props.color?.a }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 0 }\n              min={ 0 }\n              max={ 1 }\n              disabled={ props.disabled }\n              thumbSize={ 14 }\n              trackSize={ 8 }\n              trackFillColor=\"white\"\n              hideDetails\n            />\n          ) }\n        </div>\n      </div>\n    )\n  },\n})\n"],"file":"VColorPickerPreview.mjs"}

package/lib/components/VColorPicker/VColorPickerPreview.sass

@@ -1,23 +1,33 @@
-@import './_variables.scss'
-
-.v-color-picker
-  .v-input__slider
-    border-radius: $color-picker-slider-border-radius
-
-    .v-slider
-      margin: 0
-
-.v-color-picker__alpha:not(.v-input--is-disabled)
-  .v-slider
-    border-radius: $color-picker-slider-border-radius
-    background: $color-picker-checkerboard
-
-.v-color-picker__sliders
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-color-picker-preview__alpha
+  .v-slider-track__background
+    background-color: transparent !important
+
+    +tools.ltr()
+      background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv))
+    +tools.rtl()
+      background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv))
+
+    &::after
+      content: ''
+      z-index: -1
+      left: 0
+      top: 0
+      width: 100%
+      height: 100%
+      position: absolute
+      background: $color-picker-checkerboard
+      border-radius: inherit
+
+.v-color-picker-preview__sliders
   display: flex
   flex: 1 0 auto
   flex-direction: column
 
-.v-color-picker__dot
+.v-color-picker-preview__dot
   position: relative
   height: $color-picker-preview-dot-size
   width: $color-picker-preview-dot-size
@@ -25,42 +35,35 @@
   border-radius: 50%
   overflow: hidden
 
-  +ltr()
+  +tools.ltr()
     margin-right: $color-picker-preview-dot-margin
 
-  +rtl()
+  +tools.rtl()
     margin-left: $color-picker-preview-dot-margin
 
   > div
     width: 100%
     height: 100%
 
-.v-color-picker__hue
+.v-color-picker-preview__hue
   &:not(.v-input--is-disabled)
-    +ltr()
-      background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
+    .v-slider-track__background
+      +tools.ltr()
+        background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
-    +rtl()
-      background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
+      +tools.rtl()
+        background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
-.v-color-picker__track
+.v-color-picker-preview__track
   position: relative
   width: 100%
 
-.v-color-picker__preview
-  align-items: center
-  display: flex
-
-  .v-slider
-    min-height: $color-picker-slider-height
-
-    &:not(.v-slider--disabled)
-      .v-slider__thumb
-        +elevation(3)
+  margin: 0 !important
 
-      .v-slider__track-container
-        opacity: 0
+  .v-slider-track__fill
+    display: none
 
-  &:not(.v-color-picker__preview--hide-alpha)
-    .v-color-picker__hue
-      margin-bottom: $color-picker-hue-margin-bottom
+.v-color-picker-preview
+  align-items: center
+  display: flex
+  margin-bottom: $color-picker-preview-margin-bottom

package/lib/components/VColorPicker/VColorPickerSwatches.css

@@ -0,0 +1,35 @@
+.v-color-picker-swatches {
+  overflow-y: auto;
+}
+.v-color-picker-swatches > div {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 8px;
+}
+
+.v-color-picker-swatches__swatch {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+.v-color-picker-swatches__color {
+  position: relative;
+  height: 18px;
+  max-height: 18px;
+  width: 45px;
+  margin: 2px 4px;
+  border-radius: 2px;
+  user-select: none;
+  overflow: hidden;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
+  cursor: pointer;
+}
+.v-color-picker-swatches__color > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}

package/lib/components/VColorPicker/VColorPickerSwatches.mjs

@@ -1,18 +1,12 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPickerSwatches.sass"; // Components
+import "./VColorPickerSwatches.css"; // Components
 
-import VIcon from "../VIcon/index.mjs"; // Helpers
+import { VIcon } from "../VIcon/index.mjs"; // Utilities
 
+import { convertToUnit, deepEqual, defineComponent, getContrast } from "../../util/index.mjs";
 import colors from "../../util/colors.mjs";
-import { fromHex, parseColor } from "./util/index.mjs";
-import { convertToUnit, deepEqual } from "../../util/helpers.mjs";
-import mixins from "../../util/mixins.mjs";
-import Themeable from "../../mixins/themeable/index.mjs"; // Types
-
-import { contrastRatio } from "../../util/colorUtils.mjs";
+import { parseColor } from "./util/index.mjs"; // Types
 
 function parseDefaultColors(colors) {
   return Object.keys(colors).map(key => {
@@ -21,10 +15,8 @@ function parseDefaultColors(colors) {
   });
 }
 
-const white = fromHex('#FFFFFF').rgba;
-const black = fromHex('#000000').rgba;
-export default mixins(Themeable).extend({
-  name: 'v-color-picker-swatches',
+export const VColorPickerSwatches = defineComponent({
+  name: 'VColorPickerSwatches',
   props: {
     swatches: {
       type: Array,
@@ -32,50 +24,38 @@ export default mixins(Themeable).extend({
     },
     disabled: Boolean,
     color: Object,
-    maxWidth: [Number, String],
     maxHeight: [Number, String]
   },
-  methods: {
-    genColor(color) {
-      const content = this.$createElement('div', {
-        style: {
-          background: color
-        }
-      }, [deepEqual(this.color, parseColor(color, null)) && this.$createElement(VIcon, {
-        props: {
-          small: true,
-          dark: contrastRatio(this.color.rgba, white) > 2 && this.color.alpha > 0.5,
-          light: contrastRatio(this.color.rgba, black) > 2 && this.color.alpha > 0.5
-        }
-      }, '$success')]);
-      return this.$createElement('div', {
-        staticClass: 'v-color-picker__color',
-        on: {
-          // TODO: Less hacky way of catching transparent
-          click: () => this.disabled || this.$emit('update:color', fromHex(color === 'transparent' ? '#00000000' : color))
-        }
-      }, [content]);
-    },
-
-    genSwatches() {
-      return this.swatches.map(swatch => {
-        const colors = swatch.map(this.genColor);
-        return this.$createElement('div', {
-          staticClass: 'v-color-picker__swatch'
-        }, colors);
-      });
-    }
-
+  emits: {
+    'update:color': color => true
   },
 
-  render(h) {
-    return h('div', {
-      staticClass: 'v-color-picker__swatches',
-      style: {
-        maxWidth: convertToUnit(this.maxWidth),
-        maxHeight: convertToUnit(this.maxHeight)
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    return () => _createVNode("div", {
+      "class": "v-color-picker-swatches",
+      "style": {
+        maxHeight: convertToUnit(props.maxHeight)
       }
-    }, [this.$createElement('div', this.genSwatches())]);
+    }, [_createVNode("div", null, [props.swatches.map(swatch => _createVNode("div", {
+      "class": "v-color-picker-swatches__swatch"
+    }, [swatch.map(color => {
+      const hsva = parseColor(color);
+      return _createVNode("div", {
+        "class": "v-color-picker-swatches__color",
+        "onClick": () => hsva && emit('update:color', hsva)
+      }, [_createVNode("div", {
+        "style": {
+          background: color
+        }
+      }, [props.color && deepEqual(props.color, hsva) ? _createVNode(VIcon, {
+        "size": "x-small",
+        "icon": "$success",
+        "color": getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black'
+      }, null) : undefined])]);
+    })]))])]);
   }
 
 });