feat: support nova 5

mostafaznv · Dec 20, 2024 · 31b89b4 · 31b89b4
1 parent 60bb0d1
commit 31b89b4
Show file tree

Hide file tree

Showing 9 changed files with 358 additions and 56 deletions.
diff --git a/composer.json b/composer.json
@@ -7,9 +7,9 @@
         "php": "^8.1",
         "ext-json": "*",
         "laravel/framework": "^10.4.1|^11.0",
-        "laravel/nova": "^4.24",
+        "laravel/nova": "^4.24|^5.0",
         "mostafaznv/laracache": "^2.3.2",
-        "nova-kit/nova-packages-tool": "^1.9"
+        "nova-kit/nova-packages-tool": "^1.9|^2.0"
     },
     "autoload": {
         "psr-4": {

diff --git a/package.json b/package.json
@@ -21,5 +21,8 @@
         "vue-loader": "^16.8.3",
         "vue-template-compiler": "^2.6.14",
         "vuex": "^4.1.0"
+    },
+    "dependencies": {
+        "laravel-nova-ui": "^0.4.12"
     }
 }
diff --git a/resources/js/components/Card.vue b/resources/js/components/Card.vue
@@ -1,5 +1,5 @@
 <template>
-    <loading-card class="col-span-12 md:col-span-6" :loading="fetching">
+    <LoadingCard class="col-span-12 md:col-span-6" :loading="fetching">
         <div class="px-6 py-6">
             <h3 class="mb-3 text-sm font-bold">{{ label }}</h3>
 
@@ -9,10 +9,11 @@
 
             <div v-if="description" class="text-sm text-gray-500">{{ description }}</div>
         </div>
-    </loading-card>
+    </LoadingCard>
 </template>
 
 <script setup>
+
 const props = defineProps({
     label: {
         type: String,

diff --git a/resources/js/components/Groups/GroupToolbar.vue b/resources/js/components/Groups/GroupToolbar.vue
@@ -6,7 +6,7 @@
             class="hover:text-primary-500 px-2"
             :aria-label="__('nova-laracache.delete')"
         >
-            <Icon type="trash" solid />
+            <Icon name="trash" type="solid" />
         </button>
 
         <button
@@ -15,12 +15,14 @@
             class="hover:text-primary-500 px-2"
             :aria-label="__('nova-laracache.refresh')"
         >
-            <Icon type="refresh" solid />
+            <Icon name="arrow-path" type="solid" />
         </button>
     </div>
 </template>
 
 <script setup>
+import {Icon} from 'laravel-nova-ui'
+
 const $emit = defineEmits([
     'view', 'refresh', 'delete'
 ])

diff --git a/resources/js/components/Modals/CacheModalFooter.vue b/resources/js/components/Modals/CacheModalFooter.vue
@@ -1,33 +1,34 @@
 <template>
     <ModalFooter>
         <div class="ml-auto">
-            <LinkButton
+            <Button
+                @click.prevent="$emit('close')"
+                variant="ghost"
                 type="button"
                 data-testid="cancel-button"
-                @click.prevent="$emit('close')"
                 class="mr-3"
             >
                 {{ __('Cancel') }}
-            </LinkButton>
+            </Button>
 
-            <DefaultButton
+            <Button
                 ref="confirmButton"
+                type="submit"
                 class="submit-button"
+                :variant="type === 'cancel' ? 'danger' : 'solid'"
                 :disabled="working"
-                :class="submitButtonClass"
-                type="submit"
             >
                 <Loader v-if="working" width="22" />
                 <template v-else>
                     {{ __(`nova-laracache.modal.${type}.submit`) }}
                 </template>
-            </DefaultButton>
+            </Button>
         </div>
     </ModalFooter>
 </template>
 
 <script setup>
-import {computed} from 'vue'
+import {Button} from 'laravel-nova-ui'
 
 const emit = defineEmits(['close'])
 
@@ -41,12 +42,6 @@ const props = defineProps({
         default: false
     }
 })
-
-const submitButtonClass = computed(() => {
-    return props.type === 'delete'
-        ? 'bg-red-500 hover:bg-red-400 text-white dark:text-gray-900'
-        : ''
-})
 </script>
 
 <style lang="scss" scoped>

diff --git a/resources/js/components/Modals/ViewCacheEntityModal.vue b/resources/js/components/Modals/ViewCacheEntityModal.vue
@@ -1,9 +1,6 @@
 <template>
     <Modal data-testid="delete-cache-entity-modal" role="alertdialog" size="4xl" :show="show">
-        <form
-            @submit.prevent="handleConfirm"
-            class="mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
-        >
+        <div class="mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
             <slot>
                 <ModalHeader v-text="modalHeader"/>
 
@@ -33,24 +30,24 @@
                                 <span class="mr-1">{{ __('nova-laracache.is-queueable') }}:</span>
                             </div>
 
-                            <div>
-                                <div v-if="entity.refreshAfter.create"  class="bg-gray-200 inline-flex rounded px-3 py-1 text-sm text-gray-600 mr-1 mb-1">
-                                    <Icon type="badge-check" solid />
+                            <div class="flex items-center">
+                                <div v-if="entity.refreshAfter.create"  class="bg-gray-200 inline-flex items-center rounded px-3 py-1 text-sm text-gray-600 mr-1 mb-1">
+                                    <Icon name="check-badge" type="mini" />
                                     <span class="ml-1">{{ __('nova-laracache.refresh-after.create') }}</span>
                                 </div>
 
-                                <div v-if="entity.refreshAfter.update" class="bg-gray-200 inline-flex rounded px-3 py-1 text-sm text-gray-600 mr-1 mb-1">
-                                    <Icon type="badge-check" solid />
+                                <div v-if="entity.refreshAfter.update" class="bg-gray-200 inline-flex items-center rounded px-3 py-1 text-sm text-gray-600 mr-1 mb-1">
+                                    <Icon name="badge-check" type="mini" />
                                     <span class="ml-1">{{ __('nova-laracache.refresh-after.update') }}</span>
                                 </div>
 
-                                <div v-if="entity.refreshAfter.delete" class="bg-gray-200 inline-flex rounded px-3 py-1 text-sm text-gray-600 mr-1 mb-1">
-                                    <Icon type="badge-check" solid />
+                                <div v-if="entity.refreshAfter.delete" class="bg-gray-200 inline-flex items-center rounded px-3 py-1 text-sm text-gray-600 mr-1 mb-1">
+                                    <Icon name="badge-check" type="mini" />
                                     <span class="ml-1">{{ __('nova-laracache.refresh-after.delete') }}</span>
                                 </div>
 
-                                <div v-if="entity.refreshAfter.restore" class="bg-gray-200 inline-flex rounded px-3 py-1 text-sm text-gray-600 mr-1 mb-1">
-                                    <Icon type="badge-check" solid />
+                                <div v-if="entity.refreshAfter.restore" class="bg-gray-200 inline-flex items-center rounded px-3 py-1 text-sm text-gray-600 mr-1 mb-1">
+                                    <Icon name="badge-check" type="mini" />
                                     <span class="ml-1">{{ __('nova-laracache.refresh-after.restore') }}</span>
                                 </div>
                             </div>
@@ -68,24 +65,26 @@
 
             <ModalFooter>
                 <div class="ml-auto">
-                    <LinkButton
+                    <Button
                         type="button"
+                        variant="ghost"
                         data-testid="cancel-button"
-                        @click.prevent="$emit('close')"
+                        @click.prevent="handleClose"
                         class="mr-3"
                     >
                         {{ __('Close') }}
-                    </LinkButton>
+                    </Button>
                 </div>
             </ModalFooter>
-        </form>
+        </div>
     </Modal>
 </template>
 
 <script setup>
 import {ref, watch, computed} from 'vue'
 import Status from '../Status.vue'
 import {useLocalization} from 'laravel-nova'
+import {Icon, Button} from 'laravel-nova-ui'
 
 const emit = defineEmits(['close'])
 const {__} = useLocalization()

diff --git a/resources/js/components/Models/ModelToolbar.vue b/resources/js/components/Models/ModelToolbar.vue
@@ -1,36 +1,38 @@
 <template>
     <div class="toolbar-buttons">
         <button
-            v-tooltip.hover="__('nova-laracache.delete')"
             @click="emit('delete')"
-            class="hover:text-primary-500 px-2"
+            v-tooltip.hover="__('nova-laracache.delete')"
+            class="hover:text-primary-500 px-1"
             :aria-label="__('nova-laracache.delete')"
         >
-            <Icon type="trash" solid />
+            <Icon name="trash" type="mini" />
         </button>
 
         <button
             v-tooltip.hover="__('nova-laracache.refresh')"
             @click="emit('refresh')"
-            class="hover:text-primary-500 px-2"
+            class="hover:text-primary-500 px-1"
             :aria-label="__('nova-laracache.refresh')"
         >
-            <Icon type="refresh" solid />
+            <Icon name="refresh" type="mini" />
         </button>
 
         <button
             v-if="!withoutView"
             v-tooltip.hover="__('nova-laracache.view')"
             @click="emit('view')"
-            class="hover:text-primary-500 px-2"
+            class="hover:text-primary-500 px-1"
             :aria-label="__('nova-laracache.view')"
         >
-            <Icon type="eye" solid />
+            <Icon name="eye" type="mini" />
         </button>
     </div>
 </template>
 
 <script setup>
+import {Icon} from 'laravel-nova-ui'
+
 const $emit = defineEmits([
     'view', 'refresh', 'delete'
 ])

diff --git a/resources/js/components/Status.vue b/resources/js/components/Status.vue
@@ -1,13 +1,11 @@
 <template>
     <div class="flex items-center" :class="['status-' + statusSlug, withBackground ? 'with-bg' : '']">
-        <Badge class="whitespace-nowrap flex items-center mx-auto" :title="status">
-            <span class="slug mr-3">{{ __(statusSlug) }}</span>
-
+        <Badge class="whitespace-nowrap flex items-center gap-2 mx-auto" :title="status">
             <div>
                 <Icon
                     v-if="status === 'NOT_CREATED'"
-                    type="minus-circle"
-                    :solid="true"
+                    name="minus-circle"
+                    type="mini"
                 />
 
                 <Loader
@@ -17,23 +15,27 @@
 
                 <Icon
                     v-if="status === 'DELETED'"
-                    type="exclamation-circle"
+                    name="exclamation-circle"
+                    type="mini"
                     style="fill: rgb(239,68,68)"
-                    :solid="true"
                 />
 
                 <Icon
                     v-if="status === 'CREATED'"
-                    type="check-circle"
-                    :solid="true"
+                    name="check-circle"
+                    type="mini"
                 />
             </div>
+
+            <span class="slug">{{ __(statusSlug) }}</span>
         </Badge>
     </div>
 </template>
 
 <script setup>
 import {computed} from 'vue'
+import {Icon} from 'laravel-nova-ui'
+
 
 const props = defineProps({
     status: {