ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
77 lines (76 loc) • 9.75 kB
JavaScript
import { a as o, l as i, n as w, o as p, p as d, r as a, t as h } from "./utils-D1iZnChu.js";
import { i as n, p as l } from "./factory-ZNhcQ4tf.js";
import { a as c, n as f } from "./ssr-DSGwPtEd.js";
var m = '.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}@keyframes ranui-dropdown-up-in{0%{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}to{transform:scaleY(1);transform-origin:100% 100%;opacity:1}}@keyframes ranui-dropdown-up-out{0%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}to{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}}@keyframes ranui-dropdown-down-in{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-down-out{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}@keyframes ranui-dropdown-left-in{0%{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}to{transform:scaleX(1);transform-origin:100% 0%;opacity:1}}@keyframes ranui-dropdown-left-out{0%{transform:scaleX(1);transform-origin:100% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}}@keyframes ranui-dropdown-right-in{0%{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleX(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-right-out{0%{transform:scaleX(1);transform-origin:0% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}}.ran-dropdown-down-in{animation:ranui-dropdown-down-in .1s;animation-fill-mode:forwards}.ran-dropdown-down-out{animation:ranui-dropdown-down-out .1s;animation-fill-mode:forwards}.ran-dropdown-up-in{animation:ranui-dropdown-up-in .1s;animation-fill-mode:forwards}.ran-dropdown-up-out{animation:ranui-dropdown-up-out .1s;animation-fill-mode:forwards}.ran-dropdown-left-in{animation:ranui-dropdown-left-in .1s;animation-fill-mode:forwards}.ran-dropdown-left-out{animation:ranui-dropdown-left-out .1s;animation-fill-mode:forwards}.ran-dropdown-right-in{animation:ranui-dropdown-right-in .1s;animation-fill-mode:forwards}.ran-dropdown-right-out{animation:ranui-dropdown-right-out .1s;animation-fill-mode:forwards}:host{text-align:var(--ran-dropdown-host-text-align, left);z-index:var(--ran-dropdown-host-z-index, var(--ran-z-dropdown, 1100))}.ranui-dropdown{transform-origin:var(--ran-x, 50%) var(--ran-y, 50%);box-sizing:var(--ran-dropdown-box-sizing, border-box);margin:var(--ran-dropdown-margin, 0);padding:var(--ran-dropdown-padding, 0);color:var(--ran-dropdown-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-dropdown-font-size, 14px);list-style:var(--ran-dropdown-list-style, none);font-family:var(--ran-dropdown-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));z-index:var(--ran-dropdown-z-index, 1050);overflow:var(--ran-dropdown-overflow, hidden);font-variant:var(--ran-dropdown-font-variant, initial);background:var(--ran-dropdown-background, var(--ran-color-bg-elevated, #ffffff));border-radius:var(--ran-dropdown-border-radius, var(--ran-radius-md, 12px));outline:var(--ran-dropdown-outline, none);box-shadow:var(--ran-dropdown-box-shadow, var(--ran-shadow-menu, var(--ran-shadow-elevated, 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05))));cursor:var(--ran-dropdown-cursor, auto);width:var(--ran-dropdown-width, 100%);height:var(--ran-dropdown-height, 100%);min-height:var(--ran-dropdown-min-height, 100%);min-width:var(--ran-dropdown-min-width, 100%)}.ranui-dropdown-container{position:var(--ran-dropdown-container-position, relative);display:var(--ran-dropdown-container-display, block);width:var(--ran-dropdown-container-width, 100%);height:var(--ran-dropdown-container-height, 100%);box-sizing:var(--ran-dropdown-container-box-sizing, border-box)}.ranui-dropdown-container .top{transform:translate(calc(var(--ran-dropdown-arrow-anchor-width, var(--ran-dropdown-min-width, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(calc(-1 * var(--ran-dropdown-arrow-height, var(--ran-dropdown-arrow-width, 16px)) + var(--ran-dropdown-arrow-overlap, 2px))) rotate(0);top:0}.ranui-dropdown-container .bottom{transform:translate(calc(var(--ran-dropdown-arrow-anchor-width, var(--ran-dropdown-min-width, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(var(--ran-dropdown-arrow-overlap, 2px)) rotate(180deg);top:max(0px,calc(var(--ran-dropdown-min-height, 100%) - calc(var(--ran-dropdown-arrow-width, 16px) / 4)))}.ranui-dropdown-container .left{transform:translate(calc(0px - var(--ran-dropdown-arrow-width, 16px))) translateY(calc(var(--ran-dropdown-arrow-width, 16px) / 2 + var(--ran-dropdown-arrow-overlap, 2px))) rotate(270deg);top:max(0px,calc(var(--ran-dropdown-arrow-anchor-height, var(--ran-dropdown-min-height, 100%)) / 2 - var(--ran-dropdown-arrow-width, 16px)))}.ranui-dropdown-container .right{left:100%;transform:translate(0) translateY(calc(var(--ran-dropdown-arrow-anchor-height, var(--ran-dropdown-min-height, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2) + var(--ran-dropdown-arrow-overlap, 2px))) rotate(90deg);top:0}.ranui-dropdown-arrow{position:var(--ran-dropdown-arrow-position, absolute);box-sizing:var(--ran-dropdown-arrow-box-sizing, border-box);z-index:var(--ran-dropdown-arrow-z-index, 1);display:var(--ran-dropdown-arrow-display, block);pointer-events:var(--ran-dropdown-arrow-pointer-events, none);width:var(--ran-dropdown-arrow-width, var(--ran-dropdown-arrow-width, 16px));height:var(--ran-dropdown-arrow-height, var(--ran-dropdown-arrow-width, 16px));overflow:var(--ran-dropdown-arrow-overflow, hidden)}.ranui-dropdown-arrow:before{background:var(--ran-dropdown-arrow-before-background, var(--ran-color-bg-elevated, #fff));position:var(--ran-dropdown-arrow-before-position, absolute);bottom:var(--ran-dropdown-arrow-before-bottom, 0);inset-inline-start:0;width:var(--ran-dropdown-arrow-before-width, var(--ran-dropdown-arrow-width, 16px));height:var(--ran-dropdown-arrow-before-height, calc(var(--ran-dropdown-arrow-width, 16px) / 2));clip-path:path("M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z");content:var(--ran-dropdown-arrow-before-content, "")}.ranui-dropdown-arrow:after{content:var(--ran-dropdown-arrow-after-content, "");position:var(--ran-dropdown-arrow-after-position, absolute);width:var(--ran-dropdown-arrow-after-width, 9px);height:var(--ran-dropdown-arrow-after-height, 9px);bottom:var(--ran-dropdown-arrow-after-bottom, 0);inset-inline:0;margin:var(--ran-dropdown-arrow-after-margin, auto);border-radius:var(--ran-dropdown-arrow-after-border-radius, 0 0 2px 0);transform:var(--ran-dropdown-arrow-after-transform, translateY(50%) rotate(-135deg));box-shadow:var(--ran-dropdown-arrow-after-box-shadow, 2px 2px 5px rgba(0, 0, 0, .05));z-index:var(--ran-dropdown-arrow-after-z-index, 0);background:var(--ran-dropdown-arrow-after-background, var(--ran-color-bg-elevated, #fff))}', e = 300, x = /* @__PURE__ */ (function(r) {
return r.TOP = "top", r.BOTTOM = "bottom", r.LEFT = "left", r.RIGHT = "right", r;
})({}), v = class extends f {
dropdown;
_slot;
_shadowDom;
arrowIcon;
container;
static get observedAttributes() {
return [
"transit",
"arrow",
"sheet"
];
}
constructor() {
super(), this._shadowDom = w(this, m);
const r = h(this._shadowDom, ".ranui-dropdown-container", () => n().class("ranui-dropdown-container").children(n().style("-webkit-tap-highlight-color", "transparent").style("outline", "0").class("ranui-dropdown").part("dropdown").children(l().class("slot"))).build());
this.container = r, this.dropdown = r.querySelector(".ranui-dropdown"), this._slot = r.querySelector(".slot");
}
get transit() {
return a(this, "transit");
}
set transit(r) {
o(this, "transit", r, { removeEmpty: !0 });
}
get arrow() {
return a(this, "arrow");
}
set arrow(r) {
o(this, "arrow", r, { removeEmpty: !0 });
}
get sheet() {
return a(this, "sheet");
}
set sheet(r) {
o(this, "sheet", r);
}
handlerExternalCss = () => {
p(this, this._shadowDom, "sheet", null, this.sheet);
};
handlerTransit = () => {
this.transit && this.dropdown && (i(this.dropdown, this.transit), setTimeout(() => {
d(this.dropdown, this.transit);
}, e));
};
handlerArrow = () => {
const r = (this.arrow || "").trim();
if (!r) {
this.arrowIcon && this.container.contains(this.arrowIcon) && this.container.removeChild(this.arrowIcon), this.arrowIcon = void 0;
return;
}
!this.arrowIcon && this.container && (this.arrowIcon = n().class("ranui-dropdown-arrow").build(), this.container.appendChild(this.arrowIcon)), this.arrowIcon && (this.arrowIcon.className = `ranui-dropdown-arrow ${r}`);
};
stopPropagation = (r) => {
r.stopPropagation();
};
connectedCallback() {
this.handlerExternalCss(), this.handlerTransit(), this.handlerArrow();
}
disconnectedCallback() {
}
attributeChangedCallback(r, s, t) {
r === "transit" && t && (i(this.dropdown, this.transit), setTimeout(() => {
d(this.dropdown, this.transit);
}, e)), r === "arrow" && this.handlerArrow(), r === "sheet" && s !== t && this.handlerExternalCss();
}
};
c("r-dropdown", v);
export {
v as n,
x as t
};