@ecolovo/uniapp-components 1.0.9 → 2.0.0

package/components/dialog/dialog.vue

@@ -1,12 +1,12 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="classNames">
 		<popover-mask-cpn
-			ref="mask"
-			:value="value"
+			ref="maskRef"
+			:model-value="modelValue"
 			:modal="modal || isLoading"
-			@input="$emit('input', $event)"
-			@close="$emit('close')"
-			@closed="$emit('closed')"
+			@update:model-value="emit('update:modelValue', $event)"
+			@close="emit('close')"
+			@closed="emit('closed')"
 		>
 			<slot name="content">
 				<dialog-content-cpn
@@ -27,148 +27,135 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import useClassNames from '../../composable/component-name';
 import PopoverMaskCpn from '../popover/popover-mask.vue';
 import DialogContentCpn from './dialog-content.vue';
 
-export default {
-	name: 'Dialog',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { PopoverMaskCpn, DialogContentCpn },
-	mixins: [componentName],
-	props: {
-		/** v-model 绑定值，控制对话框是否可见 */
-		value: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否模态框 */
-		modal: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否显示 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: '取消',
-		},
-		/** 点击确认按钮时是否自动关闭对话框 */
-		closeOnCancel: {
-			type: Boolean,
-			default: true,
-		},
-		/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
-		confirm: {
-			type: [String, Boolean],
-			default: '确认',
-		},
-		/** 点击确认按钮时是否自动关闭对话框 */
-		closeOnConfirm: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否异步关闭，使用内部 loading 属性，需手动调用 close 方法关闭 */
-		async: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			isAsyncLoading: false,
-		};
-	},
-	computed: {
-		/** 按钮 loading */
-		isLoading() {
-			return this.loading || this.isAsyncLoading;
-		},
-	},
-	methods: {
-		close() {
-			this.$refs.mask.close();
-		},
-		/** 隐藏 */
-		onClose() {
-			if (this.isLoading) return;
-
-			this.close();
-		},
-		onCancel() {
-			this.onButton('cancel', this.closeOnCancel);
-		},
-		onConfirm() {
-			this.onButton('confirm', this.closeOnConfirm);
-		},
-		/** 点击取消或确认按钮
-		 * @param {'cancel' | 'confirm'} btnType 按钮类型
-		 * @param {boolean} shouldClose 是否自动关闭对话框
-		 */
-		onButton(btnType, shouldClose) {
-			if (this.isLoading) return;
-
-			if (btnType === 'confirm' && this.async) {
-				this.isAsyncLoading = true;
-				const { promise, resolve, reject } = Promise.withResolvers();
-				promise
-					.then((willClose = true) => {
-						if (willClose === false) {
-							this.isAsyncLoading = false;
-							return;
-						}
-						this.close();
-					})
-					.catch((err) => {
-						if (process.env.NODE_ENV === 'development') {
-							// eslint-disable-next-line no-console
-							console.warn(`${this.componentClass} unresolved error:`, err);
-						}
-						this.isAsyncLoading = false;
-					});
-				this.$emit(btnType, { resolve, reject });
-				return;
-			}
-
-			if (shouldClose) {
-				this.$emit(btnType);
-				this.close();
-				return;
-			}
-
-			this.$emit(btnType, this.$refs.mask.close.bind(this.$refs.mask));
-		},
-	},
+});
+
+const classNames = useClassNames('dialog');
+
+type _Props = {
+	/** v-model 绑定值，控制对话框是否可见 */
+	modelValue?: boolean;
+	/** 是否模态框 */
+	modal?: boolean;
+	/** 是否显示 loading 动画 */
+	loading?: boolean;
+	/** 标题 */
+	title?: string;
+	/** 是否居中标题 */
+	centerTitle?: boolean;
+	/** 是否显示关闭按钮 */
+	showClose?: boolean;
+	/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+	cancel?: string | boolean;
+	/** 点击取消按钮时是否自动关闭对话框 */
+	closeOnCancel?: boolean;
+	/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+	confirm?: string | boolean;
+	/** 点击确认按钮时是否自动关闭对话框 */
+	closeOnConfirm?: boolean;
+	/** 是否异步关闭，使用内部 loading 属性，需手动调用 close 方法关闭 */
+	async?: boolean;
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: false,
+	modal: false,
+	loading: false,
+	title: '',
+	centerTitle: false,
+	showClose: false,
+	cancel: '取消',
+	closeOnCancel: true,
+	confirm: '确认',
+	closeOnConfirm: true,
+	async: false,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: boolean): void;
+	(e: 'close'): void;
+	(e: 'closed'): void;
+	(e: 'cancel', closeFn?: VoidFunction): void;
+	(e: 'confirm', payload?: Omit<PromiseWithResolvers<unknown>, 'promise'> | VoidFunction): void;
+}>();
+
+const isAsyncLoading = ref(false);
+const maskRef = ref<InstanceType<typeof PopoverMaskCpn>>();
+
+/** 按钮 loading */
+const isLoading = computed(() => props.loading || isAsyncLoading.value);
+
+const close = () => {
+	maskRef.value?.close();
+};
+
+/** 隐藏 */
+const onClose = () => {
+	if (isLoading.value) return;
+	close();
+};
+
+const onCancel = () => {
+	onButton('cancel', props.closeOnCancel);
+};
+
+const onConfirm = () => {
+	onButton('confirm', props.closeOnConfirm);
+};
+
+/** 点击取消或确认按钮
+ * @param {'cancel' | 'confirm'} btnType 按钮类型
+ * @param {boolean} shouldClose 是否自动关闭对话框
+ */
+const onButton = (btnType: 'cancel' | 'confirm', shouldClose: boolean) => {
+	if (isLoading.value) return;
+
+	if (btnType === 'confirm' && props.async) {
+		isAsyncLoading.value = true;
+		const { promise, resolve, reject } = Promise.withResolvers();
+		promise
+			.then((willClose = true) => {
+				if (willClose === false) {
+					isAsyncLoading.value = false;
+					return;
+				}
+				close();
+			})
+			.catch((err) => {
+				if (import.meta.env.DEV) {
+					// eslint-disable-next-line no-console
+					console.warn(`${classNames[0]} unresolved error:`, err);
+				}
+				isAsyncLoading.value = false;
+			});
+		emit(btnType, { resolve, reject });
+		return;
+	}
+
+	if (shouldClose) {
+		// @ts-expect-error 这里语法是正确的
+		emit(btnType);
+		close();
+		return;
+	}
+
+	// @ts-expect-error 这里语法是正确的
+	emit(btnType, maskRef.value?.close.bind(maskRef.value));
+};
+
+defineExpose({ close });
 </script>
 
 <style lang="scss" module>
 @use '../../styles/index' as *;
-
-:host {
-	display: block;
-}
 </style>

package/components/dropdown/dropdown.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+$dropdown: () !default;
+$dropdown-default: (
+	input-background: #fff,
+	dropdown-background: #fff,
+	input-radius: 12rpx,
+	dropdown-item-height: 64rpx,
+	font-size: 28rpx,
+);
+$dropdown: map.merge($dropdown-default, $dropdown);

package/components/dropdown/dropdown.vue

@@ -1,12 +1,12 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['Dropdown']]">
 		<view
 			:class="[
 				$style['Dropdown--input'],
 				{ [$style['Dropdown--placeholder']]: !hasValue, [$style['Dropdown--multiple']]: hasValue },
 			]"
 		>
-			<view class="ellipsis" :class="{ 'flex-1': align !== 'center' }">
+			<view :class="['ellipsis', { 'flex-1': align !== 'center' }]">
 				{{ showValue }}
 			</view>
 			<icon-cpn icon="triangle-down" :class="$style['Dropdown--icon']"></icon-cpn>
@@ -14,132 +14,90 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import IconCpn from '../../icon/icon.vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import useClassNames from '../../composable/component-name';
+import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'Dropdown',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName],
-	props: {
-		/** 当前选择的值 */
-		value: {
-			type: [String, Number, Array, Object],
-			default: null,
-		},
-		/** 未选中时的提示语 */
-		placeholder: {
-			type: String,
-			default: '',
-		},
-		/** 文本对齐方式 */
-		align: {
-			type: String,
-			default: '',
-		},
-		/** 是否多选 */
-		multiple: {
-			type: Boolean,
-			default: true,
-		},
-		/** 展示值格式化函数 */
-		formatter: {
-			type: Function,
-			default: null,
-		},
-	},
-	computed: {
-		/** 是否选择了值 */
-		hasValue() {
-			return this.value !== null && (!Array.isArray(this.value) || this.value.length > 0);
-		},
-		/** 展示值 */
-		showValue() {
-			if (!this.hasValue) {
-				return this.placeholder;
-			}
-			return this.formatter
-				? this.formatter(this.value)
-				: this.multiple && this.value.length > 1
-				? `+${this.value.length}`
-				: this.value;
-		},
-	},
+});
+
+const classNames = useClassNames('dropdown');
+
+type _Props = {
+	/** 当前选择的值 */
+	modelValue?: string | number | unknown[] | Record<string, unknown> | null;
+	/** 未选中时的提示语 */
+	placeholder?: string;
+	/** 文本对齐方式 */
+	align?: string;
+	/** 是否多选 */
+	multiple?: boolean;
+	/** 展示值格式化函数 */
+	formatter?: ((val: unknown) => string) | null;
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: null,
+	placeholder: '',
+	align: '',
+	multiple: true,
+	formatter: null,
+});
+
+/** 是否选择了值 */
+const hasValue = computed(() => {
+	return props.modelValue !== null && (!Array.isArray(props.modelValue) || props.modelValue.length > 0);
+});
+
+/** 展示值 */
+const showValue = computed(() => {
+	if (!hasValue.value) return props.placeholder;
+	return props.formatter
+		? props.formatter(props.modelValue)
+		: props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 1
+		? `+${props.modelValue.length}`
+		: props.modelValue;
+});
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './dropdown' as *;
 
-// 自定义样式变量前缀，与组件名称一致
-$component-prefix: '#{$ec-component-prefix}-dropdown';
-// 自定义样式变量
 %external-vars {
-	@include define-component-vars(
-		$input-background: get-value('color-white'),
-		$dropdown-background: get-value('color-white'),
-		$input-radius: get-value('size-radius-xs'),
-		$dropdown-item-height: 64rpx
-	);
+	@include UTILS__DEFINE_COMPONENT_VARS($dropdown, 'dropdown');
 }
 
 .Dropdown {
 	@extend %external-vars;
 	position: relative;
 	height: 100%;
-	font-size: get-value('size-font-s');
-}
-.Dropdown--modal {
-	position: fixed;
-	@include absolute-size();
-	background-color: #000000;
-	opacity: 0;
-	scale: 0;
-	transition: opacity 0.3s;
-	z-index: UTILS__z-index();
-	.Dropdown--visible & {
-		opacity: 0.5;
-		scale: 1;
-	}
+	font-size: UTILS__LOCAL_VAR(font-size);
 }
 .Dropdown--input {
 	position: relative;
 	height: 100%;
-	padding: 0 get-value('size-m');
+	padding: 0 30rpx;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background: var(--input-background);
-	border-radius: var(--input-radius);
-	.Dropdown--visible & {
-		z-index: UTILS__z-index() + 1;
-	}
+	background: UTILS__LOCAL_VAR(input-background);
+	border-radius: UTILS__LOCAL_VAR(input-radius);
 }
 .Dropdown--placeholder {
 	color: UTILS__GLOBAL_VAR(color, placeholder);
 }
 .Dropdown--multiple {
-	color: get-value('color-primary');
+	color: UTILS__GLOBAL_VAR(theme, primary);
 }
 .Dropdown--icon {
 	flex: none;
-	font-size: get-value('size-font-xxs');
-	margin-left: get-value('size-xxs');
-}
-.Dropdown--dropdown {
-	position: absolute;
-	top: calc(100% + #{get-value('size-xxs')});
-	left: 0;
-	width: 100%;
-	min-height: var(--dropdown-item-height);
-	max-height: calc(var(--dropdown-item-height) * 6);
-	background: var(--dropdown-background);
-	border-radius: get-value('size-radius-xs');
-	z-index: UTILS__z-index() + 1;
+	font-size: 24rpx;
+	margin-left: 12rpx;
 }
 </style>

package/components/empty/empty.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$empty: () !default;
+$empty-default: (
+	image-size: 300rpx,
+	image-width: UTILS__LOCAL_VAR(image-size),
+	image-height: UTILS__LOCAL_VAR(image-size),
+	space: 20rpx,
+	color: #ccc,
+	font-size: UTILS__GLOBAL_VAR(font-size, normal),
+);
+$empty: map.merge($empty-default, $empty);

package/components/empty/empty.vue

@@ -1,5 +1,5 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['Empty']]">
 		<template v-if="loading">
 			<image v-if="loadingImage" :src="loadingImage" :class="$style['Empty--image']" />
 			<view v-else :class="$style['Empty--loading-icon-wrapper']">
@@ -11,7 +11,7 @@
 		</template>
 		<template v-else>
 			<image v-if="image" :src="image" :class="$style['Empty--image']" />
-			<image v-else :src="require('../../resources/image/empty.svg')" :class="$style['Empty--image']" />
+			<image v-else :src="emptyImage" :class="$style['Empty--image']" />
 			<view :class="$style['Empty--text']">
 				<slot>{{ text }}</slot>
 			</view>
@@ -19,56 +19,49 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
+import emptyImage from '../../resources/image/empty.svg';
 
-export default {
-	name: 'Empty',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName],
-	props: {
-		/** 图片 */
-		image: {
-			type: String,
-			default: '',
-		},
-		/** 文本 */
-		text: {
-			type: String,
-			default: '暂无数据',
-		},
-		/** 数据加载中 */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/** 数据加载中显示图片 */
-		loadingImage: {
-			type: String,
-			default: '',
-		},
-		/** 文本 */
-		loadingText: {
-			type: String,
-			default: '数据加载中',
-		},
-	},
+});
+
+const classNames = useClassNames('empty');
+
+type _Props = {
+	/** 图片 */
+	image?: string;
+	/** 文本 */
+	text?: string;
+	/** 数据加载中 */
+	loading?: boolean;
+	/** 数据加载中显示图片 */
+	loadingImage?: string;
+	/** 加载中文本 */
+	loadingText?: string;
 };
+
+withDefaults(defineProps<_Props>(), {
+	image: '',
+	text: '暂无数据',
+	loading: false,
+	loadingImage: '',
+	loadingText: '数据加载中',
+});
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './empty' as *;
 
 // 定义外部变量
-$component-name: 'empty';
-$component-vars: $empty;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($empty, 'empty');
 }
 
 .Empty {
@@ -91,12 +84,20 @@ $component-vars: $empty;
 	width: 100rpx;
 	height: 100rpx;
 	transform-origin: center center;
-	animation: circle 1.5s infinite linear;
+	animation: Empty--circle 1.5s infinite linear;
 }
 .Empty--loading-icon {
 	position: absolute;
 	font-size: 60rpx;
 	color: UTILS__LOCAL_VAR(color);
-	animation: circle 1.5s linear infinite reverse;
+	animation: Empty--circle 1.5s linear infinite reverse;
+}
+@keyframes Empty--circle {
+	0% {
+		rotate: 0deg;
+	}
+	100% {
+		rotate: 360deg;
+	}
 }
 </style>