element-plus-mobile 0.1.1 → 0.1.2

package/lib/components/space/src/space.js.map

@@ -1 +1 @@
-{"version":3,"file":"space.js","names":["buildProps","definePropType","isNumber","componentSizes","useSpace","isFragment","Comment","Item","PatchFlags","isValidElementNode"],"sources":["../../../../../../packages/components/space/src/space.ts"],"sourcesContent":["import {\n  Comment,\n  createTextVNode,\n  createVNode,\n  defineComponent,\n  isVNode,\n  renderSlot,\n} from 'vue'\nimport {\n  PatchFlags,\n  buildProps,\n  definePropType,\n  isArray,\n  isFragment,\n  isNumber,\n  isString,\n  isValidElementNode,\n} from '@element-plus/utils'\nimport { componentSizes } from '@element-plus/constants'\nimport Item from './item'\nimport { useSpace } from './use-space'\n\nimport type {\n  ExtractPropTypes,\n  ExtractPublicPropTypes,\n  StyleValue,\n  VNode,\n  VNodeArrayChildren,\n  VNodeChild,\n} from 'vue'\nimport type { AlignItems, Arrayable } from '@element-plus/utils'\n\nexport const spaceProps = buildProps({\n  /**\n   * @description Placement direction\n   */\n  direction: {\n    type: String,\n    values: ['horizontal', 'vertical'],\n    default: 'horizontal',\n  },\n  /**\n   * @description Classname\n   */\n  class: {\n    type: definePropType<Arrayable<Record<string, boolean> | string>>([\n      String,\n      Object,\n      Array,\n    ]),\n    default: '',\n  },\n  /**\n   * @description Extra style rules\n   */\n  style: {\n    type: definePropType<StyleValue>([String, Array, Object]),\n    default: '',\n  },\n  /**\n   * @description Controls the alignment of items\n   */\n  alignment: {\n    type: definePropType<AlignItems>(String),\n    default: 'center',\n  },\n  /**\n   * @description Prefix for space-items\n   */\n  prefixCls: {\n    type: String,\n  },\n  /**\n   * @description Spacer\n   */\n  spacer: {\n    type: definePropType<VNodeChild>([Object, String, Number, Array]),\n    default: null,\n    validator: (val: unknown) => isVNode(val) || isNumber(val) || isString(val),\n  },\n  /**\n   * @description Auto wrapping\n   */\n  wrap: Boolean,\n  /**\n   * @description Whether to fill the container\n   */\n  fill: Boolean,\n  /**\n   * @description Ratio of fill\n   */\n  fillRatio: {\n    type: Number,\n    default: 100,\n  },\n  /**\n   * @description Spacing size\n   */\n  size: {\n    type: [String, Array, Number],\n    values: componentSizes,\n    validator: (val: unknown): val is [number, number] | number => {\n      return (\n        isNumber(val) ||\n        (isArray(val) && val.length === 2 && val.every(isNumber))\n      )\n    },\n  },\n} as const)\nexport type SpaceProps = ExtractPropTypes<typeof spaceProps>\nexport type SpacePropsPublic = ExtractPublicPropTypes<typeof spaceProps>\n\nconst Space = defineComponent({\n  name: 'ElSpace',\n\n  props: spaceProps,\n\n  setup(props, { slots }) {\n    const { classes, containerStyle, itemStyle } = useSpace(props)\n\n    // retrieve the children out via a simple for loop\n    // the edge case here is that when users uses directives like <v-for>, <v-if>\n    // we need to go deeper until the child is not the Fragment type\n    function extractChildren(\n      children: VNodeArrayChildren,\n      parentKey = '',\n      extractedChildren: VNode[] = []\n    ) {\n      const { prefixCls } = props\n      children.forEach((child, loopKey) => {\n        if (isFragment(child)) {\n          if (isArray(child.children)) {\n            child.children.forEach((nested, key) => {\n              if (isFragment(nested) && isArray(nested.children)) {\n                extractChildren(\n                  nested.children,\n                  `${parentKey + key}-`,\n                  extractedChildren\n                )\n              } else {\n                if (isVNode(nested) && nested?.type === Comment) {\n                  extractedChildren.push(nested)\n                } else {\n                  extractedChildren.push(\n                    createVNode(\n                      Item,\n                      {\n                        style: itemStyle.value,\n                        prefixCls,\n                        key: `nested-${parentKey + key}`,\n                      },\n                      {\n                        default: () => [nested],\n                      },\n                      PatchFlags.PROPS | PatchFlags.STYLE,\n                      ['style', 'prefixCls']\n                    )\n                  )\n                }\n              }\n            })\n          }\n          // if the current child is valid vnode, then append this current vnode\n          // to item as child node.\n        } else if (isValidElementNode(child)) {\n          extractedChildren.push(\n            createVNode(\n              Item,\n              {\n                style: itemStyle.value,\n                prefixCls,\n                key: `LoopKey${parentKey + loopKey}`,\n              },\n              {\n                default: () => [child],\n              },\n              PatchFlags.PROPS | PatchFlags.STYLE,\n              ['style', 'prefixCls']\n            )\n          )\n        }\n      })\n\n      return extractedChildren\n    }\n\n    return () => {\n      const { spacer, direction } = props\n\n      const children = renderSlot(slots, 'default', { key: 0 }, () => [])\n\n      if ((children.children ?? []).length === 0) return null\n      // loop the children, if current children is rendered via `renderList` or `<v-for>`\n      if (isArray(children.children)) {\n        let extractedChildren = extractChildren(children.children)\n\n        if (spacer) {\n          // track the current rendering index, when encounters the last element\n          // then no need to add a spacer after it.\n          const len = extractedChildren.length - 1\n          extractedChildren = extractedChildren.reduce<VNode[]>(\n            (acc, child, idx) => {\n              const children = [...acc, child]\n              if (idx !== len) {\n                children.push(\n                  createVNode(\n                    'span',\n                    // adding width 100% for vertical alignment,\n                    // when the spacer inherit the width from the\n                    // parent, this span's width was not set, so space\n                    // might disappear\n                    {\n                      style: [\n                        itemStyle.value,\n                        direction === 'vertical' ? 'width: 100%' : null,\n                      ],\n                      key: idx,\n                    },\n                    [\n                      // if spacer is already a valid vnode, then append it to the current\n                      // span element.\n                      // otherwise, treat it as string.\n                      isVNode(spacer)\n                        ? spacer\n                        : createTextVNode(spacer as string, PatchFlags.TEXT),\n                    ],\n                    PatchFlags.STYLE\n                  )\n                )\n              }\n              return children\n            },\n            []\n          )\n        }\n\n        // spacer container.\n        return createVNode(\n          'div',\n          {\n            class: classes.value,\n            style: containerStyle.value,\n          },\n          extractedChildren,\n          PatchFlags.STYLE | PatchFlags.CLASS\n        )\n      }\n\n      return children.children\n    }\n  },\n})\n\nexport type SpaceInstance = InstanceType<typeof Space> & unknown\n\nexport default Space\n"],"mappings":"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"}
+{"version":3,"file":"space.js","names":["buildProps","definePropType","isNumber","componentSizes","useSpace","isFragment","Comment","Item","PatchFlags","isValidElementNode"],"sources":["../../../../../../packages/components/space/src/space.ts"],"sourcesContent":["import {\n  Comment,\n  createTextVNode,\n  createVNode,\n  defineComponent,\n  isVNode,\n  renderSlot,\n} from 'vue'\nimport {\n  PatchFlags,\n  buildProps,\n  definePropType,\n  isArray,\n  isFragment,\n  isNumber,\n  isString,\n  isValidElementNode,\n} from '@element-plus/utils'\nimport { componentSizes } from '@element-plus/constants'\nimport Item from './item'\nimport { useSpace } from './use-space'\n\nimport type {\n  ExtractPropTypes,\n  ExtractPublicPropTypes,\n  StyleValue,\n  VNode,\n  VNodeArrayChildren,\n  VNodeChild,\n} from 'vue'\nimport type { AlignItems, Arrayable } from '@element-plus/utils'\n\nexport const spaceProps = buildProps({\n  /**\n   * @description Placement direction\n   */\n  direction: {\n    type: String,\n    values: ['horizontal', 'vertical'],\n    default: 'vertical',\n  },\n  /**\n   * @description Classname\n   */\n  class: {\n    type: definePropType<Arrayable<Record<string, boolean> | string>>([\n      String,\n      Object,\n      Array,\n    ]),\n    default: '',\n  },\n  /**\n   * @description Extra style rules\n   */\n  style: {\n    type: definePropType<StyleValue>([String, Array, Object]),\n    default: '',\n  },\n  /**\n   * @description Controls the alignment of items\n   */\n  alignment: {\n    type: definePropType<AlignItems>(String),\n  },\n  /**\n   * @description Prefix for space-items\n   */\n  prefixCls: {\n    type: String,\n  },\n  /**\n   * @description Spacer\n   */\n  spacer: {\n    type: definePropType<VNodeChild>([Object, String, Number, Array]),\n    default: null,\n    validator: (val: unknown) => isVNode(val) || isNumber(val) || isString(val),\n  },\n  /**\n   * @description Auto wrapping\n   */\n  wrap: Boolean,\n  /**\n   * @description Whether to fill the container\n   */\n  fill: Boolean,\n  /**\n   * @description Ratio of fill\n   */\n  fillRatio: {\n    type: Number,\n    default: 100,\n  },\n  /**\n   * @description Spacing size\n   */\n  size: {\n    type: [String, Array, Number],\n    values: componentSizes,\n    validator: (val: unknown): val is [number, number] | number => {\n      return (\n        isNumber(val) ||\n        (isArray(val) && val.length === 2 && val.every(isNumber))\n      )\n    },\n  },\n} as const)\nexport type SpaceProps = ExtractPropTypes<typeof spaceProps>\nexport type SpacePropsPublic = ExtractPublicPropTypes<typeof spaceProps>\n\nconst Space = defineComponent({\n  name: 'ElSpace',\n\n  props: spaceProps,\n\n  setup(props, { slots }) {\n    const { classes, containerStyle, itemStyle } = useSpace(props)\n\n    // retrieve the children out via a simple for loop\n    // the edge case here is that when users uses directives like <v-for>, <v-if>\n    // we need to go deeper until the child is not the Fragment type\n    function extractChildren(\n      children: VNodeArrayChildren,\n      parentKey = '',\n      extractedChildren: VNode[] = []\n    ) {\n      const { prefixCls } = props\n      children.forEach((child, loopKey) => {\n        if (isFragment(child)) {\n          if (isArray(child.children)) {\n            child.children.forEach((nested, key) => {\n              if (isFragment(nested) && isArray(nested.children)) {\n                extractChildren(\n                  nested.children,\n                  `${parentKey + key}-`,\n                  extractedChildren\n                )\n              } else {\n                if (isVNode(nested) && nested?.type === Comment) {\n                  extractedChildren.push(nested)\n                } else {\n                  extractedChildren.push(\n                    createVNode(\n                      Item,\n                      {\n                        style: itemStyle.value,\n                        prefixCls,\n                        key: `nested-${parentKey + key}`,\n                      },\n                      {\n                        default: () => [nested],\n                      },\n                      PatchFlags.PROPS | PatchFlags.STYLE,\n                      ['style', 'prefixCls']\n                    )\n                  )\n                }\n              }\n            })\n          }\n          // if the current child is valid vnode, then append this current vnode\n          // to item as child node.\n        } else if (isValidElementNode(child)) {\n          extractedChildren.push(\n            createVNode(\n              Item,\n              {\n                style: itemStyle.value,\n                prefixCls,\n                key: `LoopKey${parentKey + loopKey}`,\n              },\n              {\n                default: () => [child],\n              },\n              PatchFlags.PROPS | PatchFlags.STYLE,\n              ['style', 'prefixCls']\n            )\n          )\n        }\n      })\n\n      return extractedChildren\n    }\n\n    return () => {\n      const { spacer, direction } = props\n\n      const children = renderSlot(slots, 'default', { key: 0 }, () => [])\n\n      if ((children.children ?? []).length === 0) return null\n      // loop the children, if current children is rendered via `renderList` or `<v-for>`\n      if (isArray(children.children)) {\n        let extractedChildren = extractChildren(children.children)\n\n        if (spacer) {\n          // track the current rendering index, when encounters the last element\n          // then no need to add a spacer after it.\n          const len = extractedChildren.length - 1\n          extractedChildren = extractedChildren.reduce<VNode[]>(\n            (acc, child, idx) => {\n              const children = [...acc, child]\n              if (idx !== len) {\n                children.push(\n                  createVNode(\n                    'span',\n                    // adding width 100% for vertical alignment,\n                    // when the spacer inherit the width from the\n                    // parent, this span's width was not set, so space\n                    // might disappear\n                    {\n                      style: [\n                        itemStyle.value,\n                        direction === 'vertical' ? 'width: 100%' : null,\n                      ],\n                      key: idx,\n                    },\n                    [\n                      // if spacer is already a valid vnode, then append it to the current\n                      // span element.\n                      // otherwise, treat it as string.\n                      isVNode(spacer)\n                        ? spacer\n                        : createTextVNode(spacer as string, PatchFlags.TEXT),\n                    ],\n                    PatchFlags.STYLE\n                  )\n                )\n              }\n              return children\n            },\n            []\n          )\n        }\n\n        // spacer container.\n        return createVNode(\n          'div',\n          {\n            class: classes.value,\n            style: containerStyle.value,\n          },\n          extractedChildren,\n          PatchFlags.STYLE | PatchFlags.CLASS\n        )\n      }\n\n      return children.children\n    }\n  },\n})\n\nexport type SpaceInstance = InstanceType<typeof Space> & unknown\n\nexport default Space\n"],"mappings":";;;;;;;;;;;;AAgCA,MAAa,aAAaA,6BAAW;CAInC,WAAW;EACT,MAAM;EACN,QAAQ,CAAC,cAAc,WAAW;EAClC,SAAS;EACV;CAID,OAAO;EACL,MAAMC,iCAA4D;GAChE;GACA;GACA;GACD,CAAC;EACF,SAAS;EACV;CAID,OAAO;EACL,MAAMA,iCAA2B;GAAC;GAAQ;GAAO;GAAO,CAAC;EACzD,SAAS;EACV;CAID,WAAW,EACT,MAAMA,iCAA2B,OAAO,EACzC;CAID,WAAW,EACT,MAAM,QACP;CAID,QAAQ;EACN,MAAMA,iCAA2B;GAAC;GAAQ;GAAQ;GAAQ;GAAM,CAAC;EACjE,SAAS;EACT,YAAY,yBAAyB,IAAI,IAAIC,uBAAS,IAAI,8BAAa,IAAI;EAC5E;CAID,MAAM;CAIN,MAAM;CAIN,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,MAAM;EACJ,MAAM;GAAC;GAAQ;GAAO;GAAO;EAC7B,QAAQC;EACR,YAAY,QAAmD;AAC7D,UACED,uBAAS,IAAI,6BACJ,IAAI,IAAI,IAAI,WAAW,KAAK,IAAI,MAAMA,uBAAS;;EAG7D;CACF,CAAU;AAIX,MAAM,iCAAwB;CAC5B,MAAM;CAEN,OAAO;CAEP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,EAAE,SAAS,gBAAgB,cAAcE,2BAAS,MAAM;EAK9D,SAAS,gBACP,UACA,YAAY,IACZ,oBAA6B,EAAE,EAC/B;GACA,MAAM,EAAE,cAAc;AACtB,YAAS,SAAS,OAAO,YAAY;AACnC,QAAIC,yBAAW,MAAM,EACnB;kCAAY,MAAM,SAAS,CACzB,OAAM,SAAS,SAAS,QAAQ,QAAQ;AACtC,UAAIA,yBAAW,OAAO,6BAAY,OAAO,SAAS,CAChD,iBACE,OAAO,UACP,GAAG,YAAY,IAAI,IACnB,kBACD;gCAEW,OAAO,IAAI,QAAQ,SAASC,YACtC,mBAAkB,KAAK,OAAO;UAE9B,mBAAkB,0BAEdC,sBACA;OACE,OAAO,UAAU;OACjB;OACA,KAAK,UAAU,YAAY;OAC5B,EACD,EACE,eAAe,CAAC,OAAO,EACxB,EACDC,yBAAW,QAAQA,yBAAW,OAC9B,CAAC,SAAS,YAAY,CACvB,CACF;OAGL;eAIKC,iCAAmB,MAAM,CAClC,mBAAkB,0BAEdF,sBACA;KACE,OAAO,UAAU;KACjB;KACA,KAAK,UAAU,YAAY;KAC5B,EACD,EACE,eAAe,CAAC,MAAM,EACvB,EACDC,yBAAW,QAAQA,yBAAW,OAC9B,CAAC,SAAS,YAAY,CACvB,CACF;KAEH;AAEF,UAAO;;AAGT,eAAa;GACX,MAAM,EAAE,QAAQ,cAAc;GAE9B,MAAM,+BAAsB,OAAO,WAAW,EAAE,KAAK,GAAG,QAAQ,EAAE,CAAC;AAEnE,QAAK,SAAS,YAAY,EAAE,EAAE,WAAW,EAAG,QAAO;AAEnD,gCAAY,SAAS,SAAS,EAAE;IAC9B,IAAI,oBAAoB,gBAAgB,SAAS,SAAS;AAE1D,QAAI,QAAQ;KAGV,MAAM,MAAM,kBAAkB,SAAS;AACvC,yBAAoB,kBAAkB,QACnC,KAAK,OAAO,QAAQ;MACnB,MAAM,WAAW,CAAC,GAAG,KAAK,MAAM;AAChC,UAAI,QAAQ,IACV,UAAS,0BAEL,QAKA;OACE,OAAO,CACL,UAAU,OACV,cAAc,aAAa,gBAAgB,KAC5C;OACD,KAAK;OACN,EACD,kBAIU,OAAO,GACX,kCACgB,QAAkBA,yBAAW,KAAK,CACvD,EACDA,yBAAW,MACZ,CACF;AAEH,aAAO;QAET,EAAE,CACH;;AAIH,gCACE,OACA;KACE,OAAO,QAAQ;KACf,OAAO,eAAe;KACvB,EACD,mBACAA,yBAAW,QAAQA,yBAAW,MAC/B;;AAGH,UAAO,SAAS;;;CAGrB,CAAC"}

package/lib/components/space/src/use-space.js

@@ -19,12 +19,13 @@ function useSpace(props) {
 		ns.m(props.direction),
 		props.class
 	]);
+	const resolvedAlignment = (0, vue.computed)(() => props.alignment ?? (props.direction === "vertical" ? "stretch" : "center"));
 	const horizontalSize = (0, vue.ref)(0);
 	const verticalSize = (0, vue.ref)(0);
 	const containerStyle = (0, vue.computed)(() => {
 		return [
-			props.wrap || props.fill ? { flexWrap: "wrap" } : {},
-			{ alignItems: props.alignment },
+			props.direction === "horizontal" && (props.wrap || props.fill) ? { flexWrap: "wrap" } : {},
+			{ alignItems: resolvedAlignment.value },
 			{
 				rowGap: require_style.pxToRem(verticalSize.value),
 				columnGap: require_style.pxToRem(horizontalSize.value)
@@ -33,10 +34,12 @@ function useSpace(props) {
 		];
 	});
 	const itemStyle = (0, vue.computed)(() => {
-		return props.fill ? {
+		if (!props.fill) return {};
+		if (props.direction === "horizontal") return {
 			flexGrow: 1,
 			minWidth: `${props.fillRatio}%`
-		} : {};
+		};
+		return { width: "100%" };
 	});
 	(0, vue.watchEffect)(() => {
 		const { size = "small", wrap, direction: dir, fill } = props;

package/lib/components/space/src/use-space.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-space.js","names":["useNamespace","pxToRem","isNumber"],"sources":["../../../../../../packages/components/space/src/use-space.ts"],"sourcesContent":["import { computed, ref, watchEffect } from 'vue'\nimport { isArray, isNumber, pxToRem } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { SpaceProps } from './space'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst SIZE_MAP = {\n  small: 12,\n  default: 16,\n  large: 20,\n} as const\n\nexport function useSpace(props: SpaceProps) {\n  const ns = useNamespace('space')\n\n  const classes = computed(() => [ns.b(), ns.m(props.direction), props.class])\n\n  const horizontalSize = ref(0)\n  const verticalSize = ref(0)\n\n  const containerStyle = computed<StyleValue>(() => {\n    const wrapKls: CSSProperties =\n      props.wrap || props.fill ? { flexWrap: 'wrap' } : {}\n    const alignment: CSSProperties = {\n      alignItems: props.alignment,\n    }\n    const gap: CSSProperties = {\n      rowGap: pxToRem(verticalSize.value),\n      columnGap: pxToRem(horizontalSize.value),\n    }\n    return [wrapKls, alignment, gap, props.style]\n  })\n\n  const itemStyle = computed<StyleValue>(() => {\n    return props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {}\n  })\n\n  watchEffect(() => {\n    const { size = 'small', wrap, direction: dir, fill } = props\n\n    // when the specified size have been given\n    if (isArray(size)) {\n      const [h = 0, v = 0] = size\n      horizontalSize.value = h\n      verticalSize.value = v\n    } else {\n      let val: number\n      if (isNumber(size)) {\n        val = size\n      } else {\n        val = SIZE_MAP[size || 'small'] || SIZE_MAP.small\n      }\n\n      if ((wrap || fill) && dir === 'horizontal') {\n        horizontalSize.value = verticalSize.value = val\n      } else {\n        if (dir === 'horizontal') {\n          horizontalSize.value = val\n          verticalSize.value = 0\n        } else {\n          verticalSize.value = val\n          horizontalSize.value = 0\n        }\n      }\n    }\n  })\n\n  return {\n    classes,\n    containerStyle,\n    itemStyle,\n  }\n}\n"],"mappings":";;;;;;;;;AAOA,MAAM,WAAW;CACf,OAAO;CACP,SAAS;CACT,OAAO;CACR;AAED,SAAgB,SAAS,OAAmB;CAC1C,MAAM,KAAKA,2BAAa,QAAQ;CAEhC,MAAM,kCAAyB;EAAC,GAAG,GAAG;EAAE,GAAG,EAAE,MAAM,UAAU;EAAE,MAAM;EAAM,CAAC;CAE5E,MAAM,8BAAqB,EAAE;CAC7B,MAAM,4BAAmB,EAAE;CAE3B,MAAM,yCAA4C;AAUhD,SAAO;GARL,MAAM,QAAQ,MAAM,OAAO,EAAE,UAAU,QAAQ,GAAG,EAAE;GACrB,EAC/B,YAAY,MAAM,WACnB;GAC0B;IACzB,QAAQC,sBAAQ,aAAa,MAAM;IACnC,WAAWA,sBAAQ,eAAe,MAAM;IACzC;GACgC,MAAM;GAAM;GAC7C;CAEF,MAAM,oCAAuC;AAC3C,SAAO,MAAM,OAAO;GAAE,UAAU;GAAG,UAAU,GAAG,MAAM,UAAU;GAAI,GAAG,EAAE;GACzE;AAEF,4BAAkB;EAChB,MAAM,EAAE,OAAO,SAAS,MAAM,WAAW,KAAK,SAAS;AAGvD,+BAAY,KAAK,EAAE;GACjB,MAAM,CAAC,IAAI,GAAG,IAAI,KAAK;AACvB,kBAAe,QAAQ;AACvB,gBAAa,QAAQ;SAChB;GACL,IAAI;AACJ,OAAIC,uBAAS,KAAK,CAChB,OAAM;OAEN,OAAM,SAAS,QAAQ,YAAY,SAAS;AAG9C,QAAK,QAAQ,SAAS,QAAQ,aAC5B,gBAAe,QAAQ,aAAa,QAAQ;YAExC,QAAQ,cAAc;AACxB,mBAAe,QAAQ;AACvB,iBAAa,QAAQ;UAChB;AACL,iBAAa,QAAQ;AACrB,mBAAe,QAAQ;;;GAI7B;AAEF,QAAO;EACL;EACA;EACA;EACD"}
+{"version":3,"file":"use-space.js","names":["useNamespace","pxToRem","isNumber"],"sources":["../../../../../../packages/components/space/src/use-space.ts"],"sourcesContent":["import { computed, ref, watchEffect } from 'vue'\nimport { isArray, isNumber, pxToRem } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { SpaceProps } from './space'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst SIZE_MAP = {\n  small: 12,\n  default: 16,\n  large: 20,\n} as const\n\nexport function useSpace(props: SpaceProps) {\n  const ns = useNamespace('space')\n\n  const classes = computed(() => [ns.b(), ns.m(props.direction), props.class])\n  const resolvedAlignment = computed(\n    () =>\n      props.alignment ?? (props.direction === 'vertical' ? 'stretch' : 'center')\n  )\n\n  const horizontalSize = ref(0)\n  const verticalSize = ref(0)\n\n  const containerStyle = computed<StyleValue>(() => {\n    const wrapKls: CSSProperties =\n      props.direction === 'horizontal' && (props.wrap || props.fill)\n        ? { flexWrap: 'wrap' }\n        : {}\n    const alignment: CSSProperties = {\n      alignItems: resolvedAlignment.value,\n    }\n    const gap: CSSProperties = {\n      rowGap: pxToRem(verticalSize.value),\n      columnGap: pxToRem(horizontalSize.value),\n    }\n    return [wrapKls, alignment, gap, props.style]\n  })\n\n  const itemStyle = computed<StyleValue>(() => {\n    if (!props.fill) return {}\n    if (props.direction === 'horizontal') {\n      return {\n        flexGrow: 1,\n        minWidth: `${props.fillRatio}%`,\n      }\n    }\n\n    return {\n      width: '100%',\n    }\n  })\n\n  watchEffect(() => {\n    const { size = 'small', wrap, direction: dir, fill } = props\n\n    // when the specified size have been given\n    if (isArray(size)) {\n      const [h = 0, v = 0] = size\n      horizontalSize.value = h\n      verticalSize.value = v\n    } else {\n      let val: number\n      if (isNumber(size)) {\n        val = size\n      } else {\n        val = SIZE_MAP[size || 'small'] || SIZE_MAP.small\n      }\n\n      if ((wrap || fill) && dir === 'horizontal') {\n        horizontalSize.value = verticalSize.value = val\n      } else {\n        if (dir === 'horizontal') {\n          horizontalSize.value = val\n          verticalSize.value = 0\n        } else {\n          verticalSize.value = val\n          horizontalSize.value = 0\n        }\n      }\n    }\n  })\n\n  return {\n    classes,\n    containerStyle,\n    itemStyle,\n  }\n}\n"],"mappings":";;;;;;;;;AAOA,MAAM,WAAW;CACf,OAAO;CACP,SAAS;CACT,OAAO;CACR;AAED,SAAgB,SAAS,OAAmB;CAC1C,MAAM,KAAKA,2BAAa,QAAQ;CAEhC,MAAM,kCAAyB;EAAC,GAAG,GAAG;EAAE,GAAG,EAAE,MAAM,UAAU;EAAE,MAAM;EAAM,CAAC;CAC5E,MAAM,4CAEF,MAAM,cAAc,MAAM,cAAc,aAAa,YAAY,UACpE;CAED,MAAM,8BAAqB,EAAE;CAC7B,MAAM,4BAAmB,EAAE;CAE3B,MAAM,yCAA4C;AAYhD,SAAO;GAVL,MAAM,cAAc,iBAAiB,MAAM,QAAQ,MAAM,QACrD,EAAE,UAAU,QAAQ,GACpB,EAAE;GACyB,EAC/B,YAAY,kBAAkB,OAC/B;GAC0B;IACzB,QAAQC,sBAAQ,aAAa,MAAM;IACnC,WAAWA,sBAAQ,eAAe,MAAM;IACzC;GACgC,MAAM;GAAM;GAC7C;CAEF,MAAM,oCAAuC;AAC3C,MAAI,CAAC,MAAM,KAAM,QAAO,EAAE;AAC1B,MAAI,MAAM,cAAc,aACtB,QAAO;GACL,UAAU;GACV,UAAU,GAAG,MAAM,UAAU;GAC9B;AAGH,SAAO,EACL,OAAO,QACR;GACD;AAEF,4BAAkB;EAChB,MAAM,EAAE,OAAO,SAAS,MAAM,WAAW,KAAK,SAAS;AAGvD,+BAAY,KAAK,EAAE;GACjB,MAAM,CAAC,IAAI,GAAG,IAAI,KAAK;AACvB,kBAAe,QAAQ;AACvB,gBAAa,QAAQ;SAChB;GACL,IAAI;AACJ,OAAIC,uBAAS,KAAK,CAChB,OAAM;OAEN,OAAM,SAAS,QAAQ,YAAY,SAAS;AAG9C,QAAK,QAAQ,SAAS,QAAQ,aAC5B,gBAAe,QAAQ,aAAa,QAAQ;YAExC,QAAQ,cAAc;AACxB,mBAAe,QAAQ;AACvB,iBAAa,QAAQ;UAChB;AACL,iBAAa,QAAQ;AACrB,mBAAe,QAAQ;;;GAI7B;AAEF,QAAO;EACL;EACA;EACA;EACD"}

package/lib/components/splitter/src/split-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-bar.js","names":[],"sources":["../../../../../../packages/components/splitter/src/split-bar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  pxToRem,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\n\nconst ns = useNamespace('splitter-bar')\n\ndefineOptions({\n  name: 'ElSplitterBar',\n})\n\nconst props = defineProps({\n  index: {\n    type: Number,\n    required: true,\n  },\n  layout: {\n    type: String,\n    values: ['horizontal', 'vertical'] as const,\n    default: 'horizontal',\n  },\n  resizable: {\n    type: Boolean,\n    default: true,\n  },\n  lazy: Boolean,\n  startCollapsible: Boolean,\n  endCollapsible: Boolean,\n})\n\nconst emit = defineEmits(['moveStart', 'moving', 'moveEnd', 'collapse'])\n\nconst isHorizontal = computed(() => props.layout === 'horizontal')\n\nconst barWrapStyles = computed(() => {\n  if (isHorizontal.value) {\n    return { width: 0 }\n  }\n  return { height: 0 }\n})\n\nconst draggerStyles = computed(() => {\n  return {\n    width: isHorizontal.value ? pxToRem(24) : '100%',\n    height: isHorizontal.value ? '100%' : pxToRem(24),\n    cursor: !props.resizable\n      ? 'auto'\n      : isHorizontal.value\n        ? 'ew-resize'\n        : 'ns-resize',\n    touchAction: 'none',\n  }\n})\n\nconst draggerPseudoClass = computed(() => {\n  const prefix = ns.e('dragger')\n  return {\n    [`${prefix}-horizontal`]: isHorizontal.value,\n    [`${prefix}-vertical`]: !isHorizontal.value,\n    [`${prefix}-active`]: !!startPos.value,\n  }\n})\n\nconst startPos = ref<[x: number, y: number] | null>(null)\n\n// Start dragging\nconst onMousedown = (e: MouseEvent) => {\n  if (!props.resizable) return\n  startPos.value = [e.pageX, e.pageY]\n  emit('moveStart', props.index)\n  window.addEventListener('mouseup', onMouseUp)\n  window.addEventListener('mousemove', onMouseMove)\n}\n\nconst onTouchStart = (e: TouchEvent) => {\n  if (props.resizable && e.touches.length === 1) {\n    e.preventDefault()\n    const touch = e.touches[0]\n    startPos.value = [touch.pageX, touch.pageY]\n    emit('moveStart', props.index)\n    window.addEventListener('touchend', onTouchEnd)\n    window.addEventListener('touchmove', onTouchMove)\n  }\n}\n\n// During dragging\nconst onMouseMove = (e: MouseEvent) => {\n  const { pageX, pageY } = e\n  const offsetX = pageX - startPos.value![0]\n  const offsetY = pageY - startPos.value![1]\n  const offset = isHorizontal.value ? offsetX : offsetY\n  emit('moving', props.index, offset)\n}\n\nconst onTouchMove = (e: TouchEvent) => {\n  if (e.touches.length === 1) {\n    e.preventDefault()\n    const touch = e.touches[0]\n    const offsetX = touch.pageX - startPos.value![0]\n    const offsetY = touch.pageY - startPos.value![1]\n    const offset = isHorizontal.value ? offsetX : offsetY\n    emit('moving', props.index, offset)\n  }\n}\n\n// End dragging\nconst onMouseUp = () => {\n  startPos.value = null\n  window.removeEventListener('mouseup', onMouseUp)\n  window.removeEventListener('mousemove', onMouseMove)\n  emit('moveEnd', props.index)\n}\n\nconst onTouchEnd = () => {\n  startPos.value = null\n  window.removeEventListener('touchend', onTouchEnd)\n  window.removeEventListener('touchmove', onTouchMove)\n  emit('moveEnd', props.index)\n}\n\nconst StartIcon = computed(() => (isHorizontal.value ? ArrowLeft : ArrowUp))\nconst EndIcon = computed(() => (isHorizontal.value ? ArrowRight : ArrowDown))\n</script>\n\n<template>\n  <div :class=\"[ns.b()]\" :style=\"barWrapStyles\">\n    <div\n      v-if=\"startCollapsible\"\n      :class=\"[ns.e('collapse-icon'), ns.e(`${layout}-collapse-icon-start`)]\"\n      @click=\"emit('collapse', index, 'start')\"\n    >\n      <slot name=\"start-collapsible\">\n        <component\n          :is=\"StartIcon\"\n          :style=\"{ width: pxToRem(14), height: pxToRem(14) }\"\n        />\n      </slot>\n    </div>\n\n    <div\n      :class=\"[\n        ns.e('dragger'),\n        draggerPseudoClass,\n        ns.is('disabled', !resizable),\n        ns.is('lazy', resizable && lazy),\n      ]\"\n      :style=\"draggerStyles\"\n      @mousedown=\"onMousedown\"\n      @touchstart=\"onTouchStart\"\n    />\n    <div\n      v-if=\"endCollapsible\"\n      :class=\"[ns.e('collapse-icon'), ns.e(`${layout}-collapse-icon-end`)]\"\n      @click=\"emit('collapse', index, 'end')\"\n    >\n      <slot name=\"end-collapsible\">\n        <component\n          :is=\"EndIcon\"\n          :style=\"{ width: pxToRem(14), height: pxToRem(14) }\"\n        />\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"split-bar.js","names":[],"sources":["../../../../../../packages/components/splitter/src/split-bar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref } from 'vue'\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  pxToRem,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\n\nconst ns = useNamespace('splitter-bar')\n\ndefineOptions({\n  name: 'ElSplitterBar',\n})\n\nconst props = defineProps({\n  index: {\n    type: Number,\n    required: true,\n  },\n  layout: {\n    type: String,\n    values: ['horizontal', 'vertical'] as const,\n    default: 'vertical',\n  },\n  resizable: {\n    type: Boolean,\n    default: true,\n  },\n  lazy: Boolean,\n  startCollapsible: Boolean,\n  endCollapsible: Boolean,\n})\n\nconst emit = defineEmits(['moveStart', 'moving', 'moveEnd', 'collapse'])\n\nconst isHorizontal = computed(() => props.layout === 'horizontal')\n\nconst barWrapStyles = computed(() => {\n  if (isHorizontal.value) {\n    return { width: 0 }\n  }\n  return { height: 0 }\n})\n\nconst draggerStyles = computed(() => {\n  return {\n    width: isHorizontal.value ? pxToRem(28) : '100%',\n    height: isHorizontal.value ? '100%' : pxToRem(28),\n    touchAction: 'none',\n  }\n})\n\nconst draggerPseudoClass = computed(() => {\n  const prefix = ns.e('dragger')\n  return {\n    [`${prefix}-horizontal`]: isHorizontal.value,\n    [`${prefix}-vertical`]: !isHorizontal.value,\n    [`${prefix}-active`]: !!startPos.value,\n  }\n})\n\nconst startPos = ref<[x: number, y: number] | null>(null)\nconst activePointerId = ref<number | null>(null)\n\nconst cleanupPointerListeners = () => {\n  window.removeEventListener('pointermove', onPointerMove)\n  window.removeEventListener('pointerup', onPointerUp)\n  window.removeEventListener('pointercancel', onPointerUp)\n}\n\nconst onPointerDown = (e: PointerEvent) => {\n  if (!props.resizable) return\n  if (e.pointerType === 'mouse' && (e.ctrlKey || [1, 2].includes(e.button)))\n    return\n\n  e.preventDefault()\n  startPos.value = [e.pageX, e.pageY]\n  activePointerId.value = e.pointerId\n  ;(e.currentTarget as HTMLElement | null)?.setPointerCapture?.(e.pointerId)\n  emit('moveStart', props.index)\n  window.addEventListener('pointermove', onPointerMove)\n  window.addEventListener('pointerup', onPointerUp)\n  window.addEventListener('pointercancel', onPointerUp)\n}\n\nconst onPointerMove = (e: PointerEvent) => {\n  if (activePointerId.value !== null && e.pointerId !== activePointerId.value)\n    return\n  if (!startPos.value) return\n\n  const { pageX, pageY } = e\n  const offsetX = pageX - startPos.value![0]\n  const offsetY = pageY - startPos.value![1]\n  const offset = isHorizontal.value ? offsetX : offsetY\n  emit('moving', props.index, offset)\n}\n\nconst onPointerUp = (e?: PointerEvent) => {\n  if (\n    e &&\n    activePointerId.value !== null &&\n    e.pointerId !== activePointerId.value\n  )\n    return\n\n  startPos.value = null\n  activePointerId.value = null\n  cleanupPointerListeners()\n  emit('moveEnd', props.index)\n}\n\nconst StartIcon = computed(() => (isHorizontal.value ? ArrowLeft : ArrowUp))\nconst EndIcon = computed(() => (isHorizontal.value ? ArrowRight : ArrowDown))\n\nonBeforeUnmount(() => {\n  cleanupPointerListeners()\n})\n</script>\n\n<template>\n  <div :class=\"[ns.b()]\" :style=\"barWrapStyles\">\n    <div\n      :class=\"[\n        ns.e('dragger'),\n        draggerPseudoClass,\n        ns.is('disabled', !resizable),\n        ns.is('lazy', resizable && lazy),\n      ]\"\n      :style=\"draggerStyles\"\n      @pointerdown=\"onPointerDown\"\n    >\n      <button\n        v-if=\"startCollapsible\"\n        type=\"button\"\n        :class=\"[ns.e('collapse-icon'), ns.is('start')]\"\n        @pointerdown.stop.prevent\n        @click.stop=\"emit('collapse', index, 'start')\"\n      >\n        <slot name=\"start-collapsible\">\n          <component\n            :is=\"StartIcon\"\n            :style=\"{ width: pxToRem(14), height: pxToRem(14) }\"\n          />\n        </slot>\n      </button>\n\n      <span :class=\"[ns.e('handle'), ns.e(`handle-${layout}`)]\" />\n\n      <button\n        v-if=\"endCollapsible\"\n        type=\"button\"\n        :class=\"[ns.e('collapse-icon'), ns.is('end')]\"\n        @pointerdown.stop.prevent\n        @click.stop=\"emit('collapse', index, 'end')\"\n      >\n        <slot name=\"end-collapsible\">\n          <component\n            :is=\"EndIcon\"\n            :style=\"{ width: pxToRem(14), height: pxToRem(14) }\"\n          />\n        </slot>\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/lib/components/splitter/src/split-bar.vue_vue_type_script_setup_true_lang.js

@@ -16,7 +16,7 @@ var split_bar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 		layout: {
 			type: String,
 			values: ["horizontal", "vertical"],
-			default: "horizontal"
+			default: "vertical"
 		},
 		resizable: {
 			type: Boolean,
@@ -43,9 +43,8 @@ var split_bar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 		});
 		const draggerStyles = (0, vue.computed)(() => {
 			return {
-				width: isHorizontal.value ? require_style.pxToRem(24) : "100%",
-				height: isHorizontal.value ? "100%" : require_style.pxToRem(24),
-				cursor: !props.resizable ? "auto" : isHorizontal.value ? "ew-resize" : "ns-resize",
+				width: isHorizontal.value ? require_style.pxToRem(28) : "100%",
+				height: isHorizontal.value ? "100%" : require_style.pxToRem(28),
 				touchAction: "none"
 			};
 		});
@@ -58,87 +57,81 @@ var split_bar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 			};
 		});
 		const startPos = (0, vue.ref)(null);
-		const onMousedown = (e) => {
+		const activePointerId = (0, vue.ref)(null);
+		const cleanupPointerListeners = () => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+			window.removeEventListener("pointercancel", onPointerUp);
+		};
+		const onPointerDown = (e) => {
 			if (!props.resizable) return;
+			if (e.pointerType === "mouse" && (e.ctrlKey || [1, 2].includes(e.button))) return;
+			e.preventDefault();
 			startPos.value = [e.pageX, e.pageY];
+			activePointerId.value = e.pointerId;
+			e.currentTarget?.setPointerCapture?.(e.pointerId);
 			emit("moveStart", props.index);
-			window.addEventListener("mouseup", onMouseUp);
-			window.addEventListener("mousemove", onMouseMove);
-		};
-		const onTouchStart = (e) => {
-			if (props.resizable && e.touches.length === 1) {
-				e.preventDefault();
-				const touch = e.touches[0];
-				startPos.value = [touch.pageX, touch.pageY];
-				emit("moveStart", props.index);
-				window.addEventListener("touchend", onTouchEnd);
-				window.addEventListener("touchmove", onTouchMove);
-			}
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", onPointerUp);
+			window.addEventListener("pointercancel", onPointerUp);
 		};
-		const onMouseMove = (e) => {
+		const onPointerMove = (e) => {
+			if (activePointerId.value !== null && e.pointerId !== activePointerId.value) return;
+			if (!startPos.value) return;
 			const { pageX, pageY } = e;
 			const offsetX = pageX - startPos.value[0];
 			const offsetY = pageY - startPos.value[1];
 			const offset = isHorizontal.value ? offsetX : offsetY;
 			emit("moving", props.index, offset);
 		};
-		const onTouchMove = (e) => {
-			if (e.touches.length === 1) {
-				e.preventDefault();
-				const touch = e.touches[0];
-				const offsetX = touch.pageX - startPos.value[0];
-				const offsetY = touch.pageY - startPos.value[1];
-				const offset = isHorizontal.value ? offsetX : offsetY;
-				emit("moving", props.index, offset);
-			}
-		};
-		const onMouseUp = () => {
+		const onPointerUp = (e) => {
+			if (e && activePointerId.value !== null && e.pointerId !== activePointerId.value) return;
 			startPos.value = null;
-			window.removeEventListener("mouseup", onMouseUp);
-			window.removeEventListener("mousemove", onMouseMove);
-			emit("moveEnd", props.index);
-		};
-		const onTouchEnd = () => {
-			startPos.value = null;
-			window.removeEventListener("touchend", onTouchEnd);
-			window.removeEventListener("touchmove", onTouchMove);
+			activePointerId.value = null;
+			cleanupPointerListeners();
 			emit("moveEnd", props.index);
 		};
 		const StartIcon = (0, vue.computed)(() => isHorizontal.value ? require_builtin_icons.ArrowLeft : require_builtin_icons.ArrowUp);
 		const EndIcon = (0, vue.computed)(() => isHorizontal.value ? require_builtin_icons.ArrowRight : require_builtin_icons.ArrowDown);
+		(0, vue.onBeforeUnmount)(() => {
+			cleanupPointerListeners();
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				class: (0, vue.normalizeClass)([(0, vue.unref)(ns).b()]),
 				style: (0, vue.normalizeStyle)(barWrapStyles.value)
+			}, [(0, vue.createElementVNode)("div", {
+				class: (0, vue.normalizeClass)([
+					(0, vue.unref)(ns).e("dragger"),
+					draggerPseudoClass.value,
+					(0, vue.unref)(ns).is("disabled", !__props.resizable),
+					(0, vue.unref)(ns).is("lazy", __props.resizable && __props.lazy)
+				]),
+				style: (0, vue.normalizeStyle)(draggerStyles.value),
+				onPointerdown: onPointerDown
 			}, [
-				__props.startCollapsible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				__props.startCollapsible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 0,
-					class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("collapse-icon"), (0, vue.unref)(ns).e(`${__props.layout}-collapse-icon-start`)]),
-					onClick: _cache[0] || (_cache[0] = ($event) => emit("collapse", __props.index, "start"))
+					type: "button",
+					class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("collapse-icon"), (0, vue.unref)(ns).is("start")]),
+					onPointerdown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["stop", "prevent"])),
+					onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)(($event) => emit("collapse", __props.index, "start"), ["stop"]))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "start-collapsible", {}, () => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(StartIcon.value), { style: (0, vue.normalizeStyle)({
 					width: (0, vue.unref)(require_style.pxToRem)(14),
 					height: (0, vue.unref)(require_style.pxToRem)(14)
-				}) }, null, 8, ["style"]))])], 2)) : (0, vue.createCommentVNode)("v-if", true),
-				(0, vue.createElementVNode)("div", {
-					class: (0, vue.normalizeClass)([
-						(0, vue.unref)(ns).e("dragger"),
-						draggerPseudoClass.value,
-						(0, vue.unref)(ns).is("disabled", !__props.resizable),
-						(0, vue.unref)(ns).is("lazy", __props.resizable && __props.lazy)
-					]),
-					style: (0, vue.normalizeStyle)(draggerStyles.value),
-					onMousedown,
-					onTouchstart: onTouchStart
-				}, null, 38),
-				__props.endCollapsible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				}) }, null, 8, ["style"]))])], 34)) : (0, vue.createCommentVNode)("v-if", true),
+				(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("handle"), (0, vue.unref)(ns).e(`handle-${__props.layout}`)]) }, null, 2),
+				__props.endCollapsible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 1,
-					class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("collapse-icon"), (0, vue.unref)(ns).e(`${__props.layout}-collapse-icon-end`)]),
-					onClick: _cache[1] || (_cache[1] = ($event) => emit("collapse", __props.index, "end"))
+					type: "button",
+					class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("collapse-icon"), (0, vue.unref)(ns).is("end")]),
+					onPointerdown: _cache[2] || (_cache[2] = (0, vue.withModifiers)(() => {}, ["stop", "prevent"])),
+					onClick: _cache[3] || (_cache[3] = (0, vue.withModifiers)(($event) => emit("collapse", __props.index, "end"), ["stop"]))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "end-collapsible", {}, () => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(EndIcon.value), { style: (0, vue.normalizeStyle)({
 					width: (0, vue.unref)(require_style.pxToRem)(14),
 					height: (0, vue.unref)(require_style.pxToRem)(14)
-				}) }, null, 8, ["style"]))])], 2)) : (0, vue.createCommentVNode)("v-if", true)
-			], 6);
+				}) }, null, 8, ["style"]))])], 34)) : (0, vue.createCommentVNode)("v-if", true)
+			], 38)], 6);
 		};
 	}
 });

package/lib/components/splitter/src/split-bar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-bar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/splitter/src/split-bar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  pxToRem,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\n\nconst ns = useNamespace('splitter-bar')\n\ndefineOptions({\n  name: 'ElSplitterBar',\n})\n\nconst props = defineProps({\n  index: {\n    type: Number,\n    required: true,\n  },\n  layout: {\n    type: String,\n    values: ['horizontal', 'vertical'] as const,\n    default: 'horizontal',\n  },\n  resizable: {\n    type: Boolean,\n    default: true,\n  },\n  lazy: Boolean,\n  startCollapsible: Boolean,\n  endCollapsible: Boolean,\n})\n\nconst emit = defineEmits(['moveStart', 'moving', 'moveEnd', 'collapse'])\n\nconst isHorizontal = computed(() => props.layout === 'horizontal')\n\nconst barWrapStyles = computed(() => {\n  if (isHorizontal.value) {\n    return { width: 0 }\n  }\n  return { height: 0 }\n})\n\nconst draggerStyles = computed(() => {\n  return {\n    width: isHorizontal.value ? pxToRem(24) : '100%',\n    height: isHorizontal.value ? '100%' : pxToRem(24),\n    cursor: !props.resizable\n      ? 'auto'\n      : isHorizontal.value\n        ? 'ew-resize'\n        : 'ns-resize',\n    touchAction: 'none',\n  }\n})\n\nconst draggerPseudoClass = computed(() => {\n  const prefix = ns.e('dragger')\n  return {\n    [`${prefix}-horizontal`]: isHorizontal.value,\n    [`${prefix}-vertical`]: !isHorizontal.value,\n    [`${prefix}-active`]: !!startPos.value,\n  }\n})\n\nconst startPos = ref<[x: number, y: number] | null>(null)\n\n// Start dragging\nconst onMousedown = (e: MouseEvent) => {\n  if (!props.resizable) return\n  startPos.value = [e.pageX, e.pageY]\n  emit('moveStart', props.index)\n  window.addEventListener('mouseup', onMouseUp)\n  window.addEventListener('mousemove', onMouseMove)\n}\n\nconst onTouchStart = (e: TouchEvent) => {\n  if (props.resizable && e.touches.length === 1) {\n    e.preventDefault()\n    const touch = e.touches[0]\n    startPos.value = [touch.pageX, touch.pageY]\n    emit('moveStart', props.index)\n    window.addEventListener('touchend', onTouchEnd)\n    window.addEventListener('touchmove', onTouchMove)\n  }\n}\n\n// During dragging\nconst onMouseMove = (e: MouseEvent) => {\n  const { pageX, pageY } = e\n  const offsetX = pageX - startPos.value![0]\n  const offsetY = pageY - startPos.value![1]\n  const offset = isHorizontal.value ? offsetX : offsetY\n  emit('moving', props.index, offset)\n}\n\nconst onTouchMove = (e: TouchEvent) => {\n  if (e.touches.length === 1) {\n    e.preventDefault()\n    const touch = e.touches[0]\n    const offsetX = touch.pageX - startPos.value![0]\n    const offsetY = touch.pageY - startPos.value![1]\n    const offset = isHorizontal.value ? offsetX : offsetY\n    emit('moving', props.index, offset)\n  }\n}\n\n// End dragging\nconst onMouseUp = () => {\n  startPos.value = null\n  window.removeEventListener('mouseup', onMouseUp)\n  window.removeEventListener('mousemove', onMouseMove)\n  emit('moveEnd', props.index)\n}\n\nconst onTouchEnd = () => {\n  startPos.value = null\n  window.removeEventListener('touchend', onTouchEnd)\n  window.removeEventListener('touchmove', onTouchMove)\n  emit('moveEnd', props.index)\n}\n\nconst StartIcon = computed(() => (isHorizontal.value ? ArrowLeft : ArrowUp))\nconst EndIcon = computed(() => (isHorizontal.value ? ArrowRight : ArrowDown))\n</script>\n\n<template>\n  <div :class=\"[ns.b()]\" :style=\"barWrapStyles\">\n    <div\n      v-if=\"startCollapsible\"\n      :class=\"[ns.e('collapse-icon'), ns.e(`${layout}-collapse-icon-start`)]\"\n      @click=\"emit('collapse', index, 'start')\"\n    >\n      <slot name=\"start-collapsible\">\n        <component\n          :is=\"StartIcon\"\n          :style=\"{ width: pxToRem(14), height: pxToRem(14) }\"\n        />\n      </slot>\n    </div>\n\n    <div\n      :class=\"[\n        ns.e('dragger'),\n        draggerPseudoClass,\n        ns.is('disabled', !resizable),\n        ns.is('lazy', resizable && lazy),\n      ]\"\n      :style=\"draggerStyles\"\n      @mousedown=\"onMousedown\"\n      @touchstart=\"onTouchStart\"\n    />\n    <div\n      v-if=\"endCollapsible\"\n      :class=\"[ns.e('collapse-icon'), ns.e(`${layout}-collapse-icon-end`)]\"\n      @click=\"emit('collapse', index, 'end')\"\n    >\n      <slot name=\"end-collapsible\">\n        <component\n          :is=\"EndIcon\"\n          :style=\"{ width: pxToRem(14), height: pxToRem(14) }\"\n        />\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"split-bar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/splitter/src/split-bar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref } from 'vue'\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  pxToRem,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\n\nconst ns = useNamespace('splitter-bar')\n\ndefineOptions({\n  name: 'ElSplitterBar',\n})\n\nconst props = defineProps({\n  index: {\n    type: Number,\n    required: true,\n  },\n  layout: {\n    type: String,\n    values: ['horizontal', 'vertical'] as const,\n    default: 'vertical',\n  },\n  resizable: {\n    type: Boolean,\n    default: true,\n  },\n  lazy: Boolean,\n  startCollapsible: Boolean,\n  endCollapsible: Boolean,\n})\n\nconst emit = defineEmits(['moveStart', 'moving', 'moveEnd', 'collapse'])\n\nconst isHorizontal = computed(() => props.layout === 'horizontal')\n\nconst barWrapStyles = computed(() => {\n  if (isHorizontal.value) {\n    return { width: 0 }\n  }\n  return { height: 0 }\n})\n\nconst draggerStyles = computed(() => {\n  return {\n    width: isHorizontal.value ? pxToRem(28) : '100%',\n    height: isHorizontal.value ? '100%' : pxToRem(28),\n    touchAction: 'none',\n  }\n})\n\nconst draggerPseudoClass = computed(() => {\n  const prefix = ns.e('dragger')\n  return {\n    [`${prefix}-horizontal`]: isHorizontal.value,\n    [`${prefix}-vertical`]: !isHorizontal.value,\n    [`${prefix}-active`]: !!startPos.value,\n  }\n})\n\nconst startPos = ref<[x: number, y: number] | null>(null)\nconst activePointerId = ref<number | null>(null)\n\nconst cleanupPointerListeners = () => {\n  window.removeEventListener('pointermove', onPointerMove)\n  window.removeEventListener('pointerup', onPointerUp)\n  window.removeEventListener('pointercancel', onPointerUp)\n}\n\nconst onPointerDown = (e: PointerEvent) => {\n  if (!props.resizable) return\n  if (e.pointerType === 'mouse' && (e.ctrlKey || [1, 2].includes(e.button)))\n    return\n\n  e.preventDefault()\n  startPos.value = [e.pageX, e.pageY]\n  activePointerId.value = e.pointerId\n  ;(e.currentTarget as HTMLElement | null)?.setPointerCapture?.(e.pointerId)\n  emit('moveStart', props.index)\n  window.addEventListener('pointermove', onPointerMove)\n  window.addEventListener('pointerup', onPointerUp)\n  window.addEventListener('pointercancel', onPointerUp)\n}\n\nconst onPointerMove = (e: PointerEvent) => {\n  if (activePointerId.value !== null && e.pointerId !== activePointerId.value)\n    return\n  if (!startPos.value) return\n\n  const { pageX, pageY } = e\n  const offsetX = pageX - startPos.value![0]\n  const offsetY = pageY - startPos.value![1]\n  const offset = isHorizontal.value ? offsetX : offsetY\n  emit('moving', props.index, offset)\n}\n\nconst onPointerUp = (e?: PointerEvent) => {\n  if (\n    e &&\n    activePointerId.value !== null &&\n    e.pointerId !== activePointerId.value\n  )\n    return\n\n  startPos.value = null\n  activePointerId.value = null\n  cleanupPointerListeners()\n  emit('moveEnd', props.index)\n}\n\nconst StartIcon = computed(() => (isHorizontal.value ? ArrowLeft : ArrowUp))\nconst EndIcon = computed(() => (isHorizontal.value ? ArrowRight : ArrowDown))\n\nonBeforeUnmount(() => {\n  cleanupPointerListeners()\n})\n</script>\n\n<template>\n  <div :class=\"[ns.b()]\" :style=\"barWrapStyles\">\n    <div\n      :class=\"[\n        ns.e('dragger'),\n        draggerPseudoClass,\n        ns.is('disabled', !resizable),\n        ns.is('lazy', resizable && lazy),\n      ]\"\n      :style=\"draggerStyles\"\n      @pointerdown=\"onPointerDown\"\n    >\n      <button\n        v-if=\"startCollapsible\"\n        type=\"button\"\n        :class=\"[ns.e('collapse-icon'), ns.is('start')]\"\n        @pointerdown.stop.prevent\n        @click.stop=\"emit('collapse', index, 'start')\"\n      >\n        <slot name=\"start-collapsible\">\n          <component\n            :is=\"StartIcon\"\n            :style=\"{ width: pxToRem(14), height: pxToRem(14) }\"\n          />\n        </slot>\n      </button>\n\n      <span :class=\"[ns.e('handle'), ns.e(`handle-${layout}`)]\" />\n\n      <button\n        v-if=\"endCollapsible\"\n        type=\"button\"\n        :class=\"[ns.e('collapse-icon'), ns.is('end')]\"\n        @pointerdown.stop.prevent\n        @click.stop=\"emit('collapse', index, 'end')\"\n      >\n        <slot name=\"end-collapsible\">\n          <component\n            :is=\"EndIcon\"\n            :style=\"{ width: pxToRem(14), height: pxToRem(14) }\"\n          />\n        </slot>\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/lib/components/splitter/src/splitter.d.ts

@@ -13,7 +13,7 @@ interface SplitterProps {
  * @deprecated Removed after 3.0.0, Use `SplitterProps` instead.
  */
 declare const splitterProps: {
-  readonly layout: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
+  readonly layout: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
   readonly lazy: BooleanConstructor;
 };
 /**

package/lib/components/splitter/src/splitter.js

@@ -8,7 +8,7 @@ const require_runtime = require('../../../utils/vue/props/runtime.js');
 const splitterProps = require_runtime.buildProps({
 	layout: {
 		type: String,
-		default: "horizontal",
+		default: "vertical",
 		values: ["horizontal", "vertical"]
 	},
 	lazy: Boolean

package/lib/components/splitter/src/splitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter.js","names":["buildProps"],"sources":["../../../../../../packages/components/splitter/src/splitter.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type Splitter from './splitter.vue'\nimport type { Layout } from './type'\n\nexport interface SplitterProps {\n  layout?: Layout\n  lazy?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `SplitterProps` instead.\n */\nexport const splitterProps = buildProps({\n  layout: {\n    type: String,\n    default: 'horizontal',\n    values: ['horizontal', 'vertical'] as const,\n  },\n  lazy: Boolean,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `SplitterProps` instead.\n */\nexport type SplitterPropsPublic = ExtractPublicPropTypes<typeof splitterProps>\nexport type SplitterInstance = InstanceType<typeof Splitter> & unknown\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\nexport const splitterEmits = {\n  resizeStart: (index: number, sizes: number[]) => true,\n  resize: (index: number, sizes: number[]) => true,\n  resizeEnd: (index: number, sizes: number[]) => true,\n  collapse: (index: number, type: 'start' | 'end', sizes: number[]) => true,\n}\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\nexport type SplitterEmits = typeof splitterEmits\n"],"mappings":";;;;;;;AAcA,MAAa,gBAAgBA,2BAAW;CACtC,QAAQ;EACN,MAAM;EACN,SAAS;EACT,QAAQ,CAAC,cAAc,WAAW;EACnC;CACD,MAAM;CACP,CAAU;AASX,MAAa,gBAAgB;CAC3B,cAAc,OAAe,UAAoB;CACjD,SAAS,OAAe,UAAoB;CAC5C,YAAY,OAAe,UAAoB;CAC/C,WAAW,OAAe,MAAuB,UAAoB;CACtE"}
+{"version":3,"file":"splitter.js","names":["buildProps"],"sources":["../../../../../../packages/components/splitter/src/splitter.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type Splitter from './splitter.vue'\nimport type { Layout } from './type'\n\nexport interface SplitterProps {\n  layout?: Layout\n  lazy?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `SplitterProps` instead.\n */\nexport const splitterProps = buildProps({\n  layout: {\n    type: String,\n    default: 'vertical',\n    values: ['horizontal', 'vertical'] as const,\n  },\n  lazy: Boolean,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `SplitterProps` instead.\n */\nexport type SplitterPropsPublic = ExtractPublicPropTypes<typeof splitterProps>\nexport type SplitterInstance = InstanceType<typeof Splitter> & unknown\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\nexport const splitterEmits = {\n  resizeStart: (index: number, sizes: number[]) => true,\n  resize: (index: number, sizes: number[]) => true,\n  resizeEnd: (index: number, sizes: number[]) => true,\n  collapse: (index: number, type: 'start' | 'end', sizes: number[]) => true,\n}\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\nexport type SplitterEmits = typeof splitterEmits\n"],"mappings":";;;;;;;AAcA,MAAa,gBAAgBA,2BAAW;CACtC,QAAQ;EACN,MAAM;EACN,SAAS;EACT,QAAQ,CAAC,cAAc,WAAW;EACnC;CACD,MAAM;CACP,CAAU;AASX,MAAa,gBAAgB;CAC3B,cAAc,OAAe,UAAoB;CACjD,SAAS,OAAe,UAAoB;CAC5C,YAAY,OAAe,UAAoB;CAC/C,WAAW,OAAe,MAAuB,UAAoB;CACtE"}

package/lib/components/splitter/src/splitter.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/splitter/src/splitter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  provide,\n  reactive,\n  toRef,\n  watch,\n} from 'vue'\nimport { useNamespace, useOrderedChildren } from '@element-plus/hooks'\nimport { useContainer, useResize, useSize } from './hooks'\nimport { splitterEmits } from './splitter'\nimport { splitterRootContextKey } from './type'\n\nimport type { PanelItemState } from './type'\nimport type { SplitterProps } from './splitter'\n\nconst ns = useNamespace('splitter')\n\ndefineOptions({\n  name: 'ElSplitter',\n})\n\nconst emits = defineEmits(splitterEmits)\n\nconst props = withDefaults(defineProps<SplitterProps>(), {\n  layout: 'horizontal',\n})\nconst layout = toRef(props, 'layout')\nconst lazy = toRef(props, 'lazy')\n\nconst { containerEl, containerSize } = useContainer(layout)\n\nconst {\n  removeChild: unregisterPanel,\n  children: panels,\n  addChild: registerPanel,\n  ChildrenSorter: PanelsSorter,\n} = useOrderedChildren<PanelItemState>(getCurrentInstance()!, 'ElSplitterPanel')\n\nwatch(panels, () => {\n  movingIndex.value = null\n  panels.value.forEach((instance: PanelItemState, index: number) => {\n    instance.setIndex(index)\n  })\n})\n\nconst { percentSizes, pxSizes } = useSize(panels, containerSize)\n\nconst {\n  lazyOffset,\n  movingIndex,\n  onMoveStart,\n  onMoving,\n  onMoveEnd,\n  onCollapse,\n} = useResize(panels, containerSize, pxSizes, lazy)\n\nconst splitterStyles = computed(() => {\n  return {\n    [ns.cssVarBlockName('bar-offset')]: lazy.value\n      ? `${lazyOffset.value}px`\n      : undefined,\n  }\n})\n\nconst onResizeStart = (index: number) => {\n  onMoveStart(index)\n  emits('resizeStart', index, pxSizes.value)\n}\n\nconst onResize = (index: number, offset: number) => {\n  onMoving(index, offset)\n\n  if (!lazy.value) {\n    emits('resize', index, pxSizes.value)\n  }\n}\n\nconst onResizeEnd = async (index: number) => {\n  onMoveEnd()\n  await nextTick()\n  emits('resizeEnd', index, pxSizes.value)\n}\n\nconst onCollapsible = (index: number, type: 'start' | 'end') => {\n  onCollapse(index, type)\n  emits('collapse', index, type, pxSizes.value)\n}\n\nprovide(\n  splitterRootContextKey,\n  reactive({\n    panels,\n    percentSizes,\n    pxSizes,\n    layout,\n    lazy,\n    movingIndex,\n    containerSize,\n    onMoveStart: onResizeStart,\n    onMoving: onResize,\n    onMoveEnd: onResizeEnd,\n    onCollapse: onCollapsible,\n    registerPanel,\n    unregisterPanel,\n  })\n)\n</script>\n\n<template>\n  <div\n    ref=\"containerEl\"\n    :class=\"[ns.b(), ns.e(layout)]\"\n    :style=\"splitterStyles\"\n  >\n    <slot />\n    <panels-sorter />\n    <!-- Prevent iframe touch events from breaking -->\n    <div v-if=\"movingIndex\" :class=\"[ns.e('mask'), ns.e(`mask-${layout}`)]\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAkBA,MAAM,KAAK,2BAAa,WAAU;EAMlC,MAAM,QAAQ;EAEd,MAAM,QAAQ;EAGd,MAAM,wBAAe,OAAO,SAAQ;EACpC,MAAM,sBAAa,OAAO,OAAM;EAEhC,MAAM,EAAE,aAAa,kBAAkB,kCAAa,OAAM;EAE1D,MAAM,EACJ,aAAa,iBACb,UAAU,QACV,UAAU,eACV,gBAAgB,iBACd,gEAAuD,EAAG,kBAAiB;AAE/E,iBAAM,cAAc;AAClB,eAAY,QAAQ;AACpB,UAAO,MAAM,SAAS,UAA0B,UAAkB;AAChE,aAAS,SAAS,MAAK;KACxB;IACF;EAED,MAAM,EAAE,cAAc,YAAY,wBAAQ,QAAQ,cAAa;EAE/D,MAAM,EACJ,YACA,aACA,aACA,UACA,WACA,eACE,4BAAU,QAAQ,eAAe,SAAS,KAAI;EAElD,MAAM,yCAAgC;AACpC,UAAO,GACJ,GAAG,gBAAgB,aAAa,GAAG,KAAK,QACrC,GAAG,WAAW,MAAM,MACpB,QACN;IACD;EAED,MAAM,iBAAiB,UAAkB;AACvC,eAAY,MAAK;AACjB,SAAM,eAAe,OAAO,QAAQ,MAAK;;EAG3C,MAAM,YAAY,OAAe,WAAmB;AAClD,YAAS,OAAO,OAAM;AAEtB,OAAI,CAAC,KAAK,MACR,OAAM,UAAU,OAAO,QAAQ,MAAK;;EAIxC,MAAM,cAAc,OAAO,UAAkB;AAC3C,cAAU;AACV,4BAAe;AACf,SAAM,aAAa,OAAO,QAAQ,MAAK;;EAGzC,MAAM,iBAAiB,OAAe,SAA0B;AAC9D,cAAW,OAAO,KAAI;AACtB,SAAM,YAAY,OAAO,MAAM,QAAQ,MAAK;;AAG9C,mBACE,uDACS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GACA,aAAa;GACb,UAAU;GACV,WAAW;GACX,YAAY;GACZ;GACA;GACD,CAAA,CACH;;4DAaQ,OAAA;aARA;IAAJ,KAAI;IACH,+BAAK,gBAAG,GAAE,CAAC,GAAC,iBAAI,GAAE,CAAC,EAAE,OAAA,MAAM,CAAA,CAAA;IAC3B,+BAAO,eAAA,MAAc;;wBAEd,KAAA,QAAA,UAAA;wCACS,aAAA,CAAA;gCACjB,8CAAkD;mBACvC,YAAW,sDAAoD,OAAA;;KAAjD,+BAAK,gBAAG,GAAE,CAAC,EAAC,OAAA,iBAAU,GAAE,CAAC,EAAC,QAAS,OAAA,QAAM,CAAA,CAAA"}
+{"version":3,"file":"splitter.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/splitter/src/splitter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  provide,\n  reactive,\n  toRef,\n  watch,\n} from 'vue'\nimport { useNamespace, useOrderedChildren } from '@element-plus/hooks'\nimport { useContainer, useResize, useSize } from './hooks'\nimport { splitterEmits } from './splitter'\nimport { splitterRootContextKey } from './type'\n\nimport type { PanelItemState } from './type'\nimport type { SplitterProps } from './splitter'\n\nconst ns = useNamespace('splitter')\n\ndefineOptions({\n  name: 'ElSplitter',\n})\n\nconst emits = defineEmits(splitterEmits)\n\nconst props = withDefaults(defineProps<SplitterProps>(), {\n  layout: 'vertical',\n})\nconst layout = toRef(props, 'layout')\nconst lazy = toRef(props, 'lazy')\n\nconst { containerEl, containerSize } = useContainer(layout)\n\nconst {\n  removeChild: unregisterPanel,\n  children: panels,\n  addChild: registerPanel,\n  ChildrenSorter: PanelsSorter,\n} = useOrderedChildren<PanelItemState>(getCurrentInstance()!, 'ElSplitterPanel')\n\nwatch(panels, () => {\n  movingIndex.value = null\n  panels.value.forEach((instance: PanelItemState, index: number) => {\n    instance.setIndex(index)\n  })\n})\n\nconst { percentSizes, pxSizes } = useSize(panels, containerSize)\n\nconst {\n  lazyOffset,\n  movingIndex,\n  onMoveStart,\n  onMoving,\n  onMoveEnd,\n  onCollapse,\n} = useResize(panels, containerSize, pxSizes, lazy)\n\nconst splitterStyles = computed(() => {\n  return {\n    [ns.cssVarBlockName('bar-offset')]: lazy.value\n      ? `${lazyOffset.value}px`\n      : undefined,\n  }\n})\n\nconst onResizeStart = (index: number) => {\n  onMoveStart(index)\n  emits('resizeStart', index, pxSizes.value)\n}\n\nconst onResize = (index: number, offset: number) => {\n  onMoving(index, offset)\n\n  if (!lazy.value) {\n    emits('resize', index, pxSizes.value)\n  }\n}\n\nconst onResizeEnd = async (index: number) => {\n  onMoveEnd()\n  await nextTick()\n  emits('resizeEnd', index, pxSizes.value)\n}\n\nconst onCollapsible = (index: number, type: 'start' | 'end') => {\n  onCollapse(index, type)\n  emits('collapse', index, type, pxSizes.value)\n}\n\nprovide(\n  splitterRootContextKey,\n  reactive({\n    panels,\n    percentSizes,\n    pxSizes,\n    layout,\n    lazy,\n    movingIndex,\n    containerSize,\n    onMoveStart: onResizeStart,\n    onMoving: onResize,\n    onMoveEnd: onResizeEnd,\n    onCollapse: onCollapsible,\n    registerPanel,\n    unregisterPanel,\n  })\n)\n</script>\n\n<template>\n  <div\n    ref=\"containerEl\"\n    :class=\"[ns.b(), ns.e(layout)]\"\n    :style=\"splitterStyles\"\n  >\n    <slot />\n    <panels-sorter />\n    <!-- Prevent iframe touch events from breaking -->\n    <div v-if=\"movingIndex\" :class=\"[ns.e('mask'), ns.e(`mask-${layout}`)]\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAkBA,MAAM,KAAK,2BAAa,WAAU;EAMlC,MAAM,QAAQ;EAEd,MAAM,QAAQ;EAGd,MAAM,wBAAe,OAAO,SAAQ;EACpC,MAAM,sBAAa,OAAO,OAAM;EAEhC,MAAM,EAAE,aAAa,kBAAkB,kCAAa,OAAM;EAE1D,MAAM,EACJ,aAAa,iBACb,UAAU,QACV,UAAU,eACV,gBAAgB,iBACd,gEAAuD,EAAG,kBAAiB;AAE/E,iBAAM,cAAc;AAClB,eAAY,QAAQ;AACpB,UAAO,MAAM,SAAS,UAA0B,UAAkB;AAChE,aAAS,SAAS,MAAK;KACxB;IACF;EAED,MAAM,EAAE,cAAc,YAAY,wBAAQ,QAAQ,cAAa;EAE/D,MAAM,EACJ,YACA,aACA,aACA,UACA,WACA,eACE,4BAAU,QAAQ,eAAe,SAAS,KAAI;EAElD,MAAM,yCAAgC;AACpC,UAAO,GACJ,GAAG,gBAAgB,aAAa,GAAG,KAAK,QACrC,GAAG,WAAW,MAAM,MACpB,QACN;IACD;EAED,MAAM,iBAAiB,UAAkB;AACvC,eAAY,MAAK;AACjB,SAAM,eAAe,OAAO,QAAQ,MAAK;;EAG3C,MAAM,YAAY,OAAe,WAAmB;AAClD,YAAS,OAAO,OAAM;AAEtB,OAAI,CAAC,KAAK,MACR,OAAM,UAAU,OAAO,QAAQ,MAAK;;EAIxC,MAAM,cAAc,OAAO,UAAkB;AAC3C,cAAU;AACV,4BAAe;AACf,SAAM,aAAa,OAAO,QAAQ,MAAK;;EAGzC,MAAM,iBAAiB,OAAe,SAA0B;AAC9D,cAAW,OAAO,KAAI;AACtB,SAAM,YAAY,OAAO,MAAM,QAAQ,MAAK;;AAG9C,mBACE,uDACS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GACA,aAAa;GACb,UAAU;GACV,WAAW;GACX,YAAY;GACZ;GACA;GACD,CAAA,CACH;;4DAaQ,OAAA;aARA;IAAJ,KAAI;IACH,+BAAK,gBAAG,GAAE,CAAC,GAAC,iBAAI,GAAE,CAAC,EAAE,OAAA,MAAM,CAAA,CAAA;IAC3B,+BAAO,eAAA,MAAc;;wBAEd,KAAA,QAAA,UAAA;wCACS,aAAA,CAAA;gCACjB,8CAAkD;mBACvC,YAAW,sDAAoD,OAAA;;KAAjD,+BAAK,gBAAG,GAAE,CAAC,EAAC,OAAA,iBAAU,GAAE,CAAC,EAAC,QAAS,OAAA,QAAM,CAAA,CAAA"}

package/lib/components/splitter/src/splitter2.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter2.js","names":[],"sources":["../../../../../../packages/components/splitter/src/splitter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  provide,\n  reactive,\n  toRef,\n  watch,\n} from 'vue'\nimport { useNamespace, useOrderedChildren } from '@element-plus/hooks'\nimport { useContainer, useResize, useSize } from './hooks'\nimport { splitterEmits } from './splitter'\nimport { splitterRootContextKey } from './type'\n\nimport type { PanelItemState } from './type'\nimport type { SplitterProps } from './splitter'\n\nconst ns = useNamespace('splitter')\n\ndefineOptions({\n  name: 'ElSplitter',\n})\n\nconst emits = defineEmits(splitterEmits)\n\nconst props = withDefaults(defineProps<SplitterProps>(), {\n  layout: 'horizontal',\n})\nconst layout = toRef(props, 'layout')\nconst lazy = toRef(props, 'lazy')\n\nconst { containerEl, containerSize } = useContainer(layout)\n\nconst {\n  removeChild: unregisterPanel,\n  children: panels,\n  addChild: registerPanel,\n  ChildrenSorter: PanelsSorter,\n} = useOrderedChildren<PanelItemState>(getCurrentInstance()!, 'ElSplitterPanel')\n\nwatch(panels, () => {\n  movingIndex.value = null\n  panels.value.forEach((instance: PanelItemState, index: number) => {\n    instance.setIndex(index)\n  })\n})\n\nconst { percentSizes, pxSizes } = useSize(panels, containerSize)\n\nconst {\n  lazyOffset,\n  movingIndex,\n  onMoveStart,\n  onMoving,\n  onMoveEnd,\n  onCollapse,\n} = useResize(panels, containerSize, pxSizes, lazy)\n\nconst splitterStyles = computed(() => {\n  return {\n    [ns.cssVarBlockName('bar-offset')]: lazy.value\n      ? `${lazyOffset.value}px`\n      : undefined,\n  }\n})\n\nconst onResizeStart = (index: number) => {\n  onMoveStart(index)\n  emits('resizeStart', index, pxSizes.value)\n}\n\nconst onResize = (index: number, offset: number) => {\n  onMoving(index, offset)\n\n  if (!lazy.value) {\n    emits('resize', index, pxSizes.value)\n  }\n}\n\nconst onResizeEnd = async (index: number) => {\n  onMoveEnd()\n  await nextTick()\n  emits('resizeEnd', index, pxSizes.value)\n}\n\nconst onCollapsible = (index: number, type: 'start' | 'end') => {\n  onCollapse(index, type)\n  emits('collapse', index, type, pxSizes.value)\n}\n\nprovide(\n  splitterRootContextKey,\n  reactive({\n    panels,\n    percentSizes,\n    pxSizes,\n    layout,\n    lazy,\n    movingIndex,\n    containerSize,\n    onMoveStart: onResizeStart,\n    onMoving: onResize,\n    onMoveEnd: onResizeEnd,\n    onCollapse: onCollapsible,\n    registerPanel,\n    unregisterPanel,\n  })\n)\n</script>\n\n<template>\n  <div\n    ref=\"containerEl\"\n    :class=\"[ns.b(), ns.e(layout)]\"\n    :style=\"splitterStyles\"\n  >\n    <slot />\n    <panels-sorter />\n    <!-- Prevent iframe touch events from breaking -->\n    <div v-if=\"movingIndex\" :class=\"[ns.e('mask'), ns.e(`mask-${layout}`)]\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"splitter2.js","names":[],"sources":["../../../../../../packages/components/splitter/src/splitter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  provide,\n  reactive,\n  toRef,\n  watch,\n} from 'vue'\nimport { useNamespace, useOrderedChildren } from '@element-plus/hooks'\nimport { useContainer, useResize, useSize } from './hooks'\nimport { splitterEmits } from './splitter'\nimport { splitterRootContextKey } from './type'\n\nimport type { PanelItemState } from './type'\nimport type { SplitterProps } from './splitter'\n\nconst ns = useNamespace('splitter')\n\ndefineOptions({\n  name: 'ElSplitter',\n})\n\nconst emits = defineEmits(splitterEmits)\n\nconst props = withDefaults(defineProps<SplitterProps>(), {\n  layout: 'vertical',\n})\nconst layout = toRef(props, 'layout')\nconst lazy = toRef(props, 'lazy')\n\nconst { containerEl, containerSize } = useContainer(layout)\n\nconst {\n  removeChild: unregisterPanel,\n  children: panels,\n  addChild: registerPanel,\n  ChildrenSorter: PanelsSorter,\n} = useOrderedChildren<PanelItemState>(getCurrentInstance()!, 'ElSplitterPanel')\n\nwatch(panels, () => {\n  movingIndex.value = null\n  panels.value.forEach((instance: PanelItemState, index: number) => {\n    instance.setIndex(index)\n  })\n})\n\nconst { percentSizes, pxSizes } = useSize(panels, containerSize)\n\nconst {\n  lazyOffset,\n  movingIndex,\n  onMoveStart,\n  onMoving,\n  onMoveEnd,\n  onCollapse,\n} = useResize(panels, containerSize, pxSizes, lazy)\n\nconst splitterStyles = computed(() => {\n  return {\n    [ns.cssVarBlockName('bar-offset')]: lazy.value\n      ? `${lazyOffset.value}px`\n      : undefined,\n  }\n})\n\nconst onResizeStart = (index: number) => {\n  onMoveStart(index)\n  emits('resizeStart', index, pxSizes.value)\n}\n\nconst onResize = (index: number, offset: number) => {\n  onMoving(index, offset)\n\n  if (!lazy.value) {\n    emits('resize', index, pxSizes.value)\n  }\n}\n\nconst onResizeEnd = async (index: number) => {\n  onMoveEnd()\n  await nextTick()\n  emits('resizeEnd', index, pxSizes.value)\n}\n\nconst onCollapsible = (index: number, type: 'start' | 'end') => {\n  onCollapse(index, type)\n  emits('collapse', index, type, pxSizes.value)\n}\n\nprovide(\n  splitterRootContextKey,\n  reactive({\n    panels,\n    percentSizes,\n    pxSizes,\n    layout,\n    lazy,\n    movingIndex,\n    containerSize,\n    onMoveStart: onResizeStart,\n    onMoving: onResize,\n    onMoveEnd: onResizeEnd,\n    onCollapse: onCollapsible,\n    registerPanel,\n    unregisterPanel,\n  })\n)\n</script>\n\n<template>\n  <div\n    ref=\"containerEl\"\n    :class=\"[ns.b(), ns.e(layout)]\"\n    :style=\"splitterStyles\"\n  >\n    <slot />\n    <panels-sorter />\n    <!-- Prevent iframe touch events from breaking -->\n    <div v-if=\"movingIndex\" :class=\"[ns.e('mask'), ns.e(`mask-${layout}`)]\" />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
 const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
-const require_index = require('../../../directives/mousewheel/index.js');
-const require_index$1 = require('../../../hooks/use-locale/index.js');
-const require_index$2 = require('../../../hooks/use-namespace/index.js');
-const require_index$3 = require('../../scrollbar/index.js');
+const require_index = require('../../../hooks/use-locale/index.js');
+const require_index$1 = require('../../../hooks/use-namespace/index.js');
+const require_index$2 = require('../../scrollbar/index.js');
 const require_use_global_config = require('../../config-provider/src/hooks/use-global-config.js');
+const require_index$3 = require('../../../directives/mousewheel/index.js');
 const require_helper = require('./store/helper.js');
 const require_table_layout = require('./table-layout.js');
 const require_tokens = require('./tokens.js');
@@ -24,12 +24,12 @@ let vue = require("vue");
 let tableIdSeed = 1;
 var table_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 	name: "ElTable",
-	directives: { Mousewheel: require_index.default },
+	directives: { Mousewheel: require_index$3.default },
 	components: {
 		TableHeader: require_index$4.default,
 		TableBody: require_index$5.default,
 		TableFooter: require_index$6.default,
-		ElScrollbar: require_index$3.ElScrollbar,
+		ElScrollbar: require_index$2.ElScrollbar,
 		hColgroup: require_h_helper.hColgroup
 	},
 	props: require_defaults.default,
@@ -55,8 +55,8 @@ var table_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 		"scroll"
 	],
 	setup(props) {
-		const { t } = require_index$1.useLocale();
-		const ns = require_index$2.useNamespace("table");
+		const { t } = require_index.useLocale();
+		const ns = require_index$1.useNamespace("table");
 		const globalConfig = require_use_global_config.useGlobalConfig("table");
 		const table = (0, vue.getCurrentInstance)();
 		(0, vue.provide)(require_tokens.TABLE_INJECTION_KEY, table);

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

@@ -1 +1 @@
-{"version":3,"file":"table.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/table/src/table.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"[\n      {\n        [ns.m('fit')]: fit,\n        [ns.m('striped')]: stripe,\n        [ns.m('border')]: border || isGroup,\n        [ns.m('hidden')]: isHidden,\n        [ns.m('group')]: isGroup,\n        [ns.m('fluid-height')]: maxHeight,\n        [ns.m('scrollable-x')]: layout.scrollX.value,\n        [ns.m('scrollable-y')]: layout.scrollY.value,\n        [ns.m('enable-row-hover')]: !store.states.isComplex.value,\n        [ns.m('enable-row-transition')]:\n          (store.states.data.value || []).length !== 0 &&\n          (store.states.data.value || []).length < 100,\n        'has-footer': showSummary,\n      },\n      ns.m(tableSize),\n      className,\n      ns.b(),\n      ns.m(`layout-${tableLayout}`),\n    ]\"\n    :style=\"style\"\n    :data-prefix=\"ns.namespace.value\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <div ref=\"tableInnerWrapper\" :class=\"ns.e('inner-wrapper')\">\n      <div ref=\"hiddenColumns\" class=\"hidden-columns\">\n        <slot />\n      </div>\n      <div\n        v-if=\"showHeader && tableLayout === 'fixed'\"\n        ref=\"headerWrapper\"\n        v-mousewheel=\"handleHeaderFooterMousewheel\"\n        :class=\"ns.e('header-wrapper')\"\n      >\n        <table\n          ref=\"tableHeader\"\n          :class=\"ns.e('header')\"\n          :style=\"tableBodyStyles\"\n          border=\"0\"\n          cellpadding=\"0\"\n          cellspacing=\"0\"\n        >\n          <hColgroup\n            :columns=\"store.states.columns.value\"\n            :table-layout=\"tableLayout\"\n          />\n          <table-header\n            ref=\"tableHeaderRef\"\n            :border=\"border\"\n            :default-sort=\"defaultSort\"\n            :store=\"store\"\n            :append-filter-panel-to=\"appendFilterPanelTo\"\n            :allow-drag-last-column=\"allowDragLastColumn\"\n            @set-drag-visible=\"setDragVisible\"\n          />\n        </table>\n      </div>\n      <div ref=\"bodyWrapper\" :class=\"ns.e('body-wrapper')\">\n        <el-scrollbar\n          ref=\"scrollBarRef\"\n          :view-style=\"scrollbarViewStyle\"\n          :wrap-style=\"scrollbarStyle\"\n          :always=\"scrollbarAlwaysOn\"\n          :tabindex=\"scrollbarTabindex\"\n          :native=\"nativeScrollbar\"\n          @scroll=\"$emit('scroll', $event)\"\n        >\n          <table\n            ref=\"tableBody\"\n            :class=\"ns.e('body')\"\n            cellspacing=\"0\"\n            cellpadding=\"0\"\n            border=\"0\"\n            :style=\"{\n              width: bodyWidth,\n              tableLayout,\n            }\"\n          >\n            <hColgroup\n              :columns=\"store.states.columns.value\"\n              :table-layout=\"tableLayout\"\n            />\n            <table-header\n              v-if=\"showHeader && tableLayout === 'auto'\"\n              ref=\"tableHeaderRef\"\n              :class=\"ns.e('body-header')\"\n              :border=\"border\"\n              :default-sort=\"defaultSort\"\n              :store=\"store\"\n              :append-filter-panel-to=\"appendFilterPanelTo\"\n              @set-drag-visible=\"setDragVisible\"\n            />\n            <table-body\n              :context=\"context\"\n              :highlight=\"highlightCurrentRow\"\n              :row-class-name=\"rowClassName\"\n              :tooltip-effect=\"computedTooltipEffect\"\n              :tooltip-options=\"computedTooltipOptions\"\n              :row-style=\"rowStyle\"\n              :store=\"store\"\n              :stripe=\"stripe\"\n            />\n            <table-footer\n              v-if=\"showSummary && tableLayout === 'auto'\"\n              :class=\"ns.e('body-footer')\"\n              :border=\"border\"\n              :default-sort=\"defaultSort\"\n              :store=\"store\"\n              :sum-text=\"computedSumText\"\n              :summary-method=\"summaryMethod\"\n            />\n          </table>\n          <div\n            v-if=\"isEmpty\"\n            ref=\"emptyBlock\"\n            :style=\"emptyBlockStyle\"\n            :class=\"ns.e('empty-block')\"\n          >\n            <span :class=\"ns.e('empty-text')\">\n              <slot name=\"empty\">{{ computedEmptyText }}</slot>\n            </span>\n          </div>\n          <div\n            v-if=\"$slots.append\"\n            ref=\"appendWrapper\"\n            :class=\"ns.e('append-wrapper')\"\n          >\n            <slot name=\"append\" />\n          </div>\n        </el-scrollbar>\n      </div>\n      <div\n        v-if=\"showSummary && tableLayout === 'fixed'\"\n        v-show=\"!isEmpty\"\n        ref=\"footerWrapper\"\n        v-mousewheel=\"handleHeaderFooterMousewheel\"\n        :class=\"ns.e('footer-wrapper')\"\n      >\n        <table\n          :class=\"ns.e('footer')\"\n          cellspacing=\"0\"\n          cellpadding=\"0\"\n          border=\"0\"\n          :style=\"tableBodyStyles\"\n        >\n          <hColgroup\n            :columns=\"store.states.columns.value\"\n            :table-layout=\"tableLayout\"\n          />\n          <table-footer\n            :border=\"border\"\n            :default-sort=\"defaultSort\"\n            :store=\"store\"\n            :sum-text=\"computedSumText\"\n            :summary-method=\"summaryMethod\"\n          />\n        </table>\n      </div>\n      <div v-if=\"border || isGroup\" :class=\"ns.e('border-left-patch')\" />\n    </div>\n    <div\n      v-show=\"resizeProxyVisible\"\n      ref=\"resizeProxy\"\n      :class=\"ns.e('column-resize-proxy')\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  provide,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { Mousewheel } from '@element-plus/directives'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { createStore } from './store/helper'\nimport TableLayout from './table-layout'\nimport TableHeader from './table-header'\nimport TableBody from './table-body'\nimport TableFooter from './table-footer'\nimport useUtils from './table/utils-helper'\nimport { convertToRows } from './table-header/utils-helper'\nimport useStyle from './table/style-helper'\nimport useKeyRender from './table/key-render-helper'\nimport defaultProps from './table/defaults'\nimport { TABLE_INJECTION_KEY } from './tokens'\nimport { hColgroup } from './h-helper'\nimport { useScrollbar } from './composables/use-scrollbar'\n\nimport type { Table } from './table/defaults'\n\nlet tableIdSeed = 1\nexport default defineComponent({\n  name: 'ElTable',\n  directives: {\n    Mousewheel,\n  },\n  components: {\n    TableHeader,\n    TableBody,\n    TableFooter,\n    ElScrollbar,\n    hColgroup,\n  },\n  props: defaultProps,\n  emits: [\n    'select',\n    'select-all',\n    'selection-change',\n    'cell-mouse-enter',\n    'cell-mouse-leave',\n    'cell-contextmenu',\n    'cell-click',\n    'cell-dblclick',\n    'row-click',\n    'row-contextmenu',\n    'row-dblclick',\n    'header-click',\n    'header-contextmenu',\n    'sort-change',\n    'filter-change',\n    'current-change',\n    'header-dragend',\n    'expand-change',\n    'scroll',\n  ],\n  setup(props) {\n    type Row = (typeof props.data)[number]\n    const { t } = useLocale()\n    const ns = useNamespace('table')\n    const globalConfig = useGlobalConfig('table')\n    const table = getCurrentInstance() as Table<Row>\n    provide(TABLE_INJECTION_KEY, table)\n    const store = createStore<Row>(table, props)\n    table.store = store\n    const layout = new TableLayout<Row>({\n      store: table.store,\n      table,\n      fit: props.fit,\n      showHeader: props.showHeader,\n    })\n    table.layout = layout\n\n    const isEmpty = computed(() => (store.states.data.value || []).length === 0)\n\n    /**\n     * open functions\n     */\n    const {\n      setCurrentRow,\n      getSelectionRows,\n      toggleRowSelection,\n      clearSelection,\n      clearFilter,\n      toggleAllSelection,\n      toggleRowExpansion,\n      clearSort,\n      sort,\n      updateKeyChildren,\n    } = useUtils<Row>(store)\n    const {\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    } = useStyle<Row>(props, layout, store, table)\n\n    const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } =\n      useScrollbar()\n\n    const debouncedUpdateLayout = debounce(doLayout, 50)\n\n    const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`\n    table.tableId = tableId\n    table.state = {\n      isGroup,\n      resizeState,\n      doLayout,\n      debouncedUpdateLayout,\n    }\n    const computedSumText = computed(\n      () => props.sumText ?? t('el.table.sumText')\n    )\n\n    const computedEmptyText = computed(() => {\n      return props.emptyText ?? t('el.table.emptyText')\n    })\n\n    const computedTooltipEffect = computed(\n      () => props.tooltipEffect ?? globalConfig.value?.tooltipEffect\n    )\n\n    const computedTooltipOptions = computed(\n      () => props.tooltipOptions ?? globalConfig.value?.tooltipOptions\n    )\n\n    const columns = computed(() => {\n      return convertToRows(store.states.originColumns.value)[0]\n    })\n\n    useKeyRender(table)\n\n    onBeforeUnmount(() => {\n      debouncedUpdateLayout.cancel()\n    })\n\n    return {\n      ns,\n      layout,\n      store,\n      columns,\n      handleHeaderFooterMousewheel,\n      handleMouseLeave,\n      tableId,\n      tableSize,\n      isHidden,\n      isEmpty,\n      renderExpanded,\n      resizeProxyVisible,\n      resizeState,\n      isGroup,\n      bodyWidth,\n      tableBodyStyles,\n      emptyBlockStyle,\n      debouncedUpdateLayout,\n      /**\n       * @description used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection\n       */\n      setCurrentRow,\n      /**\n       * @description returns the currently selected rows\n       */\n      getSelectionRows,\n      /**\n       * @description used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected\n       */\n      toggleRowSelection,\n      /**\n       * @description used in multiple selection Table, clear user selection\n       */\n      clearSelection,\n      /**\n       * @description clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters\n       */\n      clearFilter,\n      /**\n       * @description used in multiple selection Table, toggle select all and deselect all\n       */\n      toggleAllSelection,\n      /**\n       * @description used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed\n       */\n      toggleRowExpansion,\n      /**\n       * @description clear sorting, restore data to the original order\n       */\n      clearSort,\n      /**\n       * @description refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout\n       */\n      doLayout,\n      /**\n       * @description sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order\n       */\n      sort,\n      /**\n       * @description used in lazy Table, must set `rowKey`, update key children\n       */\n      updateKeyChildren,\n      t,\n      setDragVisible,\n      context: table,\n      computedSumText,\n      computedEmptyText,\n      computedTooltipEffect,\n      computedTooltipOptions,\n      tableLayout,\n      scrollbarViewStyle,\n      scrollbarStyle,\n      scrollBarRef,\n      /**\n       * @description scrolls to a particular set of coordinates\n       */\n      scrollTo,\n      /**\n       * @description set horizontal scroll position\n       */\n      setScrollLeft,\n      /**\n       * @description set vertical scroll position\n       */\n      setScrollTop,\n      /**\n       * @description whether to allow drag the last column\n       */\n      allowDragLastColumn: props.allowDragLastColumn,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyMA,IAAI,cAAc;AAClB,sEAA+B;CAC7B,MAAM;CACN,YAAY,EACV,mCACD;CACD,YAAY;EACV;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;CACP,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,MAAM,OAAO;EAEX,MAAM,EAAE,MAAM,2BAAU;EACxB,MAAM,KAAK,6BAAa,QAAO;EAC/B,MAAM,eAAe,0CAAgB,QAAO;EAC5C,MAAM,qCAA2B;AACjC,mBAAQ,oCAAqB,MAAK;EAClC,MAAM,QAAQ,2BAAiB,OAAO,MAAK;AAC3C,QAAM,QAAQ;EACd,MAAM,SAAS,IAAI,6BAAiB;GAClC,OAAO,MAAM;GACb;GACA,KAAK,MAAM;GACX,YAAY,MAAM;GACnB,CAAA;AACD,QAAM,SAAS;EAEf,MAAM,mCAA0B,MAAM,OAAO,KAAK,SAAS,EAAE,EAAE,WAAW,EAAC;;;;EAK3E,MAAM,EACJ,eACA,kBACA,oBACA,gBACA,aACA,oBACA,oBACA,WACA,MACA,sBACE,+BAAc,MAAK;EACvB,MAAM,EACJ,UACA,gBACA,gBACA,SACA,kBACA,8BACA,WACA,iBACA,oBACA,WACA,aACA,UACA,iBACA,aACA,oBACA,mBACE,6BAAc,OAAO,QAAQ,OAAO,MAAK;EAE7C,MAAM,EAAE,cAAc,UAAU,eAAe,iBAC7C,oCAAa;EAEf,MAAM,qDAAiC,UAAU,GAAE;EAEnD,MAAM,UAAU,GAAG,GAAG,UAAU,MAAM,SAAS;AAC/C,QAAM,UAAU;AAChB,QAAM,QAAQ;GACZ;GACA;GACA;GACA;GACF;EACA,MAAM,0CACE,MAAM,WAAW,EAAE,mBAAkB,CAC7C;EAEA,MAAM,4CAAmC;AACvC,UAAO,MAAM,aAAa,EAAE,qBAAoB;IACjD;EAED,MAAM,gDACE,MAAM,iBAAiB,aAAa,OAAO,cACnD;EAEA,MAAM,iDACE,MAAM,kBAAkB,aAAa,OAAO,eACpD;EAEA,MAAM,kCAAyB;AAC7B,UAAO,mCAAc,MAAM,OAAO,cAAc,MAAM,CAAC;IACxD;AAED,oCAAa,MAAK;AAElB,iCAAsB;AACpB,yBAAsB,QAAO;IAC9B;AAED,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GACA;GACA;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAIA;GAIA;GAIA;GAIA,qBAAqB,MAAM;GAC7B;;CAEH,CAAA"}
+{"version":3,"file":"table.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/table/src/table.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"[\n      {\n        [ns.m('fit')]: fit,\n        [ns.m('striped')]: stripe,\n        [ns.m('border')]: border || isGroup,\n        [ns.m('hidden')]: isHidden,\n        [ns.m('group')]: isGroup,\n        [ns.m('fluid-height')]: maxHeight,\n        [ns.m('scrollable-x')]: layout.scrollX.value,\n        [ns.m('scrollable-y')]: layout.scrollY.value,\n        [ns.m('enable-row-hover')]: !store.states.isComplex.value,\n        [ns.m('enable-row-transition')]:\n          (store.states.data.value || []).length !== 0 &&\n          (store.states.data.value || []).length < 100,\n        'has-footer': showSummary,\n      },\n      ns.m(tableSize),\n      className,\n      ns.b(),\n      ns.m(`layout-${tableLayout}`),\n    ]\"\n    :style=\"style\"\n    :data-prefix=\"ns.namespace.value\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <div ref=\"tableInnerWrapper\" :class=\"ns.e('inner-wrapper')\">\n      <div ref=\"hiddenColumns\" class=\"hidden-columns\">\n        <slot />\n      </div>\n      <div\n        v-if=\"showHeader && tableLayout === 'fixed'\"\n        ref=\"headerWrapper\"\n        v-mousewheel=\"handleHeaderFooterMousewheel\"\n        :class=\"ns.e('header-wrapper')\"\n      >\n        <table\n          ref=\"tableHeader\"\n          :class=\"ns.e('header')\"\n          :style=\"tableBodyStyles\"\n          border=\"0\"\n          cellpadding=\"0\"\n          cellspacing=\"0\"\n        >\n          <hColgroup\n            :columns=\"store.states.columns.value\"\n            :table-layout=\"tableLayout\"\n          />\n          <table-header\n            ref=\"tableHeaderRef\"\n            :border=\"border\"\n            :default-sort=\"defaultSort\"\n            :store=\"store\"\n            :append-filter-panel-to=\"appendFilterPanelTo\"\n            :allow-drag-last-column=\"allowDragLastColumn\"\n            @set-drag-visible=\"setDragVisible\"\n          />\n        </table>\n      </div>\n      <div ref=\"bodyWrapper\" :class=\"ns.e('body-wrapper')\">\n        <el-scrollbar\n          ref=\"scrollBarRef\"\n          :view-style=\"scrollbarViewStyle\"\n          :wrap-style=\"scrollbarStyle\"\n          :always=\"scrollbarAlwaysOn\"\n          :tabindex=\"scrollbarTabindex\"\n          :native=\"nativeScrollbar\"\n          @scroll=\"$emit('scroll', $event)\"\n        >\n          <table\n            ref=\"tableBody\"\n            :class=\"ns.e('body')\"\n            cellspacing=\"0\"\n            cellpadding=\"0\"\n            border=\"0\"\n            :style=\"{\n              width: bodyWidth,\n              tableLayout,\n            }\"\n          >\n            <hColgroup\n              :columns=\"store.states.columns.value\"\n              :table-layout=\"tableLayout\"\n            />\n            <table-header\n              v-if=\"showHeader && tableLayout === 'auto'\"\n              ref=\"tableHeaderRef\"\n              :class=\"ns.e('body-header')\"\n              :border=\"border\"\n              :default-sort=\"defaultSort\"\n              :store=\"store\"\n              :append-filter-panel-to=\"appendFilterPanelTo\"\n              @set-drag-visible=\"setDragVisible\"\n            />\n            <table-body\n              :context=\"context\"\n              :highlight=\"highlightCurrentRow\"\n              :row-class-name=\"rowClassName\"\n              :tooltip-effect=\"computedTooltipEffect\"\n              :tooltip-options=\"computedTooltipOptions\"\n              :row-style=\"rowStyle\"\n              :store=\"store\"\n              :stripe=\"stripe\"\n            />\n            <table-footer\n              v-if=\"showSummary && tableLayout === 'auto'\"\n              :class=\"ns.e('body-footer')\"\n              :border=\"border\"\n              :default-sort=\"defaultSort\"\n              :store=\"store\"\n              :sum-text=\"computedSumText\"\n              :summary-method=\"summaryMethod\"\n            />\n          </table>\n          <div\n            v-if=\"isEmpty\"\n            ref=\"emptyBlock\"\n            :style=\"emptyBlockStyle\"\n            :class=\"ns.e('empty-block')\"\n          >\n            <span :class=\"ns.e('empty-text')\">\n              <slot name=\"empty\">{{ computedEmptyText }}</slot>\n            </span>\n          </div>\n          <div\n            v-if=\"$slots.append\"\n            ref=\"appendWrapper\"\n            :class=\"ns.e('append-wrapper')\"\n          >\n            <slot name=\"append\" />\n          </div>\n        </el-scrollbar>\n      </div>\n      <div\n        v-if=\"showSummary && tableLayout === 'fixed'\"\n        v-show=\"!isEmpty\"\n        ref=\"footerWrapper\"\n        v-mousewheel=\"handleHeaderFooterMousewheel\"\n        :class=\"ns.e('footer-wrapper')\"\n      >\n        <table\n          :class=\"ns.e('footer')\"\n          cellspacing=\"0\"\n          cellpadding=\"0\"\n          border=\"0\"\n          :style=\"tableBodyStyles\"\n        >\n          <hColgroup\n            :columns=\"store.states.columns.value\"\n            :table-layout=\"tableLayout\"\n          />\n          <table-footer\n            :border=\"border\"\n            :default-sort=\"defaultSort\"\n            :store=\"store\"\n            :sum-text=\"computedSumText\"\n            :summary-method=\"summaryMethod\"\n          />\n        </table>\n      </div>\n      <div v-if=\"border || isGroup\" :class=\"ns.e('border-left-patch')\" />\n    </div>\n    <div\n      v-show=\"resizeProxyVisible\"\n      ref=\"resizeProxy\"\n      :class=\"ns.e('column-resize-proxy')\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  provide,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { Mousewheel } from '@element-plus/directives'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { createStore } from './store/helper'\nimport TableLayout from './table-layout'\nimport TableHeader from './table-header'\nimport TableBody from './table-body'\nimport TableFooter from './table-footer'\nimport useUtils from './table/utils-helper'\nimport { convertToRows } from './table-header/utils-helper'\nimport useStyle from './table/style-helper'\nimport useKeyRender from './table/key-render-helper'\nimport defaultProps from './table/defaults'\nimport { TABLE_INJECTION_KEY } from './tokens'\nimport { hColgroup } from './h-helper'\nimport { useScrollbar } from './composables/use-scrollbar'\n\nimport type { Table } from './table/defaults'\n\nlet tableIdSeed = 1\nexport default defineComponent({\n  name: 'ElTable',\n  directives: {\n    Mousewheel,\n  },\n  components: {\n    TableHeader,\n    TableBody,\n    TableFooter,\n    ElScrollbar,\n    hColgroup,\n  },\n  props: defaultProps,\n  emits: [\n    'select',\n    'select-all',\n    'selection-change',\n    'cell-mouse-enter',\n    'cell-mouse-leave',\n    'cell-contextmenu',\n    'cell-click',\n    'cell-dblclick',\n    'row-click',\n    'row-contextmenu',\n    'row-dblclick',\n    'header-click',\n    'header-contextmenu',\n    'sort-change',\n    'filter-change',\n    'current-change',\n    'header-dragend',\n    'expand-change',\n    'scroll',\n  ],\n  setup(props) {\n    type Row = (typeof props.data)[number]\n    const { t } = useLocale()\n    const ns = useNamespace('table')\n    const globalConfig = useGlobalConfig('table')\n    const table = getCurrentInstance() as Table<Row>\n    provide(TABLE_INJECTION_KEY, table)\n    const store = createStore<Row>(table, props)\n    table.store = store\n    const layout = new TableLayout<Row>({\n      store: table.store,\n      table,\n      fit: props.fit,\n      showHeader: props.showHeader,\n    })\n    table.layout = layout\n\n    const isEmpty = computed(() => (store.states.data.value || []).length === 0)\n\n    /**\n     * open functions\n     */\n    const {\n      setCurrentRow,\n      getSelectionRows,\n      toggleRowSelection,\n      clearSelection,\n      clearFilter,\n      toggleAllSelection,\n      toggleRowExpansion,\n      clearSort,\n      sort,\n      updateKeyChildren,\n    } = useUtils<Row>(store)\n    const {\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    } = useStyle<Row>(props, layout, store, table)\n\n    const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } =\n      useScrollbar()\n\n    const debouncedUpdateLayout = debounce(doLayout, 50)\n\n    const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`\n    table.tableId = tableId\n    table.state = {\n      isGroup,\n      resizeState,\n      doLayout,\n      debouncedUpdateLayout,\n    }\n    const computedSumText = computed(\n      () => props.sumText ?? t('el.table.sumText')\n    )\n\n    const computedEmptyText = computed(() => {\n      return props.emptyText ?? t('el.table.emptyText')\n    })\n\n    const computedTooltipEffect = computed(\n      () => props.tooltipEffect ?? globalConfig.value?.tooltipEffect\n    )\n\n    const computedTooltipOptions = computed(\n      () => props.tooltipOptions ?? globalConfig.value?.tooltipOptions\n    )\n\n    const columns = computed(() => {\n      return convertToRows(store.states.originColumns.value)[0]\n    })\n\n    useKeyRender(table)\n\n    onBeforeUnmount(() => {\n      debouncedUpdateLayout.cancel()\n    })\n\n    return {\n      ns,\n      layout,\n      store,\n      columns,\n      handleHeaderFooterMousewheel,\n      handleMouseLeave,\n      tableId,\n      tableSize,\n      isHidden,\n      isEmpty,\n      renderExpanded,\n      resizeProxyVisible,\n      resizeState,\n      isGroup,\n      bodyWidth,\n      tableBodyStyles,\n      emptyBlockStyle,\n      debouncedUpdateLayout,\n      /**\n       * @description used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection\n       */\n      setCurrentRow,\n      /**\n       * @description returns the currently selected rows\n       */\n      getSelectionRows,\n      /**\n       * @description used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected\n       */\n      toggleRowSelection,\n      /**\n       * @description used in multiple selection Table, clear user selection\n       */\n      clearSelection,\n      /**\n       * @description clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters\n       */\n      clearFilter,\n      /**\n       * @description used in multiple selection Table, toggle select all and deselect all\n       */\n      toggleAllSelection,\n      /**\n       * @description used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed\n       */\n      toggleRowExpansion,\n      /**\n       * @description clear sorting, restore data to the original order\n       */\n      clearSort,\n      /**\n       * @description refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout\n       */\n      doLayout,\n      /**\n       * @description sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order\n       */\n      sort,\n      /**\n       * @description used in lazy Table, must set `rowKey`, update key children\n       */\n      updateKeyChildren,\n      t,\n      setDragVisible,\n      context: table,\n      computedSumText,\n      computedEmptyText,\n      computedTooltipEffect,\n      computedTooltipOptions,\n      tableLayout,\n      scrollbarViewStyle,\n      scrollbarStyle,\n      scrollBarRef,\n      /**\n       * @description scrolls to a particular set of coordinates\n       */\n      scrollTo,\n      /**\n       * @description set horizontal scroll position\n       */\n      setScrollLeft,\n      /**\n       * @description set vertical scroll position\n       */\n      setScrollTop,\n      /**\n       * @description whether to allow drag the last column\n       */\n      allowDragLastColumn: props.allowDragLastColumn,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyMA,IAAI,cAAc;AAClB,sEAA+B;CAC7B,MAAM;CACN,YAAY,EACV,qCACD;CACD,YAAY;EACV;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;CACP,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,MAAM,OAAO;EAEX,MAAM,EAAE,MAAM,yBAAU;EACxB,MAAM,KAAK,6BAAa,QAAO;EAC/B,MAAM,eAAe,0CAAgB,QAAO;EAC5C,MAAM,qCAA2B;AACjC,mBAAQ,oCAAqB,MAAK;EAClC,MAAM,QAAQ,2BAAiB,OAAO,MAAK;AAC3C,QAAM,QAAQ;EACd,MAAM,SAAS,IAAI,6BAAiB;GAClC,OAAO,MAAM;GACb;GACA,KAAK,MAAM;GACX,YAAY,MAAM;GACnB,CAAA;AACD,QAAM,SAAS;EAEf,MAAM,mCAA0B,MAAM,OAAO,KAAK,SAAS,EAAE,EAAE,WAAW,EAAC;;;;EAK3E,MAAM,EACJ,eACA,kBACA,oBACA,gBACA,aACA,oBACA,oBACA,WACA,MACA,sBACE,+BAAc,MAAK;EACvB,MAAM,EACJ,UACA,gBACA,gBACA,SACA,kBACA,8BACA,WACA,iBACA,oBACA,WACA,aACA,UACA,iBACA,aACA,oBACA,mBACE,6BAAc,OAAO,QAAQ,OAAO,MAAK;EAE7C,MAAM,EAAE,cAAc,UAAU,eAAe,iBAC7C,oCAAa;EAEf,MAAM,qDAAiC,UAAU,GAAE;EAEnD,MAAM,UAAU,GAAG,GAAG,UAAU,MAAM,SAAS;AAC/C,QAAM,UAAU;AAChB,QAAM,QAAQ;GACZ;GACA;GACA;GACA;GACF;EACA,MAAM,0CACE,MAAM,WAAW,EAAE,mBAAkB,CAC7C;EAEA,MAAM,4CAAmC;AACvC,UAAO,MAAM,aAAa,EAAE,qBAAoB;IACjD;EAED,MAAM,gDACE,MAAM,iBAAiB,aAAa,OAAO,cACnD;EAEA,MAAM,iDACE,MAAM,kBAAkB,aAAa,OAAO,eACpD;EAEA,MAAM,kCAAyB;AAC7B,UAAO,mCAAc,MAAM,OAAO,cAAc,MAAM,CAAC;IACxD;AAED,oCAAa,MAAK;AAElB,iCAAsB;AACpB,yBAAsB,QAAO;IAC9B;AAED,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GAIA;GACA;GACA;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAIA;GAIA;GAIA;GAIA,qBAAqB,MAAM;GAC7B;;CAEH,CAAA"}