ranui 0.1.0-alpha → 0.1.1-alpha.12

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * as button from './components/button';
+export * as icon from './components/icon';
+export * as image from './components/image';
+export * as input from './components/input';
+export * as message from './components/message';
+export * as preview from './components/preview';
+export * as skeleton from './components/skeleton';
+export * as tabpane from './components/tabpane';
+export * as tabs from './components/tabs';

package/dist/index.js

@@ -1,677 +1,12 @@
-const f7170ee498e0dd32cbdcb63fba8f75cc$4 = ':host{position:relative;display:inline-block;font-weight:400;white-space:nowrap;text-align:center;background-image:none;border:1px solid transparent;box-shadow:0 2px #00000004;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;line-height:22px;font-size:14px;border-radius:2px;color:#000000d9;border-color:#d9d9d9;background:#fff;overflow:hidden;pointer-events:auto}:host,:host(:active),:host(:focus){outline:0}:host(:not([disabled]):hover){border-color:#1890ff;color:#1890ff}:host([type="primary"]){border-color:#1890ff;background-color:#1890ff;color:#fff}:host([type="primary"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="primary"]:not([disabled]):hover){background-color:#40a9ff;color:#fff}:host([type="warning"]){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]){border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active):after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}:host(:active) .btn:before{opacity:.2}:host(:not([disabled])):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;margin:4px 15px}\n';
-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;
+import { i, a, b, c, d, e, f, g, h } from "./index-d9a6fb36.js";
+export {
+  i as button,
+  a as icon,
+  b as image,
+  c as input,
+  d as message,
+  e as preview,
+  f as skeleton,
+  g as tabpane,
+  h as tabs
 };
-class CustomElement$4 extends HTMLElement {
-  constructor() {
-    super();
-    this.mousedown = (event) => {
-      if (!this.disabled || this.disabled === "false") {
-        const { left, top } = this.getBoundingClientRect();
-        this.style.setProperty("--ran-x", event.clientX - left + "px");
-        this.style.setProperty("--ran-y", event.clientY - top + "px");
-      }
-    };
-    this.mouseLeave = () => {
-      this.style.removeProperty("--ran-x");
-      this.style.removeProperty("--ran-y");
-    };
-    const slot = document.createElement("slot");
-    this._btn = document.createElement("div");
-    this._btn.appendChild(slot);
-    slot.setAttribute("class", "slot");
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$4;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    shadowRoot.appendChild(this._btn);
-  }
-  static get observedAttributes() {
-    return ["disabled", "type"];
-  }
-  get disabled() {
-    return isDisabled(this);
-  }
-  set disabled(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("disabled");
-    } else {
-      this.setAttribute("disabled", "");
-    }
-  }
-  connectedCallback() {
-    this._btn.addEventListener("mousedown", this.mousedown);
-    this._btn.addEventListener("mouseleave", this.mouseLeave);
-  }
-  disconnectCallback() {
-    this._btn.removeEventListener("mousedown", this.mousedown);
-    this._btn.removeEventListener("mouseleave", this.mouseLeave);
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name == "disabled" && this._btn) {
-      if (!newValue || newValue === "false") {
-        this._btn.setAttribute("disabled", "");
-      } else {
-        this._btn.removeAttribute("disabled");
-      }
-    }
-  }
-}
-function Custom$2() {
-  if (!customElements.get("r-button")) {
-    customElements.define("r-button", CustomElement$4);
-  }
-}
-Custom$2();
-const f7170ee498e0dd32cbdcb63fba8f75cc$3 = "";
-class CustomElement$3 extends HTMLElement {
-  constructor() {
-    super();
-    this._container = document.createElement("div");
-    this._container.setAttribute("class", "r-image");
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$3;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    shadowRoot.appendChild(this._container);
-  }
-  static get observedAttributes() {
-    return ["fallback"];
-  }
-  get fallback() {
-    return this.getAttribute("fallback");
-  }
-  set fallback(value) {
-    if (value) {
-      this.setAttribute("fallback", value);
-    } else {
-      this.removeAttribute("fallback");
-    }
-  }
-  listenFallback(name, value) {
-    if (name === "fallback" && this._image) {
-      if (value) {
-        this._image.setAttribute("fallback", value);
-      } else {
-        this._image.removeAttribute("fallback");
-      }
-    }
-  }
-  connectedCallback() {
-    const src = this.getAttribute("src") || "";
-    this._image = new Image();
-    this._image.src = src;
-    this._image.addEventListener("error", () => {
-      if (this._image && this.fallback) {
-        this._image.src = this.fallback;
-      }
-    });
-    this._image.addEventListener("load", () => {
-      if (this._image) {
-        this._container.appendChild(this._image);
-      }
-    });
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.listenFallback(name, newValue);
-  }
-}
-function Custom$1() {
-  if (!customElements.get("r-img")) {
-    customElements.define("r-img", CustomElement$3);
-  }
-}
-Custom$1();
-const f7170ee498e0dd32cbdcb63fba8f75cc$2 = '.input{position:relative;display:inline-block;width:100%;min-width:0;padding:2px 8px;color:#000000d9;font-size:12px;line-height:1.5715;background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:2px;transition:all .3s}.input:active{border-color:#40a9ff;box-shadow:0 0 0 2px #1890ff33;border-right-width:1px;outline:0}.input:hover{border-color:#40a9ff;border-right-width:1px}.input>.input-main:hover~.input-label{color:#40a9ff}.input[value]>.input-label{transform:translateY(calc(-50% - .43em)) scale(.8);color:#00000040}.input[disabled]{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main:hover~.input-label{color:#999}.input[disabled]>.input-label{color:#999;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed}.input-main{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.5715;background-color:#fff;background-image:none;transition:all .3s}.input-main:focus,.input-main:hover{border:none;outline:0}.input-main::placeholder{color:#999}.input-main:placeholder-shown~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-main:focus~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-label{pointer-events:none;position:absolute;font-size:14px;left:8px;transition:transform .3s,color .3s,background-color .3s;transform-origin:left;padding:0 .2em;color:#999;backdrop-filter:blur(10px);opacity:.9}\n';
-class CustomElement$2 extends HTMLElement {
-  constructor() {
-    super();
-    this.inputValue = (event) => {
-      event.stopPropagation();
-      const target = event.target;
-      this.value = target ? target.value : "";
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: {
-            value: this.value
-          }
-        })
-      );
-    };
-    this.change = () => {
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: {
-            value: this.value
-          }
-        })
-      );
-    };
-    this.focus = () => {
-      this.dispatchEvent(
-        new CustomEvent("focus", {
-          detail: {
-            value: this.value
-          }
-        })
-      );
-    };
-    this.checkout = () => {
-    };
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$2;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    this._container = document.createElement("div");
-    this._container.setAttribute("class", "input");
-    this._input = document.createElement("input");
-    this._input.setAttribute("class", "input-main");
-    this._container.appendChild(this._input);
-    shadowRoot.appendChild(this._container);
-  }
-  static get observedAttributes() {
-    return [
-      "label",
-      "disabled",
-      "name",
-      "pattern",
-      "required",
-      "placeholder",
-      "type"
-    ];
-  }
-  get value() {
-    return this.getAttribute("value");
-  }
-  set value(value) {
-    if (!isDisabled(this) && value) {
-      this.setAttribute("value", value);
-      this._container.setAttribute("value", value);
-    } else {
-      this.removeAttribute("value");
-      this._container.removeAttribute("value");
-    }
-  }
-  get placeholder() {
-    return this.getAttribute("placeholder");
-  }
-  set placeholder(value) {
-    if (value) {
-      this.setAttribute("placeholder", value);
-    } else {
-      this.removeAttribute("placeholder");
-    }
-  }
-  get required() {
-    return this.getAttribute("required");
-  }
-  set required(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("required");
-    } else {
-      this.setAttribute("required", "");
-    }
-  }
-  get warning() {
-    return this.getAttribute("warning");
-  }
-  set warning(value) {
-    if (!value) {
-      this.removeAttribute("warning");
-    } else {
-      this.setAttribute("warning", value);
-    }
-  }
-  get pattern() {
-    return this.getAttribute("pattern");
-  }
-  set pattern(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("pattern");
-    } else {
-      this.setAttribute("pattern", value);
-    }
-  }
-  get disabled() {
-    return isDisabled(this);
-  }
-  set disabled(value) {
-    if (falseList.includes(value)) {
-      this.removeAttribute("disabled");
-      this._container.removeAttribute("disabled");
-      this._input.removeAttribute("disabled");
-    } else {
-      this.setAttribute("disabled", "");
-      this._container.setAttribute("disabled", "");
-      this._input.setAttribute("disabled", "");
-    }
-  }
-  get label() {
-    return this.getAttribute("label") || "";
-  }
-  set label(value) {
-    this.setAttribute("label", value);
-  }
-  get name() {
-    return this.getAttribute("name") || "";
-  }
-  set name(value) {
-    this.setAttribute("name", value);
-  }
-  get icon() {
-    return this.getAttribute("icon");
-  }
-  set icon(value) {
-    if (value) {
-      this.setAttribute("icon", value);
-    } else {
-      this.removeAttribute("icon");
-    }
-  }
-  get type() {
-    return this.getAttribute("type");
-  }
-  set type(value) {
-    if (value) {
-      this.setAttribute("type", value);
-    } else {
-      this.removeAttribute("type");
-    }
-  }
-  listenPlaceholder(name, value) {
-    if (name === "placeholder" && this._input) {
-      if (value !== null) {
-        this._input.setAttribute("placeholder", value);
-      } else {
-        this._input.removeAttribute("placeholder");
-      }
-    }
-  }
-  listenRequired(name, value) {
-    if (name === "required" && this._input) {
-      if (value && value !== "false") {
-        this._input.setAttribute("required", "");
-      } else {
-        this._input.removeAttribute("required");
-      }
-    }
-  }
-  listenPattern(name, value) {
-    if (name === "pattern" && this._input) {
-      if (value && value !== "false") {
-        this._input.setAttribute("pattern", value);
-      } else {
-        this._input.removeAttribute("pattern");
-      }
-    }
-  }
-  listenLabel(name, value) {
-    if (name === "label" && this._input) {
-      if (value !== null) {
-        if (this._label) {
-          this._label.innerHTML = value;
-        } else {
-          this._label = document.createElement("label");
-          this._label.innerHTML = value;
-          this._label.setAttribute("class", "input-label");
-          this._container.appendChild(this._label);
-        }
-      } else {
-        this._container.removeAttribute("label");
-        if (this._label) {
-          this._container.removeChild(this._label);
-          this._label = void 0;
-        }
-      }
-    }
-  }
-  listenType(name, value) {
-    if (name === "type" && this._input) {
-      if (value) {
-        this._input.setAttribute("type", value);
-      } else {
-        this._input.removeAttribute("type");
-      }
-    }
-  }
-  connectedCallback() {
-    if (this.value) {
-      this._input.value = this.value;
-      this._container.setAttribute("value", this.value);
-    }
-    if (isDisabled(this)) {
-      this._container.setAttribute("disabled", "");
-      this._input.setAttribute("disabled", "");
-    }
-    if (this.type) {
-      this._input.setAttribute("type", this.type);
-    }
-    this._input.addEventListener("input", this.inputValue);
-    this._input.addEventListener("change", this.change);
-    this._input.addEventListener("focus", this.focus);
-  }
-  disconnectCallback() {
-    this._input.removeEventListener("input", this.inputValue);
-    this._input.removeEventListener("change", this.change);
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.listenPlaceholder(name, newValue);
-    this.listenRequired(name, newValue);
-    this.listenPattern(name, newValue);
-    this.listenLabel(name, newValue);
-  }
-}
-function Custom() {
-  if (!customElements.get("r-input")) {
-    customElements.define("r-input", CustomElement$2);
-  }
-}
-Custom();
-function Modal() {
-  const template = document.createElement("template");
-  const div = document.createElement("div");
-  div.setAttribute("class", "modal-content");
-  const slot = document.createElement("slot");
-  slot.setAttribute("name", "modal-content");
-  div.appendChild(slot);
-  template == null ? void 0 : template.appendChild(div);
-  class Modal2 extends HTMLElement {
-    constructor() {
-      super();
-      const templateContent = template.content;
-      const shadowRoot = this.attachShadow({ mode: "open" });
-      const wrap = document.createElement("div");
-      const modal = document.createElement("div");
-      const header = document.createElement("header");
-      const btnClose = document.createElement("span");
-      const mask = document.createElement("div");
-      const footer = document.createElement("footer");
-      const btnCancel = document.createElement("xu-button");
-      const btnOk = document.createElement("xu-button");
-      wrap.setAttribute("class", "wrap");
-      modal.setAttribute("class", "xu-modal");
-      let title = this.getAttribute("title");
-      header.textContent = title;
-      btnClose.setAttribute("class", "xu-close");
-      btnClose.textContent = "x";
-      header.appendChild(btnClose);
-      modal.appendChild(header);
-      btnClose.addEventListener("click", () => {
-        wrap.style.display = "none";
-      });
-      modal.appendChild(templateContent.cloneNode(true));
-      btnOk.setAttribute("type", "primary");
-      const slot1 = document.createElement("span");
-      slot1.setAttribute("slot", "btn-content");
-      slot1.textContent = "\u786E\u8BA4";
-      btnOk.appendChild(slot1);
-      const slot2 = document.createElement("span");
-      slot2.setAttribute("slot", "btn-content");
-      slot2.textContent = "\u53D6\u6D88";
-      btnCancel.appendChild(slot2);
-      footer.appendChild(btnCancel);
-      footer.appendChild(btnOk);
-      modal.appendChild(footer);
-      mask.setAttribute("class", "mask");
-      wrap.appendChild(mask);
-      wrap.appendChild(modal);
-      const style = document.createElement("style");
-      this.getAttribute("width");
-      const isVisible = this.getAttribute("visible");
-      style.textContent = `
-        .wrap {
-          position: fixed;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          top: 0;
-          display: ${isVisible === "true" ? "block" : "none"}
-        }
-        // \u5FFD\u7565\u90E8\u5206\u6837\u5F0F
-      `;
-      shadowRoot.appendChild(style);
-      shadowRoot.appendChild(wrap);
-    }
-    connectedCallback(el) {
-      console.log("insert dom", el);
-    }
-    disconnectedCallback() {
-      console.log("Custom square element removed from page.");
-    }
-    adoptedCallback() {
-      console.log("Custom square element moved to new page.");
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-      var _a;
-      if (oldValue && this.shadowRoot) {
-        const children = [...this.shadowRoot.children];
-        for (let i = 0; i < children.length; i++) {
-          if (children[i].nodeName === "DIV" && ((_a = children[i]) == null ? void 0 : _a.className) === "wrap") {
-            if (newValue === "true") {
-              children[i].style.display = "block";
-            } else {
-              children[i].style.display = "none";
-            }
-          }
-        }
-      }
-    }
-    static get observedAttributes() {
-      return ["visible"];
-    }
-  }
-  window.customElements.define("xu-modal", Modal2);
-}
-Modal();
-const f7170ee498e0dd32cbdcb63fba8f75cc$1 = "";
-class TabPane extends HTMLElement {
-  constructor() {
-    super();
-    this._div = document.createElement("slot");
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$1;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    shadowRoot.appendChild(this._div);
-  }
-  static get observedAttributes() {
-    return ["label", "key", "disabled", "icon"];
-  }
-  get label() {
-    return this.getAttribute("label") || "";
-  }
-  set label(value) {
-    this.setAttribute("label", value);
-  }
-  get icon() {
-    return this.getAttribute("icon");
-  }
-  get key() {
-    return this.getAttribute("key");
-  }
-  set key(value) {
-    if (value) {
-      this.setAttribute("key", value);
-    } else {
-      this.removeAttribute("key");
-    }
-  }
-  get disabled() {
-    return this.getAttribute("disabled");
-  }
-  set disabled(value) {
-    if (!value || value === "false") {
-      this.removeAttribute("disabled");
-    } else {
-      this.setAttribute("disabled", value);
-    }
-  }
-  onClick(e) {
-    console.log("e", e);
-  }
-  connectedCallback() {
-    this._div.addEventListener("click", this.onClick);
-  }
-  disconnectCallback() {
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-  }
-}
-function CustomElement$1() {
-  if (!customElements.get("r-tab")) {
-    customElements.define("r-tab", TabPane);
-  }
-}
-CustomElement$1();
-const f7170ee498e0dd32cbdcb63fba8f75cc = ".tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto}.tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.tab-header_nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.tab-header_line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--themeColor, #1890ff);transition:.2s}.tab-content{overflow:hidden}.tab-content_wrap{display:flex;width:100%;height:100%;transition:.2s}\n";
-class Tabs extends HTMLElement {
-  constructor() {
-    super();
-    this.initTabHeaderKeyMapIndex = (key, index) => {
-      const value = this.tabHeaderKeyMapIndex[key];
-      if (value) {
-        throw new Error("tab \u7EC4\u4EF6\u7684 key \u503C\u5B58\u5728\u91CD\u590D, \u6216\u8005\u67D0\u4E2A tab \u7EC4\u4EF6\u7F3A\u5C11 key \u5C5E\u6027");
-      } else {
-        this.tabHeaderKeyMapIndex[key] = index;
-      }
-    };
-    this.setTabLine = (key) => {
-      if (key) {
-        const index = this.tabHeaderKeyMapIndex[key];
-        this._line.style.setProperty("transform", `translateX(${100 * index}%)`);
-      }
-    };
-    this.setTabContent = (key) => {
-      if (key) {
-        const index = this.tabHeaderKeyMapIndex[key];
-        this._wrap.style.setProperty("transform", `translateX(${index * -100}%)`);
-      }
-    };
-    this.clickTabHead = (e) => {
-      const tabHeader = e.target;
-      const key = tabHeader.getAttribute("ran-key");
-      const disabled = isDisabled(tabHeader);
-      if (!disabled && key) {
-        this.setAttribute("active", key);
-        this.setTabLine(key);
-        this.setTabContent(key);
-      }
-    };
-    this.initActive = () => {
-      const tabHeaderList = [...this._nav.children];
-      const initTabHeader = tabHeaderList.filter((item) => !isDisabled(item)).shift();
-      if (!initTabHeader)
-        return;
-      const index = tabHeaderList.findIndex((item) => item === initTabHeader);
-      const key = (initTabHeader == null ? void 0 : initTabHeader.getAttribute("ran-key")) || `${index}`;
-      if (this.active === null && key !== null) {
-        this.setAttribute("active", `${key}`);
-        const { width = 0 } = initTabHeader.getBoundingClientRect();
-        this._line.style.setProperty("width", `${width}px`);
-        this.setTabLine(key);
-        this.setTabContent(key);
-      }
-    };
-    this.listenSlotChange = () => {
-      const slots = this._slot.assignedElements();
-      slots.forEach((item, index) => {
-        const tabPane = this.createTabHeader(item, index);
-        this._nav.appendChild(tabPane);
-        tabPane.addEventListener("click", this.clickTabHead);
-      });
-      this.initActive();
-    };
-    this._container = document.createElement("div");
-    this._container.setAttribute("class", "tab");
-    this._header = document.createElement("div");
-    this._header.setAttribute("class", "tab-header");
-    this._nav = document.createElement("div");
-    this._nav.setAttribute("class", "tab-header_nav");
-    this._line = document.createElement("div");
-    this._line.setAttribute("class", "tab-header_line");
-    this._content = document.createElement("div");
-    this._content.setAttribute("class", "tab-content");
-    this._wrap = document.createElement("div");
-    this._wrap.setAttribute("class", "tab-content_wrap");
-    this._slot = document.createElement("slot");
-    this._wrap.appendChild(this._slot);
-    this._content.appendChild(this._wrap);
-    this._header.appendChild(this._nav);
-    this._header.appendChild(this._line);
-    this._container.appendChild(this._header);
-    this._container.appendChild(this._content);
-    this.tabHeaderKeyMapIndex = {};
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    shadowRoot.appendChild(this._container);
-  }
-  static get observedAttributes() {
-    return ["active", "forceRender"];
-  }
-  get align() {
-    return this.getAttribute("align") || "start";
-  }
-  set align(value) {
-    this.setAttribute("align", value);
-  }
-  get type() {
-    return this.getAttribute("type") || "flat";
-  }
-  get active() {
-    return this.getAttribute("active");
-  }
-  set active(value) {
-    if (value) {
-      this.setAttribute("active", value);
-      this.setTabLine(value);
-      this.setTabContent(value);
-    } else {
-      this.removeAttribute("active");
-    }
-  }
-  set type(value) {
-    this.setAttribute("type", value);
-  }
-  createTabHeader(tabPane, index) {
-    const label = tabPane.getAttribute("label") || "";
-    const key = tabPane.getAttribute("key") || `${index}`;
-    const type = tabPane.getAttribute("type") || "text";
-    this.initTabHeaderKeyMapIndex(key, index);
-    const tabHeader = document.createElement("r-button");
-    tabHeader.setAttribute("class", "tab-header_nav__item");
-    tabHeader.setAttribute("type", type);
-    isDisabled(tabPane) && tabHeader.setAttribute("disabled", "");
-    tabHeader.setAttribute("ran-key", key);
-    tabHeader.innerHTML = label;
-    return tabHeader;
-  }
-  connectedCallback() {
-    this._slot.addEventListener("slotchange", this.listenSlotChange);
-  }
-  disconnectCallback() {
-    this._slot.removeEventListener("slotchange", this.listenSlotChange);
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      this.dispatchEvent(new CustomEvent("change", {
-        detail: {
-          active: this.active
-        }
-      }));
-    }
-  }
-}
-function CustomElement() {
-  if (!customElements.get("r-tabs")) {
-    customElements.define("r-tabs", Tabs);
-  }
-}
-CustomElement();
-//# sourceMappingURL=index.js.map