@ecolovo/uniapp-components 2.0.2 → 2.0.3

package/components/date-picker/date-picker-view.vue

@@ -7,17 +7,29 @@
 		@pickend="onPickEnd"
 	>
 		<picker-view-column>
-			<view v-for="item in yearOptions" :key="item" :class="$style['DatePickerView--option']">
+			<view
+				v-for="item in yearOptions"
+				:key="item"
+				:class="$style['DatePickerView--option']"
+			>
 				{{ item }} 年
 			</view>
 		</picker-view-column>
 		<picker-view-column>
-			<view v-for="item in monthOptions" :key="item" :class="$style['DatePickerView--option']">
+			<view
+				v-for="item in monthOptions"
+				:key="item"
+				:class="$style['DatePickerView--option']"
+			>
 				{{ item }} 月
 			</view>
 		</picker-view-column>
 		<picker-view-column>
-			<view v-for="item in dateOptions" :key="item" :class="$style['DatePickerView--option']">
+			<view
+				v-for="item in dateOptions"
+				:key="item"
+				:class="$style['DatePickerView--option']"
+			>
 				{{ item }} 日
 			</view>
 		</picker-view-column>
@@ -26,7 +38,7 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref } from 'vue';
-import range from 'lodash-es/range';
+import { range } from 'lodash-es';
 import useClassNames from '../../composable/component-name';
 import { formatDate, toDate } from '../../utils/date';
 
@@ -88,7 +100,8 @@ const dateOptions = ref<number[]>([]);
 const pickerValue = ref<number[] | string[]>([0, 0, 0]);
 
 const currentValue = computed({
-	get: () => (props.modelValue === null ? innerValue.value : props.modelValue),
+	get: () =>
+		props.modelValue === null ? innerValue.value : props.modelValue,
 	set: (val: string) => {
 		emit('update:modelValue', val);
 		innerValue.value = val;
@@ -111,7 +124,9 @@ const syncPickerValue = (date: Date | number | string) => {
 	const k = dateOptions.value.indexOf(Number(d));
 	nextTick(() => {
 		pickerValue.value =
-			typeof pickerValue.value[0] === 'number' ? [i, j, k].map((item) => item.toString()) : [i, j, k];
+			typeof pickerValue.value[0] === 'number'
+				? [i, j, k].map((item) => item.toString())
+				: [i, j, k];
 	});
 };
 
@@ -119,14 +134,18 @@ const syncPickerValue = (date: Date | number | string) => {
 const handlePickerChange = (e: Event) => {
 	const newPickerValue = (e as CustomEvent).detail.value as number[];
 	/** 获取变化的列 */
-	const col = pickerValue.value.findIndex((item, index) => Number(item) !== Number(newPickerValue[index]));
+	const col = pickerValue.value.findIndex(
+		(item, index) => Number(item) !== Number(newPickerValue[index])
+	);
 	const year = yearOptions[newPickerValue[0]!]!;
 	const month = monthOptions[newPickerValue[1]!]!;
 	// 如果改变的是年份或月份，需要重新获取日期列表
 	if (col === 0 || col === 1) {
 		dateOptions.value = getDateOptions(toDate(`${year}-${month}-01`)!);
 		newPickerValue[2] = Math.min(
-			newPickerValue[2] === -1 ? dateOptions.value.length - 1 : newPickerValue[2]!,
+			newPickerValue[2] === -1
+				? dateOptions.value.length - 1
+				: newPickerValue[2]!,
 			dateOptions.value.length - 1
 		);
 	}
@@ -138,20 +157,30 @@ const handlePickerChange = (e: Event) => {
 	if (props.min && dateStr < props.min) {
 		let minDate: string;
 
-		if (props.min === 'today') minDate = formatDate(new Date());
-		else if (props.min === 'tomorrow') minDate = formatDate(new Date(Date.now() + 8.64e7));
-		else if (props.min === 'yesterday') minDate = formatDate(new Date(Date.now() - 8.64e7));
-		else minDate = props.min;
+		if (props.min === 'today') {
+			minDate = formatDate(new Date());
+		} else if (props.min === 'tomorrow') {
+			minDate = formatDate(new Date(Date.now() + 8.64e7));
+		} else if (props.min === 'yesterday') {
+			minDate = formatDate(new Date(Date.now() - 8.64e7));
+		} else {
+			minDate = props.min;
+		}
 
 		dateStr = minDate;
 	}
 	if (props.max && dateStr > props.max) {
 		let maxDate: string;
 
-		if (props.max === 'today') maxDate = formatDate(new Date());
-		else if (props.max === 'tomorrow') maxDate = formatDate(new Date(Date.now() + 8.64e7));
-		else if (props.max === 'yesterday') maxDate = formatDate(new Date(Date.now() - 8.64e7));
-		else maxDate = props.max;
+		if (props.max === 'today') {
+			maxDate = formatDate(new Date());
+		} else if (props.max === 'tomorrow') {
+			maxDate = formatDate(new Date(Date.now() + 8.64e7));
+		} else if (props.max === 'yesterday') {
+			maxDate = formatDate(new Date(Date.now() - 8.64e7));
+		} else {
+			maxDate = props.max;
+		}
 
 		dateStr = maxDate;
 	}

package/components/date-picker/date-picker.vue

@@ -17,14 +17,17 @@
 			v-model="isShowPopup"
 			:cancel="false"
 			title="选择日期"
-			@click.stop.prevent="doNothing"
+			@click.stop.prevent
 			@confirm="onConfirm"
 		>
 			<view v-if="range" :class="$style['DatePicker--date-selector']">
 				<view
 					:class="[
 						$style['DatePicker--date-input'],
-						{ [$style['DatePicker--date-checked']]: 'start' === checkedDateType },
+						{
+							[$style['DatePicker--date-checked']]:
+								'start' === checkedDateType,
+						},
 					]"
 					@click="selectDateType('start')"
 				>
@@ -34,7 +37,10 @@
 				<view
 					:class="[
 						$style['DatePicker--date-input'],
-						{ [$style['DatePicker--date-checked']]: 'end' === checkedDateType },
+						{
+							[$style['DatePicker--date-checked']]:
+								'end' === checkedDateType,
+						},
 					]"
 					@click="selectDateType('end')"
 				>
@@ -43,10 +49,20 @@
 			</view>
 
 			<view v-show="checkedDateType === 'start'">
-				<date-picker-view-cpn v-model="startStr" :min="min" :max="max" @change="onChangeStart" />
+				<date-picker-view-cpn
+					v-model="startStr"
+					:min="min"
+					:max="max"
+					@change="onChangeStart"
+				/>
 			</view>
 			<view v-if="range" v-show="checkedDateType === 'end'">
-				<date-picker-view-cpn v-model="endStr" :min="min" :max="max" @change="onChangeEnd" />
+				<date-picker-view-cpn
+					v-model="endStr"
+					:min="min"
+					:max="max"
+					@change="onChangeEnd"
+				/>
 			</view>
 		</popup-cpn>
 	</view>
@@ -132,20 +148,30 @@ const isReadonly = computed(() => props.readonly || isFormReadonly.value);
 
 const startDate = computed(() => {
 	return formatDate(
-		toDate(props.range && Array.isArray(props.modelValue) ? props.modelValue[0] : (props.modelValue as string))
+		toDate(
+			props.range && Array.isArray(props.modelValue)
+				? props.modelValue[0]
+				: (props.modelValue as string)
+		)
 	);
 });
 
 const endDate = computed(() => {
-	return formatDate(toDate(props.range && Array.isArray(props.modelValue) ? props.modelValue[1] : ''));
+	return formatDate(
+		toDate(
+			props.range && Array.isArray(props.modelValue)
+				? props.modelValue[1]
+				: ''
+		)
+	);
 });
 
 const showText = computed(() => {
-	return props.range && startDate.value && endDate.value ? `${startDate.value} 至 ${endDate.value}` : startDate.value;
+	return props.range && startDate.value && endDate.value
+		? `${startDate.value} 至 ${endDate.value}`
+		: startDate.value;
 });
 
-const doNothing = () => {};
-
 /** 显示选择器弹出框 */
 const showPicker = () => {
 	if (props.disabled || isReadonly.value) {
@@ -156,7 +182,8 @@ const showPicker = () => {
 
 	const [start, end] = [startDate.value, endDate.value];
 	startStr.value = start || formatDate(new Date());
-	endStr.value = end || formatDate(new Date(Date.now() + (props.canSame ? 0 : 8.64e7)));
+	endStr.value =
+		end || formatDate(new Date(Date.now() + (props.canSame ? 0 : 8.64e7)));
 
 	isShowPopup.value = true;
 	emit('show');
@@ -170,12 +197,17 @@ const selectDateType = (type: 'start' | 'end') => {
 const onChangeStart = (dateStr: string) => {
 	if (!props.range) return;
 
-	const timeDiff = toDate(endStr.value)!.getTime() - toDate(dateStr)!.getTime();
+	const timeDiff =
+		toDate(endStr.value)!.getTime() - toDate(dateStr)!.getTime();
 	if (endStr.value <= dateStr || props.keepDiff) {
 		if (props.keepDiff) {
-			endStr.value = formatDate(new Date(toDate(dateStr)!.getTime() + timeDiff));
+			endStr.value = formatDate(
+				new Date(toDate(dateStr)!.getTime() + timeDiff)
+			);
 		} else if (!props.canSame) {
-			endStr.value = formatDate(new Date(toDate(dateStr)!.getTime() + 8.64e7));
+			endStr.value = formatDate(
+				new Date(toDate(dateStr)!.getTime() + 8.64e7)
+			);
 		} else {
 			endStr.value = dateStr;
 		}
@@ -187,16 +219,24 @@ const onChangeEnd = (dateStr: string) => {
 		if (props.canSame) {
 			endStr.value = startStr.value;
 		} else {
-			endStr.value = formatDate(new Date(toDate(startStr.value)!.getTime() + 8.64e7));
+			endStr.value = formatDate(
+				new Date(toDate(startStr.value)!.getTime() + 8.64e7)
+			);
 		}
 	}
 };
 
 const onConfirm = () => {
 	popupRef.value?.close();
-	const startAppend = Array.isArray(props.timeAppend) ? props.timeAppend[0] : props.timeAppend;
-	const endAppend = Array.isArray(props.timeAppend) ? props.timeAppend[1] : props.timeAppend;
-	const start = startAppend ? `${startStr.value} ${startAppend}` : startStr.value;
+	const startAppend = Array.isArray(props.timeAppend)
+		? props.timeAppend[0]
+		: props.timeAppend;
+	const endAppend = Array.isArray(props.timeAppend)
+		? props.timeAppend[1]
+		: props.timeAppend;
+	const start = startAppend
+		? `${startStr.value} ${startAppend}`
+		: startStr.value;
 	const end = endAppend ? `${endStr.value} ${endAppend}` : endStr.value;
 	const result = props.range ? ([start, end] as [string, string]) : start;
 	emit('update:modelValue', result);

package/components/dialog/dialog-content.vue

@@ -4,18 +4,28 @@
 			<!-- 内容上方标题 -->
 			<template #header>
 				<slot v-if="$slots.header" name="header"></slot>
-				<view v-else-if="title || showClose" :class="$style['DialogContent--header']">
+				<view
+					v-else-if="title || showClose"
+					:class="$style['DialogContent--header']"
+				>
 					<view
 						:class="[
 							$style['DialogContent--title'],
-							{ [$style['DialogContent--title-center']]: centerTitle },
+							{
+								[$style['DialogContent--title-center']]:
+									centerTitle,
+							},
 						]"
 					>
 						<slot name="title">
 							<text>{{ title }}</text>
 						</slot>
 					</view>
-					<view v-if="showClose" :class="$style['DialogContent--close']" @click="$emit('close')">
+					<view
+						v-if="showClose"
+						:class="$style['DialogContent--close']"
+						@click="$emit('close')"
+					>
 						<icon-cpn icon="close" tap-size="80rpx" />
 					</view>
 				</view>
@@ -27,15 +37,24 @@
 			<!-- 内容下方操作按钮 -->
 			<template #footer>
 				<slot v-if="$slots.footer" name="footer"></slot>
-				<view v-else-if="cancel || confirm" :class="$style['DialogContent--footer']">
-					<view v-if="cancel" :class="$style['DialogContent--button']">
+				<view
+					v-else-if="cancel || confirm"
+					:class="$style['DialogContent--footer']"
+				>
+					<view
+						v-if="cancel"
+						:class="$style['DialogContent--button']"
+					>
 						<slot name="cancel">
 							<button-cpn plain @click="$emit('cancel')">
 								{{ cancel }}
 							</button-cpn>
 						</slot>
 					</view>
-					<view v-if="confirm" :class="$style['DialogContent--button']">
+					<view
+						v-if="confirm"
+						:class="$style['DialogContent--button']"
+					>
 						<slot name="confirm">
 							<button-cpn @click="$emit('confirm')">
 								{{ confirm }}
@@ -100,14 +119,22 @@ defineEmits<{
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($dialog, 'dialog');
+	@include UTILS__DEFINE_COMPONENT_VARS('dialog', $dialog);
+}
+
+:host {
+	display: block;
 }
 
 .DialogContent {
 	@extend %external-vars;
-	#{UTILS__VAR_NAME(header-height, popover)}: #{UTILS__LOCAL_VAR(header-height)};
-	#{UTILS__VAR_NAME(footer-height, popover)}: #{UTILS__LOCAL_VAR(footer-height)};
-	#{UTILS__VAR_NAME(padding, popover)}: 20rpx 30rpx;
+	#{UTILS__VAR_NAME(popover, header-height)}: #{UTILS__LOCAL_VAR(
+			header-height
+		)};
+	#{UTILS__VAR_NAME(popover, footer-height)}: #{UTILS__LOCAL_VAR(
+			footer-height
+		)};
+	#{UTILS__VAR_NAME(popover, padding)}: 20rpx 30rpx;
 
 	.DialogContent--header {
 		position: relative;
@@ -148,8 +175,8 @@ defineEmits<{
 	}
 	.DialogContent--button {
 		flex: 1;
-		#{UTILS__VAR_NAME(height, button)}: 84rpx;
-		#{UTILS__VAR_NAME(border-radius, button)}: 20rpx;
+		#{UTILS__VAR_NAME(button, height)}: 84rpx;
+		#{UTILS__VAR_NAME(button, border-radius)}: 20rpx;
 		& + #{UTILS__LAST_SELECTOR(&)} {
 			margin-left: 20rpx;
 		}

package/components/dialog/dialog.vue

@@ -86,7 +86,10 @@ const emit = defineEmits<{
 	(e: 'close'): void;
 	(e: 'closed'): void;
 	(e: 'cancel', closeFn?: VoidFunction): void;
-	(e: 'confirm', payload?: Omit<PromiseWithResolvers<unknown>, 'promise'> | VoidFunction): void;
+	(
+		e: 'confirm',
+		payload?: UniApp.PromiseResolvers<unknown> | VoidFunction
+	): void;
 }>();
 
 const isAsyncLoading = ref(false);
@@ -105,24 +108,34 @@ const onClose = () => {
 	close();
 };
 
+/** 点击取消按钮响应 */
 const onCancel = () => {
-	onButton('cancel', props.closeOnCancel);
-};
+	if (isLoading.value) return;
 
-const onConfirm = () => {
-	onButton('confirm', props.closeOnConfirm);
+	if (props.closeOnCancel) {
+		emit('cancel');
+		close();
+		return;
+	}
+
+	emit('cancel', maskRef.value?.close.bind(maskRef.value));
 };
 
-/** 点击取消或确认按钮
- * @param {'cancel' | 'confirm'} btnType 按钮类型
- * @param {boolean} shouldClose 是否自动关闭对话框
- */
-const onButton = (btnType: 'cancel' | 'confirm', shouldClose: boolean) => {
+/** 点击确认按钮响应 */
+const onConfirm = () => {
 	if (isLoading.value) return;
 
-	if (btnType === 'confirm' && props.async) {
+	if (props.async) {
 		isAsyncLoading.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
 			.then((willClose = true) => {
 				if (willClose === false) {
@@ -138,24 +151,22 @@ const onButton = (btnType: 'cancel' | 'confirm', shouldClose: boolean) => {
 				}
 				isAsyncLoading.value = false;
 			});
-		emit(btnType, { resolve, reject });
+		emit('confirm', { resolve, reject });
 		return;
 	}
 
-	if (shouldClose) {
-		// @ts-expect-error 这里语法是正确的
-		emit(btnType);
+	if (props.closeOnConfirm) {
+		emit('confirm');
 		close();
 		return;
 	}
 
-	// @ts-expect-error 这里语法是正确的
-	emit(btnType, maskRef.value?.close.bind(maskRef.value));
+	emit('confirm', maskRef.value?.close.bind(maskRef.value));
 };
 
 defineExpose({ close });
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 </style>

package/components/dropdown/dropdown.vue

@@ -3,13 +3,24 @@
 		<view
 			:class="[
 				$style['Dropdown--input'],
-				{ [$style['Dropdown--placeholder']]: !hasValue, [$style['Dropdown--multiple']]: hasValue },
+				{
+					[$style['Dropdown--placeholder']]: !hasValue,
+					[$style['Dropdown--multiple']]: hasValue,
+				},
 			]"
 		>
-			<view :class="['ellipsis', { 'flex-1': align !== 'center' }]">
+			<view
+				:class="[
+					$style['Dropdown--ellipsis'],
+					{ [$style['Dropdown--expand']]: align !== 'center' },
+				]"
+			>
 				{{ showValue }}
 			</view>
-			<icon-cpn icon="triangle-down" :class="$style['Dropdown--icon']"></icon-cpn>
+			<icon-cpn
+				icon="triangle-down"
+				:class="$style['Dropdown--icon']"
+			></icon-cpn>
 		</view>
 	</view>
 </template>
@@ -51,7 +62,10 @@ const props = withDefaults(defineProps<_Props>(), {
 
 /** 是否选择了值 */
 const hasValue = computed(() => {
-	return props.modelValue !== null && (!Array.isArray(props.modelValue) || props.modelValue.length > 0);
+	return (
+		props.modelValue !== null &&
+		(!Array.isArray(props.modelValue) || props.modelValue.length > 0)
+	);
 });
 
 /** 展示值 */
@@ -59,7 +73,9 @@ const showValue = computed(() => {
 	if (!hasValue.value) return props.placeholder;
 	return props.formatter
 		? props.formatter(props.modelValue)
-		: props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 1
+		: props.multiple &&
+		  Array.isArray(props.modelValue) &&
+		  props.modelValue.length > 1
 		? `+${props.modelValue.length}`
 		: props.modelValue;
 });
@@ -69,8 +85,9 @@ const showValue = computed(() => {
 @use '../../styles/utils' as *;
 @use './dropdown' as *;
 
+// 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($dropdown, 'dropdown');
+	@include UTILS__DEFINE_COMPONENT_VARS('dropdown', $dropdown);
 }
 
 .Dropdown {
@@ -89,6 +106,12 @@ const showValue = computed(() => {
 	background: UTILS__LOCAL_VAR(input-background);
 	border-radius: UTILS__LOCAL_VAR(input-radius);
 }
+.Dropdown--ellipsis {
+	@include UTILS__ELLIPSIS;
+}
+.Dropdown--expand {
+	flex: 1;
+}
 .Dropdown--placeholder {
 	color: UTILS__GLOBAL_VAR(color, placeholder);
 }

package/components/empty/empty.vue

@@ -1,9 +1,16 @@
 <template>
 	<view :class="[...classNames, $style['Empty']]">
 		<template v-if="loading">
-			<image v-if="loadingImage" :src="loadingImage" :class="$style['Empty--image']" />
+			<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']" />
+				<icon-cpn
+					icon="search"
+					:class="$style['Empty--loading-icon']"
+				/>
 			</view>
 			<view :class="$style['Empty--text']">
 				<slot>{{ loadingText }}</slot>
@@ -61,7 +68,7 @@ withDefaults(defineProps<_Props>(), {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($empty, 'empty');
+	@include UTILS__DEFINE_COMPONENT_VARS('empty', $empty);
 }
 
 .Empty {

package/components/flex/flex.vue

@@ -21,7 +21,13 @@ type _Props = {
 	/** 排版方向 */
 	direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
 	/** 当前轴对齐方式 */
-	justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+	justify?:
+		| 'start'
+		| 'center'
+		| 'end'
+		| 'space-between'
+		| 'space-around'
+		| 'space-evenly';
 	/** 交叉轴对齐方式 */
 	align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 	/** 是否换行 */
@@ -40,9 +46,15 @@ const props = withDefaults(defineProps<_Props>(), {
 
 const gapValue = computed(() => {
 	if (Array.isArray(props.gap)) {
-		return props.gap.map((item) => (typeof item === 'number' ? uni.upx2px(item) + 'px' : item)).join(' ');
+		return props.gap
+			.map((item) =>
+				typeof item === 'number' ? uni.upx2px(item) + 'px' : item
+			)
+			.join(' ');
 	}
-	return typeof props.gap === 'number' ? uni.upx2px(props.gap) + 'px' : props.gap;
+	return typeof props.gap === 'number'
+		? uni.upx2px(props.gap) + 'px'
+		: props.gap;
 });
 
 const flexStyle = computed(() => {
@@ -57,11 +69,9 @@ const flexStyle = computed(() => {
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .Flex {
-	width: 100%;
-	height: 100%;
 	display: flex;
 }
 </style>

package/components/form-item/form-item.vue

@@ -11,8 +11,15 @@
 		]"
 	>
 		<view :class="$style['FormItem--label']">
-			<text :class="{ [$style['FormItem--required']]: !isFormReadonly && required }">{{ label }}</text>
-			<text v-if="subLabel" :class="$style['FormItem--sub-label']">{{ subLabel }}</text>
+			<text
+				:class="{
+					[$style['FormItem--required']]: !isFormReadonly && required,
+				}"
+				>{{ label }}</text
+			>
+			<text v-if="subLabel" :class="$style['FormItem--sub-label']">{{
+				subLabel
+			}}</text>
 		</view>
 		<view :class="$style['FormItem--content']">
 			<slot></slot>
@@ -21,7 +28,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ComputedRef, inject } from 'vue';
+import { computed, inject } from 'vue';
+import type { ComputedRef } from 'vue';
 import useClassNames from '../../composable/component-name';
 
 defineOptions({
@@ -70,8 +78,9 @@ const usingType = computed(() => props.type || formType.value);
 @use '../../styles/utils' as *;
 @use './form-item' as *;
 
+// 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($form-item, 'form-item');
+	@include UTILS__DEFINE_COMPONENT_VARS('form-item', $form-item);
 }
 
 .FormItem {

package/components/icon/icon.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$icon: () !default;
+$icon-default: (
+	font-size: null,
+);
+$icon: map.merge($icon-default, $icon);