easy-component-ui 0.0.1 → 1.0.3

package/components/ea-checkbox/index.js

@@ -0,0 +1,314 @@
+// @ts-nocheck
+import Base from '../Base.js'
+
+const stylesheet = `:host {
+  --margin-right: 1rem;
+}
+
+.ea-checkbox_wrap {
+  display: flex;
+  align-items: center;
+  margin-right: var(--margin-right);
+}
+.ea-checkbox_wrap .__ea-checkbox-input_wrap {
+  margin-right: 0.5rem;
+}
+.ea-checkbox_wrap .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  line-height: 0.8125;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+.ea-checkbox_wrap .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::after {
+  content: "";
+  position: absolute;
+  left: 52.5%;
+  top: 45%;
+  transform: translate(-50%, -50%) rotate(-135deg);
+  display: block;
+  width: 3px;
+  height: 7px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.ea-checkbox_wrap .__ea-checkbox-input_wrap .__ea-checkbox-input_input {
+  display: none;
+}
+.ea-checkbox_wrap .__ea-checkbox-label_desc {
+  transition: color 0.2s;
+}
+.ea-checkbox_wrap.checked .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
+  border-color: #409eff;
+  background-color: #409eff;
+}
+.ea-checkbox_wrap.checked .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::after {
+  opacity: 1;
+  border-left: 2px solid white;
+  border-top: 2px solid white;
+}
+.ea-checkbox_wrap.checked .__ea-checkbox-label_desc {
+  color: #409eff;
+}
+.ea-checkbox_wrap.disabled .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
+  border-color: #eeeeee;
+  background-color: #eeeeee;
+}
+.ea-checkbox_wrap.disabled .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::before {
+  background-color: transparent;
+}
+.ea-checkbox_wrap.disabled .__ea-checkbox-label_desc {
+  color: #c0c4cc;
+}
+.ea-checkbox_wrap.disabled[checked=true] .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::before {
+  background-color: #c0c4cc;
+}
+.ea-checkbox_wrap.indeterminate .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
+  border-color: #409eff;
+  background-color: #409eff;
+}
+.ea-checkbox_wrap.indeterminate .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::after {
+  opacity: 1;
+  left: 50%;
+  top: 50%;
+  width: 80%;
+  height: 3px;
+  background-color: white;
+  transform: translate(-50%, -50%) rotate(0deg);
+}
+.ea-checkbox_wrap.indeterminate .__ea-checkbox-label_desc {
+  color: #409eff;
+}
+.ea-checkbox_wrap.indeterminate[checked=true] .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
+  border-color: #409eff;
+  background-color: #409eff;
+}
+.ea-checkbox_wrap.indeterminate[checked=true] .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::after {
+  width: 3px;
+  height: 7px;
+  left: 52.5%;
+  top: 45%;
+  transform: translate(-50%, -50%) rotate(-135deg);
+  opacity: 1;
+  border-left: 2px solid white;
+  border-top: 2px solid white;
+  background-color: transparent;
+}
+.ea-checkbox_wrap.indeterminate[checked=true] .__ea-checkbox-label_desc {
+  color: #409eff;
+}`;
+
+const inputDom = () => {
+  const wrap = document.createElement('span');
+  wrap.className = "__ea-checkbox-input_wrap";
+
+  const checkbox = document.createElement('span');
+  checkbox.className = "__ea-checkbox-input_inner";
+  wrap.appendChild(checkbox);
+
+  const input = document.createElement('input');
+  input.type = 'checkbox';
+  input.className = "__ea-checkbox-input_input";
+
+  wrap.appendChild(input);
+
+  return { wrap, input };
+}
+
+const labelDom = () => {
+  const labelDesc = document.createElement('span');
+  labelDesc.className = "__ea-checkbox-label_desc";
+  const slot = document.createElement('slot');
+  labelDesc.appendChild(slot);
+
+  return labelDesc;
+}
+
+export class EaCheckbox extends Base {
+  #checkbox;
+  #label;
+
+  static get observedAttributes() {
+    return ['checked', 'disabled'];
+  }
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const that = this;
+    let dom = document.createElement('label');
+    dom.className = "ea-checkbox_wrap";
+
+    // input + checkbox
+    const input = inputDom();
+    dom.appendChild(input.wrap);
+
+    // label 标签文字
+    const label = labelDom();
+    dom.appendChild(label);
+
+    this.#label = dom;
+    this.#checkbox = input.input;
+
+    this.build(shadowRoot, stylesheet);
+    shadowRoot.appendChild(dom);
+  }
+
+  // ------- checked 选中 -------
+  // #region
+  get checked() {
+    return this.getAttrBoolean('checked');
+  }
+
+  set checked(val) {
+    this.#checkbox.checked = val;
+
+    if (val) {
+      this.setAttribute('checked', true);
+      this.#label.setAttribute('checked', true);
+      this.#label.classList.add('checked');
+    } else {
+      this.removeAttribute('checked');
+      this.#label.removeAttribute('checked');
+      this.#label.classList.remove('checked');
+      this.#label.classList.remove('indeterminate');
+    }
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- name 单选框的唯一键 -------
+  // #region
+  get name() {
+    return this.getAttribute('name');
+  }
+
+  set name(val) {
+    this.#checkbox.setAttribute('name', val);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- value 单选框的值 -------
+  // #region
+  get value() {
+    return this.getAttribute('value');
+  }
+
+  set value(val) {
+    this.#label.setAttribute('for', val);
+    this.#checkbox.setAttribute('id', val);
+    this.#checkbox.setAttribute('value', val);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- disabled 禁用状态 -------
+  // #region
+  get disabled() {
+    return this.getAttrBoolean('disabled');
+  }
+
+  set disabled(val) {
+    this.#checkbox.disabled = val;
+    this.#label.toggleAttribute('disabled', val);
+    this.#label.classList.toggle('disabled', val);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- border 是否带有边框 -------
+  // #region
+  get border() {
+    return this.getAttrBoolean('border');
+  }
+
+  set border(val) {
+    this.#label.classList.toggle('border', val);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- indeterminate 状态 -------
+  // #region
+  get indeterminate() {
+    return this.getAttrBoolean('indeterminate');
+  }
+
+  set indeterminate(val) {
+    if (val) {
+      this.checked = false;
+      this.#label.classList.remove('checked');
+
+      this.setAttribute('indeterminate', true);
+      this.#label.classList.add('indeterminate');
+      console.log(val);
+    } else {
+      this.removeAttribute('indeterminate');
+      this.#label.classList.remove('indeterminate');
+    }
+  }
+  // #endregion
+  // ------- end -------
+
+  init() {
+    const that = this;
+
+    // checkbox 的 checked 属性
+    this.checked = this.checked;
+
+    // label 的 for 属性
+    this.name = this.name;
+
+    // checkbox 的 value 属性
+    this.value = this.value;
+
+    // checkbox 的 disabled 属性
+    this.disabled = this.disabled;
+
+    // border 属性
+    this.border = this.border;
+
+    // indeterminate 属性
+    this.indeterminate = this.indeterminate;
+
+    // 监听 change 事件, 修改 checked 属性
+    this.#checkbox.addEventListener('change', function (e) {
+      e.preventDefault();
+      that.checked = e.target.checked;
+      if (e.target.checked) {
+        // document.querySelectorAll(`ea-checkbox[name="${that.name}"]`).forEach(btn => {
+        //     const btnInput = btn.shadowRoot.querySelector('input');
+
+        //     if (btnInput !== this) {
+        //         btn.checked = false;
+        //     } else {
+        //         btn.checked = true;
+        //     }
+        // });
+      }
+    })
+  }
+
+  connectedCallback() {
+    this.init();
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    // switch (name) {
+    //     case 'disabled':
+    //         this.#label.setAttribute('checked', true);
+    //         this.#label.classList.add('checked');
+    //         break;
+    // }
+  }
+}
+
+if (!window.customElements.get("ea-checkbox")) {
+  window.customElements.define("ea-checkbox", EaCheckbox);
+}

package/components/ea-checkbox-group/index.js

@@ -0,0 +1,107 @@
+// @ts-nocheck
+import Base from "../Base.js";
+
+const stylesheet = `
+.ea-checkbox-group {
+  display: flex;
+}
+.ea-checkbox-group ::slotted(ea-checkbox) {
+  margin-right: 1.5rem;
+}`;
+
+export class EaCheckboxGroup extends Base {
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        const dom = document.createElement('div');
+        shadowRoot.appendChild(dom);
+        const slot = document.createElement('slot');
+        dom.className = "ea-checkbox-group";
+        dom.appendChild(slot);
+
+
+        this.dom = dom;
+
+        this.build(shadowRoot, stylesheet);
+
+        shadowRoot.appendChild(dom);
+    }
+
+    // ------- name 唯一键值 -------
+    // #region
+    get name() {
+        return this.getAttribute('name');
+    }
+
+    set name(val) {
+        this.querySelectorAll('ea-checkbox').forEach(checkbox => {
+            checkbox.setAttribute('name', val);
+            checkbox.name = val;
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- value 指定选中值 -------
+    // #region
+    get value() {
+        if (!this.getAttribute('value')) return;
+
+        return this.getAttribute('value');
+    }
+
+    set value(val) {
+        if (!val) return;
+
+        try {
+            const valArr = val.split(',').map(item => item.trimStart());
+
+            valArr.map(item => {
+                const checkbox = document.querySelector(`ea-checkbox[name="${this.name}"][value="${item}"]`);
+                checkbox.setAttribute('checked', 'true');
+                checkbox.checked = 'true';
+            })
+        } catch (error) {
+
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled');
+    }
+
+    set disabled(val) {
+        const checkboxs = document.querySelectorAll(`ea-checkbox[name="${this.name}"]`);
+
+        checkboxs.forEach(checkbox => {
+            checkbox.disabled = val;
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    init() {
+        // name 唯一键值
+        this.name = this.name;
+
+        // value 指定选中值
+        this.value = this.value;
+
+        // disabled 禁用
+        this.disabled = this.disabled;
+    }
+
+    connectedCallback() {
+        this.init();
+    }
+}
+
+if (!window.customElements.get("ea-checkbox-group")) {
+    window.customElements.define("ea-checkbox-group", EaCheckboxGroup);
+}

package/components/ea-collapse/index.js

@@ -0,0 +1,293 @@
+// @ts-nocheck
+import Base from '../Base.js';
+import { createElement, createSlotElement } from '../../utils/createElement.js';
+
+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;
+}
+`;
+
+export class EaCollapse extends Base {
+    #wrap;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        const slot = createSlotElement('');
+        const wrap = createElement('div', 'ea-collapse_wrap', [slot]);
+
+        this.#wrap = wrap;
+
+        this.build(shadowRoot, stylesheet);
+        this.shadowRoot.appendChild(wrap);
+    }
+
+    // ------- active 当前展开项 -------
+    // #region
+    get active() {
+        return this.getAttribute('active') || 1;
+    }
+
+    set active(name) {
+        this.setAttribute('active', name);
+
+        setTimeout(() => {
+            this.#handleCollapse(this.accordion, name);
+        }, 20);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- accordion 是否为手风琴模式 -------
+    // #region
+    get accordion() {
+        return this.getAttrBoolean('accordion') || false;
+    }
+
+    set accordion(flag) {
+        this.setAttribute('accordion', flag);
+
+        setTimeout(() => {
+            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) {
+        const that = this;
+        // 将所有ea-collapse-item元素转换为数组
+        const items = Array.from(this.querySelectorAll('ea-collapse-item'));
+        // 初始化用于记录展开状态的变量
+        let collapseItem = flag ? "" : [];
+
+        // 遍历每个折叠项，绑定状态改变事件的监听器
+        items.forEach(item => {
+            item.addEventListener('collapseItemStatusChange', (e) => {
+                // 在单选模式下，关闭所有其他折叠项
+                if (flag) items.forEach(item => {
+                    item.isOpen = false;
+                });
+
+                // 更新当前折叠项的展开状态
+                item.isOpen = !e.detail.isOpen;
+
+                // 触发change事件，通知外部当前折叠项的状态改变
+                that.dispatchEvent(new CustomEvent("change", {
+                    detail: {
+                        name: item.name,
+                        isOpen: item.isOpen,
+                    },
+                }))
+            });
+        });
+
+        try {
+            // 根据flag的值来处理折叠项的展开状态
+            if (flag) {
+                // 在单选模式下，根据activeItemName确定哪个折叠项应该展开
+                collapseItem = activeItemName.toString().trim()[0];
+
+                items.forEach(item => {
+                    // 根据collapseItem的值，决定当前折叠项是否展开
+                    if (item.name === collapseItem) {
+                        item.isOpen = true;
+                    } else {
+                        item.isOpen = false;
+                    }
+                });
+            } else {
+                // 在多选模式下，将activeItemName解析为数组，并处理每个折叠项的展开状态
+                collapseItem = activeItemName.split(',').map(item => {
+                    return item.trim();
+                }).concat();
+
+                items.forEach(item => {
+                    // 根据collapseItem数组中的值，决定当前折叠项是否展开
+                    if (collapseItem.includes(item.name)) {
+                        item.isOpen = true;
+                    } else {
+                        item.isOpen = false;
+                    }
+                });
+            }
+
+        } catch (error) { }
+    }
+
+    #handleChildrenItemName() {
+
+    }
+
+    init() {
+        const that = this;
+
+        this.accordion = this.accordion;
+
+        this.active = this.active;
+    }
+
+    connectedCallback() {
+        this.init();
+    }
+}
+
+if (!customElements.get('ea-collapse')) {
+    customElements.define('ea-collapse', EaCollapse);
+}
+
+export class EaCollapseItem extends Base {
+    #wrap;
+
+    #titleWrap;
+    #titleContent;
+    #titleIcon;
+
+    #contentWrap;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        const titleContent = createElement('span', 'ea-collapse-item_title-content');
+        const icon = createElement('span', 'ea-collapse-item_title-icon');
+        const titleWrap = createElement('div', 'ea-collapse-item_title', [titleContent, icon]);
+        const contentSlot = createSlotElement('');
+        const contentWrap = createElement('div', 'ea-collapse-item_content', [contentSlot]);
+
+        const wrap = createElement('div', 'ea-collapse-item_wrap', [titleWrap, contentWrap]);
+
+        this.#wrap = wrap;
+        this.#titleWrap = titleWrap;
+        this.#titleContent = titleContent;
+        this.#titleIcon = icon;
+        this.#contentWrap = contentWrap;
+
+        this.build(shadowRoot, stylesheet);
+        this.shadowRoot.appendChild(wrap);
+    }
+
+    // ------- 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 -------
+
+    #initCollapseChange() {
+        const that = this;
+
+        this.#titleWrap.addEventListener('click', () => {
+            that.dispatchEvent(new CustomEvent('collapseItemStatusChange', {
+                detail: {
+                    name: that.name,
+                    isOpen: that.isOpen,
+                },
+            }));
+        });
+    }
+
+    init() {
+        const that = this;
+
+        this.title = this.title;
+        this.name = this.name;
+
+        this.#initCollapseChange();
+    }
+
+    connectedCallback() {
+        this.init();
+    }
+}
+
+if (!customElements.get('ea-collapse-item')) {
+    customElements.define('ea-collapse-item', EaCollapseItem);
+}