xtreme-ui
Version:
Collection of reusable components that can be used in web projects
2 lines (1 loc) • 10.8 kB
JavaScript
import{r as b,R as S,j as f}from"./iframe-5Rr_RUeM.js";import{_ as d,a as D}from"./objectWithoutPropertiesLoose-DXv8YDMk.js";import{c as ne}from"./clsx-B-dksMZM.js";var M=255,k=100,le=e=>{var{r:a,g:r,b:t,a:n}=e,o=Math.max(a,r,t),l=o-Math.min(a,r,t),s=l?o===a?(r-t)/l:o===r?2+(t-a)/l:4+(a-r)/l:0;return{h:60*(s<0?s+6:s),s:o?l/o*k:0,v:o/M*k,a:n}},V=e=>{var{h:a,s:r,l:t,a:n}=q(e);return"hsla("+a+", "+r+"%, "+t+"%, "+n+")"},q=e=>{var{h:a,s:r,v:t,a:n}=e,o=(200-r)*t/k;return{h:a,s:o>0&&o<200?r*t/k/(o<=k?o:200-o)*k:0,l:o/2,a:n}},U=e=>{var{r:a,g:r,b:t}=e,n=a<<16|r<<8|t;return"#"+(o=>new Array(7-o.length).join("0")+o)(n.toString(16))},se=e=>{var{r:a,g:r,b:t,a:n}=e,o=typeof n=="number"&&(n*255|256).toString(16).slice(1);return""+U({r:a,g:r,b:t})+(o||"")},K=e=>le(ie(e)),ie=e=>{var a=e.replace("#","");/^#?/.test(e)&&a.length===3&&(e="#"+a.charAt(0)+a.charAt(0)+a.charAt(1)+a.charAt(1)+a.charAt(2)+a.charAt(2));var r=new RegExp("[A-Za-z0-9]{2}","g"),[t,n,o=0,l]=e.match(r).map(s=>parseInt(s,16));return{r:t,g:n,b:o,a:(l??255)/M}},$=e=>{var{h:a,s:r,v:t,a:n}=e,o=a/60,l=r/k,s=t/k,i=Math.floor(o)%6,h=o-Math.floor(o),u=M*s*(1-l),w=M*s*(1-l*h),v=M*s*(1-l*(1-h));s*=M;var c={};switch(i){case 0:c.r=s,c.g=v,c.b=u;break;case 1:c.r=w,c.g=s,c.b=u;break;case 2:c.r=u,c.g=s,c.b=v;break;case 3:c.r=u,c.g=w,c.b=s;break;case 4:c.r=v,c.g=u,c.b=s;break;case 5:c.r=s,c.g=u,c.b=w;break}return c.r=Math.round(c.r),c.g=Math.round(c.g),c.b=Math.round(c.b),d({},c,{a:n})},ce=e=>{var{r:a,g:r,b:t}=e;return{r:a,g:r,b:t}},ve=e=>{var{h:a,s:r,l:t}=e;return{h:a,s:r,l:t}},Z=e=>U($(e)),he=e=>{var{h:a,s:r,v:t}=e;return{h:a,s:r,v:t}},de=e=>{var{r:a,g:r,b:t}=e,n=function(u){return u<=.04045?u/12.92:Math.pow((u+.055)/1.055,2.4)},o=n(a/255),l=n(r/255),s=n(t/255),i={};return i.x=o*.4124+l*.3576+s*.1805,i.y=o*.2126+l*.7152+s*.0722,i.bri=o*.0193+l*.1192+s*.9505,i},ue=e=>{var a,r,t,n,o,l,s,i,h;return typeof e=="string"&&Q(e)?(l=K(e),i=e):typeof e!="string"&&(l=e),l&&(t=he(l),o=q(l),n=$(l),h=se(n),i=Z(l),r=ve(o),a=ce(n),s=de(a)),{rgb:a,hsl:r,hsv:t,rgba:n,hsla:o,hsva:l,hex:i,hexa:h,xy:s}},Q=e=>/^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(e);function Y(e){var a=b.useRef(e);return b.useEffect(()=>{a.current=e}),b.useCallback((r,t)=>a.current&&a.current(r,t),[])}var _=e=>"touches"in e,X=e=>{!_(e)&&e.preventDefault&&e.preventDefault()},L=function(a,r,t){return r===void 0&&(r=0),t===void 0&&(t=1),a>t?t:a<r?r:a},G=(e,a)=>{var r=e.getBoundingClientRect(),t=_(a)?a.touches[0]:a;return{left:L((t.pageX-(r.left+window.pageXOffset))/r.width),top:L((t.pageY-(r.top+window.pageYOffset))/r.height),width:r.width,height:r.height,x:t.pageX-(r.left+window.pageXOffset),y:t.pageY-(r.top+window.pageYOffset)}},pe=["prefixCls","className","onMove","onDown"],z=S.forwardRef((e,a)=>{var{prefixCls:r="w-color-interactive",className:t,onMove:n,onDown:o}=e,l=D(e,pe),s=b.useRef(null),i=b.useRef(!1),[h,u]=b.useState(!1),w=Y(n),v=Y(o),c=p=>i.current&&!_(p)?!1:(i.current=_(p),!0),x=b.useCallback(p=>{if(X(p),!!s.current){var y=_(p)?p.touches.length>0:p.buttons>0;if(!y){u(!1);return}w?.(G(s.current,p),p)}},[w]),g=b.useCallback(()=>u(!1),[]),N=b.useCallback(p=>{p?(window.addEventListener(i.current?"touchmove":"mousemove",x),window.addEventListener(i.current?"touchend":"mouseup",g)):(window.removeEventListener("mousemove",x),window.removeEventListener("mouseup",g),window.removeEventListener("touchmove",x),window.removeEventListener("touchend",g))},[x,g]);b.useEffect(()=>(N(h),()=>{N(!1)}),[h,x,g,N]);var C=b.useCallback(p=>{var y=document.activeElement;y?.blur(),X(p.nativeEvent),c(p.nativeEvent)&&s.current&&(v?.(G(s.current,p.nativeEvent),p.nativeEvent),u(!0))},[v]);return f.jsx("div",d({},l,{className:[r,t||""].filter(Boolean).join(" "),style:d({},l.style,{touchAction:"none"}),ref:s,tabIndex:0,onMouseDown:C,onTouchStart:C}))});z.displayName="Interactive";var fe=["className","prefixCls","left","top","style","fillProps"],ge=e=>{var{className:a,prefixCls:r,left:t,top:n,style:o,fillProps:l}=e,s=D(e,fe),i=d({},o,{position:"absolute",left:t,top:n}),h=d({width:18,height:18,boxShadow:"var(--alpha-pointer-box-shadow)",borderRadius:"50%",backgroundColor:"var(--alpha-pointer-background-color)"},l?.style,{transform:t?"translate(-9px, -1px)":"translate(-1px, -9px)"});return f.jsx("div",d({className:r+"-pointer "+(a||""),style:i},s,{children:f.jsx("div",d({className:r+"-fill"},l,{style:h}))}))},be=["prefixCls","className","hsva","background","bgProps","innerProps","pointerProps","radius","width","height","direction","style","onChange","pointer"],xe="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==",B=S.forwardRef((e,a)=>{var{prefixCls:r="w-color-alpha",className:t,hsva:n,background:o,bgProps:l={},innerProps:s={},pointerProps:i={},radius:h=0,width:u,height:w=16,direction:v="horizontal",style:c,onChange:x,pointer:g}=e,N=D(e,be),C=m=>{x&&x(d({},n,{a:v==="horizontal"?m.left:m.top}),m)},p=V(Object.assign({},n,{a:1})),y="linear-gradient(to "+(v==="horizontal"?"right":"bottom")+", rgba(244, 67, 54, 0) 0%, "+p+" 100%)",R={};v==="horizontal"?R.left=n.a*100+"%":R.top=n.a*100+"%";var H=d({"--alpha-background-color":"#fff","--alpha-pointer-background-color":"rgb(248, 248, 248)","--alpha-pointer-box-shadow":"rgb(0 0 0 / 37%) 0px 1px 4px 0px",borderRadius:h,background:"url("+xe+") left center",backgroundColor:"var(--alpha-background-color)"},{width:u,height:w},c,{position:"relative"}),j=b.useCallback(m=>{var T=.01,E=n.a,A=E;switch(m.key){case"ArrowLeft":v==="horizontal"&&(A=Math.max(0,E-T),m.preventDefault());break;case"ArrowRight":v==="horizontal"&&(A=Math.min(1,E+T),m.preventDefault());break;case"ArrowUp":v==="vertical"&&(A=Math.max(0,E-T),m.preventDefault());break;case"ArrowDown":v==="vertical"&&(A=Math.min(1,E+T),m.preventDefault());break;default:return}if(A!==E){var oe={left:v==="horizontal"?A:n.a,top:v==="vertical"?A:n.a,width:0,height:0,x:0,y:0};x&&x(d({},n,{a:A}),oe)}},[n,v,x]),W=b.useCallback(m=>{m.target.focus()},[]),P=g&&typeof g=="function"?g(d({prefixCls:r},i,R)):f.jsx(ge,d({},i,{prefixCls:r},R));return f.jsxs("div",d({},N,{className:[r,r+"-"+v,t||""].filter(Boolean).join(" "),style:H,ref:a,children:[f.jsx("div",d({},l,{style:d({inset:0,position:"absolute",background:o||y,borderRadius:h},l.style)})),f.jsx(z,d({},s,{style:d({},s.style,{inset:0,zIndex:1,position:"absolute",outline:"none"}),onMove:C,onDown:C,onClick:W,onKeyDown:j,children:P}))]}))});B.displayName="Alpha";var me=["prefixCls","className","onChange","direction","hsva"],F=S.forwardRef((e,a)=>{var{prefixCls:r="w-color-saturation",className:t,onChange:n,direction:o="horizontal",hsva:l}=e,s=D(e,me),i=V(d({},l,{a:1,v:100}));return f.jsx(B,d({ref:a},s,{className:r+" "+(t||""),hsva:{h:l.h,s:l.s,v:l.v,a:1-l.v/100},direction:o,background:"linear-gradient(to "+(o==="horizontal"?"right":"bottom")+", "+i+", rgb(0, 0, 0))",onChange:(h,u)=>{n&&n({v:o==="horizontal"?100-u.left*100:100-u.top*100})}}))});F.displayName="ShadeSlider";var we="rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px",ye=e=>{var{className:a,color:r,left:t,top:n,style:o,prefixCls:l}=e,s=d({},o,{position:"absolute",top:n,left:t}),i=l+"-pointer "+(a||"");return f.jsx("div",{className:i,style:s,children:f.jsx("div",{className:l+"-fill",style:{width:10,height:10,transform:"translate(-5px, -5px)",boxShadow:we,borderRadius:"50%",backgroundColor:"#fff"},children:f.jsx("div",{style:{inset:0,borderRadius:"50%",position:"absolute",backgroundColor:r}})})})},J=Math.PI*2,Ce=(e,a)=>(e%a+a)%a,Ae=(e,a)=>Math.sqrt(e*e+a*a);function ee(e){var{width:a=0}=e,r=a/2;return{width:a,radius:r,cx:r,cy:r}}function ke(e,a){var{cx:r,cy:t}=ee(e),n=ae(e),o=(180+re(e,a.h,!0))*(J/360),l=a.s/100*n,s=e.direction==="clockwise"?-1:1;return{x:r+l*Math.cos(o)*s,y:t+l*Math.sin(o)*s}}function ae(e){var{width:a=0}=e;return a/2}function re(e,a,r){var t=e.angle||0,n=e.direction;return r&&n==="clockwise"?a=t+a:n==="clockwise"?a=360-t+a:r&&n==="anticlockwise"?a=t+180-a:n==="anticlockwise"&&(a=t-a),Ce(a,360)}function Ne(e,a,r){var{cx:t,cy:n}=ee(e),o=ae(e);a=t-a,r=n-r;var l=re(e,Math.atan2(-r,-a)*(360/J)),s=Math.min(Ae(a,r),o);return{h:Math.round(l),s:Math.round(100/o*s)}}var Re=["prefixCls","radius","pointer","className","style","width","height","oval","direction","angle","color","onChange"],Ee="conic-gradient(red, yellow, lime, aqua, blue, magenta, red)",Me="conic-gradient(red, magenta, blue, aqua, lime, yellow, red)",te=S.forwardRef((e,a)=>{var{prefixCls:r="w-color-wheel",radius:t=0,pointer:n,className:o,style:l,width:s=200,height:i=200,oval:h,direction:u="anticlockwise",angle:w=180,color:v,onChange:c}=e,x=D(e,Re),g=typeof v=="string"&&Q(v)?K(v):v||{},N=v?Z(g):"",C=ke({width:s},g),p={top:"0",left:"0",color:N},y=(j,W)=>{var P=Ne({width:s},s-j.x,i-j.y),m={h:P.h,s:P.s,v:g.v,a:g.a};c&&c(ue(m))},R={zIndex:1,position:"absolute",transform:"translate("+C.x+"px, "+C.y+"px) "+(h==="x"||h==="X"?"scaleY(2)":h==="y"||h==="Y"?"scaleX(2)":"")},H=n&&typeof n=="function"?n(d({prefixCls:r,style:R},p)):f.jsx(ye,d({prefixCls:r,style:R},p));return f.jsxs(z,d({className:[r,o||""].filter(Boolean).join(" ")},x,{style:d({position:"relative",width:s,transform:h==="x"||h==="X"?"scaleY(0.5)":h==="y"||h==="Y"?"scaleX(0.5)":"",height:i},l),ref:a,onMove:y,onDown:y,children:[H,f.jsx("div",{style:{position:"absolute",borderRadius:"50%",background:u==="anticlockwise"?Ee:Me,transform:"rotateZ("+(w+90)+"deg)",inset:0}}),f.jsx("div",{style:{position:"absolute",borderRadius:"50%",background:"radial-gradient(circle closest-side, #fff, transparent)",inset:0}}),f.jsx("div",{style:{backgroundColor:"#000",borderRadius:"50%",position:"absolute",inset:0,opacity:typeof g.v=="number"?1-g.v/100:0}})]}))});te.displayName="Wheel";const O=180,I=b.forwardRef((e,a)=>{const{className:r,shade:t=!0,alpha:n=!0,color:o={h:0,s:0,v:100,a:1},setColor:l}=e,s=ne("xtrColorPicker",r);return f.jsxs("div",{ref:a,className:s,children:[f.jsx(te,{className:"wheel",color:o,width:O,height:O,onChange:i=>l(i.hsva)}),t&&f.jsx(F,{className:"shade",hsva:o,onChange:({v:i})=>l({...o,v:i})}),n&&f.jsx(B,{className:"alpha",hsva:o,onChange:({a:i})=>l({...o,a:i})})]})});I.displayName="ColorPicker";try{I.displayName="ColorPicker",I.__docgenInfo={description:"",displayName:"ColorPicker",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},alpha:{defaultValue:null,description:"",name:"alpha",required:!1,type:{name:"boolean"}},shade:{defaultValue:null,description:"",name:"shade",required:!1,type:{name:"boolean"}},color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"HsvaColor"}},setColor:{defaultValue:null,description:"",name:"setColor",required:!0,type:{name:"(col: HsvaColor) => void"}}}}}catch{}export{I as C};