feat: support nova 5 #151

composer.json

@@ -19,9 +19,9 @@
         "php": "^8.1",
         "intervention/image": "^3.1.0",
         "laravel/framework": "^10.0|^11.0",
-        "laravel/nova": "^4.13",
+        "laravel/nova": "^4.13|^5.0",
         "mostafaznv/nova-video": "^6.1.0",
-        "nova-kit/nova-packages-tool": "^1.2",
+        "nova-kit/nova-packages-tool": "^1.2|^v2.0.0",
         "spatie/laravel-image-optimizer": "^1.6"
     },
     "autoload": {

package.json

@@ -54,6 +54,7 @@
         "@phudak/ckeditor5-emoji": "^1.1.1",
         "@vueuse/components": "^10.7.0",
         "@vueuse/core": "^10.7.0",
+        "laravel-nova-ui": "^0.4.12",
         "lodash": "^4.17.21",
         "postcss-scss": "^4.0.9",
         "regex-parser": "^2.2.11",

resources/js/components/FileInput.vue

@@ -14,9 +14,9 @@
             <label @click.stop.prevent="handleClick" class="block cursor-pointer p-4 bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-900 border-4 border-dashed hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 rounded-lg">
                 <div class="flex items-center space-x-4 pointer-events-none">
                     <p class="text-center pointer-events-none">
-                        <default-button type="button">
+                        <Button type="button">
                             {{ multiple ? __('Choose Files') : __('Choose File') }}
-                        </default-button>
+                        </Button>
                     </p>
 
                     <p class="pointer-events-none text-center text-sm text-gray-500 dark:text-gray-400 font-semibold">
@@ -29,6 +29,8 @@
 </template>
 
 <script setup>
+import {Button} from 'laravel-nova-ui'
+
 import {ref} from 'vue'
 
 

resources/js/components/media-browser/MediaBrowserDelete.vue

@@ -1,13 +1,13 @@
 <template>
     <button @click.stop="open" type="button" class="media-browser-btn" :disabled="disabled">
-        <Icon type="trash" />
+        <Icon name="trash" />
         <span>{{ __('Delete') }}</span>
     </button>
 
     <modal v-model="modalStatus" class="delete-modal" :content-no-overflow="true">
         <template #header>
             <div class="flex items-center gap-1">
-                <Icon type="trash" :solid="true" />
+                <Icon name="trash" type="mini" />
                 <span>{{ __('Remove assets') }}</span>
             </div>
         </template>
@@ -24,13 +24,13 @@
         </div>
 
         <template #footer>
-            <default-button @click.stop="submit" type="button" class="bg-red-500" size="sm">
+            <Button @click.stop="submit" type="button"  state="danger" size="small">
                 {{ __('Delete') }}
-            </default-button>
+            </Button>
 
-            <basic-button @click.stop="close" type="button" size="sm">
+            <Button @click.stop="close" type="button" class="mx-2" size="small">
                 {{ __('Cancel') }}
-            </basic-button>
+            </Button>
         </template>
     </modal>
 </template>
@@ -39,6 +39,7 @@
 import {ref, computed} from "vue"
 import modal from "../modal"
 import {useLocalization} from 'laravel-nova'
+import {Button, Icon} from 'laravel-nova-ui'
 import {selectedItemsProp, typeProp} from "../../utils/picker-props"
 import {guessResourceKey} from "../../utils/helpers"
 

resources/js/components/media-browser/MediaBrowserDisplayOptions.vue

@@ -2,7 +2,7 @@
     <div v-on-click-outside="close" class="options relative">
         <div>
             <button @click.stop="toggle" type="button" class="media-browser-btn" :title="__('Display Options')">
-                <Icon type="adjustments" />
+                <Icon name="adjustments-horizontal" />
             </button>
         </div>
 
@@ -61,6 +61,7 @@
 <script setup>
 import {ref, computed} from "vue"
 import {useLocalization} from 'laravel-nova'
+import { Icon } from 'laravel-nova-ui'
 import SwitchInput from "../SwitchInput.vue"
 import RadioInput from "../RadioInput.vue"
 import {orderByProp, keepAspectRatioProp, columnsProp, typeProp} from "../../utils/picker-props"
@@ -146,6 +147,10 @@ function close() {
 }
 
 function onOrderByChange(value) {
+    if (value?.target?.value) {
+        value = value.target.value
+    }
+
     emits('update:orderBy', value)
 }
 

resources/js/components/media-browser/MediaBrowserItem.vue

@@ -12,12 +12,12 @@
 
                 <picture v-else-if="cover || (type === 'image' && src)">
                     <template v-if="item.file?.meta?.format === 'gif'">
-                        <source :srcset="src">
+                        <source :src="src" :srcset="src">
                         <img alt="onion" :src="src">
                     </template>
 
                     <template v-else>
-                        <source :srcset="cover || src">
+                        <source :src="src" :srcset="cover || src">
                         <img alt="onion" :src="cover || src">
                     </template>
                 </picture>
@@ -36,15 +36,15 @@
             </div>
 
             <figcaption @click.stop="play" class="item__preview--play nova-ckeditor-mobile-none" :title="__('Preview')">
-                <Icon type="eye" />
+                <Icon name="eye" />
             </figcaption>
         </figure>
 
         <div class="item__details border-t border-gray-200 dark:border-gray-700">
             <span class="item__details--name" :title="item.name">{{ item.name }}</span>
 
             <button @click.stop.prevent="select(false)" type="button" class="item__details--select">
-                <Icon type="check" />
+                <Icon name="check" />
             </button>
         </div>
     </div>
@@ -54,6 +54,7 @@
 import {computed} from "vue"
 import AudioIcon from "../icons/AudioIcon.vue"
 import FileIcon from "../icons/FileIcon.vue"
+import {Icon} from 'laravel-nova-ui'
 import {typeProp, selectedItemsProp, keepAspectRatioProp, gallerySizeProp} from "../../utils/picker-props"
 
 

resources/js/components/media-browser/MediaBrowserNavbar.vue

@@ -7,7 +7,7 @@
                 class="media-browser-btn"
                 :disabled="!itemSelected"
             >
-                <Icon type="download" />
+                <Icon name="arrow-down-tray"/>
                 <span>{{ __('Download') }}</span>
             </button>
 
@@ -25,7 +25,7 @@
             />
 
             <button @click.stop="copyUrl" type="button" class="media-browser-btn" :disabled="!itemSelected">
-                <Icon type="clipboard" />
+                <Icon name="clipboard"/>
                 <span>{{ __('Copy URL') }}</span>
             </button>
         </div>
@@ -38,7 +38,7 @@
                 :title="__('Properties')"
                 :disabled="!itemSelected"
             >
-                <Icon type="information-circle" />
+                <Icon name="information-circle"/>
             </button>
 
             <media-browser-search-modal
@@ -70,6 +70,7 @@
 import {ref, computed, watch} from "vue"
 import MediaBrowserUpload from "./MediaBrowserUpload.vue"
 import {useClipboard} from "../../composables/useClipboard"
+import {Icon} from 'laravel-nova-ui'
 import MediaBrowserDisplayOptions from "./MediaBrowserDisplayOptions.vue"
 import MediaBrowserSearchModal from "./MediaBrowserSearchModal.vue"
 import MediaBrowserDelete from "./MediaBrowserDelete.vue"
@@ -166,7 +167,6 @@ watch(
 )
 
 
-
 // methods
 function download() {
     if (itemSelected.value) {

resources/js/components/media-browser/MediaBrowserPagination.vue

@@ -64,23 +64,24 @@
         </button>
 
 
-        <default-button
+        <Button
             @click.stop="pick"
             type="button"
             class="select-btn flex align-middle gap-2"
-            size="sm"
+            size="small"
+            icon="check"
             :class="{'opacity-50': selectedItems.length === 0}"
             :disabled="selectedItems.length === 0"
         >
-            <Icon type="check" width="20" height="20" />
             <span>{{ __('Choose') }}</span>
-        </default-button>
+        </Button>
     </div>
 </template>
 
 <script setup>
 import {ref, watch} from 'vue'
 import {selectedItemsProp} from "../../utils/picker-props"
+import {Button, Icon} from 'laravel-nova-ui'
 
 const emit = defineEmits([
     'update:modelValue',

resources/js/components/media-browser/MediaBrowserRenameModal.vue

@@ -1,13 +1,13 @@
 <template>
     <button @click.stop="open" type="button" class="media-browser-btn" :disabled="disabled">
-        <Icon type="pencil" />
+        <Icon name="pencil" />
         <span>{{ __('Rename') }}</span>
     </button>
 
     <modal v-model="modalStatus" class="rename-modal" :content-no-overflow="true">
         <template #header>
-            <div class="flex items-center gap-1">
-                <Icon type="pencil" :solid="true" />
+            <div class="flex items-center gap-2">
+                <Icon name="pencil" type="mini" />
 
                 <input
                     @keydown.enter.stop.prevent="submit"
@@ -21,13 +21,13 @@
 
         <template #header-right>
             <div class="flex items-center gap-2">
-                <basic-button @click.stop="close" type="button" size="sm">
+                <Button @click.stop="close" type="button" variant="ghost" size="small">
                     {{ __('Cancel') }}
-                </basic-button>
+                </Button>
 
-                <default-button @click.stop="submit" type="button" size="sm">
+                <Button @click.stop="submit" type="button" size="small">
                     {{ __('Submit') }}
-                </default-button>
+                </Button>
             </div>
         </template>
     </modal>
@@ -36,6 +36,7 @@
 <script setup>
 import {ref, computed, watch, nextTick} from "vue"
 import modal from "../modal"
+import {Button, Icon} from 'laravel-nova-ui'
 import {useLocalization} from 'laravel-nova'
 import {selectedItemsProp, typeProp} from "../../utils/picker-props"
 

resources/js/components/media-browser/MediaBrowserSearchModal.vue

@@ -1,12 +1,12 @@
 <template>
     <button @click.stop="modalStatus = true" v-bind="$attrs" type="button" class="media-browser-btn" :title="__('Search')">
-        <Icon type="search" />
+        <Icon name="magnifying-glass" />
     </button>
 
     <modal v-model="modalStatus" class="search-modal" :content-no-overflow="true">
         <template #header>
             <div class="flex items-center gap-1">
-                <Icon type="search" :solid="true" />
+                <Icon name="magnifying-glass" type="mini" :solid="true" />
 
                 <input
                     @keydown.enter.stop.prevent="submit"
@@ -37,7 +37,7 @@
                     type="button"
                     :title="__('Delete')"
                 >
-                    <Icon type="x" />
+                    <Icon name="x-mark" />
                 </button>
             </div>
         </div>
@@ -46,6 +46,7 @@
 
 <script setup>
 import {ref, computed, watch} from "vue"
+import {Icon} from 'laravel-nova-ui'
 import modal from "../modal"
 
 

resources/js/components/media-browser/MediaBrowserTypeList.vue

@@ -57,16 +57,16 @@
         </div>
 
         <div class="browser-list__pick">
-            <default-button
+            <Button
                 @click.stop="pick"
                 type="button"
                 class="flex align-middle gap-2"
-                size="sm"
+                size="small"
                 :class="{'opacity-50': selectedItems.length === 0}"
                 :disabled="selectedItems.length === 0"
             >
-                <Icon type="check" width="20" height="20" />
-            </default-button>
+                <Icon name="check" type="mini" />
+            </Button>
         </div>
     </div>
 </template>
@@ -76,6 +76,7 @@ import {ref} from 'vue'
 import AudioIcon from "../icons/AudioIcon.vue"
 import FileIcon from "../icons/FileIcon.vue"
 import VideoIcon from "../icons/VideoIcon.vue"
+import {Button, Icon} from 'laravel-nova-ui'
 import {selectedItemsProp} from "../../utils/picker-props"
 
 

resources/js/components/media-browser/MediaBrowserUpload.vue

@@ -1,14 +1,14 @@
 <template>
     <div v-on-click-outside="close" class="upload relative">
         <div>
-            <default-button @click.stop="pick" type="button" class="upload__button flex align-middle gap-2" size="sm" :class="{'with-menu': hasLaruploadTrait}">
-                <Icon type="upload" width="20" height="20" />
+            <Button @click.stop="pick" type="button" class="upload__button flex align-middle gap-2" size="small" :class="{'with-menu': hasLaruploadTrait}">
+                <Icon name="arrow-up-tray" type="mini" class="mr-1" />
                 <span>{{ __('Upload') }}</span>
 
                 <div v-if="hasLaruploadTrait" @click.stop="toggle" class="upload__button--menu">
-                    <Icon type="chevron-down" class="-mr-1" width="18" height="18" />
+                    <Icon name="chevron-down" type="mini" class="-mr-1" />
                 </div>
-            </default-button>
+            </Button>
 
 
             <input
@@ -61,16 +61,15 @@
         </div>
 
         <template v-if="hasLaruploadTrait" #footer>
-            <default-button
+            <Button
                 @click.stop="handleUploadWithCover"
                 type="button"
                 class="upload__button flex align-middle gap-2"
-                size="sm"
                 :class="{'opacity-50 disabled:cursor-not-allowed': uploadWithCoverIsDisabled}"
                 :disabled="uploadWithCoverIsDisabled"
             >
                 <span>{{ __('Upload') }}</span>
-            </default-button>
+            </Button>
         </template>
     </modal>
 </template>
@@ -79,6 +78,7 @@
 import {ref, computed, watch} from "vue"
 import Modal from "../modal.vue"
 import {useLocalization} from 'laravel-nova'
+import {Button, Icon} from 'laravel-nova-ui'
 import MediaBrowserUploadProgress from "./MediaBrowserUploadProgress.vue"
 import MediaBrowserUploadWithCover from "./MediaBrowserUploadWithCover.vue"
 import {hasLaruploadTraitProp, typeProp} from "../../utils/picker-props"
@@ -381,9 +381,12 @@ function calculateItemUploadedPercent(progressEvent, index) {
     max-width: 600px;
     height: 400px !important;
     top: calc(50% - 200px) !important;
-    left: calc(50% - 300px) !important;
     overflow: hidden;
 
+    @media (min-width: 801px) {
+        left: calc(50% - 300px) !important;
+    }
+
     &.large {
         height: 500px !important;
         top: calc(50% - 250px) !important;