uview-ultra-plus 1.0.0

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

@@ -0,0 +1,260 @@
+<template>
+	<text class="up-badge"
+		v-if="show && ((parseInt(value.toString()) == 0 ? showZero : true) || isDot)"
+		:class="[isDot ? 'up-badge--dot' : 'up-badge--not-dot',
+			inverted ? 'up-badge--inverted' : '',
+			shape === 'horn' ? 'up-badge--horn' : '',
+			inverted ? `up-badge--${type}--inverted` : `up-badge--${type}`]"
+		:style="[$upAddStyle(customStyle), badgeStyle]"
+	>{{ isDot ? '' : showValue }}</text>
+</template>
+
+<script setup lang="uts">
+	import type { PropType } from 'vue'
+	import { computed } from 'vue'
+	import { addUnit } from '../../libs/function/index';
+	import defProps from './badge.uts'
+	
+	/**
+	 * badge 徽标数
+	 * @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/badge.html
+	 * 
+	 * @property {Boolean} 			isDot 		是否显示圆点 （默认 false ）
+	 * @property {String | Number} 	value 		显示的内容
+	 * @property {Boolean} 			show 		是否显示 （默认 true ）
+	 * @property {String | Number} 	max 		最大值，超过最大值会显示 '{max}+'  （默认999）
+	 * @property {String} 			type 		主题类型，error|warning|success|primary （默认 'error' ）
+	 * @property {Boolean} 			showZero	当数值为 0 时，是否展示 Badge （默认 false ）
+	 * @property {String} 			bgColor 	背景颜色，优先级比type高，如设置，type参数会失效
+	 * @property {String} 			color 		字体颜色 （默认 '#ffffff' ）
+	 * @property {String} 			shape 		徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
+	 * @property {String} 			numberType	设置数字的显示方式，overflow|ellipsis|limit  （默认 'overflow' ）
+	 * @property {Array}} 			offset		设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+	 * @property {Boolean} 			inverted	是否反转背景和字体颜色（默认 false ）
+	 * @property {Boolean} 			absolute	是否绝对定位（默认 false ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @example <up-badge :type="type" :count="count"></up-badge>
+	 */
+	
+	// options
+	defineOptions({
+	  name: 'up-badge'
+	})
+
+	// props
+	const props = defineProps({
+		// 是否显示圆点
+		isDot: {
+			type: Boolean,
+			default: defProps.getBoolean('badge.isDot')
+		},
+		// 显示的内容
+		value: {
+			type: [Number, String],
+			default: defProps.getString('badge.value')
+		},
+		// 显示的内容
+		modelValue: {
+			type: [Number, String],
+			default: defProps.getString('badge.modelValue')
+		},
+		// 是否显示
+		show: {
+			type: Boolean,
+			default: defProps.getBoolean('badge.show')
+		},
+		// 最大值，超过最大值会显示 '{max}+'
+		max: {
+			type: [Number, String],
+			default: defProps.getNumber('badge.max')
+		},
+		// 主题类型，error|warning|success|primary
+		type: {
+			type: String,
+			default: defProps.getString('badge.type')
+		},
+		// 当数值为 0 时，是否展示 Badge
+		showZero: {
+			type: Boolean,
+			default: defProps.getBoolean('badge.showZero')
+		},
+		// 背景颜色，优先级比type高，如设置，type参数会失效
+		bgColor: {
+			type: String,
+			default: defProps.getString('badge.bgColor')
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: defProps.getString('badge.color')
+		},
+		// 徽标形状，circle-四角均为圆角，horn-左下角为直角
+		shape: {
+			type: String,
+			default: defProps.getString('badge.shape')
+		},
+		// 设置数字的显示方式，overflow|ellipsis|limit
+		// overflow会根据max字段判断，超出显示`${max}+`
+		// ellipsis会根据max判断，超出显示`${max}...`
+		// limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
+		numberType: {
+			type: String,
+			default: defProps.getString('badge.numberType')
+		},
+		// 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+		offset: {
+			type: Array as PropType<number[]>,
+			default: defProps.getArray<number>('badge.offset')
+		},
+		// 是否反转背景和字体颜色
+		inverted: {
+			type: Boolean,
+			default: defProps.getBoolean('badge.inverted')
+		},
+		// 是否绝对定位
+		absolute: {
+			type: Boolean,
+			default: defProps.getBoolean('badge.absolute')
+		}
+	})
+
+	// 整个组件的样式
+	const badgeStyle = computed(() => {
+		const style: UTSJSONObject = {}
+		if(props.color != '') {
+			style['color'] = props.color
+		}
+		if (props.bgColor != '' && !props.inverted) {
+			style['backgroundColor'] = props.bgColor
+		}
+		if (props.absolute) {
+			style['position'] = 'absolute'
+			let offsetArray = props.offset as number[]
+			// 如果有设置offset参数
+			if(offsetArray.length > 0) {
+				// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
+				const top = offsetArray[0]
+				style['top'] = addUnit(top)
+				if (offsetArray.length == 2) {
+					style['right'] = addUnit(offsetArray[1])
+				} else {
+					style['right'] = addUnit(top)
+				}
+			}
+		}
+		return style
+	})
+
+	// 显示值
+	const showValue = computed(():string => {
+		let valueReturn = ''
+		switch (props.numberType.toString()) {
+			case "overflow":
+				valueReturn = parseInt(props.value.toString()) > parseInt(props.max.toString()) ? props.max.toString() + "+" : props.value.toString()
+				break;
+			case "ellipsis":
+				valueReturn = parseInt(props.value.toString()) > parseInt(props.max.toString()) ? "..." : props.value.toString()
+				break;
+			case "limit":
+				valueReturn = parseInt(props.value.toString()) > 999
+						?
+							parseInt(props.value.toString()) >= 9999 ?
+							(Math.floor(parseInt(props.value.toString()) / 1e4 * 100) / 100).toString() + "w"
+							: (Math.floor(parseInt(props.value.toString()) / 1e3 * 100) / 100).toString() + "k"
+						: props.value.toString()
+				break;
+			default:
+				valueReturn = props.value.toString()
+		}
+		return valueReturn
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	$up-badge-primary: $up-primary !default;
+	$up-badge-error: $up-error !default;
+	$up-badge-success: $up-success !default;
+	$up-badge-info: $up-info !default;
+	$up-badge-warning: $up-warning !default;
+	$up-badge-dot-radius: 100px !default;
+	$up-badge-dot-size: 8px !default;
+	$up-badge-dot-right: 4px !default;
+	$up-badge-dot-top: 0 !default;
+	$up-badge-text-font-size: 11px !default;
+	$up-badge-text-right: 10px !default;
+	$up-badge-text-padding: 2px 5px !default;
+	$up-badge-text-align: center !default;
+	$up-badge-text-color: #FFFFFF !default;
+
+	.up-badge {
+		border-top-right-radius: $up-badge-dot-radius;
+		border-top-left-radius: $up-badge-dot-radius;
+		border-bottom-left-radius: $up-badge-dot-radius;
+		border-bottom-right-radius: $up-badge-dot-radius;
+		// @include flex;
+		line-height: $up-badge-text-font-size;
+		text-align: $up-badge-text-align;
+		font-size: $up-badge-text-font-size;
+		color: $up-badge-text-color;
+
+		&--dot {
+			height: $up-badge-dot-size;
+			width: $up-badge-dot-size;
+		}
+		
+		&--inverted {
+			font-size: 13px;
+		}
+		
+		&--not-dot {
+			padding: $up-badge-text-padding;
+		}
+
+		&--horn {
+			border-bottom-left-radius: 0;
+		}
+
+		&--primary {
+			background-color: $up-badge-primary;
+		}
+		
+		&--primary--inverted {
+			color: $up-badge-primary;
+		}
+
+		&--error {
+			background-color: $up-badge-error;
+		}
+		
+		&--error--inverted {
+			color: $up-badge-error;
+		}
+
+		&--success {
+			background-color: $up-badge-success;
+		}
+		
+		&--success--inverted {
+			color: $up-badge-success;
+		}
+
+		&--info {
+			background-color: $up-badge-info;
+		}
+		
+		&--info--inverted {
+			color: $up-badge-info;
+		}
+
+		&--warning {
+			background-color: $up-badge-warning;
+		}
+		
+		&--warning--inverted {
+			color: $up-badge-warning;
+		}
+	}
+</style>

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

@@ -0,0 +1,179 @@
+<template>
+	<text class="up-badge"
+		v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
+		:class="[isDot ? 'up-badge--dot' : 'up-badge--not-dot',
+			inverted && 'up-badge--inverted',
+			shape === 'horn' && 'up-badge--horn',
+			inverted ? `up-badge--${type}--inverted` : `up-badge--${type}`]"
+		:style="[addStyle(customStyle), badgeStyle]"
+	>{{ isDot ? '' :showValue }}</text>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import { addStyle, addUnit } from '../../libs/function/index.js';
+	/**
+	 * badge 徽标数
+	 * @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/badge.html
+	 * 
+	 * @property {Boolean} 			isDot 		是否显示圆点 （默认 false ）
+	 * @property {String | Number} 	value 		显示的内容
+	 * @property {Boolean} 			show 		是否显示 （默认 true ）
+	 * @property {String | Number} 	max 		最大值，超过最大值会显示 '{max}+'  （默认999）
+	 * @property {String} 			type 		主题类型，error|warning|success|primary （默认 'error' ）
+	 * @property {Boolean} 			showZero	当数值为 0 时，是否展示 Badge （默认 false ）
+	 * @property {String} 			bgColor 	背景颜色，优先级比type高，如设置，type参数会失效
+	 * @property {String} 			color 		字体颜色 （默认 '#ffffff' ）
+	 * @property {String} 			shape 		徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
+	 * @property {String} 			numberType	设置数字的显示方式，overflow|ellipsis|limit  （默认 'overflow' ）
+	 * @property {Array}} 			offset		设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+	 * @property {Boolean} 			inverted	是否反转背景和字体颜色（默认 false ）
+	 * @property {Boolean} 			absolute	是否绝对定位（默认 false ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @example <up-badge :type="type" :count="count"></up-badge>
+	 */
+	export default {
+		name: 'up-badge',
+		mixins: [mpMixin, props, mixin],
+		computed: {
+			// 是否将badge中心与父组件右上角重合
+			boxStyle() {
+				let style = {};
+				return style;
+			},
+			// 整个组件的样式
+			badgeStyle() {
+				const style = {}
+				if(this.color) {
+					style.color = this.color
+				}
+				if (this.bgColor && !this.inverted) {
+					style.backgroundColor = this.bgColor
+				}
+				if (this.absolute) {
+					style.position = 'absolute'
+					// 如果有设置offset参数
+					if(this.offset.length) {
+						// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
+						const top = this.offset[0]
+						const right = this.offset[1] || top
+						style.top = addUnit(top)
+						style.right = addUnit(right)
+					}
+				}
+				return style
+			},
+			showValue() {
+				switch (this.numberType) {
+					case "overflow":
+						return Number(this.value) > Number(this.max) ? this.max + "+" : this.value
+						break;
+					case "ellipsis":
+						return Number(this.value) > Number(this.max) ? "..." : this.value
+						break;
+					case "limit":
+						return Number(this.value) > 999 ? Number(this.value) >= 9999 ?
+							Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value /
+								1e3 * 100) / 100 + "k" : this.value
+						break;
+					default:
+						return Number(this.value)
+				}
+			},
+		},
+		methods: {
+			addStyle
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	$up-badge-primary: $up-primary !default;
+	$up-badge-error: $up-error !default;
+	$up-badge-success: $up-success !default;
+	$up-badge-info: $up-info !default;
+	$up-badge-warning: $up-warning !default;
+	$up-badge-dot-radius: 100px !default;
+	$up-badge-dot-size: 8px !default;
+	$up-badge-dot-right: 4px !default;
+	$up-badge-dot-top: 0 !default;
+	$up-badge-text-font-size: 11px !default;
+	$up-badge-text-right: 10px !default;
+	$up-badge-text-padding: 2px 5px !default;
+	$up-badge-text-align: center !default;
+	$up-badge-text-color: #FFFFFF !default;
+
+	.up-badge {
+		border-top-right-radius: $up-badge-dot-radius;
+		border-top-left-radius: $up-badge-dot-radius;
+		border-bottom-left-radius: $up-badge-dot-radius;
+		border-bottom-right-radius: $up-badge-dot-radius;
+		@include flex;
+		line-height: $up-badge-text-font-size;
+		text-align: $up-badge-text-align;
+		font-size: $up-badge-text-font-size;
+		// color: $up-badge-text-color;
+
+		&--dot {
+			height: $up-badge-dot-size;
+			width: $up-badge-dot-size;
+		}
+		
+		&--inverted {
+			font-size: 13px;
+		}
+		
+		&--not-dot {
+			padding: $up-badge-text-padding;
+		}
+
+		&--horn {
+			border-bottom-left-radius: 0;
+		}
+
+		&--primary {
+			background-color: $up-badge-primary;
+		}
+		
+		&--primary--inverted {
+			color: $up-badge-primary;
+		}
+
+		&--error {
+			background-color: $up-badge-error;
+		}
+		
+		&--error--inverted {
+			color: $up-badge-error;
+		}
+
+		&--success {
+			background-color: $up-badge-success;
+		}
+		
+		&--success--inverted {
+			color: $up-badge-success;
+		}
+
+		&--info {
+			background-color: $up-badge-info;
+		}
+		
+		&--info--inverted {
+			color: $up-badge-info;
+		}
+
+		&--warning {
+			background-color: $up-badge-warning;
+		}
+		
+		&--warning--inverted {
+			color: $up-badge-warning;
+		}
+	}
+</style>

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

@@ -0,0 +1,24 @@
+/*
+ * @Author       : ly
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2026-02-02 23:54:58
+ * @LastAuthor   : ly
+ * @lastTime     : 2026-02-02 23:54:58
+ * @FilePath     : /uview-ultra/components/up-box/box.js
+ */
+export default {
+    // box 组件
+    box: {
+        bgColors: ['#EEFCFF', '#FCF8FF', '#FDF8F2'],
+        height: '160px',
+        borderRadius: '6px',
+        gap: '15px',
+        leftIcon: '',
+        leftTitle: '左',
+        rightTopIcon: '',
+        rightTopTitle: '右上',
+        rightBottomIcon: '',
+        rightBottomTitle: '右下'
+    }
+}

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

@@ -0,0 +1,24 @@
+/*
+ * @Author       : ly
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2026-02-02 23:54:58
+ * @LastAuthor   : ly
+ * @lastTime     : 2026-02-02 23:54:58
+ * @FilePath     : /uview-ultra/components/up-box/box.uts
+ */
+export default {
+    // box 组件
+    box: {
+        bgColors: ['#EEFCFF', '#FCF8FF', '#FDF8F2'],
+        height: '160px',
+        borderRadius: '6px',
+        gap: '15px',
+        leftIcon: '',
+        leftTitle: '左',
+        rightTopIcon: '',
+        rightTopTitle: '右上',
+        rightBottomIcon: '',
+        rightBottomTitle: '右下'
+    }
+}

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

@@ -0,0 +1,57 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from './box.js'
+
+export const props = defineMixin({
+    props: {
+        // 背景色
+        bgColors: {
+            type: [Array],
+            default: () => defProps.box.bgColors
+        },
+        // 高度
+        height: {
+            type: [String],
+            default: () => defProps.box.height
+        },
+        // 圆角
+        borderRadius: {
+            type: [String],
+            default: () => defProps.box.borderRadius
+        },
+        // 间隔
+        gap: {
+            type: [String],
+            default: () => defProps.box.gap
+        },
+        // 左侧图标
+        leftIcon: {
+            type: [String],
+            default: () => defProps.box.leftIcon
+        },
+        // 左侧文案
+        leftTitle: {
+            type: [String],
+            default: () => defProps.box.leftTitle
+        },
+        // 右上图标
+        rightTopIcon: {
+            type: [String],
+            default: () => defProps.box.rightTopIcon
+        },
+        // 右上文案
+        rightTopTitle: {
+            type: [String],
+            default: () => defProps.box.rightTopTitle
+        },
+        // 右下图标
+        rightBottomIcon: {
+            type: [String],
+            default: () => defProps.box.rightBottomIcon
+        },
+        // 右下文案
+        rightBottomTitle: {
+            type: [String],
+            default: () => defProps.box.rightBottomTitle
+        },
+    }
+})

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

@@ -0,0 +1,58 @@
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './box.uts'
+import { getString, getNumber, getBoolean, getArray } from '../../libs/function/index.uts'
+
+export const propsBox = defineMixin({
+    props: {
+        // 背景色
+        bgColors: {
+            type: Array,
+            default: () => getArray('box.bgColors')
+        },
+        // 高度
+        height: {
+            type: String,
+            default: () => getString('box.height')
+        },
+        // 圆角
+        borderRadius: {
+            type: String,
+            default: () => getString('box.borderRadius')
+        },
+        // 间隔
+        gap: {
+            type: String,
+            default: () => getString('box.gap')
+        },
+        // 左侧图标
+        leftIcon: {
+            type: String,
+            default: () => getString('box.leftIcon')
+        },
+        // 左侧文案
+        leftTitle: {
+            type: String,
+            default: () => getString('box.leftTitle')
+        },
+        // 右上图标
+        rightTopIcon: {
+            type: String,
+            default: () => getString('box.rightTopIcon')
+        },
+        // 右上文案
+        rightTopTitle: {
+            type: String,
+            default: () => getString('box.rightTopTitle')
+        },
+        // 右下图标
+        rightBottomIcon: {
+            type: String,
+            default: () => getString('box.rightBottomIcon')
+        },
+        // 右下文案
+        rightBottomTitle: {
+            type: String,
+            default: () => getString('box.rightBottomTitle')
+        },
+    }
+})