@ecolovo/uniapp-components 1.0.10 → 2.0.1

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

@@ -1,5 +1,5 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['DataList']]">
 		<slot></slot>
 
 		<load-more-cpn
@@ -14,98 +14,89 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { getCurrentInstance, onBeforeUnmount, onMounted, useCssModule, watch, WatchHandle } from 'vue';
+import { PagingData } from '@ecolovo/utils/uniapp/paging';
+import useClassNames from '../../composable/component-name';
 import LoadMoreCpn from '../load-more/load-more.vue';
 
-export default {
-	name: 'DataList',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	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();
-		},
-	},
+});
+
+const classNames = useClassNames('data-list');
+const $style = useCssModule();
+
+type _Props = {
+	/** 是否正在加载更多数据 */
+	loadingMore?: boolean;
+	/** 分页大小 */
+	pagingData?: PagingData | null;
+	/** 是否显示加载更多 */
+	showLoadMore?: boolean;
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	loadingMore: false,
+	pagingData: null,
+	showLoadMore: true,
+});
+
+const emit = defineEmits<{
+	(event: 'load-more'): void;
+}>();
+
+let _observer: UniApp.IntersectionObserver | null = null;
+
+const vm = getCurrentInstance();
+
+const startObserver = () => {
+	stopObserver();
+
+	_observer = uni.createIntersectionObserver(vm).relativeToViewport({
+		bottom: 0,
+	});
+	_observer.observe('.' + $style['DataList--observe-view'], (res) => {
+		if (res.intersectionRatio === 0) return;
+		emit('load-more');
+	});
+};
+const stopObserver = () => {
+	_observer?.disconnect();
+};
+
+let _stopHasMoreWatcher: WatchHandle | null = null;
+
+onMounted(() => {
+	_stopHasMoreWatcher = watch(
+		() => props.pagingData?.hasMore,
+		(hasMore) => {
+			if (hasMore) {
+				startObserver();
+			}
+		},
+		{ immediate: true }
+	);
+});
+
+onBeforeUnmount(() => {
+	stopObserver();
+	_stopHasMoreWatcher?.();
+});
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './data-list' as *;
 
 // 定义外部变量
-$component-name: 'data-list';
-$component-vars: $data-list;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($data-list, 'data-list');
 }
 
-:host {
-	position: relative;
-	display: block;
-	width: 100%;
-
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-}
 .DataList {
 	@extend %external-vars;
 	flex: 1;

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

@@ -2,7 +2,7 @@
 	<picker-view
 		immediate-change
 		:value="pickerValue"
-		:class="componentClassNames"
+		:class="[...classNames, $style['DatePickerView']]"
 		@change="handlePickerChange"
 		@pickend="onPickEnd"
 	>
@@ -24,149 +24,150 @@
 	</picker-view>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref } from 'vue';
 import range from 'lodash-es/range';
-import componentName from '../../mixins/componentName';
+import useClassNames from '../../composable/component-name';
 import { formatDate, toDate } from '../../utils/date';
 
-/** 年份选项 */
-const yearOptions = (function () {
-	const arr = [];
+defineOptions({
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+});
+
+const classNames = useClassNames('date-picker-view');
+
+/** 年份选项列表 */
+const yearOptions: number[] = (function () {
+	const arr: number[] = [];
 	for (let i = 1900; i <= 2099; i++) {
 		arr.push(i);
 	}
 	return arr;
 })();
 
+/** 月份选项列表 */
+const monthOptions = range(1, 13);
+
 /** 获取指定日期所在月份的日期选项列表 */
-function getDateOptions(date) {
-	date = new Date(date);
+function getDateOptions(date: Date | number | string) {
+	date = new Date(toDate(date)!);
 	date.setMonth(date.getMonth() + 1, 0);
 	const max = date.getDate();
 	return range(1, max + 1);
 }
 
-export default {
-	name: 'DatePickerView',
-	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);
-			});
-		},
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string | null;
+	/** 最小日期 */
+	min?: string;
+	/** 最大日期 */
+	max?: string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: null,
+	min: '',
+	max: '',
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: string): void;
+	(e: 'change', val: string): void;
+}>();
+
+const innerValue = ref('');
+
+/** 日期选项列表 */
+const dateOptions = ref<number[]>([]);
+
+/** picker-view 绑定值 */
+const pickerValue = ref<number[] | string[]>([0, 0, 0]);
+
+const currentValue = computed({
+	get: () => (props.modelValue === null ? innerValue.value : props.modelValue),
+	set: (val: string) => {
+		emit('update:modelValue', val);
+		innerValue.value = val;
+		emit('change', val);
 	},
+});
+
+onMounted(() => {
+	nextTick(() => {
+		syncPickerValue(currentValue.value || new Date());
+	});
+});
+
+/** 同步 picker-view 选中索引 */
+const syncPickerValue = (date: Date | number | string) => {
+	const [y, m, d] = formatDate(toDate(date)!).split('-');
+	dateOptions.value = getDateOptions(toDate(date)!);
+	const i = yearOptions.indexOf(Number(y));
+	const j = monthOptions.indexOf(Number(m));
+	const k = dateOptions.value.indexOf(Number(d));
+	nextTick(() => {
+		pickerValue.value =
+			typeof pickerValue.value[0] === 'number' ? [i, j, k].map((item) => item.toString()) : [i, j, k];
+	});
+};
+
+/** picker-view 选项值变化处理 */
+const handlePickerChange = (e: Event) => {
+	const newPickerValue = (e as CustomEvent).detail.value as number[];
+	/** 获取变化的列 */
+	const col = pickerValue.value.findIndex((item, index) => Number(item) !== Number(newPickerValue[index]));
+	const year = yearOptions[newPickerValue[0]!]!;
+	const month = monthOptions[newPickerValue[1]!]!;
+	// 如果改变的是年份或月份，需要重新获取日期列表
+	if (col === 0 || col === 1) {
+		dateOptions.value = getDateOptions(toDate(`${year}-${month}-01`)!);
+		newPickerValue[2] = Math.min(
+			newPickerValue[2] === -1 ? dateOptions.value.length - 1 : newPickerValue[2]!,
+			dateOptions.value.length - 1
+		);
+	}
+	const date = dateOptions.value[newPickerValue[2]!];
+
+	pickerValue.value = newPickerValue;
+	const dateValue = new Date(year, month - 1, date);
+	let dateStr = formatDate(dateValue);
+	if (props.min && dateStr < props.min) {
+		let minDate: string;
+
+		if (props.min === 'today') minDate = formatDate(new Date());
+		else if (props.min === 'tomorrow') minDate = formatDate(new Date(Date.now() + 8.64e7));
+		else if (props.min === 'yesterday') minDate = formatDate(new Date(Date.now() - 8.64e7));
+		else minDate = props.min;
+
+		dateStr = minDate;
+	}
+	if (props.max && dateStr > props.max) {
+		let maxDate: string;
+
+		if (props.max === 'today') maxDate = formatDate(new Date());
+		else if (props.max === 'tomorrow') maxDate = formatDate(new Date(Date.now() + 8.64e7));
+		else if (props.max === 'yesterday') maxDate = formatDate(new Date(Date.now() - 8.64e7));
+		else maxDate = props.max;
+
+		dateStr = maxDate;
+	}
+	currentValue.value = dateStr;
+};
+
+/** 滑动结束处理，保持选择器显示值与输入框值一致 */
+const onPickEnd = () => {
+	nextTick(() => {
+		syncPickerValue(currentValue.value);
+	});
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .DatePickerView {
 	margin-top: 24rpx;