@ecolovo/uniapp-components 2.0.4 → 2.0.5

package/components/page/page.vue

@@ -4,12 +4,12 @@
 			<page-header-cpn
 				v-if="hasHeader"
 				fixed
+				:center="centerTitle"
 				:theme="theme"
 				:title="title"
+				:nav-type="isTabbar ? 0 : undefined"
 			>
-				<template #extra>
-					<slot name="header-extra"></slot>
-				</template>
+				<template #[extraSlot]><slot name="header-extra" /></template>
 			</page-header-cpn>
 		</slot>
 
@@ -19,7 +19,7 @@
 				:has-header="hasHeader"
 				:has-footer="hasFooter && !!$slots.footer"
 				:use-scroll="useScroll"
-				:is-tab-page="tabbar"
+				:is-tab-page="isTabbar"
 				:enable-refresh="enableRefresh"
 				:refreshing="refreshing"
 				@scroll="$emit('scroll', $event)"
@@ -35,12 +35,12 @@
 
 		<page-footer-cpn
 			v-if="hasFooter && $slots.footer"
-			:is-tab-page="tabbar"
+			:is-tab-page="isTabbar"
 		>
 			<slot name="footer"></slot>
 		</page-footer-cpn>
 
-		<message-box-cpn ref="pageMessageBoxRef" />
+		<message-box-cpn ref="messageBoxRef" />
 
 		<loading-cpn
 			v-if="loading"
@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, ref } from 'vue';
+import { computed, provide, ref, useSlots } from 'vue';
 import useClassNames from '../../composable/component-name';
 import LoadingCpn from '../loading/loading.vue';
 import MessageBoxCpn from '../message-box/message-box.vue';
@@ -64,7 +64,9 @@ import {
 	navBarTopOffset,
 	safeAreaInsetBottom,
 } from '../../utils/windowInfo';
-import { useMessageBox } from '../../composable/message-box';
+import { useMessageBoxComponent } from '../../composable/message-box';
+import { pageProps } from './types';
+import { useCurrentPageRoute } from '../../composable/page';
 
 defineOptions({
 	options: {
@@ -75,9 +77,33 @@ defineOptions({
 
 const classNames = useClassNames('page');
 
+type _Slots = {
+	default: () => void;
+	/** 导航栏 */
+	header: () => void;
+	/** 导航栏额外内容 */
+	'header-extra': () => void;
+	/** 页面主体 */
+	body: () => void;
+	/** 固定布局内容插槽 */
+	fixed: () => void;
+	/** 底部操作栏 */
+	footer: () => void;
+};
+
+defineSlots<_Slots>();
+
+// 这些值用于插槽的透传
+// 注意：小程序无法实现动态插槽，组件在初始化时就确定了哪些插槽在用，哪些没用使用
+// 后续无论如何更新都无法改变这个行为，但插槽的内容可以动态更新
+const $slots = useSlots();
+const extraSlot = $slots['header-extra'] ? 'extra' : 'unused_slot';
+
 type _Props = {
 	/** 页面标题 */
 	title?: string;
+	/** 导航栏标题是否居中显示 */
+	centerTitle?: boolean;
 	/** 页面是否有导航栏，当为 true 时，页面主体部分会为导航栏留出空间；否则内容部分会显示在屏幕顶部 */
 	hasHeader?: boolean;
 	/**
@@ -104,8 +130,9 @@ type _Props = {
 	tabbar?: boolean;
 };
 
-withDefaults(defineProps<_Props>(), {
+const props = withDefaults(defineProps<_Props>(), {
 	title: '',
+	centerTitle: undefined,
 	hasHeader: true,
 	hasFooter: true,
 	useScroll: true,
@@ -115,9 +142,14 @@ withDefaults(defineProps<_Props>(), {
 	pageSize: 0,
 	showLoadMore: true,
 	theme: 'light',
-	tabbar: false,
+	tabbar: undefined,
+	...pageProps,
 });
 
+const { isTabbarPage } = useCurrentPageRoute();
+
+const isTabbar = computed(() => props.tabbar ?? isTabbarPage.value);
+
 defineEmits<{
 	(event: 'scroll', value: ScrollEvent): void;
 	(event: 'refresh'): void;
@@ -125,8 +157,9 @@ defineEmits<{
 }>();
 
 const pageBodyRef = ref<InstanceType<typeof PageBodyCpn>>();
-const pageMessageBoxRef = ref<InstanceType<typeof MessageBoxCpn>>();
-provide('ecolovo/page/messageBoxRef', pageMessageBoxRef);
+const { messageBoxRef, show, showConfirm, showMessageBox } =
+	useMessageBoxComponent();
+provide('ecolovo/page/messageBoxRef', messageBoxRef);
 
 /**
  * 滚动到顶部
@@ -146,8 +179,6 @@ const scrollIntoView = (viewId: string, animation = true) => {
 	pageBodyRef.value?.scrollIntoView(viewId, animation);
 };
 
-const { show, showConfirm, showMessageBox } = useMessageBox(pageMessageBoxRef);
-
 const inlineStyle = computed(() => {
 	return [
 		// 顶部安全区高度

package/components/page/types.d.ts

@@ -0,0 +1,16 @@
+export type ConfigurablePageProps = {
+    /** 是否使用scroll-view */
+    useScroll?: boolean;
+    /** 页面头部样式，主要用于控制导航栏字体颜色 */
+    theme?: 'light' | 'dark';
+};
+export declare let pageProps: ConfigurablePageProps;
+export declare const setDefaultPageProps: (props?: ConfigurablePageProps) => void;
+export type ConfigurablePageHeaderProps = {
+    /** 导航栏标题是否居中显示 */
+    center?: boolean;
+    /** 页面头部样式，主要用于控制导航栏字体颜色 */
+    theme?: 'light' | 'dark';
+};
+export declare let pageHeaderProps: ConfigurablePageHeaderProps;
+export declare const setDefaultPageHeaderProps: (props?: ConfigurablePageHeaderProps) => void;

package/components/page/types.js

@@ -0,0 +1,8 @@
+export let pageProps = {};
+export const setDefaultPageProps = (props = {}) => {
+    pageProps = props;
+};
+export let pageHeaderProps = {};
+export const setDefaultPageHeaderProps = (props = {}) => {
+    pageHeaderProps = props;
+};

package/components/page/types.ts

@@ -0,0 +1,27 @@
+export type ConfigurablePageProps = {
+	/** 是否使用scroll-view */
+	useScroll?: boolean;
+	/** 页面头部样式，主要用于控制导航栏字体颜色 */
+	theme?: 'light' | 'dark';
+};
+
+export let pageProps: ConfigurablePageProps = {};
+
+export const setDefaultPageProps = (props: ConfigurablePageProps = {}) => {
+	pageProps = props;
+};
+
+export type ConfigurablePageHeaderProps = {
+	/** 导航栏标题是否居中显示 */
+	center?: boolean;
+	/** 页面头部样式，主要用于控制导航栏字体颜色 */
+	theme?: 'light' | 'dark';
+};
+
+export let pageHeaderProps: ConfigurablePageHeaderProps = {};
+
+export const setDefaultPageHeaderProps = (
+	props: ConfigurablePageHeaderProps = {}
+) => {
+	pageHeaderProps = props;
+};

package/components/picker/picker-popup.vue

@@ -1,9 +1,8 @@
 <template>
 	<popup-cpn
 		ref="popupRef"
-		:model-value="modelValue"
+		v-model="isShow"
 		:class="[...classNames, $style['PickerPopup']]"
-		@update:model-value="emit('update:modelValue', $event)"
 	>
 		<template #content>
 			<popup-content-cpn
@@ -112,11 +111,18 @@ defineOptions({
 
 const classNames = useClassNames('picker-popup');
 
+type _Slots = {
+	title: () => void;
+};
+
+defineSlots<_Slots>();
+
+/** 是否可见 */
+const isShow = defineModel<boolean>();
+
 type _Option = Record<string, string | number>;
 
 type _Props = {
-	/** 是否可见 */
-	modelValue?: boolean;
 	/** 标题 */
 	title?: string;
 	/** 副标题 */
@@ -142,7 +148,6 @@ type _Props = {
 };
 
 const props = withDefaults(defineProps<_Props>(), {
-	modelValue: false,
 	title: '',
 	subTitle: '',
 	searchable: false,
@@ -157,7 +162,6 @@ const props = withDefaults(defineProps<_Props>(), {
 });
 
 const emit = defineEmits<{
-	(e: 'update:modelValue', val: boolean): void;
 	(e: 'confirm', val: _Option | _Option[]): void;
 	(e: 'search', text: string): void;
 	(e: 'load-more'): void;

package/components/picker/picker.vue

@@ -30,6 +30,7 @@ import { computed, inject, ref } from 'vue';
 import useClassNames from '../../composable/component-name';
 import SelectorCpn from '../selector/selector.vue';
 import PickerPopupCpn from './picker-popup.vue';
+import { pickerProps } from './types';
 
 defineOptions({
 	options: {
@@ -40,6 +41,12 @@ defineOptions({
 
 const classNames = useClassNames('picker');
 
+type _Slots = {
+	popup: () => void;
+};
+
+defineSlots<_Slots>();
+
 type _Option = Record<string, string | number>;
 type _Value = string | number | boolean | Record<string, unknown>;
 
@@ -80,6 +87,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	options: () => [],
 	multiple: false,
 	joinText: '、',
+	...pickerProps,
 });
 
 const emit = defineEmits<{

package/components/picker/types.d.ts

@@ -0,0 +1,14 @@
+export type ConfigurablePickerProps = {
+    /** 选项唯一标识 */
+    valueKey?: string;
+    /** 选项标签字段 */
+    labelKey?: string;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 弹出框标题 */
+    popupTitle?: string;
+    /** 多选时选项拼接的分隔符 */
+    joinText?: string;
+};
+export declare let pickerProps: ConfigurablePickerProps;
+export declare const setDefaultPickerProps: (props?: ConfigurablePickerProps) => void;

package/components/picker/types.js

@@ -0,0 +1,4 @@
+export let pickerProps = {};
+export const setDefaultPickerProps = (props = {}) => {
+    pickerProps = props;
+};

package/components/picker/types.ts

@@ -0,0 +1,18 @@
+export type ConfigurablePickerProps = {
+	/** 选项唯一标识 */
+	valueKey?: string;
+	/** 选项标签字段 */
+	labelKey?: string;
+	/** 占位文本 */
+	placeholder?: string;
+	/** 弹出框标题 */
+	popupTitle?: string;
+	/** 多选时选项拼接的分隔符 */
+	joinText?: string;
+};
+
+export let pickerProps: ConfigurablePickerProps = {};
+
+export const setDefaultPickerProps = (props: ConfigurablePickerProps = {}) => {
+	pickerProps = props;
+};

package/components/popover/popover-content.vue

@@ -34,7 +34,7 @@
 
 		<!-- loading 动画 -->
 		<view v-if="loading" :class="$style['PopoverContent--loading']">
-			<icon-cpn icon="loading-dot-spinner"></icon-cpn>
+			<icon-cpn icon="loading-dot-spinner" spinning></icon-cpn>
 		</view>
 	</view>
 </template>
@@ -57,6 +57,15 @@ defineOptions({
 
 const classNames = useClassNames('popover-content');
 
+type _Slots = {
+	custom: () => void;
+	header: () => void;
+	default: () => void;
+	footer: () => void;
+};
+
+defineSlots<_Slots>();
+
 type _Props = {
 	/** 弹出框位置，可选值为 top、bottom、left、right、center */
 	position?: 'top' | 'bottom' | 'left' | 'right' | 'center';

package/components/popover/popover-mask.vue

@@ -33,20 +33,19 @@ defineOptions({
 
 const classNames = useClassNames('popover-mask');
 
+const isShow = defineModel<boolean>({ required: true });
+
 type _Props = {
-	/** v-model 绑定值，控制弹出框是否可见 */
-	modelValue?: boolean;
 	/** 是否模态弹出框 */
 	modal?: boolean;
 };
 
 const props = withDefaults(defineProps<_Props>(), {
-	modelValue: false,
 	modal: false,
 });
 
 const emit = defineEmits<{
-	(e: 'update:modelValue', val: boolean): void;
+	(e: 'mask'): void;
 	(e: 'close'): void;
 	(e: 'closed'): void;
 }>();
@@ -70,7 +69,7 @@ const close = (onClosed?: VoidFunction) => {
 
 	setTimeout(() => {
 		onClosed?.();
-		emit('update:modelValue', false);
+		isShow.value = false;
 		emit('closed');
 	}, 300);
 };
@@ -78,6 +77,7 @@ const close = (onClosed?: VoidFunction) => {
 /** 点击遮罩层 */
 const onMask = () => {
 	if (props.modal) return;
+	emit('mask');
 	close();
 };
 

package/components/popover/popover.vue

@@ -1,49 +1,34 @@
 <template>
-	<view :class="[...classNames, $style['Popover']]">
+	<view v-if="isShow" :class="[...classNames, $style['Popover']]">
 		<popover-mask-cpn
-			v-if="modelValue"
 			ref="maskRef"
-			:model-value="modelValue"
+			v-model="isShow"
 			:modal="modal || loading"
-			@update:model-value="$emit('update:modelValue', $event)"
+			@mask="onConfirm()"
 			@close="$emit('close')"
 			@closed="$emit('closed')"
 		>
 			<popover-content-cpn
-				v-if="$slots.custom"
 				:position="position"
 				:fullscreen="fullscreen"
 				:loading="loading"
 			>
-				<template #custom>
-					<slot name="custom"></slot>
-				</template>
-			</popover-content-cpn>
-			<popover-content-cpn
-				v-else
-				:position="position"
-				:fullscreen="fullscreen"
-				:loading="loading"
-			>
-				<template v-if="$slots.header" #header>
-					<slot name="header"></slot>
-				</template>
-
+				<template #[customSlot]><slot name="custom" /></template>
+				<template #[headerSlot]><slot name="header" /></template>
 				<slot></slot>
-
-				<template v-if="$slots.footer" #footer>
-					<slot name="footer"></slot>
-				</template>
+				<template #[footerSlot]><slot name="footer" /></template>
 			</popover-content-cpn>
 		</popover-mask-cpn>
 	</view>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, useSlots } from 'vue';
 import useClassNames from '../../composable/component-name';
 import PopoverContentCpn from './popover-content.vue';
 import PopoverMaskCpn from './popover-mask.vue';
+import { popoverProps } from './types';
+import { useAwaitableDialog, useModelValue } from '../../composable';
 
 defineOptions({
 	options: {
@@ -54,9 +39,30 @@ defineOptions({
 
 const classNames = useClassNames('popover');
 
+type _Slots = {
+	custom: () => void;
+	header: () => void;
+	default: () => void;
+	footer: () => void;
+};
+
+defineSlots<_Slots>();
+
+// 这些值用于插槽的透传
+// 注意：小程序无法实现动态插槽，组件在初始化时就确定了哪些插槽在用，哪些没用使用
+// 后续无论如何更新都无法改变这个行为，但插槽的内容可以动态更新
+const $slots = useSlots();
+const customSlot = $slots.custom ? 'custom' : 'unused_slot';
+const headerSlot = $slots.header ? 'header' : 'unused_slot';
+const footerSlot = $slots.footer ? 'footer' : 'unused_slot';
+
+const isShow_ = defineModel<boolean>();
+/** 是否可见 */
+const isShow = useModelValue(isShow_);
+
+const { show, onConfirm } = useAwaitableDialog(isShow);
+
 type _Props = {
-	/** v-model 绑定值，控制弹出框是否可见 */
-	modelValue?: boolean;
 	/** 弹出框位置，可选值为 top、bottom、left、right、center */
 	position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
 	/** 是否占满屏幕 */
@@ -68,15 +74,14 @@ type _Props = {
 };
 
 withDefaults(defineProps<_Props>(), {
-	modelValue: false,
 	position: 'bottom',
 	fullscreen: false,
 	modal: false,
 	loading: false,
+	...popoverProps,
 });
 
 defineEmits<{
-	(e: 'update:modelValue', val: boolean): void;
 	(e: 'close'): void;
 	(e: 'closed'): void;
 }>();
@@ -88,7 +93,7 @@ const close = (onClosed?: VoidFunction) => {
 	maskRef.value?.close(onClosed);
 };
 
-defineExpose({ close });
+defineExpose({ show, close });
 </script>
 
 <style lang="scss" module>

package/components/popover/types.d.ts

@@ -0,0 +1,10 @@
+export type ConfigurablePopoverProps = {
+    /** 弹出框位置，可选值为 top、bottom、left、right、center */
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    /** 是否占满屏幕 */
+    fullscreen?: boolean;
+    /** 是否模态弹出框 */
+    modal?: boolean;
+};
+export declare let popoverProps: ConfigurablePopoverProps;
+export declare const setDefaultPopoverProps: (props?: ConfigurablePopoverProps) => void;

package/components/popover/types.js

@@ -0,0 +1,4 @@
+export let popoverProps = {};
+export const setDefaultPopoverProps = (props = {}) => {
+    popoverProps = props;
+};

package/components/popover/types.ts

@@ -0,0 +1,16 @@
+export type ConfigurablePopoverProps = {
+	/** 弹出框位置，可选值为 top、bottom、left、right、center */
+	position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+	/** 是否占满屏幕 */
+	fullscreen?: boolean;
+	/** 是否模态弹出框 */
+	modal?: boolean;
+};
+
+export let popoverProps: ConfigurablePopoverProps = {};
+
+export const setDefaultPopoverProps = (
+	props: ConfigurablePopoverProps = {}
+) => {
+	popoverProps = props;
+};

package/components/popup/popup-content.vue

@@ -3,32 +3,33 @@
 		<popover-content-cpn position="bottom" :loading="loading">
 			<!-- 内容上方标题 -->
 			<template #header>
-				<slot v-if="$slots.header" name="header"></slot>
-				<view
-					v-else-if="title || showClose"
-					:class="$style['PopupContent--header']"
-				>
+				<slot name="header">
 					<view
-						:class="[
-							$style['PopupContent--title'],
-							{
-								[$style['PopupContent--title-center']]:
-									centerTitle,
-							},
-						]"
+						v-if="title || showClose"
+						:class="$style['PopupContent--header']"
 					>
-						<slot name="title">
-							<text>{{ title }}</text>
-						</slot>
+						<view
+							:class="[
+								$style['PopupContent--title'],
+								{
+									[$style['PopupContent--title-center']]:
+										centerTitle,
+								},
+							]"
+						>
+							<slot name="title">
+								<text>{{ title }}</text>
+							</slot>
+						</view>
+						<view
+							v-if="showClose"
+							:class="$style['PopupContent--close']"
+							@click="$emit('close')"
+						>
+							<icon-cpn icon="close" tap-size="80rpx" />
+						</view>
 					</view>
-					<view
-						v-if="showClose"
-						:class="$style['PopupContent--close']"
-						@click="$emit('close')"
-					>
-						<icon-cpn icon="close" tap-size="80rpx" />
-					</view>
-				</view>
+				</slot>
 			</template>
 
 			<!-- 内容区域 -->
@@ -36,29 +37,35 @@
 
 			<!-- 内容下方操作按钮 -->
 			<template #footer>
-				<slot v-if="$slots.footer" name="footer"></slot>
-				<view
-					v-else-if="cancel || confirm"
-					:class="$style['PopupContent--footer']"
-				>
-					<view v-if="cancel" :class="$style['PopupContent--button']">
-						<slot name="cancel">
-							<button-cpn plain @click="$emit('cancel')">
-								{{ cancel }}
-							</button-cpn>
-						</slot>
-					</view>
+				<slot name="footer">
 					<view
-						v-if="confirm"
-						:class="$style['PopupContent--button']"
+						v-if="
+							cancel || confirm || $slots.cancel || $slots.confirm
+						"
+						:class="$style['PopupContent--footer']"
 					>
-						<slot name="confirm">
-							<button-cpn @click="$emit('confirm')">
-								{{ confirm }}
-							</button-cpn>
-						</slot>
+						<view
+							v-if="cancel || $slots.cancel"
+							:class="$style['PopupContent--button']"
+						>
+							<slot name="cancel">
+								<button-cpn plain @click="$emit('cancel')">
+									{{ cancel }}
+								</button-cpn>
+							</slot>
+						</view>
+						<view
+							v-if="confirm || $slots.confirm"
+							:class="$style['PopupContent--button']"
+						>
+							<slot name="confirm">
+								<button-cpn @click="$emit('confirm')">
+									{{ confirm }}
+								</button-cpn>
+							</slot>
+						</view>
 					</view>
-				</view>
+				</slot>
 			</template>
 		</popover-content-cpn>
 	</view>
@@ -79,6 +86,17 @@ defineOptions({
 
 const classNames = useClassNames('popup-content');
 
+type _Slots = {
+	header: () => void;
+	title: () => void;
+	default: () => void;
+	footer: () => void;
+	cancel: () => void;
+	confirm: () => void;
+};
+
+defineSlots<_Slots>();
+
 type _Props = {
 	/** 是否显示 loading 动画 */
 	loading?: boolean;