@sdata/web-vue 1.13.0 → 1.18.0

package/es/layout/header.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,350 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/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";
+//#region components/layout/header.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["src"];
+var scrollbarViewportSelector = "[data-overlayscrollbars-viewport]";
+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);
+		});
+		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);
+		};
+	}
+}));
+//#endregion
+export { header_vue_vue_type_script_setup_true_lang_default as default };