@ecolovo/uniapp-components 2.0.2 → 2.0.4

package/components/aspect/aspect.vue

@@ -22,7 +22,7 @@ defineOptions({
 const classNames = useClassNames('aspect');
 
 type _Props = {
-	/** 图标名 */
+	/** 高与宽的比例，默认为 1，即宽高相等，2 表示高为宽的 2 倍 */
 	ratio?: string | number;
 };
 
@@ -34,7 +34,9 @@ defineEmits<{
 	(event: 'click'): void;
 }>();
 
-const inlineStyle = computed(() => `padding-top: ${100 * Number(props.ratio)}%;`);
+const inlineStyle = computed(
+	() => `padding-top: ${100 * Number(props.ratio)}%;`
+);
 </script>
 
 <style lang="css" module>

package/components/badge/badge.scss

@@ -15,6 +15,8 @@ $badge-default: (
 	// 边框样式
 	border: none,
 	// 徽章高度
-	height: calc(#{UTILS__LOCAL_VAR(font-size)} + 12rpx)
+	height: calc(#{UTILS__LOCAL_VAR(font-size)} + 12rpx),
+	// 徽章内边距-x
+	padding-x: 0.25em
 );
 $badge: map.merge($badge-default, $badge);

package/components/badge/badge.vue

@@ -40,13 +40,18 @@ const props = withDefaults(defineProps<_Props>(), {
 	max: 99,
 });
 
-defineEmits<{
-	(event: 'click'): void;
-}>();
-
 const showValue = computed(() => {
+	if (!props.value) return '';
+
 	const numberValue = Number(props.value);
-	return numberValue && numberValue > 0 ? (numberValue > props.max ? `${props.max}+` : numberValue) : '';
+	// 如果传入的值不可转为数字，则原样显示
+	if (Number.isNaN(numberValue)) return props.value;
+
+	return numberValue && numberValue > 0
+		? numberValue > props.max
+			? `${props.max}+`
+			: numberValue
+		: '';
 });
 </script>
 
@@ -56,7 +61,7 @@ const showValue = computed(() => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($badge, 'badge');
+	@include UTILS__DEFINE_COMPONENT_VARS('badge', $badge);
 }
 
 $__translate: UTILS__LOCAL_VAR(translate);
@@ -65,6 +70,7 @@ $__height: UTILS__LOCAL_VAR(height);
 $__border: UTILS__LOCAL_VAR(border);
 $__color: UTILS__LOCAL_VAR(color);
 $__background: UTILS__LOCAL_VAR(background);
+$__padding-x: UTILS__LOCAL_VAR(padding-x);
 
 .Badge {
 	@extend %external-vars;
@@ -74,16 +80,14 @@ $__background: UTILS__LOCAL_VAR(background);
 	width: fit-content;
 
 	.Badge--box {
-		--padding-x: calc(#{$__font-size} / 2);
-
+		box-sizing: border-box;
 		position: absolute;
 		top: 0;
 		right: 0;
 		z-index: 1;
-		padding: 0 var(--padding-x);
-		box-sizing: content-box;
+		padding: 0 $__padding-x;
 		text-align: center;
-		min-width: calc(#{$__height} - 2 * var(--padding-x));
+		min-width: $__height;
 		height: $__height;
 		line-height: $__height;
 		font-size: $__font-size;

package/components/button/button.vue

@@ -34,7 +34,10 @@
 		@agreeprivacyauthorization="$emit('agreeprivacyauthorization', $event)"
 	>
 		<!-- 线性按钮边框：仅在线性按钮且不是禁用态时显示 -->
-		<view v-if="!disabled && !text && plain" :class="$style['Button--plain-border']"></view>
+		<view
+			v-if="!disabled && !text && plain"
+			:class="$style['Button--plain-border']"
+		></view>
 		<!-- 仅在配置了图标或文本按钮处于加载态（不能处于禁用态）时显示 -->
 		<template v-if="text">
 			<icon-cpn
@@ -55,9 +58,15 @@
 			<slot></slot>
 		</view>
 		<!-- 点击态样式：仅在非文本按钮且不是禁用态时显示 -->
-		<view v-if="!disabled && !text" :class="$style['Button--active-mask']"></view>
+		<view
+			v-if="!disabled && !text"
+			:class="$style['Button--active-mask']"
+		></view>
 		<!-- 加载态样式：仅在非文本按钮处于加载态（不能处于禁用态）时显示 -->
-		<view v-if="!disabled && !text && isLoading" :class="$style['Button--loading']">
+		<view
+			v-if="!disabled && !text && isLoading"
+			:class="$style['Button--loading-icon']"
+		>
 			<icon-cpn icon="loading-dot-spinner" spinning />
 		</view>
 	</button>
@@ -68,6 +77,13 @@ import { computed, ref, useCssModule } from 'vue';
 import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
 
+/**
+ * **组件使用说明：**
+ *
+ * 当 async 为 false 时，组件会按传入的 coolDown 控制两次点击之间的间隔
+ * 当 async 为 true 时，需要在父组件监听 click 事件的回调函数中调用传入的 resolve 或 reject 方法，否则按钮将持续处于 loading 状态
+ */
+
 defineOptions({
 	options: {
 		styleIsolation: 'shared',
@@ -86,7 +102,12 @@ type _Props = {
 	/** 按钮主题 */
 	type?: string;
 	/** 对应小程序的 openType */
-	openType?: 'contact' | 'getPhoneNumber' | 'getUserInfo' | 'chooseAvatar' | 'agreePrivacyAuthorization';
+	openType?:
+		| 'contact'
+		| 'getPhoneNumber'
+		| 'getUserInfo'
+		| 'chooseAvatar'
+		| 'agreePrivacyAuthorization';
 	/** 按钮冷却时间，单位毫秒，两次点击之间的最小间隔，为 `0` 时可连续点击 */
 	coolDown?: number;
 	/** 是否异步事件 */
@@ -124,8 +145,8 @@ const props = withDefaults(defineProps<_Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'click', payload?: Omit<PromiseWithResolvers<unknown>, 'promise'>): void;
-	(event: 'getphonenumber', payload?: unknown): void;
+	(event: 'click', payload?: UniApp.PromiseResolvers<unknown>): void;
+	(event: 'getphonenumber', payload?: UniApp.GetPhoneNumberEvent): void;
 	(event: 'getuserinfo', payload?: unknown): void;
 	(event: 'error', payload?: unknown): void;
 	(event: 'opensetting', payload?: unknown): void;
@@ -140,19 +161,35 @@ const isCoolingDown = ref(false);
 /** 按钮是否处于请求状态 */
 const isAsyncLoading = ref(false);
 
-/** 按钮 loading */
-const inlineCssVar = computed(() => `--theme-from-prop: var(--button-theme-${props.type});`);
+/** 按钮主题样式 */
+const inlineCssVar = computed(
+	() => `--theme-from-prop: var(--button-theme-${props.type});`
+);
 /** 按钮尺寸样式 */
 const buttonSize = computed(() => {
 	if (props.text) {
-		return props.large ? $style['Button--text-large'] : props.small ? $style['Button--text-small'] : '';
+		return props.large
+			? $style['Button--text-large']
+			: props.small
+			? $style['Button--text-small']
+			: '';
 	}
-	return props.large ? $style['Button--block-large'] : props.small ? $style['Button--block-small'] : '';
+	return props.large
+		? $style['Button--block-large']
+		: props.small
+		? $style['Button--block-small']
+		: '';
 });
-/** 按钮 loading */
+/** 按钮是否处于 loading 状态 */
 const isLoading = computed(() => props.loading || isAsyncLoading.value);
-/** 按钮是否可点击 */
-const isNotClickable = computed(() => props.disabled || props.forbidClick || isLoading.value || isCoolingDown.value);
+/** 按钮是否可被点击 */
+const isNotClickable = computed(
+	() =>
+		props.disabled ||
+		props.forbidClick ||
+		isLoading.value ||
+		isCoolingDown.value
+);
 
 /** 进入冷却 */
 const $_coolDown = () => {
@@ -164,8 +201,9 @@ const $_coolDown = () => {
 		}, props.coolDown);
 	}
 };
+
 /** 点击按钮响应 */
-const onClick = async () => {
+const onClick = () => {
 	if (isNotClickable.value) {
 		return;
 	}
@@ -178,7 +216,13 @@ const onClick = 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.finally(() => {
 		isAsyncLoading.value = false;
 	});
@@ -197,7 +241,7 @@ const onClick = async () => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($button, 'button');
+	@include UTILS__DEFINE_COMPONENT_VARS('button', $button);
 }
 
 %button-themes {
@@ -259,7 +303,10 @@ $button-sizes: (
 
 .Button--plain,
 .Button-text {
-	--button-color: var(var(#{__DO_NOT_USE__local-var-name(text-color)}), #{UTILS__LOCAL_VAR(theme)});
+	--button-color: var(
+		#{UTILS__VAR_NAME('button', text-color)},
+		#{UTILS__LOCAL_VAR(theme)}
+	);
 	--button-background: transparent;
 }
 
@@ -306,7 +353,7 @@ $button-sizes: (
 		}
 	}
 
-	.Button--loading {
+	.Button--loading-icon {
 		position: absolute;
 		top: 50%;
 		left: 50%;
@@ -316,8 +363,8 @@ $button-sizes: (
 	}
 
 	&.Button--disabled {
-		color: #fff;
-		background: #ccc;
+		--button-color: #fff;
+		--button-background: #ccc;
 	}
 }
 
@@ -373,11 +420,11 @@ $button-sizes: (
 
 	&.Button--active,
 	&.Button--not-clickable {
-		color: #999;
+		--button-color: #999;
 	}
 
 	&.Button--disabled {
-		color: #ccc;
+		--button-color: #ccc;
 	}
 }
 </style>

package/components/checkbox/checkbox.scss

@@ -5,6 +5,6 @@
 $checkbox: () !default;
 $checkbox-default: (
 	checked-color: UTILS__GLOBAL_VAR(theme, primary),
-	unchecked-color: UTILS__GLOBAL_VAR(color, foreground),
+	unchecked-color: inherit,
 );
 $checkbox: map.merge($checkbox-default, $checkbox);

package/components/checkbox/checkbox.vue

@@ -4,7 +4,10 @@
 			v-if="hasIcon"
 			:icon="usingIcon || ''"
 			tap-size="50rpx"
-			:class="[$style['Checkbox--icon'], { [$style['Checkbox--checked']]: isChecked }]"
+			:class="[
+				$style['Checkbox--icon'],
+				{ [$style['Checkbox--checked']]: isChecked },
+			]"
 		/>
 		<view :class="$style['Checkbox--text']">
 			<slot>{{ label }}</slot>
@@ -13,7 +16,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ComputedRef, inject, Ref, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import IconCpn from '../icon/icon.vue';
 import useClassNames from '../../composable/component-name';
 
@@ -25,23 +29,26 @@ defineOptions({
 });
 
 const classNames = useClassNames('checkbox');
+
 /** 表单是否只读 */
 const isFormReadonly = inject<ComputedRef<boolean>>(
 	'ecolovo/form/readonly',
 	computed(() => false)
 );
 /** 勾选框组当前选中值 */
-const groupCheckedValue = inject<Ref<undefined | string | number | boolean | Array<unknown>>>(
-	'ecolovo/checkboxGroup/checkedValue'
-);
+const groupCheckedValue = inject<
+	Ref<undefined | string | number | boolean | Array<unknown>>
+>('ecolovo/checkboxGroup/checkedValue', ref(undefined));
 /** 勾选框组的 props */
-const groupProps = inject<null | Pick<_Props, 'radio' | 'icon' | 'checkedIcon' | 'uncheckedIcon'>>(
-	'ecolovo/checkboxGroup/props',
-	null
-);
+const groupProps = inject<null | Pick<
+	_Props,
+	'radio' | 'icon' | 'checkedIcon' | 'uncheckedIcon'
+>>('ecolovo/checkboxGroup/props', null);
 /** 勾选框组勾选选项方法 */
-const groupCheck =
-	inject<(val: undefined | string | number | boolean | Array<unknown>) => void>('ecolovo/checkboxGroup/check');
+const groupCheck = inject<
+	| null
+	| ((val: undefined | string | number | boolean | Array<unknown>) => void)
+>('ecolovo/checkboxGroup/check', null);
 
 type _Props = {
 	/** 不在勾选框组中时使用，用于 v-model ，只能是 boolean 类型 */
@@ -80,33 +87,57 @@ const emit = defineEmits<{
 
 const innerChecked = ref(false);
 
+/** 是否只读 */
+const isReadonly = computed<boolean>(() =>
+	props.readonly !== undefined ? props.readonly : isFormReadonly.value
+);
 /** 是否在 checkbox-group 中 */
 const isInCheckboxGroup = computed<boolean>(() => !!groupProps);
-/** 是否只读 */
-const isReadonly = computed<boolean>(() => (props.readonly !== undefined ? props.readonly : isFormReadonly.value));
 /** 是否显示勾选图标 */
-const hasIcon = computed<boolean>(() => (props.icon !== undefined ? props.icon : groupProps?.icon ?? true));
+const hasIcon = computed<boolean>(() =>
+	props.icon !== undefined ? props.icon : groupProps?.icon ?? true
+);
 /** 是否为单选 */
-const isRadio = computed<boolean>(() => (props.radio !== undefined ? props.radio : groupProps?.radio || false));
+const isRadio = computed<boolean>(() =>
+	props.radio !== undefined ? props.radio : groupProps?.radio || false
+);
 /** 最终使用的选中态的图标 */
 const usingCheckedIcon = computed<string>(
-	() => props.checkedIcon || groupProps?.checkedIcon || (isRadio.value ? 'radio-checked' : 'checkbox-checked')
+	() =>
+		props.checkedIcon ||
+		groupProps?.checkedIcon ||
+		(isRadio.value ? 'radio-checked' : 'checkbox-checked')
 );
 /** 最终使用的未选中态的图标 */
 const usingUncheckedIcon = computed(
-	() => props.uncheckedIcon || groupProps?.uncheckedIcon || (isRadio.value ? 'radio-unchecked' : 'checkbox-unchecked')
+	() =>
+		props.uncheckedIcon ||
+		groupProps?.uncheckedIcon ||
+		(isRadio.value ? 'radio-unchecked' : 'checkbox-unchecked')
 );
 /** 最终使用的图标 */
-const usingIcon = computed(() => (isChecked.value ? usingCheckedIcon.value : usingUncheckedIcon.value));
+const usingIcon = computed(() =>
+	isChecked.value ? usingCheckedIcon.value : usingUncheckedIcon.value
+);
 /** 是否勾选 */
 const isChecked = computed<boolean>({
 	get() {
 		if (isInCheckboxGroup.value) {
-			return isRadio.value
-				? props.value === groupCheckedValue!.value
-				: (groupCheckedValue as Ref<unknown[]>).value?.includes(props.value) || false;
+			if (isRadio.value) return props.value === groupCheckedValue.value;
+			if (
+				groupCheckedValue.value !== undefined &&
+				groupCheckedValue.value !== null &&
+				!Array.isArray(groupCheckedValue.value)
+			) {
+				throw Error(
+					'CheckboxGroup 的值应为数组类型，或将其设为 radio 类型'
+				);
+			}
+			return groupCheckedValue.value?.includes(props.value) || false;
 		}
-		return props.modelValue === undefined ? innerChecked.value : (props.modelValue as boolean);
+		return props.modelValue === undefined
+			? innerChecked.value
+			: (props.modelValue as boolean);
 	},
 	set(val) {
 		emit('update:modelValue', val);
@@ -141,7 +172,7 @@ const toggle = (checked?: boolean) => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($checkbox, 'checkbox');
+	@include UTILS__DEFINE_COMPONENT_VARS('checkbox', $checkbox);
 }
 
 .Checkbox {

package/components/checkbox-group/checkbox-group.vue

@@ -39,15 +39,22 @@ const props = withDefaults(defineProps<_Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'update:modelValue', value?: string | number | boolean | Array<unknown>): void;
+	(
+		event: 'update:modelValue',
+		value?: string | number | boolean | Array<unknown>
+	): void;
 	(event: 'change', value?: string | number | boolean | Array<unknown>): void;
 }>();
 
-const checkedValue = ref<undefined | string | number | boolean | Array<unknown>>(undefined);
+const checkedValue = ref<
+	undefined | string | number | boolean | Array<unknown>
+>(undefined);
 
 const currentValue = computed({
 	get: function () {
-		return props.modelValue === undefined ? checkedValue.value : props.modelValue;
+		return props.modelValue === undefined
+			? checkedValue.value
+			: props.modelValue;
 	},
 	set: function (val) {
 		if (checkedValue.value === val) return;
@@ -95,7 +102,7 @@ provide('ecolovo/checkboxGroup/check', check);
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .CheckboxGroup {
 	flex: 1;

package/components/checkbox-group2/checkbox-group2.vue

@@ -4,11 +4,19 @@
 			v-for="(item, index) in options"
 			:key="index"
 			:value="
-				radio ? item.value === currentValue : Array.isArray(currentValue) && currentValue.includes(item.value)
+				radio
+					? item.value === currentValue
+					: Array.isArray(currentValue) &&
+					  currentValue.includes(item.value)
 			"
 			:icon="icon"
-			:checked-icon="checkedIcon || (radio ? 'radio-checked' : 'checkbox-checked')"
-			:unchecked-icon="uncheckedIcon || (radio ? 'radio-unchecked' : 'checkbox-unchecked')"
+			:checked-icon="
+				checkedIcon || (radio ? 'radio-checked' : 'checkbox-checked')
+			"
+			:unchecked-icon="
+				uncheckedIcon ||
+				(radio ? 'radio-unchecked' : 'checkbox-unchecked')
+			"
 			:class="$style['CheckboxGroup2--item']"
 			@change="check(item.value)"
 		>
@@ -29,7 +37,7 @@ defineOptions({
 	},
 });
 
-const classNames = useClassNames('aspect');
+const classNames = useClassNames('checkbox-group2');
 
 type OptionValue = string | number | boolean;
 interface _Option {
@@ -70,7 +78,9 @@ const checkedValue = ref<OptionValue | OptionValue[]>();
 
 const currentValue = computed<undefined | OptionValue | OptionValue[]>({
 	get() {
-		return props.modelValue === undefined ? checkedValue.value : props.modelValue;
+		return props.modelValue === undefined
+			? checkedValue.value
+			: props.modelValue;
 	},
 	set(val) {
 		emit('update:modelValue', val);
@@ -117,11 +127,16 @@ const toggle = (isSelectedAll: boolean | OptionValue | OptionValue[]) => {
 	}
 
 	if (Array.isArray(isSelectedAll)) {
-		currentValue.value = isSelectedAll.filter((item) => optionsValue.value.includes(item));
+		currentValue.value = isSelectedAll.filter((item) =>
+			optionsValue.value.includes(item)
+		);
 		return;
 	}
 
-	if (Array.isArray(currentValue.value) && currentValue.value.length === props.options.length) {
+	if (
+		Array.isArray(currentValue.value) &&
+		currentValue.value.length === props.options.length
+	) {
 		currentValue.value = [];
 	} else {
 		currentValue.value = optionsValue.value;
@@ -132,7 +147,7 @@ defineExpose({ toggle });
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .CheckboxGroup2 {
 	display: flex;

package/components/checkbox-group2/checkbox2.vue

@@ -2,9 +2,16 @@
 	<view :class="[...classNames, $style['Checkbox2']]" @click="toggle()">
 		<icon-cpn
 			v-if="icon"
-			:icon="currentValue ? checkedIcon || 'checkbox-checked' : uncheckedIcon || 'checkbox-unchecked'"
+			:icon="
+				currentValue
+					? checkedIcon || 'checkbox-checked'
+					: uncheckedIcon || 'checkbox-unchecked'
+			"
 			tap-size="50rpx"
-			:class="[$style['Checkbox2--icon'], { [$style['Checkbox2--checked']]: currentValue }]"
+			:class="[
+				$style['Checkbox2--icon'],
+				{ [$style['Checkbox2--checked']]: currentValue },
+			]"
 		/>
 		<view :class="$style['Checkbox2--text']">
 			<slot></slot>
@@ -24,7 +31,7 @@ defineOptions({
 	},
 });
 
-const classNames = useClassNames('aspect');
+const classNames = useClassNames('checkbox2');
 
 type _Props = {
 	/** 选项值 */
@@ -81,7 +88,7 @@ const toggle = (checked?: boolean) => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($checkbox, 'checkbox');
+	@include UTILS__DEFINE_COMPONENT_VARS('checkbox', $checkbox);
 }
 
 .Checkbox2 {

package/components/data-list/data-list.vue

@@ -10,13 +10,23 @@
 			@load-more="$emit('load-more')"
 		/>
 
-		<view v-if="pagingData && pagingData.hasMore" :class="$style['DataList--observe-view']"></view>
+		<view
+			v-if="pagingData && pagingData.hasMore"
+			:class="$style['DataList--observe-view']"
+		></view>
 	</view>
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, onBeforeUnmount, onMounted, useCssModule, watch, WatchHandle } from 'vue';
-import { PagingData } from '@ecolovo/utils/uniapp/paging';
+import {
+	getCurrentInstance,
+	onBeforeUnmount,
+	onMounted,
+	useCssModule,
+	watch,
+} from 'vue';
+import type { WatchStopHandle } from 'vue';
+import type { PagingData } from '@ecolovo/utils';
 import useClassNames from '../../composable/component-name';
 import LoadMoreCpn from '../load-more/load-more.vue';
 
@@ -68,7 +78,7 @@ const stopObserver = () => {
 	_observer?.disconnect();
 };
 
-let _stopHasMoreWatcher: WatchHandle | null = null;
+let _stopHasMoreWatcher: WatchStopHandle | null = null;
 
 onMounted(() => {
 	_stopHasMoreWatcher = watch(
@@ -94,7 +104,17 @@ onBeforeUnmount(() => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($data-list, 'data-list');
+	@include UTILS__DEFINE_COMPONENT_VARS('data-list', $data-list);
+}
+
+:host {
+	position: relative;
+	display: block;
+	width: 100%;
+
+	flex: 1;
+	display: flex;
+	flex-direction: column;
 }
 
 .DataList {