uview-ultra-plus 1.0.0

package/uview-ultra/components/up-empty/up-empty.uvue

@@ -0,0 +1,179 @@
+<template>
+	<view
+	    class="up-empty"
+	    :style="[emptyStyle, $up.addStyle(customStyle)]"
+	    v-if="show"
+	>
+		<up-icon
+		    v-if="!isSrc"
+		    :name="mode === 'message' ? 'chat' : `empty-${mode}`"
+		    :size="iconSize"
+		    :color="iconColor"
+		    margin-top="14"
+		></up-icon>
+		<image
+		    v-else
+		    :style="{
+				width: $up.addUnit(width),
+				height: $up.addUnit(height),
+			}"
+		    :src="icon"
+		    mode="widthFix"
+		></image>
+		<text
+		    class="up-empty__text"
+		    :style="[textStyle]"
+		>{{text != '' ? text : icons[mode]}}</text>
+		<view class="up-empty__wrap" v-if="$slots['default'] != null || $slots['$default'] != null">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { computed, getCurrentInstance } from 'vue'
+import { mpSharedMpOptions } from '../../libs/composable/useMp'
+import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI'
+import { addUnit, addStyle } from '../../libs/function/index.uts'
+import { t } from '../../libs/i18n/index.uts'
+import defProps from './empty.uts'
+
+const instance = getCurrentInstance()!.proxy!
+
+// options
+defineOptions({
+	name: "up-empty"
+})
+
+// props
+const props = defineProps({
+	// 内置图标名称，或图片路径，建议绝对路径
+	icon: {
+		type: String,
+		default: defProps.getString('empty.icon')
+	},
+	// 提示文字
+	text: {
+		type: String,
+		default: defProps.getString('empty.text')
+	},
+	// 文字颜色
+	textColor: {
+		type: String,
+		default: defProps.getString('empty.textColor')
+	},
+	// 文字大小
+	textSize: {
+		type: [String, Number],
+		default: defProps.getNumber('empty.textSize')
+	},
+	// 图标的颜色
+	iconColor: {
+		type: String,
+		default: defProps.getString('empty.iconColor')
+	},
+	// 图标的大小
+	iconSize: {
+		type: [String, Number],
+		default: defProps.getNumber('empty.iconSize')
+	},
+	// 选择预置的图标类型
+	mode: {
+		type: String,
+		default: defProps.getString('empty.mode')
+	},
+	// 图标宽度，单位px
+	width: {
+		type: [String, Number],
+		default: defProps.getNumber('empty.width')
+	},
+	// 图标高度，单位px
+	height: {
+		type: [String, Number],
+		default: defProps.getNumber('empty.height')
+	},
+	// 是否显示组件
+	show: {
+		type: Boolean,
+		default: defProps.getBoolean('empty.show')
+	},
+	// 组件距离上一个元素之间的距离，默认px单位
+	marginTop: {
+		type: [String, Number],
+		default: defProps.getNumber('empty.marginTop')
+	},
+	// 自定义样式
+	// ...commonProps
+})
+
+// 定义 emits
+const emit = defineEmits(["click", "close"])
+
+// 数据
+const icons = {
+	car: t("up.empty.car"),
+	page: t("up.empty.page"),
+	search: t("up.empty.search"),
+	address: t("up.empty.address"),
+	wifi: t("up.empty.wifi"),
+	order: t("up.empty.order"),
+	coupon: t("up.empty.coupon"),
+	favor: t("up.empty.favor"),
+	permission: t("up.empty.permission"),
+	history: t("up.empty.history"),
+	news: t("up.empty.news"),
+	message: t("up.empty.message"),
+	list: t("up.empty.list"),
+	data: t("up.empty.data"),
+	comment: t("up.empty.comment"),
+}
+
+// 计算属性
+// 组件样式
+const emptyStyle = computed(() => {
+	const style = {}
+	style['marginTop'] = addUnit(props.marginTop)
+	// 合并customStyle样式
+	return style
+})
+
+// 文本样式
+const textStyle = computed(() => {
+	const style = {}
+	style['color'] = props.textColor
+	style['fontSize'] = addUnit(props.textSize)
+	return style
+})
+
+// 判断icon是否图片路径
+const isSrc = computed(() => {
+	// @ts-ignore
+	return props.icon.indexOf('/') >= 0
+})
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	$up-empty-text-margin-top:20rpx !default;
+	$up-empty-slot-margin-top:20rpx !default;
+
+	.up-empty {
+		@include flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		&__text {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			margin-top: $up-empty-text-margin-top;
+		}
+	}
+	.up-slot-wrap {
+		@include flex;
+		justify-content: center;
+		align-items: center;
+		margin-top:$up-empty-slot-margin-top;
+	}
+</style>

package/uview-ultra/components/up-empty/up-empty.vue

@@ -0,0 +1,133 @@
+<template>
+	<view
+	    class="up-empty"
+	    :style="[emptyStyle]"
+	    v-if="show"
+	>
+		<up-icon
+		    v-if="!isSrc"
+		    :name="mode === 'message' ? 'chat' : `empty-${mode}`"
+		    :size="iconSize"
+		    :color="iconColor"
+		    margin-top="14"
+		></up-icon>
+		<image
+		    v-else
+		    :style="{
+				width: addUnit(width),
+				height: addUnit(height),
+			}"
+		    :src="icon"
+		    mode="widthFix"
+		></image>
+		<text
+		    class="up-empty__text"
+		    :style="[textStyle]"
+		>{{text ? text : icons[mode]}}</text>
+		<view class="up-empty__wrap" v-if="$slots.default || $slots.$default">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
+	import { t } from '../../libs/i18n'
+	/**
+	 * empty 内容为空
+	 * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/empty.html
+	 * @property {String}			icon		内置图标名称，或图片路径，建议绝对路径
+	 * @property {String}			text		提示文字
+	 * @property {String}			textColor	文字颜色 (默认 '#c0c4cc' )
+	 * @property {String | Number}	textSize	文字大小 （默认 14 ）
+	 * @property {String}			iconColor	图标的颜色 （默认 '#c0c4cc' ）
+	 * @property {String | Number}	iconSize	图标的大小 （默认 90 ）
+	 * @property {String}			mode		选择预置的图标类型 （默认 'data' ）
+	 * @property {String | Number}	width		图标宽度，单位px （默认 160 ）
+	 * @property {String | Number}	height		图标高度，单位px （默认 160 ）
+	 * @property {Boolean}			show		是否显示组件 （默认 true ）
+	 * @property {String | Number}	marginTop	组件距离上一个元素之间的距离，默认px单位 （默认 0 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * 
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
+	 * @example <up-empty text="所谓伊人，在水一方" mode="list"></up-empty>
+	 */
+	export default {
+		name: "up-empty",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				icons: {
+					car: t("up.empty.car"),
+					page: t("up.empty.page"),
+					search: t("up.empty.search"),
+					address: t("up.empty.address"),
+					wifi: t("up.empty.wifi"),
+					order: t("up.empty.order"),
+					coupon: t("up.empty.coupon"),
+					favor: t("up.empty.favor"),
+					permission: t("up.empty.permission"),
+					history: t("up.empty.history"),
+					news: t("up.empty.news"),
+					message: t("up.empty.message"),
+					list: t("up.empty.list"),
+					data: t("up.empty.data"),
+					comment: t("up.empty.comment"),
+				}
+			}
+		},
+		computed: {
+			// 组件样式
+			emptyStyle() {
+				const style = {}
+				style.marginTop = addUnit(this.marginTop)
+				// 合并customStyle样式，此参数通过mixin中的props传递
+				return deepMerge(addStyle(this.customStyle), style)
+			},
+			// 文本样式
+			textStyle() {
+				const style = {}
+				style.color = this.textColor
+				style.fontSize = addUnit(this.textSize)
+				return style
+			},
+			// 判断icon是否图片路径
+			isSrc() {
+				return this.icon.indexOf('/') >= 0
+			}
+		},
+		methods: {
+			addUnit
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$up-empty-text-margin-top:20rpx !default;
+	$up-empty-slot-margin-top:20rpx !default;
+
+	.up-empty {
+		@include flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		&__text {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			margin-top: $up-empty-text-margin-top;
+		}
+	}
+		.up-slot-wrap {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			margin-top:$up-empty-slot-margin-top;
+		}
+</style>

package/uview-ultra/components/up-form/form.js

@@ -0,0 +1,22 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-08 12:49:49
+ * @FilePath     : /uview-ultra/libs/config/props/form.js
+ */
+export default {
+    // form 组件
+    form: {
+        model: {},
+        rules: {},
+        errorType: 'message',
+        borderBottom: true,
+        labelPosition: 'left',
+        labelWidth: 45,
+        labelAlign: 'left',
+        labelStyle: {}
+    }
+}

package/uview-ultra/components/up-form/form.uts

@@ -0,0 +1,22 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ * @FilePath     : /uview-ultra/libs/config/props/form.uts
+ */
+export default {
+    // form 组件
+    form: {
+        model: {},
+        rules: {},
+        errorType: 'message',
+        borderBottom: true,
+        labelPosition: 'left',
+        labelWidth: 45,
+        labelAlign: 'left',
+        labelStyle: {}
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-form/props.js

@@ -0,0 +1,47 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 当前form的需要验证字段的集合
+        model: {
+            type: Object,
+            default: () => defProps.form.model
+        },
+        // 验证规则
+        rules: {
+            type: [Object, Function, Array],
+            default: () => defProps.form.rules
+        },
+        // 有错误时的提示方式，message-提示信息，toast-进行toast提示
+        // border-bottom-下边框呈现红色，none-无提示
+        errorType: {
+            type: String,
+            default: () => defProps.form.errorType
+        },
+        // 是否显示表单域的下划线边框
+        borderBottom: {
+            type: Boolean,
+            default: () => defProps.form.borderBottom
+        },
+        // label的位置，left-左边，top-上边
+        labelPosition: {
+            type: String,
+            default: () => defProps.form.labelPosition
+        },
+        // label的宽度，单位px
+        labelWidth: {
+            type: [String, Number],
+            default: () => defProps.form.labelWidth
+        },
+        // lable字体的对齐方式
+        labelAlign: {
+            type: String,
+            default: () => defProps.form.labelAlign
+        },
+        // lable的样式，对象形式
+        labelStyle: {
+            type: Object,
+            default: () => defProps.form.labelStyle
+        }
+    }
+})

package/uview-ultra/components/up-form/props.uts

@@ -0,0 +1,57 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './form.uts'
+let formProp = defProps['form'] as UTSJSONObject
+
+export const propsForm = defineMixin({
+    props: {
+        // 当前form的需要验证字段的集合
+        model: {
+            type: UTSJSONObject,
+            default: () => formProp['model']
+        },
+        // 验证规则
+        rules: {
+            type: [UTSJSONObject, Function, Array],
+            default: () => formProp['rules']
+        },
+        // 有错误时的提示方式，message-提示信息，toast-进行toast提示
+        // border-bottom-下边框呈现红色，none-无提示
+        errorType: {
+            type: String,
+            default: formProp['errorType']
+        },
+        // 是否显示表单域的下划线边框
+        borderBottom: {
+            type: Boolean,
+            default: formProp['borderBottom']
+        },
+        // label的位置，left-左边，top-上边
+        labelPosition: {
+            type: String,
+            default: formProp['labelPosition']
+        },
+        // label的宽度，单位px
+        labelWidth: {
+            type: [String, Number],
+            default: formProp['labelWidth']
+        },
+        // lable字体的对齐方式
+        labelAlign: {
+            type: String,
+            default: formProp['labelAlign']
+        },
+        // lable的样式，对象形式
+        labelStyle: {
+            type: UTSJSONObject,
+            default: formProp['labelStyle']
+        }
+    }
+});