agile-core
Version:
Agile Core - A powerful component based micro front-end framework
2 lines (1 loc) • 11.9 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("ts-deepmerge");var n,r;const o=__AUI_CONFIG__.tagPrefix||"aui",i="data-v-aui",s="auix",l=Symbol("shadow"),a=class t extends(r=HTMLElement,n=l,r){constructor(e){super(),this.__hasVue__=!1,this[n]={needHook:!1,slot:{}},this[t.shadowSymbol].options=e||{},this.$initAttrs()}connectedCallback(){this.$needInit()&&(this.$needHook(!0),this.$initVue())}set textContent(e){this.$needHook()?this.$textContent(e):super.textContent=e}get textContent(){return this.$needHook()?this.$textContent("default"):super.textContent||""}set innerHTML(e){this.$needHook()?this.$innerHTML(e):super.innerHTML=e}get innerHTML(){return this.$needHook()?this.$innerHTML("default"):super.innerHTML||""}set innerText(e){this.$ignoreLog("innerText"),super.innerText=e}prepend(e){if(!this.$needHook())return super.prepend(e);this.$prepend("default",e)}appendChild(e){return this.$needHook()?this.$appendChild("default",e):super.appendChild(e)}set value(e){let n=e;const r=this[t.shadowSymbol].value;let o;this.$isArrayValue()?(n=t.$anyToArray(e),o=JSON.stringify(n)):o=n.toString(),r!==o&&(this[t.shadowSymbol].value=o,this[t.shadowSymbol].el&&this.$attrChange("value"))}get value(){const e=this[t.shadowSymbol].value;return this.$isArrayValue()&&"string"==typeof e?JSON.parse(e):e}hasAttribute(e){const n=this[t.shadowSymbol].el;return n?n.hasAttribute(e):super.hasAttribute(e)}setAttribute(e,n){n=n.toString();const r=this[t.shadowSymbol].el;if(r){if(r.getAttribute(e)===n)return;r.setAttribute(e,n)}this.$isShowProp(c.vueAttrName(e))&&super.setAttribute(e,n),"value"===e&&r?this.value=r.getAttribute(e):this.$attrChange(e)}getAttribute(e){const n=this[t.shadowSymbol].el;return n?n.getAttribute(e):super.getAttribute(e)}removeAttribute(e){const n=this[t.shadowSymbol].el;n&&n.removeAttribute(e),this.$isShowProp(c.vueAttrName(e))&&super.removeAttribute(e),this.$attrChange(e)}attributeChangedCallback(e,n,r){const o=this[t.shadowSymbol].el;o&&n!==r&&(this.$isShowProp(c.vueAttrName(e))||super.removeAttribute(e),o.setAttribute(e,r||""),"value"!==e&&this.$attrChange(e))}static $anyToArray(e){let t=[];if("string"==typeof e){try{const t=JSON.parse(e);if(t instanceof Array)return t}catch(n){}t=e.split(",").filter(e=>!!e&&e.trim())}else e instanceof Array&&(t=e);return t}$customEvent(e,t){this.dispatchEvent(new CustomEvent(e,Object.assign({bubbles:!1,composed:!1,cancelable:!0},t||{})))}$forceUpdate(){let e=null;const n=this[t.shadowSymbol].slot;for(const t in n){const r=this.$slotCollection(n[t]);e||(e={}),e[t]=r}e&&(this[t.shadowSymbol].slotCollection=e),this.$customEvent("aui-force-update")}$slotCollection(e){var t;const{start:n,end:r}=e,o=[];let i;for(;n&&(i=n.nextSibling)&&i!==r;)null==(t=n.parentNode)||t.removeChild(i),o.push(i);return o}$slotReplace(){const e=this[t.shadowSymbol].slotCollection;if(e){delete this[t.shadowSymbol].slotCollection;for(const t in e)this.querySelector(`aui-slot[name="${t}"]`).$replace(this),this.$replaceChildren(t,e[t])}}$textContent(e,...t){if(0===t.length){const t=[],{start:n,end:r}=this.$slot(e)||{};let o=n;for(;o&&(o=o.nextSibling)&&o!==r;)t.push(o.textContent);return t.join("")}return this.$replaceChildren(e,[document.createTextNode(t[0]||"")]),""}$innerHTML(e,...t){if(0===t.length){const t=[],{start:n,end:r}=this.$slot(e)||{};let o=n;for(;o&&(o=o.nextSibling)&&o!==r;)if(o.outerHTML)t.push(o.outerHTML);else{let e=o.textContent;o instanceof Comment&&(e=`\x3c!--${e}--\x3e`),t.push(e)}return t.join("")}{const n=document.createElement("div");n.innerHTML=t[0]||"";const r=this.$moveChildren(n);this.$replaceChildren(e,r.default)}return""}$prepend(e,t){var n;const{start:r}=this.$slot(e)||{};null==(n=null==r?void 0:r.parentNode)||n.insertBefore(t,r.nextSibling)}$appendChild(e,t){var n;const{end:r}=this.$slot(e)||{};return null==(n=null==r?void 0:r.parentNode)||n.insertBefore(t,r),t}$childNodes(e){const t=[],{start:n,end:r}=this.$slot(e)||{};let o=n;for(;o&&(o=o.nextSibling)&&o!==r;)t.push(o);return t}$children(e){const t=[],{start:n,end:r}=this.$slot(e)||{};let o=n;for(;o&&(o=o.nextSibling)&&o!==r;)o instanceof HTMLElement&&t.push(o);return t}$replaceChildren(e,t){var n,r;const{start:o,end:i}=this.$slot(e)||{};let s=null;for(;o&&(s=o.nextSibling)&&s!==i;)null==(n=s.parentNode)||n.removeChild(s);if(i)for(;s=t.shift();)null==(r=i.parentNode)||r.insertBefore(s,i)}$slot(e,n){if(e=e||"default",!n)return this[t.shadowSymbol].slot[e];this[t.shadowSymbol].slot[e]=n}$needHook(e){return"boolean"==typeof e&&(this[t.shadowSymbol].needHook=e),this[t.shadowSymbol].needHook}$ignoreLog(e){}$moveChildren(e){var t;const n=(e=e||this).childNodes,r={default:[]};for(;n.length>0;){const o=n[0];if(null==(t=o.parentNode)||t.removeChild(o),h.$isForAuiSlot(o)){const t=o.getAttribute("for")||"default";r[t]=r[t]||[];const n=Array.prototype.slice.call(o.childNodes);h.prototype.$bind.call(o,e),r[t].push(...n)}else r.default.push(o)}return r}$isArrayValue(){var e;return(null==(e=this[t.shadowSymbol].options)?void 0:e.valueType)===Array}$attrChange(e){if("value"===e){const e=this.value;super.hasAttribute(i)?this.$call("$emit","update:value",e):this.$customEvent("input",{bubbles:!0,composed:!0})}this.$customEvent("aui-attr-change",{bubbles:!0,composed:!0,detail:{attributeName:c.vueAttrName(e)}})}$initAttrs(){const e=this.attributes,n=document.createElement("div");for(let t=0;t<e.length;t++){const r=e[t];n.setAttribute(r.name,r.value),this.$isShowProp(c.vueAttrName(r.name))||super.removeAttribute(r.name),"value"===r.name&&(this.value=r.value)}Object.defineProperty(this,"attributes",{get value(){return n.attributes},writable:!1}),this[t.shadowSymbol].el=n}$isShowProp(e){if(c.isVueAttr(e))return!0;const t=this.$getProp(e);return null==t?void 0:t.show}$getProp(e){var t;const n=c.cache.getAuiVueDefined(this.tagName);return((null==(t=null==n?void 0:n.origin)?void 0:t.props)||{})[e]}$initVue(){if(this.__hasVue__)return;this.__hasVue__=!0;const t=this.tagName.toLowerCase();c.cache.getAuiVueDefined(t)&&e.createApp(c.createVueComponent(t,this)).mount(this)}$needInit(){return!super.hasAttribute(i)}$bindVue(e){var n,r;if(this[t.shadowSymbol].ref)return;this[t.shadowSymbol].ref=e,this.__hasVue__=!0,this.$customEvent("aui-init",{bubbles:!1,detail:{code:0}});const o=null==(r=null==(n=c.cache.getAuiVueDefined(this.tagName))?void 0:n.origin)?void 0:r.auiInit;o&&o.call(e)}$call(e,...n){const r=this[t.shadowSymbol].ref;return c.$call(r,e,...n)}};a.shadowSymbol=l;let u=a;class h extends HTMLElement{constructor(){super()}connectedCallback(){this.style.display="none"}set textContent(e){var t;this._name_?null==(t=this._el_)||t.$textContent(this._name_,e):super.textContent=e}set innerHTML(e){var t;this._name_?null==(t=this._el_)||t.$innerHTML(this._name_,e):super.innerHTML=e}prepend(e){var t;this._name_?null==(t=this._el_)||t.$prepend(this._name_,e):super.prepend(e)}appendChild(e){var t;return this._name_?(null==(t=this._el_)||t.$appendChild(this._name_,e),e):super.appendChild(e)}static $isAuiSlot(e){return!(!e||e.nodeType!==Node.ELEMENT_NODE)&&"aui-slot"===e.tagName.toLowerCase()}static $isForAuiSlot(e){return!(!h.$isAuiSlot(e)||!e.hasAttribute("for"))}$bind(e){this._el_=e,this._name_=this.getAttribute("for")||"default"}$replace(e){const t=this.getAttribute("name")||"default",n=document.createComment(`aui-slot-${t}-start`),r=document.createComment(`aui-slot-${t}-end`);e.$slot(t,{start:n,end:r}),this.replaceWith(n,r)}}const c={init:()=>(c.defineSlot(),c),defineSlot(){c.defineCustomElement("aui-slot",h)},$call(e,t,...n){if(!e)return new Error("not init");if(!t)return e;if("function"==typeof e[t])return e[t].call(e,...n);const r=t.split(".");let o=e,i=r.pop()||"",s=null;for(;s=r.shift();){if(!Object.prototype.hasOwnProperty.call(o,s))return new Error("no match name");o=o[s]}return 0===n.length?o[i]:(o[i]=n[0],null)},formatName:e=>e?(e=e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()}),o+e):"",cache:{defined:{},getAuiVueDefined:e=>(e=e.toLowerCase(),c.cache.defined[e]),getAuiPropNames(e){var t;const n=c.cache.getAuiVueDefined(e),r=(null==(t=null==n?void 0:n.origin)?void 0:t.props)||{},o=[];for(const i in r)o.push(c.auiAttrName(i));return-1===o.indexOf(s)&&o.push(s),o},addHooks(e,t){e=e.toLowerCase();const n=c.cache.getAuiVueDefined(e);n?(n.hooks=n.hooks||[],n.hooks.push(t)):c.cache.defined[e]={hooks:[t]}}},createExtendComp:t=>{var n,r;return e.defineComponent({props:{[s]:{type:String},value:{type:(null==(r=null==(n=t.props)?void 0:n.value)?void 0:r.type)||[String,Number,Array]}},methods:{$anyToArray:u.$anyToArray,$value(...e){const t=this.$aui();if(0===e.length)return null==t?void 0:t.value;t&&(t.value=e[0])},$call(e,...t){const n=this.$aui();return n?c.$call(n,e,...t):null},$aui(){var e;return null==(e=this.$el)?void 0:e.parentNode}},data:()=>({})})},patchDefaultProps(e){var t,n;const r=null==(n=null==(t=e.props)?void 0:t.value)?void 0:n.type;return e.mixins||(e.mixins=[]),e.mixins.push(c.createExtendComp(e)),r},defineAuiComponent(e,t,n){var r,o;const i=c.patchDefaultProps(n);if(null==(r=c.cache.defined[e])?void 0:r.origin)c.cache.defined[e].origin=n;else{class r extends u{constructor(){super({valueType:i})}static get observedAttributes(){return c.cache.getAuiPropNames(e)}}c.cache.defined[e]={aui:r,vue:t,origin:n,hooks:(null==(o=c.cache.defined[e])?void 0:o.hooks)||[]},c.defineCustomElement(e,r)}},defineCustomElement(e,t){try{customElements.define(e,t)}catch(n){}},sameComponent(e,t){if(!Object.prototype.hasOwnProperty.call(t,"__hmrId"))return!1;const n=c.cache.getAuiVueDefined(e),r=null==n?void 0:n.origin;return!!r&&t.__hmrId===r.__hmrId},notifyComponentUpdate(e){document.querySelectorAll(e).forEach(e=>{e.$forceUpdate()})},define(e,t=!0){const n=c.formatName(e.name);if(!n)return e;const r=c.cache.getAuiVueDefined(n);if(r&&r.vue)return(t||c.sameComponent(n,e))&&(c.defineAuiComponent(n,r.vue,e),c.notifyComponentUpdate(n)),r.vue;const o=c.createVueComponent(n);return c.defineAuiComponent(n,o,e),o},createTempSlot(t){const n={};return Object.keys(t).forEach(t=>{n[t]=()=>e.h("aui-slot",{name:t})}),n},replaceTempSlot(e,t){Object.keys(t).forEach(n=>{const r=e.querySelector(`aui-slot[name="${n}"]`);r&&(h.prototype.$replace.call(r,e),e.$replaceChildren(n,t[n]))})},createVueComponent(t,n){const r=n?n.$moveChildren():{default:[]};return{setup(){const o=e.useAttrs(),s=e.shallowRef(null),l=e.shallowRef(null),a=e.ref({}),u=e.shallowRef(n?c.createTempSlot(r):e.useSlots()),h=e.shallowRef(null);return e.onMounted(()=>{s.value&&l.value&&l.value.$bindVue&&(l.value.$bindVue(s.value),n&&c.replaceTempSlot(n,r),l.value.addEventListener("aui-attr-change",()=>{l.value&&(a.value=c.getAuiAttrs(l.value))}),l.value.addEventListener("aui-force-update",()=>{h.value=null}),l.value.$call("$emit","update:value",l.value.value))}),e.onUpdated(()=>{l.value&&l.value.$slotReplace()}),()=>{if(n&&(l.value=n,a.value=c.getAuiAttrs(n)),h.value||(h.value=c.formatStructure(t)),!h.value)return null;const r=e.h(h.value,{...o,...a.value,ref:s},u.value||{});return n?r:e.h(t,{ref:l,[i]:""},[r])}}}},getAuiAttrs(e){const t={},n=e.attributes;for(let r=0;r<n.length;r++){const e=n[r];e.name===o||c.isVueAttr(e.name)||(t[e.name]=e.value)}return null!==e.value&&(t.value=e.value),t},isVueAttr:e=>0===e.indexOf("data-v-"),auiAttrName:e=>e.replace(/([A-Z])/g,e=>"-"+e.toLowerCase()),vueAttrName:e=>c.isVueAttr(e)?e:e.replace(/-([a-z])/g,(e,t)=>t.toUpperCase()),hookStructure(e,t){c.cache.addHooks(e,t)},getHookStructure(e){const t=c.cache.getAuiVueDefined(e);return((null==t?void 0:t.hooks)||[]).slice(0)},formatStructure(e){const n=c.cache.getAuiVueDefined(e);if(!(null==n?void 0:n.origin))return null;let r=t.merge({},n.origin);const o=c.getHookStructure(e);let i;for(;i=o.shift();){const e=i(r);e&&(r=e)}return r}},d=c.init();exports.AuiComponent=u,exports.default=d;//# sourceMappingURL=core.cjs.js.map