[#44] Adds Dialog Component

config/tailwind/dialog.js

@@ -0,0 +1,45 @@
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(({ addComponents }) => {
+  addComponents({
+    '.dialog': {
+      '@apply invisible opacity-0 fixed inset-24 overflow-hidden z-50 open:visible m-auto bg-white p-24 text-black dark:border dark:border-gray-500 dark:bg-gray-900 dark:text-white rounded':
+        {},
+      '&[open]': {
+        animation:
+          'dialog-in var(--dialog-transition-duration, 300ms) cubic-bezier(0.2, 0, 0.13, 1) forwards',
+      },
+      '&::backdrop': {
+        animation:
+          'dialog-backdrop-in var(--dialog-transition-duration, 300ms) cubic-bezier(0.2, 0, 0.13, 1) forwards',
+        '@apply bg-black/80 backdrop-blur-sm': {},
+      },
+      '&[data-dialog-status="closing"]': {
+        animation:
+          'dialog-out var(--dialog-transition-duration, 300ms) cubic-bezier(0.2, 0, 0.13, 1) forwards',
+
+        '&::backdrop': {
+          animation:
+            'dialog-backdrop-out var(--dialog-transition-duration, 300ms) cubic-bezier(0.2, 0, 0.13, 1) forwards',
+        },
+      },
+      // Animation Keyframes
+      '@keyframes dialog-in': {
+        '0%': { transform: 'translateY(2rem)', opacity: 0 },
+        '100%': { transform: 'translateY(0px)', opacity: 1 },
+      },
+      '@keyframes dialog-out': {
+        '0%': { transform: 'scale(1)', opacity: 1 },
+        '100%': { transform: 'scale(0.9)', opacity: 0 },
+      },
+      '@keyframes dialog-backdrop-in': {
+        '0%': { opacity: 0 },
+        '100%': { opacity: 1 },
+      },
+      '@keyframes dialog-backdrop-out': {
+        '0%': { opacity: 1 },
+        '100%': { opacity: 0 },
+      },
+    },
+  })
+})

package.json

@@ -27,6 +27,7 @@
     "vite-plugin-static-copy": "^1.0.6"
   },
   "dependencies": {
+    "@alpinejs/focus": "^3.14.1",
     "alpinejs": "^3.14.1"
   }
 }

src/js/app.js

@@ -1,6 +1,9 @@
 import '../css/app.css'
 
 import Alpine from 'alpinejs'
+import focus from '@alpinejs/focus'
+
+Alpine.plugin(focus)
 
 // @ts-ignore
 window.Alpine = Alpine

tailwind.config.js

@@ -1,4 +1,5 @@
 import buttons from './config/tailwind/buttons'
+import dialog from './config/tailwind/dialog'
 
 /**
  Helper function to pair key and value together
@@ -42,5 +43,5 @@ export default {
     },
     extend: {},
   },
-  plugins: [buttons],
+  plugins: [buttons, dialog],
 }

templates/_components/dialog.twig

@@ -0,0 +1,78 @@
+{% from '_macros/icon.twig' import icon %}
+
+{# @var string id #}
+{% set id = id ?? null %}
+
+{# @var boolean hideClose #}
+{% set hideClose = hideClose ?? false %}
+
+{# @var array triggerProps #}
+{% set triggerProps = triggerProps ?? {} %}
+
+{# @var string|null class #}
+{% set class = class ?? null %}
+
+{# @var string|null content #}
+{% set content = content ?? null %}
+
+<div
+  id="{{ id }}"
+  @dialog:open.window="handleOpenEvent"
+  x-data="{
+    open: false,
+
+    // Close the dialog when the user clicks backdrop
+    handleDialogClick(event) {
+      (event.target === $refs.dialogRef) && this.handleDialogClose()
+    },
+
+    handleOpenEvent(event) {
+      // Only open if we're targeting this dialog
+      console.log(event)
+      if (event.detail.id !== this.$root.id) {
+        return
+      }
+
+      this.open = true
+      $refs.dialogRef.showModal()
+    },
+
+    // Delay close to allow for animation
+    handleDialogClose() {
+      if (!this.open) return
+
+      this.open = false
+      $refs.dialogRef.dataset.dialogStatus = 'closing'
+
+      setTimeout(() => {
+        delete $refs.dialogRef.dataset.dialogStatus
+        $refs.dialogRef.close()
+      }, 300);
+    }
+  }"
+>
+  <dialog
+    x-ref="dialogRef"
+    x-trap.noscroll="open"
+    @keydown.escape.prevent="handleDialogClose()"
+    @click="handleDialogClick($event)"
+    class="{{ classNames('dialog', class) }}"
+  >
+    {% if not hideClose %}
+      {{ include('_components/button.twig', {
+        icon: 'close',
+        iconOnly: true,
+        size: 'sm',
+        title: 'Close',
+        variant: 'subtle',
+        class: 'absolute right-4 top-4 size-24 !min-h-0 [&_svg]:size-12',
+        attrs: {
+          '@click': 'handleDialogClose()'
+        }
+      }) }}
+    {% endif %}
+
+    {{ content }}
+
+  </dialog>
+</div>

templates/parts-kit/dialog/default.twig

@@ -0,0 +1,24 @@
+{% extends "viget-parts-kit/layout.twig" %}
+
+{% block main %}
+
+{% set content %}
+    <p>Hello World</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Quisquam, quos.</a></p>
+  {% endset %}
+
+  {# Dialogs are triggered by dispatching a custom event dialog:open with an id that matches the dialog's id #}
+  {{ include('_components/button.twig', {
+    text: 'Open Dialog',
+    attrs: {
+      'x-data': '',
+      '@click': "$dispatch('dialog:open', { id: 'my-dialog'})"
+    },
+  }) }}
+
+  {{ include('_components/dialog.twig', {
+    content,
+    id: 'my-dialog',
+    hideClose: true,
+  }) }}
+{% endblock %}

templates/parts-kit/dialog/digalog-triggers-dialog.twig

@@ -0,0 +1,45 @@
+{% extends "viget-parts-kit/layout.twig" %}
+
+{% block main %}
+
+{% set dialog1Content %}
+    <p>Dialog 1</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Quisquam, quos.</a></p>
+
+    {{ include('_components/button.twig', {
+      text: 'Open Dialog 2',
+      attrs: {
+        'x-data': '',
+        '@click': "$dispatch('dialog:open', { id: 'my-dialog-2' })"
+    },
+  }) }}
+  {% endset %}
+
+  {% set dialog2Content %}
+    <p>Dialog 2</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Quisquam, quos.</a></p>
+
+
+  {% endset %}
+
+  {# Dialogs are triggered by dispatching a custom event dialog:open with an id that matches the dialog's id #}
+  {{ include('_components/button.twig', {
+    text: 'Open Dialog 1',
+    attrs: {
+      'x-data': '',
+      '@click': "$dispatch('dialog:open', { id: 'my-dialog' })"
+    },
+  }) }}
+
+  {{ include('_components/dialog.twig', {
+    content: dialog1Content,
+    id: 'my-dialog',
+  }) }}
+
+  {{ include('_components/dialog.twig', {
+    content: dialog2Content,
+    id: 'my-dialog-2',
+  }) }}
+
+
+{% endblock %}