ranui
Version:
UI Component library based on `Web Component`
104 lines (103 loc) • 10.1 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { c as create, a as addClassToElement, r as removeClassToElement } from "./plus-BQnIzzvi.js";
import { c as createCustomError, H as HTMLElementSSR } from "./index-9tJmVuyv.js";
const f7170ee498e0dd32cbdcb63fba8f75cc = '.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:10}.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, 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, -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, #ffffff);border-radius:var(--ran-dropdown-border-radius, 8px);outline:var(--ran-dropdown-outline, none);box-shadow:var(--ran-dropdown-box-shadow, 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-popover-height, 100%);min-width:var(--ran-popover-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-popover-width) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(-16px) rotate(0);top:0}.ranui-dropdown-container .bottom{transform:translate(calc(var(--ran-popover-width) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(0) rotate(180deg);top:calc(var(--ran-popover-height) - calc(var(--ran-dropdown-arrow-width, 16px) / 4),0px)}.ranui-dropdown-container .left{transform:translate(calc(0px - var(--ran-dropdown-arrow-width, 16px))) translateY(calc(var(--ran-dropdown-arrow-width, 16px) / 2)) rotate(270deg);top:max(0px,calc(var(--ran-popover-height) / 2 - calc(var(--ran-dropdown-arrow-width, 16px))))}.ranui-dropdown-container .right{left:100%;transform:translate(0) translateY(calc(var(--ran-popover-height) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) 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, #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, transparent)}';
const animationTime = 300;
class Dropdown extends HTMLElementSSR() {
constructor() {
super();
__publicField(this, "dropdown");
__publicField(this, "_slot");
__publicField(this, "_shadowDom");
__publicField(this, "arrowIcon");
__publicField(this, "container");
__publicField(this, "handlerTransit", () => {
if (this.transit) {
addClassToElement(this.dropdown.element, this.transit);
setTimeout(() => {
removeClassToElement(this.dropdown.element, this.transit);
}, animationTime);
}
});
__publicField(this, "handlerArrow", () => {
if (!this.arrow) return;
if (!this.arrowIcon) {
this.arrowIcon = create("div").setAttribute("class", `ranui-dropdown-arrow ${this.arrow}`);
this.container.addChild([this.arrowIcon]);
}
});
__publicField(this, "stopPropagation", (e) => {
e.stopPropagation();
});
this._slot = create("slot").setAttribute("class", "slot");
this.dropdown = create("div").setStyle("-webkit-tap-highlight-color", "transparent").setStyle("outline", "0").setAttribute("class", "ranui-dropdown").setAttribute("part", "ranui-dropdown").addChild([this._slot]);
this.container = create("div").setAttribute("class", "ranui-dropdown-container").addChild([this.dropdown]);
const shadowRoot = this.attachShadow({ mode: "closed" });
const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
this._shadowDom = shadowRoot;
shadowRoot.appendChild(this.container.element);
}
static get observedAttributes() {
return ["transit", "arrow"];
}
get transit() {
return this.getAttribute("transit") || "";
}
set transit(value) {
if (value) {
this.setAttribute("transit", value);
} else {
this.removeAttribute("transit");
}
}
get arrow() {
return this.getAttribute("arrow") || "";
}
set arrow(value) {
if (value) {
this.setAttribute("arrow", value);
} else {
this.removeAttribute("arrow");
}
}
get show() {
return this.getAttribute("show") || "";
}
set show(value) {
if (value) {
this.setAttribute("show", value);
} else {
this.removeAttribute("show");
}
}
connectedCallback() {
this.handlerTransit();
this.handlerArrow();
}
disconnectedCallback() {
}
attributeChangedCallback(name, _, newValue) {
if (name === "transit" && newValue) {
addClassToElement(this.dropdown.element, this.transit);
setTimeout(() => {
removeClassToElement(this.dropdown.element, this.transit);
}, animationTime);
}
if (name === "arrow") {
this.handlerArrow();
}
}
}
function Custom() {
if (typeof document !== "undefined" && !customElements.get("r-dropdown")) {
customElements.define("r-dropdown", Dropdown);
return Dropdown;
} else {
return createCustomError("document is undefined or r-dropdown is exist");
}
}
Custom();