mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-05 13:57:10 -04:00
182 lines
24 KiB
JavaScript
182 lines
24 KiB
JavaScript
![]() |
import{d as z,r as w,h as i,c as $,i as He,w as Fe,p as nt,C as we,A as ot,f as at,I as lt,n as it}from"./chunk-449c23a2.js";import{av as F,r as _,aw as B,ax as j,ay as M,az as te,aA as K,ad as re,ac as ne,aB as ie,aC as ye,aD as Se,aE as Ce,n as W,o as m,p as U,q as ze,u as st,v as Be,O as De,w as Pe,x as ut,a6 as ct,aF as Ue,aG as dt,V as ht,G as pt,H as ft,aH as vt,P as de}from"../entries/src_pages_Home.page.16dc467b.js";import{c as gt,w as mt}from"./chunk-a740628f.js";import{N as bt,B as he}from"./chunk-015e5c20.js";import{_ as xt}from"./chunk-4ee2916e.js";import{f as kt}from"./chunk-051b56e8.js";import{u as wt}from"./chunk-2749dac9.js";import{u as yt}from"./chunk-66ac4853.js";import{c as St}from"./chunk-c534f75d.js";function Te(e,t,n){t/=100,n/=100;const r=t*Math.min(n,1-n)+n;return[e,r?(2-2*n/r)*100:0,r*100]}function ve(e,t,n){t/=100,n/=100;const r=n-n*t/2,o=Math.min(r,1-r);return[e,o?(n-r)/o*100:0,r*100]}function H(e,t,n){t/=100,n/=100;let r=(o,l=(o+e/60)%6)=>n-n*t*Math.max(Math.min(l,4-l,1),0);return[r(5)*255,r(3)*255,r(1)*255]}function $e(e,t,n){e/=255,t/=255,n/=255;let r=Math.max(e,t,n),o=r-Math.min(e,t,n),l=o&&(r==e?(t-n)/o:r==t?2+(n-e)/o:4+(e-t)/o);return[60*(l<0?l+6:l),r&&o/r*100,r*100]}function Ae(e,t,n){e/=255,t/=255,n/=255;let r=Math.max(e,t,n),o=r-Math.min(e,t,n),l=1-Math.abs(r+r-o-1),s=o&&(r==e?(t-n)/o:r==t?2+(n-e)/o:4+(e-t)/o);return[60*(s<0?s+6:s),l?o/l*100:0,(r+r-o)*50]}function Re(e,t,n){t/=100,n/=100;let r=t*Math.min(n,1-n),o=(l,s=(l+e/30)%12)=>n-r*Math.max(Math.min(s-3,9-s,1),-1);return[o(0)*255,o(8)*255,o(4)*255]}function Ct(e,t){switch(e[0]){case"hex":return t?"#000000FF":"#000000";case"rgb":return t?"rgba(0, 0, 0, 1)":"rgb(0, 0, 0)";case"hsl":return t?"hsla(0, 0%, 0%, 1)":"hsl(0, 0%, 0%)";case"hsv":return t?"hsva(0, 0%, 0%, 1)":"hsv(0, 0%, 0%)"}return"#000000"}function se(e){return e===null?null:/^ *#/.test(e)?"hex":e.includes("rgb")?"rgb":e.includes("hsl")?"hsl":e.includes("hsv")?"hsv":null}function Ut(e){return e=Math.round(e),e>=360?359:e<0?0:e}function $t(e){return e=Math.round(e*100)/100,e>1?1:e<0?0:e}const At={rgb:{hex(e){return F(_(e))},hsl(e){const[t,n,r,o]=_(e);return B([...Ae(t,n,r),o])},hsv(e){const[t,n,r,o]=_(e);return j([...$e(t,n,r),o])}},hex:{rgb(e){return M(_(e))},hsl(e){const[t,n,r,o]=_(e);return B([...Ae(t,n,r),o])},hsv(e){const[t,n,r,o]=_(e);return j([...$e(t,n,r),o])}},hsl:{hex(e){const[t,n,r,o]=te(e);return F([...Re(t,n,r),o])},rgb(e){const[t,n,r,o]=te(e);return M([...Re(t,n,r),o])},hsv(e){const[t,n,r,o]=te(e);return j([...Te(t,n,r),o])}},hsv:{hex(e){const[t,n,r,o]=K(e);return F([...H(t,n,r),o])},rgb(e){const[t,n,r,o]=K(e);return M([...H(t,n,r),o])},hsl(e){const[t,n,r,o]=K(e);return B([...ve(t,n,r),o])}}};function qe(e,t,n){return n=n||se(e),n?n===t?e:At[n][t](e):null}const ee="12px",Rt=12,N="6px",Vt=6,_t="linear-gradient(90deg,red,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red)",Mt=z({name:"HueSlider",props:{clsPrefix:{type:String,required:!0},hue:{type:Number,required:!0},onUpdateHue:{type:Function,required:!0},onComplete:Function},setup(e){const t=w(null);function n(l){t.value&&(re("mousemove",document,r),re("mouseup",document,o),r(l))}function r(l){const{value:s}=t;if(!s)return;const{width:u,left:f}=s.getBoundingClientRect(),T=Ut((l.clientX-f-Vt)/(u-Rt)*360);e.onUpdateHue(T)}function o(){var l;ne("mousemove",document,r),ne("mouseup",document,o),(l=e.onComplete)===null||l===void 0||l.call(e)}return{railRef:t,handleMouseDown:n}},render(){const{clsPrefix:e}=this;return i("div",{class:`${e}-color-picker-slider`,style:{height:ee,borderRadius:N}},i("div",{ref:"railRef",style:{boxShadow:"inset 0 0 2px 0 rgba(0, 0, 0, .24)",boxSizing:"border-box",backgroundImage:_t,height:ee,borderRadius:N,position:"relative"},onMousedown:this.handleMouseDown},i("div",{style:{position:"absolute",left:N,right:N,top:0,bottom:0}},i("div",{class:`${e}-color-picker-handle`,style:{left:`calc((${this.hue}%) / 359 * 100 - ${N})`,borderRadius:N,width:ee,height:ee}},i("div",{class:`${e}-color-picker-handle__fill`,style:{backgroundColor:`hsl(${this.hue}, 100%, 50%)`,borderRadius:N,width:ee,
|
||
|
display: inline-block;
|
||
|
box-sizing: border-box;
|
||
|
height: var(--n-height);
|
||
|
font-size: var(--n-font-size);
|
||
|
width: 100%;
|
||
|
position: relative;
|
||
|
`),m("color-picker-panel",`
|
||
|
margin: 4px 0;
|
||
|
width: 240px;
|
||
|
font-size: var(--n-panel-font-size);
|
||
|
color: var(--n-text-color);
|
||
|
background-color: var(--n-color);
|
||
|
transition:
|
||
|
box-shadow .3s var(--n-bezier),
|
||
|
color .3s var(--n-bezier),
|
||
|
background-color .3s var(--n-bezier);
|
||
|
border-radius: var(--n-border-radius);
|
||
|
box-shadow: var(--n-box-shadow);
|
||
|
`,[kt(),m("input",`
|
||
|
text-align: center;
|
||
|
`)]),m("color-picker-checkboard",`
|
||
|
background: white;
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
`,[W("&::after",`
|
||
|
background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
|
||
|
background-size: 12px 12px;
|
||
|
background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
|
||
|
background-repeat: repeat;
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
`)]),m("color-picker-slider",`
|
||
|
margin-bottom: 8px;
|
||
|
position: relative;
|
||
|
box-sizing: border-box;
|
||
|
`,[U("image",`
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
`),W("&::after",`
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
border-radius: inherit;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
|
||
|
pointer-events: none;
|
||
|
`)]),m("color-picker-handle",`
|
||
|
z-index: 1;
|
||
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .45);
|
||
|
position: absolute;
|
||
|
background-color: white;
|
||
|
overflow: hidden;
|
||
|
`,[U("fill",`
|
||
|
box-sizing: border-box;
|
||
|
border: 2px solid white;
|
||
|
`)]),m("color-picker-pallete",`
|
||
|
height: 180px;
|
||
|
position: relative;
|
||
|
margin-bottom: 8px;
|
||
|
cursor: crosshair;
|
||
|
`,[U("layer",`
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
`,[ze("shadowed",`
|
||
|
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
|
||
|
`)])]),m("color-picker-preview",`
|
||
|
display: flex;
|
||
|
`,[U("sliders",`
|
||
|
flex: 1 0 auto;
|
||
|
`),U("preview",`
|
||
|
position: relative;
|
||
|
height: 30px;
|
||
|
width: 30px;
|
||
|
margin: 0 0 8px 6px;
|
||
|
border-radius: 50%;
|
||
|
box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
|
||
|
overflow: hidden;
|
||
|
`),U("fill",`
|
||
|
display: block;
|
||
|
width: 30px;
|
||
|
height: 30px;
|
||
|
`),U("input",`
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 30px;
|
||
|
height: 30px;
|
||
|
opacity: 0;
|
||
|
z-index: 1;
|
||
|
`)]),m("color-picker-input",`
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
`,[m("input",`
|
||
|
flex-grow: 1;
|
||
|
flex-basis: 0;
|
||
|
`),U("mode",`
|
||
|
width: 72px;
|
||
|
text-align: center;
|
||
|
`)]),m("color-picker-control",`
|
||
|
padding: 12px;
|
||
|
`),m("color-picker-action",`
|
||
|
display: flex;
|
||
|
margin-top: -4px;
|
||
|
border-top: 1px solid var(--n-divider-color);
|
||
|
padding: 8px 12px;
|
||
|
justify-content: flex-end;
|
||
|
`,[m("button","margin-left: 8px;")]),m("color-picker-trigger",`
|
||
|
border: var(--n-border);
|
||
|
height: 100%;
|
||
|
box-sizing: border-box;
|
||
|
border-radius: var(--n-border-radius);
|
||
|
transition: border-color .3s var(--n-bezier);
|
||
|
cursor: pointer;
|
||
|
`,[U("value",`
|
||
|
white-space: nowrap;
|
||
|
position: relative;
|
||
|
`),U("fill",`
|
||
|
border-radius: var(--n-border-radius);
|
||
|
position: absolute;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
left: 4px;
|
||
|
right: 4px;
|
||
|
top: 4px;
|
||
|
bottom: 4px;
|
||
|
`),ze("disabled","cursor: not-allowed"),m("color-picker-checkboard",`
|
||
|
border-radius: var(--n-border-radius);
|
||
|
`,[W("&::after",`
|
||
|
--n-block-size: calc((var(--n-height) - 8px) / 3);
|
||
|
background-size: calc(var(--n-block-size) * 2) calc(var(--n-block-size) * 2);
|
||
|
background-position: 0 0, 0 var(--n-block-size), var(--n-block-size) calc(-1 * var(--n-block-size)), calc(-1 * var(--n-block-size)) 0px;
|
||
|
`)])]),m("color-picker-swatches",`
|
||
|
display: grid;
|
||
|
grid-gap: 8px;
|
||
|
flex-wrap: wrap;
|
||
|
position: relative;
|
||
|
grid-template-columns: repeat(auto-fill, 18px);
|
||
|
margin-top: 10px;
|
||
|
`,[m("color-picker-swatch",`
|
||
|
width: 18px;
|
||
|
height: 18px;
|
||
|
background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
|
||
|
background-size: 8px 8px;
|
||
|
background-position: 0px 0, 0px 4px, 4px -4px, -4px 0px;
|
||
|
background-repeat: repeat;
|
||
|
`,[U("fill",`
|
||
|
position: relative;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
border-radius: 3px;
|
||
|
box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
|
||
|
cursor: pointer;
|
||
|
`),W("&:focus",`
|
||
|
outline: none;
|
||
|
`,[U("fill",[W("&::after",`
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
background: inherit;
|
||
|
filter: blur(2px);
|
||
|
content: "";
|
||
|
`)])])])])]),Zt=Object.assign(Object.assign({},Be.props),{value:String,show:{type:Boolean,default:void 0},defaultShow:Boolean,defaultValue:String,modes:{type:Array,default:()=>["rgb","hex","hsl"]},placement:{type:String,default:"bottom-start"},to:Ue.propTo,showAlpha:{type:Boolean,default:!0},showPreview:Boolean,swatches:Array,disabled:{type:Boolean,default:void 0},actions:{type:Array,default:null},internalActions:Array,size:String,renderLabel:Function,onComplete:Function,onConfirm:Function,"onUpdate:show":[Function,Array],onUpdateShow:[Function,Array],"onUpdate:value":[Function,Array],onUpdateValue:[Function,Array]}),or=z({name:"ColorPicker",props:Zt,setup(e,{slots:t}){const n=w(null);let r=null;const o=wt(e),{mergedSizeRef:l,mergedDisabledRef:s}=o,{localeRef:u}=yt("global"),{mergedClsPrefixRef:f,namespaceRef:T,inlineThemeDisabled:oe}=st(e),q=Be("ColorPicker","-color-picker",Xt,St,e,f);nt(Ve,{themeRef:q,renderLabelRef:we(e,"renderLabel"),colorPickerSlots:t});const X=w(e.defaultShow),ue=De(we(e,"show"),X);function Z(a){const{onUpdateShow:c,"onUpdate:show":h}=e;c&&de(c,a),h&&de(h,a),X.value=a}const{defaultValue:_e}=e,Me=w(_e===void 0?Ct(e.modes,e.showAlpha):_e),x=De(we(e,"value"),Me),G=w([x.value]),R=w(0),ge=$(()=>se(x.value)),{modes:Ee}=e,A=w(se(x.value)||Ee[0]||"rgb");function Oe(){const{modes:a}=e,{value:c}=A,h=a.findIndex(p=>p===c);~h?A.value=a[(h+1)%a.length]:A.value="rgb"}let y,S,Y,J,D,P,I,C;const ae=$(()=>{const{value:a}=x;if(!a)return null;switch(ge.value){case"hsv":return K(a);case"hsl":return[y,S,Y,C]=te(a),[...Te(y,S,Y),C];case"rgb":case"hex":return[D,P,I,C]=_(a),[...$e(D,P,I),C]}}),E=$(()=>{const{value:a}=x;if(!a)return null;switch(ge.value){case"rgb":case"hex":return _(a);case"hsv":return[y,S,J,C]=K(a),[...H(y,S,J),C];case"hsl":return[y,S,Y,C]=te(a),[...Re(y,S,Y),C]}}),me=$(()=>{const{value:a}=x;if(!a)return null;switch(ge.value){case"hsl":return te(a);case"hsv":return[y,S,J,C]=K(a),[...ve(y,S,J),C];case"rgb":case"hex":return[D,P,I,C]=_(a),[...Ae(D,P,I),C]}}),Ne=$(()=>{switch(A.value){case"rgb":case"hex":return E.value;case"hsv":return ae.value;case"hsl":return me.value}}),ce=w(0),be=w(1),xe=w([0,0]);function Le(a,c){const{value:h}=ae,p=ce.value,v=h?h[3]:1;xe.value=[a,c];const{showAlpha:d}=e;switch(A.value){case"hsv":g((d?j:Ce)([p,a,c,v]),"cursor");break;case"hsl":g((d?B:ye)([...ve(p,a,c),v]),"cursor");break;case"rgb":g((d?M:Se)([...H(p,a,c),v]),"cursor");break;case"hex":g((d?F:ie)([...H(p,a,c),v]),"cursor");break}}function je(a){ce.value=a;const{value:c}=ae;if(!c)return;const[,h,p,v]=c,{showAlpha:d}=e;switch(A.value){case"hsv":g((d?j:Ce)([a,h,p,v]),"cursor");break;case"rgb":g((d?M:Se)([...H(a,h,p),v]),"cursor");break;case"hex":g((d?F:ie)([...H(a,h,p),v]),"cursor");break;case"hsl":g((d?B:ye)([...ve(a,h,p),v]),"cursor");break}}function Ke(a){switch(A.value){case"hsv":[y,S,J]=ae.value,g(j([y,S,J,a]),"cursor");break;case"rgb":[D,P,I]=E.value,g(M([D,P,I,a]),"cursor");break;case"hex":[D,P,I]=E.value,g(F([D,P,I,a]),"cursor");break;case"hsl":[y,S,Y]=me.value,g(B([y,S,Y,a]),"cursor");break}be.value=a}function g(a,c){c==="cursor"?r=a:r=null;const{nTriggerFormChange:h,nTriggerFormInput:p}=o,{onUpdateValue:v,"onUpdate:value":d}=e;v&&de(v,a),d&&de(d,a),h(),p(),Me.value=a}function Xe(a){g(a,"input"),it(Q)}function Q(a=!0){const{value:c}=x;if(c){const{nTriggerFormChange:h,nTriggerFormInput:p}=o,{onComplete:v}=e;v&&v(c);const{value:d}=G,{value:k}=R;a&&(d.splice(k+1,d.length,c),R.value=k+1),h(),p()}}function Ze(){const{value:a}=R;a-1<0||(g(G.value[a-1],"input"),Q(!1),R.value=a-1)}function Ge(){const{value:a}=R;a<0||a+1>=G.value.length||(g(G.value[a+1],"input"),Q(!1),R.value=a+1)}function Ye(){g(null,"input"),Z(!1)}function Je(){const{value:a}=x,{onConfirm:c}=e;c&&c(a),Z(!1)}const Qe=$(()=>R.value>=1),We=$(()=>{const{value:a}=G;return a.length>1&&R.value<a.length-1});ot(ue,a=>{a||(G.value=[x.value],R.value=0)}),Fe(()=>{if(!(r&&r===x.value)){const{value:a}=ae;a&&(ce.value=a[0],be.value=a[3],xe.value=[a[1],a[2]])}r=null});const ke=$(()=>{const{value:a}=l,{common:{cubicBezierEaseInOut:c},self:{textColor:h,color:p,panelFontSize:
|