easy-component-ui 2.1.0 → 3.0.0

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

@@ -1,84 +0,0 @@
-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,74 +0,0 @@
-// @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

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

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

@@ -1,3 +0,0 @@
-export const stylesheet = `
-
-`;

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

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

@@ -1,92 +0,0 @@
-@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,81 +0,0 @@
-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;
-}
-`;