ranui 0.1.10-alpha.9 → 0.2.0-alpha.1

package/dist/index-C9z10IgG.js

@@ -1,103 +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 { c as create, a as addClassToElement, r as removeClassToElement } from "./arrow-down-B_hCY3Wt.js";
-import { c as createCustomError, H as HTMLElementSSR } 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}@keyframes ranui-dropdown-down-in{0%{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}to{transform:scaleY(1);transform-origin:100% 100%;opacity:1}}@keyframes ranui-dropdown-down-out{0%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}to{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}}@keyframes ranui-dropdown-up-in{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-up-out{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}.ran-dropdown-down-in{animation:ranui-dropdown-up-in .2s;animation-fill-mode:forwards}.ran-dropdown-down-out{animation:ranui-dropdown-up-out .2s;animation-fill-mode:forwards}.ran-dropdown-up-in{animation:ranui-dropdown-down-in .2s;animation-fill-mode:forwards}.ran-dropdown-up-out{animation:ranui-dropdown-down-out .2s;animation-fill-mode:forwards}:host{text-align:var(--ran-dropdown-host-text-align, left);z-index:10}.ranui-dropdown{transform-origin:var(--ran-x, 50%) var(--ran-y, 50%);box-sizing:var(--ran-dropdown-box-sizing, border-box);margin:var(--ran-dropdown-margin, 0);padding:var(--ran-dropdown-padding, 4px);color:var(--ran-dropdown-color, rgba(0, 0, 0, .88));font-size:var(--ran-dropdown-font-size, 14px);list-style:var(--ran-dropdown-list-style, none);font-family:var(--ran-dropdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");z-index:var(--ran-dropdown-z-index, 1050);overflow:var(--ran-dropdown-overflow, hidden);font-variant:var(--ran-dropdown-font-variant, initial);background:var(--ran-dropdown-background, #ffffff);border-radius:var(--ran-dropdown-border-radius, 8px);outline:var(--ran-dropdown-outline, none);box-shadow:var(--ran-dropdown-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05));cursor:var(--ran-dropdown-cursor, pointer);width:var(--ran-dropdown-width, 100%)}.ranui-dropdown-container{position:var(--ran-dropdown-container-position, relative);display:var(--ran-dropdown-container-display, inline-block);width:var(--ran-dropdown-container-width, 100%);min-width:var(--ran-popover-width)}.ranui-dropdown-container .top{transform:translate(calc(var(--ran-popover-width) / 2 - 8px)) translateY(-16px) rotate(0);top:0}.ranui-dropdown-container .bottom{transform:translate(calc(var(--ran-popover-width) / 2 - 8px)) translateY(0) rotate(180deg);top:calc(var(--ran-popover-height) - 4px,0px)}.ranui-dropdown-arrow{position:var(--ran-dropdown-arrow-position, absolute);z-index:var(--ran-dropdown-arrow-z-index, 1);display:var(--ran-dropdown-arrow-display, block);pointer-events:var(--ran-dropdown-arrow-pointer-events, none);width:var(--ran-dropdown-arrow-width, 16px);height:var(--ran-dropdown-arrow-height, 16px);overflow:var(--ran-dropdown-arrow-overflow, hidden)}.ranui-dropdown-arrow:before{background:var(--ran-dropdown-arrow-before-background, #fff);position:var(--ran-dropdown-arrow-before-position, absolute);bottom:var(--ran-dropdown-arrow-before-bottom, 0);inset-inline-start:0;width:var(--ran-dropdown-arrow-before-width, 16px);height:var(--ran-dropdown-arrow-before-height, 8px );clip-path:path("M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z");content:var(--ran-dropdown-arrow-before-content, "")}.ranui-dropdown-arrow:after{content:var(--ran-dropdown-arrow-after-content, "");position:var(--ran-dropdown-arrow-after-position, absolute);width:var(--ran-dropdown-arrow-after-width, 9px);height:var(--ran-dropdown-arrow-after-height, 9px);bottom:var(--ran-dropdown-arrow-after-bottom, 0);inset-inline:0;margin:var(--ran-dropdown-arrow-after-margin, auto);border-radius:var(--ran-dropdown-arrow-after-border-radius, 0 0 2px 0);transform:var(--ran-dropdown-arrow-after-transform, translateY(50%) rotate(-135deg));box-shadow:var(--ran-dropdown-arrow-after-box-shadow, 2px 2px 5px rgba(0, 0, 0, .05));z-index:var(--ran-dropdown-arrow-after-z-index, 0);background:var(--ran-dropdown-arrow-after-background, transparent)}';
-const animationTime = 300;
-class Dropdown extends HTMLElementSSR() {
-  constructor() {
-    super();
-    __publicField(this, "dropdown");
-    __publicField(this, "_slot");
-    __publicField(this, "_shadowDom");
-    __publicField(this, "arrowIcon");
-    __publicField(this, "container");
-    __publicField(this, "handlerTransit", () => {
-      if (this.transit) {
-        addClassToElement(this.dropdown.element, this.transit);
-        setTimeout(() => {
-          removeClassToElement(this.dropdown.element, this.transit);
-        }, animationTime);
-      }
-    });
-    __publicField(this, "handlerArrow", () => {
-      if (!this.arrow) return;
-      if (!this.arrowIcon) {
-        this.arrowIcon = create("div").setAttribute("class", `ranui-dropdown-arrow ${this.arrow}`);
-        this.container.addChild([this.arrowIcon]);
-      }
-    });
-    __publicField(this, "stopPropagation", (e) => {
-      e.stopPropagation();
-    });
-    this._slot = create("slot").setAttribute("class", "slot");
-    this.dropdown = create("div").setStyle("-webkit-tap-highlight-color", "transparent").setStyle("outline", "0").setAttribute("class", "ranui-dropdown").setAttribute("part", "ranui-dropdown").addChild([this._slot]);
-    this.container = create("div").setAttribute("class", "ranui-dropdown-container").addChild([this.dropdown]);
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    this._shadowDom = shadowRoot;
-    shadowRoot.appendChild(this.container.element);
-  }
-  static get observedAttributes() {
-    return ["transit", "arrow"];
-  }
-  get transit() {
-    return this.getAttribute("transit") || "";
-  }
-  set transit(value) {
-    if (value) {
-      this.setAttribute("transit", value);
-    } else {
-      this.removeAttribute("transit");
-    }
-  }
-  get arrow() {
-    return this.getAttribute("arrow") || "";
-  }
-  set arrow(value) {
-    if (value) {
-      this.setAttribute("arrow", value);
-    } else {
-      this.removeAttribute("arrow");
-    }
-  }
-  get show() {
-    return this.getAttribute("show") || "";
-  }
-  set show(value) {
-    if (value) {
-      this.setAttribute("show", value);
-    } else {
-      this.removeAttribute("show");
-    }
-  }
-  connectedCallback() {
-    this.handlerTransit();
-    this.handlerArrow();
-  }
-  disconnectedCallback() {
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "transit" && newValue) {
-      addClassToElement(this.dropdown.element, this.transit);
-      setTimeout(() => {
-        removeClassToElement(this.dropdown.element, this.transit);
-      }, animationTime);
-    }
-    if (name === "arrow") {
-      this.handlerArrow();
-    }
-  }
-}
-function Custom() {
-  if (typeof document !== "undefined" && !customElements.get("r-dropdown")) {
-    customElements.define("r-dropdown", Dropdown);
-    return Dropdown;
-  } else {
-    return createCustomError("document is undefined or r-dropdown is exist");
-  }
-}
-Custom();

package/dist/index-CFjEuvBW.js

@@ -1,308 +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 { d as createDocumentFragment, a as addClassToElement } from "./arrow-down-B_hCY3Wt.js";
-import { i as isDisabled, r as removeClassToElementChild } from "./index-DC5EA657.js";
-const f7170ee498e0dd32cbdcb63fba8f75cc = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--active-color, #1890ff)}.ran-tab-header-line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--line-color, #1890ff);transition:.2s}.ran-tab-content{overflow:hidden}.ran-tab-content-wrap{display:flex;width:100%;height:100%;transition:.2s}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-tab-header-nav .active{color:var(--line-color, #1890ff);border:solid 1px transparent;border-color:var(--border-color, rgba(0, 0, 0, .2)) var(--border-color, rgba(0, 0, 0, .2)) transparent;border-radius:var(--border-radius, .25em) var(--border-radius, .25em) 0 0}:host([type="line"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-tab-header-line:before{content:"";position:absolute;visibility:visible;width:9999px;height:1px;bottom:0;background:var(--border-color, rgba(0, 0, 0, .2))}:host([type="line"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}';
-function CustomElement() {
-  if (typeof window !== "undefined" && !customElements.get("r-tabs")) {
-    class Tabs extends HTMLElement {
-      constructor() {
-        super();
-        __publicField(this, "_container");
-        __publicField(this, "_header");
-        __publicField(this, "_nav");
-        __publicField(this, "_line");
-        __publicField(this, "_content");
-        __publicField(this, "_wrap");
-        __publicField(this, "_slot");
-        __publicField(this, "tabHeaderKeyMapIndex");
-        /**
-         * @description: 构建 tabPane 组件 key 值和 index 的映射，同时判断一个 tabs 下的 tabPane key 值不能重复
-         * @param {string} key
-         * @param {number} index
-         */
-        __publicField(this, "initTabHeaderKeyMapIndex", (key, index2) => {
-          const value = this.tabHeaderKeyMapIndex[key];
-          if (value) {
-            throw new Error("tab 组件的 key 值存在重复，或者某个 tab 组件缺少 key 属性");
-          } else {
-            this.tabHeaderKeyMapIndex[key] = index2;
-          }
-        });
-        /**
-         * @description: 初始化 tabLine 的位置，主要是当 tabs 的 align 属性为 center 时需要处理
-         */
-        __publicField(this, "initTabLineAlignCenter", () => {
-          const { length } = this._nav.children;
-          let left = 0;
-          for (let i = 0; i < length; i++) {
-            const { width = 0 } = this._nav.children[i].getBoundingClientRect();
-            left += width;
-          }
-          this._line.style.setProperty("left", `calc(50% - ${left / 2}px)`);
-        });
-        /**
-         * @description: 初始化tabLine的位置，主要是当tabs的align属性为end时需要处理
-         */
-        __publicField(this, "initTabLineAlignEnd", () => {
-          const { length } = this._nav.children;
-          let left = 0;
-          for (let i = 0; i < length; i++) {
-            const { width = 0 } = this._nav.children[i].getBoundingClientRect();
-            left += width;
-          }
-          this._line.style.setProperty("left", `calc(100% - ${left}px)`);
-        });
-        /**
-         * @description: 通过key值设置tabLine的位置
-         * @param {string} key
-         */
-        __publicField(this, "setTabLine", (key) => {
-          if (key) {
-            const index2 = this.tabHeaderKeyMapIndex[key];
-            const TabHeader = this._nav.children[index2];
-            const { width = 0 } = TabHeader.getBoundingClientRect();
-            this._line.style.setProperty("width", `${width}px`);
-            let distance = 0;
-            for (let i = 0; i < index2; i++) {
-              const item = this._nav.children[i];
-              const { width: width2 = 0 } = item.getBoundingClientRect();
-              distance += width2;
-            }
-            this._line.style.setProperty("transform", `translateX(${distance}px)`);
-          }
-        });
-        /**
-         * @description: 通过传入的key值设置tabContent
-         */
-        __publicField(this, "setTabContent", (key) => {
-          if (key) {
-            const index2 = this.tabHeaderKeyMapIndex[key];
-            this._wrap.style.setProperty("transform", `translateX(${index2 * -100}%)`);
-          }
-        });
-        /**
-         * @description: 根据点击设置 tabLine 的位置
-         * @param {Event} e
-         * @param {number} index
-         * @param {number} width
-         */
-        __publicField(this, "clickTabHead", (e) => {
-          const tabHeader = e.target;
-          const key = tabHeader.getAttribute("r-key");
-          const disabled = isDisabled(tabHeader);
-          if (!disabled && key) {
-            this.setAttribute("active", key);
-            this.setTabLine(key);
-            this.setTabContent(key);
-            removeClassToElementChild(this._nav, "active");
-            addClassToElement(tabHeader, "active");
-          }
-        });
-        /**
-         * @description: tabPane 设置属性，需要在 tabs 上展示时触发
-         * @param {string} key
-         * @param {string} value
-         */
-        __publicField(this, "updateAttribute", (key, attribute, value = "") => {
-          var _a, _b;
-          const index2 = this.tabHeaderKeyMapIndex[key];
-          if (key && value && this._nav.children[index2]) {
-            (_a = this._nav.children[index2]) == null ? void 0 : _a.setAttribute(attribute, value);
-          } else {
-            (_b = this._nav.children[index2]) == null ? void 0 : _b.removeAttribute(attribute);
-          }
-        });
-        /**
-         * @description: 初始化 tabs 的 active 属性和 tabLine,tabContent
-         */
-        __publicField(this, "initActive", () => {
-          const tabHeaderList = [...this._nav.children];
-          const initTabList = tabHeaderList.filter((item) => !isDisabled(item));
-          let initTabHeader;
-          if (this.active != null) {
-            initTabHeader = initTabList.find((item) => item.getAttribute("r-key") === this.active);
-            initTabHeader == null ? void 0 : initTabHeader.setAttribute("r-key", this.active);
-          }
-          if (!initTabHeader) {
-            initTabHeader = initTabList.shift();
-          }
-          if (!initTabHeader) return;
-          const index2 = tabHeaderList.findIndex((item) => item === initTabHeader);
-          const key = (initTabHeader == null ? void 0 : initTabHeader.getAttribute("r-key")) || `${index2}`;
-          if (key != null) {
-            this.setAttribute("active", `${key}`);
-            addClassToElement(initTabHeader, "active");
-            this.setTabContent(key);
-            setTimeout(() => {
-              this.setTabLine(key);
-            }, 200);
-          }
-        });
-        /**
-         * @description: 监听 slot 组件的添加/删除/替换操作，进行 tabs 初始化
-         * @return {*}
-         */
-        __publicField(this, "listenSlotChange", () => {
-          const slots = this._slot.assignedElements();
-          slots.forEach((item, index2) => {
-            const tabPane = this.createTabHeader(item, index2);
-            this._nav.appendChild(tabPane);
-            tabPane.addEventListener("click", this.clickTabHead);
-          });
-          this.initActive();
-          if (this.align) {
-            if (this.align === "center") this.initTabLineAlignCenter();
-            if (this.align === "end") this.initTabLineAlignEnd();
-          }
-        });
-        /**
-         * @description: 初始化 tab
-         */
-        __publicField(this, "initTab", () => {
-          this._slot.addEventListener("slotchange", this.listenSlotChange);
-        });
-        /**
-         * @description: 卸载 tab
-         */
-        __publicField(this, "unloadTab", () => {
-          this._slot.removeEventListener("slotchange", this.listenSlotChange);
-        });
-        this._container = document.createElement("div");
-        this._container.setAttribute("class", "ran-tab");
-        this._header = document.createElement("div");
-        this._header.setAttribute("class", "ran-tab-header");
-        this._nav = document.createElement("div");
-        this._nav.setAttribute("class", "ran-tab-header-nav");
-        this._line = document.createElement("div");
-        this._line.setAttribute("class", "ran-tab-header-line");
-        this._content = document.createElement("div");
-        this._content.setAttribute("class", "ran-tab-content");
-        this._wrap = document.createElement("div");
-        this._wrap.setAttribute("class", "ran-tab-content-wrap");
-        this._slot = document.createElement("slot");
-        this._wrap.appendChild(this._slot);
-        this._content.appendChild(this._wrap);
-        this._header.appendChild(createDocumentFragment([this._nav, this._line]));
-        this._container.appendChild(createDocumentFragment([this._header, 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", "type", "align", "effect"];
-      }
-      get align() {
-        return this.getAttribute("align") || "start";
-      }
-      set align(value) {
-        this.setAttribute("align", value);
-      }
-      set type(value) {
-        this.setAttribute("type", 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");
-        }
-      }
-      get effect() {
-        return this.getAttribute("effect");
-      }
-      set effect(value) {
-        if (!value || value === "false") {
-          this.removeAttribute("effect");
-        } else {
-          this.setAttribute("effect", value);
-        }
-      }
-      /**
-       * @description: 根据传入的 tabPane 生成 tabs 的头部
-       * @param {Element} tabPane
-       * @param {number} index
-       * @return {Element}
-       */
-      createTabHeader(tabPane, index2) {
-        const label = tabPane.getAttribute("label") || "";
-        const icon = tabPane.getAttribute("icon") || "";
-        const iconSize = tabPane.getAttribute("iconSize") || "";
-        const key = tabPane.getAttribute("r-key") || `${index2}`;
-        const type = tabPane.getAttribute("type") || "text";
-        this.initTabHeaderKeyMapIndex(key, index2);
-        const tabHeader = document.createElement("r-button");
-        tabHeader.setAttribute("class", "tab-header-nav-item");
-        tabHeader.setAttribute("type", type);
-        icon && tabHeader.setAttribute("icon", icon);
-        iconSize && tabHeader.setAttribute("iconSize", iconSize);
-        isDisabled(tabPane) && tabHeader.setAttribute("disabled", "");
-        tabHeader.setAttribute("r-key", key);
-        if (this.effect) {
-          tabPane.setAttribute("effect", this.effect);
-          this._line.style.setProperty("display", "none");
-        }
-        tabPane.setAttribute("r-key", key);
-        tabHeader.innerHTML = label;
-        return tabHeader;
-      }
-      connectedCallback() {
-        this.initTab();
-      }
-      disconnectCallback() {
-        this.unloadTab();
-      }
-      attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-          this.dispatchEvent(
-            new CustomEvent("change", {
-              detail: {
-                active: this.active
-              }
-            })
-          );
-          if (name === "align") {
-            if (newValue === "center") this.initTabLineAlignCenter();
-            if (newValue === "end") this.initTabLineAlignEnd();
-          }
-          if (name === "effect") {
-            const tabHeaderList = [...this._nav.children];
-            tabHeaderList.forEach((item) => {
-              if (!this.effect || this.effect === "false") {
-                item.removeAttribute("effect");
-              } else {
-                item.setAttribute("effect", newValue);
-              }
-            });
-          }
-          if (name === "active") {
-            this.setAttribute(name, newValue);
-          }
-        }
-      }
-    }
-    customElements.define("r-tabs", Tabs);
-    return Tabs;
-  }
-}
-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
-};