vxe-pc-ui/lib/color-picker/src/color-picker.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_util=require("./util"),_button=_interopRequireDefault(require("../../button/src/button")),_input=_interopRequireDefault(require("../../input/src/input"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeColorPicker",props:{modelValue:String,placeholder:String,clearable:{type:Boolean,default:()=>(0,_ui.getConfig)().colorPicker.clearable},type:{type:String,default:()=>(0,_ui.getConfig)().colorPicker.type},size:{type:String,default:()=>(0,_ui.getConfig)().colorPicker.size||(0,_ui.getConfig)().size},className:[String,Function],popupClassName:[String,Function],colors:{type:Array,default:()=>_xeUtils.default.clone((0,_ui.getConfig)().colorPicker.colors,!0)||[]},showAlpha:{type:Boolean,default:()=>(0,_ui.getConfig)().colorPicker.showAlpha},showEyeDropper:{type:Boolean,default:()=>(0,_ui.getConfig)().colorPicker.showEyeDropper},showColorExtractor:{type:Boolean,default:()=>(0,_ui.getConfig)().colorPicker.showColorExtractor},showQuick:{type:Boolean,default:()=>(0,_ui.getConfig)().colorPicker.showQuick},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},clickToCopy:{type:Boolean,default:()=>(0,_ui.getConfig)().colorPicker.clickToCopy},placement:String,transfer:{type:Boolean,default:null}},emits:["update:modelValue","change","clear","click"],setup(d,e){const t=e["emit"],o=(0,_vue.inject)("$xeModal",null),q=(0,_vue.inject)("$xeDrawer",null),S=(0,_vue.inject)("$xeTable",null),i=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("xeFormItemInfo",null),p="undefined"!=typeof window?window.EyeDropper:null;var l=_xeUtils.default.uniqueId();const M=(0,_ui.useSize)(d)["computeSize"],_=(0,_vue.ref)(),H=(0,_vue.ref)(),h=(0,_vue.ref)(),m=(0,_vue.ref)(),g=(0,_vue.ref)(),x=(0,_vue.ref)(),f=(0,_vue.ref)(),v=(0,_vue.ref)(),b=(0,_vue.ref)(),k=(0,_vue.reactive)({initialized:!1,selectColor:""+(d.modelValue||""),panelColor:"",hexValue:"",rValue:0,gValue:0,bValue:0,aValue:0,panelIndex:0,panelStyle:{},panelPlacement:null,visiblePanel:!1,isAniVisible:!1,isActivated:!1}),r={},N=(0,_vue.computed)(()=>{var e=d["readonly"];return null===e?!!i&&i.props.readonly:e}),C=(0,_vue.computed)(()=>{var e=d["disabled"];return null===e?!!i&&i.props.disabled:e}),y=(0,_vue.computed)(()=>{var e=d["transfer"];if(null===e){var l=(0,_ui.getConfig)().colorPicker.transfer;if(_xeUtils.default.isBoolean(l))return l;if(S||o||q||i)return!0}return e}),W=(0,_vue.computed)(()=>{var e=d["colors"];return e?e.map(e=>_xeUtils.default.isString(e)?{label:e,value:e}:{label:_xeUtils.default.eqNull(e.label)?e.value:e.label,value:e.value}):[]}),V=(0,_vue.computed)(()=>{var e=d["type"];return"rgb"===e||"rgba"===e?"rgb":"hex"}),w=(0,_vue.computed)(()=>{return"rgb"===V.value}),$={refElem:_},j={},E={xID:l,props:d,context:e,reactData:k,getRefMaps:()=>$,getComputeMaps:()=>j},u=()=>{var e=d["modelValue"];k.selectColor=_xeUtils.default.toValueString(e),P()},P=()=>{var e,{selectColor:l,isAniVisible:o}=k,t=w.value,i=m.value,a=x.value,l=(0,_util.parseColor)(l);k.hexValue=l.hex,k.rValue=l.r,k.gValue=l.g,k.bValue=l.b,k.aValue=l.a,l.value&&(t?"hex"===l.type&&(t=(0,_util.hexToRgb)(l.hex))&&(k.rValue=t.r,k.gValue=t.g,k.bValue=t.b,k.aValue=t.a):"hex"!==l.type&&(k.hexValue=(0,_util.rgbToHex)(l))),o&&(t="hex"===l.type?(0,_util.hexToHsv)(l.hex):(0,_util.rgbToHsv)(l),o=v.value,t&&(o&&(e=o.clientHeight*(1-t.v),o=o.clientWidth*t.s,B(o,e)),i)&&T(_xeUtils.default.ceil((1-t.h/360)*i.clientWidth)),a)&&R(a.clientWidth*l.a)},n=()=>(0,_vue.nextTick)().then(()=>{var t=d["placement"],i=k["panelIndex"],a=_.value,r=h.value,e=y.value;if(r&&a){var u=a.offsetHeight,n=a.offsetWidth,c=r.offsetHeight,r=r.offsetWidth,i={zIndex:i},{boundingTop:a,boundingLeft:s,visibleHeight:v,visibleWidth:p}=(0,_dom.getAbsolutePos)(a);let o="bottom";if(e){let e=s,l=a+u;"top"===t?(o="top",l=a-c):t||(l+c+5>v&&(o="top",l=a-c),l<5&&(o="bottom",l=a+u)),e+r+5>p&&(e-=e+r+5-p),e<5&&(e=5),Object.assign(i,{left:e+"px",top:l+"px",minWidth:n+"px"})}else"top"===t?(o="top",i.bottom=u+"px"):t||v<a+u+c&&5<a-u-c&&(o="top",i.bottom=u+"px");return k.panelStyle=i,k.panelPlacement=o,(0,_vue.nextTick)()}}),c=()=>{var e=r["hpTimeout"];C.value||(e&&(clearTimeout(e),r.hpTimeout=void 0),k.initialized||(k.initialized=!0),k.isActivated=!0,k.isAniVisible=!0,setTimeout(()=>{P(),k.visiblePanel=!0},10),k.panelIndex<(0,_utils.getLastZIndex)()&&(k.panelIndex=(0,_utils.nextZIndex)()),n())},s=()=>{k.visiblePanel=!1,r.hpTimeout=setTimeout(()=>{k.isAniVisible=!1},350)},U=(e,l)=>{var o;(k.selectColor=l)!==d.modelValue&&(o=l,t("update:modelValue",o),D("change",{value:l},e),i)&&a&&i.triggerItemEvent(e,a.itemConfig.field,l)},L=(e,l)=>{U(e,l),D("clear",{value:l},e)},F=()=>{C.value||k.visiblePanel||c()},O=()=>{k.isActivated=!1},X=e=>{L(e,null),s()},G=e=>{var l=k["selectColor"];U(e,l),s()},Q=e=>{e.preventDefault(),(k.visiblePanel?s:c)()},Y=e=>{Q(e),D("click",{},e)},T=t=>{var i=m.value,a=g.value;if(i&&a){t<0&&(t=0);var i=_xeUtils.default.toInteger(i.clientWidth),r=255,i=_xeUtils.default.ceil(1530/i*t),u=i%r;let e=0,l=0,o=0;switch(Math.ceil(i/r)){case 1:e=r,o=u;break;case 2:e=r-u,o=r;break;case 3:l=u,o=r;break;case 4:l=r,o=r-u;break;case 5:e=u,l=r;break;case 6:e=r,l=r-u}k.panelColor=(0,_util.toRgb)(e,l,o),a.style.left=(0,_dom.toCssUnit)(t)}},I=e=>{var l=m.value,o=g.value;l&&o&&(o=l.getBoundingClientRect(),l=_xeUtils.default.toInteger(l.clientWidth),l=_xeUtils.default.ceil(Math.min(l-1,Math.max(1,e.clientX-o.x))),T(l))},Z=e=>{e.preventDefault(),document.onmousemove=e=>{e.preventDefault(),I(e)},document.onmouseup=e=>{document.onmousemove=null,document.onmouseup=null,I(e)}},R=e=>{var l=k["selectColor"],o=x.value,t=f.value;o&&t&&(o=o.getBoundingClientRect().width,o=_xeUtils.default.ceil(100/o*(e=o<(e=e<0?0:e)?o:e)/100,2),k.aValue=o,t.style.left=(0,_dom.toCssUnit)(e),k.selectColor=(0,_util.updateColorAlpha)(l,o))},z=e=>{var l=x.value,o=f.value;l&&o&&(l=(o=l.getBoundingClientRect()).width,l=Math.min(l,Math.max(0,e.clientX-o.x)),R(l),P())},J=e=>{e.preventDefault(),document.onmousemove=e=>{e.preventDefault(),z(e)},document.onmouseup=e=>{document.onmousemove=null,document.onmouseup=null,z(e)}},A=()=>{var{rValue:e,gValue:l,bValue:o,aValue:t}=k;k.selectColor=(0,_util.toRgb)(e,l,o,t),P()},K=()=>{var e=k["aValue"],l=x.value,o=f.value;l&&o&&(o=l.getBoundingClientRect().width*e,R(o))},ee=(e,l)=>{l=l.value;k.selectColor=l,P()},B=(e,l)=>{var o=b.value;o&&(o.style.top=(0,_dom.toCssUnit)(l),o.style.left=(0,_dom.toCssUnit)(e))},le=()=>{if(p)try{(new p).open().then(e=>{e&&e.sRGBHex&&(k.selectColor=e.sRGBHex,P())}).catch(()=>{})}catch(e){}},oe=e=>{var l,o=d["showAlpha"],{panelColor:t,aValue:i}=k,a=v.value,r=b.value;a&&r&&(r=a.getBoundingClientRect(),l=e.clientY-r.y,e=e.clientX-r.x,r=(0,_util.parseColor)(t))&&(t="hex"===r.type?(0,_util.hexToHsv)(r.hex):(0,_util.rgbToHsv)(r))&&(r=(0,_util.hsvToRgb)(t.h,e/a.clientWidth,1-l/a.clientHeight),k.selectColor=(0,_util.toRgb)(r.r,r.g,r.b,o?i:null),B(e,l),P())},te=()=>{var e=k["selectColor"];e&&_ui.VxeUI.clipboard.copy(e)&&_ui.VxeUI.modal&&_ui.VxeUI.modal.message({content:(0,_ui.getI18n)("vxe.colorPicker.copySuccess",[e]),status:"success"})},ie=e=>{var l=k["visiblePanel"];C.value||l&&(l=h.value,((0,_dom.getEventTargetNode)(e,l).flag?n:s)())},ae=e=>{var l,o,t=k["visiblePanel"];C.value||(l=_.value,o=h.value,k.isActivated=(0,_dom.getEventTargetNode)(e,l).flag||(0,_dom.getEventTargetNode)(e,o).flag,t&&!k.isActivated&&s())},re=()=>{s()},D=(e,l,o)=>{t(e,(0,_ui.createEvent)(o,{$colorPicker:E},l))};l={dispatchEvent:D};Object.assign(E,l,{});return(0,_vue.watch)(()=>d.modelValue,()=>{u()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(E,"mousewheel",ie),_ui.globalEvents.on(E,"mousedown",ae),_ui.globalEvents.on(E,"blur",re)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(E,"mousewheel"),_ui.globalEvents.off(E,"mousedown"),_ui.globalEvents.off(E,"blur")}),u(),(0,_vue.provide)("$xeColorPicker",E),E.renderVN=()=>{var{className:e,popupClassName:l,clearable:o,modelValue:t}=d,{initialized:i,isActivated:a,isAniVisible:r,visiblePanel:u}=k,n=M.value,c=C.value,s=y.value;return N.value?(0,_vue.h)("div",{ref:_,class:["vxe-color-picker--readonly",e]},[(0,_vue.h)("div",{class:"vxe-color-picker--readonly-color",style:{backgroundColor:t}})]):(0,_vue.h)("div",{ref:_,class:["vxe-color-picker",e?_xeUtils.default.isFunction(e)?e({$colorPicker:E}):e:"",{["size--"+n]:n,"is--selected":!!t,"is--visible":u,"is--disabled":c,"is--active":a}]},[(0,_vue.h)("input",{ref:H,class:"vxe-color-picker--input",onFocus:F,onBlur:O}),(0,_vue.h)("div",{class:"vxe-color-picker--inner",onClick:Y},[(0,_vue.h)("div",{class:"vxe-color-picker--inner-color",style:{backgroundColor:t}})]),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!s||!i},[(0,_vue.h)("div",{ref:h,class:["vxe-table--ignore-clear vxe-color-picker--panel",l?_xeUtils.default.isFunction(l)?l({$colorPicker:E}):l:"",{["size--"+n]:n,"is--transfer":s,"ani--leave":r,"ani--enter":u}],placement:k.panelPlacement,style:k.panelStyle},[i&&(u||r)?(0,_vue.h)("div",{class:"vxe-color-picker--panel-wrapper"},[(e=d.showColorExtractor,c=k.panelColor,e?(0,_vue.h)("div",{ref:v,class:"vxe-color-picker--color-wrapper",onMousedown:oe},[(0,_vue.h)("div",{class:"vxe-color-picker--color-bg",style:{backgroundColor:c}}),(0,_vue.h)("div",{class:"vxe-color-picker--white-bg"}),(0,_vue.h)("div",{class:"vxe-color-picker--black-bg"}),(0,_vue.h)("div",{ref:b,class:"vxe-color-picker--color-active"})]):(0,_ui.renderEmptyElement)(E)),(()=>{var{showAlpha:e,clickToCopy:l,showEyeDropper:o}=d,{hexValue:t,rValue:i,gValue:a,bValue:r,aValue:u,selectColor:n,panelColor:c}=k,s=V.value,v=w.value;return(0,_vue.h)("div",{class:"vxe-color-picker--bar-wrapper"},[(0,_vue.h)("div",{class:"vxe-color-picker--slider-wrapper"},[o&&p?(0,_vue.h)("div",{class:"vxe-color-picker--color-dropper"},[(0,_vue.h)("span",{class:"vxe-color-picker--color-dropper-btn",onClick:le},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().EYE_DROPPER})])]):(0,_ui.renderEmptyElement)(E),(0,_vue.h)("div",{class:"vxe-color-picker--slider-preview"},[(0,_vue.h)("div",{class:"vxe-color-picker--preview-btn"},[(0,_vue.h)("div",{class:"vxe-color-picker--preview-color",style:{backgroundColor:n}},l?[(0,_vue.h)("span",{class:"vxe-color-picker--preview-copy-btn",onClick:te},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().COLOR_COPY})])]:[])])]),(0,_vue.h)("div",{class:"vxe-color-picker--slider-handle"},[(0,_vue.h)("div",{ref:m,class:"vxe-color-picker--bar-hue-slider",onClick:I},[(0,_vue.h)("div",{ref:g,class:"vxe-color-picker--bar-hue-btn",onMousedown:Z})]),e?(0,_vue.h)("div",{ref:x,class:"vxe-color-picker--bar-alpha-slider",onClick:z},[(0,_vue.h)("div",{class:"vxe-color-picker--bar-alpha-bg",style:{background:`linear-gradient(to right, rgba(0, 0, 0, 0), ${c})`}}),(0,_vue.h)("div",{ref:f,class:"vxe-color-picker--bar-alpha-btn",onMousedown:J})]):(0,_ui.renderEmptyElement)(E)])]),(0,_vue.h)("div",{class:`vxe-color-picker--${s}-wrapper`},v?[(0,_vue.h)("div",{class:"vxe-color-picker--input-wrapper"},[(0,_vue.h)(_input.default,{type:"integer",size:"mini",align:"center",min:0,max:255,maxLength:3,placeholder:"",modelValue:i,"onUpdate:modelValue"(e){k.rValue=e},onChange:A}),(0,_vue.h)(_input.default,{type:"integer",size:"mini",align:"center",min:0,max:255,maxLength:3,placeholder:"",modelValue:a,"onUpdate:modelValue"(e){k.gValue=e},onChange:A}),(0,_vue.h)(_input.default,{type:"integer",size:"mini",align:"center",min:0,max:255,maxLength:3,placeholder:"",modelValue:r,"onUpdate:modelValue"(e){k.bValue=e},onChange:A}),(0,_vue.h)(_input.default,{type:"number",size:"mini",align:"center",min:0,max:1,step:.01,maxLength:4,placeholder:"",modelValue:u,"onUpdate:modelValue"(e){k.aValue=e},onChange:K})]),(0,_vue.h)("div",{class:"vxe-color-picker--input-title"},[(0,_vue.h)("span","R"),(0,_vue.h)("span","G"),(0,_vue.h)("span","B"),(0,_vue.h)("span","A")])]:[(0,_vue.h)("div",{class:"vxe-color-picker--input-title"},"HEX"),(0,_vue.h)("div",{class:"vxe-color-picker--input-wrapper"},[(0,_vue.h)(_input.default,{type:"text",size:"mini",align:"center",maxLength:9,placeholder:"",modelValue:t,"onUpdate:modelValue"(e){k.hexValue=e},onChange(){var e=(0,_util.parseColor)(k.hexValue);e&&e.value&&(k.selectColor=e.value,P())}})])])])})(),(a=d.showQuick,t=W.value,a&&t.length?(0,_vue.h)("div",{class:"vxe-color-picker--quick-wrapper"},t.map((l,e)=>(0,_vue.h)("div",{key:e,class:"vxe-color-picker--quick-item",title:l.label||"",style:{backgroundColor:l.value},onClick(e){ee(e,l)}}))):(0,_ui.renderEmptyElement)(E)),(0,_vue.h)("div",{class:"vxe-color-picker--footer-wrapper"},[o?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.colorPicker.clear"),size:"mini",onClick:X}):(0,_ui.renderEmptyElement)(E),(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.colorPicker.confirm"),size:"mini",status:"primary",onClick:G})])]):(0,_ui.renderEmptyElement)(E)])])])},E},render(){return this.renderVN()}});