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

package/lib/components/collapse/src/collapse-item.vue_vue_type_template_id_80da782a_lang.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = ["aria-expanded", "aria-controls", "aria-describedby"];
+const _hoisted_2 = ["id", "tabindex"];
+const _hoisted_3 = ["id", "aria-hidden", "aria-labelledby"];
+const _hoisted_4 = { class: "el-collapse-item__content" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_arrow_right = vue.resolveComponent("arrow-right");
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  const _component_el_collapse_transition = vue.resolveComponent("el-collapse-transition");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["el-collapse-item", { "is-active": _ctx.isActive, "is-disabled": _ctx.disabled }])
+  }, [
+    vue.createElementVNode("div", {
+      role: "tab",
+      "aria-expanded": _ctx.isActive,
+      "aria-controls": `el-collapse-content-${_ctx.id}`,
+      "aria-describedby": `el-collapse-content-${_ctx.id}`
+    }, [
+      vue.createElementVNode("div", {
+        id: `el-collapse-head-${_ctx.id}`,
+        class: vue.normalizeClass(["el-collapse-item__header", {
+          focusing: _ctx.focusing,
+          "is-active": _ctx.isActive
+        }]),
+        role: "button",
+        tabindex: _ctx.disabled ? -1 : 0,
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleHeaderClick && _ctx.handleHeaderClick(...args)),
+        onKeyup: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleEnterClick && _ctx.handleEnterClick(...args), ["stop"]), ["space", "enter"])),
+        onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+        onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.focusing = false)
+      }, [
+        vue.renderSlot(_ctx.$slots, "title", {}, () => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
+        ]),
+        vue.createVNode(_component_el_icon, {
+          class: vue.normalizeClass(["el-collapse-item__arrow", { "is-active": _ctx.isActive }])
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_arrow_right)
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ], 42, _hoisted_2)
+    ], 8, _hoisted_1),
+    vue.createVNode(_component_el_collapse_transition, null, {
+      default: vue.withCtx(() => [
+        vue.withDirectives(vue.createElementVNode("div", {
+          id: `el-collapse-content-${_ctx.id}`,
+          class: "el-collapse-item__wrap",
+          role: "tabpanel",
+          "aria-hidden": !_ctx.isActive,
+          "aria-labelledby": `el-collapse-head-${_ctx.id}`
+        }, [
+          vue.createElementVNode("div", _hoisted_4, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ])
+        ], 8, _hoisted_3), [
+          [vue.vShow, _ctx.isActive]
+        ])
+      ]),
+      _: 3
+    })
+  ], 2);
+}
+
+exports.render = render;
+//# sourceMappingURL=collapse-item.vue_vue_type_template_id_80da782a_lang.js.map

package/lib/components/collapse/src/collapse-item.vue_vue_type_template_id_80da782a_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-item.vue_vue_type_template_id_80da782a_lang.js","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue?vue&type=template&id=80da782a&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-collapse-item\"\n    :class=\"{ 'is-active': isActive, 'is-disabled': disabled }\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"`el-collapse-content-${id}`\"\n      :aria-describedby=\"`el-collapse-content-${id}`\"\n    >\n      <div\n        :id=\"`el-collapse-head-${id}`\"\n        class=\"el-collapse-item__header\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :class=\"{\n          focusing: focusing,\n          'is-active': isActive,\n        }\"\n        @click=\"handleHeaderClick\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{ title }}</slot>\n        <el-icon\n          class=\"el-collapse-item__arrow\"\n          :class=\"{ 'is-active': isActive }\"\n        >\n          <arrow-right />\n        </el-icon>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"`el-collapse-content-${id}`\"\n        class=\"el-collapse-item__wrap\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"`el-collapse-head-${id}`\"\n      >\n        <div class=\"el-collapse-item__content\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils/util'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons'\n\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapseItem',\n  components: { ElCollapseTransition, ElIcon, ArrowRight },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: [String, Number] as PropType<string | number>,\n      default: () => {\n        return generateId()\n      },\n    },\n    disabled: Boolean,\n  },\n  setup(props) {\n    const collapse = inject<CollapseProvider>('collapse')\n\n    const contentWrapStyle = ref({\n      height: 'auto',\n      display: 'block',\n    })\n    const contentHeight = ref(0)\n    const focusing = ref(false)\n    const isClick = ref(false)\n    const id = ref(generateId())\n\n    const isActive = computed(() => {\n      return collapse?.activeNames.value.indexOf(props.name) > -1\n    })\n\n    const handleFocus = () => {\n      setTimeout(() => {\n        if (!isClick.value) {\n          focusing.value = true\n        } else {\n          isClick.value = false\n        }\n      }, 50)\n    }\n\n    const handleHeaderClick = () => {\n      if (props.disabled) return\n      collapse?.handleItemClick(props.name)\n      focusing.value = false\n      isClick.value = true\n    }\n\n    const handleEnterClick = () => {\n      collapse?.handleItemClick(props.name)\n    }\n\n    return {\n      isActive,\n      contentWrapStyle,\n      contentHeight,\n      focusing,\n      isClick,\n      id,\n      handleFocus,\n      handleHeaderClick,\n      handleEnterClick,\n      collapse,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode"],"mappings":";;;;;;;;;qBA2Ca,OAAM;;;;;0BA1CjBA;IACE,2BAAM,mCACiB,8BAAyB;;IAEhDC;MACE,MAAK;AAAA,MACJ,iBAAe;MACf,wCAAsC;MACtC,2CAAyC;;MAE1CA;QACG,wBAAwB;QACzB,2BAAM;;;;QACN,MAAK;AAAA,QACJ,UAAU;QAKV,gDAAO;QACP,+EAAwB;QACxB,gDAAO;QACP,8CAAM;;QAEPC,yCAAA;kDAAsB;;QACtBC;UACE,2BAAM,0CACiB;;+BAEvB;YAAAA;;;;;;IAINA;2BACE;2BAAAF;UAEG,2BAA2B;UAC5B,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,gBAAc;UACd,uCAAqC;;UAEtCA,8BAAA;YACEC;;;sBARM;;;;;;;;;;"}

package/lib/components/collapse/src/collapse.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var collapse_vue_vue_type_script_lang = require('./collapse.vue_vue&type=script&lang.js');
-var collapse_vue_vue_type_template_id_71a60e25_lang = require('./collapse.vue_vue&type=template&id=71a60e25&lang.js');
+var collapse_vue_vue_type_script_lang = require('./collapse.vue_vue_type_script_lang.js');
+var collapse_vue_vue_type_template_id_71a60e25_lang = require('./collapse.vue_vue_type_template_id_71a60e25_lang.js');
 
 collapse_vue_vue_type_script_lang["default"].render = collapse_vue_vue_type_template_id_71a60e25_lang.render;
 collapse_vue_vue_type_script_lang["default"].__file = "packages/components/collapse/src/collapse.vue";

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

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var constants = require('../../../utils/constants.js');
+
+var script = vue.defineComponent({
+  name: "ElCollapse",
+  props: {
+    accordion: Boolean,
+    modelValue: {
+      type: [Array, String, Number],
+      default: () => []
+    }
+  },
+  emits: [constants.UPDATE_MODEL_EVENT, constants.CHANGE_EVENT],
+  setup(props, { emit }) {
+    const activeNames = vue.ref([].concat(props.modelValue));
+    const setActiveNames = (_activeNames) => {
+      activeNames.value = [].concat(_activeNames);
+      const value = props.accordion ? activeNames.value[0] : activeNames.value;
+      emit(constants.UPDATE_MODEL_EVENT, value);
+      emit(constants.CHANGE_EVENT, value);
+    };
+    const handleItemClick = (name) => {
+      if (props.accordion) {
+        setActiveNames((activeNames.value[0] || activeNames.value[0] === 0) && activeNames.value[0] === name ? "" : name);
+      } else {
+        const _activeNames = activeNames.value.slice(0);
+        const index = _activeNames.indexOf(name);
+        if (index > -1) {
+          _activeNames.splice(index, 1);
+        } else {
+          _activeNames.push(name);
+        }
+        setActiveNames(_activeNames);
+      }
+    };
+    vue.watch(() => props.modelValue, () => {
+      activeNames.value = [].concat(props.modelValue);
+    });
+    vue.provide("collapse", {
+      activeNames,
+      handleItemClick
+    });
+    return {
+      activeNames,
+      setActiveNames,
+      handleItemClick
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=collapse.vue_vue_type_script_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/collapse/src/collapse.vue"],"sourcesContent":["<template>\n  <div class=\"el-collapse\" role=\"tablist\" aria-multiselectable=\"true\">\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, watch, provide } from 'vue'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapse',\n  props: {\n    accordion: Boolean,\n    modelValue: {\n      type: [Array, String, Number] as PropType<\n        string | number | Array<string | number>\n      >,\n      default: () => [],\n    },\n  },\n  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT],\n  setup(props, { emit }) {\n    const activeNames = ref([].concat(props.modelValue))\n\n    const setActiveNames = (_activeNames) => {\n      activeNames.value = [].concat(_activeNames)\n      const value = props.accordion ? activeNames.value[0] : activeNames.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit(CHANGE_EVENT, value)\n    }\n\n    const handleItemClick = (name) => {\n      if (props.accordion) {\n        setActiveNames(\n          (activeNames.value[0] || activeNames.value[0] === 0) &&\n            activeNames.value[0] === name\n            ? ''\n            : name\n        )\n      } else {\n        const _activeNames = activeNames.value.slice(0)\n        const index = _activeNames.indexOf(name)\n\n        if (index > -1) {\n          _activeNames.splice(index, 1)\n        } else {\n          _activeNames.push(name)\n        }\n        setActiveNames(_activeNames)\n      }\n    }\n\n    watch(\n      () => props.modelValue,\n      () => {\n        activeNames.value = [].concat(props.modelValue)\n      }\n    )\n\n    provide<CollapseProvider>('collapse', {\n      activeNames,\n      handleItemClick,\n    })\n\n    return {\n      activeNames,\n      setActiveNames,\n      handleItemClick,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","UPDATE_MODEL_EVENT","CHANGE_EVENT","ref"],"mappings":";;;;;;;AAYA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,MACV,MAAM,CAAC,OAAO,QAAQ;AAAA,MAGtB,SAAS,MAAM;AAAA;AAAA;AAAA,EAGnB,OAAO,CAACC,8BAAoBC;AAAA,EAC5B,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,cAAcC,QAAI,GAAG,OAAO,MAAM;AAExC,UAAM,iBAAiB,CAAC,iBAAiB;AACvC,kBAAY,QAAQ,GAAG,OAAO;AAC9B,YAAM,QAAQ,MAAM,YAAY,YAAY,MAAM,KAAK,YAAY;AACnE,WAAKF,8BAAoB;AACzB,WAAKC,wBAAc;AAAA;AAGrB,UAAM,kBAAkB,CAAC,SAAS;AAChC,UAAI,MAAM,WAAW;AACnB,uBACG,aAAY,MAAM,MAAM,YAAY,MAAM,OAAO,MAChD,YAAY,MAAM,OAAO,OACvB,KACA;AAAA,aAED;AACL,cAAM,eAAe,YAAY,MAAM,MAAM;AAC7C,cAAM,QAAQ,aAAa,QAAQ;AAEnC,YAAI,QAAQ,IAAI;AACd,uBAAa,OAAO,OAAO;AAAA,eACtB;AACL,uBAAa,KAAK;AAAA;AAEpB,uBAAe;AAAA;AAAA;AAInB,cACE,MAAM,MAAM,YACZ,MAAM;AACJ,kBAAY,QAAQ,GAAG,OAAO,MAAM;AAAA;AAIxC,gBAA0B,YAAY;AAAA,MACpC;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/collapse/src/collapse.vue_vue_type_template_id_71a60e25_lang.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = {
+  class: "el-collapse",
+  role: "tablist",
+  "aria-multiselectable": "true"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ]);
+}
+
+exports.render = render;
+//# sourceMappingURL=collapse.vue_vue_type_template_id_71a60e25_lang.js.map

package/lib/components/collapse/src/collapse.vue_vue_type_template_id_71a60e25_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.vue_vue_type_template_id_71a60e25_lang.js","sources":["../../../../../../packages/components/collapse/src/collapse.vue?vue&type=template&id=71a60e25&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-collapse\" role=\"tablist\" aria-multiselectable=\"true\">\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, watch, provide } from 'vue'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapse',\n  props: {\n    accordion: Boolean,\n    modelValue: {\n      type: [Array, String, Number] as PropType<\n        string | number | Array<string | number>\n      >,\n      default: () => [],\n    },\n  },\n  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT],\n  setup(props, { emit }) {\n    const activeNames = ref([].concat(props.modelValue))\n\n    const setActiveNames = (_activeNames) => {\n      activeNames.value = [].concat(_activeNames)\n      const value = props.accordion ? activeNames.value[0] : activeNames.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit(CHANGE_EVENT, value)\n    }\n\n    const handleItemClick = (name) => {\n      if (props.accordion) {\n        setActiveNames(\n          (activeNames.value[0] || activeNames.value[0] === 0) &&\n            activeNames.value[0] === name\n            ? ''\n            : name\n        )\n      } else {\n        const _activeNames = activeNames.value.slice(0)\n        const index = _activeNames.indexOf(name)\n\n        if (index > -1) {\n          _activeNames.splice(index, 1)\n        } else {\n          _activeNames.push(name)\n        }\n        setActiveNames(_activeNames)\n      }\n    }\n\n    watch(\n      () => props.modelValue,\n      () => {\n        activeNames.value = [].concat(props.modelValue)\n      }\n    )\n\n    provide<CollapseProvider>('collapse', {\n      activeNames,\n      handleItemClick,\n    })\n\n    return {\n      activeNames,\n      setActiveNames,\n      handleItemClick,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;;;EACO,OAAM;AAAA,EAAc,MAAK;AAAA,EAAU,wBAAqB;AAAA;;0BAA7DA,8BAAA;IACEC;;;;;;"}

package/lib/components/collapse-transition/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('./src/collapse-transition.js');
-var collapseTransition_vue_vue_type_script_lang = require('./src/collapse-transition.vue_vue&type=script&lang.js');
+var collapseTransition_vue_vue_type_script_lang = require('./src/collapse-transition.vue_vue_type_script_lang.js');
 
 collapseTransition_vue_vue_type_script_lang["default"].install = (app) => {
   app.component(collapseTransition_vue_vue_type_script_lang["default"].name, collapseTransition_vue_vue_type_script_lang["default"]);

package/lib/components/collapse-transition/src/collapse-transition.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var collapseTransition_vue_vue_type_script_lang = require('./collapse-transition.vue_vue&type=script&lang.js');
-var collapseTransition_vue_vue_type_template_id_f68ae30a_lang = require('./collapse-transition.vue_vue&type=template&id=f68ae30a&lang.js');
+var collapseTransition_vue_vue_type_script_lang = require('./collapse-transition.vue_vue_type_script_lang.js');
+var collapseTransition_vue_vue_type_template_id_f68ae30a_lang = require('./collapse-transition.vue_vue_type_template_id_f68ae30a_lang.js');
 
 collapseTransition_vue_vue_type_script_lang["default"].render = collapseTransition_vue_vue_type_template_id_f68ae30a_lang.render;
 collapseTransition_vue_vue_type_script_lang["default"].__file = "packages/components/collapse-transition/src/collapse-transition.vue";

package/lib/components/collapse-transition/src/collapse-transition.vue_vue_type_script_lang.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var dom = require('../../../utils/dom.js');
+
+var script = vue.defineComponent({
+  name: "ElCollapseTransition",
+  setup() {
+    return {
+      on: {
+        beforeEnter(el) {
+          dom.addClass(el, "collapse-transition");
+          if (!el.dataset)
+            el.dataset = {};
+          el.dataset.oldPaddingTop = el.style.paddingTop;
+          el.dataset.oldPaddingBottom = el.style.paddingBottom;
+          el.style.height = "0";
+          el.style.paddingTop = 0;
+          el.style.paddingBottom = 0;
+        },
+        enter(el) {
+          el.dataset.oldOverflow = el.style.overflow;
+          if (el.scrollHeight !== 0) {
+            el.style.height = `${el.scrollHeight}px`;
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+          } else {
+            el.style.height = "";
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+          }
+          el.style.overflow = "hidden";
+        },
+        afterEnter(el) {
+          dom.removeClass(el, "collapse-transition");
+          el.style.height = "";
+          el.style.overflow = el.dataset.oldOverflow;
+        },
+        beforeLeave(el) {
+          if (!el.dataset)
+            el.dataset = {};
+          el.dataset.oldPaddingTop = el.style.paddingTop;
+          el.dataset.oldPaddingBottom = el.style.paddingBottom;
+          el.dataset.oldOverflow = el.style.overflow;
+          el.style.height = `${el.scrollHeight}px`;
+          el.style.overflow = "hidden";
+        },
+        leave(el) {
+          if (el.scrollHeight !== 0) {
+            dom.addClass(el, "collapse-transition");
+            el.style.transitionProperty = "height";
+            el.style.height = 0;
+            el.style.paddingTop = 0;
+            el.style.paddingBottom = 0;
+          }
+        },
+        afterLeave(el) {
+          dom.removeClass(el, "collapse-transition");
+          el.style.height = "";
+          el.style.overflow = el.dataset.oldOverflow;
+          el.style.paddingTop = el.dataset.oldPaddingTop;
+          el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        }
+      }
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=collapse-transition.vue_vue_type_script_lang.js.map

package/lib/components/collapse-transition/src/collapse-transition.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-transition.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/collapse-transition/src/collapse-transition.vue"],"sourcesContent":["<template>\n  <transition v-on=\"on\">\n    <slot></slot>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { addClass, removeClass } from '@element-plus/utils/dom'\n\nexport default defineComponent({\n  name: 'ElCollapseTransition',\n  setup() {\n    return {\n      on: {\n        beforeEnter(el) {\n          addClass(el, 'collapse-transition')\n          if (!el.dataset) el.dataset = {}\n\n          el.dataset.oldPaddingTop = el.style.paddingTop\n          el.dataset.oldPaddingBottom = el.style.paddingBottom\n\n          el.style.height = '0'\n          el.style.paddingTop = 0\n          el.style.paddingBottom = 0\n        },\n\n        enter(el) {\n          el.dataset.oldOverflow = el.style.overflow\n          if (el.scrollHeight !== 0) {\n            el.style.height = `${el.scrollHeight}px`\n            el.style.paddingTop = el.dataset.oldPaddingTop\n            el.style.paddingBottom = el.dataset.oldPaddingBottom\n          } else {\n            el.style.height = ''\n            el.style.paddingTop = el.dataset.oldPaddingTop\n            el.style.paddingBottom = el.dataset.oldPaddingBottom\n          }\n\n          el.style.overflow = 'hidden'\n        },\n\n        afterEnter(el) {\n          // for safari: remove class then reset height is necessary\n          removeClass(el, 'collapse-transition')\n          el.style.height = ''\n          el.style.overflow = el.dataset.oldOverflow\n        },\n\n        beforeLeave(el) {\n          if (!el.dataset) el.dataset = {}\n          el.dataset.oldPaddingTop = el.style.paddingTop\n          el.dataset.oldPaddingBottom = el.style.paddingBottom\n          el.dataset.oldOverflow = el.style.overflow\n\n          el.style.height = `${el.scrollHeight}px`\n          el.style.overflow = 'hidden'\n        },\n\n        leave(el) {\n          if (el.scrollHeight !== 0) {\n            // for safari: add class after set height, or it will jump to zero height suddenly, weired\n            addClass(el, 'collapse-transition')\n            // fix #968 collapse animation failure.\n            // in vue3.0.4, transitionProperty is set 'none' to avoid 'v-leave-from' issue\n            el.style.transitionProperty = 'height'\n            el.style.height = 0\n            el.style.paddingTop = 0\n            el.style.paddingBottom = 0\n          }\n        },\n\n        afterLeave(el) {\n          removeClass(el, 'collapse-transition')\n          el.style.height = ''\n          el.style.overflow = el.dataset.oldOverflow\n          el.style.paddingTop = el.dataset.oldPaddingTop\n          el.style.paddingBottom = el.dataset.oldPaddingBottom\n        },\n      },\n    }\n  },\n})\n</script>\n"],"names":["defineComponent"],"mappings":";;;;;;;AASA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ;AACN,WAAO;AAAA,MACL,IAAI;AAAA,QACF,YAAY,IAAI;AACd,uBAAS,IAAI;AACb,cAAI,CAAC,GAAG;AAAS,eAAG,UAAU;AAE9B,aAAG,QAAQ,gBAAgB,GAAG,MAAM;AACpC,aAAG,QAAQ,mBAAmB,GAAG,MAAM;AAEvC,aAAG,MAAM,SAAS;AAClB,aAAG,MAAM,aAAa;AACtB,aAAG,MAAM,gBAAgB;AAAA;AAAA,QAG3B,MAAM,IAAI;AACR,aAAG,QAAQ,cAAc,GAAG,MAAM;AAClC,cAAI,GAAG,iBAAiB,GAAG;AACzB,eAAG,MAAM,SAAS,GAAG,GAAG;AACxB,eAAG,MAAM,aAAa,GAAG,QAAQ;AACjC,eAAG,MAAM,gBAAgB,GAAG,QAAQ;AAAA,iBAC/B;AACL,eAAG,MAAM,SAAS;AAClB,eAAG,MAAM,aAAa,GAAG,QAAQ;AACjC,eAAG,MAAM,gBAAgB,GAAG,QAAQ;AAAA;AAGtC,aAAG,MAAM,WAAW;AAAA;AAAA,QAGtB,WAAW,IAAI;AAEb,0BAAY,IAAI;AAChB,aAAG,MAAM,SAAS;AAClB,aAAG,MAAM,WAAW,GAAG,QAAQ;AAAA;AAAA,QAGjC,YAAY,IAAI;AACd,cAAI,CAAC,GAAG;AAAS,eAAG,UAAU;AAC9B,aAAG,QAAQ,gBAAgB,GAAG,MAAM;AACpC,aAAG,QAAQ,mBAAmB,GAAG,MAAM;AACvC,aAAG,QAAQ,cAAc,GAAG,MAAM;AAElC,aAAG,MAAM,SAAS,GAAG,GAAG;AACxB,aAAG,MAAM,WAAW;AAAA;AAAA,QAGtB,MAAM,IAAI;AACR,cAAI,GAAG,iBAAiB,GAAG;AAEzB,yBAAS,IAAI;AAGb,eAAG,MAAM,qBAAqB;AAC9B,eAAG,MAAM,SAAS;AAClB,eAAG,MAAM,aAAa;AACtB,eAAG,MAAM,gBAAgB;AAAA;AAAA;AAAA,QAI7B,WAAW,IAAI;AACb,0BAAY,IAAI;AAChB,aAAG,MAAM,SAAS;AAClB,aAAG,MAAM,WAAW,GAAG,QAAQ;AAC/B,aAAG,MAAM,aAAa,GAAG,QAAQ;AACjC,aAAG,MAAM,gBAAgB,GAAG,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/collapse-transition/src/collapse-transition.vue_vue_type_template_id_f68ae30a_lang.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.Transition, vue.toHandlers(_ctx.on), {
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 16);
+}
+
+exports.render = render;
+//# sourceMappingURL=collapse-transition.vue_vue_type_template_id_f68ae30a_lang.js.map

package/lib/components/collapse-transition/src/collapse-transition.vue_vue_type_template_id_f68ae30a_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-transition.vue_vue_type_template_id_f68ae30a_lang.js","sources":["../../../../../../packages/components/collapse-transition/src/collapse-transition.vue?vue&type=template&id=f68ae30a&lang.js"],"sourcesContent":["<template>\n  <transition v-on=\"on\">\n    <slot></slot>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { addClass, removeClass } from '@element-plus/utils/dom'\n\nexport default defineComponent({\n  name: 'ElCollapseTransition',\n  setup() {\n    return {\n      on: {\n        beforeEnter(el) {\n          addClass(el, 'collapse-transition')\n          if (!el.dataset) el.dataset = {}\n\n          el.dataset.oldPaddingTop = el.style.paddingTop\n          el.dataset.oldPaddingBottom = el.style.paddingBottom\n\n          el.style.height = '0'\n          el.style.paddingTop = 0\n          el.style.paddingBottom = 0\n        },\n\n        enter(el) {\n          el.dataset.oldOverflow = el.style.overflow\n          if (el.scrollHeight !== 0) {\n            el.style.height = `${el.scrollHeight}px`\n            el.style.paddingTop = el.dataset.oldPaddingTop\n            el.style.paddingBottom = el.dataset.oldPaddingBottom\n          } else {\n            el.style.height = ''\n            el.style.paddingTop = el.dataset.oldPaddingTop\n            el.style.paddingBottom = el.dataset.oldPaddingBottom\n          }\n\n          el.style.overflow = 'hidden'\n        },\n\n        afterEnter(el) {\n          // for safari: remove class then reset height is necessary\n          removeClass(el, 'collapse-transition')\n          el.style.height = ''\n          el.style.overflow = el.dataset.oldOverflow\n        },\n\n        beforeLeave(el) {\n          if (!el.dataset) el.dataset = {}\n          el.dataset.oldPaddingTop = el.style.paddingTop\n          el.dataset.oldPaddingBottom = el.style.paddingBottom\n          el.dataset.oldOverflow = el.style.overflow\n\n          el.style.height = `${el.scrollHeight}px`\n          el.style.overflow = 'hidden'\n        },\n\n        leave(el) {\n          if (el.scrollHeight !== 0) {\n            // for safari: add class after set height, or it will jump to zero height suddenly, weired\n            addClass(el, 'collapse-transition')\n            // fix #968 collapse animation failure.\n            // in vue3.0.4, transitionProperty is set 'none' to avoid 'v-leave-from' issue\n            el.style.transitionProperty = 'height'\n            el.style.height = 0\n            el.style.paddingTop = 0\n            el.style.paddingBottom = 0\n          }\n        },\n\n        afterLeave(el) {\n          removeClass(el, 'collapse-transition')\n          el.style.height = ''\n          el.style.overflow = el.dataset.oldOverflow\n          el.style.paddingTop = el.dataset.oldPaddingTop\n          el.style.paddingBottom = el.dataset.oldPaddingBottom\n        },\n      },\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_toHandlers","_renderSlot"],"mappings":";;;;;;;0BACEA,gCAAYC,eAAS;yBACnB;MAAAC;;;;;;;;"}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('./src/index.js');
-var index_vue_vue_type_script_lang = require('./src/index.vue_vue&type=script&lang.js');
+var index_vue_vue_type_script_lang = require('./src/index.vue_vue_type_script_lang.js');
 
 index_vue_vue_type_script_lang["default"].install = (app) => {
   app.component(index_vue_vue_type_script_lang["default"].name, index_vue_vue_type_script_lang["default"]);

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var alphaSlider_vue_vue_type_script_lang = require('./alpha-slider.vue_vue&type=script&lang.js');
-var alphaSlider_vue_vue_type_template_id_4fb2624c_lang = require('./alpha-slider.vue_vue&type=template&id=4fb2624c&lang.js');
+var alphaSlider_vue_vue_type_script_lang = require('./alpha-slider.vue_vue_type_script_lang.js');
+var alphaSlider_vue_vue_type_template_id_4fb2624c_lang = require('./alpha-slider.vue_vue_type_template_id_4fb2624c_lang.js');
 
 alphaSlider_vue_vue_type_script_lang["default"].render = alphaSlider_vue_vue_type_template_id_4fb2624c_lang.render;
 alphaSlider_vue_vue_type_script_lang["default"].__file = "packages/components/color-picker/src/components/alpha-slider.vue";

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

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

@@ -0,0 +1 @@
+{"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","getCurrentInstance","shallowRef","ref","getClientXY"],"mappings":";;;;;;;;AAqCA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IAEZ,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO;AACX,UAAM,WAAWC;AAEjB,UAAM,QAAQC,eAAkC;AAChD,UAAM,MAAMA,eAAkC;AAG9C,UAAM,YAAYC,QAAI;AACtB,UAAM,WAAWA,QAAI;AACrB,UAAM,aAAaA,QAAsB;AAEzC,cACE,MAAM,MAAM,MAAM,IAAI,UACtB,MAAM;AACJ;AAAA;AAGJ,cACE,MAAM,MAAM,MAAM,OAClB,MAAM;AACJ;AAAA;AAKJ,4BAAwB;AACtB,UAAI,MAAM;AAAU,eAAO;AAC3B,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,QAAQ,MAAM,MAAM,IAAI;AAE9B,UAAI,CAAC;AAAI,eAAO;AAChB,aAAO,KAAK,MACT,YAAY,cAAc,MAAM,MAAM,cAAc,KAAM;AAAA;AAI/D,2BAAuB;AACrB,YAAM,KAAK,SAAS,MAAM;AAC1B,UAAI,CAAC,MAAM;AAAU,eAAO;AAC5B,YAAM,QAAQ,MAAM,MAAM,IAAI;AAE9B,UAAI,CAAC;AAAI,eAAO;AAChB,aAAO,KAAK,MACT,YAAY,eAAe,MAAM,MAAM,eAAe,KAAM;AAAA;AAIjE,6BAAyB;AACvB,UAAI,MAAM,SAAS,MAAM,MAAM,OAAO;AACpC,cAAM,EAAE,GAAG,GAAG,MAAM,MAAM,MAAM;AAChC,eAAO,kCAAkC,MAAM,MAAM,kBAAkB,MAAM,MAAM;AAAA;AAErF,aAAO;AAAA;AAGT,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;AAEzC,UAAI,CAAC,MAAM,UAAU;AACnB,YAAI,OAAO,UAAU,KAAK;AAC1B,eAAO,KAAK,IAAI,MAAM,MAAM,cAAc,GAAG;AAC7C,eAAO,KAAK,IAAI,MAAM,KAAK,QAAQ,MAAM,MAAM,cAAc;AAE7D,cAAM,MAAM,IACV,SACA,KAAK,MACD,QAAO,MAAM,MAAM,cAAc,WAC3B,QAAQ,MAAM,MAAM,eAC1B;AAAA,aAGD;AACL,YAAI,MAAM,UAAU,KAAK;AACzB,cAAM,KAAK,IAAI,MAAM,MAAM,eAAe,GAAG;AAC7C,cAAM,KAAK,IAAI,KAAK,KAAK,SAAS,MAAM,MAAM,eAAe;AAE7D,cAAM,MAAM,IACV,SACA,KAAK,MACD,OAAM,MAAM,MAAM,eAAe,WAC3B,SAAS,MAAM,MAAM,gBAC3B;AAAA;AAAA;AAMV,sBAAkB;AAChB,gBAAU,QAAQ;AAClB,eAAS,QAAQ;AACjB,iBAAW,QAAQ;AAAA;AAIrB,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/alpha-slider.vue_vue_type_template_id_4fb2624c_lang.js

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

@@ -0,0 +1 @@
+{"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":["_createElementBlock","_createElementVNode"],"mappings":";;;;;;;0BACEA;IAAK,2BAAM,0CAAiD;;IAC1DC;MACE,KAAI;AAAA,MACJ,OAAM;AAAA,MACL;;;MAGA,gDAAO;;IAEVA;MACE,KAAI;AAAA,MACJ,OAAM;AAAA,MACL;;;;;;;;;;"}

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var hueSlider_vue_vue_type_script_lang = require('./hue-slider.vue_vue&type=script&lang.js');
-var hueSlider_vue_vue_type_template_id_129d2b72_lang = require('./hue-slider.vue_vue&type=template&id=129d2b72&lang.js');
+var hueSlider_vue_vue_type_script_lang = require('./hue-slider.vue_vue_type_script_lang.js');
+var hueSlider_vue_vue_type_template_id_129d2b72_lang = require('./hue-slider.vue_vue_type_template_id_129d2b72_lang.js');
 
 hueSlider_vue_vue_type_script_lang["default"].render = hueSlider_vue_vue_type_template_id_129d2b72_lang.render;
 hueSlider_vue_vue_type_script_lang["default"].__file = "packages/components/color-picker/src/components/hue-slider.vue";

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

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