easy-component-ui 1.0.3 → 2.0.1

package/components/ea-collapse/index.js

@@ -1,293 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement, createSlotElement } from '../../utils/createElement.js';
-
-const stylesheet = `
-
-.ea-collapse-item_wrap .ea-collapse-item_title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #ebeef5;
-  height: 48px;
-  line-height: 48px;
-  font-size: 13px;
-  font-weight: 700;
-  color: #303133;
-  cursor: pointer;
-}
-.ea-collapse-item_wrap .ea-collapse-item_title .ea-collapse-item_title-icon {
-  width: 0.35rem;
-  height: 0.35rem;
-  margin-right: 1rem;
-  border: 3px solid #9ca0a5;
-  border-left-color: transparent;
-  border-top-color: transparent;
-  rotate: -45deg;
-  transition: rotate 0.3s;
-}
-.ea-collapse-item_wrap .ea-collapse-item_content {
-  will-change: height;
-  overflow: hidden;
-  height: 0;
-  padding-bottom: 0;
-  transition: height 0.3s, padding-bottom 0.3s;
-  font-size: 13px;
-  color: #303133;
-}
-`;
-
-export class EaCollapse extends Base {
-    #wrap;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        const slot = createSlotElement('');
-        const wrap = createElement('div', 'ea-collapse_wrap', [slot]);
-
-        this.#wrap = wrap;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- active 当前展开项 -------
-    // #region
-    get active() {
-        return this.getAttribute('active') || 1;
-    }
-
-    set active(name) {
-        this.setAttribute('active', name);
-
-        setTimeout(() => {
-            this.#handleCollapse(this.accordion, name);
-        }, 20);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- accordion 是否为手风琴模式 -------
-    // #region
-    get accordion() {
-        return this.getAttrBoolean('accordion') || false;
-    }
-
-    set accordion(flag) {
-        this.setAttribute('accordion', flag);
-
-        setTimeout(() => {
-            this.#handleCollapse(flag, this.active);
-        }, 20);
-    }
-    // #endregion
-    // ------- end -------
-
-    /**
-     * 处理折叠面板的展开/折叠状态。
-     * 根据传入的标志位flag和激活项名称activeItemName，来决定哪些折叠项应该展开。
-     * 当flag为true时，只允许一个折叠项展开，即单选模式；
-     * 当flag为false时，可以允许多个折叠项展开，即多选模式。
-     * 
-     * @param {boolean} flag - 控制单选或多选模式的标志。true表示单选模式，false表示多选模式。
-     * @param {string} activeItemName - 激活项的名称，用于决定哪些折叠项应该展开。
-     */
-    #handleCollapse(flag, activeItemName) {
-        const that = this;
-        // 将所有ea-collapse-item元素转换为数组
-        const items = Array.from(this.querySelectorAll('ea-collapse-item'));
-        // 初始化用于记录展开状态的变量
-        let collapseItem = flag ? "" : [];
-
-        // 遍历每个折叠项，绑定状态改变事件的监听器
-        items.forEach(item => {
-            item.addEventListener('collapseItemStatusChange', (e) => {
-                // 在单选模式下，关闭所有其他折叠项
-                if (flag) items.forEach(item => {
-                    item.isOpen = false;
-                });
-
-                // 更新当前折叠项的展开状态
-                item.isOpen = !e.detail.isOpen;
-
-                // 触发change事件，通知外部当前折叠项的状态改变
-                that.dispatchEvent(new CustomEvent("change", {
-                    detail: {
-                        name: item.name,
-                        isOpen: item.isOpen,
-                    },
-                }))
-            });
-        });
-
-        try {
-            // 根据flag的值来处理折叠项的展开状态
-            if (flag) {
-                // 在单选模式下，根据activeItemName确定哪个折叠项应该展开
-                collapseItem = activeItemName.toString().trim()[0];
-
-                items.forEach(item => {
-                    // 根据collapseItem的值，决定当前折叠项是否展开
-                    if (item.name === collapseItem) {
-                        item.isOpen = true;
-                    } else {
-                        item.isOpen = false;
-                    }
-                });
-            } else {
-                // 在多选模式下，将activeItemName解析为数组，并处理每个折叠项的展开状态
-                collapseItem = activeItemName.split(',').map(item => {
-                    return item.trim();
-                }).concat();
-
-                items.forEach(item => {
-                    // 根据collapseItem数组中的值，决定当前折叠项是否展开
-                    if (collapseItem.includes(item.name)) {
-                        item.isOpen = true;
-                    } else {
-                        item.isOpen = false;
-                    }
-                });
-            }
-
-        } catch (error) { }
-    }
-
-    #handleChildrenItemName() {
-
-    }
-
-    init() {
-        const that = this;
-
-        this.accordion = this.accordion;
-
-        this.active = this.active;
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-collapse')) {
-    customElements.define('ea-collapse', EaCollapse);
-}
-
-export class EaCollapseItem extends Base {
-    #wrap;
-
-    #titleWrap;
-    #titleContent;
-    #titleIcon;
-
-    #contentWrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        const titleContent = createElement('span', 'ea-collapse-item_title-content');
-        const icon = createElement('span', 'ea-collapse-item_title-icon');
-        const titleWrap = createElement('div', 'ea-collapse-item_title', [titleContent, icon]);
-        const contentSlot = createSlotElement('');
-        const contentWrap = createElement('div', 'ea-collapse-item_content', [contentSlot]);
-
-        const wrap = createElement('div', 'ea-collapse-item_wrap', [titleWrap, contentWrap]);
-
-        this.#wrap = wrap;
-        this.#titleWrap = titleWrap;
-        this.#titleContent = titleContent;
-        this.#titleIcon = icon;
-        this.#contentWrap = contentWrap;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- title 标题 -------
-    // #region
-    get title() {
-        return this.getAttribute('title');
-    }
-
-    set title(title) {
-        this.setAttribute('title', title);
-
-        this.#titleContent.innerHTML = title;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- name 唯一标识符 -------
-    // #region
-    get name() {
-        return this.getAttribute('name');
-    }
-
-    set name(name) {
-        this.setAttribute('name', name);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- isOpen 是否展开 -------
-    // #region
-    get isOpen() {
-        return this.getAttrBoolean('is-open') || false;
-    }
-
-    set isOpen(flag) {
-        if (flag === this.isOpen) return;
-
-        this.toggleAttr('is-open', flag);
-
-        const height = this.#contentWrap.scrollHeight;
-
-        if (this.isOpen) {
-            this.#contentWrap.style.height = `${height}px`;
-            this.#contentWrap.style.paddingBottom = '20px';
-            this.#titleIcon.style.rotate = '45deg';
-
-        } else {
-            this.#contentWrap.style.height = '0px';
-            this.#contentWrap.style.paddingBottom = '0px';
-            this.#titleIcon.style.rotate = '-45deg';
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    #initCollapseChange() {
-        const that = this;
-
-        this.#titleWrap.addEventListener('click', () => {
-            that.dispatchEvent(new CustomEvent('collapseItemStatusChange', {
-                detail: {
-                    name: that.name,
-                    isOpen: that.isOpen,
-                },
-            }));
-        });
-    }
-
-    init() {
-        const that = this;
-
-        this.title = this.title;
-        this.name = this.name;
-
-        this.#initCollapseChange();
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-collapse-item')) {
-    customElements.define('ea-collapse-item', EaCollapseItem);
-}
+import Base from"../Base.js";import"../ea-collapse-item/index.js";export class EaCollapse extends Base{constructor(){super();this.attachShadow({mode:"open"}).innerHTML='\n            <div class="ea-collapse_wrap" part="container">\n                <slot></slot>\n            </div>\n        '}get active(){return this.getAttribute("active")||1}set active(e){this.setAttribute("active",e),setTimeout((()=>{this.#e(this.accordion,e)}),20)}get accordion(){return this.getAttrBoolean("accordion")||!1}set accordion(e){this.setAttribute("accordion",e),setTimeout((()=>{this.#e(e,this.active)}),20)}#e(e,t){const a=Array.from(this.querySelectorAll("ea-collapse-item"));let s=e?"":[];a.forEach((t=>{t.addEventListener("collapseItemStatusChange",(s=>{e&&a.forEach((e=>{e.isOpen=!1})),t.isOpen=!s.detail.isOpen,this.dispatchEvent(new CustomEvent("change",{detail:{name:t.name,isOpen:t.isOpen}}))}))})),e?(s=t.toString().trim()[0],a.forEach((e=>{e.isOpen=e.name===s}))):(s=t.split(",").map((e=>e.trim())).concat(),a.forEach((e=>{e.isOpen=s.includes(e.name)})))}connectedCallback(){this.accordion=this.accordion,this.active=this.active}}customElements.get("ea-collapse")||customElements.define("ea-collapse",EaCollapse);

package/components/ea-collapse-item/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCollapseItem extends Base{#t;#e;#s;#i;#n;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-collapse-item_wrap" part="container">\n                <div class="ea-collapse-item_title" part="title-wrap">\n                    <span class="ea-collapse-item_title-content" part="title-content"></span>\n                    <span class="ea-collapse-item_title-icon" part="title-icon"></span>\n                </div>\n                <div class="ea-collapse-item_content" part="content-wrap">\n                    <slot></slot>\n                </div>\n            </div>\n        ',this.#t=t.querySelector(".ea-collapse-item_wrap"),this.#e=t.querySelector(".ea-collapse-item_title"),this.#s=t.querySelector(".ea-collapse-item_title-content"),this.#i=t.querySelector(".ea-collapse-item_title-icon"),this.#n=t.querySelector(".ea-collapse-item_content"),this.build(t,stylesheet)}get title(){return this.getAttribute("title")}set title(t){this.setAttribute("title",t),this.#s.innerHTML=t}get name(){return this.getAttribute("name")}set name(t){this.setAttribute("name",t)}get isOpen(){return this.getAttrBoolean("is-open")||!1}set isOpen(t){if(t===this.isOpen)return;this.toggleAttr("is-open",t);const e=this.#n.scrollHeight;this.isOpen?(this.#n.style.height=`${e}px`,this.#n.style.paddingBottom="20px",this.#i.style.rotate="45deg"):(this.#n.style.height="0px",this.#n.style.paddingBottom="0px",this.#i.style.rotate="-45deg")}connectedCallback(){this.title=this.title,this.name=this.name,this.#e.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("collapseItemStatusChange",{detail:{name:this.name,isOpen:this.isOpen}}))}))}}customElements.get("ea-collapse-item")||customElements.define("ea-collapse-item",EaCollapseItem);

package/components/ea-collapse-item/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-collapse-item_wrap .ea-collapse-item_title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid #ebeef5;\n  height: 48px;\n  line-height: 48px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #303133;\n  cursor: pointer;\n}\n.ea-collapse-item_wrap .ea-collapse-item_title .ea-collapse-item_title-icon {\n  width: 0.35rem;\n  height: 0.35rem;\n  margin-right: 1rem;\n  border: 3px solid #9ca0a5;\n  border-left-color: transparent;\n  border-top-color: transparent;\n  rotate: -45deg;\n  transition: rotate 0.3s;\n}\n.ea-collapse-item_wrap .ea-collapse-item_content {\n  will-change: height;\n  overflow: hidden;\n  height: 0;\n  padding-bottom: 0;\n  transition: height 0.3s, padding-bottom 0.3s;\n  font-size: 13px;\n  color: #303133;\n}\n";

package/components/ea-container/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-container_wrap {\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n}\n.ea-container_wrap.is-vertical {\n  flex-direction: column;\n}\n.ea-container_wrap ::slotted(ea-main) {\n  flex: 1;\n}\n";export class EaContainer extends Base{#e;get CONTAINER_TYPE(){return["ea-header","ea-main","ea-footer","ea-container","ea-aside"]}constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-container_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.#e=e.querySelector(".ea-container_wrap"),this.build(e,stylesheet)}get direction(){return["horizontal","vertical"].includes(this.getAttribute("direction"))||"horizontal"}set direction(e){this.setAttribute("direction",e),this.#e.classList.toggle("is-vertical","horizontal"===e)}#t(e){const t=e.map((e=>e.tagName.toLowerCase()));e.forEach((e=>{this.CONTAINER_TYPE.includes(e.tagName.toLowerCase())||e.remove(),"ea-container"===e.tagName.toLowerCase()&&(e.style.flex="1")})),t.includes("ea-header")||t.includes("ea-footer")?this.direction="horizontal":this.direction=this.direction}connectedCallback(){const e=Array.from(this.children);this.#t(e)}}customElements.get("ea-container")||customElements.define("ea-container",EaContainer);

package/components/ea-date-picker/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-calendar/index.js";import"../ea-input/index.js";import{stylesheet}from"./src/style/stylesheet.js";import{timeout}from"../../utils/timeout.js";export class EaDatePicker extends Base{#e;#t;#a;#i;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-date-picker_wrap' part='container'>\n                <div class='ea-date-picker_input-wrap' part='input-wrap'>\n                    <ea-input class=\"ea-date-picker_input\" part='input' prefix-icon=\"icon-calendar-times-o\" readonly></ea-input>\n                </div>\n                <div class='ea-date-picker_dropdown-wrap' part='dropdown-wrap'>\n                    <ea-calendar class=\"ea-date-picker_calendar\" size=\"mini\" part='calendar'></ea-calendar>\n                </div>\n            </div>\n        ",this.#e=e.querySelector(".ea-date-picker_wrap"),this.#t=e.querySelector(".ea-date-picker_dropdown-wrap"),this.#a=e.querySelector(".ea-date-picker_calendar"),this.#i=e.querySelector(".ea-date-picker_input"),this.build(e,stylesheet)}get name(){return this.getAttribute("name")||"datePicker"}set name(e){this.setAttribute("name",e)}get width(){return this.getAttribute("width")||"200px"}set width(e){this.setAttribute("width",e),this.#e.style.width=e,this.#t.style.width=e,this.style.display="inline-block",this.style.width=e}get value(){return this.getAttribute("value")||""}set value(e){if(isNaN(new Date(e))&&""!==e){const t=new Date(Date.now());e=`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`}this.setAttribute("value",e),this.#i.value=e}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){this.setAttribute("placeholder",e),this.#i.placeholder=e}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.toggleAttr("disabled",e),this.#i.disabled=e}get align(){return this.getAttribute("align")||"left"}set align(e){this.setAttribute("align",e),this.#i.shadowRoot.querySelector("input").style.textAlign=e}#n(){this.#a.addEventListener("select",(e=>{const{year:t,month:a,date:i,day:n}=e.detail;this.value=`${t}-${a}-${i}`,this.#i.value=`${t}-${a}-${i}`,this.dispatchEvent(new CustomEvent("change",{detail:{fulllDate:`${t}-${a}-${i}`,year:t,month:a,date:i,week:n}}))}))}#s(){this.#i.addEventListener("focus",(()=>{this.#e.classList.add("is-open")})),window.addEventListener("click",(e=>{this.contains(e.target)?this.#i.shadowRoot.querySelector(".ea-input_inner").focus():this.#e.classList.remove("is-open")}))}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.width=this.width,this.value=this.value,this.placeholder=this.placeholder,this.disabled=this.disabled,this.align=this.align,this.#n(),this.#s(),timeout((()=>{this.#e.classList.add("with-transition")}),300)}}customElements.get("ea-date-picker")||customElements.define("ea-date-picker",EaDatePicker);

package/components/ea-date-picker/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-date-picker_wrap .ea-date-picker_input-wrap {\n  position: relative;\n}\n.ea-date-picker_wrap .ea-date-picker_dropdown-wrap {\n  position: absolute;\n  background-color: #fff;\n  transform-origin: top center;\n  transform: scaleY(0);\n  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);\n  z-index: 2;\n}\n.ea-date-picker_wrap.is-open .ea-date-picker_dropdown-wrap {\n  transform: scaleY(1);\n}\n.ea-date-picker_wrap.with-transition .ea-date-picker_dropdown-wrap {\n  transition: transform 0.3s;\n}\n";

package/components/ea-descriptions/index.js

@@ -1,240 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-const stylesheet = `
-.ea-descriptions_wrap {
-  font-size: 14px;
-}
-.ea-descriptions_wrap .ea-descriptions_header {
-  font-size: 1rem;
-  font-weight: 700;
-  margin-bottom: 20px;
-}
-.ea-descriptions_wrap .ea-descriptions_body table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-.ea-descriptions_wrap .ea-descriptions_body table th {
-  background-color: #fafafa;
-}
-.ea-descriptions_wrap .ea-descriptions_body table td {
-  vertical-align: baseline;
-}
-.ea-descriptions_wrap .ea-descriptions-item_label,
-.ea-descriptions_wrap .ea-descriptions-item_content {
-  font-weight: normal;
-  font-size: 14px;
-  vertical-align: middle;
-}
-.ea-descriptions_wrap .ea-descriptions-item_label.is-border,
-.ea-descriptions_wrap .ea-descriptions-item_content.is-border {
-  border: 1px solid #ebeef5;
-}
-.ea-descriptions_wrap .ea-descriptions-item_cell {
-  text-align: left;
-  padding: 12px 10px;
-}
-`;
-
-const getThTemplate_normal = (label, content, colspan) => {
-    return `
-    <td class="ea-descriptions-item" colspan="${colspan}">
-        <span class="ea-descriptions-item_label">${label}:</span>
-        <span class="ea-descriptions-item_content">${content}</span>
-    </td>
-    `;
-}
-
-const getTdTemplate_border = (label, content, colspan) => {
-    return `
-    <th class="ea-descriptions-item_label ea-descriptions-item_cell is-border" colspan="${1}">${label}</th>
-    <td class="ea-descriptions-item_content ea-descriptions-item_cell is-border" colspan="${colspan}">${content}</td>
-    `
-}
-const getThTemplate_direction = (label, hasBorder) => {
-    return `
-    <th class="ea-descriptions-item_label ea-descriptions-item_cell ${hasBorder ? 'is-border' : ''}" colspan="${1}">
-        ${label}${hasBorder ? '' : ':'}
-    </th>`
-}
-
-const getTdTemplate_direction = (text, hasBorder, colspan) => {
-    return `
-    <td class="ea-descriptions-item_content ea-descriptions-item_cell ${hasBorder ? 'is-border' : ''}" colspan="${colspan}">
-        ${text}
-    </td>`
-}
-
-const contentTemplate = (item, colspan, hasBorder) => {
-    let label = item.getAttribute("label");
-    let content = item.innerHTML;
-
-    if (!label) label = item.querySelector('[slot="label"]')?.innerHTML || "";
-
-    return hasBorder ? getTdTemplate_border(label, content, colspan) : getThTemplate_normal(label, content, colspan);
-}
-
-export class EaDescriptions extends Base {
-    #wrap;
-
-    #table;
-    #tableHeader;
-    #tableBody;
-
-    #slot;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = 'ea-descriptions_wrap';
-
-        const header = document.createElement('div');
-        header.className = 'ea-descriptions_header';
-        wrap.appendChild(header);
-
-        const body = document.createElement('div');
-        const table = document.createElement('table');
-        const thead = document.createElement('thead');
-
-        const slot = document.createElement('slot');
-        body.className = 'ea-descriptions_body';
-        body.appendChild(table);
-        table.appendChild(thead);
-        wrap.appendChild(body);
-
-        this.#wrap = wrap;
-        this.#table = table;
-        this.#tableHeader = header;
-        this.#slot = slot;
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- title 设置标题 -------
-    // #region
-    get title() {
-        return this.getAttribute('title') || "";
-    }
-
-    set title(value) {
-        this.setAttribute('title', value);
-
-        this.#tableHeader.innerHTML = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- col 一行显示多少个item -------
-    // #region
-    get col() {
-        return this.getAttrNumber('col') || 3;
-    }
-
-    set col(value) {
-        this.setAttribute('col', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- border 是否显示边框 -------
-    // #region
-    get border() {
-        return this.getAttrBoolean('border');
-    }
-
-    set border(value) {
-        this.toggleAttr('border', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- direction 显示方向 -------
-    // #region
-    get direction() {
-        return this.getAttribute('direction') || "horizontal";
-    }
-
-    set direction(value) {
-        this.setAttribute('direction', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    initDescriptionsItem(colNumber, items, hasBorder, direction) {
-        const length = Number(items.length);
-
-        for (let i = 0; i < length; i += 3) {
-            let colspanCount = 0;
-            const tbody = document.createElement('tbody');
-
-            switch (direction) {
-                case "horizontal": {
-                    const tr = document.createElement('tr');
-
-                    for (let j = i; j < colNumber + i; j++) {
-                        const colspan = Number(items[j]?.getAttribute("span")) || 1;
-                        let temp = colspanCount + colspan;
-
-                        if (temp > colNumber || !items[j]) break;
-
-                        tr.innerHTML += contentTemplate(items[j], colspan, hasBorder);
-                    }
-
-                    tbody.appendChild(tr);
-                    break;
-                }
-                case "vertical": {
-                    const th_tr = document.createElement('tr');
-                    const td_tr = document.createElement('tr');
-
-                    for (let j = i; j < colNumber + i; j++) {
-                        const colspan = Number(items[j]?.getAttribute("span")) || 1;
-                        let temp = colspanCount + colspan;
-
-                        if (temp > colNumber || !items[j]) break;
-
-                        th_tr.innerHTML += getThTemplate_direction(items[j].getAttribute("label"), hasBorder);
-                        td_tr.innerHTML += getTdTemplate_direction(items[j].innerHTML, hasBorder, colspan);
-                    }
-
-                    tbody.appendChild(th_tr);
-                    tbody.appendChild(td_tr);
-                    break;
-                }
-            }
-
-            this.#table.appendChild(tbody);
-        }
-
-        items.forEach(el => {
-            el.remove();
-        });
-    }
-
-    init() {
-        const that = this;
-
-        this.title = this.title;
-
-        this.col = this.col;
-
-        this.border = this.border;
-
-        this.direction = this.direction;
-
-        const items = this.querySelectorAll('ea-descriptions-item');
-        this.initDescriptionsItem(this.col, items, this.border, this.direction);
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-}
-
-if (!customElements.get('ea-descriptions')) {
-    customElements.define('ea-descriptions', EaDescriptions);
-}
+import Base from"../Base.js";import"../ea-descriptions-item/index.js";import{getThTemplate_direction}from"./src/components/getThTemplate_direction.js";import{getTdTemplate_direction}from"./src/components/getTdTemplate_direction.js";import{contentTemplate}from"./src/components/contentTemplate.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaDescriptions extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-descriptions_wrap" part="container">\n                <div class="ea-descriptions_header" part="header-wrap"></div>\n                <div class="ea-descriptions_body" part="body-wrap">\n                    <table class="ea-descriptions_table" part="table-wrap"></table>\n                </div>\n            </div>\n        ',this.#t=t.querySelector(".ea-descriptions_table"),this.#e=t.querySelector(".ea-descriptions_header"),this.build(t,stylesheet)}get title(){return this.getAttribute("title")||""}set title(t){this.setAttribute("title",t),this.#e.innerHTML=t}get col(){return this.getAttrNumber("col")||3}set col(t){this.setAttribute("col",t)}get border(){return this.getAttrBoolean("border")}set border(t){this.toggleAttr("border",t)}get direction(){return this.getAttribute("direction")||"horizontal"}set direction(t){this.setAttribute("direction",t)}#i(t){const e=Number(t.length);for(let i=0;i<e;i+=3){let e=0;const r=document.createElement("tbody");switch(this.direction){case"horizontal":{const s=document.createElement("tr");for(let r=i;r<this.col+i;r++){const i=Number(t[r]?.getAttribute("span"))||1;if(e+i>this.col||!t[r])break;s.innerHTML+=contentTemplate(t[r],i,this.border)}r.appendChild(s);break}case"vertical":{const s=document.createElement("tr"),o=document.createElement("tr");for(let r=i;r<this.col+i;r++){const i=Number(t[r]?.getAttribute("span"))||1;if(e+i>this.col||!t[r])break;s.innerHTML+=getThTemplate_direction(t[r].getAttribute("label"),this.border),o.innerHTML+=getTdTemplate_direction(t[r].innerHTML,this.border,i)}r.appendChild(s),r.appendChild(o);break}}this.#t.appendChild(r)}t.forEach((t=>{t.remove()}))}connectedCallback(){this.title=this.title,this.col=this.col,this.border=this.border,this.direction=this.direction;const t=this.querySelectorAll("ea-descriptions-item");this.#i(t)}}customElements.get("ea-descriptions")||customElements.define("ea-descriptions",EaDescriptions);

package/components/ea-descriptions/src/components/contentTemplate.js

@@ -0,0 +1 @@
+import{getTdTemplate_border}from"./getTdTemplate_border.js";import{getThTemplate_normal}from"./getThTemplate_normal.js";export const contentTemplate=(e,t,r)=>{let l=e.getAttribute("label"),o=e.innerHTML;return l||(l=e.querySelector('[slot="label"]')?.innerHTML||""),r?getTdTemplate_border(l,o,t):getThTemplate_normal(l,o,t)};

package/components/ea-descriptions/src/components/getTdTemplate_border.js

@@ -0,0 +1 @@
+export const getTdTemplate_border=(e,t,s)=>`\n        <th class="ea-descriptions-item_label ea-descriptions-item_cell is-border" colspan="1">${e}</th>\n        <td class="ea-descriptions-item_content ea-descriptions-item_cell is-border" colspan="${s}">${t}</td>\n    `;

package/components/ea-descriptions/src/components/getTdTemplate_direction.js

@@ -0,0 +1 @@
+export const getTdTemplate_direction=(e,t,n)=>`\n        <td class="ea-descriptions-item_content ea-descriptions-item_cell ${t?"is-border":""}" colspan="${n}">\n            ${e}\n        </td>\n    `;

package/components/ea-descriptions/src/components/getThTemplate_direction.js

@@ -0,0 +1 @@
+export const getThTemplate_direction=(e,t)=>`\n        <th class="ea-descriptions-item_label ea-descriptions-item_cell ${t?"is-border":""}" colspan="1">\n            ${e}${t?"":":"}\n        </th>\n    `;

package/components/ea-descriptions/src/components/getThTemplate_normal.js

@@ -0,0 +1 @@
+export const getThTemplate_normal=(s,n,e)=>`\n        <td class="ea-descriptions-item" colspan="${e}">\n            <span class="ea-descriptions-item_label">${s}:</span>\n            <span class="ea-descriptions-item_content">${n}</span>\n        </td>\n    `;

package/components/ea-descriptions/src/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-descriptions_wrap {\n  font-size: 14px;\n}\n.ea-descriptions_wrap .ea-descriptions_header {\n  font-size: 1rem;\n  font-weight: 700;\n  margin-bottom: 20px;\n}\n.ea-descriptions_wrap .ea-descriptions_body table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ea-descriptions_wrap .ea-descriptions_body table th {\n  background-color: #fafafa;\n}\n.ea-descriptions_wrap .ea-descriptions_body table td {\n  vertical-align: baseline;\n}\n.ea-descriptions_wrap .ea-descriptions-item_label,\n.ea-descriptions_wrap .ea-descriptions-item_content {\n  font-weight: normal;\n  font-size: 14px;\n  vertical-align: middle;\n}\n.ea-descriptions_wrap .ea-descriptions-item_label.is-border,\n.ea-descriptions_wrap .ea-descriptions-item_content.is-border {\n  border: 1px solid #ebeef5;\n}\n.ea-descriptions_wrap .ea-descriptions-item_cell {\n  text-align: left;\n  padding: 12px 10px;\n}\n";