support setting top margin

dialog.js

@@ -27,7 +27,7 @@ export class Dialog extends HTMLElement {
     const style = document.createElement('style')
     style.textContent = `
       dialog {
-        margin-top: 120px;
+        margin-top: var(--margin-top, --120px);
         min-width: 200px;
         border: 1px solid rgba(0, 0, 0, 0.3);
         border-radius: 6px;
@@ -59,8 +59,8 @@ export class Dialog extends HTMLElement {
     this.footerEl.setAttribute('part', 'footer')
   }
 
-  open() {
-    this.dialogEl.showModal();
+  open(anchor = undefined) {
+    this.dialogEl.showModal()
     this.dialogEl.classList.add('opened')
   }
 
@@ -70,7 +70,7 @@ export class Dialog extends HTMLElement {
     setTimeout(() => {
       this.dialogEl.close()
       this.dialogEl.classList.remove('closing')
-    }, 500)
+    }, 350)
   }
 
   clickedInside(e, el) {
@@ -82,4 +82,12 @@ export class Dialog extends HTMLElement {
       e.clientX <= rect.left + rect.width
     )
   }
+
+  set top(v) {
+    style.setProperty('--margin-top', `${v}px`)
+  }
+
+  get top() {
+    return style.getProperty('--margin-top')
+  }
 }