ranui/dist/router-BK6DEkcN.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { a, n, o as h, r as o, t as r } from "./utils-D1iZnChu.js";
import { t as l } from "./events-C59wGdni.js";
import { p as c } from "./factory-ZNhcQ4tf.js";
import { a as u, n as d } from "./ssr-DSGwPtEd.js";
import { useRouter as i } from "./utils/router.js";
var _ = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:block;width:100%}", p = class extends d {
  static get observedAttributes() {
    return [
      "mode",
      "base",
      "sheet"
    ];
  }
  _events = new l();
  _shadowDom;
  _slot;
  _currentPath = "";
  _core = null;
  constructor() {
    super(), this._shadowDom = n(this, _);
    const t = r(this._shadowDom, "slot", () => c().build());
    this._slot = t;
  }
  get mode() {
    return this.getAttribute("mode") === "hash" ? "hash" : "history";
  }
  get base() {
    return o(this, "base");
  }
  get sheet() {
    return o(this, "sheet");
  }
  set sheet(t) {
    a(this, "sheet", t);
  }
  handlerExternalCss = () => {
    h(this, this._shadowDom, "sheet", null, this.sheet);
  };
  _getPath() {
    if (this.mode === "hash") return window.location.hash.slice(1) || "/";
    const t = this.base, e = window.location.pathname;
    return t && e.startsWith(t) ? e.slice(t.length) || "/" : e;
  }
  navigate(t, e = !1) {
    if (this._core) {
      e ? this._core.replace(t) : this._core.push(t);
      return;
    }
    const s = this.mode === "hash" ? `#${t}` : this.base + t;
    e ? window.history.replaceState(null, "", s) : window.history.pushState(null, "", s), this._syncRoutes();
  }
  _syncRoutes() {
    const t = this._getPath();
    this._currentPath = t, this.querySelectorAll("r-route").forEach((e) => {
      typeof e._update == "function" && e._update(t);
    }), this.dispatchEvent(new CustomEvent("routechange", {
      detail: { path: t },
      bubbles: !0
    }));
  }
  _handlePopState = () => {
    this._core ? this._core._notify() : this._syncRoutes();
  };
  _handleNavigate = (t) => {
    const { path: e, replace: s } = t.detail;
    t.stopPropagation(), this.navigate(e, s);
  };
  connectedCallback() {
    this.handlerExternalCss(), this._events.on(window, "popstate", this._handlePopState), this._events.on(this, "ran-navigate", this._handleNavigate), this._events.on(this._slot, "slotchange", () => this._syncRoutes());
    const t = i();
    t && (this._core = t, t._bind(this)), this._syncRoutes(), typeof customElements < "u" && customElements.whenDefined("r-route").then(() => this._syncRoutes());
  }
  disconnectedCallback() {
    const t = i();
    t && t._unbind(this), this._core = null, this._events.abort();
  }
  attributeChangedCallback(t, e, s) {
    e !== s && t === "sheet" && this.handlerExternalCss();
  }
};
u("r-router", p);
export {
  p as t
};