ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
123 lines (122 loc) • 9.12 kB
JavaScript
import { a as v, n as h, o as b, r as y, t as x } from "./utils-D1iZnChu.js";
import { _ as f, i, m as w } from "./factory-ZNhcQ4tf.js";
import { a as _, n as m } from "./ssr-DSGwPtEd.js";
import { i as A } from "./icon-GZrfSeon.js";
import { i as k, n as z, r as S, t as M } from "./warning-circle-fill-Cz0qu7AH.js";
var C = '.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([type="toast"]) .ran-message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}:host([type="toast"]) .ran-message-notice-content{display:inline-block;padding:10px 16px;background:#000000b3;border-radius:7px;pointer-events:all}:host([type="toast"]) .ran-message-notice-content-info{align-items:center;display:flex}:host([type="toast"]) .ran-message-notice-content-info span{margin:0;padding:0;font-size:14px;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";z-index:1010;width:100%;pointer-events:none;color:#fff}.ran-message-notice{padding:var(--ran-message-notice-padding, 8px);text-align:var(--ran-message-notice-text-align, center);max-width:var(--ran-message-notice-max-width, 90%);margin:var(--ran-message-notice-margin, 0 auto);word-break:var(--ran-message-notice-word-break, break-all)}.ran-message-notice-content{display:var(--ran-message-notice-content-display, inline-block);padding:var(--ran-message-notice-content-padding, 10px 16px);background:var(--ran-message-notice-content-background, var(--ran-color-bg-elevated, #fff));border-image-source:var(--ran-message-notice-content-border-image-source, none);border-image-slice:var(--ran-message-notice-content-border-image-slice, 8);border-image-width:var(--ran-message-notice-content-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-message-notice-content-border-radius, var(--ran-radius-md, 12px));box-shadow:var(--ran-message-notice-content-box-shadow, var(--ran-shadow-menu, 0 2px 4px #0000000d, 0 8px 24px -6px #00000024));pointer-events:var(--ran-message-notice-content-pointer-events, all)}.ran-message-notice-content-info{align-items:var(--ran-message-notice-content-info-align-items, center);display:var(--ran-message-notice-content-info-display, flex)}.ran-message-notice-content-info span{margin:var(--ran-message-notice-content-info-span-margin, 0);padding:var(--ran-message-notice-content-info-span-padding, 0);color:var(--ran-message-notice-content-info-span-color, var(--ran-color-text, #000000d9));font-size:var(--ran-message-notice-content-info-span-font-size, 14px);font-variant:var(--ran-message-notice-content-info-span-font-variant, tabular-nums);list-style:var(--ran-message-notice-content-info-span-list-style, none);font-feature-settings:var(--ran-message-notice-content-info-span-font-feature-settings, "tnum");z-index:var(--ran-message-notice-content-info-span-z-index, 1010);width:var(--ran-message-notice-content-info-span-width, 100%);pointer-events:var(--ran-message-notice-content-info-span-pointer-events, none)}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes MessageMoveIn{0%{padding:0;transform:translateY(-100%);opacity:0}to{padding:8px;transform:translateY(0);opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}.ranui-message{box-sizing:var(--ran-message-box-sizing, border-box);margin:var(--ran-message-margin, 0);padding:var(--ran-message-padding, 0);color:var(--ran-message-color, var(--ran-color-text, #000000d9));font-size:var(--ran-message-font-size, 14px);font-variant:var(--ran-message-font-variant, tabular-nums);line-height:var(--ran-message-line-height, 1.5715);list-style:var(--ran-message-ist-style, none);font-feature-settings:var(--ran-message-font-feature-settings, "tnum");position:var(--ran-message-position, fixed);top:var(--ran-message-top, 8px);left:var(--ran-message-left, 0);z-index:var(--ran-message-z-index, var(--ran-z-message, 1200));width:var(--ran-message-width, 100%);pointer-events:var(--ran-message-pointer-events, none)}.ranui-message .message-in{animation-name:var(--ran-message-in-animation-name, MessageMoveIn);animation-duration:var(--ran-message-in-animation-duration, .3s);animation-timing-function:var(--ran-message-in-animation-timing-function, cubic-bezier(.78, .14, .15, .86))}.ranui-message .message-leave{animation-name:var(--ran-message-leave-animation-name, MessageMoveOut);animation-duration:var(--ran-message-leave-animation-duration, .3s);animation-timing-function:var(--ran-message-leave-animation-timing-function, cubic-bezier(.78, .14, .15, .86))}', p = "data-ranui-message-host", I = () => `[${p}="true"]`, E = (e, n) => {
const t = n?.top ?? 8, s = n?.zIndex ?? 1200;
e.style.setProperty("position", "fixed"), e.style.setProperty("top", typeof t == "number" ? `${t}px` : String(t)), e.style.setProperty("left", "0"), e.style.setProperty("width", "100%"), e.style.setProperty("z-index", String(s)), e.style.setProperty("pointer-events", "none");
}, T = (e) => typeof document > "u" ? null : e?.getContainer?.() || document.body, P = (e) => {
if (typeof document > "u") return null;
const n = T(e) || document.body;
let t = n.querySelector(I());
return t || (t = i().attr(p, "true").children(i().class("ranui-message").attr("aria-live", "polite").attr("aria-atomic", "false")).build(), n.appendChild(t)), E(t, e), t.querySelector(".ranui-message");
}, g = 300, d = 3e3;
A({
"check-circle-fill": k,
"close-circle-fill": S,
"info-circle-fill": z,
"warning-circle-fill": M
});
var q = /* @__PURE__ */ new Map([
["success", "check-circle-fill"],
["warning", "warning-circle-fill"],
["error", "close-circle-fill"],
["info", "info-circle-fill"],
["toast", null]
]), D = /* @__PURE__ */ new Map([
["success", "#52c41a"],
["warning", "#faad14"],
["error", "#ff4d4f"],
["info", "#006bff"],
["toast", "rgba(0, 0, 0, 0.7)"]
]), R = class extends m {
_info;
_notice;
_content;
_icon;
_span;
_shadowDom;
timeId;
close;
static get observedAttributes() {
return [
"type",
"content",
"sheet"
];
}
constructor() {
super(), this._shadowDom = h(this, C);
const e = x(this._shadowDom, ".ran-message-notice", () => i().class("ran-message-notice").children(i().class("ran-message-notice-content").children(i().class("ran-message-notice-content-info").children(f("r-icon"), w()))).build());
this._notice = e, this._content = e.querySelector(".ran-message-notice-content"), this._info = e.querySelector(".ran-message-notice-content-info"), this._icon = e.querySelector("r-icon"), this._span = e.querySelector("span"), this.handlerExternalCss();
}
connectedCallback() {
m.prototype.connectedCallback?.call(this), this.hasAttribute("aria-atomic") || this.setAttribute("aria-atomic", "true");
}
get type() {
return this.getAttribute("type");
}
set type(e) {
e && this.setAttribute("type", e);
}
get content() {
return this.getAttribute("content");
}
set content(e) {
e && this.setAttribute("content", e);
}
get sheet() {
return y(this, "sheet");
}
set sheet(e) {
v(this, "sheet", e);
}
handlerExternalCss = () => {
b(this, this._shadowDom, "sheet", null, this.sheet);
};
setA11yRole = (e) => {
const n = e === "error" || e === "warning";
this.setAttribute("role", n ? "alert" : "status");
};
setIcon = (e) => {
const n = q.get(e), t = D.get(e);
n && (this._icon?.setAttribute("name", n), this._icon?.style.setProperty("margin-right", "8px"), this._icon?.setAttribute("size", "18"), t && this._icon?.setAttribute("color", t));
};
attributeChangedCallback(e, n, t) {
n !== t && (e === "content" && (this._span.textContent = t), e === "type" && (this.setIcon(t), this.setA11yRole(t)), e === "sheet" && this.handlerExternalCss());
}
};
_("r-message", R);
function L() {
if (typeof window > "u") return null;
const e = (t) => (s) => {
const r = {}, a = f("r-message").class("message").build();
a.timeId && clearTimeout(a.timeId), a.setAttribute("type", t);
let o = d, c;
if (!s) return;
typeof s == "string" ? a.setAttribute("content", s) : (a.setAttribute("content", s.content), c = s.close, o = s.duration || d, r.top = s.top, r.zIndex = s.zIndex, r.getContainer = s.getContainer);
const l = P(r);
if (!l) return;
const u = setTimeout(() => {
a.classList.remove("message-in"), a.classList.add("message-leave"), clearTimeout(u);
}, o - g);
a.timeId = setTimeout(() => {
a.classList.remove("message-leave"), l.removeChild(a), c && c();
}, o), l.appendChild(a), a.classList.add("message-in"), setTimeout(() => {
a.classList.remove("message-in");
}, g);
}, n = {
info: e("info"),
success: e("success"),
error: e("error"),
warning: e("warning"),
toast: e("toast")
};
return window.message = n, window.ranui || (window.ranui = {}), window.ranui.message = n, n;
}
var j = L();
export {
j as n,
R as t
};