@element-plus/nightly 0.0.20220121 → 0.0.20220125

package/lib/components/collection/src/collection-item.vue_vue_type_template_id_dd23be6a_lang.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.renderSlot(_ctx.$slots, "default");
-}
-
-exports.render = render;
-//# sourceMappingURL=collection-item.vue_vue_type_template_id_dd23be6a_lang.js.map

package/lib/components/collection/src/collection-item.vue_vue_type_template_id_dd23be6a_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"collection-item.vue_vue_type_template_id_dd23be6a_lang.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/components/collection/src/collection.vue_vue_type_script_lang.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-var script = vue.defineComponent({
-  inheritAttrs: false
-});
-
-exports["default"] = script;
-//# sourceMappingURL=collection.vue_vue_type_script_lang.js.map

package/lib/components/collection/src/collection.vue_vue_type_script_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"collection.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/collection/src/collection.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  inheritAttrs: false,\n})\n</script>\n"],"names":["defineComponent"],"mappings":";;;;;;AAKA,aAAeA,mBAAe;;AAE9B,CAAC,CAAC;;;;"}

package/lib/components/collection/src/collection.vue_vue_type_template_id_5f9c2545_lang.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.renderSlot(_ctx.$slots, "default");
-}
-
-exports.render = render;
-//# sourceMappingURL=collection.vue_vue_type_template_id_5f9c2545_lang.js.map

package/lib/components/collection/src/collection.vue_vue_type_template_id_5f9c2545_lang.js.map

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

package/lib/components/color-picker/src/components/alpha-slider.vue_vue_type_script_lang.js

@@ -1,112 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var dom = require('../../../../utils/dom.js');
-var draggable = require('../draggable.js');
-
-var script = vue.defineComponent({
-  name: "ElColorAlphaSlider",
-  props: {
-    color: {
-      type: Object,
-      required: true
-    },
-    vertical: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const instance = vue.getCurrentInstance();
-    const thumb = vue.shallowRef(null);
-    const bar = vue.shallowRef(null);
-    const thumbLeft = vue.ref(0);
-    const thumbTop = vue.ref(0);
-    const background = vue.ref(null);
-    vue.watch(() => props.color.get("alpha"), () => {
-      update();
-    });
-    vue.watch(() => props.color.value, () => {
-      update();
-    });
-    function getThumbLeft() {
-      if (props.vertical)
-        return 0;
-      const el = instance.vnode.el;
-      const alpha = props.color.get("alpha");
-      if (!el)
-        return 0;
-      return Math.round(alpha * (el.offsetWidth - thumb.value.offsetWidth / 2) / 100);
-    }
-    function getThumbTop() {
-      const el = instance.vnode.el;
-      if (!props.vertical)
-        return 0;
-      const alpha = props.color.get("alpha");
-      if (!el)
-        return 0;
-      return Math.round(alpha * (el.offsetHeight - thumb.value.offsetHeight / 2) / 100);
-    }
-    function getBackground() {
-      if (props.color && props.color.value) {
-        const { r, g, b } = props.color.toRgb();
-        return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
-      }
-      return null;
-    }
-    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 } = dom.getClientXY(event);
-      if (!props.vertical) {
-        let left = clientX - rect.left;
-        left = Math.max(thumb.value.offsetWidth / 2, left);
-        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
-        props.color.set("alpha", Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100));
-      } else {
-        let top = clientY - rect.top;
-        top = Math.max(thumb.value.offsetHeight / 2, top);
-        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
-        props.color.set("alpha", Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100));
-      }
-    }
-    function update() {
-      thumbLeft.value = getThumbLeft();
-      thumbTop.value = getThumbTop();
-      background.value = getBackground();
-    }
-    vue.onMounted(() => {
-      const dragConfig = {
-        drag: (event) => {
-          handleDrag(event);
-        },
-        end: (event) => {
-          handleDrag(event);
-        }
-      };
-      draggable["default"](bar.value, dragConfig);
-      draggable["default"](thumb.value, dragConfig);
-      update();
-    });
-    return {
-      thumb,
-      bar,
-      thumbLeft,
-      thumbTop,
-      background,
-      handleClick,
-      update
-    };
-  }
-});
-
-exports["default"] = script;
-//# sourceMappingURL=alpha-slider.vue_vue_type_script_lang.js.map

package/lib/components/color-picker/src/components/alpha-slider.vue_vue_type_script_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alpha-slider.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/color-picker/src/components/alpha-slider.vue"],"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":["defineComponent","shallowRef","watch","draggable"],"mappings":";;;;;;;;AA+BA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE;AACT,IAAI,KAAK;AACT,UAAU,EAAE,MAAM;;AAElB,KAAK;IACD,QAAQ,EAAE;MACR;MACA;;;;IAIF,MAAM;UACA,KAAK,GAAGC;UACR,GAAG,GAAGA;IACZ;;IAEA,MAAM;IACNC,UAAM,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;;KAEnC,CAAC,CAAC;IACHA,UAAM,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM;;KAEpC,EAAE;IACH,SAAS,YAAY;MACnB,IAAI,KAAK,CAAC,QAAQ;QAChB,OAAO,CAAC,CAAC;;MAEX;MACA,IAAI,GAAG;;aAEA;;IAET;MACE;MACA,IAAI,MAAM,CAAC,QAAQ;;YAEb;MACN;;;KAGD;IACD,SAAS,aAAa;MACpB,IAAI,KAAK,CAAC,KAAK,SAAS,CAAC;QACvB,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK;QACzB,OAAO,CAAC;;MAEV,OAAO,IAAI,CAAC;;aAEL,WAAW,CAAC,KAAK;MACxB;;;OAGC;;aAEM,UAAU,CAAC,KAAK,EAAE;MACzB,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;;MAE7B,MAAM;MACN,IAAI,CAAC,KAAK,CAAC;QACT,IAAI,OAAO,OAAO,GAAG,KAAK,IAAI,CAAC;;;;OAIhC,MAAM;YACD,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;QAC7B,GAAG,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,GAAG,CAAC,EAAE;;OAEjE;;;MAGD,SAAS,CAAC,KAAK,GAAG,YAAY,GAAG;MACjC,QAAQ,CAAC,QAAQ;;;iBAGV,CAAC,MAAM;MACd;;;SAGG;QACD,KAAK,MAAM,KAAK;UACd,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;;MAEHC,oBAAS,CAAC,GAAG,CAAC,KAAK,EAAE;0BACZ,MAAM,CAAC,KAAK,EAAE;eACd;;;WAGJ;;eAEI;cACD;gBACE;;;;;;;;;"}

package/lib/components/color-picker/src/components/alpha-slider.vue_vue_type_template_id_4fb2624c_lang.js

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

package/lib/components/color-picker/src/components/alpha-slider.vue_vue_type_template_id_4fb2624c_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alpha-slider.vue_vue_type_template_id_4fb2624c_lang.js","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":["_normalizeStyle"],"mappings":";;;;;;;;;;;;MAGM,KAAI;MACJ,KAAK,EAACA;;;;aAIA;;;MAGN,KAAI;MACJ,KAAK,EAACA;;;;;;;;;;"}

package/lib/components/color-picker/src/components/hue-slider.vue_vue_type_script_lang.js

@@ -1,102 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var dom = require('../../../../utils/dom.js');
-var draggable = require('../draggable.js');
-
-var script = vue.defineComponent({
-  name: "ElColorHueSlider",
-  props: {
-    color: {
-      type: Object,
-      required: true
-    },
-    vertical: Boolean
-  },
-  setup(props) {
-    const instance = vue.getCurrentInstance();
-    const thumb = vue.ref(null);
-    const bar = vue.ref(null);
-    const thumbLeft = vue.ref(0);
-    const thumbTop = vue.ref(0);
-    const hueValue = vue.computed(() => {
-      return props.color.get("hue");
-    });
-    vue.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 } = dom.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();
-    }
-    vue.onMounted(() => {
-      const dragConfig = {
-        drag: (event) => {
-          handleDrag(event);
-        },
-        end: (event) => {
-          handleDrag(event);
-        }
-      };
-      draggable["default"](bar.value, dragConfig);
-      draggable["default"](thumb.value, dragConfig);
-      update();
-    });
-    return {
-      bar,
-      thumb,
-      thumbLeft,
-      thumbTop,
-      hueValue,
-      handleClick,
-      update
-    };
-  }
-});
-
-exports["default"] = script;
-//# sourceMappingURL=hue-slider.vue_vue_type_script_lang.js.map

package/lib/components/color-picker/src/components/hue-slider.vue_vue_type_script_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hue-slider.vue_vue_type_script_lang.js","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":["defineComponent","ref","watch","draggable"],"mappings":";;;;;;;;AAwBA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE;AACT,IAAI,KAAK;;AAET,gBAAgB,IAAI;KACf;;GAEF;OACI,CAAC;UACE;UACA,QAAQC;IACd;;IAEA,MAAM,QAAQ,GAAGA;;MAEf,OAAO;KACR,CAAC,CAAC;IACHC,SAAK;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;;iBAExB,CAAC,MAAM;YACR,UAAU,GAAG;YACb,EAAE;;;QAGN,GAAG,EAAE,CAAC,KAAK,KAAK;;;OAGjB,CAAC;MACFC,oBAAS,IAAI,CAAC,KAAK,EAAE;;MAErB,MAAM,EAAE,CAAC;MACT,CAAC;;MAED,GAAG;MACH,KAAK;eACI;MACT;;;MAGA;MACA;;;;;;"}

package/lib/components/color-picker/src/components/hue-slider.vue_vue_type_template_id_129d2b72_lang.js

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

package/lib/components/color-picker/src/components/hue-slider.vue_vue_type_template_id_129d2b72_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hue-slider.vue_vue_type_template_id_129d2b72_lang.js","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/lib/components/color-picker/src/components/predefine.vue_vue_type_script_lang.js

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

package/lib/components/color-picker/src/components/predefine.vue_vue_type_script_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"predefine.vue_vue_type_script_lang.js","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":["defineComponent","color","watchEffect"],"mappings":";;;;;;;;AAmBA,aAAeA;;AAEf,IAAI,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;;AAE3B,UAAU,EAAE,MAAM;MACZ;KACD;;OAEE,CAAC,KAAK,EAAE;UACL,EAAE;IACR;;MAEE,MAAMC;MACNA,QAAM,UAAU,CAAC,IAAI;MACrB;QACE,IAAI,CAAC,QAAQ,GAAGA,OAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;;KAEvC,CAAC,CAAC;IACHC;MACE,UAAU,CAAC,KAAK,GAAG;MACnB,CAAC;0BACmB,KAAK;WACpB,CAAC,KAAK,CAAC,UAAU;;aAEf,WAAW,CAAC,MAAM,EAAED,OAAK,EAAE;aAC3B,MAAM,CAAC,IAAI,MAAM,KAAK;QAC3B;;;QAGA,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC,QAAQ,GAAG,EAAE,KAAK,KAAKA,OAAK,CAAC,KAAK,CAAC;;;KAGxC;WACM;;MAEL,YAAY;MACZ;;;;;;"}

package/lib/components/color-picker/src/components/predefine.vue_vue_type_template_id_391a669c_lang.js

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    vue.createElementVNode("div", _hoisted_2, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rgbaColors, (item, index) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          key: _ctx.colors[index],
-          class: vue.normalizeClass(["el-color-predefine__color-selector", { selected: item.selected, "is-alpha": item._alpha < 100 }]),
-          onClick: ($event) => _ctx.handleSelect(index)
-        }, [
-          vue.createElementVNode("div", {
-            style: vue.normalizeStyle({ backgroundColor: item.value })
-          }, null, 4)
-        ], 10, _hoisted_3);
-      }), 128))
-    ])
-  ]);
-}
-
-exports.render = render;
-//# sourceMappingURL=predefine.vue_vue_type_template_id_391a669c_lang.js.map

package/lib/components/color-picker/src/components/predefine.vue_vue_type_template_id_391a669c_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"predefine.vue_vue_type_template_id_391a669c_lang.js","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,uBAAO;;;;;;;;;;;"}

package/lib/components/color-picker/src/components/sv-panel.vue_vue_type_script_lang.js

@@ -1,79 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var dom = require('../../../../utils/dom.js');
-var draggable = require('../draggable.js');
-
-var script = vue.defineComponent({
-  name: "ElSlPanel",
-  props: {
-    color: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props) {
-    const instance = vue.getCurrentInstance();
-    const cursorTop = vue.ref(0);
-    const cursorLeft = vue.ref(0);
-    const background = vue.ref("hsl(0, 100%, 50%)");
-    const colorValue = vue.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 } = dom.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
-      });
-    }
-    vue.watch(() => colorValue.value, () => {
-      update();
-    });
-    vue.onMounted(() => {
-      draggable["default"](instance.vnode.el, {
-        drag: (event) => {
-          handleDrag(event);
-        },
-        end: (event) => {
-          handleDrag(event);
-        }
-      });
-      update();
-    });
-    return {
-      cursorTop,
-      cursorLeft,
-      background,
-      colorValue,
-      handleDrag,
-      update
-    };
-  }
-});
-
-exports["default"] = script;
-//# sourceMappingURL=sv-panel.vue_vue_type_script_lang.js.map

package/lib/components/color-picker/src/components/sv-panel.vue_vue_type_script_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sv-panel.vue_vue_type_script_lang.js","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":["defineComponent","ref","getClientXY","draggable"],"mappings":";;;;;;;;AA+BA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE;AACT,IAAI,KAAK;;AAET,gBAAgB,IAAI;KACf;;EAEH,KAAK;IACH;UACM,SAAS,GAAGC,OAAG,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,GAAGC;;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;;aAEA,CAAC,MAAM,UAAU,CAAC,aAAa;;MAElC,CAAC;kBACO,MAAM;MACdC,oBAAS,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/lib/components/color-picker/src/components/sv-panel.vue_vue_type_template_id_67046d94_lang.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "el-color-svpanel__white" }, null, -1);
-const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "el-color-svpanel__black" }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", null, null, -1);
-const _hoisted_4 = [
-  _hoisted_3
-];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", {
-    class: "el-color-svpanel",
-    style: vue.normalizeStyle({
-      backgroundColor: _ctx.background
-    })
-  }, [
-    _hoisted_1,
-    _hoisted_2,
-    vue.createElementVNode("div", {
-      class: "el-color-svpanel__cursor",
-      style: vue.normalizeStyle({
-        top: _ctx.cursorTop + "px",
-        left: _ctx.cursorLeft + "px"
-      })
-    }, _hoisted_4, 4)
-  ], 4);
-}
-
-exports.render = render;
-//# sourceMappingURL=sv-panel.vue_vue_type_template_id_67046d94_lang.js.map

package/lib/components/color-picker/src/components/sv-panel.vue_vue_type_template_id_67046d94_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sv-panel.vue_vue_type_template_id_67046d94_lang.js","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":";;;;;;;;qEAQc,EAAC;;;EAQT;;;;;;;;;;IATFA;;;WAGO,EAAC;;;;;;;;;"}