ranui 0.1.8 → 0.1.10-alpha.1

package/dist/{index-5975bbc0.js → index-C1x9Popy.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-const f7170ee498e0dd32cbdcb63fba8f75cc = "";
+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}";
 function CustomElement() {
   if (typeof window !== "undefined" && !customElements.get("r-tab")) {
     class TabPane extends HTMLElement {

package/dist/index-CCNK5H8T.js

@@ -0,0 +1,103 @@
+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 { a as addClassToElement, r as removeClassToElement } from "./utils-BMBEcoPj.js";
+import { H as HTMLElementSSR, f as falseList, c as createCustomError } from "./index-CSnBqUsQ.js";
+class Checkbox extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "checkInput");
+    __publicField(this, "checkInner");
+    __publicField(this, "context");
+    __publicField(this, "updateChecked", () => {
+      const { checked } = this.context;
+      if (checked) {
+        addClassToElement(this, "ran-checkbox-checked");
+      } else {
+        removeClassToElement(this, "ran-checkbox-checked");
+      }
+    });
+    __publicField(this, "update", () => {
+      this.updateChecked();
+    });
+    __publicField(this, "onChange", () => {
+      const { checked } = this.context;
+      this.context.checked = !checked;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            checked: this.context.checked
+          }
+        })
+      );
+      this.update();
+    });
+    this.checkInput = document.createElement("input");
+    this.checkInput.setAttribute("class", "ran-checkbox-input");
+    this.checkInput.setAttribute("type", "checkbox");
+    this.checkInner = document.createElement("span");
+    this.checkInner.setAttribute("class", "ran-checkbox-inner");
+    this.context = {
+      checked: false
+    };
+  }
+  static get observedAttributes() {
+    return ["disabled", "checked"];
+  }
+  get disabled() {
+    return this.getAttribute("disabled") || "";
+  }
+  set disabled(value) {
+    this.setAttribute("disabled", value);
+  }
+  get checked() {
+    const checked = this.getAttribute("checked");
+    if (falseList.includes(checked)) {
+      this.context.checked = false;
+    }
+    return `${this.context.checked}`;
+  }
+  set checked(value) {
+    if (falseList.includes(value)) {
+      this.setAttribute("checked", "false");
+      this.context.checked = false;
+    } else {
+      this.setAttribute("checked", "true");
+      this.context.checked = true;
+    }
+    this.updateChecked();
+  }
+  connectedCallback() {
+    this.setAttribute("class", "ran-checkbox");
+    this.appendChild(this.checkInput);
+    this.appendChild(this.checkInner);
+    this.addEventListener("click", this.onChange);
+  }
+  disconnectCallback() {
+    this.removeEventListener("click", this.onChange);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-checkbox")) {
+    customElements.define("r-checkbox", Checkbox);
+    return Checkbox;
+  } else {
+    return createCustomError("document is undefined or r-checkbox is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Checkbox,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Checkbox as C,
+  index as a,
+  index$1 as i
+};

package/dist/{index-a1a53af6.js → index-CD09p_mF.js}

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { g as getPixelRatio } from "./index-d2d69b06.js";
-import { c as createCustomError } from "./index-57492b9b.js";
-const f7170ee498e0dd32cbdcb63fba8f75cc = ".ran-radar{position:relative;width:100%;height:100%;display:block}\n";
+import { g as getPixelRatio } from "./utils-BMBEcoPj.js";
+import { c as createCustomError } from "./index-CSnBqUsQ.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}";
 const BACKGROUND_COLOR = "rgba(0,0,0,0)";
 const FONT_COLOR = "rgba(0,0,0,1)";
 const POLYGON_COLOR = "#e6e6e6";
@@ -43,13 +43,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");
@@ -254,21 +248,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);
@@ -325,13 +307,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();
         }

package/dist/index-CFnsLnrb.js

@@ -0,0 +1,496 @@
+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 { H as HTMLElementSSR, i as isDisabled, f as falseList, c as createCustomError } from "./index-CSnBqUsQ.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
+};