From 692928e022270acaa815e2737cb29d289ebbd252 Mon Sep 17 00:00:00 2001 From: Ricardo Gobbo de Souza Date: Mon, 14 Dec 2020 09:01:28 -0300 Subject: [PATCH] Feat modal component (#17) * Remove unnecessary files * feat: modal component * Hide modal --- _components/_bkp/card.blade.php | 20 --- _components/_bkp/modal.blade.php | 21 --- _components/_bkp/progress-bar.blade.php | 122 ------------------ _components/_bkp/toast.blade.php | 90 ------------- _components/card.blade.php | 38 ------ config/tall-kit.php | 64 +++++++++ .../views/components/modals/modal.blade.php | 9 ++ src/Components/Modals/Modal.php | 17 +++ 8 files changed, 90 insertions(+), 291 deletions(-) delete mode 100644 _components/_bkp/card.blade.php delete mode 100644 _components/_bkp/modal.blade.php delete mode 100644 _components/_bkp/progress-bar.blade.php delete mode 100644 _components/_bkp/toast.blade.php delete mode 100644 _components/card.blade.php create mode 100644 resources/views/components/modals/modal.blade.php create mode 100644 src/Components/Modals/Modal.php diff --git a/_components/_bkp/card.blade.php b/_components/_bkp/card.blade.php deleted file mode 100644 index aa17b20..0000000 --- a/_components/_bkp/card.blade.php +++ /dev/null @@ -1,20 +0,0 @@ -
-
-
- -
-
-
Joe Blow
-

@joe.blow

-
-
- -
-
-
-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam obcaecati laudantium recusandae, debitis eum voluptatem ad, illo voluptatibus temporibus odio provident. Laboriosam accusamus necessitatibus tenetur praesentium ullam voluptates nulla reprehenderit? 🤣

-
-
-

Oct 15th 8:33pm

-
-
diff --git a/_components/_bkp/modal.blade.php b/_components/_bkp/modal.blade.php deleted file mode 100644 index bb6759b..0000000 --- a/_components/_bkp/modal.blade.php +++ /dev/null @@ -1,21 +0,0 @@ -
-
-
-
- - Information -
-
- -
-
- -
- Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
- -
- -
-
-
diff --git a/_components/_bkp/progress-bar.blade.php b/_components/_bkp/progress-bar.blade.php deleted file mode 100644 index 194c035..0000000 --- a/_components/_bkp/progress-bar.blade.php +++ /dev/null @@ -1,122 +0,0 @@ -
- - -
- -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- -
- - -
- -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- -
- -
- Type a value - -
-
diff --git a/_components/_bkp/toast.blade.php b/_components/_bkp/toast.blade.php deleted file mode 100644 index 253e490..0000000 --- a/_components/_bkp/toast.blade.php +++ /dev/null @@ -1,90 +0,0 @@ -
-
-
- -
-
- - - - - - - -
diff --git a/_components/card.blade.php b/_components/card.blade.php deleted file mode 100644 index 80e8cd7..0000000 --- a/_components/card.blade.php +++ /dev/null @@ -1,38 +0,0 @@ -
-
-
-
- -
-
-
Joe Blow
-

@joe.blow

-
-
- -
-
-
-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam obcaecati laudantium recusandae, debitis eum voluptatem ad, illo voluptatibus temporibus odio provident. Laboriosam accusamus necessitatibus tenetur praesentium ullam voluptates nulla reprehenderit? 🤣

-
-
-

Oct 15th 8:33pm

-
-
-
- - - - -
-
- -
-
-

Design Tools

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!

-
-
- John Doe -
-
diff --git a/config/tall-kit.php b/config/tall-kit.php index e614fa8..9d54ec8 100644 --- 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 new file mode 100644 index 0000000..7279aae --- /dev/null +++ b/resources/views/components/modals/modal.blade.php @@ -0,0 +1,9 @@ +
container }}> +
overlay }}> +
backdrop }}>
+
+ +
merge(toArray($themeProvider->modal)) }}> + {{ $slot }} +
+
diff --git a/src/Components/Modals/Modal.php b/src/Components/Modals/Modal.php new file mode 100644 index 0000000..989661c --- /dev/null +++ b/src/Components/Modals/Modal.php @@ -0,0 +1,17 @@ +