@ecolovo/uniapp-components 2.0.2 → 2.0.4

package/components/icon/icon.vue

@@ -4,11 +4,13 @@
 			...classNames,
 			...iconClass,
 			$style['Icon'],
-			{
-				[$style['Icon--spinning']]: spinning,
-			},
+			{ [$style['Icon--expand-tap-size']]: tapSize },
+			{ [$style['Icon--spinning']]: spinning },
 		]"
-	></text>
+		:style="inlineCssVar"
+		@click="$emit('click')"
+	>
+	</text>
 </template>
 
 <script lang="ts" setup>
@@ -25,17 +27,26 @@ defineOptions({
 
 const classNames = useClassNames('icon');
 
+defineEmits<{
+	(e: 'click'): void;
+}>();
+
 type _Props = {
 	/** 图标名 */
 	icon: string;
+	/** 点击范围 */
+	tapSize?: string;
 	/** 旋转动画 */
 	spinning?: boolean;
 };
 
 const props = withDefaults(defineProps<_Props>(), {
+	tapSize: '',
 	spinning: false,
 });
 
+const inlineCssVar = computed(() => `--tap-size: ${props.tapSize || '100%'};`);
+
 const iconEntry = computed(() => {
 	/* eslint-disable no-console */
 	if (!props.icon) console.error('icon 不能为空');
@@ -59,7 +70,7 @@ const iconEntry = computed(() => {
 					"@import '@/resources/iconfont/iconfont.css';",
 					'```',
 					`\n当前可用的图标列表: `,
-					[...iconMap.keys()].join('\n'),
+					[...iconMap.keys()].sort().join('\n'),
 				].join('\n')
 			);
 			console.groupEnd();
@@ -71,17 +82,44 @@ const iconEntry = computed(() => {
 });
 
 const iconClass = computed(() =>
-	iconEntry.value ? [iconEntry.value.fontFamily, iconEntry.value.prefix + iconEntry.value.name] : []
+	iconEntry.value
+		? [
+				iconEntry.value.fontFamily,
+				iconEntry.value.prefix + iconEntry.value.name,
+		  ]
+		: []
 );
 </script>
 
 <style lang="scss">
 @import '../../resources/iconfont/uniapp_ui_icon/iconfont.css';
 </style>
+
 <style lang="scss" module>
+@use '../../styles/utils' as *;
+@use './icon' as *;
+
+// 定义外部变量
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS('icon', $icon);
+}
+
 .Icon {
-	font-size: inherit;
-	line-height: inherit;
+	@extend %external-vars;
+	display: inline-block;
+	font-size: UTILS__LOCAL_VAR(font-size);
+}
+.Icon--expand-tap-size {
+	position: relative;
+	&::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: var(--tap-size, 100%);
+		height: var(--tap-size, 100%);
+		transform: translate(-50%, -50%);
+	}
 }
 .Icon--spinning {
 	display: inline-block;

package/components/image/image.vue

@@ -2,7 +2,7 @@
 	<image
 		:src="src || ''"
 		:preview-list="previewList"
-		:class="[...classNames, $style['Image']]"
+		:class="[...classNames]"
 		:mode="mode"
 		@click="preview"
 	></image>
@@ -25,6 +25,8 @@ type _Props = {
 	src?: string;
 	/** 图片显示模式 */
 	mode?: string;
+	/** 是否开启预览 */
+	preview?: boolean;
 	/** 预览列表 */
 	previewList?: string[];
 };
@@ -32,10 +34,20 @@ type _Props = {
 const props = withDefaults(defineProps<_Props>(), {
 	src: '',
 	mode: '',
+	preview: false,
 	previewList: () => [],
 });
 
+const emit = defineEmits<{
+	(e: 'click'): void;
+}>();
+
 const preview = () => {
+	if (!props.preview) {
+		emit('click');
+		return;
+	}
+
 	if (props.previewList.length > 0) {
 		uni.previewImage({
 			current: props.src,
@@ -49,10 +61,3 @@ const preview = () => {
 	});
 };
 </script>
-
-<style lang="scss" module>
-.Image {
-	width: 100%;
-	height: 100%;
-}
-</style>

package/components/index.d.ts

@@ -0,0 +1,50 @@
+export { default as Aspect } from './aspect/aspect.vue';
+export { default as Badge } from './badge/badge.vue';
+export { default as Button } from './button/button.vue';
+export { default as Checkbox } from './checkbox/checkbox.vue';
+export { default as CheckboxGroup } from './checkbox-group/checkbox-group.vue';
+export { default as CheckboxGroup2 } from './checkbox-group2/checkbox-group2.vue';
+export { default as Checkbox2 } from './checkbox-group2/checkbox2.vue';
+export { default as DataList } from './data-list/data-list.vue';
+export { default as DatePickerView } from './date-picker/date-picker-view.vue';
+export { default as DatePicker } from './date-picker/date-picker.vue';
+export { default as DialogContent } from './dialog/dialog-content.vue';
+export { default as Dialog } from './dialog/dialog.vue';
+export { default as Dropdown } from './dropdown/dropdown.vue';
+export { default as Empty } from './empty/empty.vue';
+export { default as Flex } from './flex/flex.vue';
+export { default as Form } from './form/form.vue';
+export { default as FormItem } from './form-item/form-item.vue';
+export { default as Icon } from './icon/icon.vue';
+export { default as Image } from './image/image.vue';
+export { default as Input } from './input/input.vue';
+export { default as PasswordInput } from './input/password-input.vue';
+export { default as ListPage } from './list-page/list-page.vue';
+export { default as LoadMore } from './load-more/load-more.vue';
+export { default as LoadingAnimation1 } from './loading/animations/loading-animation1.vue';
+export { default as LoadingAnimation2 } from './loading/animations/loading-animation2.vue';
+export { default as LoadingAnimation3 } from './loading/animations/loading-animation3.vue';
+export { default as LoadingAnimation4 } from './loading/animations/loading-animation4.vue';
+export { default as Loading } from './loading/loading.vue';
+export { default as MessageBox } from './message-box/message-box.vue';
+export { default as NumberDialog } from './number-dialog/number-dialog.vue';
+export { default as NumberInput } from './number-input/number-input.vue';
+export { default as Numpad } from './numpad/numpad.vue';
+export { default as PageBody } from './page/page-body.vue';
+export { default as PageFooter } from './page/page-footer.vue';
+export { default as PageHeader } from './page/page-header.vue';
+export { default as Page } from './page/page.vue';
+export { default as PickerPopup } from './picker/picker-popup.vue';
+export { default as Picker } from './picker/picker.vue';
+export { default as PopoverContent } from './popover/popover-content.vue';
+export { default as PopoverMask } from './popover/popover-mask.vue';
+export { default as Popover } from './popover/popover.vue';
+export { default as PopupContent } from './popup/popup-content.vue';
+export { default as Popup } from './popup/popup.vue';
+export { default as Price } from './price/price.vue';
+export { default as Search } from './search/search.vue';
+export { default as Searching } from './searching/searching.vue';
+export { default as Selector } from './selector/selector.vue';
+export { default as Switch } from './switch/switch.vue';
+export { default as Tab } from './tab/tab.vue';
+export { default as Textarea } from './textarea/textarea.vue';

package/components/index.js

@@ -0,0 +1,50 @@
+export { default as Aspect } from './aspect/aspect.vue';
+export { default as Badge } from './badge/badge.vue';
+export { default as Button } from './button/button.vue';
+export { default as Checkbox } from './checkbox/checkbox.vue';
+export { default as CheckboxGroup } from './checkbox-group/checkbox-group.vue';
+export { default as CheckboxGroup2 } from './checkbox-group2/checkbox-group2.vue';
+export { default as Checkbox2 } from './checkbox-group2/checkbox2.vue';
+export { default as DataList } from './data-list/data-list.vue';
+export { default as DatePickerView } from './date-picker/date-picker-view.vue';
+export { default as DatePicker } from './date-picker/date-picker.vue';
+export { default as DialogContent } from './dialog/dialog-content.vue';
+export { default as Dialog } from './dialog/dialog.vue';
+export { default as Dropdown } from './dropdown/dropdown.vue';
+export { default as Empty } from './empty/empty.vue';
+export { default as Flex } from './flex/flex.vue';
+export { default as Form } from './form/form.vue';
+export { default as FormItem } from './form-item/form-item.vue';
+export { default as Icon } from './icon/icon.vue';
+export { default as Image } from './image/image.vue';
+export { default as Input } from './input/input.vue';
+export { default as PasswordInput } from './input/password-input.vue';
+export { default as ListPage } from './list-page/list-page.vue';
+export { default as LoadMore } from './load-more/load-more.vue';
+export { default as LoadingAnimation1 } from './loading/animations/loading-animation1.vue';
+export { default as LoadingAnimation2 } from './loading/animations/loading-animation2.vue';
+export { default as LoadingAnimation3 } from './loading/animations/loading-animation3.vue';
+export { default as LoadingAnimation4 } from './loading/animations/loading-animation4.vue';
+export { default as Loading } from './loading/loading.vue';
+export { default as MessageBox } from './message-box/message-box.vue';
+export { default as NumberDialog } from './number-dialog/number-dialog.vue';
+export { default as NumberInput } from './number-input/number-input.vue';
+export { default as Numpad } from './numpad/numpad.vue';
+export { default as PageBody } from './page/page-body.vue';
+export { default as PageFooter } from './page/page-footer.vue';
+export { default as PageHeader } from './page/page-header.vue';
+export { default as Page } from './page/page.vue';
+export { default as PickerPopup } from './picker/picker-popup.vue';
+export { default as Picker } from './picker/picker.vue';
+export { default as PopoverContent } from './popover/popover-content.vue';
+export { default as PopoverMask } from './popover/popover-mask.vue';
+export { default as Popover } from './popover/popover.vue';
+export { default as PopupContent } from './popup/popup-content.vue';
+export { default as Popup } from './popup/popup.vue';
+export { default as Price } from './price/price.vue';
+export { default as Search } from './search/search.vue';
+export { default as Searching } from './searching/searching.vue';
+export { default as Selector } from './selector/selector.vue';
+export { default as Switch } from './switch/switch.vue';
+export { default as Tab } from './tab/tab.vue';
+export { default as Textarea } from './textarea/textarea.vue';

package/components/index.ts

@@ -0,0 +1,50 @@
+export { default as Aspect } from './aspect/aspect.vue';
+export { default as Badge } from './badge/badge.vue';
+export { default as Button } from './button/button.vue';
+export { default as Checkbox } from './checkbox/checkbox.vue';
+export { default as CheckboxGroup } from './checkbox-group/checkbox-group.vue';
+export { default as CheckboxGroup2 } from './checkbox-group2/checkbox-group2.vue';
+export { default as Checkbox2 } from './checkbox-group2/checkbox2.vue';
+export { default as DataList } from './data-list/data-list.vue';
+export { default as DatePickerView } from './date-picker/date-picker-view.vue';
+export { default as DatePicker } from './date-picker/date-picker.vue';
+export { default as DialogContent } from './dialog/dialog-content.vue';
+export { default as Dialog } from './dialog/dialog.vue';
+export { default as Dropdown } from './dropdown/dropdown.vue';
+export { default as Empty } from './empty/empty.vue';
+export { default as Flex } from './flex/flex.vue';
+export { default as Form } from './form/form.vue';
+export { default as FormItem } from './form-item/form-item.vue';
+export { default as Icon } from './icon/icon.vue';
+export { default as Image } from './image/image.vue';
+export { default as Input } from './input/input.vue';
+export { default as PasswordInput } from './input/password-input.vue';
+export { default as ListPage } from './list-page/list-page.vue';
+export { default as LoadMore } from './load-more/load-more.vue';
+export { default as LoadingAnimation1 } from './loading/animations/loading-animation1.vue';
+export { default as LoadingAnimation2 } from './loading/animations/loading-animation2.vue';
+export { default as LoadingAnimation3 } from './loading/animations/loading-animation3.vue';
+export { default as LoadingAnimation4 } from './loading/animations/loading-animation4.vue';
+export { default as Loading } from './loading/loading.vue';
+export { default as MessageBox } from './message-box/message-box.vue';
+export { default as NumberDialog } from './number-dialog/number-dialog.vue';
+export { default as NumberInput } from './number-input/number-input.vue';
+export { default as Numpad } from './numpad/numpad.vue';
+export { default as PageBody } from './page/page-body.vue';
+export { default as PageFooter } from './page/page-footer.vue';
+export { default as PageHeader } from './page/page-header.vue';
+export { default as Page } from './page/page.vue';
+export { default as PickerPopup } from './picker/picker-popup.vue';
+export { default as Picker } from './picker/picker.vue';
+export { default as PopoverContent } from './popover/popover-content.vue';
+export { default as PopoverMask } from './popover/popover-mask.vue';
+export { default as Popover } from './popover/popover.vue';
+export { default as PopupContent } from './popup/popup-content.vue';
+export { default as Popup } from './popup/popup.vue';
+export { default as Price } from './price/price.vue';
+export { default as Search } from './search/search.vue';
+export { default as Searching } from './searching/searching.vue';
+export { default as Selector } from './selector/selector.vue';
+export { default as Switch } from './switch/switch.vue';
+export { default as Tab } from './tab/tab.vue';
+export { default as Textarea } from './textarea/textarea.vue';

package/components/input/input.vue

@@ -2,7 +2,10 @@
 	<view :class="[...classNames, $style['Input']]" @click="setFocus">
 		<view
 			v-if="isReadonly || (useText && modelValue && !focused)"
-			:class="[$style['Input--text'], { [$style['Input--ellipsis']]: ellipsis }]"
+			:class="[
+				$style['Input--text'],
+				{ [$style['Input--ellipsis']]: ellipsis },
+			]"
 		>
 			{{ modelValue }}
 		</view>
@@ -50,7 +53,14 @@ type _Props = {
 	/** 绑定值 */
 	modelValue?: string;
 	/** 键盘类型 */
-	type?: 'text' | 'number' | 'idcard' | 'digit' | 'tel' | 'safe-password' | 'nickname';
+	type?:
+		| 'text'
+		| 'number'
+		| 'idcard'
+		| 'digit'
+		| 'tel'
+		| 'safe-password'
+		| 'nickname';
 	/** 是否添加清空图标 */
 	clearable?: boolean;
 	/** 是否禁用 */
@@ -101,7 +111,7 @@ const setFocus = () => {
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .Input {
 	width: 100%;

package/components/input/password-input.vue

@@ -61,7 +61,7 @@ const isShowPassword = ref(false);
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .PasswordInput {
 	width: 100%;
@@ -81,7 +81,7 @@ const isShowPassword = ref(false);
 		font-size: 40rpx;
 		color: #999;
 		margin-left: 20rpx;
-		#{UTILS__VAR_NAME(tap-size, icon)}: 80rpx;
+		#{UTILS__VAR_NAME(icon, tap-size)}: 80rpx;
 	}
 }
 </style>

package/components/list-page/list-page.vue

@@ -21,7 +21,10 @@
 			<slot></slot>
 		</data-list-cpn>
 
-		<empty-cpn v-if="!pagingData || pagingData.data.length === 0" :class="$style['ListPage--empty']"></empty-cpn>
+		<empty-cpn
+			v-if="!pagingData || pagingData.data.length === 0"
+			:class="$style['ListPage--empty']"
+		></empty-cpn>
 
 		<template v-if="hasFooter" #footer>
 			<slot name="footer"></slot>
@@ -31,7 +34,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { PagingData } from '@ecolovo/utils/uniapp/paging';
+import type { PagingData } from '@ecolovo/utils';
 import useClassNames from '../../composable/component-name';
 import DataListCpn from '../data-list/data-list.vue';
 import EmptyCpn from '../empty/empty.vue';
@@ -77,8 +80,8 @@ const props = withDefaults(defineProps<_Props>(), {
 });
 
 const emit = defineEmits<{
-	(e: 'refresh', payload?: Omit<PromiseWithResolvers<unknown>, 'promise'>): void;
-	(e: 'reach-bottom', payload?: Omit<PromiseWithResolvers<unknown>, 'promise'>): void;
+	(e: 'refresh', payload?: UniApp.PromiseResolvers<unknown>): void;
+	(e: 'reach-bottom', payload?: UniApp.PromiseResolvers<unknown>): void;
 }>();
 
 /** 是否正在刷新中 */
@@ -91,7 +94,15 @@ const onRefresh = () => {
 	if (isRefreshing.value) return;
 
 	isRefreshing.value = true;
-	const { promise, resolve, reject } = Promise.withResolvers();
+
+	// const { promise, resolve, reject } = Promise.withResolvers();
+	let resolve: UniApp.PromiseResolver<unknown>,
+		reject: UniApp.PromiseRejector<unknown>;
+	const promise = new Promise((res, rej) => {
+		resolve = res;
+		reject = rej;
+	});
+
 	promise.finally(() => {
 		isRefreshing.value = false;
 		uni.stopPullDownRefresh();
@@ -105,7 +116,14 @@ const onLoadMore = () => {
 	if (!props.pagingData?.hasMore) return;
 
 	isLoadingMore.value = true;
-	const { promise, resolve, reject } = Promise.withResolvers();
+	// const { promise, resolve, reject } = Promise.withResolvers();
+	let resolve: UniApp.PromiseResolver<unknown>,
+		reject: UniApp.PromiseRejector<unknown>;
+	const promise = new Promise((res, rej) => {
+		resolve = res;
+		reject = rej;
+	});
+
 	promise.finally(() => {
 		isLoadingMore.value = false;
 		uni.stopPullDownRefresh();

package/components/load-more/load-more.vue

@@ -7,7 +7,12 @@
 			<icon-cpn icon="loading-dot-spinner"></icon-cpn>
 			加载中...
 		</view>
-		<view v-else :class="$style['LoadMore--content']" @click="$emit('load-more')">上滑或点击加载更多</view>
+		<view
+			v-else
+			:class="$style['LoadMore--content']"
+			@click="$emit('load-more')"
+			>上滑或点击加载更多</view
+		>
 	</view>
 </template>
 
@@ -50,7 +55,7 @@ defineEmits<{
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($load-more, 'load-more');
+	@include UTILS__DEFINE_COMPONENT_VARS('load-more', $load-more);
 }
 
 .LoadMore {

package/components/loading/animations/loading-animation3.vue

@@ -43,22 +43,27 @@ const classNames = useClassNames('loading-animation3');
 		width: $main-size;
 		aspect-ratio: 1;
 		border-radius: 50%;
-		box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
+		box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s,
+			$right-x $translate-y 0 $size-s;
 		translate: 0 (-1 * $translate-y);
 		animation: LoadingAnimation3--loading-dots 1.5s infinite linear;
 
 		@keyframes LoadingAnimation3--loading-dots {
 			15% {
-				box-shadow: $left-x $translate-y 0 $size-l, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
+				box-shadow: $left-x $translate-y 0 $size-l,
+					0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
 			}
 			30% {
-				box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-l, $right-x $translate-y 0 $size-s;
+				box-shadow: $left-x $translate-y 0 $size-s,
+					0 $translate-y 0 $size-l, $right-x $translate-y 0 $size-s;
 			}
 			45% {
-				box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-l;
+				box-shadow: $left-x $translate-y 0 $size-s,
+					0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-l;
 			}
 			60% {
-				box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
+				box-shadow: $left-x $translate-y 0 $size-s,
+					0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
 			}
 		}
 

package/components/loading/animations/loading-animation4.vue

@@ -30,29 +30,86 @@ const classNames = useClassNames('loading-animation4');
 		aspect-ratio: 1;
 		border-radius: 50%;
 		border: 0.1em solid currentcolor;
-		animation: spinner-1 0.8s infinite linear alternate, spinner-2 1.6s infinite linear;
+		animation: spinner-1 0.8s infinite linear alternate,
+			spinner-2 1.6s infinite linear;
 
 		@keyframes spinner-1 {
 			0% {
-				clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+				clip-path: polygon(
+					50% 50%,
+					0 0,
+					50% 0%,
+					50% 0%,
+					50% 0%,
+					50% 0%,
+					50% 0%
+				);
 			}
 			12.5% {
-				clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+				clip-path: polygon(
+					50% 50%,
+					0 0,
+					50% 0%,
+					100% 0%,
+					100% 0%,
+					100% 0%,
+					100% 0%
+				);
 			}
 			25% {
-				clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
+				clip-path: polygon(
+					50% 50%,
+					0 0,
+					50% 0%,
+					100% 0%,
+					100% 100%,
+					100% 100%,
+					100% 100%
+				);
 			}
 			50% {
-				clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+				clip-path: polygon(
+					50% 50%,
+					0 0,
+					50% 0%,
+					100% 0%,
+					100% 100%,
+					50% 100%,
+					0% 100%
+				);
 			}
 			62.5% {
-				clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+				clip-path: polygon(
+					50% 50%,
+					100% 0,
+					100% 0%,
+					100% 0%,
+					100% 100%,
+					50% 100%,
+					0% 100%
+				);
 			}
 			75% {
-				clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
+				clip-path: polygon(
+					50% 50%,
+					100% 100%,
+					100% 100%,
+					100% 100%,
+					100% 100%,
+					50% 100%,
+					0% 100%
+				);
 			}
 			100% {
-				clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
+				clip-path: polygon(
+					50% 50%,
+					50% 100%,
+					50% 100%,
+					50% 100%,
+					50% 100%,
+					50% 100%,
+					0% 100%
+				);
 			}
 		}
 		@keyframes spinner-2 {

package/components/loading/loading.vue

@@ -1,7 +1,10 @@
 <template>
-	<view :class="[...classNames, $style['Loading']]" @touchmove.stop.prevent="doNothing">
+	<view :class="[...classNames, $style['Loading']]" @touchmove.stop.prevent>
 		<!-- #ifdef APP-PLUS -->
-		<cover-view :class="$style['Loading--wrapper-cover']" @touchmove.stop.prevent="doNothing"></cover-view>
+		<cover-view
+			:class="$style['Loading--wrapper-cover']"
+			@touchmove.stop.prevent
+		></cover-view>
 		<!-- #endif -->
 		<view :class="$style['Loading--content']">
 			<loading-animation3 :class="$style['Loading--icon']" />
@@ -33,12 +36,10 @@ type _Props = {
 withDefaults(defineProps<_Props>(), {
 	title: '加载中...',
 });
-
-const doNothing = () => {};
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .Loading {
 	position: fixed;
@@ -49,7 +50,7 @@ const doNothing = () => {};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	z-index: UTILS__z-index('loading');
+	z-index: UTILS__GLOBAL_VAR(z-index, loading);
 	background: #0000004d;
 
 	/* #ifdef APP-PLUS */

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

@@ -0,0 +1,18 @@
+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;
+};

package/components/message-box/message-box.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,18 @@
+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;
+};