element-plus 1.2.0-beta.2 → 1.2.0-beta.6

package/es/components/color-picker/src/components/alpha-slider.vue_vue_type_template_id_4fb2624c_lang.mjs

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

package/es/components/color-picker/src/components/alpha-slider.vue_vue_type_template_id_4fb2624c_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha-slider.vue_vue_type_template_id_4fb2624c_lang.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/alpha-slider.vue?vue&type=template&id=4fb2624c&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-color-alpha-slider\" :class=\"{ 'is-vertical': vertical }\">\n    <div\n      ref=\"bar\"\n      class=\"el-color-alpha-slider__bar\"\n      :style=\"{\n        background,\n      }\"\n      @click=\"handleClick\"\n    ></div>\n    <div\n      ref=\"thumb\"\n      class=\"el-color-alpha-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  defineComponent,\n  watch,\n  ref,\n  onMounted,\n  getCurrentInstance,\n  shallowRef,\n} from 'vue'\nimport { getClientXY } from '@element-plus/utils/dom'\nimport draggable from '../draggable'\n\nimport type { PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type Color from '../color'\n\nexport default defineComponent({\n  name: 'ElColorAlphaSlider',\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n    vertical: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const instance = getCurrentInstance()\n    // ref\n    const thumb = shallowRef<Nullable<HTMLElement>>(null)\n    const bar = shallowRef<Nullable<HTMLElement>>(null)\n\n    // data\n    const thumbLeft = ref(0)\n    const thumbTop = ref(0)\n    const background = ref<Nullable<string>>(null)\n\n    watch(\n      () => props.color.get('alpha'),\n      () => {\n        update()\n      }\n    )\n    watch(\n      () => props.color.value,\n      () => {\n        update()\n      }\n    )\n\n    //methods\n    function getThumbLeft() {\n      if (props.vertical) return 0\n      const el = instance.vnode.el\n      const alpha = props.color.get('alpha')\n\n      if (!el) return 0\n      return Math.round(\n        (alpha * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 100\n      )\n    }\n\n    function getThumbTop() {\n      const el = instance.vnode.el\n      if (!props.vertical) return 0\n      const alpha = props.color.get('alpha')\n\n      if (!el) return 0\n      return Math.round(\n        (alpha * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 100\n      )\n    }\n\n    function getBackground() {\n      if (props.color && props.color.value) {\n        const { r, g, b } = props.color.toRgb()\n        return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`\n      }\n      return null\n    }\n\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\n      if (!props.vertical) {\n        let left = clientX - rect.left\n        left = Math.max(thumb.value.offsetWidth / 2, left)\n        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)\n\n        props.color.set(\n          'alpha',\n          Math.round(\n            ((left - thumb.value.offsetWidth / 2) /\n              (rect.width - thumb.value.offsetWidth)) *\n              100\n          )\n        )\n      } else {\n        let top = clientY - rect.top\n        top = Math.max(thumb.value.offsetHeight / 2, top)\n        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)\n\n        props.color.set(\n          'alpha',\n          Math.round(\n            ((top - thumb.value.offsetHeight / 2) /\n              (rect.height - thumb.value.offsetHeight)) *\n              100\n          )\n        )\n      }\n    }\n\n    function update() {\n      thumbLeft.value = getThumbLeft()\n      thumbTop.value = getThumbTop()\n      background.value = getBackground()\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      thumb,\n      bar,\n      thumbLeft,\n      thumbTop,\n      background,\n      handleClick,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode"],"mappings":";;;sBACEA;IAAK,uBAAM,0CAAiD;;IAC1DC;MACE,KAAI;AAAA,MACJ,OAAM;AAAA,MACL;;;MAGA,gDAAO;;IAEVA;MACE,KAAI;AAAA,MACJ,OAAM;AAAA,MACL;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import script from './hue-slider.vue_vue&type=script&lang.mjs';
-export { default } from './hue-slider.vue_vue&type=script&lang.mjs';
-import { render } from './hue-slider.vue_vue&type=template&id=129d2b72&lang.mjs';
+import script from './hue-slider.vue_vue_type_script_lang.mjs';
+export { default } from './hue-slider.vue_vue_type_script_lang.mjs';
+import { render } from './hue-slider.vue_vue_type_template_id_129d2b72_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/color-picker/src/components/hue-slider.vue";

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":";;;;AA6BA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IAGZ,UAAU;AAAA;AAAA,EAEZ,MAAM,OAAO;AACX,UAAM,WAAW;AAEjB,UAAM,QAAQ,IAAwB;AACtC,UAAM,MAAM,IAAwB;AAEpC,UAAM,YAAY,IAAI;AACtB,UAAM,WAAW,IAAI;AAErB,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,MAAM,MAAM,IAAI;AAAA;AAGzB,UACE,MAAM,SAAS,OACf,MAAM;AACJ;AAAA;AAKJ,yBAAqB,OAAc;AACjC,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,MAAM,OAAO;AAC1B,mBAAW;AAAA;AAAA;AAIf,wBAAoB,OAAO;AACzB,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,GAAG;AAChB,YAAM,EAAE,SAAS,YAAY,YAAY;AACzC,UAAI;AAEJ,UAAI,CAAC,MAAM,UAAU;AACnB,YAAI,OAAO,UAAU,KAAK;AAC1B,eAAO,KAAK,IAAI,MAAM,KAAK,QAAQ,MAAM,MAAM,cAAc;AAC7D,eAAO,KAAK,IAAI,MAAM,MAAM,cAAc,GAAG;AAE7C,cAAM,KAAK,MACP,QAAO,MAAM,MAAM,cAAc,WAC3B,QAAQ,MAAM,MAAM,eAC1B;AAAA,aAEC;AACL,YAAI,MAAM,UAAU,KAAK;AAEzB,cAAM,KAAK,IAAI,KAAK,KAAK,SAAS,MAAM,MAAM,eAAe;AAC7D,cAAM,KAAK,IAAI,MAAM,MAAM,eAAe,GAAG;AAC7C,cAAM,KAAK,MACP,OAAM,MAAM,MAAM,eAAe,WAC3B,SAAS,MAAM,MAAM,gBAC3B;AAAA;AAGN,YAAM,MAAM,IAAI,OAAO;AAAA;AAGzB,4BAAwB;AACtB,YAAM,KAAK,SAAS,MAAM;AAE1B,UAAI,MAAM;AAAU,eAAO;AAC3B,YAAM,MAAM,MAAM,MAAM,IAAI;AAE5B,UAAI,CAAC;AAAI,eAAO;AAChB,aAAO,KAAK,MACT,UAAU,cAAc,MAAM,MAAM,cAAc,KAAM;AAAA;AAI7D,2BAAuB;AACrB,YAAM,KAAK,SAAS,MAAM;AAC1B,UAAI,CAAC,MAAM;AAAU,eAAO;AAC5B,YAAM,MAAM,MAAM,MAAM,IAAI;AAE5B,UAAI,CAAC;AAAI,eAAO;AAChB,aAAO,KAAK,MACT,UAAU,eAAe,MAAM,MAAM,eAAe,KAAM;AAAA;AAI/D,sBAAkB;AAChB,gBAAU,QAAQ;AAClB,eAAS,QAAQ;AAAA;AAInB,cAAU,MAAM;AACd,YAAM,aAAa;AAAA,QACjB,MAAM,CAAC,UAAU;AACf,qBAAW;AAAA;AAAA,QAEb,KAAK,CAAC,UAAU;AACd,qBAAW;AAAA;AAAA;AAIf,gBAAU,IAAI,OAAO;AACrB,gBAAU,MAAM,OAAO;AACvB;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

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":["_createElementBlock","_createElementVNode"],"mappings":";;;sBACEA;IAAK,uBAAM,wCAA+C;;IACxDC;MAAK,KAAI;AAAA,MAAM,OAAM;AAAA,MAA4B,gDAAO;;IACxDA;MACE,KAAI;AAAA,MACJ,OAAM;AAAA,MACL;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
-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';
+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";

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":";;;;AAuBA,aAAe,gBAAgB;AAAA,EAC7B,OAAO;AAAA,IACL,QAAQ,EAAE,MAAM,OAAO,UAAU;AAAA,IACjC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA;AAAA,EAGd,MAAM,OAAO;AACX,UAAM,EAAE,iBAAiB;AAEzB,UAAM,aAAa,IAAI,YAAY,MAAM,QAAQ,MAAM;AAGvD,UACE,MAAM,aAAa,OACnB,CAAC,QAAQ;AACP,YAAM,QAAQ,IAAI;AAClB,YAAM,WAAW;AAEjB,iBAAW,MAAM,QAAQ,CAAC,SAAS;AACjC,aAAK,WAAW,MAAM,QAAQ;AAAA;AAAA;AAIpC,gBAAY,MAAM;AAChB,iBAAW,QAAQ,YAAY,MAAM,QAAQ,MAAM;AAAA;AAGrD,0BAAsB,OAAO;AAC3B,YAAM,MAAM,WAAW,MAAM,OAAO;AAAA;AAEtC,yBAAqB,QAAQ,OAAO;AAClC,aAAO,OAAO,IAAI,CAAC,UAAU;AAC3B,cAAM,IAAI,IAAI;AACd,UAAE,cAAc;AAChB,UAAE,SAAS;AACX,UAAE,WAAW;AACb,UAAE,WAAW,EAAE,UAAU,MAAM;AAC/B,eAAO;AAAA;AAAA;AAGX,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

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":["_createElementBlock","_createElementVNode"],"mappings":";;qBACO,OAAM;qBACJ,OAAM;;;sBADbA,0BAAA;IACEC,0BAAA;wBACED,8CAC0B,kBAAhB,MAAM;4BADhBA;UAEG,KAAK,YAAO;AAAA,UACb,uBAAM,kDACc,KAAK,sBAAsB,KAAK;UACnD,qBAAO,kBAAa;AAAA;UAErBC;YAAM,yCAA0B,KAAK;AAAA;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
-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';
+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";

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":";;;;AAoCA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA;AAAA,EAGd,MAAM,OAAO;AAEX,UAAM,WAAW;AAEjB,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AACvB,UAAM,aAAa,IAAI;AACvB,UAAM,aAAa,SAAS,MAAM;AAChC,YAAM,MAAM,MAAM,MAAM,IAAI;AAC5B,YAAM,QAAQ,MAAM,MAAM,IAAI;AAC9B,aAAO,EAAE,KAAK;AAAA;AAIhB,sBAAkB;AAChB,YAAM,aAAa,MAAM,MAAM,IAAI;AACnC,YAAM,QAAQ,MAAM,MAAM,IAAI;AAE9B,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,EAAE,aAAa,OAAO,cAAc,WAAW;AAErD,iBAAW,QAAS,aAAa,QAAS;AAC1C,gBAAU,QAAU,OAAM,SAAS,SAAU;AAE7C,iBAAW,QAAQ,OAAO,MAAM,MAAM,IAAI;AAAA;AAG5C,wBAAoB,OAAO;AACzB,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,GAAG;AAChB,YAAM,EAAE,SAAS,YAAY,YAAY;AAEzC,UAAI,OAAO,UAAU,KAAK;AAC1B,UAAI,MAAM,UAAU,KAAK;AACzB,aAAO,KAAK,IAAI,GAAG;AACnB,aAAO,KAAK,IAAI,MAAM,KAAK;AAE3B,YAAM,KAAK,IAAI,GAAG;AAClB,YAAM,KAAK,IAAI,KAAK,KAAK;AAEzB,iBAAW,QAAQ;AACnB,gBAAU,QAAQ;AAClB,YAAM,MAAM,IAAI;AAAA,QACd,YAAa,OAAO,KAAK,QAAS;AAAA,QAClC,OAAO,MAAO,MAAM,KAAK,SAAU;AAAA;AAAA;AAKvC,UACE,MAAM,WAAW,OACjB,MAAM;AACJ;AAAA;AAIJ,cAAU,MAAM;AACd,gBAAU,SAAS,MAAM,IAAmB;AAAA,QAC1C,MAAM,CAAC,UAAU;AACf,qBAAW;AAAA;AAAA,QAEb,KAAK,CAAC,UAAU;AACd,qBAAW;AAAA;AAAA;AAIf;AAAA;AAEF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

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":["_createElementBlock","_createElementVNode"],"mappings":";;+DAOS,OAAM;+DACN,OAAM;;;EAQT;AAAA;;sBAfJA;IACE,OAAM;AAAA,IACL;;;;IAID;AAAA,IACA;AAAA,IACAC;MACE,OAAM;AAAA,MACL;;;;;;;;;;"}

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

@@ -13,22 +13,29 @@ function draggable(element, options) {
     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);
   };
-  on(element, "mousedown", function(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 };

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

@@ -1 +1 @@
-{"version":3,"file":"draggable.mjs","sources":["../../../../../../packages/components/color-picker/src/draggable.ts"],"sourcesContent":["import isServer from '@element-plus/utils/isServer'\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 (isServer) 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    document.onselectstart = null\n    document.ondragstart = null\n\n    isDragging = false\n\n    options.end?.(event)\n  }\n\n  on(element, 'mousedown', function (event) {\n    if (isDragging) return\n    document.onselectstart = () => false\n    document.ondragstart = () => false\n    on(document, 'mousemove', moveFn)\n    on(document, 'mouseup', upFn)\n\n    isDragging = true\n\n    options.start?.(event)\n  })\n}\n"],"names":[],"mappings":";;;AAGA,IAAI,aAAa;mBAQQ,SAAsB,SAAmB;AAChE,MAAI;AAAU;AAEd,QAAM,SAAS,SAAU,OAAc;AAdzC;AAeI,kBAAQ,SAAR,iCAAe;AAAA;AAGjB,QAAM,OAAO,SAAU,OAAc;AAlBvC;AAmBI,QAAI,UAAU,aAAa;AAC3B,QAAI,UAAU,WAAW;AACzB,aAAS,gBAAgB;AACzB,aAAS,cAAc;AAEvB,iBAAa;AAEb,kBAAQ,QAAR,iCAAc;AAAA;AAGhB,KAAG,SAAS,aAAa,SAAU,OAAO;AA7B5C;AA8BI,QAAI;AAAY;AAChB,aAAS,gBAAgB,MAAM;AAC/B,aAAS,cAAc,MAAM;AAC7B,OAAG,UAAU,aAAa;AAC1B,OAAG,UAAU,WAAW;AAExB,iBAAa;AAEb,kBAAQ,UAAR,iCAAgB;AAAA;AAAA;;;;"}
+{"version":3,"file":"draggable.mjs","sources":["../../../../../../packages/components/color-picker/src/draggable.ts"],"sourcesContent":["import isServer from '@element-plus/utils/isServer'\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 (isServer) 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":";;;AAGA,IAAI,aAAa;mBAQQ,SAAsB,SAAmB;AAChE,MAAI;AAAU;AAEd,QAAM,SAAS,SAAU,OAAc;AAdzC;AAeI,kBAAQ,SAAR,iCAAe;AAAA;AAGjB,QAAM,OAAO,SAAU,OAAc;AAlBvC;AAmBI,QAAI,UAAU,aAAa;AAC3B,QAAI,UAAU,WAAW;AACzB,QAAI,UAAU,aAAa;AAC3B,QAAI,UAAU,YAAY;AAC1B,aAAS,gBAAgB;AACzB,aAAS,cAAc;AAEvB,iBAAa;AAEb,kBAAQ,QAAR,iCAAc;AAAA;AAGhB,QAAM,SAAS,SAAU,OAAc;AA/BzC;AAgCI,QAAI;AAAY;AAChB,UAAM;AACN,aAAS,gBAAgB,MAAM;AAC/B,aAAS,cAAc,MAAM;AAC7B,OAAG,UAAU,aAAa;AAC1B,OAAG,UAAU,WAAW;AACxB,OAAG,UAAU,aAAa;AAC1B,OAAG,UAAU,YAAY;AAEzB,iBAAa;AAEb,kBAAQ,UAAR,iCAAgB;AAAA;AAGlB,KAAG,SAAS,aAAa;AACzB,KAAG,SAAS,cAAc;AAAA;;;;"}

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

@@ -1,6 +1,6 @@
-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';
+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";

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

@@ -17,7 +17,7 @@ declare const _default: import("vue").DefineComponent<{
     Effect: typeof Effect;
     color: Color;
     colorDisabled: import("vue").ComputedRef<boolean | undefined>;
-    colorSize: import("vue").ComputedRef<any>;
+    colorSize: import("vue").ComputedRef<"" | ComponentSize>;
     displayedColor: import("vue").ComputedRef<string>;
     showPanelColor: import("vue").Ref<boolean>;
     showPicker: import("vue").Ref<boolean>;
@@ -27,12 +27,12 @@ declare const _default: import("vue").DefineComponent<{
     handleTrigger: () => void;
     clear: () => void;
     confirmValue: () => void;
-    t: (...args: any[]) => string;
+    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")[], "change" | "update:modelValue" | "active-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, 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;
@@ -45,8 +45,8 @@ declare const _default: import("vue").DefineComponent<{
     showAlpha: boolean;
 } & {
     size?: ComponentSize | undefined;
-    popperClass?: string | undefined;
     modelValue?: string | undefined;
+    popperClass?: string | undefined;
     colorFormat?: string | undefined;
     predefine?: unknown[] | undefined;
 }> & {