easy-component-ui 2.0.5 → 2.1.1

package/components/ea-collapse/index.js

@@ -1 +1,109 @@
-import{timeout}from"../../utils/timeout.js";import Base from"../Base.js";import"../ea-collapse-item/index.js";export class EaCollapse extends Base{constructor(){super();this.attachShadow({mode:"open"}).innerHTML='\n            <div class="ea-collapse_wrap" part="container">\n                <slot></slot>\n            </div>\n        '}get active(){return this.getAttribute("active")||1}set active(t){this.setAttribute("active",t),timeout((()=>{this.#t(this.accordion,t)}),20)}get accordion(){return this.getAttrBoolean("accordion")||!1}set accordion(t){this.setAttribute("accordion",t),timeout((()=>{this.#t(t,this.active)}),20)}#t(t,e){const a=Array.from(this.querySelectorAll("ea-collapse-item"));let i=t?"":[];a.forEach((e=>{e.addEventListener("change",(i=>{t&&a.forEach((t=>{t.isOpen=!1})),e.isOpen=!i.detail.isOpen}))})),t?(i=e.toString().trim()[0],a.forEach((t=>{t.isOpen=t.name===i}))):(i=e.split(",").map((t=>t.trim())).concat(),a.forEach((t=>{t.isOpen=i.includes(t.name)})))}connectedCallback(){this.accordion=this.accordion,this.active=this.active}}customElements.get("ea-collapse")||customElements.define("ea-collapse",EaCollapse);
+// @ts-nocheck
+import { timeout } from '../../utils/timeout.js';
+import Base from '../Base.js';
+import "../ea-collapse-item/index.js";
+
+export class EaCollapse extends Base {
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <div class="ea-collapse_wrap" part="container">
+                <slot></slot>
+            </div>
+        `;
+    }
+
+    // ------- active 当前展开项 -------
+    // #region
+    get active() {
+        return this.getAttribute('active') || 1;
+    }
+
+    set active(name) {
+        this.setAttribute('active', name);
+
+        timeout(() => {
+            this.#handleCollapse(this.accordion, name);
+        }, 20)
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- accordion 是否为手风琴模式 -------
+    // #region
+    get accordion() {
+        return this.getAttrBoolean('accordion') || false;
+    }
+
+    set accordion(flag) {
+        this.setAttribute('accordion', flag);
+
+        timeout(() => {
+            this.#handleCollapse(flag, this.active);
+        }, 20);
+    }
+    // #endregion
+    // ------- end -------
+
+    /**
+     * 处理折叠面板的展开/折叠状态。
+     * 根据传入的标志位flag和激活项名称activeItemName，来决定哪些折叠项应该展开。
+     * 当flag为true时，只允许一个折叠项展开，即单选模式；
+     * 当flag为false时，可以允许多个折叠项展开，即多选模式。
+     * 
+     * @param {boolean} flag - 控制单选或多选模式的标志。true表示单选模式，false表示多选模式。
+     * @param {string} activeItemName - 激活项的名称，用于决定哪些折叠项应该展开。
+     */
+    #handleCollapse(flag, activeItemName) {
+        // 将所有ea-collapse-item元素转换为数组
+        const items = Array.from(this.querySelectorAll('ea-collapse-item'));
+        // 初始化用于记录展开状态的变量
+        let collapseItem = flag ? "" : [];
+
+        // 遍历每个折叠项，绑定状态改变事件的监听器
+        items.forEach(item => {
+            item.addEventListener('change', (e) => {
+                // 在单选模式下，关闭所有其他折叠项
+                if (flag) items.forEach(item => {
+                    item.isOpen = false;
+                });
+
+                // 更新当前折叠项的展开状态
+                item.isOpen = !e.detail.isOpen;
+            });
+        });
+
+        // 根据flag的值来处理折叠项的展开状态
+        if (flag) {
+            // 在单选模式下，根据activeItemName确定哪个折叠项应该展开
+            collapseItem = activeItemName.toString().trim()[0];
+
+            items.forEach(item => {
+                item.isOpen = item.name === collapseItem;
+            });
+        } else {
+            // 在多选模式下，将activeItemName解析为数组，并处理每个折叠项的展开状态
+            collapseItem = activeItemName.split(',').map(item => {
+                return item.trim();
+            }).concat();
+
+            items.forEach(item => {
+                // 根据collapseItem数组中的值，决定当前折叠项是否展开
+                item.isOpen = collapseItem.includes(item.name);
+            });
+        }
+    }
+
+    connectedCallback() {
+        this.accordion = this.accordion;
+
+        this.active = this.active;
+    }
+}
+
+if (!customElements.get('ea-collapse')) {
+    customElements.define('ea-collapse', EaCollapse);
+}

package/components/ea-collapse/index.scss

@@ -0,0 +1,4 @@
+@import "../ea-ui-base-style.scss";
+
+.ea-collapse_wrap {
+}

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

@@ -0,0 +1,31 @@
+.ea-collapse-item_wrap .ea-collapse-item_title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #ebeef5;
+  height: 48px;
+  line-height: 48px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #303133;
+  cursor: pointer;
+}
+.ea-collapse-item_wrap .ea-collapse-item_title .ea-collapse-item_title-icon {
+  width: 0.35rem;
+  height: 0.35rem;
+  margin-right: 1rem;
+  border: 3px solid #9ca0a5;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  rotate: -45deg;
+  transition: rotate 0.3s;
+}
+.ea-collapse-item_wrap .ea-collapse-item_content {
+  will-change: height;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 0;
+  transition: height 0.3s, padding-bottom 0.3s;
+  font-size: 13px;
+  color: #303133;
+}

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

@@ -1 +1,111 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCollapseItem extends Base{#t;#e;#s;#i;#n;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-collapse-item_wrap" part="container">\n                <div class="ea-collapse-item_title" part="title-wrap">\n                    <span class="ea-collapse-item_title-content" part="title-content"></span>\n                    <span class="ea-collapse-item_title-icon" part="title-icon"></span>\n                </div>\n                <div class="ea-collapse-item_content" part="content-wrap">\n                    <slot></slot>\n                </div>\n            </div>\n        ',this.#t=t.querySelector(".ea-collapse-item_wrap"),this.#e=t.querySelector(".ea-collapse-item_title"),this.#s=t.querySelector(".ea-collapse-item_title-content"),this.#i=t.querySelector(".ea-collapse-item_title-icon"),this.#n=t.querySelector(".ea-collapse-item_content"),this.build(t,stylesheet)}get title(){return this.getAttribute("title")}set title(t){this.setAttribute("title",t),this.#s.innerHTML=t}get name(){return this.getAttribute("name")}set name(t){this.setAttribute("name",t)}get isOpen(){return this.getAttrBoolean("is-open")||!1}set isOpen(t){if(t===this.isOpen)return;this.toggleAttr("is-open",t);const e=this.#n.scrollHeight;this.isOpen?(this.#n.style.height=`${e}px`,this.#n.style.paddingBottom="20px",this.#i.style.rotate="45deg"):(this.#n.style.height="0px",this.#n.style.paddingBottom="0px",this.#i.style.rotate="-45deg")}connectedCallback(){this.title=this.title,this.name=this.name,this.#e.addEventListener("click",(t=>{this.dispatchEvent(new CustomEvent("change",{detail:{name:this.name,isOpen:this.isOpen},bubbles:!0,composed:!0}))}))}}customElements.get("ea-collapse-item")||customElements.define("ea-collapse-item",EaCollapseItem);
+// @ts-nocheck
+import Base from '../Base.js';
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaCollapseItem extends Base {
+    #wrap;
+
+    #titleWrap;
+    #titleContent;
+    #titleIcon;
+
+    #contentWrap;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-collapse-item_wrap" part="container">
+                <div class="ea-collapse-item_title" part="title-wrap">
+                    <span class="ea-collapse-item_title-content" part="title-content"></span>
+                    <span class="ea-collapse-item_title-icon" part="title-icon"></span>
+                </div>
+                <div class="ea-collapse-item_content" part="content-wrap">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-collapse-item_wrap');
+        this.#titleWrap = shadowRoot.querySelector('.ea-collapse-item_title');
+        this.#titleContent = shadowRoot.querySelector('.ea-collapse-item_title-content');
+        this.#titleIcon = shadowRoot.querySelector('.ea-collapse-item_title-icon');
+        this.#contentWrap = shadowRoot.querySelector('.ea-collapse-item_content');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- title 标题 -------
+    // #region
+    get title() {
+        return this.getAttribute('title');
+    }
+
+    set title(title) {
+        this.setAttribute('title', title);
+
+        this.#titleContent.innerHTML = title;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- name 唯一标识符 -------
+    // #region
+    get name() {
+        return this.getAttribute('name');
+    }
+
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- isOpen 是否展开 -------
+    // #region
+    get isOpen() {
+        return this.getAttrBoolean('is-open') || false;
+    }
+
+    set isOpen(flag) {
+        if (flag === this.isOpen) return;
+
+        this.toggleAttr('is-open', flag);
+
+        const height = this.#contentWrap.scrollHeight;
+
+        if (this.isOpen) {
+            this.#contentWrap.style.height = `${height}px`;
+            this.#contentWrap.style.paddingBottom = '20px';
+            this.#titleIcon.style.rotate = '45deg';
+        } else {
+            this.#contentWrap.style.height = '0px';
+            this.#contentWrap.style.paddingBottom = '0px';
+            this.#titleIcon.style.rotate = '-45deg';
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.title = this.title;
+        this.name = this.name;
+
+        this.#titleWrap.addEventListener('click', (e) => {
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: {
+                    name: this.name,
+                    isOpen: this.isOpen,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+    }
+}
+
+if (!customElements.get('ea-collapse-item')) {
+    customElements.define('ea-collapse-item', EaCollapseItem);
+}

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

@@ -0,0 +1,46 @@
+@import "../ea-ui-base-style.scss";
+
+.ea-collapse-item_wrap {
+  .ea-collapse-item_title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    border-bottom: 1px solid #ebeef5;
+
+    height: 48px;
+    line-height: 48px;
+
+    font-size: 13px;
+    font-weight: 700;
+    color: #303133;
+
+    cursor: pointer;
+
+    .ea-collapse-item_title-icon {
+      width: 0.35rem;
+      height: 0.35rem;
+
+      margin-right: 1rem;
+
+      border: 3px solid #9ca0a5;
+      border-left-color: transparent;
+      border-top-color: transparent;
+
+      rotate: -45deg;
+      transition: rotate 0.3s;
+    }
+  }
+
+  .ea-collapse-item_content {
+    will-change: height;
+    overflow: hidden;
+
+    height: 0;
+    padding-bottom: 0;
+
+    transition: height 0.3s, padding-bottom 0.3s;
+    font-size: 13px;
+    color: #303133;
+  }
+}

package/components/ea-collapse-item/src/style/stylesheet.js

@@ -1 +1,33 @@
-export const stylesheet="\n.ea-collapse-item_wrap .ea-collapse-item_title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid #ebeef5;\n  height: 48px;\n  line-height: 48px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #303133;\n  cursor: pointer;\n}\n.ea-collapse-item_wrap .ea-collapse-item_title .ea-collapse-item_title-icon {\n  width: 0.35rem;\n  height: 0.35rem;\n  margin-right: 1rem;\n  border: 3px solid #9ca0a5;\n  border-left-color: transparent;\n  border-top-color: transparent;\n  rotate: -45deg;\n  transition: rotate 0.3s;\n}\n.ea-collapse-item_wrap .ea-collapse-item_content {\n  will-change: height;\n  overflow: hidden;\n  height: 0;\n  padding-bottom: 0;\n  transition: height 0.3s, padding-bottom 0.3s;\n  font-size: 13px;\n  color: #303133;\n}\n";
+export const stylesheet = `
+.ea-collapse-item_wrap .ea-collapse-item_title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #ebeef5;
+  height: 48px;
+  line-height: 48px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #303133;
+  cursor: pointer;
+}
+.ea-collapse-item_wrap .ea-collapse-item_title .ea-collapse-item_title-icon {
+  width: 0.35rem;
+  height: 0.35rem;
+  margin-right: 1rem;
+  border: 3px solid #9ca0a5;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  rotate: -45deg;
+  transition: rotate 0.3s;
+}
+.ea-collapse-item_wrap .ea-collapse-item_content {
+  will-change: height;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 0;
+  transition: height 0.3s, padding-bottom 0.3s;
+  font-size: 13px;
+  color: #303133;
+}
+`;

package/components/ea-container/index.css

@@ -0,0 +1,14 @@
+.ea-container_wrap {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+.ea-container_wrap.is-vertical {
+  flex-direction: column;
+}
+.ea-container_wrap ::slotted(ea-main) {
+  flex: 1;
+  overflow: auto;
+}

package/components/ea-container/index.js

@@ -1 +1,85 @@
-import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-container_wrap {\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n}\n.ea-container_wrap.is-vertical {\n  flex-direction: column;\n}\n.ea-container_wrap ::slotted(ea-main) {\n  flex: 1;\n  overflow: auto;\n}\n";export class EaContainer extends Base{#e;get CONTAINER_TYPE(){return["ea-header","ea-main","ea-footer","ea-container","ea-aside"]}constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-container_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.#e=e.querySelector(".ea-container_wrap"),this.build(e,stylesheet)}get direction(){return["horizontal","vertical"].includes(this.getAttribute("direction"))||"horizontal"}set direction(e){this.setAttribute("direction",e),this.#e.classList.toggle("is-vertical","horizontal"===e)}#t(e){const t=e.map((e=>e.tagName.toLowerCase()));e.forEach((e=>{this.CONTAINER_TYPE.includes(e.tagName.toLowerCase())||e.remove(),"ea-container"===e.tagName.toLowerCase()&&(e.style.flex="1")})),t.includes("ea-header")||t.includes("ea-footer")?this.direction="horizontal":this.direction=this.direction}connectedCallback(){const e=Array.from(this.children);this.#t(e)}}customElements.get("ea-container")||customElements.define("ea-container",EaContainer);
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+
+const stylesheet = `
+.ea-container_wrap {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+.ea-container_wrap.is-vertical {
+  flex-direction: column;
+}
+.ea-container_wrap ::slotted(ea-main) {
+  flex: 1;
+  overflow: auto;
+}
+`;
+
+export class EaContainer extends Base {
+    #wrap;
+
+    get CONTAINER_TYPE() {
+        return ['ea-header', 'ea-main', 'ea-footer', 'ea-container', 'ea-aside'];
+    }
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-container_wrap" part="container">
+                <slot></slot>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-container_wrap');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- direction 排列方向 -------
+    // #region
+    get direction() {
+        return ['horizontal', 'vertical'].includes(this.getAttribute('direction')) || 'horizontal';
+    }
+
+    set direction(value) {
+        this.setAttribute('direction', value);
+        this.#wrap.classList.toggle('is-vertical', value === 'horizontal');
+    }
+    // #endregion
+    // ------- end -------
+
+    #handleContainerChildren(containers) {
+        const eachContainerTagName = containers.map(item => item.tagName.toLowerCase());
+
+        containers.forEach(item => {
+            if (!this.CONTAINER_TYPE.includes(item.tagName.toLowerCase())) {
+                item.remove();
+            }
+
+            if (item.tagName.toLowerCase() === 'ea-container') {
+                item.style.flex = '1';
+            }
+        });
+
+        if (eachContainerTagName.includes('ea-header') || eachContainerTagName.includes('ea-footer')) {
+            this.direction = 'horizontal';
+        } else {
+            this.direction = this.direction;
+        }
+    }
+
+    connectedCallback() {
+        const containers = Array.from(this.children);
+
+        this.#handleContainerChildren(containers);
+    }
+}
+
+if (!customElements.get('ea-container')) {
+    customElements.define('ea-container', EaContainer);
+}

package/components/ea-container/index.scss

@@ -0,0 +1,18 @@
+.ea-container_wrap {
+  display: flex;
+  flex-direction: row;
+
+  box-sizing: border-box;
+
+  width: 100%;
+  height: 100%;
+
+  &.is-vertical {
+    flex-direction: column;
+  }
+
+  ::slotted(ea-main) {
+    flex: 1;
+    overflow: auto;
+  }
+}

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

@@ -0,0 +1,17 @@
+.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-date-picker/index.js

@@ -1 +1,191 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-calendar/index.js";import"../ea-input/index.js";import{stylesheet}from"./src/style/stylesheet.js";import{timeout}from"../../utils/timeout.js";export class EaDatePicker extends Base{#e;#t;#a;#i;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-date-picker_wrap' part='container'>\n                <div class='ea-date-picker_input-wrap' part='input-wrap'>\n                    <ea-input class=\"ea-date-picker_input\" part='input' prefix-icon=\"icon-calendar-times-o\" readonly></ea-input>\n                </div>\n                <div class='ea-date-picker_dropdown-wrap' part='dropdown-wrap'>\n                    <ea-calendar class=\"ea-date-picker_calendar\" size=\"mini\" part='calendar'></ea-calendar>\n                </div>\n            </div>\n        ",this.#e=e.querySelector(".ea-date-picker_wrap"),this.#t=e.querySelector(".ea-date-picker_dropdown-wrap"),this.#a=e.querySelector(".ea-date-picker_calendar"),this.#i=e.querySelector(".ea-date-picker_input"),this.build(e,stylesheet)}get name(){return this.getAttribute("name")||"datePicker"}set name(e){this.setAttribute("name",e)}get width(){return this.getAttribute("width")||"200px"}set width(e){this.setAttribute("width",e),this.#e.style.width=e,this.#t.style.width=e,this.style.display="inline-block",this.style.width=e}get value(){return this.getAttribute("value")||""}set value(e){if(isNaN(new Date(e))&&""!==e){const t=new Date(Date.now());e=`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`}this.setAttribute("value",e),this.#i.value=e}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){this.setAttribute("placeholder",e),this.#i.placeholder=e}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.toggleAttr("disabled",e),this.#i.disabled=e}get align(){return this.getAttribute("align")||"left"}set align(e){this.setAttribute("align",e),this.#i.shadowRoot.querySelector("input").style.textAlign=e}#n(){this.#a.addEventListener("select",(e=>{const{year:t,month:a,date:i,day:n}=e.detail;this.value=`${t}-${a}-${i}`,this.#i.value=`${t}-${a}-${i}`,this.dispatchEvent(new CustomEvent("change",{detail:{fulllDate:`${t}-${a}-${i}`,year:t,month:a,date:i,week:n}}))}))}#s(){this.#i.addEventListener("focus",(()=>{this.#e.classList.add("is-open")})),window.addEventListener("click",(e=>{this.contains(e.target)?this.#i.shadowRoot.querySelector(".ea-input_inner").focus():this.#e.classList.remove("is-open")}))}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.width=this.width,this.value=this.value,this.placeholder=this.placeholder,this.disabled=this.disabled,this.align=this.align,this.#n(),this.#s(),timeout((()=>{this.#e.classList.add("with-transition")}),300)}}customElements.get("ea-date-picker")||customElements.define("ea-date-picker",EaDatePicker);
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+
+import "../ea-calendar/index.js"
+import "../ea-input/index.js"
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+import { timeout } from '../../utils/timeout.js';
+
+export class EaDatePicker extends Base {
+    #container;
+
+    #calendarWrap;
+    #calendarElement;
+
+    #calendarInput;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <div class='ea-date-picker_wrap' part='container'>
+                <div class='ea-date-picker_input-wrap' part='input-wrap'>
+                    <ea-input class="ea-date-picker_input" part='input' prefix-icon="icon-calendar-times-o" readonly></ea-input>
+                </div>
+                <div class='ea-date-picker_dropdown-wrap' part='dropdown-wrap'>
+                    <ea-calendar class="ea-date-picker_calendar" size="mini" part='calendar'></ea-calendar>
+                </div>
+            </div>
+        `;
+
+        this.#container = shadowRoot.querySelector('.ea-date-picker_wrap');
+
+        this.#calendarWrap = shadowRoot.querySelector('.ea-date-picker_dropdown-wrap');
+        this.#calendarElement = shadowRoot.querySelector('.ea-date-picker_calendar');
+
+        this.#calendarInput = shadowRoot.querySelector('.ea-date-picker_input');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- name 名称 -------
+    // #region
+    get name() {
+        return this.getAttribute('name') || 'datePicker';
+    }
+
+    set name(val) {
+        this.setAttribute('name', val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- width 宽度 -------
+    // #region
+    get width() {
+        return this.getAttribute('width') || '200px';
+    }
+
+    set width(val) {
+        this.setAttribute('width', val);
+
+        this.#container.style.width = val;
+        this.#calendarWrap.style.width = val;
+        this.style.display = 'inline-block';
+        this.style.width = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- value 日期值 -------
+    // #region
+    get value() {
+        return this.getAttribute('value') || '';
+    }
+
+    set value(val) {
+        if (isNaN(new Date(val)) && val !== '') {
+            const date = new Date(Date.now());
+            val = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+        }
+
+        this.setAttribute('value', val);
+        this.#calendarInput.value = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- placeholder 占位符 -------
+    // #region
+    get placeholder() {
+        return this.getAttribute('placeholder') || '';
+    }
+
+    set placeholder(val) {
+        this.setAttribute('placeholder', val);
+
+        this.#calendarInput.placeholder = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled') || false;
+    }
+
+    set disabled(val) {
+        this.toggleAttr('disabled', val);
+
+        this.#calendarInput.disabled = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- align 对齐方式 -------
+    // #region
+    get align() {
+        return this.getAttribute('align') || 'left';
+    }
+
+    set align(value) {
+        this.setAttribute('align', value);
+
+        this.#calendarInput.shadowRoot.querySelector('input').style.textAlign = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    #initSelectEvent() {
+        this.#calendarElement.addEventListener('select', (e) => {
+            const { year, month, date, day } = e.detail;
+            this.value = `${year}-${month}-${date}`;
+            this.#calendarInput.value = `${year}-${month}-${date}`;
+
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: {
+                    fulllDate: `${year}-${month}-${date}`,
+                    year,
+                    month,
+                    date,
+                    week: day,
+                },
+            }));
+        });
+    }
+
+    #initDropdownOpen() {
+        this.#calendarInput.addEventListener('focus', () => {
+            this.#container.classList.add('is-open');
+        });
+
+        window.addEventListener('click', (e) => {
+            if (!this.contains(e.target)) {
+                this.#container.classList.remove('is-open');
+            } else {
+                this.#calendarInput.shadowRoot.querySelector('.ea-input_inner').focus();
+            }
+        });
+    }
+
+    connectedCallback() {
+        this.setAttribute('data-ea-component', true);
+
+        this.name = this.name;
+
+        this.width = this.width;
+
+        this.value = this.value;
+
+        this.placeholder = this.placeholder;
+
+        this.disabled = this.disabled;
+
+        this.align = this.align;
+
+        this.#initSelectEvent();
+        this.#initDropdownOpen();
+
+        timeout(() => {
+            this.#container.classList.add('with-transition');
+        }, 300);
+    }
+}
+
+if (!customElements.get('ea-date-picker')) {
+    customElements.define('ea-date-picker', EaDatePicker);
+}