ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
196 lines (195 loc) • 18.6 kB
JavaScript
import { a as s, c as r, n as o, o as u, r as l, s as i, t as p } from "./utils-D1iZnChu.js";
import { t as h } from "./events-C59wGdni.js";
import { _ as c, c as d, i as a, s as b } from "./factory-ZNhcQ4tf.js";
import { a as v, n as g } from "./ssr-DSGwPtEd.js";
import "./icon-GZrfSeon.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}:host{position:var(--ran-input-host-position, relative);display:var(--ran-input-host-display, block);box-sizing:var(--ran-input-host-box-sizing, border-box)}:host([placeholder]) .ran-input-label{transform:var(--ran-input-label-placeholder-transform, translateY( calc(-50% - .43em) ) scale(.8));top:var(--ran-input-label-placeholder-top, 0)}:host .ran-input-label{transform:var(--ran-input-label-transform, translateY(-50%));top:var(--ran-input-label-top, 50%)}.ran-input{box-sizing:var(--ran-input-box-sizing, border-box);position:var(--ran-input-position, relative);display:var(--ran-input-display, flex);width:var(--ran-input-width, 100%);height:var(--ran-input-height, auto);min-width:var(--ran-input-min-width, 0);padding:var(--ran-input-padding, 0px 0px 0px 4px);color:var(--ran-input-color, var(--ran-color-text, #000000d9));font-size:var(--ran-input-font-size, 12px);font-family:var(--ran-input-font-family, var(--ran-skin-font-family, inherit));line-height:var(--ran-input-line-height, 1.5715);background-color:var(--ran-input-background-color, var(--ran-color-bg-elevated, #fff));background-image:var(--ran-input-background-image, none);border:var(--ran-input-border, 1px solid var(--ran-color-border, #eaeaea));border-image-source:var(--ran-input-border-image-source, none);border-image-slice:var(--ran-input-border-image-slice, 8);border-image-width:var(--ran-input-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-input-border-radius, var(--ran-radius-sm, 6px));transition:var(--ran-input-transition, none);min-height:var(--ran-input-min-height, 32px)}.ran-input .ran-icon{display:var(--ran-input-icon-display, flex);align-items:var(--ran-input-icon-align-items, center);justify-content:var(--ran-input-icon-justify-content, center)}.ran-input:focus-within{border-color:var(--ran-input-active-border-color, var(--ran-color-primary, #006bff));box-shadow:var(--ran-input-active-box-shadow, 0 0 0 2px var(--ran-blue-400, #cae7ff));border-right-width:var(--ran-input-active-border-right-width, 1px);outline:var(--ran-input-active-outline, 0)}.ran-input:hover{border-color:var(--ran-input-hover-border-color, var(--ran-color-primary, #006bff));border-right-width:var(--ran-input-hover-border-right-width, 1px)}.ran-input>.ran-input-content:hover~.ran-input-label{color:var(--ran-input-label-hover-color, var(--ran-color-primary, #006bff))}.ran-input[value]>.ran-input-label{transform:var(--ran-input-label-value-transform, translateY( calc(-50% - .43em) ) scale(.8));color:var(--ran-input-label-value-color, var(--ran-color-text-disabled, #00000040))}.ran-input[status=error] .ran-input-content,.ran-input[status=warning] .ran-input-content{padding-right:var(--ran-input-content-status-padding-right, 28px)}.ran-input[status=error]:after,.ran-input[status=warning]:after{content:"";position:absolute;top:50%;right:10px;width:16px;height:16px;transform:translateY(-50%);pointer-events:none;mask-position:center;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain}.ran-input[status=error]{border-color:var(--ran-input-status-error-border-color, var(--ran-color-danger, #ff4d4f))}.ran-input[status=error]>.ran-input-content~.ran-input-label{color:var(--ran-input-label-status-error-color, var(--ran-color-danger, #ff4d4f))}.ran-input[status=error]:after{background-color:var(--ran-color-danger, #ff4d4f);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm-.75 3.5h1.5v5h-1.5v-5zM8 11a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm-.75 3.5h1.5v5h-1.5v-5zM8 11a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E")}.ran-input[status=warning]{border-color:var(--ran-input-status-warning-border-color, var(--ran-color-warning, #faad14))}.ran-input[status=warning]>.ran-input-content~.ran-input-label{color:var(--ran-input-label-status-warning-color, var(--ran-color-warning, #faad14))}.ran-input[status=warning]:after{background-color:var(--ran-color-warning, #faad14);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l6.85 11.86a.5.5 0 01-.43.75H1.58a.5.5 0 01-.43-.75L8 1.5zm-.75 4.25v3.5h1.5v-3.5h-1.5zM8 10.75a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l6.85 11.86a.5.5 0 01-.43.75H1.58a.5.5 0 01-.43-.75L8 1.5zm-.75 4.25v3.5h1.5v-3.5h-1.5zM8 10.75a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E")}.ran-input[disabled]{color:var(--ran-input-disabled-color, var(--ran-color-text-disabled, #00000040));background-color:var(--ran-input-disabled-background-color, var(--ran-color-bg-muted, #f5f5f5));border-color:var(--ran-input-disabled-border-color, var(--ran-color-border, #eaeaea));box-shadow:var(--ran-input-disabled-box-shadow, none);cursor:var(--ran-input-disabled-cursor, not-allowed);opacity:var(--ran-input-disabled-opacity, 1)}.ran-input[disabled]>.ran-input-content{color:var(--ran-input-content-disabled-color, var(--ran-color-text-disabled, #00000040));background-color:var(--ran-input-content-disabled-background-color, var(--ran-color-bg-muted, #f5f5f5));border-color:var(--ran-input-content-disabled-border-color, var(--ran-color-border, #eaeaea));box-shadow:var(--ran-input-content-disabled-box-shadow, none);cursor:var(--ran-input-content-disabled-cursor, not-allowed);opacity:var(--ran-input-content-disabled-opacity, 1)}.ran-input[disabled]>.ran-input-content~.ran-input-label{color:var(--ran-input-label-disabled-color, var(--ran-color-text-disabled, #00000040));background-color:var(--ran-input-label-disabled-background-color, var(--ran-color-bg-muted, #f5f5f5))}.ran-input[disabled]>.ran-input-label{color:var(--ran-input-label-disabled-color, var(--ran-color-text-disabled, #999));border-color:var(--ran-input-label-disabled-border-color, var(--ran-color-border, #eaeaea));box-shadow:var(--ran-input-label-disabled-box-shadow, none);cursor:var(--ran-input-label-disabled-cursor, not-allowed)}.ran-input-content{writing-mode:var(--ran-input-content-writing-mode, horizontal-tb);text-rendering:var(--ran-input-content-text-rendering, auto);letter-spacing:var(--ran-input-content-letter-spacing, normal);word-spacing:var(--ran-input-content-word-spacing, normal);text-transform:var(--ran-input-content-text-transform, none);text-indent:var(--ran-input-content-text-indent, 0px);text-shadow:var(--ran-input-content-text-shadow, none);text-align:var(--ran-input-content-text-align, start);cursor:var(--ran-input-content-cursor, text);touch-action:var(--ran-input-content-touch-action, manipulation);-webkit-appearance:var(--ran-input-content--webkit-appearance, none);text-overflow:var(--ran-input-content-text-overflow, ellipsis);box-sizing:var(--ran-input-content-box-sizing, border-box);margin:var(--ran-input-content-margin, 0);font-variant:var(--ran-input-content-font-variant, tabular-nums);list-style:var(--ran-input-content-list-style, none);font-feature-settings:var(--ran-input-content-font-feature-settings, "tnum");position:var(--ran-input-content-position, relative);border:var(--ran-input-content-border, none);width:var(--ran-input-content-width, 100%);height:var(--ran-input-content-height, 100%);min-height:var(--ran-input-content-min-height, 30px);min-width:var(--ran-input-content-min-width, 0);color:var(--ran-input-content-color, var(--ran-color-text, #000000d9));font-size:var(--ran-input-content-font-size, 14px);line-height:var(--ran-input-content-line-height, 1.48);background-color:var(--ran-input-content-background-color, var(--ran-color-bg-elevated, #fff));background-image:var(--ran-input-content-background-image, none);transition:var(--ran-input-content-transition, none);outline:var(--ran-input-content-outline, none);border-radius:var(--ran-input-content-border-radius, var(--ran-radius-sm, 6px));padding:var(--ran-input-content-padding, 0 0 0 2px);font-weight:var(--ran-input-content-font-weight, 400)}.ran-input-content:focus,.ran-input-content:hover{border:var(--ran-input-content-hover-border, none);outline:var(--ran-input-content-hover-outline, 0)}.ran-input-content::placeholder{color:var(--ran-input-content-placeholder-color, var(--ran-color-text-disabled, #999))}.ran-input-content:placeholder-shown~.ran-input-label{transform:var(--ran-input-content-placeholder-label-transform, translateY( calc(-50% - .43em) ) scale(.8))}.ran-input-content:focus~.ran-input-label{transform:var(--ran-input-content-focus-label-transform, translateY( calc(-50% - .43em) ) scale(.8));top:var(--ran-input-content-focus-label-top, 0px)}.ran-input-content::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ran-input-label{box-sizing:var(--ran-input-label-box-sizing, border-box);pointer-events:var(--ran-input-label-pointer-events, none);position:var(--ran-input-label-position, absolute);font-size:var(--ran-input-label-font-size, 14px);left:var(--ran-input-label-left, 8px);transition:var(--ran-input-label-transition, transform .3s, top .3s, font-size .3s);transform-origin:var(--ran-input-label-transform-origin, left);padding:var(--ran-input-label-padding, 0 0);color:var(--ran-input-label-color, var(--ran-color-text-disabled, #999));background:var(--ran-input-label-background, var(--ran-color-bg-elevated, #fff));opacity:var(--ran-input-label-opacity, .9)}.ran-input-message{margin-top:var(--ran-input-message-margin-top, 4px);font-size:var(--ran-input-message-font-size, 12px);line-height:var(--ran-input-message-line-height, 1.5);color:var(--ran-input-message-color, var(--ran-color-text-secondary, #8c8c8c))}.ran-input-message:empty{display:none}:host([status="error"]) .ran-input-message{color:var(--ran-input-message-error-color, var(--ran-color-danger, #ff4d4f))}:host([status="warning"]) .ran-input-message{color:var(--ran-input-message-warning-color, var(--ran-color-warning, #faad14))}`, f = 0, x = class extends g {
static formAssociated = !0;
_internals;
static get observedAttributes() {
return [
"label",
"disabled",
"name",
"placeholder",
"type",
"icon",
"value",
"status",
"message",
"min",
"max",
"step",
"required",
"sheet"
];
}
_events = new h();
_shadowDom;
_input;
_label;
_inputContent;
_icon;
_message;
constructor() {
super();
try {
this._internals = this.attachInternals();
} catch {
this._internals = void 0;
}
this._shadowDom = o(this, m);
const t = p(this._shadowDom, ".ran-input", () => a().class("ran-input").part("input").children(b().class("ran-input-content").part("content")).build());
this._input = t, this._inputContent = t.querySelector(".ran-input-content"), this._inputContent.id || (this._inputContent.id = `ran-input-${++f}`);
}
focus(t) {
this._inputContent?.focus(t);
}
blur() {
this._inputContent?.blur();
}
select() {
this._inputContent?.select?.();
}
get value() {
return this.getAttribute("value") || "";
}
set value(t) {
!r(this) && t ? (this.setAttribute("value", t), this._input.setAttribute("value", t)) : (this.removeAttribute("value"), this._input.removeAttribute("value")), this._internals?.setFormValue?.(this.getAttribute("value") ?? "");
}
get placeholder() {
return this.getAttribute("placeholder") || "";
}
set placeholder(t) {
t ? this.setAttribute("placeholder", t) : this.removeAttribute("placeholder");
}
get required() {
return this.hasAttribute("required");
}
set required(t) {
!t || t === "false" ? this.removeAttribute("required") : this.setAttribute("required", "");
}
get disabled() {
return r(this);
}
set disabled(t) {
i.includes(t) ? (this.removeAttribute("disabled"), this._input.removeAttribute("disabled"), this._inputContent.removeAttribute("disabled")) : (this.setAttribute("disabled", ""), this._input.setAttribute("disabled", ""), this._inputContent.setAttribute("disabled", ""));
}
get label() {
return this.getAttribute("label") || "";
}
set label(t) {
this.setAttribute("label", t);
}
get status() {
return this.getAttribute("status") || "";
}
set status(t) {
t ? (this.setAttribute("status", t), this._input.setAttribute("status", t)) : (this.removeAttribute("status"), this._input.removeAttribute("status"));
}
get message() {
return this.getAttribute("message") || "";
}
set message(t) {
t ? this.setAttribute("message", t) : this.removeAttribute("message");
}
get name() {
return this.getAttribute("name") || "";
}
set name(t) {
this.setAttribute("name", t);
}
get min() {
return this.getAttribute("min") || "";
}
set min(t) {
this.type === "number" && this.setAttribute("min", t);
}
get max() {
return this.getAttribute("max") || "";
}
set max(t) {
this.type === "number" && this.setAttribute("max", t);
}
get step() {
return this.getAttribute("step") || "";
}
set step(t) {
this.type === "number" && this.setAttribute("step", t);
}
get icon() {
return this.getAttribute("icon") || "";
}
set icon(t) {
t ? this.setAttribute("icon", t) : this.removeAttribute("icon");
}
get type() {
return this.getAttribute("type") || "";
}
set type(t) {
t ? this.setAttribute("type", t) : this.removeAttribute("type");
}
get sheet() {
return l(this, "sheet");
}
set sheet(t) {
s(this, "sheet", t);
}
handlerExternalCss = () => {
u(this, this._shadowDom, "sheet", null, this.sheet);
};
customInput = (t) => {
t.stopPropagation(), t.preventDefault();
const { target: e, data: n = "" } = t;
this.value = e?.value || n || "", this.dispatchEvent(new CustomEvent("input", { detail: { value: this.value } }));
};
customChange = () => {
this.value = this._inputContent?.value ?? this.value, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
};
listenPlaceholder = (t, e) => {
t === "placeholder" && this._inputContent && (e != null ? this._inputContent.setAttribute("placeholder", e) : this._inputContent.removeAttribute("placeholder"));
};
listenLabel = (t, e) => {
t === "label" && this._inputContent && (e != null ? this._label ? this._label.innerHTML = e : (this._label = d().class("ran-input-label").part("label").text(e).build(), this._label.htmlFor = this._inputContent.id, this._input.appendChild(this._label)) : (this._input.removeAttribute("label"), this._label && (this._input.removeChild(this._label), this._label = void 0)));
};
listenType = (t, e) => {
t === "type" && this._inputContent && (e ? this._inputContent.setAttribute("type", e) : (this._inputContent.removeAttribute("type"), this._inputContent.removeAttribute("min"), this._inputContent.removeAttribute("max"), this._inputContent.removeAttribute("step")));
};
listenStatus = (t, e) => {
t === "status" && this._input && (e ? this._input.setAttribute("status", e) : this._input.removeAttribute("status"));
};
listenMessage = (t, e) => {
t === "message" && (e ? (this._message || (this._message = a().class("ran-input-message").part("message").build(), this._shadowDom.appendChild(this._message)), this._message.textContent = e) : this._message && (this._message.remove(), this._message = void 0));
};
listenNumericConstraint = (t, e) => {
(t === "min" || t === "max" || t === "step") && this._inputContent && (this.type === "number" && e != null ? this._inputContent.setAttribute(t, e) : this._inputContent.removeAttribute(t));
};
listenRequired = (t, e) => {
t === "required" && this._inputContent && (e != null ? this._inputContent.setAttribute("required", "") : this._inputContent.removeAttribute("required"));
};
listenDisabled = (t, e) => {
t === "disabled" && this._input && (i.includes(e) ? this._input.removeAttribute("disabled") : (this._input.setAttribute("disabled", ""), this._inputContent.setAttribute("disabled", "")));
};
listenIcon = (t, e, n) => {
t === "icon" && e && e !== n && (this.removeAttribute("label"), this.setAttribute("icon", e), this.dealIcon());
};
dealIcon = () => {
this._icon || (this._icon = c("r-icon").class("ran-icon").build(), this._inputContent.insertAdjacentElement("beforebegin", this._icon)), this.icon && this._icon.setAttribute("name", this.icon);
};
listenEvent = (t, e, n) => {
this.listenPlaceholder(t, n), this.listenLabel(t, n), this.listenStatus(t, n), this.listenMessage(t, n), this.listenNumericConstraint(t, n), this.listenRequired(t, n), this.listenDisabled(t, n), this.listenIcon(t, n, e), t === "value" && e !== n && (this._inputContent.value = n, this._input.setAttribute("value", n));
};
connectedCallback() {
this.handlerExternalCss(), this.value && (this._inputContent.value = this.value, this._input.setAttribute("value", this.value)), this._internals?.setFormValue?.(this.value), this.status && this._input.setAttribute("status", this.status), this.message && this.listenMessage("message", this.message), r(this) && (this._input.setAttribute("disabled", ""), this._inputContent.setAttribute("disabled", "")), this.type && this._inputContent.setAttribute("type", this.type), this.type === "number" && (this.min && this._inputContent.setAttribute("min", this.min), this.max && this._inputContent.setAttribute("max", this.max), this.step && this._inputContent.setAttribute("step", this.step)), this.required && this._inputContent.setAttribute("required", ""), this._events.on(this._inputContent, "input", this.customInput), this._events.on(this._inputContent, "change", this.customChange), document.readyState === "complete" && this.dealIcon();
}
disconnectedCallback() {
this._events.abort();
}
attributeChangedCallback(t, e, n) {
e !== n && (this.listenEvent(t, e, n), t === "sheet" && this.handlerExternalCss());
}
};
v("r-input", x);
export {
x as t
};