create-koa-boot 1.0.0

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

@@ -0,0 +1,113 @@
+<template>
+	<view 
+		class="uv-divider"
+		:style="[$uv.addStyle(customStyle)]"
+		@tap="click"
+		>
+		<uv-line 
+			:color="lineColor"
+			:customStyle="leftLineStyle"
+			:hairline="hairline"
+			:dashed="dashed"></uv-line>
+		<text 
+			v-if="dot"
+			class="uv-divider__dot"
+		>●</text>
+		<text 
+			v-else-if="text"
+			class="uv-divider__text"
+			:style="[textStyle]"
+		>{{text}}</text>
+		<uv-line 
+			:color="lineColor"
+			:customStyle="rightLineStyle"
+			:hairline="hairline"
+			:dashed="dashed"
+		></uv-line>
+	</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';
+	/**
+	 * divider 分割线
+	 * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+	 * @tutorial https://www.uvui.cn/components/divider.html
+	 * @property {Boolean}			dashed			是否虚线 （默认 false ）
+	 * @property {Boolean}			hairline		是否细线 （默认  true ）
+	 * @property {Boolean}			dot				是否以点替代文字，优先于text字段起作用 （默认 false ）
+	 * @property {String}			textPosition	内容文本的位置，left-左边，center-中间，right-右边 （默认 'center' ）
+	 * @property {String | Number}	text			文本内容
+	 * @property {String | Number}	textSize		文本大小 （默认 14）
+	 * @property {String}			textColor		文本颜色 （默认 '#909399' ）
+	 * @property {String}			lineColor		线条颜色 （默认 '#dcdfe6' ）
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 *
+	 * @event {Function}	click	divider组件被点击时触发
+	 * @example <uv-divider :color="color">锦瑟无端五十弦</uv-divider>
+	 */
+	export default {
+		name: 'uv-divider',
+		mixins: [mpMixin, mixin, props],
+		emits: ['click'],
+		computed: {
+			textStyle() {
+				const style = {}
+				style.fontSize = this.$uv.addUnit(this.textSize)
+				style.color = this.textColor
+				return style
+			},
+			// 左边线条的的样式
+			leftLineStyle() {
+				const style = {}
+				// 如果是在左边，设置左边的宽度为固定值
+				if (this.textPosition === 'left') {
+					style.width = '80rpx'
+				} else {
+					style.flex = 1
+				}
+				return style
+			},
+			// 右边线条的的样式
+			rightLineStyle() {
+				const style = {}
+				// 如果是在右边，设置右边的宽度为固定值
+				if (this.textPosition === 'right') {
+					style.width = '80rpx'
+				} else {
+					style.flex = 1
+				}
+				return style
+			}
+		},
+		methods: {
+			// divider组件被点击时触发
+			click() {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	$uv-divider-margin: 15px 0 !default;
+	$uv-divider-text-margin: 0 15px !default;
+	$uv-divider-dot-font-size: 12px !default;
+	$uv-divider-dot-margin: 0 12px !default;
+	$uv-divider-dot-color: #c0c4cc !default;
+	.uv-divider {
+		@include flex;
+		flex-direction: row;
+		align-items: center;
+		margin: $uv-divider-margin;
+		&__text {
+			margin: $uv-divider-text-margin;
+		}
+		&__dot {
+			font-size: $uv-divider-dot-font-size;
+			margin: $uv-divider-dot-margin;
+			color: $uv-divider-dot-color;
+		}
+	}
+</style>

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

@@ -0,0 +1,88 @@
+{
+  "id": "uv-divider",
+  "displayName": "uv-divider 分割线 全面兼容小程序、nvue、vue2、vue3等多端",
+  "version": "1.0.4",
+  "description": "区隔内容的分割线，一般用于页面底部没有更多的提示。",
+  "keywords": [
+    "divider",
+    "uvui",
+    "uv-ui",
+    "分割线",
+    "没有更多"
+],
+  "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-line"
+		],
+    "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-divider/readme.md

@@ -0,0 +1,11 @@
+## Divider 分割线
+
+> **组件名：uv-divider**
+
+区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+
+### <a href="https://www.uvui.cn/components/divider.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-drop-down/changelog.md

@@ -0,0 +1,13 @@
+## 1.0.5（2024-01-02）
+1. 修复parentData不变的BUG
+## 1.0.4（2023-09-28）
+1. 增加uv-sticky依赖
+## 1.0.3（2023-08-29）
+1. 修复自定义内容，点击自定义内容时会自动关闭弹窗的问题
+## 1.0.2（2023-08-22）
+1. 优化
+## 1.0.1（2023-08-22）
+1. 增加@change回调，返回弹窗关闭状态
+2. 增加init方法，方便位置改变进行调整
+## 1.0.0（2023-07-30）
+新增uv-drop-down 下拉筛选组件

package/templates/example/uniapp/uni_modules/uv-drop-down/components/uv-drop-down/uv-drop-down.vue

@@ -0,0 +1,135 @@
+<template>
+	<uv-sticky :disabled="!isSticky">
+		<view ref="dropDownRef" class="uv-drop-down" :style="[$uv.addStyle(customStyle)]">
+			<slot></slot>
+		</view>
+	</uv-sticky>
+</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';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+	/**
+	 * DropDown 下拉框
+	 * @description 下拉筛选
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=uv-drop-down
+	 * @property {String | Number} sign 组件唯一标识，需要手动传
+	 * @property {Boolean} is-sticky = [true|false] 是否吸顶
+	 * @property {Array} default-value 默认值，表示参数value属于这里面的值，就说明是未选中即是默认展示的值。eg：上面示例中的{label: '全部',value: 'all'} 即是默认值。后续处理逻辑也可以根据是否是其中值进行过滤。
+	 * @property {String} textSize 每项字体大小
+	 * @property {String} textColor 每项文本颜色
+	 * @property {String} textActiveSize 每项选中状态字体大小
+	 * @property {String} textActiveColor 每项选中状态文本颜色
+	 * @property {Object} extraIcon 每项右侧图标
+	 * @property {Object} extraActiveIcon 每项选中后右侧图标
+	 */
+	export default {
+		name: 'uv-drop-down',
+		mixins: [mpMixin, mixin],
+		emits: ['click'],
+		props: {
+			isSticky: {
+				type: Boolean,
+				default: true
+			},
+			sign: {
+				type: [String, Number],
+				default: 'UVDROPDOWN'
+			},
+			defaultValue: {
+				type: Array,
+				default: () => [0, '0', 'all']
+			},
+			textSize: {
+				type: String,
+				default: '30rpx'
+			},
+			textColor: {
+				type: String,
+				default: '#333'
+			},
+			textActiveSize: {
+				type: String,
+				default: '30rpx'
+			},
+			textActiveColor: {
+				type: String,
+				default: '#3c9cff'
+			},
+			extraIcon: {
+				type: Object,
+				default () {
+					return {
+						name: 'arrow-down',
+						size: '30rpx',
+						color: '#333'
+					}
+				}
+			},
+			extraActiveIcon: {
+				type: Object,
+				default () {
+					return {
+						name: 'arrow-up',
+						size: '30rpx',
+						color: '#3c9cff'
+					}
+				}
+			}
+		},
+		computed: {
+			parentData() {
+				return [this.defaultValue, this.textSize, this.textColor, this.textActiveColor, this.textActiveSize, this.extraIcon, this.extraActiveIcon, this.sign, this.clickHandler];
+			}
+		},
+		mounted() {
+			this.init();
+		},
+		methods: {
+			init() {
+				uni.$emit(`${this.sign}_CLICKMENU`, {
+					show: false
+				});
+				this.$nextTick(async () => {
+					const rect = await this.queryRect();
+					uni.$emit(`${this.sign}_GETRECT`, rect);
+				})
+			},
+			// 查询内容高度
+			queryRect() {
+				// #ifndef APP-NVUE
+				// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
+				return new Promise(resolve => {
+					this.$uvGetRect(`.uv-drop-down`).then(size => {
+						resolve(size)
+					})
+				})
+				// #endif
+				// #ifdef APP-NVUE
+				// nvue下，使用dom模块查询元素高度
+				// 返回一个promise，让调用此方法的主体能使用then回调
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs.dropDownRef, res => {
+						res.size.top = res.size.top <= 0 ? 0 : res.size.top;
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			clickHandler(data) {
+				this.$emit('click', data);
+			}
+		}
+	}
+</script>
+<style scoped lang="scss">
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	.uv-drop-down {
+		@include flex;
+		justify-content: space-between;
+		background-color: #fff;
+		border-bottom: 1px solid #dadbde;
+	}
+</style>

package/templates/example/uniapp/uni_modules/uv-drop-down/components/uv-drop-down-item/uv-drop-down-item.vue

@@ -0,0 +1,169 @@
+<template>
+	<view class="uv-drop-down-item" @click="clickHandler">
+		<uv-text :text="label" :size="getTextStyle.size" :color="getTextStyle.color" lines="1" :custom-style="{marginRight: '10rpx',maxWidth:'200rpx'}"></uv-text>
+		<uv-icon :name="getDownIcon.name" :size="getDownIcon.size" :color="getDownIcon.color" v-if="[1,'1'].indexOf(type)==-1"></uv-icon>
+	</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';
+	/**
+	 * DropDown 下拉框
+	 * @description 下拉筛选
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=uv-drop-down
+	 * @property {String | Number} name 字段标识
+	 * @property {String | Number} type 类型 1 没有筛选项，直接进行选中和不选中  2 有多个选项
+	 * @property {String | Number} label 筛选项的文本
+	 * @property {Boolean} isDrop 该项是否打开
+	 */
+	export default {
+		name: 'uv-drop-down-item',
+		mixins: [mpMixin, mixin],
+		emits: ['click'],
+		props: {
+			name: {
+				type: [String, Number],
+				default: ''
+			},
+			// 类型 1 没有筛选项，直接进行选中和不选中  2 有多个选项
+			type: {
+				type: [String, Number],
+				default: '2'
+			},
+			// 筛选的文本
+			label: {
+				type: [String],
+				default: ''
+			},
+			// 筛选值
+			value: {
+				type: [String, Number, null],
+				default: ''
+			},
+			// 是否下拉菜单打开
+			isDrop: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				parentData: {
+					defaultValue: [0, '0', 'all'],
+					textSize: '30rpx',
+					textColor: '#333',
+					textActiveSize: '30rpx',
+					textActiveColor: '#3c9cff',
+					extraIcon: {},
+					extraActiveIcon: {},
+					sign: '',
+					clickHandler: Function
+				},
+				active: false,
+				isDroped: false,
+				elId: ''
+			}
+		},
+		watch: {
+			isDrop: {
+				handler(newVal) {
+					this.isDroped = newVal;
+				},
+				immediate: true
+			},
+			value: {
+				handler(newVal) {
+					this.$nextTick(()=>{
+						this.active = this.parentData.defaultValue.indexOf(newVal) == -1;
+					})
+				},
+				immediate: true
+			}
+		},
+		computed: {
+			getDownIcon() {
+				const style = {
+					size: '30rpx',
+					color: '#333',
+					...this.parentData.extraIcon
+				}
+				if (this.active || this.isDroped) {
+					style.color = this.parentData.extraActiveIcon?.color ? this.parentData.extraActiveIcon?.color : '#3c9cff';
+					style.size = this.parentData.extraActiveIcon?.size ? this.parentData.extraActiveIcon?.size : '30rpx';
+				}
+				if (this.isDroped) {
+					style.name = this.parentData.extraActiveIcon?.name;
+				}
+				return style;
+			},
+			getTextStyle() {
+				const style = {
+					size: this.parentData.textSize,
+					color: this.parentData.textColor
+				};
+				if (this.active || this.isDroped) {
+					style.size = this.parentData.textActiveSize;
+					style.color = this.parentData.textActiveColor;
+				}
+				return style;
+			}
+		},
+		created() {
+			this.init();
+		},
+		methods: {
+			init() {
+				this.elId = this.$uv.guid();
+				this.getParentData('uv-drop-down');
+				if (!this.parent) {
+					this.$uv.error('uv-drop-down必须搭配uv-drop-down-item组件使用');
+				}
+				uni.$on('HANDLE_DROPDOWN_ONE', id => {
+					if (this.isDroped && this.elId != id) {
+						this.isDroped = false;
+					}
+				})
+				uni.$on(`${this.parentData.sign}_CLOSEPOPUP`, async () => {
+					if (this.isDroped) {
+						this.isDroped = false;
+					}
+				})
+			},
+			async clickHandler() {
+				let data = {};
+				uni.$emit('HANDLE_DROPDOWN_ONE', this.elId);
+				switch (+this.type) {
+					case 1:
+						this.active = !this.active;
+						data = {
+							name: this.name,
+							active: this.active,
+							type: this.type
+						};
+						break;
+					case 2:
+						this.isDroped = !this.isDroped;
+						data = {
+							name: this.name,
+							active: this.isDroped,
+							type: this.type
+						};
+						break;
+				}
+				this.parentData.clickHandler(data);
+				this.$emit('click', data);
+				uni.$emit(`${this.parentData.sign}_CLICKMENU`, {
+					show: +this.type > 1 && this.isDroped
+				});
+			}
+		}
+	}
+</script>
+<style scoped lang="scss">
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	.uv-drop-down-item {
+		@include flex;
+		align-items: center;
+		padding: 20rpx;
+	}
+</style>