easy-component-ui 2.1.1 → 3.0.1

package/components/ea-collapse/index.js

@@ -1,109 +0,0 @@
-// @ts-nocheck
-import { timeout } from '../../utils/timeout.js';
-import Base from '../Base.js';
-import "../ea-collapse-item/index.js";
-
-export class EaCollapse extends Base {
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <div class="ea-collapse_wrap" part="container">
-                <slot></slot>
-            </div>
-        `;
-    }
-
-    // ------- active 当前展开项 -------
-    // #region
-    get active() {
-        return this.getAttribute('active') || 1;
-    }
-
-    set active(name) {
-        this.setAttribute('active', name);
-
-        timeout(() => {
-            this.#handleCollapse(this.accordion, name);
-        }, 20)
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- accordion 是否为手风琴模式 -------
-    // #region
-    get accordion() {
-        return this.getAttrBoolean('accordion') || false;
-    }
-
-    set accordion(flag) {
-        this.setAttribute('accordion', flag);
-
-        timeout(() => {
-            this.#handleCollapse(flag, this.active);
-        }, 20);
-    }
-    // #endregion
-    // ------- end -------
-
-    /**
-     * 处理折叠面板的展开/折叠状态。
-     * 根据传入的标志位flag和激活项名称activeItemName，来决定哪些折叠项应该展开。
-     * 当flag为true时，只允许一个折叠项展开，即单选模式；
-     * 当flag为false时，可以允许多个折叠项展开，即多选模式。
-     * 
-     * @param {boolean} flag - 控制单选或多选模式的标志。true表示单选模式，false表示多选模式。
-     * @param {string} activeItemName - 激活项的名称，用于决定哪些折叠项应该展开。
-     */
-    #handleCollapse(flag, activeItemName) {
-        // 将所有ea-collapse-item元素转换为数组
-        const items = Array.from(this.querySelectorAll('ea-collapse-item'));
-        // 初始化用于记录展开状态的变量
-        let collapseItem = flag ? "" : [];
-
-        // 遍历每个折叠项，绑定状态改变事件的监听器
-        items.forEach(item => {
-            item.addEventListener('change', (e) => {
-                // 在单选模式下，关闭所有其他折叠项
-                if (flag) items.forEach(item => {
-                    item.isOpen = false;
-                });
-
-                // 更新当前折叠项的展开状态
-                item.isOpen = !e.detail.isOpen;
-            });
-        });
-
-        // 根据flag的值来处理折叠项的展开状态
-        if (flag) {
-            // 在单选模式下，根据activeItemName确定哪个折叠项应该展开
-            collapseItem = activeItemName.toString().trim()[0];
-
-            items.forEach(item => {
-                item.isOpen = item.name === collapseItem;
-            });
-        } else {
-            // 在多选模式下，将activeItemName解析为数组，并处理每个折叠项的展开状态
-            collapseItem = activeItemName.split(',').map(item => {
-                return item.trim();
-            }).concat();
-
-            items.forEach(item => {
-                // 根据collapseItem数组中的值，决定当前折叠项是否展开
-                item.isOpen = collapseItem.includes(item.name);
-            });
-        }
-    }
-
-    connectedCallback() {
-        this.accordion = this.accordion;
-
-        this.active = this.active;
-    }
-}
-
-if (!customElements.get('ea-collapse')) {
-    customElements.define('ea-collapse', EaCollapse);
-}

package/components/ea-collapse/index.scss

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

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

@@ -1,31 +0,0 @@
-.ea-collapse-item_wrap .ea-collapse-item_title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #ebeef5;
-  height: 48px;
-  line-height: 48px;
-  font-size: 13px;
-  font-weight: 700;
-  color: #303133;
-  cursor: pointer;
-}
-.ea-collapse-item_wrap .ea-collapse-item_title .ea-collapse-item_title-icon {
-  width: 0.35rem;
-  height: 0.35rem;
-  margin-right: 1rem;
-  border: 3px solid #9ca0a5;
-  border-left-color: transparent;
-  border-top-color: transparent;
-  rotate: -45deg;
-  transition: rotate 0.3s;
-}
-.ea-collapse-item_wrap .ea-collapse-item_content {
-  will-change: height;
-  overflow: hidden;
-  height: 0;
-  padding-bottom: 0;
-  transition: height 0.3s, padding-bottom 0.3s;
-  font-size: 13px;
-  color: #303133;
-}

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

@@ -1,111 +0,0 @@
-// @ts-nocheck
-import Base from '../Base.js';
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-export class EaCollapseItem extends Base {
-    #wrap;
-
-    #titleWrap;
-    #titleContent;
-    #titleIcon;
-
-    #contentWrap;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-collapse-item_wrap" part="container">
-                <div class="ea-collapse-item_title" part="title-wrap">
-                    <span class="ea-collapse-item_title-content" part="title-content"></span>
-                    <span class="ea-collapse-item_title-icon" part="title-icon"></span>
-                </div>
-                <div class="ea-collapse-item_content" part="content-wrap">
-                    <slot></slot>
-                </div>
-            </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-collapse-item_wrap');
-        this.#titleWrap = shadowRoot.querySelector('.ea-collapse-item_title');
-        this.#titleContent = shadowRoot.querySelector('.ea-collapse-item_title-content');
-        this.#titleIcon = shadowRoot.querySelector('.ea-collapse-item_title-icon');
-        this.#contentWrap = shadowRoot.querySelector('.ea-collapse-item_content');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- title 标题 -------
-    // #region
-    get title() {
-        return this.getAttribute('title');
-    }
-
-    set title(title) {
-        this.setAttribute('title', title);
-
-        this.#titleContent.innerHTML = title;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- name 唯一标识符 -------
-    // #region
-    get name() {
-        return this.getAttribute('name');
-    }
-
-    set name(name) {
-        this.setAttribute('name', name);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- isOpen 是否展开 -------
-    // #region
-    get isOpen() {
-        return this.getAttrBoolean('is-open') || false;
-    }
-
-    set isOpen(flag) {
-        if (flag === this.isOpen) return;
-
-        this.toggleAttr('is-open', flag);
-
-        const height = this.#contentWrap.scrollHeight;
-
-        if (this.isOpen) {
-            this.#contentWrap.style.height = `${height}px`;
-            this.#contentWrap.style.paddingBottom = '20px';
-            this.#titleIcon.style.rotate = '45deg';
-        } else {
-            this.#contentWrap.style.height = '0px';
-            this.#contentWrap.style.paddingBottom = '0px';
-            this.#titleIcon.style.rotate = '-45deg';
-        }
-    }
-    // #endregion
-    // ------- end -------
-
-    connectedCallback() {
-        this.title = this.title;
-        this.name = this.name;
-
-        this.#titleWrap.addEventListener('click', (e) => {
-            this.dispatchEvent(new CustomEvent('change', {
-                detail: {
-                    name: this.name,
-                    isOpen: this.isOpen,
-                },
-                bubbles: true,
-                composed: true,
-            }));
-        });
-    }
-}
-
-if (!customElements.get('ea-collapse-item')) {
-    customElements.define('ea-collapse-item', EaCollapseItem);
-}

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

@@ -1,46 +0,0 @@
-@import "../ea-ui-base-style.scss";
-
-.ea-collapse-item_wrap {
-  .ea-collapse-item_title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    border-bottom: 1px solid #ebeef5;
-
-    height: 48px;
-    line-height: 48px;
-
-    font-size: 13px;
-    font-weight: 700;
-    color: #303133;
-
-    cursor: pointer;
-
-    .ea-collapse-item_title-icon {
-      width: 0.35rem;
-      height: 0.35rem;
-
-      margin-right: 1rem;
-
-      border: 3px solid #9ca0a5;
-      border-left-color: transparent;
-      border-top-color: transparent;
-
-      rotate: -45deg;
-      transition: rotate 0.3s;
-    }
-  }
-
-  .ea-collapse-item_content {
-    will-change: height;
-    overflow: hidden;
-
-    height: 0;
-    padding-bottom: 0;
-
-    transition: height 0.3s, padding-bottom 0.3s;
-    font-size: 13px;
-    color: #303133;
-  }
-}

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

@@ -1,33 +0,0 @@
-export const stylesheet = `
-.ea-collapse-item_wrap .ea-collapse-item_title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #ebeef5;
-  height: 48px;
-  line-height: 48px;
-  font-size: 13px;
-  font-weight: 700;
-  color: #303133;
-  cursor: pointer;
-}
-.ea-collapse-item_wrap .ea-collapse-item_title .ea-collapse-item_title-icon {
-  width: 0.35rem;
-  height: 0.35rem;
-  margin-right: 1rem;
-  border: 3px solid #9ca0a5;
-  border-left-color: transparent;
-  border-top-color: transparent;
-  rotate: -45deg;
-  transition: rotate 0.3s;
-}
-.ea-collapse-item_wrap .ea-collapse-item_content {
-  will-change: height;
-  overflow: hidden;
-  height: 0;
-  padding-bottom: 0;
-  transition: height 0.3s, padding-bottom 0.3s;
-  font-size: 13px;
-  color: #303133;
-}
-`;

package/components/ea-container/index.css

@@ -1,14 +0,0 @@
-.ea-container_wrap {
-  display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-}
-.ea-container_wrap.is-vertical {
-  flex-direction: column;
-}
-.ea-container_wrap ::slotted(ea-main) {
-  flex: 1;
-  overflow: auto;
-}

package/components/ea-container/index.js

@@ -1,85 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-const stylesheet = `
-.ea-container_wrap {
-  display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-}
-.ea-container_wrap.is-vertical {
-  flex-direction: column;
-}
-.ea-container_wrap ::slotted(ea-main) {
-  flex: 1;
-  overflow: auto;
-}
-`;
-
-export class EaContainer extends Base {
-    #wrap;
-
-    get CONTAINER_TYPE() {
-        return ['ea-header', 'ea-main', 'ea-footer', 'ea-container', 'ea-aside'];
-    }
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class="ea-container_wrap" part="container">
-                <slot></slot>
-            </div>
-        `;
-
-        this.#wrap = shadowRoot.querySelector('.ea-container_wrap');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- direction 排列方向 -------
-    // #region
-    get direction() {
-        return ['horizontal', 'vertical'].includes(this.getAttribute('direction')) || 'horizontal';
-    }
-
-    set direction(value) {
-        this.setAttribute('direction', value);
-        this.#wrap.classList.toggle('is-vertical', value === 'horizontal');
-    }
-    // #endregion
-    // ------- end -------
-
-    #handleContainerChildren(containers) {
-        const eachContainerTagName = containers.map(item => item.tagName.toLowerCase());
-
-        containers.forEach(item => {
-            if (!this.CONTAINER_TYPE.includes(item.tagName.toLowerCase())) {
-                item.remove();
-            }
-
-            if (item.tagName.toLowerCase() === 'ea-container') {
-                item.style.flex = '1';
-            }
-        });
-
-        if (eachContainerTagName.includes('ea-header') || eachContainerTagName.includes('ea-footer')) {
-            this.direction = 'horizontal';
-        } else {
-            this.direction = this.direction;
-        }
-    }
-
-    connectedCallback() {
-        const containers = Array.from(this.children);
-
-        this.#handleContainerChildren(containers);
-    }
-}
-
-if (!customElements.get('ea-container')) {
-    customElements.define('ea-container', EaContainer);
-}

package/components/ea-container/index.scss

@@ -1,18 +0,0 @@
-.ea-container_wrap {
-  display: flex;
-  flex-direction: row;
-
-  box-sizing: border-box;
-
-  width: 100%;
-  height: 100%;
-
-  &.is-vertical {
-    flex-direction: column;
-  }
-
-  ::slotted(ea-main) {
-    flex: 1;
-    overflow: auto;
-  }
-}

package/components/ea-date-picker/index.css

@@ -1,17 +0,0 @@
-.ea-date-picker_wrap .ea-date-picker_input-wrap {
-  position: relative;
-}
-.ea-date-picker_wrap .ea-date-picker_dropdown-wrap {
-  position: absolute;
-  background-color: #fff;
-  transform-origin: top center;
-  transform: scaleY(0);
-  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
-  z-index: 2;
-}
-.ea-date-picker_wrap.is-open .ea-date-picker_dropdown-wrap {
-  transform: scaleY(1);
-}
-.ea-date-picker_wrap.with-transition .ea-date-picker_dropdown-wrap {
-  transition: transform 0.3s;
-}

package/components/ea-date-picker/index.js

@@ -1,191 +0,0 @@
-import Base from '../Base.js';
-import '../ea-icon/index.js'
-
-import "../ea-calendar/index.js"
-import "../ea-input/index.js"
-
-import { stylesheet } from './src/style/stylesheet.js';
-
-import { timeout } from '../../utils/timeout.js';
-
-export class EaDatePicker extends Base {
-    #container;
-
-    #calendarWrap;
-    #calendarElement;
-
-    #calendarInput;
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-
-        shadowRoot.innerHTML = `
-            <div class='ea-date-picker_wrap' part='container'>
-                <div class='ea-date-picker_input-wrap' part='input-wrap'>
-                    <ea-input class="ea-date-picker_input" part='input' prefix-icon="icon-calendar-times-o" readonly></ea-input>
-                </div>
-                <div class='ea-date-picker_dropdown-wrap' part='dropdown-wrap'>
-                    <ea-calendar class="ea-date-picker_calendar" size="mini" part='calendar'></ea-calendar>
-                </div>
-            </div>
-        `;
-
-        this.#container = shadowRoot.querySelector('.ea-date-picker_wrap');
-
-        this.#calendarWrap = shadowRoot.querySelector('.ea-date-picker_dropdown-wrap');
-        this.#calendarElement = shadowRoot.querySelector('.ea-date-picker_calendar');
-
-        this.#calendarInput = shadowRoot.querySelector('.ea-date-picker_input');
-
-        this.build(shadowRoot, stylesheet);
-    }
-
-    // ------- name 名称 -------
-    // #region
-    get name() {
-        return this.getAttribute('name') || 'datePicker';
-    }
-
-    set name(val) {
-        this.setAttribute('name', val);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- width 宽度 -------
-    // #region
-    get width() {
-        return this.getAttribute('width') || '200px';
-    }
-
-    set width(val) {
-        this.setAttribute('width', val);
-
-        this.#container.style.width = val;
-        this.#calendarWrap.style.width = val;
-        this.style.display = 'inline-block';
-        this.style.width = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- value 日期值 -------
-    // #region
-    get value() {
-        return this.getAttribute('value') || '';
-    }
-
-    set value(val) {
-        if (isNaN(new Date(val)) && val !== '') {
-            const date = new Date(Date.now());
-            val = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
-        }
-
-        this.setAttribute('value', val);
-        this.#calendarInput.value = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- placeholder 占位符 -------
-    // #region
-    get placeholder() {
-        return this.getAttribute('placeholder') || '';
-    }
-
-    set placeholder(val) {
-        this.setAttribute('placeholder', val);
-
-        this.#calendarInput.placeholder = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled') || false;
-    }
-
-    set disabled(val) {
-        this.toggleAttr('disabled', val);
-
-        this.#calendarInput.disabled = val;
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- align 对齐方式 -------
-    // #region
-    get align() {
-        return this.getAttribute('align') || 'left';
-    }
-
-    set align(value) {
-        this.setAttribute('align', value);
-
-        this.#calendarInput.shadowRoot.querySelector('input').style.textAlign = value;
-    }
-    // #endregion
-    // ------- end -------
-
-    #initSelectEvent() {
-        this.#calendarElement.addEventListener('select', (e) => {
-            const { year, month, date, day } = e.detail;
-            this.value = `${year}-${month}-${date}`;
-            this.#calendarInput.value = `${year}-${month}-${date}`;
-
-            this.dispatchEvent(new CustomEvent('change', {
-                detail: {
-                    fulllDate: `${year}-${month}-${date}`,
-                    year,
-                    month,
-                    date,
-                    week: day,
-                },
-            }));
-        });
-    }
-
-    #initDropdownOpen() {
-        this.#calendarInput.addEventListener('focus', () => {
-            this.#container.classList.add('is-open');
-        });
-
-        window.addEventListener('click', (e) => {
-            if (!this.contains(e.target)) {
-                this.#container.classList.remove('is-open');
-            } else {
-                this.#calendarInput.shadowRoot.querySelector('.ea-input_inner').focus();
-            }
-        });
-    }
-
-    connectedCallback() {
-        this.setAttribute('data-ea-component', true);
-
-        this.name = this.name;
-
-        this.width = this.width;
-
-        this.value = this.value;
-
-        this.placeholder = this.placeholder;
-
-        this.disabled = this.disabled;
-
-        this.align = this.align;
-
-        this.#initSelectEvent();
-        this.#initDropdownOpen();
-
-        timeout(() => {
-            this.#container.classList.add('with-transition');
-        }, 300);
-    }
-}
-
-if (!customElements.get('ea-date-picker')) {
-    customElements.define('ea-date-picker', EaDatePicker);
-}

package/components/ea-date-picker/index.scss

@@ -1,29 +0,0 @@
-.ea-date-picker_wrap {
-  .ea-date-picker_input-wrap {
-    position: relative;
-
-    .ea-date-picker_input {
-    }
-  }
-  .ea-date-picker_dropdown-wrap {
-    position: absolute;
-    background-color: #fff;
-    transform-origin: top center;
-    transform: scaleY(0);
-
-    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
-    z-index: 2;
-  }
-
-  &.is-open {
-    .ea-date-picker_dropdown-wrap {
-      transform: scaleY(1);
-    }
-  }
-
-  &.with-transition {
-    .ea-date-picker_dropdown-wrap {
-      transition: transform 0.3s;
-    }
-  }
-}