easy-component-ui 2.1.1 → 3.0.1

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

@@ -1,82 +0,0 @@
-import Base from '../Base.js';
-
-import { imageSVG } from './src/assets/imageSVG.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaSkeletonItem extends Base {
-    #wrap;
-    get variantOptions() {
-        return ["text", "image", "p", "h1", "h2", "h3", "h4", "h5", "h6"];
-    }
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-skeleton-item_wrap" part="container"></div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-skeleton-item_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- style html标签上的样式 -------
-    // #region
-    get elementStyle() {
-        return this.getAttribute('style');
-    }
-
-    set elementStyle(value) {
-        if (!value) return;
-
-        this.#wrap.setAttribute('style', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- variant html标签标识 -------
-    // #region
-    get variant() {
-        return this.getAttribute('variant');
-    }
-
-    set variant(value) {
-        this.variantOptions.includes(value) ? this.setAttribute('variant', value) : this.setAttribute('variant', 'text');
-
-        if (value === "image") this.#wrap.innerHTML = imageSVG;
-
-        this.#wrap.classList.add("ea-skeleton_" + this.variant);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- animated 是否带有动画 -------
-    // #region
-    get animated() {
-        return this.getAttrBoolean('animated');
-    }
-
-    set animated(value) {
-        if (!value) return;
-        this.setAttribute('animated', value);
-
-        this.#wrap.classList.toggle("animated", value);
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.style.display = "block";
-
-        this.variant = this.variant;
-
-        this.animated = this.animated;
-    }
-}
-
-if (!customElements.get('ea-skeleton-item')) {
-    customElements.define('ea-skeleton-item', EaSkeletonItem);
-}

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

@@ -1,107 +0,0 @@
-:host {
-  --p-width: 100%;
-  --margin-top: 1rem;
-}
-
-@keyframes skeleton-loading {
-  0% {
-    background-position: 100% 50%;
-  }
-}
-
-.ea-skeleton-item_wrap {
-  position: relative;
-  background-color: #f2f2f2;
-  border-radius: 4px;
-
-  &.animated {
-    background-image: linear-gradient(
-      90deg,
-      #f6f6f6 25%,
-      #e8e8e8 37%,
-      #f6f6f6 63%
-    );
-
-    background-size: 400% 100%;
-
-    animation: skeleton-loading 1.4s ease infinite;
-  }
-}
-
-.ea-skeleton-item_wrap {
-  &.ea-skeleton_p,
-  &.ea-skeleton_image,
-  &.ea-skeleton_text,
-  &.ea-skeleton_h1,
-  &.ea-skeleton_h2,
-  &.ea-skeleton_h3,
-  &.ea-skeleton_h4,
-  &.ea-skeleton_h5,
-  &.ea-skeleton_h6 {
-    width: 100%;
-  }
-
-  &.ea-skeleton_p {
-    width: var(--p-width);
-    height: 16px;
-
-    margin-top: var(--margin-top);
-  }
-
-  &.ea-skeleton_image {
-    width: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0;
-
-    height: 100%;
-
-    .skeleton-image {
-      width: 30%;
-      height: 30%;
-    }
-  }
-
-  &.ea-skeleton_text {
-    height: 13px;
-
-    margin: 2px 0;
-  }
-
-  &.ea-skeleton_h1 {
-    height: 2rem;
-
-    margin-block: 0.67rem;
-  }
-
-  &.ea-skeleton_h2 {
-    height: 1.5rem;
-
-    margin-block: 0.83rem;
-  }
-
-  &.ea-skeleton_h3 {
-    height: 1.17rem;
-
-    margin-block: 1rem;
-  }
-
-  &.ea-skeleton_h4 {
-    height: 1rem;
-
-    margin-block: 1.33rem;
-  }
-
-  &.ea-skeleton_h5 {
-    height: 0.83rem;
-
-    margin-block: 1.67rem;
-  }
-
-  &.ea-skeleton_h6 {
-    height: 0.67rem;
-
-    margin-block: 2.33rem;
-  }
-}

package/components/ea-skeleton-item/src/assets/imageSVG.js

@@ -1,8 +0,0 @@
-export const imageSVG = `
-<svg class="skeleton-image" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15 20h70v60H15z" stroke="#c0c4cc" stroke-width="5px" fill="none" />
-    <circle r="8" cx="32" cy="35" fill="#c0c4cc" />
-    <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />
-    <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
-</svg>
-`;

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

@@ -1,71 +0,0 @@
-export const stylesheet = `
-:host {
-  --p-width: 100%;
-  --margin-top: 1rem;
-}
-
-@keyframes skeleton-loading {
-  0% {
-    background-position: 100% 50%;
-  }
-}
-.ea-skeleton-item_wrap {
-  position: relative;
-  background-color: #f2f2f2;
-  border-radius: 4px;
-}
-.ea-skeleton-item_wrap.animated {
-  background-image: linear-gradient(90deg, #f6f6f6 25%, #e8e8e8 37%, #f6f6f6 63%);
-  background-size: 400% 100%;
-  animation: skeleton-loading 1.4s ease infinite;
-}
-
-.ea-skeleton-item_wrap.ea-skeleton_p, .ea-skeleton-item_wrap.ea-skeleton_image, .ea-skeleton-item_wrap.ea-skeleton_text, .ea-skeleton-item_wrap.ea-skeleton_h1, .ea-skeleton-item_wrap.ea-skeleton_h2, .ea-skeleton-item_wrap.ea-skeleton_h3, .ea-skeleton-item_wrap.ea-skeleton_h4, .ea-skeleton-item_wrap.ea-skeleton_h5, .ea-skeleton-item_wrap.ea-skeleton_h6 {
-  width: 100%;
-}
-.ea-skeleton-item_wrap.ea-skeleton_p {
-  width: var(--p-width);
-  height: 16px;
-  margin-top: var(--margin-top);
-}
-.ea-skeleton-item_wrap.ea-skeleton_image {
-  width: unset;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0;
-  height: 100%;
-}
-.ea-skeleton-item_wrap.ea-skeleton_image .skeleton-image {
-  width: 30%;
-  height: 30%;
-}
-.ea-skeleton-item_wrap.ea-skeleton_text {
-  height: 13px;
-  margin: 2px 0;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h1 {
-  height: 2rem;
-  margin-block: 0.67rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h2 {
-  height: 1.5rem;
-  margin-block: 0.83rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h3 {
-  height: 1.17rem;
-  margin-block: 1rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h4 {
-  height: 1rem;
-  margin-block: 1.33rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h5 {
-  height: 0.83rem;
-  margin-block: 1.67rem;
-}
-.ea-skeleton-item_wrap.ea-skeleton_h6 {
-  height: 0.67rem;
-  margin-block: 2.33rem;
-}
-`;

package/components/ea-step/index.css

@@ -1,84 +0,0 @@
-.ea-step_wrap {
-  color: #c0c4cc;
-  transition: color 0.3s;
-}
-.ea-step_wrap .ea-step_head-wrap {
-  position: relative;
-}
-.ea-step_wrap .ea-step_head-wrap .ea-step_head-icon {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  background-color: #fff;
-  font-size: 14px;
-  z-index: 1;
-}
-.ea-step_wrap .ea-step_head-wrap .ea-step_head-icon.is-text {
-  border-radius: 50%;
-  border: 2px solid;
-}
-.ea-step_wrap .ea-step_head-wrap .ea-step_bar {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 2px;
-  width: 100%;
-  height: 2px;
-  background-color: #c0c4cc;
-}
-.ea-step_wrap .ea-step_head-wrap.is-last {
-  flex-basis: auto;
-}
-.ea-step_wrap .ea-step_head-wrap.is-last .ea-step_bar {
-  display: none;
-}
-.ea-step_wrap .ea-step_main-wrap {
-  white-space: normal;
-  text-align: left;
-}
-.ea-step_wrap .ea-step_main-wrap .ea-step_title-wrap {
-  font-size: 16px;
-  line-height: 38px;
-}
-.ea-step_wrap .ea-step_main-wrap .ea-step_description-wrap {
-  margin-top: -5px;
-  font-size: 12px;
-  line-height: 20px;
-}
-.ea-step_wrap.is-process {
-  color: #303133;
-  border-color: #303133;
-}
-.ea-step_wrap.is-finish {
-  color: #67c23a;
-  border-color: #67c23a;
-}
-.ea-step_wrap.is-finish .ea-step_head-wrap .ea-step_bar {
-  background-color: #67c23a;
-}
-.ea-step_wrap.is-simple {
-  display: flex;
-  align-items: center;
-}
-.ea-step_wrap.is-simple .ea-step_head-wrap {
-  position: relative;
-}
-.ea-step_wrap.is-simple .ea-step_head-wrap .ea-step_bar {
-  position: relative;
-  width: auto;
-  height: auto;
-  transform: translateY(0%);
-  margin-left: 2px;
-  flex: 1;
-}
-.ea-step_wrap.is-simple .ea-step_main-wrap {
-  margin-left: 16px;
-  line-height: 24px;
-  height: 24px;
-}
-.ea-step_wrap.is-simple .ea-step_main-wrap .ea-step_title-wrap {
-  line-height: 24px;
-}

package/components/ea-step/index.js

@@ -1,230 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-import { timeout } from '../../utils/timeout.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaStep extends Base {
-  #wrap;
-
-  #headWrap;
-  #stepIcon;
-  #stepBar;
-
-  #titleWrap;
-  #descriptionWrap;
-  
-  #titleSlot;
-  #descriptionSlot;
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    shadowRoot.innerHTML = `
-      <div class="ea-step_wrap" part="container">
-        <div class="ea-step_head-wrap" part="head-wrap">
-          <div class="ea-step_bar" part="step-bar"></div>
-          <div class="ea-step_head-icon" part="head-icon"></div>
-        </div>
-        <div class="ea-step_main-wrap" part="main-wrap">
-          <div class="ea-step_title-wrap" part="title-wrap">
-            <slot name="title"></slot>
-          </div>
-          <div class="ea-step_description-wrap" part="description-wrap">
-            <slot name="description"></slot>
-          </div>
-        </div>
-      </div>
-    `;
-
-    this.#wrap = shadowRoot.querySelector('.ea-step_wrap');
-    this.#headWrap = shadowRoot.querySelector('.ea-step_head-wrap');
-    this.#stepIcon = shadowRoot.querySelector('.ea-step_head-icon');
-    this.#stepBar = shadowRoot.querySelector('.ea-step_bar');
-
-    this.#titleWrap = shadowRoot.querySelector('.ea-step_title-wrap');
-    this.#titleSlot = shadowRoot.querySelector('slot[name="title"]');
-    this.#descriptionWrap = shadowRoot.querySelector('.ea-step_description-wrap');
-    this.#descriptionSlot = shadowRoot.querySelector('slot[name="description"]');
-
-    this.build(shadowRoot, stylesheet);
-  }
-
-  // ------- title 步骤的标题(如:步骤一) -------
-  // #region
-  get title() {
-    return this.getAttribute('title');
-  }
-
-  set title(value) {
-    if (!value) return;
-
-    const slot = this.querySelector('[slot="title"]');
-
-    if (!slot) {
-      this.#titleWrap.innerText = value;
-    } else {
-      value = slot.innerHTML;
-      this.#titleSlot.innerHTML = value;
-    }
-
-    this.setAttribute('title', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- description 步骤的描述 -------
-  // #region
-  get description() {
-    return this.getAttribute('description');
-  }
-
-  set description(value) {
-    if (!value) return;
-
-    const slot = this.querySelector('[slot="description"]');
-
-    if (!slot) {
-      this.#descriptionWrap.innerText = value;
-    } else {
-      value = slot.innerHTML;
-      this.#descriptionSlot.innerHTML = value;
-    }
-
-    this.setAttribute('description', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- space 步骤之间的间距 -------
-  // #region
-  get space() {
-    return this.getAttribute('space') || '50%';
-  }
-
-  set space(value) {
-    this.setAttribute('space', value || '50%');
-
-    this.style.flexBasis = value || '50%';
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- icon 步骤的图标 -------
-  // #region
-  get icon() {
-    return this.getAttribute('icon');
-  }
-
-  set icon(value) {
-    if (!value) {
-      this.#stepIcon.innerHTML = this.index + 1;
-      this.#stepIcon.classList.add('is-text');
-      value = this.index + 1;
-    } else {
-      this.#stepIcon.innerHTML = `
-          <ea-icon icon="${value}" size="24"></ea-icon>
-      `;
-    }
-
-    this.setAttribute('icon', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- active 当前的步骤 -------
-  // #region
-  get active() {
-    return this.getAttrBoolean('active') || false;
-  }
-
-  set active(value) {
-    this.toggleAttr('active', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- is-last 是否最后一个步骤 -------
-  // #region
-  get isLast() {
-    return this.getAttrBoolean('is-last') || false;
-  }
-
-  set isLast(value) {
-    this.toggleAttr('is-last', value);
-
-    this.#headWrap.classList.toggle('is-last', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- status 步骤的状态 -------
-  // #region
-  get status() {
-    return this.getAttribute('status');
-  }
-
-  set status(value) {
-    this.setAttribute('status', value);
-
-    this.#wrap.classList.toggle('is-finish', value === 'finish');
-    this.#wrap.classList.toggle('is-process', value === 'process');
-    this.#wrap.classList.toggle('is-wait', value === 'wait');
-
-    if (value === 'finish') {
-      const isIcon = this.#stepIcon.querySelector('ea-icon');
-
-      if (!isIcon) this.#stepIcon.innerHTML = `
-          <ea-icon icon="icon-ok" color="#67c23a" style="font-size: 14px; line-height: 14px;"></ea-icon>
-      `;
-    } else {
-      this.#stepIcon.innerHTML = this.index + 1;
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- simple 简洁模式 -------
-  // #region
-  get simple() {
-    return this.getAttrBoolean('simple') || false;
-  }
-
-  set simple(value) {
-    this.toggleAttr('simple', value);
-
-    this.#wrap.classList.toggle('is-simple', value);
-
-    if (value && !this.isLast) {
-      this.#stepBar.innerHTML = `
-        <ea-icon icon="icon-angle-right" color="#c0c4cc" style="font-size: 24px; line-height: 24px;"></ea-icon>
-      `;
-
-      this.#stepBar.style.flex = "1";
-      this.#stepBar.style.textAlign = "center";
-
-      this.#descriptionWrap.remove();
-
-      this.#wrap.appendChild(this.#stepBar);
-    } else if (value && !this.isLast) {
-      this.#stepBar.innerHTML = "";
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  connectedCallback() {
-    this.title = this.title;
-    this.description = this.description;
-    this.simple = this.simple;;
-
-    timeout(() => {
-      this.icon = this.icon;
-    }, 20);
-  }
-}
-
-if (!customElements.get('ea-step')) {
-  customElements.define('ea-step', EaStep);
-}

package/components/ea-step/index.scss

@@ -1,110 +0,0 @@
-.ea-step_wrap {
-  color: #c0c4cc;
-
-  transition: color 0.3s;
-
-  .ea-step_head-wrap {
-    position: relative;
-
-    .ea-step_head-icon {
-      position: relative;
-
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-
-      width: 24px;
-      height: 24px;
-      background-color: #fff;
-
-      font-size: 14px;
-
-      z-index: 1;
-
-      &.is-text {
-        border-radius: 50%;
-        border: 2px solid;
-      }
-    }
-
-    .ea-step_bar {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      margin-left: 2px;
-
-      width: 100%;
-      height: 2px;
-
-      background-color: #c0c4cc;
-    }
-
-    &.is-last {
-      flex-basis: auto;
-
-      .ea-step_bar {
-        display: none;
-      }
-    }
-  }
-
-  .ea-step_main-wrap {
-    white-space: normal;
-    text-align: left;
-
-    .ea-step_title-wrap {
-      font-size: 16px;
-      line-height: 38px;
-    }
-
-    .ea-step_description-wrap {
-      margin-top: -5px;
-      font-size: 12px;
-      line-height: 20px;
-    }
-  }
-
-  &.is-process {
-    color: #303133;
-    border-color: #303133;
-  }
-
-  &.is-finish {
-    color: #67c23a;
-    border-color: #67c23a;
-
-    .ea-step_head-wrap {
-      .ea-step_bar {
-        background-color: #67c23a;
-      }
-    }
-  }
-
-  &.is-simple {
-    display: flex;
-    align-items: center;
-
-    .ea-step_head-wrap {
-      position: relative;
-
-      .ea-step_bar {
-        position: relative;
-        width: auto;
-        height: auto;
-        transform: translateY(0%);
-        margin-left: 2px;
-
-        flex: 1;
-      }
-    }
-
-    .ea-step_main-wrap {
-      margin-left: 16px;
-      line-height: 24px;
-      height: 24px;
-      .ea-step_title-wrap {
-        line-height: 24px;
-      }
-    }
-  }
-}