easy-component-ui 1.0.3 → 2.0.1

package/components/ea-textarea/index.js

@@ -1,333 +1 @@
-// @ts-nocheck
-import Base from "../Base.js";
-
-const stylesheet = `
-.ea-textarea_wrap {
-  position: relative;
-  width: 100%;
-}
-.ea-textarea_wrap .ea-textarea_inner {
-  box-sizing: border-box;
-  box-shadow: none;
-  resize: vertical;
-  min-height: 1.75rem;
-  border: 1px solid #dcdfe6;
-  outline: 0;
-  transition: border 0.2s;
-  border-radius: 3px;
-  padding: 0.5rem;
-  line-height: 0.8;
-  font-size: 0.8rem;
-  scrollbar-width: none;
-}
-.ea-textarea_wrap .ea-textarea_inner:focus {
-  border-color: #409eff;
-}
-.ea-textarea_wrap .ea-textarea_inner::placeholder {
-  color: #c0c4cc;
-}
-.ea-textarea_wrap .ea-textarea_inner.disabled {
-  background-color: #eeeeee;
-  color: #c0c4cc;
-}
-.ea-textarea_wrap .ea-textarea_inner.invalid {
-  border-color: #f56c6c;
-}
-.ea-textarea_wrap .ea-input_word-limit {
-  position: absolute;
-  font-size: 0.75rem;
-  bottom: 0.5rem;
-  right: 0.5rem;
-}
-`;
-
-const inputDom = () => {
-    let input = document.createElement('textarea');
-
-    input.className = "ea-textarea_inner";
-
-    return input;
-}
-
-export class EaTextarea extends Base {
-    #wrap;
-    #input;
-    #mounted = false;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const wrap = document.createElement('div');
-        wrap.className = "ea-textarea_wrap";
-        this.#wrap = wrap;
-
-        const dom = inputDom();
-        this.#input = dom;
-
-        this.#wrap.appendChild(dom);
-
-        this.build(shadowRoot, stylesheet);
-        this.shadowRoot.appendChild(wrap);
-    }
-
-    // ------- value 输入框的值 -------
-    // #region
-    get value() {
-        if (!this.#mounted) {
-            this.#input.value = this.getAttribute("value") || '';
-        }
-
-        return this.getAttribute('value');
-    }
-
-    set value(val) {
-        if (!val) return;
-
-        this.setAttribute("value", val);
-        this.#input.value = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- placeholder 提示 -------
-    // #region
-    get placeholder() {
-        return this.getAttribute("placeholder") || '';
-    }
-
-    set placeholder(val) {
-        this.setAttribute("placeholder", val);
-        this.#input.placeholder = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- rows 默认行数 -------
-    // #region
-    get rows() {
-        return this.getAttribute("rows") || 2;
-    }
-
-    set rows(val) {
-        if (!val) return;
-
-        this.setAttribute("rows", val);
-        this.#input.rows = val;
-        this.#input.setAttribute("rows", val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- autosize 自动调整高度 -------
-    // #region
-    get autosize() {
-        return this.getAttrBoolean("autosize");
-    }
-
-    set autosize(val) {
-        if (!val) return;
-
-        this.setAttribute("autosize", val);
-
-        this.#input.addEventListener('input', (e) => {
-            if (e.target.type === 'textarea') {
-                const cols = this.#input.cols;
-                const chars = e.target.value.length;
-
-                let rows = Math.ceil(chars / cols) <= Number(this.#input.rows) ? Number(this.#input.rows) : Math.ceil(chars / cols);
-                if (chars % cols == 1) {
-                    if (this.minRows > rows) this.setTextareaHeight(this.minRows);
-                    else if (this.maxRows < rows) this.setTextareaHeight(this.maxRows);
-                    else this.setTextareaHeight(rows);
-                }
-            }
-        })
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- min-rows/max-rows 最小/最大行数 -------
-    // #region
-
-    setTextareaHeight(rows) {
-        rows = Number(rows);
-        this.#input.rows = rows;
-    }
-
-    get minRows() {
-        const val = Number(this.getAttribute("min-rows"));
-        return val !== 0 && val > 0
-            ? val
-            : 1;
-    }
-
-    set minRows(val) {
-        if (!val) return;
-
-        this.setAttribute("min-rows", val);
-        this.setTextareaHeight(Number(val));
-    }
-
-    get maxRows() {
-        const val = Number(this.getAttribute("max-rows"));
-        return val !== 0 && val > 0
-            ? val
-            : 10;
-    }
-
-    set maxRows(val) {
-        if (!val) return;
-
-        this.setAttribute("max-rows", val);
-        this.setTextareaHeight(Number(val));
-    }
-
-    // #endregion
-    // ------- end -------
-
-    // ------- max-length/min-length 最大/最小字符长度 -------
-    // #region
-
-    // 获取最大限制值
-    get maxLength() {
-        return this.getAttribute("max-length");
-    }
-
-    set maxLength(val) {
-        if (!val) return;
-
-        this.setAttribute("max-length", val);
-        this.#input.maxLength = val;
-
-        this.#input.addEventListener('input', (e) => {
-            if (e.target.value.length > val) {
-                e.target.value = e.target.value.slice(0, val);
-            }
-        });
-
-        if (this.showWordLimit) this.showWordLimit = true;
-    }
-
-    // 获取最小限制值
-    get minLength() {
-        return this.getAttribute("min-length");
-    }
-
-    set minLength(val) {
-        if (!val) return;
-
-        this.setAttribute("min-length", val);
-        this.#input.minLength = val;
-
-        this.#input.addEventListener('input', (e) => {
-            if (e.target.value.length < val) {
-                e.target.classList.add('invalid');
-            } else {
-                e.target.classList.remove('invalid');
-            }
-        });
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- 显示 当前文字长度 和 限制值 -------
-    // #region
-
-    get showWordLimit() {
-        return this.getAttrBoolean("show-word-limit");
-    }
-
-    set showWordLimit(val) {
-        if (!val) return;
-
-        this.setAttribute("show-word-limit", val);
-
-        // 加入显示的dom
-        const wordLimit = document.createElement('span');
-        this.#wrap.classList.toggle('word-limit', val);
-        this.#wrap.classList.toggle('append-slot', val);
-        wordLimit.className = 'ea-input_word-limit';
-        wordLimit.innerText = `${this.#input.value.length}/${this.maxLength}`;
-
-
-        this.#input.addEventListener('input', (e) => {
-            wordLimit.innerText = `${e.target.value.length}/${this.maxLength}`;
-        });
-
-        this.#wrap.appendChild(wordLimit);
-        wordLimit.style.left = (this.#input.getBoundingClientRect().width - wordLimit.getBoundingClientRect().width - 5) + 'px';
-    }
-    // #endregion
-    // ------- end -------
-
-
-    init() {
-        const that = this;
-
-        // 输入框提示
-        this.placeholder = this.placeholder;
-
-        // 输入框的值
-        this.value = this.value;
-
-        // 禁用
-        this.disabled = this.disabled;
-
-        // 自动调整高度
-        this.autosize = this.autosize;
-
-        // 最大最小行数
-        if (this.maxRows) this.maxRows = this.maxRows;
-        if (this.minRows) this.minRows = this.minRows;
-
-        // 默认行数
-        this.rows = this.rows;
-
-        // 输入长度限制
-        this.maxLength = this.maxLength;
-        this.minLength = this.minLength;
-
-        // 输入时
-        this.#input.addEventListener("input", (e) => {
-            this.dispatchEvent(
-                new CustomEvent("change", {
-                    detail: {
-                        value: e.target.value
-                    }
-                })
-            );
-        });
-
-        // 聚焦时
-        this.#input.addEventListener("focus", (e) => {
-            this.dispatchEvent(
-                new CustomEvent("focus", {
-                    detail: {
-                        value: e.target.value
-                    }
-                })
-            );
-        });
-
-        // 失焦时
-        this.#input.addEventListener("blur", (e) => {
-            this.dispatchEvent(
-                new CustomEvent("blur", {
-                    detail: {
-                        value: e.target.value
-                    }
-                })
-            );
-        });
-    }
-
-    connectedCallback() {
-        this.init();
-        this.#mounted = true;
-    }
-}
-
-if (!window.customElements.get("ea-textarea")) {
-    window.customElements.define("ea-textarea", EaTextarea);
-}
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTextarea extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-textarea_wrap" part="container">\n                <textarea class="ea-textarea_inner" part="textarea" placeholder="请输入内容"></textarea>\n            </div>\n        ',this.#t=t.querySelector(".ea-textarea_wrap"),this.#e=t.querySelector(".ea-textarea_inner"),this.build(t,stylesheet)}get name(){return this.getAttribute("name")||"ea-textarea"}set name(t){this.setAttribute("name",t)}get value(){return this.#e.value}set value(t){this.#e.value=t}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.toggleAttr("disabled",t),this.#e.disabled=t}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(t){t&&(this.setAttribute("placeholder",t),this.#e.placeholder=t)}get rows(){return this.getAttribute("rows")||2}set rows(t){this.setAttribute("rows",t),this.#e.rows=t}get autosize(){return this.getAttrBoolean("autosize")}set autosize(t){t&&(this.setAttribute("autosize",t),this.#e.addEventListener("input",(t=>{if(this.#e.style.height!==this.#e.scrollHeight+"px"&&(this.#e.style.height=this.#e.scrollHeight+"px",this.#e.style.minHeight=this.#e.scrollHeight+"px"),"textarea"===t.target.type){const e=this.#e.cols,i=t.target.value.length;let s=Math.ceil(i/e)<=Number(this.#e.rows)?Number(this.#e.rows):Math.ceil(i/e);i%e==1&&(this.minRows>s?this.#i(this.minRows):this.maxRows<s?this.#i(this.maxRows):this.#i(s))}})))}get minRows(){const t=this.getAttrNumber("min-rows");return 0!==t&&t>0?t:0}set minRows(t){t&&(this.setAttribute("min-rows",t),this.#i(Number(t)))}get maxRows(){const t=Number(this.getAttribute("max-rows"));return 0!==t&&t>0?t:0}set maxRows(t){t&&(this.setAttribute("max-rows",t),this.#i(Number(t)))}get maxLength(){return this.getAttribute("max-length")}set maxLength(t){t&&(this.setAttribute("max-length",t),this.#e.maxLength=t,this.showWordLimit&&(this.showWordLimit=!0))}get minLength(){return this.getAttribute("min-length")}set minLength(t){t&&(this.setAttribute("min-length",t),this.#e.minLength=t)}get showWordLimit(){return this.getAttrBoolean("show-word-limit")}set showWordLimit(t){if(!t)return;this.setAttribute("show-word-limit",t);const e=document.createElement("span");e.className="ea-input_word-limit",e.innerText=`${this.#e.value.length}/${this.maxLength}`,this.#e.addEventListener("input",(t=>{e.innerText=`${t.target.value.length}/${this.maxLength}`})),this.#t.appendChild(e),e.style.left=this.#e.getBoundingClientRect().width-e.getBoundingClientRect().width-5+"px"}#i(t){t=Number(t),this.#e.rows=t}#s(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e.target.value}}))}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.placeholder=this.placeholder,this.value=this.value,this.#e.value=this.getAttribute("value")||"",this.disabled=this.disabled,this.autosize=this.autosize,this.maxRows&&(this.maxRows=this.maxRows),this.minRows&&(this.minRows=this.minRows),this.rows=this.rows,this.maxLength=this.maxLength,this.minLength=this.minLength,this.#e.addEventListener("input",(t=>{this.#s("change",t)})),this.#e.addEventListener("focus",(t=>{this.#s("focus",t)})),this.#e.addEventListener("blur",(t=>{this.#s("blur",t)}))}}window.customElements.get("ea-textarea")||window.customElements.define("ea-textarea",EaTextarea);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-textarea_wrap {\n  position: relative;\n  width: 100%;\n}\n.ea-textarea_wrap .ea-textarea_inner {\n  box-sizing: border-box;\n  box-shadow: none;\n  resize: vertical;\n  min-height: 1.75rem;\n  border: 1px solid #dcdfe6;\n  outline: 0;\n  transition: border 0.2s;\n  border-radius: 3px;\n  padding: 0.5rem;\n  line-height: 0.8;\n  font-size: 0.8rem;\n  scrollbar-width: none;\n}\n.ea-textarea_wrap .ea-textarea_inner:focus {\n  border-color: #409eff;\n}\n.ea-textarea_wrap .ea-textarea_inner::placeholder {\n  color: #c0c4cc;\n}\n.ea-textarea_wrap .ea-textarea_inner:disabled {\n  background-color: #eeeeee;\n  color: #c0c4cc;\n}\n.ea-textarea_wrap .ea-textarea_inner:invalid {\n  border-color: #f56c6c;\n}\n.ea-textarea_wrap .ea-input_word-limit {\n  position: absolute;\n  font-size: 0.75rem;\n  bottom: 0.5rem;\n  right: 0.5rem;\n}\n";

package/components/ea-time-picker/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";import{createElement}from"../../utils/createElement.js";import{timeout}from"../../utils/timeout.js";import{stylesheet}from"./src/style/stylesheet.js";import"../ea-input/index.js";import"../ea-button/index.js";export class EaTimePicker extends Base{#e;#t;#i;#n;#r;#s;#a=!1;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-time-picker_wrap' part='container'>\n                <ea-input part='input' autocomplete=\"off\" readonly prefix-icon=\"icon-clock\"></ea-input>\n                <div class=\"ea-time-picker_dropdown-wrap\" part='dropdown-wrap'>\n                    <div class=\"ea-time-picker_dropdown-inner-wrap\" part='dropdown-inner-wrap'>\n                        <ul class=\"ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-hour\" part='dropdown-time'>\n                        </ul>\n                        <ul class=\"ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-minute\" part='dropdown-time'>\n                        </ul>\n                        <ul class=\"ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-second\" part='dropdown-time'>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        ",this.#e=e.querySelector(".ea-time-picker_wrap"),this.#t=e.querySelector("ea-input"),this.#i=e.querySelector(".ea-time-picker_dropdown-wrap"),this.#n=e.querySelector(".ea-time-picker_dropdown-inner-hour"),this.#r=e.querySelector(".ea-time-picker_dropdown-inner-minute"),this.#s=e.querySelector(".ea-time-picker_dropdown-inner-second"),this.build(e,stylesheet)}get width(){return this.getAttribute("width")||"200px"}set width(e){this.setAttribute("width",e),this.#e.style.width=e}get time(){return this.getAttribute("time")||"00:00:00"}set time(e){this.setAttribute("time",e);const[t,i,n]=e.split(":");this.hour=t,this.minute=i,this.second=n}get name(){return this.getAttribute("name")||"timePicker"}set name(e){this.setAttribute("name",e)}get hour(){const e=this.getAttrNumber("hour");return this.#o(e)}set hour(e){this.setAttribute("hour",e),this.#h(this.#n,e)}get minute(){const e=this.getAttrNumber("minute");return this.#o(e)}set minute(e){this.setAttribute("minute",e),this.#h(this.#r,e)}get second(){const e=this.getAttrNumber("second");return this.#o(e)}set second(e){this.setAttribute("second",e),this.#h(this.#s,e)}get value(){return this.time}set value(e){this.time=e}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.setAttribute("disabled",e),this.#t.disabled=e}get align(){return this.getAttribute("align")||"left"}set align(e){this.setAttribute("align",e),this.#t.shadowRoot.querySelector("input").style.textAlign=e}get limitRangeStart(){if(this.getAttribute("limit-range-start")){const[e,t,i]=this.getAttribute("limit-range-start")?.split(":");return`${this.#o(e)}:${this.#o(t)}:${this.#o(i)}`}return"00:00:00"}set limitRangeStart(e){this.setAttribute("limit-range-start",e)}get limitRangeEnd(){if(this.getAttribute("limit-range-end")){const[e,t,i]=this.getAttribute("limit-range-end")?.split(":");return`${this.#o(e)}:${this.#o(t)}:${this.#o(i)}`}return"23:59:59"}set limitRangeEnd(e){this.setAttribute("limit-range-end",e)}#o(e,t="00"){return(e=Number(e))<10?`0${e}`:e||t}#h(e,t){e.querySelectorAll("li").forEach((e=>{Number(e.innerText)===Number(this.#o(t))&&e.click()}))}#d(){this.#i.style.width=this.#t.getBoundingClientRect().width+"px",timeout((()=>{this.#e.classList.add("with-transition")}),50)}#l(e,t,i,n){e.addEventListener("click",(()=>{i.querySelectorAll("li").forEach((e=>{e.classList.remove("is-active")})),e.classList.add("is-active");const r=this.#o(t);switch(n){case"hour":this.hour=r;break;case"minute":this.minute=r;break;case"second":this.second=r}this.#a&&this.dispatchEvent(new CustomEvent("change",{detail:{time:this.time}})),this.#t.value=`${this.hour}:${this.minute}:${this.second}`,this.time=`${this.hour}:${this.minute}:${this.second}`;const s=e.getBoundingClientRect().height*t;i.scrollTo({top:s,behavior:"smooth"})}))}#c(e){e.addEventListener("wheel",(()=>{timeout((()=>{const t=e.querySelectorAll("li"),i=t[0].getBoundingClientRect().height,{scrollTop:n}=e,r=Math.floor(n/i);t[r]&&t[r].click()}),100)}))}#m(){const[e,t,i]=this.limitRangeStart.split(":"),[n,r,s]=this.limitRangeEnd.split(":"),a=new Date;if(new Date(a.getFullYear(),a.getMonth(),a.getDate(),e,t,i)>new Date(a.getFullYear(),a.getMonth(),a.getDate(),n,r,s))throw new Error("limit-range-start must be less than limit-range-end");const o=(t,i,r,s)=>{t=Number(t),i=Number(i);let a=0,o=0;if("hour"===s)a=0,o=23;else a=0,o=59,String(t).localeCompare(i)||e===n||(i=0===i?59:i);for(let e=a;e<=o;e++){const n=createElement("li","ea-time-picker_dropdown-item");n.innerText=this.#o(e),r.appendChild(n),e>=t&&e<=i?this.#l(n,e,r,s):n.classList.add("is-disabled")}};o(e,n,this.#n,"hour"),o(t,r,this.#r,"minute"),o(i,s,this.#s,"second"),this.#c(this.#n),this.#c(this.#r),this.#c(this.#s)}#u(){let e=!1;const t=()=>{this.time=this.time,e=!0,this.#a=!0,this.#i.removeEventListener("transitionend",t)};this.#t.addEventListener("focus",(()=>{this.#e.classList.add("is-open"),e||this.#i.addEventListener("transitionend",t)})),window.addEventListener("click",(e=>{this.contains(e.target)?this.#t.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.disabled=this.disabled,this.align=this.align,this.limitRangeStart=this.limitRangeStart,this.limitRangeEnd=this.limitRangeEnd,this.#d(),this.#m(),this.time=this.time,this.#t.value=`${this.hour}:${this.minute}:${this.second}`,this.#u()}}customElements.get("ea-time-picker")||customElements.define("ea-time-picker",EaTimePicker);

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

@@ -0,0 +1 @@
+export const stylesheet='\n.ea-time-picker_wrap {\n  position: relative;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap {\n  position: absolute;\n  bottom: -12px;\n  left: 0;\n  transform-origin: center top;\n  transform: translateY(100%) scaleY(0);\n  box-sizing: border-box;\n  background-color: #fff;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  z-index: 2;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0.5rem;\n  border: 0.5rem solid transparent;\n  border-bottom-color: #fff;\n  transform: translateY(-100%);\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap {\n  display: flex;\n  position: relative;\n  margin: 1rem 0;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::before, .ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::after {\n  content: "";\n  position: absolute;\n  left: 0;\n  transform: translateY(-50%);\n  width: 100%;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::before {\n  top: calc(50% - 16px);\n  border-bottom: 1px solid #e4e7ed;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::after {\n  top: calc(50% + 16px);\n  border-bottom: 1px solid #e4e7ed;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner {\n  flex: 1;\n  max-height: 190px;\n  box-sizing: border-box;\n  padding: 5rem 0;\n  text-align: center;\n  overflow: auto;\n  scrollbar-width: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px;\n  list-style-type: none;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner .ea-time-picker_dropdown-item {\n  height: 32px;\n  line-height: 32px;\n  font-size: 12px;\n  color: #606266;\n  transition: color 0.3s;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner .ea-time-picker_dropdown-item.is-active {\n  color: #409eff;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner .ea-time-picker_dropdown-item.is-disabled {\n  color: #c0c4cc;\n}\n.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-button-group {\n  text-align: right;\n  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n.ea-time-picker_wrap.is-open .ea-time-picker_dropdown-wrap {\n  transform: translateY(100%) scaleY(1);\n}\n.ea-time-picker_wrap.with-transition .ea-time-picker_dropdown-wrap {\n  transition: transform 0.3s ease-in-out;\n}\n';

package/components/ea-timeline/index.js

@@ -1,334 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement, createSlotElement } from '../../utils/createElement.js';
-
-const stylesheet = `
-.ea-timeline-item_wrap {
-  position: relative;
-  padding-bottom: 20px;
-  padding-left: 28px;
-  list-style: none;
-}
-.ea-timeline-item_wrap .ea-timeline-item_circle {
-  position: absolute;
-  left: 0;
-  z-index: 1;
-  display: block;
-  width: 12px;
-  height: 12px;
-  font-size: 12px;
-  border-radius: 50%;
-  background-color: #e4e7ed;
-}
-.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--primary {
-  background-color: #409eff;
-  color: #409eff;
-}
-.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--success {
-  background-color: #67c23a;
-  color: #67c23a;
-}
-.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--warning {
-  background-color: #e6a23c;
-  color: #e6a23c;
-}
-.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--danger {
-  background-color: #f56c6c;
-  color: #f56c6c;
-}
-.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--info {
-  background-color: #e4e7ed;
-  color: #e4e7ed;
-}
-.ea-timeline-item_wrap .ea-timeline-item_tail {
-  z-index: 0;
-  position: absolute;
-  left: 0.3281rem;
-  height: 100%;
-  border-left: 2px solid #e4e7ed;
-}
-.ea-timeline-item_wrap .ea-timeline-item_container {
-  position: relative;
-  top: -4px;
-  font-size: 14px;
-  display: flex;
-  flex-direction: column;
-}
-.ea-timeline-item_wrap .ea-timeline-item_container .ea-timeline-item_timestamp {
-  color: #909399;
-  line-height: 1;
-  margin-top: 8px;
-}
-.ea-timeline-item_wrap .ea-timeline-item_container .ea-timeline-item_content {
-  color: #303133;
-}
-.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--top {
-  flex-direction: column-reverse;
-}
-.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--top .ea-timeline-item_timestamp {
-  margin-top: 0;
-  margin-bottom: 8px;
-}
-.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--bottom {
-  flex-direction: column;
-}
-.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_circle {
-  width: 14px;
-  height: 14px;
-}
-.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_tail {
-  left: 0.3906rem;
-}
-.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_container {
-  font-size: 16px;
-}
-`;
-
-export class EaTimeline extends Base {
-  #mounted = false;
-
-  #wrap;
-
-  #container;
-
-  #timelineSlot;
-
-  #observer;
-
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    const wrap = document.createElement('div');
-    wrap.className = 'ea-timeline_wrap';
-
-    const timelineSlot = createSlotElement('');
-    const container = createElement('ul', 'ea-timeline-item_container', [timelineSlot]);
-    wrap.appendChild(container);
-
-    this.#wrap = wrap;
-    this.#container = container;
-    this.#timelineSlot = timelineSlot;
-
-    this.build(shadowRoot, stylesheet);
-    this.shadowRoot.appendChild(wrap);
-  }
-
-  // ------- reverse 时间线排序 -------
-  // #region
-  get reverse() {
-    const attr = this.getAttribute('reverse');
-    const flag = ["true", "false"].includes(attr);
-
-    if (attr && flag) return attr === "true";
-
-    return true;
-  }
-
-  set reverse(value) {
-    this.setAttribute('reverse', value);
-
-    this.#sortTimeline(value);
-  }
-  // #endregion
-  // ------- end -------
-
-  #sortTimeline(flag) {
-    flag = flag === "true" || flag === true ? true : false;
-
-    setTimeout(() => {
-      try {
-        const timelineItems = Array.from(this.querySelectorAll('ea-timeline-item'));
-        const slotTimeline = Array.from(this.shadowRoot.querySelectorAll('ea-timeline-item'));
-        const timeArr = Array.from(timelineItems.concat(slotTimeline)).sort((a, b) => {
-          const aTime = new Date(a.time);
-          const bTime = new Date(b.time);
-
-          return flag ? (bTime - aTime) : (aTime - bTime);
-        })
-
-        timeArr.forEach((item, index) => {
-          this.#container.appendChild(item);
-        })
-
-        this.#timelineSlot.innerHTML = '';
-      } catch (error) { }
-    }, 20);
-  }
-
-  init() {
-    const that = this;
-
-    this.reverse = this.reverse;
-
-    setTimeout(() => {
-      const observer = new MutationObserver((mutationsList, observer) => {
-        this.#sortTimeline(that.reverse);
-      });
-      observer.observe(this, { childList: true });
-      this.#observer = observer;
-    }, 1000);
-  }
-
-  connectedCallback() {
-    this.init();
-
-    setTimeout(() => {
-      this.#mounted = true;
-    }, 30);
-  }
-
-  disconnectedCallback() {
-    try {
-      this.#observer.disconnect();
-    } catch (error) { }
-  }
-}
-
-if (!customElements.get('ea-timeline')) {
-  customElements.define('ea-timeline', EaTimeline);
-}
-
-export class EaTimelineItem extends Base {
-  #wrap;
-
-  #timeWrap;
-
-  #timelineCircle;
-  #timelineContent;
-  #timelineTimestamp;
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-
-    const timelineCircle = createElement('div', 'ea-timeline-item_circle');
-    const timelineTail = createElement('div', 'ea-timeline-item_tail');
-
-    const timelineItemSlot = createSlotElement('');
-    const timelineContent = createElement('div', 'ea-timeline-item_content', [timelineItemSlot]);
-    const timelineTimestamp = createElement('div', 'ea-timeline-item_timestamp');
-    const timelineContainer = createElement('div', 'ea-timeline-item_container', [timelineContent, timelineTimestamp]);
-
-    const wrap = createElement('li', 'ea-timeline-item_wrap', [timelineCircle, timelineTail, timelineContainer]);
-
-    this.#wrap = wrap;
-    this.#timeWrap = timelineContainer;
-    this.#timelineCircle = timelineCircle;
-    this.#timelineTimestamp = timelineTimestamp;
-    this.#timelineContent = timelineContent;
-
-    this.build(shadowRoot, stylesheet);
-    this.shadowRoot.appendChild(wrap);
-  }
-
-  // ------- time 时间 -------
-  // #region
-  get time() {
-    return this.getAttribute('time') || "";
-  }
-
-  set time(value) {
-    this.setAttribute('time', value);
-
-    this.#timelineTimestamp.innerText = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- type 时间线类型 -------
-  // #region
-  get type() {
-    const attr = this.getAttribute('type');
-    const flag = ["primary", "success", "warning", "danger", "info"].includes(attr);
-
-    if (attr && flag) return attr;
-
-    return "info";
-  }
-
-  set type(value) {
-    this.setAttribute('type', value);
-
-    this.#timelineCircle.classList.add(`ea-timeline-item--${value}`);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- color 时间线颜色 -------
-  // #region
-  get color() {
-    return this.getAttribute('color') || "";
-  }
-
-  set color(value) {
-    this.setAttribute('color', value);
-
-    const isColor = new Option().style.color = value;
-
-    if (isColor !== "") this.#timelineCircle.style.backgroundColor = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- size 时间线尺寸 -------
-  // #region
-  get size() {
-    const attr = this.getAttribute('size');
-    const flag = ["normal", "large"].includes(attr);
-
-    if (attr && flag) return attr;
-
-    return "normal";
-  }
-
-  set size(value) {
-    this.setAttribute('size', value);
-
-    this.#wrap.classList.add(`ea-timeline-item_circle--${value}`);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- placement 时间的显示位置 -------
-  // #region
-  get placement() {
-    const attr = this.getAttribute('placement');
-    const flag = ["top", "bottom"].includes(attr);
-
-    if (attr && flag) return attr;
-
-    return "bottom";
-  }
-
-  set placement(value) {
-    this.setAttribute('placement', value);
-
-    this.#timeWrap.classList.add(`ea-timeline-item_timestamp--${value}`);
-  }
-  // #endregion
-  // ------- end -------
-
-  init() {
-    const that = this;
-
-    this.time = this.time;
-
-    this.type = this.type;
-
-    this.color = this.color;
-
-    this.size = this.size;
-
-    this.placement = this.placement;
-  }
-
-  connectedCallback() {
-    this.init();
-  }
-}
-
-if (!customElements.get('ea-timeline-item')) {
-  customElements.define('ea-timeline-item', EaTimelineItem);
-}
+import Base from"../Base.js";import"../ea-timeline-item/index.js";import{handleDefaultAttrIsTrue}from"../../utils/handleDefaultAttrIsTrue.js";import{timeout}from"../../utils/timeout.js";import{stylesheet}from"./style/stylesheet.js";export class EaTimeline extends Base{#e;#t;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n      <div class='ea-timeline_wrap' part='container'>\n        <ul class='ea-timeline-item_container' part='list-wrap'>\n          <slot></slot>\n        </ul>\n      </div>\n    ",this.#e=e.querySelector(".ea-timeline_wrap"),this.#t=e.querySelector(".ea-timeline-item_container"),this.build(e,stylesheet)}get reverse(){const e=this.getAttribute("reverse");return handleDefaultAttrIsTrue(e)}set reverse(e){this.setAttribute("reverse",e),this.#i(e)}#i(e){e="true"===e||!0===e;Array.from(this.querySelectorAll("ea-timeline-item")).sort(((t,i)=>{const r=new Date(t.time),s=new Date(i.time);return e?s-r:r-s})).forEach(((e,t)=>{this.appendChild(e)}))}connectedCallback(){this.reverse=this.reverse}}customElements.get("ea-timeline")||customElements.define("ea-timeline",EaTimeline);