@element-plus/nightly 0.0.20220121 → 0.0.20220125

package/es/components/collapse/src/collapse.mjs

@@ -1,7 +1,66 @@
-import script from './collapse.vue_vue_type_script_lang.mjs';
-export { default } from './collapse.vue_vue_type_script_lang.mjs';
-import { render } from './collapse.vue_vue_type_template_id_71a60e25_lang.mjs';
+import { defineComponent, ref, watch, provide, openBlock, createElementBlock, renderSlot } from 'vue';
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../utils/constants.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 
-script.render = render;
-script.__file = "packages/components/collapse/src/collapse.vue";
+const _sfc_main = defineComponent({
+  name: "ElCollapse",
+  props: {
+    accordion: Boolean,
+    modelValue: {
+      type: [Array, String, Number],
+      default: () => []
+    }
+  },
+  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT],
+  setup(props, { emit }) {
+    const activeNames = ref([].concat(props.modelValue));
+    const setActiveNames = (_activeNames) => {
+      activeNames.value = [].concat(_activeNames);
+      const value = props.accordion ? activeNames.value[0] : activeNames.value;
+      emit(UPDATE_MODEL_EVENT, value);
+      emit(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);
+      }
+    };
+    watch(() => props.modelValue, () => {
+      activeNames.value = [].concat(props.modelValue);
+    }, {
+      deep: true
+    });
+    provide("collapse", {
+      activeNames,
+      handleItemClick
+    });
+    return {
+      activeNames,
+      setActiveNames,
+      handleItemClick
+    };
+  }
+});
+const _hoisted_1 = {
+  class: "el-collapse",
+  role: "tablist",
+  "aria-multiselectable": "true"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var Collapse = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { Collapse as default };
 //# sourceMappingURL=collapse.mjs.map

package/es/components/collapse/src/collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"collapse.mjs","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        deep: true,\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":["_openBlock","_createElementBlock"],"mappings":";;;;AAYA,MAAK,YAAa,gBAAa;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,CAAC,oBAAoB;AAAA,EAC5B,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,cAAc,IAAI,GAAG,OAAO,MAAM;AAExC,UAAM,iBAAiB,CAAC,iBAAiB;AACvC,kBAAY,QAAQ,GAAG,OAAO;AAC9B,YAAM,QAAQ,MAAM,YAAY,YAAY,MAAM,KAAK,YAAY;AACnE,WAAK,oBAAoB;AACzB,WAAK,cAAc;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,UACE,MAAM,MAAM,YACZ,MAAM;AACJ,kBAAY,QAAQ,GAAG,OAAO,MAAM;AAAA,OAEtC;AAAA,MACE,MAAM;AAAA;AAIV,YAA0B,YAAY;AAAA,MACpC;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;MAxEC,aAAM;AAAA,EAAc,OAAK;AAAA,EAAU;AAAA;;2BAAxC,yCAEM;SADJA,aAAaC;AAAA;;;;;;;"}

package/es/components/collapse-transition/index.mjs

@@ -1,10 +1,9 @@
-import './src/collapse-transition.mjs';
-import script from './src/collapse-transition.vue_vue_type_script_lang.mjs';
+import CollapseTransition from './src/collapse-transition.mjs';
 
-script.install = (app) => {
-  app.component(script.name, script);
+CollapseTransition.install = (app) => {
+  app.component(CollapseTransition.name, CollapseTransition);
 };
-const _CollapseTransition = script;
+const _CollapseTransition = CollapseTransition;
 const ElCollapseTransition = _CollapseTransition;
 
 export { ElCollapseTransition, _CollapseTransition as default };

package/es/components/collapse-transition/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/collapse-transition/index.ts"],"sourcesContent":["import CollapseTransition from './src/collapse-transition.vue'\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils/types'\n\nCollapseTransition.install = (app: App): void => {\n  app.component(CollapseTransition.name, CollapseTransition)\n}\n\nconst _CollapseTransition = CollapseTransition as SFCWithInstall<\n  typeof CollapseTransition\n>\n\nexport default _CollapseTransition\nexport const ElCollapseTransition = _CollapseTransition\n"],"names":["CollapseTransition"],"mappings":";;;AACAA,MAAkB,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AACtC,EAAE,GAAG,CAAC,SAAS,CAACA,MAAkB,CAAC,IAAI,EAAEA,MAAkB,CAAC,CAAC;AAC7D,CAAC,CAAC;AACG,MAAC,mBAAmB,GAAGA,OAAmB;AAEnC,MAAC,oBAAoB,GAAG;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/collapse-transition/index.ts"],"sourcesContent":["import CollapseTransition from './src/collapse-transition.vue'\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils/types'\n\nCollapseTransition.install = (app: App): void => {\n  app.component(CollapseTransition.name, CollapseTransition)\n}\n\nconst _CollapseTransition = CollapseTransition as SFCWithInstall<\n  typeof CollapseTransition\n>\n\nexport default _CollapseTransition\nexport const ElCollapseTransition = _CollapseTransition\n"],"names":[],"mappings":";;AACA,kBAAkB,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AACtC,EAAE,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;AAC7D,CAAC,CAAC;AACG,MAAC,mBAAmB,GAAG,mBAAmB;AAEnC,MAAC,oBAAoB,GAAG;;;;"}

package/es/components/collapse-transition/src/collapse-transition.mjs

@@ -1,7 +1,72 @@
-import script from './collapse-transition.vue_vue_type_script_lang.mjs';
-export { default } from './collapse-transition.vue_vue_type_script_lang.mjs';
-import { render } from './collapse-transition.vue_vue_type_template_id_f68ae30a_lang.mjs';
+import { defineComponent, openBlock, createBlock, Transition, mergeProps, toHandlers, withCtx, renderSlot } from 'vue';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 
-script.render = render;
-script.__file = "packages/components/collapse-transition/src/collapse-transition.vue";
+const _sfc_main = defineComponent({
+  name: "ElCollapseTransition",
+  setup() {
+    return {
+      on: {
+        beforeEnter(el) {
+          if (!el.dataset)
+            el.dataset = {};
+          el.dataset.oldPaddingTop = el.style.paddingTop;
+          el.dataset.oldPaddingBottom = el.style.paddingBottom;
+          el.style.maxHeight = 0;
+          el.style.paddingTop = 0;
+          el.style.paddingBottom = 0;
+        },
+        enter(el) {
+          el.dataset.oldOverflow = el.style.overflow;
+          if (el.scrollHeight !== 0) {
+            el.style.maxHeight = `${el.scrollHeight}px`;
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+          } else {
+            el.style.maxHeight = 0;
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+          }
+          el.style.overflow = "hidden";
+        },
+        afterEnter(el) {
+          el.style.maxHeight = "";
+          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.maxHeight = `${el.scrollHeight}px`;
+          el.style.overflow = "hidden";
+        },
+        leave(el) {
+          if (el.scrollHeight !== 0) {
+            el.style.maxHeight = 0;
+            el.style.paddingTop = 0;
+            el.style.paddingBottom = 0;
+          }
+        },
+        afterLeave(el) {
+          el.style.maxHeight = "";
+          el.style.overflow = el.dataset.oldOverflow;
+          el.style.paddingTop = el.dataset.oldPaddingTop;
+          el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        }
+      }
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Transition, mergeProps({ name: "el-collapse-transition" }, toHandlers(_ctx.on)), {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 16);
+}
+var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { CollapseTransition as default };
 //# sourceMappingURL=collapse-transition.mjs.map

package/es/components/collapse-transition/src/collapse-transition.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-transition.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"collapse-transition.mjs","sources":["../../../../../../packages/components/collapse-transition/src/collapse-transition.vue"],"sourcesContent":["<template>\n  <transition name=\"el-collapse-transition\" v-on=\"on\">\n    <slot></slot>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'ElCollapseTransition',\n  setup() {\n    return {\n      on: {\n        beforeEnter(el) {\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.maxHeight = 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.maxHeight = `${el.scrollHeight}px`\n            el.style.paddingTop = el.dataset.oldPaddingTop\n            el.style.paddingBottom = el.dataset.oldPaddingBottom\n          } else {\n            el.style.maxHeight = 0\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          el.style.maxHeight = ''\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.maxHeight = `${el.scrollHeight}px`\n          el.style.overflow = 'hidden'\n        },\n\n        leave(el) {\n          if (el.scrollHeight !== 0) {\n            el.style.maxHeight = 0\n            el.style.paddingTop = 0\n            el.style.paddingBottom = 0\n          }\n        },\n\n        afterLeave(el) {\n          el.style.maxHeight = ''\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","_withCtx"],"mappings":";;;AAQA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ;AACN,WAAO;AAAA,MACL,IAAI;AAAA,QACF,YAAY,IAAI;AACd,cAAI,CAAC,GAAG;AAAS,eAAG,UAAU;AAE9B,aAAG,QAAQ,gBAAgB,GAAG,MAAM;AACpC,aAAG,QAAQ,mBAAmB,GAAG,MAAM;AAEvC,aAAG,MAAM,YAAY;AACrB,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,YAAY,GAAG,GAAG;AAC3B,eAAG,MAAM,aAAa,GAAG,QAAQ;AACjC,eAAG,MAAM,gBAAgB,GAAG,QAAQ;AAAA,iBAC/B;AACL,eAAG,MAAM,YAAY;AACrB,eAAG,MAAM,aAAa,GAAG,QAAQ;AACjC,eAAG,MAAM,gBAAgB,GAAG,QAAQ;AAAA;AAGtC,aAAG,MAAM,WAAW;AAAA;AAAA,QAGtB,WAAW,IAAI;AACb,aAAG,MAAM,YAAY;AACrB,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,YAAY,GAAG,GAAG;AAC3B,aAAG,MAAM,WAAW;AAAA;AAAA,QAGtB,MAAM,IAAI;AACR,cAAI,GAAG,iBAAiB,GAAG;AACzB,eAAG,MAAM,YAAY;AACrB,eAAG,MAAM,aAAa;AACtB,eAAG,MAAM,gBAAgB;AAAA;AAAA;AAAA,QAI7B,WAAW,IAAI;AACb,aAAG,MAAM,YAAY;AACrB,aAAG,MAAM,WAAW,GAAG,QAAQ;AAC/B,aAAG,MAAM,aAAa,GAAG,QAAQ;AACjC,aAAG,MAAM,gBAAgB,GAAG,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;2BAjE5C,gBAEa,QAFb,iBAAgB;sBACDA;AAAA,aAAbC,QAAa;AAAA;;;;;;;;;"}

package/es/components/collection/src/collection-item.mjs

@@ -1,7 +1,14 @@
-import script from './collection-item.vue_vue_type_script_lang.mjs';
-export { default } from './collection-item.vue_vue_type_script_lang.mjs';
-import { render } from './collection-item.vue_vue_type_template_id_dd23be6a_lang.mjs';
+import { defineComponent, renderSlot } from 'vue';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 
-script.render = render;
-script.__file = "packages/components/collection/src/collection-item.vue";
+const _sfc_main = defineComponent({
+  name: "ElCollectionItem",
+  inheritAttrs: false
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return renderSlot(_ctx.$slots, "default");
+}
+var CollectionItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { CollectionItem as default };
 //# sourceMappingURL=collection-item.mjs.map

package/es/components/collection/src/collection-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collection-item.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"collection-item.mjs","sources":["../../../../../../packages/components/collection/src/collection-item.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'ElCollectionItem',\n  inheritAttrs: false,\n})\n</script>\n"],"names":[],"mappings":";;;AAOA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA;qBARN;;;;;;;"}

package/es/components/collection/src/collection.mjs

@@ -1,8 +1,6 @@
 import { ref, unref, provide, inject, onMounted, onBeforeUnmount } from 'vue';
-import './collection2.mjs';
-import './collection-item.mjs';
-import script from './collection.vue_vue_type_script_lang.mjs';
-import script$1 from './collection-item.vue_vue_type_script_lang.mjs';
+import Collection from './collection2.mjs';
+import CollectionItem from './collection-item.mjs';
 
 const COLLECTION_ITEM_SIGN = `data-el-collection-item`;
 const createCollectionWithScope = (name) => {
@@ -11,7 +9,7 @@ const createCollectionWithScope = (name) => {
   const COLLECTION_INJECTION_KEY = Symbol(COLLECTION_NAME);
   const COLLECTION_ITEM_INJECTION_KEY = Symbol(COLLECTION_ITEM_NAME);
   const ElCollection = {
-    ...script,
+    ...Collection,
     name: COLLECTION_NAME,
     setup() {
       const collectionRef = ref(null);
@@ -33,7 +31,7 @@ const createCollectionWithScope = (name) => {
     }
   };
   const ElCollectionItem = {
-    ...script$1,
+    ...CollectionItem,
     name: COLLECTION_ITEM_NAME,
     setup(_, { attrs }) {
       const collectionItemRef = ref(null);

package/es/components/collection/src/collection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collection.mjs","sources":["../../../../../../packages/components/collection/src/collection.ts"],"sourcesContent":["import { ref, inject, onMounted, onBeforeUnmount, provide, unref } from 'vue'\nimport Collection from './collection.vue'\nimport CollectionItem from './collection-item.vue'\n\nimport type { InjectionKey } from 'vue'\nimport type {\n  ElCollectionInjectionContext,\n  ElCollectionItemInjectionContext,\n} from './tokens'\n\nexport const COLLECTION_ITEM_SIGN = `data-el-collection-item`\n\n// Make sure the first letter of name is capitalized\nexport const createCollectionWithScope = (name: string) => {\n  const COLLECTION_NAME = `El${name}Collection`\n  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`\n  const COLLECTION_INJECTION_KEY: InjectionKey<ElCollectionInjectionContext> =\n    Symbol(COLLECTION_NAME)\n  const COLLECTION_ITEM_INJECTION_KEY: InjectionKey<ElCollectionItemInjectionContext> =\n    Symbol(COLLECTION_ITEM_NAME)\n\n  const ElCollection = {\n    ...Collection,\n    name: COLLECTION_NAME,\n    setup() {\n      const collectionRef = ref<HTMLElement | null>(null)\n      const itemMap: ElCollectionInjectionContext['itemMap'] = new Map()\n      const getItems = () => {\n        const collectionEl = unref(collectionRef)\n\n        if (!collectionEl) return []\n        const orderedNodes = Array.from(\n          collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`)\n        )\n\n        const items = [...itemMap.values()]\n\n        const orderedItems = items.sort(\n          (a, b) => orderedNodes.indexOf(a.ref!) - orderedNodes.indexOf(b.ref!)\n        )\n        return orderedItems\n      }\n\n      provide(COLLECTION_INJECTION_KEY, {\n        itemMap,\n        getItems,\n        collectionRef,\n      })\n    },\n  }\n\n  const ElCollectionItem = {\n    ...CollectionItem,\n    name: COLLECTION_ITEM_NAME,\n    setup(_, { attrs }) {\n      const collectionItemRef = ref<HTMLElement | null>(null)\n      const collectionInjection = inject(COLLECTION_INJECTION_KEY, undefined)!\n\n      provide(COLLECTION_ITEM_INJECTION_KEY, {\n        collectionItemRef,\n      })\n\n      onMounted(() => {\n        const collectionItemEl = unref(collectionItemRef)\n        if (collectionItemEl) {\n          collectionInjection.itemMap.set(collectionItemEl, {\n            ref: collectionItemEl,\n            ...attrs,\n          })\n        }\n      })\n\n      onBeforeUnmount(() => {\n        const collectionItemEl = unref(collectionItemRef)!\n        collectionInjection.itemMap.delete(collectionItemEl)\n      })\n    },\n  }\n\n  return {\n    COLLECTION_INJECTION_KEY,\n    COLLECTION_ITEM_INJECTION_KEY,\n    ElCollection,\n    ElCollectionItem,\n  }\n}\n"],"names":["Collection","CollectionItem"],"mappings":";;;;;;AAGY,MAAC,oBAAoB,GAAG,CAAC,uBAAuB,EAAE;AAClD,MAAC,yBAAyB,GAAG,CAAC,IAAI,KAAK;AACnD,EAAE,MAAM,eAAe,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,EAAE,MAAM,oBAAoB,GAAG,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;AACxD,EAAE,MAAM,wBAAwB,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;AAC3D,EAAE,MAAM,6BAA6B,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;AACrE,EAAE,MAAM,YAAY,GAAG;AACvB,IAAI,GAAGA,MAAU;AACjB,IAAI,IAAI,EAAE,eAAe;AACzB,IAAI,KAAK,GAAG;AACZ,MAAM,MAAM,aAAa,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;AACtC,MAAM,MAAM,OAAO,mBAAmB,IAAI,GAAG,EAAE,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,MAAM;AAC7B,QAAQ,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAClD,QAAQ,IAAI,CAAC,YAAY;AACzB,UAAU,OAAO,EAAE,CAAC;AACpB,QAAQ,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACpG,QAAQ,MAAM,KAAK,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;AAC5C,QAAQ,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7G,QAAQ,OAAO,YAAY,CAAC;AAC5B,OAAO,CAAC;AACR,MAAM,OAAO,CAAC,wBAAwB,EAAE;AACxC,QAAQ,OAAO;AACf,QAAQ,QAAQ;AAChB,QAAQ,aAAa;AACrB,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,gBAAgB,GAAG;AAC3B,IAAI,GAAGC,QAAc;AACrB,IAAI,IAAI,EAAE,oBAAoB;AAC9B,IAAI,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;AACxB,MAAM,MAAM,iBAAiB,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;AAC1C,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC;AAC3E,MAAM,OAAO,CAAC,6BAA6B,EAAE;AAC7C,QAAQ,iBAAiB;AACzB,OAAO,CAAC,CAAC;AACT,MAAM,SAAS,CAAC,MAAM;AACtB,QAAQ,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAC1D,QAAQ,IAAI,gBAAgB,EAAE;AAC9B,UAAU,mBAAmB,CAAC,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE;AAC5D,YAAY,GAAG,EAAE,gBAAgB;AACjC,YAAY,GAAG,KAAK;AACpB,WAAW,CAAC,CAAC;AACb,SAAS;AACT,OAAO,CAAC,CAAC;AACT,MAAM,eAAe,CAAC,MAAM;AAC5B,QAAQ,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAC1D,QAAQ,mBAAmB,CAAC,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAC7D,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,wBAAwB;AAC5B,IAAI,6BAA6B;AACjC,IAAI,YAAY;AAChB,IAAI,gBAAgB;AACpB,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"collection.mjs","sources":["../../../../../../packages/components/collection/src/collection.ts"],"sourcesContent":["import { ref, inject, onMounted, onBeforeUnmount, provide, unref } from 'vue'\nimport Collection from './collection.vue'\nimport CollectionItem from './collection-item.vue'\n\nimport type { InjectionKey } from 'vue'\nimport type {\n  ElCollectionInjectionContext,\n  ElCollectionItemInjectionContext,\n} from './tokens'\n\nexport const COLLECTION_ITEM_SIGN = `data-el-collection-item`\n\n// Make sure the first letter of name is capitalized\nexport const createCollectionWithScope = (name: string) => {\n  const COLLECTION_NAME = `El${name}Collection`\n  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`\n  const COLLECTION_INJECTION_KEY: InjectionKey<ElCollectionInjectionContext> =\n    Symbol(COLLECTION_NAME)\n  const COLLECTION_ITEM_INJECTION_KEY: InjectionKey<ElCollectionItemInjectionContext> =\n    Symbol(COLLECTION_ITEM_NAME)\n\n  const ElCollection = {\n    ...Collection,\n    name: COLLECTION_NAME,\n    setup() {\n      const collectionRef = ref<HTMLElement | null>(null)\n      const itemMap: ElCollectionInjectionContext['itemMap'] = new Map()\n      const getItems = () => {\n        const collectionEl = unref(collectionRef)\n\n        if (!collectionEl) return []\n        const orderedNodes = Array.from(\n          collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`)\n        )\n\n        const items = [...itemMap.values()]\n\n        const orderedItems = items.sort(\n          (a, b) => orderedNodes.indexOf(a.ref!) - orderedNodes.indexOf(b.ref!)\n        )\n        return orderedItems\n      }\n\n      provide(COLLECTION_INJECTION_KEY, {\n        itemMap,\n        getItems,\n        collectionRef,\n      })\n    },\n  }\n\n  const ElCollectionItem = {\n    ...CollectionItem,\n    name: COLLECTION_ITEM_NAME,\n    setup(_, { attrs }) {\n      const collectionItemRef = ref<HTMLElement | null>(null)\n      const collectionInjection = inject(COLLECTION_INJECTION_KEY, undefined)!\n\n      provide(COLLECTION_ITEM_INJECTION_KEY, {\n        collectionItemRef,\n      })\n\n      onMounted(() => {\n        const collectionItemEl = unref(collectionItemRef)\n        if (collectionItemEl) {\n          collectionInjection.itemMap.set(collectionItemEl, {\n            ref: collectionItemEl,\n            ...attrs,\n          })\n        }\n      })\n\n      onBeforeUnmount(() => {\n        const collectionItemEl = unref(collectionItemRef)!\n        collectionInjection.itemMap.delete(collectionItemEl)\n      })\n    },\n  }\n\n  return {\n    COLLECTION_INJECTION_KEY,\n    COLLECTION_ITEM_INJECTION_KEY,\n    ElCollection,\n    ElCollectionItem,\n  }\n}\n"],"names":[],"mappings":"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"}

package/es/components/collection/src/collection2.mjs

@@ -1,7 +1,13 @@
-import script from './collection.vue_vue_type_script_lang.mjs';
-export { default } from './collection.vue_vue_type_script_lang.mjs';
-import { render } from './collection.vue_vue_type_template_id_5f9c2545_lang.mjs';
+import { defineComponent, renderSlot } from 'vue';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 
-script.render = render;
-script.__file = "packages/components/collection/src/collection.vue";
+const _sfc_main = defineComponent({
+  inheritAttrs: false
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return renderSlot(_ctx.$slots, "default");
+}
+var Collection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { Collection as default };
 //# sourceMappingURL=collection2.mjs.map

package/es/components/collection/src/collection2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collection2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"collection2.mjs","sources":["../../../../../../packages/components/collection/src/collection.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  inheritAttrs: false,\n})\n</script>\n"],"names":[],"mappings":";;;AAOA,MAAK,YAAa,gBAAa;AAAA,EAC7B,cAAc;AAAA;qBAPN;;;;;;;"}

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

@@ -1,10 +1,9 @@
-import './src/index.mjs';
-import script from './src/index.vue_vue_type_script_lang.mjs';
+import ColorPicker from './src/index.mjs';
 
-script.install = (app) => {
-  app.component(script.name, script);
+ColorPicker.install = (app) => {
+  app.component(ColorPicker.name, ColorPicker);
 };
-const _ColorPicker = script;
+const _ColorPicker = ColorPicker;
 const ElColorPicker = _ColorPicker;
 
 export { ElColorPicker, _ColorPicker as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/color-picker/index.ts"],"sourcesContent":["import ColorPicker from './src/index.vue'\n\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils/types'\n\nColorPicker.install = (app: App): void => {\n  app.component(ColorPicker.name, ColorPicker)\n}\n\nconst _ColorPicker = ColorPicker as SFCWithInstall<typeof ColorPicker>\n\nexport default _ColorPicker\nexport const ElColorPicker = _ColorPicker\n"],"names":["ColorPicker"],"mappings":";;;AACAA,MAAW,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AAC/B,EAAE,GAAG,CAAC,SAAS,CAACA,MAAW,CAAC,IAAI,EAAEA,MAAW,CAAC,CAAC;AAC/C,CAAC,CAAC;AACG,MAAC,YAAY,GAAGA,OAAY;AAErB,MAAC,aAAa,GAAG;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/color-picker/index.ts"],"sourcesContent":["import ColorPicker from './src/index.vue'\n\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils/types'\n\nColorPicker.install = (app: App): void => {\n  app.component(ColorPicker.name, ColorPicker)\n}\n\nconst _ColorPicker = ColorPicker as SFCWithInstall<typeof ColorPicker>\n\nexport default _ColorPicker\nexport const ElColorPicker = _ColorPicker\n"],"names":[],"mappings":";;AACA,WAAW,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AAC/B,EAAE,GAAG,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC/C,CAAC,CAAC;AACG,MAAC,YAAY,GAAG,YAAY;AAErB,MAAC,aAAa,GAAG;;;;"}

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

@@ -1,7 +1,132 @@
-import script from './alpha-slider.vue_vue_type_script_lang.mjs';
-export { default } from './alpha-slider.vue_vue_type_script_lang.mjs';
-import { render } from './alpha-slider.vue_vue_type_template_id_4fb2624c_lang.mjs';
+import { defineComponent, getCurrentInstance, shallowRef, ref, watch, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle } from 'vue';
+import { getClientXY } from '../../../../utils/dom.mjs';
+import draggable from '../draggable.mjs';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
 
-script.render = render;
-script.__file = "packages/components/color-picker/src/components/alpha-slider.vue";
+const _sfc_main = defineComponent({
+  name: "ElColorAlphaSlider",
+  props: {
+    color: {
+      type: Object,
+      required: true
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const instance = getCurrentInstance();
+    const thumb = shallowRef(null);
+    const bar = shallowRef(null);
+    const thumbLeft = ref(0);
+    const thumbTop = ref(0);
+    const background = ref(null);
+    watch(() => props.color.get("alpha"), () => {
+      update();
+    });
+    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 } = 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();
+    }
+    onMounted(() => {
+      const dragConfig = {
+        drag: (event) => {
+          handleDrag(event);
+        },
+        end: (event) => {
+          handleDrag(event);
+        }
+      };
+      draggable(bar.value, dragConfig);
+      draggable(thumb.value, dragConfig);
+      update();
+    });
+    return {
+      thumb,
+      bar,
+      thumbLeft,
+      thumbTop,
+      background,
+      handleClick,
+      update
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["el-color-alpha-slider", { "is-vertical": _ctx.vertical }])
+  }, [
+    createElementVNode("div", {
+      ref: "bar",
+      class: "el-color-alpha-slider__bar",
+      style: normalizeStyle({
+        background: _ctx.background
+      }),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    }, null, 4),
+    createElementVNode("div", {
+      ref: "thumb",
+      class: "el-color-alpha-slider__thumb",
+      style: normalizeStyle({
+        left: _ctx.thumbLeft + "px",
+        top: _ctx.thumbTop + "px"
+      })
+    }, null, 4)
+  ], 2);
+}
+var AlphaSlider = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { AlphaSlider as default };
 //# sourceMappingURL=alpha-slider.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"alpha-slider.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"alpha-slider.mjs","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":["_openBlock"],"mappings":";;;;;AAqCA,MAAK,YAAa,gBAAa;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,WAAW;AAEjB,UAAM,QAAQ,WAAkC;AAChD,UAAM,MAAM,WAAkC;AAG9C,UAAM,YAAY,IAAI;AACtB,UAAM,WAAW,IAAI;AACrB,UAAM,aAAa,IAAsB;AAEzC,UACE,MAAM,MAAM,MAAM,IAAI,UACtB,MAAM;AACJ;AAAA;AAGJ,UACE,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,YAAY,YAAY;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,cAAU,MAAM;AACd,YAAM,aAAa;AAAA,QACjB,MAAM,CAAC,UAAU;AACf,qBAAW;AAAA;AAAA,QAEb,KAAK,CAAC,UAAU;AACd,qBAAW;AAAA;AAAA;AAIf,gBAAU,IAAI,OAAO;AACrB,gBAAU,MAAM,OAAO;AACvB;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;2BA9KJ,wBAiBM;SAjBIA,gCAAC,OAAuB;AAAA;KAChC;AAAA,uBACW;AAAA,MACT,KAAK;AAAA,MACJ,OAAK;AAAA,4BAAY;AAAA;;;OAKpB;AAAA,uBACa;AAAA,MACX,KAAK;AAAA,MACJ,OAAK;AAAA,4BAA2B;AAAA,cAAsB,iBAAQ;AAAA;;;;;;;;;"}

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

@@ -1,7 +1,119 @@
-import script from './hue-slider.vue_vue_type_script_lang.mjs';
-export { default } from './hue-slider.vue_vue_type_script_lang.mjs';
-import { render } from './hue-slider.vue_vue_type_template_id_129d2b72_lang.mjs';
+import { defineComponent, getCurrentInstance, ref, computed, watch, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle } from 'vue';
+import { getClientXY } from '../../../../utils/dom.mjs';
+import draggable from '../draggable.mjs';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
 
-script.render = render;
-script.__file = "packages/components/color-picker/src/components/hue-slider.vue";
+const _sfc_main = defineComponent({
+  name: "ElColorHueSlider",
+  props: {
+    color: {
+      type: Object,
+      required: true
+    },
+    vertical: Boolean
+  },
+  setup(props) {
+    const instance = getCurrentInstance();
+    const thumb = ref(null);
+    const bar = ref(null);
+    const thumbLeft = ref(0);
+    const thumbTop = ref(0);
+    const hueValue = computed(() => {
+      return props.color.get("hue");
+    });
+    watch(() => hueValue.value, () => {
+      update();
+    });
+    function handleClick(event) {
+      const target = event.target;
+      if (target !== thumb.value) {
+        handleDrag(event);
+      }
+    }
+    function handleDrag(event) {
+      const el = instance.vnode.el;
+      const rect = el.getBoundingClientRect();
+      const { clientX, clientY } = getClientXY(event);
+      let hue;
+      if (!props.vertical) {
+        let left = clientX - rect.left;
+        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+        left = Math.max(thumb.value.offsetWidth / 2, left);
+        hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360);
+      } else {
+        let top = clientY - rect.top;
+        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+        top = Math.max(thumb.value.offsetHeight / 2, top);
+        hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
+      }
+      props.color.set("hue", hue);
+    }
+    function getThumbLeft() {
+      const el = instance.vnode.el;
+      if (props.vertical)
+        return 0;
+      const hue = props.color.get("hue");
+      if (!el)
+        return 0;
+      return Math.round(hue * (el.offsetWidth - thumb.value.offsetWidth / 2) / 360);
+    }
+    function getThumbTop() {
+      const el = instance.vnode.el;
+      if (!props.vertical)
+        return 0;
+      const hue = props.color.get("hue");
+      if (!el)
+        return 0;
+      return Math.round(hue * (el.offsetHeight - thumb.value.offsetHeight / 2) / 360);
+    }
+    function update() {
+      thumbLeft.value = getThumbLeft();
+      thumbTop.value = getThumbTop();
+    }
+    onMounted(() => {
+      const dragConfig = {
+        drag: (event) => {
+          handleDrag(event);
+        },
+        end: (event) => {
+          handleDrag(event);
+        }
+      };
+      draggable(bar.value, dragConfig);
+      draggable(thumb.value, dragConfig);
+      update();
+    });
+    return {
+      bar,
+      thumb,
+      thumbLeft,
+      thumbTop,
+      hueValue,
+      handleClick,
+      update
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["el-color-hue-slider", { "is-vertical": _ctx.vertical }])
+  }, [
+    createElementVNode("div", {
+      ref: "bar",
+      class: "el-color-hue-slider__bar",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    }, null, 512),
+    createElementVNode("div", {
+      ref: "thumb",
+      class: "el-color-hue-slider__thumb",
+      style: normalizeStyle({
+        left: _ctx.thumbLeft + "px",
+        top: _ctx.thumbTop + "px"
+      })
+    }, null, 4)
+  ], 2);
+}
+var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { HueSlider as default };
 //# sourceMappingURL=hue-slider.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"hue-slider.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"hue-slider.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/hue-slider.vue"],"sourcesContent":["<template>\n  <div class=\"el-color-hue-slider\" :class=\"{ 'is-vertical': vertical }\">\n    <div ref=\"bar\" class=\"el-color-hue-slider__bar\" @click=\"handleClick\"></div>\n    <div\n      ref=\"thumb\"\n      class=\"el-color-hue-slider__thumb\"\n      :style=\"{\n        left: thumbLeft + 'px',\n        top: thumbTop + 'px',\n      }\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  ref,\n  computed,\n  watch,\n  onMounted,\n  getCurrentInstance,\n  defineComponent,\n} from 'vue'\nimport { getClientXY } from '@element-plus/utils/dom'\nimport draggable from '../draggable'\n\nimport type { PropType } from 'vue'\nimport type Color from '../color'\n\nexport default defineComponent({\n  name: 'ElColorHueSlider',\n\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n\n    vertical: Boolean,\n  },\n  setup(props) {\n    const instance = getCurrentInstance()\n    // ref\n    const thumb = ref<HTMLElement | null>(null)\n    const bar = ref<HTMLElement | null>(null)\n    // data\n    const thumbLeft = ref(0)\n    const thumbTop = ref(0)\n    // computed\n    const hueValue = computed(() => {\n      return props.color.get('hue')\n    })\n    // watch\n    watch(\n      () => hueValue.value,\n      () => {\n        update()\n      }\n    )\n\n    // methods\n    function handleClick(event: Event) {\n      const target = event.target\n\n      if (target !== thumb.value) {\n        handleDrag(event)\n      }\n    }\n\n    function handleDrag(event) {\n      const el = instance.vnode.el as HTMLElement\n      const rect = el.getBoundingClientRect()\n      const { clientX, clientY } = getClientXY(event)\n      let hue\n\n      if (!props.vertical) {\n        let left = clientX - rect.left\n        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)\n        left = Math.max(thumb.value.offsetWidth / 2, left)\n\n        hue = Math.round(\n          ((left - thumb.value.offsetWidth / 2) /\n            (rect.width - thumb.value.offsetWidth)) *\n            360\n        )\n      } else {\n        let top = clientY - rect.top\n\n        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)\n        top = Math.max(thumb.value.offsetHeight / 2, top)\n        hue = Math.round(\n          ((top - thumb.value.offsetHeight / 2) /\n            (rect.height - thumb.value.offsetHeight)) *\n            360\n        )\n      }\n      props.color.set('hue', hue)\n    }\n\n    function getThumbLeft() {\n      const el = instance.vnode.el\n\n      if (props.vertical) return 0\n      const hue = props.color.get('hue')\n\n      if (!el) return 0\n      return Math.round(\n        (hue * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 360\n      )\n    }\n\n    function getThumbTop() {\n      const el = instance.vnode.el as HTMLElement\n      if (!props.vertical) return 0\n      const hue = props.color.get('hue')\n\n      if (!el) return 0\n      return Math.round(\n        (hue * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 360\n      )\n    }\n\n    function update() {\n      thumbLeft.value = getThumbLeft()\n      thumbTop.value = getThumbTop()\n    }\n\n    // mounded\n    onMounted(() => {\n      const dragConfig = {\n        drag: (event) => {\n          handleDrag(event)\n        },\n        end: (event) => {\n          handleDrag(event)\n        },\n      }\n\n      draggable(bar.value, dragConfig)\n      draggable(thumb.value, dragConfig)\n      update()\n    })\n\n    return {\n      bar,\n      thumb,\n      thumbLeft,\n      thumbTop,\n      hueValue,\n      handleClick,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;AA6BA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IAGZ,UAAU;AAAA;AAAA,EAEZ,MAAM,OAAO;AACX,UAAM,WAAW;AAEjB,UAAM,QAAQ,IAAwB;AACtC,UAAM,MAAM,IAAwB;AAEpC,UAAM,YAAY,IAAI;AACtB,UAAM,WAAW,IAAI;AAErB,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,MAAM,MAAM,IAAI;AAAA;AAGzB,UACE,MAAM,SAAS,OACf,MAAM;AACJ;AAAA;AAKJ,yBAAqB,OAAc;AACjC,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,MAAM,OAAO;AAC1B,mBAAW;AAAA;AAAA;AAIf,wBAAoB,OAAO;AACzB,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,GAAG;AAChB,YAAM,EAAE,SAAS,YAAY,YAAY;AACzC,UAAI;AAEJ,UAAI,CAAC,MAAM,UAAU;AACnB,YAAI,OAAO,UAAU,KAAK;AAC1B,eAAO,KAAK,IAAI,MAAM,KAAK,QAAQ,MAAM,MAAM,cAAc;AAC7D,eAAO,KAAK,IAAI,MAAM,MAAM,cAAc,GAAG;AAE7C,cAAM,KAAK,MACP,QAAO,MAAM,MAAM,cAAc,WAC3B,QAAQ,MAAM,MAAM,eAC1B;AAAA,aAEC;AACL,YAAI,MAAM,UAAU,KAAK;AAEzB,cAAM,KAAK,IAAI,KAAK,KAAK,SAAS,MAAM,MAAM,eAAe;AAC7D,cAAM,KAAK,IAAI,MAAM,MAAM,eAAe,GAAG;AAC7C,cAAM,KAAK,MACP,OAAM,MAAM,MAAM,eAAe,WAC3B,SAAS,MAAM,MAAM,gBAC3B;AAAA;AAGN,YAAM,MAAM,IAAI,OAAO;AAAA;AAGzB,4BAAwB;AACtB,YAAM,KAAK,SAAS,MAAM;AAE1B,UAAI,MAAM;AAAU,eAAO;AAC3B,YAAM,MAAM,MAAM,MAAM,IAAI;AAE5B,UAAI,CAAC;AAAI,eAAO;AAChB,aAAO,KAAK,MACT,UAAU,cAAc,MAAM,MAAM,cAAc,KAAM;AAAA;AAI7D,2BAAuB;AACrB,YAAM,KAAK,SAAS,MAAM;AAC1B,UAAI,CAAC,MAAM;AAAU,eAAO;AAC5B,YAAM,MAAM,MAAM,MAAM,IAAI;AAE5B,UAAI,CAAC;AAAI,eAAO;AAChB,aAAO,KAAK,MACT,UAAU,eAAe,MAAM,MAAM,eAAe,KAAM;AAAA;AAI/D,sBAAkB;AAChB,gBAAU,QAAQ;AAClB,eAAS,QAAQ;AAAA;AAInB,cAAU,MAAM;AACd,YAAM,aAAa;AAAA,QACjB,MAAM,CAAC,UAAU;AACf,qBAAW;AAAA;AAAA,QAEb,KAAK,CAAC,UAAU;AACd,qBAAW;AAAA;AAAA;AAIf,gBAAU,IAAI,OAAO;AACrB,gBAAU,MAAM,OAAO;AACvB;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;2BArJJ,wBAUM;SAVIA,gCAAC,OAAqB;AAAA;KAC9B;AAAA,uBAAc;AAAA,MAAC,KAAK;AAAA,MAA6B,OAAK;AAAA;OACtD;AAAA,uBACa;AAAA,MACX,KAAK;AAAA,MACJ,OAAK;AAAA,4BAA2B;AAAA,cAAsB,iBAAQ;AAAA;;;;;;;;;"}