@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/popup/popup.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">
 				<popup-content-cpn
@@ -27,142 +27,127 @@
 	</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 PopupContentCpn from './popup-content.vue';
 
-export default {
-	name: 'Popup',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { PopoverMaskCpn, PopupContentCpn },
-	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: true,
-		},
-		/** 取消按钮文本，为 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();
-		},
-		/** 点击取消或确认按钮
-		 * @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('popup');
+
+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: true,
+	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();
+};
+
+/** 点击取消或确认按钮
+ * @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/price/price.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$price: () !default;
+$price-default: (
+	color: inherit,
+	font-size: inherit,
+	font-weight: inherit,
+	integer-color: UTILS__LOCAL_VAR(color),
+	integer-font-size: UTILS__LOCAL_VAR(font-size),
+	integer-font-weight: UTILS__LOCAL_VAR(font-weight),
+	decimal-color: UTILS__LOCAL_VAR(color),
+	decimal-font-size: UTILS__LOCAL_VAR(font-size),
+	decimal-font-weight: UTILS__LOCAL_VAR(font-weight),
+	unit-color: UTILS__LOCAL_VAR(color),
+	unit-font-size: UTILS__LOCAL_VAR(font-size),
+	unit-font-weight: UTILS__LOCAL_VAR(font-weight),
+);
+$price: map.merge($price-default, $price);

package/components/price/price.vue

@@ -1,5 +1,5 @@
 <template>
-	<text :class="componentClassNames">
+	<text :class="[...classNames, $style['Price']]">
 		<text v-if="prefixUnit" :class="$style['Price--unit']">
 			<!-- 默认插槽用于放置单位 -->
 			<slot>
@@ -20,60 +20,49 @@
 	</text>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import useClassNames from '../../composable/component-name';
 import { formatPrice } from '../../utils/price';
 
-export default {
-	name: 'Price',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	mixins: [componentName],
-	props: {
-		/** 价格 */
-		value: {
-			type: [Number, String],
-			default: 0,
-		},
-		/** 前置单位 */
-		prefixUnit: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否一直显示符号 */
-		showSymbol: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否始终显示小数 */
-		alwaysShowDecimal: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	computed: {
-		/** 格式化后的价格 */
-		formattedPrice() {
-			return formatPrice(this.value);
-		},
-	},
+});
+
+const classNames = useClassNames('price');
+
+type _Props = {
+	/** 价格 */
+	value?: number | string;
+	/** 前置单位 */
+	prefixUnit?: boolean;
+	/** 是否一直显示符号 */
+	showSymbol?: boolean;
+	/** 是否始终显示小数 */
+	alwaysShowDecimal?: boolean;
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	value: 0,
+	prefixUnit: false,
+	showSymbol: false,
+	alwaysShowDecimal: true,
+});
+
+/** 格式化后的价格 */
+const formattedPrice = computed(() => formatPrice(props.value));
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './price' as *;
 
 // 定义外部变量
-$component-name: 'price';
-$component-vars: $price;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: inline;
+	@include UTILS__DEFINE_COMPONENT_VARS($price, 'price');
 }
 
 .Price {

package/components/search/search.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$search: () !default;
+$search-default: (
+	background: UTILS__GLOBAL_VAR(color, background),
+	border-radius: 8rpx,
+	height: 64rpx,
+	padding: 0 20rpx,
+);
+$search: map.merge($search-default, $search);

package/components/search/search.vue

@@ -1,12 +1,13 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['Search']]">
 		<view :class="$style['Search--wrapper']">
 			<icon-cpn icon="search" :class="[$style['Search--icon'], $style['Search--prefix-icon']]"> </icon-cpn>
 			<view
 				v-if="readonly"
 				:class="[
 					$style['Search--text'],
-					{ [$style['Search--ellipsis']]: ellipsis, [$style['Search--placeholder']]: !searchValue },
+					$style['Search--ellipsis'],
+					{ [$style['Search--placeholder']]: !searchValue },
 				]"
 			>
 				{{ searchValue || placeholder }}
@@ -26,7 +27,7 @@
 				v-if="clearable && searchValue"
 				icon="close-circle-filled"
 				:class="[$style['Search--icon'], $style['Search--close-icon']]"
-				@click.native="onClear"
+				@click="onClear"
 			>
 			</icon-cpn>
 		</view>
@@ -42,126 +43,110 @@
 	</view>
 </template>
 
-<script>
-import debounce from 'lodash-es/debounce';
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import debounceFn from 'lodash-es/debounce';
+import useClassNames from '../../composable/component-name';
 import ButtonCpn from '../button/button.vue';
 import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'Search',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { ButtonCpn, IconCpn },
-	mixins: [componentName],
-	props: {
-		/** 搜索文本 */
-		value: {
-			type: [String, null],
-			default: '',
-		},
-		/** 最大输入文本长度 */
-		maxlength: {
-			type: Number,
-			default: 140,
-		},
-		/** 占位文本 */
-		placeholder: {
-			type: String,
-			default: '请输入搜索内容',
-		},
-		/** 防抖时长 */
-		debounce: {
-			type: Number,
-			default: 300,
-		},
-		/** 是否有清空按钮 */
-		clearable: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否显示搜索按钮 */
-		cancelButton: {
-			type: Boolean,
-			default: false,
-		},
-		/** 当前状态是否可以搜索，仅 `cancelButton` 为 `true` 时有效 */
-		searchable: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	data() {
-		return {
-			/** 内部搜索值 */
-			innerSearchValue: '',
-		};
-	},
-	computed: {
-		/** 当前搜索值 */
-		searchValue: {
-			get: function () {
-				return this.value === null ? this.innerSearchValue : this.value;
-			},
-			set: function (value) {
-				this.$emit('input', value);
-				this.innerSearchValue = value;
-				this.$emit('change', this.innerSearchValue);
-			},
-		},
-	},
-	created() {
-		this.debouncedInput = debounce((value) => {
-			this.$emit('input-search', value);
-		}, this.debounce);
-	},
-	methods: {
-		/** 输入响应 */
-		onInput(event) {
-			this.searchValue = event.detail.value;
-			this.debouncedInput(event.detail.value);
-		},
-		/** 点击键盘搜索按钮响应 */
-		onConfirm() {
-			this.$emit('search', this.searchValue);
-		},
-		/** 点击清除按钮响应 */
-		onClear() {
-			this.searchValue = '';
-			this.$emit('clear', '');
-		},
-		/** 点击取消按钮响应 */
-		onCancel() {
-			this.searchValue = '';
-			this.searchValue = '';
-			this.$emit('cancel', '');
-		},
+});
+
+const classNames = useClassNames('search');
+
+type _Props = {
+	/** 搜索文本 */
+	modelValue?: string;
+	/** 最大输入文本长度 */
+	maxlength?: number;
+	/** 占位文本 */
+	placeholder?: string;
+	/** 防抖时长 */
+	debounce?: number;
+	/** 是否有清空按钮 */
+	clearable?: boolean;
+	/** 是否只读 */
+	disabled?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 是否显示搜索按钮 */
+	cancelButton?: boolean;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: '',
+	maxlength: 140,
+	placeholder: '请输入搜索内容',
+	debounce: 300,
+	clearable: true,
+	disabled: false,
+	readonly: false,
+	cancelButton: false,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: string): void;
+	(e: 'change', val: string): void;
+	(e: 'input-search', val: string): void;
+	(e: 'search', val: string): void;
+	(e: 'clear', val: string): void;
+	(e: 'cancel', val: string): void;
+}>();
+
+/** 内部搜索值 */
+const innerSearchValue = ref('');
+
+/** 当前搜索值 */
+const searchValue = computed({
+	get: () => (props.modelValue === undefined ? innerSearchValue.value : props.modelValue),
+	set: (value) => {
+		emit('update:modelValue', value);
+		innerSearchValue.value = value;
+		emit('change', innerSearchValue.value);
 	},
+});
+
+const debouncedInput = debounceFn((value: string) => {
+	emit('input-search', value);
+}, props.debounce);
+
+/** 输入响应 */
+const onInput = (event: Event) => {
+	const value = (event as CustomEvent).detail.value;
+	searchValue.value = value;
+	debouncedInput(value);
+};
+
+/** 点击键盘搜索按钮响应 */
+const onConfirm = () => {
+	emit('search', searchValue.value);
+};
+
+/** 点击清除按钮响应 */
+const onClear = () => {
+	searchValue.value = '';
+	emit('clear', '');
+};
+
+/** 点击取消按钮响应 */
+const onCancel = () => {
+	searchValue.value = '';
+	emit('cancel', '');
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './search' as *;
 
 // 定义外部变量
-$component-name: 'search';
-$component-vars: $search;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
-}
-:host(.display-inline) {
-	display: inline;
+	@include UTILS__DEFINE_COMPONENT_VARS($search, 'search');
 }
 
 .Search {
@@ -200,15 +185,6 @@ $component-vars: $search;
 	position: relative;
 	font-size: UTILS__GLOBAL_VAR(font-size, large);
 	color: UTILS__GLOBAL_VAR(color, placeholder);
-	// &::after {
-	//   content: '';
-	//   position: absolute;
-	//   @include absolute-center(UTILS__LOCAL_VAR(height));
-	// }
-}
-.Search--divider {
-	height: 1em;
-	border-right: 2rpx solid #ccc;
 }
 .Search--cancel-button {
 	flex: none;