uview-ultra-plus 1.0.0

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

@@ -0,0 +1,217 @@
+<template>
+	<up-transition
+		mode="slide-down"
+		:customStyle="containerStyle"
+		:show="open"
+	>
+		<view
+			class="up-notify"
+			:class="[`up-notify--${tmpConfig.type}`]"
+			:style="[backgroundColor, addStyle(customStyle)]"
+		>
+			<up-status-bar v-if="tmpConfig.safeAreaInsetTop"></up-status-bar>
+			<view class="up-notify__warpper">
+				<slot name="icon">
+					<up-icon
+						v-if="['success', 'warning', 'error'].includes(tmpConfig.type)"
+						:name="tmpConfig.icon"
+						:color="tmpConfig.color"
+						:size="1.3 * tmpConfig.fontSize"
+						:customStyle="{marginRight: '4px'}"
+					></up-icon>
+				</slot>
+				<text
+					class="up-notify__warpper__text"
+					:style="{
+						fontSize: addUnit(tmpConfig.fontSize),
+						color: tmpConfig.color
+					}"
+				>{{ tmpConfig.message }}</text>
+			</view>
+		</view>
+	</up-transition>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import defProps from '../../libs/config/props.js'
+	import { addUnit, addStyle, deepMerge } from '../../libs/function/index.js';
+	/**
+	 * notify 顶部提示
+	 * @description 该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景
+	 * @tutorial
+	 * @property {String | Number}	top					到顶部的距离 ( 默认 0 )
+	 * @property {String}			type				主题，primary，success，warning，error ( 默认 'primary' )
+	 * @property {String}			color				字体颜色 ( 默认 '#ffffff' )
+	 * @property {String}			bgColor				背景颜色
+	 * @property {String}			message				展示的文字内容
+	 * @property {String | Number}	duration			展示时长，为0时不消失，单位ms ( 默认 3000 )
+	 * @property {String | Number}	fontSize			字体大小 ( 默认 15 )
+	 * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） ( 默认 false )
+	 * @property {Object}			customStyle			组件的样式，对象形式
+	 * @event {Function}	open	开启组件时调用的函数
+	 * @event {Function}	close	关闭组件式调用的函数
+	 * @example <up-notify message="Hi uView"></up-notify>
+	 */
+	export default {
+		name: 'up-notify',
+		mixins: [mpMixin, mixin,props],
+		data() {
+			return {
+				// 是否展示组件
+				open: false,
+				timer: null,
+				config: {
+					// 到顶部的距离
+					top: defProps.notify.top,
+					// type主题，primary，success，warning，error
+					type: defProps.notify.type,
+					// 字体颜色
+					color: defProps.notify.color,
+					// 背景颜色
+					bgColor: defProps.notify.bgColor,
+					// 展示的文字内容
+					message: defProps.notify.message,
+					// 展示时长，为0时不消失，单位ms
+					duration: defProps.notify.duration,
+					// 字体大小
+					fontSize: defProps.notify.fontSize,
+					// 是否留出顶部安全距离（状态栏高度）
+					safeAreaInsetTop: defProps.notify.safeAreaInsetTop
+				},
+				// 合并后的配置，避免多次调用组件后，可能会复用之前使用的配置参数
+				tmpConfig: {}
+			}
+		},
+		computed: {
+			containerStyle() {
+				let top = 0
+				if (this.tmpConfig.top === 0) {
+					// #ifdef H5
+					// H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+					// H5的导航栏高度为44px
+					top = 44
+					// #endif
+				}
+				const style = {
+					top: addUnit(this.tmpConfig.top === 0 ? top : this.tmpConfig.top),
+					// 因为组件底层为up-transition组件，必须将其设置为fixed定位
+					// 让其出现在导航栏底部
+					position: 'fixed',
+					left: 0,
+					right: 0,
+					zIndex: 10076
+				}
+				return style
+			},
+			// 组件背景颜色
+			backgroundColor() {
+				const style = {}
+				if (this.tmpConfig.bgColor) {
+					style.backgroundColor = this.tmpConfig.bgColor
+				}
+				return style
+			},
+			// 默认主题下的图标
+			icon() {
+				let icon
+				if (this.tmpConfig.type === 'success') {
+					icon = 'checkmark-circle'
+				} else if (this.tmpConfig.type === 'error') {
+					icon = 'close-circle'
+				} else if (this.tmpConfig.type === 'warning') {
+					icon = 'error-circle'
+				}
+				return icon
+			}
+		},
+		created() {
+			// 通过主题的形式调用toast，批量生成方法函数
+			['primary', 'success', 'error', 'warning'].map(item => {
+				this[item] = message => this.show({
+					type: item,
+					message
+				})
+			})
+		},
+		methods: {
+			addStyle,
+			addUnit,
+			show(options) {
+				// 不将结果合并到this.config变量，避免多次调用up-toast，前后的配置造成混乱
+				this.tmpConfig = deepMerge(this.config, options)
+				// 任何定时器初始化之前，都要执行清除操作，否则可能会造成混乱
+				this.clearTimer()
+				this.open = true
+				if (this.tmpConfig.duration > 0) {
+					this.timer = setTimeout(() => {
+						this.open = false
+						// 倒计时结束，清除定时器，隐藏toast组件
+						this.clearTimer()
+						// 判断是否存在callback方法，如果存在就执行
+						typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
+					}, this.tmpConfig.duration)
+				}
+			},
+			// 关闭notify
+			close() {
+				this.clearTimer()
+			},
+			clearTimer() {
+				this.open = false
+				// 清除定时器
+				clearTimeout(this.timer)
+				this.timer = null
+			}
+		},
+		beforeUnmount() {
+			this.clearTimer()
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	$up-notify-padding: 8px 10px !default;
+	$up-notify-text-font-size: 15px !default;
+	$up-notify-primary-bgColor: $up-primary !default;
+	$up-notify-success-bgColor: $up-success !default;
+	$up-notify-error-bgColor: $up-error !default;
+	$up-notify-warning-bgColor: $up-warning !default;
+
+
+	.up-notify {
+		padding: $up-notify-padding;
+
+		&__warpper {
+			@include flex;
+			align-items: center;
+			text-align: center;
+			justify-content: center;
+
+			&__text {
+				font-size: $up-notify-text-font-size;
+				text-align: center;
+			}
+		}
+
+		&--primary {
+			background-color: $up-notify-primary-bgColor;
+		}
+
+		&--success {
+			background-color: $up-notify-success-bgColor;
+		}
+
+		&--error {
+			background-color: $up-notify-error-bgColor;
+		}
+
+		&--warning {
+			background-color: $up-notify-warning-bgColor;
+		}
+	}
+</style>

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

@@ -0,0 +1,40 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2021-08-20 17:11:46
+ * @FilePath     : /uview-ultra/libs/config/props/numberBox.js
+ */
+export default {
+    // 步进器组件
+    numberBox: {
+        name: '',
+        value: 0,
+        min: 1,
+        max: Number.MAX_SAFE_INTEGER,
+        step: 1,
+        integer: false,
+        disabled: false,
+        disabledInput: false,
+        asyncChange: false,
+        inputWidth: 35,
+        showMinus: true,
+        showPlus: true,
+        decimalLength: null,
+        longPress: true,
+        color: '#323233',
+        buttonWidth: 30,
+        buttonSize: 30,
+        buttonRadius: '0px',
+        bgColor: '#EBECEE',
+        disabledBgColor: '#f7f8fa',
+        inputBgColor: '#EBECEE',
+        cursorSpacing: 100,
+        disableMinus: false,
+        disablePlus: false,
+        iconStyle: '',
+        miniMode: false
+    }
+}

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

@@ -0,0 +1,40 @@
+/*
+ * @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/numberBox.js
+ */
+export default {
+    // 步进器组件
+    numberBox: {
+        name: '',
+        value: 0,
+        min: 1,
+        max: 9999,
+        step: 1,
+        integer: false,
+        disabled: false,
+        disabledInput: false,
+        asyncChange: false,
+        inputWidth: 35,
+        showMinus: true,
+        showPlus: true,
+        decimalLength: 0,
+        longPress: true,
+        color: '#323233',
+        buttonWidth: 30,
+        buttonSize: 30,
+        buttonRadius: '0px',
+        bgColor: '#EBECEE',
+        disabledBgColor: '#f7f8fa',
+        inputBgColor: '#EBECEE',
+        cursorSpacing: 100,
+        disableMinus: false,
+        disablePlus: false,
+        iconStyle: '',
+        miniMode: false
+    }
+} as UTSJSONObject

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

@@ -0,0 +1,145 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 步进器标识符，在change回调返回
+        name: {
+            type: [String, Number],
+            default: () => defProps.numberBox.name
+        },
+        // #ifdef VUE2
+        // 用于双向绑定的值，初始化时设置设为默认min值(最小值)
+        value: {
+            type: [String, Number],
+            default: () => defProps.numberBox.value
+        },
+        // #endif
+        // #ifdef VUE3
+        // 用于双向绑定的值，初始化时设置设为默认min值(最小值)
+        modelValue: {
+            type: [String, Number],
+            default: () => defProps.numberBox.value
+        },
+        // #endif
+        // 最小值
+        min: {
+            type: [String, Number],
+            default: () => defProps.numberBox.min
+        },
+        // 最大值
+        max: {
+            type: [String, Number],
+            default: () => defProps.numberBox.max
+        },
+        // 加减的步长，可为小数
+        step: {
+            type: [String, Number],
+            default: () => defProps.numberBox.step
+        },
+        // 是否只允许输入整数
+        integer: {
+            type: Boolean,
+            default: () => defProps.numberBox.integer
+        },
+        // 是否禁用，包括输入框，加减按钮
+        disabled: {
+            type: Boolean,
+            default: () => defProps.numberBox.disabled
+        },
+        // 是否禁用输入框
+        disabledInput: {
+            type: Boolean,
+            default: () => defProps.numberBox.disabledInput
+        },
+        // 是否开启异步变更，开启后需要手动控制输入值
+        asyncChange: {
+            type: Boolean,
+            default: () => defProps.numberBox.asyncChange
+        },
+        // 输入框宽度，单位为px
+        inputWidth: {
+            type: [String, Number],
+            default: () => defProps.numberBox.inputWidth
+        },
+        // 是否显示减少按钮
+        showMinus: {
+            type: Boolean,
+            default: () => defProps.numberBox.showMinus
+        },
+        // 是否显示增加按钮
+        showPlus: {
+            type: Boolean,
+            default: () => defProps.numberBox.showPlus
+        },
+        // 显示的小数位数
+        decimalLength: {
+            type: [String, Number, null],
+            default: () => defProps.numberBox.decimalLength
+        },
+        // 是否开启长按加减手势
+        longPress: {
+            type: Boolean,
+            default: () => defProps.numberBox.longPress
+        },
+        // 输入框文字和加减按钮图标的颜色
+        color: {
+            type: String,
+            default: () => defProps.numberBox.color
+        },
+        // 按钮宽度
+        buttonWidth: {
+            type: [String, Number],
+            default: () => defProps.numberBox.buttonWidth
+        },
+        // 按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致
+        buttonSize: {
+            type: [String, Number],
+            default: () => defProps.numberBox.buttonSize
+        },
+        // 按钮圆角
+        buttonRadius: {
+            type: [String],
+            default: () => defProps.numberBox.buttonRadius
+        },
+        // 输入框和按钮的背景颜色
+        bgColor: {
+            type: String,
+            default: () => defProps.numberBox.bgColor
+        },
+        // 按钮禁用背景色
+        disabledBgColor: {
+            type: String,
+            default: () => defProps.numberBox.disabledBgColor
+        },
+        // 输入框背景颜色
+        inputBgColor: {
+            type: String,
+            default: () => defProps.numberBox.inputBgColor
+        },
+        // 指定光标于键盘的距离，避免键盘遮挡输入框，单位px
+        cursorSpacing: {
+            type: [String, Number],
+            default: () => defProps.numberBox.cursorSpacing
+        },
+        // 是否禁用增加按钮
+        disablePlus: {
+            type: Boolean,
+            default: () => defProps.numberBox.disablePlus
+        },
+        // 是否禁用减少按钮
+        disableMinus: {
+            type: Boolean,
+            default: () => defProps.numberBox.disableMinus
+        },
+        // 加减按钮图标的样式
+        iconStyle: {
+            type: [Object, String],
+            default: () => defProps.numberBox.iconStyle
+        },
+        // 迷你模式
+        miniMode: {
+            type: Boolean,
+            default: () => defProps.numberBox.miniMode
+        },
+    }
+})

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

@@ -0,0 +1,148 @@
+/*
+ * @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 './numberBox.uts'
+let numberBoxProp = defProps['numberBox'] as UTSJSONObject
+
+export const propsNumberBox = defineMixin({
+    props: {
+        // 步进器标识符，在change回调返回
+        name: {
+            type: [String, Number],
+            default: numberBoxProp['name']
+        },
+        // #ifdef VUE3
+        // 用于双向绑定的值，初始化时设置设为默认min值(最小值)
+        modelValue: {
+            type: [String, Number],
+            default: numberBoxProp['value']
+        },
+        // #endif
+        // 最小值
+        min: {
+            type: [String, Number],
+            default: numberBoxProp['min']
+        },
+        // 最大值
+        max: {
+            type: [String, Number],
+            default: numberBoxProp['max']
+        },
+        // 加减的步长，可为小数
+        step: {
+            type: [String, Number],
+            default: numberBoxProp['step']
+        },
+        // 是否只允许输入整数
+        integer: {
+            type: Boolean,
+            default: numberBoxProp['integer']
+        },
+        // 是否禁用，包括输入框，加减按钮
+        disabled: {
+            type: Boolean,
+            default: numberBoxProp['disabled']
+        },
+        // 是否禁用输入框
+        disabledInput: {
+            type: Boolean,
+            default: numberBoxProp['disabledInput']
+        },
+        // 是否开启异步变更，开启后需要手动控制输入值
+        asyncChange: {
+            type: Boolean,
+            default: numberBoxProp['asyncChange']
+        },
+        // 输入框宽度，单位为px
+        inputWidth: {
+            type: [String, Number],
+            default: numberBoxProp['inputWidth']
+        },
+        // 是否显示减少按钮
+        showMinus: {
+            type: Boolean,
+            default: numberBoxProp['showMinus']
+        },
+        // 是否显示增加按钮
+        showPlus: {
+            type: Boolean,
+            default: numberBoxProp['showPlus']
+        },
+        // 显示的小数位数
+        decimalLength: {
+            type: [String, Number],
+            default: numberBoxProp['decimalLength']
+        },
+        // 是否开启长按加减手势
+        longPress: {
+            type: Boolean,
+            default: numberBoxProp['longPress']
+        },
+        // 输入框文字和加减按钮图标的颜色
+        color: {
+            type: String,
+            default: numberBoxProp['color']
+        },
+        // 按钮宽度
+        buttonWidth: {
+            type: [String, Number],
+            default: numberBoxProp['buttonWidth']
+        },
+        // 按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致
+        buttonSize: {
+            type: [String, Number],
+            default: numberBoxProp['buttonSize']
+        },
+        // 按钮圆角
+        buttonRadius: {
+            type: [String],
+            default: numberBoxProp['buttonRadius']
+        },
+        // 输入框和按钮的背景颜色
+        bgColor: {
+            type: String,
+            default: numberBoxProp['bgColor']
+        },
+        // 按钮禁用背景色
+        disabledBgColor: {
+            type: String,
+            default: numberBoxProp['disabledBgColor']
+        },
+        // 输入框背景颜色
+        inputBgColor: {
+            type: String,
+            default: numberBoxProp['inputBgColor']
+        },
+        // 指定光标于键盘的距离，避免键盘遮挡输入框，单位px
+        cursorSpacing: {
+            type: [String, Number],
+            default: numberBoxProp['cursorSpacing']
+        },
+        // 是否禁用增加按钮
+        disablePlus: {
+            type: Boolean,
+            default: numberBoxProp['disablePlus']
+        },
+        // 是否禁用减少按钮
+        disableMinus: {
+            type: Boolean,
+            default: numberBoxProp['disableMinus']
+        },
+        // 加减按钮图标的样式
+        iconStyle: {
+            type: [UTSJSONObject, String],
+            default: numberBoxProp['iconStyle']
+        },
+        // 迷你模式
+        miniMode: {
+            type: Boolean,
+            default: numberBoxProp['miniMode']
+        },
+    }
+})