wkit/dist/index.js

A library for building fast, lightweight web components.

var A=Object.create(null);["autofocus","autoplay","async","allowTransparency","checked","controls","declare","disabled","defer","defaultChecked","defaultSelected","contentEditable","isMap","loop","multiple","noHref","noResize","noShade","open","readOnly","selected","loading"].forEach(function(i){A[i.toLowerCase()]=i});var C="keep-alive",oe="keepAlive",H=Symbol("wc_path"),m=Symbol("wc-nothing"),B=Symbol("finalized"),$=Symbol("props"),y=Symbol("changed_props"),w=Symbol("mounted"),k=Symbol("pending"),le="* {box-sizing: border-box;margin: 0;padding: 0;}::before,::after {box-sizing: border-box;}::selection {background: var(--selection-background, var(--color-plain-a));color: var(--selection-color, inherit);}";function ne(i){switch(i){case Number:return 0;case Boolean:return!1;case Object:return{};case Array:return[];default:return""}}function Se(i){switch(typeof i){case"number":return{type:Number,default:i};case"boolean":return{type:Boolean,default:i};case"object":return Array.isArray(i)?{type:Array,default:i}:{type:Object,default:i};case"string":let e=String,t=!0;return i.includes("!")&&(i.startsWith("str!")?i=i.slice(4):i.startsWith("num!")?(e=Number,i=+i.slice(4)||0):i.startsWith("bool!")&&(e=Boolean,i=i.slice(5),i=i!=="false"&&i!==""),t=!1),{type:e,default:i,attribute:t};default:return{type:null,default:""}}}function ae(i){if(i&&typeof i=="object"&&i.hasOwnProperty("type"))return Object.assign({attribute:!0,default:ne(i.type)},i);switch(i){case Number:i={type:Number};break;case Boolean:i={type:Boolean};break;case Object:i={type:Object};break;case Array:i={type:Array};break;case String:i={type:String};break;default:i=Se(i);break}return i.default=i.hasOwnProperty("default")?i.default:ne(i.type),i.attribute=i.hasOwnProperty("attribute")?i.attribute:!0,i}function M(i,e){switch(e.type){case Number:return i===null?null:+i||0;case Boolean:return i===!1?!1:i!==null;case Object:if(typeof i=="object")return i;try{return JSON.parse(i)}catch{return{}}case Array:if(typeof i=="object")return i;try{return JSON.parse(i)}catch{return[]}case null:return i;default:return i==null?null:i+""}}var ce=CSSStyleSheet;document.adoptedStyleSheets||(ce=class{elem=document.createElement("style");replaceSync(i){this.elem.textContent=i.replace(/\s+/g," ")}});function ke(i,...e){let t="",r=Array.from(i);for(;r.length;)t+=r.shift()+(e.shift()||"");return t}function fe(i,e=""){let t=new ce;typeof e=="string"?e=[e]:e=e.flat(1/0),e=(le+e.join(" ")).trim(),t.replaceSync(e),i.adoptedStyleSheets?i.adoptedStyleSheets=[t]:i.appendChild(t.elem)}function P(i=200,e=[],t=!1){t===!1&&this.style.display==="none"&&(this.style.display="");let r=this.animate(e,{duration:i,direction:t?"reverse":"normal",fill:"forwards"});return new Promise(s=>{r.addEventListener("finish",n=>{t&&(this.style.display="none"),r.cancel(),s()},{once:!0})})}var T={fade:[{opacity:0},{opacity:1}],scale:[{transform:"scale(0)"},{transform:"scale(1)"}],"micro-bounce":[{opacity:0,transform:"scale(0.8)"},{transform:"scale(1.05)",opacity:1},{transform:"scale(1)"}],slide:[{opacity:0,transform:"translateY(-50px)"},{opacity:1,transform:"translateY(0)"}],bounce:[{transform:"scale(0)"},{transform:"scale(1.2)"},{transform:"scale(1)"}],rotate:[{transform:"rotate(0)"},{transform:"rotate(360deg)"}]};function g(){}function z(i,e,t){let r=t?"querySelectorAll":"querySelector";return e?e[r](i):document.body[r](i)}function Re(i,e){return z(i,e,!0)}var b=function(){let i=[],e=document.createTextNode("<!-- -->"),t=!1;function r(){for(;i.length>0;){let s=i.shift();try{s()}catch(n){console.error(n)}}}return new MutationObserver(r).observe(e,{characterData:!0}),function(s){i.push(s),t=!t,e.data=t}}();function Oe(...i){let e=0,t=0,r=1,s=[];switch(i.length){case 1:t=i[0];break;case 2:case 3:[e,t,r=1]=i,r=Math.abs(r)||1;break}e>t&&([e,t]=[t,e]);for(let n=e;n<t;n+=r)s.push(n);return s}function G(i){return i.replace(/([a-z\d])([A-Z]+)/g,"$1-$2").toLowerCase()}function W(i){return i.indexOf("-")<0?i:i.replace(/\-([a-z])/g,(e,t)=>t.toUpperCase())}function Ce(i){try{let e=i.getBoundingClientRect();if(e.width||e.height||i.getClientRects().length){let t=i.ownerDocument,r=t.documentElement,s=t.defaultView;return{top:e.top+s.pageYOffset-r.clientTop,left:e.left+s.pageXOffset-r.clientLeft}}}catch{return{left:0,top:0}}}function v(i,e="",t,r,s=!1){let n=e.split(","),o,a=i&&i.host===i,c=a?i:null;if(!i||!e)return console.error("Argument Error: function bind's arg 1 must be a document obejct");if(typeof t=="function"?(s=r||!1,r=t,t=null):(typeof t!="string"&&(t=null),r=r||g),a===!1){let l=i;for(;l&&l!==document.body&&l!==document;){if(l.ownHost){a=!0,c=l.ownHost;break}l=l.parentNode}}return t?o=function(l){let u=z(t,i),p=l.target;if(u)for(;p!==i;)if(u.contains(p)){r(l);break}else p=p.parentNode}:o=r,n.forEach(function(l){if(l=l.trim(),a){c.$events[l]??=[];let u=c.$events[l];if(u.length){let p=u.findIndex(h=>h.el===i&&h.listener===o&&h.options===s);if(p>-1){let h=u[p];u.splice(p,1),i.removeEventListener(l,h.listener,h.options)}}u.push({el:i,listener:o,options:s})}i.addEventListener(l,o,s)}),o}function L(i,e="",t=g,r=!1){e.split(",").forEach(function(n){i.removeEventListener(n.trim(),t,r)})}function Me(i,e=g){return v(document,"mousedown",t=>{let r=t.composedPath?t.composedPath():t.path;if(r){for(;r.length>3;)if(r.shift()===i)return}else{let s=t.explicitOriginalTarget||t.target;if(i===s||i.contains(s)||i.root&&i.root.contains(s))return}e(t)})}function Pe(i=g){L(document,"mousedown",i)}function he(i,e="click",t={},r){let s=new Event(e,{bubbles:!r,cancelable:!0});Object.assign(s,t),i.dispatchEvent(s)}var K="{{$wkit$}}",x=`{{^wkit${String(Math.random()).slice(-8)}^}}`,xe="?"+x,ve=`<${xe}>`,I=i=>i===null||typeof i!="object"&&typeof i!="function",te=Array.isArray,Le=i=>i?te(i)||typeof i[Symbol.iterator]=="function":!1,X=`[ 
\f\r]`,Ie=`[^ 
\f\r"'\`<>=]`,Ve=`[^\\s"'>=/]`,R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ue=1,q=2,je=3,pe=/-->/g,de=/>/g,N=new RegExp(`>|${X}(?:(${Ve}+)(${X}*=${X}*(?:${Ie}|("|')|))|$)`,"g"),Ue=0,me=1,De=2,_e=3,be=/'/g,ye=/"/g,Ee=/^(?:script|style|textarea|title)$/i,He=1,V=2,ie=1,j=2,Be=5,re=6,ze=7,ge=new Map,E=document.createTreeWalker(document,129,null,!1);function Ge(i,e){let t=i.length-1,r=[],s=e===V?"<svg>":"",n,o=R;for(let c=0;c<t;c++){let l=i[c],u=-1,p,h=0,f;for(;h<l.length&&(o.lastIndex=h,f=o.exec(l),f!==null);)h=o.lastIndex,o===R?f[ue]==="!--"?o=pe:f[ue]!==void 0?o=de:f[q]!==void 0?(Ee.test(f[q])&&(n=new RegExp(`</${f[q]}`,"g")),o=N):f[je]!==void 0&&(o=N):o===N?f[Ue]===">"?(o=n??R,u=-1):f[me]===void 0?u=-2:(u=o.lastIndex-f[De].length,p=f[me],o=f[_e]===void 0?N:f[_e]==='"'?ye:be):o===ye||o===be?o=N:o===pe||o===de?o=R:(o=N,n=void 0);let d=o===N&&i[c+1].startsWith("/>")?" ":"";s+=o===R?l+ve:u>=0?(r.push(p),l.slice(0,u)+K+l.slice(u)+x+d):l+x+(u===-2?(r.push(void 0),c):d)}let a=s+(i[t]||"<?>")+(e===V?"</svg>":"");if(!te(i)||!i.hasOwnProperty("raw"))throw new Error("invalid html ast");return[a,r]}function Ae(i=""){let e=document.createElement("template");return e.innerHTML=i,e}function O(i=""){return document.createComment(i)}var Y=class{parts=[];constructor({strings:e,values:t,__dom_type__:r},s){let n,o=0,a=0,c=e.length-1,l=this.parts,[u,p]=Ge(e,r);if(this.el=Ae(u),E.currentNode=this.el.content,r===V){let h=this.el.content,f=h.firstChild;f.remove(),h.append(...f.childNodes)}for(;(n=E.nextNode())!==null&&l.length<c;){if(n.nodeType===1){if(n.hasAttributes()){let h=[];for(let f of n.getAttributeNames())if(f.endsWith(K)||f.startsWith(x)){let d=p[a++];if(h.push(f),d!==void 0){let Te=n.getAttribute(d.toLowerCase()+K).split(x),_=/([#:@])?(.*)/.exec(d),D=[];_[1]==="@"&&_[2].includes(".")&&(D=_[2].split("."),_[2]=D.shift()),l.push({type:ie,index:o,name:_[2],strings:Te,decorates:D,ctor:_[1]===":"?Q:_[1]==="#"&&_[2]==="animation"?Z:_[1]==="@"?J:S})}else l.push({type:re,index:o})}for(let f of h)n.removeAttribute(f)}if(Ee.test(n.tagName)){let h=n.textContent.split(x),f=h.length-1;if(f>0){n.textContent="";for(let d=0;d<f;d++)n.append(h[d],O()),E.nextNode(),l.push({type:j,index:++o});n.append(h[f],O())}}}else if(n.nodeType===8)if(n.data===xe)l.push({type:j,index:o});else{let f=-1;for(;(f=n.data.indexOf(x,f+1))!==-1;)l.push({type:ze,index:o}),f+=x.length-1}o++}}},F=class{constructor(e,t){this.$parts=[],this.$template=e,this.$parent=t}get parentNode(){return this.$parent.parentNode}#e(e,t,r){do e&&e.nodeType===1&&e.getAttribute("ref")&&(r.host.$refs[e.getAttribute("ref")]=e,e.removeAttribute("ref"));while((e=t.nextNode())!==null)}clone(e){let{el:{content:t},parts:r}=this.$template,s=document.importNode(t,!0),n=0,o=0,a=r[0],c=null;if(E.currentNode=s,c=E.nextNode(),a===void 0)this.#e(c,E,e);else{for(;a!==void 0;){if(c.nodeType===1&&c.getAttribute("ref")&&e.host.$refs&&(e.host.$refs[c.getAttribute("ref")]=c,c.removeAttribute("ref")),n===a.index){let l;a.type===j?l=new U(c,c.nextSibling,this,e):a.type===ie?l=new a.ctor(c,a.name,a.strings,a.decorates,this,e):a.type===re&&(l=new ee(c,this,e)),this.$parts.push(l),a=r[++o]}n!==a?.index&&(c=E.nextNode(),n++)}this.#e(c,E,e)}return s}update(e){let t=0;for(let r of this.$parts)r!==void 0&&(r.strings!==void 0?(r.$setValue(e,t),t+=r.strings.length-2):r.$setValue(e[t])),t++}},U=class i{type=j;#e=m;constructor(e,t,r,s){this.startNode=e,this.endNode=t,this.$parent=r,this.options=s}get parentNode(){let e=this.startNode.parentNode,t=this.$parent;return t!==void 0&&e.nodeType===11&&(e=t.parentNode),e}$setValue(e,t){I(e)?e===m||e==null||e===""?(this.#e!==m&&this.#s(),this.#e=m):e!==this.#e&&this.#r(e):e.__dom_type__!==void 0?this.#n(e):e.nodeType!==void 0?this.#i(e):Le(e)?this.#l(e):this.#r(e),t&&b(r=>this.#a())}#t(e,t=this.endNode){return this.startNode.parentNode.insertBefore(e,t)}#i(e){this.#e!==e&&(this.#s(),this.#e=this.#t(e))}#r(e){if(this.#e!==m&&I(this.#e)){let t=this.startNode.nextSibling;t.data=e}else this.#i(document.createTextNode(e));this.#e=e}#n(e){let{values:t,__dom_type__:r}=e,s=typeof r=="number"?this.#o(e):(r.el===void 0&&(r.el=Ae(r.h)),r);if(this.#e?.$template===s)this.#e.update(t);else{let n=new F(s,this),o=n.clone(this.options);n.update(t),this.#i(o),this.#e=n}}#o(e){let t=e.strings.join(),r=ge.get(t);return r===void 0&&(r=new Y(e,this.options),ge.set(t,r)),r}#l(e){te(this.#e)||(this.#e=[],this.#s());let t=this.#e,r=0,s;for(let n of e)r===t.length?t.push(s=new i(this.#t(O()),this.#t(O()),this,this.options)):s=t[r],s.$setValue(n),r++;r<t.length&&(this.#s(s&&s.endNode.nextSibling,r),t.length=r)}#s(e=this.startNode.nextSibling,t){for(;e&&e!==this.endNode;){let r=e.nextSibling;e.remove(),e=r}}#a(){let e=this.options.host,t=e.$events;for(let r in t){for(let s=-1,n;n=t[r][++s];)e.root.contains(n.el)||(n.el.removeEventListener(this.name,n.listener,n.options),t[r][s]=null);t[r]=t[r].filter(s=>s!==null)}}},S=class{type=ie;#e=m;constructor(e,t,r,s,n,o={}){this.element=e,this.name=t,this.decorates=s,this.$parent=n,this.options=o,(r.length>2||r[0]!==""||r[1]!=="")&&(this.#e=Array(r.length-1).fill(null),this.strings=r)}get tagName(){return this.element.tagName}$setValue(e,t){let r=this.strings,s=!1;if(typeof e=="function"&&(e=e(this.element)),r===void 0)s=!I(e)||e!==this.#e,s&&(this.#e=e);else{let n=e;e=r[0];for(let o=0;o<r.length-1;o++){let a=n[t+o];s||(s=!I(a)||a!==this.#e[o]),a===m?e=m:e!==m&&(e+=(a??"")+r[o+1]),this.#e[o]=a}}(s||this.name==="value")&&this.commitValue(e)}commitValue(e){let t=this.element,r=this.name,s=A[r];if(r==="ref"){this.options.host.$refs[e]=t;return}s?(t[s]=!(e===!1||e===null),t[s]?t.setAttribute(r,""):t.removeAttribute(r)):r==="value"?t.value=e:e==null?t.removeAttribute(r):t.setAttribute(r,e)}},Q=class extends S{constructor(...e){super(...e)}commitValue(e){this.element[this.name]=e}},Z=class extends S{constructor(...e){super(...e)}commitValue({type:e="fade",duration:t,custom:r,immediate:s=!1}={}){let n=this.element,o=T[e]||T.fade;r&&(o=r),n.$animate=function(a=!1){return P.call(this,t,o,a)},n.$animate.immediate=s}},J=class extends S{type=Be;#e=null;#t=g;#i=g;#r=g;constructor(...e){super(...e)}$setValue(e){let t=this.options.host,r=this.element,s=this.name,n={},o=t.$events[s]||[];if(this.decorates.length)for(let c of this.decorates)switch(c){case"stop":this.#i=l=>l.stopPropagation();break;case"prevent":this.#t=l=>l.preventDefault();break;case"self":this.#r=l=>l.target===r;break;case"capture":case"once":case"passive":n[c]=!0;break}let a=e!==this.#e;if(this.#e){for(let c=-1,l;l=o[++c];)if(l.el===r){a=a||n.capture!==l.capture||n.once!==l.once||n.passive!==l.passive,a&&(l.el.removeEventListener(s,l.listener,l.options),o[c]=null);break}}o=o.filter(c=>c!==null),t.$events[s]=o,e&&a&&(r.addEventListener(s,this,n),this.#e=e,o.push({el:r,listener:this,options:n}))}handleEvent(e){this.#i(e),this.#t(e),this.#r(e)!==!1&&this.#e.call(this.options.host,e)}},ee=class{type=re;constructor(e,t,r){this.element=e,this.$parent=t,this.options=r}$setValue(){}};function Ne(i,e,t={}){let r=e[H];return r===void 0&&(r=new U(e.insertBefore(O(),null),null,void 0,t),e[H]=r),r.$setValue(i,!0),r}function se(i,...e){return{__dom_type__:He,strings:i,values:e}}function We(i,e=[]){let t=e.length?i.split("%s"):[i];return t.raw=!0,se(t,...e)}function Xe(i,...e){return{__dom_type__:V,strings:i,values:e}}function $e(i,...e){try{i&&i.apply(this,e)}catch(t){console.error(t)}}function ct(i={}){let e="";for(let t in i)i[t]&&(e+=" "+t);return e.slice(1)}function ft(i={}){let e="";for(let t in i)(i[t]||i[t]===0)&&(e+=G(t)+":"+i[t]+";");return e}function ht(i,e="",t=""){return i?e:t}function ut(i,e=[],t=""){for(let[r,s]of e)if(i===r)return s;return t}function pt(i,e){let t=r=>{Function("o","v",`o.${i} = v`)(this,r.target.value),this.$requestUpdate()};return e&&!e.__live__&&(v(e,"input",t),this.$events.input??=[],this.$events.input.push({el:e,listener:t,options:!1}),e.__live__=!0),Function("o",`return o.${i}`)(this)}var we=class extends HTMLElement{static get observedAttributes(){let e=[];return this.finalize(),this.parseAnim(),this[$].forEach((t,r)=>{e.push(t.attrName)}),e.concat(this.watches||[],C)}static parseAnim(){if(this.hasOwnProperty("animation")){let{type:e="fade",duration:t,custom:r,immediate:s=!1}=this.animation,n=T[e]||T.fade;r&&(n=r),Object.defineProperty(this.prototype,"$animate",{value(o){if(this[w])return P.call(this,t,n,o)}}),this.prototype.$animate.immediate=s,delete this.animation}}static finalize(){if(this[B])return!1;if(this[B]=!0,this[$]=new Map,this.hasOwnProperty("props"))for(let e in this.props){if(e===C||e===oe)continue;let t=ae(this.props[e]),r=e.toLowerCase();t.attrName=r,A[r]?e=A[r]:(t.attrName=G(e),e=W(e)),this[$].set(e,t)}delete this.props}static reg(e="",t="wc"){let r=t+"-"+e;customElements.get(r)||customElements.define(r,this)}keepAlive=!1;removed=!1;constructor(){super(),this[k]=!1,this[w]=!1,this[y]=new Map,this.host=this,this.root=this.shadowRoot||this.attachShadow({mode:"open"}),this.root.ownHost=this,Object.defineProperty(this,"$refs",{value:Object.create(null)}),Object.defineProperty(this,"$events",{value:Object.create(null)});for(let[e,t]of this.constructor[$])this.#e(e,t),this[y].set(e,this[e]);b(e=>this.created())}#e(e,t){let r=Symbol(e),s;if(t.type===Array||t.type===Object){let n=this.#t(null,t,e);s={get(){return n},set(o){n=this.#t(M(o,t),t,e),this.$requestUpdate(e)}}}else s={get(){return this[r]},set(n){let o=this[r];n=M(n,t),o!==n&&(this[r]=n,this.$requestUpdate(e),$e.call(this,t.observer,n,o))}},this[r]=t.default;Object.defineProperty(this,e,s)}#t(e,t={},r){return new Proxy(e||t.default,{get:(s,n,o)=>{let a=Reflect.get(s,n,o);return typeof a=="object"?this.#t(a,{},r):a},set:(s,n,o,a)=>{let c=s[n];return Reflect.set(s,n,o,a),this.$requestUpdate(r),$e.call(this,t.observer,o,c),!0}})}#i(){for(let[e,t]of this[y])this.#n(e,t);this[y].clear(),this.$requestUpdate()}#r(e){return this.constructor[$].get(e)}connectedCallback(){this.$animate&&(this.style.display="none"),this.removed=!1,this.#i(),fe(this.root,this.constructor.styles)}disconnectedCallback(){if(this.keepAlive)b(e=>this.deactivated());else{if(this[w]=!1,!document.body?.contains(this)){let e=this.$events;if(e)for(let t in e){for(let r of e[t])L(r.el,t,r.listener,r.options);delete e[t]}this.removed=!0}b(e=>this.unmounted())}}attributeChangedCallback(e,t,r){if(t!==r){if(e===C){this.keepAlive=r!==null;return}this.#o(e,r,t)}}#n(e,t){let r=this.#r(e)||{},s=r.attrName;if(r.attribute===!1||r.type===null){this.removeAttribute(s);return}switch(r.type){case Number:case String:t===null?this.removeAttribute(s):this.setAttribute(s,t);break;case Boolean:t===null||t===!1?this.removeAttribute(s):this.setAttribute(s,"");break}}#o(e,t,r){let s=A[e],n,o;if(s&&(e=s),o=W(e),n=this.#r(o),n&&(t=M(t,n),n.attribute===!1||n.type===null)){if(t===null)return;if(t===this[o]){this.removeAttribute(e);return}}this[o]=t}$requestUpdate(e){e!==void 0&&(this[y].set(e,this[e]),this.#n(e,this[e])),this[k]===!1&&(this[k]=!0,b(t=>this.#l()))}#l(){let e=this[y];this.#c(),this.#s(e),this.#a()}#s(e){this[w]===!1?(this[w]=!0,this.$animate?.immediate&&this.$animate(),b(t=>{this.keepAlive&&this.activated(),this.mounted(),this.$requestUpdate()})):b(t=>this.updated(e))}#a(){this[y].clear(),this[k]=!1}#c(){try{let e=this.render();Ne(e,this.root,{host:this})}catch(e){console.error(e)}}created(){}mounted(){}activated(){}deactivated(){}unmounted(){}updated(){}render(){return se`<slot></slot>`}$on(e,t,r){return v(this,e,t,r)}$off(e,t,r){L(this,e,t,r)}$emit(e,t={},r=!1){return he(this,e,t,r)}};export{z as $,Re as $$,we as Component,v as bind,W as camelize,ct as classMap,Pe as clearOutsideClick,ke as css,he as fire,se as html,G as hyphen,pt as live,b as nextTick,Ce as offset,Me as outsideClick,Oe as range,We as raw,ft as styleMap,Xe as svg,L as unbind,ht as when,ut as which};