@randevcx/ranui
Version:
UI Component library based on `Web Component`
93 lines (92 loc) • 5.94 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);
return value;
};
import { c as createCustomError, i as isDisabled } from "./index-CSnBqUsQ.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}html.dark .r-preview-mask .r-preview-contain{background-color:#191919!important}@keyframes ranui-select-dropdown-down-in{0%{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}to{transform:scaleY(1);transform-origin:100% 100%;opacity:1}}@keyframes ranui-select-dropdown-down-out{0%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}to{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}}@keyframes ranui-select-dropdown-up-in{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-select-dropdown-up-out{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}.ran-select-dropdown-down-in{animation:ranui-select-dropdown-up-in .2s;animation-fill-mode:forwards}.ran-select-dropdown-down-out{animation:ranui-select-dropdown-up-out .2s;animation-fill-mode:forwards}.ran-select-dropdown-up-in{animation:ranui-select-dropdown-down-in .2s;animation-fill-mode:forwards}.ran-select-dropdown-up-out{animation:ranui-select-dropdown-down-out .2s;animation-fill-mode:forwards}.ranui-select-dropdown{position:absolute;transform-origin:var(--ran-x, 50%) var(--ran-y, 50%);box-sizing:border-box;margin:0;padding:4px;color:#000000e0;font-size:14px;list-style:none;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:1050;overflow:hidden;font-variant:initial;background:#fff;border-radius:8px;outline:none;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;cursor:pointer}.ranui-select-dropdown-option-item{position:relative;display:block;padding:5px 12px;color:#000000e0;font-weight:400;font-size:14px;transition:background .3s ease;border-radius:4px}.ranui-select-dropdown-option-item:hover{background-color:#0000000a}.ranui-select-dropdown-option-item-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#000000e0;font-size:14px;line-height:1.57142857;box-sizing:border-box;list-style:none;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";font-variant:initial}.ranui-select-dropdown-option-active{background-color:#e6f7ff;font-weight:700}.ranui-select-dropdown-option-active:hover{background-color:#e6f7ff}';
function Custom() {
if (typeof document !== "undefined" && !customElements.get("r-option")) {
class Option extends HTMLElement {
constructor() {
super();
__publicField(this, "_option");
__publicField(this, "_optionContent");
__publicField(this, "_shadowDom");
__publicField(this, "_slot");
this._slot = document.createElement("slot");
this._option = document.createElement("div");
this._option.setAttribute("class", "ran-option");
this._optionContent = document.createElement("div");
this._optionContent.setAttribute("class", "ran-option-content");
this._optionContent.appendChild(this._slot);
this._option.appendChild(this._optionContent);
const shadowRoot = this.attachShadow({ mode: "closed" });
const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
this._shadowDom = shadowRoot;
shadowRoot.appendChild(this._option);
}
static get observedAttributes() {
return ["disabled", "sheet", "value"];
}
get value() {
return this.getAttribute("value");
}
set value(value) {
this.setAttribute("value", value || "");
}
get sheet() {
return this.getAttribute("sheet");
}
set sheet(value) {
this.setAttribute("sheet", value || "");
}
get disabled() {
return isDisabled(this);
}
set disabled(value) {
if (!value || value === "false") {
this.removeAttribute("disabled");
} else {
this.setAttribute("disabled", "");
}
}
handlerExternalCss() {
if (this.sheet) {
try {
const sheet = new CSSStyleSheet();
sheet.insertRule(this.sheet);
this._shadowDom.adoptedStyleSheets = [sheet];
} catch (error) {
console.error(`Failed to parse the rule in CSSStyleSheet: ${this.sheet}`);
}
}
}
connectedCallback() {
}
disconnectCallback() {
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === "disabled" && this._option) {
if (!newValue || newValue === "false") {
this._option.setAttribute("disabled", "");
} else {
this._option.removeAttribute("disabled");
}
}
if (name === "sheet" && this._shadowDom && oldValue !== newValue)
this.handlerExternalCss();
}
}
return Option;
} else {
return createCustomError("document is undefined or r-option is exist");
}
}
const index = Custom();
export {
index as default
};