easy-component-ui 1.0.3 → 2.0.1

package/components/ea-timeline/style/stylesheet.js

@@ -0,0 +1 @@
+export const stylesheet="\n\n";

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

@@ -0,0 +1 @@
+import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTimelineItem extends Base{#t;#e;#i;#s;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-timeline-item_wrap' part='container'>\n                <div class='ea-timeline-item_circle' part='circle'></div>\n                <div class='ea-timeline-item_tail' part='tail'></div>\n                <div class='ea-timeline-item_container' part='body'>\n                    <div class='ea-timeline-item_content' part='content'>\n                        <slot></slot>\n                    </div>\n                    <div class='ea-timeline-item_timestamp' part='timestamp'></div>\n                </div>\n            </div>\n        ",this.#t=t.querySelector(".ea-timeline-item_wrap"),this.#e=t.querySelector(".ea-timeline-item_timestamp"),this.#i=t.querySelector(".ea-timeline-item_circle"),this.#s=t.querySelector(".ea-timeline-item_timestamp"),this.build(t,stylesheet)}get time(){return this.getAttribute("time")||""}set time(t){t&&(this.setAttribute("time",t),this.#s.innerText=t)}get typeList(){return["primary","success","warning","danger","info"]}get type(){const t=this.getAttribute("type");return this.typeList.includes(t)?t:"info"}set type(t){this.setAttribute("type",t),this.#i.classList.add(`ea-timeline-item--${t}`)}get color(){return this.getAttribute("color")||""}set color(t){if(!t)return;this.setAttribute("color",t);""!==((new Option).style.color=t)&&(this.#i.style.backgroundColor=t)}get sizeList(){return["normal","large"]}get size(){const t=this.getAttribute("size");return this.sizeList.includes(t)?t:"normal"}set size(t){this.setAttribute("size",t),this.#t.classList.add(`ea-timeline-item_circle--${t}`)}get placementList(){return["top","bottom"]}get placement(){const t=this.getAttribute("placement");return this.placementList.includes(t)?t:"bottom"}set placement(t){this.setAttribute("placement",t),this.#e.classList.add(`ea-timeline-item_timestamp--${t}`)}connectedCallback(){this.time=this.time,this.type=this.type,this.color=this.color,this.size=this.size,this.placement=this.placement}}customElements.get("ea-timeline-item")||customElements.define("ea-timeline-item",EaTimelineItem);

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

@@ -0,0 +1 @@
+export const stylesheet="\n.ea-timeline-item_wrap {\n  position: relative;\n  padding-bottom: 20px;\n  padding-left: 28px;\n  list-style: none;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle {\n  position: absolute;\n  left: 0;\n  z-index: 1;\n  display: block;\n  width: 12px;\n  height: 12px;\n  font-size: 12px;\n  border-radius: 50%;\n  background-color: #e4e7ed;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--primary {\n  background-color: #409eff;\n  color: #409eff;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--success {\n  background-color: #67c23a;\n  color: #67c23a;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--warning {\n  background-color: #e6a23c;\n  color: #e6a23c;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--danger {\n  background-color: #f56c6c;\n  color: #f56c6c;\n}\n.ea-timeline-item_wrap .ea-timeline-item_circle.ea-timeline-item--info {\n  background-color: #e4e7ed;\n  color: #e4e7ed;\n}\n.ea-timeline-item_wrap .ea-timeline-item_tail {\n  z-index: 0;\n  position: absolute;\n  left: 0.3281rem;\n  height: 100%;\n  border-left: 2px solid #e4e7ed;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container {\n  position: relative;\n  top: -4px;\n  font-size: 14px;\n  display: flex;\n  flex-direction: column;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container .ea-timeline-item_timestamp {\n  color: #909399;\n  line-height: 1;\n  margin-top: 8px;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container .ea-timeline-item_content {\n  color: #303133;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--top {\n  flex-direction: column-reverse;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--top .ea-timeline-item_timestamp {\n  margin-top: 0;\n  margin-bottom: 8px;\n}\n.ea-timeline-item_wrap .ea-timeline-item_container.ea-timeline-item_timestamp--bottom {\n  flex-direction: column;\n}\n.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_circle {\n  width: 14px;\n  height: 14px;\n}\n.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_tail {\n  left: 0.3906rem;\n}\n.ea-timeline-item_wrap.ea-timeline-item_circle--large .ea-timeline-item_container {\n  font-size: 16px;\n}\n";

package/package.json

@@ -1,12 +1,12 @@
-{
-  "name": "easy-component-ui",
-  "version": "1.0.3",
-  "description": "Easy-ui, 基于 Web Components 的 UI 组件库",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "Lumina <https://github.com/LuminaQAQ>",
-  "license": "ISC"
+{
+  "name": "easy-component-ui",
+  "version": "2.0.1",
+  "description": "Easy-ui, 基于 Web Components 的 UI 组件库",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Lumina <https://github.com/LuminaQAQ>",
+  "license": "ISC"
 }

package/utils/Validator.js

@@ -0,0 +1 @@
+export const Validator={required:r=>"string"==typeof r?""!==r:!!Array.isArray(r)&&r.length>0,min:(r,t)=>r.length>=t,max:(r,t)=>r.length<=t,reg:(r,t)=>t.test(r)};

package/utils/createElement.js

@@ -1,30 +1 @@
-/**
- * 创建元素
- * @param {String} tagName 
- * @param {String} className 
- * @param {HTMLElement} children 
- * @returns {HTMLElement}
- */
-export const createElement = (tagName, className, children) => {
-    const element = document.createElement(tagName || 'div');
-    element.className = className || '';
-
-    if (children) {
-        if (Array.isArray(children)) {
-            children.forEach(child => {
-                element.appendChild(child);
-            });
-        } else {
-            element.appendChild(children);
-        }
-    }
-
-    return element;
-};
-
-export const createSlotElement = (name) => {
-    const slot = document.createElement('slot');
-    slot.name = name;
-
-    return slot;
-};
+export const createElement=(e,t,n)=>{const r=document.createElement(e||"div");return r.className=t||"",n&&(Array.isArray(n)?n.forEach((e=>{r.appendChild(e)})):r.appendChild(n)),r};export const createSlotElement=e=>{const t=document.createElement("slot");return e&&(t.name=e),t};

package/utils/handleDefaultAttrIsTrue.js

@@ -0,0 +1 @@
+export const handleDefaultAttrIsTrue=e=>e="false"!==e&&!1!==e;

package/utils/handleTemplate.js

@@ -1,19 +1 @@
-export const handleTemplate = (self, slotName, realSlot, tempSlot) => {
-    const template = self.querySelector(`[slot="${slotName}"]`);
-    if (!template) return;
-
-    try {
-        if (template.childNodes.length === 0) {
-            realSlot.innerHTML = template.innerHTML;
-        } else if (template.innerHTML === '') {
-            const nodes = template.childNodes;
-            realSlot.innerHTML = '';
-            Array.from(nodes).forEach(node => {
-                realSlot.appendChild(node.cloneNode(true));
-            });
-        }
-
-        template.remove();
-        tempSlot.remove();
-    } catch (e) { }
-}  
+export const handleTemplate=(e,n,o,r)=>{const c=e.querySelector(`[slot="${n}"]`);if(c)try{if(0===c.childNodes.length)o.innerHTML=c.innerHTML;else if(""===c.innerHTML){const e=c.childNodes;o.innerHTML="",Array.from(e).forEach((e=>{o.appendChild(e.cloneNode(!0))}))}c.remove(),r.remove()}catch(e){}};

package/utils/setStyle.js

@@ -1,8 +1 @@
-export default function setStyle(shadowRoot, href) {
-    const link = document.createElement('link');
-    
-    link.href = href;
-    link.rel = "stylesheet";
-
-    shadowRoot.appendChild(link);
-}
+export default function setStyle(e,t){const l=document.createElement("link");l.href=t,l.rel="stylesheet",e.appendChild(l)}

package/utils/timeout.js

@@ -0,0 +1 @@
+export const timeout=(t,e=0)=>{let i=setTimeout((()=>{clearTimeout(i),i=null,t()}),e)};export const withTransitionTimeOut=(t,e=300)=>{let i=setTimeout((()=>{clearTimeout(i),i=null,t.classList.add("with-transition")}),e)};

package/components/ea-message/MessageClass.js

@@ -1,71 +0,0 @@
-// @ts-nocheck
-export class EaMessage {
-    constructor() {
-    }
-
-    /**
-     * 处理字符串型消息
-     * @param {Element} el EaMessage元素
-     * @param {String} tip 文本
-     */
-    handleStringMsg(el, tip) {
-        el.text = tip;
-        el.type = "info";
-        el.hasClose = false;
-    }
-
-    /**
-     * 处理对象型消息
-     * @param {Element} el EaMessage元素
-     * @param {String} tips 文本
-     * @param {*} attrs 属性列表
-     */
-    handleObjectMsg(el, tips, attrs) {
-        for (const k in tips) {
-            if (attrs.includes(k)) el[k] = tips[k];
-        }
-
-        if (!Object.keys(tips).includes("type")) el.type = "info";
-    }
-
-    /**
-     * 处理消失的时长
-     * @param {*} el EaMessage元素
-     * @param {*} duration 时间间隔
-     */
-    handleDuration(el, duration = 3) {
-        if (duration === 0) return;
-
-        let timer = setTimeout(() => {
-            el.show = false;
-
-            clearTimeout(timer);
-            timer = null;
-        }, duration * 1000 + 40);
-    }
-
-    open(tip) {
-        const eaMessage = document.createElement('ea-message');
-        document.body.appendChild(eaMessage);
-
-        if (typeof tip === 'string') {
-            this.handleStringMsg(eaMessage, tip);
-            this.handleDuration(eaMessage);
-        } else if (typeof tip === 'object') {
-            this.handleObjectMsg(eaMessage, tip, eaMessage.attrs);
-            this.handleDuration(eaMessage, tip.duration);
-        }
-
-        setTimeout(() => {
-            eaMessage.show = true;
-        }, 20);
-
-        return {
-            onClose(fn) {
-                if (typeof fn === 'function') eaMessage.addEventListener('click', function () {
-                    fn();
-                })
-            }
-        }
-    }
-}

package/components/ea-message-box/EaMessageBoxClass.js

@@ -1,48 +0,0 @@
-import { createElement } from "../../utils/createElement.js"
-
-export class EaMessageBox {
-    constructor() {
-
-    }
-
-    get attrs() {
-        return ["cancelButtonText", "confirmButtonText"];
-    }
-
-    #handleElementAttrs(el, options, attrs) {
-        attrs.forEach(attr => {
-            if (options[attr]) el[attr] = options[attr];
-        });
-    }
-
-    #close(el) {
-        el.remove();
-    }
-
-    open(content, title, options) {
-        const that = this;
-
-        const EaMessageBox = createElement('ea-message-box', '');
-        document.body.appendChild(EaMessageBox);
-
-        EaMessageBox.open = true;
-
-        EaMessageBox.content = content;
-        EaMessageBox.title = title;
-
-        this.#handleElementAttrs(EaMessageBox, options, this.attrs);
-
-        return new Promise((resolve, reject) => {
-            EaMessageBox.addEventListener('cancel', () => {
-                that.#close(EaMessageBox);
-                reject();
-            });
-
-            EaMessageBox.addEventListener('confirm', () => {
-                that.#close(EaMessageBox);
-                resolve(true);
-            });
-        });
-    }
-
-}