easy-component-ui 2.1.0 → 3.0.0

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

@@ -1,19 +0,0 @@
-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

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

@@ -1,45 +0,0 @@
-@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,11 +0,0 @@
-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,6 +0,0 @@
-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,7 +0,0 @@
-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,7 +0,0 @@
-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,8 +0,0 @@
-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,35 +0,0 @@
-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

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

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

package/components/ea-drawer/index.css

@@ -1,138 +0,0 @@
-.ea-drawer_wrap {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  z-index: 2001;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  background-color: #fff;
-  transition: left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_header-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  margin-bottom: 32px;
-  padding: 20px 20px 0;
-  color: #72767b;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_header-wrap .ea-drawer_icon {
-  cursor: pointer;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_main-wrap {
-  flex: 1;
-  box-sizing: border-box;
-  padding: 20px;
-  overflow: auto;
-}
-.ea-drawer_wrap .ea-drawer_drawer-wrap .ea-drawer_mask-wrap {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-  z-index: -1;
-  opacity: 0;
-  scale: 0;
-  transition: opacity 0.3s, left 0.3s, right 0.3s, top 0.3s, bottom 0.3s;
-}
-.ea-drawer_wrap.direction-ltr, .ea-drawer_wrap.direction-rtl {
-  top: 0;
-}
-.ea-drawer_wrap.direction-ltr .ea-drawer_drawer-wrap, .ea-drawer_wrap.direction-rtl .ea-drawer_drawer-wrap {
-  top: 0;
-  height: 100%;
-}
-.ea-drawer_wrap.direction-ttb, .ea-drawer_wrap.direction-btt {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ttb .ea-drawer_drawer-wrap, .ea-drawer_wrap.direction-btt .ea-drawer_drawer-wrap {
-  left: 0;
-  width: 100%;
-}
-.ea-drawer_wrap.direction-ttb .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt .ea-drawer_mask-wrap {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ltr.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-rtl.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-ttb.is-open .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt.is-open .ea-drawer_mask-wrap {
-  opacity: 1;
-  scale: 1;
-}
-.ea-drawer_wrap.direction-ltr.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-rtl.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-ttb.will-close .ea-drawer_mask-wrap, .ea-drawer_wrap.direction-btt.will-close .ea-drawer_mask-wrap {
-  opacity: 0;
-  scale: 0;
-}
-.ea-drawer_wrap.direction-ltr {
-  left: -100%;
-}
-.ea-drawer_wrap.direction-ltr .ea-drawer_drawer-wrap {
-  left: -100%;
-}
-.ea-drawer_wrap.direction-ltr .ea-drawer_mask-wrap {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ltr.is-open {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ltr.is-open .ea-drawer_drawer-wrap {
-  left: 0;
-}
-.ea-drawer_wrap.direction-ltr.will-close .ea-drawer_drawer-wrap {
-  left: -100%;
-}
-.ea-drawer_wrap.direction-rtl {
-  right: -100%;
-}
-.ea-drawer_wrap.direction-rtl .ea-drawer_drawer-wrap {
-  right: -100%;
-}
-.ea-drawer_wrap.direction-rtl .ea-drawer_mask-wrap {
-  right: 0;
-}
-.ea-drawer_wrap.direction-rtl.is-open {
-  right: 0;
-}
-.ea-drawer_wrap.direction-rtl.is-open .ea-drawer_drawer-wrap {
-  right: 0;
-}
-.ea-drawer_wrap.direction-rtl.will-close .ea-drawer_drawer-wrap {
-  right: -100%;
-}
-.ea-drawer_wrap.direction-ttb {
-  bottom: -100%;
-}
-.ea-drawer_wrap.direction-ttb .ea-drawer_drawer-wrap {
-  bottom: -100%;
-}
-.ea-drawer_wrap.direction-ttb .ea-drawer_mask-wrap {
-  bottom: 0;
-}
-.ea-drawer_wrap.direction-ttb.is-open {
-  bottom: 0;
-}
-.ea-drawer_wrap.direction-ttb.is-open .ea-drawer_drawer-wrap {
-  bottom: 0;
-}
-.ea-drawer_wrap.direction-ttb.will-close .ea-drawer_drawer-wrap {
-  bottom: -100%;
-}
-.ea-drawer_wrap.direction-btt {
-  top: -100%;
-}
-.ea-drawer_wrap.direction-btt .ea-drawer_drawer-wrap {
-  top: -100%;
-}
-.ea-drawer_wrap.direction-btt .ea-drawer_mask-wrap {
-  top: 0;
-}
-.ea-drawer_wrap.direction-btt.is-open {
-  top: 0;
-}
-.ea-drawer_wrap.direction-btt.is-open .ea-drawer_drawer-wrap {
-  top: 0;
-}
-.ea-drawer_wrap.direction-btt.will-close .ea-drawer_drawer-wrap {
-  top: -100%;
-}