@ecolovo/uniapp-components 2.0.4 → 2.0.5

package/components/popup/popup.vue

@@ -1,10 +1,10 @@
 <template>
-	<view :class="classNames">
+	<view v-if="isShow" :class="classNames">
 		<popover-mask-cpn
 			ref="maskRef"
-			:model-value="modelValue"
+			v-model="isShow"
 			:modal="modal || isLoading"
-			@update:model-value="emit('update:modelValue', $event)"
+			@mask="onCancel()"
 			@close="emit('close')"
 			@closed="emit('closed')"
 		>
@@ -16,7 +16,7 @@
 					:show-close="showClose"
 					:cancel="cancel"
 					:confirm="confirm"
-					@close="onClose()"
+					@close="onCancel()"
 					@cancel="onCancel()"
 					@confirm="onConfirm()"
 				>
@@ -32,6 +32,8 @@ import { ref, computed } from 'vue';
 import useClassNames from '../../composable/component-name';
 import PopoverMaskCpn from '../popover/popover-mask.vue';
 import PopupContentCpn from './popup-content.vue';
+import { popupProps } from './types';
+import { useAwaitableDialog, useModelValue } from '../../composable';
 
 defineOptions({
 	options: {
@@ -40,11 +42,26 @@ defineOptions({
 	},
 });
 
+type _Slots = {
+	content: () => void;
+	default: () => void;
+};
+
+defineSlots<_Slots>();
+
 const classNames = useClassNames('popup');
 
+const isShow_ = defineModel<boolean>();
+/** 是否可见 */
+const isShow = useModelValue(isShow_);
+
+const {
+	show,
+	onConfirm: onConfirmDialog,
+	onCancel: onCancelDialog,
+} = useAwaitableDialog(isShow);
+
 type _Props = {
-	/** v-model 绑定值，控制弹出框是否可见 */
-	modelValue?: boolean;
 	/** 是否模态框 */
 	modal?: boolean;
 	/** 是否显示 loading 动画 */
@@ -68,7 +85,6 @@ type _Props = {
 };
 
 const props = withDefaults(defineProps<_Props>(), {
-	modelValue: false,
 	modal: false,
 	loading: false,
 	title: '',
@@ -79,17 +95,14 @@ const props = withDefaults(defineProps<_Props>(), {
 	confirm: '确认',
 	closeOnConfirm: true,
 	async: false,
+	...popupProps,
 });
 
 const emit = defineEmits<{
-	(e: 'update:modelValue', val: boolean): void;
 	(e: 'close'): void;
 	(e: 'closed'): void;
 	(e: 'cancel', closeFn?: VoidFunction): void;
-	(
-		e: 'confirm',
-		payload?: UniApp.PromiseResolvers<unknown> | VoidFunction
-	): void;
+	(e: 'confirm', payload?: PromiseResolvers<unknown> | VoidFunction): void;
 }>();
 
 const isAsyncLoading = ref(false);
@@ -98,14 +111,8 @@ 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 close = (onClosed?: VoidFunction) => {
+	maskRef.value?.close(onClosed);
 };
 
 /** 点击取消按钮响应 */
@@ -113,11 +120,13 @@ const onCancel = () => {
 	if (isLoading.value) return;
 
 	if (props.closeOnCancel) {
+		onCancelDialog();
 		emit('cancel');
 		close();
 		return;
 	}
 
+	onCancelDialog();
 	emit('cancel', maskRef.value?.close.bind(maskRef.value));
 };
 
@@ -128,13 +137,7 @@ const onConfirm = () => {
 	if (props.async) {
 		isAsyncLoading.value = true;
 
-		// const { promise, resolve, reject } = Promise.withResolvers();
-		let resolve: UniApp.PromiseResolver<unknown>,
-			reject: UniApp.PromiseRejector<unknown>;
-		const promise = new Promise((res, rej) => {
-			resolve = res;
-			reject = rej;
-		});
+		const { promise, resolve, reject } = Promise.withResolvers();
 
 		promise
 			.then((willClose = true) => {
@@ -151,20 +154,23 @@ const onConfirm = () => {
 				}
 				isAsyncLoading.value = false;
 			});
+		onConfirmDialog();
 		emit('confirm', { resolve, reject });
 		return;
 	}
 
 	if (props.closeOnConfirm) {
+		onConfirmDialog();
 		emit('confirm');
 		close();
 		return;
 	}
 
+	onConfirmDialog();
 	emit('confirm', maskRef.value?.close.bind(maskRef.value));
 };
 
-defineExpose({ close });
+defineExpose({ show, close });
 </script>
 
 <style lang="scss" module>

package/components/popup/types.d.ts

@@ -0,0 +1,20 @@
+export type ConfigurablePopupProps = {
+    /** 是否模态框 */
+    modal?: boolean;
+    /** 标题 */
+    title?: string;
+    /** 是否居中标题 */
+    centerTitle?: boolean;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+    cancel?: string | boolean;
+    /** 点击取消按钮时是否自动关闭对话框 */
+    closeOnCancel?: boolean;
+    /** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+    confirm?: string | boolean;
+    /** 点击确认按钮时是否自动关闭对话框 */
+    closeOnConfirm?: boolean;
+};
+export declare let popupProps: ConfigurablePopupProps;
+export declare const setDefaultPopupProps: (props?: ConfigurablePopupProps) => void;

package/components/popup/types.js

@@ -0,0 +1,4 @@
+export let popupProps = {};
+export const setDefaultPopupProps = (props = {}) => {
+    popupProps = props;
+};

package/components/popup/types.ts

@@ -0,0 +1,24 @@
+export type ConfigurablePopupProps = {
+	/** 是否模态框 */
+	modal?: boolean;
+	/** 标题 */
+	title?: string;
+	/** 是否居中标题 */
+	centerTitle?: boolean;
+	/** 是否显示关闭按钮 */
+	showClose?: boolean;
+	/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+	cancel?: string | boolean;
+	/** 点击取消按钮时是否自动关闭对话框 */
+	closeOnCancel?: boolean;
+	/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+	confirm?: string | boolean;
+	/** 点击确认按钮时是否自动关闭对话框 */
+	closeOnConfirm?: boolean;
+};
+
+export let popupProps: ConfigurablePopupProps = {};
+
+export const setDefaultPopupProps = (props: ConfigurablePopupProps = {}) => {
+	popupProps = props;
+};

package/components/price/price.scss

@@ -4,17 +4,21 @@
 // 可配置的变量
 $price: () !default;
 $price-default: (
-	color: inherit,
-	font-size: inherit,
-	font-weight: inherit,
+	color: initial,
+	font-family: initial,
+	font-size: initial,
+	font-weight: initial,
 	integer-color: UTILS__LOCAL_VAR(color),
+	integer-font-family: UTILS__LOCAL_VAR(font-family),
 	integer-font-size: UTILS__LOCAL_VAR(font-size),
 	integer-font-weight: UTILS__LOCAL_VAR(font-weight),
 	decimal-color: UTILS__LOCAL_VAR(color),
+	decimal-font-family: UTILS__LOCAL_VAR(font-family),
 	decimal-font-size: UTILS__LOCAL_VAR(font-size),
 	decimal-font-weight: UTILS__LOCAL_VAR(font-weight),
 	unit-spacing: 0,
 	unit-color: UTILS__LOCAL_VAR(color),
+	unit-font-family: UTILS__LOCAL_VAR(font-family),
 	unit-font-size: UTILS__LOCAL_VAR(font-size),
 	unit-font-weight: UTILS__LOCAL_VAR(font-weight),
 );

package/components/price/price.vue

@@ -32,6 +32,7 @@
 import { computed } from 'vue';
 import useClassNames from '../../composable/component-name';
 import { formatPrice } from '../../utils/price';
+import { priceProps } from './types';
 
 defineOptions({
 	options: {
@@ -58,6 +59,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	prefixUnit: false,
 	showSymbol: false,
 	alwaysShowDecimal: true,
+	...priceProps,
 });
 
 /** 格式化后的价格 */
@@ -80,6 +82,7 @@ const formattedPrice = computed(() => formatPrice(props.value));
 .Price {
 	@extend %external-vars;
 	color: UTILS__LOCAL_VAR(color);
+	font-family: UTILS__LOCAL_VAR(font-family);
 	font-size: UTILS__LOCAL_VAR(font-size);
 	font-weight: UTILS__LOCAL_VAR(font-weight);
 }
@@ -88,16 +91,19 @@ const formattedPrice = computed(() => formatPrice(props.value));
 }
 .Price--integer {
 	color: UTILS__LOCAL_VAR(integer-color);
+	font-family: UTILS__LOCAL_VAR(integer-font-size);
 	font-size: UTILS__LOCAL_VAR(integer-font-size);
 	font-weight: UTILS__LOCAL_VAR(integer-font-weight);
 }
 .Price--decimal {
 	color: UTILS__LOCAL_VAR(decimal-color);
+	font-family: UTILS__LOCAL_VAR(decimal-font-family);
 	font-size: UTILS__LOCAL_VAR(decimal-font-size);
 	font-weight: UTILS__LOCAL_VAR(decimal-font-weight);
 }
 .Price--unit {
 	color: UTILS__LOCAL_VAR(unit-color);
+	font-family: UTILS__LOCAL_VAR(unit-font-family);
 	font-size: UTILS__LOCAL_VAR(unit-font-size);
 	font-weight: UTILS__LOCAL_VAR(unit-font-weight);
 }

package/components/price/types.d.ts

@@ -0,0 +1,10 @@
+export type ConfigurablePriceProps = {
+    /** 前置单位 */
+    prefixUnit?: boolean;
+    /** 是否一直显示符号 */
+    showSymbol?: boolean;
+    /** 是否始终显示小数 */
+    alwaysShowDecimal?: boolean;
+};
+export declare let priceProps: ConfigurablePriceProps;
+export declare const setDefaultPriceProps: (props?: ConfigurablePriceProps) => void;

package/components/price/types.js

@@ -0,0 +1,4 @@
+export let priceProps = {};
+export const setDefaultPriceProps = (props = {}) => {
+    priceProps = props;
+};

package/components/price/types.ts

@@ -0,0 +1,14 @@
+export type ConfigurablePriceProps = {
+	/** 前置单位 */
+	prefixUnit?: boolean;
+	/** 是否一直显示符号 */
+	showSymbol?: boolean;
+	/** 是否始终显示小数 */
+	alwaysShowDecimal?: boolean;
+};
+
+export let priceProps: ConfigurablePriceProps = {};
+
+export const setDefaultPriceProps = (props: ConfigurablePriceProps = {}) => {
+	priceProps = props;
+};

package/components/search/search.vue

@@ -53,6 +53,7 @@ import { debounce as debounceFn } from 'lodash-es';
 import useClassNames from '../../composable/component-name';
 import ButtonCpn from '../button/button.vue';
 import IconCpn from '../icon/icon.vue';
+import { searchProps } from './types';
 
 defineOptions({
 	options: {
@@ -91,6 +92,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	disabled: false,
 	readonly: false,
 	cancelButton: false,
+	...searchProps,
 });
 
 const emit = defineEmits<{

package/components/search/types.d.ts

@@ -0,0 +1,14 @@
+export type ConfigurableSearchProps = {
+    /** 最大输入文本长度 */
+    maxlength?: number;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 防抖时长 */
+    debounce?: number;
+    /** 是否有清空按钮 */
+    clearable?: boolean;
+    /** 是否显示取消按钮 */
+    cancelButton?: boolean;
+};
+export declare let searchProps: ConfigurableSearchProps;
+export declare const setDefaultSearchProps: (props?: ConfigurableSearchProps) => void;

package/components/search/types.js

@@ -0,0 +1,4 @@
+export let searchProps = {};
+export const setDefaultSearchProps = (props = {}) => {
+    searchProps = props;
+};

package/components/search/types.ts

@@ -0,0 +1,18 @@
+export type ConfigurableSearchProps = {
+	/** 最大输入文本长度 */
+	maxlength?: number;
+	/** 占位文本 */
+	placeholder?: string;
+	/** 防抖时长 */
+	debounce?: number;
+	/** 是否有清空按钮 */
+	clearable?: boolean;
+	/** 是否显示取消按钮 */
+	cancelButton?: boolean;
+};
+
+export let searchProps: ConfigurableSearchProps = {};
+
+export const setDefaultSearchProps = (props: ConfigurableSearchProps = {}) => {
+	searchProps = props;
+};

package/components/searching/searching.vue

@@ -13,6 +13,7 @@
 <script lang="ts" setup>
 import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
+import { searchingProps } from './types';
 
 defineOptions({
 	options: {
@@ -33,6 +34,7 @@ type _Props = {
 withDefaults(defineProps<_Props>(), {
 	image: '',
 	text: '数据加载中',
+	...searchingProps,
 });
 </script>
 

package/components/searching/types.d.ts

@@ -0,0 +1,8 @@
+export type ConfigurableSearchingProps = {
+    /** 图片 */
+    image?: string;
+    /** 文本 */
+    text?: string;
+};
+export declare let searchingProps: ConfigurableSearchingProps;
+export declare const setDefaultSearchingProps: (props?: ConfigurableSearchingProps) => void;

package/components/searching/types.js

@@ -0,0 +1,4 @@
+export let searchingProps = {};
+export const setDefaultSearchingProps = (props = {}) => {
+    searchingProps = props;
+};

package/components/searching/types.ts

@@ -0,0 +1,14 @@
+export type ConfigurableSearchingProps = {
+	/** 图片 */
+	image?: string;
+	/** 文本 */
+	text?: string;
+};
+
+export let searchingProps: ConfigurableSearchingProps = {};
+
+export const setDefaultSearchingProps = (
+	props: ConfigurableSearchingProps = {}
+) => {
+	searchingProps = props;
+};

package/components/switch/switch.vue

@@ -14,6 +14,7 @@
 			<icon-cpn
 				v-if="loading"
 				icon="loading-dot-spinner"
+				spinning
 				:class="$style['Switch--loading']"
 			/>
 		</view>
@@ -24,6 +25,7 @@
 import { computed, inject, ref } from 'vue';
 import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
+import { switchProps } from './types';
 
 defineOptions({
 	options: {
@@ -56,6 +58,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	valueOff: false,
 	disabled: false,
 	readonly: false,
+	...switchProps,
 });
 
 const emit = defineEmits<{
@@ -64,7 +67,7 @@ const emit = defineEmits<{
 		e: 'async',
 		payload: {
 			value: boolean | number | string;
-		} & UniApp.PromiseResolvers<unknown>
+		} & PromiseResolvers<unknown>
 	): void;
 }>();
 
@@ -98,13 +101,7 @@ const toggle = () => {
 	const nextValue =
 		props.modelValue !== props.valueOn ? props.valueOn : props.valueOff;
 
-	// const { promise, resolve, reject } = Promise.withResolvers();
-	let resolve: UniApp.PromiseResolver<unknown>,
-		reject: UniApp.PromiseRejector<unknown>;
-	const promise = new Promise((res, rej) => {
-		resolve = res;
-		reject = rej;
-	});
+	const { promise, resolve, reject } = Promise.withResolvers();
 
 	promise
 		.then((isOk = true) => {

package/components/switch/types.d.ts

@@ -0,0 +1,8 @@
+export type ConfigurableSwitchProps = {
+    /** 开启状态的值 */
+    valueOn?: boolean | number | string;
+    /** 关闭状态的值 */
+    valueOff?: boolean | number | string;
+};
+export declare let switchProps: ConfigurableSwitchProps;
+export declare const setDefaultSwitchProps: (props?: ConfigurableSwitchProps) => void;

package/components/switch/types.js

@@ -0,0 +1,4 @@
+export let switchProps = {};
+export const setDefaultSwitchProps = (props = {}) => {
+    switchProps = props;
+};

package/components/switch/types.ts

@@ -0,0 +1,12 @@
+export type ConfigurableSwitchProps = {
+	/** 开启状态的值 */
+	valueOn?: boolean | number | string;
+	/** 关闭状态的值 */
+	valueOff?: boolean | number | string;
+};
+
+export let switchProps: ConfigurableSwitchProps = {};
+
+export const setDefaultSwitchProps = (props: ConfigurableSwitchProps = {}) => {
+	switchProps = props;
+};

package/components/tab/tab.vue

@@ -47,6 +47,7 @@ import {
 	watch,
 } from 'vue';
 import useClassNames from '../../composable/component-name';
+import { tabProps } from './types';
 
 defineOptions({
 	options: {
@@ -84,6 +85,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	tabs: () => [],
 	evenly: true,
 	indicator: true,
+	...tabProps,
 });
 
 const emit = defineEmits<{

package/components/tab/types.d.ts

@@ -0,0 +1,8 @@
+export type ConfigurableTabProps = {
+    /** 是否均分大小 */
+    evenly?: boolean;
+    /** 是否显示指示器 */
+    indicator?: boolean;
+};
+export declare let tabProps: ConfigurableTabProps;
+export declare const setDefaultTabProps: (props?: ConfigurableTabProps) => void;

package/components/tab/types.js

@@ -0,0 +1,4 @@
+export let tabProps = {};
+export const setDefaultTabProps = (props = {}) => {
+    tabProps = props;
+};

package/components/tab/types.ts

@@ -0,0 +1,12 @@
+export type ConfigurableTabProps = {
+	/** 是否均分大小 */
+	evenly?: boolean;
+	/** 是否显示指示器 */
+	indicator?: boolean;
+};
+
+export let tabProps: ConfigurableTabProps = {};
+
+export const setDefaultTabProps = (props: ConfigurableTabProps = {}) => {
+	tabProps = props;
+};

package/components/textarea/textarea.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$textarea: () !default;
+$textarea-default: (
+	min-height: 150rpx,
+	max-height: 300rpx,
+);
+$textarea: map.merge($textarea-default, $textarea);

package/components/textarea/textarea.vue

@@ -74,6 +74,7 @@ import {
 } from 'vue';
 import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
+import { textareaProps } from './types';
 
 defineOptions({
 	options: {
@@ -85,6 +86,12 @@ defineOptions({
 const classNames = useClassNames('textarea');
 const $style = useCssModule();
 
+type _Slots = {
+	placeholder: () => void;
+};
+
+defineSlots<_Slots>();
+
 type _Props = {
 	/** 绑定值 */
 	modelValue?: string;
@@ -107,6 +114,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	autoHeight: true,
 	readonly: false,
 	fold: true,
+	...textareaProps,
 });
 
 const emit = defineEmits<{
@@ -171,27 +179,27 @@ const trimValue = (e: Event) => {
 
 <style lang="scss" module>
 @use '../../styles/utils' as *;
+@use './textarea' as *;
 
-:host {
-	display: block;
-}
-:host(.display-inline) {
-	display: inline;
+// 定义外部变量
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS('textarea', $textarea);
 }
 
 .Textarea {
+	@extend %external-vars;
 	flex: 1;
 	position: relative;
-	padding: 20rpx;
+	padding: 20rpx 20rpx 0 20rpx;
 	background: UTILS__GLOBAL_VAR(color, background);
 	border-radius: 20rpx;
 	line-height: 1.5;
 }
 .Textarea--input {
 	width: 100%;
-	height: 150rpx;
-	min-height: 150rpx;
-	max-height: 300rpx;
+	height: UTILS__LOCAL_VAR(min-height);
+	min-height: UTILS__LOCAL_VAR(min-height);
+	max-height: UTILS__LOCAL_VAR(max-height);
 	padding: 0;
 }
 .Textarea--placeholder {

package/components/textarea/types.d.ts

@@ -0,0 +1,12 @@
+export type ConfigurableTextareaProps = {
+    /** 最大输入文本长度 */
+    maxlength?: number;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 是否自动调整高度 */
+    autoHeight?: boolean;
+    /** 当只读时，如果文字过多，是否折叠 */
+    fold?: boolean;
+};
+export declare let textareaProps: ConfigurableTextareaProps;
+export declare const setDefaultTextareaProps: (props?: ConfigurableTextareaProps) => void;

package/components/textarea/types.js

@@ -0,0 +1,4 @@
+export let textareaProps = {};
+export const setDefaultTextareaProps = (props = {}) => {
+    textareaProps = props;
+};

package/components/textarea/types.ts

@@ -0,0 +1,18 @@
+export type ConfigurableTextareaProps = {
+	/** 最大输入文本长度 */
+	maxlength?: number;
+	/** 占位文本 */
+	placeholder?: string;
+	/** 是否自动调整高度 */
+	autoHeight?: boolean;
+	/** 当只读时，如果文字过多，是否折叠 */
+	fold?: boolean;
+};
+
+export let textareaProps: ConfigurableTextareaProps = {};
+
+export const setDefaultTextareaProps = (
+	props: ConfigurableTextareaProps = {}
+) => {
+	textareaProps = props;
+};