easy-component-ui 2.0.5 → 2.1.1

package/components/ea-pagination/index.scss

@@ -0,0 +1,89 @@
+@import "../ea-ui-base-style.scss";
+
+.ea-pagination_wrap {
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+
+  .ea-pagination_item_wrap {
+    display: flex;
+    align-items: center;
+
+    .ea-pagination_item,
+    .ea-pagination_more {
+      cursor: pointer;
+      box-sizing: border-box;
+
+      margin: 0 5px;
+      padding: 0 4px;
+
+      min-width: 30px;
+      height: 28px;
+      line-height: 28px;
+
+      font-size: 13px;
+
+      text-align: center;
+    }
+
+    .ea-pagination_item {
+      &.ea-pagination_item--active {
+        color: $color-primary-bgc;
+      }
+    }
+
+    .ea-pagination_more {
+      cursor: pointer;
+      user-select: none;
+
+      &.ea-pagination_more--active {
+        color: $color-primary-bgc;
+      }
+    }
+  }
+
+  .ea-pagination_arrow {
+    user-select: none;
+    cursor: pointer;
+    padding: 0 10px;
+
+    line-height: 28px;
+
+    &.disabled {
+      cursor: default;
+      pointer-events: none;
+      color: $color-switch-disabled-text;
+    }
+
+    &:first-child {
+      margin-right: 0.25rem;
+    }
+
+    &:last-child {
+      margin-left: 0.25rem;
+    }
+  }
+
+  .ea-pagination_item,
+  .ea-pagination_more,
+  .ea-pagination_arrow {
+    &.background {
+      background-color: #f4f4f5;
+      border-radius: 3px;
+
+      &:hover {
+        color: $color-primary-bgc;
+      }
+
+      &.active {
+        background-color: $color-primary-bgc;
+        color: #f4f4f5;
+      }
+    }
+  }
+
+  .ea-pagination_show_total {
+    margin-right: 0.5rem;
+    font-size: 13px;
+  }
+}

package/components/ea-pagination/src/components/getMoreItem.js

@@ -1 +1,20 @@
-export const getMoreItem=(e,n)=>{const t=document.createElement("span");return t.className="ea-pagination_more",t.innerHTML="···",n&&t.classList.add("background"),t.addEventListener("mouseenter",(function(n){t.classList.add("ea-pagination_more--active"),t.innerHTML="prev"===e?"<<":">>"})),t.addEventListener("mouseleave",(function(e){t.classList.remove("ea-pagination_more--active"),t.innerHTML="···"})),t};
+export const getMoreItem = (arrow, hasBgc) => {
+    const moreItem = document.createElement('span');
+    moreItem.className = 'ea-pagination_more';
+    moreItem.innerHTML = '···';
+    moreItem.part = 'more-item';
+
+    if (hasBgc) moreItem.classList.add('background');
+
+    moreItem.addEventListener('mouseenter', function (e) {
+        moreItem.classList.add('ea-pagination_more--active');
+        moreItem.innerHTML = arrow === "prev" ? '<<' : '>>';
+    })
+
+    moreItem.addEventListener('mouseleave', function (e) {
+        moreItem.classList.remove('ea-pagination_more--active');
+        moreItem.innerHTML = '···';
+    })
+
+    return moreItem;
+}

package/components/ea-pagination/src/components/getPageItem.js

@@ -1 +1,11 @@
-export const getPageItem=(e,t)=>{const a=document.createElement("span");return a.className="ea-pagination_item",a.innerText=e,a.setAttribute("data-page",e),t&&a.classList.add("background"),a};
+export const getPageItem = (page, hasBgc) => {
+    const pageItem = document.createElement('span');
+    pageItem.part = 'page-item';
+    pageItem.className = 'ea-pagination_item';
+    pageItem.innerText = page;
+    pageItem.setAttribute('data-page', page);
+
+    if (hasBgc) pageItem.classList.add('background');
+
+    return pageItem;
+};

package/components/ea-pagination/src/components/getShowTotalItem.js

@@ -1 +1,7 @@
-export const getShowTotalItem=()=>{const t=document.createElement("span");return t.className="ea-pagination_show_total",t};
+export const getShowTotalItem = () => {
+    const showTotalItem = document.createElement('span');
+    showTotalItem.className = 'ea-pagination_show_total';
+    showTotalItem.part = 'total-wrap';
+
+    return showTotalItem;
+}

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

@@ -1 +1,71 @@
-export const stylesheet="\n.ea-pagination_wrap {\n  display: flex;\n  align-items: center;\n  font-size: 0.9rem;\n}\n.ea-pagination_wrap .ea-pagination_item_wrap {\n  display: flex;\n  align-items: center;\n}\n.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_item,\n.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_more {\n  cursor: pointer;\n  box-sizing: border-box;\n  margin: 0 5px;\n  padding: 0 4px;\n  min-width: 30px;\n  height: 28px;\n  line-height: 28px;\n  font-size: 13px;\n  text-align: center;\n}\n.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_item.ea-pagination_item--active {\n  color: #409eff;\n}\n.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_more {\n  cursor: pointer;\n  user-select: none;\n}\n.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_more.ea-pagination_more--active {\n  color: #409eff;\n}\n.ea-pagination_wrap .ea-pagination_arrow {\n  user-select: none;\n  cursor: pointer;\n  padding: 0 10px;\n  line-height: 28px;\n}\n.ea-pagination_wrap .ea-pagination_arrow.disabled {\n  cursor: default;\n  pointer-events: none;\n  color: #c0c4cc;\n}\n.ea-pagination_wrap .ea-pagination_arrow:first-child {\n  margin-right: 0.25rem;\n}\n.ea-pagination_wrap .ea-pagination_arrow:last-child {\n  margin-left: 0.25rem;\n}\n.ea-pagination_wrap .ea-pagination_item.background,\n.ea-pagination_wrap .ea-pagination_more.background,\n.ea-pagination_wrap .ea-pagination_arrow.background {\n  background-color: #f4f4f5;\n  border-radius: 3px;\n}\n.ea-pagination_wrap .ea-pagination_item.background:hover,\n.ea-pagination_wrap .ea-pagination_more.background:hover,\n.ea-pagination_wrap .ea-pagination_arrow.background:hover {\n  color: #409eff;\n}\n.ea-pagination_wrap .ea-pagination_item.background.active,\n.ea-pagination_wrap .ea-pagination_more.background.active,\n.ea-pagination_wrap .ea-pagination_arrow.background.active {\n  background-color: #409eff;\n  color: #f4f4f5;\n}\n.ea-pagination_wrap .ea-pagination_show_total {\n  margin-right: 0.5rem;\n  font-size: 13px;\n}\n";
+export const stylesheet = `
+.ea-pagination_wrap {
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap {
+  display: flex;
+  align-items: center;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_item,
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_more {
+  cursor: pointer;
+  box-sizing: border-box;
+  margin: 0 5px;
+  padding: 0 4px;
+  min-width: 30px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 13px;
+  text-align: center;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_item.ea-pagination_item--active {
+  color: #409eff;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_more {
+  cursor: pointer;
+  user-select: none;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_more.ea-pagination_more--active {
+  color: #409eff;
+}
+.ea-pagination_wrap .ea-pagination_arrow {
+  user-select: none;
+  cursor: pointer;
+  padding: 0 10px;
+  line-height: 28px;
+}
+.ea-pagination_wrap .ea-pagination_arrow.disabled {
+  cursor: default;
+  pointer-events: none;
+  color: #c0c4cc;
+}
+.ea-pagination_wrap .ea-pagination_arrow:first-child {
+  margin-right: 0.25rem;
+}
+.ea-pagination_wrap .ea-pagination_arrow:last-child {
+  margin-left: 0.25rem;
+}
+.ea-pagination_wrap .ea-pagination_item.background,
+.ea-pagination_wrap .ea-pagination_more.background,
+.ea-pagination_wrap .ea-pagination_arrow.background {
+  background-color: #f4f4f5;
+  border-radius: 3px;
+}
+.ea-pagination_wrap .ea-pagination_item.background:hover,
+.ea-pagination_wrap .ea-pagination_more.background:hover,
+.ea-pagination_wrap .ea-pagination_arrow.background:hover {
+  color: #409eff;
+}
+.ea-pagination_wrap .ea-pagination_item.background.active,
+.ea-pagination_wrap .ea-pagination_more.background.active,
+.ea-pagination_wrap .ea-pagination_arrow.background.active {
+  background-color: #409eff;
+  color: #f4f4f5;
+}
+.ea-pagination_wrap .ea-pagination_show_total {
+  margin-right: 0.5rem;
+  font-size: 13px;
+}
+`;

package/components/ea-pane/index.css

@@ -0,0 +1,6 @@
+.ea-pane_wrap {
+  display: none;
+}
+.ea-pane_wrap.is-actived {
+  display: block;
+}

package/components/ea-pane/index.js

@@ -1 +1,52 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/stylesheet.js";export class EaPane extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-pane_wrap" part="container">\n                <slot></slot>\n            </div>\n        ',this.#e=e.querySelector(".ea-pane_wrap"),this.build(e,stylesheet)}get actived(){return this.getAttribute("actived")}set actived(e){this.setAttribute("actived",e),this.#e.classList.toggle("is-actived",e)}get name(){return this.getAttribute("name")}set name(e){this.setAttribute("name",e)}}customElements.get("ea-pane")||customElements.define("ea-pane",EaPane);
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+
+import { stylesheet } from './src/stylesheet.js';
+
+export class EaPane extends Base {
+    #wrap;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-pane_wrap" part="container">
+                <slot></slot>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-pane_wrap');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- actived 是否激活 -------
+    // #region
+    get actived() {
+        return this.getAttribute('actived');
+    }
+
+    set actived(value) {
+        this.setAttribute('actived', value);
+
+        this.#wrap.classList.toggle('is-actived', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- name 标签唯一标识 -------
+    // #region
+    get name() {
+        return this.getAttribute('name');
+    }
+
+    set name(value) {
+        this.setAttribute('name', value);
+    }
+    // #endregion
+    // ------- end -------
+}
+
+if (!customElements.get('ea-pane')) {
+    customElements.define('ea-pane', EaPane);
+}

package/components/ea-pane/index.scss

@@ -0,0 +1,7 @@
+.ea-pane_wrap {
+  display: none;
+
+  &.is-actived {
+    display: block;
+  }
+}

package/components/ea-pane/src/stylesheet.js

@@ -1 +1,8 @@
-export const stylesheet="\n.ea-pane_wrap {\n  display: none;\n}\n.ea-pane_wrap.is-actived {\n  display: block;\n}\n";
+export const stylesheet = `
+.ea-pane_wrap {
+  display: none;
+}
+.ea-pane_wrap.is-actived {
+  display: block;
+}
+`;

package/components/ea-progress/index.css

@@ -0,0 +1,61 @@
+@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-progress_wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  line-height: 1;
+  height: 1rem;
+}
+.ea-progress_wrap .ea-progress_track,
+.ea-progress_wrap .ea-progress_path {
+  height: 0.5rem;
+  line-height: 1;
+  background-color: rgb(235, 238, 245);
+  border-radius: 999px;
+}
+.ea-progress_wrap .ea-progress_track {
+  width: 100%;
+}
+.ea-progress_wrap .ea-progress_track .ea-progress_path {
+  box-sizing: border-box;
+  padding-right: 0.5rem;
+  color: aliceblue;
+  font-size: 0.8rem;
+  text-align: right;
+  width: 0%;
+  background-color: #409eff;
+  transition: width 0.2s;
+}
+.ea-progress_wrap .ea-progress_text {
+  margin-left: 0.5rem;
+  font-size: 0.8rem;
+  width: 3rem;
+}
+.ea-progress_wrap .ea-progress_text--circle,
+.ea-progress_wrap .ea-progress_text--dashboard {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ea-progress_wrap svg circle {
+  stroke-width: 4px;
+  transform-origin: center center;
+  transition: stroke-dashoffset 0.2s;
+}
+.ea-progress_wrap svg .track--circle,
+.ea-progress_wrap svg .path--circle {
+  transform: rotate(-90deg);
+}
+.ea-progress_wrap svg .track--dashboard,
+.ea-progress_wrap svg .path--dashboard {
+  transform: rotate(161deg);
+}

package/components/ea-progress/index.js

@@ -1 +1,249 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";import{SVGComm}from"./src/components/SVGComm.js";export class EaProgress extends Base{#t;#e;#s;#r;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-progress_wrap" part="container">\n                <section class="ea-progress_track" part="track-wrap">\n                    <section class="ea-progress_path" part="path"></section>\n                </section>\n                <section class="ea-progress_text" part="text-wrap"></section>\n            </div>\n        ',this.#t=t.querySelector(".ea-progress_wrap"),this.#e=t.querySelector(".ea-progress_track"),this.#s=t.querySelector(".ea-progress_path"),this.#r=t.querySelector(".ea-progress_text"),this.build(t,stylesheet)}get type(){return this.getAttribute("type")}set type(t){if(t)switch(this.setAttribute("type",t),this.type){case"circle":this.#i("circle");break;case"dashboard":this.#i("dashboard")}}get percentage(){return this.getAttribute("percentage")||0}#a(t){return 302*(100-Number(t))/100}#h(t){return 152*(100-Number(t))/100+100}set percentage(t){if(!isNaN(Number(t)))switch(Number(t)<0?t=0:Number(t)>100&&(t=100),this.setAttribute("percentage",t),this.#r.innerHTML=`${t}%`,this.type){case"circle":this.#s.style.strokeDashoffset=`${this.#a(t)}px`;break;case"dashboard":this.#s.style.strokeDashoffset=`${this.#h(t)}px`;break;default:this.#s.style.width=`${t}%`,this.textInside&&this.#c(t)}}get statusList(){return{success:{icon:"icon-ok-circled",color:"#67c23a"},warning:{icon:"icon-attention-circled",color:"#e6a23c"},exception:{icon:"icon-cancel-circled",color:"#f56c6c"},primary:{}}}#o(t,e){!this.type&&this.textInside||"dashboard"===this.type||"circle"===this.type?this.#r.innerText=`${this.percentage}%`:this.#r.innerText="",this.#r.className=`${e} ${this.statusList[t].icon||""}`,this.#r.style.color=this.statusList[t].color}get status(){return this.getAttribute("status")||"primary"}set status(t){switch(this.setAttribute("status",t),this.type){case"circle":this.#o(t,"ea-progress_text--circle"),this.#s.style.stroke=this.statusList[t].color;break;case"dashboard":this.#o(t,"ea-progress_text--dashboard"),this.#s.style.stroke=this.statusList[t].color;break;default:this.#o(t,"ea-progress_text"),this.#s.style.backgroundColor=this.statusList[t].color}}get textInside(){return this.getAttrBoolean("text-inside")}set textInside(t){"circle"!==this.type&&(this.setAttribute("text-inside",t),this.#c(t))}get strokeWidth(){return this.getAttribute("stroke-width")}set strokeWidth(t){t=t?Number(t):4,this.toggleAttr("stroke-width",t),"circle"===this.type||"dashboard"===this.type?(this.#e.style.strokeWidth=`${t}px`,this.#s.style.strokeWidth=`${t}px`):(t+=4,this.#e.style.height=`${t}px`,this.#e.style.lineHeight=`${t}px`,this.#s.style.height=`${t}px`,this.#s.style.lineHeight=`${t}px`,this.#t.style.height=`${t}px`,this.#t.style.lineHeight=`${t}px`)}#i(t){this.#t.style.height="126px",this.#t.style.width="126px",this.#t.innerHTML=SVGComm[t];const e=this.#t.querySelector(`circle[class="track--${t}"]`),s=this.#t.querySelector(`circle[class="path--${t}"]`),r=this.#t.querySelector(`span[class="ea-progress_text--${t}"]`);this.#e=e,this.#s=s,this.#r=r}#c(t){t?(this.#r.style.display="none",this.#s.innerText=`${this.percentage}%`):(this.#r.style.display="block",this.#s.innerText="")}connectedCallback(){this.type=this.type,this.percentage=this.percentage,this.status=this.status,this.textInside=this.textInside,this.strokeWidth=this.strokeWidth}}customElements.get("ea-progress")||customElements.define("ea-progress",EaProgress);
+import Base from '../Base.js';
+import "../ea-icon/index.js"
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+import { SVGComm } from "./src/components/SVGComm.js";
+
+export class EaProgress extends Base {
+    #wrap;
+    #track;
+    #path;
+    #progressText;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-progress_wrap" part="container">
+                <section class="ea-progress_track" part="track-wrap">
+                    <section class="ea-progress_path" part="path"></section>
+                </section>
+                <section class="ea-progress_text" part="text-wrap"></section>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-progress_wrap');
+        this.#track = shadowRoot.querySelector('.ea-progress_track');
+        this.#path = shadowRoot.querySelector('.ea-progress_path');
+        this.#progressText = shadowRoot.querySelector('.ea-progress_text');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- type 进度条类型 -------
+    // #region
+    get type() {
+        return this.getAttribute('type');
+    }
+
+    set type(value) {
+        if (!value) return;
+
+        this.setAttribute('type', value);
+
+        switch (this.type) {
+            case "circle":
+                this.#handleSVGTemplate("circle");
+                break;
+            case "dashboard":
+                this.#handleSVGTemplate("dashboard");
+                break;
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- percentage 进度百分比 -------
+    // #region
+    get percentage() {
+        return this.getAttribute('percentage') || 0;
+    }
+
+    #getCirclePercentageValue(value) {
+        return 302 * (100 - Number(value)) / 100;
+    }
+
+    #getDashboardPercentageValue(value) {
+        return 152 * (100 - Number(value)) / 100 + 100;
+    }
+
+    set percentage(value) {
+        if (isNaN(Number(value))) return;
+        else if (Number(value) < 0) value = 0;
+        else if (Number(value) > 100) value = 100;
+
+        this.setAttribute('percentage', value);
+        if (this.textInside || this.type === "dashboard" || this.type === "circle") this.#progressText.innerHTML = `${value}%`;
+
+        switch (this.type) {
+            case "circle": {
+                this.#path.style.strokeDashoffset = `${this.#getCirclePercentageValue(value)}px`;
+                break;
+            }
+            case "dashboard": {
+                this.#path.style.strokeDashoffset = `${this.#getDashboardPercentageValue(value)}px`;
+                break;
+            }
+            default: {
+                this.#path.style.width = `${value}%`;
+
+                if (this.textInside) this.#handleTextInside(value);
+                break;
+            }
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- status 进度条状态样式 -------
+    // #region
+
+    // 样式配置
+    get statusList() {
+        return {
+            success: {
+                icon: 'icon-ok-circled',
+                color: '#67c23a'
+            },
+            warning: {
+                icon: 'icon-attention-circled',
+                color: '#e6a23c'
+            },
+            exception: {
+                icon: 'icon-cancel-circled',
+                color: '#f56c6c'
+            },
+            primary: {},
+        }
+    }
+
+    // 状态处理
+    #handleStatusStyle(value, className) {
+        if ((!this.type && this.textInside) || (this.type === 'dashboard' || this.type === 'circle')) {
+            this.#progressText.innerText = `${this.percentage}%`;
+        } else {
+            this.#progressText.innerText = '';
+        }
+
+        this.#progressText.className = `${className} ${this.statusList[value].icon || ''}`;
+        this.#progressText.style.color = this.statusList[value].color;
+    }
+
+    get status() {
+        return this.getAttribute('status') || 'primary';
+    }
+
+    set status(value) {
+        this.setAttribute('status', value);
+
+        switch (this.type) {
+            case "circle":
+                this.#handleStatusStyle(value, 'ea-progress_text--circle');
+                this.#path.style.stroke = this.statusList[value].color;
+                break;
+            case "dashboard":
+                this.#handleStatusStyle(value, 'ea-progress_text--dashboard');
+                this.#path.style.stroke = this.statusList[value].color;
+                break;
+            default:
+                this.#handleStatusStyle(value, 'ea-progress_text');
+                this.#path.style.backgroundColor = this.statusList[value].color;
+                break;
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- text-inside 进度文字内显 -------
+    // #region
+    get textInside() {
+        return this.getAttrBoolean("text-inside");
+    }
+
+    set textInside(value) {
+        if (this.type === "circle" || !value) return;
+
+        this.setAttribute("text-inside", value);
+
+        this.#handleTextInside(value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- stroke-width 进度条高度 -------
+    // #region
+    get strokeWidth() {
+        return this.getAttribute("stroke-width");
+    }
+
+    set strokeWidth(value) {
+        value = value ? Number(value) : 4;
+
+        this.toggleAttr("stroke-width", value);
+
+        if (this.type === "circle" || this.type === "dashboard") {
+            this.#track.style.strokeWidth = `${value}px`;
+            this.#path.style.strokeWidth = `${value}px`;
+        } else {
+            value = value + 4;
+
+            this.#track.style.height = `${value}px`;
+            this.#track.style.lineHeight = `${value}px`;
+            this.#path.style.height = `${value}px`;
+            this.#path.style.lineHeight = `${value}px`;
+
+            this.#wrap.style.height = `${value}px`;
+            this.#wrap.style.lineHeight = `${value}px`;
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    #handleSVGTemplate(type) {
+        this.#wrap.style.height = '126px';
+        this.#wrap.style.width = '126px';
+
+        this.#wrap.innerHTML = SVGComm[type];
+
+        const track = this.#wrap.querySelector(`circle[class="track--${type}"]`);
+        const path = this.#wrap.querySelector(`circle[class="path--${type}"]`);
+        const progressText = this.#wrap.querySelector(`span[class="ea-progress_text--${type}"]`);
+
+        this.#track = track;
+        this.#path = path;
+        this.#progressText = progressText;
+    }
+
+    #handleTextInside(value) {
+        if (value) {
+            this.#progressText.style.display = "none";
+            this.#path.innerText = `${this.percentage}%`;
+        } else {
+            this.#progressText.style.display = "block";
+            this.#path.innerText = ``;
+        }
+    }
+
+    connectedCallback() {
+        // type 进度条类型
+        this.type = this.type;
+
+        // percentage 百分比
+        this.percentage = this.percentage;
+
+        // status 状态
+        this.status = this.status;
+
+        // text-inside 文本内显
+        this.textInside = this.textInside;
+
+        // stroke-width 进度条的高度
+        this.strokeWidth = this.strokeWidth;
+    }
+}
+
+if (!customElements.get("ea-progress")) {
+    customElements.define("ea-progress", EaProgress);
+}

package/components/ea-progress/index.scss

@@ -0,0 +1,74 @@
+@import "../ea-ui-base-style.scss";
+@import "../ea-icon/index.scss";
+
+.ea-progress_wrap {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  line-height: 1;
+  height: 1rem;
+
+  .ea-progress_track,
+  .ea-progress_path {
+    height: 0.5rem;
+    line-height: 1;
+    background-color: rgb(235, 238, 245);
+    border-radius: 999px;
+  }
+
+  .ea-progress_track {
+    width: 100%;
+
+    .ea-progress_path {
+      box-sizing: border-box;
+      padding-right: 0.5rem;
+      color: aliceblue;
+
+      font-size: 0.8rem;
+      text-align: right;
+
+      width: 0%;
+      background-color: $color-primary-bgc;
+
+      transition: width 0.2s;
+    }
+  }
+
+  .ea-progress_text {
+    margin-left: 0.5rem;
+    font-size: 0.8rem;
+    width: 3rem;
+  }
+
+  .ea-progress_text--circle,
+  .ea-progress_text--dashboard {
+    position: absolute;
+
+    left: 50%;
+    top: 50%;
+
+    transform: translate(-50%, -50%);
+  }
+
+  svg {
+    circle {
+      stroke-width: 4px;
+
+      transform-origin: center center;
+      transition: stroke-dashoffset 0.2s;
+    }
+
+    .track--circle,
+    .path--circle {
+      transform: rotate(-90deg);
+    }
+
+    .track--dashboard,
+    .path--dashboard {
+      transform: rotate(161deg);
+    }
+  }
+}