@ecolovo/uniapp-components 2.0.4 → 2.0.5

package/components/loading/loading.vue

@@ -18,6 +18,7 @@
 <script lang="ts" setup>
 import useClassNames from '../../composable/component-name';
 import LoadingAnimation3 from './animations/loading-animation3.vue';
+import { loadingProps } from './types';
 
 defineOptions({
 	options: {
@@ -35,6 +36,7 @@ type _Props = {
 
 withDefaults(defineProps<_Props>(), {
 	title: '加载中...',
+	...loadingProps,
 });
 </script>
 

package/components/loading/types.d.ts

@@ -0,0 +1,6 @@
+export type ConfigurableLoadingProps = {
+    /** 加载文本 */
+    title?: string;
+};
+export declare let loadingProps: ConfigurableLoadingProps;
+export declare const setDefaultLoadingProps: (props?: ConfigurableLoadingProps) => void;

package/components/loading/types.js

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

package/components/loading/types.ts

@@ -0,0 +1,12 @@
+export type ConfigurableLoadingProps = {
+	/** 加载文本 */
+	title?: string;
+};
+
+export let loadingProps: ConfigurableLoadingProps = {};
+
+export const setDefaultLoadingProps = (
+	props: ConfigurableLoadingProps = {}
+) => {
+	loadingProps = props;
+};

package/components/message-box/message-box.d.ts

@@ -1,18 +1,16 @@
 export type MessageBoxOptions = {
-	/** 是否可见 */
-	modelValue?: boolean;
-	/** 内容 */
-	content?: string;
-	/** 是否模态框 */
-	modal?: boolean;
-	/** 是否居中标题 */
-	centerTitle?: boolean;
-	/** 对话框标题 */
-	title?: string;
-	/** 是否显示关闭按钮 */
-	showClose?: boolean;
-	/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
-	cancel?: string | boolean;
-	/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
-	confirm?: string | boolean;
+    /** 内容 */
+    content?: string;
+    /** 是否模态框 */
+    modal?: boolean;
+    /** 是否居中标题 */
+    centerTitle?: boolean;
+    /** 对话框标题 */
+    title?: string;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+    cancel?: string | boolean;
+    /** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+    confirm?: string | boolean;
 };

package/components/message-box/message-box.ts

@@ -1,6 +1,4 @@
 export type MessageBoxOptions = {
-	/** 是否可见 */
-	modelValue?: boolean;
 	/** 内容 */
 	content?: string;
 	/** 是否模态框 */

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

@@ -1,7 +1,7 @@
 <template>
 	<dialog-cpn
-		v-if="isVisible"
-		:model-value="isVisible"
+		v-if="isShow"
+		v-model="isShow"
 		:modal="innerOptions.modal"
 		:center-title="innerOptions.centerTitle"
 		:title="innerOptions.title"
@@ -9,21 +9,22 @@
 		:cancel="innerOptions.cancel"
 		:confirm="innerOptions.confirm"
 		:class="[...classNames, $style['MessageBox']]"
-		@update:model-value="emit('update:modelValue', $event)"
 		@confirm="onConfirm()"
 		@cancel="onCancel()"
-		@closed="isVisible = false"
+		@closed="isShow = false"
 	>
-		{{ innerOptions.content }}
+		<slot>{{ innerOptions.content }}</slot>
 	</dialog-cpn>
 </template>
 
 <script lang="ts" setup>
-import { mergeWith, omit } from 'lodash-es';
+import { mergeWith } 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';
+import { messageBoxProps } from './types';
+import { useAwaitableDialog, useModelValue } from '../../composable';
 
 defineOptions({
 	options: {
@@ -36,7 +37,6 @@ const classNames = useClassNames('message-box');
 const $style = useCssModule();
 
 const props = withDefaults(defineProps<MessageBoxOptions>(), {
-	modelValue: false,
 	content: '',
 	modal: true,
 	centerTitle: false,
@@ -44,17 +44,21 @@ const props = withDefaults(defineProps<MessageBoxOptions>(), {
 	showClose: false,
 	cancel: false,
 	confirm: '好的',
+	...messageBoxProps,
 });
 
-const isVisible = ref(false);
-const innerOptions = ref<Omit<MessageBoxOptions, 'modelValue'>>(
-	omit(props, ['modelValue'])
-);
+const isShow_ = defineModel<boolean>();
+/** 是否显示 */
+const isShow = useModelValue(isShow_);
+
+const { show: showDialog, onConfirm, onCancel } = useAwaitableDialog(isShow);
+
+const innerOptions = ref<MessageBoxOptions>(props);
 
 watch(
 	props,
 	(newProps, oldProps) => {
-		const { modelValue, ...otherProps } = newProps;
+		const { ...otherProps } = newProps;
 		innerOptions.value = mergeWith(
 			innerOptions.value,
 			otherProps,
@@ -67,39 +71,10 @@ watch(
 	{ immediate: true, deep: true }
 );
 
-watch(
-	() => props.modelValue,
-	(v) => {
-		isVisible.value = v;
-	}
-);
-
-const emit = defineEmits<{
-	(e: 'update:modelValue', val: boolean): void;
-}>();
-
-let resolvePromise: UniApp.PromiseResolvers<void>['resolve'] | undefined;
-let rejectPromise: UniApp.PromiseResolvers<void>['reject'] | undefined;
-
-const show = (options: Omit<MessageBoxOptions, 'modelValue'>) => {
+const show = (options: MessageBoxOptions) => {
 	innerOptions.value = { ...innerOptions.value, ...options };
-	emit('update:modelValue', (isVisible.value = true));
-
-	// const { promise, resolve } = Promise.withResolvers();
-	const promise = new Promise<void>((resolve, reject) => {
-		resolvePromise = resolve;
-		rejectPromise = reject;
-	});
-
-	return promise;
-};
-
-const onConfirm = () => {
-	resolvePromise?.();
-};
 
-const onCancel = () => {
-	rejectPromise?.(undefined);
+	return showDialog();
 };
 
 defineExpose({ show });

package/components/message-box/types.d.ts

@@ -0,0 +1,16 @@
+export type ConfigurableMessageBoxProps = {
+    /** 是否模态框 */
+    modal?: boolean;
+    /** 是否居中标题 */
+    centerTitle?: boolean;
+    /** 对话框标题 */
+    title?: string;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+    cancel?: string | boolean;
+    /** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+    confirm?: string | boolean;
+};
+export declare let messageBoxProps: ConfigurableMessageBoxProps;
+export declare const setDefaultMessageBoxProps: (props?: ConfigurableMessageBoxProps) => void;

package/components/message-box/types.js

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

package/components/message-box/types.ts

@@ -0,0 +1,22 @@
+export type ConfigurableMessageBoxProps = {
+	/** 是否模态框 */
+	modal?: boolean;
+	/** 是否居中标题 */
+	centerTitle?: boolean;
+	/** 对话框标题 */
+	title?: string;
+	/** 是否显示关闭按钮 */
+	showClose?: boolean;
+	/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+	cancel?: string | boolean;
+	/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+	confirm?: string | boolean;
+};
+
+export let messageBoxProps: ConfigurableMessageBoxProps = {};
+
+export const setDefaultMessageBoxProps = (
+	props: ConfigurableMessageBoxProps = {}
+) => {
+	messageBoxProps = props;
+};

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

@@ -98,13 +98,14 @@
 
 <script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue';
+import { round } from '@ecolovo/utils';
 import useClassNames from '../../composable/component-name';
-import { round } from '../../utils/round';
 import DialogContentCpn from '../dialog/dialog-content.vue';
 import IconCpn from '../icon/icon.vue';
 import NumpadCpn from '../numpad/numpad.vue';
 import PopoverContentCpn from '../popover/popover-content.vue';
 import PopoverMaskCpn from '../popover/popover-mask.vue';
+import { numberDialogProps } from './types';
 
 defineOptions({
 	options: {
@@ -149,6 +150,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	step: 1,
 	max: MAX,
 	min: MIN,
+	...numberDialogProps,
 });
 
 const emit = defineEmits<{
@@ -249,7 +251,7 @@ const handleOneStep = (step: number) => {
 	) {
 		return false;
 	}
-	const nextValue = round(+props.modelValue + step, props.precision);
+	const nextValue = round(+props.modelValue + step, -1 * props.precision);
 
 	updateStepValue(nextValue + '');
 	return true;
@@ -282,7 +284,7 @@ const validateValue = (value: string, isStepButton = false) => {
 		nextValue = props.max;
 		emit('error', `数值不能大于 ${props.max}`);
 	} else {
-		nextValue = round(+value, props.precision);
+		nextValue = round(+value, -1 * props.precision);
 	}
 	return nextValue;
 };

package/components/number-dialog/types.d.ts

@@ -0,0 +1,18 @@
+export type ConfigurableNumberDialogProps = {
+    /** 是否可编辑，为 true 时点击中间数字会弹出键盘 */
+    editable?: boolean;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 占位提示文本 */
+    placeholder?: string;
+    /** 小数的精度 */
+    precision?: number;
+    /** 步进器的步长 */
+    step?: number;
+    /** 最大值 */
+    max?: number;
+    /** 最小值 */
+    min?: number;
+};
+export declare let numberDialogProps: ConfigurableNumberDialogProps;
+export declare const setDefaultNumberDialogProps: (props?: ConfigurableNumberDialogProps) => void;

package/components/number-dialog/types.js

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

package/components/number-dialog/types.ts

@@ -0,0 +1,24 @@
+export type ConfigurableNumberDialogProps = {
+	/** 是否可编辑，为 true 时点击中间数字会弹出键盘 */
+	editable?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 占位提示文本 */
+	placeholder?: string;
+	/** 小数的精度 */
+	precision?: number;
+	/** 步进器的步长 */
+	step?: number;
+	/** 最大值 */
+	max?: number;
+	/** 最小值 */
+	min?: number;
+};
+
+export let numberDialogProps: ConfigurableNumberDialogProps = {};
+
+export const setDefaultNumberDialogProps = (
+	props: ConfigurableNumberDialogProps = {}
+) => {
+	numberDialogProps = props;
+};

package/components/number-input/number-input.scss

@@ -3,7 +3,7 @@
 // 可配置的变量
 $number-input: () !default;
 $number-input-default: (
-	font-size: inherit,
+	font-size: initial,
 	text-align: center,
 );
 $number-input: map.merge($number-input-default, $number-input);

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

@@ -77,9 +77,10 @@
 
 <script lang="ts" setup>
 import { computed, inject, nextTick, ref, watch } from 'vue';
+import { round } from '@ecolovo/utils';
 import useClassNames from '../../composable/component-name';
-import { round } from '../../utils/round';
 import IconCpn from '../icon/icon.vue';
+import { numberInputProps } from './types';
 
 defineOptions({
 	options: {
@@ -131,6 +132,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	step: 1,
 	max: MAX,
 	min: MIN,
+	...numberInputProps,
 });
 
 const emit = defineEmits<{
@@ -238,7 +240,7 @@ const handleOneStep = (step: number) => {
 	) {
 		return false;
 	}
-	const nextValue = round(+props.modelValue + step, props.precision);
+	const nextValue = round(+props.modelValue + step, -1 * props.precision);
 
 	updateStepValue(nextValue + '');
 	return true;
@@ -277,7 +279,7 @@ const validateValue = (value: string, isStepButton = false) => {
 		nextValue = props.max;
 		emit('error', `数值不能大于 ${props.max}`);
 	} else {
-		nextValue = round(+value, props.precision);
+		nextValue = round(+value, -1 * props.precision);
 	}
 	return nextValue;
 };

package/components/number-input/types.d.ts

@@ -0,0 +1,20 @@
+export type ConfigurableNumberInputProps = {
+    /** 是否可编辑 */
+    editable?: boolean;
+    /** 类型: input: 只有输入框 | step: 步进器，即带 + - 按钮 */
+    mode?: 'input' | 'step';
+    /** 输入模式: number: 只能输入整数 | digit: 小数 | text: 如需输入负数 */
+    type?: 'number' | 'digit' | 'text';
+    /** 占位提示文本 */
+    placeholder?: string;
+    /** 小数的精度 */
+    precision?: number;
+    /** 步进器的步长 */
+    step?: number;
+    /** 最大值 */
+    max?: number;
+    /** 最小值 */
+    min?: number;
+};
+export declare let numberInputProps: ConfigurableNumberInputProps;
+export declare const setDefaultNumberInputProps: (props?: ConfigurableNumberInputProps) => void;

package/components/number-input/types.js

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

package/components/number-input/types.ts

@@ -0,0 +1,26 @@
+export type ConfigurableNumberInputProps = {
+	/** 是否可编辑 */
+	editable?: boolean;
+	/** 类型: input: 只有输入框 | step: 步进器，即带 + - 按钮 */
+	mode?: 'input' | 'step';
+	/** 输入模式: number: 只能输入整数 | digit: 小数 | text: 如需输入负数 */
+	type?: 'number' | 'digit' | 'text';
+	/** 占位提示文本 */
+	placeholder?: string;
+	/** 小数的精度 */
+	precision?: number;
+	/** 步进器的步长 */
+	step?: number;
+	/** 最大值 */
+	max?: number;
+	/** 最小值 */
+	min?: number;
+};
+
+export let numberInputProps: ConfigurableNumberInputProps = {};
+
+export const setDefaultNumberInputProps = (
+	props: ConfigurableNumberInputProps = {}
+) => {
+	numberInputProps = props;
+};

package/components/numpad/numpad.vue

@@ -19,6 +19,7 @@ import { freezeDeep } from '../../utils/freezeDeep';
 import useClassNames from '../../composable/component-name';
 import ButtonCpn from '../button/button.vue';
 import IconCpn from '../icon/icon.vue';
+import { numpadProps } from './types';
 
 defineOptions({
 	options: {
@@ -75,6 +76,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	precision: 0,
 	max: MAX,
 	min: MIN,
+	...numpadProps,
 });
 
 const emit = defineEmits<{

package/components/numpad/types.d.ts

@@ -0,0 +1,10 @@
+export type ConfigurableNumpadProps = {
+    /** 小数的精度 */
+    precision?: number;
+    /** 允许输入的最大值 */
+    max?: number;
+    /** 允许输入的最小值 */
+    min?: number;
+};
+export declare let numpadProps: ConfigurableNumpadProps;
+export declare const setDefaultNumpadProps: (props?: ConfigurableNumpadProps) => void;

package/components/numpad/types.js

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

package/components/numpad/types.ts

@@ -0,0 +1,14 @@
+export type ConfigurableNumpadProps = {
+	/** 小数的精度 */
+	precision?: number;
+	/** 允许输入的最大值 */
+	max?: number;
+	/** 允许输入的最小值 */
+	min?: number;
+};
+
+export let numpadProps: ConfigurableNumpadProps = {};
+
+export const setDefaultNumpadProps = (props: ConfigurableNumpadProps = {}) => {
+	numpadProps = props;
+};

package/components/page/page-body.scss

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

package/components/page/page-footer.vue

@@ -32,14 +32,14 @@ type _Props = {
 	isTabPage?: boolean;
 };
 
-withDefaults(defineProps<_Props>(), {
+const props = withDefaults(defineProps<_Props>(), {
 	isTabPage: false,
 });
 
 const inlineStyle = computed(() => {
 	return [
 		// 底部安全区高度
-		`--safe-area-bottom: ${safeAreaInsetBottom}px;`,
+		`--safe-area-bottom: ${props.isTabPage ? 0 : safeAreaInsetBottom}px;`,
 	].join('');
 });
 </script>
@@ -67,7 +67,6 @@ const inlineStyle = computed(() => {
 	padding-bottom: var(--safe-area-bottom);
 	box-sizing: border-box;
 	z-index: UTILS__GLOBAL_VAR(z-index, page-footer);
-	box-shadow: 0 -4rpx 4rpx 4rpx #ccc;
 }
 
 // 将内容占满空间

package/components/page/page-header.vue

@@ -60,8 +60,9 @@
 /**
  * 页面头部部分容器组件，不单独使用，通过 page 组件间接引入
  */
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted } from 'vue';
 import useClassNames from '../../composable/component-name';
+import { useCurrentPageRoute } from '../../composable/page';
 import { homePath } from '../../configs';
 import {
 	navBarHeight,
@@ -69,6 +70,7 @@ import {
 	menuButtonWidthInCss,
 } from '../../utils/windowInfo';
 import IconCpn from '../icon/icon.vue';
+import { pageHeaderProps } from './types';
 
 defineOptions({
 	options: {
@@ -79,6 +81,14 @@ defineOptions({
 
 const classNames = useClassNames('page-header');
 
+type _Slots = {
+	default: () => void;
+	/** 额外内容 */
+	extra: () => void;
+};
+
+defineSlots<_Slots>();
+
 type _Props = {
 	/** 导航栏标题 */
 	title?: string;
@@ -98,14 +108,10 @@ const props = withDefaults(defineProps<_Props>(), {
 	fixed: false,
 	theme: 'light',
 	navType: undefined,
+	...pageHeaderProps,
 });
 
-/** 当前页面栈 */
-const currentPages = ref<ReturnType<typeof getCurrentPages>>([]);
-/** 当前页面路由 */
-const currentPageRoute = computed(() => {
-	return currentPages.value.slice(-1)[0]?.route || '';
-});
+const { currentPages, currentPageRoute, isTabbarPage } = useCurrentPageRoute();
 
 /** 是否显示返回按钮 */
 const hasBack = computed(() => {
@@ -113,6 +119,8 @@ const hasBack = computed(() => {
 	if (props.navType !== undefined) return !!(props.navType & 1);
 	// 在首页不显示返回按钮
 	if (homePath === '/' + currentPageRoute.value) return false;
+	// 如果是 tabbar 页面，则不显示返回按钮
+	if (isTabbarPage.value) return false;
 	// 页面栈只有一个时不显示返回按钮
 	if (currentPages.value.length <= 1) return false;
 	// 其他情况均显示返回按钮
@@ -125,9 +133,11 @@ const hasHome = computed(() => {
 	if (props.navType !== undefined) return !!(props.navType & 2);
 	// 在首页不显示返回首页按钮
 	if (homePath === '/' + currentPageRoute.value) return false;
-	// 页面栈只有一个时显示返回按钮
+	// 如果是 tabbar 页面，则不显示首页按钮
+	if (isTabbarPage.value) return false;
+	// 页面栈只有一个时显示首页按钮
 	if (currentPages.value.length === 1) return true;
-	// 其他情况均不显示返回按钮
+	// 其他情况均不显示首页按钮
 	return false;
 });