@ecolovo/uniapp-components 2.0.4 → 2.0.6

package/components/dialog/dialog-content.vue

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

package/components/dialog/dialog.vue

@@ -1,10 +1,10 @@
 <template>
-	<view :class="classNames">
+	<view v-if="isShow" :class="classNames">
 		<popover-mask-cpn
 			ref="maskRef"
-			:model-value="modelValue"
+			v-model="isShow"
 			:modal="modal || isLoading"
-			@update:model-value="emit('update:modelValue', $event)"
+			@mask="onCancel()"
 			@close="emit('close')"
 			@closed="emit('closed')"
 		>
@@ -16,11 +16,16 @@
 					:show-close="showClose"
 					:cancel="cancel"
 					:confirm="confirm"
-					@close="onClose()"
+					@close="onCancel()"
 					@cancel="onCancel()"
 					@confirm="onConfirm()"
 				>
+					<template #[headerSlot]><slot name="header" /></template>
+					<template #[titleSlot]><slot name="title" /></template>
 					<slot></slot>
+					<template #[footerSlot]><slot name="footer" /></template>
+					<template #[confirmSlot]><slot name="confirm" /></template>
+					<template #[cancelSlot]><slot name="cancel" /></template>
 				</dialog-content-cpn>
 			</slot>
 		</popover-mask-cpn>
@@ -28,10 +33,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, useSlots } from 'vue';
 import useClassNames from '../../composable/component-name';
 import PopoverMaskCpn from '../popover/popover-mask.vue';
 import DialogContentCpn from './dialog-content.vue';
+import { dialogProps } from './types';
+import { useAwaitableDialog, useModelValue } from '../../composable';
 
 defineOptions({
 	options: {
@@ -42,9 +49,29 @@ defineOptions({
 
 const classNames = useClassNames('dialog');
 
+type _Slots = {
+	content: () => void;
+	header: () => void;
+	title: () => void;
+	default: () => void;
+	footer: () => void;
+	cancel: () => void;
+	confirm: () => void;
+};
+
+defineSlots<_Slots>();
+
+// 这些值用于插槽的透传
+// 注意：小程序无法实现动态插槽，组件在初始化时就确定了哪些插槽在用，哪些没用使用
+// 后续无论如何更新都无法改变这个行为，但插槽的内容可以动态更新
+const $slots = useSlots();
+const headerSlot = $slots.header ? 'header' : 'unused_slot';
+const titleSlot = $slots.title ? 'title' : 'unused_slot';
+const footerSlot = $slots.footer ? 'footer' : 'unused_slot';
+const confirmSlot = $slots.confirm ? 'confirm' : 'unused_slot';
+const cancelSlot = $slots.cancel ? 'cancel' : 'unused_slot';
+
 type _Props = {
-	/** v-model 绑定值，控制对话框是否可见 */
-	modelValue?: boolean;
 	/** 是否模态框 */
 	modal?: boolean;
 	/** 是否显示 loading 动画 */
@@ -68,7 +95,6 @@ type _Props = {
 };
 
 const props = withDefaults(defineProps<_Props>(), {
-	modelValue: false,
 	modal: false,
 	loading: false,
 	title: '',
@@ -79,33 +105,34 @@ const props = withDefaults(defineProps<_Props>(), {
 	confirm: '确认',
 	closeOnConfirm: true,
 	async: false,
+	...dialogProps,
 });
 
 const emit = defineEmits<{
-	(e: 'update:modelValue', val: boolean): void;
 	(e: 'close'): void;
 	(e: 'closed'): void;
 	(e: 'cancel', closeFn?: VoidFunction): void;
-	(
-		e: 'confirm',
-		payload?: UniApp.PromiseResolvers<unknown> | VoidFunction
-	): void;
+	(e: 'confirm', payload?: PromiseResolvers<unknown> | VoidFunction): void;
 }>();
 
+const isShow_ = defineModel<boolean>();
+/** 是否显示 */
+const isShow = useModelValue(isShow_);
+
+const {
+	show,
+	onConfirm: onConfirmDialog,
+	onCancel: onCancelDialog,
+} = useAwaitableDialog(isShow);
+
 const isAsyncLoading = ref(false);
 const maskRef = ref<InstanceType<typeof PopoverMaskCpn>>();
 
 /** 按钮 loading */
 const isLoading = computed(() => props.loading || isAsyncLoading.value);
 
-const close = () => {
-	maskRef.value?.close();
-};
-
-/** 隐藏 */
-const onClose = () => {
-	if (isLoading.value) return;
-	close();
+const close = (onClosed?: VoidFunction) => {
+	maskRef.value?.close(onClosed);
 };
 
 /** 点击取消按钮响应 */
@@ -113,11 +140,13 @@ const onCancel = () => {
 	if (isLoading.value) return;
 
 	if (props.closeOnCancel) {
+		onCancelDialog();
 		emit('cancel');
 		close();
 		return;
 	}
 
+	onCancelDialog();
 	emit('cancel', maskRef.value?.close.bind(maskRef.value));
 };
 
@@ -128,13 +157,7 @@ const onConfirm = () => {
 	if (props.async) {
 		isAsyncLoading.value = true;
 
-		// 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;
-		});
+		const { promise, resolve, reject } = Promise.withResolvers();
 
 		promise
 			.then((willClose = true) => {
@@ -151,20 +174,23 @@ const onConfirm = () => {
 				}
 				isAsyncLoading.value = false;
 			});
+		onConfirmDialog();
 		emit('confirm', { resolve, reject });
 		return;
 	}
 
 	if (props.closeOnConfirm) {
+		onConfirmDialog();
 		emit('confirm');
 		close();
 		return;
 	}
 
+	onConfirmDialog();
 	emit('confirm', maskRef.value?.close.bind(maskRef.value));
 };
 
-defineExpose({ close });
+defineExpose({ show, close });
 </script>
 
 <style lang="scss" module>

package/components/dialog/types.d.ts

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

package/components/dialog/types.js

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

package/components/dialog/types.ts

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

package/components/dropdown/dropdown.vue

@@ -29,6 +29,7 @@
 import { computed } from 'vue';
 import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
+import { dropdownProps } from './types';
 
 defineOptions({
 	options: {
@@ -58,6 +59,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	align: '',
 	multiple: true,
 	formatter: null,
+	...dropdownProps,
 });
 
 /** 是否选择了值 */

package/components/dropdown/types.d.ts

@@ -0,0 +1,10 @@
+export type ConfigurableDropdownProps = {
+    /** 未选中时的提示语 */
+    placeholder?: string;
+    /** 文本对齐方式 */
+    align?: string;
+    /** 展示值格式化函数 */
+    formatter?: ((val: unknown) => string) | null;
+};
+export declare let dropdownProps: ConfigurableDropdownProps;
+export declare const setDefaultDropdownProps: (props?: ConfigurableDropdownProps) => void;

package/components/dropdown/types.js

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

package/components/dropdown/types.ts

@@ -0,0 +1,16 @@
+export type ConfigurableDropdownProps = {
+	/** 未选中时的提示语 */
+	placeholder?: string;
+	/** 文本对齐方式 */
+	align?: string;
+	/** 展示值格式化函数 */
+	formatter?: ((val: unknown) => string) | null;
+};
+
+export let dropdownProps: ConfigurableDropdownProps = {};
+
+export const setDefaultDropdownProps = (
+	props: ConfigurableDropdownProps = {}
+) => {
+	dropdownProps = props;
+};

package/components/empty/empty.vue

@@ -1,27 +1,39 @@
 <template>
 	<view :class="[...classNames, $style['Empty']]">
 		<template v-if="loading">
-			<image
-				v-if="loadingImage"
-				:src="loadingImage"
-				:class="$style['Empty--image']"
-			/>
-			<view v-else :class="$style['Empty--loading-icon-wrapper']">
-				<icon-cpn
-					icon="search"
-					:class="$style['Empty--loading-icon']"
+			<slot name="loading">
+				<image
+					v-if="loadingImage"
+					:src="loadingImage"
+					:class="$style['Empty--image']"
 				/>
-			</view>
-			<view :class="$style['Empty--text']">
-				<slot>{{ loadingText }}</slot>
-			</view>
+				<view v-else :class="$style['Empty--loading-icon-wrapper']">
+					<icon-cpn
+						icon="search"
+						:class="$style['Empty--loading-icon']"
+					/>
+				</view>
+				<view :class="$style['Empty--text']">
+					<slot>{{ loadingText }}</slot>
+				</view>
+			</slot>
 		</template>
 		<template v-else>
-			<image v-if="image" :src="image" :class="$style['Empty--image']" />
-			<image v-else :src="emptyImage" :class="$style['Empty--image']" />
-			<view :class="$style['Empty--text']">
-				<slot>{{ text }}</slot>
-			</view>
+			<slot name="empty">
+				<image
+					v-if="image"
+					:src="image"
+					:class="$style['Empty--image']"
+				/>
+				<image
+					v-else
+					:src="emptyImage"
+					:class="$style['Empty--image']"
+				/>
+				<view :class="$style['Empty--text']">
+					<slot>{{ text }}</slot>
+				</view>
+			</slot>
 		</template>
 	</view>
 </template>
@@ -30,6 +42,7 @@
 import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
 import emptyImage from '../../resources/image/empty.svg';
+import { emptyProps } from './types';
 
 defineOptions({
 	options: {
@@ -59,6 +72,7 @@ withDefaults(defineProps<_Props>(), {
 	loading: false,
 	loadingImage: '',
 	loadingText: '数据加载中',
+	...emptyProps,
 });
 </script>
 
@@ -86,16 +100,19 @@ withDefaults(defineProps<_Props>(), {
 	margin-top: UTILS__LOCAL_VAR(space);
 	color: UTILS__LOCAL_VAR(color);
 	font-size: UTILS__LOCAL_VAR(font-size);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 }
 .Empty--loading-icon-wrapper {
 	width: 100rpx;
 	height: 100rpx;
+	font-size: 60rpx;
 	transform-origin: center center;
 	animation: Empty--circle 1.5s infinite linear;
 }
 .Empty--loading-icon {
-	position: absolute;
-	font-size: 60rpx;
 	color: UTILS__LOCAL_VAR(color);
 	animation: Empty--circle 1.5s linear infinite reverse;
 }

package/components/empty/types.d.ts

@@ -0,0 +1,12 @@
+export type ConfigurableEmptyProps = {
+    /** 图片 */
+    image?: string;
+    /** 文本 */
+    text?: string;
+    /** 数据加载中显示图片 */
+    loadingImage?: string;
+    /** 加载中文本 */
+    loadingText?: string;
+};
+export declare let emptyProps: ConfigurableEmptyProps;
+export declare const setDefaultEmptyProps: (props?: ConfigurableEmptyProps) => void;

package/components/empty/types.js

@@ -0,0 +1,9 @@
+export let emptyProps = {
+    image: '',
+    text: '暂无数据',
+    loadingImage: '',
+    loadingText: '数据加载中',
+};
+export const setDefaultEmptyProps = (props = {}) => {
+    emptyProps = props;
+};

package/components/empty/types.ts

@@ -0,0 +1,21 @@
+export type ConfigurableEmptyProps = {
+	/** 图片 */
+	image?: string;
+	/** 文本 */
+	text?: string;
+	/** 数据加载中显示图片 */
+	loadingImage?: string;
+	/** 加载中文本 */
+	loadingText?: string;
+};
+
+export let emptyProps: ConfigurableEmptyProps = {
+	image: '',
+	text: '暂无数据',
+	loadingImage: '',
+	loadingText: '数据加载中',
+};
+
+export const setDefaultEmptyProps = (props: ConfigurableEmptyProps = {}) => {
+	emptyProps = props;
+};

package/components/flex/flex.vue

@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import useClassNames from '../../composable/component-name';
+import { flexProps } from './types';
 
 defineOptions({
 	options: {
@@ -42,6 +43,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	align: 'center',
 	wrap: false,
 	gap: '0px',
+	...flexProps,
 });
 
 const gapValue = computed(() => {

package/components/flex/types.d.ts

@@ -0,0 +1,12 @@
+export type ConfigurableFlexProps = {
+    /** 当前轴对齐方式 */
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    /** 交叉轴对齐方式 */
+    align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+    /** 是否换行 */
+    wrap?: boolean;
+    /** 间距 */
+    gap?: string | number | (() => (string | number)[]);
+};
+export declare let flexProps: ConfigurableFlexProps;
+export declare const setDefaultFlexProps: (props?: ConfigurableFlexProps) => void;

package/components/flex/types.js

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

package/components/flex/types.ts

@@ -0,0 +1,22 @@
+export type ConfigurableFlexProps = {
+	/** 当前轴对齐方式 */
+	justify?:
+		| 'start'
+		| 'center'
+		| 'end'
+		| 'space-between'
+		| 'space-around'
+		| 'space-evenly';
+	/** 交叉轴对齐方式 */
+	align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+	/** 是否换行 */
+	wrap?: boolean;
+	/** 间距 */
+	gap?: string | number | (() => (string | number)[]);
+};
+
+export let flexProps: ConfigurableFlexProps = {};
+
+export const setDefaultFlexProps = (props: ConfigurableFlexProps = {}) => {
+	flexProps = props;
+};

package/components/form/form.vue

@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import { computed, provide } from 'vue';
 import useClassNames from '../../composable/component-name';
+import { formProps } from './types';
 
 defineOptions({
 	options: {
@@ -27,6 +28,7 @@ type _Props = {
 const props = withDefaults(defineProps<_Props>(), {
 	readonly: false,
 	type: 'line',
+	...formProps,
 });
 
 provide(

package/components/form/types.d.ts

@@ -0,0 +1,6 @@
+export type ConfigurableFormProps = {
+    /** 表单显示类型 */
+    type?: 'line' | 'next' | 'block';
+};
+export declare let formProps: ConfigurableFormProps;
+export declare const setDefaultFormProps: (props?: ConfigurableFormProps) => void;

package/components/form/types.js

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

package/components/form/types.ts

@@ -0,0 +1,10 @@
+export type ConfigurableFormProps = {
+	/** 表单显示类型 */
+	type?: 'line' | 'next' | 'block';
+};
+
+export let formProps: ConfigurableFormProps = {};
+
+export const setDefaultFormProps = (props: ConfigurableFormProps = {}) => {
+	formProps = props;
+};

package/components/form-item/form-item.scss

@@ -5,6 +5,12 @@ $form-item: () !default;
 $form-item-default: (
 	// label 宽度
 	label-width: 6em,
+	// label 颜色
+	label-color: #999,
+	// label 字体大小
+	label-font-size: UTILS__GLOBAL_VAR(font-size, normal),
+	// label 字体粗细
+	label-font-weight: 600,
 	// 高度
 	height: 80rpx
 );