ranui 0.1.10-alpha.9 → 0.2.0-alpha.0

package/dist/route-BY_E6-2C.js

@@ -0,0 +1,88 @@
+import { c as p, d as l, l as o, s as d, u as n } from "./utils-D4pPF77E.js";
+import { t as m } from "./events-C59wGdni.js";
+import { p as f } from "./factory-BdsO0dEW.js";
+import { a as _, n as b } from "./ssr-DSGwPtEd.js";
+import { getSSGPath as g } from "./utils/router.js";
+var v = ".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}:host([hidden]){display:none!important}", w = class extends b {
+  static get observedAttributes() {
+    return [
+      "path",
+      "exact",
+      "sheet"
+    ];
+  }
+  _events = new m();
+  _shadowDom;
+  _params = {};
+  constructor() {
+    super(), this._shadowDom = p(this, v), d(this._shadowDom, "slot", () => f().build());
+  }
+  get path() {
+    return o(this, "path", "/");
+  }
+  set path(t) {
+    n(this, "path", t);
+  }
+  get exact() {
+    return this.hasAttribute("exact");
+  }
+  get params() {
+    return { ...this._params };
+  }
+  get sheet() {
+    return o(this, "sheet");
+  }
+  set sheet(t) {
+    n(this, "sheet", t);
+  }
+  handlerExternalCss = () => {
+    l(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  _matchPath(t) {
+    const s = this.path, e = {}, r = [], h = s.split("/").map((a) => a.startsWith(":") ? (r.push(a.slice(1)), "([^/]+)") : a === "*" ? "(.*)" : a.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("/"), c = this.exact ? new RegExp(`^${h}$`) : new RegExp(`^${h}(?:/.*)?$`), i = t.match(c);
+    return i ? (r.forEach((a, u) => {
+      e[a] = decodeURIComponent(i[u + 1] ?? "");
+    }), {
+      matched: !0,
+      params: e
+    }) : {
+      matched: !1,
+      params: e
+    };
+  }
+  _update(t) {
+    const { matched: s, params: e } = this._matchPath(t);
+    this._params = e, this.hidden = !s, s && this.dispatchEvent(new CustomEvent("routematch", {
+      detail: {
+        path: t,
+        params: e
+      },
+      bubbles: !0
+    }));
+  }
+  _preSerialize() {
+    const t = g();
+    t !== null && this._update(t);
+  }
+  connectedCallback() {
+    this.handlerExternalCss();
+    const t = this.closest("r-router");
+    t && t._currentPath && this._update(t._currentPath);
+  }
+  disconnectedCallback() {
+    this._events.abort();
+  }
+  attributeChangedCallback(t, s, e) {
+    if (s !== e) {
+      if (t === "path" || t === "exact") {
+        const r = this.closest("r-router");
+        r && this._update(r._currentPath);
+      }
+      t === "sheet" && this.handlerExternalCss();
+    }
+  }
+};
+_("r-route", w);
+export {
+  w as t
+};

package/dist/route.js

@@ -0,0 +1,6 @@
+import "./utils/router.js";
+import { t as r } from "./route-BY_E6-2C.js";
+export {
+  r as Route,
+  r as default
+};

package/dist/router-BDcv4F-2.js

@@ -0,0 +1,79 @@
+import { c as i, d as n, l as a, s as h, u as r } from "./utils-D4pPF77E.js";
+import { t as l } from "./events-C59wGdni.js";
+import { p as u } from "./factory-BdsO0dEW.js";
+import { a as c, n as d } from "./ssr-DSGwPtEd.js";
+import { useRouter as o } from "./utils/router.js";
+var p = ".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%}", _ = class extends d {
+  static get observedAttributes() {
+    return [
+      "mode",
+      "base",
+      "sheet"
+    ];
+  }
+  _events = new l();
+  _shadowDom;
+  _slot;
+  _currentPath = "";
+  constructor() {
+    super(), this._shadowDom = i(this, p);
+    const t = h(this._shadowDom, "slot", () => u().build());
+    this._slot = t;
+  }
+  get mode() {
+    return this.getAttribute("mode") === "hash" ? "hash" : "history";
+  }
+  get base() {
+    return a(this, "base");
+  }
+  get sheet() {
+    return a(this, "sheet");
+  }
+  set sheet(t) {
+    r(this, "sheet", t);
+  }
+  handlerExternalCss = () => {
+    n(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) {
+    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._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 = o();
+    t && t._bind(this), this._syncRoutes(), typeof customElements < "u" && customElements.whenDefined("r-route").then(() => this._syncRoutes());
+  }
+  disconnectedCallback() {
+    const t = o();
+    t && t._unbind(this), this._events.abort();
+  }
+  attributeChangedCallback(t, e, s) {
+    e !== s && t === "sheet" && this.handlerExternalCss();
+  }
+};
+c("r-router", _);
+export {
+  _ as t
+};

package/dist/router.js

@@ -0,0 +1,6 @@
+import { t as o } from "./router-BDcv4F-2.js";
+import "./utils/router.js";
+export {
+  o as Router,
+  o as default
+};

package/dist/scratch-Dbd9G6Q6.js

@@ -0,0 +1,60 @@
+import { c as r, s as h } from "./utils-D4pPF77E.js";
+import { _ as o, i as e } from "./factory-BdsO0dEW.js";
+import { a as n, n as d } from "./ssr-DSGwPtEd.js";
+var l = ".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{position:relative;display:block}.ran-scratch-ticket{position:relative;display:block;width:100%;height:100%}.ran-scratch-ticket-award{position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:#000;z-index:1}.ran-scratch-ticket-canvas{position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:2}", u = class extends d {
+  scratchTicketContainer;
+  scratchTicket;
+  state;
+  scratchAward;
+  _shadowDom;
+  static get observedAttributes() {
+    return [
+      "disabled",
+      "icon",
+      "effect",
+      "iconSize",
+      "sheet"
+    ];
+  }
+  constructor() {
+    super(), this._shadowDom = r(this, l);
+    const t = h(this._shadowDom, ".ran-scratch-ticket", () => {
+      const s = o("canvas").class("ran-scratch-ticket-canvas").style("width", "100%").style("height", "100%").build(), i = e().class("ran-scratch-ticket-award").build();
+      return e().class("ran-scratch-ticket").children(s, i).build();
+    }), c = t.querySelector(".ran-scratch-ticket-award"), a = t.querySelector(".ran-scratch-ticket-canvas");
+    this.scratchTicketContainer = t, this.scratchAward = c, this.scratchTicket = a, this.state = {
+      touchStart: !1,
+      scratchArea: 0
+    };
+  }
+  touchStartScratch = (t) => {
+    this.state.touchStart = !0;
+  };
+  touchMoveScratch = () => {
+    if (this.state.touchStart) {
+      const t = this.scratchTicket.getContext("2d");
+      if (!t) return;
+      this.state.scratchArea += 30, t.beginPath(), t.arc(100, 100, 30, 0, 2 * Math.PI), t.globalCompositeOperation = "destination-out", t.fill(), t.closePath();
+    }
+  };
+  touchEndScratch = () => {
+    this.state.touchStart = !1;
+    const { width: t, height: c } = this.scratchTicket, a = this.scratchTicket.getContext("2d");
+    a && this.state.scratchArea > t * c * 0.03 && (this.state.scratchArea = 0, a.clearRect(0, 0, t, c));
+  };
+  drawScratchTicket = () => {
+    const t = this.scratchTicket.getContext("2d");
+    if (!this.scratchTicketContainer || !t) return;
+    const c = new Image();
+    c.src = "", c.onload = () => {
+      t.drawImage(c, 0, 0, this.scratchTicket.width, this.scratchTicket.height);
+    }, this.scratchTicket.addEventListener("touchstart", this.touchStartScratch), this.scratchTicket.addEventListener("touchmove", this.touchMoveScratch), this.scratchTicket.addEventListener("touchend", this.touchEndScratch);
+  };
+  attributeChangedCallback() {
+    this._shadowDom.contains(this.scratchTicketContainer) || this._shadowDom.appendChild(this.scratchTicketContainer), this.drawScratchTicket();
+  }
+};
+n("r-scratch", u);
+export {
+  u as t
+};

package/dist/scratch.js

@@ -0,0 +1,4 @@
+import { t as a } from "./scratch-Dbd9G6Q6.js";
+export {
+  a as default
+};

package/dist/section-CNTvgdQ-.js

@@ -0,0 +1,63 @@
+import { c as o, d as r, l as s, s as h, u as n } from "./utils-D4pPF77E.js";
+import { t as d } from "./events-C59wGdni.js";
+import { i as a, p as l } from "./factory-BdsO0dEW.js";
+import { a as c, n as b } from "./ssr-DSGwPtEd.js";
+var g = ".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;scroll-margin-top:96px;border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-section-border-color, var(--ran-color-border, #d9d9d9));border-radius:var(--ran-section-radius, var(--ran-radius-md, 8px));background:var(--ran-section-background, var(--ran-color-bg-elevated, #ffffff));box-shadow:var(--ran-section-shadow, var(--ran-shadow-elevated, none));padding:var(--ran-section-padding, 28px);box-sizing:border-box}.ran-section-header{display:grid;gap:8px;max-width:760px;margin-bottom:22px}.ran-section-heading{margin:0;color:var(--ran-section-heading-color, var(--ran-color-text, #0f172a));font-size:var(--ran-section-heading-font-size, 24px);font-weight:var(--ran-section-heading-font-weight, 700);line-height:1.25;letter-spacing:0}.ran-section-heading:empty{display:none}.ran-section-subtitle{max-width:620px;margin:0;color:var(--ran-section-subtitle-color, var(--ran-color-text-secondary, #607086))}.ran-section-subtitle:empty{display:none}.ran-section-body{min-width:0}", u = class extends b {
+  _shadowDom;
+  _headerEl;
+  _headingEl;
+  _subtitleEl;
+  _events = new d();
+  static get observedAttributes() {
+    return [
+      "heading",
+      "subtitle",
+      "sheet"
+    ];
+  }
+  constructor() {
+    super(), this._shadowDom = o(this, g);
+    const t = h(this._shadowDom, ".ran-section-header", () => {
+      const e = a().class("ran-section-header").attr("part", "header").children(a().class("ran-section-heading").attr("part", "heading").attr("role", "heading").attr("aria-level", "2"), a().class("ran-section-subtitle").attr("part", "subtitle")).build(), i = a().class("ran-section-body").attr("part", "body").children(l()).build();
+      return this._shadowDom.appendChild(e), this._shadowDom.appendChild(i), e;
+    });
+    this._headerEl = t, this._headingEl = t.querySelector(".ran-section-heading"), this._subtitleEl = t.querySelector(".ran-section-subtitle");
+  }
+  get heading() {
+    return s(this, "heading");
+  }
+  set heading(t) {
+    n(this, "heading", t);
+  }
+  get subtitle() {
+    return s(this, "subtitle");
+  }
+  set subtitle(t) {
+    n(this, "subtitle", t);
+  }
+  get sheet() {
+    return s(this, "sheet");
+  }
+  set sheet(t) {
+    n(this, "sheet", t);
+  }
+  _syncHeading() {
+    this._headingEl.textContent = this.getAttribute("heading") ?? "", this._headerEl.style.display = this._headingEl.textContent || this._subtitleEl.textContent ? "" : "none";
+  }
+  _syncSubtitle() {
+    this._subtitleEl.textContent = this.getAttribute("subtitle") ?? "", this._headerEl.style.display = this._headingEl.textContent || this._subtitleEl.textContent ? "" : "none";
+  }
+  connectedCallback() {
+    this._syncHeading(), this._syncSubtitle(), r(this, this._shadowDom, "sheet", null, this.sheet);
+  }
+  disconnectedCallback() {
+    this._events.abort();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && (t === "heading" && this._syncHeading(), t === "subtitle" && this._syncSubtitle(), t === "sheet" && r(this, this._shadowDom, t, e, i));
+  }
+};
+c("r-section", u);
+export {
+  u as t
+};

package/dist/section.js

@@ -0,0 +1,5 @@
+import { t as o } from "./section-CNTvgdQ-.js";
+export {
+  o as Section,
+  o as default
+};