Merge pull request #34 from TMCApplications/fix-danger-button-remove-nova-4.28

Fix Nova 4.28.0 removed DangerButton component

Author: sadekd

dist/js/field.js

@@ -12,6 +12,7 @@
         "@vue/babel-plugin-jsx": "^1.1.1",
         "form-backend-validation": "^2.4.0",
         "laravel-mix": "^6.0.43",
+        "laravel-nova-ui": "^0.4.10",
         "lodash": "^4.17.21",
         "postcss": "^8.4.12",
         "resolve-url-loader": "^4.0.0",

package.json

@@ -0,0 +1,21 @@
+<template>
+    <Button
+        state="default"
+    >
+        <span class="px-1 font-bold text-xl">+</span>
+    </Button>
+</template>
+
+<script>
+import { Button } from 'laravel-nova-ui';
+
+export default {
+    name: "AddButton",
+    components: { Button }
+}
+</script>
+
+
+<style scoped>
+
+</style>

resources/js/components/AddButton.vue

@@ -6,7 +6,7 @@
                     {{ __('Exceptions') }}
                 </table-header>
                 <table-header v-if="editable" class="text-right">
-                    <default-button @click.prevent="$emit('addException')"><span class="px-1">+</span></default-button>
+                    <add-button @click.prevent="$emit('addException')" />
                 </table-header>
             </tr>
         </thead>
@@ -39,24 +39,26 @@
                     <div v-else>{{ __('Closed') }}</div>
                 </table-column>
                 <table-column v-if="editable" class="text-right">
-                    <default-button @click.prevent="$emit('addInterval', 'exceptions', exception.date)"><span class="px-1">+</span></default-button>
+                    <add-button @click.prevent="$emit('addInterval', 'exceptions', exception.date)" />
                     &nbsp;
-                    <danger-button @click.prevent="$emit('removeException', exception.date)"><span class="px-1">-</span></danger-button>
+                    <remove-button @click.prevent="$emit('removeException', exception.date)"/>
                 </table-column>
             </tr>
         </tbody>
     </table>
 </template>
 
 <script>
+import AddButton from './AddButton';
+import RemoveButton from './RemoveButton';
 import IntervalInput from "./IntervalInput";
 import DateInput from "./DateInput";
 import TableColumn from "./TableColumn";
 import TableHeader from "./TableHeader";
 import {editableProp, exceptionsProp, useTextInputsProp} from "../src/props";
 
 export default {
-    components: { IntervalInput, DateInput, TableColumn, TableHeader },
+    components: { AddButton, RemoveButton, IntervalInput, DateInput, TableColumn, TableHeader },
 
     props: {
         ...exceptionsProp,

resources/js/components/ExceptionsTable.vue

@@ -14,17 +14,18 @@
             v-model="to"
         />
         <span class="ml-2">
-            <danger-button @click.prevent="$emit('removeInterval')"><span class="px-1">-</span></danger-button>
+            <remove-button @click.prevent="$emit('removeInterval')" />
         </span>
     </div>
 </template>
 
 <script>
 import {useTextInputsProp} from "../src/props";
+import RemoveButton from './RemoveButton';
 import TimeInput from "./TimeInput";
 
 export default {
-    components: {TimeInput},
+    components: { RemoveButton, TimeInput},
 
     props:  {
         intervalProp: String,

resources/js/components/IntervalInput.vue

@@ -0,0 +1,21 @@
+<template>
+    <Button
+        state="danger"
+    >
+        <span class="px-1 font-bold text-xl">-</span>
+    </Button>
+</template>
+
+<script>
+import { Button } from 'laravel-nova-ui';
+
+export default {
+    name: "RemoveButton",
+    components: { Button }
+}
+</script>
+
+
+<style scoped>
+
+</style>

resources/js/components/RemoveButton.vue

@@ -34,9 +34,9 @@
                     </div>
                 </table-column>
                 <table-column v-if="editable" class="text-right">
-                    <default-button @click.prevent="$emit('addInterval', 'week', day.day)"><span class="px-1">+</span></default-button>
+                    <add-button @click.prevent="$emit('addInterval', 'week', day.day)" />
                     <span v-if="Object.values(day.intervals).length" class="ml-2">
-                        <danger-button @click.prevent="$emit('removeAllIntervals', 'week', day.day)"><span class="px-1">-</span></danger-button>
+                        <remove-button @click.prevent="$emit('removeAllIntervals', 'week', day.day)" />
                     </span>
                 </table-column>
             </tr>
@@ -45,14 +45,16 @@
 </template>
 
 <script>
+import AddButton from './AddButton';
+import RemoveButton from './RemoveButton';
 import IntervalInput from "./IntervalInput";
 import TableColumn from "./TableColumn";
 import TableHeader from "./TableHeader";
 import {editableProp, useTextInputsProp, weekProp} from "../src/props";
 import {capitalizeFirstLetter} from "../src/func";
 
 export default {
-    components: { IntervalInput, TableColumn, TableHeader },
+    components: { AddButton, RemoveButton, IntervalInput, TableColumn, TableHeader },
 
     props: {
         ...weekProp,