easy-component-ui 2.0.5 → 2.1.1

package/components/ea-ui-base-style.scss

@@ -0,0 +1,153 @@
+// $button-style-type: "default" "primary" "success" "info" "warning" "danger"; // 按钮样式的类型
+
+// 默认
+$color-default-border: #dcdfe6;
+$color-default-text: #606266;
+$color-default-bgc: transparent;
+
+// 主要
+$color-primary-text: #fff;
+$color-primary-border: #409eff;
+$color-primary-bgc: #409eff;
+
+// 成功
+$color-success-text: #fff;
+$color-success-bgc: #67c23a;
+$color-success-border: #67c23a;
+
+// 信息
+$color-info-text: #fff;
+$color-info-bgc: #909399;
+$color-info-border: #909399;
+
+// 警告
+$color-warning-text: #fff;
+$color-warning-bgc: #e6a23c;
+$color-warning-border: #e6a23c;
+
+// 危险
+$color-danger-text: #fff;
+$color-danger-bgc: #f56c6c;
+$color-danger-border: #f56c6c;
+
+// 配色
+$color-disabled-text: #c0c4cc;
+$color-disabled-btn-bgc: #eeeeee;
+
+// 计数器
+$color-counter-bgc: #f5f7fa;
+$color-counter-text: #606266;
+$color-counter-hover-text: #409eff;
+$color-counter-disabled-text: #c0c4cc;
+
+// 边框
+$color-border: #dcdfe6;
+
+// 开关
+$color-switch-bgc: #dcdfe6;
+$color-switch-checked-bgc: #409eff;
+$color-switch-disabled-bgc: #eff1f5;
+$color-switch-disabled-text: #c0c4cc;
+$color-switch-disabled-active-text: #7ebfff;
+
+// 标签-dark-文字颜色
+$color-tag-dark-text: #fff;
+
+// 标签-默认
+$color-tag-default-bgc: #ecf5ff;
+$color-tag-default-text: #409eff;
+$color-tag-default-border: #dcdfe6;
+
+// 标签-成功
+$color-tag-success-bgc: #f0f9eb;
+$color-tag-success-text: #67c23a;
+$color-tag-success-border: #e1f3d8;
+
+// 标签-信息
+$color-tag-info-bgc: #f4f4f5;
+$color-tag-info-text: #909399;
+$color-tag-info-border: #e9e9eb;
+
+// 标签-警告
+$color-tag-warning-bgc: #fdf6ec;
+$color-tag-warning-text: #e6a23c;
+$color-tag-warning-border: #faecd8;
+
+// 标签-危险
+$color-tag-danger-bgc: #fef0f0;
+$color-tag-danger-text: #f56c6c;
+$color-tag-danger-border: #fbc4c4;
+
+$themes: (
+  default: $color-default-bgc,
+  primary: $color-primary-bgc,
+  success: $color-success-bgc,
+  info: $color-info-bgc,
+  warning: $color-warning-bgc,
+  danger: $color-danger-bgc,
+);
+
+// 链接的配色
+@mixin ea-link-theme($theme-name, $color) {
+  &.#{$theme-name} {
+    color: $color;
+
+    &:hover {
+      color: lighten($color, 10);
+    }
+
+    @if ($theme-name == "disabled") {
+      pointer-events: none;
+    }
+  }
+}
+
+@mixin clear-ul-default-style {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding-inline-start: 0;
+  unicode-bidi: unset;
+}
+
+@mixin input-default-theme {
+  box-sizing: border-box;
+  box-shadow: none;
+
+  border: 1px solid $color-border;
+  outline: 0;
+  transition: border 0.2s;
+  border-radius: 3px;
+
+  padding: 0.5rem;
+
+  line-height: 0.8;
+  font-size: 0.8rem;
+  scrollbar-width: none;
+
+  &:focus {
+    border-color: $color-primary-border;
+  }
+
+  &::placeholder {
+    color: $color-disabled-text;
+  }
+
+  &.invalid {
+    border-color: $color-danger-border;
+  }
+
+  &.disabled {
+    background-color: $color-disabled-btn-bgc;
+    color: $color-disabled-text;
+  }
+
+  &.ea-input_clear {
+    ::before {
+      content: "\e9c3";
+      display: block;
+    }
+  }
+}

package/components/globalConfig.js

@@ -0,0 +1,10 @@
+const globalConfig = {
+    fontelloCSS: 'https://cdn.jsdelivr.net/npm/easy-component-ui/components/ea-icon/css/fontello.css',
+};
+
+function setConfig(newConfig) {
+    Object.assign(globalConfig, newConfig);
+    document.dispatchEvent(new CustomEvent('configChanged', { detail: globalConfig }));
+}
+
+export { setConfig };

package/components/index.js

@@ -0,0 +1,67 @@
+import './ea-alert';
+import './ea-aside';
+import './ea-badge';
+import './ea-backtop';
+import './ea-breadcrumb-item';
+import './ea-breadcrumb';
+import './ea-button-group';
+import './ea-button';
+import './ea-calendar';
+import './ea-avatar';
+import './ea-carousel';
+import './ea-carousel-item';
+import './ea-checkbox-group';
+import './ea-checkbox';
+import './ea-collapse-item';
+import './ea-collapse';
+import './ea-container';
+import './ea-date-picker';
+import './ea-descriptions-item';
+import './ea-drawer';
+import './ea-descriptions';
+import './ea-empty';
+import './ea-footer';
+import './ea-form-item';
+import './ea-header';
+import './ea-icon';
+import './ea-image';
+import './ea-infinite-scroll';
+import './ea-form';
+import './ea-infinite-scroll-item';
+import './ea-input';
+import './ea-card';
+import './ea-link';
+import './ea-loading';
+import './ea-input-number';
+import './ea-main';
+import './ea-menu-item';
+import './ea-menu';
+import './ea-message';
+import './ea-menu-item-group';
+import './ea-message-box';
+import './ea-option-gropu';
+import './ea-option';
+import './ea-page-header';
+import './ea-progress';
+import './ea-pagination';
+import './ea-radio-group';
+import './ea-pane';
+import './ea-radio';
+import './ea-result';
+import './ea-skeleton';
+import './ea-rate';
+import './ea-select';
+import './ea-skeleton-item';
+import './ea-step';
+import './ea-submenu';
+import './ea-steps';
+import './ea-switch';
+import './ea-table-column';
+import './ea-tab';
+import './ea-table';
+import './ea-textarea';
+import './ea-tag';
+import './ea-time-picker';
+import './ea-tabs';
+import './ea-timeline';
+import './ea-timeline-item';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-component-ui",
-  "version": "2.0.5",
+  "version": "2.1.1",
   "description": "Easy-ui, 基于 Web Components 的 UI 组件库",
   "main": "index.js",
   "scripts": {
@@ -8,5 +8,5 @@
   },
   "keywords": [],
   "author": "Lumina <https://github.com/LuminaQAQ>",
-  "license": "ISC"
+  "license": "MIT"
 }

package/utils/Validator.js

@@ -1 +1,16 @@
-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)};
+export const Validator = {
+    required(value) {
+        if (typeof value === 'string') return value !== '';
+        else if (Array.isArray(value)) return value.length > 0;
+        else return false;
+    },
+    min(value, min) {
+        return value.length >= min;
+    },
+    max(value, max) {
+        return value.length <= max;
+    },
+    reg(value, reg) {
+        return reg.test(value);
+    },
+};

package/utils/createElement.js

@@ -1 +1,30 @@
-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};
+/**
+ * 创建元素
+ * @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');
+    if (name) slot.name = name;
+
+    return slot;
+};

package/utils/handleDefaultAttrIsTrue.js

@@ -1 +1,11 @@
-export const handleDefaultAttrIsTrue=e=>e="false"!==e&&!1!==e;
+export const handleDefaultAttrIsTrue = (attr) => {
+    if (attr === 'false' || attr === false) {
+        attr = false;
+    } else if (attr === 'true' || attr === true) {
+        attr = true;
+    } else {
+        attr = true;
+    }
+
+    return attr;
+}

package/utils/handleTemplate.js

@@ -1 +1,19 @@
-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){}};
+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) { }
+}  

package/utils/setStyle.js

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

package/utils/timeout.js

@@ -1 +1,16 @@
-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)};
+export const timeout = (fn, time = 0) => {
+    let timer = setTimeout(() => {
+        clearTimeout(timer);
+        timer = null;
+        fn();
+    }, time);
+}
+
+export const withTransitionTimeOut = (container, time = 300) => {
+    let timer = setTimeout(() => {
+        clearTimeout(timer);
+        timer = null;
+
+        container.classList.add('with-transition');
+    }, time);
+}

package/components/ea-icon/css/animation.css

@@ -1,85 +0,0 @@
-/*
-   Animation example, for spinners
-*/
-.animate-spin {
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  -webkit-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
-  display: inline-block;
-}
-@-moz-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-webkit-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-o-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-ms-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}