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

新增拾色器组件

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