easy-component-ui 2.0.5 → 2.1.0

package/components/ea-calendar/index.js

@@ -1 +1,298 @@
-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{#e;#t;#a;#n;#r;#s;#l;#d;#h;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-calendar_wrap' part='container'>\n                <div class='ea-calendar-header_wrap' part='header-wrap'>\n                    <span class='ea-calendar-header_content' part='header-content'></span>\n                    <ea-button-group class='ea-calendar-header_changer' part='header-changer'>\n                        <ea-button class='ea-calendar-header_sg-changer ea-calendar-header_changer-lastMonth' part='header-changer-lastMonth' size=\"small\">上个月</ea-button>\n                        <ea-button class='ea-calendar-header_sg-changer ea-calendar-header_changer-today' part='header-changer-today' size=\"small\">今天</ea-button>\n                        <ea-button class='ea-calendar-header_sg-changer ea-calendar-header_changer-nextMonth' part='header-changer-nextMonth' size=\"small\">下个月</ea-button>\n                    </ea-button-group>\n                </div>\n                <div class='ea-calendar_calendar-wrap' part='calendar-wrap'>\n                    <table class='ea-calendar_table' part='table'>\n                        <thead class='ea-calendar_table-head' part='table-head'></thead>\n                        <tbody class='ea-calendar_table-body' part='table-body'></tbody>\n                    </table>\n                </div>\n            </div>\n        ",this.#e=this.shadowRoot.querySelector(".ea-calendar_wrap"),this.#a=e.querySelector(".ea-calendar-header_content"),this.#t=e.querySelector(".ea-calendar-header_wrap"),this.#n=e.querySelector(".ea-calendar-header_changer"),this.#r=e.querySelector(".ea-calendar-header_changer-lastMonth"),this.#s=e.querySelector(".ea-calendar-header_changer-today"),this.#l=e.querySelector(".ea-calendar-header_changer-nextMonth"),this.#d=e.querySelector(".ea-calendar_table-head"),this.#h=e.querySelector(".ea-calendar_table-body"),this.build(e,stylesheet)}get weekStart(){return this.getAttribute("week-start")||"一"}set weekStart(e){this.setAttribute("week-start",e),this.#d.innerHTML=createThead(getUserWeekStart(this.week,e)).innerHTML}get date(){new Date;return this.getAttribute("date")||getToday()}set date(e){this.setAttribute("date",e),this.#a.innerHTML=e=isNaN(new Date(e))?getToday():getUserToday(e),this.#i(this.#h,e,this.weekStart)}get size(){const e=this.getAttribute("size");return["mini"].includes(e)?e:"medium"}set size(e){if(this.setAttribute("size",e),this.#e.classList.add(e),"mini"===e){const e=createElement("span","prev-btn");e.innerText="<";const t=createElement("span","next-btn");t.innerText=">",this.#r=e,this.#l=t,this.#t.insertBefore(e,this.#t.firstChild),this.#t.appendChild(t)}}get week(){return["日","一","二","三","四","五","六"]}#c(e){e.addEventListener("click",(t=>{this.#h.querySelectorAll("td").forEach((e=>{e.classList.remove("is-selected")})),e.classList.contains("is-selected")?e.classList.remove("is-selected"):e.classList.add("is-selected");const a=new Date(this.date);this.dispatchEvent(new CustomEvent("select",{detail:{year:a.getFullYear(),month:a.getMonth()+1,date:Number(e.innerText),day:this.week[Number(e.innerText)%7]}}))}))}#o(e){const t=new Date(this.date);t.setMonth(t.getMonth()+("next"===e?1:-1)),this.date=`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`}#i(e,t,a="一"){t=isNaN(new Date(t))?new Date:new Date(t),e.innerHTML="";const n=new Date(t),r=n.getMonth()+1,s=new Date(t);s.setDate(1);const l=new Date(t);l.setMonth(r),l.setDate(0);const d=new Date(t);d.setMonth(r),d.setDate(1);const h=getUserWeekStart(this.week,a);for(let t=0;t<6;t++){const t=createElement("tr");t.part="table-body-row";for(let e=0;e<7;e++){const{length:a}=t.children,d=createElement("td");d.part="table-body-cell";const i=createElement("span");i.part="table-body-cell-content";const c=s.getDay(),o=new Date;if(h[a]===this.week[c]&&r===s.getMonth()+1)i.innerText=s.getDate(),s.setDate(s.getDate()+1),this.#c(d);else if(r==s.getMonth())i.innerText=s.getDate(),s.setDate(s.getDate()+1),d.classList.add("is-disabled"),d.part="table-body-cell-disabled";else{const t=e-c+2,n=h.findIndex(((e,t)=>{if("一"===e)return t}));l.setMonth(r-1),l.setDate(t>0?c+a-n:t),i.innerText=l.getDate(),d.part="table-body-cell-disabled",d.classList.add("is-disabled")}new Date(this.date);s.getFullYear()===o.getFullYear()&&s.getMonth()===o.getMonth()&&s.getDate()===o.getDate()+1&&(d.part="table-body-cell-today",d.classList.add("is-today")),s.getFullYear()===n.getFullYear()&&s.getMonth()===n.getMonth()&&s.getDate()===n.getDate()+1&&(d.part="table-body-cell-selected",d.classList.add("is-selected")),d.appendChild(i),t.appendChild(d)}e.appendChild(t)}}connectedCallback(){this.weekStart=this.weekStart,this.date=this.date,this.size=this.size,this.#r.addEventListener("click",(()=>{this.#o("last")})),this.#s.addEventListener("click",(()=>{this.date=`${(new Date).getFullYear()}-${(new Date).getMonth()+1}-${(new Date).getDate()}`})),this.#l.addEventListener("click",(()=>{this.#o("next")}))}}customElements.get("ea-calendar")||customElements.define("ea-calendar",EaCalendar);
+// @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

@@ -0,0 +1,106 @@
+.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 +1,74 @@
-export const stylesheet="\n.ea-calendar_wrap {\n  padding: 12px 20px 35px;\n}\n.ea-calendar_wrap .ea-calendar-header_wrap {\n  border-bottom: 1px solid #ebeef5;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 0.5rem;\n}\n.ea-calendar_wrap .ea-calendar-header_wrap .ea-calendar-header_changer .ea-calendar-header_sg-changer {\n  border: 1px solid #ebeef5;\n  border-left: 0px none transparent;\n}\n.ea-calendar_wrap .ea-calendar-header_wrap .ea-calendar-header_changer .ea-calendar-header_sg-changer:first-child {\n  border-left: 1px solid #ebeef5;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table {\n  width: 100%;\n  table-layout: fixed;\n  border-collapse: collapse;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table th {\n  font-weight: 400;\n  color: #606266;\n  padding: 12px 0;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td {\n  border-right: 1px solid #ebeef5;\n  border-bottom: 1px solid #ebeef5;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-selected {\n  color: #1989fa;\n  background-color: #f2f8fe;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-today {\n  color: #1989fa;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td.is-disabled {\n  pointer-events: none;\n  color: #c0c4cc;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td span {\n  display: block;\n  box-sizing: border-box;\n  height: 85px;\n  padding: 8px;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table td span .calendar-description {\n  margin-top: auto;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table tr:first-child td {\n  border-top: 1px solid #ebeef5;\n}\n.ea-calendar_wrap .ea-calendar_calendar-wrap .ea-calendar_table tr td:first-child {\n  border-left: 1px solid #ebeef5;\n  border-top: 1px solid #ebeef5;\n}\n.ea-calendar_wrap.mini {\n  font-size: 10px;\n  text-align: center;\n}\n.ea-calendar_wrap.mini .ea-calendar-header_wrap {\n  justify-content: space-around;\n}\n.ea-calendar_wrap.mini .ea-calendar-header_wrap .ea-calendar-header_changer {\n  display: none;\n}\n.ea-calendar_wrap.mini .ea-calendar_calendar-wrap .ea-calendar_table td span {\n  height: 20px;\n  padding: 4px;\n}\n";
+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 +1,10 @@
-import{createElement}from"../../../../utils/createElement.js";export const createChangerElement=(e,a)=>{const r=createElement("ea-button",`ea-calendar-header_sg-changer ea-calendar-header_changer-${a}`);return r.innerText=e,r.size="small",r};
+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 +1,18 @@
-import{createElement}from"../../../../utils/createElement.js";export const createThead=(e=["一","二","三","四","五","六","日"])=>{const t=createElement("tr");t.part="table-head-row";const r=e.map((e=>{const t=createElement("th");return t.part="table-head-item",t.innerText=e,t}));return t.append(...r),t};
+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 +1,11 @@
-export function getToday(){const t=new Date;return`${t.getFullYear()}-${t.getMonth()+1}`}export function getUserToday(t){const e=new Date(t);return`${e.getFullYear()}-${e.getMonth()+1}`}
+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 +1,11 @@
-export function getUserWeekStart(e,n){if(!e.includes(n))return e;const t=e.findIndex(((e,t)=>{if(e===n)return t}));return 0===t||-1===t?e:e.slice(t).concat(e.slice(0,t))}
+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

@@ -0,0 +1,25 @@
+@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 +1,51 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";class EaCard extends Base{#s;constructor(){super();const s=this.attachShadow({mode:"open"});s.innerHTML='\n      <div class="ea-card_wrap" part="container">\n        <div class="ea-card_header" part="header-wrap">\n          <slot name="header"></slot>\n        </div>\n        <div class="ea-card_content" part="content-wrap">\n          <slot></slot>\n        </div>\n      </div>\n    ',this.#s=s.querySelector(".ea-card_wrap"),this.build(s,stylesheet)}get shadow(){return this.getAttribute("shadow")||"always"}set shadow(s){this.setAttribute("shadow",s),this.#s.classList.add(`is-${s}-shadow`)}connectedCallback(){this.shadow=this.shadow}}customElements.get("ea-card")||customElements.define("ea-card",EaCard);
+// @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);
+}

package/components/ea-card/index.scss

@@ -0,0 +1,24 @@
+@import "../ea-ui-base-style.scss";
+@import "../ea-icon/index.scss";
+
+.ea-card_wrap {
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  background-color: #fff;
+  overflow: hidden;
+  color: #303133;
+  transition: box-shadow 0.3s;
+
+  &.is-always-shadow,
+  &.is-hover-shadow:hover {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  &.is-never-shadow {
+    box-shadow: none;
+  }
+
+  .ea-card_content {
+    padding: 20px;
+  }
+}

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

@@ -1 +1,19 @@
-export const stylesheet="\n.ea-card_wrap {\n  border-radius: 4px;\n  border: 1px solid #ebeef5;\n  background-color: #fff;\n  overflow: hidden;\n  color: #303133;\n  transition: box-shadow 0.3s;\n}\n.ea-card_wrap.is-always-shadow, .ea-card_wrap.is-hover-shadow:hover {\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n.ea-card_wrap.is-never-shadow {\n  box-shadow: none;\n}\n.ea-card_wrap .ea-card_content {\n  padding: 20px;\n}\n";
+export const stylesheet = `
+.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;
+}
+`;