ranui 0.1.0-alpha

package/components/tabs/index.ts

@@ -0,0 +1,207 @@
+import { isDisabled } from '@/utils/index'
+class Tabs extends HTMLElement {
+  static get observedAttributes() {
+    return ["active", 'forceRender'];
+  }
+  _container: HTMLDivElement;
+  _header: HTMLDivElement;
+  _nav: HTMLDivElement;
+  _line: HTMLDivElement;
+  _content: HTMLDivElement;
+  _wrap: HTMLDivElement;
+  _slot: HTMLSlotElement;
+  tabHeaderKeyMapIndex: Record<string, number>;
+  constructor() {
+    super();
+    /**
+     * <div class="tab">
+     *   <div class="tab-header">
+     *      <div class="tab-header_nav">...</div>
+     *      <div class="tab-header_line"></div>
+     *   </div>
+     *   <div class="tab-content">
+     *      <div class="tab-content_wrap">
+     *         <slot></slot>
+     *      </div>
+     *   </div>
+     * </div>
+     */
+    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" });
+    shadowRoot.appendChild(this._container);
+  }
+
+  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);
+  }
+  /**
+   * @description: 构建tabPane组件key值和index的映射，同时判断一个tabs下的tabPane key值不能重复
+   * @param {string} key
+   * @param {number} index
+   */
+  initTabHeaderKeyMapIndex = (key: string, index: number) => {
+    const value = this.tabHeaderKeyMapIndex[key]
+    if (value) {
+      throw new Error('tab 组件的 key 值存在重复, 或者某个 tab 组件缺少 key 属性')
+    } else {
+      this.tabHeaderKeyMapIndex[key] = index
+    }
+  }
+  /**
+   * @description: 根据传入的tabPane生成tabs的头部
+   * @param {Element} tabPane
+   * @param {number} index
+   * @return {Element}
+   */
+  createTabHeader(tabPane: Element, index: number) {
+    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
+  }
+  /**
+   * @description: 通过key值设置tabLine的位置
+   * @param {string} key
+   */
+  setTabLine = (key: string) => {
+    if (key) {
+      const index = this.tabHeaderKeyMapIndex[key]
+      this._line.style.setProperty('transform', `translateX(${100 * index}%)`)
+    }
+  }
+  /**
+   * @description: 通过传入的key值设置tabContent
+   */
+  setTabContent = (key: string) => {
+    if (key) {
+      const index = this.tabHeaderKeyMapIndex[key]
+      this._wrap.style.setProperty('transform', `translateX(${index * -100}%)`)
+    }
+  }
+  /**
+   * @description: 根据点击设置tabLine的位置
+   * @param {Event} e
+   * @param {number} index
+   * @param {number} width
+   */
+  clickTabHead = (e: Event) => {
+    const tabHeader = e.target as Element
+    const key = tabHeader.getAttribute('ran-key')
+    const disabled = isDisabled(tabHeader)
+    if (!disabled && key) {
+      this.setAttribute('active', key)
+      this.setTabLine(key)
+      this.setTabContent(key)
+    }
+  }
+  /**
+   * @description: 初始化tabs的active属性和tabLine,tabContent
+   */
+  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?.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)
+    }
+  }
+  /**
+   * @description: 监听slot组件的添加/删除/替换操作，进行tabs初始化
+   * @return {*}
+   */
+  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()
+  };
+
+  connectedCallback() {
+    this._slot.addEventListener("slotchange", this.listenSlotChange);
+  }
+
+  disconnectCallback() {
+    this._slot.removeEventListener("slotchange", this.listenSlotChange);
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (oldValue !== newValue) {
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          active: this.active,
+        }
+      }));
+    }
+  }
+}
+
+function CustomElement() {
+  if (!customElements.get("r-tabs")) {
+    customElements.define("r-tabs", Tabs);
+  }
+}
+
+export default CustomElement();

package/dist/assets/image/failImage.d.ts

@@ -0,0 +1,2 @@
+declare const failImage = "\n    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==\n";
+export default failImage;

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

@@ -0,0 +1,2 @@
+declare const _default: void;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: void;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: void;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: void;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: void;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: void;
+export default _default;