@element-plus/nightly 0.0.20221027 → 0.0.20221029

package/es/components/alert/src/alert.mjs

@@ -1,42 +1,102 @@
+import { defineComponent, useSlots, ref, computed, openBlock, createBlock, Transition, unref, withCtx, withDirectives, createElementVNode, normalizeClass, resolveDynamicComponent, createCommentVNode, createElementBlock, renderSlot, createTextVNode, toDisplayString, Fragment, createVNode, vShow } from 'vue';
+import { ElIcon } from '../../icon/index.mjs';
 import '../../../utils/index.mjs';
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
-import { keysOf } from '../../../utils/objects.mjs';
-import { TypeComponentsMap } from '../../../utils/vue/icon.mjs';
+import '../../../hooks/index.mjs';
+import { alertProps, alertEmits } from './alert2.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { TypeComponents, TypeComponentsMap } from '../../../utils/vue/icon.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
-const alertEffects = ["light", "dark"];
-const alertProps = buildProps({
-  title: {
-    type: String,
-    default: ""
-  },
-  description: {
-    type: String,
-    default: ""
-  },
-  type: {
-    type: String,
-    values: keysOf(TypeComponentsMap),
-    default: "info"
-  },
-  closable: {
-    type: Boolean,
-    default: true
-  },
-  closeText: {
-    type: String,
-    default: ""
-  },
-  showIcon: Boolean,
-  center: Boolean,
-  effect: {
-    type: String,
-    values: alertEffects,
-    default: "light"
+const __default__ = defineComponent({
+  name: "ElAlert"
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: alertProps,
+  emits: alertEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const { Close } = TypeComponents;
+    const slots = useSlots();
+    const ns = useNamespace("alert");
+    const visible = ref(true);
+    const iconComponent = computed(() => TypeComponentsMap[props.type]);
+    const iconClass = computed(() => [
+      ns.e("icon"),
+      { [ns.is("big")]: !!props.description || !!slots.default }
+    ]);
+    const isBoldTitle = computed(() => {
+      return { [ns.is("bold")]: props.description || slots.default };
+    });
+    const close = (evt) => {
+      visible.value = false;
+      emit("close", evt);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        name: unref(ns).b("fade"),
+        persisted: ""
+      }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", {
+            class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.type), unref(ns).is("center", _ctx.center), unref(ns).is(_ctx.effect)]),
+            role: "alert"
+          }, [
+            _ctx.showIcon && unref(iconComponent) ? (openBlock(), createBlock(unref(ElIcon), {
+              key: 0,
+              class: normalizeClass(unref(iconClass))
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent))))
+              ]),
+              _: 1
+            }, 8, ["class"])) : createCommentVNode("v-if", true),
+            createElementVNode("div", {
+              class: normalizeClass(unref(ns).e("content"))
+            }, [
+              _ctx.title || _ctx.$slots.title ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass([unref(ns).e("title"), unref(isBoldTitle)])
+              }, [
+                renderSlot(_ctx.$slots, "title", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.title), 1)
+                ])
+              ], 2)) : createCommentVNode("v-if", true),
+              _ctx.$slots.default || _ctx.description ? (openBlock(), createElementBlock("p", {
+                key: 1,
+                class: normalizeClass(unref(ns).e("description"))
+              }, [
+                renderSlot(_ctx.$slots, "default", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.description), 1)
+                ])
+              ], 2)) : createCommentVNode("v-if", true),
+              _ctx.closable ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                _ctx.closeText ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass([unref(ns).e("close-btn"), unref(ns).is("customed")]),
+                  onClick: close
+                }, toDisplayString(_ctx.closeText), 3)) : (openBlock(), createBlock(unref(ElIcon), {
+                  key: 1,
+                  class: normalizeClass(unref(ns).e("close-btn")),
+                  onClick: close
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(Close))
+                  ]),
+                  _: 1
+                }, 8, ["class"]))
+              ], 64)) : createCommentVNode("v-if", true)
+            ], 2)
+          ], 2), [
+            [vShow, visible.value]
+          ])
+        ]),
+        _: 3
+      }, 8, ["name"]);
+    };
   }
 });
-const alertEmits = {
-  close: (evt) => evt instanceof MouseEvent
-};
+var Alert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/alert/src/alert.vue"]]);
 
-export { alertEffects, alertEmits, alertProps };
+export { Alert as default };
 //# sourceMappingURL=alert.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert.mjs","sources":["../../../../../../packages/components/alert/src/alert.ts"],"sourcesContent":["import { TypeComponentsMap, buildProps, keysOf } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Alert from './alert.vue'\n\nexport const alertEffects = ['light', 'dark'] as const\n\nexport const alertProps = buildProps({\n  title: {\n    type: String,\n    default: '',\n  },\n  description: {\n    type: String,\n    default: '',\n  },\n  type: {\n    type: String,\n    values: keysOf(TypeComponentsMap),\n    default: 'info',\n  },\n  closable: {\n    type: Boolean,\n    default: true,\n  },\n  closeText: {\n    type: String,\n    default: '',\n  },\n  showIcon: Boolean,\n  center: Boolean,\n  effect: {\n    type: String,\n    values: alertEffects,\n    default: 'light',\n  },\n} as const)\nexport type AlertProps = ExtractPropTypes<typeof alertProps>\n\nexport const alertEmits = {\n  close: (evt: MouseEvent) => evt instanceof MouseEvent,\n}\nexport type AlertEmits = typeof alertEmits\n\nexport type AlertInstance = InstanceType<typeof Alert>\n"],"names":[],"mappings":";;;;;AACY,MAAC,YAAY,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE;AAClC,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC;AACrC,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,YAAY;AACxB,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAC3C;;;;"}
+{"version":3,"file":"alert.mjs","sources":["../../../../../../packages/components/alert/src/alert.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"visible\"\n      :class=\"[ns.b(), ns.m(type), ns.is('center', center), ns.is(effect)]\"\n      role=\"alert\"\n    >\n      <el-icon v-if=\"showIcon && iconComponent\" :class=\"iconClass\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n\n      <div :class=\"ns.e('content')\">\n        <span\n          v-if=\"title || $slots.title\"\n          :class=\"[ns.e('title'), isBoldTitle]\"\n        >\n          <slot name=\"title\">{{ title }}</slot>\n        </span>\n        <p v-if=\"$slots.default || description\" :class=\"ns.e('description')\">\n          <slot>\n            {{ description }}\n          </slot>\n        </p>\n        <template v-if=\"closable\">\n          <div\n            v-if=\"closeText\"\n            :class=\"[ns.e('close-btn'), ns.is('customed')]\"\n            @click=\"close\"\n          >\n            {{ closeText }}\n          </div>\n          <el-icon v-else :class=\"ns.e('close-btn')\" @click=\"close\">\n            <Close />\n          </el-icon>\n        </template>\n      </div>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { alertEmits, alertProps } from './alert'\n\nconst { Close } = TypeComponents\n\ndefineOptions({\n  name: 'ElAlert',\n})\n\nconst props = defineProps(alertProps)\nconst emit = defineEmits(alertEmits)\nconst slots = useSlots()\n\nconst ns = useNamespace('alert')\n\nconst visible = ref(true)\n\nconst iconComponent = computed(() => TypeComponentsMap[props.type])\n\nconst iconClass = computed(() => [\n  ns.e('icon'),\n  { [ns.is('big')]: !!props.description || !!slots.default },\n])\n\nconst isBoldTitle = computed(() => {\n  return { [ns.is('bold')]: props.description || slots.default }\n})\n\nconst close = (evt: MouseEvent) => {\n  visible.value = false\n  emit('close', evt)\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;mCAgDc,CAAA;AAAA,EACZ,IAAM,EAAA,SAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAJA,IAAA,MAAM,EAAE,KAAU,EAAA,GAAA,cAAA,CAAA;AAQlB,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,IAAM,MAAA,EAAA,GAAK,aAAa,OAAO,CAAA,CAAA;AAE/B,IAAM,MAAA,OAAA,GAAU,IAAI,IAAI,CAAA,CAAA;AAExB,IAAA,MAAM,aAAgB,GAAA,QAAA,CAAS,MAAM,iBAAA,CAAkB,MAAM,IAAK,CAAA,CAAA,CAAA;AAElE,IAAM,MAAA,SAAA,GAAY,SAAS,MAAM;AAAA,MAC/B,EAAA,CAAG,EAAE,MAAM,CAAA;AAAA,MACX,EAAE,CAAC,EAAG,CAAA,EAAA,CAAG,KAAK,CAAA,GAAI,CAAC,CAAC,KAAM,CAAA,WAAA,IAAe,CAAC,CAAC,MAAM,OAAQ,EAAA;AAAA,KAC1D,CAAA,CAAA;AAED,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAO,OAAA,EAAE,CAAC,EAAG,CAAA,EAAA,CAAG,MAAM,CAAI,GAAA,KAAA,CAAM,WAAe,IAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AAAA,KAC9D,CAAA,CAAA;AAED,IAAM,MAAA,KAAA,GAAQ,CAAC,GAAoB,KAAA;AACjC,MAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAChB,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AAAA,KACnB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/alert/src/alert2.mjs

@@ -1,102 +1,42 @@
-import { defineComponent, useSlots, ref, computed, openBlock, createBlock, Transition, unref, withCtx, withDirectives, createElementVNode, normalizeClass, resolveDynamicComponent, createCommentVNode, createElementBlock, renderSlot, createTextVNode, toDisplayString, Fragment, createVNode, vShow } from 'vue';
-import { ElIcon } from '../../icon/index.mjs';
 import '../../../utils/index.mjs';
-import '../../../hooks/index.mjs';
-import { alertProps, alertEmits } from './alert.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { TypeComponents, TypeComponentsMap } from '../../../utils/vue/icon.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { keysOf } from '../../../utils/objects.mjs';
+import { TypeComponentsMap } from '../../../utils/vue/icon.mjs';
 
-const __default__ = defineComponent({
-  name: "ElAlert"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: alertProps,
-  emits: alertEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const { Close } = TypeComponents;
-    const slots = useSlots();
-    const ns = useNamespace("alert");
-    const visible = ref(true);
-    const iconComponent = computed(() => TypeComponentsMap[props.type]);
-    const iconClass = computed(() => [
-      ns.e("icon"),
-      { [ns.is("big")]: !!props.description || !!slots.default }
-    ]);
-    const isBoldTitle = computed(() => {
-      return { [ns.is("bold")]: props.description || slots.default };
-    });
-    const close = (evt) => {
-      visible.value = false;
-      emit("close", evt);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, {
-        name: unref(ns).b("fade"),
-        persisted: ""
-      }, {
-        default: withCtx(() => [
-          withDirectives(createElementVNode("div", {
-            class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.type), unref(ns).is("center", _ctx.center), unref(ns).is(_ctx.effect)]),
-            role: "alert"
-          }, [
-            _ctx.showIcon && unref(iconComponent) ? (openBlock(), createBlock(unref(ElIcon), {
-              key: 0,
-              class: normalizeClass(unref(iconClass))
-            }, {
-              default: withCtx(() => [
-                (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent))))
-              ]),
-              _: 1
-            }, 8, ["class"])) : createCommentVNode("v-if", true),
-            createElementVNode("div", {
-              class: normalizeClass(unref(ns).e("content"))
-            }, [
-              _ctx.title || _ctx.$slots.title ? (openBlock(), createElementBlock("span", {
-                key: 0,
-                class: normalizeClass([unref(ns).e("title"), unref(isBoldTitle)])
-              }, [
-                renderSlot(_ctx.$slots, "title", {}, () => [
-                  createTextVNode(toDisplayString(_ctx.title), 1)
-                ])
-              ], 2)) : createCommentVNode("v-if", true),
-              _ctx.$slots.default || _ctx.description ? (openBlock(), createElementBlock("p", {
-                key: 1,
-                class: normalizeClass(unref(ns).e("description"))
-              }, [
-                renderSlot(_ctx.$slots, "default", {}, () => [
-                  createTextVNode(toDisplayString(_ctx.description), 1)
-                ])
-              ], 2)) : createCommentVNode("v-if", true),
-              _ctx.closable ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                _ctx.closeText ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: normalizeClass([unref(ns).e("close-btn"), unref(ns).is("customed")]),
-                  onClick: close
-                }, toDisplayString(_ctx.closeText), 3)) : (openBlock(), createBlock(unref(ElIcon), {
-                  key: 1,
-                  class: normalizeClass(unref(ns).e("close-btn")),
-                  onClick: close
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(Close))
-                  ]),
-                  _: 1
-                }, 8, ["class"]))
-              ], 64)) : createCommentVNode("v-if", true)
-            ], 2)
-          ], 2), [
-            [vShow, visible.value]
-          ])
-        ]),
-        _: 3
-      }, 8, ["name"]);
-    };
+const alertEffects = ["light", "dark"];
+const alertProps = buildProps({
+  title: {
+    type: String,
+    default: ""
+  },
+  description: {
+    type: String,
+    default: ""
+  },
+  type: {
+    type: String,
+    values: keysOf(TypeComponentsMap),
+    default: "info"
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  closeText: {
+    type: String,
+    default: ""
+  },
+  showIcon: Boolean,
+  center: Boolean,
+  effect: {
+    type: String,
+    values: alertEffects,
+    default: "light"
   }
 });
-var Alert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/alert/src/alert.vue"]]);
+const alertEmits = {
+  close: (evt) => evt instanceof MouseEvent
+};
 
-export { Alert as default };
+export { alertEffects, alertEmits, alertProps };
 //# sourceMappingURL=alert2.mjs.map

package/es/components/alert/src/alert2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert2.mjs","sources":["../../../../../../packages/components/alert/src/alert.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"visible\"\n      :class=\"[ns.b(), ns.m(type), ns.is('center', center), ns.is(effect)]\"\n      role=\"alert\"\n    >\n      <el-icon v-if=\"showIcon && iconComponent\" :class=\"iconClass\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n\n      <div :class=\"ns.e('content')\">\n        <span\n          v-if=\"title || $slots.title\"\n          :class=\"[ns.e('title'), isBoldTitle]\"\n        >\n          <slot name=\"title\">{{ title }}</slot>\n        </span>\n        <p v-if=\"$slots.default || description\" :class=\"ns.e('description')\">\n          <slot>\n            {{ description }}\n          </slot>\n        </p>\n        <template v-if=\"closable\">\n          <div\n            v-if=\"closeText\"\n            :class=\"[ns.e('close-btn'), ns.is('customed')]\"\n            @click=\"close\"\n          >\n            {{ closeText }}\n          </div>\n          <el-icon v-else :class=\"ns.e('close-btn')\" @click=\"close\">\n            <Close />\n          </el-icon>\n        </template>\n      </div>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { alertEmits, alertProps } from './alert'\n\nconst { Close } = TypeComponents\n\ndefineOptions({\n  name: 'ElAlert',\n})\n\nconst props = defineProps(alertProps)\nconst emit = defineEmits(alertEmits)\nconst slots = useSlots()\n\nconst ns = useNamespace('alert')\n\nconst visible = ref(true)\n\nconst iconComponent = computed(() => TypeComponentsMap[props.type])\n\nconst iconClass = computed(() => [\n  ns.e('icon'),\n  { [ns.is('big')]: !!props.description || !!slots.default },\n])\n\nconst isBoldTitle = computed(() => {\n  return { [ns.is('bold')]: props.description || slots.default }\n})\n\nconst close = (evt: MouseEvent) => {\n  visible.value = false\n  emit('close', evt)\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;mCAgDc,CAAA;AAAA,EACZ,IAAM,EAAA,SAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAJA,IAAA,MAAM,EAAE,KAAU,EAAA,GAAA,cAAA,CAAA;AAQlB,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,IAAM,MAAA,EAAA,GAAK,aAAa,OAAO,CAAA,CAAA;AAE/B,IAAM,MAAA,OAAA,GAAU,IAAI,IAAI,CAAA,CAAA;AAExB,IAAA,MAAM,aAAgB,GAAA,QAAA,CAAS,MAAM,iBAAA,CAAkB,MAAM,IAAK,CAAA,CAAA,CAAA;AAElE,IAAM,MAAA,SAAA,GAAY,SAAS,MAAM;AAAA,MAC/B,EAAA,CAAG,EAAE,MAAM,CAAA;AAAA,MACX,EAAE,CAAC,EAAG,CAAA,EAAA,CAAG,KAAK,CAAA,GAAI,CAAC,CAAC,KAAM,CAAA,WAAA,IAAe,CAAC,CAAC,MAAM,OAAQ,EAAA;AAAA,KAC1D,CAAA,CAAA;AAED,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAO,OAAA,EAAE,CAAC,EAAG,CAAA,EAAA,CAAG,MAAM,CAAI,GAAA,KAAA,CAAM,WAAe,IAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AAAA,KAC9D,CAAA,CAAA;AAED,IAAM,MAAA,KAAA,GAAQ,CAAC,GAAoB,KAAA;AACjC,MAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAChB,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AAAA,KACnB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert2.mjs","sources":["../../../../../../packages/components/alert/src/alert.ts"],"sourcesContent":["import { TypeComponentsMap, buildProps, keysOf } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Alert from './alert.vue'\n\nexport const alertEffects = ['light', 'dark'] as const\n\nexport const alertProps = buildProps({\n  title: {\n    type: String,\n    default: '',\n  },\n  description: {\n    type: String,\n    default: '',\n  },\n  type: {\n    type: String,\n    values: keysOf(TypeComponentsMap),\n    default: 'info',\n  },\n  closable: {\n    type: Boolean,\n    default: true,\n  },\n  closeText: {\n    type: String,\n    default: '',\n  },\n  showIcon: Boolean,\n  center: Boolean,\n  effect: {\n    type: String,\n    values: alertEffects,\n    default: 'light',\n  },\n} as const)\nexport type AlertProps = ExtractPropTypes<typeof alertProps>\n\nexport const alertEmits = {\n  close: (evt: MouseEvent) => evt instanceof MouseEvent,\n}\nexport type AlertEmits = typeof alertEmits\n\nexport type AlertInstance = InstanceType<typeof Alert>\n"],"names":[],"mappings":";;;;;AACY,MAAC,YAAY,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE;AAClC,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC;AACrC,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,YAAY;AACxB,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAC3C;;;;"}

package/es/components/date-picker/src/composables/use-month-range-header.mjs

@@ -10,12 +10,12 @@ const useMonthRangeHeader = ({
   const { t } = useLocale();
   const leftPrevYear = () => {
     leftDate.value = leftDate.value.subtract(1, "year");
-    if (!unlinkPanels) {
+    if (!unlinkPanels.value) {
       rightDate.value = rightDate.value.subtract(1, "year");
     }
   };
   const rightNextYear = () => {
-    if (!unlinkPanels) {
+    if (!unlinkPanels.value) {
       leftDate.value = leftDate.value.add(1, "year");
     }
     rightDate.value = rightDate.value.add(1, "year");

package/es/components/date-picker/src/composables/use-month-range-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-month-range-header.mjs","sources":["../../../../../../../packages/components/date-picker/src/composables/use-month-range-header.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport type { Ref, ToRef } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport const useMonthRangeHeader = ({\n  unlinkPanels,\n  leftDate,\n  rightDate,\n}: {\n  unlinkPanels: ToRef<boolean>\n  leftDate: Ref<Dayjs>\n  rightDate: Ref<Dayjs>\n}) => {\n  const { t } = useLocale()\n  const leftPrevYear = () => {\n    leftDate.value = leftDate.value.subtract(1, 'year')\n    if (!unlinkPanels) {\n      rightDate.value = rightDate.value.subtract(1, 'year')\n    }\n  }\n\n  const rightNextYear = () => {\n    if (!unlinkPanels) {\n      leftDate.value = leftDate.value.add(1, 'year')\n    }\n    rightDate.value = rightDate.value.add(1, 'year')\n  }\n\n  const leftNextYear = () => {\n    leftDate.value = leftDate.value.add(1, 'year')\n  }\n\n  const rightPrevYear = () => {\n    rightDate.value = rightDate.value.subtract(1, 'year')\n  }\n  const leftLabel = computed(() => {\n    return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n  })\n\n  const rightLabel = computed(() => {\n    return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n  })\n\n  const leftYear = computed(() => {\n    return leftDate.value.year()\n  })\n\n  const rightYear = computed(() => {\n    return rightDate.value.year() === leftDate.value.year()\n      ? leftDate.value.year() + 1\n      : rightDate.value.year()\n  })\n\n  return {\n    leftPrevYear,\n    rightNextYear,\n    leftNextYear,\n    rightPrevYear,\n    leftLabel,\n    rightLabel,\n    leftYear,\n    rightYear,\n  }\n}\n"],"names":[],"mappings":";;;;AAEY,MAAC,mBAAmB,GAAG,CAAC;AACpC,EAAE,YAAY;AACd,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,CAAC,KAAK;AACN,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;AAC5B,EAAE,MAAM,YAAY,GAAG,MAAM;AAC7B,IAAI,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACxD,IAAI,IAAI,CAAC,YAAY,EAAE;AACvB,MAAM,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAC5D,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,MAAM;AAC9B,IAAI,IAAI,CAAC,YAAY,EAAE;AACvB,MAAM,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACrD,KAAK;AACL,IAAI,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACrD,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,MAAM;AAC7B,IAAI,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,MAAM;AAC9B,IAAI,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAC1D,GAAG,CAAC;AACJ,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM;AACnC,IAAI,OAAO,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;AACjE,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM;AACpC,IAAI,OAAO,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAClE,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM;AAClC,IAAI,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;AACjC,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM;AACnC,IAAI,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;AACjH,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,SAAS;AACb,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-month-range-header.mjs","sources":["../../../../../../../packages/components/date-picker/src/composables/use-month-range-header.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport type { Ref, ToRef } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport const useMonthRangeHeader = ({\n  unlinkPanels,\n  leftDate,\n  rightDate,\n}: {\n  unlinkPanels: ToRef<boolean>\n  leftDate: Ref<Dayjs>\n  rightDate: Ref<Dayjs>\n}) => {\n  const { t } = useLocale()\n  const leftPrevYear = () => {\n    leftDate.value = leftDate.value.subtract(1, 'year')\n    if (!unlinkPanels.value) {\n      rightDate.value = rightDate.value.subtract(1, 'year')\n    }\n  }\n\n  const rightNextYear = () => {\n    if (!unlinkPanels.value) {\n      leftDate.value = leftDate.value.add(1, 'year')\n    }\n    rightDate.value = rightDate.value.add(1, 'year')\n  }\n\n  const leftNextYear = () => {\n    leftDate.value = leftDate.value.add(1, 'year')\n  }\n\n  const rightPrevYear = () => {\n    rightDate.value = rightDate.value.subtract(1, 'year')\n  }\n  const leftLabel = computed(() => {\n    return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n  })\n\n  const rightLabel = computed(() => {\n    return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n  })\n\n  const leftYear = computed(() => {\n    return leftDate.value.year()\n  })\n\n  const rightYear = computed(() => {\n    return rightDate.value.year() === leftDate.value.year()\n      ? leftDate.value.year() + 1\n      : rightDate.value.year()\n  })\n\n  return {\n    leftPrevYear,\n    rightNextYear,\n    leftNextYear,\n    rightPrevYear,\n    leftLabel,\n    rightLabel,\n    leftYear,\n    rightYear,\n  }\n}\n"],"names":[],"mappings":";;;;AAEY,MAAC,mBAAmB,GAAG,CAAC;AACpC,EAAE,YAAY;AACd,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,CAAC,KAAK;AACN,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;AAC5B,EAAE,MAAM,YAAY,GAAG,MAAM;AAC7B,IAAI,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACxD,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AAC7B,MAAM,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAC5D,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,MAAM;AAC9B,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AAC7B,MAAM,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACrD,KAAK;AACL,IAAI,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACrD,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,MAAM;AAC7B,IAAI,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,MAAM;AAC9B,IAAI,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAC1D,GAAG,CAAC;AACJ,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM;AACnC,IAAI,OAAO,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;AACjE,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM;AACpC,IAAI,OAAO,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAClE,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM;AAClC,IAAI,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;AACjC,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM;AACnC,IAAI,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;AACjH,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,SAAS;AACb,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,GAAG,CAAC;AACJ;;;;"}

package/es/components/index.mjs

@@ -73,7 +73,7 @@ export { ElMessageBox } from './message-box/index.mjs';
 export { ElNotification } from './notification/index.mjs';
 export { ElPopover, ElPopoverDirective } from './popover/index.mjs';
 export { affixEmits, affixProps } from './affix/src/affix.mjs';
-export { alertEffects, alertEmits, alertProps } from './alert/src/alert.mjs';
+export { alertEffects, alertEmits, alertProps } from './alert/src/alert2.mjs';
 export { autocompleteEmits, autocompleteProps } from './autocomplete/src/autocomplete.mjs';
 export { avatarEmits, avatarProps } from './avatar/src/avatar.mjs';
 export { backtopEmits, backtopProps } from './backtop/src/backtop.mjs';
@@ -153,7 +153,7 @@ export { autoResizerProps } from './table-v2/src/auto-resizer.mjs';
 export { tableV2Props } from './table-v2/src/table.mjs';
 export { tableV2RowProps } from './table-v2/src/row.mjs';
 export { tabsEmits, tabsProps } from './tabs/src/tabs.mjs';
-export { tabBarProps } from './tabs/src/tab-bar.mjs';
+export { tabBarProps } from './tabs/src/tab-bar2.mjs';
 export { tabNavEmits, tabNavProps } from './tabs/src/tab-nav.mjs';
 export { tabPaneProps } from './tabs/src/tab-pane.mjs';
 export { tagEmits, tagProps } from './tag/src/tag.mjs';

package/es/components/tabs/index.mjs

@@ -2,7 +2,7 @@ import '../../utils/index.mjs';
 import Tabs from './src/tabs.mjs';
 export { tabsEmits, tabsProps } from './src/tabs.mjs';
 import TabPane from './src/tab-pane2.mjs';
-export { tabBarProps } from './src/tab-bar.mjs';
+export { tabBarProps } from './src/tab-bar2.mjs';
 export { tabNavEmits, tabNavProps } from './src/tab-nav.mjs';
 export { tabPaneProps } from './src/tab-pane.mjs';
 import { withInstall, withNoopInstall } from '../../utils/vue/install.mjs';

package/es/components/tabs/src/tab-bar.mjs

@@ -1,13 +1,87 @@
+import { defineComponent, getCurrentInstance, inject, ref, watch, nextTick, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
 import '../../../utils/index.mjs';
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { mutable } from '../../../utils/typescript.mjs';
+import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
+import { tabBarProps } from './tab-bar2.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { tabsRootContextKey } from '../../../tokens/tabs.mjs';
+import { throwError } from '../../../utils/error.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { capitalize } from '../../../utils/strings.mjs';
 
-const tabBarProps = buildProps({
-  tabs: {
-    type: definePropType(Array),
-    default: () => mutable([])
+const COMPONENT_NAME = "ElTabBar";
+const __default__ = defineComponent({
+  name: COMPONENT_NAME
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: tabBarProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const instance = getCurrentInstance();
+    const rootTabs = inject(tabsRootContextKey);
+    if (!rootTabs)
+      throwError(COMPONENT_NAME, "<el-tabs><el-tab-bar /></el-tabs>");
+    const ns = useNamespace("tabs");
+    const barRef = ref();
+    const barStyle = ref();
+    const getBarStyle = () => {
+      let offset = 0;
+      let tabSize = 0;
+      const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
+      const sizeDir = sizeName === "width" ? "x" : "y";
+      props.tabs.every((tab) => {
+        var _a, _b, _c, _d;
+        const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];
+        if (!$el)
+          return false;
+        if (!tab.active) {
+          return true;
+        }
+        tabSize = $el[`client${capitalize(sizeName)}`];
+        const position = sizeDir === "x" ? "left" : "top";
+        offset = $el[`offset${capitalize(position)}`] - ((_d = (_c = $el.parentElement) == null ? void 0 : _c[`offset${capitalize(position)}`]) != null ? _d : 0);
+        const scrollwrapEl = $el.closest(".is-scrollable");
+        if (scrollwrapEl) {
+          const scrollWrapStyle = window.getComputedStyle(scrollwrapEl);
+          offset += Number.parseFloat(scrollWrapStyle[`padding${capitalize(position)}`]);
+        }
+        const tabStyles = window.getComputedStyle($el);
+        if (sizeName === "width") {
+          if (props.tabs.length > 1) {
+            tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
+          }
+          offset += Number.parseFloat(tabStyles.paddingLeft);
+        }
+        return false;
+      });
+      return {
+        [sizeName]: `${tabSize}px`,
+        transform: `translate${capitalize(sizeDir)}(${offset}px)`
+      };
+    };
+    const update = () => barStyle.value = getBarStyle();
+    watch(() => props.tabs, async () => {
+      await nextTick();
+      update();
+    }, { immediate: true });
+    useResizeObserver(barRef, () => update());
+    expose({
+      ref: barRef,
+      update
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "barRef",
+        ref: barRef,
+        class: normalizeClass([unref(ns).e("active-bar"), unref(ns).is(unref(rootTabs).props.tabPosition)]),
+        style: normalizeStyle(barStyle.value)
+      }, null, 6);
+    };
   }
 });
+var TabBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/tabs/src/tab-bar.vue"]]);
 
-export { tabBarProps };
+export { TabBar as default };
 //# sourceMappingURL=tab-bar.mjs.map

package/es/components/tabs/src/tab-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type { TabsPaneContext } from '@element-plus/tokens'\nimport type TabBar from './tab-bar.vue'\n\nexport const tabBarProps = buildProps({\n  tabs: {\n    type: definePropType<TabsPaneContext[]>(Array),\n    default: () => mutable([] as const),\n  },\n} as const)\n\nexport type TabBarProps = ExtractPropTypes<typeof tabBarProps>\nexport type TabBarInstance = InstanceType<typeof TabBar>\n"],"names":[],"mappings":";;;;AACY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"tab-bar.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"barRef\"\n    :class=\"[ns.e('active-bar'), ns.is(rootTabs.props.tabPosition)]\"\n    :style=\"barStyle\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, throwError } from '@element-plus/utils'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabBarProps } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\nconst props = defineProps(tabBarProps)\n\nconst instance = getCurrentInstance()!\nconst rootTabs = inject(tabsRootContextKey)\nif (!rootTabs) throwError(COMPONENT_NAME, '<el-tabs><el-tab-bar /></el-tabs>')\n\nconst ns = useNamespace('tabs')\n\nconst barRef = ref<HTMLDivElement>()\nconst barStyle = ref<CSSProperties>()\n\nconst getBarStyle = (): CSSProperties => {\n  let offset = 0\n  let tabSize = 0\n\n  const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n    ? 'width'\n    : 'height'\n  const sizeDir = sizeName === 'width' ? 'x' : 'y'\n\n  props.tabs.every((tab) => {\n    const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement\n    if (!$el) return false\n\n    if (!tab.active) {\n      return true\n    }\n\n    tabSize = $el[`client${capitalize(sizeName)}`]\n    const position = sizeDir === 'x' ? 'left' : 'top'\n\n    offset =\n      $el[`offset${capitalize(position)}`] -\n      ($el.parentElement?.[`offset${capitalize(position)}`] ?? 0)\n\n    const scrollwrapEl = $el.closest('.is-scrollable')\n    if (scrollwrapEl) {\n      const scrollWrapStyle = window.getComputedStyle(scrollwrapEl)\n      offset += Number.parseFloat(\n        scrollWrapStyle[`padding${capitalize(position)}`]\n      )\n    }\n\n    const tabStyles = window.getComputedStyle($el)\n\n    if (sizeName === 'width') {\n      if (props.tabs.length > 1) {\n        tabSize -=\n          Number.parseFloat(tabStyles.paddingLeft) +\n          Number.parseFloat(tabStyles.paddingRight)\n      }\n      offset += Number.parseFloat(tabStyles.paddingLeft)\n    }\n    return false\n  })\n\n  return {\n    [sizeName]: `${tabSize}px`,\n    transform: `translate${capitalize(sizeDir)}(${offset}px)`,\n  }\n}\n\nconst update = () => (barStyle.value = getBarStyle())\n\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick()\n    update()\n  },\n  { immediate: true }\n)\nuseResizeObserver(barRef, () => update())\n\ndefineExpose({\n  /** @description tab root html element */\n  ref: barRef,\n  /** @description method to manually update tab bar style */\n  update,\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/tabs/src/tab-bar2.mjs

@@ -1,87 +1,13 @@
-import { defineComponent, getCurrentInstance, inject, ref, watch, nextTick, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle } from 'vue';
-import { useResizeObserver } from '@vueuse/core';
 import '../../../utils/index.mjs';
-import '../../../tokens/index.mjs';
-import '../../../hooks/index.mjs';
-import { tabBarProps } from './tab-bar.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { tabsRootContextKey } from '../../../tokens/tabs.mjs';
-import { throwError } from '../../../utils/error.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { capitalize } from '../../../utils/strings.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { mutable } from '../../../utils/typescript.mjs';
 
-const COMPONENT_NAME = "ElTabBar";
-const __default__ = defineComponent({
-  name: COMPONENT_NAME
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: tabBarProps,
-  setup(__props, { expose }) {
-    const props = __props;
-    const instance = getCurrentInstance();
-    const rootTabs = inject(tabsRootContextKey);
-    if (!rootTabs)
-      throwError(COMPONENT_NAME, "<el-tabs><el-tab-bar /></el-tabs>");
-    const ns = useNamespace("tabs");
-    const barRef = ref();
-    const barStyle = ref();
-    const getBarStyle = () => {
-      let offset = 0;
-      let tabSize = 0;
-      const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
-      const sizeDir = sizeName === "width" ? "x" : "y";
-      props.tabs.every((tab) => {
-        var _a, _b, _c, _d;
-        const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];
-        if (!$el)
-          return false;
-        if (!tab.active) {
-          return true;
-        }
-        tabSize = $el[`client${capitalize(sizeName)}`];
-        const position = sizeDir === "x" ? "left" : "top";
-        offset = $el[`offset${capitalize(position)}`] - ((_d = (_c = $el.parentElement) == null ? void 0 : _c[`offset${capitalize(position)}`]) != null ? _d : 0);
-        const scrollwrapEl = $el.closest(".is-scrollable");
-        if (scrollwrapEl) {
-          const scrollWrapStyle = window.getComputedStyle(scrollwrapEl);
-          offset += Number.parseFloat(scrollWrapStyle[`padding${capitalize(position)}`]);
-        }
-        const tabStyles = window.getComputedStyle($el);
-        if (sizeName === "width") {
-          if (props.tabs.length > 1) {
-            tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
-          }
-          offset += Number.parseFloat(tabStyles.paddingLeft);
-        }
-        return false;
-      });
-      return {
-        [sizeName]: `${tabSize}px`,
-        transform: `translate${capitalize(sizeDir)}(${offset}px)`
-      };
-    };
-    const update = () => barStyle.value = getBarStyle();
-    watch(() => props.tabs, async () => {
-      await nextTick();
-      update();
-    }, { immediate: true });
-    useResizeObserver(barRef, () => update());
-    expose({
-      ref: barRef,
-      update
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "barRef",
-        ref: barRef,
-        class: normalizeClass([unref(ns).e("active-bar"), unref(ns).is(unref(rootTabs).props.tabPosition)]),
-        style: normalizeStyle(barStyle.value)
-      }, null, 6);
-    };
+const tabBarProps = buildProps({
+  tabs: {
+    type: definePropType(Array),
+    default: () => mutable([])
   }
 });
-var TabBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/tabs/src/tab-bar.vue"]]);
 
-export { TabBar as default };
+export { tabBarProps };
 //# sourceMappingURL=tab-bar2.mjs.map

package/es/components/tabs/src/tab-bar2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar2.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"barRef\"\n    :class=\"[ns.e('active-bar'), ns.is(rootTabs.props.tabPosition)]\"\n    :style=\"barStyle\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, throwError } from '@element-plus/utils'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabBarProps } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\nconst props = defineProps(tabBarProps)\n\nconst instance = getCurrentInstance()!\nconst rootTabs = inject(tabsRootContextKey)\nif (!rootTabs) throwError(COMPONENT_NAME, '<el-tabs><el-tab-bar /></el-tabs>')\n\nconst ns = useNamespace('tabs')\n\nconst barRef = ref<HTMLDivElement>()\nconst barStyle = ref<CSSProperties>()\n\nconst getBarStyle = (): CSSProperties => {\n  let offset = 0\n  let tabSize = 0\n\n  const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n    ? 'width'\n    : 'height'\n  const sizeDir = sizeName === 'width' ? 'x' : 'y'\n\n  props.tabs.every((tab) => {\n    const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement\n    if (!$el) return false\n\n    if (!tab.active) {\n      return true\n    }\n\n    tabSize = $el[`client${capitalize(sizeName)}`]\n    const position = sizeDir === 'x' ? 'left' : 'top'\n\n    offset =\n      $el[`offset${capitalize(position)}`] -\n      ($el.parentElement?.[`offset${capitalize(position)}`] ?? 0)\n\n    const scrollwrapEl = $el.closest('.is-scrollable')\n    if (scrollwrapEl) {\n      const scrollWrapStyle = window.getComputedStyle(scrollwrapEl)\n      offset += Number.parseFloat(\n        scrollWrapStyle[`padding${capitalize(position)}`]\n      )\n    }\n\n    const tabStyles = window.getComputedStyle($el)\n\n    if (sizeName === 'width') {\n      if (props.tabs.length > 1) {\n        tabSize -=\n          Number.parseFloat(tabStyles.paddingLeft) +\n          Number.parseFloat(tabStyles.paddingRight)\n      }\n      offset += Number.parseFloat(tabStyles.paddingLeft)\n    }\n    return false\n  })\n\n  return {\n    [sizeName]: `${tabSize}px`,\n    transform: `translate${capitalize(sizeDir)}(${offset}px)`,\n  }\n}\n\nconst update = () => (barStyle.value = getBarStyle())\n\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick()\n    update()\n  },\n  { immediate: true }\n)\nuseResizeObserver(barRef, () => update())\n\ndefineExpose({\n  /** @description tab root html element */\n  ref: barRef,\n  /** @description method to manually update tab bar style */\n  update,\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tab-bar2.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type { TabsPaneContext } from '@element-plus/tokens'\nimport type TabBar from './tab-bar.vue'\n\nexport const tabBarProps = buildProps({\n  tabs: {\n    type: definePropType<TabsPaneContext[]>(Array),\n    default: () => mutable([] as const),\n  },\n} as const)\n\nexport type TabBarProps = ExtractPropTypes<typeof tabBarProps>\nexport type TabBarInstance = InstanceType<typeof TabBar>\n"],"names":[],"mappings":";;;;AACY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC;;;;"}