Fix modal / confirm functionality

CHANGELOG.md

@@ -7,10 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## [v1.0.3](https://github.com/sietse85/nova-button/compare/v1.0.2...v1.0.3)
+## [v1.0.4](https://github.com/sietse85/nova-button/compare/v1.0.3...v1.0.4)
+
+## [v1.0.3](https://github.com/sietse85/nova-button/compare/v1.0.2...v1.0.3) - 2022-05-20
 
 ### Commits
 
+- update changelog [`070865a`](https://github.com/sietse85/nova-button/commit/070865a89360fbec3f8c203d4a4714fa6bf51c0c)
 - Update version [`a7c724c`](https://github.com/sietse85/nova-button/commit/a7c724c0e8e4cd36a2f474505835a792434752ca)
 - Add new JS build [`0e7b07d`](https://github.com/sietse85/nova-button/commit/0e7b07dea84f125e64886eafa4e861fda1f0aa5c)
 - Prevent clicks from going through parent elements [`18bfcb0`](https://github.com/sietse85/nova-button/commit/18bfcb008eeb2963be24615c991d854360b72223)

README.md

@@ -14,7 +14,7 @@ Use buttons to trigger backend events, navigate Nova routes or visit links.
 
 | What    | Minimum |
 |---------|---------|
-| PHP     | \>=7.3  |
+| PHP     | \>=7.4  |
 | Laravel | \>=8.0  |
 | Nova    | \>=4.0  |
 

composer.json

@@ -22,7 +22,7 @@
         "nova4",
         "field"
     ],
-    "version": "1.0.3",
+    "version": "1.0.4",
     "license": "MIT",
     "require": {
         "php": "^7.4|^8.0"

package.json

@@ -1,6 +1,6 @@
 {
     "private": true,
-    "version": "1.0.3",
+    "version": "1.0.4",
     "scripts": {
         "dev": "npm run development",
         "development": "mix",
@@ -16,8 +16,8 @@
         "version": "auto-changelog -p && git add CHANGELOG.md && composer update"
     },
     "devDependencies": {
-        "auto-changelog": "^2.4.0",
         "@vue/compiler-sfc": "^3.2.22",
+        "auto-changelog": "^2.4.0",
         "eslint-config-prettier": "^8.4.0",
         "eslint-plugin-vue": "^8.7.1",
         "form-backend-validation": "^2.3.3",

resources/field.js

@@ -3,7 +3,7 @@ import { queue } from './js/queue';
 export default {
   data() {
     return {
-      openModal: false,
+      isModalOpen: false,
     };
   },
   methods: {
@@ -16,7 +16,7 @@ export default {
     },
     modalReload() {
       window.setTimeout(() => {
-        this.openModal = false;
+        this.isModalOpen = false;
         this.reload();
       }, 400);
     },

resources/js/components/ConfirmModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="modal" @click.prevent.stop="">
+    <div class="modal-inner">
+      <transition name="fade">
+        <form class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 460px">
+          <div class="p-8">
+            <heading :level="2" class="mb-6" v-html="field.confirm.title"></heading>
+            <p class="text-80 leading-normal" v-html="field.confirm.body"></p>
+          </div>
+
+          <div
+            class="border-t border-50 px-6 py-3 ml-auto flex items-center"
+            style="min-height: 70px; flex-direction: row-reverse"
+          >
+            <button
+              style="order: 2"
+              class="cursor-pointer btn text-80 font-normal px-3 mr-3 btn-link"
+              v-html="field.confirm.cancelButtonText"
+              @click.prevent.stop="$parent.isModalOpen = false"
+            />
+
+            <nova-button
+              :field="field"
+              @finished="$emit('finished')"
+              :resourceName="resourceName"
+              :resourceId="resource.id.value"
+              :disabled="field.disabled"
+            />
+          </div>
+        </form>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import field from '../../field';
+import NovaButton from './NovaButton';
+
+export default {
+  components: { NovaButton },
+  props: ['resource', 'resourceName', 'field'],
+  mixins: [field],
+};
+</script>
+
+<style>
+.modal {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-inner {
+  position: absolute;
+  background-color: #fff;
+  opacity: 1;
+  z-index: 100;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

resources/js/components/DetailField.vue

@@ -1,10 +1,15 @@
 <template>
-  <div class="flex border-b border-40 -mx-6 px-6 nova-button-wrapper" v-if="field.visible">
-    <div class="w-1/4 py-4">
-      <label class="font-normal text-80">{{ field.label }}</label>
+  <div
+    class="flex flex-col md:flex-row -mx-6 px-6 py-2 md:py-0 space-y-2 md:space-y-0 border-t border-gray-100 dark:border-gray-700"
+    v-if="field.visible"
+  >
+    <div class="md:w-1/4 md:py-5">
+      <h4 class="font-bold md:font-normal pt-5">
+        <span>{{ field.label }}</span>
+      </h4>
     </div>
 
-    <div class="w-3/4 py-4 break-words">
+    <div class="md:w-3/4 md:py-3 break-words">
       <span v-if="field.confirm == null">
         <nova-button
           :field="field"
@@ -20,45 +25,28 @@
           :class="field.classes"
           :disabled="field.disabled"
           v-html="field.text"
-          @click.prevent.stop="openModal = true"
+          @click.prevent.stop="isModalOpen = true"
         />
 
-        <portal to="modals">
-          <transition name="fade">
-            <modal v-if="openModal" @modal-close="openModal = false">
-              <div class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 460px">
-                <div class="p-8">
-                  <heading :level="2" class="mb-6" v-html="field.confirm.title"></heading>
-
-                  <p class="text-80 leading-normal" v-html="field.confirm.body"></p>
-                </div>
-
-                <div
-                  class="border-t border-50 px-6 py-3 ml-auto flex items-center"
-                  style="min-height: 70px; flex-direction: row-reverse"
-                >
-                  <button
-                    style="order: 2"
-                    class="cursor-pointer btn text-80 font-normal px-3 mr-3 btn-link"
-                    v-html="field.confirm.cancelButtonText"
-                    @click.prevent.stop="openModal = false"
-                  />
-
-                  <nova-button v-bind="$props" :disabled="field.disabled" @finished="modalReload" />
-                </div>
-              </div>
-            </modal>
-          </transition>
-        </portal>
+        <confirm-modal
+          v-if="isModalOpen"
+          :field="field"
+          :resource-name="resourceName"
+          :resource="resource"
+          @finished="modalReload"
+        ></confirm-modal>
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import field from '../../field';
+import NovaButton from './NovaButton';
+import ConfirmModal from './ConfirmModal';
 
 export default {
+  components: { ConfirmModal, NovaButton },
   props: ['resource', 'resourceName', 'resourceId', 'field'],
   mixins: [field],
 };

resources/js/components/FormField.vue

@@ -20,45 +20,28 @@
           :class="field.classes"
           :disabled="field.disabled"
           v-html="field.text"
-          @click.prevent.stop="openModal = true"
+          @click.prevent.stop="isModalOpen = true"
         />
 
-        <portal to="modals">
-          <transition name="fade">
-            <modal v-if="openModal" @modal-close="openModal = false">
-              <div class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 460px">
-                <div class="p-8">
-                  <heading :level="2" class="mb-6" v-html="field.confirm.title"></heading>
-
-                  <p class="text-80 leading-normal" v-html="field.confirm.body"></p>
-                </div>
-
-                <div
-                  class="border-t border-50 px-6 py-3 ml-auto flex items-center"
-                  style="min-height: 70px; flex-direction: row-reverse"
-                >
-                  <button
-                    style="order: 2"
-                    class="cursor-pointer btn text-80 font-normal px-3 mr-3 btn-link"
-                    v-html="field.confirm.cancelButtonText"
-                    @click.prevent.stop="openModal = false"
-                  />
-
-                  <nova-button v-bind="$props" :disabled="field.disabled" @finished="modalReload" />
-                </div>
-              </div>
-            </modal>
-          </transition>
-        </portal>
+        <confirm-modal
+          v-if="isModalOpen"
+          :field="field"
+          :resource-name="resourceName"
+          :resource="resource"
+          @finished="modalReload"
+        ></confirm-modal>
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import field from '../../field';
+import NovaButton from './NovaButton';
+import ConfirmModal from './ConfirmModal';
 
 export default {
+  components: { ConfirmModal, NovaButton },
   props: ['resource', 'resourceName', 'resourceId', 'field'],
   mixins: [field],
 };

resources/js/components/IndexField.vue

@@ -19,50 +19,27 @@
         :class="field.classes"
         :disabled="field.disabled"
         v-html="field.text"
-        @click.prevent.stop="openModal = true"
+        @click.stop="isModalOpen = true"
       />
 
-      <portal to="modals" v-if="openModal">
-        <transition name="fade">
-          <modal @modal-close="openModal = false">
-            <form class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 460px">
-              <div class="p-8">
-                <heading :level="2" class="mb-6" v-html="field.confirm.title"></heading>
-
-                <p class="text-80 leading-normal" v-html="field.confirm.body"></p>
-              </div>
-
-              <div
-                class="border-t border-50 px-6 py-3 ml-auto flex items-center"
-                style="min-height: 70px; flex-direction: row-reverse"
-              >
-                <button
-                  style="order: 2"
-                  class="cursor-pointer btn text-80 font-normal px-3 mr-3 btn-link"
-                  v-html="field.confirm.cancelButtonText"
-                  @click.prevent.stop="openModal = false"
-                />
-
-                <nova-button
-                  :field="field"
-                  @finished="modalReload"
-                  :resourceName="resourceName"
-                  :resourceId="resource.id.value"
-                  :disabled="field.disabled"
-                />
-              </div>
-            </form>
-          </modal>
-        </transition>
-      </portal>
+      <confirm-modal
+        v-if="isModalOpen"
+        :field="field"
+        :resource-name="resourceName"
+        :resource="resource"
+        @finished="modalReload"
+      ></confirm-modal>
     </div>
   </div>
 </template>
 
 <script>
 import field from '../../field';
+import NovaButton from './NovaButton';
+import ConfirmModal from './ConfirmModal';
 
 export default {
+  components: { ConfirmModal, NovaButton },
   props: ['resource', 'resourceName', 'field'],
   mixins: [field],
 };

resources/js/components/NovaButton.vue

@@ -81,7 +81,6 @@ export default {
       this.$emit('loading');
 
       if (this.resourceName === undefined || this.resourceId === null || this.field.key === null) {
-        alert('epty')
         return;
       }
 

resources/js/field.js

@@ -2,8 +2,10 @@ import IndexField from './components/IndexField';
 import DetailField from './components/DetailField';
 import FormField from './components/FormField';
 import NovaButton from './components/NovaButton';
+import Modal from './components/ConfirmModal';
 
 Nova.booting((app) => {
+  app.component('confirm-modal', Modal);
   app.component('nova-button', NovaButton);
   app.component('index-nova-button', IndexField);
   app.component('detail-nova-button', DetailField);

src/Button.php

@@ -94,14 +94,14 @@ public function __construct($name, $attribute = null)
     protected function addDefaultSettings(): void
     {
         $this->addLinkFallbacks();
-
         $this->style = Arr::get($this->config, 'defaults.style', 'link-primary');
         $this->loadingText = Arr::get($this->config, 'defaults.loadingText', 'Loading');
         $this->loadingStyle = Arr::get($this->config, 'defaults.loadingStyle', str_replace('primary', 'grey', $this->style));
         $this->errorText = Arr::get($this->config, 'defaults.errorText', 'Error!');
         $this->errorStyle = Arr::get($this->config, 'defaults.errorStyle', str_replace('primary', 'danger', $this->style));
         $this->successText = Arr::get($this->config, 'defaults.successText', 'Success!');
         $this->successStyle = Arr::get($this->config, 'defaults.successStyle', str_replace('primary', 'success', $this->style));
+
     }
 
     /**
@@ -112,19 +112,19 @@ protected function addDefaultSettings(): void
     protected function addLinkFallbacks(): void
     {
         if (!Arr::has($this->config, 'styles.link-primary')) {
-            $this->config['styles']['link-primary'] = 'cursor-pointer dim inline-block text-primary font-bold no-underline';
+            $this->config['styles']['link-primary'] = 'cursor-pointer inline-block text-gray-50 text-black font-bold';
         }
 
         if (!Arr::has($this->config, 'styles.link-success')) {
-            $this->config['styles']['link-success'] = 'cursor-pointer dim inline-block text-success font-bold no-underline';
+            $this->config['styles']['link-success'] = 'cursor-pointer inline-block text-green-500 font-bold';
         }
 
         if (!Arr::has($this->config, 'styles.link-grey')) {
-            $this->config['styles']['link-grey'] = 'cursor-pointer dim inline-block text-grey font-bold no-underline';
+            $this->config['styles']['link-grey'] = 'cursor-pointer inline-block text-grey-500 font-bold';
         }
 
         if (!Arr::has($this->config, 'styles.link-danger')) {
-            $this->config['styles']['link-danger'] = 'cursor-pointer dim inline-block text-danger font-bold no-underline';
+            $this->config['styles']['link-danger'] = 'cursor-pointer inline-block text-red-500 font-bold';
         }
     }