@ecolovo/uniapp-components 1.0.0

package/components/searching/searching.vue

@@ -0,0 +1,86 @@
+<template>
+	<view :class="componentClassNames">
+		<image v-if="image" :src="image" :class="$style['Searching--image']" />
+		<view v-else :class="$style['Searching--search-icon-animation']">
+			<icon-cpn icon="search" :class="$style['Searching--search-icon']" />
+		</view>
+		<view :class="$style['Searching--text']">
+			<slot>{{ text }}</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppSearching',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName],
+	props: {
+		/** 图片 */
+		image: {
+			type: String,
+			default: '',
+		},
+		/** 文本 */
+		text: {
+			type: String,
+			default: '数据加载中',
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 自定义样式变量前缀，与组件名称一致
+$component-prefix: '#{$ec-component-prefix}-searching';
+// 自定义样式变量
+%external-vars {
+	@include define-component-vars(
+		$image-size: 300rpx,
+		$image-width: var(--image-size),
+		$image-height: var(--image-size),
+		$space: get-value('size-m'),
+		$color: get-value('color-info'),
+		$font-size: get-value('size-font-m')
+	);
+}
+
+.Searching {
+	@extend %external-vars;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+.Searching--image {
+	position: relative;
+	width: var(--image-width);
+	height: var(--image-height);
+}
+.Searching--search-icon-animation {
+	width: 100rpx;
+	height: 100rpx;
+	transform-origin: center center;
+	animation: circle 1.5s infinite linear;
+}
+.Searching--search-icon {
+	position: absolute;
+	font-size: 60rpx;
+	color: var(--color);
+	animation: circle 1.5s linear infinite reverse;
+}
+.Searching--text {
+	margin-top: var(--space);
+	color: var(--color);
+	font-size: var(--font-size);
+}
+</style>

package/components/selector/selector.vue

@@ -0,0 +1,86 @@
+<template>
+	<view :class="componentClassNames" @click="onClick">
+		<text v-if="isReadonly || value" :class="$style['Selector--text']">
+			<slot>
+				{{ value || '' }}
+			</slot>
+		</text>
+
+		<text v-else :class="[$style['Selector--text'], $style['Selector--placeholder']]">
+			{{ placeholder }}
+		</text>
+		<icon-cpn v-if="!isReadonly" icon="picker-arrow" :class="$style['Selector--icon']"></icon-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppSelector',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [String, null],
+			default: '',
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 占位文本 */
+		placeholder: {
+			type: String,
+			default: '请选择',
+		},
+	},
+	computed: {
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+	},
+	methods: {
+		onClick() {
+			if (this.disabled || this.isReadonly) {
+				return;
+			}
+			this.$emit('click');
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.Selector {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+.Selector--text {
+	flex: 1;
+}
+.Selector--placeholder {
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+}
+.Selector--icon {
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+}
+</style>

package/components/switch/switch.vue

@@ -0,0 +1,180 @@
+<template>
+	<view
+		:class="[
+			componentClassNames,
+			{
+				[$style['Switch--disabled']]: disabled || loading,
+				[$style['Switch--switch-on']]: value === valueOn,
+			},
+		]"
+		@click.stop="toggle"
+	>
+		<view :class="$style['Switch--switch-button']">
+			<icon-cpn v-if="loading" icon="loading-dot-spinner" :class="$style['Switch--loading']" />
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppSwitch',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [Boolean, Number, String],
+			default: false,
+		},
+		/** 是否异步事件 */
+		async: {
+			type: Boolean,
+			default: false,
+		},
+		/** 开启状态的值 */
+		valueOn: {
+			type: [Boolean, Number, String],
+			default: true,
+		},
+		/** 关闭状态的值 */
+		valueOff: {
+			type: [Boolean, Number, String],
+			default: false,
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			/** 是否加载中状态 */
+			loading: false,
+		};
+	},
+	computed: {
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+		/** 按钮是否可点击 */
+		isNotClickable() {
+			return this.disabled || this.isReadonly || this.loading;
+		},
+	},
+	methods: {
+		/** 开启或关闭 */
+		toggle() {
+			if (this.isNotClickable) return;
+
+			if (!this.async) {
+				this.$_toggle();
+				return;
+			}
+
+			this.loading = true;
+			const nextValue = this.value !== this.valueOn ? this.valueOn : this.valueOff;
+			const { promise, resolve, reject } = Promise.withResolvers();
+			promise
+				.then((isOk = true) => {
+					if (isOk === false) return;
+					this.$_toggle();
+				})
+				.catch((err) => {
+					if (process.env.NODE_ENV === 'development') {
+						// eslint-disable-next-line no-console
+						console.warn(`${this.componentClass} unresolved error:`, err);
+					}
+				})
+				.finally(() => {
+					this.loading = false;
+				});
+			this.$emit('async', { value: nextValue, resolve, reject });
+		},
+		/** 开启或关闭，组件内部调用 */
+		$_toggle() {
+			if (this.value !== this.valueOn) {
+				this.$emit('input', this.valueOn);
+			} else {
+				this.$emit('input', this.valueOff);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'switch';
+$component-vars: $switch;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.Switch {
+	@extend %external-vars;
+	position: relative;
+	width: UTILS__LOCAL_VAR(width);
+	height: UTILS__LOCAL_VAR(height);
+	border-radius: UTILS__LOCAL_VAR(height);
+	background-color: #ccc;
+	transition: background-color 0.3s;
+
+	.Switch--switch-button {
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: calc((UTILS__LOCAL_VAR(height) - UTILS__LOCAL_VAR(indicator-size)) / 2);
+		transform: translateY(-50%);
+		width: UTILS__LOCAL_VAR(indicator-size);
+		height: UTILS__LOCAL_VAR(indicator-size);
+		border-radius: 50%;
+		background-color: #fff;
+		transition: left 0.3s;
+	}
+	.Switch--loading {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		font-size: calc(UTILS__LOCAL_VAR(indicator-size) * 0.7);
+		transform: translate(-50%, -50%);
+		transform-origin: 0 0;
+		color: UTILS__GLOBAL_VAR(color, foreground);
+	}
+	&.Switch--switch-on {
+		background-color: UTILS__LOCAL_VAR(active-color);
+		.Switch--switch-button {
+			left: calc(100% - (UTILS__LOCAL_VAR(height) + UTILS__LOCAL_VAR(indicator-size)) / 2);
+		}
+	}
+	&::after {
+		visibility: hidden;
+		opacity: 0;
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: UTILS__LOCAL_VAR(height);
+		background: #ffffff80;
+		transition: all 0.2s;
+	}
+	&.Switch--disabled::after {
+		visibility: visible;
+		opacity: 1;
+	}
+}
+</style>

package/components/tab/tab.vue

@@ -0,0 +1,235 @@
+<template>
+	<view :class="[componentClassNames, { [$style['Tab--evenly']]: evenly }]" :style="styleStr">
+		<scroll-view scroll-x :class="$style['Tab--tab-scroll']">
+			<view :class="$style['Tab--tab-wrapper']">
+				<view
+					v-for="(tab, index) in tabLabels"
+					:key="index"
+					:class="[[$style['Tab--tab']], { [$style['Tab--tab-active']]: index === tabIndex }]"
+					@click="onChangeTab(index)"
+				>
+					<view :class="$style['Tab--tab-text']">{{ tab }}</view>
+				</view>
+				<view
+					v-if="indicator"
+					:class="[$style['Tab--indicator'], { [$style['Tab--initialing']]: !initialized }]"
+				>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+
+export default {
+	name: 'AppTab',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		value: {
+			type: [String, Number, null],
+			default: null,
+		},
+		tabs: {
+			type: Array,
+			default: () => [],
+		},
+		/** 是否均分大小 */
+		evenly: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否显示指示器 */
+		indicator: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {
+			/** 组件内部记录的索引值 */
+			innerIndex: 0,
+			/** 左边距 */
+			boundingLeft: 0,
+			/** 标签的绘制信息 */
+			tabRects: [],
+			/** 是否已初始化 */
+			initialized: false,
+		};
+	},
+	computed: {
+		/** 当前选中的索引 */
+		selectedIndex: {
+			get: function () {
+				return this.value === null ? this.innerIndex : this.value;
+			},
+			set: function (value) {
+				this.$emit('input', value);
+				this.innerIndex = value;
+				this.$emit('change', this.innerIndex);
+			},
+		},
+		isTabsNotEmpty() {
+			return this.tabs && this.tabs.length > 0;
+		},
+		isStringTabs() {
+			return this.tabs.every((item) => typeof item === 'string');
+		},
+		tabLabels() {
+			return this.tabs.map((item) => (typeof item === 'string' ? item : item.label));
+		},
+		/** 当前值对应的索引 */
+		tabIndex() {
+			if (!this.isTabsNotEmpty) return 0;
+			return this.isStringTabs
+				? Number(this.selectedIndex) || 0
+				: this.tabs.findIndex((item) => item.value === this.selectedIndex);
+		},
+		/** 指示器宽度 */
+		indicatorWidth() {
+			const rect = this.tabRects[this.tabIndex];
+			if (!rect) return 0;
+			return rect.width;
+		},
+		/** 指示器中心点 */
+		indicatorCenter() {
+			const rect = this.tabRects[this.tabIndex];
+			if (!rect) return 0;
+			return rect.left + rect.width / 2 - this.boundingLeft;
+		},
+		styleStr() {
+			return [
+				`--tab-count: ${this.tabs.length};`,
+				`--tab-text-width: ${this.indicatorWidth}px;`,
+				`--indicator-center: ${this.indicatorCenter}px;`,
+			].join(' ');
+		},
+	},
+	watch: {
+		tabs: {
+			handler() {
+				if (this.isStringTabs) {
+					this.selectedIndex = Math.min(this.selectedIndex, this.tabs.length - 1);
+					return;
+				}
+				if (this.isTabsNotEmpty && this.tabIndex < 0) {
+					this.selectedIndex = this.tabs[0].value;
+				}
+			},
+			immediate: true,
+		},
+	},
+	mounted() {
+		uni.createSelectorQuery()
+			.in(this)
+			.select('.' + this.$style['Tab--tab-wrapper'])
+			.boundingClientRect((rect) => {
+				this.boundingLeft = rect.left;
+			})
+			.exec();
+		uni.createSelectorQuery()
+			.in(this)
+			.selectAll('.' + this.$style['Tab--tab-text'])
+			.boundingClientRect((rects) => {
+				if (!rects[this.tabIndex]) return;
+				this.tabRects = rects;
+				this.$nextTick(() => {
+					this.initialized = true;
+				});
+			})
+			.exec();
+	},
+	methods: {
+		/** 改变标签响应 */
+		onChangeTab(index) {
+			if (this.isStringTabs) {
+				if (this.selectedIndex === index) return;
+
+				this.selectedIndex = index;
+			} else {
+				if (this.selectedIndex === this.tabs[index].value) return;
+
+				this.selectedIndex = this.tabs[index].value;
+			}
+			this.$emit('change', this.selectedIndex);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'tab';
+$component-vars: $tab;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+
+.Tab {
+	@extend %external-vars;
+	height: UTILS__LOCAL_VAR(height);
+	background: UTILS__LOCAL_VAR(background);
+	border-radius: UTILS__LOCAL_VAR(border-radius);
+}
+.Tab--evenly {
+	$tab-width: calc(100% / var(--tab-count));
+	.Tab--tab {
+		flex: auto;
+		width: $tab-width;
+	}
+}
+.Tab--tab-scroll,
+.Tab--tab-wrapper {
+	height: 100%;
+}
+.Tab--tab-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+.Tab--tab {
+	height: 100%;
+	padding: UTILS__LOCAL_VAR(tab-padding);
+	flex: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: UTILS__LOCAL_VAR(color);
+	font-size: UTILS__LOCAL_VAR(font-size);
+	font-weight: UTILS__LOCAL_VAR(font-weight);
+	transition: color 0.3s;
+	&:not(:first-child) {
+		margin-left: UTILS__LOCAL_VAR(tab-gaps);
+	}
+}
+.Tab--tab-active {
+	color: UTILS__LOCAL_VAR(active-color);
+}
+.Tab--tab-text {
+	font-size: inherit;
+}
+.Tab--indicator {
+	position: absolute;
+	bottom: 0;
+	height: 10rpx;
+	border-radius: 10rpx;
+	background: UTILS__LOCAL_VAR(indicator-color);
+	transform: translateX(-50%);
+	&:not(.Tab--initialing) {
+		left: var(--indicator-center);
+		width: UTILS__LOCAL_VAR(indicator-width, var(--tab-text-width));
+		transition: left 0.3s, width 0.3s;
+	}
+}
+</style>

package/components/table/table.vue

@@ -0,0 +1,112 @@
+<template>
+	<view :class="componentClassNames">
+		<view :class="[$style['Table--row'], $style['Table--header']]">
+			<view
+				v-for="(h, i) in headers"
+				:key="i"
+				:class="[$style['Table--cell'], $style['Table--cell-align'] + (aligns[i] || 2)]"
+			>
+				<view>{{ h }}</view>
+			</view>
+		</view>
+		<view v-for="(row, i) in value" :key="i" :class="$style['Table--row']">
+			<view
+				v-for="(col, j) in row"
+				:key="j"
+				:class="[$style['Table--cell'], $style['Table--cell-align'] + (aligns[j] || 2)]"
+				:style="i === 0 && j < row.length - 1 ? { width: widths[j] || colWidth } : ''"
+			>
+				<view>{{ col }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { floor2 } from '../../utils/floor';
+
+export default {
+	name: 'AppTable',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		/** 各个列的数据 */
+		value: {
+			type: Array,
+			default: () => [],
+		},
+		/** 定义各个列的表头 */
+		headers: {
+			type: Array,
+			default: () => [],
+		},
+		/** 定义各个列的对齐方式，默认居中对齐，1左对齐，2居中，3右对齐 */
+		aligns: {
+			type: Array,
+			default: () => [],
+		},
+		/** 定义各个列的宽度百分比 */
+		widths: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	computed: {
+		/** 总列数 */
+		colCount() {
+			return this.value[0]?.length || 0;
+		},
+		/** 每列所占宽度百分比 */
+		colWidth() {
+			return floor2(100 / this.colCount) + '%';
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 自定义样式变量前缀，与组件名称一致
+$component-prefix: '#{$ec-component-prefix}-table';
+// 自定义样式变量
+%external-vars {
+	@include define-component-vars($cell-padding: get-value('size-l') get-value('size-xxs'));
+}
+
+.Table {
+	@extend %external-vars;
+	display: table;
+	width: 100%;
+	border: 2rpx solid get-value('color-background');
+	border-radius: get-value('size-radius-s');
+	overflow: hidden;
+}
+.Table--header {
+	color: get-value('color-info-6');
+}
+.Table--row {
+	display: table-row;
+	&:nth-child(odd) {
+		background: get-value('color-background');
+	}
+}
+.Table--cell {
+	display: table-cell;
+	padding: var(--cell-padding);
+	vertical-align: middle;
+}
+.Table--cell-align1 {
+	text-align: start;
+}
+.Table--cell-align2 {
+	text-align: center;
+}
+.Table--cell-align3 {
+	text-align: end;
+}
+</style>