create-koa-boot 1.0.0

package/templates/example/uniapp/uni_modules/uv-index-list/components/uv-index-list/uv-index-list.vue

@@ -0,0 +1,461 @@
+<template>
+	<view class="uv-index-list">
+		<!-- #ifdef APP-NVUE -->
+		<list
+			:scrollTop="scrollTop"
+			enable-back-to-top
+			:offset-accuracy="1"
+			:style="{
+				maxHeight: $uv.addUnit(scrollViewHeight,'px')
+			}"
+			@scroll="scrollHandler"
+			ref="uvList"
+		>
+			<cell ref="header">
+				<slot name="header" />
+			</cell>
+			<slot />
+			<cell>
+				<slot name="footer" />
+			</cell>
+		</list>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<scroll-view
+			:scrollTop="scrollTop"
+			:scrollIntoView="scrollIntoView"
+			:offset-accuracy="1"
+			:style="{
+				maxHeight: $uv.addUnit(scrollViewHeight,'px')
+			}"
+			scroll-y
+			@scroll="scrollHandler"
+			ref="uvList"
+		>
+			<view>
+				<slot name="header" />
+			</view>
+			<slot />
+			<view>
+				<slot name="footer" />
+			</view>
+		</scroll-view>
+		<!-- #endif -->
+		<view
+			class="uv-index-list__letter"
+			ref="uv-index-list__letter"
+			:style="{ top: $uv.addUnit(letterInfo.top || 100 ,'px') }"
+			@touchstart="touchStart"
+			@touchmove.stop.prevent="touchMove"
+			@touchend.stop.prevent="touchEnd"
+			@touchcancel.stop.prevent="touchEnd"
+		>
+			<view
+				class="uv-index-list__letter__item"
+				v-for="(item, index) in uIndexList"
+				:key="index"
+				:style="{
+					backgroundColor: activeIndex === index ? activeColor : 'transparent'
+				}"
+			>
+				<text
+					class="uv-index-list__letter__item__index"
+					:style="{color: activeIndex === index ? '#fff' : inactiveColor}"
+				>{{ item }}</text>
+			</view>
+		</view>
+		<uv-transition
+			mode="fade"
+			:show="touching"
+			:customStyle="{
+				position: 'fixed',
+				right: '40px',
+				top: $uv.addUnit(indicatorTop,'px'),
+				zIndex: 2
+			}"
+		>
+			<view class="uv-index-list__indicator__box">
+				<view
+					class="uv-index-list__indicator"
+					:class="['uv-index-list__indicator--show']"
+					:style="{
+						height: $uv.addUnit(indicatorHeight,'px'),
+						width: $uv.addUnit(indicatorHeight,'px')
+					}"
+				>
+					<text class="uv-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
+				</view>
+			</view>
+		</uv-transition>
+	</view>
+</template>
+
+<script>
+	const indexList = () => {
+		const indexList = [];
+		const charCodeOfA = 'A'.charCodeAt(0);
+		for (let i = 0; i < 26; i++) {
+			indexList.push(String.fromCharCode(charCodeOfA + i));
+		}
+		return indexList;
+	}
+	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';
+	// #ifdef APP-NVUE
+	// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * IndexList 索引列表
+	 * @description  通过折叠面板收纳内容区域
+	 * @tutorial https://www.uvui.cn/components/indexList.html
+	 * @property {String}			inactiveColor	右边锚点非激活的颜色 ( 默认 '#606266' )
+	 * @property {String}			activeColor		右边锚点激活的颜色 ( 默认 '#5677fc' )
+	 * @property {Array}			indexList		索引字符列表，数组形式
+	 * @property {Boolean}			sticky			是否开启锚点自动吸顶 ( 默认 true )
+	 * @property {String | Number}	customNavHeight	自定义导航栏的高度 ( 默认 0 )
+	 * */ 
+	export default {
+		name: 'uv-index-list',
+		mixins: [mpMixin, mixin, props],
+		// #ifdef MP-WEIXIN
+		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
+		options: {
+			virtualHost: true
+		},
+		// #endif
+		data() {
+			return {
+				// 当前正在被选中的字母索引
+				activeIndex: -1,
+				touchmoveIndex: 1,
+				// 索引字母的信息
+				letterInfo: {
+					height: 0,
+					itemHeight: 0,
+					top: 0
+				},
+				// 设置字母指示器的高度，后面为了让指示器跟随字母，并将尖角部分指向字母的中部，需要依赖此值
+				indicatorHeight: 50,
+				// 字母放大指示器的top值，为了让其指向当前激活的字母
+				// indicatorTop: 0
+				// 当前是否正在被触摸状态
+				touching: false,
+				// 滚动条顶部top值
+				scrollTop: 0,
+				// scroll-view的高度
+				scrollViewHeight: 0,
+				// 系统信息
+				sys: '',
+				scrolling: false,
+				scrollIntoView: '',
+				hasHeight: 0,
+				timer: 0,
+				disTap: false
+			}
+		},
+		computed: {
+			// 如果有传入外部的indexList锚点数组则使用，否则使用内部生成A-Z字母
+			uIndexList() {
+				return this.indexList.length ? this.indexList : indexList()
+			},
+			// 字母放大指示器的top值，为了让其指向当前激活的字母
+			indicatorTop() {
+				const {
+					top,
+					itemHeight
+				} = this.letterInfo
+				return Math.floor(top + itemHeight * this.activeIndex + itemHeight / 2 - this.indicatorHeight / 2) - 8
+			}
+		},
+		watch: {
+			// 监听字母索引的变化，重新设置尺寸
+			uIndexList: {
+				immediate: true,
+				handler() {
+					this.$uv.sleep().then(() => {
+						this.setIndexListLetterInfo()
+					})
+				}
+			}
+		},
+		created() {
+			this.sys = this.$uv.sys()
+			this.children = []
+			this.anchors = []
+			this.init()
+		},
+		mounted() {
+			this.setIndexListLetterInfo()
+		},
+		methods: {
+			init() {
+				// 设置列表的高度为整个屏幕的高度
+				//减去this.customNavHeight，并将this.scrollViewHeight设置为maxHeight
+				//解决当uv-index-list组件放在tabbar页面时,scroll-view内容较少时，还能滚动
+				this.scrollViewHeight = this.sys.windowHeight - this.$uv.getPx(this.customNavHeight)
+			},
+			// 索引列表被触摸
+			touchStart(e) {
+				// 获取触摸点信息
+				const touchStart = e.changedTouches[0]
+				if (!touchStart || this.disTap) return
+				this.touching = true
+				const {
+					pageY
+				} = touchStart
+				// 根据当前触摸点的坐标，获取当前触摸的为第几个字母
+				const currentIndex = this.getIndexListLetter(pageY)
+				this.setValueForTouch(currentIndex)
+			},
+			// 索引字母列表被触摸滑动中
+			touchMove(e) {
+				// 获取触摸点信息
+				let touchMove = e.changedTouches[0]
+				if (!touchMove || this.disTap) return;
+
+				// 滑动结束后迅速开始第二次滑动时候 touching 为 false 造成不显示 indicator 问题
+				if (!this.touching) {
+					this.touching = true
+				}
+				const {
+					pageY
+				} = touchMove
+				const currentIndex = this.getIndexListLetter(pageY)
+				this.setValueForTouch(currentIndex)
+			},
+			// 触摸结束
+			touchEnd(e) {
+				// 延时一定时间后再隐藏指示器，为了让用户看的更直观，同时也是为了消除快速切换uv-transition的show带来的影响
+				this.$uv.sleep(300).then(() => {
+					this.touching = false
+				})
+				this.$emit('select',this.activeIndex);
+			},
+			// 获取索引列表的尺寸以及单个字符的尺寸信息
+			getIndexListLetterRect() {
+				return new Promise(resolve => {
+					// 延时一定时间，以获取dom尺寸
+					// #ifndef APP-NVUE
+					this.$uvGetRect('.uv-index-list__letter').then(size => {
+						resolve(size)
+					})
+					// #endif
+
+					// #ifdef APP-NVUE
+					const ref = this.$refs['uv-index-list__letter']
+					dom.getComponentRect(ref, res => {
+						resolve(res.size)
+					})
+					// #endif
+				})
+			},
+			// 设置indexList索引的尺寸信息
+			setIndexListLetterInfo() {
+				this.getIndexListLetterRect().then(size => {
+					const {
+						top,
+						height
+					} = size
+					const windowHeight = this.$uv.sys().windowHeight;
+					let customNavHeight = 0
+					// 消除各端导航栏非原生和原生导致的差异，让索引列表字母对屏幕垂直居中
+					if (this.customNavHeight == 0) {
+						// #ifdef H5
+						customNavHeight = this.$uv.sys().windowTop
+						// #endif
+						// #ifndef H5
+						// 在非H5中，为原生导航栏，其高度不算在windowHeight内，这里设置为负值，后面相加时变成减去其高度的一半
+						customNavHeight = 0
+						// #endif
+					} else {
+						customNavHeight = this.$uv.getPx(this.customNavHeight)
+					}
+					this.letterInfo = {
+						height,
+						// 为了让字母列表对屏幕绝对居中，让其对导航栏进行修正，也即往上偏移导航栏的一半高度
+						top: (windowHeight - height) / 2 + customNavHeight / 2,
+						itemHeight: Math.floor(height / this.uIndexList.length)
+					}
+				})
+			},
+			// 获取当前被触摸的索引字母
+			getIndexListLetter(pageY) {
+				const {
+					top,
+					height,
+					itemHeight
+				} = this.letterInfo
+				// 对H5的pageY进行修正，这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
+				// #ifdef H5
+				pageY += this.$uv.sys().windowTop
+				// #endif
+				// #ifdef APP-NVUE
+				pageY += top
+				// #endif
+				// 对第一和最后一个字母做边界处理，因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
+				if (pageY < top) {
+					return 0
+				} else if (pageY >= top + height) {
+					// 如果超出了，取最后一个字母
+					return this.uIndexList.length - 1
+				} else {
+					// 将触摸点的Y轴偏移值，减去索引字母的top值，除以每个字母的高度，即可得到当前触摸点落在哪个字母上
+					return Math.floor((pageY - top) / itemHeight);
+				}
+			},
+			// 设置各项由触摸而导致变化的值
+			setValueForTouch(currentIndex) {
+				// 如果偏移量太小，前后得出的会是同一个索引字母，为了防抖，进行返回
+				if (currentIndex === this.activeIndex) return
+				this.activeIndex = currentIndex
+				// #ifndef APP-NVUE || MP-WEIXIN
+				// 在非nvue中，由于anchor和item都在uv-index-item中，所以需要对index-item进行偏移
+				this.scrollIntoView = `uv-index-item-${this.uIndexList[currentIndex].charCodeAt(0)}`
+				// #endif
+				// #ifdef MP-WEIXIN
+				// 微信小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
+				this.scrollTop = this.children[currentIndex].top
+				// #endif
+				// #ifdef APP-NVUE
+				// 在nvue中，由于cell和header为同级元素，所以实际是需要对header(anchor)进行偏移
+				const anchor = `uv-index-anchor-${this.uIndexList[currentIndex]}`
+				dom.scrollToElement(this.anchors[currentIndex].$refs[anchor], {
+					offset: 0,
+					animated: false
+				})
+				// #endif
+			},
+			getHeaderRect() {
+				// 获取header slot的高度，因为list组件中获取元素的尺寸是没有top值的
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs.header, res => {
+						resolve(res.size)
+					})
+				})
+			},
+			// scroll-view的滚动事件
+			async scrollHandler(e) {
+				if (this.touching || this.scrolling) return
+				// 每过一定时间取样一次，减少资源损耗以及可能带来的卡顿
+				this.scrolling = true
+				this.disTap = true;
+				clearTimeout(this.timer);
+				this.timer = setTimeout(()=>{
+					this.disTap = false;
+				},200)
+				this.$uv.sleep(30).then(() => {
+					this.scrolling = false
+				})
+				let scrollTop = 0
+				const len = this.children.length
+				let children = this.children
+				const anchors = this.anchors
+				const customNavHeight = this.$uv.getPx(this.customNavHeight);
+				// #ifdef APP-NVUE
+				// nvue下获取的滚动条偏移为负数，需要转为正数
+				scrollTop = Math.abs(e.contentOffset.y)
+				// 获取header slot的尺寸信息
+				const header = await this.getHeaderRect()
+				// item的top值，在nvue下，模拟出的anchor的top，类似非nvue下的index-item的top
+				let top = header.height
+				// 由于list组件无法获取cell的top值，这里通过header slot和各个item之间的height，模拟出类似非nvue下的位置信息
+				children = this.children.map((item, index) => {
+					if(item.height>0) this.hasHeight = item.height;
+					item.height = item.height>0?item.height:this.hasHeight;
+					const child = {
+						height: item.height,
+						top
+					}
+					// 进行累加，给下一个item提供计算依据
+					top += item.height + anchors[index].height
+					return child
+				})
+				// #endif
+				// #ifndef APP-NVUE
+				// 非nvue通过detail获取滚动条位移
+				scrollTop = e.detail.scrollTop
+				// #endif
+				for (let i = 0; i < len; i++) {
+					const item = children[i],
+						nextItem = children[i + 1]
+					// 如果滚动条高度小于第一个item的top值，此时无需设置任意字母为高亮
+					if (scrollTop + customNavHeight <= children[0].top || scrollTop >= children[len - 1].top + children[len -
+							1].height) {
+						this.activeIndex = -1
+						break
+					} else if (!nextItem) { 
+						// 当不存在下一个item时，意味着历遍到了最后一个
+						this.activeIndex = len - 1
+						break
+					} else if (scrollTop + customNavHeight > item.top && scrollTop + customNavHeight < nextItem.top) {
+						this.activeIndex = i
+						break
+					}
+				}
+			},
+		},
+	}
+</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-index-list {
+
+		&__letter {
+			position: fixed;
+			right: 0;
+			text-align: center;
+			z-index: 3;
+			padding: 0 6px;
+
+			&__item {
+				width: 16px;
+				height: 16px;
+				border-radius: 100px;
+				margin: 1px 0;
+				@include flex;
+				align-items: center;
+				justify-content: center;
+
+				&--active {
+					background-color: $uv-primary;
+				}
+
+				&__index {
+					font-size: 12px;
+					text-align: center;
+					line-height: 12px;
+				}
+			}
+		}
+		&__indicator__box {
+			width: 65px;
+			height: 65px;
+			padding: 6px;
+			transform: rotate(-45deg);
+		}
+		&__indicator {
+			width: 50px;
+			height: 50px;
+			border-radius: 100px 100px 0 100px;
+			text-align: center;
+			color: #ffffff;
+			background-color: #c9c9c9;
+			@include flex;
+			justify-content: center;
+			align-items: center;
+
+			&__text {
+				font-size: 28px;
+				line-height: 28px;
+				font-weight: bold;
+				color: #fff;
+				transform: rotate(45deg);
+				text-align: center;
+			}
+		}
+	}
+</style>

package/templates/example/uniapp/uni_modules/uv-index-list/package.json

@@ -0,0 +1,88 @@
+{
+  "id": "uv-index-list",
+  "displayName": "uv-index-list 索引列表 全面兼容vue3+2、app、h5、小程序等多端",
+  "version": "1.0.7",
+  "description": "该组件用于展示索引列表，右侧带索引的列表，方便快速定位到具体内容，通常用于城市/机场选择等场景。类似于微信通讯录页面",
+  "keywords": [
+    "uv-index-list",
+    "uvui",
+    "uv-ui",
+    "index-list",
+    "索引列表"
+],
+  "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"
+				}
+			}
+		}
+  }
+}

package/templates/example/uniapp/uni_modules/uv-index-list/readme.md

@@ -0,0 +1,19 @@
+## IndexList 索引列表
+
+> **组件名：uv-index-list**
+
+用于展示索引列表，右侧带索引的列表，方便快速定位到具体内容，通常用于城市/机场选择等场景，类似于微信通讯录页面。
+
+# <a href="https://www.uvui.cn/components/indexList.html" target="_blank">查看文档</a>
+
+## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
+
+### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
+
+![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
+
+</a>
+
+#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>

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

@@ -0,0 +1,29 @@
+## 1.0.13（2023-12-06）
+1. 优化
+## 1.0.12（2023-12-06）
+1. 阻止事件冒泡问题
+## 1.0.11（2023-11-10）
+1. 调整清除按钮样式的marginLeft，避免微信上多数情况触发不了的BUG
+## 1.0.10（2023-10-07）
+1. 修复搜狗输入法下存在不可清空的情况
+## 1.0.9（2023-09-14）
+1. 修复H5等情况设置禁用或可读情况下，点击事件无效的问题
+## 1.0.8（2023-08-22）
+1. 修复无法@keyboardheightchange无法获取键盘高度的BUG
+## 1.0.7（2023-08-18）
+1. 修复ios端不能输入的BUG
+## 1.0.6（2023-08-05）
+1. 修复在vue2模式下，v-model设置为0时不生效的BUG
+## 1.0.5（2023-07-18）
+1. 修复在微信小程序端清除内容存在不能清除的BUG
+## 1.0.4（2023-07-13）
+1.  修复value/v-model更改不生效的BUG
+## 1.0.3（2023-07-03）
+去除插槽判断，避免某些平台不显示的BUG
+## 1.0.2（2023-05-16）
+1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
+2. 优化部分功能
+## 1.0.1（2023-05-12）
+1. 修复vue3双向绑定的BUG
+## 1.0.0（2023-05-10）
+uv-input 输入框