ranui 0.1.9 → 0.1.10-alpha.10

package/dist/{index-1048a998.js → index-WfFw4LJT.js}

@@ -1,12 +1,8 @@
 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 { i as isDisabled, f as falseList, c as createCustomError } from "./index-57492b9b.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}.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';
-class Input extends HTMLElement {
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { H as HTMLElementSSR, i as isDisabled, f as falseList, c as createCustomError } from "./index-DC5EA657.js";
+class Input extends HTMLElementSSR() {
   constructor() {
     super();
     __publicField(this, "_input");
@@ -14,7 +10,7 @@ class Input extends HTMLElement {
     __publicField(this, "_inputContent");
     __publicField(this, "_icon");
     /**
-     * @description: 原生的input方法
+     * @description: 原生的 input 方法
      * @param {Event} event
      */
     __publicField(this, "customInput", (event) => {
@@ -32,7 +28,7 @@ class Input extends HTMLElement {
       );
     });
     /**
-     * @description: 增加change方法，同时兼容大小写的情况
+     * @description: 增加 change 方法，同时兼容大小写的情况
      */
     __publicField(this, "customChange", () => {
       this.dispatchEvent(
@@ -44,7 +40,7 @@ class Input extends HTMLElement {
       );
     });
     /**
-     * @description: 监听placeholder属性函数
+     * @description: 监听 placeholder 属性函数
      * @param {string} name
      * @param {string} value
      */
@@ -58,7 +54,7 @@ class Input extends HTMLElement {
       }
     });
     /**
-     * @description: 监听label属性函数
+     * @description: 监听 label 属性函数
      * @param {string} name
      * @param {string} value
      */
@@ -84,7 +80,7 @@ class Input extends HTMLElement {
       }
     });
     /**
-     * @description: 监听type属性
+     * @description: 监听 type 属性
      * @param {string} name
      * @param {string} value
      */
@@ -101,7 +97,7 @@ class Input extends HTMLElement {
       }
     });
     /**
-     * @description: 监听status属性
+     * @description: 监听 status 属性
      * @param {string} name
      * @param {string} value
      */
@@ -115,7 +111,7 @@ class Input extends HTMLElement {
       }
     });
     /**
-     * @description: 监听disabled属性
+     * @description: 监听 disabled 属性
      * @param {string} name
      * @param {string} value
      */
@@ -130,7 +126,7 @@ class Input extends HTMLElement {
       }
     });
     /**
-     * @description:  监听icon属性
+     * @description:  监听 icon 属性
      * @param {string} name
      * @param {string} value
      */
@@ -142,11 +138,11 @@ class Input extends HTMLElement {
       }
     });
     /**
-     * @description: 处理icon属性的问题
+     * @description: 处理 icon 属性的问题
      */
     __publicField(this, "dealIcon", () => {
       if (!this._icon) {
-        this._icon = document.createElement("r-icon");
+        this._icon = document.createElement("ra-icon");
         const { width, height } = this._inputContent.getBoundingClientRect();
         const size = Math.min(width, height);
         this._icon.setAttribute("size", `${size}`);
@@ -171,10 +167,6 @@ class Input extends HTMLElement {
         this._input.setAttribute("value", newValue);
       }
     });
-    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");
@@ -182,7 +174,6 @@ class Input extends HTMLElement {
     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 [
@@ -193,18 +184,36 @@ class Input extends HTMLElement {
       "type",
       "icon",
       "value",
-      "status"
+      "status",
+      // error warning
+      "prefix",
+      // 前缀
+      "suffix",
+      // 后缀
+      "allowclear",
+      // 清除 icon
+      "count",
+      // 计算输入的数量
+      "maxlength",
+      "showcount",
+      "onPressEnter",
+      // 按下回车的回调
+      "variant",
+      // filled borderless
+      "minrows",
+      // 当 type 等于 TextArea 时
+      "maxrows"
     ];
   }
   /**
-   * @description: 获取input的值
+   * @description: 获取 input 的值
    * @return {String}
    */
   get value() {
-    return this.getAttribute("value");
+    return this.getAttribute("value") || "";
   }
   /**
-   * @description: 设置input的值
+   * @description: 设置 input 的值
    * @param {String} value
    */
   set value(value) {
@@ -217,14 +226,14 @@ class Input extends HTMLElement {
     }
   }
   /**
-   * @description: 获取input的占位字符
+   * @description: 获取 input 的占位字符
    * @return {String}
    */
   get placeholder() {
-    return this.getAttribute("placeholder");
+    return this.getAttribute("placeholder") || "";
   }
   /**
-   * @description: 设置input的占位字符
+   * @description: 设置 input 的占位字符
    * @param {String} value
    */
   set placeholder(value) {
@@ -235,14 +244,14 @@ class Input extends HTMLElement {
     }
   }
   /**
-   * @description: input是否为必选
+   * @description: input 是否为必选
    * @return {String}
    */
   get required() {
-    return this.getAttribute("required");
+    return this.getAttribute("required") || "";
   }
   /**
-   * @description: 设置input是否为必选，除非设置成false，否则都是必填
+   * @description: 设置 input 是否为必选，除非设置成 false，否则都是必填
    * @param {*} value
    */
   set required(value) {
@@ -253,14 +262,14 @@ class Input extends HTMLElement {
     }
   }
   /**
-   * @description: 获取input上disabled属性
+   * @description: 获取 input 上 disabled 属性
    * @return {String | null}
    */
   get disabled() {
-    return isDisabled(this);
+    return `${isDisabled(this)}`;
   }
   /**
-   * @description: 设置input的disabled属性
+   * @description: 设置 input 的 disabled 属性
    * @param {String} value
    */
   set disabled(value) {
@@ -275,25 +284,25 @@ class Input extends HTMLElement {
     }
   }
   /**
-   * @description: 获取类似于Metiral Design的输入体验。
+   * @description: 获取类似于 Metiral Design 的输入体验。
    */
   get label() {
     return this.getAttribute("label") || "";
   }
   /**
-   * @description: 设置类似于Metiral Design的输入体验。
+   * @description: 设置类似于 Metiral Design 的输入体验。
    */
   set label(value) {
     this.setAttribute("label", value);
   }
   /**
-   * @description: 获取input框的状态
+   * @description: 获取 input 框的状态
    */
   get status() {
     return this.getAttribute("status") || "";
   }
   /**
-   * @description: 设置input框的状态
+   * @description: 设置 input 框的状态
    */
   set status(value) {
     if (value) {
@@ -305,73 +314,70 @@ class Input extends HTMLElement {
     }
   }
   /**
-   * @description: 与form组件联动时，收集的属性名
+   * @description: 与 form 组件联动时，收集的属性名
    * @return {String}
    */
   get name() {
     return this.getAttribute("name") || "";
   }
   /**
-   * @description: 设置name属性
+   * @description: 设置 name 属性
    * @param {string} value
    */
   set name(value) {
     this.setAttribute("name", value);
   }
   /**
-   * @description: 当input类型为number类型时，可以获取min属性
+   * @description: 当 input 类型为 number 类型时，可以获取 min 属性
    * @return {String}
    */
   get min() {
     return this.getAttribute("min") || "";
   }
   /**
-   * @description: 当input类型为number类型时，设置min属性
+   * @description: 当 input 类型为 number 类型时，设置 min 属性
    * @param {string} value
    */
   set min(value) {
-    if (this.type === "number")
-      this.setAttribute("min", value);
+    if (this.type === "number") this.setAttribute("min", value);
   }
   /**
-   * @description: 当input类型为number类型时，可以获取max属性
+   * @description: 当 input 类型为 number 类型时，可以获取 max 属性
    * @return {String}
    */
   get max() {
     return this.getAttribute("max") || "";
   }
   /**
-   * @description: 当input类型为number类型时，设置max属性
+   * @description: 当 input 类型为 number 类型时，设置 max 属性
    * @param {string} value
    */
   set max(value) {
-    if (this.type === "number")
-      this.setAttribute("max", value);
+    if (this.type === "number") this.setAttribute("max", value);
   }
   /**
-   * @description: 当input类型为number类型时，可以获取step属性
+   * @description: 当 input 类型为 number 类型时，可以获取 step 属性
    * @return {String}
    */
   get step() {
     return this.getAttribute("step") || "";
   }
   /**
-   * @description: 当input类型为number类型时，设置step属性
+   * @description: 当 input 类型为 number 类型时，设置 step 属性
    * @param {string} value
    */
   set step(value) {
-    if (this.type === "number")
-      this.setAttribute("step", value);
+    if (this.type === "number") this.setAttribute("step", value);
   }
   /**
-   * @description: 获取一个icon
+   * @description: 获取一个 icon
    * @return {String}
    */
   get icon() {
-    return this.getAttribute("icon");
+    return this.getAttribute("icon") || "";
   }
   /**
-   * @description: 设置icon来表示标识
+   * @description: 设置 icon 来表示标识
    * @param {string|null} value
    */
   set icon(value) {
@@ -382,14 +388,50 @@ class Input extends HTMLElement {
     }
   }
   /**
-   * @description: 获取input的类型
+   * @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");
+    return this.getAttribute("type") || "";
   }
   /**
-   * @description: 设置input的类型
+   * @description: 设置 input 的类型
    * @param {string|null} value
    */
   set type(value) {
@@ -418,6 +460,7 @@ class Input extends HTMLElement {
     if (document.readyState === "complete") {
       this.dealIcon();
     }
+    this.appendChild(this._input);
   }
   disconnectCallback() {
     this._inputContent.removeEventListener("input", this.customInput);
@@ -427,11 +470,11 @@ class Input extends HTMLElement {
   }
 }
 function Custom() {
-  if (typeof window !== "undefined" && !customElements.get("r-input")) {
-    customElements.define("r-input", Input);
+  if (typeof window !== "undefined" && !customElements.get("ra-input")) {
+    customElements.define("ra-input", Input);
     return Input;
   } else {
-    return createCustomError("document is undefined or r-input is exist");
+    return createCustomError("document is undefined or ra-input is exist");
   }
 }
 const index = Custom();

package/dist/{index-458debf7.js → index-mhFL9MJp.js}

@@ -1,12 +1,9 @@
 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 { g as getPixelRatio } from "./index-7913ec46.js";
-import { c as createCustomError } from "./index-57492b9b.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}.ran-radar{position:relative;width:100%;height:100%;display:block}\n";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { g as getPixelRatio } from "./arrow-down-B_hCY3Wt.js";
+import { c as createCustomError } from "./index-DC5EA657.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}.ran-radar{position:var(--ran-radar-position, relative);width:var(--ran-radar-width, 100%);height:var(--ran-radar-height, 100%);display:var(--ran-radar-display, block)}";
 const BACKGROUND_COLOR = "rgba(0,0,0,0)";
 const FONT_COLOR = "rgba(0,0,0,1)";
 const POLYGON_COLOR = "#e6e6e6";
@@ -43,13 +40,7 @@ function Custom() {
         shadowRoot.appendChild(this.abilityRadarChartContainer);
       }
       static get observedAttributes() {
-        return [
-          "abilitys",
-          "colorPolygon",
-          "colorLine",
-          "fillColor",
-          "strokeColor"
-        ];
+        return ["abilitys", "colorPolygon", "colorLine", "fillColor", "strokeColor"];
       }
       get abilitys() {
         const item = this.getAttribute("abilitys");
@@ -101,8 +92,7 @@ function Custom() {
       refreshData() {
         var _a;
         const ctx = this.abilityRadarChart.getContext("2d");
-        if (!this.abilityRadarChartContainer || !ctx)
-          return;
+        if (!this.abilityRadarChartContainer || !ctx) return;
         const radio = getPixelRatio(ctx);
         const width = this.abilityRadarChartContainer.clientWidth * radio;
         const height = this.abilityRadarChartContainer.clientHeight * radio;
@@ -122,8 +112,7 @@ function Custom() {
         this.drawCircle(ctx);
       }
       drawSide(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
         ctx.save();
         ctx.strokeStyle = this.colorLine;
         const r = this.mRadius;
@@ -137,8 +126,7 @@ function Custom() {
       }
       // 绘制多边形边
       drawPolygon(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
         ctx.save();
         ctx.strokeStyle = this.colorPolygon;
         const r = this.mRadius / 4;
@@ -158,8 +146,7 @@ function Custom() {
       }
       // 顶点连线
       drawLines(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
         ctx.save();
         ctx.beginPath();
         ctx.strokeStyle = this.colorLine;
@@ -175,8 +162,7 @@ function Custom() {
       // 绘制文本
       drawText(ctx) {
         var _a, _b, _c, _d;
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
         ctx.save();
         const radio = getPixelRatio(ctx);
         const defaultFontSize = this.mCenter / 12;
@@ -254,21 +240,9 @@ function Custom() {
         ctx.fillStyle = color;
         ctx.moveTo(x + radius, y);
         ctx.lineTo(x + width - radius, y);
-        ctx.arc(
-          x + width - radius,
-          y + radius,
-          radius,
-          Math.PI * 3 / 2,
-          Math.PI * 2
-        );
+        ctx.arc(x + width - radius, y + radius, radius, Math.PI * 3 / 2, Math.PI * 2);
         ctx.lineTo(x + width, y + height - radius);
-        ctx.arc(
-          x + width - radius,
-          y + height - radius,
-          radius,
-          Math.PI,
-          Math.PI / 2
-        );
+        ctx.arc(x + width - radius, y + height - radius, radius, Math.PI, Math.PI / 2);
         ctx.lineTo(x + radius, y + height);
         ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
         ctx.lineTo(x, y + radius);
@@ -284,8 +258,7 @@ function Custom() {
       }
       // 绘制数据区域
       drawRegion(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
         const radio = getPixelRatio(ctx);
         ctx.save();
         ctx.beginPath();
@@ -304,8 +277,7 @@ function Custom() {
       }
       // 画点
       drawCircle(ctx) {
-        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData)
-          return;
+        if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
         const radio = getPixelRatio(ctx);
         ctx.save();
         for (let i = 0; i < this.mCount; i++) {
@@ -325,13 +297,7 @@ function Custom() {
       disconnectCallback() {
       }
       attributeChangedCallback(name, oldValue, newValue) {
-        const attribute = [
-          "abilitys",
-          "colorPolygon",
-          "colorLine",
-          "fillColor",
-          "strokeColor"
-        ];
+        const attribute = ["abilitys", "colorPolygon", "colorLine", "fillColor", "strokeColor"];
         if (attribute.includes(name) && this.abilityRadarChartContainer && oldValue !== newValue) {
           this.refreshData();
         }