@ecolovo/uniapp-components 2.0.2 → 2.0.4

package/components/message-box/message-box.vue

@@ -1,23 +1,29 @@
 <template>
 	<dialog-cpn
+		v-if="isVisible"
 		:model-value="isVisible"
-		:cancel="false"
-		confirm="我知道了"
-		modal
-		:title="title"
+		:modal="innerOptions.modal"
+		:center-title="innerOptions.centerTitle"
+		:title="innerOptions.title"
+		:show-close="innerOptions.showClose"
+		:cancel="innerOptions.cancel"
+		:confirm="innerOptions.confirm"
 		:class="[...classNames, $style['MessageBox']]"
 		@update:model-value="emit('update:modelValue', $event)"
 		@confirm="onConfirm()"
+		@cancel="onCancel()"
 		@closed="isVisible = false"
 	>
-		{{ content }}
+		{{ innerOptions.content }}
 	</dialog-cpn>
 </template>
 
 <script lang="ts" setup>
+import { mergeWith, omit } from 'lodash-es';
 import { ref, useCssModule, watch } from 'vue';
 import useClassNames from '../../composable/component-name';
 import DialogCpn from '../dialog/dialog.vue';
+import type { MessageBoxOptions } from './message-box';
 
 defineOptions({
 	options: {
@@ -29,22 +35,37 @@ defineOptions({
 const classNames = useClassNames('message-box');
 const $style = useCssModule();
 
-type _Props = {
-	/** 是否可见 */
-	modelValue?: boolean;
-	/** 对话框标题 */
-	title?: string;
-	/** 内容 */
-	content?: string;
-};
-
-const props = withDefaults(defineProps<_Props>(), {
+const props = withDefaults(defineProps<MessageBoxOptions>(), {
 	modelValue: false,
-	title: '提示',
 	content: '',
+	modal: true,
+	centerTitle: false,
+	title: '提示',
+	showClose: false,
+	cancel: false,
+	confirm: '好的',
 });
 
 const isVisible = ref(false);
+const innerOptions = ref<Omit<MessageBoxOptions, 'modelValue'>>(
+	omit(props, ['modelValue'])
+);
+
+watch(
+	props,
+	(newProps, oldProps) => {
+		const { modelValue, ...otherProps } = newProps;
+		innerOptions.value = mergeWith(
+			innerOptions.value,
+			otherProps,
+			(objValue, srcValue, key) =>
+				srcValue === oldProps?.[key as keyof MessageBoxOptions]
+					? objValue
+					: srcValue
+		);
+	},
+	{ immediate: true, deep: true }
+);
 
 watch(
 	() => props.modelValue,
@@ -57,12 +78,19 @@ const emit = defineEmits<{
 	(e: 'update:modelValue', val: boolean): void;
 }>();
 
-let resolvePromise: PromiseWithResolvers<void>['resolve'] | undefined;
+let resolvePromise: UniApp.PromiseResolvers<void>['resolve'] | undefined;
+let rejectPromise: UniApp.PromiseResolvers<void>['reject'] | undefined;
 
-const show = () => {
+const show = (options: Omit<MessageBoxOptions, 'modelValue'>) => {
+	innerOptions.value = { ...innerOptions.value, ...options };
 	emit('update:modelValue', (isVisible.value = true));
-	const { promise, resolve } = Promise.withResolvers();
-	resolvePromise = resolve;
+
+	// const { promise, resolve } = Promise.withResolvers();
+	const promise = new Promise<void>((resolve, reject) => {
+		resolvePromise = resolve;
+		rejectPromise = reject;
+	});
+
 	return promise;
 };
 
@@ -70,9 +98,13 @@ const onConfirm = () => {
 	resolvePromise?.();
 };
 
+const onCancel = () => {
+	rejectPromise?.(undefined);
+};
+
 defineExpose({ show });
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 </style>

package/components/number-dialog/number-dialog.vue

@@ -1,45 +1,66 @@
 <template>
 	<view
-		:class="[...classNames, $style['NumberDialog'], { [$style['NumberDialog--disabled']]: disabled }]"
-		@click.stop.prevent="doNothing"
+		:class="[
+			...classNames,
+			$style['NumberDialog'],
+			{ [$style['NumberDialog--disabled']]: disabled },
+		]"
+		@click.stop.prevent
 	>
 		<view
 			v-if="!isReadonly"
 			:class="[
 				$style['NumberDialog--step-button'],
 				$style['NumberDialog--step-button-minus'],
-				{ [$style['NumberDialog--step-button-disabled']]: disabledDecrease },
+				{
+					[$style['NumberDialog--step-button-disabled']]:
+						disabledDecrease,
+				},
 			]"
 		>
 			<icon-cpn
 				icon="step-minus"
 				tap-size="60rpx"
-				@touchstart="handleStepLongTouchStart($event, -step, disabledDecrease)"
+				@touchstart="
+					handleStepLongTouchStart($event, -step, disabledDecrease)
+				"
 				@touchend="handleStepLongTouchEnd(-step)"
 				@touchcancel="handleStepLongTouchEnd(-step)"
 			/>
 		</view>
 		<view
-			:class="[$style['NumberDialog--input'], { [$style['NumberDialog--readonly']]: isReadonly }]"
+			:class="[
+				$style['NumberDialog--input'],
+				{ [$style['NumberDialog--readonly']]: isReadonly },
+			]"
 			@click="showPad"
 		>
-			<text v-if="isReadonly || modelValue === 0 || modelValue" :class="$style['NumberDialog--value']">{{
-				modelValue
+			<text
+				v-if="isReadonly || modelValue === 0 || modelValue"
+				:class="$style['NumberDialog--value']"
+				>{{ modelValue }}</text
+			>
+			<text v-else :class="$style['NumberDialog--placeholder']">{{
+				placeholder
 			}}</text>
-			<text v-else :class="$style['NumberDialog--placeholder']">{{ placeholder }}</text>
 		</view>
 		<view
 			v-if="!isReadonly"
 			:class="[
 				$style['NumberDialog--step-button'],
 				$style['NumberDialog--step-button-plus'],
-				{ [$style['NumberDialog--step-button-disabled']]: disabledIncrease },
+				{
+					[$style['NumberDialog--step-button-disabled']]:
+						disabledIncrease,
+				},
 			]"
 		>
 			<icon-cpn
 				icon="step-plus"
 				tap-size="60rpx"
-				@touchstart="handleStepLongTouchStart($event, step, disabledIncrease)"
+				@touchstart="
+					handleStepLongTouchStart($event, step, disabledIncrease)
+				"
 				@touchend="handleStepLongTouchEnd(step)"
 				@touchcancel="handleStepLongTouchEnd(step)"
 			/>
@@ -55,12 +76,21 @@
 				@cancel="closePad()"
 			>
 				<view :class="$style['NumberDialog--dialog-input']">
-					<text v-if="editValue === 0 || editValue">{{ editValue }}</text>
-					<text v-else :class="$style['NumberDialog--placeholder']">{{ placeholder }}</text>
+					<text v-if="editValue === 0 || editValue">{{
+						editValue
+					}}</text>
+					<text v-else :class="$style['NumberDialog--placeholder']">{{
+						placeholder
+					}}</text>
 				</view>
 			</dialog-content-cpn>
 			<popover-content-cpn position="bottom">
-				<numpad-cpn v-model="editValue" :precision="precision" :min="min" :max="max" />
+				<numpad-cpn
+					v-model="editValue"
+					:precision="precision"
+					:min="min"
+					:max="max"
+				/>
 			</popover-content-cpn>
 		</popover-mask-cpn>
 	</view>
@@ -123,7 +153,10 @@ const props = withDefaults(defineProps<_Props>(), {
 
 const emit = defineEmits<{
 	(e: 'update:modelValue', val: string | number): void;
-	(e: 'change', payload: { value: string | number; lastValue: string | number }): void;
+	(
+		e: 'change',
+		payload: { value: string | number; lastValue: string | number }
+	): void;
 	(e: 'error', msg: string): void;
 }>();
 
@@ -171,10 +204,12 @@ let _lastValue: string | number = '';
 let _touchingStep: number | null = null;
 let _touchTimer: ReturnType<typeof setTimeout> | null = null;
 
-const doNothing = () => {};
-
 /** 长按步进按钮开始处理 */
-const handleStepLongTouchStart = (event: TouchEvent, step: number, disabled: boolean) => {
+const handleStepLongTouchStart = (
+	event: TouchEvent,
+	step: number,
+	disabled: boolean
+) => {
 	if (disabled) return;
 	if (event.touches.length > 1) return;
 
@@ -184,7 +219,9 @@ const handleStepLongTouchStart = (event: TouchEvent, step: number, disabled: boo
 	let times = 0;
 
 	const longTouch = () => {
-		if (!handleOneStep(step * (times >= 30 ? 4 : times >= 12 ? 2 : 1))) return;
+		if (!handleOneStep(step * (times >= 30 ? 4 : times >= 12 ? 2 : 1))) {
+			return;
+		}
 
 		_touchTimer = setTimeout(longTouch, interval);
 		interval = Math.max(100, interval - 50);
@@ -206,7 +243,10 @@ const handleStepLongTouchEnd = (step: number) => {
 
 /** 单次步进处理 */
 const handleOneStep = (step: number) => {
-	if ((step > 0 && disabledIncrease.value) || (step < 0 && disabledDecrease.value)) {
+	if (
+		(step > 0 && disabledIncrease.value) ||
+		(step < 0 && disabledDecrease.value)
+	) {
 		return false;
 	}
 	const nextValue = round(+props.modelValue + step, props.precision);
@@ -282,7 +322,7 @@ const onConfirm = () => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($number-dialog, 'number-dialog');
+	@include UTILS__DEFINE_COMPONENT_VARS('number-dialog', $number-dialog);
 }
 
 .NumberDialog {
@@ -354,7 +394,7 @@ const onConfirm = () => {
 }
 
 .NumberDialog--dialog {
-	#{UTILS__VAR_NAME(position, popover)}: calc(50% - 240rpx) auto auto 50%;
+	#{UTILS__VAR_NAME(popover, position)}: calc(50% - 240rpx) auto auto 50%;
 }
 .NumberDialog--dialog-input {
 	height: 50rpx;

package/components/number-input/number-input.vue

@@ -1,24 +1,36 @@
 <template>
 	<view
-		:class="[...classNames, $style['NumberInput'], { [$style['NumberInput--step-mode']]: mode === 'step' }]"
-		@click.stop.prevent="doNothing"
+		:class="[
+			...classNames,
+			$style['NumberInput'],
+			{ [$style['NumberInput--step-mode']]: mode === 'step' },
+		]"
+		@click.stop.prevent
 	>
 		<view
 			v-if="mode === 'step' && !isReadonly"
 			:class="[
 				$style['NumberInput--step-button'],
 				$style['NumberInput--step-button-minus'],
-				{ [$style['NumberInput--step-button-disabled']]: disabledDecrease },
+				{
+					[$style['NumberInput--step-button-disabled']]:
+						disabledDecrease,
+				},
 			]"
 		>
 			<icon-cpn
 				icon="step-minus"
-				@touchstart="handleStepLongTouchStart($event, -step, disabledDecrease)"
+				@touchstart="
+					handleStepLongTouchStart($event, -step, disabledDecrease)
+				"
 				@touchend="handleStepLongTouchEnd(-step)"
 				@touchcancel="handleStepLongTouchEnd(-step)"
 			/>
 		</view>
-		<view v-if="isReadonly" :class="[$style['NumberInput--value'], { disabled }]">
+		<view
+			v-if="isReadonly"
+			:class="[$style['NumberInput--value'], { disabled }]"
+		>
 			{{ modelValue }}
 		</view>
 		<input
@@ -26,7 +38,10 @@
 			:value="editValue"
 			:type="type"
 			maxlength="14"
-			:class="[$style['NumberInput--input'], mode === 'step' ? $style['NumberInput--step-input'] : '']"
+			:class="[
+				$style['NumberInput--input'],
+				mode === 'step' ? $style['NumberInput--step-input'] : '',
+			]"
 			:disabled="disabled"
 			:placeholder="placeholder"
 			:placeholder-class="$style['NumberInput--input-placeholder']"
@@ -34,18 +49,25 @@
 			@focus="handleFocus"
 			@blur="handleInputConfirm"
 		/>
-		<view v-else :class="$style['NumberInput--input-value']">{{ modelValue || 0 }}</view>
+		<view v-else :class="$style['NumberInput--input-value']">{{
+			modelValue || 0
+		}}</view>
 		<view
 			v-if="mode === 'step' && !isReadonly"
 			:class="[
 				$style['NumberInput--step-button'],
 				$style['NumberInput--step-button-plus'],
-				{ [$style['NumberInput--step-button-disabled']]: disabledIncrease },
+				{
+					[$style['NumberInput--step-button-disabled']]:
+						disabledIncrease,
+				},
 			]"
 		>
 			<icon-cpn
 				icon="step-plus"
-				@touchstart="handleStepLongTouchStart($event, step, disabledIncrease)"
+				@touchstart="
+					handleStepLongTouchStart($event, step, disabledIncrease)
+				"
 				@touchend="handleStepLongTouchEnd(step)"
 				@touchcancel="handleStepLongTouchEnd(step)"
 			/>
@@ -131,7 +153,9 @@ const isReadonly = computed(() => props.readonly || isFormReadonly.value);
 
 /** 输入校验正则 */
 const inputTestReg = computed(() => {
-	return props.precision > 0 ? new RegExp('^(-?)(\\d*)(\\.\\d{0,' + props.precision + '})?(-?)$') : numberReg;
+	return props.precision > 0
+		? new RegExp('^(-?)(\\d*)(\\.\\d{0,' + props.precision + '})?(-?)$')
+		: numberReg;
 });
 
 /** 是否禁用减 */
@@ -163,8 +187,6 @@ let _lastEditValue = '';
 let _touchingStep: number | null = null;
 let _touchTimer: ReturnType<typeof setTimeout> | null = null;
 
-const doNothing = () => {};
-
 /** 聚焦 */
 const handleFocus = () => {
 	_lastValue = props.modelValue;
@@ -172,7 +194,11 @@ const handleFocus = () => {
 };
 
 /** 长按步进按钮开始处理 */
-const handleStepLongTouchStart = (event: TouchEvent, step: number, disabled: boolean) => {
+const handleStepLongTouchStart = (
+	event: TouchEvent,
+	step: number,
+	disabled: boolean
+) => {
 	if (disabled) return;
 	if (event.touches.length > 1) return;
 
@@ -182,7 +208,9 @@ const handleStepLongTouchStart = (event: TouchEvent, step: number, disabled: boo
 	let times = 0;
 
 	const longTouch = () => {
-		if (!handleOneStep(step * (times >= 30 ? 4 : times >= 12 ? 2 : 1))) return;
+		if (!handleOneStep(step * (times >= 30 ? 4 : times >= 12 ? 2 : 1))) {
+			return;
+		}
 
 		_touchTimer = setTimeout(longTouch, interval);
 		interval = Math.max(100, interval - 50);
@@ -204,7 +232,10 @@ const handleStepLongTouchEnd = (step: number) => {
 
 /** 单次步进处理 */
 const handleOneStep = (step: number) => {
-	if ((step > 0 && disabledIncrease.value) || (step < 0 && disabledDecrease.value)) {
+	if (
+		(step > 0 && disabledIncrease.value) ||
+		(step < 0 && disabledDecrease.value)
+	) {
 		return false;
 	}
 	const nextValue = round(+props.modelValue + step, props.precision);
@@ -251,7 +282,7 @@ const validateValue = (value: string, isStepButton = false) => {
 	return nextValue;
 };
 
-const handleInput = (e: InputEvent) => {
+const handleInput = (e: Event) => {
 	let value = e.detail.value.trim();
 
 	const match = inputTestReg.value.exec(value);
@@ -259,7 +290,11 @@ const handleInput = (e: InputEvent) => {
 		// sign: 负号; integer: 整数部分数字; decimal: 小数部分数字; resign: 再次输入负号，取消负号
 		const [, sign = '', integer = '', decimal = '', resign = ''] = match;
 		const signVal = (!!sign && !resign) || (!sign && !!resign) ? '-' : '';
-		const integerVal = integer ? Number(integer) || '0' : decimal ? '0' : '';
+		const integerVal = integer
+			? Number(integer) || '0'
+			: decimal
+			? '0'
+			: '';
 		value = signVal + integerVal + decimal;
 
 		_lastEditValue = value;
@@ -290,7 +325,7 @@ const confirmValue = (value: string, isStepButton = false) => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($number-input, 'number-input');
+	@include UTILS__DEFINE_COMPONENT_VARS('number-input', $number-input);
 }
 
 .NumberInput {

package/components/numpad/numpad.vue

@@ -3,7 +3,7 @@
 		<button-cpn
 			v-for="btn in buttons"
 			:key="btn.key"
-			:cold-down="0"
+			:cool-down="0"
 			:class="[$style['Numpad--key'], $style[btn.className || '']]"
 			@click="onClick(btn)"
 		>
@@ -82,7 +82,10 @@ const emit = defineEmits<{
 }>();
 
 const editValue = computed({
-	get: () => (props.modelValue || props.modelValue === 0 ? props.modelValue.toString() : ''),
+	get: () =>
+		props.modelValue || props.modelValue === 0
+			? props.modelValue.toString()
+			: '',
 	set: (val: string) => emit('update:modelValue', val),
 });
 
@@ -174,7 +177,7 @@ const onClear = () => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($numpad, 'numpad');
+	@include UTILS__DEFINE_COMPONENT_VARS('numpad', $numpad);
 }
 
 .Numpad {
@@ -193,8 +196,11 @@ const onClear = () => {
 		box-shadow: 2px 2px 4px 0 #00000040;
 		&:not(.Numpad--confirm-key) {
 			color: UTILS__GLOBAL_VAR(color, foreground);
-			#{UTILS__VAR_NAME(theme, button)}: white;
-			#{UTILS__VAR_NAME(active-mask, button)}: UTILS__GLOBAL_VAR(theme, primary);
+			#{UTILS__VAR_NAME(button, theme)}: white;
+			#{UTILS__VAR_NAME(button, active-mask)}: UTILS__GLOBAL_VAR(
+				theme,
+				primary
+			);
 		}
 	}
 	.Numpad--zero-key {

package/components/page/page-body.scss

@@ -5,7 +5,7 @@
 $page-body: () !default;
 $page-body-default: (
 	// 可视区域背景
-	background: UTILS__GLOBAL_VAR('color', 'background'),
+	background: var(UTILS__VAR_NAME('page', 'background')),
 	padding: 20rpx,
 	padding-top: null,
 	padding-right: null,

package/components/page/page-body.vue

@@ -3,7 +3,9 @@
 		:class="[
 			...classNames,
 			$style['PageBody'],
-			useScroll ? $style['PageBody--with-scroll'] : $style['PageBody--no-scroll'],
+			useScroll
+				? $style['PageBody--with-scroll']
+				: $style['PageBody--no-scroll'],
 		]"
 		:style="inlineStyle"
 	>
@@ -15,6 +17,7 @@
 		</view>
 		<scroll-view
 			v-else-if="enableRefresh"
+			id="page-body"
 			scroll-y
 			refresher-enabled
 			:refresher-triggered="refreshing"
@@ -31,6 +34,7 @@
 		</scroll-view>
 		<scroll-view
 			v-else
+			id="page-body"
 			scroll-y
 			:scroll-with-animation="scrollWithAnimation"
 			:scroll-top="scrollTop"
@@ -52,7 +56,10 @@
 import { debounce } from 'lodash-es';
 import { computed, getCurrentInstance, nextTick, ref, useCssModule } from 'vue';
 import useClassNames from '../../composable/component-name';
-import { navBarBottomOffset, safeAreaInsetBottom } from '../../utils/windowInfo';
+import {
+	navBarBottomOffset,
+	safeAreaInsetBottom,
+} from '../../utils/windowInfo';
 
 defineOptions({
 	options: {
@@ -108,9 +115,14 @@ const emit = defineEmits<{
 	(event: 'reach-bottom'): void;
 }>();
 
+/** 当前页面滚动距离 */
 const scrollOffset = ref<number | string>(0);
+/** 控制页面滚动到指定位置 */
 const scrollTop = ref<number | string>(0);
+/** 控制页面滚动时是否有动画 */
 const scrollWithAnimation = ref(true);
+/** 控制页面滚动到指定 id 的元素位置 */
+// const scrollIntoViewId = ref('');
 
 const inlineStyle = computed(() => {
 	return [
@@ -132,14 +144,19 @@ const $_debounceScroll = debounce(function () {
 		/* #endif */
 		.select('.' + $style['PageBody--scroll-body'])
 		.fields({ size: true, scrollOffset: true }, (data) => {
-			if (!Array.isArray(data) && data.scrollHeight! - data.height! - data.scrollTop! <= 50) {
+			if (
+				!Array.isArray(data) &&
+				data.scrollHeight! - data.height! - data.scrollTop! <= 50
+			) {
 				emit('reach-bottom');
 			}
 		})
 		.exec();
 }, 100);
 
-/** 处理 scroll-view 滚动 */
+/**
+ * 处理 scroll-view 滚动
+ */
 const $_handleScroll = (e: {
 	detail: {
 		scrollLeft: number;
@@ -157,15 +174,19 @@ const $_handleScroll = (e: {
 	}
 };
 
-/** 滚动到顶部
- * @param {number} position 滚动到与顶部的距离
- * @param {boolean} animation 是否有滚动动画
+/**
+ * 滚动到顶部
+ * @param position 滚动到与顶部的距离
+ * @param animation 是否有滚动动画
  */
 const scrollToTop = (position = 0, animation = true) => {
 	if (props.useScroll) {
 		scrollWithAnimation.value = animation;
 		nextTick(() => {
-			scrollTop.value = typeof scrollTop.value === 'number' ? position + 'px' : position;
+			scrollTop.value =
+				typeof scrollTop.value === 'number'
+					? position + 'px'
+					: position;
 			scrollOffset.value = position;
 			setTimeout(() => {
 				scrollWithAnimation.value = true;
@@ -179,8 +200,47 @@ const scrollToTop = (position = 0, animation = true) => {
 	}
 };
 
+/**
+ * 滚动到指定 id 的元素位置
+ * @param viewId 目标元素的 id
+ * @param animation 是否有滚动动画
+ */
+const scrollIntoView = (viewId: string, animation = true) => {
+	viewId = viewId.startsWith('#') ? viewId : '#' + viewId;
+	uni.createSelectorQuery()
+		.select(viewId)
+		.boundingClientRect()
+		/* #ifndef MP-ALIPAY */
+		.in(vm)
+		/* #endif */
+		.select('#page-body')
+		.boundingClientRect()
+		.exec((data) => {
+			scrollToTop(data[0].top - data[1].top, animation);
+		});
+	// 下面这种方法无法滚动，可能是因为对应的 id 是在 slot 中的原因
+	// if (props.useScroll) {
+	// 	scrollIntoViewId.value = '';
+	// 	scrollWithAnimation.value = animation;
+	// 	nextTick(() => {
+	// 		scrollIntoViewId.value = viewId.startsWith('#')
+	// 			? viewId.slice(1)
+	// 			: viewId;
+	// 		setTimeout(() => {
+	// 			scrollWithAnimation.value = true;
+	// 		}, SCROLL_ANIMATION_DURATION);
+	// 	});
+	// } else {
+	// 	uni.pageScrollTo({
+	// 		selector: viewId,
+	// 		duration: animation ? SCROLL_ANIMATION_DURATION : 0,
+	// 	});
+	// }
+};
+
 defineExpose({
 	scrollToTop,
+	scrollIntoView,
 });
 </script>
 
@@ -190,14 +250,22 @@ defineExpose({
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($page-body, 'page-body');
+	@include UTILS__DEFINE_COMPONENT_VARS('page-body', $page-body);
+}
+
+:host {
+	display: block;
 }
 
 .PageBody {
 	@extend %external-vars;
 
-	--header-placeholder-height: calc(var(--page-header-bottom) + #{UTILS__VAR(extra-height, page-header, 0px)});
-	--footer-placeholder-height: calc(var(--safe-area-bottom) + #{UTILS__VAR(height, page-footer, 100rpx)});
+	--header-placeholder-height: calc(
+		var(--page-header-bottom) + #{UTILS__VAR(page-header, extra-height, 0px)}
+	);
+	--footer-placeholder-height: calc(
+		var(--safe-area-bottom) + #{UTILS__VAR(page-footer, height, 100rpx)}
+	);
 
 	box-sizing: border-box;
 	padding-top: var(--header-placeholder-height);