@radial-color-picker/vue-color-picker/dist/vue-color-picker.umd.min.js

Radial Color Picker - Vue

(function(o,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(o=typeof globalThis<"u"?globalThis:o||self,o.VueColorPicker=c(o.Vue))})(this,function(o){"use strict";const c=180/Math.PI,f=n=>{const e=n%360;return e<0?360+e:e},v=({x:n,y:e},a)=>{const t=a.left+a.width/2,d=a.top+a.height/2;return Math.atan2(e-d,n-t)*c},h=()=>{};class S{constructor(e,a){this.active=!1,this.element=e,this.element.style.willChange="transform",this.initOptions(a),this.updateCSS(),this.bindHandlers(),this.addListeners()}get angle(){return this._angle}set angle(e){this._angle!==e&&(this._angle=f(e),this.updateCSS())}initOptions(e){e=e||{},this.onRotate=e.onRotate||h,this.onDragStart=e.onDragStart||h,this.onDragStop=e.onDragStop||h,this._angle=e.angle||0}bindHandlers(){this.onRotationStart=this.onRotationStart.bind(this),this.onRotated=this.onRotated.bind(this),this.onRotationStop=this.onRotationStop.bind(this)}addListeners(){this.element.addEventListener("touchstart",this.onRotationStart,{passive:!0}),document.addEventListener("touchmove",this.onRotated,{passive:!1}),document.addEventListener("touchend",this.onRotationStop,{passive:!0}),document.addEventListener("touchcancel",this.onRotationStop,{passive:!0}),this.element.addEventListener("mousedown",this.onRotationStart,{passive:!0}),document.addEventListener("mousemove",this.onRotated,{passive:!1}),document.addEventListener("mouseup",this.onRotationStop,{passive:!0}),document.addEventListener("mouseleave",this.onRotationStop,{passive:!1})}removeListeners(){this.element.removeEventListener("touchstart",this.onRotationStart),document.removeEventListener("touchmove",this.onRotated),document.removeEventListener("touchend",this.onRotationStop),document.removeEventListener("touchcancel",this.onRotationStop),this.element.removeEventListener("mousedown",this.onRotationStart),document.removeEventListener("mousemove",this.onRotated),document.removeEventListener("mouseup",this.onRotationStop),document.removeEventListener("mouseleave",this.onRotationStop)}destroy(){this.onRotationStop(),this.removeListeners()}onRotationStart(e){(e.type==="touchstart"||e.button===0)&&(this.active=!0,this.onDragStart(e),this.setAngleFromEvent(e))}onRotationStop(){this.active&&(this.active=!1,this.onDragStop()),this.active=!1}onRotated(e){this.active&&(e.preventDefault(),this.setAngleFromEvent(e))}setAngleFromEvent(e){const a=e.targetTouches?e.targetTouches[0]:e,t=v({x:a.clientX,y:a.clientY},this.element.getBoundingClientRect());this._angle=f(t+90),this.updateCSS(),this.onRotate(this._angle)}updateCSS(){this.element.style.transform="rotate("+this._angle+"deg)"}}const b=(n,e)=>{const a=n.__vccOpts||n;for(const[t,d]of e)a[t]=d;return a},R=["red","yellow","green","cyan","blue","magenta","red"],g={ArrowUp:(n,e)=>n+e,ArrowRight:(n,e)=>n+e,ArrowDown:(n,e)=>n-e,ArrowLeft:(n,e)=>n-e,PageUp:(n,e)=>n+e*10,PageDown:(n,e)=>n-e*10,Home:()=>0,End:()=>359},y={name:"ColorPicker",emits:["select","input","change"],props:{hue:{default:0},saturation:{default:100},luminosity:{default:50},alpha:{default:1},step:{default:1},mouseScroll:{default:!1},variant:{default:"collapsible"},disabled:{default:!1},initiallyCollapsed:{default:!1},ariaLabel:{default:"color picker"},ariaRoledescription:{default:"radial slider"},ariaValuetext:{default:""},ariaLabelColorWell:{default:"color well"}},setup(n,{emit:e}){o.ref(null);const a=o.ref(null);let t=null;const d=n.hue+"deg",l=o.ref(n.hue),i=o.ref(!n.initiallyCollapsed),r=o.ref(!n.initiallyCollapsed),u=o.ref(!1),m=o.ref(!1),L=o.computed(()=>`hsla(${l.value}, ${n.saturation}%, ${n.luminosity}%, ${n.alpha})`),_=o.computed(()=>R[Math.round(l.value/60)]);return o.watch(()=>n.hue,s=>{l.value=s,t.angle=s}),o.onMounted(()=>{t=new S(a.value,{angle:l.value,onRotate(s){l.value=s,e("input",l.value)},onDragStop(){e("change",l.value)}})}),o.onBeforeUnmount(()=>{t.destroy(),t=null}),{rcp:t,rotator:a,initialAngle:d,angle:l,isPaletteIn:i,isKnobIn:r,isRippling:m,isPressed:u,color:L,valuetext:_,onKeyDown:s=>{n.disabled||u.value||!r.value||!(s.key in g)||(s.preventDefault(),t.angle=g[s.key](t.angle,n.step),l.value=t.angle,e("input",l.value),e("change",l.value))},onScroll:s=>{u.value||!r.value||(s.preventDefault(),s.deltaY>0?t.angle+=n.step:t.angle-=n.step,l.value=t.angle,e("input",l.value),e("change",l.value))},selectColor:()=>{u.value=!0,i.value&&r.value?(e("select",l.value),m.value=!0):i.value=!0},togglePicker:()=>{n.variant!=="persistent"&&(r.value?r.value=!1:(r.value=!0,i.value=!0)),m.value=!1,u.value=!1},hidePalette:()=>{r.value||(i.value=!1)}}}},p=["aria-roledescription","aria-label","aria-expanded","aria-valuenow","aria-valuetext","aria-disabled","tabindex"],E=o.createElementVNode("div",{class:"rcp__palette"},null,-1),C=["aria-label","disabled","tabindex"];function w(n,e,a,t,d,l){return o.openBlock(),o.createElementBlock("div",{role:"slider","aria-roledescription":a.ariaRoledescription,"aria-label":a.ariaLabel,"aria-expanded":t.isPaletteIn,"aria-valuemin":"0","aria-valuemax":"359","aria-valuenow":t.angle,"aria-valuetext":a.ariaValuetext||t.valuetext,"aria-disabled":a.disabled,class:"rcp",tabindex:a.disabled?-1:0,style:o.normalizeStyle({"--rcp-initial-angle":t.initialAngle}),onKeyup:e[3]||(e[3]=o.withKeys((...i)=>t.selectColor&&t.selectColor(...i),["enter"])),onKeydown:e[4]||(e[4]=(...i)=>t.onKeyDown&&t.onKeyDown(...i))},[E,o.createElementVNode("div",o.mergeProps({class:"rcp__rotator",style:{"pointer-events":a.disabled||t.isPressed||!t.isKnobIn?"none":null}},o.toHandlers(a.mouseScroll?{wheel:t.onScroll}:{},!0),{ref:"rotator"}),[o.createElementVNode("div",{class:o.normalizeClass(["rcp__knob",t.isKnobIn?"in":"out"]),onTransitionend:e[0]||(e[0]=(...i)=>t.hidePalette&&t.hidePalette(...i))},null,34)],16),o.createElementVNode("div",{class:o.normalizeClass(["rcp__ripple",{rippling:t.isRippling}]),style:o.normalizeStyle({borderColor:t.color})},null,6),o.createElementVNode("button",{type:"button",class:o.normalizeClass(["rcp__well",{pressed:t.isPressed}]),"aria-label":a.ariaLabelColorWell,disabled:a.disabled,tabindex:a.disabled?-1:0,style:o.normalizeStyle({backgroundColor:t.color}),onAnimationend:e[1]||(e[1]=(...i)=>t.togglePicker&&t.togglePicker(...i)),onClick:e[2]||(e[2]=(...i)=>t.selectColor&&t.selectColor(...i))},null,46,C)],44,p)}return b(y,[["render",w]])});
//# sourceMappingURL=vue-color-picker.umd.min.js.map