easy-component-ui 2.1.0 → 3.0.0

package/components/ea-page-header/index.css

@@ -1,33 +0,0 @@
-.ea-page-header_wrap {
-  display: flex;
-  align-items: center;
-  line-height: 24px;
-}
-.ea-page-header_wrap .ea-page-header_title-wrap,
-.ea-page-header_wrap .ea-page-header_divider,
-.ea-page-header_wrap .ea-page-header_content-wrap {
-  line-height: 24px;
-}
-.ea-page-header_wrap .ea-page-header_title-wrap {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  cursor: pointer;
-}
-.ea-page-header_wrap .ea-page-header_divider {
-  margin: 0 1rem;
-  margin-bottom: 1px;
-  font-size: 14px;
-  height: 14px;
-  overflow: hidden;
-  color: #dcdfe6;
-  line-height: 1;
-  vertical-align: middle;
-}
-.ea-page-header_wrap .ea-page-header_content-wrap {
-  font-size: 18px;
-  color: #303133;
-  line-height: 1;
-}

package/components/ea-page-header/index.js

@@ -1,91 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-import { createSlotElement, createElement } from '../../utils/createElement.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaPageHeader extends Base {
-    #wrap;
-
-    #titleWrap;
-    #contentWrap
-
-    #titleSlot;
-    #contentSlot;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class='ea-page-header_wrap' part='container'>
-                <div class='ea-page-header_title-wrap' part='title-wrap'>
-                    <ea-icon class='ea-page-header_back-icon' part='back-icon' icon="icon-angle-left"></ea-icon>
-                    <slot name="title"></slot>
-                </div>
-                <div class='ea-page-header_divider' part='divider'>|</div>
-                <div class='ea-page-header_content-wrap' part='content-wrap'>
-                    <slot name="content"></slot>
-                </div>
-            </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-page-header_wrap');
-        this.#titleWrap = shadowRoot.querySelector('.ea-page-header_title-wrap');
-        this.#titleSlot = shadowRoot.querySelector('slot[name="title"]');
-        this.#contentWrap = shadowRoot.querySelector('.ea-page-header_content-wrap');
-        this.#contentSlot = shadowRoot.querySelector('slot[name="content"]');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- title 返回区域的内容 -------
-    // #region
-    get title() {
-        return this.getAttribute('title') || '';
-    }
-
-    set title(value) {
-        if (value) {
-            this.setAttribute('title', value);
-            this.#titleSlot.innerText = value;
-        } else {
-            this.setAttribute('title', '返回');
-            this.#titleSlot.innerText = '返回';
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- content 页面标题 -------
-    // #region
-    get content() {
-        return this.getAttribute('content') || '';
-    }
-
-    set content(value) {
-        if (value) {
-            this.setAttribute('content', value);
-            this.#contentSlot.innerText = value;
-        } else {
-            this.setAttribute('content', '');
-            this.#contentSlot.innerText = '';
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.title = this.title;
-
-        this.content = this.content;
-
-        this.#titleWrap.addEventListener('click', () => {
-            this.dispatchEvent(new CustomEvent('back'));
-        });
-    }
-}
-
-if (!customElements.get('ea-page-header')) {
-    customElements.define('ea-page-header', EaPageHeader);
-}

package/components/ea-page-header/index.scss

@@ -1,44 +0,0 @@
-.ea-page-header_wrap {
-  display: flex;
-  align-items: center;
-
-  line-height: 24px;
-
-  .ea-page-header_title-wrap,
-  .ea-page-header_divider,
-  .ea-page-header_content-wrap {
-    line-height: 24px;
-  }
-
-  .ea-page-header_title-wrap {
-    display: flex;
-    align-items: center;
-
-    font-size: 14px;
-    font-weight: 500;
-
-    line-height: 1;
-
-    cursor: pointer;
-  }
-
-  .ea-page-header_divider {
-    margin: 0 1rem;
-    margin-bottom: 1px;
-    font-size: 14px;
-    height: 14px;
-    overflow: hidden;
-
-    color: #dcdfe6;
-
-    line-height: 1;
-    vertical-align: middle;
-  }
-
-  .ea-page-header_content-wrap {
-    font-size: 18px;
-    color: #303133;
-
-    line-height: 1;
-  }
-}

package/components/ea-page-header/src/style/stylesheet.js

@@ -1,35 +0,0 @@
-export const stylesheet = `
-.ea-page-header_wrap {
-  display: flex;
-  align-items: center;
-  line-height: 24px;
-}
-.ea-page-header_wrap .ea-page-header_title-wrap,
-.ea-page-header_wrap .ea-page-header_divider,
-.ea-page-header_wrap .ea-page-header_content-wrap {
-  line-height: 24px;
-}
-.ea-page-header_wrap .ea-page-header_title-wrap {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  cursor: pointer;
-}
-.ea-page-header_wrap .ea-page-header_divider {
-  margin: 0 1rem;
-  margin-bottom: 1px;
-  font-size: 14px;
-  height: 14px;
-  overflow: hidden;
-  color: #dcdfe6;
-  line-height: 1;
-  vertical-align: middle;
-}
-.ea-page-header_wrap .ea-page-header_content-wrap {
-  font-size: 18px;
-  color: #303133;
-  line-height: 1;
-}
-`;

package/components/ea-pagination/index.css

@@ -1,69 +0,0 @@
-.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-pagination/index.js

@@ -1,305 +0,0 @@
-import Base from '../Base.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-import { getMoreItem } from './src/components/getMoreItem.js';
-import { getPageItem } from './src/components/getPageItem.js';
-import { getShowTotalItem } from './src/components/getShowTotalItem.js';
-
-export class EaPagination extends Base {
-    #container;
-
-    // 页码元素的容器
-    #paginationWrap;
-
-    // 箭头
-    #prevArrow;
-    #nextArrow;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <div class="ea-pagination_wrap" part="container">
-                <span class="ea-pagination_arrow prev ${this.background ? 'background' : ''}" part="arrow">&lt;</span>
-                <div class="ea-pagination_item_wrap" part="item-wrap"></div>
-                <span class="ea-pagination_arrow next ${this.background ? 'background' : ''}" part="arrow">&gt;</span>
-            </div>
-        `;
-
-        this.#container = shadowRoot.querySelector('.ea-pagination_wrap');
-        this.#prevArrow = shadowRoot.querySelector('.prev');
-        this.#paginationWrap = shadowRoot.querySelector('.ea-pagination_item_wrap');
-        this.#nextArrow = shadowRoot.querySelector('.next');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- layout 布局(前一页, 页码, 后一页) -------
-    // #region
-    get layout() {
-        const arr = this.getAttribute('layout').split(',').map(item => item.trim());
-
-        return arr || ['prev', 'pager', 'next'];
-    }
-
-    set layout(value) {
-        this.setAttribute('layout', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- sizes 分页中每页多少记录 -------
-    // #region
-    get sizes() {
-        return this.getAttrNumber('sizes') || 10;
-    }
-
-    set sizes(value) {
-        this.setAttribute('sizes', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- current-page 当前页码 -------
-    // #region
-    get currentPage() {
-        return this.getAttrNumber('current-page') || 1;
-    }
-
-    set currentPage(value) {
-        this.setAttribute('current-page', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- page-count 总显示的页码数量 -------
-    // #region
-    get pageCount() {
-        return this.getAttrNumber('page-count') || 6;
-    }
-
-    set pageCount(value) {
-        this.setAttribute('page-count', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- total 总记录数 -------
-    // #region
-    get total() {
-        return this.getAttrNumber('total');
-    }
-
-    set total(value) {
-        this.setAttribute('total', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- paginationCount 分页总数 -------
-    // #region
-    get paginationCount() {
-        return Math.ceil(this.total / this.sizes);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- background 背景颜色 -------
-    // #region
-    get background() {
-        return this.getAttrBoolean('background');
-    }
-
-    set background(value) {
-        if (!value) return;
-
-        this.setAttribute('background', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    #handleDispatchEvent(event, options) {
-        this.dispatchEvent(new CustomEvent(event, options));
-    }
-
-    // 初始化箭头元素
-    #initArrowItem() {
-        this.#handleArrowStatus();
-
-        if (this.layout.includes('prev')) {
-            this.#prevArrow.addEventListener('click', () => {
-                if (this.currentPage <= 1) return;
-
-                this.currentPage--;
-                this.#handlePaginationChange();
-
-                this.#handleDispatchEvent("change", { detail: { currentPage: this.currentPage } });
-            })
-        } else {
-            this.#prevArrow.style.display = 'none';
-        }
-
-        if (this.layout.includes('next')) {
-            this.#nextArrow.addEventListener('click', () => {
-                if (this.currentPage >= this.paginationCount) return;
-
-                this.currentPage++;
-                this.#handlePaginationChange();
-
-                this.#handleDispatchEvent("change", { detail: { currentPage: this.currentPage } });
-            })
-        } else {
-            this.#nextArrow.style.display = 'none';
-        }
-    }
-
-    // 处理箭头状态
-    #handleArrowStatus() {
-        if (!this.layout.includes('prev') && !this.layout.includes('next')) return;
-
-        if (this.currentPage === 1 && this.layout.includes('prev')) this.#prevArrow.classList.add('disabled');
-        else if (this.currentPage >= this.paginationCount && this.layout.includes('next')) this.#nextArrow.classList.add('disabled');
-        else {
-            this.#prevArrow.classList.remove('disabled');
-            this.#nextArrow.classList.remove('disabled');
-        }
-    }
-
-    // 处理分页点击事件
-    #handlePaginationClick(pageItem, index) {
-        pageItem.addEventListener('click', (e) => {
-            this.currentPage = index;
-            this.#handlePaginationChange();
-
-            this.#handleDispatchEvent('change', {
-                detail: {
-                    currentPage: this.currentPage
-                }
-            });
-        })
-    }
-
-    // 处理更多按钮点击事件
-    #handleMoreItemClick(moreItem, arrow) {
-        moreItem.addEventListener('click', (e) => {
-
-            // 跳转到指定页码
-            this.currentPage += arrow === "prev" ? -5 : 5;
-
-            /**
-             * 边界处理: 
-             * 页码数量小于1, 跳转到第一页
-             * 页码数量大于总页数, 跳转到最后一页
-             */
-            if (this.currentPage < 1) this.currentPage = 1;
-            else if (this.currentPage > this.paginationCount) this.currentPage = this.paginationCount;
-
-            this.#handlePaginationChange();
-
-            this.#handleDispatchEvent('change', {
-                detail: {
-                    currentPage: this.currentPage
-                }
-            });
-        })
-    }
-
-    // 处理分页的页码
-    #handlePaginationItemChange() {
-        if (!this.layout.includes('pager')) return;
-
-        this.#paginationWrap.innerHTML = '';
-
-        const interval = Math.floor(this.pageCount / 2);
-        let start = this.currentPage - interval;
-        let end = this.currentPage + interval;
-
-        // 边界处理
-        if (start <= 1) {
-            start = 1;
-            end = this.pageCount < this.paginationCount ? this.pageCount : this.paginationCount;
-        } else if (end >= this.paginationCount) {
-            start = this.paginationCount - this.pageCount + 1;
-            end = this.paginationCount;
-        } else {
-            end--;
-        }
-
-        // 添加页码
-        for (let i = start; i <= end; i++) {
-            const pageItem = getPageItem(i, this.background);
-            this.#paginationWrap.appendChild(pageItem);
-
-            // 设置当前页码选中后的样式
-            if (i === this.currentPage) {
-                pageItem.classList.add('ea-pagination_item--active');
-                if (this.background) pageItem.classList.add('active');
-            }
-
-            // 添加点击事件
-            this.#handlePaginationClick(pageItem, i);
-        }
-
-        // 添加 更多(左) + 第一页
-        if (this.total > this.pageCount && this.currentPage >= this.pageCount && this.paginationCount !== this.pageCount) {
-            const more = getMoreItem('prev', this.background);
-            this.#handleMoreItemClick(more, 'prev');
-
-            const firstPage = getPageItem(1, this.background);
-            this.#handlePaginationClick(firstPage, 1);
-
-            this.#paginationWrap.insertBefore(more, this.#paginationWrap.firstChild);
-            this.#paginationWrap.insertBefore(firstPage, this.#paginationWrap.firstChild);
-        }
-
-        // 添加 更多(右) + 最后一页
-        if (this.total > this.pageCount && this.currentPage < this.paginationCount - interval && this.paginationCount !== this.pageCount) {
-            const more = getMoreItem('next', this.background);
-            this.#handleMoreItemClick(more, 'next');
-
-            const lastPage = getPageItem(this.paginationCount, this.background);
-            this.#handlePaginationClick(lastPage, this.paginationCount);
-
-            this.#paginationWrap.appendChild(more);
-            this.#paginationWrap.appendChild(lastPage);
-        }
-    }
-
-    // 处理分页变化
-    #handlePaginationChange() {
-        this.#handleArrowStatus();
-        this.#handlePaginationItemChange();
-    }
-
-    // 处理显示总数
-    #initTotalShow() {
-        if (!this.layout.includes('total')) return;
-
-        const totalItem = getShowTotalItem();
-        totalItem.innerHTML = `共 ${this.total} 条`;
-
-        this.#container.insertBefore(totalItem, this.#container.firstChild);
-    }
-
-    connectedCallback() {
-        // 设置sizes
-        this.sizes = this.sizes;
-
-        // 设置current-page
-        this.currentPage = this.currentPage;
-
-        // 设置total
-        this.total = this.total;
-
-        this.#initArrowItem();
-        this.#handlePaginationItemChange();
-        this.#initTotalShow();
-    }
-}
-
-if (!customElements.get('ea-pagination')) {
-    customElements.define('ea-pagination', EaPagination);
-}

package/components/ea-pagination/index.scss

@@ -1,89 +0,0 @@
-@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,20 +0,0 @@
-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,11 +0,0 @@
-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;
-};