@ecolovo/uniapp-components 1.0.9 → 2.0.0

package/components/picker/picker-popup.vue

@@ -1,5 +1,10 @@
 <template>
-	<popup-cpn ref="popup" :value="value" :class="componentClassNames" @input="$emit('input', $event)">
+	<popup-cpn
+		ref="popupRef"
+		:model-value="modelValue"
+		:class="[...classNames, $style['PickerPopup']]"
+		@update:model-value="emit('update:modelValue', $event)"
+	>
 		<template #content>
 			<popup-content-cpn
 				:loading="isLoading"
@@ -50,10 +55,10 @@
 						:class="$style['PickerPopup--option-single']"
 					/>
 				</view>
-				<view v-if="pager && pager.data.length > 0" :class="$style['PickerPopup--load-more-wrapper']">
+				<view v-if="pagingData && pagingData.data.length > 0" :class="$style['PickerPopup--load-more-wrapper']">
 					<load-more-cpn
-						:loading="pager.loadMoreTime !== 0"
-						:end="!pager.hasMore"
+						:loading="loadingMore"
+						:end="!pagingData.hasMore"
 						end-title="到底了"
 						@load-more="loadMore()"
 					/>
@@ -64,8 +69,10 @@
 	</popup-cpn>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { PagingData } from '@ecolovo/utils/uniapp/paging';
+import useClassNames from '../../composable/component-name';
 import EmptyCpn from '../empty/empty.vue';
 import IconCpn from '../icon/icon.vue';
 import LoadMoreCpn from '../load-more/load-more.vue';
@@ -73,223 +80,225 @@ import PopupCpn from '../popup/popup.vue';
 import PopupContentCpn from '../popup/popup-content.vue';
 import SearchCpn from '../search/search.vue';
 
-export default {
-	name: 'PickerPopup',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { EmptyCpn, IconCpn, LoadMoreCpn, PopupCpn, PopupContentCpn, SearchCpn },
-	mixins: [componentName],
-	props: {
-		/** 是否可见 */
-		value: {
-			type: Boolean,
-			default: false,
-		},
-		/** 标题 */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** 副标题 */
-		subTitle: {
-			type: String,
-			default: '',
-		},
-		/** 是否有筛选框 */
-		searchable: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否多选 */
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		/** 搜索框占位文本 */
-		searchPlaceholder: {
-			type: String,
-			default: '请输入',
-		},
-		/** 选项 */
-		options: {
-			type: Array,
-			default: () => [],
-		},
-		/** 分页 */
-		pager: {
-			type: Object,
-			default: null,
-		},
-		/** 已选选项 */
-		checked: {
-			type: Array,
-			default: () => [],
-		},
-		/** 选项唯一标识 */
-		valueKey: {
-			type: String,
-			default: 'id',
-		},
-		/** 选项标签字段 */
-		labelKey: {
-			type: String,
-			default: 'label',
-		},
-	},
-	data() {
-		return {
-			/** 用于回到顶部 */
-			scrollTopValue: 0,
-			optionList: [],
-			tempCheckedMap: new Map(),
-			tempCheckedCount: 0,
-			filterText: '',
-		};
-	},
-	computed: {
-		filteredList() {
-			const text = this.filterText.trim();
-			return text ? this.optionList.filter((item) => item.option[this.labelKey].includes(text)) : this.optionList;
-		},
-	},
-	watch: {
-		options() {
-			this.setOptionList();
-		},
-	},
-	created() {
-		this.initPopup();
-		this.setOptionList();
-	},
-	methods: {
-		/** 初始化 */
-		initPopup() {
-			this.tempCheckedCount = this.checked.length;
-			this.checked.forEach((option) => {
-				this.tempCheckedMap.set(option[this.valueKey], option);
-			});
-		},
-		/** 格式化选项数据列表 */
-		setOptionList() {
-			this.optionList = this.options.map((option) => {
-				const checked = this.tempCheckedMap.has(option[this.valueKey]);
-				return { option, checked };
-			});
-		},
-		/** 勾选选项 */
-		checkPickerItem(option) {
-			const index = this.optionList.findIndex((item) => item.option[this.valueKey] === option[this.valueKey]);
-			if (index < 0) return;
+});
 
-			if (!this.multiple) {
-				this.tempCheckedMap.clear();
-				this.tempCheckedMap.set(option[this.valueKey], option);
-				this.setOptionList();
-				this.$emit('confirm', option);
-				this.$refs.popup.close();
-				return;
-			}
+const classNames = useClassNames('picker-popup');
 
-			this.optionList[index].checked = !this.optionList[index].checked;
-			if (this.optionList[index].checked) {
-				this.tempCheckedMap.set(option[this.valueKey], option);
-			} else {
-				this.tempCheckedMap.delete(option[this.valueKey]);
-			}
-			this.tempCheckedCount = this.tempCheckedMap.size;
-		},
-		/** 回到顶部 */
-		scrollTop() {
-			this.scrollTopValue = typeof this.scrollTopValue === 'number' ? '0px' : 0;
-		},
-		/** 过滤或搜索 */
-		onFilter(text) {
-			this.scrollTop();
-			if (this.pager) {
-				this.$emit('search', text);
-				return;
-			}
-			this.filterText = text;
-		},
-		/** 加载更多 */
-		loadMore() {
-			if (!this.pager) return;
+type _Option = Record<string, string | number>;
 
-			this.$emit('load-more');
-		},
-		/** 点击确认按钮 */
-		onConfirm() {
-			this.$emit('confirm', this.tempCheckedMap.values().toArray());
-			this.$refs.popup.close();
-		},
-	},
+type _Props = {
+	/** 是否可见 */
+	modelValue?: boolean;
+	/** 标题 */
+	title?: string;
+	/** 副标题 */
+	subTitle?: string;
+	/** 是否有筛选框 */
+	searchable?: boolean;
+	/** 是否多选 */
+	multiple?: boolean;
+	/** 搜索框占位文本 */
+	searchPlaceholder?: string;
+	/** 选项 */
+	options?: _Option[];
+	/** 分页 */
+	pagingData?: PagingData | null;
+	/** 是否正在加载更多 */
+	loadingMore?: boolean;
+	/** 已选选项 */
+	checked?: _Option[];
+	/** 选项唯一标识 */
+	valueKey?: string;
+	/** 选项标签字段 */
+	labelKey?: string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: false,
+	title: '',
+	subTitle: '',
+	searchable: false,
+	multiple: false,
+	searchPlaceholder: '请输入',
+	options: () => [],
+	pagingData: null,
+	checked: () => [],
+	valueKey: 'id',
+	labelKey: 'label',
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: boolean): void;
+	(e: 'confirm', val: _Option | _Option[]): void;
+	(e: 'search', text: string): void;
+	(e: 'load-more'): void;
+}>();
+
+const isLoading = ref(false);
+
+/** 用于回到顶部 */
+const scrollTopValue = ref<string | number>(0);
+
+type _OptionItem = {
+	option: _Option;
+	checked: boolean;
+};
+
+const optionList = ref<_OptionItem[]>([]);
+const tempCheckedMap = ref<Map<unknown, _Option>>(new Map());
+const tempCheckedCount = ref(0);
+const filterText = ref('');
+
+const popupRef = ref<InstanceType<typeof PopupCpn>>();
+
+/** 格式化选项数据列表 */
+const setOptionList = () => {
+	optionList.value = props.options.map((option) => {
+		const checked = tempCheckedMap.value.has(option[props.valueKey]);
+		return { option, checked };
+	});
+};
+
+const filteredList = computed(() => {
+	const text = filterText.value.trim();
+	return text
+		? optionList.value.filter((item) => (item.option[props.labelKey] as string).includes(text))
+		: optionList.value;
+});
+
+// 初始化
+tempCheckedCount.value = props.checked.length;
+props.checked.forEach((option) => {
+	tempCheckedMap.value.set(option[props.valueKey], option);
+});
+setOptionList();
+
+watch(
+	() => props.options,
+	() => {
+		setOptionList();
+	}
+);
+
+/** 勾选选项 */
+const checkPickerItem = (option: _Option) => {
+	const index = optionList.value.findIndex((item) => item.option[props.valueKey] === option[props.valueKey]);
+	if (index < 0) return;
+
+	if (!props.multiple) {
+		tempCheckedMap.value.clear();
+		tempCheckedMap.value.set(option[props.valueKey], option);
+		setOptionList();
+		emit('confirm', option);
+		popupRef.value?.close();
+		return;
+	}
+
+	optionList.value[index]!.checked = !optionList.value[index]!.checked;
+	if (optionList.value[index]!.checked) {
+		tempCheckedMap.value.set(option[props.valueKey], option);
+	} else {
+		tempCheckedMap.value.delete(option[props.valueKey]);
+	}
+	tempCheckedCount.value = tempCheckedMap.value.size;
+};
+
+/** 回到顶部 */
+const scrollTop = () => {
+	scrollTopValue.value = typeof scrollTopValue.value === 'number' ? '0px' : 0;
+};
+
+/** 过滤或搜索 */
+const onFilter = (text: string) => {
+	scrollTop();
+	if (props.pagingData) {
+		emit('search', text);
+		return;
+	}
+	filterText.value = text;
+};
+
+/** 加载更多 */
+const loadMore = () => {
+	if (!props.pagingData) return;
+
+	emit('load-more');
+};
+
+/** 点击确认按钮 */
+const onConfirm = () => {
+	emit('confirm', [...tempCheckedMap.value.values()]);
+	popupRef.value?.close();
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
-:host {
-	display: block;
-}
+.PickerPopup {
+	@extend %external-vars;
 
-.PickerPopup--header {
-	position: relative;
-	box-sizing: border-box;
-	height: UTILS__LOCAL_VAR(header-height);
-	padding: 20rpx 30rpx 0rpx;
-	display: flex;
-	align-items: center;
-}
-.PickerPopup--title {
-	flex: 1;
-	font-size: UTILS__GLOBAL_VAR(font-size, large);
-	font-weight: 600;
-}
-.PickerPopup--sub-title {
-	margin-left: 10rpx;
-	color: UTILS__GLOBAL_VAR(theme, placeholder);
-	font-size: UTILS__GLOBAL_VAR(font-size, normal);
-	font-weight: 400;
-}
-.PickerPopup--search-wrapper {
-	flex: none;
-	height: 88rpx;
-	display: flex;
-	align-items: center;
-	#{UTILS__VAR_NAME(height, search)}: 72rpx;
-}
-.PickerPopup--search {
-	flex: 1;
-}
+	.PickerPopup--header {
+		position: relative;
+		box-sizing: border-box;
+		height: UTILS__LOCAL_VAR(header-height, popup);
+		padding: 20rpx 30rpx 0rpx;
+		display: flex;
+		align-items: center;
+	}
+	.PickerPopup--title {
+		flex: 1;
+		font-size: UTILS__GLOBAL_VAR(font-size, large);
+		font-weight: 600;
+	}
+	.PickerPopup--sub-title {
+		margin-left: 10rpx;
+		color: UTILS__GLOBAL_VAR(color, placeholder);
+		font-size: UTILS__GLOBAL_VAR(font-size, normal);
+		font-weight: 400;
+	}
+	.PickerPopup--search-wrapper {
+		flex: none;
+		height: 88rpx;
+		display: flex;
+		align-items: center;
+		#{UTILS__VAR_NAME(height, search)}: 72rpx;
+	}
+	.PickerPopup--search {
+		flex: 1;
+	}
 
-.PickerPopup--option {
-	display: flex;
-	justify-content: start;
-	align-items: center;
-	padding: 20rpx 0;
-	&.PickerPopup--checked {
-		color: UTILS__GLOBAL_VAR(theme, primary);
+	.PickerPopup--option {
+		display: flex;
+		justify-content: start;
+		align-items: center;
+		padding: 20rpx 0;
+		&.PickerPopup--checked {
+			color: UTILS__GLOBAL_VAR(theme, primary);
+		}
+	}
+	.PickerPopup--option-multi {
+		flex: none;
+		margin-right: 12rpx;
+	}
+	.PickerPopup--option-single {
+		flex: none;
+		margin-left: 12rpx;
+	}
+	.PickerPopup--option-text {
+		@include UTILS__ELLIPSIS();
+	}
+	.PickerPopup--empty {
+		margin: auto auto;
+	}
+	.PickerPopup--load-more-wrapper {
+		position: sticky;
+		top: 100%;
 	}
-}
-.PickerPopup--option-multi {
-	flex: none;
-	margin-right: 12rpx;
-}
-.PickerPopup--option-single {
-	flex: none;
-	margin-left: 12rpx;
-}
-.PickerPopup--option-text {
-	@include UTILS__ELLIPSIS();
-}
-.PickerPopup--empty {
-	margin: auto auto;
-}
-.PickerPopup--load-more-wrapper {
-	position: sticky;
-	top: 100%;
 }
 </style>

package/components/picker/picker.vue

@@ -1,7 +1,7 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['Picker']]">
 		<selector-cpn
-			:value="valueStr"
+			:model-value="valueStr"
 			:readonly="isReadonly"
 			:disabled="disabled"
 			:placeholder="placeholder"
@@ -24,120 +24,115 @@
 	</view>
 </template>
 
-<script>
+<script lang="ts" setup>
 import isEqual from 'lodash-es/isEqual';
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
+import { computed, inject, ref } from 'vue';
+import useClassNames from '../../composable/component-name';
 import SelectorCpn from '../selector/selector.vue';
 import PickerPopupCpn from './picker-popup.vue';
 
-export default {
-	name: 'Picker',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { SelectorCpn, PickerPopupCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [String, Number, Boolean, Object, Array],
-			default: null,
-		},
-		/** 绑定值文本 */
-		valueText: {
-			type: String,
-			default: '',
-		},
-		/** 选项唯一标识 */
-		valueKey: {
-			type: String,
-			default: 'id',
-		},
-		/** 选项标签字段 */
-		labelKey: {
-			type: String,
-			default: 'label',
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 占位文本 */
-		placeholder: {
-			type: String,
-			default: '请选择',
-		},
-		/** 弹出框标题 */
-		popupTitle: {
-			type: String,
-			default: '请选择',
-		},
-		/** 选项 */
-		options: {
-			type: Array,
-			default: () => [],
-		},
-		/** 是否多选 */
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		/** 多选时选项拼接的分隔符 */
-		joinText: {
-			type: String,
-			default: '、',
-		},
-	},
-	data() {
-		return {
-			/** 选择框是否可见 */
-			isPickerVisible: false,
-		};
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		checkedOptions() {
-			if (this.multiple) {
-				return this.options.filter((item) => this.value.includes(item[this.valueKey]));
-			}
-			return this.options.filter((item) => item[this.valueKey] === this.value);
-		},
-		valueStr() {
-			if (this.valueText) return this.valueText;
-			if (this.value === null) return '';
-			return this.checkedOptions.map((item) => item[this.labelKey]).join(this.joinText);
-		},
-	},
-	methods: {
-		showPicker() {
-			if (this.disabled || this.isReadonly) {
-				return;
-			}
+});
 
-			this.isPickerVisible = true;
-			this.$emit('show');
-		},
+const classNames = useClassNames('picker');
 
-		onConfirm(checked) {
-			const checkedValue = this.multiple ? checked.map((item) => item[this.valueKey]) : checked[this.valueKey];
+type _Option = Record<string, string | number>;
+type _Value = string | number | boolean | Record<string, unknown>;
 
-			this.$emit('input', checkedValue);
-			this.$emit('pick', checked);
+type _Props = {
+	/** 绑定值 */
+	modelValue?: _Value | _Value[];
+	/** 绑定值文本 */
+	valueText?: string;
+	/** 选项唯一标识 */
+	valueKey?: string;
+	/** 选项标签字段 */
+	labelKey?: string;
+	/** 是否禁用 */
+	disabled?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 占位文本 */
+	placeholder?: string;
+	/** 弹出框标题 */
+	popupTitle?: string;
+	/** 选项 */
+	options?: _Option[];
+	/** 是否多选 */
+	multiple?: boolean;
+	/** 多选时选项拼接的分隔符 */
+	joinText?: string;
+};
 
-			if (isEqual(checkedValue, this.value)) return;
-			this.$emit('change', checkedValue, checked);
-		},
-	},
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: undefined,
+	valueText: '',
+	valueKey: 'id',
+	labelKey: 'label',
+	disabled: false,
+	readonly: false,
+	placeholder: '请选择',
+	popupTitle: '请选择',
+	options: () => [],
+	multiple: false,
+	joinText: '、',
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: undefined | _Value | _Value[]): void;
+	(e: 'pick', val: _Option | _Option[]): void;
+	(e: 'change', val: unknown, checked: _Option | _Option[]): void;
+	(e: 'show'): void;
+}>();
+
+/** 表单是否只读 */
+const isFormReadonly = inject(
+	'ecolovo/form/readonly',
+	computed(() => false)
+);
+
+/** 选择框是否可见 */
+const isPickerVisible = ref(false);
+
+const isReadonly = computed(() => props.readonly || isFormReadonly.value);
+
+const checkedOptions = computed(() => {
+	if (props.multiple) {
+		return props.options.filter((item) => (props.modelValue as unknown[])?.includes(item[props.valueKey]));
+	}
+	return props.options.filter((item) => item[props.valueKey] === props.modelValue);
+});
+
+const valueStr = computed(() => {
+	if (props.valueText) return props.valueText;
+	if (props.modelValue === null) return '';
+	return checkedOptions.value.map((item) => item[props.labelKey] as string).join(props.joinText);
+});
+
+const showPicker = () => {
+	if (props.disabled || isReadonly.value) {
+		return;
+	}
+
+	isPickerVisible.value = true;
+	emit('show');
+};
+
+const onConfirm = (checked: _Option | _Option[]) => {
+	const checkedVal = checked as _Option;
+	const checkedValue = props.multiple
+		? (checked as _Option[]).map((item) => item[props.valueKey]!)
+		: checkedVal[props.valueKey];
+
+	emit('update:modelValue', checkedValue);
+	emit('pick', checked);
+
+	if (isEqual(checkedValue, props.modelValue)) return;
+	emit('change', checkedValue, checked);
 };
 </script>