easy-component-ui 2.1.0 → 3.0.0

package/components/ea-calendar/index.css

@@ -1,72 +0,0 @@
-.ea-calendar_wrap {
-  padding: 12px 20px 35px;
-}
-.ea-calendar_wrap .ea-calendar-header_wrap {
-  border-bottom: 1px solid #ebeef5;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 0.5rem;
-}
-.ea-calendar_wrap .ea-calendar-header_wrap .ea-calendar-header_changer .ea-calendar-header_sg-changer {
-  border: 1px solid #ebeef5;
-  border-left: 0px none transparent;
-}
-.ea-calendar_wrap .ea-calendar-header_wrap .ea-calendar-header_changer .ea-calendar-header_sg-changer:first-child {
-  border-left: 1px solid #ebeef5;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table th {
-  font-weight: 400;
-  color: #606266;
-  padding: 12px 0;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td {
-  border-right: 1px solid #ebeef5;
-  border-bottom: 1px solid #ebeef5;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-selected {
-  color: #1989fa;
-  background-color: #f2f8fe;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-today {
-  color: #1989fa;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-disabled {
-  pointer-events: none;
-  color: #c0c4cc;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td span {
-  display: block;
-  box-sizing: border-box;
-  height: 85px;
-  padding: 8px;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td span .calendar-description {
-  margin-top: auto;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table tr:first-child td {
-  border-top: 1px solid #ebeef5;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table tr td:first-child {
-  border-left: 1px solid #ebeef5;
-  border-top: 1px solid #ebeef5;
-}
-.ea-calendar_wrap.mini {
-  font-size: 10px;
-  text-align: center;
-}
-.ea-calendar_wrap.mini .ea-calendar-header_wrap {
-  justify-content: space-around;
-}
-.ea-calendar_wrap.mini .ea-calendar-header_wrap .ea-calendar-header_changer {
-  display: none;
-}
-.ea-calendar_wrap.mini .ea-calendar_calendar-wrap .ea-calendar_table td span {
-  height: 20px;
-  padding: 4px;
-}

package/components/ea-calendar/index.js

@@ -1,298 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement, createSlotElement } from '../../utils/createElement.js';
-
-import "../ea-button-group/index.js";
-import "../ea-button/index.js";
-
-import { createChangerElement } from './src/utils/createChangerElement.js';
-import { createThead } from './src/utils/createThead.js';
-import { getToday, getUserToday } from './src/utils/getDate.js';
-import { getUserWeekStart } from './src/utils/getUserWeekStart.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaCalendar extends Base {
-    #container;
-
-    #headerDateWrap;
-    #headerDateContent;
-    #headerChangerWrap;
-
-    #lastMonthBtn;
-    #todayBtn;
-    #nextMonthBtn;
-
-    #tableHead;
-    #tableContent;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <div class='ea-calendar_wrap' part='container'>
-                <div class='ea-calendar-header_wrap' part='header-wrap'>
-                    <span class='ea-calendar-header_content' part='header-content'></span>
-                    <ea-button-group class='ea-calendar-header_changer' part='header-changer'>
-                        <ea-button class='ea-calendar-header_sg-changer ea-calendar-header_changer-lastMonth' part='header-changer-lastMonth' size="small">上个月</ea-button>
-                        <ea-button class='ea-calendar-header_sg-changer ea-calendar-header_changer-today' part='header-changer-today' size="small">今天</ea-button>
-                        <ea-button class='ea-calendar-header_sg-changer ea-calendar-header_changer-nextMonth' part='header-changer-nextMonth' size="small">下个月</ea-button>
-                    </ea-button-group>
-                </div>
-                <div class='ea-calendar_calendar-wrap' part='calendar-wrap'>
-                    <table class='ea-calendar_table' part='table'>
-                        <thead class='ea-calendar_table-head' part='table-head'></thead>
-                        <tbody class='ea-calendar_table-body' part='table-body'></tbody>
-                    </table>
-                </div>
-            </div>
-        `;
-
-        this.#container = this.shadowRoot.querySelector('.ea-calendar_wrap');
-
-        this.#headerDateContent = shadowRoot.querySelector('.ea-calendar-header_content');
-        this.#headerDateWrap = shadowRoot.querySelector('.ea-calendar-header_wrap');
-
-        this.#headerChangerWrap = shadowRoot.querySelector('.ea-calendar-header_changer');
-        this.#lastMonthBtn = shadowRoot.querySelector('.ea-calendar-header_changer-lastMonth');
-        this.#todayBtn = shadowRoot.querySelector('.ea-calendar-header_changer-today');
-        this.#nextMonthBtn = shadowRoot.querySelector('.ea-calendar-header_changer-nextMonth');
-
-        this.#tableHead = shadowRoot.querySelector('.ea-calendar_table-head');
-        this.#tableContent = shadowRoot.querySelector('.ea-calendar_table-body');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- week-start 用户传入的每周起始日 -------
-    // #region
-    get weekStart() {
-        return this.getAttribute('week-start') || "一";
-    }
-
-    set weekStart(weekStart) {
-        this.setAttribute('week-start', weekStart);
-
-        this.#tableHead.innerHTML = createThead(getUserWeekStart(this.week, weekStart)).innerHTML;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- date 用户传入日期 -------
-    // #region
-    get date() {
-        const myDate = new Date();
-
-        return this.getAttribute('date') || getToday();
-    }
-
-    set date(date) {
-        this.setAttribute('date', date);
-
-        this.#headerDateContent.innerHTML = date = isNaN(new Date(date)) ? getToday() : getUserToday(date);
-
-        this.#handleDateChange(this.#tableContent, date, this.weekStart);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- size 用户传入尺寸 -------
-    // #region
-    get size() {
-        const attr = this.getAttribute('size');
-        return ["mini"].includes(attr) ? attr : "medium";
-    }
-
-    set size(size) {
-        this.setAttribute('size', size);
-
-        this.#container.classList.add(size);
-
-        if (size === "mini") {
-            const prevIcon = createElement("span", "prev-btn");
-            prevIcon.innerText = "<";
-            const nextIcon = createElement("span", "next-btn");
-            nextIcon.innerText = ">";
-
-            this.#lastMonthBtn = prevIcon;
-            this.#nextMonthBtn = nextIcon;
-
-            this.#headerDateWrap.insertBefore(prevIcon, this.#headerDateWrap.firstChild);
-            this.#headerDateWrap.appendChild(nextIcon);
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    get week() {
-        return ["日", "一", "二", "三", "四", "五", "六"];
-    }
-
-    /**
-     * 处理日历项的选择事件。
-     * 当日历项被点击时，此函数被调用。它的目的是切换所点击项的选中状态，并取消其他项的选中状态。
-     * @param {HTMLElement} node - 日历项元素节点。这个节点代表日历中的一个日期单元格。
-     */
-    #handleCalendarItemSelect(node) {
-        // 为日历项添加点击事件监听器
-        node.addEventListener('click', (e) => {
-            // 遍历日历表中的所有单元格，并移除它们的 'is-selected' 类，以取消选中状态
-            this.#tableContent.querySelectorAll('td').forEach(el => {
-                el.classList.remove('is-selected');
-            });
-
-            // 如果当前点击的节点已经选中，则取消选中状态，否则选中当前节点
-            if (node.classList.contains('is-selected')) {
-                node.classList.remove('is-selected');
-            } else {
-                node.classList.add('is-selected');
-            }
-
-            const myDate = new Date(this.date);
-            this.dispatchEvent(new CustomEvent('select', {
-                detail: {
-                    year: myDate.getFullYear(),
-                    month: myDate.getMonth() + 1,
-                    date: Number(node.innerText),
-                    day: this.week[Number(node.innerText) % 7],
-                }
-            }));
-        });
-    }
-
-    #handleMonthChange(flag) {
-        const date = new Date(this.date);
-        date.setMonth(date.getMonth() + (flag === "next" ? 1 : -1));
-
-        this.date = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
-    }
-
-    /**
-     * 根据给定的日期更新页面上的日历视图。
-     * @param {HTMLElement} content - 用于展示日历的HTML元素。
-     * @param {string|number|Date} date - 需要展示的月份的日期对象。
-     */
-    #handleDateChange(content, date, weekStart = "一") {
-        date = isNaN(new Date(date)) ? new Date() : new Date(date);
-
-        // 清空内容区域，为展示新月份做准备
-        content.innerHTML = "";
-
-        // 创建当前月份的日期对象
-        const userDate = new Date(date);
-        // 获取月份，月份从0开始，因此需要加1
-        const month = userDate.getMonth() + 1;
-
-        // 初始化当前日期为月份的第一天
-        const currentDate = new Date(date);
-        currentDate.setDate(1);
-
-        // 计算上个月的最后一天
-        const lastDate = new Date(date);
-        lastDate.setMonth(month);
-        lastDate.setDate(0);
-
-        // 计算下个月的第一天
-        const nextDate = new Date(date);
-        nextDate.setMonth(month);
-        nextDate.setDate(1);
-
-        // 定义星期的中文简写数组
-        const weekArr = getUserWeekStart(this.week, weekStart);
-
-        // 构建日历的行，每行7天
-        for (let i = 0; i < 6; i++) {
-            const tr = createElement('tr');
-            tr.part = 'table-body-row';
-
-            // 构建每一天的单元格
-            for (let j = 0; j < 7; j++) {
-                const { length } = tr.children;
-                const td = createElement('td');
-                td.part = 'table-body-cell';
-                const span = createElement('span');
-                span.part = 'table-body-cell-content';
-
-                // 获取当前日期是星期几
-                const day = currentDate.getDay();
-                const myDate = new Date();
-
-                // 判断当前单元格应展示哪一天的日期
-                if (weekArr[length] === this.week[day] && month === currentDate.getMonth() + 1) {
-                    // 如果是当前月的日期，则展示当前月的日期
-                    span.innerText = currentDate.getDate();
-                    currentDate.setDate(currentDate.getDate() + 1);
-                    this.#handleCalendarItemSelect(td);
-                } else if (month == currentDate.getMonth()) {
-                    // 如果是下个月的日期，则展示下个月的日期
-                    span.innerText = currentDate.getDate();
-                    currentDate.setDate(currentDate.getDate() + 1);
-                    td.classList.add("is-disabled");
-                    td.part = "table-body-cell-disabled";
-                } else {
-                    // 如果是上个月的日期，则展示上个月的日期
-                    const lastMonthDateStep = j - day + 2;
-                    const step = weekArr.findIndex((item, index) => {
-                        if (item === "一") return index;
-                    })
-
-                    lastDate.setMonth(month - 1);
-                    lastDate.setDate(lastMonthDateStep > 0 ? (day + length) - step : lastMonthDateStep);
-                    span.innerText = lastDate.getDate();
-                    td.part = "table-body-cell-disabled";
-                    td.classList.add("is-disabled");
-                }
-
-                const userToday = new Date(this.date);
-                if (currentDate.getFullYear() === myDate.getFullYear() && currentDate.getMonth() === myDate.getMonth() && currentDate.getDate() === myDate.getDate() + 1) {
-                    td.part = "table-body-cell-today";
-                    td.classList.add("is-today");
-                }
-
-                if (currentDate.getFullYear() === userDate.getFullYear() && currentDate.getMonth() === userDate.getMonth() && currentDate.getDate() === userDate.getDate() + 1) {
-                    td.part = "table-body-cell-selected";
-                    td.classList.add("is-selected");
-                }
-
-
-                // 将日期单元格添加到行中
-                td.appendChild(span);
-                tr.appendChild(td);
-            }
-
-            // 将行添加到日历表格中
-            content.appendChild(tr);
-        }
-    }
-
-
-    connectedCallback() {
-        const that = this;
-
-        this.weekStart = this.weekStart;
-
-        this.date = this.date;
-
-        this.size = this.size;
-
-        // 上个月按钮
-        this.#lastMonthBtn.addEventListener('click', () => {
-            this.#handleMonthChange("last");
-        });
-
-        // 今天按钮
-        this.#todayBtn.addEventListener('click', () => {
-            this.date = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`;
-        });
-
-        // 下个月按钮
-        this.#nextMonthBtn.addEventListener('click', () => {
-            this.#handleMonthChange("next");
-        });
-    }
-}
-
-if (!customElements.get('ea-calendar')) {
-    customElements.define('ea-calendar', EaCalendar);
-}

package/components/ea-calendar/index.scss

@@ -1,106 +0,0 @@
-.ea-calendar_wrap {
-  padding: 12px 20px 35px;
-
-  .ea-calendar-header_wrap {
-    border-bottom: 1px solid #ebeef5;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    padding-bottom: 0.5rem;
-
-    .ea-calendar-header_changer {
-      .ea-calendar-header_sg-changer {
-        border: 1px solid #ebeef5;
-        border-left: 0px none transparent;
-      }
-
-      .ea-calendar-header_sg-changer:first-child {
-        border-left: 1px solid #ebeef5;
-      }
-    }
-  }
-
-  .ea-calendar_calendar-wrap {
-    .ea-calendar_table {
-      width: 100%;
-      table-layout: fixed;
-      border-collapse: collapse;
-
-      th {
-        font-weight: 400;
-        color: #606266;
-        padding: 12px 0;
-      }
-
-      td {
-        border-right: 1px solid #ebeef5;
-        border-bottom: 1px solid #ebeef5;
-
-        &.is-selected {
-          color: #1989fa;
-          background-color: #f2f8fe;
-        }
-
-        &.is-today {
-          color: #1989fa;
-        }
-
-        &.is-disabled {
-          pointer-events: none;
-          color: #c0c4cc;
-        }
-
-        span {
-          display: block;
-          box-sizing: border-box;
-          height: 85px;
-          padding: 8px;
-
-          .calendar-description {
-            margin-top: auto;
-          }
-        }
-      }
-
-      tr {
-        &:first-child {
-          td {
-            border-top: 1px solid #ebeef5;
-          }
-        }
-
-        td {
-          &:first-child {
-            border-left: 1px solid #ebeef5;
-            border-top: 1px solid #ebeef5;
-          }
-        }
-      }
-    }
-  }
-
-  &.mini {
-    font-size: 10px;
-    text-align: center;
-
-    .ea-calendar-header_wrap {
-      justify-content: space-around;
-      .ea-calendar-header_changer {
-        display: none;
-      }
-    }
-
-    .ea-calendar_calendar-wrap {
-      .ea-calendar_table {
-        td {
-          span {
-            height: 20px;
-            padding: 4px;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,74 +0,0 @@
-export const stylesheet = `
-.ea-calendar_wrap {
-  padding: 12px 20px 35px;
-}
-.ea-calendar_wrap .ea-calendar-header_wrap {
-  border-bottom: 1px solid #ebeef5;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 0.5rem;
-}
-.ea-calendar_wrap .ea-calendar-header_wrap .ea-calendar-header_changer .ea-calendar-header_sg-changer {
-  border: 1px solid #ebeef5;
-  border-left: 0px none transparent;
-}
-.ea-calendar_wrap .ea-calendar-header_wrap .ea-calendar-header_changer .ea-calendar-header_sg-changer:first-child {
-  border-left: 1px solid #ebeef5;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table th {
-  font-weight: 400;
-  color: #606266;
-  padding: 12px 0;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td {
-  border-right: 1px solid #ebeef5;
-  border-bottom: 1px solid #ebeef5;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-selected {
-  color: #1989fa;
-  background-color: #f2f8fe;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-today {
-  color: #1989fa;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-disabled {
-  pointer-events: none;
-  color: #c0c4cc;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td span {
-  display: block;
-  box-sizing: border-box;
-  height: 85px;
-  padding: 8px;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td span .calendar-description {
-  margin-top: auto;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table tr:first-child td {
-  border-top: 1px solid #ebeef5;
-}
-.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table tr td:first-child {
-  border-left: 1px solid #ebeef5;
-  border-top: 1px solid #ebeef5;
-}
-.ea-calendar_wrap.mini {
-  font-size: 10px;
-  text-align: center;
-}
-.ea-calendar_wrap.mini .ea-calendar-header_wrap {
-  justify-content: space-around;
-}
-.ea-calendar_wrap.mini .ea-calendar-header_wrap .ea-calendar-header_changer {
-  display: none;
-}
-.ea-calendar_wrap.mini .ea-calendar_calendar-wrap .ea-calendar_table td span {
-  height: 20px;
-  padding: 4px;
-}
-`;

package/components/ea-calendar/src/utils/createChangerElement.js

@@ -1,10 +0,0 @@
-import { createElement } from "../../../../utils/createElement.js";
-
-export const createChangerElement = (text, className) => {
-    const el = createElement('ea-button', `ea-calendar-header_sg-changer ea-calendar-header_changer-${className}`);
-
-    el.innerText = text;
-    el.size = "small";
-
-    return el;
-}

package/components/ea-calendar/src/utils/createThead.js

@@ -1,18 +0,0 @@
-import { createElement } from "../../../../utils/createElement.js";
-export const createThead = (weekArr = ["一", "二", "三", "四", "五", "六", "日"]) => {
-    const tr = createElement('tr');
-    tr.part = "table-head-row";
-
-    const ths = weekArr.map(item => {
-        const th = createElement('th');
-        th.part = "table-head-item";
-
-        th.innerText = item;
-
-        return th;
-    });
-
-    tr.append(...ths);
-
-    return tr;
-}

package/components/ea-calendar/src/utils/getDate.js

@@ -1,11 +0,0 @@
-export function getToday() {
-    const myDate = new Date();
-
-    return `${myDate.getFullYear()}-${myDate.getMonth() + 1}`
-}
-
-export function getUserToday(date) {
-    const myDate = new Date(date);
-
-    return `${myDate.getFullYear()}-${myDate.getMonth() + 1}`
-}

package/components/ea-calendar/src/utils/getUserWeekStart.js

@@ -1,11 +0,0 @@
-export function getUserWeekStart(weekArr, start) {
-    if (!weekArr.includes(start)) return weekArr;
-
-    const index = weekArr.findIndex((item, index) => {
-        if (item === start) return index;
-    })
-
-    if (index === 0 || index === -1) return weekArr;
-
-    return weekArr.slice(index).concat(weekArr.slice(0, index));
-}

package/components/ea-card/index.css

@@ -1,25 +0,0 @@
-@import "../ea-icon/css/fontello.css";
-@import "../ea-icon/css/animation.css";
-@font-face {
-  font-size: 1rem;
-  font-size: 16px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  src: url("../ea-icon/font/fontello.eot") format("embedded-opentype"), url("../ea-icon/font/fontello.ttf") format("truetype"), url("../ea-icon/font/fontello.woff") format("woff"), url("../ea-icon/font/fontello.woff2") format("woff2"), url("../ea-icon/font/fontello.svg") format("svg");
-}
-.ea-card_wrap {
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-  background-color: #fff;
-  overflow: hidden;
-  color: #303133;
-  transition: box-shadow 0.3s;
-}
-.ea-card_wrap.is-always-shadow, .ea-card_wrap.is-hover-shadow:hover {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-.ea-card_wrap.is-never-shadow {
-  box-shadow: none;
-}
-.ea-card_wrap .ea-card_content {
-  padding: 20px;
-}

package/components/ea-card/index.js

@@ -1,51 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-class EaCard extends Base {
-  #wrap;
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-
-    shadowRoot.innerHTML = `
-      <div class="ea-card_wrap" part="container">
-        <div class="ea-card_header" part="header-wrap">
-          <slot name="header"></slot>
-        </div>
-        <div class="ea-card_content" part="content-wrap">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-
-    this.#wrap = shadowRoot.querySelector('.ea-card_wrap');
-
-    this.build(shadowRoot, stylesheet);
-  }
-
-  // ------- shadow 阴影属性 -------
-  // #region
-  get shadow() {
-    return this.getAttribute('shadow') || "always";
-  }
-
-  set shadow(val) {
-    this.setAttribute('shadow', val);
-
-    this.#wrap.classList.add(`is-${val}-shadow`);
-  }
-  // #endregion
-  // ------- end -------
-
-  connectedCallback() {
-    this.shadow = this.shadow;
-  }
-}
-
-if (!customElements.get('ea-card')) {
-  customElements.define('ea-card', EaCard);
-}