Feature: add configurable modalSize

resources/js/@types/index.ts

@@ -31,6 +31,7 @@ export type BrowserConfig = {
   perPage?: number
   paginationOptions?: number[]
   component?: string
+  modalSize: 'full' | '7xl'
 }
 
 export type Config = {
@@ -43,6 +44,7 @@ export type Config = {
   outdated?: boolean
   perPage?: number
   paginationOptions?: number[]
+  modalSize: 'full' | '7xl'
 }
 
 export type Entity = {

resources/js/components/Cards/FieldCard.vue

@@ -48,6 +48,7 @@ const preview = (file: Entity) => {
     perPage: 10,
     paginationOptions: undefined,
     component: undefined,
+    modalSize: props.field.modalSize ?? '7xl',
   })
   store.setDisk({
     disk: props.field.singleDisk ? 'default' : props.field.value[0].disk,

resources/js/components/Modals/PreviewModal.vue

@@ -44,6 +44,7 @@ const isCropModalOpened = computed(() => store.isOpen(`crop-image-${props.file?.
 const isEditModalOpened = computed(() => store.isOpen(`edit-image-${props.file?.id}`))
 const isField = computed(() => store.isField)
 const downloadUrl = computed(() => store.downloadUrl(props.file))
+const modalSize = computed(() => `max-w-${store.modalSize || '7xl'}`)
 
 // ACTIONS
 const openModal = (name: string) => store.openModal({ name })
@@ -85,7 +86,8 @@ const copy = (file: Entity) => {
 <template>
   <BaseModal as="template" class="nova-file-manager" :name="PREVIEW_MODAL_NAME" :initial-focus-ref="buttonRef">
     <DialogPanel
-      class="relative bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow-xl transform transition-all w-full max-w-7xl p-4 flex flex-col gap-4"
+      class="relative bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow-xl transform transition-all w-full p-4 flex flex-col gap-4"
+      :class="modalSize"
     >
       <div class="w-full flex flex-col flex-col-reverse gap-y-2 md:flex-row justify-between items-start">
         <h2 class="text-lg font-medium text-gray-900 dark:text-gray-400 break-all w-full">

resources/js/stores/browser.ts

@@ -71,6 +71,7 @@ interface State {
   singleDisk: boolean
   flexibleGroup: string[]
   fieldInit?: () => void
+  modalSize: 'full' | '7xl'
   permissions?: PermissionsCollection
   chunkSize: number
   usePintura: boolean
@@ -125,6 +126,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
     singleDisk: false,
     flexibleGroup: [],
     fieldInit: undefined,
+    modalSize: '7xl',
 
     // permissions
     permissions: {
@@ -805,6 +807,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       perPage,
       paginationOptions,
       component,
+      modalSize,
     }: BrowserConfig) {
       this.isField = true
 
@@ -826,6 +829,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
         perPage,
         paginationOptions,
         component,
+        modalSize,
       })
 
       this.openModal({ name: BROWSER_MODAL_NAME })
@@ -849,6 +853,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       perPage,
       paginationOptions,
       component,
+      modalSize,
     }: BrowserConfig) {
       this.multiple = multiple
       this.limit = limit
@@ -868,6 +873,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       this.permissions = permissions
       this.disk = undefined
       this.component = component
+      this.modalSize = modalSize
     },
 
     closeBrowser() {
@@ -908,6 +914,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       cropperOptions,
       perPage,
       paginationOptions,
+      modalSize,
     }: Config) {
       this.init()
       this.clearSelection()
@@ -924,6 +931,7 @@ const useBrowserStore = defineStore('nova-file-manager/browser', {
       this.perPage = perPage ?? this.perPage
       this.perPageOptions = paginationOptions ?? this.perPageOptions
       this.error = undefined
+      this.modalSize = modalSize
     },
   },
   getters: {

src/FileManager.php

@@ -86,6 +86,13 @@ public function wrapper(string $name): static
         return $this;
     }
 
+    public function modalSize(string $size = '7xl'): static
+    {
+        $this->withMeta(['modalSize' => $size]);
+
+        return $this;
+    }
+
     public function resolveThumbnailUrl()
     {
         return is_callable($this->thumbnailUrlCallback) && !empty($this->value)

tailwind.config.cjs

@@ -61,4 +61,8 @@ module.exports = {
       addUtilities(utilities)
     },
   ],
+  safeList: [
+    'max-w-7xl',
+    'max-w-full',
+  ]
 }