kiri-ui-package/kiri-ui-package.umd.cjs

新增拾色器组件

(function(e,y){typeof exports=="object"&&typeof module<"u"?module.exports=y(require("vue")):typeof define=="function"&&define.amd?define(["vue"],y):(e=typeof globalThis<"u"?globalThis:e||self,e["kiri-ui-package"]=y(e.Vue))})(this,(function(e){"use strict";const y=Object.assign({"./kiri-ui/kiri-color-picker.vue":()=>Promise.resolve().then(()=>P),"./kiri-ui/kiri-slide-verify.vue":()=>Promise.resolve().then(()=>j)}),w=function(o){for(const[s,l]of Object.entries(y)){const d=s.slice(s.lastIndexOf("/")+1,s.lastIndexOf("."));o.component(d,e.defineAsyncComponent(l))}},V=(o,s)=>{const l=o.__vccOpts||o;for(const[d,h]of s)l[d]=h;return l},C={class:"color-picker-container"},E={class:"main-content"},M={class:"color-display left"},D={class:"color-rgba"},B={class:"color-wheel-container"},z={class:"color-display right"},T={class:"color-rgba"},P=Object.freeze(Object.defineProperty({__proto__:null,default:V(Object.assign({name:"kiri-color-picker"},{setup(o){const s=e.ref({r:222,g:222,b:222,a:1}),l=e.ref({r:87,g:87,b:87,a:1}),d=e.ref(null),h=n=>{if(!d.value)return;const t=d.value,a=t.getBoundingClientRect(),f=n.clientX-a.left,i=n.clientY-a.top,p=t.getContext("2d");try{const r=p.getImageData(f,i,1,1).data;s.value={r:r[0],g:r[1],b:r[2],a:r[3]/255}}catch{}},m=()=>{l.value={...s.value}},k=()=>{if(!d.value)return;const n=d.value,t=n.getContext("2d"),a=n.width/2,f=n.height/2,i=a*.8,p=a*.4;t.clearRect(0,0,n.width,n.height);const r=t.createConicGradient(0,a,f);r.addColorStop(0,"red"),r.addColorStop(1/6,"orange"),r.addColorStop(2/6,"yellow"),r.addColorStop(3/6,"lime"),r.addColorStop(4/6,"aqua"),r.addColorStop(5/6,"blue"),r.addColorStop(1,"magenta"),t.beginPath(),t.arc(a,f,i,0,2*Math.PI),t.fillStyle=r,t.fill(),t.beginPath(),t.arc(a,f,p,0,2*Math.PI),t.fillStyle="white",t.fill(),t.beginPath(),t.arc(a,f,p,0,2*Math.PI),t.shadowColor="rgba(0, 0, 0, 0.2)",t.shadowBlur=5,t.fillStyle="white",t.fill(),t.shadowColor="transparent"};return e.onMounted(()=>{k(),window.addEventListener("resize",k)}),(n,t)=>(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",E,[e.createElementVNode("div",M,[t[0]||(t[0]=e.createElementVNode("p",{class:"color-label"},"当前颜色",-1)),e.createElementVNode("div",{class:"color-circle",style:e.normalizeStyle({backgroundColor:`rgba(${s.value.r}, ${s.value.g}, ${s.value.b}, ${s.value.a})`})},null,4),t[1]||(t[1]=e.createElementVNode("p",{class:"color-value"},"RGBA",-1)),e.createElementVNode("p",D,e.toDisplayString(s.value.r)+","+e.toDisplayString(s.value.g)+","+e.toDisplayString(s.value.b)+","+e.toDisplayString(s.value.a),1)]),e.createElementVNode("div",B,[e.createElementVNode("canvas",{ref_key:"colorCanvas",ref:d,class:"color-wheel",onMousemove:h,onClick:m,width:"300",height:"300"},null,544),t[2]||(t[2]=e.createElementVNode("div",{class:"color-wheel-center"},null,-1))]),e.createElementVNode("div",z,[t[3]||(t[3]=e.createElementVNode("p",{class:"color-label"},"选中颜色",-1)),e.createElementVNode("div",{class:"color-circle",style:e.normalizeStyle({backgroundColor:`rgba(${l.value.r}, ${l.value.g}, ${l.value.b}, ${l.value.a})`})},null,4),t[4]||(t[4]=e.createElementVNode("p",{class:"color-value"},"RGBA",-1)),e.createElementVNode("p",T,e.toDisplayString(l.value.r)+","+e.toDisplayString(l.value.g)+","+e.toDisplayString(l.value.b)+","+e.toDisplayString(l.value.a),1)])])]))}}),[["__scopeId","data-v-7b8372e3"]])},Symbol.toStringTag,{value:"Module"})),I={class:"success-content"},O={class:"success-info"},j=Object.freeze(Object.defineProperty({__proto__:null,default:V(Object.assign({name:"kiri-slide-verify"},{props:{backgroundImage:{type:String,default:"https://kirii.online/kiri/12.jpg"},width:{type:Number,default:400},height:{type:Number,default:250},tolerance:{type:Number,default:2},shape:{type:String,default:"square",validator:o=>["square","triangle","pentagon","hexagon"].includes(o)}},emits:["success"],setup(o,{emit:s}){const l=o,d=s,h=e.computed(()=>l.shape),m=e.ref(null),k=e.ref(null),n=e.ref(null),t=e.ref(null),a=e.ref(null),f=e.ref(null),i=e.ref(!1),p=e.ref(0),r=e.ref(0),S=e.ref(0),v=e.ref(99);e.onMounted(()=>{a.value.classList.remove("success"),t.value.classList.remove("success")});const $=(u,c)=>(u=Math.ceil(u),c=Math.floor(c),Math.floor(Math.random()*(c-u)+u));let b=$(100,l.width-50),N=$(100,l.height-50),x=!1,_=0,g=0;const X=u=>{i.value||(x=!0,_=u.clientX,p.value=Date.now(),n.value.style.transition="",m.value.style.transition="",a.value.style.transition="")},L=()=>{i.value||(x=!1)},R=u=>{!x||i.value||(g=u.pageX-_,!(g<0||g>l.width-50)&&(a.value.style.width=`${g}px`,n.value.style.transform=`translateX(${g}px`,m.value.style.transform=`translateX(${g}px`))},q=u=>{if(i.value)return;x=!1,g>=b-l.tolerance&&g<=b+Number(l.tolerance)?G():W()},G=()=>{i.value=!0,r.value=Date.now(),S.value=((r.value-p.value)/1e3).toFixed(2);const c=Math.max(0,parseFloat(S.value)-.5),A=Math.floor(c/.5);v.value=Math.max(1,99-A),n.value.style.backgroundColor="#78cabd",a.value.style.backgroundColor="#d4f5f1",a.value.classList.add("success"),t.value.classList.add("success"),f.value.classList.add("success"),d("success",i.value)},W=()=>{i.value=!1,a.value.style.width=0,a.value.style.transition="all 0.3s ease",n.value.style.transform="translateX(0px)",m.value.style.transform="translateX(0px)",n.value.style.transition="transform 0.3s ease",m.value.style.transition="transform 0.3s ease",a.value.classList.remove("success"),t.value.classList.remove("success")};return(u,c)=>(e.openBlock(),e.createElementBlock("div",{class:"drag-verify-container",onMousemove:R,onMouseup:q},[e.createElementVNode("div",{class:"check-container",style:e.normalizeStyle({width:`${o.width}px`,height:`${o.height}px`})},[e.createElementVNode("div",{class:"check",ref:"check",style:e.normalizeStyle({backgroundImage:`url(${o.backgroundImage})`,width:`${o.width}px`,height:`${o.height}px`})},[e.createElementVNode("div",{class:e.normalizeClass(["check-content",`shape-${h.value}`]),style:e.normalizeStyle({left:`${e.unref(b)}px`,top:`${e.unref(N)}px`})},null,6),e.createElementVNode("div",{class:e.normalizeClass(["check-block",`shape-${h.value}`]),ref_key:"checkBlock",ref:m,style:e.normalizeStyle({backgroundPosition:`-${e.unref(b)}px -${e.unref(N)}px`,backgroundSize:`${o.width}px ${o.height}px`,top:`${e.unref(N)}px`})},null,6)],4),i.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"success-mask",style:e.normalizeStyle({width:`${o.width}px`,height:`${o.height}px`})},[e.createElementVNode("div",I,[e.createElementVNode("p",O,[c[0]||(c[0]=e.createTextVNode(" 你只用了 ",-1)),e.createElementVNode("span",null,e.toDisplayString(S.value),1),c[1]||(c[1]=e.createTextVNode(" s完成拼图，成功超越率全国 ",-1)),e.createElementVNode("span",{style:e.normalizeStyle({color:v.value<60?"red":"#04be02",fontSize:"20px"})},e.toDisplayString(v.value),5),c[2]||(c[2]=e.createTextVNode("%的用户 ",-1))])])],4)):e.createCommentVNode("",!0)],4),e.createElementVNode("div",{class:"drag",style:e.normalizeStyle({width:`${o.width}px`}),ref_key:"drag",ref:k},[e.createElementVNode("div",{class:"dragBg",ref_key:"dragBg",ref:a},null,512),e.createElementVNode("div",{class:"drag-block",ref_key:"dragBlock",ref:n,onMousedown:X,onMouseup:L},[e.createElementVNode("span",{class:"slider-icon",ref_key:"sliderIcon",ref:f},null,512)],544),e.createElementVNode("div",{class:"drag-tips",ref_key:"dragTips",ref:t},null,512)],4)],32))}}),[["__scopeId","data-v-be40c0b6"]])},Symbol.toStringTag,{value:"Module"}));return w}));