easy-component-ui 0.0.1 → 1.0.3

package/components/ea-descriptions/index.js

@@ -0,0 +1,240 @@
+// @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);
+}

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

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import Base from '../Base.js';
+
+const stylesheet = `
+@import url('/ea_ui_component/icon/index.css');
+
+.ea-descriptions-item_wrap {
+  display: inline-flex;
+  text-align: left;
+  padding-bottom: 1rem;
+  line-height: 1.5;
+}
+.ea-descriptions-item_wrap .ea-descriptions-item_label {
+  margin-right: 10px;
+}
+.ea-descriptions-item_wrap .ea-descriptions-item_label::after {
+  content: ":";
+}
+.ea-descriptions-item_wrap .ea-descriptions-item_content {
+  display: inline-flex;
+  flex: 1;
+  align-items: baseline;
+}
+.ea-descriptions-item_wrap .ea-descriptions-item_label.is-border,
+.ea-descriptions-item_wrap .ea-descriptions-item_content.is-border {
+  border: 1px solid #ebeef5;
+}
+`;
+
+export class EaDescriptionsItem extends Base {
+  #wrap;
+
+  #label;
+
+  #labelSlot;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+
+    const wrap = document.createElement('td');
+    wrap.className = 'ea-descriptions-item_wrap';
+    wrap.colSpan = 1;
+
+    const label = document.createElement('span');
+    const labelSlot = document.createElement('slot');
+    label.className = 'ea-descriptions-item_label';
+    label.appendChild(labelSlot);
+    wrap.appendChild(label);
+
+    const content = document.createElement('span');
+    const slot = document.createElement('slot');
+    content.className = 'ea-descriptions-item_content';
+    labelSlot.name = 'label';
+    content.appendChild(slot);
+    wrap.appendChild(content);
+
+    this.#wrap = wrap;
+    this.#label = label;
+    this.#labelSlot = labelSlot;
+
+    this.build(shadowRoot, stylesheet);
+    this.shadowRoot.appendChild(wrap);
+  }
+
+  // ------- label 该格的标题 -------
+  // #region
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  set label(value) {
+    this.setAttribute('label', value);
+
+    this.#label.innerHTML = value;
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- span 该格的大小 -------
+  // #region
+  get span() {
+    return this.getAttrNumber('span') || 1;
+  }
+
+  set span(value) {
+    this.setAttribute('span', value);
+
+    this.#wrap.colSpan = value;
+  }
+  // #endregion
+  // ------- end -------
+
+  init() {
+    const that = this;
+
+    this.label = this.label;
+
+    this.span = this.span;
+  }
+
+  connectedCallback() {
+    this.init();
+  }
+}
+
+if (!customElements.get('ea-descriptions-item')) {
+  customElements.define('ea-descriptions-item', EaDescriptionsItem);
+}

package/components/ea-empty/index.js

@@ -0,0 +1,141 @@
+// @ts-nocheck
+import Base from '../Base.js';
+
+const stylesheet = `
+.ea-empty_wrap {
+  padding: 40px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.ea-empty_wrap .ea-empty_image {
+  width: 8rem;
+  object-fit: cover;
+}
+.ea-empty_wrap .ea-empty_image svg,
+.ea-empty_wrap .ea-empty_image img {
+  width: 100%;
+  height: 100%;
+}
+.ea-empty_wrap .ea-empty_description {
+  margin-top: 20px;
+}
+.ea-empty_wrap .ea-empty_bottom {
+  margin-top: 20px;
+}
+`;
+
+const emptyStatusSVG = `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path d="M30 50v21.5a2 2 0 0 0 1 1h39a2 2 0 0 0 1-1V50H61a10 10 0 0 1-20 0h-6.5z" fill="#6E6E6F" />
+    <path d="M30.5 50.5L34 39h32.5l4 11.5" fill="none" stroke="#6E6E6F" />
+</svg>
+`;
+
+export class EaEmpty extends Base {
+    #wrap;
+    #imageWrap;
+    #descriptionWrap;
+    #slot;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const wrap = document.createElement('div');
+        wrap.className = 'ea-empty_wrap';
+
+        const imageWrap = document.createElement('div');
+        imageWrap.className = 'ea-empty_image';
+        imageWrap.innerHTML = emptyStatusSVG;
+        wrap.appendChild(imageWrap);
+
+        const descriptionWrap = document.createElement('div');
+        descriptionWrap.className = 'ea-empty_description';
+        descriptionWrap.innerHTML = `暂无数据`;
+        wrap.appendChild(descriptionWrap);
+
+        const bottomWrap = document.createElement('div');
+        const slot = document.createElement('slot');
+        bottomWrap.className = 'ea-empty_bottom';
+        bottomWrap.appendChild(slot);
+        wrap.appendChild(bottomWrap);
+
+        this.#wrap = wrap;
+        this.#imageWrap = imageWrap;
+        this.#descriptionWrap = descriptionWrap;
+        this.#slot = slot;
+
+        this.build(shadowRoot, stylesheet);
+        this.shadowRoot.appendChild(wrap);
+    }
+
+    // ------- description 描述文字 -------
+    // #region
+    get description() {
+        return this.getAttribute('description') || "暂无数据";
+    }
+
+    set description(value) {
+        this.setAttribute('description', value);
+        this.#descriptionWrap.innerHTML = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- image 自定义图片 -------
+    // #region
+    get image() {
+        return this.getAttribute('image') || "";
+    }
+
+    set image(value) {
+        if (!value) return;
+
+        this.setAttribute('image', value);
+
+        const image = new Image();
+        image.src = value;
+        image.onload = () => {
+            // this.#imageWrap.style.width = image.width + "px";
+            this.#imageWrap.innerHTML = `<img src="${value}" />`;
+        }
+
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- image-size 自定义图片大小 -------
+    // #region
+    get imageSize() {
+        return this.getAttribute('image-size') || "128";
+    }
+
+    set imageSize(value) {
+        if (!value) return;
+
+        this.setAttribute('image-size', value);
+        this.#imageWrap.style.width = value + "px";
+    }
+    // #endregion
+    // ------- end -------
+
+    init() {
+        const that = this;
+
+        this.description = this.description;
+
+        this.image = this.image;
+
+        this.imageSize = this.imageSize;
+    }
+
+    connectedCallback() {
+        this.init();
+    }
+}
+
+if (!customElements.get('ea-empty')) {
+    customElements.define('ea-empty', EaEmpty);
+}