fix: loading

XboxYan · Apr 3, 2023 · 6c709d2 · 6c709d2
1 parent cc3a6d2
commit 6c709d2
Show file tree

Hide file tree

Showing 8 changed files with 431 additions and 28 deletions.
diff --git a/components/dialog/index.css b/components/dialog/index.css
diff --git a/components/dialog/index.js b/components/dialog/index.js
@@ -0,0 +1,180 @@
+import Base from "../xy-base.js";
+import "../icon/index.js";
+import "../loading/index.js";
+import style from "./index.css?inline" assert { type: "css" };
+
+class XyDialog extends Base {
+	#dialog;
+
+	static get observedAttributes() {
+		return ["type", "icon", "loading"];
+	}
+
+	constructor() {
+		super();
+		const shadowRoot = this.attachShadow({ mode: "open" });
+		this.adoptedStyle(style);
+		shadowRoot.innerHTML = `
+      <dialog open>
+        <slot name="icon"><xy-icon name="solid/circle-question"></xy-icon></slot>
+        <form method="dialog">
+          <div class="header">
+            <h3 class="title">
+            </h3>
+            <xy-button type="flat" icon="solid/xmark"></xy-button>
+          </div>
+          <slot class="content"></slot>
+          <slot name="footer" part="footer">
+            <xy-button type="primary"></xy-button>
+          </slot>
+        </form>
+      </dialog>
+        `;
+		this.#dialog = shadowRoot.getElementById("icon");
+	}
+
+	get open() {
+		return this.getAttribute("open") !== null;
+	}
+
+	get loading() {
+		return this.getAttribute("loading") !== null;
+	}
+
+	get icon() {
+		return this.getAttribute("icon");
+	}
+
+	get type() {
+		return this.getAttribute("type");
+	}
+
+	set type(value) {
+		this.setAttribute("type", value);
+	}
+
+	set icon(value) {
+		this.setAttribute("icon", value);
+	}
+
+	set open(value) {
+		this.toggleAttribute("open", value);
+	}
+
+	set loading(value) {
+		this.toggleAttribute("loading", value);
+	}
+
+	#typeMap = {
+		info: {
+			name: "solid/circle-info",
+			color: "var(--info-color, #1890ff)",
+		},
+		success: {
+			name: "solid/circle-check",
+			color: "var(--success-color, #52c41a)",
+		},
+		warning: {
+			name: "solid/circle-exclamation",
+			color: "var(--waring-color, #faad14)",
+		},
+		error: {
+			name: "solid/circle-xmark",
+			color: "var(--error-color, #f4615c)",
+		},
+	};
+
+	connectedCallback() {
+		// this.addEventListener("transitionend", (ev) => {
+		// 	if (ev.propertyName === "transform" && !this.open) {
+		// 		this.dispatchEvent(new Event("close"));
+		// 		this.remove();
+		// 	}
+		// });
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+	// 	if (name == "type") {
+	// 		this.#icon.name = this.#typeMap[newValue].name;
+	// 		this.#icon.color = this.#typeMap[newValue].color;
+	// 	}
+	// 	if (name == "icon") {
+	// 		this.#icon.name = newValue;
+	// 	}
+	// 	if (name == "loading") {
+	// 		if (!this.#loadEl) {
+	// 			this.#loadEl = document.createElement("xy-loading");
+	// 		}
+	// 		this.loading = newValue !== null;
+	// 		if (newValue !== null) {
+	// 			this.shadowRoot.prepend(this.#loadEl);
+	// 		} else {
+	// 			this.shadowRoot.removeChild(this.#loadEl);
+	// 		}
+	// 	}
+	}
+}
+
+if (!customElements.get("xy-dialog")) {
+	customElements.define("xy-dialog", XyDialog);
+}
+
+export const open = (type, text, duration, onclose) => {
+	const message = new XyMessage();
+	message.timer && clearTimeout(message.timer);
+	if (type === "loading") {
+		message.loading = true;
+	} else {
+		message.type = type;
+	}
+	message.textContent = text || "";
+	message.render();
+	if (typeof duration === "function") {
+		duration();
+	} else {
+		message.onclose = onclose;
+		if (duration !== 0 && !message.loading) {
+			message.timer = setTimeout(() => {
+				message.open = false;
+			}, duration || 3000);
+		}
+	}
+	return message;
+};
+
+export const info = (...params) => {
+	return open("info", ...params);
+};
+
+export const success = (...params) => {
+	return open("success", ...params);
+};
+export const warning = (...params) => {
+	return open("warning", ...params);
+};
+export const error = (...params) => {
+	return open("error", ...params);
+};
+export const loading = (...params) => {
+	return open("loading", ...params);
+};
+export const show = ({
+	type = "success",
+	icon,
+	text,
+	duration = 3000,
+	onclose,
+}) => {
+	const message = open(type, text, duration, onclose);
+	message.icon = icon;
+	return message;
+};
+
+export default {
+	info,
+	success,
+	error,
+	warning,
+	loading,
+	show,
+};
diff --git a/components/loading/index.css b/components/loading/index.css
@@ -2,21 +2,19 @@
   display:inline-flex;
   align-items: center;
   justify-content:center;
-  color:var(--primary-color,#42b983);
+  color:var(--primary-color,royalblue);
 }
 .loading{
   width: 1em;
   height: 1em;
   margin: auto;
-  animation: rotate 1.4s linear infinite;
-}
-.circle {
-  stroke: currentColor;
-  animation:  progress 1.4s ease-in-out infinite;
-  stroke-dasharray: 80px, 200px;
-  stroke-dashoffset: 0px;
-  stroke-linecap: round;
-  transition:.3s;
+  animation: rotate 1s linear infinite;
+  background: currentColor;
+  -webkit-mask: 
+  radial-gradient( closest-side circle, red 50%, transparent 51% 99%, red 100%),
+  radial-gradient( closest-side circle, red 99%, transparent 100%) center top/25% 25% no-repeat,
+  conic-gradient(transparent 10%, red 90%);
+  -webkit-mask-composite: destination-out, destination-over;
 }
 :host(:not(:empty)) .loading{
   margin:.5em;
@@ -25,18 +23,4 @@
   to{
       transform: rotate(360deg); 
   }
-}
-@keyframes progress {
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0px; 
-  }
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px; 
-  }
-  100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px; 
-  } 
 }
diff --git a/components/loading/index.js b/components/loading/index.js
@@ -12,9 +12,7 @@ export default class XyLoading extends Base {
 		const shadowRoot = this.attachShadow({ mode: "open" });
 		this.adoptedStyle(style);
 		shadowRoot.innerHTML = `
-    <svg class="loading" part="loading" id="loading" viewBox="22 22 44 44">
-      <circle class="circle" cx="44" cy="44" r="20" fill="none" stroke-width="4"></circle>
-    </svg>
+    <i class="loading" part="loading" id="loading"></i>
     <slot></slot>
       `;
 		this.#loading = shadowRoot.getElementById("loading");

diff --git a/components/message/index.js b/components/message/index.js
@@ -1,7 +1,6 @@
 import Base from "../xy-base.js";
 import "../icon/index.js";
 import "../loading/index.js";
-import "../button/index.js";
 import style from "./index.css?inline" assert { type: "css" };
 
 class XyMessage extends Base {

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -46,6 +46,7 @@ export default defineConfig({
           items: [
             { text: "popconfirm 确认弹出框", link: "/components/popconfirm" },
             { text: "message 提示信息", link: "/components/message" },
+            { text: "dialog 弹窗", link: "/components/dialog" },
           ]
         }
       ],