@ecolovo/uniapp-components 1.0.0

package/components/aspect/aspect.vue

@@ -0,0 +1,43 @@
+<template>
+	<view :class="componentClassNames">
+		<view :class="$style['Aspect--content-wrapper']" :style="{ paddingTop: 100 / ratio + '%' }">
+			<view :class="$style['Aspect--content']">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+
+export default {
+	name: 'AppAspect',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		/** 纵横比，默认为 1，即宽高相等 */
+		ratio: {
+			type: [String, Number],
+			default: 1,
+		},
+	},
+};
+</script>
+
+<style lang="css" module>
+.Aspect--content-wrapper {
+	position: relative;
+	width: 100%;
+}
+.Aspect--content {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+</style>

package/components/badge/badge.vue

@@ -0,0 +1,88 @@
+<template>
+	<view :class="componentClassNames">
+		<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>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+
+export default {
+	name: 'AppBadge',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		/** 显示在右上角的内容 */
+		value: {
+			type: [String, Number],
+			default: 0,
+		},
+		/** 最大显示值，超出时会在后面添加一个“+” */
+		max: {
+			type: Number,
+			default: 99,
+		},
+	},
+	computed: {
+		/** 显示值 */
+		showValue() {
+			const numberValue = Number(this.value);
+			return numberValue && numberValue > 0 ? (numberValue > this.max ? `${this.max}+` : numberValue) : '';
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'badge';
+$component-vars: $badge;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.Badge {
+	@extend %external-vars;
+
+	display: inline-block;
+	position: relative;
+	width: fit-content;
+
+	.Badge--box {
+		--padding-x: calc(#{UTILS__LOCAL_VAR(font-size)} / 2);
+
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 1;
+		padding: 0 var(--padding-x);
+		box-sizing: content-box;
+		text-align: center;
+		min-width: calc(#{UTILS__LOCAL_VAR(height)} - 2 * var(--padding-x));
+		height: UTILS__LOCAL_VAR(height);
+		line-height: UTILS__LOCAL_VAR(height);
+		font-size: UTILS__LOCAL_VAR(font-size);
+		border: UTILS__LOCAL_VAR(border);
+		border-radius: UTILS__LOCAL_VAR(height);
+		translate: UTILS__LOCAL_VAR(translate);
+		color: UTILS__LOCAL_VAR(color);
+		background: UTILS__LOCAL_VAR(background);
+	}
+}
+</style>

package/components/button/button.vue

@@ -0,0 +1,409 @@
+<template>
+	<button
+		:open-type="openType"
+		:class="[
+			componentClassNames,
+			{
+				// 不能点击，但不是禁用态，显示与激活态一致
+				[$style['Button--not-clickable']]: !disabled && isNotClickable,
+				// 禁用态
+				[$style['Button--disabled']]: disabled,
+				// 面性按钮
+				[$style['Button--block']]: !text,
+				// 线性按钮
+				[$style['Button--plain']]: !text && plain,
+				// 文本按钮
+				[$style['Button--text']]: text,
+				// 半圆圆角按钮
+				[$style['Button--round']]: !text && round,
+			},
+			buttonSize,
+		]"
+		:hover-class="disabled ? 'none' : $style['Button--active']"
+		:style="buttonTheme"
+		@click.stop="onClick"
+		@getphonenumber="onOpenType('getphonenumber', $event)"
+		@agreeprivacyauthorization="onOpenType('agreeprivacyauthorization', $event)"
+	>
+		<!-- 仅在线性按钮且不是禁用态时显示 -->
+		<view v-if="!disabled && !text && plain" :class="$style['Button--plain-border']"></view>
+		<!-- 仅在配置了图标或文本按钮处于加载态（不能处于禁用态）时显示 -->
+		<template v-if="text">
+			<icon-cpn
+				v-if="icon || (text && isLoading && !disabled)"
+				:class="$style['Button--icon']"
+				:icon="text && isLoading ? 'loading-dot-spinner' : icon"
+			/>
+			<slot></slot>
+		</template>
+		<view v-else :class="$style['Button--title']">
+			<icon-cpn
+				v-if="icon || (text && isLoading && !disabled)"
+				:class="$style['Button--icon']"
+				:icon="text && isLoading ? 'loading-dot-spinner' : icon"
+			/>
+			<slot></slot>
+		</view>
+		<!-- 仅在非文本按钮且不是禁用态时显示 -->
+		<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" />
+		</view>
+	</button>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import IconCpn from '../icon/icon.vue';
+
+/**
+ * **组件使用说明：**
+ *
+ * 当 async 为 false 时，组件会按传入的 coolDown 控制两次点击之间的间隔
+ * 当 async 为 true 时，需要在父组件监听 click 事件的回调函数中调用传入的 resolve 或 reject 方法，否则按钮将持续处于 loading 状态
+ */
+export default {
+	name: 'AppButton',
+	components: { IconCpn },
+	mixins: [componentName],
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	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();
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use 'sass:color';
+@use 'sass:math';
+@use 'sass:map';
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'button';
+$component-vars: $button;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+%button-themes {
+	@each $name, $color in $component-themes {
+		--button-theme-#{$name}: #{$color};
+	}
+}
+
+$button-sizes: (
+	normal: (
+		height: 80rpx,
+		font-size: 28rpx,
+		border-radius: 20rpx,
+	),
+	small: (
+		height: 72rpx,
+		font-size: 24rpx,
+		border-radius: 16rpx,
+	),
+	large: (
+		height: 96rpx,
+		font-size: 32rpx,
+		border-radius: 24rpx,
+	),
+);
+
+@mixin button-size($type: 'block', $size: 'normal') {
+	$button-size: map.get($button-sizes, $size);
+	font-size: map.get($button-size, font-size);
+	@if $type == 'block' {
+		height: map.get($button-size, height);
+		border-radius: map.get($button-size, border-radius);
+	}
+}
+
+// 去除 button 默认样式
+%button-reset {
+	&::before, // loading 动画
+	&::after // 边框
+	{
+		all: initial;
+	}
+}
+
+.Button {
+	@extend %external-vars;
+	@extend %button-themes;
+}
+
+.Button--block {
+	@extend %button-reset;
+	display: block;
+	position: relative;
+	font-weight: 500;
+	width: 100%;
+	padding: 0 20rpx;
+	box-sizing: border-box;
+	text-decoration: none;
+	text-align: center;
+	overflow: hidden;
+	color: UTILS__LOCAL_VAR(text-color);
+	background: UTILS__LOCAL_VAR(theme);
+	border: none;
+
+	@include button-size('block', 'normal');
+	@at-root .Button--block-small {
+		@include button-size('block', 'small');
+	}
+	@at-root .Button--block-large {
+		@include button-size('block', 'large');
+	}
+
+	.Button--active-mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: inherit;
+		background: UTILS__LOCAL_VAR(active-mask);
+		pointer-events: none;
+		opacity: 0;
+		will-change: opacity;
+
+		transition: opacity 0.3s;
+	}
+
+	&.Button--active,
+	&.Button--not-clickable {
+		.Button--active-mask {
+			opacity: 0.5;
+		}
+	}
+
+	.Button--loading {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		color: #666;
+		font-size: 36rpx;
+	}
+
+	&.Button--disabled {
+		color: #fff;
+		background: #ccc;
+	}
+}
+
+.Button--icon {
+	position: relative;
+	margin-right: 10rpx;
+}
+
+.Button--title {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.Button--plain {
+	color: UTILS__LOCAL_VAR(theme);
+	background: transparent;
+
+	.Button--plain-border {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		border-radius: inherit;
+		border: UTILS__LOCAL_VAR(border-width) solid UTILS__LOCAL_VAR(theme);
+		pointer-events: none;
+	}
+}
+
+.Button--text {
+	@extend %button-reset;
+	display: inline-block;
+	padding: 0;
+	color: UTILS__LOCAL_VAR(theme);
+	line-height: inherit;
+	background: transparent;
+	font-weight: inherit;
+	will-change: color;
+
+	transition: color 0.3s;
+
+	@include button-size('inline', 'normal');
+	@at-root .Button--text-small {
+		@include button-size('inline', 'small');
+	}
+	@at-root .Button--text-large {
+		@include button-size('inline', 'large');
+	}
+
+	&.Button--active,
+	&.Button--not-clickable {
+		color: #999;
+	}
+
+	&.Button--disabled {
+		color: #ccc;
+	}
+}
+</style>

package/components/checkbox/checkbox.vue

@@ -0,0 +1,183 @@
+<template>
+	<view :class="componentClassNames" @click="toggle()">
+		<icon-cpn
+			:icon="usingIcon || ''"
+			tap-size="50rpx"
+			:class="[$style['Checkbox--icon'], { [$style['Checkbox--checked']]: isChecked }]"
+		/>
+		<view :class="$style['Checkbox--text']">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppCheckbox',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	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: {},
+		},
+	},
+	props: {
+		/** 值 */
+		value: {
+			type: [Number, String, Boolean, null],
+			default: null,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 选中时的图标 */
+		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;
+		},
+		/** 是否为单选 */
+		isRadio() {
+			return !!this.checkboxGroupProps.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(value) {
+				this.$emit('input', value);
+				this.innerChecked = value;
+				this.$emit('change', this.innerChecked);
+			},
+		},
+	},
+	methods: {
+		/** 切换选择 */
+		toggle(isChecked) {
+			if (this.isReadonly) return;
+
+			if (this.isInGroup) {
+				this.checkGroup(this.value);
+				return;
+			}
+
+			if (isChecked === undefined || isChecked === null) {
+				this.isChecked = !this.isChecked;
+				return;
+			}
+
+			if (this.isChecked !== !!isChecked) {
+				this.isChecked = !!isChecked;
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'checkbox';
+$component-vars: $checkbox;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.Checkbox {
+	@extend %external-vars;
+	display: flex;
+	align-items: center;
+
+	.Checkbox--image {
+		flex: none;
+		width: 1em;
+		height: 1em;
+		color: UTILS__LOCAL_VAR(unchecked-color);
+	}
+	.Checkbox--icon {
+		flex: none;
+		color: UTILS__LOCAL_VAR(unchecked-color);
+	}
+	.Checkbox--checked {
+		color: UTILS__LOCAL_VAR(checked-color);
+		:global(.radio-checked) {
+			fill: UTILS__LOCAL_VAR(checked-color);
+		}
+	}
+	.Checkbox--text {
+		flex: 0 1 auto;
+		margin-left: 12rpx;
+	}
+}
+</style>