element-plus 1.2.0-beta.3 → 1.2.0-beta.4

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

@@ -0,0 +1 @@
+{"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","getCurrentInstance","ref","computed","getClientXY"],"mappings":";;;;;;;;AA6BA,aAAeA,oBAAgB;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,WAAWC;AAEjB,UAAM,QAAQC,QAAwB;AACtC,UAAM,MAAMA,QAAwB;AAEpC,UAAM,YAAYA,QAAI;AACtB,UAAM,WAAWA,QAAI;AAErB,UAAM,WAAWC,aAAS,MAAM;AAC9B,aAAO,MAAM,MAAM,IAAI;AAAA;AAGzB,cACE,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,YAAYC,gBAAY;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,kBAAU,MAAM;AACd,YAAM,aAAa;AAAA,QACjB,MAAM,CAAC,UAAU;AACf,qBAAW;AAAA;AAAA,QAEb,KAAK,CAAC,UAAU;AACd,qBAAW;AAAA;AAAA;AAIf,2BAAU,IAAI,OAAO;AACrB,2BAAU,MAAM,OAAO;AACvB;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1,28 @@
+'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

@@ -0,0 +1 @@
+{"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":["_createElementBlock","_createElementVNode"],"mappings":";;;;;;;0BACEA;IAAK,2BAAM,wCAA+C;;IACxDC;MAAK,KAAI;AAAA,MAAM,OAAM;AAAA,MAA4B,gDAAO;;IACxDA;MACE,KAAI;AAAA,MACJ,OAAM;AAAA,MACL;;;;;;;;;;"}

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var predefine_vue_vue_type_script_lang = require('./predefine.vue_vue&type=script&lang.js');
-var predefine_vue_vue_type_template_id_391a669c_lang = require('./predefine.vue_vue&type=template&id=391a669c&lang.js');
+var predefine_vue_vue_type_script_lang = require('./predefine.vue_vue_type_script_lang.js');
+var predefine_vue_vue_type_template_id_391a669c_lang = require('./predefine.vue_vue_type_template_id_391a669c_lang.js');
 
 predefine_vue_vue_type_script_lang["default"].render = predefine_vue_vue_type_template_id_391a669c_lang.render;
 predefine_vue_vue_type_script_lang["default"].__file = "packages/components/color-picker/src/components/predefine.vue";

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

@@ -0,0 +1,51 @@
+'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

@@ -0,0 +1 @@
+{"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","useOptions","ref","color","Color"],"mappings":";;;;;;;;AAuBA,aAAeA,oBAAgB;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,iBAAiBC;AAEzB,UAAM,aAAaC,QAAI,YAAY,MAAM,QAAQ,MAAM;AAGvD,cACE,MAAM,aAAa,OACnB,CAAC,QAAQ;AACP,YAAMC,UAAQ,IAAIC;AAClB,cAAM,WAAW;AAEjB,iBAAW,MAAM,QAAQ,CAAC,SAAS;AACjC,aAAK,WAAWD,QAAM,QAAQ;AAAA;AAAA;AAIpC,oBAAY,MAAM;AAChB,iBAAW,QAAQ,YAAY,MAAM,QAAQ,MAAM;AAAA;AAGrD,0BAAsB,OAAO;AAC3B,YAAM,MAAM,WAAW,MAAM,OAAO;AAAA;AAEtC,yBAAqB,QAAQA,SAAO;AAClC,aAAO,OAAO,IAAI,CAAC,UAAU;AAC3B,cAAM,IAAI,IAAIC;AACd,UAAE,cAAc;AAChB,UAAE,SAAS;AACX,UAAE,WAAW;AACb,UAAE,WAAW,EAAE,UAAUD,QAAM;AAC/B,eAAO;AAAA;AAAA;AAGX,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1,29 @@
+'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

@@ -0,0 +1 @@
+{"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":["_createElementBlock","_createElementVNode"],"mappings":";;;;;;qBACO,OAAM;qBACJ,OAAM;;;0BADbA,8BAAA;IACEC,8BAAA;4BACED,0DAC0B,kBAAhB,MAAM;gCADhBA;UAEG,KAAK,YAAO;AAAA,UACb,2BAAM,kDACc,KAAK,sBAAsB,KAAK;UACnD,qBAAO,kBAAa;AAAA;UAErBC;YAAM,6CAA0B,KAAK;AAAA;;;;;;;;;"}

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var svPanel_vue_vue_type_script_lang = require('./sv-panel.vue_vue&type=script&lang.js');
-var svPanel_vue_vue_type_template_id_67046d94_lang = require('./sv-panel.vue_vue&type=template&id=67046d94&lang.js');
+var svPanel_vue_vue_type_script_lang = require('./sv-panel.vue_vue_type_script_lang.js');
+var svPanel_vue_vue_type_template_id_67046d94_lang = require('./sv-panel.vue_vue_type_template_id_67046d94_lang.js');
 
 svPanel_vue_vue_type_script_lang["default"].render = svPanel_vue_vue_type_template_id_67046d94_lang.render;
 svPanel_vue_vue_type_script_lang["default"].__file = "packages/components/color-picker/src/components/sv-panel.vue";

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

@@ -0,0 +1,79 @@
+'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

@@ -0,0 +1 @@
+{"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","getCurrentInstance","ref","computed","getClientXY"],"mappings":";;;;;;;;AAoCA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA;AAAA,EAGd,MAAM,OAAO;AAEX,UAAM,WAAWC;AAEjB,UAAM,YAAYC,QAAI;AACtB,UAAM,aAAaA,QAAI;AACvB,UAAM,aAAaA,QAAI;AACvB,UAAM,aAAaC,aAAS,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,YAAYC,gBAAY;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,cACE,MAAM,WAAW,OACjB,MAAM;AACJ;AAAA;AAIJ,kBAAU,MAAM;AACd,2BAAU,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/lib/components/color-picker/src/components/sv-panel.vue_vue_type_template_id_67046d94_lang.js

@@ -0,0 +1,33 @@
+'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

@@ -0,0 +1 @@
+{"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":["_createElementBlock","_createElementVNode"],"mappings":";;;;;;mEAOS,OAAM;mEACN,OAAM;;;EAQT;AAAA;;0BAfJA;IACE,OAAM;AAAA,IACL;;;;IAID;AAAA,IACA;AAAA,IACAC;MACE,OAAM;AAAA,MACL;;;;;;;;;;"}

package/lib/components/color-picker/src/draggable.js

@@ -17,22 +17,29 @@ function draggable(element, options) {
     var _a;
     dom.off(document, "mousemove", moveFn);
     dom.off(document, "mouseup", upFn);
+    dom.off(document, "touchmove", moveFn);
+    dom.off(document, "touchend", upFn);
     document.onselectstart = null;
     document.ondragstart = null;
     isDragging = false;
     (_a = options.end) == null ? void 0 : _a.call(options, event);
   };
-  dom.on(element, "mousedown", function(event) {
+  const downFn = function(event) {
     var _a;
     if (isDragging)
       return;
+    event.preventDefault();
     document.onselectstart = () => false;
     document.ondragstart = () => false;
     dom.on(document, "mousemove", moveFn);
     dom.on(document, "mouseup", upFn);
+    dom.on(document, "touchmove", moveFn);
+    dom.on(document, "touchend", upFn);
     isDragging = true;
     (_a = options.start) == null ? void 0 : _a.call(options, event);
-  });
+  };
+  dom.on(element, "mousedown", downFn);
+  dom.on(element, "touchstart", downFn);
 }
 
 exports["default"] = draggable;

package/lib/components/color-picker/src/draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.js","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":["isServer"],"mappings":";;;;;;;AAGA,IAAI,aAAa;mBAQQ,SAAsB,SAAmB;AAChE,MAAIA;AAAU;AAEd,QAAM,SAAS,SAAU,OAAc;AAdzC;AAeI,kBAAQ,SAAR,iCAAe;AAAA;AAGjB,QAAM,OAAO,SAAU,OAAc;AAlBvC;AAmBI,YAAI,UAAU,aAAa;AAC3B,YAAI,UAAU,WAAW;AACzB,aAAS,gBAAgB;AACzB,aAAS,cAAc;AAEvB,iBAAa;AAEb,kBAAQ,QAAR,iCAAc;AAAA;AAGhB,SAAG,SAAS,aAAa,SAAU,OAAO;AA7B5C;AA8BI,QAAI;AAAY;AAChB,aAAS,gBAAgB,MAAM;AAC/B,aAAS,cAAc,MAAM;AAC7B,WAAG,UAAU,aAAa;AAC1B,WAAG,UAAU,WAAW;AAExB,iBAAa;AAEb,kBAAQ,UAAR,iCAAgB;AAAA;AAAA;;;;"}
+{"version":3,"file":"draggable.js","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":["isServer"],"mappings":";;;;;;;AAGA,IAAI,aAAa;mBAQQ,SAAsB,SAAmB;AAChE,MAAIA;AAAU;AAEd,QAAM,SAAS,SAAU,OAAc;AAdzC;AAeI,kBAAQ,SAAR,iCAAe;AAAA;AAGjB,QAAM,OAAO,SAAU,OAAc;AAlBvC;AAmBI,YAAI,UAAU,aAAa;AAC3B,YAAI,UAAU,WAAW;AACzB,YAAI,UAAU,aAAa;AAC3B,YAAI,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,WAAG,UAAU,aAAa;AAC1B,WAAG,UAAU,WAAW;AACxB,WAAG,UAAU,aAAa;AAC1B,WAAG,UAAU,YAAY;AAEzB,iBAAa;AAEb,kBAAQ,UAAR,iCAAgB;AAAA;AAGlB,SAAG,SAAS,aAAa;AACzB,SAAG,SAAS,cAAc;AAAA;;;;"}

package/lib/components/color-picker/src/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_vue_vue_type_script_lang = require('./index.vue_vue&type=script&lang.js');
-var index_vue_vue_type_template_id_46a474d5_lang = require('./index.vue_vue&type=template&id=46a474d5&lang.js');
+var index_vue_vue_type_script_lang = require('./index.vue_vue_type_script_lang.js');
+var index_vue_vue_type_template_id_46a474d5_lang = require('./index.vue_vue_type_template_id_46a474d5_lang.js');
 
 index_vue_vue_type_script_lang["default"].render = index_vue_vue_type_template_id_46a474d5_lang.render;
 index_vue_vue_type_script_lang["default"].__file = "packages/components/color-picker/src/index.vue";

package/lib/components/color-picker/src/index.vue_vue_type_script_lang.js

@@ -0,0 +1,215 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var debounce = require('lodash/debounce');
+var index = require('../../button/index.js');
+var index$3 = require('../../icon/index.js');
+require('../../../directives/index.js');
+require('../../../tokens/index.js');
+require('../../../hooks/index.js');
+var index$1 = require('../../popper/index.js');
+var index$2 = require('../../input/index.js');
+var constants = require('../../../utils/constants.js');
+var util = require('../../../utils/util.js');
+var validators = require('../../../utils/validators.js');
+var icons = require('@element-plus/icons');
+require('./components/alpha-slider.js');
+require('./components/hue-slider.js');
+require('./components/predefine.js');
+require('./components/sv-panel.js');
+var color = require('./color.js');
+var useOption = require('./useOption.js');
+var svPanel_vue_vue_type_script_lang = require('./components/sv-panel.vue_vue_type_script_lang.js');
+var hueSlider_vue_vue_type_script_lang = require('./components/hue-slider.vue_vue_type_script_lang.js');
+var alphaSlider_vue_vue_type_script_lang = require('./components/alpha-slider.vue_vue_type_script_lang.js');
+var predefine_vue_vue_type_script_lang = require('./components/predefine.vue_vue_type_script_lang.js');
+var index$4 = require('../../../directives/click-outside/index.js');
+var index$5 = require('../../../hooks/use-locale/index.js');
+var form = require('../../../tokens/form.js');
+var defaults = require('../../popper/src/use-popper/defaults.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+var script = vue.defineComponent({
+  name: "ElColorPicker",
+  components: {
+    ElButton: index.ElButton,
+    ElPopper: index$1["default"],
+    ElInput: index$2.ElInput,
+    ElIcon: index$3.ElIcon,
+    Close: icons.Close,
+    ArrowDown: icons.ArrowDown,
+    SvPanel: svPanel_vue_vue_type_script_lang["default"],
+    HueSlider: hueSlider_vue_vue_type_script_lang["default"],
+    AlphaSlider: alphaSlider_vue_vue_type_script_lang["default"],
+    Predefine: predefine_vue_vue_type_script_lang["default"]
+  },
+  directives: {
+    ClickOutside: index$4["default"]
+  },
+  props: {
+    modelValue: String,
+    showAlpha: Boolean,
+    colorFormat: String,
+    disabled: Boolean,
+    size: {
+      type: String,
+      validator: validators.isValidComponentSize
+    },
+    popperClass: String,
+    predefine: Array
+  },
+  emits: ["change", "active-change", constants.UPDATE_MODEL_EVENT],
+  setup(props, { emit }) {
+    const ELEMENT = util.useGlobalConfig();
+    const { t } = index$5.useLocaleInject();
+    const elForm = vue.inject(form.elFormKey, {});
+    const elFormItem = vue.inject(form.elFormItemKey, {});
+    const hue = vue.ref(null);
+    const svPanel = vue.ref(null);
+    const alpha = vue.ref(null);
+    const popper = vue.ref(null);
+    const color$1 = vue.reactive(new color["default"]({
+      enableAlpha: props.showAlpha,
+      format: props.colorFormat
+    }));
+    const showPicker = vue.ref(false);
+    const showPanelColor = vue.ref(false);
+    const customInput = vue.ref("");
+    const displayedColor = vue.computed(() => {
+      if (!props.modelValue && !showPanelColor.value) {
+        return "transparent";
+      }
+      return displayedRgb(color$1, props.showAlpha);
+    });
+    const colorSize = vue.computed(() => {
+      return props.size || elFormItem.size || ELEMENT.size;
+    });
+    const colorDisabled = vue.computed(() => {
+      return props.disabled || elForm.disabled;
+    });
+    const currentColor = vue.computed(() => {
+      return !props.modelValue && !showPanelColor.value ? "" : color$1.value;
+    });
+    vue.watch(() => props.modelValue, (newVal) => {
+      if (!newVal) {
+        showPanelColor.value = false;
+      } else if (newVal && newVal !== color$1.value) {
+        color$1.fromString(newVal);
+      }
+    });
+    vue.watch(() => currentColor.value, (val) => {
+      customInput.value = val;
+      emit("active-change", val);
+    });
+    vue.watch(() => color$1.value, () => {
+      if (!props.modelValue && !showPanelColor.value) {
+        showPanelColor.value = true;
+      }
+    });
+    function displayedRgb(color2, showAlpha) {
+      if (!(color2 instanceof color["default"])) {
+        throw Error("color should be instance of _color Class");
+      }
+      const { r, g, b } = color2.toRgb();
+      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`;
+    }
+    function setShowPicker(value) {
+      showPicker.value = value;
+    }
+    const debounceSetShowPicker = debounce__default["default"](setShowPicker, 100);
+    function hide() {
+      debounceSetShowPicker(false);
+      resetColor();
+    }
+    function resetColor() {
+      vue.nextTick(() => {
+        if (props.modelValue) {
+          color$1.fromString(props.modelValue);
+        } else {
+          showPanelColor.value = false;
+        }
+      });
+    }
+    function handleTrigger() {
+      if (colorDisabled.value)
+        return;
+      debounceSetShowPicker(!showPicker.value);
+    }
+    function handleConfirm() {
+      color$1.fromString(customInput.value);
+    }
+    function confirmValue() {
+      var _a;
+      const value = color$1.value;
+      emit(constants.UPDATE_MODEL_EVENT, value);
+      emit("change", value);
+      (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
+      debounceSetShowPicker(false);
+      vue.nextTick(() => {
+        const newColor = new color["default"]({
+          enableAlpha: props.showAlpha,
+          format: props.colorFormat
+        });
+        newColor.fromString(props.modelValue);
+        if (!color$1.compare(newColor)) {
+          resetColor();
+        }
+      });
+    }
+    function clear() {
+      var _a;
+      debounceSetShowPicker(false);
+      emit(constants.UPDATE_MODEL_EVENT, null);
+      emit("change", null);
+      if (props.modelValue !== null) {
+        (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
+      }
+      resetColor();
+    }
+    vue.onMounted(() => {
+      if (props.modelValue) {
+        color$1.fromString(props.modelValue);
+        customInput.value = currentColor.value;
+      }
+    });
+    vue.watch(() => showPicker.value, () => {
+      vue.nextTick(() => {
+        var _a, _b, _c;
+        (_a = hue.value) == null ? void 0 : _a.update();
+        (_b = svPanel.value) == null ? void 0 : _b.update();
+        (_c = alpha.value) == null ? void 0 : _c.update();
+      });
+    });
+    vue.provide(useOption.OPTIONS_KEY, {
+      currentColor
+    });
+    return {
+      Effect: defaults.Effect,
+      color: color$1,
+      colorDisabled,
+      colorSize,
+      displayedColor,
+      showPanelColor,
+      showPicker,
+      customInput,
+      handleConfirm,
+      hide,
+      handleTrigger,
+      clear,
+      confirmValue,
+      t,
+      hue,
+      svPanel,
+      alpha,
+      popper
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=index.vue_vue_type_script_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"mini\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"mini\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"mini\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #trigger>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            ></span>\n            <el-icon\n              v-if=\"!modelValue && !showPanelColor\"\n              class=\"el-color-picker__empty is-icon-close\"\n            >\n              <close />\n            </el-icon>\n          </span>\n          <el-icon\n            v-show=\"modelValue || showPanelColor\"\n            class=\"el-color-picker__icon is-icon-arrow-down\"\n          >\n            <arrow-down />\n          </el-icon>\n        </div>\n      </div>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useGlobalConfig } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElPopper,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const ELEMENT = useGlobalConfig()\n    const { t } = useLocaleInject()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = computed(() => {\n      return props.size || elFormItem.size || ELEMENT.size\n    })\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n        // showPanelColor.value = true\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n        })\n        newColor.fromString(props.modelValue)\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        color.fromString(props.modelValue)\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      Effect,\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElButton","ElPopper","ElInput","ElIcon","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","isValidComponentSize","UPDATE_MODEL_EVENT","useGlobalConfig","useLocaleInject","inject","elFormKey","elFormItemKey","ref","color","reactive","Color","computed","debounce","OPTIONS_KEY","Effect"],"mappings":"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"}