easy-component-ui 0.0.1 → 1.0.3

package/components/ea-skeleton/index.js

@@ -0,0 +1,341 @@
+// @ts-nocheck
+import Base from '../Base.js';
+
+const imageElement = `
+<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>
+`;
+
+const stylesheet = `
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+}
+.ea-skeleton_item,
+.ea-skeleton-item_wrap {
+  position: relative;
+  display: inline-block;
+  background-color: #f2f2f2;
+  height: 16px;
+  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_wrap.animated .ea-skeleton_item {
+  background-image: linear-gradient(90deg, #f6f6f6 25%, #e8e8e8 37%, #f6f6f6 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+.ea-skeleton_wrap {
+  width: 100%;
+}
+.ea-skeleton_wrap .ea-skeleton_item.el-skeleton_p {
+  width: 100%;
+}
+.ea-skeleton_wrap .ea-skeleton_item.el-skeleton_p.el-skeleton_paragraph {
+  width: 100%;
+  margin-top: 16px;
+}
+.ea-skeleton_wrap .ea-skeleton_item.el-skeleton_p.is-first {
+  width: 33%;
+}
+.ea-skeleton_wrap .ea-skeleton_item.el-skeleton_p.is-last {
+  width: 61%;
+}
+
+.ea-skeleton-item_wrap .skeleton-image {
+  width: 30%;
+  height: 30%;
+}
+.ea-skeleton-item_wrap.ea-skeleton_p {
+  width: 100%;
+}
+.ea-skeleton-item_wrap.ea-skeleton_image {
+  width: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0;
+}
+.ea-skeleton-item_wrap.ea-skeleton_text {
+  width: 100%;
+  height: 13px;
+}
+`;
+
+/**
+ * 创建一个具有骨架屏样式的元素。
+ * 
+ * @param {string} item - 包含要添加到新元素的类名。
+ * @param {boolean} isFirst - 指示生成的元素是否应该是列表中的第一个元素。
+ * @param {boolean} isLast - 指示生成的元素是否应该是列表中的最后一个元素。
+ * @returns {HTMLElement} - 返回一个新创建的div元素。
+ */
+const getSkeletonElement = (className) => {
+    const el = document.createElement('div');
+    el.className = `ea-skeleton_item el-skeleton_p ${className ? className : ''}`;
+
+    return el;
+};
+
+export class EaSkeleton extends Base {
+    #mounted = false;
+
+    #wrap;
+
+    #customizationSlot;
+    #defaultSlot;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const wrap = document.createElement('div');
+        wrap.className = 'ea-skeleton_wrap';
+
+        const defaultSlot = document.createElement('slot');
+        defaultSlot.style.display = 'none';
+
+        const customizationSlot = document.createElement('slot');
+        customizationSlot.name = 'template';
+
+        this.#wrap = wrap;
+        this.#defaultSlot = defaultSlot;
+        this.#customizationSlot = customizationSlot;
+
+        this.build(shadowRoot, stylesheet);
+        this.shadowRoot.appendChild(wrap);
+        this.shadowRoot.appendChild(customizationSlot);
+        this.shadowRoot.appendChild(defaultSlot);
+    }
+
+    // ------- row 骨架屏的渲染行数 -------
+    // #region
+    get row() {
+        return this.getAttrNumber('row') || 4;
+    }
+
+    set row(value) {
+        this.setAttribute('row', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- animated 骨架屏的动画效果 -------
+    // #region
+    get animated() {
+        return this.getAttrBoolean('animated');
+    }
+
+    set animated(value) {
+        this.setAttribute('animated', value);
+
+        this.#wrap.classList.toggle('animated', value);
+
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- count 元素重复数 -------
+    // #region
+    get count() {
+        return this.getAttrNumber('count') || 1;
+    }
+
+    set count(value) {
+        this.setAttribute('count', value);
+
+        this.#wrap.innerHTML = '';
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- loading 是否显示骨架屏 -------
+    // #region
+    get loading() {
+        return this.getAttrBoolean('loading') || true;
+    }
+
+    set loading(value) {
+        this.setAttribute('loading', value);
+
+        if (value) {
+            this.#customizationSlot.style.display = 'block';
+            this.#defaultSlot.style.display = 'none';
+        } else {
+            this.#customizationSlot.style.display = 'none';
+            this.#defaultSlot.style.display = 'block';
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // 默认骨架屏的初始化
+    defaultSkeletonInit(row) {
+        row = Number(row) || 4;
+
+        const firstSkeleton = getSkeletonElement('is-first');
+        this.#wrap.appendChild(firstSkeleton);
+
+        for (let i = 0; i < row - 2; i++) {
+            const paragraphSkeleton = getSkeletonElement('el-skeleton_paragraph');
+            this.#wrap.appendChild(paragraphSkeleton);
+        }
+
+        const lastSkeleton = getSkeletonElement('el-skeleton_paragraph is-last');
+        this.#wrap.appendChild(lastSkeleton);
+    }
+
+    // 渲染自定义骨架屏
+    customizationSkeletonInit() {
+        const item = this.querySelectorAll('ea-skeleton-item');
+
+        if (item.length > 0) this.#wrap.innerHTML = "";
+    }
+
+    // 渲染带动画的骨架屏
+    handleSkeletonItemAniamted(isAnimated) {
+        if (!isAnimated) return;
+
+        const items = this.querySelectorAll('ea-skeleton-item');
+        items.forEach(item => {
+            item.setAttribute("animated", true);
+        })
+    }
+
+    // 渲染骨架屏的渲染个数
+    handleSkeletonItemCount(count) {
+        const item = this.querySelector('[slot="template"]');
+        let template = ``;
+
+        for (let i = 0; i < count; i++) {
+            template += item.innerHTML;
+        }
+
+        item.innerHTML = template;
+    }
+
+    init() {
+        const that = this;
+
+        this.animated = this.animated;
+
+        this.count = this.count;
+
+        this.loading = this.loading;
+
+        const items = this.querySelectorAll('ea-skeleton-item');
+        if (items.length > 0) {
+            this.#wrap.style.display = "none";
+
+            this.handleSkeletonItemCount(this.count);
+
+            this.handleSkeletonItemAniamted(this.animated);
+
+            return;
+        }
+
+
+
+        this.row = this.row;
+        this.defaultSkeletonInit(this.row);
+    }
+
+    connectedCallback() {
+        this.init();
+
+        this.#mounted = true;
+    }
+}
+
+export class EaSkeletonItem extends Base {
+    #wrap;
+
+    static get observedAttributes() {
+        return ['animated'];
+    }
+    get variantOptions() {
+        return ["text", "image", "p"];
+    }
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const wrap = document.createElement('div');
+        wrap.className = 'ea-skeleton-item_wrap';
+
+        this.#wrap = wrap;
+
+        this.build(shadowRoot, stylesheet);
+        this.shadowRoot.appendChild(wrap);
+    }
+
+    // ------- style html标签上的样式 -------
+    // #region
+    get elementStyle() {
+        return this.getAttribute('style');
+    }
+
+    set elementStyle(value) {
+        this.setAttribute('style', value);
+        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 = imageElement;
+
+        this.#wrap.classList.add("ea-skeleton_" + this.variant);
+    }
+    // #endregion
+    // ------- end -------
+
+    init() {
+        const that = this;
+
+        this.variant = this.variant;
+
+        this.elementStyle = this.elementStyle;
+    }
+
+    connectedCallback() {
+        this.init();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        switch (name) {
+            case "animated":
+                this.#wrap.classList.toggle("animated", this.getAttrBoolean(name));
+                break;
+        }
+    }
+}
+
+if (!customElements.get('ea-skeleton')) {
+    customElements.define('ea-skeleton', EaSkeleton);
+}
+
+if (!customElements.get('ea-skeleton-item')) {
+    customElements.define('ea-skeleton-item', EaSkeletonItem);
+}

package/components/ea-switch/index.js

@@ -0,0 +1,301 @@
+// @ts-nocheck
+import Base from '../Base.js';
+
+const stylesheet = `
+.ea-switch_wrap {
+  display: flex;
+  align-items: center;
+}
+.ea-switch_wrap input {
+  display: none;
+}
+.ea-switch_wrap span {
+  display: block;
+  cursor: default;
+}
+.ea-switch_wrap .ea-switch_label {
+  color: #606266;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.ea-switch_wrap .ea-switch_label.ea-switch_label--active {
+  color: #409eff;
+}
+.ea-switch_wrap .ea-switch_core {
+  position: relative;
+  cursor: pointer;
+  margin: 0 0.75rem;
+  width: 2.5rem;
+  height: 1.25rem;
+  line-height: 1.25rem;
+  background-color: #dcdfe6;
+  border-radius: 999px;
+  transition: background-color 0.2s;
+}
+.ea-switch_wrap .ea-switch_core.ea-switch_core--checked {
+  background-color: #409eff;
+}
+.ea-switch_wrap .ea-switch_core::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 2px;
+  top: 50%;
+  transform: translate(0, -50%);
+  width: 1rem;
+  height: 1rem;
+  border-radius: 999px;
+  background-color: #fff;
+  transition: left 0.2s, transform 0.2s;
+}
+.ea-switch_wrap .ea-switch_core.ea-switch_core--checked::after {
+  left: calc(100% - 1rem - 2px);
+}
+.ea-switch_wrap .ea-switch_core.ea-switch_core--disabled {
+  background-color: #c0c4cc;
+}
+.ea-switch_wrap.ea-switch_wrap--disabled {
+  cursor: not-allowed;
+}
+.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_label,
+.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_core {
+  pointer-events: none;
+}
+.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_core {
+  background-color: #eff1f5;
+}
+.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_label {
+  color: #c0c4cc;
+}
+.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_label.ea-switch_label--active {
+  color: #7ebfff;
+}
+`;
+
+const inputDom = () => {
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    input.className = 'ea-switch_input';
+
+    return input;
+}
+
+const inputCoreDom = () => {
+    const div = document.createElement('span');
+    div.className = 'ea-switch_core';
+
+    return div;
+}
+
+const labelDom = (posi) => {
+    const label = document.createElement('span');
+    label.className = `ea-switch_label ea-switch_label--${posi}`;
+
+    return label;
+}
+
+export class EaSwitch extends Base {
+    #mounted = false;
+
+    #wrap;
+    #input;
+
+    #labelLeft;
+    #inputCore;
+    #labelRight;
+
+    static get observedAttributes() {
+        return ['checked'];
+    }
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const wrap = document.createElement('div');
+        wrap.className = 'ea-switch_wrap';
+
+        const input = inputDom();
+        const leftLabel = labelDom('left');
+        const inputCore = inputCoreDom();
+        const rightLabel = labelDom('right');
+
+        wrap.appendChild(input);
+        wrap.appendChild(leftLabel);
+        wrap.appendChild(inputCore);
+        wrap.appendChild(rightLabel);
+
+        this.#wrap = wrap;
+        this.#input = input;
+        this.#labelLeft = leftLabel;
+        this.#inputCore = inputCore;
+        this.#labelRight = rightLabel;
+
+        this.build(shadowRoot, stylesheet);
+        this.shadowRoot.appendChild(wrap);
+    }
+
+    // ------- inactive-text 关闭时选项 -------
+    // #region
+    get inactiveText() {
+        return this.getAttribute('inactive-text');
+    }
+
+    set inactiveText(value) {
+        this.setAttribute('inactive-text', value);
+        this.#labelLeft.innerText = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- active-text 开启时选项 -------
+    // #region
+    get activeText() {
+        return this.getAttribute('active-text');
+    }
+
+    set activeText(value) {
+        this.setAttribute('active-text', value);
+        this.#labelRight.innerText = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- checked 选中 -------
+    // #region
+    get checked() {
+        return this.getAttrBoolean('checked');
+    }
+
+    set checked(value) {
+        this.setAttribute('checked', value);
+        this.#input.checked = value;
+        this.#input.setAttribute('checked', value);
+
+        if (value) {
+            this.#inputCore.classList.add('ea-switch_core--checked');
+            this.#labelRight.classList.add('ea-switch_label--active');
+
+            this.#labelLeft.classList.remove('ea-switch_label--active');
+        } else {
+            this.#inputCore.classList.remove('ea-switch_core--checked');
+            this.#labelLeft.classList.add('ea-switch_label--active');
+
+            this.#labelRight.classList.remove('ea-switch_label--active');
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled');
+    }
+
+    set disabled(value) {
+        this.setAttribute('disabled', value);
+        this.#input.disabled = value;
+        this.#wrap.classList.toggle('ea-switch_wrap--disabled', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- inactive-color 关闭时颜色 -------
+    // #region
+    get inactiveColor() {
+        return this.getAttribute('inactive-color');
+    }
+
+    set inactiveColor(value) {
+        if (!value) return;
+
+        this.setAttribute('inactive-color', value);
+        if (value) this.#inputCore.style.backgroundColor = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- active-color 开启时颜色 -------
+    // #region
+    get activeColor() {
+        return this.getAttribute('active-color');
+    }
+
+    set activeColor(value) {
+        if (!value) return;
+
+        this.setAttribute('active-color', value);
+        this.#inputCore.style.backgroundColor = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    handleInputChecked(e) {
+        const currentChecked = this.#input.checked;
+
+        if (this.inactiveColor && this.activeColor) {
+            this.#inputCore.style.backgroundColor = currentChecked ? this.inactiveColor : this.activeColor;
+        } else {
+            this.#inputCore.classList.toggle('ea-switch_core--checked', currentChecked);
+        }
+    }
+
+    init() {
+        const that = this;
+
+        // 设置勾选值
+        this.checked = this.checked;
+
+        // 设置开启/关闭值
+        this.inactiveText = this.inactiveText;
+        this.activeText = this.activeText;
+
+        // 设置禁用
+        this.disabled = this.disabled;
+
+        // 设置颜色
+        if (this.activeColor && this.inactiveColor) {
+            if (this.checked) this.activeColor = this.activeColor;
+            else this.inactiveColor = this.inactiveColor;
+        }
+
+
+        this.#labelLeft.addEventListener('click', function (e) {
+            that.checked = !that.#input.checked;
+        });
+
+        this.#labelRight.addEventListener('click', function (e) {
+            that.checked = !that.#input.checked;
+        });
+
+        this.#inputCore.addEventListener('click', function (e) {
+            that.checked = !that.#input.checked;
+        });
+    }
+
+    connectedCallback() {
+        this.init();
+        this.#mounted = true;
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (!this.#mounted) return;
+
+        if (name === 'checked') {
+            const value = this.checked ? this.activeText : this.inactiveText;
+            this.handleInputChecked();
+
+            this.dispatchEvent(new CustomEvent("change", {
+                detail: {
+                    checked: this.checked,
+                    value,
+                },
+            }))
+        }
+    }
+}
+
+if (!customElements.get('ea-switch')) {
+    customElements.define('ea-switch', EaSwitch);
+}