uview-ultra-plus 1.0.0

package/uview-ultra/components/up-back-top/props.js

@@ -0,0 +1,56 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from './backtop.js'
+export const props = defineMixin({
+    props: {
+        // 返回顶部的形状，circle-圆形，square-方形
+        mode: {
+            type: String,
+            default: () => defProps.backtop.mode
+        },
+        // 自定义图标
+        icon: {
+            type: String,
+            default: () => defProps.backtop.icon
+        },
+        // 提示文字
+        text: {
+            type: String,
+            default: () => defProps.backtop.text
+        },
+        // 返回顶部滚动时间
+        duration: {
+            type: [String, Number],
+            default: () => defProps.backtop.duration
+        },
+        // 滚动距离
+        scrollTop: {
+            type: [String, Number],
+            default: () => defProps.backtop.scrollTop
+        },
+        // 距离顶部多少距离显示，单位px
+        top: {
+            type: [String, Number],
+            default: () => defProps.backtop.top
+        },
+        // 返回顶部按钮到底部的距离，单位px
+        bottom: {
+            type: [String, Number],
+            default: () => defProps.backtop.bottom
+        },
+        // 返回顶部按钮到右边的距离，单位px
+        right: {
+            type: [String, Number],
+            default: () => defProps.backtop.right
+        },
+        // 层级
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.backtop.zIndex
+        },
+        // 图标的样式，对象形式
+        iconStyle: {
+            type: Object,
+            default: () => defProps.backtop.iconStyle
+        }
+    }
+})

package/uview-ultra/components/up-back-top/props.uts

@@ -0,0 +1,57 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './backtop'
+let crtProp = defProps['backtop'] as UTSJSONObject
+export const propsBacktop = defineMixin({
+    props: {
+        // 返回顶部的形状，circle-圆形，square-方形
+        mode: {
+            type: String,
+            default: crtProp['mode']
+        },
+        // 自定义图标
+        icon: {
+            type: String,
+            default: crtProp['icon']
+        },
+        // 提示文字
+        text: {
+            type: String,
+            default: crtProp['text']
+        },
+        // 返回顶部滚动时间
+        duration: {
+            type: [String, Number],
+            default: crtProp['duration']
+        },
+        // 滚动距离
+        scrollTop: {
+            type: [String, Number],
+            default: crtProp['scrollTop']
+        },
+        // 距离顶部多少距离显示，单位px
+        top: {
+            type: [String, Number],
+            default: crtProp['top']
+        },
+        // 返回顶部按钮到底部的距离，单位px
+        bottom: {
+            type: [String, Number],
+            default: crtProp['bottom']
+        },
+        // 返回顶部按钮到右边的距离，单位px
+        right: {
+            type: [String, Number],
+            default: crtProp['right']
+        },
+        // 层级
+        zIndex: {
+            type: [String, Number],
+            default: crtProp['zIndex']
+        },
+        // 图标的样式，对象形式
+        iconStyle: {
+            type: Object,
+            default: crtProp['iconStyle']
+        }
+    }
+})

package/uview-ultra/components/up-back-top/up-back-top.uvue

@@ -0,0 +1,157 @@
+<template>
+	<up-transition
+	    mode="fade"
+	    :customStyle="backTopStyle"
+	    :show="show"
+	>
+		<view
+		    class="up-back-top"
+			:style="[contentStyle]"
+		    v-if="$slots['default'] == null && $slots['$default'] == null"
+			@click="backToTop"
+		>
+			<up-icon
+			    :name="icon"
+			    :custom-style="iconStyle"
+			></up-icon>
+			<text
+			    v-if="text"
+			    class="up-back-top__text"
+			>{{text}}</text>
+		</view>
+		<slot v-else />
+	</up-transition>
+</template>
+
+<script setup lang="uts">
+	import { computed } from "vue";
+	import defProps from './backtop.uts';
+	import { addUnit, addStyle, getPx, deepMerge } from '../../libs/function/index';
+	
+	// 在 defineProps 中直接定义 props，参考 album 组件的实现
+	const prop = defineProps({
+		// 返回顶部的形状，circle-圆形，square-方形
+		mode: {
+			type: String,
+			default: defProps.getString('backtop.mode')
+		},
+		// 自定义图标
+		icon: {
+			type: String,
+			default: defProps.getString('backtop.icon')
+		},
+		// 提示文字
+		text: {
+			type: String,
+			default: defProps.getString('backtop.text')
+		},
+		// 返回顶部滚动时间
+		duration: {
+			type: [String, Number],
+			default: defProps.getNumber('backtop.duration')
+		},
+		// 滚动距离
+		scrollTop: {
+			type: [String, Number],
+			default: defProps.getNumber('backtop.scrollTop')
+		},
+		// 距离顶部多少距离显示，单位px
+		top: {
+			type: [String, Number],
+			default: defProps.getNumber('backtop.top')
+		},
+		// 返回顶部按钮到底部的距离，单位px
+		bottom: {
+			type: [String, Number],
+			default: defProps.getNumber('backtop.bottom')
+		},
+		// 返回顶部按钮到右边的距离，单位px
+		right: {
+			type: [String, Number],
+			default: defProps.getNumber('backtop.right')
+		},
+		// 层级
+		zIndex: {
+			type: [String, Number],
+			default: defProps.getNumber('backtop.zIndex')
+		},
+		// 图标的样式，对象形式
+		iconStyle: {
+			type: Object,
+			default: (): UTSJSONObject => {
+				return defProps.getAny('backtop.iconStyle') as UTSJSONObject ?? {}
+			}
+		},
+		// 定义需要用到的外部样式
+		customStyle: {
+			type: Object,
+			default: (): UTSJSONObject => ({})
+		}
+	});
+	
+	// 定义 emit
+	const emit = defineEmits(['click']);
+	
+	// 计算属性 - 动画组件样式
+	const backTopStyle = computed(() => {
+		const style = {
+			bottom: addUnit(prop.bottom),
+			right: addUnit(prop.right),
+			width: '40px',
+			height: '40px',
+			position: 'fixed',
+			zIndex: 10,
+		}
+		return style
+	});
+	
+	// 计算属性 - 是否显示
+	const show = computed(() => {
+		return parseInt(getPx(prop.scrollTop)) > parseInt(getPx(prop.top.toString()))
+	});
+	
+	// 计算属性 - 内容样式
+	const contentStyle = computed(() => {
+		const style = {}
+		let radius = '0px'
+		// 是否圆形
+		if(prop.mode === 'circle') {
+			radius = '100px'
+		} else {
+			radius = '4px'
+		}
+		style['borderRadius'] = radius
+		return deepMerge(style, addStyle(prop.customStyle))
+	});
+	
+	// 方法 - 返回顶部
+	function backToTop(e: any) {
+		uni.pageScrollTo({
+			scrollTop: 0,
+			duration: parseInt(prop.duration.toString())
+		});
+		emit('click', e)
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+     $up-back-top-flex:1 !default;
+     $up-back-top-height:100% !default;
+     $up-back-top-background-color:#E1E1E1 !default;
+     $up-back-top-tips-font-size:12px !default;
+	.up-back-top {
+		@include flex;
+		flex-direction: column;
+		align-items: center;
+		flex:$up-back-top-flex;
+		height: $up-back-top-height;
+		justify-content: center;
+		background-color: $up-back-top-background-color;
+
+		&__tips {
+			font-size:$up-back-top-tips-font-size;
+			transform: scale(0.8);
+		}
+	}
+</style>

package/uview-ultra/components/up-back-top/up-back-top.vue

@@ -0,0 +1,133 @@
+<template>
+	<up-transition
+	    mode="fade"
+	    :customStyle="backTopStyle"
+	    :show="show"
+	>
+		<view
+		    class="up-back-top"
+			:style="[contentStyle]"
+		    v-if="!$slots.default && !$slots.$default"
+			@click="backToTop"
+		>
+			<up-icon
+			    :name="icon"
+			    :custom-style="iconStyle"
+			></up-icon>
+			<text
+			    v-if="text"
+			    class="up-back-top__text"
+			>{{text}}</text>
+		</view>
+		<slot v-else />
+	</up-transition>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import { addUnit, addStyle, getPx, deepMerge, error } from '../../libs/function/index.js';
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule('dom')
+	// #endif
+	/**
+	 * backTop 返回顶部
+	 * @description 本组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/backTop.html
+	 * 
+	 * @property {String}			mode  		返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ）
+	 * @property {String} 			icon 		自定义图标 （默认 'arrow-upward' ） 见官方文档示例
+	 * @property {String} 			text 		提示文字 
+	 * @property {String | Number}  duration	返回顶部滚动时间 （默认 100）
+	 * @property {String | Number}  scrollTop	滚动距离 （默认 0 ）
+	 * @property {String | Number}  top  		距离顶部多少距离显示，单位px （默认 400 ）
+	 * @property {String | Number}  bottom  	返回顶部按钮到底部的距离，单位px （默认 100 ）
+	 * @property {String | Number}  right  		返回顶部按钮到右边的距离，单位px （默认 20 ）
+	 * @property {String | Number}  zIndex 		层级   （默认 9 ）
+	 * @property {Object<Object>}  	iconStyle 	图标的样式，对象形式   （默认 {color: '#909399',fontSize: '19px'}）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * 
+	 * @example <up-back-top :scrollTop="scrollTop"></up-back-top>
+	 */
+	export default {
+		name: 'up-back-top',
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			backTopStyle() {
+				// 动画组件样式
+				const style = {
+					bottom: addUnit(this.bottom),
+					right: addUnit(this.right),
+					width: '40px',
+					height: '40px',
+					position: 'fixed',
+					zIndex: 10,
+				}
+				return style
+			},
+			show() {
+				return getPx(this.scrollTop) > getPx(this.top)
+			},
+			contentStyle() {
+				const style = {}
+				let radius = 0
+				// 是否圆形
+				if(this.mode === 'circle') {
+					radius = '100px'
+				} else {
+					radius = '4px'
+				}
+				// 为了兼容安卓nvue，只能这么分开写
+				style.borderRadius = radius
+				style.borderTopRightRadius = radius
+				style.borderBottomLeftRadius = radius
+				style.borderBottomRightRadius = radius
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		},
+		emits: ["click"],
+		methods: {
+			backToTop() {
+				// #ifdef APP-NVUE
+				if (!this.$parent.$refs['up-back-top']) {
+					error(`nvue页面需要给页面最外层元素设置"ref='up-back-top'`)
+				}
+				dom.scrollToElement(this.$parent.$refs['up-back-top'], {
+					offset: 0
+				})
+				// #endif
+				
+				// #ifndef APP-NVUE
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: this.duration
+				});
+				// #endif
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+     $up-back-top-flex:1 !default;
+     $up-back-top-height:100% !default;
+     $up-back-top-background-color:#E1E1E1 !default;
+     $up-back-top-tips-font-size:12px !default;
+	.up-back-top {
+		@include flex;
+		flex-direction: column;
+		align-items: center;
+		flex:$up-back-top-flex;
+		height: $up-back-top-height;
+		justify-content: center;
+		background-color: $up-back-top-background-color;
+
+		&__tips {
+			font-size:$up-back-top-tips-font-size;
+			transform: scale(0.8);
+		}
+	}
+</style>

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

@@ -0,0 +1,27 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/badge.js
+ */
+export default {
+    // 徽标数组件
+    badge: {
+        isDot: false,
+        value: '',
+        show: true,
+        max: 999,
+        type: 'error',
+        showZero: false,
+        bgColor: null,
+        color: null,
+        shape: 'circle',
+        numberType: 'overflow',
+        offset: [],
+        inverted: false,
+        absolute: false
+    }
+}

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

@@ -0,0 +1,27 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/badge
+ */
+export default {
+    // 徽标数组件
+    badge: {
+        isDot: false,
+        value: '',
+        show: true,
+        max: 999,
+        type: 'error',
+        showZero: false,
+        bgColor: '',
+        color: '',
+        shape: 'circle',
+        numberType: 'overflow',
+        offset: [] as number[],
+        inverted: false,
+        absolute: false
+    }
+} as UTSJSONObject

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

@@ -0,0 +1,79 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 是否显示圆点
+        isDot: {
+            type: Boolean,
+            default: () => defProps.badge.isDot
+        },
+        // 显示的内容
+        value: {
+            type: [Number, String],
+            default: () => defProps.badge.value
+        },
+        // 显示的内容
+        modelValue: {
+            type: [Number, String],
+            default: () => defProps.badge.modelValue
+        },
+        // 是否显示
+        show: {
+            type: Boolean,
+            default: () => defProps.badge.show
+        },
+        // 最大值，超过最大值会显示 '{max}+'
+        max: {
+            type: [Number, String],
+            default: () => defProps.badge.max
+        },
+        // 主题类型，error|warning|success|primary
+        type: {
+            type: String,
+            default: () => defProps.badge.type
+        },
+        // 当数值为 0 时，是否展示 Badge
+        showZero: {
+            type: Boolean,
+            default: () => defProps.badge.showZero
+        },
+        // 背景颜色，优先级比type高，如设置，type参数会失效
+        bgColor: {
+            type: [String, null],
+            default: () => defProps.badge.bgColor
+        },
+        // 字体颜色
+        color: {
+            type: [String, null],
+            default: () => defProps.badge.color
+        },
+        // 徽标形状，circle-四角均为圆角，horn-左下角为直角
+        shape: {
+            type: String,
+            default: () => defProps.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.badge.numberType
+        },
+        // 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+        offset: {
+            type: Array,
+            default: () => defProps.badge.offset
+        },
+        // 是否反转背景和字体颜色
+        inverted: {
+            type: Boolean,
+            default: () => defProps.badge.inverted
+        },
+        // 是否绝对定位
+        absolute: {
+            type: Boolean,
+            default: () => defProps.badge.absolute
+        }
+    }
+})

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

@@ -0,0 +1,89 @@
+/*
+ * @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'
+import defProps from './badge'
+let crtProp = defProps['badge'] as UTSJSONObject
+
+export const propsBadge = defineMixin({
+    props: {
+        // 是否显示圆点
+        isDot: {
+            type: Boolean,
+            default: crtProp['isDot']
+        },
+        // 显示的内容
+        value: {
+            type: [Number, String],
+            default: crtProp['value']
+        },
+        // 显示的内容
+        modelValue: {
+            type: [Number, String],
+            default: crtProp['modelValue']
+        },
+        // 是否显示
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 最大值，超过最大值会显示 '{max}+'
+        max: {
+            type: [Number, String],
+            default: crtProp['max']
+        },
+        // 主题类型，error|warning|success|primary
+        type: {
+            type: String,
+            default: crtProp['type']
+        },
+        // 当数值为 0 时，是否展示 Badge
+        showZero: {
+            type: Boolean,
+            default: crtProp['showZero']
+        },
+        // 背景颜色，优先级比type高，如设置，type参数会失效
+        bgColor: {
+            type: [String],
+            default: crtProp['bgColor']
+        },
+        // 字体颜色
+        color: {
+            type: [String],
+            default: crtProp['color']
+        },
+        // 徽标形状，circle-四角均为圆角，horn-左下角为直角
+        shape: {
+            type: String,
+            default: crtProp['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: crtProp['numberType']
+        },
+        // 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+        offset: {
+            type: Array,
+            default: crtProp['offset']
+        },
+        // 是否反转背景和字体颜色
+        inverted: {
+            type: Boolean,
+            default: crtProp['inverted']
+        },
+        // 是否绝对定位
+        absolute: {
+            type: Boolean,
+            default: crtProp['absolute']
+        }
+    }
+})