@sdata/web-vue 2.3.1 → 2.8.0

package/es/layout/context.js

@@ -1,5 +1,13 @@
 //#region components/layout/context.ts
-var LayoutSiderInjectionKey = Symbol("LayoutSiderInjectionKey");
-var SiderInjectionKey = Symbol("SiderInjectionKey");
+/**
+* @zh Layout 上下文注入键
+* @en Layout context injection key
+*/
+var LayoutContextInjectionKey = Symbol("LayoutContext");
+/**
+* @zh Sider 上下文注入键
+* @en Sider context injection key
+*/
+var SiderContextInjectionKey = Symbol("SiderContext");
 //#endregion
-export { LayoutSiderInjectionKey, SiderInjectionKey };
+export { LayoutContextInjectionKey, SiderContextInjectionKey };

package/es/layout/footer.vue.d.ts

@@ -1,6 +1,6 @@
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/layout/footer.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,18 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+import { computed, createBlock, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
 //#region components/layout/footer.vue?vue&type=script&setup=true&lang.ts
+var tagName = "footer";
 var footer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "LayoutFooter" }), {}, {
 	__name: "footer",
 	setup(__props) {
-		const classNames = [getPrefixCls("layout-footer")];
+		const prefixCls = getPrefixCls("layout");
+		const classNames = computed(() => [`${prefixCls}-footer`]);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("footer", { class: normalizeClass(classNames) }, [renderSlot(_ctx.$slots, "default")]);
+			return openBlock(), createBlock(resolveDynamicComponent(tagName), { class: normalizeClass(classNames.value) }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["class"]);
 		};
 	}
 }));

package/es/layout/header.vue.d.ts

@@ -1,35 +1,8 @@
-import type { LayoutHeaderDensity, LayoutHeaderProps } from './interface';
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    image?: (props: typeof __VLS_1) => any;
-} & {
-    prepend?: (props: typeof __VLS_3) => any;
-} & {
-    title?: (props: typeof __VLS_5) => any;
-} & {
-    default?: (props: typeof __VLS_7) => any;
-} & {
-    append?: (props: typeof __VLS_9) => any;
-} & {
-    extension?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<LayoutHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<LayoutHeaderProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    flat: boolean;
-    fixed: boolean;
-    height: number | string;
-    absolute: boolean;
-    sticky: boolean;
-    defaultVisible: boolean;
-    location: "top" | "bottom";
-    density: LayoutHeaderDensity;
-    extensionHeight: number | string;
-    floating: boolean;
-    scrollThreshold: number | string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/es/layout/header.vue_vue_type_script_setup_true_lang.js

@@ -1,348 +1,18 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import { getElement, off, on } from "../_utils/dom.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, toRef, unref, useSlots, watch } from "vue";
+import { computed, createBlock, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
 //#region components/layout/header.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["src"];
-var scrollbarViewportSelector = "[data-overlayscrollbars-viewport]";
+var tagName = "header";
 var header_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "LayoutHeader" }), {}, {
 	__name: "header",
-	props: {
-		title: {},
-		image: {},
-		modelValue: { type: Boolean },
-		defaultVisible: {
-			type: Boolean,
-			default: true
-		},
-		height: { default: 64 },
-		density: { default: "default" },
-		extended: { type: Boolean },
-		extensionHeight: { default: 48 },
-		collapse: { type: Boolean },
-		flat: {
-			type: Boolean,
-			default: false
-		},
-		floating: {
-			type: Boolean,
-			default: false
-		},
-		fixed: {
-			type: Boolean,
-			default: false
-		},
-		sticky: {
-			type: Boolean,
-			default: false
-		},
-		absolute: {
-			type: Boolean,
-			default: false
-		},
-		location: { default: "top" },
-		scrollBehavior: {},
-		scrollTarget: {},
-		scrollThreshold: { default: 300 }
-	},
-	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const slots = useSlots();
-		const instance = getCurrentInstance();
-		const prefixCls = getPrefixCls("layout-header");
-		const scrollbarPrefixCls = getPrefixCls("scrollbar");
-		const headerRef = ref();
-		const modelValue = toRef(props, "modelValue");
-		const localVisible = ref(props.defaultVisible);
-		const currentScroll = ref(0);
-		const isScrollingUp = ref(false);
-		const isAtBottom = ref(false);
-		const reachedBottomWhileScrollingDown = ref(false);
-		const hasEnoughScrollableSpace = ref(true);
-		const scrollTargetRef = ref(null);
-		const isMounted = ref(false);
-		let previousScroll = 0;
-		let previousScrollHeight = 0;
-		const hasModelValueProp = computed(() => {
-			var _instance$vnode$props;
-			return Object.hasOwn((_instance$vnode$props = instance === null || instance === void 0 ? void 0 : instance.vnode.props) !== null && _instance$vnode$props !== void 0 ? _instance$vnode$props : {}, "modelValue");
-		});
-		const hasExtendedProp = computed(() => {
-			var _instance$vnode$props2;
-			return Object.hasOwn((_instance$vnode$props2 = instance === null || instance === void 0 ? void 0 : instance.vnode.props) !== null && _instance$vnode$props2 !== void 0 ? _instance$vnode$props2 : {}, "extended");
-		});
-		const mergedVisible = computed(() => hasModelValueProp.value ? Boolean(modelValue.value) : localVisible.value);
-		const setVisible = (nextVisible) => {
-			if (nextVisible !== mergedVisible.value) {
-				emit("update:modelValue", nextVisible);
-				localVisible.value = nextVisible;
-			}
-		};
-		watch(modelValue, (nextVisible) => {
-			if (hasModelValueProp.value) localVisible.value = nextVisible;
-		});
-		const parseSize = (value, fallback) => {
-			if (typeof value === "number") return value;
-			if (!value) return fallback;
-			const parsed = Number.parseFloat(value);
-			return Number.isNaN(parsed) ? fallback : parsed;
-		};
-		const resolveDensityOffset = (density, baseHeight) => {
-			if (density === "prominent") return baseHeight;
-			if (density === "comfortable") return -8;
-			if (density === "compact") return -16;
-			return 0;
-		};
-		const isWindowTarget = (target) => "document" in target;
-		const getScrollMetrics = (target) => {
-			if (isWindowTarget(target)) return {
-				clientHeight: window.innerHeight,
-				scrollHeight: document.documentElement.scrollHeight
-			};
-			return {
-				clientHeight: target.clientHeight,
-				scrollHeight: target.scrollHeight
-			};
-		};
-		const resolveScrollTop = (target) => {
-			if (isWindowTarget(target)) return window.pageYOffset;
-			return target.scrollTop;
-		};
-		const resolveScopedElement = (selector) => {
-			var _headerRef$value;
-			let scope = (_headerRef$value = headerRef.value) === null || _headerRef$value === void 0 ? void 0 : _headerRef$value.parentElement;
-			while (scope) {
-				if (scope.matches(selector)) return scope;
-				const scopedTarget = getElement(selector, scope);
-				if (scopedTarget) return scopedTarget;
-				scope = scope.parentElement;
-			}
-			return getElement(selector);
-		};
-		const resolveScrollableElement = (target) => {
-			if (target.matches(scrollbarViewportSelector)) return target;
-			const viewport = getElement(scrollbarViewportSelector, target);
-			if (viewport) return viewport;
-			if (target.classList.contains(scrollbarPrefixCls)) return null;
-			return target;
-		};
-		const resolveScrollTarget = () => {
-			if (typeof window === "undefined") return null;
-			if (!props.scrollTarget) return window;
-			const resolvedTarget = resolveScopedElement(props.scrollTarget);
-			if (!resolvedTarget) return null;
-			return resolveScrollableElement(resolvedTarget);
-		};
-		const behavior = computed(() => {
-			var _props$scrollBehavior;
-			const items = new Set((_props$scrollBehavior = props.scrollBehavior) === null || _props$scrollBehavior === void 0 ? void 0 : _props$scrollBehavior.split(" ").filter(Boolean));
-			return {
-				hide: items.has("hide"),
-				fullyHide: items.has("fully-hide"),
-				inverted: items.has("inverted"),
-				collapse: items.has("collapse"),
-				elevate: items.has("elevate"),
-				fadeImage: items.has("fade-image")
-			};
-		});
-		const scrollThreshold = computed(() => parseSize(props.scrollThreshold, 300));
-		const baseContentHeight = computed(() => parseSize(props.height, 64));
-		const contentHeight = computed(() => baseContentHeight.value + resolveDensityOffset(props.density, baseContentHeight.value));
-		const baseExtensionHeight = computed(() => parseSize(props.extensionHeight, 48));
-		const extensionEnabled = computed(() => hasExtendedProp.value ? Boolean(props.extended) : Boolean(slots.extension));
-		const measuredExtensionHeight = computed(() => {
-			if (!extensionEnabled.value) return 0;
-			return Math.max(0, baseExtensionHeight.value + resolveDensityOffset(props.density, baseExtensionHeight.value) / 2);
-		});
-		const fullHeight = computed(() => contentHeight.value + measuredExtensionHeight.value);
-		const scrollRatio = computed(() => {
-			if (scrollThreshold.value <= 0) return currentScroll.value === 0 ? 1 : 0;
-			const ratio = (scrollThreshold.value - currentScroll.value) / scrollThreshold.value;
-			return Math.min(1, Math.max(0, ratio));
-		});
-		const controlsVisibilityByScroll = computed(() => behavior.value.hide || behavior.value.fullyHide);
-		const isCollapsed = computed(() => !!props.collapse || behavior.value.collapse && (behavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
-		const showExtension = computed(() => extensionEnabled.value && mergedVisible.value && !isCollapsed.value);
-		const renderedHeight = computed(() => {
-			if (!mergedVisible.value) return 0;
-			return contentHeight.value + (showExtension.value ? measuredExtensionHeight.value : 0);
-		});
-		const imageOpacity = computed(() => {
-			if (!behavior.value.fadeImage) return 1;
-			return behavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value;
-		});
-		const isFlat = computed(() => props.flat || behavior.value.fullyHide && !mergedVisible.value || behavior.value.elevate && (behavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
-		const hasImage = computed(() => Boolean(props.image || slots.image));
-		const hasTitle = computed(() => Boolean(props.title || slots.title));
-		const wrapperClassNames = computed(() => [`${prefixCls}-wrapper`]);
-		const classNames = computed(() => [prefixCls, {
-			[`${prefixCls}-bottom`]: props.location === "bottom",
-			[`${prefixCls}-fixed`]: props.fixed,
-			[`${prefixCls}-sticky`]: props.sticky,
-			[`${prefixCls}-absolute`]: props.absolute,
-			[`${prefixCls}-flat`]: isFlat.value,
-			[`${prefixCls}-floating`]: props.floating,
-			[`${prefixCls}-hidden`]: !mergedVisible.value,
-			[`${prefixCls}-collapsed`]: isCollapsed.value,
-			[`${prefixCls}-with-image`]: hasImage.value,
-			[`${prefixCls}-with-extension`]: showExtension.value,
-			[`${prefixCls}-with-title`]: hasTitle.value
-		}]);
-		const wrapperStyles = computed(() => {
-			if (!props.fixed || props.absolute) return;
-			return { height: `${renderedHeight.value}px` };
-		});
-		const headerStyles = computed(() => {
-			const styles = {
-				"--sd-layout-header-content-height": `${contentHeight.value}px`,
-				"--sd-layout-header-extension-height": `${measuredExtensionHeight.value}px`,
-				"--sd-layout-header-image-opacity": String(imageOpacity.value),
-				"height": `${renderedHeight.value}px`
-			};
-			if (!mergedVisible.value && (props.fixed || props.sticky || props.absolute)) styles.transform = `translateY(${props.location === "bottom" ? fullHeight.value : -fullHeight.value}px)`;
-			if (props.fixed) {
-				styles.position = "fixed";
-				styles.left = "0";
-				styles.right = "0";
-				styles[props.location] = "0";
-				styles.zIndex = 10;
-			} else if (props.sticky) {
-				styles.position = "sticky";
-				styles[props.location] = "0";
-				styles.zIndex = 10;
-			} else if (props.absolute) {
-				styles.position = "absolute";
-				styles.left = "0";
-				styles.right = "0";
-				styles[props.location] = "0";
-				styles.zIndex = 10;
-			}
-			return styles;
-		});
-		const updateScrollableSpace = () => {
-			const target = scrollTargetRef.value;
-			if (!target) return;
-			const { clientHeight, scrollHeight } = getScrollMetrics(target);
-			hasEnoughScrollableSpace.value = scrollHeight - clientHeight > scrollThreshold.value + fullHeight.value;
-		};
-		const handleScroll = () => {
-			const target = scrollTargetRef.value;
-			if (!target) return;
-			previousScroll = currentScroll.value;
-			currentScroll.value = resolveScrollTop(target);
-			const currentHeight = isWindowTarget(target) ? document.documentElement.scrollHeight : target.scrollHeight;
-			if (currentHeight > previousScrollHeight) updateScrollableSpace();
-			previousScrollHeight = currentHeight;
-			isScrollingUp.value = currentScroll.value < previousScroll;
-			const { clientHeight, scrollHeight } = getScrollMetrics(target);
-			const atBottom = currentScroll.value + clientHeight >= scrollHeight - 5;
-			if (!isScrollingUp.value && atBottom && currentScroll.value >= scrollThreshold.value && hasEnoughScrollableSpace.value) reachedBottomWhileScrollingDown.value = true;
-			const scrollJumped = Math.abs(currentScroll.value - previousScroll) > 100;
-			const atTop = currentScroll.value <= 5;
-			if (isScrollingUp.value && previousScroll - currentScroll.value > 1 && !atBottom || scrollJumped && currentScroll.value < scrollThreshold.value || atTop) reachedBottomWhileScrollingDown.value = false;
-			isAtBottom.value = atBottom;
-			if (!controlsVisibilityByScroll.value) return;
-			if (behavior.value.inverted) {
-				setVisible(currentScroll.value > scrollThreshold.value);
-				return;
-			}
-			if (!hasEnoughScrollableSpace.value) {
-				setVisible(true);
-				return;
-			}
-			if (reachedBottomWhileScrollingDown.value) {
-				setVisible(false);
-				return;
-			}
-			setVisible(isScrollingUp.value && !isAtBottom.value || currentScroll.value < scrollThreshold.value);
-		};
-		const bindScrollTarget = (target) => {
-			if (scrollTargetRef.value) off(scrollTargetRef.value, "scroll", handleScroll);
-			scrollTargetRef.value = target;
-			previousScroll = target ? resolveScrollTop(target) : 0;
-			currentScroll.value = previousScroll;
-			previousScrollHeight = target ? getScrollMetrics(target).scrollHeight : 0;
-			isScrollingUp.value = false;
-			isAtBottom.value = false;
-			reachedBottomWhileScrollingDown.value = false;
-			if (!scrollTargetRef.value) return;
-			on(scrollTargetRef.value, "scroll", handleScroll, { passive: true });
-			updateScrollableSpace();
-			handleScroll();
-		};
-		const syncScrollTarget = () => {
-			bindScrollTarget(resolveScrollTarget());
-		};
-		watch(() => props.scrollTarget, () => {
-			if (typeof window === "undefined") return;
-			if (!isMounted.value && props.scrollTarget) return;
-			syncScrollTarget();
-		}, { immediate: true });
-		watch(scrollThreshold, () => {
-			updateScrollableSpace();
-			handleScroll();
-		});
-		onMounted(() => {
-			if (typeof window === "undefined") return;
-			isMounted.value = true;
-			syncScrollTarget();
-			on(window, "resize", updateScrollableSpace, { passive: true });
-			updateScrollableSpace();
-			handleScroll();
-			nextTick(() => {
-				syncScrollTarget();
-				updateScrollableSpace();
-				handleScroll();
-			});
-		});
-		onBeforeUnmount(() => {
-			if (scrollTargetRef.value) off(scrollTargetRef.value, "scroll", handleScroll);
-			if (typeof window !== "undefined") off(window, "resize", updateScrollableSpace);
-		});
+	setup(__props) {
+		const prefixCls = getPrefixCls("layout");
+		const classNames = computed(() => [`${prefixCls}-header`]);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(wrapperClassNames.value),
-				style: normalizeStyle(wrapperStyles.value)
-			}, [createElementVNode("header", {
-				ref_key: "headerRef",
-				ref: headerRef,
-				class: normalizeClass(classNames.value),
-				style: normalizeStyle(headerStyles.value)
-			}, [
-				hasImage.value ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: normalizeClass(`${unref(prefixCls)}-image`)
-				}, [renderSlot(_ctx.$slots, "image", {}, () => [__props.image ? (openBlock(), createElementBlock("img", {
-					key: 0,
-					class: normalizeClass(`${unref(prefixCls)}-image-inner`),
-					src: __props.image,
-					alt: ""
-				}, null, 10, _hoisted_1)) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true),
-				createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-bar`) }, [
-					_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: normalizeClass(`${unref(prefixCls)}-prepend`)
-					}, [renderSlot(_ctx.$slots, "prepend")], 2)) : createCommentVNode("", true),
-					hasTitle.value ? (openBlock(), createElementBlock("div", {
-						key: 1,
-						class: normalizeClass(`${unref(prefixCls)}-title`)
-					}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)) : createCommentVNode("", true),
-					_ctx.$slots.default ? (openBlock(), createElementBlock("div", {
-						key: 2,
-						class: normalizeClass(`${unref(prefixCls)}-content`)
-					}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
-					_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
-						key: 3,
-						class: normalizeClass(`${unref(prefixCls)}-append`)
-					}, [renderSlot(_ctx.$slots, "append")], 2)) : createCommentVNode("", true)
-				], 2),
-				showExtension.value ? (openBlock(), createElementBlock("div", {
-					key: 1,
-					class: normalizeClass(`${unref(prefixCls)}-extension`)
-				}, [renderSlot(_ctx.$slots, "extension")], 2)) : createCommentVNode("", true)
-			], 6)], 6);
+			return openBlock(), createBlock(resolveDynamicComponent(tagName), { class: normalizeClass(classNames.value) }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["class"]);
 		};
 	}
 }));

package/es/layout/hooks/use-has-sider.d.ts

@@ -0,0 +1,2 @@
+import { type ComputedRef, type Ref, type VNode } from 'vue';
+export declare function useHasSider(siders: Ref<string[]>, slotVNodes: ComputedRef<VNode[] | undefined>, hasSider: Ref<boolean | undefined>): ComputedRef<boolean>;

package/es/layout/hooks/use-has-sider.js

@@ -0,0 +1,38 @@
+import { computed } from "vue";
+//#region components/layout/hooks/use-has-sider.ts
+var SIDER_COMPONENT_NAME = "LayoutSider";
+/**
+* @zh 递归判断 VNode 列表中是否存在 Sider 组件
+* @en Recursively detect whether a Sider component exists in the VNode list
+*/
+function hasSiderInVNodes(vnodes) {
+	if (!vnodes) return false;
+	for (const vnode of vnodes) {
+		if (!vnode) continue;
+		const { type } = vnode;
+		if (type && typeof type === "object" && "name" in type && type.name === SIDER_COMPONENT_NAME) return true;
+		const { children } = vnode;
+		if (Array.isArray(children) && hasSiderInVNodes(children)) return true;
+	}
+	return false;
+}
+/**
+* @zh 计算当前 Layout 是否包含 Sider，对齐 antd useHasSider 的优先级：
+*     1. hasSider 为布尔值时直接采用；
+*     2. 已有 Sider 通过上下文注册时为 true；
+*     3. 否则回退到对默认插槽的静态扫描。
+* @en Compute whether the current Layout contains a Sider, aligned with antd
+*     useHasSider precedence:
+*     1. use hasSider when it is a boolean;
+*     2. true when any Sider has registered via context;
+*     3. otherwise fallback to static scan of the default slot.
+*/
+function useHasSider(siders, slotVNodes, hasSider) {
+	return computed(() => {
+		if (typeof hasSider.value === "boolean") return hasSider.value;
+		if (siders.value.length > 0) return true;
+		return hasSiderInVNodes(slotVNodes.value);
+	});
+}
+//#endregion
+export { useHasSider };