ranui
Version:
UI Component library based on `Web Component`
141 lines (140 loc) • 8.91 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, f as falseList } 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}:host{position:var(--ran-checkbox-host-position, relative);display:var(--ran-checkbox-host-display, block);margin:var(--ran-checkbox-host-margin, 0);padding:var(--ran-checkbox-host-padding, 0);box-sizing:var(--ran-checkbox-host-box-sizing, border-box);list-style:var(--ran-checkbox-host-list-style, none)}:host([disabled]){opacity:var(--ran-checkbox-disabled-opacity, .6)}:host([disabled]) .ran-checkbox-input{cursor:var(--ran-checkbox-disabled-cursor, not-allowed);pointer-events:var(--ran-checkbox-disabled-pointer-events, all)}:host([disabled]) .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, #d9d9d9);border:1px solid #d9d9d9}:host([disabled]) .ran-checkbox-inner:after{cursor:not-allowed;pointer-events:none;opacity:var(--ran-checkbox-checked-after-opacity, 1)}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, #d9d9d9)}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 0)}.ran-checkbox{position:var(--ran-checkbox-position, relative);display:var(--ran-checkbox-display, block);box-sizing:var(--ran-checkbox-box-sizing, border-box);margin:var(--ran-checkbox-margin, 0);width:var(--ran-checkbox-width, 16px);height:var(--ran-checkbox-height, 16px);padding:var(--ran-checkbox-padding, 0);color:var(--ran-checkbox-color, rgba(0, 0, 0, .88));font-size:var(--ran-checkbox-font-size, 14px);line-height:var(--ran-checkbox-line-height, 1);list-style:var(--ran-checkbox-list-style, none);font-family:var(--ran-checkbox-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");white-space:var(--ran-checkbox-white-space, nowrap);cursor:var(--ran-checkbox-cursor, pointer);border-radius:var(--ran-checkbox-border-radius, 4px)}.ran-checkbox-input{position:var(--ran-checkbox-input-position, absolute);inset:var(--ran-checkbox-input-inset, 0);z-index:var(--ran-checkbox-input-z-index, 1);cursor:var(--ran-checkbox-input-cursor, pointer);opacity:var(--ran-checkbox-input-opacity, 0);margin:var(--ran-checkbox-input-margin, 0)}.ran-checkbox-inner{box-sizing:var(--ran-checkbox-inner-box-sizing, border-box);display:var(--ran-checkbox-inner-display, block);width:var(--ran-checkbox-inner-width, 16px);height:var(--ran-checkbox-inner-height, 16px);direction:var(--ran-checkbox-inner-direction, ltr);background-color:var(--ran-checkbox-inner-background-color, #fff);border:var(--ran-checkbox-inner-border, 1px solid #d9d9d9);border-radius:var(--ran-checkbox-inner-border-radius, 4px);border-collapse:var(--ran-checkbox-inner-border-collapse, separate)}.ran-checkbox-inner:after{box-sizing:var(--ran-checkbox-inner-after-box-sizing, border-box);position:var(--ran-checkbox-inner-after-position, absolute);top:var(--ran-checkbox-inner-after-top, 50%);inset-inline-start:var(--ran-checkbox-inner-after-inset-inline-start, 25%);display:var(--ran-checkbox-inner-after-display, table);width:var(--ran-checkbox-inner-after-width, calc(16px / 14 * 5));height:var(--ran-checkbox-inner-after-height, calc(16px / 14 * 8));border:var(--ran-checkbox-inner-after-border, 2px solid #fff);border-top:var(--ran-checkbox-inner-after-border-top, 0);border-inline-start:var(--ran-checkbox-inner-after-border-inline-start, 0);opacity:var(--ran-checkbox-inner-after-opacity, 0);content:var(--ran-checkbox-inner-after-content, "");transition:var(--ran-checkbox-inner-after-transition, all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s);transform:var(--ran-checkbox-inner-after-transform, rotate(45deg) scale(1) translate(-50%, -50%))}.ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, #1677ff);border:var(--ran-checkbox-checked-border, 1px solid #1677ff)}.ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 1)}';
class Checkbox extends HTMLElementSSR() {
constructor() {
super();
__publicField(this, "checkInput");
__publicField(this, "checkInner");
__publicField(this, "context");
__publicField(this, "container");
__publicField(this, "_shadowDom");
__publicField(this, "updateChecked", () => {
const { checked } = this.context;
if (checked) {
this.setAttribute("checked", "true");
this.setAttribute("value", "true");
addClassToElement(this.container, "ran-checkbox-checked");
} else {
this.setAttribute("checked", "false");
this.setAttribute("value", "false");
removeClassToElement(this.container, "ran-checkbox-checked");
}
});
__publicField(this, "update", () => {
this.updateChecked();
});
__publicField(this, "onChange", () => {
if (falseList.includes(this.disabled)) return;
if (this.hasAttribute("disabled")) return;
const { checked } = this.context;
this.context.checked = !checked;
this.dispatchEvent(
new CustomEvent("change", {
detail: {
checked: this.context.checked
}
})
);
this.update();
});
this.checkInput = document.createElement("input");
this.checkInput.setAttribute("class", "ran-checkbox-input");
this.checkInput.setAttribute("type", "checkbox");
this.checkInner = document.createElement("span");
this.checkInner.setAttribute("class", "ran-checkbox-inner");
this.container = create("div").setAttribute("class", "ran-checkbox").addChild([this.checkInput, this.checkInner]).element;
const shadowRoot = this.attachShadow({ mode: "closed" });
const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
this._shadowDom = shadowRoot;
shadowRoot.appendChild(this.container);
this.context = {
checked: false
};
}
static get observedAttributes() {
return ["disabled", "checked", "value"];
}
get disabled() {
return this.getAttribute("disabled") || "";
}
set disabled(value) {
this.setAttribute("disabled", value);
}
get value() {
const checked = this.getAttribute("value");
if (falseList.includes(checked)) {
this.context.checked = false;
}
return `${this.context.checked}`;
}
set value(value) {
if (falseList.includes(value)) {
this.setAttribute("value", "false");
this.context.checked = false;
} else {
this.setAttribute("value", "true");
this.context.checked = true;
}
this.updateChecked();
}
get checked() {
const checked = this.getAttribute("checked");
if (falseList.includes(checked)) {
this.context.checked = false;
}
return `${this.context.checked}`;
}
set checked(value) {
if (falseList.includes(value)) {
this.setAttribute("checked", "false");
this.context.checked = false;
} else {
this.setAttribute("checked", "true");
this.context.checked = true;
}
this.updateChecked();
}
connectedCallback() {
this.addEventListener("click", this.onChange);
}
disconnectCallback() {
this.removeEventListener("click", this.onChange);
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if (name === "checked") {
this.checked = newValue;
this.value = newValue;
}
if (name === "value") {
this.checked = newValue;
this.value = newValue;
}
}
}
}
function Custom() {
if (typeof document !== "undefined" && !customElements.get("r-checkbox")) {
customElements.define("r-checkbox", Checkbox);
return Checkbox;
} else {
return createCustomError("document is undefined or r-checkbox is exist");
}
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
Checkbox,
default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
Checkbox as C,
index as a,
index$1 as i
};