ranui 0.1.10-alpha.7 → 0.2.0-alpha.0

package/dist/index-WfFw4LJT.js

@@ -1,490 +0,0 @@
-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 { 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");
-    __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
-};

package/dist/index-lLO-8KJ1.js

@@ -1,204 +0,0 @@
-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 { p as perToNum } from "./arrow-down-Beig7FXI.js";
-import { H as HTMLElementSSR, 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}:host:active,:host:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-progress{position:var(--ran-progress-position, relative);cursor:var(--ran-progress-cursor, pointer);width:var(--ran-progress-width, 100%);height:var(--ran-progress-height, 100%)}.ran-progress:active,.ran-progress:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-progress-wrap{width:var(--ran-progress-wrap-width, 100%);height:var(--ran-progress-wrap-height, 8px);border-radius:var(--ran-progress-wrap-border-radius, 20px);background:var(--ran-progress-wrap-background, #5b5b5b);position:var(--ran-progress-wrap-position, relative);overflow:var(--ran-progress-wrap-overflow, hidden)}.ran-progress-wrap-value{position:var(--ran-progress-wrap-value-position, absolute);top:var(--ran-progress-wrap-value-top, 0);left:var(--ran-progress-wrap-value-left, 0);height:var(--ran-progress-wrap-value-height, 100%);width:var(--ran-progress-wrap-value-width, 100%);transform:var(--ran-progress-wrap-value-transform, scaleX(0));transform-origin:var(--ran-progress-wrap-value-transform-origin, 0 0);will-change:var(--ran-progress-wrap-value-will-change, transform);background:var(--ran-progress-wrap-value-background, linear-gradient(90deg, #0bc8bb 2.42%, #00d297 98.79%));border-radius:var(--ran-progress-wrap-value-border-radius, 20px)}.ran-progress-dot{position:var(--ran-progress-dot-position, absolute);top:var(--ran-progress-dot-top, -5px);left:var(--ran-progress-dot-left, -9px);border-radius:var(--ran-progress-dot-border-radius, 50%);width:var(--ran-progress-dot-width, 18px);height:var(--ran-progress-dot-height, 18px);background:var(--ran-progress-dot-background, linear-gradient(90deg, #0bc8bb 2.42%, #00d297 98.79%));cursor:var(--ran-progress-dot-cursor, pointer)}";
-const attributes = ["percent", "type", "total", "dot"];
-class Progress extends HTMLElementSSR() {
-  constructor() {
-    super();
-    __publicField(this, "_progress");
-    __publicField(this, "_progressWrap");
-    __publicField(this, "_progressWrapValue");
-    __publicField(this, "_progressDot");
-    __publicField(this, "moveProgress");
-    __publicField(this, "_shadowDom");
-    __publicField(this, "progressClick", (e) => {
-      const rect = this._progress.getBoundingClientRect();
-      const offsetX = e.clientX - rect.left;
-      const percentage = Math.min(1, Math.max(0, offsetX / this._progress.offsetWidth));
-      this.percent = `${percentage * Number(this.total)}`;
-      this._progressWrapValue.style.setProperty("transform", `scaleX(${percentage})`);
-      this._progressDot.style.setProperty("transform", `translateX(${percentage * this._progress.offsetWidth}px)`);
-      this.change();
-    });
-    __publicField(this, "progressDotMouseDown", () => {
-      this.moveProgress.mouseDown = true;
-    });
-    __publicField(this, "progressDotMouseMove", (e) => {
-      if (!this.moveProgress.mouseDown) return;
-      const rect = this._progress.getBoundingClientRect();
-      const offsetX = e.clientX - rect.left;
-      const percentage = Math.min(1, Math.max(0, offsetX / this._progress.offsetWidth));
-      this.percent = `${percentage * Number(this.total)}`;
-      this._progressWrapValue.style.setProperty("transform", `scaleX(${percentage})`);
-      this._progressDot.style.setProperty("transform", `translateX(${percentage * this._progress.offsetWidth}px)`);
-      this.change();
-    });
-    __publicField(this, "progressDotMouseUp", (e) => {
-      if (!this.moveProgress.mouseDown) return;
-      this.moveProgress.mouseDown = false;
-    });
-    __publicField(this, "change", () => {
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: {
-            value: this.percent,
-            percent: this.percent,
-            total: this.total
-          }
-        })
-      );
-    });
-    __publicField(this, "appendProgressDot", () => {
-      if (this.dot === "true" && !this._progress.contains(this._progressDot)) {
-        this._progress.appendChild(this._progressDot);
-      }
-      if (this.dot === "false" && this._progress.contains(this._progressDot)) {
-        this._progress.removeChild(this._progressDot);
-      }
-    });
-    __publicField(this, "updateCurrentProgress", () => {
-      const percent = Number(this.percent) / Number(this.total);
-      this._progressWrapValue.style.setProperty("transform", `scaleX(${percent})`);
-      this._progressDot.style.setProperty("transform", `translateX(${percent * this._progress.offsetWidth}px)`);
-    });
-    __publicField(this, "dragEvent", () => {
-      if (this.type !== "drag") return;
-      this._progress.addEventListener("click", this.progressClick);
-      this._progressDot.addEventListener("mousedown", this.progressDotMouseDown);
-      document.addEventListener("mousemove", this.progressDotMouseMove);
-      document.addEventListener("mouseup", this.progressDotMouseUp);
-    });
-    __publicField(this, "resize", () => {
-      this.updateCurrentProgress();
-    });
-    this._progress = document.createElement("div");
-    this._progress.setAttribute("class", "ran-progress");
-    this._progress.setAttribute("role", "progressbar");
-    this._progressWrap = document.createElement("div");
-    this._progressWrap.setAttribute("class", "ran-progress-wrap");
-    this._progress.appendChild(this._progressWrap);
-    this._progressWrapValue = document.createElement("div");
-    this._progressWrapValue.setAttribute("class", "ran-progress-wrap-value");
-    this._progressWrap.appendChild(this._progressWrapValue);
-    this._progressDot = document.createElement("div");
-    this._progressDot.setAttribute("class", "ran-progress-dot");
-    this.moveProgress = {
-      mouseDown: false
-    };
-    this._progress.appendChild(this._progressDot);
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    this._shadowDom = shadowRoot;
-    shadowRoot.appendChild(this._progress);
-  }
-  static get observedAttributes() {
-    return attributes;
-  }
-  get percent() {
-    const percent = this.getAttribute("percent") || "";
-    const num = perToNum(percent);
-    if (Number(num) > Number(this.total)) {
-      console.error("percent must be < total");
-      return this.total;
-    }
-    return `${perToNum(percent)}`;
-  }
-  set percent(value) {
-    this.setAttribute("percent", `${value || 0}`);
-    this.setAttribute("aria-valuenow", `${value || 0}`);
-  }
-  get total() {
-    const total = this.getAttribute("total");
-    if (!total) return "1";
-    return `${perToNum(total)}`;
-  }
-  set total(value) {
-    this.setAttribute("total", value || "");
-  }
-  get type() {
-    const result = ["primary", "drag"];
-    const type = this.getAttribute("type") || "";
-    if (result.includes(type)) {
-      return type;
-    } else {
-      return "primary";
-    }
-  }
-  set type(value) {
-    this.setAttribute("type", value || "primary");
-  }
-  get animation() {
-    const result = ["play", "pause"];
-    const animation = this.getAttribute("animation") || "";
-    if (result.includes(animation)) {
-      return animation;
-    } else {
-      return "pause";
-    }
-  }
-  set animation(value) {
-    this.setAttribute("animation", value || "pause");
-  }
-  get dot() {
-    const result = ["true", "false"];
-    const dot = this.getAttribute("dot") || "";
-    if (result.includes(dot)) {
-      return dot;
-    } else {
-      return "true";
-    }
-  }
-  set dot(value) {
-    this.setAttribute("dot", value || "true");
-  }
-  connectedCallback() {
-    const type = this.getAttribute("type");
-    if (!type) {
-      this.setAttribute("type", "primary");
-    }
-    this.dragEvent();
-    this.updateCurrentProgress();
-    window.addEventListener("resize", this.resize);
-  }
-  disconnectCallback() {
-    this._progress.removeEventListener("click", this.progressClick);
-    this._progressDot.removeEventListener("mousedown", this.progressDotMouseDown);
-    document.removeEventListener("mousemove", this.progressDotMouseMove);
-    document.removeEventListener("mouseup", this.progressDotMouseUp);
-    window.removeEventListener("resize", this.resize);
-  }
-  attributeChangedCallback(k, o, n) {
-    if (o !== n) {
-      if (k === "dot") {
-        this.appendProgressDot();
-      }
-      if (k === "percent") {
-        this.updateCurrentProgress();
-      }
-    }
-  }
-}
-function Custom() {
-  if (typeof document !== "undefined" && !customElements.get("r-progress")) {
-    Progress && customElements.define("r-progress", Progress);
-    return Progress;
-  } else {
-    return createCustomError("document is undefined or r-progress is exist");
-  }
-}
-const index = Custom();
-const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Progress,
-  default: index
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  Progress as P,
-  index as a,
-  index$1 as i
-};