@darkchest/wck 0.0.4 → 0.0.6

package/example/dist/index.umd.min.js

@@ -0,0 +1,444 @@
+(function(V){typeof define=="function"&&define.amd?define(V):V()})((function(){"use strict";var V=Object.defineProperty,ie=(t,e,o)=>e in t?V(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,O=(t,e,o)=>(ie(t,typeof e!="symbol"?e+"":e,o),o);function se(t,e){const o=Object.create(null),n=t.split(",");for(let i=0;i<n.length;i++)o[n[i]]=!0;return i=>!!o[i]}function ht(t){if(g(t)){const e={};for(let o=0;o<t.length;o++){const n=t[o],i=R(n)?ce(n):ht(n);if(i)for(const s in i)e[s]=i[s]}return e}else if(R(t)||k(t))return t}const re=/;(?![^(]*\))/g,le=/:(.+)/;function ce(t){const e={};return t.split(re).forEach(o=>{if(o){const n=o.split(le);n.length>1&&(e[n[0].trim()]=n[1].trim())}}),e}function gt(t){let e="";if(R(t))e=t;else if(g(t))for(let o=0;o<t.length;o++){const n=gt(t[o]);n&&(e+=n+" ")}else if(k(t))for(const o in t)t[o]&&(e+=o+" ");return e.trim()}function ae(t,e){if(t.length!==e.length)return!1;let o=!0;for(let n=0;o&&n<t.length;n++)o=I(t[n],e[n]);return o}function I(t,e){if(t===e)return!0;let o=mt(t),n=mt(e);if(o||n)return o&&n?t.getTime()===e.getTime():!1;if(o=g(t),n=g(e),o||n)return o&&n?ae(t,e):!1;if(o=k(t),n=k(e),o||n){if(!o||!n)return!1;const i=Object.keys(t).length,s=Object.keys(e).length;if(i!==s)return!1;for(const r in t){const l=t.hasOwnProperty(r),a=e.hasOwnProperty(r);if(l&&!a||!l&&a||!I(t[r],e[r]))return!1}}return String(t)===String(e)}function Z(t,e){return t.findIndex(o=>I(o,e))}const de=Object.assign,pe=(t,e)=>{const o=t.indexOf(e);o>-1&&t.splice(o,1)},ue=Object.prototype.hasOwnProperty,G=(t,e)=>ue.call(t,e),g=Array.isArray,U=t=>bt(t)==="[object Map]",mt=t=>t instanceof Date,R=t=>typeof t=="string",Y=t=>typeof t=="symbol",k=t=>t!==null&&typeof t=="object",fe=Object.prototype.toString,bt=t=>fe.call(t),he=t=>bt(t).slice(8,-1),Q=t=>R(t)&&t!=="NaN"&&t[0]!=="-"&&""+parseInt(t,10)===t,vt=t=>{const e=Object.create(null);return o=>e[o]||(e[o]=t(o))},ge=/-(\w)/g,me=vt(t=>t.replace(ge,(e,o)=>o?o.toUpperCase():"")),be=/\B([A-Z])/g,xt=vt(t=>t.replace(be,"-$1").toLowerCase()),ve=(t,e)=>!Object.is(t,e),yt=t=>{const e=parseFloat(t);return isNaN(e)?t:e};let xe;function _t(t,e){e=e||xe,e&&e.active&&e.effects.push(t)}const wt=t=>{const e=new Set(t);return e.w=0,e.n=0,e},kt=t=>(t.w&T)>0,Tt=t=>(t.n&T)>0,ye=({deps:t})=>{if(t.length)for(let e=0;e<t.length;e++)t[e].w|=T},_e=t=>{const{deps:e}=t;if(e.length){let o=0;for(let n=0;n<e.length;n++){const i=e[n];kt(i)&&!Tt(i)?i.delete(t):e[o++]=i,i.w&=~T,i.n&=~T}e.length=o}},X=new WeakMap;let M=0,T=1;const tt=30,z=[];let A;const W=Symbol(""),$t=Symbol("");class we{constructor(e,o=null,n){this.fn=e,this.scheduler=o,this.active=!0,this.deps=[],_t(this,n)}run(){if(!this.active)return this.fn();if(!z.includes(this))try{return z.push(A=this),Ee(),T=1<<++M,M<=tt?ye(this):Et(this),this.fn()}finally{M<=tt&&_e(this),T=1<<--M,St(),z.pop();const e=z.length;A=e>0?z[e-1]:void 0}}stop(){this.active&&(Et(this),this.onStop&&this.onStop(),this.active=!1)}}function Et(t){const{deps:e}=t;if(e.length){for(let o=0;o<e.length;o++)e[o].delete(t);e.length=0}}function ke(t,e){t.effect&&(t=t.effect.fn);const o=new we(t);e&&(de(o,e),e.scope&&_t(o,e.scope)),(!e||!e.lazy)&&o.run();const n=o.run.bind(o);return n.effect=o,n}function Te(t){t.effect.stop()}let N=!0;const et=[];function $e(){et.push(N),N=!1}function Ee(){et.push(N),N=!0}function St(){const t=et.pop();N=t===void 0?!0:t}function F(t,e,o){if(!Se())return;let n=X.get(t);n||X.set(t,n=new Map);let i=n.get(o);i||n.set(o,i=wt()),Ce(i)}function Se(){return N&&A!==void 0}function Ce(t,e){let o=!1;M<=tt?Tt(t)||(t.n|=T,o=!kt(t)):o=!t.has(A),o&&(t.add(A),A.deps.push(t))}function ot(t,e,o,n,i,s){const r=X.get(t);if(!r)return;let l=[];if(e==="clear")l=[...r.values()];else if(o==="length"&&g(t))r.forEach((a,c)=>{(c==="length"||c>=n)&&l.push(a)});else switch(o!==void 0&&l.push(r.get(o)),e){case"add":g(t)?Q(o)&&l.push(r.get("length")):(l.push(r.get(W)),U(t)&&l.push(r.get($t)));break;case"delete":g(t)||(l.push(r.get(W)),U(t)&&l.push(r.get($t)));break;case"set":U(t)&&l.push(r.get(W));break}if(l.length===1)l[0]&&Ct(l[0]);else{const a=[];for(const c of l)c&&a.push(...c);Ct(wt(a))}}function Ct(t,e){for(const o of g(t)?t:[...t])(o!==A||o.allowRecurse)&&(o.scheduler?o.scheduler():o.run())}const Oe=se("__proto__,__v_isRef,__isVue"),Ot=new Set(Object.getOwnPropertyNames(Symbol).map(t=>Symbol[t]).filter(Y)),Ae=Lt(),Le=Lt(!0),At=je();function je(){const t={};return["includes","indexOf","lastIndexOf"].forEach(e=>{t[e]=function(...o){const n=L(this);for(let s=0,r=this.length;s<r;s++)F(n,"get",s+"");const i=n[e](...o);return i===-1||i===!1?n[e](...o.map(L)):i}}),["push","pop","shift","unshift","splice"].forEach(e=>{t[e]=function(...o){$e();const n=L(this)[e].apply(this,o);return St(),n}}),t}function Lt(t=!1,e=!1){return function(o,n,i){if(n==="__v_isReactive")return!t;if(n==="__v_isReadonly")return t;if(n==="__v_raw"&&i===(t?e?He:Pt:e?Be:jt).get(o))return o;const s=g(o);if(!t&&s&&G(At,n))return Reflect.get(At,n,i);const r=Reflect.get(o,n,i);return(Y(n)?Ot.has(n):Oe(n))||(t||F(o,"get",n),e)?r:nt(r)?!s||!Q(n)?r.value:r:k(r)?t?Fe(r):B(r):r}}const Pe=Ie();function Ie(t=!1){return function(e,o,n,i){let s=e[o];if(!t&&!Ke(n)&&(n=L(n),s=L(s),!g(e)&&nt(s)&&!nt(n)))return s.value=n,!0;const r=g(e)&&Q(o)?Number(o)<e.length:G(e,o),l=Reflect.set(e,o,n,i);return e===L(i)&&(r?ve(n,s)&&ot(e,"set",o,n):ot(e,"add",o,n)),l}}function Re(t,e){const o=G(t,e);t[e];const n=Reflect.deleteProperty(t,e);return n&&o&&ot(t,"delete",e,void 0),n}function Ne(t,e){const o=Reflect.has(t,e);return(!Y(e)||!Ot.has(e))&&F(t,"has",e),o}function De(t){return F(t,"iterate",g(t)?"length":W),Reflect.ownKeys(t)}const Me={get:Ae,set:Pe,deleteProperty:Re,has:Ne,ownKeys:De},ze={get:Le,set(t,e){return!0},deleteProperty(t,e){return!0}},jt=new WeakMap,Be=new WeakMap,Pt=new WeakMap,He=new WeakMap;function Ve(t){switch(t){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function We(t){return t.__v_skip||!Object.isExtensible(t)?0:Ve(he(t))}function B(t){return t&&t.__v_isReadonly?t:It(t,!1,Me,null,jt)}function Fe(t){return It(t,!0,ze,null,Pt)}function It(t,e,o,n,i){if(!k(t)||t.__v_raw&&!(e&&t.__v_isReactive))return t;const s=i.get(t);if(s)return s;const r=We(t);if(r===0)return t;const l=new Proxy(t,r===2?n:o);return i.set(t,l),l}function Ke(t){return!!(t&&t.__v_isReadonly)}function L(t){const e=t&&t.__v_raw;return e?L(e):t}function nt(t){return!!(t&&t.__v_isRef===!0)}Promise.resolve();let it=!1;const K=[],Je=Promise.resolve(),J=t=>Je.then(t),Rt=t=>{K.includes(t)||K.push(t),it||(it=!0,J(qe))},qe=()=>{for(const t of K)t();K.length=0,it=!1},Ze=/^(spellcheck|draggable|form|list|type)$/,st=({el:t,get:e,effect:o,arg:n,modifiers:i})=>{let s;n==="class"&&(t._class=t.className),o(()=>{let r=e();if(n)i?.camel&&(n=me(n)),rt(t,n,r,s);else{for(const l in r)rt(t,l,r[l],s&&s[l]);for(const l in s)(!r||!(l in r))&&rt(t,l,null)}s=r})},rt=(t,e,o,n)=>{if(e==="class")t.setAttribute("class",gt(t._class?[t._class,o]:o)||"");else if(e==="style"){o=ht(o);const{style:i}=t;if(!o)t.removeAttribute("style");else if(R(o))o!==n&&(i.cssText=o);else{for(const s in o)lt(i,s,o[s]);if(n&&!R(n))for(const s in n)o[s]==null&&lt(i,s,"")}}else!(t instanceof SVGElement)&&e in t&&!Ze.test(e)?(t[e]=o,e==="value"&&(t._value=o)):e==="true-value"?t._trueValue=o:e==="false-value"?t._falseValue=o:o!=null?t.setAttribute(e,o):t.removeAttribute(e)},Nt=/\s*!important$/,lt=(t,e,o)=>{g(o)?o.forEach(n=>lt(t,e,n)):e.startsWith("--")?t.setProperty(e,o):Nt.test(o)?t.setProperty(xt(e),o.replace(Nt,""),"important"):t[e]=o},$=(t,e)=>{const o=t.getAttribute(e);return o!=null&&t.removeAttribute(e),o},E=(t,e,o,n)=>{t.addEventListener(e,o,n)},Ge=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,Ue=["ctrl","shift","alt","meta"],Ye={stop:t=>t.stopPropagation(),prevent:t=>t.preventDefault(),self:t=>t.target!==t.currentTarget,ctrl:t=>!t.ctrlKey,shift:t=>!t.shiftKey,alt:t=>!t.altKey,meta:t=>!t.metaKey,left:t=>"button"in t&&t.button!==0,middle:t=>"button"in t&&t.button!==1,right:t=>"button"in t&&t.button!==2,exact:(t,e)=>Ue.some(o=>t[`${o}Key`]&&!e[o])},Dt=({el:t,get:e,exp:o,arg:n,modifiers:i})=>{if(!n)return;let s=Ge.test(o)?e(`(e => ${o}(e))`):e(`($event => { ${o} })`);if(n==="vue:mounted"){J(s);return}else if(n==="vue:unmounted")return()=>s();if(i){n==="click"&&(i.right&&(n="contextmenu"),i.middle&&(n="mouseup"));const r=s;s=l=>{if(!("key"in l&&!(xt(l.key)in i))){for(const a in i){const c=Ye[a];if(c&&c(l,i))return}return r(l)}}}E(t,n,s,i)},Qe=({el:t,get:e,effect:o})=>{const n=t.style.display;o(()=>{t.style.display=e()?n:"none"})},Mt=({el:t,get:e,effect:o})=>{o(()=>{t.textContent=zt(e())})},zt=t=>t==null?"":k(t)?JSON.stringify(t,null,2):String(t),Xe=({el:t,get:e,effect:o})=>{o(()=>{t.innerHTML=e()})},to=({el:t,exp:e,get:o,effect:n,modifiers:i})=>{const s=t.type,r=o(`(val) => { ${e} = val }`),{trim:l,number:a=s==="number"}=i||{};if(t.tagName==="SELECT"){const c=t;E(t,"change",()=>{const d=Array.prototype.filter.call(c.options,p=>p.selected).map(p=>a?yt(S(p)):S(p));r(c.multiple?d:d[0])}),n(()=>{const d=o(),p=c.multiple;for(let u=0,x=c.options.length;u<x;u++){const v=c.options[u],y=S(v);if(p)g(d)?v.selected=Z(d,y)>-1:v.selected=d.has(y);else if(I(S(v),d)){c.selectedIndex!==u&&(c.selectedIndex=u);return}}!p&&c.selectedIndex!==-1&&(c.selectedIndex=-1)})}else if(s==="checkbox"){E(t,"change",()=>{const d=o(),p=t.checked;if(g(d)){const u=S(t),x=Z(d,u),v=x!==-1;if(p&&!v)r(d.concat(u));else if(!p&&v){const y=[...d];y.splice(x,1),r(y)}}else r(Bt(t,p))});let c;n(()=>{const d=o();g(d)?t.checked=Z(d,S(t))>-1:d!==c&&(t.checked=I(d,Bt(t,!0))),c=d})}else if(s==="radio"){E(t,"change",()=>{r(S(t))});let c;n(()=>{const d=o();d!==c&&(t.checked=I(d,S(t)))})}else{const c=d=>l?d.trim():a?yt(d):d;E(t,"compositionstart",eo),E(t,"compositionend",oo),E(t,i?.lazy?"change":"input",()=>{t.composing||r(c(t.value))}),l&&E(t,"change",()=>{t.value=t.value.trim()}),n(()=>{if(t.composing)return;const d=t.value,p=o();document.activeElement===t&&c(d)===p||d!==p&&(t.value=p)})}},S=t=>"_value"in t?t._value:t.value,Bt=(t,e)=>{const o=e?"_trueValue":"_falseValue";return o in t?t[o]:e},eo=t=>{t.target.composing=!0},oo=t=>{const e=t.target;e.composing&&(e.composing=!1,no(e,"input"))},no=(t,e)=>{const o=document.createEvent("HTMLEvents");o.initEvent(e,!0,!0),t.dispatchEvent(o)},Ht=Object.create(null),H=(t,e,o)=>Vt(t,`return(${e})`,o),Vt=(t,e,o)=>{const n=Ht[e]||(Ht[e]=io(e));try{return n(t,o)}catch(i){console.error(i)}},io=t=>{try{return new Function("$data","$el",`with($data){${t}}`)}catch(e){return console.error(`${e.message} in expression: ${t}`),()=>{}}},so=({el:t,ctx:e,exp:o,effect:n})=>{J(()=>n(()=>Vt(e.scope,o,t)))},ro={bind:st,on:Dt,show:Qe,text:Mt,html:Xe,model:to,effect:so},lo=(t,e,o)=>{const n=t.parentElement,i=new Comment("v-if");n.insertBefore(i,t);const s=[{exp:e,el:t}];let r,l;for(;(r=t.nextElementSibling)&&(l=null,$(r,"v-else")===""||(l=$(r,"v-else-if")));)n.removeChild(r),s.push({exp:l,el:r});const a=t.nextSibling;n.removeChild(t);let c,d=-1;const p=()=>{c&&(n.insertBefore(i,c.el),c.remove(),c=void 0)};return o.effect(()=>{for(let u=0;u<s.length;u++){const{exp:x,el:v}=s[u];if(!x||H(o.scope,x)){u!==d&&(p(),c=new dt(v,o),c.insert(n,i),n.removeChild(i),d=u);return}}d=-1,p()}),a},co=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,Wt=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,ao=/^\(|\)$/g,po=/^[{[]\s*((?:[\w_$]+\s*,?\s*)+)[\]}]$/,uo=(t,e,o)=>{const n=e.match(co);if(!n)return;const i=t.nextSibling,s=t.parentElement,r=new Text("");s.insertBefore(r,t),s.removeChild(t);const l=n[2].trim();let a=n[1].trim().replace(ao,"").trim(),c,d=!1,p,u,x="key",v=t.getAttribute(x)||t.getAttribute(x=":key")||t.getAttribute(x="v-bind:key");v&&(t.removeAttribute(x),x==="key"&&(v=JSON.stringify(v)));let y;(y=a.match(Wt))&&(a=a.replace(Wt,"").trim(),p=y[1].trim(),y[2]&&(u=y[2].trim())),(y=a.match(po))&&(c=y[1].split(",").map(m=>m.trim()),d=a[0]==="[");let oe=!1,j,q,ut;const bo=m=>{const _=new Map,f=[];if(g(m))for(let h=0;h<m.length;h++)f.push(ft(_,m[h],h));else if(typeof m=="number")for(let h=0;h<m;h++)f.push(ft(_,h+1,h));else if(k(m)){let h=0;for(const b in m)f.push(ft(_,m[b],h++,b))}return[f,_]},ft=(m,_,f,h)=>{const b={};c?c.forEach((P,C)=>b[P]=_[d?C:P]):b[a]=_,h?(p&&(b[p]=h),u&&(b[u]=f)):p&&(b[p]=f);const D=Gt(o,b),w=v?H(D.scope,v):f;return m.set(w,f),D.key=w,D},ne=(m,_)=>{const f=new dt(t,m);return f.key=m.key,f.insert(s,_),f};return o.effect(()=>{const m=H(o.scope,l),_=ut;if([q,ut]=bo(m),!oe)j=q.map(f=>ne(f,r)),oe=!0;else{for(let w=0;w<j.length;w++)ut.has(j[w].key)||j[w].remove();const f=[];let h=q.length,b,D;for(;h--;){const w=q[h],P=_.get(w.key);let C;P==null?C=ne(w,b?b.el:r):(C=j[P],Object.assign(C.ctx.scope,w.scope),P!==h&&(j[P+1]!==b||D===b)&&(D=C,C.insert(s,b?b.el:r))),f.unshift(b=C)}j=f}}),i},Ft=({el:t,ctx:{scope:{$refs:e}},get:o,effect:n})=>{let i;return n(()=>{const s=o();e[s]=t,i&&s!==i&&delete e[i],i=s}),()=>{i&&delete e[i]}},fo=/^(?:v-|:|@)/,ho=/\.([\w-]+)/g;let ct=!1;const Kt=(t,e)=>{const o=t.nodeType;if(o===1){const n=t;if(n.hasAttribute("v-pre"))return;$(n,"v-cloak");let i;if(i=$(n,"v-if"))return lo(n,i,e);if(i=$(n,"v-for"))return uo(n,i,e);if((i=$(n,"v-scope"))||i===""){const l=i?H(e.scope,i):{};e=Gt(e,l),l.$template&&go(n,l.$template)}const s=$(n,"v-once")!=null;s&&(ct=!0),(i=$(n,"ref"))&&at(n,Ft,`"${i}"`,e),Jt(n,e);const r=[];for(const{name:l,value:a}of[...n.attributes])fo.test(l)&&l!=="v-cloak"&&(l==="v-model"?r.unshift([l,a]):l[0]==="@"||/^v-on\b/.test(l)?r.push([l,a]):qt(n,l,a,e));for(const[l,a]of r)qt(n,l,a,e);s&&(ct=!1)}else if(o===3){const n=t.data;if(n.includes(e.delimiters[0])){let i=[],s=0,r;for(;r=e.delimitersRE.exec(n);){const l=n.slice(s,r.index);l&&i.push(JSON.stringify(l)),i.push(`$s(${r[1]})`),s=r.index+r[0].length}s<n.length&&i.push(JSON.stringify(n.slice(s))),at(t,Mt,i.join("+"),e)}}else o===11&&Jt(t,e)},Jt=(t,e)=>{let o=t.firstChild;for(;o;)o=Kt(o,e)||o.nextSibling},qt=(t,e,o,n)=>{let i,s,r;if(e=e.replace(ho,(l,a)=>((r||(r={}))[a]=!0,"")),e[0]===":")i=st,s=e.slice(1);else if(e[0]==="@")i=Dt,s=e.slice(1);else{const l=e.indexOf(":"),a=l>0?e.slice(2,l):e.slice(2);i=ro[a]||n.dirs[a],s=l>0?e.slice(l+1):void 0}i&&(i===st&&s==="ref"&&(i=Ft),at(t,i,o,n,s,r),t.removeAttribute(e))},at=(t,e,o,n,i,s)=>{const r=e({el:t,get:(l=o)=>H(n.scope,l,t),effect:n.effect,ctx:n,exp:o,arg:i,modifiers:s});r&&n.cleanups.push(r)},go=(t,e)=>{if(e[0]==="#"){const o=document.querySelector(e);t.appendChild(o.content.cloneNode(!0));return}t.innerHTML=e},Zt=t=>{const e={delimiters:["{{","}}"],delimitersRE:/\{\{([^]+?)\}\}/g,...t,scope:t?t.scope:B({}),dirs:t?t.dirs:{},effects:[],blocks:[],cleanups:[],effect:o=>{if(ct)return Rt(o),o;const n=ke(o,{scheduler:()=>Rt(n)});return e.effects.push(n),n}};return e},Gt=(t,e={})=>{const o=t.scope,n=Object.create(o);Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)),n.$refs=Object.create(o.$refs);const i=B(new Proxy(n,{set(s,r,l,a){return a===i&&!s.hasOwnProperty(r)?Reflect.set(o,r,l):Reflect.set(s,r,l,a)}}));return Ut(i),{...t,scope:i}},Ut=t=>{for(const e of Object.keys(t))typeof t[e]=="function"&&(t[e]=t[e].bind(t))};class dt{constructor(e,o,n=!1){O(this,"template"),O(this,"ctx"),O(this,"key"),O(this,"parentCtx"),O(this,"isFragment"),O(this,"start"),O(this,"end"),this.isFragment=e instanceof HTMLTemplateElement,n?this.template=e:this.isFragment?this.template=e.content.cloneNode(!0):this.template=e.cloneNode(!0),n?this.ctx=o:(this.parentCtx=o,o.blocks.push(this),this.ctx=Zt(o)),Kt(this.template,this.ctx)}get el(){return this.start||this.template}insert(e,o=null){if(this.isFragment)if(this.start){let n=this.start,i;for(;n&&(i=n.nextSibling,e.insertBefore(n,o),n!==this.end);)n=i}else this.start=new Text(""),this.end=new Text(""),e.insertBefore(this.end,o),e.insertBefore(this.start,this.end),e.insertBefore(this.template,this.end);else e.insertBefore(this.template,o)}remove(){if(this.parentCtx&&pe(this.parentCtx.blocks,this),this.start){const e=this.start.parentNode;let o=this.start,n;for(;o&&(n=o.nextSibling,e.removeChild(o),o!==this.end);)o=n}else this.template.parentNode.removeChild(this.template);this.teardown()}teardown(){this.ctx.blocks.forEach(e=>{e.teardown()}),this.ctx.effects.forEach(Te),this.ctx.cleanups.forEach(e=>e())}}const Yt=t=>t.replace(/[-.*+?^${}()|[\]\/\\]/g,"\\$&"),Qt=t=>{const e=Zt();if(t&&(e.scope=B(t),Ut(e.scope),t.$delimiters)){const[n,i]=e.delimiters=t.$delimiters;e.delimitersRE=new RegExp(Yt(n)+"([^]+?)"+Yt(i),"g")}e.scope.$s=zt,e.scope.$nextTick=J,e.scope.$refs=Object.create(null);let o;return{directive(n,i){return i?(e.dirs[n]=i,this):e.dirs[n]},mount(n){if(typeof n=="string"&&(n=document.querySelector(n),!n))return;n=n||document.documentElement;let i;return n.hasAttribute("v-scope")?i=[n]:i=[...n.querySelectorAll("[v-scope]")].filter(s=>!s.matches("[v-scope] [v-scope]")),i.length||(i=[n]),o=i.map(s=>new dt(s,e,!0)),this},unmount(){o.forEach(n=>n.teardown())}}},Xt=document.currentScript;Xt&&Xt.hasAttribute("init")&&Qt().mount();const te=function(t){return!t||!t.tagName?!1:[()=>t.tagName.includes("-"),()=>!!t.shadowRoot,()=>{try{return customElements.get(t.tagName.toLowerCase())!==void 0}catch{return!1}},()=>["__isDarkchest","__componentId"].some(n=>n in t)].some(o=>o())},pt="[@DARKCHEST/LIT]",ee={log:(...t)=>console.log(`${pt} `,...t),warn:(...t)=>console.warn(`${pt} `,...t),error:(...t)=>console.error(`${pt} `,...t)};class mo extends HTMLElement{static observedAttributes=["initialtodos","apptitle","enablelocalstorage","initial-todos","app-title","enable-local-storage"];constructor(){super(),this._isDarkchest=!0,this._componentId=Math.random().toString(36).substring(2),this._types={initialTodos:{type:["Array","Object"],attr:"initialTodos"},initialtodos:{type:["Array","Object"],attr:"initialTodos"},"initial-todos":{type:["Array","Object"],attr:"initialTodos"},appTitle:{type:["String"],attr:"appTitle"},apptitle:{type:["String"],attr:"appTitle"},"app-title":{type:["String"],attr:"appTitle"},enableLocalStorage:{type:["Boolean"],attr:"enableLocalStorage"},enablelocalstorage:{type:["Boolean"],attr:"enableLocalStorage"},"enable-local-storage":{type:["Boolean"],attr:"enableLocalStorage"}},this._watchers={},this._listeners=[],this._el=null,this._parent=null,this._children=[],this._eventPrefix="@",this.attachShadow({mode:"open"});const e=document.createElement("style");e.textContent=`
+      *, *::before, *::after {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+      }
+      #app {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.todo-container {
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+.app-title {
+  color: #42b983;
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+
+.app-description {
+  color: #7f8c8d;
+  font-size: 1rem;
+}
+
+.add-todo {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.todo-input {
+  flex: 1;
+  padding: 12px 15px;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 16px;
+  transition: border-color 0.3s;
+}
+
+.todo-input:focus {
+  border-color: #42b983;
+  outline: none;
+}
+
+.add-btn, .clear-btn {
+  padding: 12px 20px;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.add-btn {
+  background-color: #42b983;
+  color: white;
+}
+
+.add-btn:hover {
+  background-color: #3aa876;
+}
+
+.clear-btn {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.clear-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.filter-controls {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 25px;
+}
+
+.filter-btn {
+  flex: 1;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.filter-btn.active {
+  background-color: #42b983;
+  color: white;
+  border-color: #42b983;
+}
+
+.filter-btn:hover:not(.active) {
+  background-color: #e9ecef;
+}
+
+.todo-list {
+  margin-bottom: 25px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: #95a5a6;
+  font-style: italic;
+}
+
+.todo-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: all 0.3s;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  background-color: #f9f9f9;
+}
+
+.todo-item:hover {
+  background-color: #f0f0f0;
+  transform: translateY(-2px);
+}
+
+.todo-item.completed {
+  opacity: 0.8;
+  background-color: #f0f9f0;
+}
+
+.todo-content {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.todo-checkbox {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.todo-text {
+  flex: 1;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.todo-item.completed .todo-text span:first-child {
+  text-decoration: line-through;
+  color: #95a5a6;
+}
+
+.todo-date {
+  font-size: 0.8rem;
+  color: #95a5a6;
+}
+
+.todo-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.edit-btn, .delete-btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.edit-btn {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.edit-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.delete-btn {
+  background-color: #ff6b6b;
+  color: white;
+}
+
+.delete-btn:hover {
+  background-color: #ff5252;
+}
+
+.stats {
+  margin-top: 25px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+  color: #7f8c8d;
+}
+
+.completion-rate {
+  color: #42b983;
+  font-weight: bold;
+}
+
+.progress-container {
+  height: 10px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #42b983;
+  border-radius: 5px;
+  transition: width 0.5s ease;
+}
+
+footer {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+  text-align: center;
+  color: #95a5a6;
+  font-size: 0.9rem;
+}
+
+.footer-text {
+  margin: 5px 0;
+}
+
+/* 编辑模态框样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  background-color: white;
+  padding: 30px;
+  border-radius: 10px;
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.modal h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #2c3e50;
+}
+
+.edit-input {
+  width: 100%;
+  padding: 12px 15px;
+  border: 2px solid #42b983;
+  border-radius: 6px;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.save-btn, .cancel-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.save-btn {
+  background-color: #42b983;
+  color: white;
+}
+
+.save-btn:hover {
+  background-color: #3aa876;
+}
+
+.cancel-btn {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.cancel-btn:hover {
+  background-color: #e0e0e0;
+}
+    `;const o=document.createElement("div");o.innerHTML=`<div :data-watch-todos="$todos" :data-watch-filter="$filter">
+  <div id="app">
+    <div class="todo-container">
+      <!-- Header Slot -->
+      <header>
+        <slot name="header">
+          <h1 class="app-title">{{ appTitle }}</h1>
+          <p class="app-description">使用 Vue2 实现的 Todo List 应用</p>
+        </slot>
+      </header>
+
+      <!-- Add Todo Form -->
+      <div class="add-todo">
+        <input
+          type="text"
+          v-model="newTodo"
+          placeholder="请输入待办事项..."
+          @keyup.enter="addTodo"
+          class="todo-input"
+        />
+        <button @click="addTodo" class="add-btn">添加</button>
+        <button @click="clearCompleted" class="clear-btn">清除已完成</button>
+      </div>
+
+      <!-- Filter Controls -->
+      <div class="filter-controls">
+        <button 
+          @click="filter = 'all'"
+          :class="{ active: filter === 'all' }"
+          class="filter-btn"
+        >
+          全部 ({{ totalTodos }})
+        </button>
+        <button 
+          @click="filter = 'active'"
+          :class="{ active: filter === 'active' }"
+          class="filter-btn"
+        >
+          未完成 ({{ activeTodosCount }})
+        </button>
+        <button 
+          @click="filter = 'completed'"
+          :class="{ active: filter === 'completed' }"
+          class="filter-btn"
+        >
+          已完成 ({{ completedTodosCount }})
+        </button>
+      </div>
+
+      <!-- Todo List -->
+      <div class="todo-list">
+        <div v-if="filteredTodos.length === 0" class="empty-state">
+          <p v-if="todos.length === 0">暂无待办事项，请添加一个吧！</p>
+          <p v-else>没有{{ filter === 'active' ? '未完成' : '已完成' }}的事项</p>
+        </div>
+        
+        <div 
+          v-for="todo in filteredTodos" 
+          :key="todo.id"
+          class="todo-item"
+          :class="{ completed: todo.completed }"
+        >
+          <div class="todo-content">
+            <input 
+              type="checkbox" 
+              v-model="todo.completed"
+              class="todo-checkbox"
+              :id="'todo-' + todo.id"
+            />
+            <label :for="'todo-' + todo.id" class="todo-text">
+              <span>{{ todo.text }}</span>
+              <span class="todo-date">{{ formatDate(todo.createdAt) }}</span>
+            </label>
+          </div>
+          <div class="todo-actions">
+            <button @click="editTodo(todo)" class="edit-btn">编辑</button>
+            <button @click="deleteTodo(todo.id)" class="delete-btn">删除</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stats -->
+      <div class="stats">
+        <p v-if="todos.length > 0">
+          已完成 {{ completedTodosCount }} / 总共 {{ totalTodos }} 个待办事项
+          <span v-if="hasCompletedTodos" class="completion-rate">
+            (完成率: {{ completionRate }}%)
+          </span>
+        </p>
+        
+        <!-- Progress Bar Slot -->
+        <slot name="progress">
+          <div class="progress-container">
+            <div class="progress-bar" :style="{ width: completionRate + '%' }"></div>
+          </div>
+        </slot>
+      </div>
+
+      <!-- Footer Slot -->
+      <footer>
+        <slot name="footer">
+          <p class="footer-text">双击事项可标记为完成/未完成</p>
+          <p class="footer-text">使用 Vue2 实现 - 包含 Props, Data, Methods, Slots, Watch, Computed, 生命周期</p>
+        </slot>
+      </footer>
+    </div>
+
+    <!-- Edit Modal -->
+    <div v-if="editingTodo" class="modal-overlay" @click="cancelEdit">
+      <div class="modal" @click.stop>
+        <h3>编辑待办事项</h3>
+        <input 
+          type="text" 
+          v-model="editingTodo.text" 
+          @keyup.enter="saveEdit"
+          class="edit-input"
+        />
+        <div class="modal-actions">
+          <button @click="saveEdit" class="save-btn">保存</button>
+          <button @click="cancelEdit" class="cancel-btn">取消</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>`,this._el=o.firstElementChild,this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(this._el),this.app=null}connectedCallback(){const e=this;this.app=B({initialTodos:function(){return[]},appTitle:"我的待办清单",enableLocalStorage:!0,newTodo:"",todos:[],filter:"all",editingTodo:null,lastTodoId:0,get filteredTodos(){switch(this.filter){case"active":return this.todos.filter(n=>!n.completed);case"completed":return this.todos.filter(n=>n.completed);default:return this.todos}},get activeTodosCount(){return this.todos.filter(n=>!n.completed).length},get completedTodosCount(){return this.todos.filter(n=>n.completed).length},get totalTodos(){return this.todos.length},get completionRate(){return this.totalTodos===0?0:Math.round(this.completedTodosCount/this.totalTodos*100)},get hasCompletedTodos(){return this.completedTodosCount>0},$todos_handler(n,i){e._watchers.$todos=n,i?.split?.(",")?.shift?.()?.trim?.(),this.enableLocalStorage&&localStorage.setItem("vue-todos",JSON.stringify(n)),this.$emit("todos-updated",n)},get $todos(){const n=this.todos;return e._watchers.$todos!==n&&this.$todos_handler(n,e._watchers.$todos),n},$filter_handler(n,i){e._watchers.$filter=n,i?.split?.(",")?.shift?.()?.trim?.(),console.log("过滤器已更改为: "+n)},get $filter(){const n=this.filter;return e._watchers.$filter!==n&&this.$filter_handler(n,e._watchers.$filter),n},addTodo(){this.newTodo.trim()!==""&&(this.todos.push({id:++this.lastTodoId,text:this.newTodo.trim(),completed:!1,createdAt:new Date}),this.newTodo="",console.log("已添加新的待办事项"))},deleteTodo(n){const i=this.todos.findIndex(s=>s.id===n);i!==-1&&(this.todos.splice(i,1),console.log("已删除待办事项 ID: "+n))},editTodo(n){this.editingTodo={...n}},saveEdit(){if(this.editingTodo&&this.editingTodo.text.trim()!==""){const n=this.todos.findIndex(i=>i.id===this.editingTodo.id);n!==-1&&(this.$set(this.todos,n,{...this.editingTodo}),console.log("已更新待办事项 ID: "+this.editingTodo.id))}this.editingTodo=null},cancelEdit(){this.editingTodo=null},clearCompleted(){const n=this.todos.length;this.todos=this.todos.filter(s=>!s.completed);const i=n-this.todos.length;console.log("已清除 "+i+" 个已完成事项")},formatDate(n){return new Date(n).toLocaleDateString("zh-CN",{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"})},$lifecycle_mounted(){console.log("TodoApp 组件已挂载到 DOM"),this.$nextTick(()=>{document.querySelectorAll(".todo-item").forEach(i=>{i.addEventListener("dblclick",()=>{const s=parseInt(i.dataset.id),r=this.todos.findIndex(l=>l.id===s);r!==-1&&(this.todos[r].completed=!this.todos[r].completed,console.log("双击切换待办事项状态 ID: "+s))})})})},$lifecycle_unmounted(){console.log("TodoApp 组件已销毁")},get $el(){return e.$el},get $parent(){return e.$parent},get $children(){return e.$children},get $root(){return e.$root},$emit(n,i){e.dispatchEvent(new CustomEvent(e._eventPrefix+n,{detail:i}))}}),this.$app=Qt(this.app).mount(this._el);let o=this.parentElement;for(;o&&!te(o);)o=o.parentElement;o&&(this._parent=o,o._children.push(this)),this.dispatchEvent(new CustomEvent("mounted")),this.app?.$lifecycle_mounted?.(),(function(){const n=(function(){return{newTodo:"",todos:[],filter:"all",editingTodo:null,lastTodoId:0}})();Object.keys(n).forEach(i=>{(e?.constructor?.observedAttributes??[]).indexOf?.(i)>=0?ee.info("当前属性 "+i+" 已定义为 prop 属性, 无法初始化."):e.app[i]=n[i]})})()}attributeChangedCallback(e,o,n){if(!this.app){var i=this;setTimeout(function(){i.attributeChangedCallback(e,o,n)},10);return}if((this?.constructor?.observedAttributes??[]).indexOf?.(e)>=0){const s=this._types[e];s&&(this.app[s.attr]=this._typeChcker(n,s.type))}}disconnectedCallback(){this._children&&(this._children.forEach(e=>e.disconnectedCallback()),this._children=[]),this._parent&&(this._parent._children=this._parent._children.filter(e=>e!==this),this._parent=null),Object.keys(this._listeners).forEach(e=>this.off(e)),this._listeners={},this.dispatchEvent(new CustomEvent("unmounted")),this.app?.$lifecycle_unmounted?.(),this.app=null,this.$app.unmount(),this.$app=null,this._el=null}get __isDarkchest(){return this._isDarkchest}get __componentId(){return this._componentId}get $el(){return this._el||null}get $parent(){return this._parent||null}get $children(){return this._children||[]}get $root(){let e=this;for(;e.$parent&&te(e.$parent);)e=e.$parent;return e}_typeChcker(e,o){return e}prop(e,o){if((this?.constructor?.observedAttributes??[]).indexOf?.(e)>=0){if(o===void 0)return this.getAttribute(e);this.setAttribute(e,o)}else ee.info(`未定义的prop [${e}]`)}get initialTodos(){return this?.app?.initialTodos}set initialTodos(e){this.app.initialTodos=this?._typeChcker?.(e,"Array","Object")}get appTitle(){return this?.app?.appTitle}set appTitle(e){this.app.appTitle=this?._typeChcker?.(e,"String")}get enableLocalStorage(){return this?.app?.enableLocalStorage}set enableLocalStorage(e){this.app.enableLocalStorage=this?._typeChcker?.(e,"Boolean")}on(e,o,n){const i=this._eventPrefix+e;return this._listeners[i]=o,this.addEventListener(i,o,n),this}off(e,o){if(e){const n=this._eventPrefix+e;if(o)this.removeEventListener(n,o),delete this._listeners[n];else{const i=this._listeners[n];i&&(this.removeEventListener(n,i),delete this._listeners[n])}}return this}once(e,o,n){const i=this._eventPrefix+e,s=(...r)=>{this.removeEventListener(i,s),o(...r)};return this.addEventListener(i,s,n),this}addTodo(){return this.app.addTodo()}deleteTodo(e){return this.app.deleteTodo(e)}editTodo(e){return this.app.editTodo(e)}saveEdit(){return this.app.saveEdit()}cancelEdit(){return this.app.cancelEdit()}clearCompleted(){return this.app.clearCompleted()}formatDate(e){return this.app.formatDate(e)}}customElements.define("todo-list",mo)}));

package/example/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@darkchest/wck-example</title>
+</head>
+<body>
+  <todo-list app-title="*待办清单*"></todo-list>
+  <script src="./dist/index.iife.min.js"></script>
+</body>
+</html>

package/example/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@darkchest/wck-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@darkchest/wck": "^0.0.2",
+    "vite": "^7.3.1"
+  }
+}

package/example/src/index.js

@@ -0,0 +1,3 @@
+import TodoList from './components/TodoList.vue';
+
+customElements.define('todo-list', TodoList);

package/example/vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import wck from '@darkchest/wck';
+
+export default defineConfig({
+  plugins: [
+    wck(), // 设置转换插件
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.js'),
+      name: 'MyLib', // 在iife和umd模式下必填
+      formats: ['es', 'iife', 'umd'],
+      fileName: (format, name) => `${name}.${format}.min.js`
+    },
+  }
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darkchest/wck",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "@darkchest/wck是一个通过将 Vue 单文件组件 (SFC) 转换为通用的web-component组件的解决方案。",
   "private": false,
   "main": "src/index.js",

package/readme.md

@@ -55,6 +55,13 @@ npm install @darkchest/wck vite -D
 ```
 
 ### 2. 使用示例(重要: 请参考TodoList.vue文件示例, 该文件中已包含所有核心功能并且开箱即用)
+
+```javascript
+// 创建一个项目文件夹, 例如helloworld, 然后在文件夹中执行npm init -y初始化一下.
+// 然后我们在文件夹中手动创建vite.config.js, index.html, src/index.js, src/components/TodoList.vue文件
+// 以上文件的内容直接复制下面对应的内容即可.(注意package.json不能复制, 而是手动修改scripts命令的部分, 请看下面的package.json部分)
+```
+
 ```javascript
 // vite.config.js
 import { defineConfig } from 'vite';
@@ -786,4 +793,17 @@ footer {
     <!-- 也可以执行npm run build直接编译src/index.js到dist目录, 然后在script的src属性中引入打包后的文件, 方案二选一即可 -->
   </body>
 </html>
-```
+```
+
+
+## 最后的最后
+
+  要是还看不明白, 直接将源码下载下来后, 有个example文件夹, 双击打开index.html即可看到效果.
+
+  您也可以将example文件复制到其它地方, 然后执行npm install安装依赖, 然后npm run dev启动开发服务, 并按上面提到的修改index.html里的script部分, 改成直接import 'src/index.js'即可. 一但正常运行并以localhost打开网页后, 您可以尝试着修改TodoList.vue代码观察效果.
+
+  同理, 在开发模式下, 您还可以在src/components中创建更多的组件并在src/index.js中注册, 然后在index.html中直接使用注册后的组件.
+
+  最后, 如果需要异步注册, 单个组件导出为单个js文件, 您需要自行在vite.config.js中配置多入口, 这不属于本教程的讨论范围. 请自行阅读vite的官方文档.
+
+  祝您使用愉快.