ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
68 lines (67 loc) • 4.22 kB
JavaScript
import { a, n as d, o as n, r as i, t as c } from "./utils-D1iZnChu.js";
import { i as t, p as o } from "./factory-ZNhcQ4tf.js";
import { a as l, n as h } from "./ssr-DSGwPtEd.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:var(--ran-card-display, block);box-sizing:border-box;min-height:var(--ran-card-min-height, 0)}:host([hoverable]:hover) .ran-card{border-color:var(--ran-card-hover-border-color, var(--ran-color-border-hover, #c9c9c9));box-shadow:var(--ran-card-hover-shadow, var(--ran-shadow-elevated, 0 1px 2px rgba(0, 0, 0, .04)))}.ran-card{display:grid;align-content:start;gap:var(--ran-card-gap, 14px);height:100%;min-width:0;padding:var(--ran-card-padding, 16px);border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-card-border-color, var(--ran-color-border, #eaeaea));border-radius:var(--ran-card-radius, var(--ran-radius-md));background:var(--ran-card-background, var(--ran-color-bg));box-shadow:var(--ran-card-shadow, none);box-sizing:border-box}.ran-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ran-card-title-area{flex:1;min-width:0}.ran-card-title{margin:0;color:var(--ran-card-title-color, var(--ran-color-text));font-size:var(--ran-card-title-font-size, 16px);font-weight:var(--ran-card-title-font-weight, 600);line-height:1.3}.ran-card-title:empty{display:none}.ran-card-description{margin:4px 0 0;color:var(--ran-card-description-color, var(--ran-color-text-secondary));font-size:var(--ran-card-description-font-size, 14px);line-height:1.5}.ran-card-description:empty{display:none}.ran-card-body,.ran-card-footer{min-width:0}:host(:not([title]):not([description])) .ran-card-header{display:none}", b = class extends h {
_shadowDom;
_titleEl;
_descriptionEl;
_headerEl;
_footerEl;
static get observedAttributes() {
return [
"title",
"description",
"sheet",
"hoverable"
];
}
constructor() {
super(), this._shadowDom = d(this, p);
const r = c(this._shadowDom, ".ran-card", () => t().class("ran-card").attr("part", "card").children(t().class("ran-card-header").attr("part", "header").children(t().class("ran-card-title-area").children(t().class("ran-card-title").attr("part", "title"), t().class("ran-card-description").attr("part", "description")), o().attr("name", "extra").attr("part", "extra")), t().class("ran-card-body").attr("part", "body").children(o()), t().class("ran-card-footer").attr("part", "footer").children(o().attr("name", "footer"))).build());
this._headerEl = r.querySelector(".ran-card-header"), this._titleEl = r.querySelector(".ran-card-title"), this._descriptionEl = r.querySelector(".ran-card-description"), this._footerEl = r.querySelector(".ran-card-footer"), this._footerEl.style.display = "none";
const e = this._footerEl.querySelector('slot[name="footer"]');
e.addEventListener("slotchange", () => {
this._footerEl.style.display = e.assignedElements().length > 0 ? "" : "none";
});
}
get title() {
return i(this, "title");
}
set title(r) {
a(this, "title", r);
}
get description() {
return i(this, "description");
}
set description(r) {
a(this, "description", r);
}
get sheet() {
return i(this, "sheet");
}
set sheet(r) {
a(this, "sheet", r);
}
get hoverable() {
return this.hasAttribute("hoverable");
}
set hoverable(r) {
r ? this.setAttribute("hoverable", "") : this.removeAttribute("hoverable");
}
_syncTitle() {
this._titleEl.textContent = this.getAttribute("title") ?? "";
}
_syncDescription() {
this._descriptionEl.textContent = this.getAttribute("description") ?? "";
}
connectedCallback() {
this._syncTitle(), this._syncDescription(), n(this, this._shadowDom, "sheet", null, this.sheet);
}
attributeChangedCallback(r, e, s) {
e !== s && (r === "title" && this._syncTitle(), r === "description" && this._syncDescription(), r === "sheet" && n(this, this._shadowDom, r, e, s));
}
};
l("r-card", b);
export {
b as t
};