Start dialog (not working)

docs/_sidebar.md

@@ -16,6 +16,7 @@
   - [Alert](/components/alert.md)
   - [Button](/components/button.md)
   - [Checkbox](/components/checkbox.md)
+  - [Dialog](/components/dialog.md)
   - [Dropdown](/components/dropdown.md)
   - [Dropdown Item](/components/dropdown-item.md)
   - [Dropdown Divider](/components/dropdown-divider.md)

src/components.d.ts

@@ -88,6 +88,9 @@ export namespace Components {
          */
         "value": string;
     }
+    interface SlDialog {
+        "open": boolean;
+    }
     interface SlDropdown {
         "close": () => Promise<void>;
         "open": () => Promise<void>;
@@ -543,6 +546,12 @@ declare global {
         prototype: HTMLSlCheckboxElement;
         new (): HTMLSlCheckboxElement;
     };
+    interface HTMLSlDialogElement extends Components.SlDialog, HTMLStencilElement {
+    }
+    var HTMLSlDialogElement: {
+        prototype: HTMLSlDialogElement;
+        new (): HTMLSlDialogElement;
+    };
     interface HTMLSlDropdownElement extends Components.SlDropdown, HTMLStencilElement {
     }
     var HTMLSlDropdownElement: {
@@ -643,6 +652,7 @@ declare global {
         "sl-alert": HTMLSlAlertElement;
         "sl-button": HTMLSlButtonElement;
         "sl-checkbox": HTMLSlCheckboxElement;
+        "sl-dialog": HTMLSlDialogElement;
         "sl-dropdown": HTMLSlDropdownElement;
         "sl-dropdown-divider": HTMLSlDropdownDividerElement;
         "sl-dropdown-item": HTMLSlDropdownItemElement;
@@ -732,6 +742,9 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface SlDialog {
+        "open"?: boolean;
+    }
     interface SlDropdown {
         /**
           * The preferred placement of the dropdown menu. Note that the actual placement may vary as needed to keep the menu inside of the viewport.
@@ -1134,6 +1147,7 @@ declare namespace LocalJSX {
         "sl-alert": SlAlert;
         "sl-button": SlButton;
         "sl-checkbox": SlCheckbox;
+        "sl-dialog": SlDialog;
         "sl-dropdown": SlDropdown;
         "sl-dropdown-divider": SlDropdownDivider;
         "sl-dropdown-item": SlDropdownItem;
@@ -1159,6 +1173,7 @@ declare module "@stencil/core" {
             "sl-alert": LocalJSX.SlAlert & JSXBase.HTMLAttributes<HTMLSlAlertElement>;
             "sl-button": LocalJSX.SlButton & JSXBase.HTMLAttributes<HTMLSlButtonElement>;
             "sl-checkbox": LocalJSX.SlCheckbox & JSXBase.HTMLAttributes<HTMLSlCheckboxElement>;
+            "sl-dialog": LocalJSX.SlDialog & JSXBase.HTMLAttributes<HTMLSlDialogElement>;
             "sl-dropdown": LocalJSX.SlDropdown & JSXBase.HTMLAttributes<HTMLSlDropdownElement>;
             "sl-dropdown-divider": LocalJSX.SlDropdownDivider & JSXBase.HTMLAttributes<HTMLSlDropdownDividerElement>;
             "sl-dropdown-item": LocalJSX.SlDropdownItem & JSXBase.HTMLAttributes<HTMLSlDropdownItemElement>;

src/components/dialog/dialog.scss

@@ -0,0 +1,33 @@
+@import 'component';
+
+.sl-dialog {
+  display: none;
+  position: relative;
+  z-index: var(--sl-z-index-dialog);
+
+  &.sl-dialog--open {
+    display: block;
+  }
+}
+
+.sl-dialog__overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.sl-dialog__box {
+  position: relative;
+  z-index: calc(var(--sl-z-index-dialog) + 1);
+  background: var(--sl-color-white);
+  border: solid 1px var(--sl-color-gray-90);
+  border-radius: var(--sl-border-radius-medium);
+  box-shadow: var(--sl-shadow-x-large);
+  padding: var(--sl-spacing-medium);
+}

src/components/dialog/dialog.tsx

@@ -0,0 +1,81 @@
+// Overlay appended to the body
+
+// Dialog wrapper position: fixed
+
+// Dialog is centered in that
+
+// Multiple dialogs can show, but only one overlay will ever appear
+
+import { Component, Element, Prop, Watch, h } from '@stencil/core';
+
+const overlay = document.createElement('div');
+overlay.classList.add('sl-dialog-overlay');
+
+let openDialogs = [];
+
+@Component({
+  tag: 'sl-dialog',
+  styleUrl: 'dialog.scss',
+  shadow: true
+})
+export class Dialog {
+  constructor() {
+    this.handleOverlayClick = this.handleOverlayClick.bind(this);
+  }
+
+  @Element() host: HTMLElement;
+
+  @Prop() open = false;
+
+  @Watch('open')
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+
+  handleOverlayClick() {
+    this.hide();
+  }
+
+  show() {
+    openDialogs.map(dialog => (dialog.open = false));
+    document.body.appendChild(overlay);
+    openDialogs.push(this.host);
+    this.open = true;
+
+    overlay.addEventListener('click', this.handleOverlayClick);
+  }
+
+  hide() {
+    this.open = false;
+    document.body.removeChild(overlay);
+    openDialogs = openDialogs.filter(dialog => this.host !== dialog);
+    overlay.removeEventListener('click', this.handleOverlayClick);
+  }
+
+  render() {
+    return (
+      <div
+        class={{
+          'sl-dialog': true,
+          'sl-dialog--open': this.open
+        }}
+      >
+        <div class="sl-dialog__overlay" onClick={() => (this.open = false)}>
+          <div class="sl-dialog__box">
+            <header class="sl-dialog__header">
+              <slot name="header" />
+            </header>
+
+            <div class="sl-dialog__body">
+              <slot />
+            </div>
+
+            <footer class="sl-dialog__footer">
+              <slot name="footer" />
+            </footer>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/dialog/readme.md

@@ -0,0 +1,33 @@
+# Dialog
+
+```html preview
+<sl-button data-dialog="dialog-1">Open Dialog</sl-button>
+
+<sl-dialog id="dialog-1">
+  This is a dialog
+</sl-dialog>
+
+<script>
+  [...document.querySelectorAll('[data-dialog]')].map(button => {
+    button.addEventListener('click', event => {
+      document.getElementById(event.target.getAttribute('data-dialog')).open = true;
+    });
+  });
+</script>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type      | Default |
+| -------- | --------- | ----------- | --------- | ------- |
+| `open`   | `open`    |             | `boolean` | `false` |
+
+
+----------------------------------------------
+
+

src/styles/shoelace.scss

@@ -140,7 +140,8 @@
   --sl-z-index-default: 1;
   --sl-z-index-panel: 80;
   --sl-z-index-notification: 90;
-  --sl-z-index-dialog: 100;
+  --sl-z-index-overlay: 100;
+  --sl-z-index-dialog: 600;
 }
 
 //
@@ -271,3 +272,14 @@ a:hover {
     padding: var(--sl-tooltip-padding-y) var(--sl-tooltip-padding-x);
   }
 }
+
+// Overlays
+.sl-dialog-overlay {
+  position: fixed;
+  z-index: var(--sl-z-index-overlay);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.1);
+}