@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/input/input.vue

@@ -1,14 +1,14 @@
 <template>
-	<view :class="componentClassNames" @click="setFocus">
+	<view :class="[...classNames, $style['Input']]" @click="setFocus">
 		<view
-			v-if="isReadonly || (useText && value && !focused)"
+			v-if="isReadonly || (useText && modelValue && !focused)"
 			:class="[$style['Input--text'], { [$style['Input--ellipsis']]: ellipsis }]"
 		>
-			{{ value }}
+			{{ modelValue }}
 		</view>
 		<input
 			v-else
-			:value="value"
+			:value="modelValue"
 			:type="type"
 			:disabled="disabled"
 			:maxlength="maxlength"
@@ -17,100 +17,86 @@
 			always-embed
 			:class="$style['Input--input']"
 			:placeholder-class="$style['Input--input-placeholder']"
-			@input="$emit('input', $event.detail.value)"
+			@input="$emit('update:modelValue', $event.detail.value)"
 			@confirm="focused = false"
 			@blur="focused = false"
 		/>
 		<icon-cpn
-			v-if="!isReadonly && clearable && value"
+			v-if="!isReadonly && clearable && modelValue"
 			icon="close-circle-filled"
 			:class="$style['Input--icon']"
 			tap-size="80rpx"
-			@click="$emit('input', '')"
+			@click="$emit('update:modelValue', '')"
 		>
 		</icon-cpn>
 	</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 IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'Input',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: String,
-			default: '',
-		},
-		/** 键盘类型 */
-		type: {
-			type: String,
-			default: 'text',
-		},
-		/** 是否添加清空图标 */
-		clearable: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 文本超长时是否省略 */
-		ellipsis: {
-			type: Boolean,
-			default: false,
-		},
-		/** 最大输入长度 */
-		maxlength: {
-			type: Number,
-			default: 140,
-		},
-		/** 占位文本 */
-		placeholder: {
-			type: String,
-			default: '请输入',
-		},
-		/** 当不聚焦时是否使用文本替换 input */
-		useText: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			/** 是否聚焦 */
-			focused: false,
-		};
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-	},
-	methods: {
-		/** 设置焦点 */
-		setFocus() {
-			if (this.disabled || this.isReadonly) return;
+});
 
-			this.focused = true;
-		},
-	},
+const classNames = useClassNames('input');
+
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string;
+	/** 键盘类型 */
+	type?: 'text' | 'number' | 'idcard' | 'digit' | 'tel' | 'safe-password' | 'nickname';
+	/** 是否添加清空图标 */
+	clearable?: boolean;
+	/** 是否禁用 */
+	disabled?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 文本超长时是否省略 */
+	ellipsis?: boolean;
+	/** 最大输入长度 */
+	maxlength?: number;
+	/** 占位文本 */
+	placeholder?: string;
+	/** 当不聚焦时是否使用文本替换 input */
+	useText?: boolean;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: '',
+	type: 'text',
+	clearable: false,
+	disabled: false,
+	readonly: false,
+	ellipsis: false,
+	maxlength: 140,
+	placeholder: '请输入',
+	useText: false,
+});
+
+defineEmits<{
+	(e: 'update:modelValue', val: string): void;
+}>();
+
+/** 是否聚焦 */
+const focused = ref(false);
+
+const isFormReadonly = inject(
+	'ecolovo/form/readonly',
+	computed(() => false)
+);
+
+const isReadonly = computed(() => props.readonly || isFormReadonly.value);
+
+/** 设置焦点 */
+const setFocus = () => {
+	if (props.disabled || isReadonly.value) return;
+	focused.value = true;
 };
 </script>
 

package/components/input/password-input.vue

@@ -1,7 +1,7 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['PasswordInput']]">
 		<input
-			:value="value"
+			:value="modelValue"
 			:disabled="disabled"
 			:maxlength="maxlength"
 			:password="!isShowPassword"
@@ -9,7 +9,7 @@
 			always-embed
 			:class="$style['PasswordInput--input']"
 			:placeholder-class="$style['PasswordInput--input-placeholder']"
-			@input="$emit('input', $event.detail.value)"
+			@input="$emit('update:modelValue', $event.detail.value)"
 		/>
 		<icon-cpn
 			:icon="isShowPassword ? 'password-show' : 'password-hide'"
@@ -20,52 +20,44 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'PasswordInput',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: String,
-			default: '',
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 最大输入长度 */
-		maxlength: {
-			type: Number,
-			default: 140,
-		},
-		/** 占位文本 */
-		placeholder: {
-			type: String,
-			default: '请输入密码',
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			/** 是否显示明文 */
-			isShowPassword: false,
-		};
-	},
+});
+
+const classNames = useClassNames('password-input');
+
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string;
+	/** 是否禁用 */
+	disabled?: boolean;
+	/** 最大输入长度 */
+	maxlength?: number;
+	/** 占位文本 */
+	placeholder?: string;
 };
+
+withDefaults(defineProps<_Props>(), {
+	modelValue: '',
+	disabled: false,
+	maxlength: 140,
+	placeholder: '请输入密码',
+});
+
+defineEmits<{
+	(e: 'update:modelValue', val: string): void;
+}>();
+
+/** 是否显示明文 */
+const isShowPassword = ref(false);
 </script>
 
 <style lang="scss" module>

package/components/list-page/list-page.vue

@@ -8,7 +8,7 @@
 		enable-refresh
 		:refreshing="isRefreshing"
 		:loading="loading"
-		:class="componentClassNames"
+		:class="classNames"
 		@refresh="onRefresh"
 		@reach-bottom="onLoadMore"
 	>
@@ -29,114 +29,88 @@
 	</page-cpn>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { PagingData } from '@ecolovo/utils/uniapp/paging';
+import useClassNames from '../../composable/component-name';
 import DataListCpn from '../data-list/data-list.vue';
 import EmptyCpn from '../empty/empty.vue';
 import PageCpn from '../page/page.vue';
 
-export default {
-	name: 'ListPage',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { PageCpn, DataListCpn, EmptyCpn },
-	mixins: [componentName],
-	props: {
-		/** 是否使用自定义导航栏 */
-		custom: {
-			type: Boolean,
-			default: true,
-		},
-		/** 页面标题 */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** 页面头部样式，主要用于控制导航栏字体颜色 */
-		theme: {
-			type: String,
-			default: 'light',
-		},
-		/** 是否使用底部操作栏 */
-		hasFooter: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否使用scroll-view */
-		useScroll: {
-			type: Boolean,
-			default: true,
-		},
-		/** 分页大小 */
-		pagingData: {
-			type: Object,
-			default: null,
-		},
-		// /** 分页大小 */
-		// pageSize: {
-		// 	type: [Number, String],
-		// 	default: 0,
-		// },
-		/** 是否显示加载更多 */
-		showLoadMore: {
-			type: Boolean,
-			default: true,
-		},
-		/** 页面加载 */
-		loading: {
-			type: [Boolean, String],
-			default: false,
-		},
-	},
-	data() {
-		return {
-			/** 是否正在刷新中 */
-			isRefreshing: false,
-			/** 是否正在加载更多中 */
-			isLoadingMore: false,
-			/** scroll-view 的当前滚动距离 */
-			scrollOffset: 0,
-			/** 传递给 scroll-view ，用于控制其滚动距离 */
-			scrollTop: 0,
-			/** 传递给 scroll-view ，用于控制其是否有滚动动画 */
-			scrollWithAnimation: true,
-		};
-	},
-	methods: {
-		/** 触发下拉刷新 */
-		onRefresh() {
-			if (this.isRefreshing) {
-				return;
-			}
+});
 
-			this.isRefreshing = true;
-			const { promise, resolve, reject } = Promise.withResolvers();
-			promise.finally(() => {
-				this.isRefreshing = false;
-				uni.stopPullDownRefresh();
-			});
-			this.$emit('refresh', { resolve, reject });
-		},
-		/** 抵达底部触发加载更多 */
-		onLoadMore() {
-			if (this.isLoadingMore) {
-				return;
-			}
-			if (!this.pagingData.hasMore) {
-				return;
-			}
+const classNames = useClassNames('list-page');
 
-			this.isLoadingMore = true;
-			const { promise, resolve, reject } = Promise.withResolvers();
-			promise.finally(() => {
-				this.isLoadingMore = false;
-				uni.stopPullDownRefresh();
-			});
-			this.$emit('reach-bottom', { resolve, reject });
-		},
-	},
+type _Props = {
+	/** 是否使用自定义导航栏 */
+	custom?: boolean;
+	/** 页面标题 */
+	title?: string;
+	/** 页面头部样式，主要用于控制导航栏字体颜色 */
+	theme?: 'light' | 'dark';
+	/** 是否使用底部操作栏 */
+	hasFooter?: boolean;
+	/** 是否使用scroll-view */
+	useScroll?: boolean;
+	/** 分页数据 */
+	pagingData?: PagingData | null;
+	/** 是否显示加载更多 */
+	showLoadMore?: boolean;
+	/** 页面加载 */
+	loading?: boolean | string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	custom: true,
+	title: '',
+	theme: 'light',
+	hasFooter: false,
+	useScroll: true,
+	pagingData: null,
+	showLoadMore: true,
+	loading: false,
+});
+
+const emit = defineEmits<{
+	(e: 'refresh', payload?: Omit<PromiseWithResolvers<unknown>, 'promise'>): void;
+	(e: 'reach-bottom', payload?: Omit<PromiseWithResolvers<unknown>, 'promise'>): void;
+}>();
+
+/** 是否正在刷新中 */
+const isRefreshing = ref(false);
+/** 是否正在加载更多中 */
+const isLoadingMore = ref(false);
+
+/** 触发下拉刷新 */
+const onRefresh = () => {
+	if (isRefreshing.value) return;
+
+	isRefreshing.value = true;
+	const { promise, resolve, reject } = Promise.withResolvers();
+	promise.finally(() => {
+		isRefreshing.value = false;
+		uni.stopPullDownRefresh();
+	});
+	emit('refresh', { resolve, reject });
+};
+
+/** 抵达底部触发加载更多 */
+const onLoadMore = () => {
+	if (isLoadingMore.value) return;
+	if (!props.pagingData?.hasMore) return;
+
+	isLoadingMore.value = true;
+	const { promise, resolve, reject } = Promise.withResolvers();
+	promise.finally(() => {
+		isLoadingMore.value = false;
+		uni.stopPullDownRefresh();
+	});
+	emit('reach-bottom', { resolve, reject });
 };
 </script>
 

package/components/load-more/load-more.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$load-more: () !default;
+$load-more-default: (
+	height: 60rpx,
+	space: 40rpx,
+	color: #ccc,
+	font-size: UTILS__GLOBAL_VAR(font-size, normal),
+);
+$load-more: map.merge($load-more-default, $load-more);

package/components/load-more/load-more.vue

@@ -1,5 +1,5 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['LoadMore']]">
 		<template v-if="end">
 			<view :class="$style['LoadMore--content']">{{ endTitle }}</view>
 		</template>
@@ -11,46 +11,46 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'LoadMore',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	components: { IconCpn },
-	mixins: [componentName],
-	props: {
-		/** 是否到最后一页 */
-		end: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否加载中 */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/** 到最后一页时文本 */
-		endTitle: {
-			type: String,
-			default: '没有更多了',
-		},
-	},
+});
+
+const classNames = useClassNames('load-more');
+
+type _Props = {
+	/** 是否加载中 */
+	loading?: boolean;
+	/** 是否到最后一页 */
+	end?: boolean;
+	/** 到最后一页时文本 */
+	endTitle?: string;
 };
+
+withDefaults(defineProps<_Props>(), {
+	loading: false,
+	end: false,
+	endTitle: '没有更多了',
+});
+
+defineEmits<{
+	(event: 'load-more'): void;
+}>();
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './load-more' as *;
 
 // 定义外部变量
-$component-name: 'load-more';
-$component-vars: $load-more;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($load-more, 'load-more');
 }
 
 .LoadMore {

package/components/loading/animations/loading-animation1.vue

@@ -1,21 +1,21 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['LoadingAnimation1']]">
 		<view :class="$style['LoadingAnimation1--dot']"></view>
 		<view :class="$style['LoadingAnimation1--dot']"></view>
 	</view>
 </template>
 
-<script>
-import componentName from '../../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../../composable/component-name';
 
-export default {
-	name: 'LoadingAnimation1',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	mixins: [componentName],
-};
+});
+
+const classNames = useClassNames('loading-animation1');
 </script>
 
 <style lang="scss" module>

package/components/loading/animations/loading-animation2.vue

@@ -1,22 +1,21 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['LoadingAnimation2']]">
 		<icon-cpn icon="loading" :class="$style['LoadingAnimation2--icon']" />
 	</view>
 </template>
 
-<script>
-import componentName from '../../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../../composable/component-name';
 import IconCpn from '../../icon/icon.vue';
 
-export default {
-	name: 'LoadingAnimation2',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	components: { IconCpn },
-	mixins: [componentName],
-};
+});
+
+const classNames = useClassNames('loading-animation2');
 </script>
 
 <style lang="scss" module>

package/components/loading/animations/loading-animation3.vue

@@ -1,20 +1,20 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['LoadingAnimation3']]">
 		<view :class="$style['LoadingAnimation3--animation']"></view>
 	</view>
 </template>
 
-<script>
-import componentName from '../../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../../composable/component-name';
 
-export default {
-	name: 'LoadingAnimation3',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	mixins: [componentName],
-};
+});
+
+const classNames = useClassNames('loading-animation3');
 </script>
 
 <style lang="scss" module>
@@ -45,9 +45,9 @@ export default {
 		border-radius: 50%;
 		box-shadow: $left-x $translate-y 0 $size-s, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
 		translate: 0 (-1 * $translate-y);
-		animation: loading-dots 1.5s infinite linear;
+		animation: LoadingAnimation3--loading-dots 1.5s infinite linear;
 
-		@keyframes loading-dots {
+		@keyframes LoadingAnimation3--loading-dots {
 			15% {
 				box-shadow: $left-x $translate-y 0 $size-l, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
 			}
@@ -62,7 +62,7 @@ export default {
 			}
 		}
 
-		// @keyframes loading-dots2 {
+		// @keyframes LoadingAnimation3--loading-dots2 {
 		// 	25% {
 		// 		box-shadow: $left-x $translate-y 0 $size-l, 0 $translate-y 0 $size-s, $right-x $translate-y 0 $size-s;
 		// 	}