uview-plus 3.5.5 → 3.5.15

package/components/u-color-picker/u-color-picker.vue

@@ -0,0 +1,1095 @@
+<template>
+	<view class="up-color-picker">
+        <view clas="up-color-picker__trigger" @click="show = true"
+            :style="{backgroundColor: value}" >
+            <slot></slot>
+        </view>
+		<up-popup :show="show" mode="bottom" round="10" @close="close" :closeOnClickOverlay="true">
+			<view class="up-color-picker__content">
+				<view class="up-color-picker__header">
+					<text class="up-color-picker__title">选择颜色</text>
+				</view>
+				
+				<!-- 纯色/渐变色切换 -->
+				<view class="up-color-picker__switch">
+					<up-subsection
+						:list="[{ name: '纯色' }, { name: '渐变' }]"
+						:current="colorTypeIndex"
+						@change="changeColorType"
+						fontSize="14"
+					></up-subsection>
+				</view>
+				
+				<!-- 渐变色选择器 -->
+				<view v-if="colorTypeIndex == 1" class="up-color-picker__gradient">
+					<!-- 渐变色控制条 -->
+					<view 
+						class="up-color-picker__gradient-track"
+                        :style="{ background: gradientStyle }"
+					>
+						<view 
+							class="up-color-picker__gradient-pointer" 
+							v-for="(item, index) in gradientColors" 
+							:key="index"
+							:style="{ left: getGradientPointerPosition(index) + 'px' }"
+                            @click="openColorPickerForGradient(index)"
+							@touchstart="onPointerTouchStart($event, index)"
+							@touchmove.stop="onPointerTouchMove"
+							@touchend.stop="onPointerTouchEnd"
+						>
+							<view class="up-color-picker__gradient-pointer-inner" :style="{ backgroundColor: item.color }"></view>
+						</view>
+					</view>
+					
+					<view class="up-color-picker__gradient-controls">
+						<up-button 
+							type="primary" 
+							size="mini" 
+							plain 
+							@click="addGradientColor"
+							class="up-color-picker__add-btn"
+						>
+							添加颜色
+						</up-button>
+					</view>
+					
+					<!-- 圆形方向选择器 -->
+					<view class="up-color-picker__gradient-direction">
+						<text>方向:</text>
+						<view class="up-color-picker__gradient__direction-circle" 
+							@touchstart="onDirectionTouchStart"
+							@touchmove="onDirectionTouchMove"
+							@touchend="onDirectionTouchEnd">
+							<view 
+								class="up-color-picker__direction-pointer"
+								:style="{ 
+									left: directionPointer.x + 'px', 
+									top: directionPointer.y + 'px' 
+								}"
+							></view>
+						</view>
+					</view>
+				</view>
+
+                <!-- 纯色选择器 -->
+				<view class="up-color-picker__solid">
+					<!-- 饱和度和明度选择区域 -->
+					<view 
+						class="up-color-picker__saturation" 
+						:style="{ backgroundColor: `hsl(${hue}, 100%, 50%)` }"
+						@touchstart="onSaturationTouchStart"
+						@touchmove="onSaturationTouchMove"
+						@touchend="onSaturationTouchEnd"
+					>
+						<view 
+							class="up-color-picker__saturation-pointer" 
+							:style="{
+								left: saturationPosition.x + 'px',
+								top: saturationPosition.y + 'px'
+							}"
+						></view>
+					</view>
+					
+					<!-- 色相选择 -->
+					<view 
+						class="up-color-picker__hue"
+						@touchstart="onHueTouchStart"
+						@touchmove="onHueTouchMove"
+						@touchend="onHueTouchEnd"
+					>
+						<view 
+							class="up-color-picker__hue-pointer" 
+							:style="{ left: huePosition + 'px' }"
+						></view>
+					</view>
+					
+					<!-- 透明度选择 -->
+					<view v-if="colorTypeIndex == 0" 
+						class="up-color-picker__alpha"
+						@touchstart="onAlphaTouchStart"
+						@touchmove="onAlphaTouchMove"
+						@touchend="onAlphaTouchEnd"
+					>
+						<view class="up-color-picker__alpha-bg"></view>
+						<view 
+							class="up-color-picker__alpha-pointer" 
+							:style="{ left: alphaPosition + 'px' }"
+						></view>
+					</view>
+				</view>
+				
+				<!-- 常用颜色 -->
+				<view v-if="commonColors && commonColors.length" class="up-color-picker__common">
+					<text class="up-color-picker__common-title">常用颜色</text>
+					<view class="up-color-picker__common-list">
+						<view 
+							v-for="(color, index) in commonColors" 
+							:key="index"
+							class="up-color-picker__common-item"
+							:style="{ backgroundColor: color }"
+							@click="selectCommonColor(color)"
+						></view>
+					</view>
+				</view>
+				
+				<!-- 颜色预览和操作按钮 -->
+				<view class="up-color-picker__footer">
+					<view class="up-color-picker__preview">
+						<view 
+							class="up-color-picker__preview-color"
+							:style="{ backgroundColor: displayColor }"
+						></view>
+						<text class="up-color-picker__preview-text">{{ displayColor }}</text>
+					</view>
+					<view class="up-color-picker__actions">
+						<up-button 
+							type="primary" 
+							size="small" 
+							@click="confirm"
+							class="up-color-picker__btn"
+						>
+							确定
+						</up-button>
+						<up-button 
+							type="info" 
+							size="small" 
+							@click="close"
+							class="up-color-picker__btn"
+						>
+							取消
+						</up-button>
+					</view>
+				</view>
+			</view>
+		</up-popup>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'up-color-picker',
+	props: {
+		// 初始颜色值
+		modelValue: {
+			type: String,
+			default: '#ff0000'
+		},
+		// 常用颜色列表
+		commonColors: {
+			type: Array,
+			default: () => [
+            ]
+		}
+	},
+	data() {
+		return {
+            show: false,
+			// 颜色类型索引：0-纯色，1-渐变色
+			colorTypeIndex: 0,
+			// 纯色相关数据
+			hue: 0,
+			saturation: 100,
+			lightness: 50,
+			alpha: 1,
+			saturationPosition: { x: 150, y: 0 },
+			huePosition: 0,
+			alphaPosition: 0, // 将在initColor中设置为最右侧
+			// 渐变色相关数据
+			gradientColors: [
+				{ color: '#ff0000', percent: 0 },
+				{ color: '#0000ff', percent: 1 }
+			],
+			gradientDirections: [
+				{ label: '从左到右', value: 'to right' },
+				{ label: '从上到下', value: 'to bottom' },
+				{ label: '从左上到右下', value: 'to bottom right' },
+				{ label: '从右上到左下', value: 'to bottom left' }
+			],
+			currentDirection: { label: '从左到右', value: 'to right' },
+			showDirectionPicker: false,
+			// 当前选中颜色
+			currentColor: '#ff0000',
+			// 渐变色控制相关
+			draggingPointerIndex: -1,
+			directionPointer: { x: 20, y: 20 }, // 默认向右(在圆的右侧)
+			// 渐变节点颜色修改相关
+			editingGradientIndex: -1,
+			// 保存纯色和渐变色的各自状态
+			solidColorState: {
+				hue: 0,
+				saturation: 100,
+				lightness: 50,
+				alpha: 1,
+				saturationPosition: { x: 150, y: 0 },
+				huePosition: 0,
+				alphaPosition: 0, // 将在initColor中设置为最右侧
+				currentColor: '#ff0000'
+			},
+			gradientColorState: {
+				gradientColors: [
+					{ color: '#ff0000', percent: 0 },
+					{ color: '#0000ff', percent: 1 }
+				],
+				currentDirection: { label: '从左到右', value: 'to right' },
+				directionPointer: { x: 100, y: 0 }
+			},
+			// 区分预览类型：solid-纯色预览，gradient-整体渐变预览，gradient-point-渐变点预览
+			previewType: 'solid'
+		}
+	},
+	computed: {
+		// 渐变色样式
+		gradientStyle() {
+			const colors = this.gradientColors.map(item => `${item.color} ${Math.round(item.percent * 100)}%`).join(', ')
+			return `linear-gradient(${this.currentDirection.value}, ${colors})`
+		},
+		// 显示的颜色预览值
+		displayColor() {
+			if (this.previewType === 'gradient-point' && this.editingGradientIndex >= 0) {
+				return this.gradientColors[this.editingGradientIndex].color;
+			}
+            console.log(this.editingGradientIndex)
+			return this.currentColor;
+		}
+	},
+	watch: {
+		show(newVal) {
+			if (newVal) {
+				this.initColor()
+			}
+		},
+        colorTypeIndex(newVal) {
+            if (newVal == 0) {
+                this.editingGradientIndex = -1
+            }
+		},
+	},
+	mounted() {
+		this.initColor()
+	},
+    emits: ['update:modelValue', 'confirm', 'close'],
+	methods: {
+		// 初始化颜色
+		initColor() {
+			if (this.modelValue) {
+				this.currentColor = this.modelValue
+				if (this.modelValue.includes('linear-gradient')) {
+					// 解析渐变色
+					this.colorTypeIndex = 1
+					this.parseGradientColor(this.modelValue)
+					this.previewType = 'gradient';
+				} else {
+					// 解析纯色
+					this.colorTypeIndex = 0
+					this.parseSolidColor(this.modelValue)
+					this.previewType = 'solid';
+				}
+			}
+            // 初始化方向指针位置
+            this.initDirectionPointer();
+            // 初始化alphaPosition为最右侧
+            this.initAlphaPosition();
+		},
+		
+        // 初始化alpha位置为最右侧
+        async initAlphaPosition() {
+            const query = uni.createSelectorQuery().in(this);
+            query.select('.up-color-picker__alpha').boundingClientRect();
+            await this.$nextTick();
+            query.exec(res => {
+                const rect = res[0];
+                if (rect) {
+                    this.alphaPosition = rect.width || 150; // 默认150像素
+                } else {
+                    this.alphaPosition = 150; // 默认值
+                }
+                
+                // 同步solidColorState中的alphaPosition
+                this.solidColorState.alphaPosition = this.alphaPosition;
+                this.updateSolidColor();
+            });
+        },
+        
+        // 初始化方向指针位置
+        initDirectionPointer() {
+            const angle = this.getDirectionAngle(this.currentDirection.value);
+            this.setDirectionPointerByAngle(angle);
+        },
+        
+        // 根据方向值获取角度
+        getDirectionAngle(direction) {
+            switch(direction) {
+                case 'to right': return 0;
+                case 'to bottom': return 90;
+                case 'to left': return 180;
+                case 'to top': return 270;
+                case 'to bottom right': return 45;
+                case 'to bottom left': return 135;
+                case 'to top left': return 225;
+                case 'to top right': return 315;
+                default: return 0;
+            }
+        },
+        
+        // 根据角度设置方向指针位置
+        setDirectionPointerByAngle(angle) {
+            const radian = angle * Math.PI / 180;
+            const radius = 20; // 圆半径
+            this.directionPointer = {
+                x: radius * Math.cos(radian) + 20, // 20是圆心位置
+                y: radius * Math.sin(radian) + 20
+            };
+        },
+		
+		// 打开颜色选择器以修改渐变节点颜色
+		openColorPickerForGradient(index) {
+			this.editingGradientIndex = index;
+			// 设置当前颜色为选中节点的颜色
+			const color = this.gradientColors[index].color;
+			this.currentColor = color;
+			// 设置预览类型为渐变点预览
+			this.previewType = 'gradient-point';
+			
+			// 解析颜色并设置选择器位置
+			if (!color.includes('linear-gradient')) {
+				this.colorTypeIndex = 0;
+				this.parseSolidColor(color);
+				// 保存当前渐变状态
+				this.gradientColorState = {
+					gradientColors: [...this.gradientColors],
+					currentDirection: {...this.currentDirection},
+					directionPointer: {...this.directionPointer}
+				};
+			}
+		},
+		
+		// 解析纯色
+		parseSolidColor(color) {
+			// 简化处理，实际项目中可以使用更复杂的颜色解析
+			this.currentColor = color
+			// 如果正在编辑渐变节点，则更新该节点颜色
+			if (this.editingGradientIndex >= 0) {
+				this.gradientColors[this.editingGradientIndex].color = color;
+				// 切换回渐变模式并恢复渐变状态
+				this.colorTypeIndex = 1;
+				Object.assign(this, this.solidColorState);
+				this.previewType = 'gradient-point';
+			} else {
+				this.previewType = 'solid';
+			}
+		},
+		
+		// 解析渐变色
+		parseGradientColor(gradient) {
+			// 简化处理，实际项目中可以使用更复杂的渐变解析
+			this.currentColor = gradient
+			// this.previewType = 'gradient';
+		},
+		
+		// 切换颜色类型
+		changeColorType(index) {
+			// 保存当前状态
+			if (this.colorTypeIndex === 0) {
+				// 保存纯色状态
+				this.solidColorState = {
+					hue: this.hue,
+					saturation: this.saturation,
+					lightness: this.lightness,
+					alpha: this.alpha,
+					saturationPosition: {...this.saturationPosition},
+					huePosition: this.huePosition,
+					alphaPosition: this.alphaPosition,
+					currentColor: this.currentColor
+				};
+			} else {
+				// 保存渐变状态
+				this.gradientColorState = {
+					gradientColors: [...this.gradientColors],
+					currentDirection: {...this.currentDirection},
+					directionPointer: {...this.directionPointer}
+				};
+			}
+			
+			this.colorTypeIndex = index;
+			
+			// 恢复目标状态
+			if (index === 0) {
+				Object.assign(this, this.solidColorState);
+				this.previewType = 'solid';
+			} else {
+				Object.assign(this, this.gradientColorState);
+				// 确保gradientColors是响应式的
+				this.gradientColors = [...this.gradientColorState.gradientColors];
+				this.previewType = 'gradient';
+			}
+		},
+		
+		// 饱和度和明度触摸开始
+		onSaturationTouchStart(e) {
+			this.updateSaturationPosition(e)
+		},
+		
+		// 饱和度和明度触摸移动
+		onSaturationTouchMove(e) {
+			this.updateSaturationPosition(e)
+		},
+		
+		// 饱和度和明度触摸结束
+		onSaturationTouchEnd(e) {
+			this.updateSaturationPosition(e)
+		},
+		
+		// 更新饱和度和明度位置
+		updateSaturationPosition(e) {
+			const touch = e.touches[0] || e.changedTouches[0]
+			const target = e.currentTarget
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.up-color-picker__saturation').boundingClientRect()
+			
+			query.exec(res => {
+				const rect = res[0];
+				if (rect) {
+					let x = touch.clientX - rect.left
+					let y = touch.clientY - rect.top
+					
+					// 边界处理
+					x = Math.max(0, Math.min(x, rect.width))
+					y = Math.max(0, Math.min(y, rect.height))
+					
+					this.saturationPosition = { x, y }
+					this.updateSolidColor()
+				}
+			})
+		},
+		
+		// 色相触摸开始
+		onHueTouchStart(e) {
+			this.updateHuePosition(e)
+		},
+		
+		// 色相触摸移动
+		onHueTouchMove(e) {
+			this.updateHuePosition(e)
+		},
+		
+		// 色相触摸结束
+		onHueTouchEnd(e) {
+			this.updateHuePosition(e)
+		},
+		
+		// 更新色相位置
+		updateHuePosition(e) {
+			const touch = e.touches[0] || e.changedTouches[0]
+			const target = e.currentTarget
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.up-color-picker__hue').boundingClientRect()
+			
+			query.exec(res => {
+				const rect = res[0];
+				if (rect) {
+					let x = touch.clientX - rect.left
+					x = Math.max(0, Math.min(x, rect.width))
+					this.huePosition = x
+					this.hue = Math.round((x / rect.width) * 360)
+					this.updateSolidColor()
+				}
+			})
+		},
+		
+		// 透明度触摸开始
+		onAlphaTouchStart(e) {
+			this.updateAlphaPosition(e)
+		},
+		
+		// 透明度触摸移动
+		onAlphaTouchMove(e) {
+			this.updateAlphaPosition(e)
+		},
+		
+		// 透明度触摸结束
+		onAlphaTouchEnd(e) {
+			this.updateAlphaPosition(e)
+		},
+		
+		// 更新透明度位置
+		updateAlphaPosition(e) {
+			const touch = e.touches[0] || e.changedTouches[0]
+			const target = e.currentTarget
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.up-color-picker__alpha').boundingClientRect()
+			
+			query.exec(res => {
+				const rect = res[0];
+				if (rect) {
+					let x = touch.clientX - rect.left
+					x = Math.max(0, Math.min(x, rect.width))
+					this.alphaPosition = x
+					this.alpha = x / rect.width
+					this.updateSolidColor()
+				}
+			})
+		},
+		
+		// 更新纯色
+		updateSolidColor() {
+			// 使用实际元素尺寸替代硬编码的150
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.up-color-picker__saturation').boundingClientRect();
+			
+			query.exec(res => {
+				const rect = res[0];
+				const size = rect ? Math.min(rect.width, rect.height) : 150; // 默认150作为后备值
+				
+				const s = (this.saturationPosition.x / size) * 100
+				const l = 100 - (this.saturationPosition.y / size) * 100
+				this.saturation = s
+				this.lightness = l
+				
+				// 使用正确的HSL转RGB算法
+				if (this.colorTypeIndex == 0) {
+					this.currentColor = this.hslToRgb(this.hue, this.saturation, this.lightness, this.alpha)
+				} else if (this.colorTypeIndex == 1) {
+					this.gradientColors[this.editingGradientIndex].color
+						= this.hslToRgb(this.hue, this.saturation, this.lightness, this.alpha)
+				}
+			});
+		},
+		
+		// 添加渐变色
+		addGradientColor() {
+			if (this.gradientColors.length < 5) {
+				this.gradientColors.push({
+					color: '#ffffff',
+					percent: 1
+				})
+			}
+		},
+		
+		// 删除渐变色
+		removeGradientColor(index) {
+			if (this.gradientColors.length > 2) {
+				this.gradientColors.splice(index, 1)
+			}
+		},
+		
+		// 获取渐变控制点位置
+		getGradientPointerPosition(index) {
+			const trackWidth = 280; // 需要与样式中的宽度一致
+			return this.gradientColors[index].percent * trackWidth;
+		},
+		
+		// 更新渐变色
+		updateGradientColor(e) {
+			const touch = e.touches[0] || e.changedTouches[0];
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.up-color-picker__gradient-track').boundingClientRect();
+			
+			query.exec(res => {
+				const rect = res[0];
+				if (rect) {
+					let x = touch.clientX - rect.left;
+					// 边界处理
+					x = Math.max(0, Math.min(x, rect.width));
+					const percent = x / rect.width;
+					
+					// 如果正在拖动控制点，则更新该控制点位置
+					if (this.draggingPointerIndex >= 0) {
+						this.gradientColors[this.draggingPointerIndex].percent = percent;
+						// 保持控制点顺序
+						this.gradientColors.sort((a, b) => a.percent - b.percent);
+					} else {
+						// 否则添加新的控制点（此处可选功能）
+					}
+				}
+			});
+		},
+		
+		// 控制点触摸开始
+		onPointerTouchStart(e, index) {
+			this.draggingPointerIndex = index;
+			// 点击控制点时更新预览颜色
+			this.currentColor = this.gradientColors[index].color;
+			this.previewType = 'gradient-point';
+			this.editingGradientIndex = index; // 添加这行以正确设置编辑索引
+			// 阻止事件冒泡
+			e.stopPropagation();
+		},
+		
+		// 控制点触摸移动
+		onPointerTouchMove(e) {
+			if (this.draggingPointerIndex === -1) return;
+			
+			const touch = e.touches[0] || e.changedTouches[0];
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.up-color-picker__gradient-track').boundingClientRect();
+			
+			query.exec(res => {
+				const rect = res[0];
+				if (rect) {
+					let x = touch.clientX - rect.left;
+					// 边界处理
+					x = Math.max(0, Math.min(x, rect.width));
+					let percent = x / rect.width;
+					
+					// 处理边界情况，确保能精确到达两端
+					if (x === 0) percent = 0;
+					if (x === rect.width) percent = 1;
+					
+					// 更新控制点位置
+					this.gradientColors[this.draggingPointerIndex].percent = percent;
+					// 保持控制点顺序
+					this.gradientColors.sort((a, b) => a.percent - b.percent);
+					// 更新拖拽索引以匹配排序后的索引
+					this.draggingPointerIndex = this.gradientColors.findIndex((item, index) => {
+						// 使用更精确的比较方法，处理浮点数精度问题
+						return Math.abs(item.percent - percent) < 0.0001;
+					});
+				}
+			});
+		},
+		
+		// 控制点触摸结束
+		onPointerTouchEnd() {
+			this.draggingPointerIndex = -1;
+		},
+		
+		// 方向选择器触摸开始
+		onDirectionTouchStart(e) {
+			this.updateDirection(e);
+		},
+		
+		// 方向选择器触摸移动
+		onDirectionTouchMove(e) {
+			this.updateDirection(e);
+		},
+		
+		// 方向选择器触摸结束
+		onDirectionTouchEnd(e) {
+			this.updateDirection(e);
+		},
+		
+		// 更新方向
+		updateDirection(e) {
+			const touch = e.touches[0] || e.changedTouches[0];
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.up-color-picker__gradient__direction-circle').boundingClientRect();
+			
+			query.exec(res => {
+				const rect = res[0];
+				if (rect) {
+					const centerX = rect.left + rect.width / 2;
+					const centerY = rect.top + rect.height / 2;
+					const x = touch.clientX - centerX;
+					const y = touch.clientY - centerY;
+					const distance = Math.sqrt(x * x + y * y);
+					const maxDistance = rect.width / 2;
+					
+					// 限制在圆内
+					if (distance <= maxDistance) {
+						this.directionPointer = {
+							x: x + rect.width / 2,
+							y: y + rect.height / 2
+						};
+					} else {
+						// 限制在圆周上
+						const ratio = maxDistance / distance;
+						this.directionPointer = {
+							x: x * ratio + rect.width / 2,
+							y: y * ratio + rect.height / 2
+						};
+					}
+					
+					// 计算角度并更新方向
+					const angle = Math.atan2(y, x) * 180 / Math.PI;
+                    console.log(angle)
+					this.updateGradientDirection(angle);
+				}
+			});
+		},
+		
+		// 根据角度更新渐变方向
+		updateGradientDirection(angle) {
+			// 角度转换为标准方向
+			if (angle < 0) angle += 360;
+			
+			if (angle >= 315 || angle < 45) {
+				this.currentDirection = { label: '从左到右', value: 'to right' };
+			} else if (angle >= 45 && angle < 135) {
+				this.currentDirection = { label: '从上到下', value: 'to bottom' };
+			} else if (angle >= 135 && angle < 225) {
+				this.currentDirection = { label: '从右到左', value: 'to left' };
+			} else {
+				this.currentDirection = { label: '从下到上', value: 'to top' };
+			}
+		},
+		
+		// 确认方向选择
+		confirmDirection(e) {
+			this.currentDirection = this.gradientDirections[e.index]
+			this.showDirectionPicker = false
+		},
+		
+		// 选择常用颜色
+		selectCommonColor(color) {
+			this.currentColor = color
+			if (this.colorTypeIndex === 0) {
+				this.parseSolidColor(color)
+			} else {
+				// 如果是渐变模式，将常用颜色作为渐变的一个节点
+				this.gradientColors[this.editingGradientIndex].color = color
+			}
+		},
+		
+		// 确认选择
+		confirm() {
+			let color = this.currentColor
+			if (this.colorTypeIndex === 1) {
+				color = this.gradientStyle
+			}
+            this.$emit('update:modelValue', color)
+            this.show = false;
+			this.$emit('confirm', color)
+			// 重置编辑状态
+			this.editingGradientIndex = -1;
+			this.previewType = this.colorTypeIndex === 0 ? 'solid' : 'gradient';
+			this.close()
+		},
+		
+		// 关闭选择器
+		close() {
+            this.show = false;
+			this.$emit('close')
+		},
+		
+		// HSL转RGB辅助函数
+		hslToRgb(h, s, l, a = 1) {
+			h = h / 360;
+			s = s / 100;
+			l = l / 100;
+			
+			let r, g, b;
+			
+			if (s === 0) {
+				r = g = b = l; // achromatic
+			} else {
+				const hue2rgb = (p, q, t) => {
+					if (t < 0) t += 1;
+					if (t > 1) t -= 1;
+					if (t < 1/6) return p + (q - p) * 6 * t;
+					if (t < 1/2) return q;
+					if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+					return p;
+				};
+				
+				const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+				const p = 2 * l - q;
+				r = hue2rgb(p, q, h + 1/3);
+				g = hue2rgb(p, q, h);
+				b = hue2rgb(p, q, h - 1/3);
+			}
+			
+			const round = (value) => Math.round(value * 255);
+			return `rgba(${round(r)}, ${round(g)}, ${round(b)}, ${a.toFixed(2)})`;
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.up-color-picker {
+	&__content {
+		width: 100%;
+		padding: 20px;
+		background-color: #fff;
+	}
+	
+	&__header {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+	
+	&__title {
+		font-size: 18px;
+		font-weight: bold;
+		color: #333;
+	}
+	
+	&__switch {
+		margin-bottom: 20px;
+	}
+	
+	&__saturation {
+		position: relative;
+		width: 100%;
+		height: 150px;
+		border-radius: 4px;
+		margin-bottom: 15px;
+		overflow: hidden;
+		
+		&:after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: linear-gradient(to right, #fff, rgba(255,255,255,0));
+		}
+		
+		&:before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: linear-gradient(to top, #000, rgba(0,0,0,0));
+		}
+	}
+	
+	&__saturation-pointer {
+		position: absolute;
+		width: 12px;
+		height: 12px;
+		border: 2px solid #fff;
+		border-radius: 50%;
+		transform: translate(-50%, -50%);
+		box-shadow: 0 0 2px rgba(0,0,0,0.5);
+		pointer-events: none;
+	}
+	
+	&__hue,
+	&__alpha {
+		position: relative;
+		width: 100%;
+		height: 12px;
+		border-radius: 6px;
+		margin-bottom: 15px;
+		cursor: pointer;
+	}
+	
+	&__hue {
+		background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
+	}
+	
+	&__alpha {
+		position: relative;
+		overflow: hidden;
+		
+		&-bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
+						linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
+			background-size: 10px 10px;
+			background-position: 0 0, 5px 5px;
+		}
+		
+		&:after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
+		}
+	}
+	
+	&__hue-pointer,
+	&__alpha-pointer {
+		position: absolute;
+		width: 4px;
+		height: 16px;
+		background: #fff;
+		border: 1px solid #ccc;
+		border-radius: 2px;
+		transform: translateX(-50%);
+		top: -2px;
+		box-shadow: 0 0 2px rgba(0,0,0,0.5);
+		pointer-events: none;
+	}
+	
+	&__gradient {
+		&-bar {
+			width: 100%;
+			height: 40px;
+			border-radius: 4px;
+		}
+		
+		&-track {
+			position: relative;
+            margin-top: 20px;
+			width: 100%;
+			height: 32px;
+			border-radius: 4px;
+			margin-bottom: 15px;
+			cursor: pointer;
+		}
+		
+		&-pointer {
+			position: absolute;
+			top: -10px;
+			transform: translateX(-50%);
+			width: 0;
+			height: 0;
+			border-left: 8px solid transparent;
+			border-right: 8px solid transparent;
+			border-top: 10px solid #333;
+			z-index: 10;
+		}
+		
+		&-pointer-inner {
+			position: absolute;
+			top: -25px;
+			left: -10px;
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			border: 2px solid #fff;
+			box-shadow: 0 0 2px rgba(0,0,0,0.5);
+		}
+		
+		&-controls {
+			display: flex;
+            flex-direction: row;
+			flex-wrap: wrap;
+			align-items: center;
+			margin-bottom: 15px;
+		}
+		
+		&-item {
+			display: flex;
+            flex-direction: row;
+			align-items: center;
+			margin-right: 10px;
+			margin-bottom: 10px;
+		}
+		
+		&-color-preview {
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			margin-right: 5px;
+			border: 1px solid #eee;
+		}
+		
+		&-percent {
+			font-size: 12px;
+			color: #666;
+			margin-right: 5px;
+		}
+		
+		&-direction {
+			display: flex;
+            flex-direction: row;
+			align-items: center;
+			margin: 10px 0;
+		}
+		
+		&__direction-circle {
+			width: 40px;
+			height: 40px;
+			border-radius: 50%;
+			background: conic-gradient(
+				#ff0000 0deg, 
+				#ffff00 60deg, 
+				#00ff00 120deg, 
+				#00ffff 180deg, 
+				#0000ff 240deg, 
+				#ff00ff 300deg, 
+				#ff0000 360deg
+			);
+			position: relative;
+			margin: 10px auto;
+			cursor: pointer;
+			border: 2px solid #eee;
+		}
+		
+		&__direction-pointer {
+			position: absolute;
+			width: 6px;
+			height: 6px;
+			background: #fff;
+			border: 2px solid #333;
+			border-radius: 50%;
+			transform: translate(-50%, -50%);
+			box-shadow: 0 0 2px rgba(0,0,0,0.5);
+			z-index: 10;
+            pointer-events: none;
+		}
+	}
+	
+	&__add-btn {
+		margin-top: 10px;
+	}
+	
+	&__common {
+		margin-top: 20px;
+		
+		&-title {
+			display: block;
+			margin-bottom: 10px;
+			font-size: 14px;
+			color: #666;
+		}
+		
+		&-list {
+			display: flex;
+            flex-direction: row;
+			flex-wrap: wrap;
+		}
+		
+		&-item {
+			width: 24px;
+			height: 24px;
+			border-radius: 50%;
+			margin-right: 10px;
+			margin-bottom: 10px;
+			border: 1px solid #eee;
+			cursor: pointer;
+		}
+	}
+	
+	&__footer {
+		margin-top: 20px;
+	}
+	
+	&__preview {
+		display: flex;
+        flex-direction: row;
+		align-items: center;
+		margin-bottom: 15px;
+	}
+	
+	&__preview-color {
+		width: 40px;
+		height: 40px;
+		border-radius: 4px;
+		border: 1px solid #eee;
+		margin-right: 10px;
+	}
+	
+	&__preview-text {
+		font-size: 14px;
+		color: #333;
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	&__actions {
+		display: flex;
+        flex-direction: row;
+		justify-content: flex-end;
+		
+		& .up-color-picker__btn {
+			margin-left: 10px;
+		}
+	}
+}
+</style>