Fix compatibility issues with Nova 4.28.0 (#69)

dcasia · Oct 25, 2023 · f75f8bb · f75f8bb
1 parent 1950679
commit f75f8bb
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 102 deletions.
diff --git a/composer.json b/composer.json
@@ -11,7 +11,7 @@
     "license": "MIT",
     "require": {
         "php": ">=8.1",
-        "laravel/nova": "^4.0"
+        "laravel/nova": "^4.28.0"
     },
     "autoload": {
         "psr-4": {

diff --git a/dist/css/card.css b/dist/css/card.css
diff --git a/dist/js/card.js b/dist/js/card.js
diff --git a/nova.mix.js b/nova.mix.js
@@ -19,6 +19,7 @@ class NovaExtension {
         webpackConfig.resolve.alias = {
             ...(webpackConfig.resolve.alias || {}),
             'laravel-nova': path.join(__dirname, '../../vendor/laravel/nova/resources/js/mixins/packages.js'),
+            'laravel-nova-ui': path.join(__dirname, '../../vendor/laravel/nova/node_modules/laravel-nova-ui'),
             '@': path.resolve(__dirname, '../../vendor/laravel/nova/resources/js/'),
         }
 

diff --git a/package.json b/package.json
@@ -6,13 +6,13 @@
         "nova:install": "npm --prefix='../vendor/laravel/nova' ci"
     },
     "devDependencies": {
-        "@vue/compiler-sfc": "^3.3.4",
+        "@vue/compiler-sfc": "^3.3.7",
         "gridstack": "^9.4.0",
         "laravel-mix": "^6.0.49",
         "mix-tailwindcss": "^1.3.0",
         "sass": "^1.68.0",
         "sass-loader": "^13.3.2",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "^3.3.4",
         "vue-collapsed": "^1.2.8",
         "vue-loader": "^17.2.2"
     }

diff --git a/resources/js/components/Card.vue b/resources/js/components/Card.vue
@@ -18,7 +18,7 @@
         <div class="flex justify-center w-[calc(100%+24px)] -ml-[12px]">
 
             <div ref="gridStack" class="grid-stack h-full w-full">
-                <Widget v-for="widget in activeView.widgets" :widget="widget" :key="widget.key"/>
+                <Widget v-for="widget in activeView.widgets" :widget="widget" :key="widget.key" :view="activeView.key"/>
             </div>
 
         </div>

diff --git a/resources/js/components/Filter.vue b/resources/js/components/Filter.vue
@@ -1,43 +1,33 @@
 <template>
 
-    <Card class="nova-dashboard-filter mb-4 transition-padding"
+    <Card class="nova-dashboard-filter mb-4 transition-padding transition"
           :style="{ '--columns-desktop': columns || 2 }"
           :class="{ '--active px-1 pb-1': filtersAreApplied, 'px-1': !filtersAreApplied, '--expanded': expanded }">
 
-        <div :class="{ 'h-11': expanded, 'h-14': !expanded }" class="w-full flex items-center flex transition-height">
+        <div :class="{ 'h-11': expanded, 'h-14': !expanded }" class="w-full flex items-center transition-height">
 
-            <Dropdown class="">
+            <Dropdown placement="bottom-start">
 
-                <slot name="sr-only">
-                    <span class="sr-only">{{ __('Views') }}</span>
-                </slot>
+                <Button
+                    class="shadow-none"
+                    :class="{ 'hover:!bg-transparent': !filtersAreApplied }"
+                    :variant="filtersAreApplied ? 'solid' : 'ghost'"
+                    padding="tight"
+                    :aria-label="__('Views Dropdown')">
 
-                <DropdownTrigger
-                    :show-arrow="false"
-                    :class="{
-                        'hover:text-gray-600 dark:hover:text-gray-500': !filtersAreApplied && expanded === false,
-                        'hover:bg-gray-200 dark:hover:bg-gray-800': !filtersAreApplied && expanded === true,
-                        'text-white hover:bg-primary-400 dark:hover:bg-primary-600 dark:text-gray-800': filtersAreApplied,
-                    }"
-                    class="rounded focus:outline-none focus:ring">
+                    <div class="mr-2">
 
-                    <BasicButton class="flex items-center">
+                        <template v-if="activeView.icon?.trim()?.startsWith('<svg')">
+                            <div v-html="activeView.icon"/>
+                        </template>
 
-                        <div class="mr-2">
+                        <Icon v-else :name="activeView.icon"/>
 
-                            <template v-if="activeView.icon?.trim()?.startsWith('<svg')">
-                                <div v-html="activeView.icon"/>
-                            </template>
-
-                            <Icon v-else :solid="true" :type="activeView.icon"/>
-
-                        </div>
-
-                        <div>{{ activeView.name }}</div>
+                    </div>
 
-                    </BasicButton>
+                    <div>{{ activeView.name }}</div>
 
-                </DropdownTrigger>
+                </Button>
 
                 <template #menu>
 
@@ -73,18 +63,18 @@
 
                 <button
                     v-if="!filtersAreApplied"
-                    class="pb-1 pt-2 w-full block text-xs uppercase tracking-wide text-center font-bold focus:outline-none relative flex justify-end items-center"
+                    class="py-2 w-full text-xs uppercase tracking-wide text-center font-bold focus:outline-none relative flex justify-end items-center"
                     @click="expanded = !expanded">
 
                     <div>
                         {{ __('Filters') }}
                     </div>
 
-                    <Icon type="chevron-down" width="14" class="ml-1 transition-all"
+                    <Icon name="chevron-down"
+                          class="ml-1 transition-all w-4 h-4"
                           :class="{ 'rotate-180': expanded }"/>
 
-                </button>
-
+                </Button>
 
                 <div v-if="filtersAreApplied" class="w-full">
 
@@ -132,7 +122,7 @@
                 <div class="flex justify-center items-center cursor-pointer pb-1"
                      @click="expanded = !expanded">
 
-                    <Icon type="chevron-up" height="12" class="translate-y-[2px]"/>
+                    <Icon name="chevron-up" class="h-3 translate-y-[2px]"/>
 
                 </div>
 
@@ -149,11 +139,12 @@
     import Filterable from '@/mixins/Filterable'
     import InteractsWithQueryString from '@/mixins/InteractsWithQueryString'
     import { Collapse } from 'vue-collapsed'
+    import { Button, Icon } from 'laravel-nova-ui'
 
     export default {
-        components: { Collapse },
+        components: { Collapse, Button, Icon },
         mixins: [ Filterable, InteractsWithQueryString ],
-        emits: [ 'filter-changed', 'toggle' ],
+        emits: [ 'toggle' ],
         props: [
             'views',
             'activeView',
@@ -245,7 +236,7 @@
             @apply bg-primary-500;
 
             .filter__header {
-                @apply text-gray-800;
+                @apply text-gray-900;
             }
 
         }
@@ -287,7 +278,7 @@
         }
 
         .filter__header {
-            @apply text-gray-500;
+            @apply text-gray-600;
         }
 
         --columns-mobile: 1;

diff --git a/resources/js/components/Widget.vue b/resources/js/components/Widget.vue
@@ -6,7 +6,7 @@
 
             <component
                 class="h-full w-full"
-                :key="`${ widget.component }.${ widget.key }`"
+                :key="`${ widget.component }.${ widget.key }.${ view }`"
                 :is="widget.component"
                 :card="{ ...widget, uriKey: widget.key }"
             />
@@ -20,7 +20,7 @@
 <script>
 
     export default {
-        props: [ 'widget' ],
+        props: [ 'widget', 'view' ],
     }
 
 </script>