create-koa-boot 1.0.0

package/templates/example/uniapp/uni_modules/uv-pick-color/components/uv-pick-color/uv-pick-color.vue

@@ -0,0 +1,551 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<uv-popup 
+		ref="pickerColorPopup"
+		mode="bottom"
+		:close-on-click-overlay="closeOnClickOverlay"
+		@change="popupChange">
+		<view class="uv-pick-color">
+			<uv-toolbar
+				:show="showToolbar"
+				:cancelColor="cancelColor"
+				:confirmColor="confirmColor"
+				:cancelText="cancelText"
+				:confirmText="confirmText"
+				:title="title"
+				:show-border="true"
+				@cancel="cancelHandler"
+				@confirm="confirmHandler"></uv-toolbar>
+			<view 
+				class="uv-pick-color__box"
+				:style="{
+					background:`rgb(${bgcolor.r},${bgcolor.g},${bgcolor.b})`
+				}"
+			>
+				<!-- #ifdef H5 -->
+				<view
+					class="uv-pick-color__box__bg drag-box"
+					@tap.stop.prevent="touchstart($event, 0)"
+					@touchstart.stop.prevent="touchstart($event, 0)"
+					@touchmove.stop.prevent="touchmove($event, 0)"
+					@touchend.stop.prevent="touchend($event, 0)"
+				>
+				<!-- #endif -->
+				<!-- #ifndef H5 -->
+				<view
+					class="uv-pick-color__box__bg drag-box"
+					@touchstart.stop.prevent="touchstart($event, 0)"
+					@touchmove.stop.prevent="touchmove($event, 0)"
+					@touchend.stop.prevent="touchend($event, 0)"
+				>
+				<!-- #endif -->
+					<view class="uv-pick-color__box__bg-mask"></view>
+					<view 
+						class="uv-pick-color__box__bg-pointer"
+						:style="[pointerStyle]"
+					>
+					</view>
+				</view>
+			</view>
+			<view class="uv-pick-color__control">
+				<view class="uv-pick-color__control__alpha">
+					<view 
+						class="uv-pick-color__control__alpha--color"
+						:style="{ background:`rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})` }"
+					></view>
+				</view>
+				<view class="uv-pick-color__control__item">
+					<!-- #ifdef H5 -->
+					<view
+						class="uv-pick-color__control__item__drag drag-box"
+						@tap.stop="touchstart($event, 1)"
+						@touchstart.stop="touchstart($event, 1)"
+						@touchmove.stop="touchmove($event, 1)"
+						@touchend.stop="touchend($event, 1)"
+					>
+					<!-- #endif -->
+					<!-- #ifndef H5 -->
+					<view
+						class="uv-pick-color__control__item__drag drag-box"
+						@touchstart.stop="touchstart($event, 1)"
+						@touchmove.stop="touchmove($event, 1)"
+						@touchend.stop="touchend($event, 1)"
+					>
+					<!-- #endif -->
+						<view class="uv-pick-color__control__item__drag--hue"></view>
+						<view 
+							class="uv-pick-color__control__item__drag--circle"
+							:style="{ 
+								left: $uv.getPx(site[1].left - 10,true)
+							}"
+						></view>
+					</view>
+					<!-- #ifdef H5 -->
+					<view
+						class="uv-pick-color__control__item__drag drag-box"
+						@tap.stop="touchstart($event, 2)"
+						@touchstart.stop="touchstart($event, 2)"
+						@touchmove.stop="touchmove($event, 2)"
+						@touchend.stop="touchend($event, 2)"
+					>
+					<!-- #endif -->
+					<!-- #ifndef H5 -->
+					<view
+						class="uv-pick-color__control__item__drag drag-box"
+						@touchstart.stop="touchstart($event, 2)"
+						@touchmove.stop="touchmove($event, 2)"
+						@touchend.stop="touchend($event, 2)"
+					>
+					<!-- #endif -->
+						<view class="uv-pick-color__control__item__drag--alpha"></view>
+						<view 
+							class="uv-pick-color__control__item__drag--circle"
+							:style="{ 
+								left: $uv.getPx(site[2].left - 10,true)
+							}"
+						></view>
+					</view>
+				</view>
+			</view>
+			<view class="uv-pick-color__result">
+				<view 
+					class="uv-pick-color__result__select"
+					hover-class="uv-hover-class"
+					@click.stop="select"
+				>
+					<text class="text">切换</text>
+					<text class="text">模式</text>
+				</view>
+				<view class="uv-pick-color__result__item" v-if="mode">
+					<view class="uv-pick-color__result__item--value uv-border">
+						<text>{{hex}}</text>
+					</view>
+					<view class="uv-pick-color__result__item--hex">
+						<text>HEX</text>
+					</view>
+				</view>
+				<template v-else>
+					<view class="uv-pick-color__result__item">
+						<view class="uv-pick-color__result__item--value uv-border">
+							<text>{{rgba.r}}</text>
+						</view>
+						<view class="uv-pick-color__result__item--rgba">
+							<text>R</text>
+						</view>
+					</view>
+					<view class="uv-pick-color__result__gap"></view>
+					<view class="uv-pick-color__result__item">
+						<view class="uv-pick-color__result__item--value uv-border">
+							<text>{{rgba.g}}</text>
+						</view>
+						<view class="uv-pick-color__result__item--rgba">
+							<text>G</text>
+						</view>
+					</view>
+					<view class="uv-pick-color__result__gap"></view>
+					<view class="uv-pick-color__result__item">
+						<view class="uv-pick-color__result__item--value uv-border">
+							<text>{{rgba.b}}</text>
+						</view>
+						<view class="uv-pick-color__result__item--rgba">
+							<text>B</text>
+						</view>
+					</view>
+					<view class="uv-pick-color__result__gap"></view>
+					<view class="uv-pick-color__result__item">
+						<view class="uv-pick-color__result__item--value uv-border">
+							<text>{{rgba.a}}</text>
+						</view>
+						<view class="uv-pick-color__result__item--rgba">
+							<text>A</text>
+						</view>
+					</view>
+				</template>
+			</view>
+			<view class="uv-pick-color__prefab">
+				<view 
+					class="uv-pick-color__prefab__item"
+					v-for="(item,index) in colorList"
+					:key="index"
+				>
+					<view 
+						class="uv-pick-color__prefab__item--color"
+						:style="{ background:`rgba(${item.r},${item.g},${item.b},${item.a})` }"
+						@click.stop="setColorBySelect(item)"
+					></view>
+				</view>
+			</view>
+		</view>
+	</uv-popup>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<view>
+		<text>nvue暂不支持uv-pick-color组件</text>
+	</view>
+	<!-- #endif -->
+</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 { rgbToHsb, hsbToRgb, rgbToHex, colorList } from './colors.js';
+	import props from './props.js';
+	export default {
+		name: 'uv-pick-color',
+		emits: ['confirm', 'cancel', 'close', 'change'],
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			pointerStyle() {
+				const style = {};
+				style.top = this.$uv.addUnit(this.site[0].top - 8);
+				style.left = this.$uv.addUnit(this.site[0].left - 8);
+				return style;
+			}
+		},
+		data() {
+			return {
+				showToolbar: false,
+				// rgba 颜色
+				rgba: {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 1
+				},
+				// hsb 颜色
+				hsb: {
+					h: 0,
+					s: 0,
+					b: 0
+				},
+				site: [{
+					top: 0,
+					left: 0
+				}, {
+					left: 0
+				}, {
+					left: 0
+				}],
+				index: 0,
+				bgcolor: {
+					r: 255,
+					g: 0,
+					b: 0,
+					a: 1
+				},
+				hex: '#000000',
+				mode: true,
+				colorList: colorList
+			};
+		},
+		watch: {
+			prefabColor(newVal) {
+				this.colorList = newVal;
+			}
+		},
+		created() {
+			// #ifdef APP-NVUE
+			return this.$uv.error('nvue暂不支持uv-pick-color组件');
+			// #endif
+			this.rgba = this.color;
+			if (this.prefabColor.length) this.colorList = this.prefabColor;
+		},
+		methods: {
+			open() {
+				this.$refs.pickerColorPopup.open();
+				this.showToolbar = true;
+				this.$nextTick(async () => {
+					await this.$uv.sleep(350);
+					this.getSelectorQuery();
+				})
+			},
+			close() {
+				this.$refs.pickerColorPopup.close();
+			},
+			popupChange(e) {
+				if(!e.show) this.$emit('close');
+			},
+			// 点击工具栏的取消按钮
+			cancelHandler() {
+				this.$emit('cancel');
+				this.close();
+			},
+			// 点击工具栏的确定按钮
+			confirmHandler() {
+				this.$emit('confirm', {
+					rgba: this.rgba,
+					hex: this.hex
+				})
+				this.close();
+			},
+			// 初始化
+			init() {
+				// hsb 颜色
+				this.hsb = rgbToHsb(this.rgba);
+				this.setValue(this.rgba);
+			},
+			async getSelectorQuery() {
+				const data = await this.$uvGetRect('.drag-box',true);
+				this.position = data;
+				this.setColorBySelect(this.rgba);
+			},
+			// 选择模式
+			select() {
+				this.mode = !this.mode;
+			},
+			touchstart(e, index) {
+				const { clientX, clientY } = e.touches[0];
+				this.pageX = clientX;
+				this.pageY = clientY;
+				this.setPosition(clientX, clientY, index);
+			},
+			touchmove(e, index) {
+				const { clientX, clientY } = e.touches[0];
+				this.moveX = clientX;
+				this.moveY = clientY;
+				this.setPosition(clientX, clientY, index);
+			},
+			touchend(e, index) {},
+			/**
+			 * 设置位置
+			 */
+			setPosition(x, y, index) {
+				this.index = index;
+				const { top, left, width, height } = this.position[index];
+				// 设置最大最小值
+				this.site[index].left = Math.max(0, Math.min(parseInt(x - left), width));
+				if (index === 0) {
+					this.site[index].top = Math.max(0, Math.min(parseInt(y - top), height));
+					// 设置颜色
+					this.hsb.s = parseInt((100 * this.site[index].left) / width);
+					this.hsb.b = parseInt(100 - (100 * this.site[index].top) / height);
+					this.setColor();
+					this.setValue(this.rgba);
+				} else {
+					this.setControl(index, this.site[index].left);
+				}
+			},
+			/**
+			 * 设置 rgb 颜色
+			 */
+			setColor() {
+				const rgb = hsbToRgb(this.hsb);
+				this.rgba.r = rgb.r;
+				this.rgba.g = rgb.g;
+				this.rgba.b = rgb.b;
+			},
+			/**
+			 * 设置二进制颜色
+			 * @param {Object} rgb
+			 */
+			setValue(rgb) {
+				this.hex = `#${(rgbToHex(rgb))}`;
+			},
+			setControl(index, x) {
+				const {
+					top,
+					left,
+					width,
+					height
+				} = this.position[index];
+
+				if (index === 1) {
+					this.hsb.h = parseInt((360 * x) / width);
+					this.bgcolor = hsbToRgb({
+						h: this.hsb.h,
+						s: 100,
+						b: 100
+					});
+					this.setColor()
+				} else {
+					this.rgba.a = +(x / width).toFixed(1);
+				}
+				this.setValue(this.rgba);
+			},
+			setColorBySelect(getrgb) {
+				const { r, g, b, a } = getrgb;
+				let rgb = {};
+				rgb = {
+					r: r ? parseInt(r) : 0,
+					g: g ? parseInt(g) : 0,
+					b: b ? parseInt(b) : 0,
+					a: a ? a : 0
+				};
+				this.rgba = rgb;
+				this.hsb = rgbToHsb(rgb);
+				this.changeViewByHsb();
+			},
+			changeViewByHsb() {
+				const [a, b, c] = this.position;
+				this.site[0].left = parseInt(this.hsb.s * a.width / 100);
+				this.site[0].top = parseInt((100 - this.hsb.b) * a.height / 100);
+				this.setColor(this.hsb.h);
+				this.setValue(this.rgba);
+				this.bgcolor = hsbToRgb({
+					h: this.hsb.h,
+					s: 100,
+					b: 100
+				});
+				this.site[1].left = this.hsb.h / 360 * b.width;
+				this.site[2].left = this.rgba.a * c.width;
+			}
+		}
+	};
+</script>
+<style scoped lang="scss">
+	$show-border: 1;
+	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	$height: 400rpx;
+	/* #ifndef APP-NVUE */
+	.uv-pick-color {
+		&__box {
+			position: relative;
+			height: $height;
+			background: rgb(255, 0, 0);
+			margin: 20rpx;
+			&__bg {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+				&-mask {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					height: $height;
+					background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+				}
+				&-pointer {
+					position: absolute;
+					top: -8px;
+					left: -8px;
+					z-index: 2;
+					width: 16px;
+					height: 16px;
+					border: 1px #fff solid;
+					border-radius: 8px;
+				}
+			}
+		}
+		&__control {
+			@include flex;
+			padding: 10rpx 20rpx;
+			&__alpha {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50rpx;
+				background-color: #fff;
+				background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
+				background-size: 36rpx 36rpx;
+				background-position: 0 0, 18rpx 18rpx;
+				border: 1px #eee solid;
+				overflow: hidden;
+				&--color {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			&__item {
+				flex: 1;
+				@include flex(column);
+				justify-content: space-between;
+				height: 100rpx;
+				padding: 6rpx 0 6rpx 30rpx;
+			}
+			&__item__drag {
+				position: relative;
+				height: 16px;
+				background-color: #fff;
+				background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
+				linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
+				background-size: 32rpx 32rpx;
+				background-position: 0 0, 16rpx 16rpx;
+				&--hue {
+					width: 100%;
+					height: 100%;
+					background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+				}
+				&--alpha {
+					width: 100%;
+					height: 100%;
+					background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0));
+				}
+				&--circle {
+					position: absolute;
+					top: -2px;
+					width: 20px;
+					height: 20px;
+					box-sizing: border-box;
+					border-radius: 10px;
+					background: #fff;
+					box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
+				}
+			}
+		}
+		&__result {
+			@include flex;
+			padding: 20rpx;
+			text-align: center;
+			&__select {
+				@include flex(column);
+				justify-content: center;
+				width: 100rpx;
+				height: 100rpx;
+				margin-right: 10px;
+				border-radius: 10rpx;
+				box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
+				font-size: 14px;
+				color: #999;
+			}
+			&__item {
+				flex: 1;
+				height: 100rpx;
+				&--value {
+					height: 50rpx;
+					line-height: 50rpx;
+					border-radius: 4rpx;
+					font-size: 28rpx;
+					color: #999;
+				}
+				&--hex,
+				&--rgba {
+					height: 50rpx;
+					line-height: 50rpx;
+					font-size: 30rpx;
+				}
+			}
+			&__gap {
+				width: 10px;
+				height: 10px;
+			}
+		}
+		&__prefab {
+			@include flex;
+			margin: 0 -8rpx;
+			padding: 0 20rpx 20rpx;
+			flex-wrap: wrap;
+			&__item {
+				width: 50rpx;
+				height: 50rpx;
+				margin: 8rpx;
+				border-radius: 6rpx;
+				background-color: #fff;
+				background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
+					linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
+				background-size: 36rpx 36rpx;
+				background-position: 0 0, 18rpx 18rpx;
+				border: 1px #eee solid;
+				&--color {
+					width: 100%;
+					height: 100%;
+					border-radius: 6rpx;
+				}
+			}
+		}
+	}
+	/* #endif */
+</style>

package/templates/example/uniapp/uni_modules/uv-pick-color/package.json

@@ -0,0 +1,89 @@
+{
+  "id": "uv-pick-color",
+  "displayName": "uv-pick-color 颜色选择器 全面兼容vue3+2、app、h5、小程序等多端",
+  "version": "1.0.8",
+  "description": "该组件为颜色选择器，支持预制颜色，初始化颜色，简单配置，开箱即用",
+  "keywords": [
+    "uv-pick-color",
+    "uvui",
+    "uv-ui",
+    "颜色",
+    "color"
+],
+  "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-popup",
+			"uv-toolbar"
+		],
+    "encrypt": [],
+    "platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "y",
+					"app-nvue": "u"
+				},
+				"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-pick-color/readme.md

@@ -0,0 +1,19 @@
+## PickColor 颜色选择器
+
+> **组件名：uv-pick-color**
+
+该组件为颜色选择器，支持预制颜色，初始化颜色，简单配置，开箱即用。
+
+# <a href="https://www.uvui.cn/components/pickColor.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-picker/changelog.md

@@ -0,0 +1,33 @@
+## 1.0.14（2023-12-29）
+1. 修复上个版本引出的BUG
+## 1.0.13（2023-12-26）
+1. 修复抖音小程序滚到底不触发change的BUG
+## 1.0.12（2023-11-20）
+1. 修复issues反馈的问题uv-picker在组合式API的自定义组件中，columns动态赋值无法显示选项：https://gitee.com/climblee/uv-ui/issues/I8H0GQ
+## 1.0.11（2023-10-11）
+1. 将immediate-change默认值改为true，该值在于change回调的及时性，微信小程序生效
+## 1.0.10（2023-08-25）
+1. 增加round属性设置弹窗圆角，默认为0
+## 1.0.9（2023-08-24）
+1. 修复cli项目不返回值的问题
+## 1.0.8（2023-08-04）
+1. 优化
+## 1.0.7（2023-08-02）
+1. 改组件中删除uv-toolbar组件，请单独下载uv-toolbar组件
+## 1.0.6（2023-07-02）
+uv-picker  由于弹出层uv-popup的修改，打开和关闭方法更改，详情参考文档：https://www.uvui.cn/components/picker.html
+## 1.0.5（2023-06-26）
+1. 增加color参数
+2. 增加activeColor参数
+## 1.0.4（2023-06-15）
+1. 修改支付宝报错的BUG
+## 1.0.3（2023-06-12）
+1. setColumnValues的使用统一化，避免某些平台报错
+2. 取消change回调回传的组件实例，直接统一通过ref的方式调取setColumnValues方法
+## 1.0.2（2023-05-23）
+1. uv-toolbar组件新增下边框属性 
+## 1.0.1（2023-05-16）
+1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
+2. 优化部分功能
+## 1.0.0（2023-05-10）
+uv-picker 选择器