ranui 0.1.6 → 0.1.7

package/dist/index-ecaed5cc.js

@@ -0,0 +1,439 @@
+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, f as falseList } from "./index-57492b9b.js";
+const f7170ee498e0dd32cbdcb63fba8f75cc = '.ran-input{position:relative;display:flex;width:calc(100% - 16px);height:calc(100% - 4px);min-width:0;padding:2px 8px;color:#000000d9;font-size:12px;line-height:1.5715;background-color:#fff;background-image:none;border-width:1px;border-style:solid;border-color:#d9d9d9;border-radius:2px;transition:all .3s}.ran-input:active{border-color:#40a9ff;box-shadow:0 0 0 2px #1890ff33;border-right-width:1px;outline:0}.ran-input:hover{border-color:#40a9ff;border-right-width:1px}.ran-input>.ran-input-content:hover~.ran-input-label{color:#40a9ff}.ran-input[value]>.ran-input-label{transform:translateY(calc(-50% - .43em)) scale(.8);color:#00000040}.ran-input[status=error]{border-color:#ff4d4f}.ran-input[status=error]>.ran-input-content~.ran-input-label{color:#ff4d4f}.ran-input[status=warning]{border-color:#ff7875}.ran-input[status=warning]>.ran-input-content~.ran-input-label{color:#ff7875}.ran-input[disabled]{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.ran-input[disabled]>.ran-input-content{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.ran-input[disabled]>.ran-input-content~.ran-input-label{color:#00000040;background-color:#f5f5f5}.ran-input[disabled]>.ran-input-label{color:#999;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed}.ran-input-content{writing-mode:horizontal-tb;text-rendering:auto;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0px;text-shadow:none;text-align:start;-webkit-rtl-ordering:logical;cursor:text;touch-action:manipulation;-webkit-appearance:none;text-overflow:ellipsis;box-sizing:border-box;margin:0;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";position:relative;border:none;width:100%;min-width:0;color:#000000d9;font-size:14px;line-height:1.48;background-color:#fff;background-image:none;transition:all .3s;outline:none}.ran-input-content:focus,.ran-input-content:hover{border:none;outline:0}.ran-input-content::placeholder{color:#999}.ran-input-content:placeholder-shown~.ran-input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.ran-input-content:focus~.ran-input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.ran-input-content::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ran-input-label{pointer-events:none;position:absolute;font-size:14px;left:8px;transition:transform .3s,color .3s,background-color .3s,backdrop-filter .3s;transform-origin:left;padding:0 .2em;color:#999;background:#fff;opacity:.9}\n';
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-input")) {
+    class CustomElement extends HTMLElement {
+      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();
+          const target = event.target;
+          this.value = target ? target.value : "";
+          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: 处理icon属性的问题
+         */
+        __publicField(this, "dealIcon", () => {
+          if (!this._icon) {
+            this._icon = document.createElement("r-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);
+        });
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        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);
+        shadowRoot.appendChild(this._input);
+      }
+      static get observedAttributes() {
+        return [
+          "label",
+          "disabled",
+          "name",
+          "placeholder",
+          "type",
+          "icon",
+          "status"
+        ];
+      }
+      /**
+       * @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: 获取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");
+        }
+      }
+      /**
+       * @description: 监听placeholder属性函数
+       * @param {string} name
+       * @param {string} value
+       */
+      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
+       */
+      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
+       */
+      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
+       */
+      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
+       */
+      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
+       */
+      listenIcon(name, value, oldValue) {
+        if (name === "icon" && value && value !== oldValue) {
+          this.removeAttribute("label");
+          this.setAttribute("icon", value);
+          this.dealIcon();
+        }
+      }
+      /**
+       * @description: 聚合监听事件
+       * @param {string} name
+       * @param {string} oldValue
+       * @param {string} newValue
+       */
+      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);
+      }
+      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();
+        }
+      }
+      disconnectCallback() {
+        this._inputContent.removeEventListener("input", this.customInput);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        this.listenEvent(name, oldValue, newValue);
+      }
+    }
+    customElements.define("r-input", CustomElement);
+    return CustomElement;
+  } else {
+    return createCustomError("document is undefined or r-input is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  index as a,
+  index$1 as i
+};