@element-plus/nightly 0.0.20251120 → 0.0.20251122

package/es/components/switch/src/switch2.mjs

@@ -1,77 +1,230 @@
-import { isValidComponentSize } from '../../../utils/vue/validator.mjs';
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { iconPropType } from '../../../utils/vue/icon.mjs';
-import { useAriaProps } from '../../../hooks/use-aria/index.mjs';
+import { defineComponent, computed, ref, shallowRef, watch, onMounted, openBlock, createElementBlock, normalizeClass, unref, withModifiers, createElementVNode, withKeys, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, toDisplayString, normalizeStyle, createVNode, renderSlot, nextTick } from 'vue';
+import { ElIcon } from '../../icon/index.mjs';
+import { Loading } from '@element-plus/icons-vue';
+import { switchProps, switchEmits } from './switch.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
+import { useFormSize, useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { addUnit } from '../../../utils/dom/style.mjs';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '../../../constants/event.mjs';
-import { isBoolean, isNumber } from '../../../utils/types.mjs';
-import { isString } from '@vue/shared';
+import { debugWarn, throwError } from '../../../utils/error.mjs';
+import { isPromise } from '@vue/shared';
+import { isBoolean } from '../../../utils/types.mjs';
 
-const switchProps = buildProps({
-  modelValue: {
-    type: [Boolean, String, Number],
-    default: false
-  },
-  disabled: Boolean,
-  loading: Boolean,
-  size: {
-    type: String,
-    validator: isValidComponentSize
-  },
-  width: {
-    type: [String, Number],
-    default: ""
-  },
-  inlinePrompt: Boolean,
-  inactiveActionIcon: {
-    type: iconPropType
-  },
-  activeActionIcon: {
-    type: iconPropType
-  },
-  activeIcon: {
-    type: iconPropType
-  },
-  inactiveIcon: {
-    type: iconPropType
-  },
-  activeText: {
-    type: String,
-    default: ""
-  },
-  inactiveText: {
-    type: String,
-    default: ""
-  },
-  activeValue: {
-    type: [Boolean, String, Number],
-    default: true
-  },
-  inactiveValue: {
-    type: [Boolean, String, Number],
-    default: false
-  },
-  name: {
-    type: String,
-    default: ""
-  },
-  validateEvent: {
-    type: Boolean,
-    default: true
-  },
-  beforeChange: {
-    type: definePropType(Function)
-  },
-  id: String,
-  tabindex: {
-    type: [String, Number]
-  },
-  ...useAriaProps(["ariaLabel"])
+const COMPONENT_NAME = "ElSwitch";
+const __default__ = defineComponent({
+  name: COMPONENT_NAME
 });
-const switchEmits = {
-  [UPDATE_MODEL_EVENT]: (val) => isBoolean(val) || isString(val) || isNumber(val),
-  [CHANGE_EVENT]: (val) => isBoolean(val) || isString(val) || isNumber(val),
-  [INPUT_EVENT]: (val) => isBoolean(val) || isString(val) || isNumber(val)
-};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: switchProps,
+  emits: switchEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const { formItem } = useFormItem();
+    const switchSize = useFormSize();
+    const ns = useNamespace("switch");
+    const { inputId } = useFormItemInputId(props, {
+      formItemContext: formItem
+    });
+    const switchDisabled = useFormDisabled(computed(() => props.loading));
+    const isControlled = ref(props.modelValue !== false);
+    const input = shallowRef();
+    const switchKls = computed(() => [
+      ns.b(),
+      ns.m(switchSize.value),
+      ns.is("disabled", switchDisabled.value),
+      ns.is("checked", checked.value)
+    ]);
+    const labelLeftKls = computed(() => [
+      ns.e("label"),
+      ns.em("label", "left"),
+      ns.is("active", !checked.value)
+    ]);
+    const labelRightKls = computed(() => [
+      ns.e("label"),
+      ns.em("label", "right"),
+      ns.is("active", checked.value)
+    ]);
+    const coreStyle = computed(() => ({
+      width: addUnit(props.width)
+    }));
+    watch(() => props.modelValue, () => {
+      isControlled.value = true;
+    });
+    const actualValue = computed(() => {
+      return isControlled.value ? props.modelValue : false;
+    });
+    const checked = computed(() => actualValue.value === props.activeValue);
+    if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
+      emit(UPDATE_MODEL_EVENT, props.inactiveValue);
+      emit(CHANGE_EVENT, props.inactiveValue);
+      emit(INPUT_EVENT, props.inactiveValue);
+    }
+    watch(checked, (val) => {
+      var _a;
+      input.value.checked = val;
+      if (props.validateEvent) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn(err));
+      }
+    });
+    const handleChange = () => {
+      const val = checked.value ? props.inactiveValue : props.activeValue;
+      emit(UPDATE_MODEL_EVENT, val);
+      emit(CHANGE_EVENT, val);
+      emit(INPUT_EVENT, val);
+      nextTick(() => {
+        input.value.checked = checked.value;
+      });
+    };
+    const switchValue = () => {
+      if (switchDisabled.value)
+        return;
+      const { beforeChange } = props;
+      if (!beforeChange) {
+        handleChange();
+        return;
+      }
+      const shouldChange = beforeChange();
+      const isPromiseOrBool = [
+        isPromise(shouldChange),
+        isBoolean(shouldChange)
+      ].includes(true);
+      if (!isPromiseOrBool) {
+        throwError(COMPONENT_NAME, "beforeChange must return type `Promise<boolean>` or `boolean`");
+      }
+      if (isPromise(shouldChange)) {
+        shouldChange.then((result) => {
+          if (result) {
+            handleChange();
+          }
+        }).catch((e) => {
+          debugWarn(COMPONENT_NAME, `some error occurred: ${e}`);
+        });
+      } else if (shouldChange) {
+        handleChange();
+      }
+    };
+    const focus = () => {
+      var _a, _b;
+      (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    };
+    onMounted(() => {
+      input.value.checked = checked.value;
+    });
+    expose({
+      focus,
+      checked
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(switchKls)),
+        onClick: withModifiers(switchValue, ["prevent"])
+      }, [
+        createElementVNode("input", {
+          id: unref(inputId),
+          ref_key: "input",
+          ref: input,
+          class: normalizeClass(unref(ns).e("input")),
+          type: "checkbox",
+          role: "switch",
+          "aria-checked": unref(checked),
+          "aria-disabled": unref(switchDisabled),
+          "aria-label": _ctx.ariaLabel,
+          name: _ctx.name,
+          "true-value": _ctx.activeValue,
+          "false-value": _ctx.inactiveValue,
+          disabled: unref(switchDisabled),
+          tabindex: _ctx.tabindex,
+          onChange: handleChange,
+          onKeydown: withKeys(switchValue, ["enter"])
+        }, null, 42, ["id", "aria-checked", "aria-disabled", "aria-label", "name", "true-value", "false-value", "disabled", "tabindex", "onKeydown"]),
+        !_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText) ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: normalizeClass(unref(labelLeftKls))
+        }, [
+          _ctx.inactiveIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveIcon)))
+            ]),
+            _: 1
+          })) : createCommentVNode("v-if", true),
+          !_ctx.inactiveIcon && _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            "aria-hidden": unref(checked)
+          }, toDisplayString(_ctx.inactiveText), 9, ["aria-hidden"])) : createCommentVNode("v-if", true)
+        ], 2)) : createCommentVNode("v-if", true),
+        createElementVNode("span", {
+          class: normalizeClass(unref(ns).e("core")),
+          style: normalizeStyle(unref(coreStyle))
+        }, [
+          _ctx.inlinePrompt ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(unref(ns).e("inner"))
+          }, [
+            _ctx.activeIcon || _ctx.inactiveIcon ? (openBlock(), createBlock(unref(ElIcon), {
+              key: 0,
+              class: normalizeClass(unref(ns).is("icon"))
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(unref(checked) ? _ctx.activeIcon : _ctx.inactiveIcon)))
+              ]),
+              _: 1
+            }, 8, ["class"])) : _ctx.activeText || _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: normalizeClass(unref(ns).is("text")),
+              "aria-hidden": !unref(checked)
+            }, toDisplayString(unref(checked) ? _ctx.activeText : _ctx.inactiveText), 11, ["aria-hidden"])) : createCommentVNode("v-if", true)
+          ], 2)) : createCommentVNode("v-if", true),
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).e("action"))
+          }, [
+            _ctx.loading ? (openBlock(), createBlock(unref(ElIcon), {
+              key: 0,
+              class: normalizeClass(unref(ns).is("loading"))
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(Loading))
+              ]),
+              _: 1
+            }, 8, ["class"])) : unref(checked) ? renderSlot(_ctx.$slots, "active-action", { key: 1 }, () => [
+              _ctx.activeActionIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.activeActionIcon)))
+                ]),
+                _: 1
+              })) : createCommentVNode("v-if", true)
+            ]) : !unref(checked) ? renderSlot(_ctx.$slots, "inactive-action", { key: 2 }, () => [
+              _ctx.inactiveActionIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveActionIcon)))
+                ]),
+                _: 1
+              })) : createCommentVNode("v-if", true)
+            ]) : createCommentVNode("v-if", true)
+          ], 2)
+        ], 6),
+        !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (openBlock(), createElementBlock("span", {
+          key: 1,
+          class: normalizeClass(unref(labelRightKls))
+        }, [
+          _ctx.activeIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.activeIcon)))
+            ]),
+            _: 1
+          })) : createCommentVNode("v-if", true),
+          !_ctx.activeIcon && _ctx.activeText ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            "aria-hidden": !unref(checked)
+          }, toDisplayString(_ctx.activeText), 9, ["aria-hidden"])) : createCommentVNode("v-if", true)
+        ], 2)) : createCommentVNode("v-if", true)
+      ], 10, ["onClick"]);
+    };
+  }
+});
+var Switch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "switch.vue"]]);
 
-export { switchEmits, switchProps };
+export { Switch as default };
 //# sourceMappingURL=switch2.mjs.map

package/es/components/switch/src/switch2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch2.mjs","sources":["../../../../../../packages/components/switch/src/switch.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  iconPropType,\n  isBoolean,\n  isNumber,\n  isString,\n  isValidComponentSize,\n} from '@element-plus/utils'\nimport {\n  CHANGE_EVENT,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useAriaProps } from '@element-plus/hooks'\n\nimport type { ComponentSize } from '@element-plus/constants'\nimport type Switch from './switch.vue'\nimport type { ExtractPropTypes, PropType, __ExtractPublicPropTypes } from 'vue'\n\nexport const switchProps = buildProps({\n  /**\n   * @description binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type\n   */\n  modelValue: {\n    type: [Boolean, String, Number],\n    default: false,\n  },\n  /**\n   * @description whether Switch is disabled\n   */\n  disabled: Boolean,\n  /**\n   * @description whether Switch is in loading state\n   */\n  loading: Boolean,\n  /**\n   * @description size of Switch\n   */\n  size: {\n    type: String as PropType<ComponentSize>,\n    validator: isValidComponentSize,\n  },\n  /**\n   * @description width of Switch\n   */\n  width: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description whether icon or text is displayed inside dot, only the first character will be rendered for text\n   */\n  inlinePrompt: Boolean,\n  /**\n   * @description component of the icon displayed in action when in `off` state\n   */\n  inactiveActionIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description component of the icon displayed in action when in `on` state\n   */\n  activeActionIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description component of the icon displayed when in `on` state, overrides `active-text`\n   */\n  activeIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description component of the icon displayed when in `off` state, overrides `inactive-text`\n   */\n  inactiveIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description text displayed when in `on` state\n   */\n  activeText: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description text displayed when in `off` state\n   */\n  inactiveText: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description switch value when in `on` state\n   */\n  activeValue: {\n    type: [Boolean, String, Number],\n    default: true,\n  },\n  /**\n   * @description switch value when in `off` state\n   */\n  inactiveValue: {\n    type: [Boolean, String, Number],\n    default: false,\n  },\n  /**\n   * @description input name of Switch\n   */\n  name: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching\n   */\n  beforeChange: {\n    type: definePropType<() => Promise<boolean> | boolean>(Function),\n  },\n  /**\n   * @description id for input\n   */\n  id: String,\n  /**\n   * @description tabindex for input\n   */\n  tabindex: {\n    type: [String, Number],\n  },\n  ...useAriaProps(['ariaLabel']),\n} as const)\n\nexport type SwitchProps = ExtractPropTypes<typeof switchProps>\nexport type SwitchPropsPublic = __ExtractPublicPropTypes<typeof switchProps>\n\nexport const switchEmits = {\n  [UPDATE_MODEL_EVENT]: (val: boolean | string | number) =>\n    isBoolean(val) || isString(val) || isNumber(val),\n  [CHANGE_EVENT]: (val: boolean | string | number) =>\n    isBoolean(val) || isString(val) || isNumber(val),\n  [INPUT_EVENT]: (val: boolean | string | number) =>\n    isBoolean(val) || isString(val) || isNumber(val),\n}\nexport type SwitchEmits = typeof switchEmits\n\nexport type SwitchInstance = InstanceType<typeof Switch> & unknown\n"],"names":[],"mappings":";;;;;;;;AAeY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;AACnC,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,SAAS,EAAE,oBAAoB;AACnC,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,YAAY,EAAE,OAAO;AACvB,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,YAAY;AACtB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,YAAY;AACtB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,YAAY;AACtB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,YAAY;AACtB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;AACnC,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;AACnC,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,GAAG;AACH,EAAE,GAAG,YAAY,CAAC,CAAC,WAAW,CAAC,CAAC;AAChC,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;AAC3B,EAAE,CAAC,kBAAkB,GAAG,CAAC,GAAG,KAAK,SAAS,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC;AACjF,EAAE,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,SAAS,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC;AAC3E,EAAE,CAAC,WAAW,GAAG,CAAC,GAAG,KAAK,SAAS,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC;AAC1E;;;;"}
+{"version":3,"file":"switch2.mjs","sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<template>\n  <div :class=\"switchKls\" @click.prevent=\"switchValue\">\n    <input\n      :id=\"inputId\"\n      ref=\"input\"\n      :class=\"ns.e('input')\"\n      type=\"checkbox\"\n      role=\"switch\"\n      :aria-checked=\"checked\"\n      :aria-disabled=\"switchDisabled\"\n      :aria-label=\"ariaLabel\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n      :tabindex=\"tabindex\"\n      @change=\"handleChange\"\n      @keydown.enter=\"switchValue\"\n    />\n    <span\n      v-if=\"!inlinePrompt && (inactiveIcon || inactiveText)\"\n      :class=\"labelLeftKls\"\n    >\n      <el-icon v-if=\"inactiveIcon\">\n        <component :is=\"inactiveIcon\" />\n      </el-icon>\n      <span v-if=\"!inactiveIcon && inactiveText\" :aria-hidden=\"checked\">{{\n        inactiveText\n      }}</span>\n    </span>\n    <span :class=\"ns.e('core')\" :style=\"coreStyle\">\n      <div v-if=\"inlinePrompt\" :class=\"ns.e('inner')\">\n        <template v-if=\"activeIcon || inactiveIcon\">\n          <el-icon :class=\"ns.is('icon')\">\n            <component :is=\"checked ? activeIcon : inactiveIcon\" />\n          </el-icon>\n        </template>\n        <template v-else-if=\"activeText || inactiveText\">\n          <span :class=\"ns.is('text')\" :aria-hidden=\"!checked\">\n            {{ checked ? activeText : inactiveText }}\n          </span>\n        </template>\n      </div>\n      <div :class=\"ns.e('action')\">\n        <el-icon v-if=\"loading\" :class=\"ns.is('loading')\">\n          <loading />\n        </el-icon>\n        <slot v-else-if=\"checked\" name=\"active-action\">\n          <el-icon v-if=\"activeActionIcon\">\n            <component :is=\"activeActionIcon\" />\n          </el-icon>\n        </slot>\n        <slot v-else-if=\"!checked\" name=\"inactive-action\">\n          <el-icon v-if=\"inactiveActionIcon\">\n            <component :is=\"inactiveActionIcon\" />\n          </el-icon>\n        </slot>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText)\"\n      :class=\"labelRightKls\"\n    >\n      <el-icon v-if=\"activeIcon\">\n        <component :is=\"activeIcon\" />\n      </el-icon>\n      <span v-if=\"!activeIcon && activeText\" :aria-hidden=\"!checked\">{{\n        activeText\n      }}</span>\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue'\nimport {\n  addUnit,\n  debugWarn,\n  isBoolean,\n  isPromise,\n  throwError,\n} from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { Loading } from '@element-plus/icons-vue'\nimport {\n  CHANGE_EVENT,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { switchEmits, switchProps } from './switch'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElSwitch'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = defineProps(switchProps)\nconst emit = defineEmits(switchEmits)\n\nconst { formItem } = useFormItem()\nconst switchSize = useFormSize()\nconst ns = useNamespace('switch')\n\nconst { inputId } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst switchDisabled = useFormDisabled(computed(() => props.loading))\nconst isControlled = ref(props.modelValue !== false)\nconst input = shallowRef<HTMLInputElement>()\n\nconst switchKls = computed(() => [\n  ns.b(),\n  ns.m(switchSize.value),\n  ns.is('disabled', switchDisabled.value),\n  ns.is('checked', checked.value),\n])\n\nconst labelLeftKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'left'),\n  ns.is('active', !checked.value),\n])\n\nconst labelRightKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'right'),\n  ns.is('active', checked.value),\n])\n\nconst coreStyle = computed<CSSProperties>(() => ({\n  width: addUnit(props.width),\n}))\n\nwatch(\n  () => props.modelValue,\n  () => {\n    isControlled.value = true\n  }\n)\n\nconst actualValue = computed(() => {\n  return isControlled.value ? props.modelValue : false\n})\n\nconst checked = computed(() => actualValue.value === props.activeValue)\n\nif (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n  emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n  emit(CHANGE_EVENT, props.inactiveValue)\n  emit(INPUT_EVENT, props.inactiveValue)\n}\n\nwatch(checked, (val) => {\n  input.value!.checked = val\n\n  if (props.validateEvent) {\n    formItem?.validate?.('change').catch((err) => debugWarn(err))\n  }\n})\n\nconst handleChange = () => {\n  const val = checked.value ? props.inactiveValue : props.activeValue\n  emit(UPDATE_MODEL_EVENT, val)\n  emit(CHANGE_EVENT, val)\n  emit(INPUT_EVENT, val)\n  nextTick(() => {\n    input.value!.checked = checked.value\n  })\n}\n\nconst switchValue = () => {\n  if (switchDisabled.value) return\n\n  const { beforeChange } = props\n  if (!beforeChange) {\n    handleChange()\n    return\n  }\n\n  const shouldChange = beforeChange()\n\n  const isPromiseOrBool = [\n    isPromise(shouldChange),\n    isBoolean(shouldChange),\n  ].includes(true)\n  if (!isPromiseOrBool) {\n    throwError(\n      COMPONENT_NAME,\n      'beforeChange must return type `Promise<boolean>` or `boolean`'\n    )\n  }\n\n  if (isPromise(shouldChange)) {\n    shouldChange\n      .then((result) => {\n        if (result) {\n          handleChange()\n        }\n      })\n      .catch((e) => {\n        debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)\n      })\n  } else if (shouldChange) {\n    handleChange()\n  }\n}\n\nconst focus = (): void => {\n  input.value?.focus?.()\n}\n\nonMounted(() => {\n  input.value!.checked = checked.value\n})\n\ndefineExpose({\n  /**\n   *  @description manual focus to the switch component\n   **/\n  focus,\n  /**\n   * @description whether Switch is checked\n   */\n  checked,\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_withModifiers","_createElementVNode"],"mappings":"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"}

package/es/components/table/src/table/style-helper.mjs

@@ -1,4 +1,4 @@
-import { ref, watchEffect, watch, unref, computed, onMounted, nextTick } from 'vue';
+import { ref, watch, unref, watchEffect, computed, onMounted, nextTick } from 'vue';
 import { useEventListener, useResizeObserver } from '@vueuse/core';
 import { useFormSize } from '../../../form/src/hooks/use-form-common-props.mjs';
 
@@ -25,14 +25,12 @@ function useStyle(props, layout, store, table) {
   const headerScrollHeight = ref(0);
   const footerScrollHeight = ref(0);
   const appendScrollHeight = ref(0);
-  watchEffect(() => {
-    var _a;
-    layout.setHeight((_a = props.height) != null ? _a : null);
-  });
-  watchEffect(() => {
-    var _a;
-    layout.setMaxHeight((_a = props.maxHeight) != null ? _a : null);
-  });
+  watch(() => props.height, (value) => {
+    layout.setHeight(value != null ? value : null);
+  }, { immediate: true });
+  watch(() => props.maxHeight, (value) => {
+    layout.setMaxHeight(value != null ? value : null);
+  }, { immediate: true });
   watch(() => [props.currentRowKey, store.states.rowKey], ([currentRowKey, rowKey]) => {
     if (!unref(rowKey) || !unref(currentRowKey))
       return;

package/es/components/table/src/table/style-helper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style-helper.mjs","sources":["../../../../../../../packages/components/table/src/table/style-helper.ts"],"sourcesContent":["import {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  unref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { useFormSize } from '@element-plus/components/form'\n\nimport type { DefaultRow, RenderExpanded, Table, TableProps } from './defaults'\nimport type { Store } from '../store'\nimport type TableLayout from '../table-layout'\nimport type { TableColumnCtx } from '../table-column/defaults'\n\nfunction useStyle<T extends DefaultRow>(\n  props: TableProps<T>,\n  layout: TableLayout<T>,\n  store: Store<T>,\n  table: Table<T>\n) {\n  const isHidden = ref(false)\n  const renderExpanded = ref<RenderExpanded<T> | null>(null)\n  const resizeProxyVisible = ref(false)\n  const setDragVisible = (visible: boolean) => {\n    resizeProxyVisible.value = visible\n  }\n  const resizeState = ref<{\n    width: null | number\n    height: null | number\n    headerHeight: null | number\n  }>({\n    width: null,\n    height: null,\n    headerHeight: null,\n  })\n  const isGroup = ref(false)\n  const scrollbarViewStyle = {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n  }\n  const tableWidth = ref()\n  const tableScrollHeight = ref(0)\n  const bodyScrollHeight = ref(0)\n  const headerScrollHeight = ref(0)\n  const footerScrollHeight = ref(0)\n  const appendScrollHeight = ref(0)\n\n  watchEffect(() => {\n    layout.setHeight(props.height ?? null)\n  })\n  watchEffect(() => {\n    layout.setMaxHeight(props.maxHeight ?? null)\n  })\n  watch(\n    () => [props.currentRowKey, store.states.rowKey],\n    ([currentRowKey, rowKey]) => {\n      if (!unref(rowKey) || !unref(currentRowKey)) return\n      store.setCurrentRowKey(`${currentRowKey}`)\n    },\n    {\n      immediate: true,\n    }\n  )\n  watch(\n    () => props.data,\n    (data) => {\n      table.store.commit('setData', data)\n    },\n    {\n      immediate: true,\n      deep: true,\n    }\n  )\n  watchEffect(() => {\n    if (props.expandRowKeys) {\n      store.setExpandRowKeysAdapter(props.expandRowKeys)\n    }\n  })\n\n  const handleMouseLeave = () => {\n    table.store.commit('setHoverRow', null)\n    if (table.hoverState) table.hoverState = null\n  }\n\n  const handleHeaderFooterMousewheel = (_event: WheelEvent, data: any) => {\n    const { pixelX, pixelY } = data\n    if (Math.abs(pixelX) >= Math.abs(pixelY)) {\n      table.refs.bodyWrapper.scrollLeft += data.pixelX / 5\n    }\n  }\n\n  const shouldUpdateHeight = computed(() => {\n    return (\n      props.height ||\n      props.maxHeight ||\n      store.states.fixedColumns.value.length > 0 ||\n      store.states.rightFixedColumns.value.length > 0\n    )\n  })\n\n  const tableBodyStyles = computed(() => {\n    return {\n      width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : '',\n    }\n  })\n\n  const doLayout = () => {\n    if (shouldUpdateHeight.value) {\n      layout.updateElsHeight()\n    }\n    layout.updateColumnsWidth()\n\n    // When the test case is running, the context environment simulated by jsdom may have been destroyed,\n    // and window.requestAnimationFrame does not exist at this time.\n    if (typeof window === 'undefined') return\n    requestAnimationFrame(syncPosition)\n  }\n  onMounted(async () => {\n    await nextTick()\n    store.updateColumns()\n    bindEvents()\n    requestAnimationFrame(doLayout)\n\n    const el: HTMLElement = table.vnode.el as HTMLElement\n    const tableHeader: HTMLElement = table.refs.headerWrapper\n    if (props.flexible && el && el.parentElement) {\n      // Automatic minimum size of flex-items\n      // Ensure that the main axis does not follow the width of the items\n      el.parentElement.style.minWidth = '0'\n    }\n\n    resizeState.value = {\n      width: (tableWidth.value = el.offsetWidth),\n      height: el.offsetHeight,\n      headerHeight:\n        props.showHeader && tableHeader ? tableHeader.offsetHeight : null,\n    }\n\n    // init filters\n    store.states.columns.value.forEach((column: TableColumnCtx<T>) => {\n      if (column.filteredValue && column.filteredValue.length) {\n        table.store.commit('filterChange', {\n          column,\n          values: column.filteredValue,\n          silent: true,\n        })\n      }\n    })\n    table.$ready = true\n  })\n  const setScrollClassByEl = (el: HTMLElement, className: string) => {\n    if (!el) return\n    const classList = Array.from(el.classList).filter(\n      (item) => !item.startsWith('is-scrolling-')\n    )\n    classList.push(layout.scrollX.value ? className : 'is-scrolling-none')\n    el.className = classList.join(' ')\n  }\n  const setScrollClass = (className: string) => {\n    const { tableWrapper } = table.refs\n    setScrollClassByEl(tableWrapper, className)\n  }\n  const hasScrollClass = (className: string) => {\n    const { tableWrapper } = table.refs\n    return !!(tableWrapper && tableWrapper.classList.contains(className))\n  }\n  const syncPosition = function () {\n    if (!table.refs.scrollBarRef) return\n    if (!layout.scrollX.value) {\n      const scrollingNoneClass = 'is-scrolling-none'\n      if (!hasScrollClass(scrollingNoneClass)) {\n        setScrollClass(scrollingNoneClass)\n      }\n      return\n    }\n    const scrollContainer = table.refs.scrollBarRef.wrapRef\n    if (!scrollContainer) return\n    const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer\n    const { headerWrapper, footerWrapper } = table.refs\n    if (headerWrapper) headerWrapper.scrollLeft = scrollLeft\n    if (footerWrapper) footerWrapper.scrollLeft = scrollLeft\n    const maxScrollLeftPosition = scrollWidth - offsetWidth - 1\n    if (scrollLeft >= maxScrollLeftPosition) {\n      setScrollClass('is-scrolling-right')\n    } else if (scrollLeft === 0) {\n      setScrollClass('is-scrolling-left')\n    } else {\n      setScrollClass('is-scrolling-middle')\n    }\n  }\n\n  const bindEvents = () => {\n    if (!table.refs.scrollBarRef) return\n    if (table.refs.scrollBarRef.wrapRef) {\n      useEventListener(\n        table.refs.scrollBarRef.wrapRef,\n        'scroll',\n        syncPosition,\n        {\n          passive: true,\n        }\n      )\n    }\n    if (props.fit) {\n      useResizeObserver(table.vnode.el as HTMLElement, resizeListener)\n    } else {\n      useEventListener(window, 'resize', resizeListener)\n    }\n\n    useResizeObserver(table.refs.bodyWrapper, () => {\n      resizeListener()\n      table.refs?.scrollBarRef?.update()\n    })\n  }\n  const resizeListener = () => {\n    const el = table.vnode.el\n    if (!table.$ready || !el) return\n\n    let shouldUpdateLayout = false\n    const {\n      width: oldWidth,\n      height: oldHeight,\n      headerHeight: oldHeaderHeight,\n    } = resizeState.value\n\n    const width = (tableWidth.value = el.offsetWidth)\n    if (oldWidth !== width) {\n      shouldUpdateLayout = true\n    }\n\n    const height = el.offsetHeight\n    if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {\n      shouldUpdateLayout = true\n    }\n\n    const tableHeader: HTMLElement =\n      props.tableLayout === 'fixed'\n        ? table.refs.headerWrapper\n        : table.refs.tableHeaderRef?.$el\n    if (props.showHeader && tableHeader?.offsetHeight !== oldHeaderHeight) {\n      shouldUpdateLayout = true\n    }\n\n    tableScrollHeight.value = table.refs.tableWrapper?.scrollHeight || 0\n    headerScrollHeight.value = tableHeader?.scrollHeight || 0\n    footerScrollHeight.value = table.refs.footerWrapper?.offsetHeight || 0\n    appendScrollHeight.value = table.refs.appendWrapper?.offsetHeight || 0\n    bodyScrollHeight.value =\n      tableScrollHeight.value -\n      headerScrollHeight.value -\n      footerScrollHeight.value -\n      appendScrollHeight.value\n\n    if (shouldUpdateLayout) {\n      resizeState.value = {\n        width,\n        height,\n        headerHeight: (props.showHeader && tableHeader?.offsetHeight) || 0,\n      }\n      doLayout()\n    }\n  }\n  const tableSize = useFormSize()\n  const bodyWidth = computed(() => {\n    const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout\n    return bodyWidth_.value\n      ? `${(bodyWidth_.value as number) - (scrollY.value ? gutterWidth : 0)}px`\n      : ''\n  })\n\n  const tableLayout = computed(() => {\n    if (props.maxHeight) return 'fixed'\n    return props.tableLayout\n  })\n\n  const emptyBlockStyle = computed(() => {\n    if (props.data && props.data.length) return\n    let height = '100%'\n    if (props.height && bodyScrollHeight.value) {\n      height = `${bodyScrollHeight.value}px`\n    }\n    const width = tableWidth.value\n    return {\n      width: width ? `${width}px` : '',\n      height,\n    }\n  })\n\n  const scrollbarStyle = computed(() => {\n    if (props.height) {\n      return {\n        height: '100%',\n      }\n    }\n    if (props.maxHeight) {\n      if (!Number.isNaN(Number(props.maxHeight))) {\n        return {\n          maxHeight: `${\n            +props.maxHeight -\n            headerScrollHeight.value -\n            footerScrollHeight.value\n          }px`,\n        }\n      } else {\n        return {\n          maxHeight: `calc(${props.maxHeight} - ${\n            headerScrollHeight.value + footerScrollHeight.value\n          }px)`,\n        }\n      }\n    }\n\n    return {}\n  })\n\n  return {\n    isHidden,\n    renderExpanded,\n    setDragVisible,\n    isGroup,\n    handleMouseLeave,\n    handleHeaderFooterMousewheel,\n    tableSize,\n    emptyBlockStyle,\n    resizeProxyVisible,\n    bodyWidth,\n    resizeState,\n    doLayout,\n    tableBodyStyles,\n    tableLayout,\n    scrollbarViewStyle,\n    scrollbarStyle,\n  }\n}\n\nexport default useStyle\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"style-helper.mjs","sources":["../../../../../../../packages/components/table/src/table/style-helper.ts"],"sourcesContent":["import {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  unref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { useFormSize } from '@element-plus/components/form'\n\nimport type { DefaultRow, RenderExpanded, Table, TableProps } from './defaults'\nimport type { Store } from '../store'\nimport type TableLayout from '../table-layout'\nimport type { TableColumnCtx } from '../table-column/defaults'\n\nfunction useStyle<T extends DefaultRow>(\n  props: TableProps<T>,\n  layout: TableLayout<T>,\n  store: Store<T>,\n  table: Table<T>\n) {\n  const isHidden = ref(false)\n  const renderExpanded = ref<RenderExpanded<T> | null>(null)\n  const resizeProxyVisible = ref(false)\n  const setDragVisible = (visible: boolean) => {\n    resizeProxyVisible.value = visible\n  }\n  const resizeState = ref<{\n    width: null | number\n    height: null | number\n    headerHeight: null | number\n  }>({\n    width: null,\n    height: null,\n    headerHeight: null,\n  })\n  const isGroup = ref(false)\n  const scrollbarViewStyle = {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n  }\n  const tableWidth = ref()\n  const tableScrollHeight = ref(0)\n  const bodyScrollHeight = ref(0)\n  const headerScrollHeight = ref(0)\n  const footerScrollHeight = ref(0)\n  const appendScrollHeight = ref(0)\n\n  watch(\n    () => props.height,\n    (value) => {\n      layout.setHeight(value ?? null)\n    },\n    { immediate: true }\n  )\n  watch(\n    () => props.maxHeight,\n    (value) => {\n      layout.setMaxHeight(value ?? null)\n    },\n    { immediate: true }\n  )\n  watch(\n    () => [props.currentRowKey, store.states.rowKey],\n    ([currentRowKey, rowKey]) => {\n      if (!unref(rowKey) || !unref(currentRowKey)) return\n      store.setCurrentRowKey(`${currentRowKey}`)\n    },\n    {\n      immediate: true,\n    }\n  )\n  watch(\n    () => props.data,\n    (data) => {\n      table.store.commit('setData', data)\n    },\n    {\n      immediate: true,\n      deep: true,\n    }\n  )\n  watchEffect(() => {\n    if (props.expandRowKeys) {\n      store.setExpandRowKeysAdapter(props.expandRowKeys)\n    }\n  })\n\n  const handleMouseLeave = () => {\n    table.store.commit('setHoverRow', null)\n    if (table.hoverState) table.hoverState = null\n  }\n\n  const handleHeaderFooterMousewheel = (_event: WheelEvent, data: any) => {\n    const { pixelX, pixelY } = data\n    if (Math.abs(pixelX) >= Math.abs(pixelY)) {\n      table.refs.bodyWrapper.scrollLeft += data.pixelX / 5\n    }\n  }\n\n  const shouldUpdateHeight = computed(() => {\n    return (\n      props.height ||\n      props.maxHeight ||\n      store.states.fixedColumns.value.length > 0 ||\n      store.states.rightFixedColumns.value.length > 0\n    )\n  })\n\n  const tableBodyStyles = computed(() => {\n    return {\n      width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : '',\n    }\n  })\n\n  const doLayout = () => {\n    if (shouldUpdateHeight.value) {\n      layout.updateElsHeight()\n    }\n    layout.updateColumnsWidth()\n\n    // When the test case is running, the context environment simulated by jsdom may have been destroyed,\n    // and window.requestAnimationFrame does not exist at this time.\n    if (typeof window === 'undefined') return\n    requestAnimationFrame(syncPosition)\n  }\n  onMounted(async () => {\n    await nextTick()\n    store.updateColumns()\n    bindEvents()\n    requestAnimationFrame(doLayout)\n\n    const el: HTMLElement = table.vnode.el as HTMLElement\n    const tableHeader: HTMLElement = table.refs.headerWrapper\n    if (props.flexible && el && el.parentElement) {\n      // Automatic minimum size of flex-items\n      // Ensure that the main axis does not follow the width of the items\n      el.parentElement.style.minWidth = '0'\n    }\n\n    resizeState.value = {\n      width: (tableWidth.value = el.offsetWidth),\n      height: el.offsetHeight,\n      headerHeight:\n        props.showHeader && tableHeader ? tableHeader.offsetHeight : null,\n    }\n\n    // init filters\n    store.states.columns.value.forEach((column: TableColumnCtx<T>) => {\n      if (column.filteredValue && column.filteredValue.length) {\n        table.store.commit('filterChange', {\n          column,\n          values: column.filteredValue,\n          silent: true,\n        })\n      }\n    })\n    table.$ready = true\n  })\n  const setScrollClassByEl = (el: HTMLElement, className: string) => {\n    if (!el) return\n    const classList = Array.from(el.classList).filter(\n      (item) => !item.startsWith('is-scrolling-')\n    )\n    classList.push(layout.scrollX.value ? className : 'is-scrolling-none')\n    el.className = classList.join(' ')\n  }\n  const setScrollClass = (className: string) => {\n    const { tableWrapper } = table.refs\n    setScrollClassByEl(tableWrapper, className)\n  }\n  const hasScrollClass = (className: string) => {\n    const { tableWrapper } = table.refs\n    return !!(tableWrapper && tableWrapper.classList.contains(className))\n  }\n  const syncPosition = function () {\n    if (!table.refs.scrollBarRef) return\n    if (!layout.scrollX.value) {\n      const scrollingNoneClass = 'is-scrolling-none'\n      if (!hasScrollClass(scrollingNoneClass)) {\n        setScrollClass(scrollingNoneClass)\n      }\n      return\n    }\n    const scrollContainer = table.refs.scrollBarRef.wrapRef\n    if (!scrollContainer) return\n    const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer\n    const { headerWrapper, footerWrapper } = table.refs\n    if (headerWrapper) headerWrapper.scrollLeft = scrollLeft\n    if (footerWrapper) footerWrapper.scrollLeft = scrollLeft\n    const maxScrollLeftPosition = scrollWidth - offsetWidth - 1\n    if (scrollLeft >= maxScrollLeftPosition) {\n      setScrollClass('is-scrolling-right')\n    } else if (scrollLeft === 0) {\n      setScrollClass('is-scrolling-left')\n    } else {\n      setScrollClass('is-scrolling-middle')\n    }\n  }\n\n  const bindEvents = () => {\n    if (!table.refs.scrollBarRef) return\n    if (table.refs.scrollBarRef.wrapRef) {\n      useEventListener(\n        table.refs.scrollBarRef.wrapRef,\n        'scroll',\n        syncPosition,\n        {\n          passive: true,\n        }\n      )\n    }\n    if (props.fit) {\n      useResizeObserver(table.vnode.el as HTMLElement, resizeListener)\n    } else {\n      useEventListener(window, 'resize', resizeListener)\n    }\n\n    useResizeObserver(table.refs.bodyWrapper, () => {\n      resizeListener()\n      table.refs?.scrollBarRef?.update()\n    })\n  }\n  const resizeListener = () => {\n    const el = table.vnode.el\n    if (!table.$ready || !el) return\n\n    let shouldUpdateLayout = false\n    const {\n      width: oldWidth,\n      height: oldHeight,\n      headerHeight: oldHeaderHeight,\n    } = resizeState.value\n\n    const width = (tableWidth.value = el.offsetWidth)\n    if (oldWidth !== width) {\n      shouldUpdateLayout = true\n    }\n\n    const height = el.offsetHeight\n    if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {\n      shouldUpdateLayout = true\n    }\n\n    const tableHeader: HTMLElement =\n      props.tableLayout === 'fixed'\n        ? table.refs.headerWrapper\n        : table.refs.tableHeaderRef?.$el\n    if (props.showHeader && tableHeader?.offsetHeight !== oldHeaderHeight) {\n      shouldUpdateLayout = true\n    }\n\n    tableScrollHeight.value = table.refs.tableWrapper?.scrollHeight || 0\n    headerScrollHeight.value = tableHeader?.scrollHeight || 0\n    footerScrollHeight.value = table.refs.footerWrapper?.offsetHeight || 0\n    appendScrollHeight.value = table.refs.appendWrapper?.offsetHeight || 0\n    bodyScrollHeight.value =\n      tableScrollHeight.value -\n      headerScrollHeight.value -\n      footerScrollHeight.value -\n      appendScrollHeight.value\n\n    if (shouldUpdateLayout) {\n      resizeState.value = {\n        width,\n        height,\n        headerHeight: (props.showHeader && tableHeader?.offsetHeight) || 0,\n      }\n      doLayout()\n    }\n  }\n  const tableSize = useFormSize()\n  const bodyWidth = computed(() => {\n    const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout\n    return bodyWidth_.value\n      ? `${(bodyWidth_.value as number) - (scrollY.value ? gutterWidth : 0)}px`\n      : ''\n  })\n\n  const tableLayout = computed(() => {\n    if (props.maxHeight) return 'fixed'\n    return props.tableLayout\n  })\n\n  const emptyBlockStyle = computed(() => {\n    if (props.data && props.data.length) return\n    let height = '100%'\n    if (props.height && bodyScrollHeight.value) {\n      height = `${bodyScrollHeight.value}px`\n    }\n    const width = tableWidth.value\n    return {\n      width: width ? `${width}px` : '',\n      height,\n    }\n  })\n\n  const scrollbarStyle = computed(() => {\n    if (props.height) {\n      return {\n        height: '100%',\n      }\n    }\n    if (props.maxHeight) {\n      if (!Number.isNaN(Number(props.maxHeight))) {\n        return {\n          maxHeight: `${\n            +props.maxHeight -\n            headerScrollHeight.value -\n            footerScrollHeight.value\n          }px`,\n        }\n      } else {\n        return {\n          maxHeight: `calc(${props.maxHeight} - ${\n            headerScrollHeight.value + footerScrollHeight.value\n          }px)`,\n        }\n      }\n    }\n\n    return {}\n  })\n\n  return {\n    isHidden,\n    renderExpanded,\n    setDragVisible,\n    isGroup,\n    handleMouseLeave,\n    handleHeaderFooterMousewheel,\n    tableSize,\n    emptyBlockStyle,\n    resizeProxyVisible,\n    bodyWidth,\n    resizeState,\n    doLayout,\n    tableBodyStyles,\n    tableLayout,\n    scrollbarViewStyle,\n    scrollbarStyle,\n  }\n}\n\nexport default useStyle\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { defineComponent, inject, ref, watch, nextTick, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle } from 'vue';
+import { defineComponent, inject, ref, computed, watch, nextTick, onBeforeUnmount, unref, openBlock, createElementBlock, normalizeClass, normalizeStyle, createCommentVNode } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 import { tabsRootContextKey } from './constants.mjs';
 import { tabBarProps } from './tab-bar.mjs';
@@ -23,6 +23,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("tabs");
     const barRef = ref();
     const barStyle = ref();
+    const shouldDisableInitialTransition = computed(() => isUndefined(rootTabs.props.modelValue) && !isUndefined(rootTabs.props.defaultValue));
+    const shouldRenderBar = computed(() => {
+      var _a;
+      return !shouldDisableInitialTransition.value || Boolean((_a = barStyle.value) == null ? void 0 : _a.transform);
+    });
     const getBarStyle = () => {
       let offset = 0;
       let tabSize = 0;
@@ -77,12 +82,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       update
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return unref(shouldRenderBar) ? (openBlock(), createElementBlock("div", {
+        key: 0,
         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);
+      }, null, 6)) : createCommentVNode("v-if", true);
     };
   }
 });

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 { inject, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, isUndefined, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabsRootContextKey } from './constants'\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 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  const position = sizeDir === 'x' ? 'left' : 'top'\n\n  props.tabs.every((tab) => {\n    if (isUndefined(tab.paneName)) return false\n    const $el = props.tabRefs[tab.paneName]\n    if (!$el) return false\n\n    if (!tab.active) {\n      return true\n    }\n\n    offset = $el[`offset${capitalize(position)}`]\n    tabSize = $el[`client${capitalize(sizeName)}`]\n\n    const tabStyles = window.getComputedStyle($el)\n\n    if (sizeName === 'width') {\n      tabSize -=\n        Number.parseFloat(tabStyles.paddingLeft) +\n        Number.parseFloat(tabStyles.paddingRight)\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\nconst tabObservers = [] as ReturnType<typeof useResizeObserver>[]\nconst observerTabs = () => {\n  tabObservers.forEach((observer) => observer.stop())\n  tabObservers.length = 0\n\n  Object.values(props.tabRefs).forEach((tab) => {\n    tabObservers.push(useResizeObserver(tab, update))\n  })\n}\n\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick()\n    update()\n\n    observerTabs()\n  },\n  { immediate: true }\n)\nconst barObserver = useResizeObserver(barRef, () => update())\n\nonBeforeUnmount(() => {\n  tabObservers.forEach((observer) => observer.stop())\n  tabObservers.length = 0\n  barObserver.stop()\n})\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":["_openBlock","_createElementBlock"],"mappings":";;;;;;;;;;;mCAmBc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR;;;;;;AAGA,IAAM,MAAA,QAAA,GAAW,OAAO,kBAAkB,CAAA,CAAA;AAC1C,IAAA,IAAI,CAAC,QAAA;AAEL,MAAM,yBAAwB,EAAA,mCAAA,CAAA,CAAA;AAE9B,IAAA,MAAM,iBAA6B,CAAA,MAAA,CAAA,CAAA;AACnC,IAAA,MAAM,YAA8B,EAAA,CAAA;AAEpC,IAAA,MAAM,cAAc,EAAqB,CAAA;AACvC,IAAA,MAAI,WAAS,GAAA,MAAA;AACb,MAAA,IAAI,MAAU,GAAA,CAAA,CAAA;AAEd,MAAM,IAAA,OAAA,GAAA,CAAA,CAAA;AAGN,MAAM,MAAA,QAAA,GAAuB,CAAA,KAAA,EAAA,QAAA,CAAA,CAAA,QAAgB,CAAA,QAAA,CAAA,KAAA,CAAA,WAAA,CAAA,GAAA,OAAA,GAAA,QAAA,CAAA;AAC7C,MAAM,MAAA,OAAA,GAAA,QAAuB,KAAA,OAAe,GAAA,GAAA,GAAA,GAAA,CAAA;AAE5C,MAAM,MAAA,QAAW,GAAA,OAAS,KAAA,GAAA,GAAA,MAAA,GAAA,KAAA,CAAA;AACxB,MAAA,KAAA,CAAI,IAAY,CAAA,KAAA,CAAA,CAAA,GAAA,KAAY;AAC5B,QAAA,IAAA,WAAY,CAAA,GAAc,CAAA,QAAA,CAAA;AAC1B,UAAI,OAAM,KAAO,CAAA;AAEjB,QAAI,SAAK,GAAQ,KAAA,CAAA,OAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA;AACf,QAAO,IAAA,CAAA,GAAA;AAAA,UACT,OAAA,KAAA,CAAA;AAEA,QAAA,IAAA,CAAA,GAAA,CAAS,MAAI,EAAA;AACb,UAAA,OAAA,IAAc,CAAA;AAEd,SAAM;AAEN,QAAA,oBAA0B,EAAA,UAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACxB,QACE,OAAA,GAAA,GAAA,CAAA,CAAA,kBAA4B,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAE9B,QAAU,MAAA,SAAA,GAAA,MAAkB,CAAA,gBAAqB,CAAA,GAAA,CAAA,CAAA;AAAA,QACnD,IAAA,QAAA,KAAA,OAAA,EAAA;AACA,UAAO,OAAA,IAAA,MAAA,CAAA,UAAA,CAAA,SAAA,CAAA,WAAA,CAAA,GAAA,MAAA,CAAA,UAAA,CAAA,SAAA,CAAA,YAAA,CAAA,CAAA;AAAA,UACR,MAAA,IAAA,MAAA,CAAA,UAAA,CAAA,SAAA,CAAA,WAAA,CAAA,CAAA;AAED,SAAO;AAAA,QACL,OAAC,KAAW,CAAA;AAAU,OAAA,CACtB;AAAoD,MACtD,OAAA;AAAA,QACF,CAAA,QAAA,GAAA,CAAA,EAAA,OAAA,CAAA,EAAA,CAAA;AAEA,QAAA,SAAe,EAAA,CAAA,SAAgB,EAAA,UAAA,CAAQ,OAAY,CAAA,CAAA,CAAA,EAAA,MAAA,CAAA,GAAA,CAAA;AAEnD,OAAA,CAAA;AACA,KAAA,CAAA;AACE,IAAA,MAAA,MAAA,GAAa,MAAQ,QAAc,CAAA,KAAA,GAAA,aAAc,CAAC;AAClD,IAAA,MAAA,YAAsB,GAAA,EAAA,CAAA;AAEtB,IAAA,MAAA,YAAoB,GAAA,MAAA;AAClB,MAAA,YAAA,CAAA,OAAkB,CAAA,CAAA,QAAA,KAAA,QAAuB,CAAA,IAAA,EAAO,CAAA,CAAA;AAAA,MAClD,YAAC,CAAA,MAAA,GAAA,CAAA,CAAA;AAAA,MACH,MAAA,CAAA,MAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,OAAA,CAAA,CAAA,GAAA,KAAA;AAEA,QAAA,YAAA,CAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,EAAA,MAAA,CAAA,CAAA,CAAA;AAAA;AACc,KAAA,CACZ;AACE,IAAA,KAAA,CAAA,MAAe,KAAA,CAAA,IAAA,EAAA,YAAA;AACf,MAAO,MAAA,QAAA,EAAA,CAAA;AAEP,MAAa,MAAA,EAAA,CAAA;AAAA,MACf,YAAA,EAAA,CAAA;AAAA,KACA,EAAA,aAAkB,IAAA,EAAA,CAAA,CAAA;AAAA,IACpB,MAAA,WAAA,GAAA,iBAAA,CAAA,MAAA,EAAA,MAAA,MAAA,EAAA,CAAA,CAAA;AACA,IAAA,eAAoB,CAAA,MAAA;AAEpB,MAAA,YAAA,CAAA,OAAsB,CAAA,CAAA,QAAA,KAAA,QAAA,CAAA,IAAA,EAAA,CAAA,CAAA;AACpB,MAAA,YAAA,CAAa,MAAQ,GAAC,CAAa,CAAA;AACnC,MAAA,WAAA,CAAA,IAAsB,EAAA,CAAA;AACtB,KAAA,CAAA,CAAA;AAAiB,IACnB,MAAC,CAAA;AAED,MAAa,GAAA,EAAA,MAAA;AAAA,MAAA,MAAA;AAAA,KAAA,CAEX,CAAK;AAAA,IAAA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MAEL,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,QACD,OAAA,EAAA,QAAA;;;;;;;;;;;;"}
+{"version":3,"file":"tab-bar2.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"shouldRenderBar\"\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 { computed, inject, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, isUndefined, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabsRootContextKey } from './constants'\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 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>()\nconst shouldDisableInitialTransition = computed(\n  () =>\n    isUndefined(rootTabs.props.modelValue) &&\n    !isUndefined(rootTabs.props.defaultValue)\n)\nconst shouldRenderBar = computed(\n  () =>\n    !shouldDisableInitialTransition.value || Boolean(barStyle.value?.transform)\n)\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  const position = sizeDir === 'x' ? 'left' : 'top'\n\n  props.tabs.every((tab) => {\n    if (isUndefined(tab.paneName)) return false\n    const $el = props.tabRefs[tab.paneName]\n    if (!$el) return false\n\n    if (!tab.active) {\n      return true\n    }\n\n    offset = $el[`offset${capitalize(position)}`]\n    tabSize = $el[`client${capitalize(sizeName)}`]\n\n    const tabStyles = window.getComputedStyle($el)\n\n    if (sizeName === 'width') {\n      tabSize -=\n        Number.parseFloat(tabStyles.paddingLeft) +\n        Number.parseFloat(tabStyles.paddingRight)\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\nconst tabObservers = [] as ReturnType<typeof useResizeObserver>[]\nconst observerTabs = () => {\n  tabObservers.forEach((observer) => observer.stop())\n  tabObservers.length = 0\n\n  Object.values(props.tabRefs).forEach((tab) => {\n    tabObservers.push(useResizeObserver(tab, update))\n  })\n}\n\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick()\n    update()\n\n    observerTabs()\n  },\n  { immediate: true }\n)\nconst barObserver = useResizeObserver(barRef, () => update())\n\nonBeforeUnmount(() => {\n  tabObservers.forEach((observer) => observer.stop())\n  tabObservers.length = 0\n  barObserver.stop()\n})\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":["_unref","_openBlock","_createElementBlock"],"mappings":"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"}

package/es/components/tabs/src/tabs.d.ts

@@ -12,6 +12,12 @@ export declare const tabsProps: {
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
+    readonly defaultValue: {
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
     readonly editable: BooleanConstructor;
     readonly tabPosition: import("@element-plus/nightly/es/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top" | "bottom", unknown, "top", boolean>;
     readonly beforeLeave: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => (newName: TabPaneName, oldName: TabPaneName) => Awaitable<void | boolean>) | (() => (newName: TabPaneName, oldName: TabPaneName) => Awaitable<void | boolean>) | {
@@ -48,6 +54,12 @@ declare const Tabs: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
+    readonly defaultValue: {
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
     readonly editable: BooleanConstructor;
     readonly tabPosition: import("@element-plus/nightly/es/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top" | "bottom", unknown, "top", boolean>;
     readonly beforeLeave: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => (newName: TabPaneName, oldName: TabPaneName) => Awaitable<void | boolean>) | (() => (newName: TabPaneName, oldName: TabPaneName) => Awaitable<void | boolean>) | {
@@ -78,6 +90,12 @@ declare const Tabs: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
+    readonly defaultValue: {
+        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
     readonly editable: BooleanConstructor;
     readonly tabPosition: import("@element-plus/nightly/es/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top" | "bottom", unknown, "top", boolean>;
     readonly beforeLeave: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => (newName: TabPaneName, oldName: TabPaneName) => Awaitable<void | boolean>) | (() => (newName: TabPaneName, oldName: TabPaneName) => Awaitable<void | boolean>) | {

package/es/components/tabs/src/tabs.mjs

@@ -8,8 +8,8 @@ import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs
 import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { useOrderedChildren } from '../../../hooks/use-ordered-children/index.mjs';
+import { isUndefined, isNumber } from '../../../utils/types.mjs';
 import { isString } from '@vue/shared';
-import { isNumber, isUndefined } from '../../../utils/types.mjs';
 import { getEventCode } from '../../../utils/dom/event.mjs';
 import { EVENT_CODE } from '../../../constants/aria.mjs';
 
@@ -24,6 +24,9 @@ const tabsProps = buildProps({
   modelValue: {
     type: [String, Number]
   },
+  defaultValue: {
+    type: [String, Number]
+  },
   editable: Boolean,
   tabPosition: {
     type: String,
@@ -68,7 +71,7 @@ const Tabs = defineComponent({
       ChildrenSorter: PanesSorter
     } = useOrderedChildren(getCurrentInstance(), "ElTabPane");
     const nav$ = ref();
-    const currentName = ref((_a = props.modelValue) != null ? _a : "0");
+    const currentName = ref((_a = isUndefined(props.modelValue) ? props.defaultValue : props.modelValue) != null ? _a : "0");
     const setCurrentName = async (value, trigger = false) => {
       var _a2, _b, _c, _d;
       if (currentName.value === value || isUndefined(value))
@@ -126,6 +129,11 @@ const Tabs = defineComponent({
       }
     };
     watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
+    watch(() => props.defaultValue, (defaultValue) => {
+      if (isUndefined(props.modelValue)) {
+        setCurrentName(defaultValue);
+      }
+    });
     watch(currentName, async () => {
       var _a2;
       await nextTick();