@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/numpad/numpad.vue

@@ -1,10 +1,10 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['Numpad']]">
 		<button-cpn
 			v-for="btn in buttons"
 			:key="btn.key"
-			:cool-down="0"
-			:class="[$style['Numpad--key'], $style[btn.className]]"
+			:cold-down="0"
+			:class="[$style['Numpad--key'], $style[btn.className || '']]"
 			@click="onClick(btn)"
 		>
 			<icon-cpn v-if="btn.icon" :icon="btn.icon" />
@@ -13,18 +13,36 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed } from 'vue';
 import { freezeDeep } from '../../utils/freezeDeep';
+import useClassNames from '../../composable/component-name';
 import ButtonCpn from '../button/button.vue';
 import IconCpn from '../icon/icon.vue';
 
+defineOptions({
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+});
+
+const classNames = useClassNames('numpad');
+
 /** 默认最小值 */
 const MIN = 0;
 /** 默认最大值 */
 const MAX = 9999;
 
-const buttons = freezeDeep([
+type BtnItem = {
+	key: string;
+	type: 'number' | '-' | 'dot' | 'delete' | 'clear';
+	icon?: string;
+	title?: string;
+	className?: string;
+};
+
+const buttons = freezeDeep<BtnItem[]>([
 	{ key: '1', type: 'number' },
 	{ key: '2', type: 'number' },
 	{ key: '3', type: 'number' },
@@ -41,157 +59,122 @@ const buttons = freezeDeep([
 	{ key: '0', type: 'number', className: 'Numpad--zero-key' },
 ]);
 
-export default {
-	name: 'Numpad',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	components: { ButtonCpn, IconCpn },
-	mixins: [componentName],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [String, Number],
-			default: '',
-		},
-		/** 小数的精度 */
-		precision: {
-			type: Number,
-			default: 0,
-		},
-		/** 允许输入的最大值 */
-		max: {
-			type: Number,
-			default: MAX,
-		},
-		/** 允许输入的最小值 */
-		min: {
-			type: Number,
-			default: MIN,
-		},
-	},
-	data() {
-		return {
-			buttons,
-		};
-	},
-	computed: {
-		editValue: {
-			get() {
-				return this.value || this.value === 0 ? this.value.toString() : '';
-			},
-			set(val) {
-				this.$emit('input', val);
-			},
-		},
-	},
-	created() {},
-	methods: {
-		/** 点击按钮 */
-		onClick(btn) {
-			switch (btn.type) {
-				case 'number':
-					this.onInputNumber(btn.key);
-					break;
-				case 'dot':
-					this.onInputDot();
-					break;
-				case '-':
-					this.onNegative();
-					break;
-				case 'delete':
-					this.onDelete();
-					break;
-				case 'clear':
-					this.onClear();
-					break;
-			}
-		},
-		/** 输入数字 */
-		onInputNumber(key) {
-			const nextValue = this.editValue + key;
-			if (Number(nextValue) <= this.min) {
-				this.editValue = this.min + '';
-				return;
-			}
-			if (Number(nextValue) >= this.max) {
-				this.editValue = this.max + '';
-				return;
-			}
-
-			if (this.editValue === '0') {
-				if (key === '0') return;
-				this.editValue = key;
-				return;
-			}
-
-			if (this.precision > 0 && this.editValue.includes('.')) {
-				const decimalPart = this.editValue.split('.')[1];
-				if (decimalPart.length >= this.precision) {
-					return;
-				}
-			}
-
-			this.editValue += key;
-		},
-		/** 输入小数点 */
-		onInputDot() {
-			if (this.precision <= 0) return;
-			if (this.editValue.includes('.')) return;
-
-			if (this.editValue) {
-				this.editValue += '.';
-			} else {
-				this.editValue = '0.';
-			}
-		},
-		/** 负号 */
-		onNegative() {
-			if (this.min >= 0) return;
-
-			const nextValue = -this.editValue;
-			if (nextValue < this.min) {
-				this.editValue = this.min + '';
-				return;
-			}
-			if (nextValue > this.max) {
-				this.editValue = this.max + '';
-				return;
-			}
-
-			if (this.editValue.startsWith('-')) {
-				this.editValue = this.editValue.slice(1);
-			} else {
-				this.editValue = '-' + this.editValue;
-			}
-		},
-		/** 删除 */
-		onDelete() {
-			if (!this.editValue) return;
-
-			this.editValue = this.editValue.slice(0, -1);
-		},
-		/** 清空 */
-		onClear() {
-			this.editValue = '';
-		},
-		// onConfirm() {
-		// 	this.$emit('input', false);
-		// 	this.$emit('confirm', { value: this.editValue, number: Number(this.editValue) });
-		// },
-	},
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string | number;
+	/** 小数的精度 */
+	precision?: number;
+	/** 允许输入的最大值 */
+	max?: number;
+	/** 允许输入的最小值 */
+	min?: number;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: '',
+	precision: 0,
+	max: MAX,
+	min: MIN,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: string): void;
+}>();
+
+const editValue = computed({
+	get: () => (props.modelValue || props.modelValue === 0 ? props.modelValue.toString() : ''),
+	set: (val: string) => emit('update:modelValue', val),
+});
+
+/** 点击按钮 */
+const onClick = (btn: BtnItem) => {
+	switch (btn.type) {
+		case 'number':
+			onInputNumber(btn.key);
+			break;
+		case 'dot':
+			onInputDot();
+			break;
+		case '-':
+			onNegative();
+			break;
+		case 'delete':
+			onDelete();
+			break;
+		case 'clear':
+			onClear();
+			break;
+	}
+};
+
+/** 输入数字 */
+const onInputNumber = (key: string) => {
+	const nextValue = editValue.value + key;
+	if (Number(nextValue) <= props.min) {
+		editValue.value = props.min + '';
+		return;
+	}
+	if (Number(nextValue) >= props.max) {
+		editValue.value = props.max + '';
+		return;
+	}
+	if (editValue.value === '0') {
+		if (key === '0') return;
+		editValue.value = key;
+		return;
+	}
+	if (props.precision > 0 && editValue.value.includes('.')) {
+		const decimalPart = editValue.value.split('.')[1]!;
+		if (decimalPart.length >= props.precision) return;
+	}
+	editValue.value += key;
+};
+
+/** 输入小数点 */
+const onInputDot = () => {
+	if (props.precision <= 0) return;
+	if (editValue.value.includes('.')) return;
+	editValue.value = editValue.value ? editValue.value + '.' : '0.';
+};
+
+/** 负号 */
+const onNegative = () => {
+	if (props.min >= 0) return;
+	const nextValue = -Number(editValue.value);
+	if (nextValue < props.min) {
+		editValue.value = props.min + '';
+		return;
+	}
+	if (nextValue > props.max) {
+		editValue.value = props.max + '';
+		return;
+	}
+	if (editValue.value.startsWith('-')) {
+		editValue.value = editValue.value.slice(1);
+	} else {
+		editValue.value = '-' + editValue.value;
+	}
+};
+
+/** 删除 */
+const onDelete = () => {
+	if (!editValue.value) return;
+	editValue.value = editValue.value.slice(0, -1);
+};
+
+/** 清空 */
+const onClear = () => {
+	editValue.value = '';
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './numpad' as *;
 
 // 定义外部变量
-$component-name: 'numpad';
-$component-vars: $numpad;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($numpad, 'numpad');
 }
 
 .Numpad {

package/components/page/page-body.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$page-body: () !default;
+$page-body-default: (
+	// 可视区域背景
+	background: UTILS__GLOBAL_VAR('color', 'background'),
+	padding: 20rpx,
+	padding-top: null,
+	padding-right: null,
+	padding-bottom: null,
+	padding-left: null
+);
+$page-body: map.merge($page-body-default, $page-body);

package/components/page/page-body.vue

@@ -1,7 +1,11 @@
 <template>
 	<view
-		:class="[componentClassNames, useScroll ? $style['PageBody--with-scroll'] : $style['PageBody--no-scroll']]"
-		:style="styleStr"
+		:class="[
+			...classNames,
+			$style['PageBody'],
+			useScroll ? $style['PageBody--with-scroll'] : $style['PageBody--no-scroll'],
+		]"
+		:style="inlineStyle"
 	>
 		<!-- 不使用 scroll-view ，即直接使用 Page 的滚动功能 -->
 		<view v-if="!useScroll" :class="$style['PageBody--body']">
@@ -41,144 +45,158 @@
 	</view>
 </template>
 
-<script>
+<script lang="ts" setup>
 /**
  * 页面内容部分容器组件，不单独使用，通过 page 组件间接引入
  */
+import { debounce } from 'lodash-es';
+import { computed, getCurrentInstance, nextTick, ref, useCssModule } from 'vue';
+import useClassNames from '../../composable/component-name';
+import { navBarBottomOffset, safeAreaInsetBottom } from '../../utils/windowInfo';
 
-import debounce from 'lodash-es/debounce';
-import componentName from '../../mixins/componentName';
-import windowInfoMixin from '../../mixins/windowInfo';
+defineOptions({
+	options: {
+		styleIsolation: 'shared',
+		virtualHost: true,
+	},
+});
 
 /** 滚动动画持续时长 */
 const SCROLL_ANIMATION_DURATION = 300;
 
-export default {
-	name: 'PageBody',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	mixins: [componentName, windowInfoMixin],
-	props: {
-		/** 是否有自定义导航头 */
-		hasCustomNav: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否有底部区域 */
-		hasFooter: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否使用scroll-view */
-		useScroll: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否是 tab 页 */
-		isTabPage: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否启用下拉刷新，仅 useScroll 为 true 时有效 */
-		enableRefresh: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否触发下拉刷新，仅 useScroll 为 true 时有效 */
-		refreshing: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			/** scroll-view 的当前滚动距离 */
-			scrollOffset: 0,
-			/** 传递给 scroll-view ，用于控制其滚动距离 */
-			scrollTop: 0,
-			/** 传递给 scroll-view ，用于控制其是否有滚动动画 */
-			scrollWithAnimation: true,
-		};
-	},
-	computed: {
-		styleStr() {
-			return [
-				`--header-bar-bottom: ${this.navBarBottomOffset}px;`,
-				`--safe-area-bottom: ${this.isTabPage ? 0 : this.safeAreaInsetBottom}px;`,
-				...(this.hasCustomNav ? [] : ['--header-placeholder-height: 0px;']),
-				...(this.hasFooter
-					? ['--bottom-safe-height: 0px;']
-					: ['--footer-placeholder-height: 0px;', '--bottom-safe-height: var(--safe-area-bottom);']),
-			].join(' ');
-		},
-	},
-	methods: {
-		$_debounceScroll: debounce(function () {
-			uni.createSelectorQuery()
-				/* #ifndef MP-ALIPAY */
-				.in(this)
-				/* #endif */
-				.select('.' + this.$style['PageBody--scroll-body'])
-				.fields({ size: true, scrollOffset: true }, (data) => {
-					if (data.scrollHeight - data.height - data.scrollTop <= 50) {
-						this.$emit('reach-bottom');
-					}
-				})
-				.exec();
-		}, 100),
-		/** 处理 scroll-view 滚动 */
-		$_handleScroll(e) {
-			this.scrollOffset = e.detail.scrollTop;
-			this.$emit('scroll', e.detail);
-			if (this.useScroll) {
-				this.$_debounceScroll(this.loadedPages);
-			}
-		},
-		/** 滚动到顶部
-		 * @param {number} position 滚动到与顶部的距离
-		 * @param {boolean} animation 是否有滚动动画
-		 */
-		scrollToTop(position = 0, animation = true) {
-			if (this.useScroll) {
-				this.scrollWithAnimation = animation;
-				this.$nextTick(() => {
-					this.scrollTop = typeof this.scrollTop === 'number' ? position + 'px' : position;
-					this.scrollOffset = position;
-					setTimeout(() => {
-						this.scrollWithAnimation = true;
-					}, SCROLL_ANIMATION_DURATION);
-				});
-			} else {
-				uni.pageScrollTo({
-					scrollTop: position,
-					duration: animation ? SCROLL_ANIMATION_DURATION : 0,
-				});
+const classNames = useClassNames('page-body');
+const $style = useCssModule();
+
+type _Props = {
+	/** 是否有自定义导航头 */
+	hasHeader?: boolean;
+	/** 是否有底部区域 */
+	hasFooter?: boolean;
+	/** 是否使用scroll-view */
+	useScroll?: boolean;
+	/** 是否是 tab 页 */
+	isTabPage?: boolean;
+	/** 是否启用下拉刷新，仅 useScroll 为 true 时有效 */
+	enableRefresh?: boolean;
+	/** 是否触发下拉刷新，仅 useScroll 为 true 时有效 */
+	refreshing?: boolean;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	hasHeader: true,
+	hasFooter: false,
+	useScroll: false,
+	isTabPage: false,
+	enableRefresh: false,
+	refreshing: undefined,
+});
+
+type ScrollEvent = {
+	detail: {
+		scrollLeft: number;
+		scrollTop: number;
+		scrollHeight: number;
+		scrollWidth: number;
+		deltaX: number;
+		deltaY: number;
+	};
+};
+
+const emit = defineEmits<{
+	(event: 'scroll', value: ScrollEvent): void;
+	(event: 'refresh'): void;
+	(event: 'reach-bottom'): void;
+}>();
+
+const scrollOffset = ref<number | string>(0);
+const scrollTop = ref<number | string>(0);
+const scrollWithAnimation = ref(true);
+
+const inlineStyle = computed(() => {
+	return [
+		`--page-header-bottom: ${navBarBottomOffset}px;`,
+		`--safe-area-bottom: ${props.isTabPage ? 0 : safeAreaInsetBottom}px;`,
+		props.hasHeader ? '' : `--header-placeholder-height: 0px;`,
+		props.hasFooter
+			? '--bottom-safe-height: 0px;'
+			: '--footer-placeholder-height: 0px; --bottom-safe-height: var(--safe-area-bottom);',
+	].join('');
+});
+
+const vm = getCurrentInstance();
+
+const $_debounceScroll = debounce(function () {
+	uni.createSelectorQuery()
+		/* #ifndef MP-ALIPAY */
+		.in(vm)
+		/* #endif */
+		.select('.' + $style['PageBody--scroll-body'])
+		.fields({ size: true, scrollOffset: true }, (data) => {
+			if (!Array.isArray(data) && data.scrollHeight! - data.height! - data.scrollTop! <= 50) {
+				emit('reach-bottom');
 			}
-		},
-	},
+		})
+		.exec();
+}, 100);
+
+/** 处理 scroll-view 滚动 */
+const $_handleScroll = (e: {
+	detail: {
+		scrollLeft: number;
+		scrollTop: number;
+		scrollHeight: number;
+		scrollWidth: number;
+		deltaX: number;
+		deltaY: number;
+	};
+}) => {
+	scrollOffset.value = e.detail.scrollTop;
+	emit('scroll', e);
+	if (props.useScroll) {
+		$_debounceScroll();
+	}
+};
+
+/** 滚动到顶部
+ * @param {number} position 滚动到与顶部的距离
+ * @param {boolean} animation 是否有滚动动画
+ */
+const scrollToTop = (position = 0, animation = true) => {
+	if (props.useScroll) {
+		scrollWithAnimation.value = animation;
+		nextTick(() => {
+			scrollTop.value = typeof scrollTop.value === 'number' ? position + 'px' : position;
+			scrollOffset.value = position;
+			setTimeout(() => {
+				scrollWithAnimation.value = true;
+			}, SCROLL_ANIMATION_DURATION);
+		});
+	} else {
+		uni.pageScrollTo({
+			scrollTop: position,
+			duration: animation ? SCROLL_ANIMATION_DURATION : 0,
+		});
+	}
 };
+
+defineExpose({
+	scrollToTop,
+});
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './page-body' as *;
 
 // 定义外部变量
-$component-name: 'page-body';
-$component-vars: $page-body;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
+	@include UTILS__DEFINE_COMPONENT_VARS($page-body, 'page-body');
 }
 
 .PageBody {
 	@extend %external-vars;
 
-	--header-placeholder-height: calc(var(--header-bar-bottom) + #{UTILS__VAR(extra-height, page-header, 0px)});
+	--header-placeholder-height: calc(var(--page-header-bottom) + #{UTILS__VAR(extra-height, page-header, 0px)});
 	--footer-placeholder-height: calc(var(--safe-area-bottom) + #{UTILS__VAR(height, page-footer, 100rpx)});
 
 	box-sizing: border-box;

package/components/page/page-footer.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+
+// 可配置的变量
+$page-footer: () !default;
+$page-footer-default: (
+	// 背景色
+	background: #fff,
+	// 高度
+	height: 100rpx,
+	// 横向两端间距
+	spacing-horizontal: 30rpx
+);
+$page-footer: map.merge($page-footer-default, $page-footer);