ranui 0.1.6 → 0.1.8

package/dist/components/select/index.d.ts

@@ -0,0 +1,101 @@
+/// <reference types="node" />
+interface Option {
+    label: string | number;
+    value: string | number;
+}
+export declare class Select extends HTMLElement {
+    removeTimeId?: NodeJS.Timeout;
+    _slot: HTMLSlotElement;
+    _shadowDom: ShadowRoot;
+    _select: HTMLDivElement;
+    _selection: HTMLDivElement;
+    _search: HTMLElement;
+    _icon: HTMLElement;
+    _selectDropdown?: HTMLDivElement;
+    _selectionDropdown?: HTMLDivElement;
+    _selectDropDownInTimeId?: NodeJS.Timeout;
+    _selectDropDownOutTimeId?: NodeJS.Timeout;
+    _optionList: Option[];
+    _optionLabelMapValue: Map<string, string>;
+    _optionValueMapLabel: Map<string, string>;
+    _activeOption?: HTMLElement;
+    _text: HTMLSpanElement;
+    _selector: HTMLDivElement;
+    static get observedAttributes(): string[];
+    constructor();
+    get value(): string;
+    set value(value: string);
+    get defaultValue(): string;
+    set defaultValue(value: string);
+    get showSearch(): string;
+    set showSearch(value: string);
+    get type(): string;
+    set type(value: string);
+    get placement(): string;
+    set placement(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    get getPopupContainerId(): string;
+    set getPopupContainerId(value: string);
+    get dropdownclass(): string;
+    set dropdownclass(value: string);
+    get action(): string;
+    set action(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean | string | undefined | null);
+    handlerExternalCss(): void;
+    /**
+     * @description: 移除 select dropdown
+     * @return {*}
+     */
+    setSelectDropdownDisplayNone: () => void;
+    /**
+     * @description: 添加 select dropdown
+     * @return {*}
+     */
+    setSelectDropdownDisplayBlock: () => void;
+    placementPosition: () => void;
+    /**
+     * @description: 设置下拉框
+     * @return {*}
+     */
+    selectMouseDown: () => void;
+    removeDropDownTimeId: () => void;
+    /**
+     * @description: 焦点移除的情况，需要移除select 下拉框
+     * @return {*}
+     */
+    selectBlur: () => void;
+    /**
+     * @description: 选中一个选项的情况
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    clickOption: (e: MouseEvent) => void;
+    /**
+     * @description: 初始化创建选项下拉框
+     * @return {*}
+     */
+    createOption: () => void;
+    /**
+     * @description: 移除选项下拉框
+     * @return {*}
+     */
+    removeSelectDropdown: () => void;
+    /**
+     * @description: 当select中有option元素的时候，给dropdown添加元素
+     * @return {*}
+     */
+    addOptionToSlot: () => void;
+    setDefaultValue: () => void;
+    changeSearch: (e: Event) => void;
+    setShowSearch: () => void;
+    listenSlotChange: () => void;
+    removeListenSlotChange: () => void;
+    listenActionEvent: () => void;
+    connectedCallback(): void;
+    disconnectCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+declare const _default: import('../../utils/index').CustomErrorType;
+export default _default;

package/dist/components/select/index.js

@@ -0,0 +1,11 @@
+import { S, a } from "../../index-f6d6982d.js";
+import "../../index-d2d69b06.js";
+import "../../index-57492b9b.js";
+import "../option/index.js";
+import "../../index-7f513a14.js";
+import "../../index-ecaed5cc.js";
+import "../../vendor-f71e6f68.js";
+export {
+  S as Select,
+  a as default
+};

package/dist/components/skeleton/index.js

@@ -1,4 +1,4 @@
-import { a } from "../../index-00913cab.js";
+import { a } from "../../index-b90299ca.js";
 export {
   a as default
 };

package/dist/components/tab/index.js

@@ -1,5 +1,7 @@
-import { a } from "../../index-07c8e518.js";
-import "../../index-4459fbd0.js";
+import { a } from "../../index-0e7229ea.js";
+import "../../index-d2d69b06.js";
+import "../../index-57492b9b.js";
+import "../../vendor-f71e6f68.js";
 export {
   a as default
 };

package/dist/components/tabpane/index.js

@@ -1,4 +1,4 @@
-import { a } from "../../index-105ed089.js";
+import { a } from "../../index-5975bbc0.js";
 export {
   a as default
 };

package/dist/docx-c5d02d8c.js

@@ -0,0 +1,21 @@
+import { d as docxPreview_minExports } from "./vendor-f71e6f68.js";
+const renderDocx = (options) => {
+  if (typeof window !== "undefined") {
+    const { bodyContainer, styleContainer, buffer, docxOptions = {} } = options;
+    const defaultOptions = {
+      className: "docx"
+      // ignoreLastRenderedPageBreak: false,
+    };
+    const configuration = Object.assign({}, defaultOptions, docxOptions);
+    if (bodyContainer) {
+      return docxPreview_minExports.renderAsync(buffer, bodyContainer, styleContainer, configuration);
+    } else {
+      const contain = document.createElement("div");
+      document.body.appendChild(contain);
+      return docxPreview_minExports.renderAsync(buffer, contain, styleContainer, configuration);
+    }
+  }
+};
+export {
+  renderDocx
+};

package/dist/eye-5e742329.js

@@ -0,0 +1,4 @@
+const eye = { "success": true, "_identification": true, "data": '<svg t="1665473580103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7625" width="200" height="200">\n    <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z" p-id="7626"></path>\n    <path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" p-id="7627"></path>\n</svg>' };
+export {
+  eye as default
+};

package/dist/eye-close-3874f1ae.js

@@ -0,0 +1,4 @@
+const eyeClose = { "success": true, "_identification": true, "data": '<svg t="1665473540543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7485" width="200" height="200">\n    <path d="M942.3 486.4l-0.1-0.1-0.1-0.1c-36.4-76.7-80-138.7-130.7-186L760.7 351c43.7 40.2 81.5 93.7 114.1 160.9C791.5 684.2 673.4 766 512 766c-51.3 0-98.3-8.3-141.2-25.1l-54.7 54.7C374.6 823.8 439.8 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0.1-51.3zM878.3 154.2l-42.4-42.4c-3.1-3.1-8.2-3.1-11.3 0L707.8 228.5C649.4 200.2 584.2 186 512 186c-192.2 0-335.4 100.5-430.2 300.3v0.1c-7.7 16.2-7.7 35.2 0 51.5 36.4 76.7 80 138.7 130.7 186.1L111.8 824.5c-3.1 3.1-3.1 8.2 0 11.3l42.4 42.4c3.1 3.1 8.2 3.1 11.3 0l712.8-712.8c3.1-3 3.1-8.1 0-11.2zM398.9 537.4c-1.9-8.2-2.9-16.7-2.9-25.4 0-61.9 50.1-112 112-112 8.7 0 17.3 1 25.4 2.9L398.9 537.4z m184.5-184.5C560.5 342.1 535 336 508 336c-97.2 0-176 78.8-176 176 0 27 6.1 52.5 16.9 75.4L263.3 673c-43.7-40.2-81.5-93.7-114.1-160.9C232.6 339.8 350.7 258 512 258c51.3 0 98.3 8.3 141.2 25.1l-69.8 69.8z" p-id="7486"></path>\n    <path d="M508 624c-6.4 0-12.7-0.5-18.8-1.6l-51.1 51.1c21.4 9.3 45.1 14.4 69.9 14.4 97.2 0 176-78.8 176-176 0-24.8-5.1-48.5-14.4-69.9l-51.1 51.1c1 6.1 1.6 12.4 1.6 18.8C620 573.9 569.9 624 508 624z" p-id="7487"></path>\n</svg>' };
+export {
+  eyeClose as default
+};

package/dist/home-c4a05e8b.js

@@ -0,0 +1,4 @@
+const home = { "success": true, "_identification": true, "data": '<svg t="1667486325771" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8988" width="200" height="200"><path d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z" p-id="8989"></path></svg>' };
+export {
+  home as default
+};

package/dist/index-0e7229ea.js

@@ -0,0 +1,328 @@
+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 { a as addClassToElement } from "./index-d2d69b06.js";
+import { i as isDisabled, r as removeClassToElementChild } from "./index-57492b9b.js";
+const f7170ee498e0dd32cbdcb63fba8f75cc = '.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';
+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(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", "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
+};