create-koa-boot 1.0.0

package/templates/example/uniapp/uni_modules/uv-number-box/components/uv-number-box/uv-number-box.vue

@@ -0,0 +1,395 @@
+<template>
+	<view class="uv-number-box">
+		<view
+		  class="uv-number-box__slot"
+		  @tap.stop="clickHandler('minus')"
+		  @touchstart="onTouchStart('minus')"
+		  @touchend.stop="clearTimeout"
+		  v-if="showMinus && $slots.minus"
+		>
+			<slot name="minus" />
+		</view>
+		<view
+		  v-else-if="showMinus"
+		  class="uv-number-box__minus"
+		  @tap.stop="clickHandler('minus')"
+		  @touchstart="onTouchStart('minus')"
+		  @touchend.stop="clearTimeout"
+		  hover-class="uv-number-box__minus--hover"
+		  hover-stay-time="150"
+		  :class="{ 'uv-number-box__minus--disabled': isDisabled('minus') }"
+		  :style="[buttonStyle('minus')]"
+		>
+			<uv-icon
+			  name="minus"
+			  :color="isDisabled('minus') ? '#c8c9cc' : '#323233'"
+			  size="15"
+			  bold
+				:customStyle="iconStyle"
+			></uv-icon>
+		</view>
+		<slot name="input">
+			<input
+			  :disabled="disabledInput || disabled"
+			  :cursor-spacing="getCursorSpacing"
+			  :class="{ 'uv-number-box__input--disabled': disabled || disabledInput }"
+			  v-model="currentValue"
+			  class="uv-number-box__input"
+			  @blur="onBlur"
+			  @focus="onFocus"
+			  @input="onInput"
+			  type="number"
+			  :style="[inputStyle]"
+			/>
+		</slot>
+		<view
+		  class="uv-number-box__slot"
+		  @tap.stop="clickHandler('plus')"
+		  @touchstart="onTouchStart('plus')"
+		  @touchend.stop="clearTimeout"
+		  v-if="showPlus && $slots.plus"
+		>
+			<slot name="plus" />
+		</view>
+		<view
+		  v-else-if="showPlus"
+		  class="uv-number-box__plus"
+		  @tap.stop="clickHandler('plus')"
+		  @touchstart="onTouchStart('plus')"
+		  @touchend.stop="clearTimeout"
+		  hover-class="uv-number-box__plus--hover"
+		  hover-stay-time="150"
+		  :class="{ 'uv-number-box__minus--disabled': isDisabled('plus') }"
+		  :style="[buttonStyle('plus')]"
+		>
+			<uv-icon
+			  name="plus"
+			  :color="isDisabled('plus') ? '#c8c9cc' : '#323233'"
+			  size="15"
+			  bold
+				:customStyle="iconStyle"
+			></uv-icon>
+		</view>
+	</view>
+</template>
+<script>
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * numberBox 步进器
+	 * @description 该组件一般用于商城购物选择物品数量的场景。
+	 * @tutorial https://www.uvui.cn/components/numberBox.html
+	 * @property {String | Number}	value / v-model			用于双向绑定的值，初始化时设置设为默认min值(最小值)  （默认 0 ）
+	 * @property {String | Number}	name			步进器标识符，在change回调返回
+	 * @property {String | Number}	min				最小值 （默认 1 ）
+	 * @property {String | Number}	max				最大值 （默认 Number.MAX_SAFE_INTEGER ）
+	 * @property {String | Number}	step			加减的步长，可为小数 （默认 1 ）
+	 * @property {Boolean}			integer			是否只允许输入整数 （默认 false ）
+	 * @property {Boolean}			disabled		是否禁用，包括输入框，加减按钮 （默认 false ）
+	 * @property {Boolean}			disabledInput	是否禁用输入框 （默认 false ）
+	 * @property {Boolean}			asyncChange		是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
+	 * @property {String | Number}	inputWidth		输入框宽度，单位为px （默认 35 ）
+	 * @property {Boolean}			showMinus		是否显示减少按钮 （默认 true ）
+	 * @property {Boolean}			showPlus		是否显示增加按钮 （默认 true ）
+	 * @property {String | Number}	decimalLength	显示的小数位数
+	 * @property {Boolean}			longPress		是否开启长按加减手势 （默认 true ）
+	 * @property {String}			color			输入框文字和加减按钮图标的颜色 （默认 '#323233' ）
+	 * @property {String | Number}	buttonSize		按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致 （默认 30 ）
+	 * @property {String}			bgColor			输入框和按钮的背景颜色 （默认 '#EBECEE' ）
+	 * @property {String | Number}	cursorSpacing	指定光标于键盘的距离，避免键盘遮挡输入框，单位px （默认 100 ）
+	 * @property {Boolean}			disablePlus		是否禁用增加按钮 （默认 false ）
+	 * @property {Boolean}			disableMinus	是否禁用减少按钮 （默认 false ）
+	 * @property {Object ｜ String}	iconStyle		加减按钮图标的样式
+	 * @event {Function}	onFocus	输入框活动焦点
+	 * @event {Function}	onBlur	输入框失去焦点
+	 * @event {Function}	onInput	输入框值发生变化
+	 * @event {Function}	onChange
+	 * @example <uv-number-box v-model="value" @change="valChange"></uv-number-box>
+	 */
+	export default {
+		name: 'uv-number-box',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				// 输入框实际操作的值
+				currentValue: '',
+				// 定时器
+				longPressTimer: null
+			}
+		},
+		watch: {
+			// 多个值之间，只要一个值发生变化，都要重新检查check()函数
+			watchChange(n) {
+				this.check()
+			},
+			value(newVal) {
+				if (newVal !== this.currentValue) {
+					this.currentValue = this.format(this.value)
+				}
+			},
+			modelValue(newVal) {
+				if (newVal !== this.currentValue) {
+					this.currentValue = this.format(this.modelValue)
+				}
+			}
+		},
+		computed: {
+			getCursorSpacing() {
+				// 判断传入的单位，如果为px单位，需要转成px
+				return this.$uv.getPx(this.cursorSpacing)
+			},
+			// 按钮的样式
+			buttonStyle() {
+				return (type) => {
+					const style = {
+						backgroundColor: this.bgColor,
+						height: this.$uv.addUnit(this.buttonSize),
+						color: this.color
+					}
+					if (this.isDisabled(type)) {
+						style.backgroundColor = '#f7f8fa'
+					}
+					return style
+				}
+			},
+			// 输入框的样式
+			inputStyle() {
+				const disabled = this.disabled || this.disabledInput
+				const style = {
+					color: this.color,
+					backgroundColor: this.bgColor,
+					height: this.$uv.addUnit(this.buttonSize),
+					width: this.$uv.addUnit(this.inputWidth)
+				}
+				return style
+			},
+			// 用于监听多个值发生变化
+			watchChange() {
+				return [this.integer, this.decimalLength, this.min, this.max]
+			},
+			isDisabled() {
+				return (type) => {
+					if (type === 'plus') {
+						// 在点击增加按钮情况下，判断整体的disabled，是否单独禁用增加按钮，以及当前值是否大于最大的允许值
+						return (
+							this.disabled ||
+							this.disablePlus ||
+							this.currentValue >= this.max
+						)
+					}
+					// 点击减少按钮同理
+					return (
+						this.disabled ||
+						this.disableMinus ||
+						this.currentValue <= this.min
+					)
+				}
+			},
+		},
+		created() {
+			this.init()
+		},
+		methods: {
+			init() {
+				const value = this.value || this.modelValue;
+				this.currentValue = this.format(value)
+			},
+			// 格式化整理数据，限制范围
+			format(value) {
+				value = this.filter(value)
+				// 如果为空字符串，那么设置为0，同时将值转为Number类型
+				value = value === '' ? 0 : +value
+				// 对比最大最小值，取在min和max之间的值
+				value = Math.max(Math.min(this.max, value), this.min)
+				// 如果设定了最大的小数位数，使用toFixed去进行格式化
+				if (this.decimalLength !== null) {
+					value = value.toFixed(this.decimalLength)
+				}
+				return value
+			},
+			// 过滤非法的字符
+			filter(value) {
+				// 只允许0-9之间的数字，"."为小数点，"-"为负数时候使用
+				value = String(value).replace(/[^0-9.-]/g, '')
+				// 如果只允许输入整数，则过滤掉小数点后的部分
+				if (this.integer && value.indexOf('.') !== -1) {
+					value = value.split('.')[0]
+				}
+				return value;
+			},
+			check() {
+				// 格式化了之后，如果前后的值不相等，那么设置为格式化后的值
+				const val = this.format(this.currentValue);
+				if (val !== this.currentValue) {
+					this.currentValue = val
+				}
+			},
+			// 输入框活动焦点
+			onFocus(event) {
+				this.$emit('focus', {
+					...event.detail,
+					name: this.name,
+				})
+			},
+			// 输入框失去焦点
+			onBlur(event) {
+				// 对输入值进行格式化
+				const value = this.format(event.detail.value)
+				// 发出blur事件
+				this.$emit(
+					'blur', {
+						...event.detail,
+						name: this.name,
+					}
+				)
+			},
+			// 输入框值发生变化
+			onInput(e) {
+				const {
+					value = ''
+				} = e.detail || {}
+				// 为空返回
+				if (value === '') return
+				let formatted = this.filter(value)
+				// 最大允许的小数长度
+				if (this.decimalLength !== null && formatted.indexOf('.') !== -1) {
+					const pair = formatted.split('.');
+					formatted = `${pair[0]}.${pair[1].slice(0, this.decimalLength)}`
+				}
+				formatted = this.format(formatted)
+				this.emitChange(formatted);
+			},
+			// 发出change事件
+			emitChange(value) {
+				// 如果开启了异步变更值，则不修改内部的值，需要用户手动在外部通过v-model变更
+				if (!this.asyncChange) {
+					this.$nextTick(() => {
+						this.$emit('input', value)
+						this.$emit('update:modelValue', value)
+						this.currentValue = value
+						this.$forceUpdate()
+					})
+				}
+				this.$emit('change', {
+					value,
+					name: this.name,
+				});
+			},
+			onChange() {
+				const {
+					type
+				} = this
+				if (this.isDisabled(type)) {
+					return this.$emit('overlimit', type)
+				}
+				const diff = type === 'minus' ? -this.step : +this.step
+				const value = this.format(this.add(+this.currentValue, diff))
+				this.emitChange(value)
+				this.$emit(type)
+			},
+			// 对值扩大后进行四舍五入，再除以扩大因子，避免出现浮点数操作的精度问题
+			add(num1, num2) {
+				const cardinal = Math.pow(10, 10);
+				return Math.round((num1 + num2) * cardinal) / cardinal
+			},
+			// 点击加减按钮
+			clickHandler(type) {
+				this.type = type
+				this.onChange()
+			},
+			longPressStep() {
+				// 每隔一段时间，重新调用longPressStep方法，实现长按加减
+				this.clearTimeout()
+				this.longPressTimer = setTimeout(() => {
+					this.onChange()
+					this.longPressStep()
+				}, 250);
+			},
+			onTouchStart(type) {
+				if (!this.longPress) return
+				this.clearTimeout()
+				this.type = type
+				// 一定时间后，默认达到长按状态
+				this.longPressTimer = setTimeout(() => {
+					this.onChange()
+					this.longPressStep()
+				}, 600)
+			},
+			// 触摸结束，清除定时器，停止长按加减
+			onTouchEnd() {
+				if (!this.longPress) return
+				this.clearTimeout()
+			},
+			// 清除定时器
+			clearTimeout() {
+				clearTimeout(this.longPressTimer)
+				this.longPressTimer = null
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
+	$uv-numberBox-hover-bgColor: #E6E6E6 !default;
+	$uv-numberBox-disabled-color: #c8c9cc !default;
+	$uv-numberBox-disabled-bgColor: #f7f8fa !default;
+	$uv-numberBox-plus-radius: 4px !default;
+	$uv-numberBox-minus-radius: 4px !default;
+	$uv-numberBox-input-text-align: center !default;
+	$uv-numberBox-input-font-size: 15px !default;
+	$uv-numberBox-input-padding: 0 !default;
+	$uv-numberBox-input-margin: 0 2px !default;
+	$uv-numberBox-input-disabled-color: #c8c9cc !default;
+	$uv-numberBox-input-disabled-bgColor: #f2f3f5 !default;
+	.uv-number-box {
+		@include flex(row);
+		align-items: center;
+		&__slot {
+			/* #ifndef APP-NVUE */
+			touch-action: none;
+			/* #endif */
+		}
+		&__plus,
+		&__minus {
+			width: 35px;
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			/* #ifndef APP-NVUE */
+			touch-action: none;
+			/* #endif */
+			&--hover {
+				background-color: $uv-numberBox-hover-bgColor !important;
+			}
+			&--disabled {
+				color: $uv-numberBox-disabled-color;
+				background-color: $uv-numberBox-disabled-bgColor;
+			}
+		}
+		&__plus {
+			border-top-right-radius: $uv-numberBox-plus-radius;
+			border-bottom-right-radius: $uv-numberBox-plus-radius;
+		}
+		&__minus {
+			border-top-left-radius: $uv-numberBox-minus-radius;
+			border-bottom-left-radius: $uv-numberBox-minus-radius;
+		}
+		&__input {
+			position: relative;
+			text-align: $uv-numberBox-input-text-align;
+			font-size: $uv-numberBox-input-font-size;
+			padding: $uv-numberBox-input-padding;
+			margin: $uv-numberBox-input-margin;
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			&--disabled {
+				color: $uv-numberBox-input-disabled-color;
+				background-color: $uv-numberBox-input-disabled-bgColor;
+			}
+		}
+	}
+</style>

package/templates/example/uniapp/uni_modules/uv-number-box/package.json

@@ -0,0 +1,88 @@
+{
+  "id": "uv-number-box",
+  "displayName": "uv-number-box 步进器  全面兼容小程序、nvue、vue2、vue3等多端",
+  "version": "1.0.2",
+  "description": "uv-number-box 该组件一般用于商城购物选择物品数量的场景。",
+  "keywords": [
+    "uv-number-box",
+    "uvui",
+    "uv-ui",
+    "number",
+    "步进器"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+    	"ads": "无",
+    	"data": "插件不采集任何数据",
+    	"permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uv-ui-tools",
+			"uv-icon"
+		],
+    "encrypt": [],
+    "platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "y",
+					"app-nvue": "y"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "y",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "y",
+					"百度": "y",
+					"字节跳动": "y",
+					"QQ": "y",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+  }
+}

package/templates/example/uniapp/uni_modules/uv-number-box/readme.md

@@ -0,0 +1,11 @@
+## NumberBox 步进器
+
+> **组件名：uv-number-box**
+
+该组件一般用于商城购物选择物品数量的场景。
+
+### <a href="https://www.uvui.cn/components/numberBox.html" target="_blank">查看文档</a>
+
+### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>

package/templates/example/uniapp/uni_modules/uv-overlay/changelog.md

@@ -0,0 +1,9 @@
+## 1.0.3（2023-07-02）
+uv-overlay  由于弹出层uv-transition的修改，组件内部做了相应的修改，参数不变。
+## 1.0.2（2023-06-29）
+1. 优化，H5端禁止穿透滚动
+## 1.0.1（2023-05-16）
+1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
+2. 优化部分功能
+## 1.0.0（2023-05-10）
+1. 新增uv-overlay组件

package/templates/example/uniapp/uni_modules/uv-overlay/components/uv-overlay/props.js

@@ -0,0 +1,25 @@
+export default {
+	props: {
+		// 是否显示遮罩
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 层级z-index
+		zIndex: {
+			type: [String, Number],
+			default: 10070
+		},
+		// 遮罩的过渡时间，单位为ms
+		duration: {
+			type: [String, Number],
+			default: 300
+		},
+		// 不透明度值，当做rgba的第四个参数
+		opacity: {
+			type: [String, Number],
+			default: 0.5
+		},
+		...uni.$uv?.props?.overlay
+	}
+}

package/templates/example/uniapp/uni_modules/uv-overlay/components/uv-overlay/uv-overlay.vue

@@ -0,0 +1,85 @@
+<template>
+	<uv-transition
+	  :show="show"
+		mode="fade"
+	  custom-class="uv-overlay"
+	  :duration="duration"
+	  :custom-style="overlayStyle"
+	  @click="clickHandler"
+		@touchmove.stop.prevent="clear"
+	>
+		<slot />
+	</uv-transition>
+</template>
+
+<script>
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from './props.js';
+
+	/**
+	 * overlay 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://www.uvui.cn/components/overlay.html
+	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
+	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
+	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
+	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击遮罩发送事件
+	 * @example <uv-overlay :show="show" @click="show = false"></uv-overlay>
+	 */
+	export default {
+		name: "uv-overlay",
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		watch: {
+			show(newVal){
+				// #ifdef H5
+				if(newVal){
+					document.querySelector('body').style.overflow = 'hidden';
+				}else{
+					document.querySelector('body').style.overflow = '';
+				}
+				// #endif
+			}
+		},
+		computed: {
+			overlayStyle() {
+				const style = {
+					position: 'fixed',
+					top: 0,
+					left: 0,
+					right: 0,
+					zIndex: this.zIndex,
+					bottom: 0,
+					'background-color': `rgba(0, 0, 0, ${this.opacity})`
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		},
+		methods: {
+			clickHandler() {
+				this.$emit('click')
+			},
+			clear() {}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+/* #ifndef APP-NVUE */
+$uv-overlay-top:0 !default;
+$uv-overlay-left:0 !default;
+$uv-overlay-width:100% !default;
+$uv-overlay-height:100% !default;
+$uv-overlay-background-color:rgba(0, 0, 0, .7) !default;
+.uv-overlay {
+	position: fixed;
+	top:$uv-overlay-top;
+	left:$uv-overlay-left;
+	width: $uv-overlay-width;
+	height:$uv-overlay-height;
+	background-color:$uv-overlay-background-color;
+}
+/* #endif */
+</style>

package/templates/example/uniapp/uni_modules/uv-overlay/package.json

@@ -0,0 +1,88 @@
+{
+  "id": "uv-overlay",
+  "displayName": "uv-overlay 遮罩层  全面兼容小程序、nvue、vue2、vue3等多端",
+  "version": "1.0.3",
+  "description": "uv-overlay 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景，uv-popup、uv-toast、uv-tooltip等组件就是用了该组件。",
+  "keywords": [
+    "uv-overlay",
+    "uvui",
+    "uv-ui",
+    "overlay",
+    "遮罩层"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+    	"ads": "无",
+    	"data": "插件不采集任何数据",
+    	"permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uv-ui-tools",
+			"uv-transition"
+		],
+    "encrypt": [],
+    "platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "y",
+					"app-nvue": "y"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "y",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "y",
+					"百度": "y",
+					"字节跳动": "y",
+					"QQ": "y",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+  }
+}