@ecolovo/uniapp-components 2.0.1 → 2.0.3

package/components/page/page-footer.vue

@@ -1,5 +1,9 @@
 <template>
-	<view :class="[...classNames, $style['PageFooter']]" :style="inlineStyle" @touchmove.stop.prevent="doNothing">
+	<view
+		:class="[...classNames, $style['PageFooter']]"
+		:style="inlineStyle"
+		@touchmove.stop.prevent
+	>
 		<view :class="$style['PageFooter--content']">
 			<slot></slot>
 		</view>
@@ -38,8 +42,6 @@ const inlineStyle = computed(() => {
 		`--safe-area-bottom: ${safeAreaInsetBottom}px;`,
 	].join('');
 });
-
-const doNothing = () => {};
 </script>
 
 <style lang="scss" module>
@@ -48,7 +50,11 @@ const doNothing = () => {};
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($page-footer, 'page-footer');
+	@include UTILS__DEFINE_COMPONENT_VARS('page-footer', $page-footer);
+}
+
+:host {
+	display: block;
 }
 
 .PageFooter {
@@ -60,7 +66,7 @@ const doNothing = () => {};
 	background: UTILS__LOCAL_VAR(background);
 	padding-bottom: var(--safe-area-bottom);
 	box-sizing: border-box;
-	z-index: UTILS__z-index('page-footer');
+	z-index: UTILS__GLOBAL_VAR(z-index, page-footer);
 	box-shadow: 0 -4rpx 4rpx 4rpx #ccc;
 }
 

package/components/page/page-header.vue

@@ -3,7 +3,10 @@
 		:class="[
 			...classNames,
 			$style['PageHeader'],
-			theme === 'dark' ? $style['PageHeader--dark'] : $style['PageHeader--light'],
+			theme === 'dark'
+				? $style['PageHeader--dark']
+				: $style['PageHeader--light'],
+			{ [$style['PageHeader--fixed']]: fixed },
 		]"
 		:style="inlineCssVar"
 	>
@@ -57,10 +60,14 @@
 /**
  * 页面头部部分容器组件，不单独使用，通过 page 组件间接引入
  */
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import useClassNames from '../../composable/component-name';
 import { homePath } from '../../configs';
-import { navBarHeight, navBarTopOffset, menuButtonWidthInCss } from '../../utils/windowInfo';
+import {
+	navBarHeight,
+	navBarTopOffset,
+	menuButtonWidthInCss,
+} from '../../utils/windowInfo';
 import IconCpn from '../icon/icon.vue';
 
 defineOptions({
@@ -73,55 +80,62 @@ defineOptions({
 const classNames = useClassNames('page-header');
 
 type _Props = {
-	/** 图标名 */
+	/** 导航栏标题 */
 	title?: string;
-	/** 图标名 */
+	/** 导航栏标题是否居中显示 */
 	center?: boolean;
-	/** 图标名 */
-	theme?: string;
-	/** 图标名 */
+	/** 是否使用固定布局 */
+	fixed?: boolean;
+	/** 主题，只能是 'light' 和 'dark' 中的一个 */
+	theme?: 'dark' | 'light';
+	/** 导航按钮类型: 0 = 不显示，1 = 返回，2 = 首页，3 = 返回|首页 */
 	navType?: 0 | 1 | 2 | 3;
 };
 
 const props = withDefaults(defineProps<_Props>(), {
 	title: '',
 	center: false,
-	theme: '',
+	fixed: false,
+	theme: 'light',
 	navType: undefined,
 });
 
-defineEmits<{
-	(event: 'click'): void;
-}>();
+/** 当前页面栈 */
+const currentPages = ref<ReturnType<typeof getCurrentPages>>([]);
+/** 当前页面路由 */
+const currentPageRoute = computed(() => {
+	return currentPages.value.slice(-1)[0]?.route || '';
+});
 
 /** 是否显示返回按钮 */
 const hasBack = computed(() => {
 	// 如果指定了导航按钮类型，则根据类型判断
 	if (props.navType !== undefined) return !!(props.navType & 1);
-	const pages = getCurrentPages();
 	// 在首页不显示返回按钮
-	if (homePath === '/' + pages[0]!.route) return false;
+	if (homePath === '/' + currentPageRoute.value) return false;
 	// 页面栈只有一个时不显示返回按钮
-	if (pages.length === 1) return false;
+	if (currentPages.value.length <= 1) return false;
 	// 其他情况均显示返回按钮
 	return true;
 });
+
 /** 是否显示首页按钮 */
 const hasHome = computed(() => {
 	// 如果指定了导航按钮类型，则根据类型判断
 	if (props.navType !== undefined) return !!(props.navType & 2);
-	const pages = getCurrentPages();
 	// 在首页不显示返回首页按钮
-	if (homePath === '/' + pages[0]!.route) return false;
+	if (homePath === '/' + currentPageRoute.value) return false;
 	// 页面栈只有一个时显示返回按钮
-	if (pages.length === 1) return true;
+	if (currentPages.value.length === 1) return true;
 	// 其他情况均不显示返回按钮
 	return false;
 });
+
 /** 导航按钮个数 */
 const iconCount = computed(() => {
 	return (hasBack.value ? 1 : 0) + (hasHome.value ? 1 : 0);
 });
+
 const inlineCssVar = computed(() => {
 	return [
 		// 页面头部上边缘相较于顶部的距离
@@ -132,6 +146,10 @@ const inlineCssVar = computed(() => {
 		`--menu-button-width: ${menuButtonWidthInCss};`,
 	].join(' ');
 });
+
+onMounted(() => {
+	currentPages.value = getCurrentPages() || [];
+});
 </script>
 
 <style lang="scss" module>
@@ -140,18 +158,26 @@ const inlineCssVar = computed(() => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($page-header, 'page-header');
+	@include UTILS__DEFINE_COMPONENT_VARS('page-header', $page-header);
+}
+
+:host {
+	display: block;
 }
 
 .PageHeader {
 	@extend %external-vars;
-	position: fixed;
-	top: 0;
-	left: 0;
 	width: 100%;
 	overflow: hidden; // BFC
 	background: UTILS__LOCAL_VAR(background);
-	z-index: UTILS__z-index('page-header');
+}
+// 固定布局
+.PageHeader--fixed {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: UTILS__GLOBAL_VAR(z-index, page-header);
+	padding-top: var(--page-header-top);
 }
 
 // 亮色主题对应样式
@@ -168,7 +194,6 @@ const inlineCssVar = computed(() => {
 	position: relative;
 	font-size: UTILS__LOCAL_VAR(font-size);
 	font-weight: 600;
-	margin-top: var(--page-header-top);
 	width: 100%;
 	height: var(--page-header-height);
 	line-height: var(--page-header-height);

package/components/page/page.scss

@@ -1,9 +1,10 @@
 @use 'sass:map';
+@use '../../styles/utils' as *;
 
 // 可配置的变量
 $page: () !default;
 $page-default: (
 	// 页面背景
-	background: transparent
+	background: #{UTILS__GLOBAL_VAR('color', 'background')}
 );
 $page: map.merge($page-default, $page);

package/components/page/page.vue

@@ -1,40 +1,59 @@
 <template>
 	<view :class="[...classNames, $style['Page']]" :style="inlineStyle">
 		<slot name="header">
-			<page-header-cpn v-if="hasHeader" :theme="theme" :title="title">
+			<page-header-cpn
+				v-if="hasHeader"
+				fixed
+				:theme="theme"
+				:title="title"
+			>
 				<template #extra>
 					<slot name="header-extra"></slot>
 				</template>
 			</page-header-cpn>
 		</slot>
 
-		<page-body-cpn
-			ref="body"
-			:has-header="hasHeader"
-			:has-footer="hasFooter && !!$slots.footer"
-			:use-scroll="useScroll"
+		<slot name="body">
+			<page-body-cpn
+				ref="pageBodyRef"
+				:has-header="hasHeader"
+				:has-footer="hasFooter && !!$slots.footer"
+				:use-scroll="useScroll"
+				:is-tab-page="tabbar"
+				:enable-refresh="enableRefresh"
+				:refreshing="refreshing"
+				@scroll="$emit('scroll', $event)"
+				@refresh="$emit('refresh')"
+				@reach-bottom="$emit('reach-bottom')"
+			>
+				<slot></slot>
+			</page-body-cpn>
+		</slot>
+
+		<!-- 固定布局内容插槽 -->
+		<slot name="fixed"></slot>
+
+		<page-footer-cpn
+			v-if="hasFooter && $slots.footer"
 			:is-tab-page="tabbar"
-			:enable-refresh="enableRefresh"
-			:refreshing="refreshing"
-			@scroll="$emit('scroll', $event)"
-			@refresh="$emit('refresh')"
-			@reach-bottom="$emit('reach-bottom')"
 		>
-			<slot></slot>
-		</page-body-cpn>
-
-		<page-footer-cpn v-if="hasFooter && $slots.footer" :is-tab-page="tabbar">
 			<slot name="footer"></slot>
 		</page-footer-cpn>
 
-		<loading-cpn v-if="loading" :title="loading === true ? '加载中...' : loading" />
+		<message-box-cpn ref="pageMessageBoxRef" />
+
+		<loading-cpn
+			v-if="loading"
+			:title="loading === true ? '加载中...' : loading"
+		/>
 	</view>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, provide, ref } from 'vue';
 import useClassNames from '../../composable/component-name';
 import LoadingCpn from '../loading/loading.vue';
+import MessageBoxCpn from '../message-box/message-box.vue';
 import PageBodyCpn from './page-body.vue';
 import PageFooterCpn from './page-footer.vue';
 import PageHeaderCpn from './page-header.vue';
@@ -45,6 +64,7 @@ import {
 	navBarTopOffset,
 	safeAreaInsetBottom,
 } from '../../utils/windowInfo';
+import { useMessageBox } from '../../composable/message-box';
 
 defineOptions({
 	options: {
@@ -98,23 +118,36 @@ withDefaults(defineProps<_Props>(), {
 	tabbar: false,
 });
 
-type ScrollEvent = {
-	detail: {
-		scrollLeft: number;
-		scrollTop: number;
-		scrollHeight: number;
-		scrollWidth: number;
-		deltaX: number;
-		deltaY: number;
-	};
-};
-
 defineEmits<{
 	(event: 'scroll', value: ScrollEvent): void;
 	(event: 'refresh'): void;
 	(event: 'reach-bottom'): void;
 }>();
 
+const pageBodyRef = ref<InstanceType<typeof PageBodyCpn>>();
+const pageMessageBoxRef = ref<InstanceType<typeof MessageBoxCpn>>();
+provide('ecolovo/page/messageBoxRef', pageMessageBoxRef);
+
+/**
+ * 滚动到顶部
+ * @param position 滚动到与顶部的距离
+ * @param animation 是否有滚动动画
+ */
+const scrollToTop = (position = 0, animation = true) => {
+	pageBodyRef.value?.scrollToTop(position, animation);
+};
+
+/**
+ * 滚动到指定 id 的元素位置
+ * @param viewId 目标元素的 id
+ * @param animation 是否有滚动动画
+ */
+const scrollIntoView = (viewId: string, animation = true) => {
+	pageBodyRef.value?.scrollIntoView(viewId, animation);
+};
+
+const { show, showConfirm, showMessageBox } = useMessageBox(pageMessageBoxRef);
+
 const inlineStyle = computed(() => {
 	return [
 		// 顶部安全区高度
@@ -131,6 +164,14 @@ const inlineStyle = computed(() => {
 		`--menu-button-width: ${menuButtonWidthInCss};`,
 	].join('');
 });
+
+defineExpose({
+	scrollToTop,
+	scrollIntoView,
+	show,
+	showConfirm,
+	showMessageBox,
+});
 </script>
 
 <style lang="scss" module>
@@ -139,7 +180,11 @@ const inlineStyle = computed(() => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($page, 'page');
+	@include UTILS__DEFINE_COMPONENT_VARS('page', $page);
+}
+
+:host {
+	display: block;
 }
 
 .Page {

package/components/picker/picker-popup.vue

@@ -19,11 +19,19 @@
 						<view :class="$style['PickerPopup--title']">
 							<slot name="title">
 								<text>{{ title }}</text>
-								<text v-if="multiple">({{ tempCheckedCount }})</text>
-								<text :class="$style['PickerPopup--sub-title']">{{ subTitle }}</text>
+								<text v-if="multiple"
+									>({{ tempCheckedCount }})</text
+								>
+								<text
+									:class="$style['PickerPopup--sub-title']"
+									>{{ subTitle }}</text
+								>
 							</slot>
 						</view>
-						<view v-if="searchable" :class="$style['PickerPopup--search-wrapper']">
+						<view
+							v-if="searchable"
+							:class="$style['PickerPopup--search-wrapper']"
+						>
 							<!-- 搜索框 -->
 							<search-cpn
 								:placeholder="searchPlaceholder"
@@ -40,22 +48,34 @@
 				<view
 					v-for="item in filteredList"
 					:key="item.option[valueKey]"
-					:class="[$style['PickerPopup--option'], { [$style['PickerPopup--checked']]: item.checked }]"
+					:class="[
+						$style['PickerPopup--option'],
+						{ [$style['PickerPopup--checked']]: item.checked },
+					]"
 					@click="checkPickerItem(item.option)"
 				>
 					<icon-cpn
 						v-if="multiple"
-						:icon="item.checked ? 'checkbox-checked' : 'checkbox-unchecked'"
+						:icon="
+							item.checked
+								? 'checkbox-checked'
+								: 'checkbox-unchecked'
+						"
 						:class="$style['PickerPopup--option-multi']"
 					/>
-					<text :class="$style['PickerPopup--option-text']">{{ item.option[labelKey] }}</text>
+					<text :class="$style['PickerPopup--option-text']">{{
+						item.option[labelKey]
+					}}</text>
 					<icon-cpn
 						v-if="!multiple && item.checked"
 						icon="radio-checked"
 						:class="$style['PickerPopup--option-single']"
 					/>
 				</view>
-				<view v-if="pagingData && pagingData.data.length > 0" :class="$style['PickerPopup--load-more-wrapper']">
+				<view
+					v-if="pagingData && pagingData.data.length > 0"
+					:class="$style['PickerPopup--load-more-wrapper']"
+				>
 					<load-more-cpn
 						:loading="loadingMore"
 						:end="!pagingData.hasMore"
@@ -63,7 +83,10 @@
 						@load-more="loadMore()"
 					/>
 				</view>
-				<empty-cpn v-if="filteredList.length === 0" :class="$style['PickerPopup--empty']" />
+				<empty-cpn
+					v-if="filteredList.length === 0"
+					:class="$style['PickerPopup--empty']"
+				/>
 			</popup-content-cpn>
 		</template>
 	</popup-cpn>
@@ -71,7 +94,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
-import { PagingData } from '@ecolovo/utils/uniapp/paging';
+import type { PagingData } from '@ecolovo/utils';
 import useClassNames from '../../composable/component-name';
 import EmptyCpn from '../empty/empty.vue';
 import IconCpn from '../icon/icon.vue';
@@ -127,6 +150,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	searchPlaceholder: '请输入',
 	options: () => [],
 	pagingData: null,
+	loadingMore: false,
 	checked: () => [],
 	valueKey: 'id',
 	labelKey: 'label',
@@ -167,7 +191,9 @@ const setOptionList = () => {
 const filteredList = computed(() => {
 	const text = filterText.value.trim();
 	return text
-		? optionList.value.filter((item) => (item.option[props.labelKey] as string).includes(text))
+		? optionList.value.filter((item) =>
+				(item.option[props.labelKey] as string).includes(text)
+		  )
 		: optionList.value;
 });
 
@@ -187,7 +213,9 @@ watch(
 
 /** 勾选选项 */
 const checkPickerItem = (option: _Option) => {
-	const index = optionList.value.findIndex((item) => item.option[props.valueKey] === option[props.valueKey]);
+	const index = optionList.value.findIndex(
+		(item) => item.option[props.valueKey] === option[props.valueKey]
+	);
 	if (index < 0) return;
 
 	if (!props.multiple) {
@@ -240,65 +268,65 @@ const onConfirm = () => {
 <style lang="scss" module>
 @use '../../styles/utils' as *;
 
-.PickerPopup {
-	@extend %external-vars;
+:host {
+	display: block;
+}
 
-	.PickerPopup--header {
-		position: relative;
-		box-sizing: border-box;
-		height: UTILS__LOCAL_VAR(header-height, popup);
-		padding: 20rpx 30rpx 0rpx;
-		display: flex;
-		align-items: center;
-	}
-	.PickerPopup--title {
-		flex: 1;
-		font-size: UTILS__GLOBAL_VAR(font-size, large);
-		font-weight: 600;
-	}
-	.PickerPopup--sub-title {
-		margin-left: 10rpx;
-		color: UTILS__GLOBAL_VAR(color, placeholder);
-		font-size: UTILS__GLOBAL_VAR(font-size, normal);
-		font-weight: 400;
-	}
-	.PickerPopup--search-wrapper {
-		flex: none;
-		height: 88rpx;
-		display: flex;
-		align-items: center;
-		#{UTILS__VAR_NAME(height, search)}: 72rpx;
-	}
-	.PickerPopup--search {
-		flex: 1;
-	}
+.PickerPopup--header {
+	position: relative;
+	box-sizing: border-box;
+	height: UTILS__LOCAL_VAR(header-height);
+	padding: 20rpx 30rpx 0rpx;
+	display: flex;
+	align-items: center;
+}
+.PickerPopup--title {
+	flex: 1;
+	font-size: UTILS__GLOBAL_VAR(font-size, large);
+	font-weight: 600;
+}
+.PickerPopup--sub-title {
+	margin-left: 10rpx;
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+	font-size: UTILS__GLOBAL_VAR(font-size, normal);
+	font-weight: 400;
+}
+.PickerPopup--search-wrapper {
+	flex: none;
+	height: 88rpx;
+	display: flex;
+	align-items: center;
+	#{UTILS__VAR_NAME(search, height)}: 72rpx;
+}
+.PickerPopup--search {
+	flex: 1;
+}
 
-	.PickerPopup--option {
-		display: flex;
-		justify-content: start;
-		align-items: center;
-		padding: 20rpx 0;
-		&.PickerPopup--checked {
-			color: UTILS__GLOBAL_VAR(theme, primary);
-		}
-	}
-	.PickerPopup--option-multi {
-		flex: none;
-		margin-right: 12rpx;
-	}
-	.PickerPopup--option-single {
-		flex: none;
-		margin-left: 12rpx;
-	}
-	.PickerPopup--option-text {
-		@include UTILS__ELLIPSIS();
-	}
-	.PickerPopup--empty {
-		margin: auto auto;
-	}
-	.PickerPopup--load-more-wrapper {
-		position: sticky;
-		top: 100%;
+.PickerPopup--option {
+	display: flex;
+	justify-content: start;
+	align-items: center;
+	padding: 20rpx 0;
+	&.PickerPopup--checked {
+		color: UTILS__GLOBAL_VAR(theme, primary);
 	}
 }
+.PickerPopup--option-multi {
+	flex: none;
+	margin-right: 12rpx;
+}
+.PickerPopup--option-single {
+	flex: none;
+	margin-left: 12rpx;
+}
+.PickerPopup--option-text {
+	@include UTILS__ELLIPSIS();
+}
+.PickerPopup--empty {
+	margin: auto auto;
+}
+.PickerPopup--load-more-wrapper {
+	position: sticky;
+	top: 100%;
+}
 </style>

package/components/picker/picker.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import isEqual from 'lodash-es/isEqual';
+import { isEqual } from 'lodash-es';
 import { computed, inject, ref } from 'vue';
 import useClassNames from '../../composable/component-name';
 import SelectorCpn from '../selector/selector.vue';
@@ -102,15 +102,21 @@ const isReadonly = computed(() => props.readonly || isFormReadonly.value);
 
 const checkedOptions = computed(() => {
 	if (props.multiple) {
-		return props.options.filter((item) => (props.modelValue as unknown[])?.includes(item[props.valueKey]));
+		return props.options.filter((item) =>
+			(props.modelValue as unknown[])?.includes(item[props.valueKey])
+		);
 	}
-	return props.options.filter((item) => item[props.valueKey] === props.modelValue);
+	return props.options.filter(
+		(item) => item[props.valueKey] === props.modelValue
+	);
 });
 
 const valueStr = computed(() => {
 	if (props.valueText) return props.valueText;
 	if (props.modelValue === null) return '';
-	return checkedOptions.value.map((item) => item[props.labelKey] as string).join(props.joinText);
+	return checkedOptions.value
+		.map((item) => item[props.labelKey] as string)
+		.join(props.joinText);
 });
 
 const showPicker = () => {
@@ -137,7 +143,7 @@ const onConfirm = (checked: _Option | _Option[]) => {
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .Picker {
 	width: 100%;