easy-component-ui 2.0.1 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ea-aside/index.js +1 -1
- package/components/ea-calendar/index.js +1 -1
- package/components/ea-calendar/src/utils/createThead.js +1 -1
- package/components/ea-card/index.js +1 -1
- package/components/ea-carousel/index.js +1 -1
- package/components/ea-checkbox/index.js +1 -1
- package/components/ea-checkbox/src/style/stylesheet.js +1 -1
- package/components/ea-checkbox-group/index.js +1 -1
- package/components/ea-collapse/index.js +1 -1
- package/components/ea-collapse-item/index.js +1 -1
- package/components/ea-container/index.js +1 -1
- package/components/ea-footer/index.js +1 -1
- package/components/ea-header/index.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-aside_wrap {\n height: 100%;\n overflow: auto;\n}\n";export class EaAside extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <aside class="ea-aside_wrap" part="container">\n <slot></slot>\n </aside>\n ',this.#e=e.querySelector(".ea-aside_wrap"),this.build(e,stylesheet)}get width(){return this.getAttrNumber("width")||200}set width(e){this.setAttribute("width",e),this.#e.style.width=`${e}px`}connectedCallback(){this.width=this.width}}customElements.get("ea-aside")||customElements.define("ea-aside",EaAside);
|
|
1
|
+
import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-aside_wrap {\n height: 100%;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n.ea-aside_wrap ::slotted(ea-main) {\n overflow: auto;\n}\n";export class EaAside extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <aside class="ea-aside_wrap" part="container">\n <slot></slot>\n </aside>\n ',this.#e=e.querySelector(".ea-aside_wrap"),this.build(e,stylesheet)}get width(){return this.getAttrNumber("width")||200}set width(e){this.setAttribute("width",e),this.#e.style.width=`${e}px`}connectedCallback(){this.width=this.width}}customElements.get("ea-aside")||customElements.define("ea-aside",EaAside);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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;#d;#h
|
|
1
|
+
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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createElement}from"../../../../utils/createElement.js";export const createThead=(e=["一","二","三","四","五","六","日"])=>{const t=createElement("tr")
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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">\n <slot name="header"></slot>\n </div>\n <div class="ea-card_content" part="content">\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);
|
|
1
|
+
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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Base from"../Base.js";import"../ea-carousel-item/index.js";import{createElement}from"../../utils/createElement.js";import{handleIndexOverflow}from"./src/utils/handleIndexOverflow.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCarousel extends Base{#t;#e;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n <div class='ea-carousel_wrap' part='container'>\n <div class='ea-carousel_content-container' part='content-wrap'>\n <slot></slot>\n </div>\n <div class='ea-carousel-indicator_wrap' part='indicator-wrap'></div>\n </div>\n ",this.#t=t.querySelector(".ea-carousel_wrap"),this.#e=t.querySelector(".ea-carousel_content-container"),this.#i=t.querySelector(".ea-carousel-indicator_wrap"),this.build(t,stylesheet)}get direction(){const t=this.getAttribute("direction");return["horizontal","vertical"].includes(t)?t:"horizontal"}set direction(t){this.setAttribute("direction",t),this.#t.classList.add(`ea-carousel--${t}`)}get index(){return this.getAttrNumber("index")||0}set index(t){const e=this.querySelectorAll("ea-carousel-item").length-1,i=handleIndexOverflow(e,t);this.setAttribute("index",i);const r=this.#t.getBoundingClientRect(),
|
|
1
|
+
import Base from"../Base.js";import"../ea-carousel-item/index.js";import{createElement}from"../../utils/createElement.js";import{handleIndexOverflow}from"./src/utils/handleIndexOverflow.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCarousel extends Base{#t;#e;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n <div class='ea-carousel_wrap' part='container'>\n <div class='ea-carousel_content-container' part='content-wrap'>\n <slot></slot>\n </div>\n <div class='ea-carousel-indicator_wrap' part='indicator-wrap'></div>\n </div>\n ",this.#t=t.querySelector(".ea-carousel_wrap"),this.#e=t.querySelector(".ea-carousel_content-container"),this.#i=t.querySelector(".ea-carousel-indicator_wrap"),this.build(t,stylesheet)}get direction(){const t=this.getAttribute("direction");return["horizontal","vertical"].includes(t)?t:"horizontal"}set direction(t){this.setAttribute("direction",t),this.#t.classList.add(`ea-carousel--${t}`)}get index(){return this.getAttrNumber("index")||0}set index(t){const e=this.querySelectorAll("ea-carousel-item").length-1,i=handleIndexOverflow(e,t);this.setAttribute("index",i);const r=this.#t.getBoundingClientRect(),a="horizontal"===this.direction?"X":"Y",s="horizontal"===this.direction?r.width:r.height;this.#e.style.transform=`translate${a}(-${i*s}px)`;try{const t=this.#i.querySelectorAll(".ea-carousel-item_indicator");t.forEach((t=>{t.classList.remove("ea-carousel-item_indicator--active")})),t[i].classList.add("ea-carousel-item_indicator--active")}catch(t){}}get trigger(){const t=this.getAttribute("trigger")||"hover";return["click","hover"].includes(t)?t:"click"}set trigger(t){this.setAttribute("trigger",t)}get interval(){return this.getAttrNumber("interval")||3}set interval(t){this.setAttribute("interval",t)}get arrow(){const t=this.getAttribute("arrow")||"hover";return["always","hover","never"].includes(t)?t:"hover"}set arrow(t){this.setAttribute("arrow",t)}#r(){const t=this.querySelectorAll("ea-carousel-item").length;for(let e=0;e<t;e++){const t=createElement("div","ea-carousel-item_indicator");t.part="indicator",this.#i.appendChild(t)}const e=this.#i.querySelectorAll(".ea-carousel-item_indicator");e[0].classList.add("ea-carousel-item_indicator--active"),e.forEach(((t,i)=>{t.addEventListener("click"===this.trigger?"click":"mouseenter",(()=>{this.index=i,e.forEach((t=>{t.classList.remove("ea-carousel-item_active")})),t.classList.add("ea-carousel-item_active")}))}))}#a(){let t=setInterval((()=>{this.index=this.index+1}),1e3*this.interval);this.addEventListener("mouseenter",(()=>{clearInterval(t),t=null})),this.addEventListener("mouseleave",(()=>{t=setInterval((()=>{this.index=this.index+1}),1e3*this.interval)}))}#s(t){let e=!1;const i=createElement("div",`ea-carousel-item_arrow ea-carousel-item_arrow--${t}`);switch(i.part="arrow",i.innerHTML="left"===t?"<":">",this.arrow){case"always":this.#t.classList.add("always-show-arrow");break;case"hover":this.#t.classList.add("hover-trigger")}return i.addEventListener("click",(()=>{e||(this.index="left"===t?--this.index:++this.index)})),this.#e.addEventListener("transitionstart",(()=>{e=!0})),this.#e.addEventListener("transitionend",(()=>{e=!1})),i}connectedCallback(){if(this.direction=this.direction,this.trigger=this.trigger,this.interval=this.interval,this.arrow=this.arrow,this.index=this.index,this.#r(),this.#a(),"never"!==this.arrow||"vertical"!==this.direction){const t=this.#s("left"),e=this.#s("right");this.#t.appendChild(t),this.#t.appendChild(e)}window.addEventListener("resize",(()=>{this.index=this.index}))}}customElements.get("ea-carousel")||customElements.define("ea-carousel",EaCarousel);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCheckbox extends Base{#e;#t;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <label class="ea-checkbox_wrap" part="container">\n <span class="ea-checkbox-input_wrap" part="input-container">\n <span class="ea-checkbox-input_inner" part="input"></span>\n
|
|
1
|
+
import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCheckbox extends Base{#e;#t;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <label class="ea-checkbox_wrap" part="container">\n <input type="checkbox" class="ea-checkbox-input_input"/>\n <span class="ea-checkbox-input_wrap" part="input-container">\n <span class="ea-checkbox-input_inner" part="input"></span>\n </span>\n <span class="ea-checkbox-label_desc" part="label-container">\n <slot></slot>\n </span>\n </label>\n ',this.#t=e.querySelector(".ea-checkbox_wrap"),this.#e=e.querySelector(".ea-checkbox-input_input"),this.build(e,stylesheet)}get checked(){return this.getAttrBoolean("checked")}set checked(e){this.setAttribute("checked",e),this.#e.checked=e}get name(){return this.getAttribute("name")||""}set name(e){this.#e.setAttribute("name",e)}get value(){return this.getAttribute("value")}set value(e){this.#t.setAttribute("for",e),this.#e.setAttribute("id",e),this.#e.setAttribute("value",e)}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){this.setAttribute("disabled",e),this.#e.disabled=e}get border(){return this.getAttrBoolean("border")}set border(e){this.#t.classList.toggle("border",e)}get indeterminate(){return this.getAttrBoolean("indeterminate")}set indeterminate(e){this.setAttribute("indeterminate",e),this.#e.setAttribute("indeterminate",e),e&&(this.checked=!1,this.#t.classList.remove("checked"),this.setAttribute("indeterminate",!0),this.#e.setAttribute("indeterminate",!0))}connectedCallback(){this.checked=this.checked,this.name=this.name,this.value=this.value,this.disabled=this.disabled,this.border=this.border,this.indeterminate=this.indeterminate,this.#e.addEventListener("change",(e=>{e.preventDefault(),this.indeterminate=!1,this.checked=e.target.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value,name:this.name}}))}))}}window.customElements.get("ea-checkbox")||window.customElements.define("ea-checkbox",EaCheckbox);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const stylesheet='\n:host {\n --margin-right: 1rem;\n}\n\n.ea-checkbox_wrap {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n user-select: none;\n margin-right: var(--margin-right);\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap {\n line-height: 1;\n margin-right: 0.5rem;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n box-sizing: border-box;\n position: relative;\n display: block;\n width: 0.8125rem;\n height: 0.8125rem;\n line-height: 0.8125;\n border-radius: 3px;\n border: 1px solid #ccc;\n transition: background-color 0.2s, border-color 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n content: "";\n position: absolute;\n left: 52.5%;\n top: 45%;\n transform: translate(-50%, -50%) rotate(-135deg);\n display: block;\n width: 3px;\n height: 7px;\n opacity: 0;\n transition: opacity 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_input {\n display: none;\n}\n.ea-checkbox_wrap .ea-checkbox-label_desc {\n line-height: 1;\n transition: color 0.2s;\n}\n.ea-checkbox_wrap.
|
|
1
|
+
export const stylesheet='\n:host {\n --margin-right: 1rem;\n}\n\n.ea-checkbox_wrap {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n user-select: none;\n margin-right: var(--margin-right);\n}\n.ea-checkbox_wrap input {\n display: none;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap {\n line-height: 1;\n margin-right: 0.5rem;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n box-sizing: border-box;\n position: relative;\n display: block;\n width: 0.8125rem;\n height: 0.8125rem;\n line-height: 0.8125;\n border-radius: 3px;\n border: 1px solid #ccc;\n transition: background-color 0.2s, border-color 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n content: "";\n position: absolute;\n left: 52.5%;\n top: 45%;\n transform: translate(-50%, -50%) rotate(-135deg);\n display: block;\n width: 3px;\n height: 7px;\n opacity: 0;\n transition: opacity 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_wrap .ea-checkbox-input_input {\n display: none;\n}\n.ea-checkbox_wrap .ea-checkbox-label_desc {\n line-height: 1;\n transition: color 0.2s;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true] + .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n border-color: #409eff;\n background-color: #409eff;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true] + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n opacity: 1;\n left: 50%;\n top: 50%;\n width: 80%;\n height: 3px;\n background-color: white;\n transform: translate(-50%, -50%) rotate(0deg);\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n border-color: #409eff;\n background-color: #409eff;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::after {\n opacity: 1;\n border-left: 2px solid white;\n border-top: 2px solid white;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=true]:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc,\n.ea-checkbox_wrap .ea-checkbox-input_input[indeterminate=false]:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {\n color: #409eff;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled {\n pointer-events: none;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap {\n cursor: not-allowed;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n border-color: #eeeeee;\n background-color: #eeeeee;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {\n background-color: transparent;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {\n cursor: not-allowed;\n color: #c0c4cc;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner {\n border-color: #eeeeee;\n background-color: #eeeeee;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap .ea-checkbox-input_inner::before {\n opacity: 1;\n border-left: 2px solid white;\n border-top: 2px solid white;\n}\n.ea-checkbox_wrap .ea-checkbox-input_input:disabled:checked + .ea-checkbox-input_wrap + .ea-checkbox-label_desc {\n color: #c0c4cc;\n}\n';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCheckboxGroup extends Base{constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <div class="ea-checkbox-group_wrap" part="container">\n <slot></slot>\n </div>\n ',this.build(e,stylesheet)}get name(){return this.getAttribute("name")||"ea-checkbox"}set name(e){this.querySelectorAll("ea-checkbox").forEach((t=>{t.setAttribute("name",e),t.name=e}))}get value(){return this.getAttribute("value")||""}set value(e){this.setAttribute("value",e);try{const t=e.split(",").map((e=>e.trimStart()));t.map((e=>{
|
|
1
|
+
import{timeout}from"../../utils/timeout.js";import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaCheckboxGroup extends Base{#e=!1;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <div class="ea-checkbox-group_wrap" part="container">\n <slot></slot>\n </div>\n ',this.build(e,stylesheet)}get name(){return this.getAttribute("name")||"ea-checkbox"}set name(e){this.querySelectorAll("ea-checkbox").forEach((t=>{t.setAttribute("name",e),t.name=e}))}get value(){return this.getAttribute("value")||""}set value(e){this.setAttribute("value",e);try{const t=e.split(",").map((e=>e.trimStart()));t.map((e=>{this.querySelector(`ea-checkbox[value="${e}"]`).checked="true"})),this.dispatchEvent(new CustomEvent("change",{detail:t}))}catch(e){}}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){if(!e&&!this.#e)return;this.querySelectorAll("ea-checkbox").forEach((t=>{t.disabled=e}))}#t(e){let t=[];Array.from(e).filter((e=>!!e.checked&&t.push(e.value))),this.value=t.join(",")}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,timeout((()=>{this.value=this.value,this.disabled=this.disabled;const e=this.querySelectorAll("ea-checkbox");e.forEach((t=>{t.addEventListener("change",(t=>{this.#t(e)}))})),this.#t(e),this.#e=!0}),20)}}window.customElements.get("ea-checkbox-group")||window.customElements.define("ea-checkbox-group",EaCheckboxGroup);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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(
|
|
1
|
+
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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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",(
|
|
1
|
+
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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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}\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);
|
|
1
|
+
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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n\n";export class EaFooter extends Base{#
|
|
1
|
+
import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-footer_wrap {\n box-sizing: border-box;\n padding: 0 20px;\n\n height: 60px;\n\n color: #333;\n\n overflow: hidden;\n}\n";export class EaFooter extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <footer class="ea-footer_wrap" part="container">\n <slot></slot>\n </footer>\n ',this.#e=e.querySelector(".ea-footer_wrap"),this.build(e,stylesheet)}get height(){return this.getAttrNumber("height")||60}set height(e){this.setAttribute("height",e),this.#e.style.height=`${e}px`,this.#e.style.lineHeight=`${e}px`}connectedCallback(){this.height=this.height}}customElements.get("ea-footer")||customElements.define("ea-footer",EaFooter);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="";export class EaHeader extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <header class="ea-header_wrap" part="container">\n <slot></slot>\n </header>\n ',this.#e=e.querySelector(".ea-header_wrap"),this.build(e,
|
|
1
|
+
import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-header_wrap {\n box-sizing: border-box;\n padding: 0 20px;\n\n height: 60px;\n\n color: #333;\n\n overflow: hidden;\n}\n";export class EaHeader extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <header class="ea-header_wrap" part="container">\n <slot></slot>\n </header>\n ',this.#e=e.querySelector(".ea-header_wrap"),this.build(e,stylesheet)}get height(){return this.getAttrNumber("height")||60}set height(e){this.setAttribute("height",e),this.#e.style.height=`${e}px`,this.#e.style.lineHeight=`${e}px`}connectedCallback(){this.height=this.height}}customElements.get("ea-header")||customElements.define("ea-header",EaHeader);
|