@element-plus/nightly 0.0.20211230

package/es/components/color-picker/src/components/hue-slider.vue_vue_type_script_lang.mjs

@@ -0,0 +1,98 @@
+import { defineComponent, getCurrentInstance, ref, computed, watch, onMounted } from 'vue';
+import { getClientXY } from '../../../../utils/dom.mjs';
+import draggable from '../draggable.mjs';
+
+var script = defineComponent({
+  name: "ElColorHueSlider",
+  props: {
+    color: {
+      type: Object,
+      required: true
+    },
+    vertical: Boolean
+  },
+  setup(props) {
+    const instance = getCurrentInstance();
+    const thumb = ref(null);
+    const bar = ref(null);
+    const thumbLeft = ref(0);
+    const thumbTop = ref(0);
+    const hueValue = computed(() => {
+      return props.color.get("hue");
+    });
+    watch(() => hueValue.value, () => {
+      update();
+    });
+    function handleClick(event) {
+      const target = event.target;
+      if (target !== thumb.value) {
+        handleDrag(event);
+      }
+    }
+    function handleDrag(event) {
+      const el = instance.vnode.el;
+      const rect = el.getBoundingClientRect();
+      const { clientX, clientY } = getClientXY(event);
+      let hue;
+      if (!props.vertical) {
+        let left = clientX - rect.left;
+        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+        left = Math.max(thumb.value.offsetWidth / 2, left);
+        hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360);
+      } else {
+        let top = clientY - rect.top;
+        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+        top = Math.max(thumb.value.offsetHeight / 2, top);
+        hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
+      }
+      props.color.set("hue", hue);
+    }
+    function getThumbLeft() {
+      const el = instance.vnode.el;
+      if (props.vertical)
+        return 0;
+      const hue = props.color.get("hue");
+      if (!el)
+        return 0;
+      return Math.round(hue * (el.offsetWidth - thumb.value.offsetWidth / 2) / 360);
+    }
+    function getThumbTop() {
+      const el = instance.vnode.el;
+      if (!props.vertical)
+        return 0;
+      const hue = props.color.get("hue");
+      if (!el)
+        return 0;
+      return Math.round(hue * (el.offsetHeight - thumb.value.offsetHeight / 2) / 360);
+    }
+    function update() {
+      thumbLeft.value = getThumbLeft();
+      thumbTop.value = getThumbTop();
+    }
+    onMounted(() => {
+      const dragConfig = {
+        drag: (event) => {
+          handleDrag(event);
+        },
+        end: (event) => {
+          handleDrag(event);
+        }
+      };
+      draggable(bar.value, dragConfig);
+      draggable(thumb.value, dragConfig);
+      update();
+    });
+    return {
+      bar,
+      thumb,
+      thumbLeft,
+      thumbTop,
+      hueValue,
+      handleClick,
+      update
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=hue-slider.vue_vue_type_script_lang.mjs.map

package/es/components/color-picker/src/components/hue-slider.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hue-slider.vue_vue_type_script_lang.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/hue-slider.vue"],"sourcesContent":["<template>\n  <div class=\"el-color-hue-slider\" :class=\"{ 'is-vertical': vertical }\">\n    <div ref=\"bar\" class=\"el-color-hue-slider__bar\" @click=\"handleClick\"></div>\n    <div\n      ref=\"thumb\"\n      class=\"el-color-hue-slider__thumb\"\n      :style=\"{\n        left: thumbLeft + 'px',\n        top: thumbTop + 'px',\n      }\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  ref,\n  computed,\n  watch,\n  onMounted,\n  getCurrentInstance,\n  defineComponent,\n} from 'vue'\nimport { getClientXY } from '@element-plus/utils/dom'\nimport draggable from '../draggable'\n\nimport type { PropType } from 'vue'\nimport type Color from '../color'\n\nexport default defineComponent({\n  name: 'ElColorHueSlider',\n\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n\n    vertical: Boolean,\n  },\n  setup(props) {\n    const instance = getCurrentInstance()\n    // ref\n    const thumb = ref<HTMLElement | null>(null)\n    const bar = ref<HTMLElement | null>(null)\n    // data\n    const thumbLeft = ref(0)\n    const thumbTop = ref(0)\n    // computed\n    const hueValue = computed(() => {\n      return props.color.get('hue')\n    })\n    // watch\n    watch(\n      () => hueValue.value,\n      () => {\n        update()\n      }\n    )\n\n    // methods\n    function handleClick(event: Event) {\n      const target = event.target\n\n      if (target !== thumb.value) {\n        handleDrag(event)\n      }\n    }\n\n    function handleDrag(event) {\n      const el = instance.vnode.el as HTMLElement\n      const rect = el.getBoundingClientRect()\n      const { clientX, clientY } = getClientXY(event)\n      let hue\n\n      if (!props.vertical) {\n        let left = clientX - rect.left\n        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)\n        left = Math.max(thumb.value.offsetWidth / 2, left)\n\n        hue = Math.round(\n          ((left - thumb.value.offsetWidth / 2) /\n            (rect.width - thumb.value.offsetWidth)) *\n            360\n        )\n      } else {\n        let top = clientY - rect.top\n\n        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)\n        top = Math.max(thumb.value.offsetHeight / 2, top)\n        hue = Math.round(\n          ((top - thumb.value.offsetHeight / 2) /\n            (rect.height - thumb.value.offsetHeight)) *\n            360\n        )\n      }\n      props.color.set('hue', hue)\n    }\n\n    function getThumbLeft() {\n      const el = instance.vnode.el\n\n      if (props.vertical) return 0\n      const hue = props.color.get('hue')\n\n      if (!el) return 0\n      return Math.round(\n        (hue * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 360\n      )\n    }\n\n    function getThumbTop() {\n      const el = instance.vnode.el as HTMLElement\n      if (!props.vertical) return 0\n      const hue = props.color.get('hue')\n\n      if (!el) return 0\n      return Math.round(\n        (hue * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 360\n      )\n    }\n\n    function update() {\n      thumbLeft.value = getThumbLeft()\n      thumbTop.value = getThumbTop()\n    }\n\n    // mounded\n    onMounted(() => {\n      const dragConfig = {\n        drag: (event) => {\n          handleDrag(event)\n        },\n        end: (event) => {\n          handleDrag(event)\n        },\n      }\n\n      draggable(bar.value, dragConfig)\n      draggable(thumb.value, dragConfig)\n      update()\n    })\n\n    return {\n      bar,\n      thumb,\n      thumbLeft,\n      thumbTop,\n      hueValue,\n      handleClick,\n      update,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;AAwBA,aAAe,eAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE;AACT,IAAI,KAAK;;AAET,gBAAgB,IAAI;KACf;;GAEF;OACI,CAAC;UACE;UACA,QAAQ;IACd;;IAEA,MAAM,QAAQ,GAAG;;MAEf,OAAO;KACR,CAAC,CAAC;IACH,KAAK;MACH,MAAM,EAAE;KACT,CAAC,CAAC;IACH;MACE,MAAM,MAAM,QAAQ,CAAC;MACrB,IAAI,MAAM,KAAK,KAAK;QAClB;OACD;;IAEH;;MAEE;MACA,MAAM,EAAE,OAAO,EAAE;MACjB,IAAI;UACA,CAAC;;;;QAIH,GAAG;OACJ,MAAM;QACL,IAAI,GAAG,UAAU,GAAG,IAAI;;WAErB,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK;QAC1B,GAAG,GAAG,IAAI,CAAC,KAAK;;;;IAIpB,SAAS,YAAY,GAAG;MACtB,MAAM,KAAK,QAAQ,CAAC,KAAK,CAAC,GAAG;MAC7B,IAAI,KAAK,SAAS;QAChB,OAAO,CAAC,CAAC;MACX,MAAM;;eAEG,CAAC,CAAC;aACJ,IAAI,MAAM,CAAC,GAAG,IAAI,EAAE,CAAC;;aAErB,WAAW,GAAG;;UAEjB,MAAM,CAAC;eACF,EAAE;YACL,GAAG,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;aAC5B;QACL;MACF,OAAO;;;eAGE,CAAC,KAAK,GAAG,YAAY,EAAE;cACxB,CAAC,KAAK,GAAG,WAAW,EAAE,CAAC;;aAExB,CAAC,MAAM;YACR,UAAU,GAAG;YACb,EAAE;;;QAGN,GAAG,EAAE,CAAC,KAAK,KAAK;;;OAGjB,CAAC;MACF,SAAS,IAAI,CAAC,KAAK,EAAE;;MAErB,MAAM,EAAE,CAAC;MACT,CAAC;;MAED,GAAG;MACH,KAAK;eACI;MACT;;;MAGA;MACA;;;;;;"}

package/es/components/color-picker/src/components/hue-slider.vue_vue_type_template_id_129d2b72_lang.mjs

@@ -0,0 +1,24 @@
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["el-color-hue-slider", { "is-vertical": _ctx.vertical }])
+  }, [
+    createElementVNode("div", {
+      ref: "bar",
+      class: "el-color-hue-slider__bar",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    }, null, 512),
+    createElementVNode("div", {
+      ref: "thumb",
+      class: "el-color-hue-slider__thumb",
+      style: normalizeStyle({
+        left: _ctx.thumbLeft + "px",
+        top: _ctx.thumbTop + "px"
+      })
+    }, null, 4)
+  ], 2);
+}
+
+export { render };
+//# sourceMappingURL=hue-slider.vue_vue_type_template_id_129d2b72_lang.mjs.map

package/es/components/color-picker/src/components/hue-slider.vue_vue_type_template_id_129d2b72_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hue-slider.vue_vue_type_template_id_129d2b72_lang.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/hue-slider.vue?vue&type=template&id=129d2b72&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-color-hue-slider\" :class=\"{ 'is-vertical': vertical }\">\n    <div ref=\"bar\" class=\"el-color-hue-slider__bar\" @click=\"handleClick\"></div>\n    <div\n      ref=\"thumb\"\n      class=\"el-color-hue-slider__thumb\"\n      :style=\"{\n        left: thumbLeft + 'px',\n        top: thumbTop + 'px',\n      }\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  ref,\n  computed,\n  watch,\n  onMounted,\n  getCurrentInstance,\n  defineComponent,\n} from 'vue'\nimport { getClientXY } from '@element-plus/utils/dom'\nimport draggable from '../draggable'\n\nimport type { PropType } from 'vue'\nimport type Color from '../color'\n\nexport default defineComponent({\n  name: 'ElColorHueSlider',\n\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n\n    vertical: Boolean,\n  },\n  setup(props) {\n    const instance = getCurrentInstance()\n    // ref\n    const thumb = ref<HTMLElement | null>(null)\n    const bar = ref<HTMLElement | null>(null)\n    // data\n    const thumbLeft = ref(0)\n    const thumbTop = ref(0)\n    // computed\n    const hueValue = computed(() => {\n      return props.color.get('hue')\n    })\n    // watch\n    watch(\n      () => hueValue.value,\n      () => {\n        update()\n      }\n    )\n\n    // methods\n    function handleClick(event: Event) {\n      const target = event.target\n\n      if (target !== thumb.value) {\n        handleDrag(event)\n      }\n    }\n\n    function handleDrag(event) {\n      const el = instance.vnode.el as HTMLElement\n      const rect = el.getBoundingClientRect()\n      const { clientX, clientY } = getClientXY(event)\n      let hue\n\n      if (!props.vertical) {\n        let left = clientX - rect.left\n        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)\n        left = Math.max(thumb.value.offsetWidth / 2, left)\n\n        hue = Math.round(\n          ((left - thumb.value.offsetWidth / 2) /\n            (rect.width - thumb.value.offsetWidth)) *\n            360\n        )\n      } else {\n        let top = clientY - rect.top\n\n        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)\n        top = Math.max(thumb.value.offsetHeight / 2, top)\n        hue = Math.round(\n          ((top - thumb.value.offsetHeight / 2) /\n            (rect.height - thumb.value.offsetHeight)) *\n            360\n        )\n      }\n      props.color.set('hue', hue)\n    }\n\n    function getThumbLeft() {\n      const el = instance.vnode.el\n\n      if (props.vertical) return 0\n      const hue = props.color.get('hue')\n\n      if (!el) return 0\n      return Math.round(\n        (hue * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 360\n      )\n    }\n\n    function getThumbTop() {\n      const el = instance.vnode.el as HTMLElement\n      if (!props.vertical) return 0\n      const hue = props.color.get('hue')\n\n      if (!el) return 0\n      return Math.round(\n        (hue * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 360\n      )\n    }\n\n    function update() {\n      thumbLeft.value = getThumbLeft()\n      thumbTop.value = getThumbTop()\n    }\n\n    // mounded\n    onMounted(() => {\n      const dragConfig = {\n        drag: (event) => {\n          handleDrag(event)\n        },\n        end: (event) => {\n          handleDrag(event)\n        },\n      }\n\n      draggable(bar.value, dragConfig)\n      draggable(thumb.value, dragConfig)\n      update()\n    })\n\n    return {\n      bar,\n      thumb,\n      thumbLeft,\n      thumbTop,\n      hueValue,\n      handleClick,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle"],"mappings":";;;;;;;;MAES,KAAI;MAAM,OAAM;aAAiC;;;MAEpD,KAAI;MACJ,KAAK,EAACA;;;;;;;;;;"}

package/es/components/color-picker/src/components/predefine.mjs

@@ -0,0 +1,7 @@
+import script from './predefine.vue_vue_type_script_lang.mjs';
+export { default } from './predefine.vue_vue_type_script_lang.mjs';
+import { render } from './predefine.vue_vue_type_template_id_391a669c_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/color-picker/src/components/predefine.vue";
+//# sourceMappingURL=predefine.mjs.map

package/es/components/color-picker/src/components/predefine.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"predefine.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/components/color-picker/src/components/predefine.vue.d.ts

@@ -0,0 +1,22 @@
+import Color from '../color';
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    colors: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    color: {
+        type: PropType<Color>;
+        required: true;
+    };
+}, {
+    rgbaColors: any;
+    handleSelect: (index: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    colors?: unknown;
+    color?: unknown;
+} & {
+    color: Color;
+    colors: unknown[];
+} & {}>, {}>;
+export default _default;

package/es/components/color-picker/src/components/predefine.vue_vue_type_script_lang.mjs

@@ -0,0 +1,47 @@
+import { defineComponent, ref, watch, watchEffect } from 'vue';
+import { useOptions } from '../useOption.mjs';
+import Color from '../color.mjs';
+
+var script = defineComponent({
+  props: {
+    colors: { type: Array, required: true },
+    color: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const { currentColor } = useOptions();
+    const rgbaColors = ref(parseColors(props.colors, props.color));
+    watch(() => currentColor.value, (val) => {
+      const color = new Color();
+      color.fromString(val);
+      rgbaColors.value.forEach((item) => {
+        item.selected = color.compare(item);
+      });
+    });
+    watchEffect(() => {
+      rgbaColors.value = parseColors(props.colors, props.color);
+    });
+    function handleSelect(index) {
+      props.color.fromString(props.colors[index]);
+    }
+    function parseColors(colors, color) {
+      return colors.map((value) => {
+        const c = new Color();
+        c.enableAlpha = true;
+        c.format = "rgba";
+        c.fromString(value);
+        c.selected = c.value === color.value;
+        return c;
+      });
+    }
+    return {
+      rgbaColors,
+      handleSelect
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=predefine.vue_vue_type_script_lang.mjs.map

package/es/components/color-picker/src/components/predefine.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"predefine.vue_vue_type_script_lang.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/predefine.vue"],"sourcesContent":["<template>\n  <div class=\"el-color-predefine\">\n    <div class=\"el-color-predefine__colors\">\n      <div\n        v-for=\"(item, index) in rgbaColors\"\n        :key=\"colors[index]\"\n        class=\"el-color-predefine__color-selector\"\n        :class=\"{ selected: item.selected, 'is-alpha': item._alpha < 100 }\"\n        @click=\"handleSelect(index)\"\n      >\n        <div :style=\"{ backgroundColor: item.value }\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { ref, watch, watchEffect, defineComponent } from 'vue'\nimport { useOptions } from '../useOption'\nimport Color from '../color'\n\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  props: {\n    colors: { type: Array, required: true },\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const { currentColor } = useOptions()\n    //data\n    const rgbaColors = ref(parseColors(props.colors, props.color))\n\n    //watch\n    watch(\n      () => currentColor.value,\n      (val) => {\n        const color = new Color()\n        color.fromString(val)\n\n        rgbaColors.value.forEach((item) => {\n          item.selected = color.compare(item)\n        })\n      }\n    )\n    watchEffect(() => {\n      rgbaColors.value = parseColors(props.colors, props.color)\n    })\n\n    function handleSelect(index) {\n      props.color.fromString(props.colors[index])\n    }\n    function parseColors(colors, color) {\n      return colors.map((value) => {\n        const c = new Color()\n        c.enableAlpha = true\n        c.format = 'rgba'\n        c.fromString(value)\n        c.selected = c.value === color.value\n        return c\n      })\n    }\n    return {\n      rgbaColors,\n      handleSelect,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;AAmBA,aAAe;;AAEf,IAAI,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;;AAE3B,UAAU,EAAE,MAAM;MACZ;KACD;;OAEE,CAAC,KAAK,EAAE;UACL,EAAE;IACR;;MAEE,MAAM;MACN,MAAM,UAAU,CAAC,IAAI;MACrB;QACE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;;KAEvC,CAAC,CAAC;IACH;MACE,UAAU,CAAC,KAAK,GAAG;MACnB,CAAC;0BACmB,KAAK;WACpB,CAAC,KAAK,CAAC,UAAU;;aAEf,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE;aAC3B,MAAM,CAAC,IAAI,MAAM,KAAK;QAC3B;;;QAGA,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC,QAAQ,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC;;;KAGxC;WACM;;MAEL,YAAY;MACZ;;;;;;"}

package/es/components/color-picker/src/components/predefine.vue_vue_type_template_id_391a669c_lang.mjs

@@ -0,0 +1,25 @@
+import { openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, normalizeStyle } from 'vue';
+
+const _hoisted_1 = { class: "el-color-predefine" };
+const _hoisted_2 = { class: "el-color-predefine__colors" };
+const _hoisted_3 = ["onClick"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rgbaColors, (item, index) => {
+        return openBlock(), createElementBlock("div", {
+          key: _ctx.colors[index],
+          class: normalizeClass(["el-color-predefine__color-selector", { selected: item.selected, "is-alpha": item._alpha < 100 }]),
+          onClick: ($event) => _ctx.handleSelect(index)
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle({ backgroundColor: item.value })
+          }, null, 4)
+        ], 10, _hoisted_3);
+      }), 128))
+    ])
+  ]);
+}
+
+export { render };
+//# sourceMappingURL=predefine.vue_vue_type_template_id_391a669c_lang.mjs.map

package/es/components/color-picker/src/components/predefine.vue_vue_type_template_id_391a669c_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"predefine.vue_vue_type_template_id_391a669c_lang.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/predefine.vue?vue&type=template&id=391a669c&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-color-predefine\">\n    <div class=\"el-color-predefine__colors\">\n      <div\n        v-for=\"(item, index) in rgbaColors\"\n        :key=\"colors[index]\"\n        class=\"el-color-predefine__color-selector\"\n        :class=\"{ selected: item.selected, 'is-alpha': item._alpha < 100 }\"\n        @click=\"handleSelect(index)\"\n      >\n        <div :style=\"{ backgroundColor: item.value }\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { ref, watch, watchEffect, defineComponent } from 'vue'\nimport { useOptions } from '../useOption'\nimport Color from '../color'\n\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  props: {\n    colors: { type: Array, required: true },\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const { currentColor } = useOptions()\n    //data\n    const rgbaColors = ref(parseColors(props.colors, props.color))\n\n    //watch\n    watch(\n      () => currentColor.value,\n      (val) => {\n        const color = new Color()\n        color.fromString(val)\n\n        rgbaColors.value.forEach((item) => {\n          item.selected = color.compare(item)\n        })\n      }\n    )\n    watchEffect(() => {\n      rgbaColors.value = parseColors(props.colors, props.color)\n    })\n\n    function handleSelect(index) {\n      props.color.fromString(props.colors[index])\n    }\n    function parseColors(colors, color) {\n      return colors.map((value) => {\n        const c = new Color()\n        c.enableAlpha = true\n        c.format = 'rgba'\n        c.fromString(value)\n        c.selected = c.value === color.value\n        return c\n      })\n    }\n    return {\n      rgbaColors,\n      handleSelect,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;qBACO,KAAK,EAAC;;;;;;;;;UAIJ,gBAAW;;UAGXA,mBAAO;;;;;;;;;;;"}

package/es/components/color-picker/src/components/sv-panel.mjs

@@ -0,0 +1,7 @@
+import script from './sv-panel.vue_vue_type_script_lang.mjs';
+export { default } from './sv-panel.vue_vue_type_script_lang.mjs';
+import { render } from './sv-panel.vue_vue_type_template_id_67046d94_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/color-picker/src/components/sv-panel.vue";
+//# sourceMappingURL=sv-panel.mjs.map

package/es/components/color-picker/src/components/sv-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-panel.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/components/color-picker/src/components/sv-panel.vue.d.ts

@@ -0,0 +1,23 @@
+import type { PropType } from 'vue';
+import type Color from '../color';
+declare const _default: import("vue").DefineComponent<{
+    color: {
+        type: PropType<Color>;
+        required: true;
+    };
+}, {
+    cursorTop: import("vue").Ref<number>;
+    cursorLeft: import("vue").Ref<number>;
+    background: import("vue").Ref<string>;
+    colorValue: import("vue").ComputedRef<{
+        hue: any;
+        value: any;
+    }>;
+    handleDrag: (event: any) => void;
+    update: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    color?: unknown;
+} & {
+    color: Color;
+} & {}>, {}>;
+export default _default;

package/es/components/color-picker/src/components/sv-panel.vue_vue_type_script_lang.mjs

@@ -0,0 +1,75 @@
+import { defineComponent, getCurrentInstance, ref, computed, watch, onMounted } from 'vue';
+import { getClientXY } from '../../../../utils/dom.mjs';
+import draggable from '../draggable.mjs';
+
+var script = defineComponent({
+  name: "ElSlPanel",
+  props: {
+    color: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const instance = getCurrentInstance();
+    const cursorTop = ref(0);
+    const cursorLeft = ref(0);
+    const background = ref("hsl(0, 100%, 50%)");
+    const colorValue = computed(() => {
+      const hue = props.color.get("hue");
+      const value = props.color.get("value");
+      return { hue, value };
+    });
+    function update() {
+      const saturation = props.color.get("saturation");
+      const value = props.color.get("value");
+      const el = instance.vnode.el;
+      const { clientWidth: width, clientHeight: height } = el;
+      cursorLeft.value = saturation * width / 100;
+      cursorTop.value = (100 - value) * height / 100;
+      background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
+    }
+    function handleDrag(event) {
+      const el = instance.vnode.el;
+      const rect = el.getBoundingClientRect();
+      const { clientX, clientY } = getClientXY(event);
+      let left = clientX - rect.left;
+      let top = clientY - rect.top;
+      left = Math.max(0, left);
+      left = Math.min(left, rect.width);
+      top = Math.max(0, top);
+      top = Math.min(top, rect.height);
+      cursorLeft.value = left;
+      cursorTop.value = top;
+      props.color.set({
+        saturation: left / rect.width * 100,
+        value: 100 - top / rect.height * 100
+      });
+    }
+    watch(() => colorValue.value, () => {
+      update();
+    });
+    onMounted(() => {
+      draggable(instance.vnode.el, {
+        drag: (event) => {
+          handleDrag(event);
+        },
+        end: (event) => {
+          handleDrag(event);
+        }
+      });
+      update();
+    });
+    return {
+      cursorTop,
+      cursorLeft,
+      background,
+      colorValue,
+      handleDrag,
+      update
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=sv-panel.vue_vue_type_script_lang.mjs.map

package/es/components/color-picker/src/components/sv-panel.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-panel.vue_vue_type_script_lang.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/sv-panel.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-color-svpanel\"\n    :style=\"{\n      backgroundColor: background,\n    }\"\n  >\n    <div class=\"el-color-svpanel__white\"></div>\n    <div class=\"el-color-svpanel__black\"></div>\n    <div\n      class=\"el-color-svpanel__cursor\"\n      :style=\"{\n        top: cursorTop + 'px',\n        left: cursorLeft + 'px',\n      }\"\n    >\n      <div></div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  watch,\n  getCurrentInstance,\n  onMounted,\n} from 'vue'\nimport { getClientXY } from '@element-plus/utils/dom'\nimport draggable from '../draggable'\n\nimport type { PropType } from 'vue'\nimport type Color from '../color'\n\nexport default defineComponent({\n  name: 'ElSlPanel',\n\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n  },\n  setup(props) {\n    // instance\n    const instance = getCurrentInstance()\n    // data\n    const cursorTop = ref(0)\n    const cursorLeft = ref(0)\n    const background = ref('hsl(0, 100%, 50%)')\n    const colorValue = computed(() => {\n      const hue = props.color.get('hue')\n      const value = props.color.get('value')\n      return { hue, value }\n    })\n\n    // methods\n    function update() {\n      const saturation = props.color.get('saturation')\n      const value = props.color.get('value')\n\n      const el = instance.vnode.el\n      const { clientWidth: width, clientHeight: height } = el\n\n      cursorLeft.value = (saturation * width) / 100\n      cursorTop.value = ((100 - value) * height) / 100\n\n      background.value = `hsl(${props.color.get('hue')}, 100%, 50%)`\n    }\n\n    function handleDrag(event) {\n      const el = instance.vnode.el\n      const rect = el.getBoundingClientRect()\n      const { clientX, clientY } = getClientXY(event)\n\n      let left = clientX - rect.left\n      let top = clientY - rect.top\n      left = Math.max(0, left)\n      left = Math.min(left, rect.width)\n\n      top = Math.max(0, top)\n      top = Math.min(top, rect.height)\n\n      cursorLeft.value = left\n      cursorTop.value = top\n      props.color.set({\n        saturation: (left / rect.width) * 100,\n        value: 100 - (top / rect.height) * 100,\n      })\n    }\n\n    // watch\n    watch(\n      () => colorValue.value,\n      () => {\n        update()\n      }\n    )\n    // mounted\n    onMounted(() => {\n      draggable(instance.vnode.el as HTMLElement, {\n        drag: (event) => {\n          handleDrag(event)\n        },\n        end: (event) => {\n          handleDrag(event)\n        },\n      })\n\n      update()\n    })\n    return {\n      cursorTop,\n      cursorLeft,\n      background,\n      colorValue,\n      handleDrag,\n      update,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;AA+BA,aAAe,eAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE;AACT,IAAI,KAAK;;AAET,gBAAgB,IAAI;KACf;;EAEH,KAAK;IACH;UACM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;UACnB,UAAU;IAChB;;MAEE,MAAM,GAAG;YACH;MACN,OAAO,EAAE,UAAU,EAAE,CAAC;KACvB,EAAE;IACH,SAAS,SAAS;MAChB,MAAM,aAAa;MACnB,MAAM,KAAK,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;MACvC,MAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG;MAC7B,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE;MAC5B,UAAU,MAAM,GAAG,UAAU,GAAG,KAAK;MACrC,SAAS,CAAC,KAAK,GAAG;;;IAGpB,SAAS;MACP,QAAQ,GAAG;MACX,MAAM,IAAI,GAAG,EAAE,sBAAsB,EAAE,CAAC;MACxC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG;;MAE7B,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC;MACzB,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;;MAEzB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;MACvB,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,IAAI,OAAO,EAAE;;MAEjC,SAAS,CAAC,KAAK,MAAM,CAAC;;;QAGpB,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI;OACxB,CAAC,CAAC;;SAEA,CAAC,MAAM,UAAU,CAAC,aAAa;;MAElC,CAAC;cACO,MAAM;MACd,SAAS,CAAC,SAAS;QACjB,MAAM,CAAC,KAAK,KAAK;;;QAGjB,KAAK,CAAC,KAAK,KAAK;;SAEf;OACF,CAAC,CAAC;MACH,MAAM,EAAE,CAAC;;WAEJ;MACL;;;;MAIA;MACA,MAAM;MACN;;;;;;"}

package/es/components/color-picker/src/components/sv-panel.vue_vue_type_template_id_67046d94_lang.mjs

@@ -0,0 +1,29 @@
+import { createElementVNode, openBlock, createElementBlock, normalizeStyle } from 'vue';
+
+const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "el-color-svpanel__white" }, null, -1);
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "el-color-svpanel__black" }, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", null, null, -1);
+const _hoisted_4 = [
+  _hoisted_3
+];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: "el-color-svpanel",
+    style: normalizeStyle({
+      backgroundColor: _ctx.background
+    })
+  }, [
+    _hoisted_1,
+    _hoisted_2,
+    createElementVNode("div", {
+      class: "el-color-svpanel__cursor",
+      style: normalizeStyle({
+        top: _ctx.cursorTop + "px",
+        left: _ctx.cursorLeft + "px"
+      })
+    }, _hoisted_4, 4)
+  ], 4);
+}
+
+export { render };
+//# sourceMappingURL=sv-panel.vue_vue_type_template_id_67046d94_lang.mjs.map

package/es/components/color-picker/src/components/sv-panel.vue_vue_type_template_id_67046d94_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-panel.vue_vue_type_template_id_67046d94_lang.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/sv-panel.vue?vue&type=template&id=67046d94&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-color-svpanel\"\n    :style=\"{\n      backgroundColor: background,\n    }\"\n  >\n    <div class=\"el-color-svpanel__white\"></div>\n    <div class=\"el-color-svpanel__black\"></div>\n    <div\n      class=\"el-color-svpanel__cursor\"\n      :style=\"{\n        top: cursorTop + 'px',\n        left: cursorLeft + 'px',\n      }\"\n    >\n      <div></div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  watch,\n  getCurrentInstance,\n  onMounted,\n} from 'vue'\nimport { getClientXY } from '@element-plus/utils/dom'\nimport draggable from '../draggable'\n\nimport type { PropType } from 'vue'\nimport type Color from '../color'\n\nexport default defineComponent({\n  name: 'ElSlPanel',\n\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n  },\n  setup(props) {\n    // instance\n    const instance = getCurrentInstance()\n    // data\n    const cursorTop = ref(0)\n    const cursorLeft = ref(0)\n    const background = ref('hsl(0, 100%, 50%)')\n    const colorValue = computed(() => {\n      const hue = props.color.get('hue')\n      const value = props.color.get('value')\n      return { hue, value }\n    })\n\n    // methods\n    function update() {\n      const saturation = props.color.get('saturation')\n      const value = props.color.get('value')\n\n      const el = instance.vnode.el\n      const { clientWidth: width, clientHeight: height } = el\n\n      cursorLeft.value = (saturation * width) / 100\n      cursorTop.value = ((100 - value) * height) / 100\n\n      background.value = `hsl(${props.color.get('hue')}, 100%, 50%)`\n    }\n\n    function handleDrag(event) {\n      const el = instance.vnode.el\n      const rect = el.getBoundingClientRect()\n      const { clientX, clientY } = getClientXY(event)\n\n      let left = clientX - rect.left\n      let top = clientY - rect.top\n      left = Math.max(0, left)\n      left = Math.min(left, rect.width)\n\n      top = Math.max(0, top)\n      top = Math.min(top, rect.height)\n\n      cursorLeft.value = left\n      cursorTop.value = top\n      props.color.set({\n        saturation: (left / rect.width) * 100,\n        value: 100 - (top / rect.height) * 100,\n      })\n    }\n\n    // watch\n    watch(\n      () => colorValue.value,\n      () => {\n        update()\n      }\n    )\n    // mounted\n    onMounted(() => {\n      draggable(instance.vnode.el as HTMLElement, {\n        drag: (event) => {\n          handleDrag(event)\n        },\n        end: (event) => {\n          handleDrag(event)\n        },\n      })\n\n      update()\n    })\n    return {\n      cursorTop,\n      cursorLeft,\n      background,\n      colorValue,\n      handleDrag,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;iEAQc,EAAC;;;EAQT;;;;;;;;;;IATFA;;;WAGO,EAAC;;;;;;;;;"}

package/es/components/color-picker/src/draggable.d.ts

@@ -0,0 +1,6 @@
+export declare interface IOptions {
+    drag?: (event: Event) => void;
+    start?: (event: Event) => void;
+    end?: (event: Event) => void;
+}
+export default function (element: HTMLElement, options: IOptions): void;

package/es/components/color-picker/src/draggable.mjs

@@ -0,0 +1,42 @@
+import { isClient } from '@vueuse/core';
+import { off, on } from '../../../utils/dom.mjs';
+
+let isDragging = false;
+function draggable(element, options) {
+  if (!isClient)
+    return;
+  const moveFn = function(event) {
+    var _a;
+    (_a = options.drag) == null ? void 0 : _a.call(options, event);
+  };
+  const upFn = function(event) {
+    var _a;
+    off(document, "mousemove", moveFn);
+    off(document, "mouseup", upFn);
+    off(document, "touchmove", moveFn);
+    off(document, "touchend", upFn);
+    document.onselectstart = null;
+    document.ondragstart = null;
+    isDragging = false;
+    (_a = options.end) == null ? void 0 : _a.call(options, event);
+  };
+  const downFn = function(event) {
+    var _a;
+    if (isDragging)
+      return;
+    event.preventDefault();
+    document.onselectstart = () => false;
+    document.ondragstart = () => false;
+    on(document, "mousemove", moveFn);
+    on(document, "mouseup", upFn);
+    on(document, "touchmove", moveFn);
+    on(document, "touchend", upFn);
+    isDragging = true;
+    (_a = options.start) == null ? void 0 : _a.call(options, event);
+  };
+  on(element, "mousedown", downFn);
+  on(element, "touchstart", downFn);
+}
+
+export { draggable as default };
+//# sourceMappingURL=draggable.mjs.map

package/es/components/color-picker/src/draggable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.mjs","sources":["../../../../../../packages/components/color-picker/src/draggable.ts"],"sourcesContent":["import { isClient } from '@vueuse/core'\nimport { on, off } from '@element-plus/utils/dom'\n\nlet isDragging = false\n\nexport declare interface IOptions {\n  drag?: (event: Event) => void\n  start?: (event: Event) => void\n  end?: (event: Event) => void\n}\n\nexport default function (element: HTMLElement, options: IOptions) {\n  if (!isClient) return\n\n  const moveFn = function (event: Event) {\n    options.drag?.(event)\n  }\n\n  const upFn = function (event: Event) {\n    off(document, 'mousemove', moveFn)\n    off(document, 'mouseup', upFn)\n    off(document, 'touchmove', moveFn)\n    off(document, 'touchend', upFn)\n    document.onselectstart = null\n    document.ondragstart = null\n\n    isDragging = false\n\n    options.end?.(event)\n  }\n\n  const downFn = function (event: Event) {\n    if (isDragging) return\n    event.preventDefault()\n    document.onselectstart = () => false\n    document.ondragstart = () => false\n    on(document, 'mousemove', moveFn)\n    on(document, 'mouseup', upFn)\n    on(document, 'touchmove', moveFn)\n    on(document, 'touchend', upFn)\n\n    isDragging = true\n\n    options.start?.(event)\n  }\n\n  on(element, 'mousedown', downFn)\n  on(element, 'touchstart', downFn)\n}\n"],"names":[],"mappings":";;;AAEA,IAAI,UAAU,GAAG,KAAK,CAAC;AACR,kBAAQ,CAAC,OAAO,EAAE,OAAO,EAAE;AAC1C,EAAE,IAAI,CAAC,QAAQ;AACf,IAAI,OAAO;AACX,EAAE,MAAM,MAAM,GAAG,SAAS,KAAK,EAAE;AACjC,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACnE,GAAG,CAAC;AACJ,EAAE,MAAM,IAAI,GAAG,SAAS,KAAK,EAAE;AAC/B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AACvC,IAAI,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;AACnC,IAAI,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AACvC,IAAI,GAAG,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;AACpC,IAAI,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC;AAClC,IAAI,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;AAChC,IAAI,UAAU,GAAG,KAAK,CAAC;AACvB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAClE,GAAG,CAAC;AACJ,EAAE,MAAM,MAAM,GAAG,SAAS,KAAK,EAAE;AACjC,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,UAAU;AAClB,MAAM,OAAO;AACb,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,IAAI,QAAQ,CAAC,aAAa,GAAG,MAAM,KAAK,CAAC;AACzC,IAAI,QAAQ,CAAC,WAAW,GAAG,MAAM,KAAK,CAAC;AACvC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AACtC,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;AAClC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AACtC,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;AACnC,IAAI,UAAU,GAAG,IAAI,CAAC;AACtB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACpE,GAAG,CAAC;AACJ,EAAE,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AACnC,EAAE,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;AACpC;;;;"}

package/es/components/color-picker/src/index.mjs

@@ -0,0 +1,7 @@
+import script from './index.vue_vue_type_script_lang.mjs';
+export { default } from './index.vue_vue_type_script_lang.mjs';
+import { render } from './index.vue_vue_type_template_id_46a474d5_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/color-picker/src/index.vue";
+//# sourceMappingURL=index.mjs.map

package/es/components/color-picker/src/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/components/color-picker/src/index.vue.d.ts

@@ -0,0 +1,60 @@
+import { Effect } from 'element-plus/es/components/popper';
+import Color from './color';
+import type { PropType } from 'vue';
+import type { ComponentSize } from 'element-plus/es/utils/types';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: StringConstructor;
+    showAlpha: BooleanConstructor;
+    colorFormat: StringConstructor;
+    disabled: BooleanConstructor;
+    size: {
+        type: PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
+    popperClass: StringConstructor;
+    predefine: ArrayConstructor;
+}, {
+    Effect: typeof Effect;
+    color: Color;
+    colorDisabled: import("vue").ComputedRef<boolean | undefined>;
+    colorSize: import("vue").ComputedRef<"medium" | "mini" | ComponentSize>;
+    displayedColor: import("vue").ComputedRef<string>;
+    showPanelColor: import("vue").Ref<boolean>;
+    showPicker: import("vue").Ref<boolean>;
+    customInput: import("vue").Ref<string>;
+    handleConfirm: () => void;
+    hide: () => void;
+    handleTrigger: () => void;
+    clear: () => void;
+    confirmValue: () => void;
+    t: import("element-plus/es/hooks").Translator;
+    hue: import("vue").Ref<null>;
+    svPanel: import("vue").Ref<null>;
+    alpha: import("vue").Ref<null>;
+    popper: import("vue").Ref<null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "active-change")[], "update:modelValue" | "change" | "active-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    modelValue?: unknown;
+    showAlpha?: unknown;
+    colorFormat?: unknown;
+    disabled?: unknown;
+    size?: unknown;
+    popperClass?: unknown;
+    predefine?: unknown;
+} & {
+    disabled: boolean;
+    showAlpha: boolean;
+} & {
+    size?: ComponentSize | undefined;
+    modelValue?: string | undefined;
+    popperClass?: string | undefined;
+    colorFormat?: string | undefined;
+    predefine?: unknown[] | undefined;
+}> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onActive-change"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    showAlpha: boolean;
+}>;
+export default _default;