add: dialog

README.md

@@ -39,7 +39,7 @@ yarn docs:dev
 - [x] popconfirm 确认弹出框
 - [ ] select
 - [ ] datelist
-- [ ] dialog
+- [x] dialog
 - [x] message
 - [ ] progress
 - [ ] pagination

components/dialog/index.css

@@ -2,16 +2,26 @@
   display: contents;
 }
 .dialog{
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
   min-width: 200px;
   border: 0;
   border-radius: var(--border-radius-base, 4px);
   box-shadow: var(--shadow, 2px 2px 15px rgba(0,0,0,0.15));
   padding: 20px 24px;
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(.8) translateY(-50px);
 }
-.dialog:modal{
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
+.dialog::backdrop{
+  background-color: rgba(0,0,0,.45);
+}
+.dialog[open]{
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+  transition: var(--transition, .2s);
 }
 .icon{
   font-size: 22px;
@@ -39,7 +49,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 .footer{
   display: flex;

components/dialog/index.js

@@ -6,12 +6,22 @@ import style from "./index.css?inline" assert { type: "css" };
 export default class Dialog extends Base {
 	#dialog;
   #title;
+  #content;
   #btnClose;
   #btnCancel;
   #btnSubmit;
 
+  static open;
+	static show;
+	static alert;
+	static success;
+	static info;
+	static warning;
+	static error;
+	static confirm;
+
 	static get observedAttributes() {
-		return ["loading", "open", "title", "canceltext", "submittext"];
+		return ["loading", "open", "title", "content", "canceltext", "submittext"];
 	}
 
 	constructor() {
@@ -20,22 +30,23 @@ export default class Dialog extends Base {
 		this.adoptedStyle(style);
 		shadowRoot.innerHTML = `
       <dialog class="dialog" id="dialog" part="dialog">
-        <slot class="icon" name="icon"></slot>
+        <slot class="icon" name="icon" id="icon"></slot>
         <form class="form" method="dialog">
-          <xy-button id="btnClose" class="close" type="flat">
+          <xy-button id="btnClose" class="close" close type="flat">
             <xy-icon></xy-icon>
           </xy-button>
           <h4 class="title" id="title" part="title">dialog</h4>
-          <slot class="content"></slot>
+          <slot id="content" class="content"></slot>
           <slot class="footer" name="footer" part="footer">
-            <xy-button id="btnCancel" type="flat">取消</xy-button>
+            <xy-button id="btnCancel" type="flat" close>取消</xy-button>
             <xy-button id="btnSubmit" type="primary">确定</xy-button>
           </slot>
         </form>
       </dialog>
         `;
 		this.#dialog = shadowRoot.getElementById("dialog");
 		this.#title = shadowRoot.getElementById("title");
+    this.#content = shadowRoot.querySelector("#content");
 		this.#btnClose = shadowRoot.getElementById("btnClose");
 		this.#btnCancel = shadowRoot.getElementById("btnCancel");
 		this.#btnSubmit = shadowRoot.getElementById("btnSubmit");
@@ -57,6 +68,14 @@ export default class Dialog extends Base {
 		return this.getAttribute("canceltext") || "取消";
 	}
 
+  get content() {
+		return this.getAttribute("content") || "";
+	}
+
+	set content(value) {
+		this.setAttribute("content", value);
+	}
+
 	set submittext(value) {
 		this.setAttribute("submittext", value);
 	}
@@ -73,25 +92,6 @@ export default class Dialog extends Base {
 		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)",
-		},
-	};
-
   show() {
     this.open = true
   }
@@ -101,24 +101,21 @@ export default class Dialog extends Base {
   }
 
 	connectedCallback() {
-    this.#btnClose.addEventListener('click', () => {
-      this.open = false
-      this.dispatchEvent(new Event("cancel"));
+    this.#dialog.addEventListener('click', (ev) => {
+      if (ev.target.closest('[close]')){
+        this.open = false
+        this.dispatchEvent(new Event("cancel"));
+      }
     })
     this.#dialog.addEventListener('close', () => {
       this.dispatchEvent(new Event("close"));
       console.log('close')
     })
     this.#dialog.addEventListener('cancel', () => {
+      this.open = false
       this.dispatchEvent(new Event("cancel"));
       console.log('cancel')
     })
-    if (this.#btnCancel) {
-      this.#btnCancel.addEventListener('click', () => {
-        this.open = false
-        this.dispatchEvent(new Event("cancel"));
-      })
-    }
     if (this.#btnSubmit) {
       this.#btnSubmit.addEventListener('click', () => {
         this.dispatchEvent(new Event("submit"));
@@ -130,7 +127,9 @@ export default class Dialog extends Base {
     if (name === "open") {
       if (newValue !== null) {
         this.#dialog.showModal()
-        this.#btnClose.focus()
+        setTimeout(() => {
+          this.#btnClose.focus()
+        }, 50);
       } else {
         this.#dialog.close()
         this.loading = false
@@ -139,13 +138,16 @@ export default class Dialog extends Base {
     if (name === "title") {
 			this.#title.textContent = newValue
 		}
-    if (name === "canceltext") {
+    if (name === "content") {
+			this.#content.textContent = newValue;
+		}
+    if (name === "canceltext" && this.#btnCancel) {
 			this.#btnCancel.textContent = newValue;
 		}
-		if (name === "submittext") {
+		if (name === "submittext" && this.#btnSubmit) {
 			this.#btnSubmit.textContent = newValue;
 		}
-    if (name === "loading") {
+    if (name === "loading" && this.#btnSubmit) {
 			this.#btnSubmit.loading = newValue!==null;
 		}
 	}
@@ -155,3 +157,108 @@ if (!customElements.get("xy-dialog")) {
 	customElements.define("xy-dialog", Dialog);
 }
 
+// 静态方法
+Dialog.open = function({
+  type, 
+  title, 
+  content, 
+  submittext, 
+  canceltext = '取消', 
+  onsubmit = () => {}, 
+  oncancel = () => {}
+}) {
+  const typeMap = {
+		alert: {
+			name: "solid/triangle-exclamation",
+			color: "var(--waring-color, #faad14)",
+		},
+		confirm: {
+			name: "solid/circle-question",
+			color: "var(--waring-color, #faad14)",
+		},
+		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)",
+		},
+	};
+	const dialog = new this();
+  dialog.title = title;
+  dialog.content = content;
+  dialog.canceltext = canceltext;
+	dialog.shadowRoot.getElementById("icon").innerHTML = `
+  <xy-icon name="${typeMap[type].name}" color="${typeMap[type].color}"></xy-icon>
+  `;
+  if (type !== 'confirm') {
+    dialog.shadowRoot.getElementById("btnSubmit").toggleAttribute('close', true)
+    dialog.shadowRoot.getElementById("btnCancel").remove();
+    dialog.submittext = submittext || '知道了';
+  } else {
+    dialog.submittext = submittext || '确定';
+  }
+  dialog.addEventListener('cancel', oncancel);
+  dialog.addEventListener('close', dialog.remove);
+  dialog.addEventListener('submit', onsubmit);
+  document.body.append(dialog);
+  dialog.clientWidth;
+  dialog.open = true;
+	return dialog;
+}
+
+Dialog.show = function(type, ...params) {
+  console.log(params[0])
+  if (typeof params[0] === 'object') {
+    return this.open({
+      type,
+      ...params[0]
+    })
+  } 
+  // 简写语法
+  const [
+    content, 
+    onsubmit = () => {}, 
+    oncancel = () => {}
+  ] = params
+  return this.open({
+    type, 
+    title:type,
+    content,
+    onsubmit, 
+    oncancel
+  })
+}
+
+Dialog.alert = function(...params) {
+  return this.show('alert', ...params)
+}
+
+Dialog.success = function(...params) {
+  return this.show('success', ...params)
+}
+
+Dialog.info = function(...params) {
+  return this.show('info', ...params)
+}
+
+Dialog.warning = function(...params) {
+  return this.show('warning', ...params)
+}
+
+Dialog.confirm = function(...params) {
+  return this.show('confirm', ...params)
+}
+
+Dialog.error = function(...params) {
+  return this.show('error', ...params)
+}

components/loading/index.css

@@ -7,13 +7,15 @@
 .loading{
   width: 1em;
   height: 1em;
+  border-radius: 50%;
   margin: auto;
   animation: rotate 1s linear infinite;
   background: currentColor;
   -webkit-mask: 
   radial-gradient( closest-side circle, royalblue 99%, transparent 100%) center top/25% 25% no-repeat,
   radial-gradient( closest-side circle, transparent 49%, red 50% 99%, transparent 100%),
   conic-gradient(transparent 10%, royalblue 90%);
+  mask-composite: add, intersect;
   -webkit-mask-composite: source-over, source-in;
 }
 :host(:not(:empty)) .loading{

components/pop/index.js

@@ -1,11 +1,12 @@
 import Base from "../xy-base.js";
 import style from "./index.css?inline" assert { type: "css" };
 export default class Pop extends Base {
-  #documentClickEvent = [];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: "open" });
 		this.adoptedStyle(style);
+    this._documentClickEvent = [];
 	}
 
 	get dir() {
@@ -217,12 +218,22 @@ export default class Pop extends Base {
         this.target = target;
         this.open = true;
 			});
+      const autoclose = (ev) => {
+        if (ev.target.closest('[close]')){
+          this.open = false
+        }
+      }
+      this.shadowRoot.addEventListener('click', (ev) => {
+        if (ev.target.closest('[close]')){
+          this.open = false
+        }
+      })
 			const click = (ev) => {
 				if (!this.contains(ev.target) && !target.contains(ev.target)) {
 					this.open = false;
 				}
 			};
-      this.#documentClickEvent.push(click)
+      this._documentClickEvent.push(click)
       document.addEventListener("click", click);
 		}
 	}

components/popconfirm/index.js

@@ -22,7 +22,7 @@ export default class PopConfirm extends PopOver {
         <h4 class="title" id="title" part="title"></h4>
         <slot class="content" id="content"></slot>
         <div class="footer" part="footer">
-          <xy-button type="flat" size="small" id="cancel">取消</xy-button>
+          <xy-button type="flat" size="small" id="cancel" close>取消</xy-button>
           <xy-button type="primary" size="small" id="submit">确认</xy-button>
         </div>
       </div>
@@ -65,7 +65,7 @@ export default class PopConfirm extends PopOver {
     if (this.#mounted) return
 		this.#mounted = true
 		this.#btnCancel.addEventListener("click", () => {
-			this.open = false;
+			// this.open = false;
       this.dispatchEvent(new Event('cancel'))
 		});
 		this.#btnSubmit.addEventListener("click", () => {