@ecolovo/uniapp-components 1.0.9 → 2.0.0

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

@@ -1,7 +1,7 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['DatePicker']]">
 		<selector-cpn
-			:value="showText"
+			:model-value="showText"
 			:readonly="isReadonly"
 			:disabled="disabled"
 			:placeholder="placeholder"
@@ -13,11 +13,11 @@
 		<!-- 选择器弹框 -->
 		<popup-cpn
 			v-if="isShowPopup"
-			ref="popup"
+			ref="popupRef"
 			v-model="isShowPopup"
 			:cancel="false"
 			title="选择日期"
-			@click.native.stop.prevent="doNothing"
+			@click.stop.prevent="doNothing"
 			@confirm="onConfirm"
 		>
 			<view v-if="range" :class="$style['DatePicker--date-selector']">
@@ -52,161 +52,160 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import useClassNames from '../../composable/component-name';
 import { formatDate, toDate } from '../../utils/date';
 import PopupCpn from '../popup/popup.vue';
 import SelectorCpn from '../selector/selector.vue';
 import DatePickerViewCpn from './date-picker-view.vue';
 
-export default {
-	name: 'DatePicker',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { PopupCpn, SelectorCpn, DatePickerViewCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [String, null, Array],
-			default: null,
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 占位文本 */
-		placeholder: {
-			type: String,
-			default: '请选择',
-		},
-		/** 是选择日期范围 */
-		range: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否在选择开始日期时，同步修改结束日期，且保持时间差 */
-		keepDiff: {
-			type: Boolean,
-			default: false,
-		},
-		/** 结束日期是否可以与开始日期相同 */
-		canSame: {
-			type: Boolean,
-			default: true,
-		},
-		/** 在选择的日期后面拼接时间字符串，如果传入的是数组，会分别对应添加到范围日期值后 */
-		timeAppend: {
-			type: [String, Array],
-			default: '',
-		},
-		/** 最小日期 */
-		min: {
-			type: String,
-			default: '',
-		},
-		/** 最大日期 */
-		max: {
-			type: String,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			/** 选择框是否可见 */
-			isShowPopup: false,
-			/** 开始日期 */
-			startStr: '',
-			/** 结束日期 */
-			endStr: '',
-			/** 当前选中的日期类型 */
-			checkedDateType: 'start',
-		};
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		startDate() {
-			return formatDate(toDate(this.range && Array.isArray(this.value) ? this.value[0] : this.value));
-		},
-		endDate() {
-			return formatDate(toDate(this.range && Array.isArray(this.value) ? this.value[1] : ''));
-		},
-		showText() {
-			return this.range && this.startDate && this.endDate
-				? `${this.startDate} 至 ${this.endDate}`
-				: this.startDate;
-		},
-	},
-	methods: {
-		doNothing() {},
-		/** 显示选择器弹出框 */
-		showPicker() {
-			if (this.disabled || this.isReadonly) {
-				return;
-			}
-
-			this.checkedDateType = 'start';
-
-			let [start, end] = [this.startDate, this.endDate];
-			this.startStr = start || formatDate(new Date());
-			this.endStr = end || formatDate(new Date(Date.now() + (this.canSame ? 0 : 8.64e7)));
-
-			this.isShowPopup = true;
-			this.$emit('show');
-		},
-		/** 选中日期类型 */
-		selectDateType(type) {
-			if (this.checkedDateType !== type) this.checkedDateType = type;
-		},
-		onChangeStart(dateStr) {
-			if (!this.range) return;
-
-			const timeDiff = toDate(this.endStr).getTime() - toDate(dateStr).getTime();
-			if (this.endStr <= dateStr || this.keepDiff) {
-				if (this.keepDiff) {
-					this.endStr = formatDate(new Date(toDate(dateStr).getTime() + timeDiff));
-				} else if (!this.canSame) {
-					this.endStr = formatDate(new Date(toDate(dateStr).getTime() + 8.64e7));
-				} else {
-					this.endStr = dateStr;
-				}
-			}
-		},
-		onChangeEnd(dateStr) {
-			if (dateStr <= this.startStr) {
-				if (this.canSame) {
-					this.endStr = this.startStr;
-				} else {
-					this.endStr = formatDate(new Date(toDate(this.startStr).getTime() + 8.64e7));
-				}
-			}
-		},
-		onConfirm() {
-			this.$refs.popup.close();
-			const startAppend = Array.isArray(this.timeAppend) ? this.timeAppend[0] : this.timeAppend;
-			const endAppend = Array.isArray(this.timeAppend) ? this.timeAppend[1] : this.timeAppend;
-			const start = startAppend ? `${this.startStr} ${startAppend}` : this.startStr;
-			const end = endAppend ? `${this.endStr} ${endAppend}` : this.endStr;
-			this.$emit('input', this.range ? [start, end] : start);
-			this.$emit('change', this.range ? [start, end] : start);
-		},
-	},
+});
+
+const classNames = useClassNames('date-picker');
+
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string | null | [string, string];
+	/** 是否禁用 */
+	disabled?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 占位文本 */
+	placeholder?: string;
+	/** 是选择日期范围 */
+	range?: boolean;
+	/** 是否在选择开始日期时，同步修改结束日期，且保持时间差 */
+	keepDiff?: boolean;
+	/** 结束日期是否可以与开始日期相同 */
+	canSame?: boolean;
+	/** 在选择的日期后面拼接时间字符串，如果传入的是数组，会分别对应添加到范围日期值后 */
+	timeAppend?: string | string[];
+	/** 最小日期 */
+	min?: string;
+	/** 最大日期 */
+	max?: string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: null,
+	disabled: false,
+	readonly: false,
+	placeholder: '请选择',
+	range: false,
+	keepDiff: false,
+	canSame: true,
+	timeAppend: '',
+	min: '',
+	max: '',
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: string | null | [string, string]): void;
+	(e: 'change', val: string | null | [string, string]): void;
+	(e: 'show'): void;
+}>();
+
+/** 表单是否只读 */
+const isFormReadonly = inject(
+	'ecolovo/form/readonly',
+	computed(() => false)
+);
+
+/** 选择框是否可见 */
+const isShowPopup = ref(false);
+/** 开始日期 */
+const startStr = ref('');
+/** 结束日期 */
+const endStr = ref('');
+/** 当前选中的日期类型 */
+const checkedDateType = ref<'start' | 'end'>('start');
+
+const popupRef = ref<InstanceType<typeof PopupCpn>>();
+
+const isReadonly = computed(() => props.readonly || isFormReadonly.value);
+
+const startDate = computed(() => {
+	return formatDate(
+		toDate(props.range && Array.isArray(props.modelValue) ? props.modelValue[0] : (props.modelValue as string))
+	);
+});
+
+const endDate = computed(() => {
+	return formatDate(toDate(props.range && Array.isArray(props.modelValue) ? props.modelValue[1] : ''));
+});
+
+const showText = computed(() => {
+	return props.range && startDate.value && endDate.value ? `${startDate.value} 至 ${endDate.value}` : startDate.value;
+});
+
+const doNothing = () => {};
+
+/** 显示选择器弹出框 */
+const showPicker = () => {
+	if (props.disabled || isReadonly.value) {
+		return;
+	}
+
+	checkedDateType.value = 'start';
+
+	const [start, end] = [startDate.value, endDate.value];
+	startStr.value = start || formatDate(new Date());
+	endStr.value = end || formatDate(new Date(Date.now() + (props.canSame ? 0 : 8.64e7)));
+
+	isShowPopup.value = true;
+	emit('show');
+};
+
+/** 选中日期类型 */
+const selectDateType = (type: 'start' | 'end') => {
+	if (checkedDateType.value !== type) checkedDateType.value = type;
+};
+
+const onChangeStart = (dateStr: string) => {
+	if (!props.range) return;
+
+	const timeDiff = toDate(endStr.value)!.getTime() - toDate(dateStr)!.getTime();
+	if (endStr.value <= dateStr || props.keepDiff) {
+		if (props.keepDiff) {
+			endStr.value = formatDate(new Date(toDate(dateStr)!.getTime() + timeDiff));
+		} else if (!props.canSame) {
+			endStr.value = formatDate(new Date(toDate(dateStr)!.getTime() + 8.64e7));
+		} else {
+			endStr.value = dateStr;
+		}
+	}
+};
+
+const onChangeEnd = (dateStr: string) => {
+	if (dateStr <= startStr.value) {
+		if (props.canSame) {
+			endStr.value = startStr.value;
+		} else {
+			endStr.value = formatDate(new Date(toDate(startStr.value)!.getTime() + 8.64e7));
+		}
+	}
+};
+
+const onConfirm = () => {
+	popupRef.value?.close();
+	const startAppend = Array.isArray(props.timeAppend) ? props.timeAppend[0] : props.timeAppend;
+	const endAppend = Array.isArray(props.timeAppend) ? props.timeAppend[1] : props.timeAppend;
+	const start = startAppend ? `${startStr.value} ${startAppend}` : startStr.value;
+	const end = endAppend ? `${endStr.value} ${endAppend}` : endStr.value;
+	const result = props.range ? ([start, end] as [string, string]) : start;
+	emit('update:modelValue', result);
+	emit('change', result);
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .DatePicker {
 	width: 100%;

package/components/dialog/dialog-content.vue

@@ -1,5 +1,5 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['DialogContent']]">
 		<popover-content-cpn position="center" :loading="loading">
 			<!-- 内容上方标题 -->
 			<template #header>
@@ -48,67 +48,59 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../composable/component-name';
 import ButtonCpn from '../button/button.vue';
 import IconCpn from '../icon/icon.vue';
 import PopoverContentCpn from '../popover/popover-content.vue';
 
-export default {
-	name: 'DialogContent',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { ButtonCpn, IconCpn, PopoverContentCpn },
-	mixins: [componentName],
-	props: {
-		/** 是否显示 loading 动画 */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/** 标题 */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** 是否居中标题 */
-		centerTitle: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否显示关闭按钮 */
-		showClose: {
-			type: Boolean,
-			default: false,
-		},
-		/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
-		cancel: {
-			type: [String, Boolean],
-			default: '取消',
-		},
-		/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
-		confirm: {
-			type: [String, Boolean],
-			default: '确认',
-		},
-	},
+});
+
+const classNames = useClassNames('dialog-content');
+
+type _Props = {
+	/** 是否显示 loading 动画 */
+	loading?: boolean;
+	/** 标题 */
+	title?: string;
+	/** 是否居中标题 */
+	centerTitle?: boolean;
+	/** 是否显示关闭按钮 */
+	showClose?: boolean;
+	/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+	cancel?: string | boolean;
+	/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+	confirm?: string | boolean;
 };
+
+withDefaults(defineProps<_Props>(), {
+	loading: false,
+	title: '',
+	centerTitle: false,
+	showClose: false,
+	cancel: '取消',
+	confirm: '确认',
+});
+
+defineEmits<{
+	(e: 'close'): void;
+	(e: 'cancel'): void;
+	(e: 'confirm'): void;
+}>();
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './dialog' as *;
 
 // 定义外部变量
-$component-name: 'dialog';
-$component-vars: $dialog;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
+	@include UTILS__DEFINE_COMPONENT_VARS($dialog, 'dialog');
 }
 
 .DialogContent {

package/components/dialog/dialog.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+// 可配置的变量
+$dialog: () !default;
+$dialog-default: (
+	// 标题栏高度
+	header-height: 100rpx,
+	// 操作栏高度
+	footer-height: 134rpx
+);
+$dialog: map.merge($dialog-default, $dialog);