@ecolovo/uniapp-components 1.0.0

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

@@ -0,0 +1,101 @@
+<template>
+	<view :class="componentClassNames">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+
+export default {
+	name: 'AppCheckboxGroup',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	provide() {
+		return {
+			checkboxGroupCheck: this.check,
+			checkboxGroupProps: this.$props,
+			checkboxGroupData: this.$data,
+		};
+	},
+	props: {
+		/** 值 */
+		value: {
+			type: [Number, String, Boolean, Array, null],
+			default: null,
+		},
+		/** 类型 */
+		radio: {
+			type: Boolean,
+			default: false,
+		},
+		/** 选中时的图标 */
+		checkedIcon: {
+			type: String,
+			default: '',
+		},
+		/** 未选中时的图标 */
+		uncheckedIcon: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			checkedValue: null,
+		};
+	},
+	computed: {
+		currentValue: {
+			get: function () {
+				return this.value === null ? this.checkedValue : this.value;
+			},
+			set: function (value) {
+				this.$emit('input', value);
+				this.checkedValue = value;
+				this.$emit('change', this.checkedValue);
+			},
+		},
+	},
+	watch: {
+		value: {
+			handler: function (value) {
+				this.checkedValue = value;
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		check(value) {
+			if (this.radio) {
+				this.currentValue = value;
+				return;
+			}
+
+			if (!Array.isArray(this.currentValue)) {
+				this.currentValue = [value];
+				return;
+			}
+
+			if (this.currentValue.includes(value)) {
+				this.currentValue = this.currentValue.filter((item) => item !== value);
+			} else {
+				this.currentValue.push(value);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.CheckboxGroup {
+	flex: 1;
+	display: flex;
+	flex-wrap: wrap;
+}
+</style>

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

@@ -0,0 +1,138 @@
+<template>
+	<view :class="componentClassNames">
+		<checkbox-cpn
+			v-for="(item, index) in options"
+			:key="index"
+			:value="radio ? item.value === currentValue : currentValue && currentValue.includes(item.value)"
+			:checked-icon="checkedIcon || (radio ? 'radio-checked' : 'checkbox-checked')"
+			:unchecked-icon="uncheckedIcon || (radio ? 'radio-unchecked' : 'checkbox-unchecked')"
+			:class="$style['CheckboxGroup2--item']"
+			@change="check(item.value)"
+		>
+			{{ item.label }}
+		</checkbox-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import CheckboxCpn from './checkbox.vue';
+
+export default {
+	name: 'AppCheckboxGroup2',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { CheckboxCpn },
+	mixins: [componentName],
+	props: {
+		/** 值 */
+		value: {
+			type: [Number, String, Boolean, Array, null],
+			default: null,
+		},
+		/** 类型 */
+		options: {
+			type: Array,
+			default: () => [],
+		},
+		/** 类型 */
+		radio: {
+			type: Boolean,
+			default: true,
+		},
+		/** 选中时的图标 */
+		checkedIcon: {
+			type: String,
+			default: '',
+		},
+		/** 未选中时的图标 */
+		uncheckedIcon: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			checkedValue: null,
+		};
+	},
+	computed: {
+		currentValue: {
+			get() {
+				return this.value === null ? this.checkedValue : this.value;
+			},
+			set(value) {
+				this.$emit('input', value);
+				this.checkedValue = value;
+				this.$emit('change', this.checkedValue);
+			},
+		},
+		optionsValue() {
+			return this.options.map((item) => item.value);
+		},
+	},
+	methods: {
+		check(value) {
+			if (this.radio) {
+				this.currentValue = value;
+				return;
+			}
+
+			if (!Array.isArray(this.currentValue)) {
+				this.currentValue = [value];
+				return;
+			}
+
+			if (this.currentValue.includes(value)) {
+				this.currentValue = this.currentValue.filter((item) => item !== value);
+			} else {
+				this.currentValue.push(value);
+			}
+		},
+		/** 切换全选
+		 * @param {boolean | Array} isSelectedAll
+		 */
+		toggle(isSelectedAll) {
+			if (this.radio) return;
+
+			if (typeof isSelectedAll === 'boolean') {
+				if (isSelectedAll) {
+					this.currentValue = this.optionsValue;
+				} else {
+					this.currentValue = [];
+				}
+				return;
+			}
+
+			if (Array.isArray(isSelectedAll)) {
+				this.currentValue = isSelectedAll.filter((item) => this.optionsValue.includes(item));
+				return;
+			}
+
+			if (Array.isArray(this.currentValue) && this.currentValue.length === this.options.length) {
+				this.currentValue = [];
+			} else {
+				this.currentValue = this.optionsValue;
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.CheckboxGroup2 {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 20rpx;
+
+	.CheckboxGroup2--item {
+		height: 50rpx;
+		width: calc((100% + 20rpx) / 3 - 20rpx);
+		flex: none;
+	}
+}
+</style>

package/components/checkbox-group2/checkbox.vue

@@ -0,0 +1,103 @@
+<template>
+	<view :class="componentClassNames" @click="toggle()">
+		<icon-cpn
+			:icon="currentValue ? checkedIcon || 'checkbox-checked' : uncheckedIcon || 'checkbox-unchecked'"
+			tap-size="50rpx"
+			:class="[$style['Checkbox2--icon'], { [$style['Checkbox2--checked']]: currentValue }]"
+		/>
+		<view :class="$style['Checkbox2--text']">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppCheckbox2',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName],
+	props: {
+		/** 值 */
+		value: {
+			type: [Boolean, null],
+			default: null,
+		},
+		/** 选中时的图标 */
+		checkedIcon: {
+			type: String,
+			default: '',
+		},
+		/** 未选中时的图标 */
+		uncheckedIcon: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			innerValue: false,
+		};
+	},
+	computed: {
+		currentValue: {
+			get: function () {
+				return this.value === null ? this.innerValue : this.value;
+			},
+			set: function (value) {
+				this.$emit('input', value);
+				this.innerValue = value;
+				this.$emit('change', this.innerValue);
+			},
+		},
+	},
+	methods: {
+		/** 切换选择 */
+		toggle(isSelected) {
+			if (isSelected === undefined || isSelected === null) {
+				this.currentValue = !this.currentValue;
+				return;
+			}
+
+			if (this.currentValue !== !!isSelected) {
+				this.currentValue = !!isSelected;
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'checkbox';
+$component-vars: $checkbox;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.Checkbox2 {
+	@extend %external-vars;
+	display: flex;
+	align-items: center;
+
+	.Checkbox2--icon {
+		flex: none;
+		color: UTILS__LOCAL_VAR(unchecked-color);
+	}
+	.Checkbox2--checked {
+		color: UTILS__LOCAL_VAR(checked-color);
+	}
+	.Checkbox2--text {
+		flex: 0 1 auto;
+		margin-left: 12rpx;
+	}
+}
+</style>

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

@@ -0,0 +1,130 @@
+<template>
+	<view :class="componentClassNames">
+		<slot></slot>
+
+		<load-more-cpn
+			v-if="showLoadMore && pagingData && pagingData.totalCount"
+			:loading="loadingMore"
+			:end="!pagingData.hasMore"
+			:class="$style['DataList--load-more']"
+			@load-more="$emit('load-more')"
+		/>
+
+		<view v-if="pagingData && pagingData.hasMore" :class="$style['DataList--observe-view']"></view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import LoadMoreCpn from '../load-more/load-more.vue';
+
+export default {
+	name: 'AppDataList',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { LoadMoreCpn },
+	mixins: [componentName],
+	props: {
+		/** 是否正在加载更多数据 */
+		loadingMore: {
+			type: Boolean,
+			default: false,
+		},
+		/** 分页大小 */
+		pagingData: {
+			type: Object,
+			default: null,
+		},
+		/** 是否显示加载更多 */
+		showLoadMore: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	mounted() {
+		// 使用以下方式可持续自动触发加载更多
+		// this._stopHasMoreWatcher = this.$watch(
+		// 	'pagingData',
+		// 	() => {
+		// 		this.startObserver();
+		// 	},
+		// 	{ immediate: true, deep: true }
+		// );
+		this._stopHasMoreWatcher = this.$watch(
+			'pagingData.hasMore',
+			(hasMore) => {
+				if (hasMore) {
+					this.startObserver();
+				}
+			},
+			{ immediate: true }
+		);
+	},
+	beforeDestroy() {
+		this.stopObserver();
+		this._stopHasMoreWatcher?.();
+	},
+	methods: {
+		startObserver() {
+			this.stopObserver();
+
+			this._observer = uni
+				.createIntersectionObserver(this, { nativeMode: true })
+				.relativeToViewport({
+					bottom: 0,
+				})
+				.observe('.' + this.$style['DataList--observe-view'], (res) => {
+					if (res.intersectionRatio === 0) return;
+					this.$emit('load-more');
+				});
+		},
+		stopObserver() {
+			this._observer?.disconnect();
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'data-list';
+$component-vars: $data-list;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	position: relative;
+	display: block;
+	width: 100%;
+
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+.DataList {
+	@extend %external-vars;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	min-height: 100%;
+}
+.DataList--load-more {
+	position: sticky;
+	top: 100%;
+}
+.DataList--observe-view {
+	position: absolute;
+	z-index: -1;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: UTILS__LOCAL_VAR(observer-height);
+	pointer-events: none;
+}
+</style>

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

@@ -0,0 +1,181 @@
+<template>
+	<picker-view
+		immediate-change
+		:value="pickerValue"
+		:class="componentClassNames"
+		@change="handlePickerChange"
+		@pickend="onPickEnd"
+	>
+		<picker-view-column>
+			<view v-for="item in yearOptions" :key="item" :class="$style['DatePickerView--option']">
+				{{ item }} 年
+			</view>
+		</picker-view-column>
+		<picker-view-column>
+			<view v-for="item in monthOptions" :key="item" :class="$style['DatePickerView--option']">
+				{{ item }} 月
+			</view>
+		</picker-view-column>
+		<picker-view-column>
+			<view v-for="item in dateOptions" :key="item" :class="$style['DatePickerView--option']">
+				{{ item }} 日
+			</view>
+		</picker-view-column>
+	</picker-view>
+</template>
+
+<script>
+import range from 'lodash-es/range';
+import componentName from '../../mixins/componentName';
+import { formatDate, toDate } from '../../utils/date';
+
+/** 年份选项 */
+const yearOptions = (function () {
+	const arr = [];
+	for (let i = 1900; i <= 2099; i++) {
+		arr.push(i);
+	}
+	return arr;
+})();
+
+/** 获取指定日期所在月份的日期选项列表 */
+function getDateOptions(date) {
+	date = new Date(date);
+	date.setMonth(date.getMonth() + 1, 0);
+	const max = date.getDate();
+	return range(1, max + 1);
+}
+
+export default {
+	name: 'AppDatePickerView',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [String, null],
+			default: null,
+		},
+		/** 最小日期 */
+		min: {
+			type: String,
+			default: '',
+		},
+		/** 最大日期 */
+		max: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			innerValue: '',
+			/** 年份选项列表 */
+			yearOptions: yearOptions,
+			/** 月份选项列表 */
+			monthOptions: range(1, 13),
+			/** 日期选项列表 */
+			dateOptions: [],
+			/** picker-view 绑定值 */
+			pickerValue: [0, 0, 0],
+		};
+	},
+	computed: {
+		currentValue: {
+			get: function () {
+				return this.value === null ? this.innerValue : this.value;
+			},
+			set: function (value) {
+				this.$emit('input', value);
+				this.innerValue = value;
+				this.$emit('change', value);
+			},
+		},
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.syncPickerValue(this.currentValue || new Date());
+		});
+	},
+	methods: {
+		/** 同步 picker-view 选中索引 */
+		syncPickerValue(date) {
+			const [y, m, d] = formatDate(toDate(date)).split('-');
+			this.dateOptions = getDateOptions(toDate(date));
+			const i = this.yearOptions.indexOf(Number(y));
+			const j = this.monthOptions.indexOf(Number(m));
+			const k = this.dateOptions.indexOf(Number(d));
+			this.$nextTick(() => {
+				this.pickerValue =
+					typeof this.pickerValue[0] === 'number' ? [i, j, k].map((item) => item.toString()) : [i, j, k];
+			});
+		},
+		/** picker-view 选项值变化处理 */
+		handlePickerChange(e) {
+			const newPickerValue = e.detail.value;
+			/** 获取变化的列 */
+			const col = this.pickerValue.findIndex((item, index) => Number(item) !== Number(newPickerValue[index]));
+			const year = this.yearOptions[newPickerValue[0]];
+			const month = this.monthOptions[newPickerValue[1]];
+			// 如果改变的是年份或月份，需要重新获取日期列表
+			if (col === 0 || col === 1) {
+				this.dateOptions = getDateOptions(toDate(`${year}-${month}-01`));
+				newPickerValue[2] = Math.min(
+					newPickerValue[2] === -1 ? this.dateOptions.length - 1 : newPickerValue[2],
+					this.dateOptions.length - 1
+				);
+			}
+			const date = this.dateOptions[newPickerValue[2]];
+
+			this.pickerValue = newPickerValue;
+			const dateValue = new Date(year, month - 1, date);
+			let dateStr = formatDate(dateValue);
+			if (this.min && dateStr < this.min) {
+				let minDate;
+
+				if (this.min === 'today') minDate = formatDate(new Date());
+				else if (this.min === 'tomorrow') minDate = formatDate(new Date(Date.now() + 8.64e7));
+				else if (this.min === 'yesterday') minDate = formatDate(new Date(Date.now() - 8.64e7));
+				else minDate = this.min;
+
+				dateStr = minDate;
+			}
+			if (this.max && dateStr > this.max) {
+				let maxDate;
+
+				if (this.max === 'today') maxDate = formatDate(new Date());
+				else if (this.max === 'tomorrow') maxDate = formatDate(new Date(Date.now() + 8.64e7));
+				else if (this.max === 'yesterday') maxDate = formatDate(new Date(Date.now() - 8.64e7));
+				else maxDate = this.max;
+
+				dateStr = maxDate;
+			}
+			this.currentValue = dateStr;
+		},
+		/** 滑动结束处理，保持选择器显示值与输入框值一致 */
+		onPickEnd() {
+			this.$nextTick(() => {
+				this.syncPickerValue(this.currentValue);
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.DatePickerView {
+	margin-top: 24rpx;
+	height: 300rpx;
+}
+.DatePickerView--option {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+}
+</style>