Hide group buttons

composer.json

@@ -18,10 +18,10 @@
         }
     ],
     "require": {
-        "php": "^7.3|^8.0",
+        "php": "^7.3|^8.0|^8.1|^8.2",
         "ext-json": "*",
         "laravel/framework": "^8.0|^9.0|^10.0|^11.0",
-        "laravel/nova": "^4.0",
+        "laravel/nova": "4.33.3",
         "nova-kit/nova-packages-tool": "^1.3.1"
     },
     "autoload": {

dist/css/field.css

@@ -1 +1,38 @@
-.flexible-search-menu-multiselect{--ms-font-size:0.875rem;--ms-option-font-size:0.875rem;--ms-ring-color:rgb(var(--colors-primary-100));--ms-border-color:rgb(var(--colors-gray-300))}html.dark .flexible-search-menu-multiselect{--ms-ring-color:rgb(var(--colors-gray-700));--ms-border-color:rgb(var(--colors-gray-700));--ms-dropdown-border-color:var(--ms-border-color);--ms-bg:rgb(var(--colors-gray-900));--ms-dropdown-bg:var(--ms-bg);--ms-option-bg-pointed:rgb(var(--colors-gray-700));--ms-option-color-pointed:rgb(var(--colors-gray-400))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgba(var(--colors-gray-50),var(--tw-bg-opacity))}.dark .dark\:hover\:bg-gray-900:hover{--tw-bg-opacity:1;background-color:rgba(var(--colors-gray-900),var(--tw-bg-opacity))}.nova-flexible-content-sortable-ghost{opacity:.5}.nova-flexible-content-sortable-drag{background-color:rgba(var(--colors-gray-100),var(--tw-bg-opacity));border-radius:10px}.dark .nova-flexible-content-sortable-drag{background-color:rgba(var(--colors-gray-900),var(--tw-bg-opacity))}
+.flexible-search-menu-multiselect {
+  --ms-font-size: 0.875rem;
+  --ms-option-font-size: 0.875rem;
+  --ms-ring-color: rgb(var(--colors-primary-100));
+  --ms-border-color: rgb(var(--colors-gray-300));
+}
+html.dark .flexible-search-menu-multiselect {
+  --ms-ring-color: rgb(var(--colors-gray-700));
+  --ms-border-color: rgb(var(--colors-gray-700));
+  --ms-dropdown-border-color: var(--ms-border-color);
+  --ms-bg: rgb(var(--colors-gray-900));
+  --ms-dropdown-bg: var(--ms-bg);
+  --ms-option-bg-pointed: rgb(var(--colors-gray-700));
+  --ms-option-color-pointed: rgb(var(--colors-gray-400));
+}
+
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--colors-gray-50), var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-gray-900:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--colors-gray-900), var(--tw-bg-opacity));
+}
+
+.nova-flexible-content-sortable-ghost {
+  opacity: 0.5;
+}
+
+.nova-flexible-content-sortable-drag {
+  background-color: rgba(var(--colors-gray-100), var(--tw-bg-opacity));
+  border-radius: 10px;
+}
+
+.dark .nova-flexible-content-sortable-drag {
+  background-color: rgba(var(--colors-gray-900), var(--tw-bg-opacity));
+}

package.json

@@ -27,5 +27,8 @@
         "sortablejs": "^1.15.0",
         "vue-loader": "^16.8.3",
         "vuex": "^4.0.2"
+    },
+    "dependencies": {
+        "laravel-nova-ui": "^0.4.12"
     }
 }

resources/js/components/FormGroup.vue

@@ -28,7 +28,7 @@
                       {{ group.title }}
                     </p>
 
-                    <div class="flex" v-if="!readonly">
+                    <div class="flex" v-if="!readonly && !hideGroupButtons">
                         <button
                             dusk="drag-group"
                             type="button"
@@ -113,6 +113,7 @@ export default {
             removeMessage: false,
             collapsed: this.group.collapsed,
             readonly: this.group.readonly,
+            hideGroupButtons: this.field.hideGroupButtons,            
         };
     },
 

src/Flexible.php

@@ -112,6 +112,17 @@ public function fullWidth()
         return $this->withMeta(['fullWidth' => true]);
     }
 
+    /**
+     * HideGroupButtons. Hide drag and delete buttons
+     *
+     * @param  bool  $value
+     * @return mixed
+     */
+    public function hideGroupButtons(bool $value = true)
+    {
+        return $this->withMeta(['hideGroupButtons' => $value]);
+    }
+
     /**
      * Make the flexible content take up the full width
      * of the form. Labels will sit above
@@ -160,8 +171,8 @@ public function resolver($resolver)
             $resolver = new $resolver();
         }
 
-        if (! ($resolver instanceof ResolverInterface)) {
-            throw new \Exception('Resolver Class "'.get_class($resolver).'" does not implement ResolverInterface.');
+        if (!($resolver instanceof ResolverInterface)) {
+            throw new \Exception('Resolver Class "' . get_class($resolver) . '" does not implement ResolverInterface.');
         }
 
         $this->resolver = $resolver;
@@ -191,8 +202,8 @@ public function addLayout(...$arguments)
             $layout = new $layout();
         }
 
-        if (! ($layout instanceof LayoutInterface)) {
-            throw new \Exception('Layout Class "'.get_class($layout).'" does not implement LayoutInterface.');
+        if (!($layout instanceof LayoutInterface)) {
+            throw new \Exception('Layout Class "' . get_class($layout) . '" does not implement LayoutInterface.');
         }
 
         $this->registerLayout($layout);
@@ -235,7 +246,7 @@ public function collapsed(bool $value = true)
      */
     protected function registerLayout(LayoutInterface $layout)
     {
-        if (! $this->layouts) {
+        if (!$this->layouts) {
             $this->layouts = new LayoutsCollection();
             $this->withMeta(['layouts' => $this->layouts]);
         }
@@ -306,7 +317,7 @@ public function isShownOnDetail(NovaRequest $request, $resource): bool
      */
     protected function fillAttribute(NovaRequest $request, $requestAttribute, $model, $attribute)
     {
-        if (! $request->exists($requestAttribute)) {
+        if (!$request->exists($requestAttribute)) {
             return;
         }
 
@@ -338,7 +349,7 @@ protected function fillAttribute(NovaRequest $request, $requestAttribute, $model
      */
     protected function syncAndFillGroups(NovaRequest $request, $requestAttribute): array
     {
-        if (! ($raw = $this->extractValue($request, $requestAttribute))) {
+        if (!($raw = $this->extractValue($request, $requestAttribute))) {
             $this->fireRemoveCallbacks(collect());
             $this->groups = collect();
 
@@ -354,7 +365,7 @@ protected function syncAndFillGroups(NovaRequest $request, $requestAttribute): a
 
             $group = $this->findGroup($key) ?? $this->newGroup($layout, $key);
 
-            if (! $group instanceof Layout) {
+            if (!$group instanceof Layout) {
                 return [];
             }
 
@@ -382,7 +393,7 @@ protected function fireRemoveCallbacks(Collection $new_groups)
             return $item->inUseKey();
         });
         $removed_groups = $this->groups->filter(function ($item) use ($new_group_keys) {
-            return ! $new_group_keys->contains($item->inUseKey());
+            return !$new_group_keys->contains($item->inUseKey());
         })->each(function ($group) {
             if (method_exists($group, 'fireRemoveCallback')) {
                 $group->fireRemoveCallback($this);
@@ -401,11 +412,11 @@ protected function extractValue(NovaRequest $request, $attribute)
     {
         $value = $request[$attribute];
 
-        if (! $value) {
+        if (!$value) {
             return;
         }
 
-        if (! is_array($value)) {
+        if (!is_array($value)) {
             throw new \Exception('Unable to parse incoming Flexible content, data should be an array.');
         }
 
@@ -449,7 +460,7 @@ protected function resolveGroupsForDisplay($groups)
      */
     protected function buildGroups($resource, $attribute)
     {
-        if (! $this->resolver) {
+        if (!$this->resolver) {
             $this->resolver(Resolver::class);
         }
 
@@ -480,7 +491,7 @@ protected function newGroup($layout, $key)
     {
         $layout = $this->layouts->find($layout);
 
-        if (! $layout instanceof Layout) {
+        if (!$layout instanceof Layout) {
             return null;
         }
 
@@ -535,13 +546,13 @@ public function getUpdateRules(NovaRequest $request)
      */
     protected function getFlexibleRules(NovaRequest $request, $specificty)
     {
-        if (! ($value = $this->extractValue($request, $this->attribute))) {
+        if (!($value = $this->extractValue($request, $this->attribute))) {
             return [];
         }
 
         $rules = $this->generateRules($request, $value, $specificty);
 
-        if (! is_a($request, ScopedRequest::class)) {
+        if (!is_a($request, ScopedRequest::class)) {
             // We're not in a nested flexible, meaning we're
             // assuming the field is located at the root of
             // the model's attributes. Therefore, we should now
@@ -570,16 +581,16 @@ protected function generateRules(NovaRequest $request, $value, $specificty)
         return collect($value)->map(function ($item, $key) use ($request, $specificty) {
             $group = $this->newGroup($item['layout'], $item['key']);
 
-            if (! $group) {
+            if (!$group) {
                 return [];
             }
 
             $scope = ScopedRequest::scopeFrom($request, $item['attributes'], $item['key']);
 
-            return $group->generateRules($scope, $specificty, $this->attribute.'.'.$key);
+            return $group->generateRules($scope, $specificty, $this->attribute . '.' . $key);
         })
-                ->collapse()
-                ->all();
+            ->collapse()
+            ->all();
     }
 
     /**
@@ -609,7 +620,8 @@ protected static function registerValidationKeys(array $rules)
         }, $rules);
 
         static::$validatedKeys = array_merge(
-            static::$validatedKeys, $validatedKeys
+            static::$validatedKeys,
+            $validatedKeys
         );
     }
 
@@ -638,7 +650,7 @@ protected function registerOriginModel($model)
             $model = $model->getOriginal();
         }
 
-        if (! is_a($model, \Illuminate\Database\Eloquent\Model::class)) {
+        if (!is_a($model, \Illuminate\Database\Eloquent\Model::class)) {
             return;
         }