easy-component-ui 2.1.1 → 3.0.0

package/dist/components/ea-layout.js

@@ -0,0 +1,125 @@
+var a = Object.defineProperty;
+var l = (s, t, e) => t in s ? a(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var r = (s, t, e) => l(s, typeof t != "symbol" ? t + "" : t, e);
+import { B as o } from "./Base.js";
+import { s as n } from "../css/ea-col.style.js";
+import { s as i } from "../css/ea-row.style.js";
+class p extends o {
+  constructor() {
+    super();
+    /** 
+     * @typedef {Object} State
+     * @property {Number} span 列数
+     * @property {Number} offset 列偏移
+     * @property {Number} push 列向右移动
+     * @property {Number} pull 列向左移动
+     */
+    /** @type {State} */
+    r(this, "state", this.properties({
+      span: {
+        type: Number,
+        default: 24,
+        observer: (e) => {
+          this.style.setProperty("--ea-col-span", e);
+        }
+      },
+      offset: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-col-offset", e);
+        }
+      },
+      push: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-col-push", e);
+        }
+      },
+      pull: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-col-pull", e);
+        }
+      },
+      tag: {
+        type: String,
+        default: "div",
+        observer: (e) => {
+        }
+      }
+    }));
+    this.stylesheet = n, this.$render();
+  }
+  static get observedAttributes() {
+    return ["span", "offset", "push", "pull", "tag"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <${this.tag} class="ea-row" part="container">
+                <slot></slot>
+            </${this.tag}>
+        `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+window.customElements.get("ea-col") || window.customElements.define("ea-col", p);
+class u extends o {
+  constructor() {
+    super();
+    /** 
+     * @typedef {Object} State
+     * @property {string} gutter - 列类型
+     * @property {string} justify - 列对齐方式
+     * @property {string} align - 列对齐方式
+     */
+    /** @type {State} */
+    r(this, "state", this.properties({
+      gutter: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-row-gutter", e / 2 + "px");
+        }
+      },
+      justify: {
+        type: ["start", "end", "center", "space-around", "space-between", "space-evenly"],
+        default: "start",
+        observer: (e) => {
+          this.style.setProperty("--ea-row-justify", e);
+        }
+      },
+      align: {
+        type: ["top", "middle", "bottom"],
+        default: "",
+        observer: (e) => {
+        }
+      },
+      tag: {
+        type: String,
+        default: "div",
+        observer: (e) => {
+        }
+      }
+    }));
+    this.stylesheet = i, this.$render();
+  }
+  static get observedAttributes() {
+    return ["gutter", "justify", "align", "tag"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <${this.tag} class="ea-row" part="container">
+                <slot></slot>
+            </${this.tag}>
+        `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+window.customElements.get("ea-row") || window.customElements.define("ea-row", u);

package/dist/components/ea-link.js

@@ -0,0 +1,95 @@
+var h = Object.defineProperty;
+var r = (t) => {
+  throw TypeError(t);
+};
+var u = (t, s, e) => s in t ? h(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var l = (t, s, e) => u(t, typeof s != "symbol" ? s + "" : s, e), o = (t, s, e) => s.has(t) || r("Cannot " + e);
+var n = (t, s, e) => (o(t, s, "read from private field"), e ? e.call(t) : s.get(t)), d = (t, s, e) => s.has(t) ? r("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), c = (t, s, e, a) => (o(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
+import { B as p } from "./Base.js";
+import { s as f } from "../css/ea-link.style.js";
+var i;
+class m extends p {
+  constructor() {
+    super();
+    /** @type {HTMLAnchorElement} */
+    d(this, i);
+    /** 
+     * @typedef {Object} LinkState
+     * @property {string} type
+     * @property {Boolean} disabled
+     * @property {Boolean} underline
+     * @property {string} href
+     * @property {string} icon
+     */
+    /** @type {LinkState} */
+    l(this, "state", this.properties({
+      type: {
+        type: ["normal", "primary", "success", "info", "warning", "danger"],
+        default: "normal",
+        observer: (e) => {
+          n(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          n(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      underline: {
+        type: ["always", "hover", "never"],
+        default: "",
+        observer: (e) => {
+          n(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      href: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          n(this, i).href = e;
+        }
+      },
+      icon: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (!e) return;
+          const a = document.createElement("ea-icon");
+          a.icon = e, a.part = "icon", n(this, i).insertBefore(a, n(this, i).firstChild);
+        }
+      }
+    }));
+    this.stylesheet = f, this.$render();
+  }
+  static get observedAttributes() {
+    return ["type", "disabled", "underline", "href", "icon"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-link", {
+      ["--" + this.type]: this.type,
+      ["--underline-" + this.underline]: this.underline,
+      "--disabled": this.disabled
+    });
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <a class="ea-link" part="container" tabindex="-1">
+        <slot></slot>
+      </a>
+    `, c(this, i, this.shadowRoot.querySelector(".ea-link"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+i = new WeakMap();
+window.customElements.get("ea-link") || window.customElements.define("ea-link", m);
+export {
+  m as EaLink
+};

package/dist/components/ea-loading.js

@@ -0,0 +1,151 @@
+var p = (t) => {
+  throw TypeError(t);
+};
+var c = (t, i, e) => i.has(t) || p("Cannot " + e);
+var n = (t, i, e) => (c(t, i, "read from private field"), e ? e.call(t) : i.get(t)), l = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), d = (t, i, e, o) => (c(t, i, "write to private field"), o ? o.call(t, e) : i.set(t, e), e), h = (t, i, e) => (c(t, i, "access private method"), e);
+import { B as _ } from "./Base.js";
+import "./ea-icon.js";
+const b = `
+.ea-loading_wrap {
+  position: relative;
+}
+.ea-loading_wrap .ea-loading_mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: hsla(0, 0%, 100%, 0.9);
+  z-index: 1;
+  transition: background-color 0.2s;
+}
+.ea-loading_wrap .ea-loading_spinner,
+.ea-loading_wrap .ea-loading_text {
+  color: #409eff;
+}
+.ea-loading_wrap .ea-loading_spinner {
+  font-size: 2rem;
+}
+.ea-loading_wrap .ea-loading_text {
+  margin-left: 0.5rem;
+}
+.ea-loading_wrap.ea-loading_wrap--fullscreen {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 3000;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.ea-loading_wrap.ea-loading_wrap--loading .ea-loading_mask {
+  display: flex;
+}
+`;
+var s, a, r, g, u;
+class m extends _ {
+  constructor() {
+    super();
+    l(this, g);
+    l(this, s);
+    l(this, a);
+    l(this, r);
+    const e = this.attachShadow({ mode: "open" });
+    e.innerHTML = `
+        <div class="ea-loading_wrap" part="container">
+            <div class="ea-loading_mask" part="mask-wrap">
+                <ea-icon icon="icon-spin6 animate-spin" class="ea-loading_spinner" part="icon"></ea-icon>
+            </div>
+            <div class="ea-loading_content" part="content-wrap">
+                <slot></slot>
+            </div>
+        </div>
+        `, d(this, s, e.querySelector(".ea-loading_wrap")), d(this, a, e.querySelector(".ea-loading_mask")), d(this, r, e.querySelector(".ea-loading_spinner")), this.build(e, b);
+  }
+  // ------- loading 加载状态 -------
+  // #region
+  get loading() {
+    return this.getAttrBoolean("loading") || !1;
+  }
+  set loading(e) {
+    this.setAttribute("loading", e), n(this, s).classList.toggle("ea-loading_wrap--loading", e), h(this, g, u).call(this, this.fullscreen, e, this.lock);
+  }
+  // #endregion
+  // ------- end -------
+  // ------- spinner 加载图标 -------
+  // #region
+  get spinner() {
+    return this.getAttribute("spinner") || "icon-spin6";
+  }
+  set spinner(e) {
+    this.setAttribute("spinner", e), n(this, r).icon = `${e} animate-spin`;
+  }
+  // #endregion
+  // ------- end -------
+  // ------- spinner-size 加载图标大小 -------
+  // #region
+  get spinnerSize() {
+    return this.getAttrNumber("spinner-size") || 16;
+  }
+  set spinnerSize(e) {
+    this.setAttribute("spinner-size", e), n(this, r).style.fontSize = `${e}px`;
+  }
+  // #endregion
+  // ------- end -------
+  // ------- background 背景颜色 -------
+  // #region
+  get background() {
+    return this.getAttribute("background") || "hsla(0, 0%, 100%, 0.9)";
+  }
+  set background(e) {
+    this.setAttribute("background", e), n(this, a).style.backgroundColor = e;
+  }
+  // #endregion
+  // ------- end -------
+  // ------- text 文本 -------
+  // #region
+  get text() {
+    return this.getAttribute("text") || "";
+  }
+  set text(e) {
+    e && this.setAttribute("text", e);
+  }
+  // #endregion
+  // ------- end -------
+  // ------- fullscreen 全屏 -------
+  // #region
+  get fullscreen() {
+    return this.getAttrBoolean("fullscreen") || !1;
+  }
+  set fullscreen(e) {
+    e && this.setAttribute("fullscreen", e);
+  }
+  // #endregion
+  // ------- end -------
+  // ------- lock 全屏是否锁定 -------
+  // #region
+  get lock() {
+    return this.getAttrBoolean("lock") || !1;
+  }
+  set lock(e) {
+    e && this.setAttribute("lock", e);
+  }
+  connectedCallback() {
+    if (this.fullscreen = this.fullscreen, this.loading = this.loading, this.spinnerSize = this.spinnerSize, this.spinner = this.spinner, this.background = this.background, this.text) {
+      const e = document.createElement("div");
+      e.className = "ea-loading_text", e.innerHTML = this.text, n(this, a).appendChild(e);
+    }
+  }
+}
+s = new WeakMap(), a = new WeakMap(), r = new WeakMap(), g = new WeakSet(), // #endregion
+// ------- end -------
+u = function(e, o, f) {
+  e && (n(this, s).classList.toggle("ea-loading_wrap--fullscreen", o), f && (document.body.style.overflow = o ? "hidden" : "auto"));
+};
+customElements.get("ea-loading") || customElements.define("ea-loading", m);
+export {
+  m as EaLoading
+};