@ecolovo/uniapp-components 2.0.4 → 2.0.6

package/components/badge/badge.vue

@@ -1,23 +1,22 @@
 <template>
 	<view :class="[...classNames, $style['Badge']]">
 		<slot></slot>
-		<template v-if="$slots['badge'] || $slots['badge-value']">
-			<slot name="badge">
-				<view :class="$style['Badge--box']">
-					<slot name="badge-value"></slot>
-				</view>
-			</slot>
-		</template>
-		<view v-else-if="value" :class="$style['Badge--box']">
-			<slot name="badge"></slot>
-			{{ showValue }}
-		</view>
+
+		<slot name="custom">
+			<view
+				v-if="$slots.badge || showValue"
+				:class="$style['Badge--box']"
+			>
+				<slot name="badge">{{ showValue }}</slot>
+			</view>
+		</slot>
 	</view>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
 import useClassNames from '../../composable/component-name';
+import { badgeProps } from './types';
 
 defineOptions({
 	options: {
@@ -28,6 +27,16 @@ defineOptions({
 
 const classNames = useClassNames('badge');
 
+type _Slots = {
+	default: () => void;
+	/** 完全自定义徽章 */
+	custom: () => void;
+	/** 徽章内容 */
+	badge: () => void;
+};
+
+defineSlots<_Slots>();
+
 type _Props = {
 	/** 显示在右上角的内容 */
 	value?: string | number;
@@ -38,6 +47,7 @@ type _Props = {
 const props = withDefaults(defineProps<_Props>(), {
 	value: 0,
 	max: 99,
+	...badgeProps,
 });
 
 const showValue = computed(() => {
@@ -80,6 +90,7 @@ $__padding-x: UTILS__LOCAL_VAR(padding-x);
 	width: fit-content;
 
 	.Badge--box {
+		pointer-events: none;
 		box-sizing: border-box;
 		position: absolute;
 		top: 0;

package/components/badge/types.d.ts

@@ -0,0 +1,6 @@
+export type ConfigurableBadgeProps = {
+    /** 最大显示值，超出时会在后面添加一个“+” */
+    max?: number;
+};
+export declare let badgeProps: ConfigurableBadgeProps;
+export declare const setDefaultBadgeProps: (props?: ConfigurableBadgeProps) => void;

package/components/badge/types.js

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

package/components/badge/types.ts

@@ -0,0 +1,10 @@
+export type ConfigurableBadgeProps = {
+	/** 最大显示值，超出时会在后面添加一个“+” */
+	max?: number;
+};
+
+export let badgeProps: ConfigurableBadgeProps = {};
+
+export const setDefaultBadgeProps = (props: ConfigurableBadgeProps = {}) => {
+	badgeProps = props;
+};

package/components/button/button.vue

@@ -24,14 +24,16 @@
 		:hover-class="disabled ? 'none' : $style['Button--active']"
 		:style="inlineCssVar"
 		@click="onClick"
-		@getphonenumber="$emit('getphonenumber', $event)"
-		@getuserinfo="$emit('getuserinfo', $event)"
-		@error="$emit('error', $event)"
-		@opensetting="$emit('opensetting', $event)"
-		@launchapp="$emit('launchapp', $event)"
-		@contact="$emit('contact', $event)"
-		@chooseavatar="$emit('chooseavatar', $event)"
-		@agreeprivacyauthorization="$emit('agreeprivacyauthorization', $event)"
+		@getphonenumber="onOpenType('getphonenumber', $event)"
+		@getuserinfo="onOpenType('getuserinfo', $event)"
+		@error="onOpenType('error', $event)"
+		@opensetting="onOpenType('opensetting', $event)"
+		@launchapp="onOpenType('launchapp', $event)"
+		@contact="onOpenType('contact', $event)"
+		@chooseavatar="onOpenType('chooseavatar', $event)"
+		@agreeprivacyauthorization="
+			onOpenType('agreeprivacyauthorization', $event)
+		"
 	>
 		<!-- 线性按钮边框：仅在线性按钮且不是禁用态时显示 -->
 		<view
@@ -41,9 +43,9 @@
 		<!-- 仅在配置了图标或文本按钮处于加载态（不能处于禁用态）时显示 -->
 		<template v-if="text">
 			<icon-cpn
-				v-if="icon || (text && isLoading && !disabled)"
-				:icon="text && isLoading ? 'loading-dot-spinner' : icon"
-				:spinning="text && isLoading"
+				v-if="icon || (isShowLoading && !disabled)"
+				:icon="isShowLoading ? 'loading-dot-spinner' : icon"
+				:spinning="isShowLoading"
 				:class="$style['Button--icon']"
 			/>
 			<slot></slot>
@@ -51,8 +53,8 @@
 		<view v-else :class="$style['Button--title']">
 			<icon-cpn
 				v-if="icon"
-				:icon="text && isLoading ? 'loading-dot-spinner' : icon"
-				:spinning="text && isLoading"
+				:icon="isShowLoading ? 'loading-dot-spinner' : icon"
+				:spinning="isShowLoading"
 				:class="$style['Button--icon']"
 			/>
 			<slot></slot>
@@ -64,7 +66,7 @@
 		></view>
 		<!-- 加载态样式：仅在非文本按钮处于加载态（不能处于禁用态）时显示 -->
 		<view
-			v-if="!disabled && !text && isLoading"
+			v-if="!disabled && !text && isShowLoading"
 			:class="$style['Button--loading-icon']"
 		>
 			<icon-cpn icon="loading-dot-spinner" spinning />
@@ -76,13 +78,7 @@
 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 状态
- */
+import { buttonProps } from './types';
 
 defineOptions({
 	options: {
@@ -110,8 +106,16 @@ type _Props = {
 		| 'agreePrivacyAuthorization';
 	/** 按钮冷却时间，单位毫秒，两次点击之间的最小间隔，为 `0` 时可连续点击 */
 	coolDown?: number;
-	/** 是否异步事件 */
-	async?: boolean;
+	/**
+	 * 点击事件异步回调
+	 *
+	 * - 当 `openType` 为空时，如果配置了 `async` 回调，点击按钮会触发并等待 `async` 回调，期间不会触发 click 事件
+	 * - 当 `openType` 不为空时，如果配置了 `async` 回调，点击按钮会先触发 emit 事件，
+	 * 在 openType 事件触发后触发并等待 `async` 回调，且会将 `openType` 响应事件作为参数传递给 `async` 回调
+	 *
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	async?: (payload?: any) => any;
 	/** 是否圆角 */
 	round?: boolean;
 	/** 是否线性 */
@@ -122,6 +126,8 @@ type _Props = {
 	icon?: string;
 	/** 加载中 */
 	loading?: boolean;
+	/** 是否显示加载中 */
+	showLoading?: boolean;
 	/** 小尺寸 */
 	small?: boolean;
 	/** 大尺寸 */
@@ -134,18 +140,21 @@ const props = withDefaults(defineProps<_Props>(), {
 	type: 'primary',
 	openType: undefined,
 	coolDown: 500,
-	async: false,
+	async: undefined,
 	round: false,
 	plain: false,
 	text: false,
 	icon: '',
 	loading: false,
+	showLoading: undefined,
 	small: false,
 	large: false,
+	...buttonProps,
 });
 
 const emit = defineEmits<{
-	(event: 'click', payload?: UniApp.PromiseResolvers<unknown>): void;
+	(event: 'click'): void;
+	/* eslint-disable vue/no-unused-emit-declarations */
 	(event: 'getphonenumber', payload?: UniApp.GetPhoneNumberEvent): void;
 	(event: 'getuserinfo', payload?: unknown): void;
 	(event: 'error', payload?: unknown): void;
@@ -154,6 +163,7 @@ const emit = defineEmits<{
 	(event: 'contact', payload?: unknown): void;
 	(event: 'chooseavatar', payload?: unknown): void;
 	(event: 'agreeprivacyauthorization', payload?: unknown): void;
+	/* eslint-enable vue/no-unused-emit-declarations */
 }>();
 
 /** 按钮是否冷却中 */
@@ -182,6 +192,10 @@ const buttonSize = computed(() => {
 });
 /** 按钮是否处于 loading 状态 */
 const isLoading = computed(() => props.loading || isAsyncLoading.value);
+/** 是否显示按钮 loading 状态 */
+const isShowLoading = computed(
+	() => isLoading.value && (props.showLoading ?? props.text ? false : true)
+);
 /** 按钮是否可被点击 */
 const isNotClickable = computed(
 	() =>
@@ -191,7 +205,9 @@ const isNotClickable = computed(
 		isCoolingDown.value
 );
 
-/** 进入冷却 */
+/**
+ * 让按钮进入冷却
+ */
 const $_coolDown = () => {
 	if (props.coolDown > 0) {
 		isCoolingDown.value = true;
@@ -202,33 +218,52 @@ const $_coolDown = () => {
 	}
 };
 
-/** 点击按钮响应 */
-const onClick = () => {
+/**
+ * 点击按钮响应
+ */
+const onClick = async () => {
 	if (isNotClickable.value) {
 		return;
 	}
 
 	$_coolDown();
 
+	if (props.openType) {
+		emit('click');
+		return;
+	}
+
 	if (!props.async) {
 		emit('click');
 		return;
 	}
 
-	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;
-	});
-	promise.finally(() => {
+	try {
+		isAsyncLoading.value = true;
+		await props.async();
+		return;
+	} finally {
 		isAsyncLoading.value = false;
-	});
-
-	emit('click', { resolve, reject });
+	}
 };
+
+/**
+ * openType 事件响应
+ */
+async function onOpenType(event: string, payload?: unknown) {
+	if (!props.async) {
+		emit(event as Parameters<typeof emit>[0], payload);
+		return;
+	}
+
+	try {
+		isAsyncLoading.value = true;
+		await props.async(payload);
+		return;
+	} finally {
+		isAsyncLoading.value = false;
+	}
+}
 </script>
 
 <style lang="scss" module>
@@ -236,7 +271,6 @@ const onClick = () => {
 @use 'sass:math';
 @use 'sass:map';
 @use '../../styles/utils' as *;
-@use '../../styles/var' as *;
 @use './button' as *;
 
 // 定义外部变量
@@ -302,7 +336,7 @@ $button-sizes: (
 }
 
 .Button--plain,
-.Button-text {
+.Button--text {
 	--button-color: var(
 		#{UTILS__VAR_NAME('button', text-color)},
 		#{UTILS__LOCAL_VAR(theme)}
@@ -315,7 +349,6 @@ $button-sizes: (
 	display: block;
 	position: relative;
 	font-weight: 500;
-	width: 100%;
 	padding: 0 20rpx;
 	box-sizing: border-box;
 	text-decoration: none;
@@ -341,7 +374,6 @@ $button-sizes: (
 		background: UTILS__LOCAL_VAR(active-mask);
 		pointer-events: none;
 		opacity: 0;
-		will-change: opacity;
 
 		transition: opacity 0.3s;
 	}
@@ -378,9 +410,7 @@ $button-sizes: (
 }
 
 .Button--title {
-	position: absolute;
-	inset: 0;
-	overflow: hidden;
+	height: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -406,7 +436,6 @@ $button-sizes: (
 	padding: 0;
 	line-height: inherit;
 	font-weight: inherit;
-	will-change: color;
 
 	transition: color 0.3s;
 

package/components/button/types.d.ts

@@ -0,0 +1,20 @@
+export type ConfigurableButtonProps = {
+    /** 按钮主题 */
+    type?: string;
+    /** 按钮冷却时间，单位毫秒，两次点击之间的最小间隔，为 `0` 时可连续点击 */
+    coolDown?: number;
+    /** 是否圆角 */
+    round?: boolean;
+    /** 是否线性 */
+    plain?: boolean;
+    /** 是否文本按钮 */
+    text?: boolean;
+    /** 按钮图标 */
+    icon?: string;
+    /** 小尺寸 */
+    small?: boolean;
+    /** 大尺寸 */
+    large?: boolean;
+};
+export declare let buttonProps: ConfigurableButtonProps;
+export declare const setDefaultButtonProps: (props?: ConfigurableButtonProps) => void;

package/components/button/types.js

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

package/components/button/types.ts

@@ -0,0 +1,24 @@
+export type ConfigurableButtonProps = {
+	/** 按钮主题 */
+	type?: string;
+	/** 按钮冷却时间，单位毫秒，两次点击之间的最小间隔，为 `0` 时可连续点击 */
+	coolDown?: number;
+	/** 是否圆角 */
+	round?: boolean;
+	/** 是否线性 */
+	plain?: boolean;
+	/** 是否文本按钮 */
+	text?: boolean;
+	/** 按钮图标 */
+	icon?: string;
+	/** 小尺寸 */
+	small?: boolean;
+	/** 大尺寸 */
+	large?: boolean;
+};
+
+export let buttonProps: ConfigurableButtonProps = {};
+
+export const setDefaultButtonProps = (props: ConfigurableButtonProps = {}) => {
+	buttonProps = props;
+};

package/components/checkbox/checkbox.scss

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

package/components/checkbox/checkbox.vue

@@ -20,6 +20,7 @@ import { computed, inject, ref } from 'vue';
 import type { ComputedRef, Ref } from 'vue';
 import IconCpn from '../icon/icon.vue';
 import useClassNames from '../../composable/component-name';
+import { checkboxProps } from './types';
 
 defineOptions({
 	options: {
@@ -78,6 +79,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	icon: undefined,
 	checkedIcon: '',
 	uncheckedIcon: '',
+	...checkboxProps,
 });
 
 const emit = defineEmits<{

package/components/checkbox/types.d.ts

@@ -0,0 +1,10 @@
+export type ConfigurableCheckboxProps = {
+    /** 是否显示勾选图标 */
+    icon?: boolean;
+    /** 选中时的图标 */
+    checkedIcon?: string;
+    /** 未选中时的图标 */
+    uncheckedIcon?: string;
+};
+export declare let checkboxProps: ConfigurableCheckboxProps;
+export declare const setDefaultCheckboxProps: (props?: ConfigurableCheckboxProps) => void;

package/components/checkbox/types.js

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

package/components/checkbox/types.ts

@@ -0,0 +1,16 @@
+export type ConfigurableCheckboxProps = {
+	/** 是否显示勾选图标 */
+	icon?: boolean;
+	/** 选中时的图标 */
+	checkedIcon?: string;
+	/** 未选中时的图标 */
+	uncheckedIcon?: string;
+};
+
+export let checkboxProps: ConfigurableCheckboxProps = {};
+
+export const setDefaultCheckboxProps = (
+	props: ConfigurableCheckboxProps = {}
+) => {
+	checkboxProps = props;
+};

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

@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import { computed, provide, ref, watch } from 'vue';
 import useClassNames from '../../composable/component-name';
+import { checkboxGroupProps } from './types';
 
 defineOptions({
 	options: {
@@ -36,6 +37,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	icon: true,
 	checkedIcon: '',
 	uncheckedIcon: '',
+	...checkboxGroupProps,
 });
 
 const emit = defineEmits<{

package/components/checkbox-group/types.d.ts

@@ -0,0 +1,10 @@
+export type ConfigurableCheckboxGroupProps = {
+    /** 是否显示勾选图标 */
+    icon?: boolean;
+    /** 选中时的图标 */
+    checkedIcon?: string;
+    /** 未选中时的图标 */
+    uncheckedIcon?: string;
+};
+export declare let checkboxGroupProps: ConfigurableCheckboxGroupProps;
+export declare const setDefaultCheckboxGroupProps: (props?: ConfigurableCheckboxGroupProps) => void;

package/components/checkbox-group/types.js

@@ -0,0 +1,8 @@
+export let checkboxGroupProps = {
+    icon: true,
+    checkedIcon: '',
+    uncheckedIcon: '',
+};
+export const setDefaultCheckboxGroupProps = (props = {}) => {
+    checkboxGroupProps = props;
+};

package/components/checkbox-group/types.ts

@@ -0,0 +1,20 @@
+export type ConfigurableCheckboxGroupProps = {
+	/** 是否显示勾选图标 */
+	icon?: boolean;
+	/** 选中时的图标 */
+	checkedIcon?: string;
+	/** 未选中时的图标 */
+	uncheckedIcon?: string;
+};
+
+export let checkboxGroupProps: ConfigurableCheckboxGroupProps = {
+	icon: true,
+	checkedIcon: '',
+	uncheckedIcon: '',
+};
+
+export const setDefaultCheckboxGroupProps = (
+	props: ConfigurableCheckboxGroupProps = {}
+) => {
+	checkboxGroupProps = props;
+};

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

@@ -29,6 +29,7 @@
 import { computed, ref } from 'vue';
 import useClassNames from '../../composable/component-name';
 import Checkbox2Cpn from './checkbox2.vue';
+import { checkboxGroupProps } from '../checkbox-group/types';
 
 defineOptions({
 	options: {
@@ -67,6 +68,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	icon: true,
 	checkedIcon: undefined,
 	uncheckedIcon: undefined,
+	...checkboxGroupProps,
 });
 
 const emit = defineEmits<{

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

@@ -4,6 +4,7 @@
 
 		<load-more-cpn
 			v-if="showLoadMore && pagingData && pagingData.totalCount"
+			:observe="false"
 			:loading="loadingMore"
 			:end="!pagingData.hasMore"
 			:class="$style['DataList--load-more']"
@@ -66,9 +67,13 @@ const vm = getCurrentInstance();
 const startObserver = () => {
 	stopObserver();
 
-	_observer = uni.createIntersectionObserver(vm).relativeToViewport({
-		bottom: 0,
-	});
+	_observer = uni
+		.createIntersectionObserver(vm, {
+			nativeMode: true,
+		} as UniApp.CreateIntersectionObserverOptions)
+		.relativeToViewport({
+			bottom: 0,
+		});
 	_observer.observe('.' + $style['DataList--observe-view'], (res) => {
 		if (res.intersectionRatio === 0) return;
 		emit('load-more');
@@ -124,10 +129,11 @@ onBeforeUnmount(() => {
 	flex-direction: column;
 	width: 100%;
 	min-height: 100%;
-}
-.DataList--load-more {
-	position: sticky;
-	top: 100%;
+
+	.DataList--load-more {
+		position: sticky;
+		top: 100%;
+	}
 }
 .DataList--observe-view {
 	position: absolute;

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

@@ -75,6 +75,7 @@ import { formatDate, toDate } from '../../utils/date';
 import PopupCpn from '../popup/popup.vue';
 import SelectorCpn from '../selector/selector.vue';
 import DatePickerViewCpn from './date-picker-view.vue';
+import { datePickerProps } from './types';
 
 defineOptions({
 	options: {
@@ -119,6 +120,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	timeAppend: '',
 	min: '',
 	max: '',
+	...datePickerProps,
 });
 
 const emit = defineEmits<{

package/components/date-picker/types.d.ts

@@ -0,0 +1,12 @@
+export type ConfigurableDatePickerProps = {
+    /** 占位文本 */
+    placeholder?: string;
+    /** 是否在选择开始日期时，同步修改结束日期，且保持时间差 */
+    keepDiff?: boolean;
+    /** 结束日期是否可以与开始日期相同 */
+    canSame?: boolean;
+    /** 在选择的日期后面拼接时间字符串，如果传入的是数组，会分别对应添加到范围日期值后 */
+    timeAppend?: string | (() => string[]);
+};
+export declare let datePickerProps: ConfigurableDatePickerProps;
+export declare const setDefaultDatePickerProps: (props?: ConfigurableDatePickerProps) => void;

package/components/date-picker/types.js

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

package/components/date-picker/types.ts

@@ -0,0 +1,18 @@
+export type ConfigurableDatePickerProps = {
+	/** 占位文本 */
+	placeholder?: string;
+	/** 是否在选择开始日期时，同步修改结束日期，且保持时间差 */
+	keepDiff?: boolean;
+	/** 结束日期是否可以与开始日期相同 */
+	canSame?: boolean;
+	/** 在选择的日期后面拼接时间字符串，如果传入的是数组，会分别对应添加到范围日期值后 */
+	timeAppend?: string | (() => string[]);
+};
+
+export let datePickerProps: ConfigurableDatePickerProps = {};
+
+export const setDefaultDatePickerProps = (
+	props: ConfigurableDatePickerProps = {}
+) => {
+	datePickerProps = props;
+};