easy-component-ui 2.0.5 → 2.1.0

package/components/ea-select/index.js

@@ -1 +1,312 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import"../ea-option/index.js";import"../ea-option-gropu/index.js";import"../ea-input/index.js";import{stylesheet}from"./src/style/stylesheet.js";import{timeout,withTransitionTimeOut}from"../../utils/timeout.js";export class EaSelect extends Base{#e;#t;#i;#s;#n;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <div class="ea-select_wrap" part="container">\n                <div class="ea-select_input-wrap" part="input-wrap">\n                    <ea-input type="text" part="input" readonly autocomplete="off"></ea-input>\n                    <span class="ea-select_dropdown-icon" part="dropdown-icon-wrap">\n                        <ea-icon part="icon" icon="icon-angle-down" color="#c0c4cc"></ea-icon>\n                    </span>\n                </div>\n                <div class="ea-select_dropdown-wrap" part="dropdown-wrap">\n                    <slot></slot>\n                    <slot name="empty" class="ea-select_dropdown-empty" style="display: none;">\n                        <p>暂无数据</p>\n                    </slot>\n                </div>\n            </div>\n        ',this.#e=this.shadowRoot.querySelector(".ea-select_wrap"),this.#t=this.shadowRoot.querySelector("ea-input"),this.#i=this.shadowRoot.querySelector(".ea-select_dropdown-icon"),this.#s=this.shadowRoot.querySelector(".ea-select_dropdown-wrap"),this.#n=this.shadowRoot.querySelector(".ea-select_dropdown-empty"),this.build(e,stylesheet)}get name(){return this.getAttribute("name")||"select"}set name(e){this.setAttribute("name",e)}get width(){return this.getAttribute("width")||"200px"}set width(e){this.setAttribute("width",e),this.#e.style.width=e}get value(){const e=this.selection;return this.multiple?e.split(",")||[]:this.selection}set value(e){this.setAttribute("value",e),this.multiple?this.selection=e.join(","):this.selection=e}get selection(){return this.getAttribute("selection")||""}set selection(e){this.setAttribute("selection",e),this.#t.value=e}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){this.setAttribute("placeholder",e),this.#t.placeholder=e}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.toggleAttr("disabled",e),this.#t.disabled=e}get clearable(){return this.getAttrBoolean("clearable")||!1}set clearable(e){if(this.setAttribute("clearable",e),e){const e=this.#i.querySelector("ea-icon");this.#i.addEventListener("mouseenter",(t=>{e.icon="icon-cancel-circled2"})),this.#i.addEventListener("mouseleave",(t=>{e.icon="icon-angle-down"})),this.#i.addEventListener("click",(e=>{this.dispatchEvent(new CustomEvent("clear",{detail:{originValue:this.selection}})),this.querySelectorAll("ea-option").forEach((e=>{e.checked=!1})),this.selection=""}))}}get filterable(){return this.getAttrBoolean("filterable")||!1}set filterable(e){this.setAttribute("filterable",e),this.#t.readonly=!1===e,e&&this.#t.addEventListener("change",(e=>{const t=this.querySelectorAll("ea-option"),{value:i}=e.detail;t.forEach((e=>{e.style.display=e.value.includes(i)?"block":"none"}));let s=Array.from(t).every((e=>"block"!==e.style.display));this.#n.style.display=s?"block":"none"}))}get multiple(){return this.getAttrBoolean("multiple")||!1}set multiple(e){this.setAttribute("multiple",e)}get isInvalid(){return this.getAttrBoolean("is-invalid")||!1}set isInvalid(e){this.setAttribute("is-invalid",e),this.#t.isInvalid=e}#l(){const e=this.querySelectorAll("ea-option");e.forEach((t=>{t.disabled||t.addEventListener("click",(i=>{if(this.multiple)if(t.checked=!t.checked,t.checked)this.selection=this.selection?this.selection+","+t.value:t.value;else{const e=this.selection.split(",");e.splice(e.indexOf(t.value),1),this.selection=e.join(",")}else this.#t.value=t.value,this.selection=t.value,e.forEach((e=>{e.checked=!1})),t.checked=!0;this.dispatchEvent(new CustomEvent("change",{detail:{value:this.selection}}))}))}))}connectedCallback(){this.setAttribute("data-ea-component",!0),this.#s.style.width=this.width,this.name=this.name,this.width=this.width,this.selection=this.selection,this.placeholder=this.placeholder,this.disabled=this.disabled,this.clearable=this.clearable,this.filterable=this.filterable,this.multiple=this.multiple,this.#l(),this.#t.addEventListener("focus",(e=>{this.#e.classList.add("is-open"),this.dispatchEvent(new CustomEvent("visible-change",{detail:{visible:!0}}))})),this.#t.addEventListener("blur",(e=>{timeout((()=>{this.#e.classList.remove("is-open")}),100),this.dispatchEvent(new CustomEvent("visible-change",{detail:{visible:!1}}))})),withTransitionTimeOut(this.#e)}}customElements.get("ea-select")||customElements.define("ea-select",EaSelect);
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+
+import "../ea-option/index.js"
+import '../ea-option-gropu/index.js'
+import "../ea-input/index.js"
+
+import { stylesheet } from './src/style/stylesheet.js';
+import { timeout, withTransitionTimeOut } from '../../utils/timeout.js';
+
+export class EaSelect extends Base {
+    #container;
+    #selectInput;
+    #dropdownIcon;
+    #dropdownWrap;
+    #noResultWrap;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <div class="ea-select_wrap" part="container">
+                <div class="ea-select_input-wrap" part="input-wrap">
+                    <ea-input type="text" part="input" readonly autocomplete="off"></ea-input>
+                    <span class="ea-select_dropdown-icon" part="dropdown-icon-wrap">
+                        <ea-icon part="icon" icon="icon-angle-down" color="#c0c4cc"></ea-icon>
+                    </span>
+                </div>
+                <div class="ea-select_dropdown-wrap" part="dropdown-wrap">
+                    <slot></slot>
+                    <slot name="empty" class="ea-select_dropdown-empty" style="display: none;">
+                        <p>暂无数据</p>
+                    </slot>
+                </div>
+            </div>
+        `;
+
+
+        this.#container = this.shadowRoot.querySelector('.ea-select_wrap');
+        this.#selectInput = this.shadowRoot.querySelector('ea-input');
+        this.#dropdownIcon = this.shadowRoot.querySelector('.ea-select_dropdown-icon');
+        this.#dropdownWrap = this.shadowRoot.querySelector('.ea-select_dropdown-wrap');
+        this.#noResultWrap = this.shadowRoot.querySelector('.ea-select_dropdown-empty');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- name 若与 form 组合使用，则 form 的返回值中. 该键名为该name -------
+    // #region
+    get name() {
+        return this.getAttribute('name') || 'select';
+    }
+
+    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;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- value 选项值 -------
+    // #region
+    get value() {
+        const value = this.selection;
+        if (this.multiple) return value.split(',') || [];
+        else return this.selection;
+    }
+
+    set value(val) {
+        this.setAttribute('value', val);
+
+        if (this.multiple) this.selection = val.join(',');
+        else this.selection = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- selection 选中项 -------
+    // #region
+    get selection() {
+        return this.getAttribute('selection') || '';
+    }
+
+    set selection(val) {
+        this.setAttribute('selection', val);
+
+        this.#selectInput.value = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- palceholder 提示 -------
+    // #region
+    get placeholder() {
+        return this.getAttribute('placeholder') || '';
+    }
+
+    set placeholder(val) {
+        this.setAttribute('placeholder', val);
+        this.#selectInput.placeholder = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled') || false;
+    }
+
+    set disabled(val) {
+        this.toggleAttr('disabled', val);
+
+        this.#selectInput.disabled = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- clearable 是否可清除 -------
+    // #region
+    get clearable() {
+        return this.getAttrBoolean('clearable') || false;
+    }
+
+    set clearable(val) {
+        this.setAttribute('clearable', val);
+
+        if (val) {
+            const icon = this.#dropdownIcon.querySelector('ea-icon');
+            this.#dropdownIcon.addEventListener('mouseenter', (e) => {
+                icon.icon = 'icon-cancel-circled2';
+            });
+
+            this.#dropdownIcon.addEventListener('mouseleave', (e) => {
+                icon.icon = 'icon-angle-down';
+            });
+
+            this.#dropdownIcon.addEventListener('click', (e) => {
+                this.dispatchEvent(new CustomEvent('clear', {
+                    detail: {
+                        originValue: this.selection
+                    }
+                }));
+
+                this.querySelectorAll('ea-option').forEach(option => {
+                    option.checked = false;
+                });
+                this.selection = '';
+            });
+
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- filterable 是否可搜索 -------
+    // #region
+    get filterable() {
+        return this.getAttrBoolean('filterable') || false;
+    }
+
+    set filterable(val) {
+        this.setAttribute('filterable', val);
+
+        this.#selectInput.readonly = val === false;
+
+        if (val) {
+            this.#selectInput.addEventListener('change', (e) => {
+                const options = this.querySelectorAll('ea-option');
+                const { value } = e.detail;
+
+                options.forEach(option => {
+                    option.style.display = option.value.includes(value) ? 'block' : 'none';
+                });
+                let isAllHidden = Array.from(options).every(option => {
+                    return option.style.display === 'block' ? false : true;
+                });
+
+                this.#noResultWrap.style.display = isAllHidden ? 'block' : 'none';
+            });
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- multiple 是否多选 -------
+    // #region
+    get multiple() {
+        return this.getAttrBoolean('multiple') || false;
+    }
+
+    set multiple(val) {
+        this.setAttribute('multiple', val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- is-invalid 是否校验失败 -------
+    // #region
+    get isInvalid() {
+        return this.getAttrBoolean('is-invalid') || false;
+    }
+
+    set isInvalid(val) {
+        this.setAttribute('is-invalid', val);
+        this.#selectInput.isInvalid = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    #handleOptionChecked() {
+        const options = this.querySelectorAll('ea-option');
+
+        options.forEach(option => {
+            if (!option.disabled) {
+                option.addEventListener('click', (e) => {
+                    if (this.multiple) {
+                        option.checked = !option.checked;
+
+                        if (!option.checked) {
+                            const choise = this.selection.split(',');
+                            choise.splice(choise.indexOf(option.value), 1);
+                            this.selection = choise.join(',');
+                        } else {
+                            this.selection = this.selection ? this.selection + ',' + option.value : option.value;
+                        }
+                    } else {
+                        this.#selectInput.value = option.value;
+                        this.selection = option.value;
+
+                        options.forEach(item => {
+                            item.checked = false;
+                        });
+                        option.checked = true;
+                    }
+
+                    this.dispatchEvent(new CustomEvent('change', {
+                        detail: {
+                            value: this.selection
+                        }
+                    }));
+                });
+            }
+        });
+    }
+
+    connectedCallback() {
+        this.setAttribute('data-ea-component', true);
+        this.#dropdownWrap.style.width = this.width;
+
+        this.name = this.name;
+
+        this.width = this.width;
+
+        this.selection = this.selection;
+
+        this.placeholder = this.placeholder;
+
+        this.disabled = this.disabled;
+
+        this.clearable = this.clearable;
+
+        this.filterable = this.filterable;
+
+        this.multiple = this.multiple;
+
+        this.#handleOptionChecked();
+
+        this.#selectInput.addEventListener('focus', (e) => {
+            this.#container.classList.add('is-open');
+
+            this.dispatchEvent(new CustomEvent('visible-change', {
+                detail: {
+                    visible: true,
+                }
+            }));
+        });
+
+        this.#selectInput.addEventListener('blur', (e) => {
+            timeout(() => {
+                this.#container.classList.remove('is-open');
+            }, 100);
+
+            this.dispatchEvent(new CustomEvent('visible-change', {
+                detail: {
+                    visible: false,
+                }
+            }));
+        });
+
+        withTransitionTimeOut(this.#container);
+    }
+}
+
+if (!customElements.get('ea-select')) {
+    customElements.define('ea-select', EaSelect);
+}

package/components/ea-select/index.scss

@@ -0,0 +1,70 @@
+.ea-select_wrap {
+  position: relative;
+
+  .ea-select_input-wrap {
+    .ea-select_dropdown-icon {
+      position: absolute;
+
+      left: calc(100% - 24px);
+      top: 50%;
+
+      transform-origin: center;
+      transform: translateY(-50%);
+
+      &.is-open {
+        transform: translateY(-50%) rotate(180deg);
+      }
+    }
+  }
+
+  .ea-select_dropdown-wrap {
+    position: absolute;
+    left: 0;
+    bottom: -12px;
+    transform: translateY(100%) scaleY(0);
+    transform-origin: center top;
+
+    box-sizing: border-box;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+    z-index: 2035;
+
+    .ea-select_dropdown-empty {
+      padding: 10px 0;
+      margin: 0;
+      text-align: center;
+      color: #999;
+      font-size: 14px;
+    }
+  }
+
+  &.is-open {
+    .ea-select_input-wrap {
+      .ea-select_dropdown-icon {
+        transform: translateY(-50%) rotate(180deg);
+      }
+    }
+
+    .ea-select_dropdown-wrap {
+      transform: translateY(100%) scaleY(1);
+    }
+  }
+
+  &.is-disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &.with-transition {
+    .ea-select_input-wrap {
+      .ea-select_dropdown-icon {
+        transition: transform 0.3s;
+      }
+    }
+
+    .ea-select_dropdown-wrap {
+      transition: transform 0.3s;
+    }
+  }
+}

package/components/ea-select/src/style/stylesheet.js

@@ -1 +1,49 @@
-export const stylesheet="\n.ea-select_wrap {\n  position: relative;\n}\n.ea-select_wrap .ea-select_input-wrap .ea-select_dropdown-icon {\n  position: absolute;\n  left: calc(100% - 24px);\n  top: 50%;\n  transform-origin: center;\n  transform: translateY(-50%);\n}\n.ea-select_wrap .ea-select_input-wrap .ea-select_dropdown-icon.is-open {\n  transform: translateY(-50%) rotate(180deg);\n}\n.ea-select_wrap .ea-select_dropdown-wrap {\n  position: absolute;\n  left: 0;\n  bottom: -12px;\n  transform: translateY(100%) scaleY(0);\n  transform-origin: center top;\n  box-sizing: border-box;\n  background-color: #fff;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  z-index: 2035;\n}\n.ea-select_wrap .ea-select_dropdown-wrap .ea-select_dropdown-empty {\n  padding: 10px 0;\n  margin: 0;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n}\n.ea-select_wrap.is-open .ea-select_input-wrap .ea-select_dropdown-icon {\n  transform: translateY(-50%) rotate(180deg);\n}\n.ea-select_wrap.is-open .ea-select_dropdown-wrap {\n  transform: translateY(100%) scaleY(1);\n}\n.ea-select_wrap.is-disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n.ea-select_wrap.with-transition .ea-select_input-wrap .ea-select_dropdown-icon {\n  transition: transform 0.3s;\n}\n.ea-select_wrap.with-transition .ea-select_dropdown-wrap {\n  transition: transform 0.3s;\n}\n";
+export const stylesheet = `
+.ea-select_wrap {
+  position: relative;
+}
+.ea-select_wrap .ea-select_input-wrap .ea-select_dropdown-icon {
+  position: absolute;
+  left: calc(100% - 24px);
+  top: 50%;
+  transform-origin: center;
+  transform: translateY(-50%);
+}
+.ea-select_wrap .ea-select_input-wrap .ea-select_dropdown-icon.is-open {
+  transform: translateY(-50%) rotate(180deg);
+}
+.ea-select_wrap .ea-select_dropdown-wrap {
+  position: absolute;
+  left: 0;
+  bottom: -12px;
+  transform: translateY(100%) scaleY(0);
+  transform-origin: center top;
+  box-sizing: border-box;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 2035;
+}
+.ea-select_wrap .ea-select_dropdown-wrap .ea-select_dropdown-empty {
+  padding: 10px 0;
+  margin: 0;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+.ea-select_wrap.is-open .ea-select_input-wrap .ea-select_dropdown-icon {
+  transform: translateY(-50%) rotate(180deg);
+}
+.ea-select_wrap.is-open .ea-select_dropdown-wrap {
+  transform: translateY(100%) scaleY(1);
+}
+.ea-select_wrap.is-disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.ea-select_wrap.with-transition .ea-select_input-wrap .ea-select_dropdown-icon {
+  transition: transform 0.3s;
+}
+.ea-select_wrap.with-transition .ea-select_dropdown-wrap {
+  transition: transform 0.3s;
+}
+`;

package/components/ea-skeleton/index.css

@@ -0,0 +1,12 @@
+.ea-skeleton_wrap {
+  width: 100%;
+  position: relative;
+  border-radius: 4px;
+}
+.ea-skeleton_wrap ea-skeleton-item[variant=p]:first-child {
+  --p-width: 33%;
+  --margin-top: 0;
+}
+.ea-skeleton_wrap ea-skeleton-item[variant=p]:last-child {
+  --p-width: 61%;
+}

package/components/ea-skeleton/index.js

@@ -1 +1,148 @@
-import Base from"../Base.js";import"../ea-skeleton-item/index.js";import{handleDefaultAttrIsTrue}from"../../utils/handleDefaultAttrIsTrue.js";import{createSkeletonElement}from"./src/utils/createSkeletonElement.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaSkeleton extends Base{#t;#e;#s;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-skeleton_wrap" part="container">\n                <slot></slot>\n                <slot name="template"></slot>\n            </div>\n        ',this.#t=t.querySelector(".ea-skeleton_wrap"),this.#s=t.querySelector("slot"),this.#e=t.querySelector('slot[name="template"]'),this.build(t,stylesheet)}get row(){return this.getAttrNumber("row")||4}set row(t){this.setAttribute("row",t)}get animated(){return this.getAttrBoolean("animated")}set animated(t){t&&this.setAttribute("animated",t)}get count(){return this.getAttrNumber("count")||1}set count(t){this.setAttribute("count",t)}get loading(){const t=this.getAttribute("loading");return handleDefaultAttrIsTrue(t)}set loading(t){this.setAttribute("loading",t),this.#e.style.display=t?"block":"none",this.#s.style.display=t?"none":"block"}#n(t){t=Number(t)||4;this.#s.assignedNodes(),this.#e.assignedNodes();if(!(this.children.length>0)){this.#t.innerHTML="";for(let e=0;e<t;e++){const t=createSkeletonElement("p",this.animated);this.#t.appendChild(t)}}}#i(t){if(!t)return;this.querySelectorAll("ea-skeleton-item").forEach((t=>{t.animated=!0}))}#o(t){if(0===this.children.length||t<1)return;const e=this.querySelector('[slot="template"]');let s="";for(let n=0;n<t;n++)s+=e.innerHTML;e.innerHTML=s}connectedCallback(){this.animated=this.animated,this.loading=this.loading,this.count=this.count,this.row=this.row,this.#n(this.row),this.#o(this.count),this.#i(this.animated)}}customElements.get("ea-skeleton")||customElements.define("ea-skeleton",EaSkeleton);
+import Base from '../Base.js';
+
+import "../ea-skeleton-item/index.js"
+
+import { handleDefaultAttrIsTrue } from '../../utils/handleDefaultAttrIsTrue.js';
+import { createSkeletonElement } from './src/utils/createSkeletonElement.js';
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaSkeleton extends Base {
+    #wrap;
+
+    #customizationSlot;
+    #defaultSlot;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-skeleton_wrap" part="container">
+                <slot></slot>
+                <slot name="template"></slot>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-skeleton_wrap');
+        this.#defaultSlot = shadowRoot.querySelector('slot');
+        this.#customizationSlot = shadowRoot.querySelector('slot[name="template"]');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- 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) {
+        if (!value) return;
+
+        this.setAttribute('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() {
+        const attr = this.getAttribute('loading');
+        return handleDefaultAttrIsTrue(attr);
+    }
+
+    set loading(value) {
+        this.setAttribute('loading', value);
+
+        this.#customizationSlot.style.display = value ? 'block' : 'none';
+        this.#defaultSlot.style.display = value ? 'none' : 'block';
+    }
+    // #endregion
+    // ------- end -------
+
+    // 默认骨架屏的初始化
+    #initDefaultSkeleton(row) {
+        row = Number(row) || 4;
+
+        const defaultSlotNodeLen = this.#defaultSlot.assignedNodes();
+        const customizationSlotLen = this.#customizationSlot.assignedNodes();
+
+
+        if (this.children.length > 0) return;
+        else this.#wrap.innerHTML = '';
+
+        for (let i = 0; i < row; i++) {
+            const paragraphSkeleton = createSkeletonElement('p', this.animated);
+            this.#wrap.appendChild(paragraphSkeleton);
+        }
+    }
+
+    // 渲染带动画的骨架屏
+    #handleSkeletonItemAniamted(isAnimated) {
+        if (!isAnimated) return;
+
+        const items = this.querySelectorAll('ea-skeleton-item');
+        items.forEach(item => {
+            item.animated = true;
+        })
+    }
+
+    // 渲染骨架屏的渲染个数
+    #handleSkeletonItemCount(count) {
+        if (this.children.length === 0 || count < 1) return;
+
+        const item = this.querySelector('[slot="template"]');
+        let template = ``;
+
+        for (let i = 0; i < count; i++) {
+            template += item.innerHTML;
+        }
+
+        item.innerHTML = template;
+    }
+
+    connectedCallback() {
+        this.animated = this.animated;
+
+        this.loading = this.loading;
+
+        this.count = this.count;
+
+        this.row = this.row;
+
+        this.#initDefaultSkeleton(this.row);
+        this.#handleSkeletonItemCount(this.count);
+        this.#handleSkeletonItemAniamted(this.animated);
+    }
+}
+
+if (!customElements.get('ea-skeleton')) {
+    customElements.define('ea-skeleton', EaSkeleton);
+}

package/components/ea-skeleton/index.scss

@@ -0,0 +1,16 @@
+@import "../ea-ui-base-style.scss";
+
+.ea-skeleton_wrap {
+  width: 100%;
+  position: relative;
+  border-radius: 4px;
+
+  ea-skeleton-item[variant="p"]:first-child {
+    --p-width: 33%;
+    --margin-top: 0;
+  }
+
+  ea-skeleton-item[variant="p"]:last-child {
+    --p-width: 61%;
+  }
+}

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

@@ -1 +1,14 @@
-export const stylesheet="\n.ea-skeleton_wrap {\n  width: 100%;\n  position: relative;\n  border-radius: 4px;\n}\n.ea-skeleton_wrap ea-skeleton-item[variant=p]:first-child {\n  --p-width: 33%;\n  --margin-top: 0;\n}\n.ea-skeleton_wrap ea-skeleton-item[variant=p]:last-child {\n  --p-width: 61%;\n}\n";
+export const stylesheet = `
+.ea-skeleton_wrap {
+  width: 100%;
+  position: relative;
+  border-radius: 4px;
+}
+.ea-skeleton_wrap ea-skeleton-item[variant=p]:first-child {
+  --p-width: 33%;
+  --margin-top: 0;
+}
+.ea-skeleton_wrap ea-skeleton-item[variant=p]:last-child {
+  --p-width: 61%;
+}
+`;

package/components/ea-skeleton/src/utils/createSkeletonElement.js

@@ -1 +1,7 @@
-export const createSkeletonElement=(e,t)=>{const n=document.createElement("ea-skeleton-item");return n.variant=e,n.animated=t,n};
+export const createSkeletonElement = (className, isAnimated) => {
+    const el = document.createElement('ea-skeleton-item');
+    el.variant = className;
+    el.animated = isAnimated;
+
+    return el;
+};