@sdata/web-vue 2.2.1 → 2.6.0

package/es/layout/sider.vue_vue_type_script_setup_true_lang.js

@@ -1,447 +1,268 @@
+import { configProviderInjectionKey } from "../config-provider/context.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import { isNumber } from "../_utils/is.js";
-import { off, on } from "../_utils/dom.js";
-import useMergeState from "../_hooks/use-merge-state.js";
-import { KEYBOARD_KEY } from "../_utils/keyboard.js";
-import usePopupManager from "../_hooks/use-popup-manager.js";
+import { useScrollbar } from "../_hooks/use-scrollbar.js";
+import Scrollbar from "../scrollbar/index.js";
 import IconRight from "../icon/icon-right/index.js";
+import { useThemeMode } from "../_hooks/use-theme-mode.js";
 import IconLeft from "../icon/icon-left/index.js";
-import { LayoutSiderInjectionKey, SiderInjectionKey } from "./context.js";
-import { useResponsive } from "../_hooks/use-responsive.js";
-import ResizeBox from "../resize-box/index.js";
-import { SIDER_LOCATIONS } from "./utils.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, renderSlot, resolveDynamicComponent, toRefs, unref, watch, withCtx } from "vue";
+import { LayoutContextInjectionKey, SiderContextInjectionKey } from "./context.js";
+import IconMenu from "../icon/icon-menu/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toRef, unref, watch, withCtx } from "vue";
 //#region components/layout/sider.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { key: 0 };
-var _hoisted_2 = { key: 1 };
 var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "LayoutSider" }), {}, {
 	__name: "sider",
 	props: {
 		/**
-		* @zh 主题颜色
-		* @en Theme
+		* @zh 是否可折叠
+		* @en Whether can be collapsed
 		*/
-		theme: {
-			type: String,
-			default: "light"
-		},
-		/**
-		* @zh 抽屉是否可见
-		* @en Whether navigation drawer is visible
-		*/
-		modelValue: {
-			type: Boolean,
-			default: void 0
-		},
-		/**
-		* @zh 默认是否显示抽屉
-		* @en Whether navigation drawer is visible by default
-		*/
-		defaultVisible: {
+		collapsible: {
 			type: Boolean,
 			default: false
 		},
 		/**
-		* @zh 当前收起状态
-		* @en Current collapsed state
+		* @zh 当前折叠状态（受控）
+		* @en Current collapsed state (controlled)
 		*/
 		collapsed: {
 			type: Boolean,
 			default: void 0
 		},
 		/**
-		* @zh 默认的收起状态
-		* @en The default collapsed state
+		* @zh 默认折叠状态（非受控）
+		* @en Default collapsed state (uncontrolled)
 		*/
 		defaultCollapsed: {
 			type: Boolean,
 			default: false
 		},
 		/**
-		* @zh 是否可收起
-		* @en Whether is collapsible
+		* @zh 折叠时是否反转箭头方向
+		* @en Whether to reverse the arrow direction when collapsed
 		*/
-		collapsible: { type: Boolean },
+		reverseArrow: {
+			type: Boolean,
+			default: false
+		},
 		/**
-		* @zh 是否启用 rail 模式
-		* @en Whether to enable rail mode
+		* @zh collapsedWidth 为 0 时零宽触发器的自定义样式
+		* @en Custom style of zero-width trigger when collapsedWidth is 0
 		*/
-		rail: {
-			type: Boolean,
+		zeroWidthTriggerStyle: {
+			type: Object,
 			default: void 0
 		},
 		/**
-		* @zh 默认是否启用 rail 模式
-		* @en Whether to enable rail mode by default
+		* @zh 是否隐藏内置折叠触发器，配合受控的 collapsed 自行控制折叠
+		* @en Whether to hide the built-in collapse trigger, control collapse via collapsed
 		*/
-		defaultRail: {
+		hideTrigger: {
 			type: Boolean,
 			default: false
 		},
 		/**
-		* @zh rail 模式下的宽度
-		* @en Width in rail mode
-		*/
-		railWidth: {
-			type: [Number, String],
-			default: 56
-		},
-		/**
-		* @zh 是否在 hover 时临时展开 rail
-		* @en Whether to expand rail on hover
-		*/
-		expandOnHover: { type: Boolean },
-		/**
-		* @zh 是否禁用响应式宽度监听
-		* @en Whether to disable resize watcher
-		*/
-		disableResizeWatcher: { type: Boolean },
-		/**
-		* @zh 是否禁用路由切换时自动关闭临时抽屉
-		* @en Whether to disable route watcher
-		*/
-		disableRouteWatcher: { type: Boolean },
-		/**
-		* @zh 宽度
-		* @en Width
+		* @zh 展开时的宽度
+		* @en Width when expanded
 		*/
 		width: {
 			type: [Number, String],
 			default: 200
 		},
 		/**
-		* @zh 顶部或底部抽屉的高度
-		* @en Height of top or bottom drawer
-		*/
-		height: {
-			type: [Number, String],
-			default: void 0
-		},
-		/**
-		* @zh 收缩宽度
-		* @en Collapsed width
+		* @zh 折叠时的宽度
+		* @en Width when collapsed
 		*/
 		collapsedWidth: {
-			type: Number,
+			type: [Number, String],
 			default: 48
 		},
 		/**
-		* @zh 是否为临时抽屉模式
-		* @en Whether to use temporary drawer mode
-		*/
-		temporary: { type: Boolean },
-		/**
-		* @zh 是否始终显示抽屉
-		* @en Whether to always keep the drawer active
-		*/
-		permanent: { type: Boolean },
-		/**
-		* @zh 临时抽屉模式下点击遮罩后是否保持显示
-		* @en Whether temporary drawer should stay open after scrim click
-		*/
-		persistent: { type: Boolean },
-		/**
-		* @zh 是否显示遮罩层
-		* @en Whether to show the temporary drawer mask
-		*/
-		mask: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 点击遮罩层是否可以关闭抽屉
-		* @en Whether the drawer can be closed by clicking the mask
-		*/
-		maskClosable: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 是否支持通过 ESC 键关闭临时抽屉
-		* @en Whether temporary drawer can be closed with ESC
-		*/
-		escToClose: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 抽屉停靠位置
-		* @en Navigation drawer location
+		* @zh 响应式断点，命中断点时自动折叠
+		* @en Responsive breakpoint, auto collapse when matched
 		*/
-		location: {
+		breakpoint: {
 			type: String,
-			default: "start",
-			validator: (value) => SIDER_LOCATIONS.includes(value)
+			default: void 0
 		},
 		/**
-		* @zh 是否启用浮动模式
-		* @en Whether to enable floating mode
-		*/
-		floating: { type: Boolean },
-		/**
-		* @zh 是否启用粘性定位
-		* @en Whether to enable sticky mode
-		*/
-		sticky: { type: Boolean },
-		/**
-		* @zh 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用
-		* @en Flip and fold the direction of the hint arrow, which can be used when Sider is on the right
-		*/
-		reverseArrow: { type: Boolean },
-		/**
-		* @zh 触发响应式布局的断点, 详见[响应式栅格](/vue/component/grid)
-		* @en Trigger breakpoints for responsive layout, see [Responsive Grid](/vue/component/grid) for details
-		*/
-		breakpoint: { type: String },
-		/**
-		* @zh 可以用 ResizeBox 替换原生的 `aside` 标签，这个参数即 ResizeBox的 `directions` 参数。详情请看 [ResizeBox](/vue/component/resize-box)。
-		* @en Can replace the native `aside` tag with ResizeBox. This is the `directions` parameter of ResizeBox. For details, please see [ResizeBox](/vue/component/resize-box)
+		* @zh 主题颜色，未设置时跟随 ConfigProvider 的 themeMode
+		* @en Theme color, follows ConfigProvider's themeMode when not set
 		*/
-		resizeDirections: {
-			type: Array,
+		theme: {
+			type: String,
 			default: void 0
 		},
 		/**
-		* @zh 隐藏底部折叠触发器
-		* @en Whether to hide the bottom fold trigger
+		* @zh 滚动配置，默认使用组件库 Scrollbar；设为 false 使用原生 overflow:auto，传对象可配置 Scrollbar
+		* @en Scroll config, use the component Scrollbar by default; set to false for native overflow:auto, pass an object to configure Scrollbar
 		*/
-		hideTrigger: { type: Boolean }
+		scrollbar: {
+			type: [Object, Boolean],
+			default: void 0
+		}
 	},
-	emits: [
-		"update:modelValue",
-		"update:rail",
-		"collapse",
-		"update:collapsed",
-		"breakpoint"
-	],
+	emits: ["collapse", "breakpoint"],
 	setup(__props, { emit: __emit }) {
-		const generateId = (() => {
-			let i = 0;
-			return (prefix = "") => {
-				i += 1;
-				return `${prefix}${i}`;
-			};
-		})();
+		var _props$collapsed;
+		let siderUuid = 0;
+		const generateId = (prefix = "") => {
+			siderUuid += 1;
+			return `${prefix}${siderUuid}`;
+		};
 		const props = __props;
 		const emit = __emit;
-		/**
-		* @zh 自定义底部折叠触发器
-		* @en Custom bottom folding trigger
-		* @slot trigger
-		* @binding {boolean} collapsed
-		*/
-		const { theme, modelValue, defaultVisible, collapsed, defaultCollapsed, collapsible, rail, defaultRail, expandOnHover, disableResizeWatcher, disableRouteWatcher, hideTrigger, breakpoint, height, collapsedWidth, mask, maskClosable, escToClose, location, floating, permanent, persistent, sticky, temporary, resizeDirections } = toRefs(props);
 		const prefixCls = getPrefixCls("layout-sider");
-		const [localCollapsed, setLocalCollapsed] = useMergeState(defaultCollapsed.value, reactive({ value: collapsed }));
-		const [drawerVisible, setDrawerVisible] = useMergeState(defaultVisible.value, reactive({ value: modelValue }));
-		const [railCollapsed, setRailCollapsed] = useMergeState(defaultRail.value, reactive({ value: rail }));
-		const physicalLocation = computed(() => {
-			if (location.value === "start") return "left";
-			if (location.value === "end") return "right";
-			return location.value;
-		});
-		const isHorizontal = computed(() => ["left", "right"].includes(physicalLocation.value));
-		const isTemporary = computed(() => !permanent.value && !!temporary.value);
-		const isDrawerActive = computed(() => !!permanent.value || drawerVisible.value);
-		const temporaryVisible = computed(() => isTemporary.value && isDrawerActive.value);
-		const railModeEnabled = computed(() => {
-			var _rail$value;
-			return ((_rail$value = rail === null || rail === void 0 ? void 0 : rail.value) !== null && _rail$value !== void 0 ? _rail$value : defaultRail.value) || railCollapsed.value;
-		});
-		const { zIndex } = usePopupManager("dialog", { visible: temporaryVisible });
-		const componentTag = computed(() => (resizeDirections === null || resizeDirections === void 0 ? void 0 : resizeDirections.value) && !isTemporary.value && isHorizontal.value ? ResizeBox : "div");
-		const resizeDirectionsProps = computed(() => componentTag.value === ResizeBox && (resizeDirections === null || resizeDirections === void 0 ? void 0 : resizeDirections.value) ? { directions: resizeDirections.value } : {});
-		const showTrigger = computed(() => collapsible.value && !hideTrigger.value && !isTemporary.value && isHorizontal.value);
-		const siderSize = computed(() => {
-			let rawSize = props.width;
-			if (localCollapsed.value) rawSize = props.collapsedWidth;
-			else if (railCollapsed.value) rawSize = props.railWidth;
-			return isNumber(rawSize) ? `${rawSize}px` : String(rawSize);
-		});
-		const crossAxisSize = computed(() => {
-			var _height$value;
-			const rawSize = (_height$value = height === null || height === void 0 ? void 0 : height.value) !== null && _height$value !== void 0 ? _height$value : props.width;
-			return isNumber(rawSize) ? `${rawSize}px` : String(rawSize);
-		});
-		const siderStyles = computed(() => {
-			const style = isHorizontal.value ? { width: siderSize.value } : { height: crossAxisSize.value };
-			if (!isTemporary.value) {
-				if (sticky.value && isHorizontal.value) return _objectSpread2(_objectSpread2({}, style), {}, {
-					position: "sticky",
-					top: "0",
-					alignSelf: "flex-start",
-					maxHeight: "100vh"
-				});
-				return style;
-			}
-			return _objectSpread2(_objectSpread2({}, style), {}, {
-				[physicalLocation.value]: 0,
-				zIndex: zIndex.value || void 0
-			});
-		});
-		const triggerStyles = computed(() => ({ width: siderSize.value }));
-		const showMask = computed(() => isTemporary.value && isDrawerActive.value && mask.value);
-		const maskStyles = computed(() => {
-			const baseStyle = { zIndex: zIndex.value ? zIndex.value - 1 : void 0 };
-			if (!showMask.value) return baseStyle;
-			if (physicalLocation.value === "left") return _objectSpread2(_objectSpread2({}, baseStyle), {}, {
-				top: 0,
-				right: 0,
-				bottom: 0,
-				left: siderSize.value
-			});
-			if (physicalLocation.value === "right") return _objectSpread2(_objectSpread2({}, baseStyle), {}, {
-				top: 0,
-				right: siderSize.value,
-				bottom: 0,
-				left: 0
-			});
-			if (physicalLocation.value === "top") return _objectSpread2(_objectSpread2({}, baseStyle), {}, {
-				top: crossAxisSize.value,
-				right: 0,
-				bottom: 0,
-				left: 0
-			});
-			return _objectSpread2(_objectSpread2({}, baseStyle), {}, {
-				top: 0,
-				right: 0,
-				bottom: crossAxisSize.value,
-				left: 0
-			});
-		});
-		const classNames = computed(() => [prefixCls, {
-			[`${prefixCls}-light`]: theme.value === "light",
-			[`${prefixCls}-has-trigger`]: showTrigger.value,
-			[`${prefixCls}-collapsed`]: localCollapsed.value,
-			[`${prefixCls}-temporary`]: isTemporary.value,
-			[`${prefixCls}-persistent`]: persistent.value,
-			[`${prefixCls}-active`]: isDrawerActive.value,
-			[`${prefixCls}-rail`]: railCollapsed.value,
-			[`${prefixCls}-expand-on-hover`]: expandOnHover.value,
-			[`${prefixCls}-floating`]: floating.value,
-			[`${prefixCls}-sticky`]: sticky.value,
-			[`${prefixCls}-${physicalLocation.value}`]: true
-		}]);
-		const triggerClassNames = computed(() => [`${prefixCls}-trigger`, { [`${prefixCls}-trigger-light`]: theme.value === "light" }]);
-		const setVisibleState = (nextVisible) => {
-			setDrawerVisible(nextVisible);
-			emit("update:modelValue", nextVisible);
-		};
-		const setRailState = (nextRail) => {
-			setRailCollapsed(nextRail);
-			emit("update:rail", nextRail);
-		};
-		const toggleTrigger = () => {
-			const nextCollapsed = !localCollapsed.value;
-			setLocalCollapsed(nextCollapsed);
-			emit("update:collapsed", nextCollapsed);
-			emit("collapse", nextCollapsed, "clickTrigger");
-		};
-		const handleMaskClick = () => {
-			if (!maskClosable.value || persistent.value) return;
-			setVisibleState(false);
+		const dimensionMaxMap = {
+			xs: "479.98px",
+			sm: "575.98px",
+			md: "767.98px",
+			lg: "991.98px",
+			xl: "1199.98px",
+			xxl: "1599.98px",
+			xxxl: "1839.98px"
 		};
-		const handleGlobalKeyDown = (event) => {
-			if (event.key === KEYBOARD_KEY.ESC && escToClose.value && isTemporary.value && !persistent.value) setVisibleState(false);
-		};
-		const handleRouteChange = () => {
-			if (isTemporary.value && isDrawerActive.value && !disableRouteWatcher.value) setVisibleState(false);
+		const isNumeric = (val) => !Number.isNaN(Number.parseFloat(val)) && Number.isFinite(Number(val));
+		const toSiderWidth = (val) => isNumeric(val) ? `${val}px` : String(val);
+		const isControlled = computed(() => props.collapsed !== void 0);
+		const collapsedState = ref((_props$collapsed = props.collapsed) !== null && _props$collapsed !== void 0 ? _props$collapsed : props.defaultCollapsed);
+		watch(() => props.collapsed, (val) => {
+			if (val !== void 0) collapsedState.value = val;
+		});
+		const mergedCollapsed = computed(() => isControlled.value ? props.collapsed : collapsedState.value);
+		const handleSetCollapsed = (value, type) => {
+			if (!isControlled.value) collapsedState.value = value;
+			emit("collapse", value, type);
 		};
-		const handleMouseEnter = () => {
-			if (expandOnHover.value && railModeEnabled.value && railCollapsed.value) setRailState(false);
+		const toggle = () => {
+			handleSetCollapsed(!mergedCollapsed.value, "clickTrigger");
 		};
-		const handleMouseLeave = () => {
-			if (expandOnHover.value && railModeEnabled.value && !railCollapsed.value) setRailState(true);
+		const below = ref(false);
+		const setupResponsive = () => {
+			const { breakpoint } = props;
+			if (typeof window === "undefined" || !window.matchMedia || !breakpoint) return;
+			const max = dimensionMaxMap[breakpoint];
+			if (!max) return;
+			const mql = window.matchMedia(`screen and (max-width: ${max})`);
+			const handler = (m) => {
+				below.value = m.matches;
+				emit("breakpoint", m.matches);
+				if (mergedCollapsed.value !== m.matches) handleSetCollapsed(m.matches, "responsive");
+			};
+			if (typeof mql.addEventListener === "function") mql.addEventListener("change", handler);
+			else if (typeof mql.addListener === "function") mql.addListener(handler);
+			handler(mql);
+			return () => {
+				if (typeof mql.removeEventListener === "function") mql.removeEventListener("change", handler);
+				else if (typeof mql.removeListener === "function") mql.removeListener(handler);
+			};
 		};
-		useResponsive(breakpoint, (checked) => {
-			if (disableResizeWatcher.value) return;
-			const nextCollapsed = !checked;
-			if (nextCollapsed !== localCollapsed.value) {
-				setLocalCollapsed(nextCollapsed);
-				emit("update:collapsed", nextCollapsed);
-				emit("collapse", nextCollapsed, "responsive");
-				emit("breakpoint", nextCollapsed);
-			}
+		let cleanupResponsive;
+		onMounted(() => {
+			cleanupResponsive = setupResponsive();
 		});
-		watch(() => props.permanent, (nextPermanent) => {
-			if (nextPermanent) setVisibleState(true);
+		watch(() => props.breakpoint, () => {
+			cleanupResponsive === null || cleanupResponsive === void 0 || cleanupResponsive();
+			cleanupResponsive = setupResponsive();
 		});
-		watch([
-			isTemporary,
-			isDrawerActive,
-			escToClose
-		], ([nextTemporary, nextActive, nextEsc]) => {
-			off(document.documentElement, "keydown", handleGlobalKeyDown);
-			if (nextTemporary && nextActive && nextEsc) on(document.documentElement, "keydown", handleGlobalKeyDown);
-		}, { immediate: true });
-		watch([
-			isTemporary,
-			isDrawerActive,
-			disableRouteWatcher
-		], ([nextTemporary, nextActive, nextDisableRouteWatcher]) => {
-			off(window, "popstate", handleRouteChange);
-			off(window, "hashchange", handleRouteChange);
-			if (nextTemporary && nextActive && !nextDisableRouteWatcher) {
-				on(window, "popstate", handleRouteChange);
-				on(window, "hashchange", handleRouteChange);
-			}
-		}, { immediate: true });
-		const uniqueId = generateId("__arco_layout_sider");
-		const siderHook = inject(LayoutSiderInjectionKey, void 0);
+		onUnmounted(() => {
+			cleanupResponsive === null || cleanupResponsive === void 0 || cleanupResponsive();
+		});
+		const { siderHook } = inject(LayoutContextInjectionKey, { siderHook: {
+			addSider: () => {},
+			removeSider: () => {}
+		} });
+		let siderId = "";
 		onMounted(() => {
-			var _siderHook$onSiderMou;
-			siderHook === null || siderHook === void 0 || (_siderHook$onSiderMou = siderHook.onSiderMount) === null || _siderHook$onSiderMou === void 0 || _siderHook$onSiderMou.call(siderHook, uniqueId);
+			siderId = generateId("sd-sider-");
+			siderHook.addSider(siderId);
 		});
 		onUnmounted(() => {
-			var _siderHook$onSiderUnM;
-			off(document.documentElement, "keydown", handleGlobalKeyDown);
-			off(window, "popstate", handleRouteChange);
-			off(window, "hashchange", handleRouteChange);
-			siderHook === null || siderHook === void 0 || (_siderHook$onSiderUnM = siderHook.onSiderUnMount) === null || _siderHook$onSiderUnM === void 0 || _siderHook$onSiderUnM.call(siderHook, uniqueId);
+			siderHook.removeSider(siderId);
+		});
+		const configProvider = inject(configProviderInjectionKey, void 0);
+		const rtl = computed(() => {
+			var _configProvider$rtl;
+			return (_configProvider$rtl = configProvider === null || configProvider === void 0 ? void 0 : configProvider.rtl) !== null && _configProvider$rtl !== void 0 ? _configProvider$rtl : false;
+		});
+		const rootEl = ref(null);
+		const detectedThemeMode = useThemeMode(rootEl);
+		const mergedTheme = computed(() => {
+			var _props$theme;
+			return (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : detectedThemeMode.value;
 		});
-		provide(SiderInjectionKey, reactive({
-			theme,
-			collapsed: computed(() => localCollapsed.value || railCollapsed.value),
-			collapsedWidth
+		const reverseIcon = computed(() => rtl.value === !props.reverseArrow);
+		const defaultTriggerComponent = computed(() => {
+			const expandedIcon = reverseIcon.value ? IconRight : IconLeft;
+			const collapsedIcon = reverseIcon.value ? IconLeft : IconRight;
+			return mergedCollapsed.value ? collapsedIcon : expandedIcon;
+		});
+		const rawWidth = computed(() => mergedCollapsed.value ? props.collapsedWidth : props.width);
+		const siderWidth = computed(() => toSiderWidth(rawWidth.value));
+		const hasZeroWidth = computed(() => Number.parseFloat(String(props.collapsedWidth || 0)) === 0);
+		const renderTrigger = computed(() => (props.collapsible || below.value && hasZeroWidth.value) && !props.hideTrigger);
+		const { scrollbarProps } = useScrollbar(toRef(props, "scrollbar"));
+		const useNativeScrollbar = computed(() => props.scrollbar === false);
+		const divStyle = computed(() => ({
+			flex: `0 0 ${siderWidth.value}`,
+			maxWidth: siderWidth.value,
+			minWidth: siderWidth.value,
+			width: siderWidth.value
 		}));
+		const siderCls = computed(() => [
+			prefixCls,
+			`${prefixCls}-${mergedTheme.value}`,
+			{
+				[`${prefixCls}-collapsed`]: mergedCollapsed.value,
+				[`${prefixCls}-has-trigger`]: props.collapsible && !props.hideTrigger && !hasZeroWidth.value,
+				[`${prefixCls}-below`]: below.value,
+				[`${prefixCls}-zero-width`]: Number.parseFloat(siderWidth.value) === 0
+			}
+		]);
+		const siderContext = reactive({
+			siderCollapsed: mergedCollapsed.value,
+			theme: mergedTheme.value
+		});
+		watch(mergedCollapsed, (val) => {
+			siderContext.siderCollapsed = val;
+		});
+		watch(mergedTheme, (val) => {
+			siderContext.theme = val;
+		});
+		provide(SiderContextInjectionKey, siderContext);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(componentTag.value), mergeProps({
-				class: classNames.value,
-				style: siderStyles.value
-			}, resizeDirectionsProps.value, {
-				onMouseenter: handleMouseEnter,
-				onMouseleave: handleMouseLeave
-			}), {
-				default: withCtx(() => [
-					showMask.value ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: normalizeClass(`${unref(prefixCls)}-mask`),
-						style: normalizeStyle(maskStyles.value),
-						onClick: handleMaskClick
-					}, null, 6)) : createCommentVNode("", true),
-					_ctx.$slots.image ? (openBlock(), createElementBlock("div", {
-						key: 1,
-						class: normalizeClass(`${unref(prefixCls)}-image`)
-					}, [renderSlot(_ctx.$slots, "image")], 2)) : createCommentVNode("", true),
-					_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
-						key: 2,
-						class: normalizeClass(`${unref(prefixCls)}-prepend`)
-					}, [renderSlot(_ctx.$slots, "prepend")], 2)) : createCommentVNode("", true),
-					createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-children`) }, [renderSlot(_ctx.$slots, "default")], 2),
-					_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
-						key: 3,
-						class: normalizeClass(`${unref(prefixCls)}-append`)
-					}, [renderSlot(_ctx.$slots, "append")], 2)) : createCommentVNode("", true),
-					showTrigger.value ? (openBlock(), createElementBlock("div", {
-						key: 4,
-						class: normalizeClass(triggerClassNames.value),
-						style: normalizeStyle(triggerStyles.value),
-						onClick: toggleTrigger
-					}, [renderSlot(_ctx.$slots, "trigger", { collapsed: unref(localCollapsed) }, () => [!__props.reverseArrow ? (openBlock(), createElementBlock("div", _hoisted_1, [!unref(localCollapsed) ? (openBlock(), createBlock(unref(IconLeft), { key: 0 })) : (openBlock(), createBlock(unref(IconRight), { key: 1 }))])) : (openBlock(), createElementBlock("div", _hoisted_2, [unref(localCollapsed) ? (openBlock(), createBlock(unref(IconLeft), { key: 0 })) : (openBlock(), createBlock(unref(IconRight), { key: 1 }))]))])], 6)) : createCommentVNode("", true)
-				]),
-				_: 3
-			}, 16, ["class", "style"]);
+			return openBlock(), createElementBlock("aside", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				class: normalizeClass(siderCls.value),
+				style: normalizeStyle(divStyle.value)
+			}, [
+				_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-header`)
+				}, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true),
+				useNativeScrollbar.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass([`${unref(prefixCls)}-children`, `${unref(prefixCls)}-children-scroll`])
+				}, [renderSlot(_ctx.$slots, "default")], 2)) : (openBlock(), createBlock(unref(Scrollbar), mergeProps({
+					key: 2,
+					"outer-class": `${unref(prefixCls)}-children`
+				}, unref(scrollbarProps)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["outer-class"])),
+				renderTrigger.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [hasZeroWidth.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass([`${unref(prefixCls)}-zero-width-trigger`, `${unref(prefixCls)}-zero-width-trigger-${__props.reverseArrow ? "right" : "left"}`]),
+					style: normalizeStyle(__props.zeroWidthTriggerStyle),
+					onClick: toggle
+				}, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(IconMenu))])], 6)) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-trigger`),
+					style: normalizeStyle({ width: siderWidth.value }),
+					onClick: toggle
+				}, [renderSlot(_ctx.$slots, "trigger", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(defaultTriggerComponent.value)))])], 6))], 64)) : createCommentVNode("", true)
+			], 6);
 		};
 	}
 }));