ranui/dist/index-C6fbgi_U.js

UI Component library based on `Web Component`

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 createCustomError, H as HTMLElementSSR, i as isDisabled, f as falseList } from "./index-9tJmVuyv.js";
class Input extends HTMLElementSSR() {
  constructor() {
    super();
    __publicField(this, "_input");
    __publicField(this, "_label");
    __publicField(this, "_inputContent");
    __publicField(this, "_icon");
    /**
     * @description: 原生的 input 方法
     * @param {Event} event
     */
    __publicField(this, "customInput", (event) => {
      event.stopPropagation();
      event.preventDefault();
      const { target, data = "" } = event;
      this.value = (target == null ? void 0 : target.value) || data || "";
      this.customChange();
      this.dispatchEvent(
        new CustomEvent("input", {
          detail: {
            value: this.value
          }
        })
      );
    });
    /**
     * @description: 增加 change 方法，同时兼容大小写的情况
     */
    __publicField(this, "customChange", () => {
      this.dispatchEvent(
        new CustomEvent("change", {
          detail: {
            value: this.value
          }
        })
      );
    });
    /**
     * @description: 监听 placeholder 属性函数
     * @param {string} name
     * @param {string} value
     */
    __publicField(this, "listenPlaceholder", (name, value) => {
      if (name === "placeholder" && this._inputContent) {
        if (value != null) {
          this._inputContent.setAttribute("placeholder", value);
        } else {
          this._inputContent.removeAttribute("placeholder");
        }
      }
    });
    /**
     * @description: 监听 label 属性函数
     * @param {string} name
     * @param {string} value
     */
    __publicField(this, "listenLabel", (name, value) => {
      if (name === "label" && this._inputContent) {
        if (value != null) {
          if (this._label) {
            this._label.innerHTML = value;
          } else {
            this._label = document.createElement("label");
            this._label.innerHTML = value;
            this._label.setAttribute("class", "ran-input-label");
            this._label.setAttribute("part", "ran-input-label");
            this._input.appendChild(this._label);
          }
        } else {
          this._input.removeAttribute("label");
          if (this._label) {
            this._input.removeChild(this._label);
            this._label = void 0;
          }
        }
      }
    });
    /**
     * @description: 监听 type 属性
     * @param {string} name
     * @param {string} value
     */
    __publicField(this, "listenType", (name, value) => {
      if (name === "type" && this._inputContent) {
        if (value) {
          this._inputContent.setAttribute("type", value);
        } else {
          this._inputContent.removeAttribute("type");
          this._inputContent.removeAttribute("min");
          this._inputContent.removeAttribute("max");
          this._inputContent.removeAttribute("step");
        }
      }
    });
    /**
     * @description: 监听 status 属性
     * @param {string} name
     * @param {string} value
     */
    __publicField(this, "listenStatus", (name, value) => {
      if (name === "status" && this._input) {
        if (value) {
          this._input.setAttribute("status", value);
        } else {
          this._input.removeAttribute("status");
        }
      }
    });
    /**
     * @description: 监听 disabled 属性
     * @param {string} name
     * @param {string} value
     */
    __publicField(this, "listenDisabled", (name, value) => {
      if (name === "disabled" && this._input) {
        if (falseList.includes(value)) {
          this._input.removeAttribute("disabled");
        } else {
          this._input.setAttribute("disabled", "");
          this._inputContent.setAttribute("disabled", "");
        }
      }
    });
    /**
     * @description:  监听 icon 属性
     * @param {string} name
     * @param {string} value
     */
    __publicField(this, "listenIcon", (name, value, oldValue) => {
      if (name === "icon" && value && value !== oldValue) {
        this.removeAttribute("label");
        this.setAttribute("icon", value);
        this.dealIcon();
      }
    });
    /**
     * @description: 处理 icon 属性的问题
     */
    __publicField(this, "dealIcon", () => {
      if (!this._icon) {
        this._icon = document.createElement("ra-icon");
        const { width, height } = this._inputContent.getBoundingClientRect();
        const size = Math.min(width, height);
        this._icon.setAttribute("size", `${size}`);
        this._inputContent.insertAdjacentElement("beforebegin", this._icon);
      }
      this.icon && this._icon.setAttribute("name", this.icon);
    });
    /**
     * @description: 聚合监听事件
     * @param {string} name
     * @param {string} oldValue
     * @param {string} newValue
     */
    __publicField(this, "listenEvent", (name, oldValue, newValue) => {
      this.listenPlaceholder(name, newValue);
      this.listenLabel(name, newValue);
      this.listenStatus(name, newValue);
      this.listenDisabled(name, newValue);
      this.listenIcon(name, newValue, oldValue);
      if (name === "value" && oldValue !== newValue) {
        this._inputContent.value = newValue;
        this._input.setAttribute("value", newValue);
      }
    });
    this._input = document.createElement("div");
    this._input.setAttribute("class", "ran-input");
    this._input.setAttribute("part", "ran-input");
    this._inputContent = document.createElement("input");
    this._inputContent.setAttribute("class", "ran-input-content");
    this._inputContent.setAttribute("part", "ran-input-content");
    this._input.appendChild(this._inputContent);
  }
  static get observedAttributes() {
    return [
      "label",
      "disabled",
      "name",
      "placeholder",
      "type",
      "icon",
      "value",
      "status",
      // error warning
      "prefix",
      // 前缀
      "suffix",
      // 后缀
      "allowclear",
      // 清除 icon
      "count",
      // 计算输入的数量
      "maxlength",
      "showcount",
      "onPressEnter",
      // 按下回车的回调
      "variant",
      // filled borderless
      "minrows",
      // 当 type 等于 TextArea 时
      "maxrows"
    ];
  }
  /**
   * @description: 获取 input 的值
   * @return {String}
   */
  get value() {
    return this.getAttribute("value") || "";
  }
  /**
   * @description: 设置 input 的值
   * @param {String} value
   */
  set value(value) {
    if (!isDisabled(this) && value) {
      this.setAttribute("value", value);
      this._input.setAttribute("value", value);
    } else {
      this.removeAttribute("value");
      this._input.removeAttribute("value");
    }
  }
  /**
   * @description: 获取 input 的占位字符
   * @return {String}
   */
  get placeholder() {
    return this.getAttribute("placeholder") || "";
  }
  /**
   * @description: 设置 input 的占位字符
   * @param {String} value
   */
  set placeholder(value) {
    if (value) {
      this.setAttribute("placeholder", value);
    } else {
      this.removeAttribute("placeholder");
    }
  }
  /**
   * @description: input 是否为必选
   * @return {String}
   */
  get required() {
    return this.getAttribute("required") || "";
  }
  /**
   * @description: 设置 input 是否为必选，除非设置成 false，否则都是必填
   * @param {*} value
   */
  set required(value) {
    if (!value || value === "false") {
      this.removeAttribute("required");
    } else {
      this.setAttribute("required", "");
    }
  }
  /**
   * @description: 获取 input 上 disabled 属性
   * @return {String | null}
   */
  get disabled() {
    return `${isDisabled(this)}`;
  }
  /**
   * @description: 设置 input 的 disabled 属性
   * @param {String} value
   */
  set disabled(value) {
    if (falseList.includes(value)) {
      this.removeAttribute("disabled");
      this._input.removeAttribute("disabled");
      this._inputContent.removeAttribute("disabled");
    } else {
      this.setAttribute("disabled", "");
      this._input.setAttribute("disabled", "");
      this._inputContent.setAttribute("disabled", "");
    }
  }
  /**
   * @description: 获取类似于 Metiral Design 的输入体验。
   */
  get label() {
    return this.getAttribute("label") || "";
  }
  /**
   * @description: 设置类似于 Metiral Design 的输入体验。
   */
  set label(value) {
    this.setAttribute("label", value);
  }
  /**
   * @description: 获取 input 框的状态
   */
  get status() {
    return this.getAttribute("status") || "";
  }
  /**
   * @description: 设置 input 框的状态
   */
  set status(value) {
    if (value) {
      this.setAttribute("status", value);
      this._input.setAttribute("status", value);
    } else {
      this.removeAttribute("status");
      this._input.removeAttribute("status");
    }
  }
  /**
   * @description: 与 form 组件联动时，收集的属性名
   * @return {String}
   */
  get name() {
    return this.getAttribute("name") || "";
  }
  /**
   * @description: 设置 name 属性
   * @param {string} value
   */
  set name(value) {
    this.setAttribute("name", value);
  }
  /**
   * @description: 当 input 类型为 number 类型时，可以获取 min 属性
   * @return {String}
   */
  get min() {
    return this.getAttribute("min") || "";
  }
  /**
   * @description: 当 input 类型为 number 类型时，设置 min 属性
   * @param {string} value
   */
  set min(value) {
    if (this.type === "number") this.setAttribute("min", value);
  }
  /**
   * @description: 当 input 类型为 number 类型时，可以获取 max 属性
   * @return {String}
   */
  get max() {
    return this.getAttribute("max") || "";
  }
  /**
   * @description: 当 input 类型为 number 类型时，设置 max 属性
   * @param {string} value
   */
  set max(value) {
    if (this.type === "number") this.setAttribute("max", value);
  }
  /**
   * @description: 当 input 类型为 number 类型时，可以获取 step 属性
   * @return {String}
   */
  get step() {
    return this.getAttribute("step") || "";
  }
  /**
   * @description: 当 input 类型为 number 类型时，设置 step 属性
   * @param {string} value
   */
  set step(value) {
    if (this.type === "number") this.setAttribute("step", value);
  }
  /**
   * @description: 获取一个 icon
   * @return {String}
   */
  get icon() {
    return this.getAttribute("icon") || "";
  }
  /**
   * @description: 设置 icon 来表示标识
   * @param {string|null} value
   */
  set icon(value) {
    if (value) {
      this.setAttribute("icon", value);
    } else {
      this.removeAttribute("icon");
    }
  }
  /**
   * @description: 获取前面的 icon
   * @return {String}
   */
  get prefix() {
    return this.getAttribute("prefix") || "";
  }
  /**
   * @description: 设置前面的 icon 来表示标识
   * @param {string|null} value
   */
  set prefix(value) {
    if (value) {
      this.setAttribute("prefix", value);
    } else {
      this.removeAttribute("prefix");
    }
  }
  /**
   * @description: 获取后面的 icon
   * @return {String}
   */
  get suffix() {
    return this.getAttribute("suffix") || "";
  }
  /**
   * @description: 设置后面的 icon 来表示标识
   * @param {string|null} value
   */
  set suffix(value) {
    if (value) {
      this.setAttribute("suffix", value);
    } else {
      this.removeAttribute("suffix");
    }
  }
  /**
   * @description: 获取 input 的类型
   * @return {string|null}
   */
  get type() {
    return this.getAttribute("type") || "";
  }
  /**
   * @description: 设置 input 的类型
   * @param {string|null} value
   */
  set type(value) {
    if (value) {
      this.setAttribute("type", value);
    } else {
      this.removeAttribute("type");
    }
  }
  connectedCallback() {
    if (this.value) {
      this._inputContent.value = this.value;
      this._input.setAttribute("value", this.value);
    }
    if (this.status) {
      this._input.setAttribute("status", this.status);
    }
    if (isDisabled(this)) {
      this._input.setAttribute("disabled", "");
      this._inputContent.setAttribute("disabled", "");
    }
    if (this.type) {
      this._inputContent.setAttribute("type", this.type);
    }
    this._inputContent.addEventListener("input", this.customInput);
    if (document.readyState === "complete") {
      this.dealIcon();
    }
    this.appendChild(this._input);
  }
  disconnectCallback() {
    this._inputContent.removeEventListener("input", this.customInput);
  }
  attributeChangedCallback(name, oldValue, newValue) {
    this.listenEvent(name, oldValue, newValue);
  }
}
function Custom() {
  if (typeof window !== "undefined" && !customElements.get("ra-input")) {
    customElements.define("ra-input", Input);
    return Input;
  } else {
    return createCustomError("document is undefined or ra-input is exist");
  }
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  Input,
  default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
  Input as I,
  index as a,
  index$1 as i
};