ranui 0.1.9 → 0.1.10-alpha.10

package/dist/index-C9z10IgG.js

@@ -0,0 +1,103 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+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-3cf72afd.js → index-CFjEuvBW.js}

@@ -1,12 +1,9 @@
 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 { c as createDocumentFragment, a as addClassToElement } from "./index-7913ec46.js";
-import { i as isDisabled, r as removeClassToElementChild } from "./index-57492b9b.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}\n';
+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 {
@@ -21,22 +18,20 @@ function CustomElement() {
         __publicField(this, "_slot");
         __publicField(this, "tabHeaderKeyMapIndex");
         /**
-         * @description: 构建tabPane组件key值和index的映射，同时判断一个tabs下的tabPane key值不能重复
+         * @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 属性"
-            );
+            throw new Error("tab 组件的 key 值存在重复，或者某个 tab 组件缺少 key 属性");
           } else {
             this.tabHeaderKeyMapIndex[key] = index2;
           }
         });
         /**
-         * @description: 初始化tabLine的位置，主要是当tabs的align属性为center时需要处理
+         * @description: 初始化 tabLine 的位置，主要是当 tabs 的 align 属性为 center 时需要处理
          */
         __publicField(this, "initTabLineAlignCenter", () => {
           const { length } = this._nav.children;
@@ -75,10 +70,7 @@ function CustomElement() {
               const { width: width2 = 0 } = item.getBoundingClientRect();
               distance += width2;
             }
-            this._line.style.setProperty(
-              "transform",
-              `translateX(${distance}px)`
-            );
+            this._line.style.setProperty("transform", `translateX(${distance}px)`);
           }
         });
         /**
@@ -87,14 +79,11 @@ function CustomElement() {
         __publicField(this, "setTabContent", (key) => {
           if (key) {
             const index2 = this.tabHeaderKeyMapIndex[key];
-            this._wrap.style.setProperty(
-              "transform",
-              `translateX(${index2 * -100}%)`
-            );
+            this._wrap.style.setProperty("transform", `translateX(${index2 * -100}%)`);
           }
         });
         /**
-         * @description: 根据点击设置tabLine的位置
+         * @description: 根据点击设置 tabLine 的位置
          * @param {Event} e
          * @param {number} index
          * @param {number} width
@@ -126,23 +115,20 @@ function CustomElement() {
           }
         });
         /**
-         * @description: 初始化tabs的active属性和tabLine,tabContent
+         * @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 = 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;
+          if (!initTabHeader) return;
           const index2 = tabHeaderList.findIndex((item) => item === initTabHeader);
           const key = (initTabHeader == null ? void 0 : initTabHeader.getAttribute("r-key")) || `${index2}`;
           if (key != null) {
@@ -155,7 +141,7 @@ function CustomElement() {
           }
         });
         /**
-         * @description: 监听slot组件的添加/删除/替换操作，进行tabs初始化
+         * @description: 监听 slot 组件的添加/删除/替换操作，进行 tabs 初始化
          * @return {*}
          */
         __publicField(this, "listenSlotChange", () => {
@@ -167,20 +153,18 @@ function CustomElement() {
           });
           this.initActive();
           if (this.align) {
-            if (this.align === "center")
-              this.initTabLineAlignCenter();
-            if (this.align === "end")
-              this.initTabLineAlignEnd();
+            if (this.align === "center") this.initTabLineAlignCenter();
+            if (this.align === "end") this.initTabLineAlignEnd();
           }
         });
         /**
-         * @description: 初始化tab
+         * @description: 初始化 tab
          */
         __publicField(this, "initTab", () => {
           this._slot.addEventListener("slotchange", this.listenSlotChange);
         });
         /**
-         * @description: 卸载tab
+         * @description: 卸载 tab
          */
         __publicField(this, "unloadTab", () => {
           this._slot.removeEventListener("slotchange", this.listenSlotChange);
@@ -200,12 +184,8 @@ function CustomElement() {
         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._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");
@@ -251,7 +231,7 @@ function CustomElement() {
         }
       }
       /**
-       * @description: 根据传入的tabPane生成tabs的头部
+       * @description: 根据传入的 tabPane 生成 tabs 的头部
        * @param {Element} tabPane
        * @param {number} index
        * @return {Element}
@@ -294,10 +274,8 @@ function CustomElement() {
             })
           );
           if (name === "align") {
-            if (newValue === "center")
-              this.initTabLineAlignCenter();
-            if (newValue === "end")
-              this.initTabLineAlignEnd();
+            if (newValue === "center") this.initTabLineAlignCenter();
+            if (newValue === "end") this.initTabLineAlignEnd();
           }
           if (name === "effect") {
             const tabHeaderList = [...this._nav.children];