easy-component-ui 2.0.5 → 2.1.1

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

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

package/components/ea-timeline/index.js

@@ -1 +1,74 @@
-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);
+// @ts-nocheck
+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 {
+  #wrap;
+
+  #container;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <div class='ea-timeline_wrap' part='container'>
+        <ul class='ea-timeline-item_container' part='list-wrap'>
+          <slot></slot>
+        </ul>
+      </div>
+    `;
+
+    this.#wrap = shadowRoot.querySelector('.ea-timeline_wrap');
+    this.#container = shadowRoot.querySelector('.ea-timeline-item_container');
+
+    this.build(shadowRoot, stylesheet);
+  }
+
+  // ------- reverse 时间线排序 -------
+  // #region
+  get reverse() {
+    const attr = this.getAttribute('reverse');
+
+    return handleDefaultAttrIsTrue(attr);
+  }
+
+  set reverse(value) {
+    this.setAttribute('reverse', value);
+
+    this.#sortTimeline(value);
+  }
+  // #endregion
+  // ------- end -------
+
+  #sortTimeline(flag) {
+    flag = flag === "true" || flag === true ? true : false;
+
+    const timelineItems = Array.from(this.querySelectorAll('ea-timeline-item'));
+    const timeArr = timelineItems.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.appendChild(item);
+    })
+  }
+
+  connectedCallback() {
+    this.reverse = this.reverse;
+  }
+}
+
+if (!customElements.get('ea-timeline')) {
+  customElements.define('ea-timeline', EaTimeline);
+}
+

package/components/ea-timeline/index.scss

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

package/components/ea-timeline/style/stylesheet.js

@@ -1 +1,3 @@
-export const stylesheet="\n\n";
+export const stylesheet = `
+
+`;

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

@@ -0,0 +1,79 @@
+.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;
+}

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

@@ -1 +1,146 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTimelineItem extends Base{#t;#e;#i;#s;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-timeline-item_wrap' part='container'>\n                <div class='ea-timeline-item_circle' part='circle'></div>\n                <div class='ea-timeline-item_tail' part='tail'></div>\n                <div class='ea-timeline-item_container' part='body'>\n                    <div class='ea-timeline-item_content' part='content'>\n                        <slot></slot>\n                    </div>\n                    <div class='ea-timeline-item_timestamp' part='timestamp'></div>\n                </div>\n            </div>\n        ",this.#t=t.querySelector(".ea-timeline-item_wrap"),this.#e=t.querySelector(".ea-timeline-item_timestamp"),this.#i=t.querySelector(".ea-timeline-item_circle"),this.#s=t.querySelector(".ea-timeline-item_timestamp"),this.build(t,stylesheet)}get time(){return this.getAttribute("time")||""}set time(t){t&&(this.setAttribute("time",t),this.#s.innerText=t)}get typeList(){return["primary","success","warning","danger","info"]}get type(){const t=this.getAttribute("type");return this.typeList.includes(t)?t:"info"}set type(t){this.setAttribute("type",t),this.#i.classList.add(`ea-timeline-item--${t}`)}get color(){return this.getAttribute("color")||""}set color(t){if(!t)return;this.setAttribute("color",t);""!==((new Option).style.color=t)&&(this.#i.style.backgroundColor=t)}get sizeList(){return["normal","large"]}get size(){const t=this.getAttribute("size");return this.sizeList.includes(t)?t:"normal"}set size(t){this.setAttribute("size",t),this.#t.classList.add(`ea-timeline-item_circle--${t}`)}get placementList(){return["top","bottom"]}get placement(){const t=this.getAttribute("placement");return this.placementList.includes(t)?t:"bottom"}set placement(t){this.setAttribute("placement",t),this.#e.classList.add(`ea-timeline-item_timestamp--${t}`)}connectedCallback(){this.time=this.time,this.type=this.type,this.color=this.color,this.size=this.size,this.placement=this.placement}}customElements.get("ea-timeline-item")||customElements.define("ea-timeline-item",EaTimelineItem);
+import Base from '../Base.js';
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaTimelineItem extends Base {
+    #wrap;
+
+    #timeWrap;
+
+    #timelineCircle;
+    #timelineTimestamp;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class='ea-timeline-item_wrap' part='container'>
+                <div class='ea-timeline-item_circle' part='circle'></div>
+                <div class='ea-timeline-item_tail' part='tail'></div>
+                <div class='ea-timeline-item_container' part='body'>
+                    <div class='ea-timeline-item_content' part='content'>
+                        <slot></slot>
+                    </div>
+                    <div class='ea-timeline-item_timestamp' part='timestamp'></div>
+                </div>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-timeline-item_wrap');
+        this.#timeWrap = shadowRoot.querySelector('.ea-timeline-item_timestamp');
+        this.#timelineCircle = shadowRoot.querySelector('.ea-timeline-item_circle');
+        this.#timelineTimestamp = shadowRoot.querySelector('.ea-timeline-item_timestamp');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- time 时间 -------
+    // #region
+    get time() {
+        return this.getAttribute('time') || "";
+    }
+
+    set time(value) {
+        if (!value) return;
+
+        this.setAttribute('time', value);
+
+        this.#timelineTimestamp.innerText = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- type 时间线类型 -------
+    // #region
+    get typeList() {
+        return ["primary", "success", "warning", "danger", "info"];
+    }
+
+    get type() {
+        const attr = this.getAttribute('type');
+
+        return this.typeList.includes(attr) ? attr : "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) {
+        if (!value) return;
+
+        this.setAttribute('color', value);
+
+        const isColor = new Option().style.color = value;
+
+        if (isColor !== "") this.#timelineCircle.style.backgroundColor = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- size 时间线尺寸 -------
+    // #region
+    get sizeList() {
+        return ["normal", "large"];
+    }
+
+    get size() {
+        const attr = this.getAttribute('size');
+
+        return this.sizeList.includes(attr) ? attr : "normal";
+    }
+
+    set size(value) {
+        this.setAttribute('size', value);
+
+        this.#wrap.classList.add(`ea-timeline-item_circle--${value}`);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- placement 时间的显示位置 -------
+    // #region
+    get placementList() {
+        return ["top", "bottom"];
+    }
+
+    get placement() {
+        const attr = this.getAttribute('placement');
+
+        return this.placementList.includes(attr) ? attr : "bottom";
+    }
+
+    set placement(value) {
+        this.setAttribute('placement', value);
+
+        this.#timeWrap.classList.add(`ea-timeline-item_timestamp--${value}`);
+    }
+    // #endregion
+    // ------- end -------d
+
+    connectedCallback() {
+        this.time = this.time;
+
+        this.type = this.type;
+
+        this.color = this.color;
+
+        this.size = this.size;
+
+        this.placement = this.placement;
+    }
+}
+
+if (!customElements.get('ea-timeline-item')) {
+    customElements.define('ea-timeline-item', EaTimelineItem);
+}

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

@@ -0,0 +1,92 @@
+@import "../ea-ui-base-style.scss";
+
+$types: (
+  "primary": #409eff,
+  "success": #67c23a,
+  "warning": #e6a23c,
+  "danger": #f56c6c,
+  "info": #e4e7ed,
+);
+
+.ea-timeline-item_wrap {
+  position: relative;
+  padding-bottom: 20px;
+  padding-left: 28px;
+  list-style: none;
+
+  .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;
+
+    @each $type in map-keys($types) {
+      &.ea-timeline-item--#{$type} {
+        background-color: map-get($types, $type);
+        color: map-get($types, $type);
+      }
+    }
+  }
+
+  .ea-timeline-item_tail {
+    z-index: 0;
+    position: absolute;
+    left: 0.3281rem;
+    height: 100%;
+    border-left: 2px solid #e4e7ed;
+  }
+
+  .ea-timeline-item_container {
+    position: relative;
+    top: -4px;
+    font-size: 14px;
+
+    display: flex;
+    flex-direction: column;
+
+    .ea-timeline-item_timestamp {
+      color: #909399;
+      line-height: 1;
+      margin-top: 8px;
+    }
+
+    .ea-timeline-item_content {
+      color: #303133;
+    }
+
+    &.ea-timeline-item_timestamp--top {
+      flex-direction: column-reverse;
+
+      .ea-timeline-item_timestamp {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+    }
+
+    &.ea-timeline-item_timestamp--bottom {
+      flex-direction: column;
+    }
+  }
+
+  &.ea-timeline-item_circle--large {
+    .ea-timeline-item_circle {
+      width: 14px;
+      height: 14px;
+    }
+
+    .ea-timeline-item_tail {
+      left: 0.3906rem;
+    }
+
+    .ea-timeline-item_container {
+      font-size: 16px;
+    }
+  }
+}

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

@@ -1 +1,81 @@
-export const stylesheet="\n.ea-timeline-item_wrap {\n  position: relative;\n  padding-bottom: 20px;\n  padding-left: 28px;\n  list-style: none;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle {\n  position: absolute;\n  left: 0;\n  z-index: 1;\n  display: block;\n  width: 12px;\n  height: 12px;\n  font-size: 12px;\n  border-radius: 50%;\n  background-color: #e4e7ed;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--primary {\n  background-color: #409eff;\n  color: #409eff;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--success {\n  background-color: #67c23a;\n  color: #67c23a;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--warning {\n  background-color: #e6a23c;\n  color: #e6a23c;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--danger {\n  background-color: #f56c6c;\n  color: #f56c6c;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--info {\n  background-color: #e4e7ed;\n  color: #e4e7ed;\n}\n.ea-timeline-item_wrap .ea-timeline-item_tail {\n  z-index: 0;\n  position: absolute;\n  left: 0.3281rem;\n  height: 100%;\n  border-left: 2px solid #e4e7ed;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container {\n  position: relative;\n  top: -4px;\n  font-size: 14px;\n  display: flex;\n  flex-direction: column;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container .ea-timeline-item_timestamp {\n  color: #909399;\n  line-height: 1;\n  margin-top: 8px;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container .ea-timeline-item_content {\n  color: #303133;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--top {\n  flex-direction: column-reverse;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--top .ea-timeline-item_timestamp {\n  margin-top: 0;\n  margin-bottom: 8px;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--bottom {\n  flex-direction: column;\n}\n.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_circle {\n  width: 14px;\n  height: 14px;\n}\n.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_tail {\n  left: 0.3906rem;\n}\n.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_container {\n  font-size: 16px;\n}\n";
+export 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;
+}
+`;