@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/button/button.vue

@@ -1,8 +1,9 @@
 <template>
 	<button
-		:open-type="openType"
+		:open-type="isNotClickable ? undefined : openType"
 		:class="[
-			componentClassNames,
+			...classNames,
+			$style['Button'],
 			{
 				// 不能点击，但不是禁用态，显示与激活态一致
 				[$style['Button--not-clickable']]: !disabled && isNotClickable,
@@ -20,10 +21,8 @@
 			buttonSize,
 		]"
 		:hover-class="disabled ? 'none' : $style['Button--active']"
-		:style="buttonTheme"
+		:style="inlineCssVar"
 		@click="onClick"
-		@getphonenumber="onOpenType('getphonenumber', $event)"
-		@agreeprivacyauthorization="onOpenType('agreeprivacyauthorization', $event)"
 	>
 		<!-- 线性按钮边框：仅在线性按钮且不是禁用态时显示 -->
 		<view v-if="!disabled && !text && plain" :class="$style['Button--plain-border']"></view>
@@ -31,16 +30,18 @@
 		<template v-if="text">
 			<icon-cpn
 				v-if="icon || (text && isLoading && !disabled)"
-				:class="$style['Button--icon']"
 				:icon="text && isLoading ? 'loading-dot-spinner' : icon"
+				:spinning="text && isLoading"
+				:class="$style['Button--icon']"
 			/>
 			<slot></slot>
 		</template>
 		<view v-else :class="$style['Button--title']">
 			<icon-cpn
 				v-if="icon"
-				:class="$style['Button--icon']"
 				:icon="text && isLoading ? 'loading-dot-spinner' : icon"
+				:spinning="text && isLoading"
+				:class="$style['Button--icon']"
 			/>
 			<slot></slot>
 		</view>
@@ -48,181 +49,124 @@
 		<view v-if="!disabled && !text" :class="$style['Button--active-mask']"></view>
 		<!-- 加载态样式：仅在非文本按钮处于加载态（不能处于禁用态）时显示 -->
 		<view v-if="!disabled && !text && isLoading" :class="$style['Button--loading']">
-			<icon-cpn icon="loading-dot-spinner" />
+			<icon-cpn icon="loading-dot-spinner" spinning />
 		</view>
 	</button>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+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 状态
- */
-export default {
-	name: 'Button',
-	components: { IconCpn },
-	mixins: [componentName],
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	props: {
-		/** 是否禁用，禁用时按钮会显示禁用态（置灰） */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否禁止点击，为 `true` 时按钮会显白 */
-		forbidClick: {
-			type: Boolean,
-			default: false,
-		},
-		/** 按钮主题 */
-		type: {
-			type: String,
-			default: 'primary',
-		},
-		/** 对应小程序的 openType */
-		openType: {
-			type: String,
-			default: '',
-		},
-		/** 按钮冷却时间，单位毫秒，两次点击之间的最小间隔，为 `0` 时可连续点击 */
-		coolDown: {
-			type: Number,
-			default: 500,
-		},
-		/** 是否异步事件 */
-		async: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否圆角 */
-		round: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否线性 */
-		plain: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否文本按钮 */
-		text: {
-			type: Boolean,
-			default: false,
-		},
-		/** 按钮图标 */
-		icon: {
-			type: String,
-			default: '',
-		},
-		/** 加载中 */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/** 小尺寸 */
-		small: {
-			type: Boolean,
-			default: false,
-		},
-		/** 大尺寸 */
-		large: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			/** 按钮是否冷却中 */
-			isCoolingDown: false,
-			/** 按钮是否处于请求状态 */
-			isAsyncLoading: false,
-		};
-	},
-	computed: {
-		buttonTheme() {
-			return `--theme-from-prop: var(--button-theme-${this.type});`;
-		},
-		/** 按钮尺寸样式 */
-		buttonSize() {
-			if (this.text) {
-				return this.large
-					? this.$style['Button--text-large']
-					: this.small
-					? this.$style['Button--text-small']
-					: '';
-			}
-			return this.large
-				? this.$style['Button--block-large']
-				: this.small
-				? this.$style['Button--block-small']
-				: '';
-		},
-		/** 按钮 loading */
-		isLoading() {
-			return this.loading || this.isAsyncLoading;
-		},
-		/** 按钮是否可点击 */
-		isNotClickable() {
-			return this.disabled || this.forbidClick || this.isLoading || this.isCoolingDown;
-		},
-	},
-	// emits: ['click', 'getphonenumber', 'agreeprivacyauthorization'],
-	methods: {
-		/** 进入冷却 */
-		$_coolDown() {
-			if (this.coolDown > 0) {
-				this.isCoolingDown = true;
-
-				setTimeout(() => {
-					this.isCoolingDown = false;
-				}, this.coolDown);
-			}
-		},
-		/** 点击按钮响应 */
-		onClick() {
-			if (this.isNotClickable) {
-				return;
-			}
-
-			this.$_coolDown();
-
-			if (!this.async) {
-				this.$emit('click');
-				return;
-			}
-
-			this.isAsyncLoading = true;
-			const { promise, resolve, reject } = Promise.withResolvers();
-			promise
-				.catch((err) => {
-					if (process.env.NODE_ENV === 'development') {
-						// eslint-disable-next-line no-console
-						console.warn(`${this.componentClass} unresolved error:`, err);
-					}
-				})
-				.finally(() => {
-					this.isAsyncLoading = false;
-				});
-			this.$emit('click', { resolve, reject });
-		},
-		/** 开放能力 */
-		onOpenType(eventType, event) {
-			if (this.isNotClickable) {
-				return;
-			}
-
-			this.$emit(eventType, event);
-			this.$_coolDown();
-		},
-	},
+});
+
+const classNames = useClassNames('button');
+const $style = useCssModule();
+
+type _Props = {
+	/** 是否禁用，禁用时按钮会显示禁用态（置灰） */
+	disabled?: boolean;
+	/** 是否禁止点击，为 `true` 时按钮会显白 */
+	forbidClick?: boolean;
+	/** 按钮主题 */
+	type?: string;
+	/** 对应小程序的 openType */
+	openType?: 'contact' | 'getPhoneNumber' | 'getUserInfo' | 'chooseAvatar' | 'agreePrivacyAuthorization';
+	/** 按钮冷却时间，单位毫秒，两次点击之间的最小间隔，为 `0` 时可连续点击 */
+	coolDown?: number;
+	/** 是否异步事件 */
+	async?: boolean;
+	/** 是否圆角 */
+	round?: boolean;
+	/** 是否线性 */
+	plain?: boolean;
+	/** 是否文本按钮 */
+	text?: boolean;
+	/** 按钮图标 */
+	icon?: string;
+	/** 加载中 */
+	loading?: boolean;
+	/** 小尺寸 */
+	small?: boolean;
+	/** 大尺寸 */
+	large?: boolean;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	disabled: false,
+	forbidClick: false,
+	type: 'primary',
+	openType: undefined,
+	coolDown: 500,
+	async: false,
+	round: false,
+	plain: false,
+	text: false,
+	icon: '',
+	loading: false,
+	small: false,
+	large: false,
+});
+
+const emit = defineEmits<{
+	(event: 'click', payload?: Omit<PromiseWithResolvers<unknown>, 'promise'>): void;
+}>();
+
+/** 按钮是否冷却中 */
+const isCoolingDown = ref(false);
+/** 按钮是否处于请求状态 */
+const isAsyncLoading = ref(false);
+
+/** 按钮 loading */
+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--block-large'] : props.small ? $style['Button--block-small'] : '';
+});
+/** 按钮 loading */
+const isLoading = computed(() => props.loading || isAsyncLoading.value);
+/** 按钮是否可点击 */
+const isNotClickable = computed(() => props.disabled || props.forbidClick || isLoading.value || isCoolingDown.value);
+
+/** 进入冷却 */
+const $_coolDown = () => {
+	if (props.coolDown > 0) {
+		isCoolingDown.value = true;
+
+		setTimeout(() => {
+			isCoolingDown.value = false;
+		}, props.coolDown);
+	}
+};
+/** 点击按钮响应 */
+const onClick = async () => {
+	if (isNotClickable.value) {
+		return;
+	}
+
+	$_coolDown();
+
+	if (!props.async) {
+		emit('click');
+		return;
+	}
+
+	isAsyncLoading.value = true;
+	const { promise, resolve, reject } = Promise.withResolvers();
+	promise.finally(() => {
+		isAsyncLoading.value = false;
+	});
+
+	emit('click', { resolve, reject });
 };
 </script>
 
@@ -230,13 +174,13 @@ export default {
 @use 'sass:color';
 @use 'sass:math';
 @use 'sass:map';
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use '../../styles/var' as *;
+@use './button' as *;
 
 // 定义外部变量
-$component-name: 'button';
-$component-vars: $button;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($button, 'button');
 }
 
 %button-themes {

package/components/checkbox/checkbox.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$checkbox: () !default;
+$checkbox-default: (
+	checked-color: UTILS__GLOBAL_VAR(theme, primary),
+	unchecked-color: UTILS__GLOBAL_VAR(color, foreground),
+);
+$checkbox: map.merge($checkbox-default, $checkbox);

package/components/checkbox/checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-	<view :class="componentClassNames" @click="toggle()">
+	<view :class="[...classNames, $style['Checkbox']]" @click="toggle()">
 		<icon-cpn
 			v-if="hasIcon"
 			:icon="usingIcon || ''"
@@ -7,166 +7,141 @@
 			:class="[$style['Checkbox--icon'], { [$style['Checkbox--checked']]: isChecked }]"
 		/>
 		<view :class="$style['Checkbox--text']">
-			<slot></slot>
+			<slot>{{ label }}</slot>
 		</view>
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
+<script lang="ts" setup>
+import { computed, ComputedRef, inject, Ref, ref } from 'vue';
 import IconCpn from '../icon/icon.vue';
+import useClassNames from '../../composable/component-name';
 
-export default {
-	name: 'Checkbox',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	components: { IconCpn },
-	mixins: [componentName, isFormReadonly],
-	inject: {
-		/** checkbox-group 传入的 check 方法 */
-		checkGroup: {
-			from: 'checkboxGroupCheck',
-			default: null,
-		},
-		/** checkbox-group 组件的 data 对象，用于读取当前值 */
-		checkboxGroupData: {
-			from: 'checkboxGroupData',
-			default: null,
-		},
-		/** checkbox-group 组件的 props 对象，用于读取 radio 和图标 */
-		checkboxGroupProps: {
-			from: 'checkboxGroupProps',
-			default: { icon: true, radio: false },
-		},
-	},
-	props: {
-		/** 当在 checkbox-group 中时，这个值用于选项值；否则用于 v-model ，只能是 boolean 类型 */
-		value: {
-			type: [Number, String, Boolean, null],
-			default: null,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 类型 */
-		radio: {
-			type: [Boolean, null],
-			default: null,
-		},
-		/** 是否显示勾选图标 */
-		icon: {
-			type: [Boolean, null],
-			default: null,
-		},
-		/** 选中时的图标 */
-		checkedIcon: {
-			type: String,
-			default: '',
-		},
-		/** 未选中时的图标 */
-		uncheckedIcon: {
-			type: String,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			/** 组件内部记录选中状态，仅在非 checkbox-group 中有效 */
-			innerChecked: false,
-		};
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		/** 是否在 checkbox-group 中 */
-		isInGroup() {
-			return !!this.checkboxGroupData;
-		},
-		/** 是否显示勾选图标 */
-		hasIcon() {
-			return this.icon === null ? this.checkboxGroupProps.icon : this.icon;
-		},
-		/** 是否为单选 */
-		isRadio() {
-			return this.radio === null ? this.checkboxGroupProps.radio : this.radio;
-		},
-		/** checkbox-group 的值 */
-		groupCheckedValue() {
-			return this.checkboxGroupData?.checkedValue;
-		},
-		/** 最终使用的选中态的图标 */
-		usingCheckedIcon() {
-			return (
-				this.checkboxGroupProps.checkedIcon ||
-				this.checkedIcon ||
-				(this.isRadio ? 'radio-checked' : 'checkbox-checked')
-			);
-		},
-		/** 最终使用的未选中态的图标 */
-		usingUncheckedIcon() {
-			return (
-				this.checkboxGroupProps.uncheckedIcon ||
-				this.uncheckedIcon ||
-				(this.isRadio ? 'radio-unchecked' : 'checkbox-unchecked')
-			);
-		},
-		/** 最终使用的图标 */
-		usingIcon() {
-			return this.isChecked ? this.usingCheckedIcon : this.usingUncheckedIcon;
-		},
-		isChecked: {
-			get() {
-				if (this.isInGroup) {
-					return this.isRadio
-						? this.value === this.groupCheckedValue
-						: this.groupCheckedValue?.includes(this.value) || false;
-				}
-				return this.value === null ? this.innerChecked : this.value;
-			},
-			set(val) {
-				this.$emit('input', val);
-				this.innerChecked = val;
-				this.$emit('change', val);
-			},
-		},
+});
+
+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'
+);
+/** 勾选框组的 props */
+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');
+
+type _Props = {
+	/** 不在勾选框组中时使用，用于 v-model ，只能是 boolean 类型 */
+	modelValue?: boolean;
+	/** 在勾选框组时使用，用于定义当前勾选框的选项值 */
+	value?: number | string | boolean;
+	/** 选项标签 */
+	label?: string;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 是否单选 */
+	radio?: boolean;
+	/** 是否显示勾选图标 */
+	icon?: boolean;
+	/** 选中时的图标 */
+	checkedIcon?: string;
+	/** 未选中时的图标 */
+	uncheckedIcon?: string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: undefined,
+	value: undefined,
+	label: undefined,
+	readonly: undefined,
+	radio: undefined,
+	icon: undefined,
+	checkedIcon: '',
+	uncheckedIcon: '',
+});
+
+const emit = defineEmits<{
+	(event: 'update:modelValue', value: boolean): void;
+	(event: 'change', value: boolean): void;
+}>();
+
+const innerChecked = ref(false);
+
+/** 是否在 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 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')
+);
+/** 最终使用的未选中态的图标 */
+const usingUncheckedIcon = computed(
+	() => props.uncheckedIcon || groupProps?.uncheckedIcon || (isRadio.value ? 'radio-unchecked' : 'checkbox-unchecked')
+);
+/** 最终使用的图标 */
+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;
+		}
+		return props.modelValue === undefined ? innerChecked.value : (props.modelValue as boolean);
 	},
-	methods: {
-		/** 切换选择 */
-		toggle(checked) {
-			if (this.isReadonly) return;
-
-			if (this.isInGroup) {
-				this.checkGroup(this.value);
-				return;
-			}
-
-			if (checked === undefined || checked === null) {
-				this.isChecked = !this.isChecked;
-				return;
-			}
-
-			if (this.isChecked !== !!checked) {
-				this.isChecked = !!checked;
-			}
-		},
+	set(val) {
+		emit('update:modelValue', val);
+		innerChecked.value = val;
+		emit('change', val);
 	},
+});
+
+/** 切换选择 */
+const toggle = (checked?: boolean) => {
+	if (isReadonly.value) return;
+
+	if (isInCheckboxGroup.value) {
+		groupCheck?.(props.value);
+		return;
+	}
+
+	if (checked === undefined) {
+		isChecked.value = !isChecked.value;
+		return;
+	}
+
+	if (isChecked.value !== !!checked) {
+		isChecked.value = !!checked;
+	}
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './checkbox' as *;
 
 // 定义外部变量
-$component-name: 'checkbox';
-$component-vars: $checkbox;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($checkbox, 'checkbox');
 }
 
 .Checkbox {
@@ -187,9 +162,6 @@ $component-vars: $checkbox;
 	}
 	.Checkbox--checked {
 		color: UTILS__LOCAL_VAR(checked-color);
-		:global(.radio-checked) {
-			fill: UTILS__LOCAL_VAR(checked-color);
-		}
 	}
 	.Checkbox--text {
 		flex: 0 1 auto;