@sdata/web-vue 1.14.0 → 1.18.0

package/es/layout/sider.vue_vue_type_script_lang.js

@@ -1,13 +1,25 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/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 IconRight from "../icon/icon-right/index.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 { computed, defineComponent, inject, onMounted, onUnmounted, provide, reactive, toRefs } from "vue";
-//#region components/layout/sider.vue?vue&type=script&lang.tsx
+import { computed, defineComponent, inject, onMounted, onUnmounted, provide, reactive, toRefs, watch } from "vue";
+//#region components/layout/sider.vue?vue&type=script&lang.ts
+var SIDER_LOCATIONS = [
+	"start",
+	"end",
+	"left",
+	"right",
+	"top",
+	"bottom"
+];
 var generateId = (() => {
 	let i = 0;
 	return (prefix = "") => {
@@ -15,7 +27,7 @@ var generateId = (() => {
 		return `${prefix}${i}`;
 	};
 })();
-var sider_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
+var sider_vue_vue_type_script_lang_default = defineComponent({
 	name: "LayoutSider",
 	components: {
 		IconLeft,
@@ -32,6 +44,22 @@ var sider_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 			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: {
+			type: Boolean,
+			default: false
+		},
+		/**
 		* @zh 当前收起状态
 		* @en Current collapsed state
 		*/
@@ -43,21 +71,71 @@ var sider_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 		* @zh 默认的收起状态
 		* @en The default collapsed state
 		*/
-		defaultCollapsed: { type: Boolean },
+		defaultCollapsed: {
+			type: Boolean,
+			default: false
+		},
 		/**
 		* @zh 是否可收起
 		* @en Whether is collapsible
 		*/
 		collapsible: { type: Boolean },
 		/**
+		* @zh 是否启用 rail 模式
+		* @en Whether to enable rail mode
+		*/
+		rail: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* @zh 默认是否启用 rail 模式
+		* @en Whether to enable rail mode by default
+		*/
+		defaultRail: {
+			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
 		*/
 		width: {
-			type: Number,
+			type: [Number, String],
 			default: 200
 		},
 		/**
+		* @zh 顶部或底部抽屉的高度
+		* @en Height of top or bottom drawer
+		*/
+		height: {
+			type: [Number, String],
+			default: void 0
+		},
+		/**
 		* @zh 收缩宽度
 		* @en Collapsed width
 		*/
@@ -66,6 +144,64 @@ var sider_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 			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
+		*/
+		location: {
+			type: String,
+			default: "start",
+			validator: (value) => SIDER_LOCATIONS.includes(value)
+		},
+		/**
+		* @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
 		*/
@@ -90,6 +226,8 @@ var sider_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 		hideTrigger: { type: Boolean }
 	},
 	emits: [
+		"update:modelValue",
+		"update:rail",
 		"collapse",
 		"update:collapsed",
 		"breakpoint"
@@ -101,37 +239,162 @@ var sider_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 	* @binding {boolean} collapsed
 	*/
 	setup(props, { emit }) {
-		const { theme, collapsed, defaultCollapsed, collapsible, hideTrigger, breakpoint, collapsedWidth, resizeDirections } = toRefs(props);
-		const [localCollapsed, setLocalCollapsed] = useMergeState(defaultCollapsed.value, reactive({ value: collapsed }));
-		const componentTag = computed(() => resizeDirections.value ? "ResizeBox" : "div");
-		const showTrigger = computed(() => collapsible.value && !hideTrigger.value);
+		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.value) !== null && _rail$value !== void 0 ? _rail$value : defaultRail.value) || railCollapsed.value;
+		});
+		const { zIndex } = usePopupManager("dialog", { visible: temporaryVisible });
+		const componentTag = computed(() => resizeDirections.value && !isTemporary.value && isHorizontal.value ? ResizeBox : "div");
+		const resizeDirectionsProps = computed(() => componentTag.value === ResizeBox && 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.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`]: collapsed.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 siderWidth = computed(() => {
-			const { width, collapsedWidth } = props;
-			const rawWidth = localCollapsed.value ? collapsedWidth : width;
-			return isNumber(rawWidth) ? `${rawWidth}px` : String(rawWidth);
-		});
 		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 newCollapsed = !localCollapsed.value;
-			setLocalCollapsed(newCollapsed);
-			emit("update:collapsed", newCollapsed);
-			emit("collapse", newCollapsed, "clickTrigger");
+			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 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 handleMouseEnter = () => {
+			if (expandOnHover.value && railModeEnabled.value && railCollapsed.value) setRailState(false);
+		};
+		const handleMouseLeave = () => {
+			if (expandOnHover.value && railModeEnabled.value && !railCollapsed.value) setRailState(true);
 		};
 		useResponsive(breakpoint, (checked) => {
-			const newCollapsed = !checked;
-			if (newCollapsed !== localCollapsed.value) {
-				setLocalCollapsed(newCollapsed);
-				emit("update:collapsed", newCollapsed);
-				emit("collapse", newCollapsed, "responsive");
-				emit("breakpoint", newCollapsed);
+			if (disableResizeWatcher.value) return;
+			const nextCollapsed = !checked;
+			if (nextCollapsed !== localCollapsed.value) {
+				setLocalCollapsed(nextCollapsed);
+				emit("update:collapsed", nextCollapsed);
+				emit("collapse", nextCollapsed, "responsive");
+				emit("breakpoint", nextCollapsed);
 			}
 		});
+		watch(() => props.permanent, (nextPermanent) => {
+			if (nextPermanent) setVisibleState(true);
+		});
+		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);
 		onMounted(() => {
@@ -140,22 +403,32 @@ var sider_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
 		});
 		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);
 		});
 		provide(SiderInjectionKey, reactive({
 			theme,
-			collapsed: localCollapsed,
+			collapsed: computed(() => localCollapsed.value || railCollapsed.value),
 			collapsedWidth
 		}));
 		return {
-			componentTag,
-			prefixCls,
 			classNames,
-			triggerClassNames,
+			componentTag,
+			handleMaskClick,
+			handleMouseEnter,
+			handleMouseLeave,
 			localCollapsed,
-			siderWidth,
+			prefixCls,
+			resizeDirectionsProps,
+			showMask,
+			maskStyles,
 			showTrigger,
-			toggleTrigger
+			siderStyles,
+			toggleTrigger,
+			triggerClassNames,
+			triggerStyles
 		};
 	}
 });

package/es/layout/style/index.css

@@ -26,15 +26,26 @@
   position: relative;
   flex: none;
   width: auto;
+  max-width: 100%;
   margin: 0;
   padding: 0;
+  overflow: hidden;
   background: var(--color-menu-dark-bg);
-  transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.sd-layout-sider-image, .sd-layout-sider-prepend, .sd-layout-sider-append {
+  flex: none;
 }
 .sd-layout-sider-children {
+  flex: 1;
   height: 100%;
   overflow: auto;
 }
+.sd-layout-sider-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
 .sd-layout-sider-collapsed .sd-layout-sider-children {
   /* width */
 }
@@ -42,10 +53,19 @@
   width: 0;
 }
 .sd-layout-sider-has-trigger {
+  display: flex;
+  flex-direction: column;
   box-sizing: border-box;
   padding-bottom: 48px;
 }
+.sd-layout-sider-rail {
+  width: 56px;
+}
 .sd-layout-sider-trigger {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: 1;
   display: flex;
   align-items: center;
@@ -63,14 +83,148 @@
   background: var(--color-menu-light-bg);
   border-top: 1px solid var(--color-bg-5);
 }
+.sd-layout-sider-floating {
+  box-shadow: none;
+}
+.sd-layout-sider-sticky {
+  z-index: 1;
+}
+.sd-layout-sider-temporary {
+  position: fixed;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+}
+.sd-layout-sider-temporary.sd-layout-sider-left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+}
+.sd-layout-sider-temporary.sd-layout-sider-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateX(100%);
+}
+.sd-layout-sider-temporary.sd-layout-sider-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(-100%);
+}
+.sd-layout-sider-temporary.sd-layout-sider-bottom {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(100%);
+}
+.sd-layout-sider-temporary.sd-layout-sider-active {
+  transform: translate(0, 0);
+}
 .sd-layout-sider-light {
   background: var(--color-menu-light-bg);
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
 }
 .sd-layout-header {
+  position: relative;
   flex: 0 0 auto;
   box-sizing: border-box;
   margin: 0;
+  overflow: hidden;
+  color: var(--color-text-1);
+  background: var(--color-bg-2);
+  border-bottom: 1px solid var(--color-border-2);
+  transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.sd-layout-header-wrapper {
+  width: 100%;
+}
+.sd-layout-header-bar, .sd-layout-header-extension, .sd-layout-header-prepend, .sd-layout-header-append, .sd-layout-header-content {
+  display: flex;
+  align-items: center;
+}
+.sd-layout-header-bar {
+  position: relative;
+  z-index: 1;
+  gap: 16px;
+  min-height: var(--sd-layout-header-content-height, 64px);
+  padding: 0 20px;
+}
+.sd-layout-header-prepend, .sd-layout-header-append {
+  flex: none;
+  gap: 8px;
+}
+.sd-layout-header-title {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  max-width: min(40%, 480px);
+  overflow: hidden;
+  color: inherit;
+  font-weight: 600;
+  font-size: 18px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sd-layout-header-content {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  gap: 8px;
+  min-width: 0;
+}
+.sd-layout-header-extension {
+  position: relative;
+  z-index: 1;
+  gap: 8px;
+  min-height: var(--sd-layout-header-extension-height, 48px);
+  padding: 0 20px;
+  border-top: 1px solid var(--color-border-2);
+}
+.sd-layout-header-image {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+.sd-layout-header-image::after {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.36));
+  content: "";
+}
+.sd-layout-header-image-inner, .sd-layout-header-image :is(img, picture, video) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: var(--sd-layout-header-image-opacity, 1);
+  transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.sd-layout-header-flat {
+  box-shadow: none;
+}
+.sd-layout-header:not(.sd-layout-header-flat) {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+.sd-layout-header-floating {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
+}
+.sd-layout-header-hidden {
+  pointer-events: none;
+}
+.sd-layout-header-collapsed .sd-layout-header-extension {
+  display: none;
+}
+.sd-layout-header-with-image {
+  color: var(--color-white);
+  border-bottom-color: transparent;
+}
+.sd-layout-header-with-image .sd-layout-header-extension {
+  border-top-color: rgba(255, 255, 255, 0.16);
+}
+.sd-layout-header-bottom {
+  border-top: 1px solid var(--color-border-2);
+  border-bottom: 0;
 }
 .sd-layout-content {
   flex: 1;