ranui 0.1.5 → 0.1.7

package/dist/index-48653b79.js

@@ -0,0 +1,162 @@
+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;
+};
+const f7170ee498e0dd32cbdcb63fba8f75cc = ':host([type="toast"]){--ranui-message-background: rgba(0, 0, 0, .7);--ranui-message-color: #fff;--ranui-message-border-radius: 7px}.ran-message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}.ran-message-notice-content{display:inline-block;padding:10px 16px;background:var(--ranui-message-background, #fff);border-radius:var(--ranui-message-border-radius, 8px);box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;pointer-events:all}.ran-message-notice-content-info{align-items:center;display:flex}.ran-message-notice-content-info span{margin:0;padding:0;color:var(--ranui-message-color, #000000d9);font-size:14px;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";z-index:1010;width:100%;pointer-events:none}@keyframes MessageMoveIn{0%{padding:0;transform:translateY(-100%);opacity:0}to{padding:8px;transform:translateY(0);opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.ranui-message .message-in{animation-name:MessageMoveIn;animation-duration:.3s;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}.ranui-message .message-leave{animation-name:MessageMoveOut;animation-duration:.3s;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}\n';
+const index$1 = "";
+const AnimationTime = 300;
+const defaultDuration = 3e3;
+const typeMapIcon = /* @__PURE__ */ new Map([
+  ["success", "check-circle-fill"],
+  ["warning", "warning-circle-fill"],
+  ["error", "close-circle-fill"],
+  ["info", "info-circle-fill"],
+  ["toast", null]
+]);
+const typeMapColor = /* @__PURE__ */ new Map([
+  ["success", "#52c41a"],
+  ["warning", "#faad14"],
+  ["error", "#ff4d4f"],
+  ["info", "#1890ff"],
+  ["toast", "rgba(0, 0, 0, 0.7)"]
+]);
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-message")) {
+    class CustomMessage extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_info");
+        __publicField(this, "_notice");
+        __publicField(this, "_content");
+        __publicField(this, "_icon");
+        __publicField(this, "_span");
+        __publicField(this, "timeId");
+        __publicField(this, "close");
+        /**
+         * @description: 设置图标
+         * @param {string} value
+         */
+        __publicField(this, "setIcon", (value) => {
+          var _a, _b, _c, _d;
+          const icon = typeMapIcon.get(value);
+          const color = typeMapColor.get(value);
+          if (icon) {
+            (_a = this._icon) == null ? void 0 : _a.setAttribute("name", icon);
+            (_b = this._icon) == null ? void 0 : _b.style.setProperty("margin-right", "8px");
+            (_c = this._icon) == null ? void 0 : _c.setAttribute("size", "18");
+            color && ((_d = this._icon) == null ? void 0 : _d.setAttribute("color", color));
+          }
+        });
+        this._notice = document.createElement("div");
+        this._notice.setAttribute("class", "ran-message-notice");
+        this._content = document.createElement("div");
+        this._content.setAttribute("class", "ran-message-notice-content");
+        this._info = document.createElement("div");
+        this._info.setAttribute("class", "ran-message-notice-content-info");
+        this._icon = document.createElement("r-icon");
+        this._span = document.createElement("span");
+        this._info.appendChild(this._icon);
+        this._info.appendChild(this._span);
+        this._content.appendChild(this._info);
+        this._notice.appendChild(this._content);
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._notice);
+      }
+      static get observedAttributes() {
+        return ["type", "content"];
+      }
+      get type() {
+        return this.getAttribute("type");
+      }
+      set type(value) {
+        if (value)
+          this.setAttribute("type", value);
+      }
+      get content() {
+        return this.getAttribute("content");
+      }
+      set content(value) {
+        if (value)
+          this.setAttribute("content", value);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "content" && oldValue !== newValue) {
+          this._span.textContent = newValue;
+        }
+        if (name === "type" && oldValue !== newValue) {
+          this.setIcon(newValue);
+        }
+      }
+    }
+    customElements.define("r-message", CustomMessage);
+    const container = document.createElement("div");
+    const div = document.createElement("div");
+    div.setAttribute("class", "ranui-message");
+    document.body.appendChild(container);
+    container.appendChild(div);
+    const commonPrompt = (type) => {
+      return (options) => {
+        const message2 = new CustomMessage();
+        message2.setAttribute("class", "message");
+        message2.timeId && clearTimeout(message2.timeId);
+        message2.setAttribute("type", type);
+        let duration = defaultDuration;
+        let close;
+        if (!options)
+          return;
+        if (typeof options === "string") {
+          message2.setAttribute("content", options);
+        } else {
+          message2.setAttribute("content", options.content);
+          close = options.close;
+          duration = options.duration || defaultDuration;
+        }
+        const time = setTimeout(() => {
+          message2.classList.remove("message-in");
+          message2.classList.add("message-leave");
+          clearTimeout(time);
+        }, duration - AnimationTime);
+        message2.timeId = setTimeout(() => {
+          message2.classList.remove("message-leave");
+          div.removeChild(message2);
+          if (close)
+            close();
+        }, duration);
+        div.appendChild(message2);
+        message2.classList.add("message-in");
+        setTimeout(() => {
+          message2.classList.remove("message-in");
+        }, AnimationTime);
+      };
+    };
+    return {
+      info: commonPrompt("info"),
+      success: commonPrompt("success"),
+      error: commonPrompt("error"),
+      warning: commonPrompt("warning"),
+      toast: commonPrompt("toast")
+    };
+  }
+  return {};
+}
+const message = Custom();
+if (typeof window !== "undefined" && message) {
+  window.message = message;
+  if (!window.ranui) {
+    window.ranui = {};
+  }
+  window.ranui.message = message;
+}
+const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: message
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  index as i,
+  message as m
+};

package/dist/index-4d873a42.js

@@ -0,0 +1,195 @@
+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 { j as judgeDevice } from "./index-d2d69b06.js";
+import { c as createCustomError, i as isDisabled, f as falseList } from "./index-57492b9b.js";
+const f7170ee498e0dd32cbdcb63fba8f75cc = ':host{position:relative;display:inline-block;background-image:none;box-shadow:0 2px #00000004;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;overflow:hidden;pointer-events:auto}:host .ran-btn{position:relative;display:inline-block;background-image:none;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;background:#fff}:host,:host(:active),:host(:focus){outline:0}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:0}:host(:not([disabled]):hover) .ran-btn-content{border-color:#1890ff;color:#1890ff}:host([type="primary"]) .ran-btn-content{border-color:#1890ff;background-color:#1890ff;color:#fff}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:#40a9ff;color:#fff}:host([type="warning"]) .ran-btn-content{border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]) .ran-btn-content{border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host([disabled]) .ran-btn{cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active) .ran-btn:after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}@media (min-width: 1024px){:host(:not([disabled],[effect])) .ran-btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,#1890ff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}}:host .slot{display:block}.ran-btn-content{display:flex;justify-content:space-between;align-items:center;padding:4px 15px;border:1px solid transparent;border-radius:2px;border-color:#d9d9d9;color:#000000d9;line-height:22px;font-size:14px;font-weight:400;white-space:nowrap;text-align:center}.ran-btn-content .icon{margin-right:2px}\n';
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-button")) {
+    class Button extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_btn");
+        __publicField(this, "_btnContent");
+        __publicField(this, "_iconElement");
+        __publicField(this, "_slot");
+        __publicField(this, "_shadowDom");
+        __publicField(this, "debounceTimeId");
+        /**
+         * @description: 设置button的icon
+         * @return {*}
+         */
+        __publicField(this, "setIcon", () => {
+          if (this.icon) {
+            const { width, height } = this._slot.getBoundingClientRect();
+            const size = Math.min(width, height);
+            if (this._iconElement) {
+              this._iconElement.setAttribute("name", this.icon);
+            } else {
+              this._iconElement = document.createElement("r-icon");
+              this._iconElement.setAttribute("name", this.icon);
+              this._iconElement.setAttribute("color", "currentColor");
+              this._iconElement.setAttribute("class", "icon");
+              this._slot.insertAdjacentElement("beforebegin", this._iconElement);
+            }
+            if (this.iconSize) {
+              this._iconElement.setAttribute("size", this.iconSize);
+            } else {
+              this._iconElement.setAttribute("size", `${size - 5}`);
+            }
+          }
+        });
+        __publicField(this, "mousedown", (event) => {
+          if (judgeDevice() !== "pc")
+            return;
+          if (!this.disabled || this.disabled === "false") {
+            this.debounceMouseEvent();
+            const { left, top } = this.getBoundingClientRect();
+            this._btn.style.setProperty("--ran-x", event.clientX - left + "px");
+            this._btn.style.setProperty("--ran-y", event.clientY - top + "px");
+          }
+        });
+        __publicField(this, "mouseup", (event) => {
+          if (judgeDevice() !== "pc")
+            return;
+          if (this.debounceTimeId)
+            return;
+          this.debounceTimeId = setTimeout(() => {
+            this._btn.style.removeProperty("--ran-x");
+            this._btn.style.removeProperty("--ran-y");
+            this.debounceMouseEvent();
+          }, 600);
+        });
+        __publicField(this, "debounceMouseEvent", () => {
+          clearTimeout(this.debounceTimeId);
+          this.debounceTimeId = void 0;
+        });
+        this._slot = document.createElement("slot");
+        this._btnContent = document.createElement("div");
+        this._btn = document.createElement("div");
+        this._btn.setAttribute("class", "ran-btn");
+        this._btn.setAttribute("part", "ran-btn");
+        this._btnContent.setAttribute("class", "ran-btn-content");
+        this._btnContent.setAttribute("part", "ran-btn-content");
+        this._btnContent.appendChild(this._slot);
+        this._slot.setAttribute("class", "slot");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        this._shadowDom = shadowRoot;
+        this._btn.appendChild(this._btnContent);
+        shadowRoot.appendChild(this._btn);
+      }
+      static get observedAttributes() {
+        return ["disabled", "icon", "effect", "iconSize", "sheet"];
+      }
+      get sheet() {
+        return this.getAttribute("sheet");
+      }
+      set sheet(value) {
+        this.setAttribute("sheet", value || "");
+      }
+      get disabled() {
+        return isDisabled(this);
+      }
+      set disabled(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("disabled");
+          this.removeAttribute("aria-disabled");
+        } else {
+          this.setAttribute("disabled", "");
+          this.setAttribute("aria-disabled", "true");
+        }
+      }
+      get iconSize() {
+        return this.getAttribute("iconSize");
+      }
+      set iconSize(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("iconSize");
+        } else {
+          this.setAttribute("iconSize", value);
+          this.setIcon();
+        }
+      }
+      get icon() {
+        return this.getAttribute("icon");
+      }
+      set icon(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("icon");
+        } else {
+          this.setAttribute("icon", value);
+          this.setIcon();
+        }
+      }
+      get effect() {
+        return this.getAttribute("effect");
+      }
+      set effect(value) {
+        if (falseList.includes(value) || !value) {
+          this.removeAttribute("effect");
+        } else {
+          this.setAttribute("effect", value);
+        }
+      }
+      handlerExternalCss() {
+        if (this.sheet) {
+          try {
+            const sheet = new CSSStyleSheet();
+            sheet.insertRule(this.sheet);
+            this._shadowDom.adoptedStyleSheets = [sheet];
+          } catch (error) {
+            console.error(
+              `Failed to parse the rule in CSSStyleSheet: ${this.sheet}`
+            );
+          }
+        }
+      }
+      connectedCallback() {
+        this._btn.addEventListener("mousedown", this.mousedown);
+        this._btn.addEventListener("mouseup", this.mouseup);
+        this.handlerExternalCss();
+        this.setIcon();
+        this.setAttribute("role", "button");
+        this.setAttribute("tabindex", "0");
+      }
+      disconnectCallback() {
+        this._btn.removeEventListener("mousedown", this.mousedown);
+        this._btn.removeEventListener("mouseup", this.mouseup);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "disabled" && this._btnContent) {
+          if (!newValue || newValue === "false") {
+            this._btnContent.setAttribute("disabled", "");
+          } else {
+            this._btnContent.removeAttribute("disabled");
+          }
+        }
+        if (name === "icon" && this._btnContent && oldValue !== newValue)
+          this.setIcon();
+        if (name === "iconSize" && this._btnContent && oldValue !== newValue)
+          this._btnContent.setAttribute("iconSize", newValue);
+        if (name === "sheet" && this._shadowDom && oldValue !== newValue)
+          this.handlerExternalCss();
+      }
+    }
+    customElements.define("r-button", Button);
+    return Button;
+  } else {
+    return createCustomError("document is undefined or r-button 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
+};

package/dist/index-57492b9b.js

@@ -0,0 +1,48 @@
+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;
+};
+const falseList = [false, "false", null, void 0];
+const isDisabled = (element) => {
+  const status = element.hasAttribute("disabled");
+  const value = element.getAttribute("disabled");
+  if (status && !falseList.includes(value))
+    return true;
+  return false;
+};
+const removeClassToElementChild = (parent, deleteClass) => {
+  const pre = parent.querySelectorAll(`.${deleteClass}`);
+  if (pre.length > 0) {
+    pre.forEach((item) => item.classList.remove(deleteClass));
+  }
+};
+const loadScript = (src) => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.onload = function() {
+      resolve({ success: true });
+    };
+    script.onerror = function(error) {
+      reject({ success: false, error });
+    };
+    document.body.append(script);
+  });
+};
+function createCustomError(msg) {
+  return class CustomError {
+    constructor(message = msg) {
+      __publicField(this, "message");
+      this.message = message;
+    }
+  };
+}
+export {
+  createCustomError as c,
+  falseList as f,
+  isDisabled as i,
+  loadScript as l,
+  removeClassToElementChild as r
+};

package/dist/index-5975bbc0.js

@@ -0,0 +1,126 @@
+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;
+};
+const f7170ee498e0dd32cbdcb63fba8f75cc = "";
+function CustomElement() {
+  if (typeof window !== "undefined" && !customElements.get("r-tab")) {
+    class TabPane extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_div");
+        __publicField(this, "parent");
+        /**
+         * @description: 在页面元素都加载完毕后，设置 tab 上的图标
+         */
+        __publicField(this, "initAttribute", () => {
+          var _a, _b, _c;
+          this.parent = this.parentNode;
+          this.key && ((_a = this.parent) == null ? void 0 : _a.updateAttribute(this.key, "icon", this.icon));
+          this.key && ((_b = this.parent) == null ? void 0 : _b.updateAttribute(this.key, "iconSize", this.iconSize));
+          this.key && ((_c = this.parent) == null ? void 0 : _c.updateAttribute(this.key, "effect", this.effect));
+        });
+        this._div = document.createElement("slot");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._div);
+      }
+      static get observedAttributes() {
+        return ["label", "key", "disabled", "icon", "effect", "iconSize"];
+      }
+      get label() {
+        return this.getAttribute("label") || "";
+      }
+      set label(value) {
+        this.setAttribute("label", value);
+      }
+      get icon() {
+        return this.getAttribute("icon");
+      }
+      set icon(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("icon");
+        } else {
+          this.setAttribute("icon", value);
+        }
+      }
+      get iconSize() {
+        return this.getAttribute("iconSize");
+      }
+      set iconSize(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("iconSize");
+        } else {
+          this.setAttribute("iconSize", value);
+        }
+      }
+      get key() {
+        return this.getAttribute("r-key");
+      }
+      set key(value) {
+        if (value) {
+          this.setAttribute("r-key", value);
+        } else {
+          this.removeAttribute("r-key");
+        }
+      }
+      get disabled() {
+        return this.getAttribute("disabled");
+      }
+      set disabled(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("disabled");
+        } else {
+          this.setAttribute("disabled", value);
+        }
+      }
+      get effect() {
+        return this.getAttribute("effect");
+      }
+      set effect(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("effect");
+        } else {
+          this.setAttribute("effect", value);
+        }
+      }
+      onClick(e) {
+      }
+      connectedCallback() {
+        this._div.addEventListener("click", this.onClick);
+        document.addEventListener("DOMContentLoaded", this.initAttribute);
+      }
+      disconnectCallback() {
+        document.removeEventListener("DOMContentLoaded", this.initAttribute);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        var _a, _b, _c, _d, _e;
+        if (oldValue !== newValue && this.key && ((_a = this.parent) == null ? void 0 : _a.updateAttribute)) {
+          if (name === "icon")
+            (_b = this.parent) == null ? void 0 : _b.updateAttribute(this.key, "icon", newValue);
+          if (name === "iconSize")
+            (_c = this.parent) == null ? void 0 : _c.updateAttribute(this.key, "iconSize", newValue);
+          if (name === "effect")
+            (_d = this.parent) == null ? void 0 : _d.updateAttribute(this.key, "effect", newValue);
+          if (name === "disabled")
+            (_e = this.parent) == null ? void 0 : _e.updateAttribute(this.key, "disabled", newValue);
+        }
+      }
+    }
+    customElements.define("r-tab", TabPane);
+    return TabPane;
+  }
+}
+const index = CustomElement();
+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
+};