easy-component-ui 2.0.5 → 2.1.0

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

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

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

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

package/components/ea-descriptions/index.css

@@ -0,0 +1,33 @@
+.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;
+}

package/components/ea-descriptions/index.js

@@ -1 +1,171 @@
-import Base from"../Base.js";import"../ea-icon/index.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(r.part="table-tbody",this.direction){case"horizontal":{const s=document.createElement("tr");s.part="table-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");s.part="table-tr",o.part="table-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()})),this.shadowRoot?.querySelectorAll("[slot]").forEach((t=>{t.remove()}))}#r(){const t=this.shadowRoot?.querySelector("ea-icon");t&&(this.shadowRoot.innerHTML+=`\n                <link rel="stylesheet" href="${new URL("../ea-icon/index.css",import.meta.url).href}">\n            `)}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),this.#r()}}customElements.get("ea-descriptions")||customElements.define("ea-descriptions",EaDescriptions);
+import Base from '../Base.js';
+import "../ea-icon/index.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 {
+    #table;
+    #tableHeader;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-descriptions_wrap" part="container">
+                <div class="ea-descriptions_header" part="header-wrap"></div>
+                <div class="ea-descriptions_body" part="body-wrap">
+                    <table class="ea-descriptions_table" part="table-wrap"></table>
+                </div>
+            </div>
+        `;
+
+        this.#table = shadowRoot.querySelector('.ea-descriptions_table');
+        this.#tableHeader = shadowRoot.querySelector('.ea-descriptions_header');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- 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(items) {
+        const length = Number(items.length);
+
+        for (let i = 0; i < length; i += 3) {
+            let colspanCount = 0;
+            const tbody = document.createElement('tbody');
+            tbody.part = 'table-tbody';
+
+            switch (this.direction) {
+                case "horizontal": {
+                    const tr = document.createElement('tr');
+                    tr.part = 'table-tr';
+
+                    for (let j = i; j < this.col + i; j++) {
+                        const colspan = Number(items[j]?.getAttribute("span")) || 1;
+                        let temp = colspanCount + colspan;
+
+                        if (temp > this.col || !items[j]) break;
+
+                        tr.innerHTML += contentTemplate(items[j], colspan, this.border);
+                    }
+
+                    tbody.appendChild(tr);
+                    break;
+                }
+                case "vertical": {
+                    const th_tr = document.createElement('tr');
+                    const td_tr = document.createElement('tr');
+                    th_tr.part = 'table-tr';
+                    td_tr.part = 'table-tr';
+
+                    for (let j = i; j < this.col + i; j++) {
+                        const colspan = Number(items[j]?.getAttribute("span")) || 1;
+                        let temp = colspanCount + colspan;
+
+                        if (temp > this.col || !items[j]) break;
+
+                        th_tr.innerHTML += getThTemplate_direction(items[j].getAttribute("label"), this.border);
+                        td_tr.innerHTML += getTdTemplate_direction(items[j].innerHTML, this.border, colspan);
+                    }
+
+                    tbody.appendChild(th_tr);
+                    tbody.appendChild(td_tr);
+                    break;
+                }
+            }
+
+            this.#table.appendChild(tbody);
+        }
+
+        items.forEach(el => {
+            el.remove();
+        });
+        this.shadowRoot?.querySelectorAll('[slot]').forEach(slot => {
+            slot.remove();
+        });
+    }
+
+    #initHasIconItem() {
+        const hasIcon = this.shadowRoot?.querySelector('ea-icon');
+
+        if (hasIcon) {
+            this.shadowRoot.innerHTML += `
+                <link rel="stylesheet" href="${new URL('../ea-icon/index.css', import.meta.url).href}">
+            `;
+        }
+    }
+
+    connectedCallback() {
+        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(items);
+
+        this.#initHasIconItem();
+    }
+}
+
+if (!customElements.get('ea-descriptions')) {
+    customElements.define('ea-descriptions', EaDescriptions);
+}

package/components/ea-descriptions/index.scss

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

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

@@ -1 +1,11 @@
-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)};
+import { getTdTemplate_border } from "./getTdTemplate_border.js";
+import { getThTemplate_normal } from "./getThTemplate_normal.js";
+
+export 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);
+}

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

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

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

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

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

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

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

@@ -1 +1,8 @@
-export const getThTemplate_normal=(t,a,e)=>`\n        <td class="ea-descriptions-item" colspan="${e}" part="table-td">\n            <span class="ea-descriptions-item_label" part="table-td-label">${t}:</span>\n            <span class="ea-descriptions-item_content" part="table-td-content">${a}</span>\n        </td>\n    `;
+export const getThTemplate_normal = (label, content, colspan) => {
+    return `
+        <td class="ea-descriptions-item" colspan="${colspan}" part="table-td">
+            <span class="ea-descriptions-item_label" part="table-td-label">${label}:</span>
+            <span class="ea-descriptions-item_content" part="table-td-content">${content}</span>
+        </td>
+    `;
+}

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

@@ -1 +1,35 @@
-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";
+export 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;
+}
+`;

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

@@ -0,0 +1,21 @@
+.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;
+}

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

@@ -1 +1,71 @@
-import Base from"../Base.js";import{stylesheet}from"./src/stylesheet.js";export class EaDescriptionsItem extends Base{#e;#t;#s;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n        <td class="ea-descriptions-item_wrap" part="container">\n            <span class="ea-descriptions-item_label" part="label-wrap">\n                <slot slot="label"></slot>\n            </span>\n            <span class="ea-descriptions-item_content" part="content-wrap">\n                <slot></slot>\n            </span>\n        </td>\n    ',this.#e=e.querySelector(".ea-descriptions-item_wrap"),this.#t=e.querySelector(".ea-descriptions-item_label"),this.#s=e.querySelector('slot[name="label"]'),this.build(e,stylesheet)}get label(){return this.getAttribute("label")||""}set label(e){e&&(this.setAttribute("label",e),this.#t.innerHTML=e)}get span(){return this.getAttrNumber("span")||1}set span(e){this.setAttribute("span",e)}connectedCallback(){this.label=this.label,this.span=this.span}}customElements.get("ea-descriptions-item")||customElements.define("ea-descriptions-item",EaDescriptionsItem);
+import Base from '../Base.js';
+
+import { stylesheet } from './src/stylesheet.js';
+
+export class EaDescriptionsItem extends Base {
+  #wrap;
+
+  #label;
+
+  #labelSlot;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+
+    shadowRoot.innerHTML = `
+        <td class="ea-descriptions-item_wrap" part="container">
+            <span class="ea-descriptions-item_label" part="label-wrap">
+                <slot slot="label"></slot>
+            </span>
+            <span class="ea-descriptions-item_content" part="content-wrap">
+                <slot></slot>
+            </span>
+        </td>
+    `;
+
+    this.#wrap = shadowRoot.querySelector('.ea-descriptions-item_wrap');
+    this.#label = shadowRoot.querySelector('.ea-descriptions-item_label');
+    this.#labelSlot = shadowRoot.querySelector('slot[name="label"]');
+
+    this.build(shadowRoot, stylesheet);
+  }
+
+  // ------- label 该格的标题 -------
+  // #region
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  set label(value) {
+    if (!value) return;
+    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);
+  }
+  // #endregion
+  // ------- end -------
+
+  connectedCallback() {
+    this.label = this.label;
+
+    this.span = this.span;
+  }
+}
+
+if (!customElements.get('ea-descriptions-item')) {
+  customElements.define('ea-descriptions-item', EaDescriptionsItem);
+}

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

@@ -0,0 +1,29 @@
+.ea-descriptions-item_wrap {
+  display: inline-flex;
+  text-align: left;
+
+  padding-bottom: 1rem;
+
+  line-height: 1.5;
+
+  .ea-descriptions-item_label {
+    margin-right: 10px;
+
+    &::after {
+      content: ":";
+    }
+  }
+
+  .ea-descriptions-item_content {
+    display: inline-flex;
+    flex: 1;
+    align-items: baseline;
+  }
+
+  .ea-descriptions-item_label,
+  .ea-descriptions-item_content {
+    &.is-border {
+      border: 1px solid #ebeef5;
+    }
+  }
+}

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

@@ -1 +1,23 @@
-export const stylesheet='\n.ea-descriptions-item_wrap {\n  display: inline-flex;\n  text-align: left;\n  padding-bottom: 1rem;\n  line-height: 1.5;\n}\n.ea-descriptions-item_wrap .ea-descriptions-item_label {\n  margin-right: 10px;\n}\n.ea-descriptions-item_wrap .ea-descriptions-item_label::after {\n  content: ":";\n}\n.ea-descriptions-item_wrap .ea-descriptions-item_content {\n  display: inline-flex;\n  flex: 1;\n  align-items: baseline;\n}\n.ea-descriptions-item_wrap .ea-descriptions-item_label.is-border,\n.ea-descriptions-item_wrap .ea-descriptions-item_content.is-border {\n  border: 1px solid #ebeef5;\n}\n';
+export const stylesheet = `
+.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;
+}
+`;