Feat modal component (#17)

* Remove unnecessary files * feat: modal component * Hide modal
datalogix · Dec 14, 2020 · 692928e · 692928e
1 parent feb7d34
commit 692928e
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 291 deletions.
diff --git a/_components/_bkp/card.blade.php b/_components/_bkp/card.blade.php
diff --git a/_components/_bkp/modal.blade.php b/_components/_bkp/modal.blade.php
diff --git a/_components/_bkp/progress-bar.blade.php b/_components/_bkp/progress-bar.blade.php
diff --git a/_components/_bkp/toast.blade.php b/_components/_bkp/toast.blade.php
diff --git a/_components/card.blade.php b/_components/card.blade.php
diff --git a/config/tall-kit.php b/config/tall-kit.php
@@ -73,6 +73,11 @@
         'socialmeta' => \Datalogix\TALLKit\Components\Layouts\SocialMeta::class, //alias
 
         /**
+         * Modals.
+         */
+        'modal' => \Datalogix\TALLKit\Components\Modals\Modal::class,
+
+        /**x
          * Navigations.
          */
         'dropdown' => \Datalogix\TALLKit\Components\Navigations\Dropdown::class,
@@ -743,6 +748,65 @@
 
             'social-meta' => [],
 
+            /**
+             * Modals.
+             */
+            'modal' => [
+                'container' => [
+                    'x-data' => '{
+                        show: false,
+                        focusables() {
+                            // All focusable element types...
+                            let selector = \'a, button, input, textarea, select, details, [tabindex]:not([tabindex=-1])\'
+
+                            return [...$el.querySelectorAll(selector)]
+                                // All non-disabled elements...
+                                .filter(el => ! el.hasAttribute(\'disabled\'))
+                        },
+                        firstFocusable() { return this.focusables()[0] },
+                        lastFocusable() { return this.focusables().slice(-1)[0] },
+                        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
+                        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
+                        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
+                        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
+                    }',
+                    '@close.stop' => 'show = false',
+                    '@keydown.escape.window' => 'show = false',
+                    '@keydown.tab.prevent' => '$event.shiftKey || nextFocusable().focus()',
+                    '@keydown.shift.tab.prevent' => 'prevFocusable().focus()',
+                    'x-show' => 'show',
+                    'class' => 'fixed top-0 inset-x-0 px-4 pt-6 z-50 flex items-top justify-center',
+                    'style' => 'display: none;',
+                ],
+
+                'overlay' => [
+                    'x-show' => 'show',
+                    'class' => 'fixed inset-0 transform transition-all',
+                    '@click' => 'show = false',
+                    'x-transition:enter' => 'ease-out duration-300',
+                    'x-transition:enter-start' => 'opacity-0',
+                    'x-transition:enter-end' => 'opacity-100',
+                    'x-transition:leave' => 'ease-in duration-200',
+                    'x-transition:leave-start' => 'opacity-100',
+                    'x-transition:leave-end' => 'opacity-0',
+                ],
+
+                'backdrop' => [
+                    'class' => 'absolute inset-0 bg-gray-500 opacity-75',
+                ],
+
+                'modal' => [
+                    'x-show' => 'show',
+                    'class' => 'bg-white p-4 rounded overflow-hidden shadow transform transition-all w-full',
+                    'x-transition:enter' => 'ease-out duration-300',
+                    'x-transition:enter-start' => 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+                    'x-transition:enter-end' => 'opacity-100 translate-y-0 sm:scale-100',
+                    'x-transition:leave' => 'ease-in duration-200',
+                    'x-transition:leave-start' => 'opacity-100 translate-y-0 sm:scale-100',
+                    'x-transition:leave-end' => 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+                ],
+            ],
+
             /**
              * Navigations.
              */

diff --git a/resources/views/components/modals/modal.blade.php b/resources/views/components/modals/modal.blade.php
@@ -0,0 +1,9 @@
+<div {{ $themeProvider->container }}>
+    <div {{ $themeProvider->overlay }}>
+        <div {{ $themeProvider->backdrop }}></div>
+    </div>
+
+    <div {{ $attributes->merge(toArray($themeProvider->modal)) }}>
+        {{ $slot }}
+    </div>
+</div>