docs

public/vendor/moonshine/manifest.json

@@ -4,6 +4,11 @@
     "isEntry": true,
     "src": "resources/css/main.css"
   },
+  "resources/css/minimalistic.css": {
+    "file": "assets/minimalistic.css",
+    "isEntry": true,
+    "src": "resources/css/minimalistic.css"
+  },
   "resources/fonts/Gilroy-Black.woff2": {
     "file": "fonts/Gilroy-Black.woff2",
     "src": "resources/fonts/Gilroy-Black.woff2"

resources/views/pages/en/components/metric_donut_chart.blade.php

@@ -3,6 +3,7 @@
     :sectionMenu="[
         'Sections' => [
             ['url' => '#make', 'label' => 'Make'],
+            ['url' => '#colors', 'label' => 'Colors'],
             ['url' => '#column-span', 'label' => 'Block width'],
         ]
     ]"
@@ -46,8 +47,49 @@ public function components(): array
 //...
 </x-code>
 
-<x-image theme="light" src="{{ asset('screenshots/donut_chart_metric.png') }}"></x-image>
-<x-image theme="dark" src="{{ asset('screenshots/donut_chart_metric_dark.png') }}"></x-image>
+<x-moonshine::grid>
+{!!
+    \MoonShine\Metrics\DonutChartMetric::make('Subscribers')
+        ->values(['CutCode' => 10000, 'Apple' => 9999])
+        ->columnSpan(4)
+!!}
+</x-moonshine::grid>
+
+<x-sub-title id="colors">Colors</x-sub-title>
+
+<x-p>
+    The <code>colors()</code> method allows you to specify colors for the metric.
+</x-p>
+
+<x-code language="php">
+colors(array|Closure $values)
+</x-code>
+
+<x-code language="php">
+use MoonShine\Metrics\DonutChartMetric;
+
+//...
+
+public function components(): array
+{
+    return [
+        DonutChartMetric::make('Subscribers')
+            ->values(['CutCode' => 10000, 'Apple' => 9999])
+            ->colors(['#ffcc00', '#00bb00']) // [tl! focus]
+    ];
+}
+
+//...
+</x-code>
+
+<x-moonshine::grid>
+{!!
+    \MoonShine\Metrics\DonutChartMetric::make('Subscribers')
+        ->values(['CutCode' => 10000, 'Apple' => 9999])
+        ->colors(['#ffcc00', '#00bb00'])
+        ->columnSpan(4)
+!!}
+</x-moonshine::grid>
 
 <x-sub-title id="column-span">Block width</x-sub-title>
 

resources/views/pages/en/recipes.blade.php

@@ -13,6 +13,7 @@
             ['url' => '#update-on-preview-pivot', 'label' => 'updateOnPreview for pivot fields'],
             ['url' => '#hasmany-parent-id', 'label' => 'Parent ID in HasMany'],
             ['url' => '#tinymce-limit-preview', 'label' => 'TinyMce number of characters in preview'],
+            ['url' => '#change-field-logic', 'label' => 'Changing field logic'],
         ]
     ]"
 >
@@ -28,5 +29,8 @@
 @include('pages.en.recipes.update-on-preview-pivot', ['title' => 'updateOnPreview for pivot fields'])
 @include('pages.en.recipes.hasmany-parent-id', ['title' => 'Parent ID in HasMany'])
 @include('pages.en.recipes.tinymce-limit-preview', ['title' => 'TinyMce number of characters in preview'])
+@include('pages.en.recipes.change-field-logic', [
+    'title' => 'An example of changing the behavior logic of the Image field to save paths to images in a separate database table.'
+])
 
 </x-page>

resources/views/pages/en/recipes/change-field-logic.blade.php

@@ -0,0 +1,73 @@
+<x-recipe id="change-field-logic" title="{{ $title ?? 'Recipe' }}">
+
+<x-ul>
+    <li>
+        To solve this problem, you need to block the <code>onApply()</code> method
+        and moved the logic to <code>onAfterApply()</code>.<br />
+        This will get the parent model on the creation page.<br />
+        We will have access to the model and we will be able to work with its relationships.
+    </li>
+    <li>
+        The <code>onAfterApply()</code> method stores and retrieves old and current values,
+        also cleaning deleted files.
+    </li>
+    <li>
+        After deleting the parent record, the <code>onAfterDestroy()</code> method deletes the downloaded files.
+    </li>
+</x-ul>
+
+<x-code language="php">
+use MoonShine\Fields\Image;
+
+//...
+
+Image::make('Images', 'images')
+    ->multiple()
+    ->removable()
+    ->changeFill(function (Model $data, Image $field) {
+        // return $data->images->pluck('file');
+        // or raw
+        return DB::table('images')->pluck('file');
+    })
+    ->onApply(function (Model $data) {
+        // block onApply
+        return $data;
+    })
+    ->onAfterApply(function (Model $data, false|array $values, Image $field) {
+        // $field->getRemainingValues(); values that remained in the form taking into account deletions
+        // $field->toValue(); current images
+        // $field->toValue()->diff($field->getRemainingValues()) deleted images
+
+        if($values !== false) {
+            foreach ($values as $value) {
+                DB::table('images')->insert([
+                    'file' => $field->store($value),
+                ]);
+            }
+        }
+
+        foreach ($field->toValue()->diff($field->getRemainingValues()) as $removed) {
+            DB::table('images')->where('file', $removed)->delete();
+            Storage::disk('public')->delete($removed);
+        }
+
+        // or $field->removeExcludedFiles();
+
+        return $data;
+    })
+    ->onAfterDestroy(function (Model $data, mixed $values, Image $field) {
+        foreach ($values as $value) {
+            Storage::disk('public')->delete($value);
+        }
+
+        return $data;
+    })
+
+//...
+</x-code>
+
+<x-moonshine::alert type="warning" icon="heroicons.information-circle">
+    The code comments out the relation option and provides an example of natively obtaining file paths from another table.
+</x-moonshine::alert>
+
+</x-recipe>