feat(Dialog): added Dialog

packages/api-generator/src/Dialog.json

@@ -0,0 +1,139 @@
+{
+  "version": 3,
+  "name": "Dialog",
+  "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "class",
+      "kind": "const",
+      "static": false,
+      "readonly": true,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "localName": "klass"
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "active",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "persistent",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "disabled",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "width",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "defaultValue": "500px"
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "fullscreen",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "transition",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "any",
+        "type": "any"
+      }
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "overlay",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "any",
+        "type": "any"
+      }
+    }
+  ],
+  "computed": [],
+  "methods": [],
+  "components": [],
+  "description": null,
+  "keywords": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": null,
+      "visibility": "public",
+      "parameters": []
+    }
+  ],
+  "refs": []
+}

packages/api-generator/src/all.json

@@ -13,6 +13,7 @@
     "CardTitle",
     "Checkbox",
     "Chip",
+    "Dialog",
     "Divider",
     "ExpansionPanel",
     "ExpansionPanels",

packages/api-generator/src/index.js

@@ -12,6 +12,7 @@ export { default as CardText } from './CardText.json';
 export { default as CardTitle } from './CardTitle.json';
 export { default as Checkbox } from './Checkbox.json';
 export { default as Chip } from './Chip.json';
+export { default as Dialog } from './Dialog.json';
 export { default as Divider } from './Divider.json';
 export { default as ExpansionPanel } from './ExpansionPanel.json';
 export { default as ExpansionPanels } from './ExpansionPanels.json';

packages/docs/src/examples/components/dialog/basic.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { Button, Dialog } from 'svelte-materialify/src';
+
+  let active = false;
+
+  function open() {
+    active = true;
+  }
+</script>
+
+<div class="text-center">
+  <Button on:click={open}>Open Dialog</Button>
+</div>
+
+<Dialog class="pa-4" bind:active>
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem aperiam quia
+  esse impedit libero mollitia tempore nisi dolore ut, quasi incidunt sunt
+  sapiente vero iusto necessitatibus eius nulla dignissimos laboriosam.
+</Dialog>

packages/docs/src/examples/components/dialog/fullscreen.svelte

@@ -0,0 +1,67 @@
+<script>
+  import {
+    Button,
+    Dialog,
+    Card,
+    CardTitle,
+    CardText,
+    CardActions,
+    TextField,
+    Row,
+    Col,
+  } from 'svelte-materialify/src';
+
+  let active = false;
+
+  function open() {
+    active = true;
+  }
+  function close() {
+    active = false;
+  }
+</script>
+
+<div class="text-center">
+  <Button on:click={open}>Open Dialog</Button>
+</div>
+
+<Dialog fullscreen bind:active>
+  <Card>
+    <CardTitle>
+      <h4>Form</h4>
+    </CardTitle>
+    <CardText>
+      <Row>
+        <Col cols="6">
+          <TextField>First Name</TextField>
+        </Col>
+        <Col cols="6">
+          <TextField>Last Name</TextField>
+        </Col>
+        <Col cols="12">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+            excepturi obcaecati adipisci doloribus eius fugiat. Optio porro
+            totam nemo aspernatur possimus? Sapiente adipisci perspiciatis rerum
+            illum laboriosam reprehenderit ea tenetur fuga? Aut eaque possimus
+            nostrum nihil rerum ea illum qui quae. Animi veritatis culpa enim
+            alias ad soluta et libero.
+          </p>
+        </Col>
+        <Col cols="4">
+          <TextField filled>Country</TextField>
+        </Col>
+        <Col cols="4">
+          <TextField outlined>State</TextField>
+        </Col>
+        <Col cols="4">
+          <TextField solo placeholder="City" />
+        </Col>
+      </Row>
+    </CardText>
+    <CardActions class="justify-end">
+      <Button on:click={close} text>Save</Button>
+      <Button on:click={close} text class="red-text">Close</Button>
+    </CardActions>
+  </Card>
+</Dialog>

packages/docs/src/examples/components/dialog/index.js

@@ -0,0 +1,4 @@
+export { default as basic } from './basic.svelte';
+export { default as modal } from './modal.svelte';
+export { default as fullscreen } from './fullscreen.svelte';
+export { default as nested } from './nested.svelte';

packages/docs/src/examples/components/dialog/modal.svelte

@@ -0,0 +1,37 @@
+<script>
+  import {
+    Button,
+    Dialog,
+    Card,
+    CardTitle,
+    CardText,
+    CardActions,
+  } from 'svelte-materialify/src';
+
+  let active = false;
+
+  function open() {
+    active = true;
+  }
+  function close() {
+    active = false;
+  }
+</script>
+
+<div class="text-center">
+  <Button on:click={open}>Open Dialog</Button>
+</div>
+
+<Dialog persistent bind:active>
+  <Card>
+    <CardTitle>Do you Agree?</CardTitle>
+    <CardText>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia
+      deleniti natus dolore, rerum hic beatae officiis at ea sequi labore.
+    </CardText>
+    <CardActions>
+      <Button on:click={close} text>Yes</Button>
+      <Button on:click={close} text class="red-text">Yes (but in red).</Button>
+    </CardActions>
+  </Card>
+</Dialog>

packages/docs/src/examples/components/dialog/nested.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { Button, Dialog } from 'svelte-materialify/src';
+
+  let active1; let
+    active2;
+</script>
+
+<div class="text-center">
+  <Button on:click={() => (active1 = true)}>Open Dialog 1</Button>
+  <Button on:click={() => (active2 = true)}>Open Dialog 2</Button>
+</div>
+
+<Dialog class="pa-4 text-center" bind:active={active1}>
+  <Button on:click={() => (active2 = true)}>Open Dialog 2</Button>
+  <br /><br />
+  <p>This is Dialog 1</p>
+</Dialog>
+
+<Dialog class="pa-4 text-center" bind:active={active2}>
+  <p>This is Dialog 2</p>
+  <p>
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste quia possimus
+    tempore maxime vel, fugiat neque ab accusamus numquam incidunt?
+  </p>
+</Dialog>

packages/docs/src/helpers/routes.js

@@ -48,6 +48,7 @@ export default [
       { text: 'Button Groups', href: '/components/button-groups/' },
       { text: 'Cards', href: '/components/cards/' },
       { text: 'Chips', href: '/components/chips/' },
+      { text: 'Dialog', href: '/components/dialog/' },
       { text: 'Divider', href: '/components/divider/' },
       { text: 'Grid', href: '/components/grid/' },
       { text: 'Icons', href: '/components/icons/' },

packages/docs/src/routes/components/dialog.svx

@@ -0,0 +1,54 @@
+---
+title: Dialog Component
+---
+
+<script context="module">
+  export async function preload() {
+    let examples = await this.fetch('examples/components/dialog.json');
+    examples = await examples.json();
+    return { examples }
+  }
+</script>
+
+<script>
+  import { API, Example } from '@shared';
+  import { Dialog as doc } from 'svelte-materialify-api/dist';
+  import * as Examples from '@examples/components/dialog';
+  export let examples;
+</script>
+
+# Dialog
+
+The `Dialog` component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive.
+
+## API
+
+<API {doc} />
+
+## Examples
+
+Below is a collection of simple to complex examples.
+
+## Basic
+
+This is a simple dialog with just basic logic.
+
+<Example code={examples.basic} component={Examples.basic} />
+
+## Modal
+
+Using the `persistent` prop will not close the dialog the overlay is clicked.
+
+<Example code={examples.modal} component={Examples.modal} />
+
+## Fullscreen
+
+Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.
+
+<Example code={examples.fullscreen} component={Examples.fullscreen} />
+
+## Nested
+
+Dialogs can be nested: you can open one dialog from another.
+
+<Example code={examples.nested} component={Examples.nested} />