easy-component-ui 1.0.3 → 2.0.2

package/.github/workflows/publish.yml

@@ -0,0 +1,28 @@
+name: Publish Package
+
+on:
+  push:
+    branches:
+      - package
+    tags:
+      - 'v*.*.*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '14'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/components/Base.js

@@ -1,90 +1 @@
-// @ts-nocheck
-
-import setStyle from '../utils/setStyle.js';
-
-export default class Base extends HTMLElement {
-    constructor() {
-        super();
-
-        this.isProduction = false;
-        this.isProduction = true;
-    }
-
-    /**
-     * 设置属性值，并切换className
-     * @param {string} attr 属性名
-     * @param {boolean} flag 属性值
-     * @param {string} className class名
-     */
-    toggleAttribute(attr, flag, className) {
-        if (flag) {
-            this.setAttribute(attr, flag);
-
-            if (className) this.dom.classList.add(className);
-        } else {
-
-            if (this.hasAttribute(attr)) this.removeAttribute(attr);
-            if (className) this.dom.classList.remove(className);
-        }
-    }
-
-    /**
-     * 设置属性值
-     * @param {string} attr 属性名
-     * @param {boolean} flag 属性值
-     */
-    toggleAttr(attr, flag) {
-        if (flag) {
-            this.setAttribute(attr, flag);
-        } else {
-            this.removeAttribute(attr);
-        }
-    }
-
-    /**
-     * 获取属性值，并转换为布尔值
-     * @param {string} attrName 属性名
-     * @returns {boolean}
-     */
-    getAttrBoolean(attrName) {
-        const attr = this.getAttribute(attrName);
-        return attr === 'true' || attr === '';
-    }
-
-    /**
-     * 获取属性值，并转换为数字
-     * @param {string} attrName 属性名
-     * @returns {number}
-     */
-    getAttrNumber(attrName) {
-        const attr = this.getAttribute(attrName);
-
-        return attr ? Number(attr) : 0;
-    }
-
-    // 样式构建
-    build(shadowRoot, stylesheet) {
-        if (this.isProduction) {
-            const styleNode = document.createElement('style');
-            styleNode.innerHTML = stylesheet;
-            this.shadowRoot.appendChild(styleNode);
-        } else {
-            if (this.nodeName.toLowerCase() == 'ea-skeleton-item' && !this.isProduction) setStyle(shadowRoot, new URL("ea-skeleton" + '/index.css', import.meta.url).href);
-            else if (this.nodeName.toLowerCase() == 'ea-carousel-item' && !this.isProduction) setStyle(shadowRoot, new URL("ea-carousel" + '/index.css', import.meta.url).href);
-            else if (this.nodeName.toLowerCase() == 'ea-timeline-item' && !this.isProduction) setStyle(shadowRoot, new URL("ea-timeline" + '/index.css', import.meta.url).href);
-            else if (this.nodeName.toLowerCase() == 'ea-collapse-item' && !this.isProduction) setStyle(shadowRoot, new URL("ea-collapse" + '/index.css', import.meta.url).href);
-            else setStyle(shadowRoot, new URL(this.nodeName.toLowerCase() + '/index.css', import.meta.url).href);
-        }
-    }
-
-    /**
-     * 
-     * @param {string} url 链接
-     */
-    setIconFile(url) {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = url;
-        this.shadowRoot.appendChild(link);
-    }
-}
+import setStyle from"../utils/setStyle.js";export default class Base extends HTMLElement{constructor(){super(),this.isProduction=!1,this.isProduction=!0}toggleAttribute(t,e,s){e?(this.setAttribute(t,e),s&&this.dom.classList.add(s)):(this.hasAttribute(t)&&this.removeAttribute(t),s&&this.dom.classList.remove(s))}toggleAttr(t,e){e?this.setAttribute(t,e):this.removeAttribute(t)}getAttrBoolean(t){const e=this.getAttribute(t);return"true"===e||""===e}getAttrNumber(t){const e=this.getAttribute(t);return e?Number(e):0}build(t,e){if(this.isProduction){const t=document.createElement("style");t.innerHTML=e,this.shadowRoot.appendChild(t)}else setStyle(t,new URL(this.nodeName.toLowerCase()+"/index.css",import.meta.url).href)}}

package/components/ea-alert/index.js

@@ -1,298 +1 @@
-// @ts-nocheck
-import Base from '../Base.js';
-import { createElement } from '../../utils/createElement.js';
-import "../ea-icon/index.js"
-
-const stylesheet = `
-.ea-alert_wrap {
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  border-radius: 4px;
-  padding: 8px 16px;
-  margin: 20px 0 0;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  opacity: 1;
-  transition: opacity 0.2s;
-}
-.ea-alert_wrap .ea-alert_content {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.ea-alert_wrap .ea-alert_content .ea-alert_title {
-  display: flex;
-  align-items: center;
-}
-.ea-alert_wrap .ea-alert_content .ea-alert_title i {
-  margin-right: 0.5rem;
-}
-.ea-alert_wrap .ea-alert_content .ea-alert_close-icon {
-  color: #c0c4cc;
-  cursor: pointer;
-}
-.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_title,
-.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_close-icon {
-  margin-left: auto;
-}
-.ea-alert_wrap .ea-alert_description {
-  width: 100%;
-  margin: 5px 0 0;
-  font-size: 12px;
-}
-.ea-alert_wrap.ea-alert--success {
-  background-color: #f0f9eb;
-  color: #67c23a;
-}
-.ea-alert_wrap.ea-alert--success.ea-alert--dark {
-  color: #fff;
-  background-color: #67c23a;
-}
-.ea-alert_wrap.ea-alert--success.ea-alert--dark .ea-alert_close-icon {
-  color: #fff;
-}
-.ea-alert_wrap.ea-alert--info {
-  background-color: #f4f4f5;
-  color: #909399;
-}
-.ea-alert_wrap.ea-alert--info.ea-alert--dark {
-  color: #fff;
-  background-color: #909399;
-}
-.ea-alert_wrap.ea-alert--info.ea-alert--dark .ea-alert_close-icon {
-  color: #fff;
-}
-.ea-alert_wrap.ea-alert--warning {
-  background-color: #fdf6ec;
-  color: #e6a23c;
-}
-.ea-alert_wrap.ea-alert--warning.ea-alert--dark {
-  color: #fff;
-  background-color: #e6a23c;
-}
-.ea-alert_wrap.ea-alert--warning.ea-alert--dark .ea-alert_close-icon {
-  color: #fff;
-}
-.ea-alert_wrap.ea-alert--error {
-  background-color: #fef0f0;
-  color: #f56c6c;
-}
-.ea-alert_wrap.ea-alert--error.ea-alert--dark {
-  color: #fff;
-  background-color: #f56c6c;
-}
-.ea-alert_wrap.ea-alert--error.ea-alert--dark .ea-alert_close-icon {
-  color: #fff;
-}
-`;
-
-export class EaAlert extends Base {
-  #wrap;
-
-  #alertContent;
-  #alertTitle;
-
-  constructor() {
-    super();
-
-    const shadowRoot = this.attachShadow({ mode: 'open' });
-    const wrap = document.createElement('div');
-    wrap.className = 'ea-alert_wrap';
-
-    const alertTitle = createElement('span', 'ea-alert_title');
-    const alertContent = createElement('div', 'ea-alert_content', alertTitle);
-    wrap.appendChild(alertContent);
-
-    this.#wrap = wrap;
-    this.#alertContent = alertContent;
-    this.#alertTitle = alertTitle;
-
-    this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
-
-    this.build(shadowRoot, stylesheet);
-    this.shadowRoot.appendChild(wrap);
-  }
-
-  // ------- type 获取提示类型 -------
-  // #region
-  get type() {
-    return this.getAttribute('type') || "info";
-  }
-
-  set type(value) {
-    this.setAttribute('type', value);
-
-    this.#wrap.classList.add(`ea-alert--${value}`);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- title 获取提示标题 -------
-  // #region
-  get title() {
-    return this.getAttribute('title') || "";
-  }
-
-  set title(value) {
-    this.setAttribute('title', value);
-
-    this.#alertTitle.innerText = value;
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- closable 是否可关闭 -------
-  // #region
-  get closable() {
-    const flag = this.getAttribute('closable');
-
-    if (flag === null || flag === "true" || flag === "") return true;
-
-    return false;
-  }
-
-  set closable(value) {
-    this.setAttribute('closable', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- close-text 关闭按钮文字 -------
-  // #region
-  get closeText() {
-    return this.getAttribute('close-text') || "";
-  }
-
-  set closeText(value) {
-    this.setAttribute('close-text', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- effect 亮色与暗色主题 -------
-  // #region
-  get effect() {
-    return this.getAttribute('effect') || "light";
-  }
-
-  set effect(value) {
-    this.setAttribute('effect', value);
-
-    if (value === "dark") {
-      this.#wrap.classList.add('ea-alert--dark');
-    } else {
-      this.#wrap.classList.remove('ea-alert--dark');
-    }
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- show-icon 是否显示图标 -------
-  // #region
-  get showIcon() {
-    return this.getAttrBoolean('show-icon') || false;
-  }
-
-  set showIcon(value) {
-    this.setAttribute('show-icon', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- center 是否居中 -------
-  // #region
-  get center() {
-    return this.getAttrBoolean('center') || false;
-  }
-
-  set center(value) {
-    this.setAttribute('center', value);
-
-    this.#alertContent.classList.toggle('ea-alert--center', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  // ------- description 提示描述 -------
-  // #region
-  get description() {
-    return this.getAttribute('description') || "";
-  }
-
-  set description(value) {
-    this.setAttribute('description', value);
-  }
-  // #endregion
-  // ------- end -------
-
-  initClosableElement(closable, closeText) {
-    const that = this;
-
-    const closeIcon = createElement('i', 'ea-alert_close-icon');
-    closable === true && closeText === "" ? closeIcon.classList.add('icon-cancel') : closeIcon.innerText = closeText;
-    this.#alertContent.appendChild(closeIcon);
-
-    closeIcon.addEventListener('click', function () {
-      that.#wrap.style.opacity = 0;
-
-      that.dispatchEvent(new CustomEvent('close', { detail: { target: that } }));
-    });
-
-    this.#wrap.addEventListener('transitionend', function () {
-      that.remove();
-    });
-  }
-
-  initShowIconElement(type) {
-    const iconClass = {
-      success: 'ok-circled',
-      info: 'info',
-      warning: 'attention-alt',
-      error: 'cancel-circled'
-    }
-
-    const icon = createElement('i', `icon-${iconClass[type]}`);
-    icon.classList.add(`ea-alert--${type}`);
-    this.#alertTitle.insertBefore(icon, this.#alertTitle.firstChild);
-  }
-
-  initDescriptionElement(description) {
-    const descriptionElement = createElement('p', 'ea-alert_description');
-    this.#wrap.style.flexDirection = 'column';
-
-    descriptionElement.innerText = description;
-    this.#wrap.appendChild(descriptionElement);
-  }
-
-  init() {
-
-    this.type = this.type;
-
-    this.title = this.title;
-
-    this.closable = this.closable;
-
-    this.closeText = this.closeText;
-
-    this.effect = this.effect;
-
-    this.center = this.center;
-
-    if (this.closable) this.initClosableElement(this.closable, this.closeText);
-
-    if (this.showIcon) this.initShowIconElement(this.type);
-
-    if (this.description) this.initDescriptionElement(this.description);
-  }
-
-  connectedCallback() {
-    this.init();
-  }
-}
-
-if (!customElements.get('ea-alert')) {
-  customElements.define('ea-alert', EaAlert);
-}
+import Base from"../Base.js";import"../ea-icon/index.js";import{handleDefaultAttrIsTrue}from"../../utils/handleDefaultAttrIsTrue.js";import{createElement}from"../../utils/createElement.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaAlert extends Base{#t;#e;#s;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n      <div class='ea-alert_wrap' part='container'>\n        <div class=\"ea-alert_content\" part='content-wrap'>\n          <span class=\"ea-alert_title\" part='title'></span>\n          <ea-icon class=\"ea-alert_close-icon\" part='icon'></ea-icon>\n        </div>\n      </div>\n    ",this.#t=t.querySelector(".ea-alert_wrap"),this.#e=t.querySelector(".ea-alert_content"),this.#s=t.querySelector(".ea-alert_title"),this.#i=t.querySelector(".ea-alert_close-icon"),this.build(t,stylesheet)}get type(){return this.getAttribute("type")||"info"}set type(t){this.setAttribute("type",t),this.#t.classList.add(`ea-alert--${t}`)}get title(){return this.getAttribute("title")||""}set title(t){this.setAttribute("title",t),this.#s.innerText=t}get closable(){return handleDefaultAttrIsTrue("closable")}set closable(t){this.setAttribute("closable",t),this.#i.style.display=t?"block":"none"}get closeText(){return this.getAttribute("close-text")||""}set closeText(t){this.setAttribute("close-text",t)}get effect(){return this.getAttribute("effect")||"light"}set effect(t){this.setAttribute("effect",t),this.#t.classList.toggle("ea-alert--dark","dark"===t)}get showIcon(){return this.getAttrBoolean("show-icon")||!1}set showIcon(t){this.setAttribute("show-icon",t)}get center(){return this.getAttrBoolean("center")||!1}set center(t){this.setAttribute("center",t),this.#e.classList.toggle("ea-alert--center",t)}get description(){return this.getAttribute("description")||""}set description(t){this.setAttribute("description",t)}#r(){this.closable&&(!0===this.closable&&""===this.closeText?this.#i.icon="icon-cancel":this.#i.innerText=this.closeText,this.#i.addEventListener("click",(()=>{this.#t.style.opacity=0,this.dispatchEvent(new CustomEvent("close",{detail:{target:this.#i}}))})),this.#t.addEventListener("transitionend",(()=>{this.remove()})))}get iconList(){return{success:"ok-circled",info:"info",warning:"attention-alt",error:"cancel-circled"}}#n(){if(!this.showIcon)return;const t=createElement("ea-icon");t.icon=`icon-${this.iconList[this.type]}`,t.classList.add(`ea-alert--${this.type}`),this.#s.insertBefore(t,this.#s.firstChild)}#l(){if(!this.description)return;const t=createElement("p","ea-alert_description");t.part="description",this.#t.style.flexDirection="column",t.innerText=this.description,this.#t.appendChild(t)}connectedCallback(){this.type=this.type,this.title=this.title,this.closable=this.closable,this.closeText=this.closeText,this.effect=this.effect,this.center=this.center,this.#r(),this.#n(),this.#l()}}customElements.get("ea-alert")||customElements.define("ea-alert",EaAlert);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-alert_wrap {\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  border-radius: 4px;\n  padding: 8px 16px;\n  margin: 20px 0 0;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  opacity: 1;\n  transition: opacity 0.2s;\n}\n.ea-alert_wrap .ea-alert_content {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ea-alert_wrap .ea-alert_content .ea-alert_title {\n  display: flex;\n  align-items: center;\n}\n.ea-alert_wrap .ea-alert_content .ea-alert_title i {\n  margin-right: 0.5rem;\n}\n.ea-alert_wrap .ea-alert_content .ea-alert_close-icon {\n  color: #c0c4cc;\n  cursor: pointer;\n}\n.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_title,\n.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_close-icon {\n  margin-left: auto;\n}\n.ea-alert_wrap .ea-alert_description {\n  width: 100%;\n  margin: 5px 0 0;\n  font-size: 12px;\n}\n.ea-alert_wrap.ea-alert--success {\n  background-color: #f0f9eb;\n  color: #67c23a;\n}\n.ea-alert_wrap.ea-alert--success.ea-alert--dark {\n  color: #fff;\n  background-color: #67c23a;\n}\n.ea-alert_wrap.ea-alert--success.ea-alert--dark .ea-alert_close-icon {\n  color: #fff;\n}\n.ea-alert_wrap.ea-alert--info {\n  background-color: #f4f4f5;\n  color: #909399;\n}\n.ea-alert_wrap.ea-alert--info.ea-alert--dark {\n  color: #fff;\n  background-color: #909399;\n}\n.ea-alert_wrap.ea-alert--info.ea-alert--dark .ea-alert_close-icon {\n  color: #fff;\n}\n.ea-alert_wrap.ea-alert--warning {\n  background-color: #fdf6ec;\n  color: #e6a23c;\n}\n.ea-alert_wrap.ea-alert--warning.ea-alert--dark {\n  color: #fff;\n  background-color: #e6a23c;\n}\n.ea-alert_wrap.ea-alert--warning.ea-alert--dark .ea-alert_close-icon {\n  color: #fff;\n}\n.ea-alert_wrap.ea-alert--error {\n  background-color: #fef0f0;\n  color: #f56c6c;\n}\n.ea-alert_wrap.ea-alert--error.ea-alert--dark {\n  color: #fff;\n  background-color: #f56c6c;\n}\n.ea-alert_wrap.ea-alert--error.ea-alert--dark .ea-alert_close-icon {\n  color: #fff;\n}\n";

package/components/ea-aside/index.js

@@ -0,0 +1 @@
+import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-aside_wrap {\n  height: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n.ea-aside_wrap ::slotted(ea-main) {\n  overflow: auto;\n}\n";export class EaAside extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <aside class="ea-aside_wrap" part="container">\n                <slot></slot>\n            </aside>\n        ',this.#e=e.querySelector(".ea-aside_wrap"),this.build(e,stylesheet)}get width(){return this.getAttrNumber("width")||200}set width(e){this.setAttribute("width",e),this.#e.style.width=`${e}px`}connectedCallback(){this.width=this.width}}customElements.get("ea-aside")||customElements.define("ea-aside",EaAside);