Merge branch 'master' into release/1.3

.github/workflows/psalm.yml

@@ -0,0 +1,45 @@
+name: Psalm
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - '**.php'
+      - 'composer*'
+      - 'psalm*'
+
+jobs:
+  psalm:
+    name: Psalm
+    runs-on: ubuntu-latest
+    timeout-minutes: 6
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: ${{ github.head_ref }}
+
+      # mtime needs to be restored for Psalm cache to work correctly
+      - name: Restore mtimes
+        uses: chetan/git-restore-mtime-action@v1
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: 8.1
+          coverage: none
+
+      - name: Install composer dependencies
+        run: |
+          composer config --ansi -- http-basic.nova.laravel.com ${{ secrets.NOVA_USERNAME }} ${{ secrets.NOVA_LICENSE_KEY }}
+          composer install --no-interaction --no-progress --no-scripts
+
+      # the way cache keys are set up will always cause a cache miss
+      # but will restore the cache generated during the previous run based on partial match
+      - name: Retrieve Psalm’s cache
+        uses: actions/cache@v3
+        with:
+          path: ./cache/psalm
+          key: ${{ runner.os }}-psalm-cache-${{ hashFiles('psalm.xml', 'psalm-baseline.xml', './composer.json') }}
+
+      - name: Run Psalm
+        run: ./vendor/bin/psalm --find-unused-psalm-suppress --output-format=github

README.md

@@ -8,6 +8,10 @@ An easy & complete Flexible Field for Laravel Nova, perfect for repeated and fle
 
 ![Laravel Nova Flexible Content in action](https://user-images.githubusercontent.com/9298484/164532562-6e4e4179-8a53-470c-97c8-237e9a2c2ebb.gif)
 
+## We are looking for someone to help us maintain this package!
+
+We'd love to accept someone who uses this package a lot to help us review and merge incoming PRs. Shoot us a message at [email protected] if you're willing to help!
+
 ## Quick start
 
 Here's a very condensed guide to get you started asap.

composer.json

@@ -19,7 +19,8 @@
     ],
     "require": {
         "php": "^7.3|^8.0",
-        "laravel/framework": "^8.0|^9.0|^10.0",
+        "ext-json": "*",
+        "laravel/framework": "^8.0|^9.0|^10.0|^11.0",
         "laravel/nova": "^4.0",
         "nova-kit/nova-packages-tool": "^1.3.1"
     },
@@ -52,10 +53,13 @@
     "minimum-stability": "dev",
     "prefer-stable": true,
     "require-dev": {
+        "laravel/pint": "^1.2",
         "phpunit/phpunit": "^9.5",
-        "laravel/pint": "^1.2"
+        "psalm/plugin-laravel": "^2.0"
     },
     "scripts": {
+        "psalm": "psalm --find-unused-psalm-suppress --output-format=phpstorm",
+        "psalm-update-baseline": "psalm --set-baseline=psalm-baseline.xml",
         "test": "phpunit --colors=always tests",
         "fix-style": "./vendor/bin/pint"
     }

docs/README.md

@@ -412,8 +412,8 @@ The `get` method is used to resolve the field's content. It is responsible to re
  *
  * @param  mixed  $resource
  * @param  string $attribute
- * @param  Whitecube\NovaFlexibleContent\Layouts\Collection $layouts
- * @return Illuminate\Support\Collection
+ * @param  \Whitecube\NovaFlexibleContent\Layouts\Collection $layouts
+ * @return \Illuminate\Support\Collection
  */
 public function get($resource, $attribute, $layouts) {
     $blocks = $resource->blocks()->orderBy('order')->get();
@@ -438,7 +438,7 @@ The `set` method is responsible for saving the Flexible's content somewhere the
  *
  * @param  mixed  $model
  * @param  string $attribute
- * @param  Illuminate\Support\Collection $groups
+ * @param  \Illuminate\Support\Collection $groups
  * @return void
  */
 public function set($model, $attribute, $groups)

psalm-baseline.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<files psalm-version="5.6.0@e784128902dfe01d489c4123d69918a9f3c1eac5">
+  <file src="src/FileAdder/FileAdder.php">
+    <UndefinedClass>
+      <code>OriginalFileAdder</code>
+    </UndefinedClass>
+  </file>
+  <file src="src/FileAdder/FileAdderFactory.php">
+    <UndefinedClass>
+      <code>OriginalFileAdderFactory</code>
+    </UndefinedClass>
+  </file>
+  <file src="src/Flexible.php">
+    <UndefinedClass>
+      <code>$model</code>
+      <code>\Whitecube\NovaPage\Pages\Template</code>
+    </UndefinedClass>
+  </file>
+  <file src="src/Layouts/Collection.php">
+    <UnimplementedInterfaceMethod>
+      <code>Collection</code>
+    </UnimplementedInterfaceMethod>
+  </file>
+  <file src="src/Layouts/Layout.php">
+    <UndefinedTrait>
+      <code>HasAttributes</code>
+    </UndefinedTrait>
+  </file>
+</files>

psalm.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0"?>
+<psalm
+    errorLevel="7"
+    resolveFromConfigFile="true"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xmlns="https://getpsalm.org/schema/config"
+    xsi:schemaLocation="https://getpsalm.org/schema/config vendor/vimeo/psalm/config.xsd"
+    findUnusedBaselineEntry="true"
+    errorBaseline="psalm-baseline.xml"
+>
+    <projectFiles>
+        <directory name="src"/>
+        <ignoreFiles>
+            <directory name="vendor"/>
+        </ignoreFiles>
+    </projectFiles>
+    <plugins>
+        <pluginClass class="Psalm\LaravelPlugin\Plugin"/>
+    </plugins>
+</psalm>

resources/js/components/DeleteGroupModal.vue

@@ -1,61 +1,66 @@
 <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>
 
-          <danger-button
-            ref="confirmButton"
-            dusk="confirm-delete-button"
-            :processing="working"
-            :disabled="working"
-            type="submit"
-          >
-            {{ yes }}
-          </danger-button>
-        </div>
-      </ModalFooter>
-    </form>
+                    <Button
+                        ref="confirmButton"
+                        dusk="confirm-delete-button"
+                        :loading="working"
+                        :disabled="working"
+                        state="danger"
+                        type="submit"
+                    >
+                        {{ yes }}
+                    </Button>
+                </div>
+            </ModalFooter>
+        </form>
     </Modal>
 </template>
 
 <script>
-export default {
-    props: ['message', 'yes', 'no'],
+    import { Button } from 'laravel-nova-ui';
 
-    emits: ['close', 'confirm'],
+    export default {
+        props: ["message", "yes", "no"],
 
-    /**
-     * Mount the component.
-     */
-    mounted() {
-        this.$nextTick(() => {
-            // this.$refs.confirmButton.button.focus()
-        })
-    },
-}
+        emits: ["close", "confirm"],
+
+        components: { Button },
+
+        /**
+         * 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>