agile-core/dist/core.es.js

Agile Core - A powerful component based micro front-end framework

import { createApp as e, defineComponent as t, useAttrs as n, shallowRef as o, ref as r, useSlots as i, onMounted as s, onUpdated as a, h as l } from "vue";
import { merge as u } from "ts-deepmerge";
var h, c;
const d = function() {
  try {
    return __AUI_CONFIG__;
  } catch (e2) {
    return { tagPrefix: "aui" };
  }
}().tagPrefix || "aui", p = "data-v-aui", m = "auix", f = Symbol("shadow");
const _AuiComponent = class _AuiComponent extends (c = HTMLElement, h = f, c) {
  constructor(e2) {
    super(), this.__hasVue__ = false, this[h] = { needHook: false, slot: {} }, this[_AuiComponent.shadowSymbol].options = e2 || {}, this.$initAttrs();
  }
  connectedCallback() {
    this.$needInit() && (this.$initVue(), this.$needHook(true));
  }
  set innerHTML(e2) {
    this.$needHook() ? this.$innerHTML("default", e2) : Reflect.set(HTMLElement.prototype, "innerHTML", e2, this);
  }
  get innerHTML() {
    return this.$needHook() ? this.$innerHTML("default") : Reflect.get(HTMLElement.prototype, "innerHTML", this) || "";
  }
  set textContent(e2) {
    this.$needHook() ? this.$textContent("default", e2) : Reflect.set(HTMLElement.prototype, "innerHTML", e2, this);
  }
  get textContent() {
    return this.$needHook() ? this.$textContent("default") : Reflect.get(HTMLElement.prototype, "innerHTML", this) || "";
  }
  set innerText(e2) {
    this.$ignoreLog("innerText"), Reflect.set(HTMLElement.prototype, "innerText", e2, this);
  }
  set value(e2) {
    let t2 = e2;
    const n2 = this[_AuiComponent.shadowSymbol].value;
    let o2;
    this.$isArrayValue() ? (t2 = _AuiComponent.$anyToArray(e2), o2 = JSON.stringify(t2)) : o2 = t2.toString(), n2 !== o2 && (this[_AuiComponent.shadowSymbol].value = o2, this[_AuiComponent.shadowSymbol].el && this.$attrChange("value"));
  }
  get value() {
    const e2 = this[_AuiComponent.shadowSymbol].value;
    return this.$isArrayValue() && "string" == typeof e2 ? JSON.parse(e2) : e2;
  }
  prepend(e2) {
    if (!this.$needHook()) return HTMLElement.prototype.prepend.call(this, e2);
    this.$prepend("default", e2);
  }
  appendChild(e2) {
    return this.$needHook() ? this.$appendChild("default", e2) : HTMLElement.prototype.appendChild.call(this, e2);
  }
  insertBefore(e2, t2) {
    return this.$needHook() ? this.$insertBefore("default", e2, t2) : HTMLElement.prototype.insertBefore.call(this, e2, t2);
  }
  hasAttribute(e2) {
    const t2 = this[_AuiComponent.shadowSymbol].el;
    return t2 ? t2.hasAttribute(e2) : HTMLElement.prototype.hasAttribute.call(this, e2);
  }
  setAttribute(e2, t2) {
    t2 = t2.toString();
    const n2 = this[_AuiComponent.shadowSymbol].el;
    if (n2) {
      if (n2.getAttribute(e2) === t2) return;
      n2.setAttribute(e2, t2);
    }
    this.$isShowProp(b.vueAttrName(e2)) && HTMLElement.prototype.setAttribute.call(this, e2, t2), "value" === e2 && n2 ? this.value = n2.getAttribute(e2) : this.$attrChange(e2);
  }
  getAttribute(e2) {
    const t2 = this[_AuiComponent.shadowSymbol].el;
    return t2 ? t2.getAttribute(e2) : super.getAttribute(e2);
  }
  removeAttribute(e2) {
    const t2 = this[_AuiComponent.shadowSymbol].el;
    t2 && t2.removeAttribute(e2);
    this.$isShowProp(b.vueAttrName(e2)) && HTMLElement.prototype.removeAttribute.call(this, e2), this.$attrChange(e2);
  }
  attributeChangedCallback(e2, t2, n2) {
    const o2 = this[_AuiComponent.shadowSymbol].el;
    o2 && t2 !== n2 && (this.$isShowProp(b.vueAttrName(e2)) || HTMLElement.prototype.removeAttribute.call(this, e2), o2.setAttribute(e2, n2 || ""), "value" !== e2 && this.$attrChange(e2));
  }
  static $anyToArray(e2) {
    let t2 = [];
    if ("string" == typeof e2) {
      try {
        const t3 = JSON.parse(e2);
        if (t3 instanceof Array) return t3;
      } catch (e3) {
      }
      t2 = e2.split(",").filter((e3) => !!e3 && e3.trim());
    } else e2 instanceof Array && (t2 = e2);
    return t2;
  }
  $resetShadowSymbol() {
    this[_AuiComponent.shadowSymbol] = { needHook: false, slot: {} };
  }
  $customEvent(e2, t2) {
    this.dispatchEvent(new CustomEvent(e2, Object.assign({ bubbles: false, composed: false, cancelable: true }, t2 || {})));
  }
  $forceUpdate() {
    let e2 = null;
    const t2 = this[_AuiComponent.shadowSymbol].slot;
    for (const n2 in t2) {
      const o2 = this.$slotCollection(t2[n2]);
      e2 || (e2 = {}), e2[n2] = o2;
    }
    e2 && (this[_AuiComponent.shadowSymbol].slotCollection = e2), this.$customEvent("aui-force-update");
  }
  $slotCollection(e2) {
    var _a;
    const { start: t2, end: n2 } = e2, o2 = [];
    let r2;
    for (; t2 && (r2 = t2.nextSibling) && r2 !== n2; ) (_a = t2.parentNode) == null ? void 0 : _a.removeChild(r2), o2.push(r2);
    return o2;
  }
  $slotReplace() {
    const e2 = this[_AuiComponent.shadowSymbol].slotCollection;
    if (e2) {
      delete this[_AuiComponent.shadowSymbol].slotCollection;
      for (const t2 in e2) {
        this.querySelector(`aui-slot[name="${t2}"]`).$replace(this), this.$replaceChildren(t2, e2[t2]);
      }
    }
  }
  $textContent(e2, ...t2) {
    if (0 === t2.length) {
      const t3 = [], { start: n2, end: o2 } = this.$slot(e2) || {};
      let r2 = n2;
      for (; r2 && (r2 = r2.nextSibling) && r2 !== o2; ) t3.push(r2.textContent);
      return t3.join("");
    }
    return this.$hasSlot() ? (this.$replaceChildren(e2, [document.createTextNode(t2[0] || "")]), "") : "";
  }
  $innerHTML(e2, ...t2) {
    if (0 === t2.length) {
      const t3 = [], { start: n2, end: o2 } = this.$slot(e2) || {};
      let r2 = n2;
      for (; r2 && (r2 = r2.nextSibling) && r2 !== o2; ) if (r2.outerHTML) t3.push(r2.outerHTML);
      else {
        let e3 = r2.textContent;
        r2 instanceof Comment && (e3 = `<!--${e3}-->`), t3.push(e3);
      }
      return t3.join("");
    }
    {
      if (!this.$hasSlot()) return "";
      const n2 = document.createElement("div");
      n2.innerHTML = t2[0] || "";
      const o2 = this.$moveChildren(n2);
      this.$replaceChildren(e2, o2.default);
    }
    return "";
  }
  $prepend(e2, t2) {
    var _a;
    const { start: n2 } = this.$slot(e2) || {};
    (_a = n2 == null ? void 0 : n2.parentNode) == null ? void 0 : _a.insertBefore(t2, n2.nextSibling);
  }
  $appendChild(e2, t2) {
    var _a;
    const { end: n2 } = this.$slot(e2) || {};
    return (_a = n2 == null ? void 0 : n2.parentNode) == null ? void 0 : _a.insertBefore(t2, n2), t2;
  }
  $insertBefore(e2, t2, n2) {
    const { start: o2 } = this.$slot(e2) || {}, r2 = (o2 == null ? void 0 : o2.parentNode) || this;
    return n2 ? r2 === this ? HTMLElement.prototype.insertBefore.call(this, t2, n2) : r2.insertBefore(t2, n2) : this.appendChild(t2), t2;
  }
  $childNodes(e2) {
    const t2 = [], { start: n2, end: o2 } = this.$slot(e2) || {};
    let r2 = n2;
    for (; r2 && (r2 = r2.nextSibling) && r2 !== o2; ) t2.push(r2);
    return t2;
  }
  $children(e2) {
    const t2 = [], { start: n2, end: o2 } = this.$slot(e2) || {};
    let r2 = n2;
    for (; r2 && (r2 = r2.nextSibling) && r2 !== o2; ) r2 instanceof HTMLElement && t2.push(r2);
    return t2;
  }
  $replaceChildren(e2, t2) {
    var _a, _b;
    const { start: n2, end: o2 } = this.$slot(e2) || {};
    let r2 = null;
    for (; n2 && (r2 = n2.nextSibling) && r2 !== o2; ) (_a = r2.parentNode) == null ? void 0 : _a.removeChild(r2);
    if (o2) for (; r2 = t2.shift(); ) (_b = o2.parentNode) == null ? void 0 : _b.insertBefore(r2, o2);
  }
  $slot(e2, t2) {
    if (e2 = e2 || "default", !t2) return this[_AuiComponent.shadowSymbol].slot[e2];
    this[_AuiComponent.shadowSymbol].slot[e2] = t2;
  }
  $hasSlot() {
    return Object.keys(this[_AuiComponent.shadowSymbol].slot).length > 0;
  }
  $needHook(e2) {
    return "boolean" == typeof e2 && (this[_AuiComponent.shadowSymbol].needHook = e2), this[_AuiComponent.shadowSymbol].needHook;
  }
  $ignoreLog(e2) {
  }
  $moveChildren(e2) {
    var _a;
    const t2 = (e2 = e2 || this).childNodes, n2 = { default: [] };
    for (; t2.length > 0; ) {
      const o2 = t2[0];
      if ((_a = o2.parentNode) == null ? void 0 : _a.removeChild(o2), $.$isForAuiSlot(o2)) {
        const t3 = o2.getAttribute("for") || "default";
        n2[t3] = n2[t3] || [];
        const r2 = Array.prototype.slice.call(o2.childNodes);
        $.prototype.$bind.call(o2, e2), n2[t3].push(...r2);
      } else n2.default.push(o2);
    }
    return n2;
  }
  $isArrayValue() {
    var _a;
    return ((_a = this[_AuiComponent.shadowSymbol].options) == null ? void 0 : _a.valueType) === Array;
  }
  $attrChange(e2) {
    if ("value" === e2) {
      const e3 = this.value;
      HTMLElement.prototype.hasAttribute.call(this, p) ? this.$call("$emit", "update:value", e3) : this.$customEvent("input", { bubbles: true, composed: true });
    }
    this.$customEvent("aui-attr-change", { bubbles: true, composed: true, detail: { attributeName: b.vueAttrName(e2) } });
  }
  $initAttrs() {
    const e2 = this.attributes, t2 = document.createElement("div");
    for (let n2 = 0; n2 < e2.length; n2++) {
      const o2 = e2[n2];
      t2.setAttribute(o2.name, o2.value), this.$isShowProp(b.vueAttrName(o2.name)) || HTMLElement.prototype.removeAttribute.call(this, o2.name), "value" === o2.name && (this.value = o2.value);
    }
    Object.defineProperty(this, "attributes", { get value() {
      return t2.attributes;
    }, writable: false }), this[_AuiComponent.shadowSymbol].el = t2;
  }
  $isShowProp(e2) {
    if (b.isVueAttr(e2)) return true;
    const t2 = this.$getProp(e2), n2 = t2 == null ? void 0 : t2.show;
    return n2;
  }
  $getProp(e2) {
    var _a;
    const t2 = b.cache.getAuiVueDefined(this.tagName);
    return (((_a = t2 == null ? void 0 : t2.origin) == null ? void 0 : _a.props) || {})[e2];
  }
  $initVue() {
    if (this.__hasVue__) return;
    this.__hasVue__ = true;
    const t2 = this.tagName.toLowerCase();
    b.cache.getAuiVueDefined(t2) && e(b.createVueComponent(t2, this)).mount(this);
  }
  $needInit() {
    return !HTMLElement.prototype.hasAttribute.call(this, p);
  }
  $bindVue(e2) {
    var _a, _b;
    if (this[_AuiComponent.shadowSymbol].ref) return;
    this[_AuiComponent.shadowSymbol].ref = e2, this.__hasVue__ = true, this.$customEvent("aui-init", { bubbles: false, detail: { code: 0 } });
    const t2 = (_b = (_a = b.cache.getAuiVueDefined(this.tagName)) == null ? void 0 : _a.origin) == null ? void 0 : _b.auiInit;
    t2 && t2.call(e2);
  }
  $call(e2, ...t2) {
    const n2 = this[_AuiComponent.shadowSymbol].ref;
    return b.$call(n2, e2, ...t2);
  }
};
_AuiComponent.shadowSymbol = f;
let AuiComponent = _AuiComponent;
class $ extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.style.display = "none";
  }
  set textContent(e2) {
    var _a;
    this._name_ ? (_a = this._el_) == null ? void 0 : _a.$textContent(this._name_, e2) : Reflect.set(HTMLElement.prototype, "textContent", e2, this);
  }
  set innerHTML(e2) {
    var _a;
    this._name_ ? (_a = this._el_) == null ? void 0 : _a.$innerHTML(this._name_, e2) : Reflect.set(HTMLElement.prototype, "innerHTML", e2, this);
  }
  prepend(e2) {
    var _a;
    this._name_ ? (_a = this._el_) == null ? void 0 : _a.$prepend(this._name_, e2) : HTMLElement.prototype.prepend.call(this, e2);
  }
  appendChild(e2) {
    var _a;
    return this._name_ ? ((_a = this._el_) == null ? void 0 : _a.$appendChild(this._name_, e2), e2) : HTMLElement.prototype.appendChild.call(this, e2);
  }
  static $isAuiSlot(e2) {
    return !(!e2 || e2.nodeType !== Node.ELEMENT_NODE) && "aui-slot" === e2.tagName.toLowerCase();
  }
  static $isForAuiSlot(e2) {
    return !(!$.$isAuiSlot(e2) || !e2.hasAttribute("for"));
  }
  $bind(e2) {
    this._el_ = e2, this._name_ = this.getAttribute("for") || "default";
  }
  $replace(e2) {
    const t2 = this.getAttribute("name") || "default", n2 = document.createComment(`aui-slot-${t2}-start`), o2 = document.createComment(`aui-slot-${t2}-end`);
    e2.$slot(t2, { start: n2, end: o2 }), this.$replaceWith(n2, o2);
  }
  $replaceWith(...e2) {
    var _a;
    e2.forEach((e3) => {
      var _a2;
      (_a2 = this.parentNode) == null ? void 0 : _a2.insertBefore(e3, this);
    }), (_a = this.parentNode) == null ? void 0 : _a.removeChild(this);
  }
}
const b = { init: () => (b.defineSlot(), b), defineSlot() {
  b.defineCustomElement("aui-slot", $);
}, $call(e2, t2, ...n2) {
  if (!e2) return new Error("not init");
  if (!t2) return e2;
  if ("function" == typeof e2[t2]) return e2[t2].call(e2, ...n2);
  const o2 = t2.split(".");
  let r2 = e2, i2 = null;
  const s2 = o2.pop() || "";
  for (; i2 = o2.shift(); ) {
    if (!Object.prototype.hasOwnProperty.call(r2, i2)) return new Error("no match name");
    r2 = r2[i2];
  }
  return 0 === n2.length ? r2[s2] : (r2[s2] = n2[0], null);
}, formatName: (e2) => e2 ? (e2 = e2.replace(/[A-Z]/g, function(e3) {
  return "-" + e3.toLowerCase();
}), d + e2) : "", cache: { defined: {}, getAuiVueDefined: (e2) => (e2 = e2.toLowerCase(), b.cache.defined[e2]), getAuiPropNames(e2) {
  var _a;
  const t2 = b.cache.getAuiVueDefined(e2), n2 = ((_a = t2 == null ? void 0 : t2.origin) == null ? void 0 : _a.props) || {}, o2 = [];
  for (const e3 in n2) o2.push(b.auiAttrName(e3));
  return -1 === o2.indexOf(m) && o2.push(m), o2;
}, addHooks(e2, t2) {
  e2 = e2.toLowerCase();
  const n2 = b.cache.getAuiVueDefined(e2);
  n2 ? (n2.hooks = n2.hooks || [], n2.hooks.push(t2)) : b.cache.defined[e2] = { hooks: [t2] };
} }, createExtendComp: (e2) => {
  var _a, _b;
  return t({ props: { [m]: { type: String }, value: { type: ((_b = (_a = e2.props) == null ? void 0 : _a.value) == null ? void 0 : _b.type) || [String, Number, Array] } }, methods: { $anyToArray: AuiComponent.$anyToArray, $value(...e3) {
    const t2 = this.$aui();
    if (0 === e3.length) return t2 == null ? void 0 : t2.value;
    t2 && (t2.value = e3[0]);
  }, $call(e3, ...t2) {
    const n2 = this.$aui();
    return n2 ? b.$call(n2, e3, ...t2) : null;
  }, $aui() {
    var _a2;
    return (_a2 = this.$el) == null ? void 0 : _a2.parentNode;
  } }, data: () => ({}) });
}, patchDefaultProps(e2) {
  var _a, _b;
  const t2 = (_b = (_a = e2.props) == null ? void 0 : _a.value) == null ? void 0 : _b.type;
  return e2.mixins || (e2.mixins = []), e2.mixins.push(b.createExtendComp(e2)), t2;
}, defineAuiComponent(e2, t2, n2) {
  var _a, _b;
  const o2 = b.patchDefaultProps(n2);
  if ((_a = b.cache.defined[e2]) == null ? void 0 : _a.origin) b.cache.defined[e2].origin = n2;
  else {
    class r2 extends AuiComponent {
      constructor() {
        super({ valueType: o2 });
      }
      static get observedAttributes() {
        return b.cache.getAuiPropNames(e2);
      }
    }
    b.cache.defined[e2] = { aui: r2, vue: t2, origin: n2, hooks: ((_b = b.cache.defined[e2]) == null ? void 0 : _b.hooks) || [] }, b.defineCustomElement(e2, r2);
  }
}, defineCustomElement(e2, t2) {
  try {
    customElements.define(e2, t2);
  } catch (e3) {
  }
}, sameComponent(e2, t2) {
  if (!Object.prototype.hasOwnProperty.call(t2, "__hmrId")) return false;
  const n2 = b.cache.getAuiVueDefined(e2), o2 = n2 == null ? void 0 : n2.origin;
  return !!o2 && t2.__hmrId === o2.__hmrId;
}, notifyComponentUpdate(e2) {
  document.querySelectorAll(e2).forEach((e3) => {
    e3.$forceUpdate();
  });
}, define(e2, t2 = true) {
  const n2 = b.formatName(e2.name);
  if (!n2) return e2;
  const o2 = b.cache.getAuiVueDefined(n2);
  if (o2 && o2.vue) return (t2 || b.sameComponent(n2, e2)) && (b.defineAuiComponent(n2, o2.vue, e2), b.notifyComponentUpdate(n2)), o2.vue;
  const r2 = b.createVueComponent(n2);
  return b.defineAuiComponent(n2, r2, e2), r2;
}, createTempSlot(e2) {
  const t2 = {};
  return Object.keys(e2).forEach((e3) => {
    t2[e3] = () => l("aui-slot", { name: e3 });
  }), t2;
}, replaceTempSlot(e2, t2) {
  Object.keys(t2).forEach((n2) => {
    const o2 = e2.querySelector(`aui-slot[name="${n2}"]`);
    o2 && ($.prototype.$replace.call(o2, e2), e2.$replaceChildren(n2, t2[n2]));
  });
}, createVueComponent(e2, t2) {
  const u2 = t2 ? t2.$moveChildren() : { default: [] };
  return { setup() {
    const h2 = n(), c2 = o(null), d2 = o(null), m2 = r({}), f2 = o(t2 ? b.createTempSlot(u2) : i()), $2 = o(null);
    return s(() => {
      c2.value && d2.value && d2.value.$bindVue && (d2.value.$bindVue(c2.value), t2 && b.replaceTempSlot(t2, u2), d2.value.addEventListener("aui-attr-change", () => {
        d2.value && (m2.value = b.getAuiAttrs(d2.value));
      }), d2.value.addEventListener("aui-force-update", () => {
        $2.value = null;
      }), d2.value.$call("$emit", "update:value", d2.value.value));
    }), a(() => {
      d2.value && d2.value.$slotReplace();
    }), () => {
      if (t2 && (d2.value = t2, m2.value = b.getAuiAttrs(t2)), $2.value || ($2.value = b.formatStructure(e2)), !$2.value) return null;
      const n2 = l($2.value, { ...h2, ...m2.value, ref: c2 }, f2.value || {});
      return t2 ? n2 : l(e2, { ref: d2, [p]: "" }, [n2]);
    };
  } };
}, getAuiAttrs(e2) {
  const t2 = {}, n2 = e2.attributes;
  for (let e3 = 0; e3 < n2.length; e3++) {
    const o2 = n2[e3];
    o2.name === d || b.isVueAttr(o2.name) || (t2[o2.name] = o2.value);
  }
  return null !== e2.value && (t2.value = e2.value), t2;
}, isVueAttr: (e2) => 0 === e2.indexOf("data-v-"), auiAttrName: (e2) => e2.replace(/([A-Z])/g, (e3) => "-" + e3.toLowerCase()), vueAttrName: (e2) => b.isVueAttr(e2) ? e2 : e2.replace(/-([a-z])/g, (e3, t2) => t2.toUpperCase()), hookStructure(e2, t2) {
  b.cache.addHooks(e2, t2);
}, getHookStructure(e2) {
  const t2 = b.cache.getAuiVueDefined(e2);
  return ((t2 == null ? void 0 : t2.hooks) || []).slice(0);
}, formatStructure(e2) {
  const t2 = b.cache.getAuiVueDefined(e2);
  if (!(t2 == null ? void 0 : t2.origin)) return null;
  let n2 = u({}, t2.origin);
  const o2 = b.getHookStructure(e2);
  let r2;
  for (; r2 = o2.shift(); ) {
    const e3 = r2(n2);
    e3 && (n2 = e3);
  }
  return n2;
} }, y = b.init();
export {
  AuiComponent,
  $ as AuiSlot,
  y as default
};
//# sourceMappingURL=core.es.js.map