Merge pull request #509 from LTKort/l11-compatibility

L11 compatibility

composer.json

@@ -20,7 +20,7 @@
     "require": {
         "php": "^7.3|^8.0",
         "ext-json": "*",
-        "laravel/framework": "^8.0|^9.0|^10.0",
+        "laravel/framework": "^8.0|^9.0|^10.0|^11.0",
         "laravel/nova": "^4.0",
         "nova-kit/nova-packages-tool": "^1.3.1"
     },

dist/js/field.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /**!
- * Sortable 1.15.0
+ * Sortable 1.15.2
  * @author	RubaXa   <[email protected]>
  * @author	owenm    <[email protected]>
  * @license MIT

package.json

@@ -19,7 +19,6 @@
         "browser-sync-webpack-plugin": "^2.3.0",
         "form-backend-validation": "^2.4.0",
         "laravel-mix": "^6.0.41",
-        "laravel-nova-ui": "^0.4.0",
         "lodash": "^4.17.21",
         "postcss": "^8.3.11",
         "resolve-url-loader": "^5.0.0",

resources/js/components/DeleteGroupModal.vue

@@ -1,67 +1,61 @@
 <template>
     <Modal :show="true">
-    <form
-      @submit.prevent="$emit('confirm')"
-      class="mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
-    >
-      <slot>
-        <ModalHeader v-text="__('Delete Group')" />
-        <ModalContent>
-            <p class="leading-normal" v-if="message">
-                {{ message }}
-            </p>
-            <p class="leading-normal" v-else>
-                {{ __('Are you sure you want to delete this group?') }}
-            </p>
-        </ModalContent>
-      </slot>
+        <form
+            @submit.prevent="$emit('confirm')"
+            class="mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
+        >
+            <slot>
+                <ModalHeader v-text="__('Delete Group')" />
+                <ModalContent>
+                    <p class="leading-normal" v-if="message">
+                        {{ message }}
+                    </p>
+                    <p class="leading-normal" v-else>
+                        {{ __("Are you sure you want to delete this group?") }}
+                    </p>
+                </ModalContent>
+            </slot>
 
-      <ModalFooter>
-        <div class="ml-auto">
-          <link-button
-            type="button"
-            data-testid="cancel-button"
-            dusk="cancel-delete-button"
-            @click.prevent="this.$emit('close')"
-            class="mr-3"
-          >
-            {{ no }}
-          </link-button>
+            <ModalFooter>
+                <div class="ml-auto">
+                    <link-button
+                        type="button"
+                        data-testid="cancel-button"
+                        dusk="cancel-delete-button"
+                        @click.prevent="this.$emit('close')"
+                        class="mr-3"
+                    >
+                        {{ no }}
+                    </link-button>
 
-          <Button
-              type="submit"
-              ref="confirmButton"
-              dusk="confirm-delete-button"
-              :loading="working"
-              :disabled="working"
-              state="danger"
-              :label="yes"
-          />
-        </div>
-      </ModalFooter>
-    </form>
+                    <danger-button
+                        ref="confirmButton"
+                        dusk="confirm-delete-button"
+                        :processing="working"
+                        :disabled="working"
+                        type="submit"
+                    >
+                        {{ yes }}
+                    </danger-button>
+                </div>
+            </ModalFooter>
+        </form>
     </Modal>
 </template>
 
 <script>
-import { Button } from 'laravel-nova-ui'
+    export default {
+        props: ["message", "yes", "no"],
 
-export default {
-    components: {
-        Button,
-    },
+        emits: ["close", "confirm"],
 
-    props: ['message', 'yes', 'no'],
-
-    emits: ['close', 'confirm'],
-
-    /**
-     * Mount the component.
-     */
-    mounted() {
-        this.$nextTick(() => {
-            // this.$refs.confirmButton.button.focus()
-        })
-    },
-}
+        /**
+         * Mount the component.
+         */
+        mounted() {
+            this.$nextTick(() => {
+                // this.$refs.confirmButton.button.focus()
+            });
+        },
+    };
 </script>

resources/js/components/DetailField.vue

@@ -1,11 +1,13 @@
 <template>
-    <PanelItem :field="field">
+    <PanelItem :index="index" :field="field">
         <template #value>
-            <div v-for="(group, index) in groups">
+            <div v-for="(group, index) in orderedGroups">
                 <detail-nova-flexible-content-group
                     :index="index"
                     :last="(index === groups.length - 1)"
                     :group="group"
+                    :key="group.key"
+                    :resource="resource"
                     :resourceName="resourceName"
                     :resourceId="resourceId"
                     :attribute="field.attribute"
@@ -21,44 +23,78 @@ import Group from '../group';
 export default {
 
     props: ['resource', 'resourceName', 'resourceId', 'field'],
+    data: () => ({
+        order: [],
+        groups: {},
+    }),
 
     computed: {
-        groups() {
-            let group;
-            return this.field.value.reduce((groups, item) => {
-                if(!(group = this.getGroup(item))) return groups;
-                groups.push(group);
+        layouts() {
+            return this.field.layouts || false;
+        },
+        orderedGroups() {
+            this.value = this.field.value || [];
+
+            this.populateGroups();
+
+            return this.order.reduce((groups, key) => {
+                groups.push(this.groups[key]);
                 return groups;
             }, []);
-        }
+        },
     },
 
     methods: {
+        /*
+            * Set the displayed layouts from the field's current value
+            */
+        populateGroups() {
+            this.order.splice(0, this.order.length);
+            this.groups = {};
+
+            for (var i = 0; i < this.value.length; i++) {
+                this.addGroup(
+                    this.getLayout(this.value[i].layout),
+                    this.value[i].attributes,
+                    this.value[i].key,
+                    this.field.collapsed,
+                    this.value[i].title_data
+                );
+            }
+        },
+
         /**
          * Retrieve layout definition from its name
          */
         getLayout(name) {
-            if(!this.field.layouts) return;
-            return this.field.layouts.find(layout => layout.name == name);
+            if (!this.layouts) return;
+            return this.layouts.find((layout) => layout.name == name);
         },
 
         /**
-         * create group instance from raw field value
+         * Append the given layout to flexible content's list
          */
-        getGroup(item) {
+        addGroup(layout, attributes, key, collapsed, resolved_title) {
+            if (!layout) return;
 
-            let layout = this.getLayout(item.layout);
+            collapsed = collapsed || false;
 
-            if(!layout) return;
+            let fields =
+                    attributes || JSON.parse(JSON.stringify(layout.fields)),
+                group = new Group(
+                    layout.name,
+                    layout.title,
+                    fields,
+                    this.field,
+                    key,
+                    collapsed,
+                    layout,
+                    resolved_title
+                );
 
-            return new Group(
-                layout.name,
-                layout.title,
-                item.attributes,
-                this.field,
-                item.key
-            );
+            this.groups[group.key] = group;
+            this.order.push(group.key);
         },
-    }
-}
+    },
+};
 </script>

src/Concerns/HasMediaLibrary.php

@@ -23,7 +23,7 @@ trait HasMediaLibrary
      *
      * @return \Spatie\MediaLibrary\HasMedia
      */
-    public function getMediaModel(): HasMedia
+    protected function getUnderlyingMediaModel(): HasMedia
     {
         $model = Flexible::getOriginModel() ?? $this->model;
 
@@ -47,7 +47,7 @@ public function getMediaModel(): HasMedia
     public function addMedia($file): \Spatie\MediaLibrary\MediaCollections\FileAdder
     {
         return app(FileAdderFactory::class)
-            ->create($this->getMediaModel(), $file, $this->getSuffix())
+            ->create($this->getUnderlyingMediaModel(), $file, $this->getSuffix())
             ->preservingOriginal();
     }
 
@@ -85,7 +85,7 @@ public function addMediaFromUrl($url, ...$allowedMimeTypes): \Spatie\MediaLibrar
         }
 
         return app(FileAdderFactory::class)
-            ->create($this->getMediaModel(), $temporaryFile, $this->getSuffix())
+            ->create($this->getUnderlyingMediaModel(), $temporaryFile, $this->getSuffix())
             ->usingName(pathinfo($filename, PATHINFO_FILENAME))
             ->usingFileName($filename);
     }
@@ -100,7 +100,7 @@ public function addMediaFromUrl($url, ...$allowedMimeTypes): \Spatie\MediaLibrar
     public function getMedia(string $collectionName = 'default', $filters = []): Collection
     {
         return app(MediaRepository::class)
-            ->getCollection($this->getMediaModel(), $collectionName.$this->getSuffix(), $filters);
+            ->getCollection($this->getUnderlyingMediaModel(), $collectionName.$this->getSuffix(), $filters);
     }
 
     /**
@@ -123,7 +123,7 @@ public function resolveForDisplay(array $attributes = [])
     {
         $this->fields->each(function ($field) use ($attributes) {
             if (is_a($field, Media::class)) {
-                $field->resolveForDisplay($this->getMediaModel(), $field->attribute.$this->getSuffix());
+                $field->resolveForDisplay($this->getUnderlyingMediaModel(), $field->attribute.$this->getSuffix());
             } else {
                 $field->resolveForDisplay($attributes);
             }