ranui 0.2.0-alpha.0 → 0.2.0-alpha.1

package/dist/index.js

@@ -1,23 +1,23 @@
-import { n as r } from "./player-CvfmwWUa.js";
+import { n as r } from "./player-CqTAmg_E.js";
 import { a, i as e, n as m, o as s, r as i, t as p } from "./utils-D4pPF77E.js";
-import { t as f } from "./button-DukaD6uL.js";
-import { n as P, r as T, t as h } from "./icon-DmoEnao5.js";
-import { t as R } from "./image-6GayFDqX.js";
-import { t as u } from "./input-DoraIb3x.js";
-import { t as S } from "./message-CQENvkoi.js";
-import { t as I } from "./skeleton-DPv9nFhL.js";
+import { t as f } from "./button-BstLjXNe.js";
+import { n as P, r as T, t as h } from "./icon-Blm7AbyY.js";
+import { t as R } from "./image-DKm6z7YQ.js";
+import { t as u } from "./input-Dskw1bAl.js";
+import { t as S } from "./message-De5e1txT.js";
+import { t as I } from "./skeleton-BAdJ6vyA.js";
 import { t as M } from "./tabpane-B_M-Jokw.js";
-import { t as b } from "./tab-C9swK-hm.js";
-import { t as A } from "./radar-CWsawt2g.js";
+import { t as b } from "./tab-DH2owP2V.js";
+import { t as A } from "./radar-19P5Mtld.js";
 import { t as G } from "./modal-DruDj3AB.js";
-import { t as N } from "./select-BmhCUTLb.js";
-import { n as y, t as O } from "./dropdown-C5362qTy.js";
-import { t as v } from "./math-B5PpSnFR.js";
-import { t as D } from "./progress-BWkNf2J5.js";
+import { t as N } from "./select-BVdUtQX5.js";
+import { n as y, t as O } from "./dropdown-RqHMRhFE.js";
+import { t as v } from "./math-Dv4nXSoI.js";
+import { t as D } from "./progress-gZo0knzu.js";
 import { t as V } from "./checkbox-iHZQb-yQ.js";
-import { t as j } from "./colorpicker-Ch67dWa_.js";
-import { n as z, t as H } from "./popover-BCvHwLZb.js";
-import { n as K, t as Q } from "./loading-Mko22ncl.js";
+import { t as j } from "./colorpicker-CGh8pRqo.js";
+import { n as z, t as H } from "./popover-BY32HNMl.js";
+import { n as K, t as Q } from "./loading-C4QUpm70.js";
 import { t as X } from "./form-05Lxxl3D.js";
 import "./scratch-Dbd9G6Q6.js";
 import { t as oo } from "./card-DQUJoDUQ.js";

package/dist/input-Dskw1bAl.js

@@ -0,0 +1,186 @@
+import { c as s, d as o, f as i, l, p as r, s as u, u as p } from "./utils-D4pPF77E.js";
+import { t as d } from "./events-C59wGdni.js";
+import { _ as c, c as h, i as a, s as b } from "./factory-BdsO0dEW.js";
+import { a as v, n as g } from "./ssr-DSGwPtEd.js";
+import "./icon-Blm7AbyY.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%);transition:var(--ran-input-label-transition, all .3s)}.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, #d9d9d9));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, border-color var(--ran-motion-duration-base, .2s), box-shadow var(--ran-motion-duration-base, .2s), color var(--ran-motion-duration-base, .2s));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, #40a9ff))}.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, #d9d9d9));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, #d9d9d9));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, #d9d9d9));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, border-color var(--ran-motion-duration-base, .2s), box-shadow var(--ran-motion-duration-base, .2s), color var(--ran-motion-duration-base, .2s));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, color .3s, background-color .3s, backdrop-filter .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);transition:var(--ran-input-label-transition, all .3s)}.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 d();
+  _shadowDom;
+  _input;
+  _label;
+  _inputContent;
+  _icon;
+  _message;
+  constructor() {
+    super();
+    try {
+      this._internals = this.attachInternals();
+    } catch {
+      this._internals = void 0;
+    }
+    this._shadowDom = s(this, m);
+    const t = u(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}`);
+  }
+  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) {
+    p(this, "sheet", t);
+  }
+  handlerExternalCss = () => {
+    o(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  customInput = (t) => {
+    t.stopPropagation(), t.preventDefault();
+    const { target: n, data: e = "" } = t;
+    this.value = n?.value || e || "", 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, n) => {
+    t === "placeholder" && this._inputContent && (n != null ? this._inputContent.setAttribute("placeholder", n) : this._inputContent.removeAttribute("placeholder"));
+  };
+  listenLabel = (t, n) => {
+    t === "label" && this._inputContent && (n != null ? this._label ? this._label.innerHTML = n : (this._label = h().class("ran-input-label").part("label").text(n).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, n) => {
+    t === "type" && this._inputContent && (n ? this._inputContent.setAttribute("type", n) : (this._inputContent.removeAttribute("type"), this._inputContent.removeAttribute("min"), this._inputContent.removeAttribute("max"), this._inputContent.removeAttribute("step")));
+  };
+  listenStatus = (t, n) => {
+    t === "status" && this._input && (n ? this._input.setAttribute("status", n) : this._input.removeAttribute("status"));
+  };
+  listenMessage = (t, n) => {
+    t === "message" && (n ? (this._message || (this._message = a().class("ran-input-message").part("message").build(), this._shadowDom.appendChild(this._message)), this._message.textContent = n) : this._message && (this._message.remove(), this._message = void 0));
+  };
+  listenNumericConstraint = (t, n) => {
+    (t === "min" || t === "max" || t === "step") && this._inputContent && (this.type === "number" && n != null ? this._inputContent.setAttribute(t, n) : this._inputContent.removeAttribute(t));
+  };
+  listenRequired = (t, n) => {
+    t === "required" && this._inputContent && (n != null ? this._inputContent.setAttribute("required", "") : this._inputContent.removeAttribute("required"));
+  };
+  listenDisabled = (t, n) => {
+    t === "disabled" && this._input && (i.includes(n) ? this._input.removeAttribute("disabled") : (this._input.setAttribute("disabled", ""), this._inputContent.setAttribute("disabled", "")));
+  };
+  listenIcon = (t, n, e) => {
+    t === "icon" && n && n !== e && (this.removeAttribute("label"), this.setAttribute("icon", n), 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, n, e) => {
+    this.listenPlaceholder(t, e), this.listenLabel(t, e), this.listenStatus(t, e), this.listenMessage(t, e), this.listenNumericConstraint(t, e), this.listenRequired(t, e), this.listenDisabled(t, e), this.listenIcon(t, e, n), t === "value" && n !== e && (this._inputContent.value = e, this._input.setAttribute("value", e));
+  };
+  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, n, e) {
+    n !== e && (this.listenEvent(t, n, e), t === "sheet" && this.handlerExternalCss());
+  }
+};
+v("r-input", x);
+export {
+  x as t
+};

package/dist/input.js

@@ -1,4 +1,4 @@
-import { t as a } from "./input-DoraIb3x.js";
+import { t as a } from "./input-Dskw1bAl.js";
 export {
   a as Input,
   a as default