feat: implement color input type

database/migrations/2025_09_02_163155_add_color_column_to_pim_property_value_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('pim_property_value', function (Blueprint $table) {
+            $table->binary('color')->nullable()->after('image');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('pim_property_value', function (Blueprint $table) {
+            $table->dropColumn('color');
+        });
+    }
+};

database/seeders/PropertySeeder.php

@@ -41,19 +41,35 @@ public function run(): void
             'description' => ['en' => 'Product color'],
             'is_active' => true,
             'is_global' => true,
+            'type' => \Eclipse\Catalogue\Enums\PropertyType::COLOR->value,
             'max_values' => 3, // Allow multiple colors
             'enable_sorting' => true,
             'is_filter' => true,
         ]);
 
         // Create color values
         $colors = ['Red', 'Blue', 'Green', 'Black', 'White', 'Yellow', 'Purple', 'Orange'];
+        $hexMap = [
+            'Red' => '#ff0000',
+            'Blue' => '#0000ff',
+            'Green' => '#00ff00',
+            'Black' => '#000000',
+            'White' => '#ffffff',
+            'Yellow' => '#ffff00',
+            'Purple' => '#800080',
+            'Orange' => '#ffa500',
+        ];
         foreach ($colors as $index => $color) {
-            PropertyValue::create([
+            $pv = PropertyValue::create([
                 'property_id' => $colorProperty->id,
                 'value' => ['en' => $color],
                 'sort' => $index * 10,
             ]);
+            $hex = $hexMap[$color] ?? null;
+            if ($hex) {
+                $pv->color = json_encode(['type' => 's', 'color' => $hex]);
+                $pv->save();
+            }
         }
 
         // Create Size property (for clothing type only)

resources/css/catalogue.css

@@ -1,3 +1,20 @@
 .translatable-field-container > .grid {
   row-gap: .25rem !important;
 }
+
+.color-swatch {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  outline: 1px solid rgba(0, 0, 0, .15);
+}
+
+.color-swatch-lg {
+  width: 64px;
+  height: 64px;
+}
+
+.color-swatch.multi {
+  background-image: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px);
+}

resources/views/components/color-preview.blade.php

@@ -0,0 +1,3 @@
+<div>
+    <span class="color-swatch color-swatch-lg{{ !empty($isMulti) ? ' multi' : '' }}" style="{{ $style ?? '' }}"></span>
+</div>

src/Casts/BackgroundCast.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace Eclipse\Catalogue\Casts;
+
+use Eclipse\Catalogue\Values\Background;
+use Illuminate\Contracts\Database\Eloquent\CastsAttributes;
+
+class BackgroundCast implements CastsAttributes
+{
+    /**
+     * Cast the attribute from the database.
+     *
+     * @param  \Illuminate\Database\Eloquent\Model  $model  The model instance.
+     * @param  string  $key  The attribute name.
+     * @param  mixed  $value  The attribute value.
+     * @param  array  $attributes  The attributes array.
+     */
+    public function get($model, string $key, $value, array $attributes): Background
+    {
+        if ($value === null || $value === '') {
+            return Background::none();
+        }
+
+        $decoded = json_decode($value, true);
+        if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
+            return Background::fromArray($decoded);
+        }
+
+        $maybeArray = @unserialize($value);
+        if (is_array($maybeArray)) {
+            return Background::fromArray($maybeArray);
+        }
+
+        return Background::none();
+    }
+
+    /**
+     * Cast the attribute to a database value.
+     *
+     * @param  \Illuminate\Database\Eloquent\Model  $model  The model instance.
+     * @param  string  $key  The attribute name.
+     * @param  mixed  $value  The attribute value.
+     * @param  array  $attributes  The attributes array.
+     */
+    public function set($model, string $key, $value, array $attributes): ?string
+    {
+        if ($value instanceof Background) {
+            return json_encode($value->toArray());
+        }
+
+        if (is_array($value)) {
+            return json_encode($value);
+        }
+
+        return $value === null ? null : (string) $value;
+    }
+}

src/Enums/BackgroundType.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Eclipse\Catalogue\Enums;
+
+use Filament\Support\Contracts\HasLabel;
+
+enum BackgroundType: string implements HasLabel
+{
+    case NONE = 'n';
+    case SOLID = 's';
+    case GRADIENT = 'g';
+    case MULTICOLOR = 'm';
+
+    /**
+     * Get the label for the background type.
+     */
+    public function getLabel(): ?string
+    {
+        return match ($this) {
+            self::NONE => 'None',
+            self::SOLID => 'Solid',
+            self::GRADIENT => 'Gradient',
+            self::MULTICOLOR => 'Multicolor',
+        };
+    }
+}

src/Enums/GradientDirection.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Eclipse\Catalogue\Enums;
+
+use Filament\Support\Contracts\HasLabel;
+
+enum GradientDirection: string implements HasLabel
+{
+    case RIGHT = 'right';
+    case LEFT = 'left';
+    case TOP = 'top';
+    case BOTTOM = 'bottom';
+
+    /**
+     * Get the label for the gradient direction.
+     */
+    public function getLabel(): ?string
+    {
+        return match ($this) {
+            self::RIGHT => 'Right',
+            self::LEFT => 'Left',
+            self::TOP => 'Top',
+            self::BOTTOM => 'Bottom',
+        };
+    }
+}

src/Enums/GradientStyle.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace Eclipse\Catalogue\Enums;
+
+use Filament\Support\Contracts\HasLabel;
+
+enum GradientStyle: string implements HasLabel
+{
+    case SHARP = 's';
+    case SOFT = 'f';
+
+    /**
+     * Get the label for the gradient style.
+     */
+    public function getLabel(): ?string
+    {
+        return match ($this) {
+            self::SHARP => 'Sharp',
+            self::SOFT => 'Soft',
+        };
+    }
+}

src/Enums/PropertyType.php

@@ -5,12 +5,17 @@
 enum PropertyType: string
 {
     case LIST = 'list';
+    case COLOR = 'color';
     case CUSTOM = 'custom';
 
+    /**
+     * Get the label for the property type.
+     */
     public function getLabel(): string
     {
         return match ($this) {
             self::LIST => 'List (Predefined Values)',
+            self::COLOR => 'Color (Predefined with color swatch)',
             self::CUSTOM => 'Custom (User Input)',
         };
     }

src/Filament/Resources/ProductResource.php

@@ -312,7 +312,7 @@ function ($query) {
                                         $schema = [];
 
                                         foreach ($properties as $property) {
-                                            if ($property->isListType()) {
+                                            if ($property->isListType() || $property->isColorType()) {
                                                 $valueOptions = $property->values->pluck('value', 'id')->toArray();
 
                                                 if (empty($valueOptions)) {

src/Filament/Resources/ProductResource/Pages/EditProduct.php

@@ -50,7 +50,7 @@ protected function mutateFormDataBeforeFill(array $data): array
                 ->get();
 
             foreach ($properties as $property) {
-                if ($property->isListType()) {
+                if ($property->isListType() || $property->isColorType()) {
                     $fieldName = "property_values_{$property->id}";
                     $selectedValues = $this->record->propertyValues()
                         ->where('pim_property_value.property_id', $property->id)

src/Filament/Resources/PropertyResource.php

@@ -147,6 +147,7 @@ public static function table(Table $table): Table
                     ->badge()
                     ->color(fn (string $state): string => match ($state) {
                         'list' => 'success',
+                        'color' => 'info',
                         'custom' => 'warning',
                         default => 'gray',
                     }),
@@ -160,7 +161,8 @@ public static function table(Table $table): Table
                 Tables\Columns\IconColumn::make('is_multilang')
                     ->label('Multilingual')
                     ->boolean()
-                    ->visible(fn (?Property $record) => $record && $record->isCustomType() && $record->supportsMultilang()),
+                    ->state(fn (?Property $record) => $record?->supportsMultilang())
+                    ->visible(fn (?Property $record) => $record && $record->supportsMultilang()),
 
                 Tables\Columns\IconColumn::make('is_global')
                     ->label(__('eclipse-catalogue::property.table.columns.is_global'))
@@ -202,6 +204,7 @@ public static function table(Table $table): Table
                     ->label('Property Type')
                     ->options([
                         PropertyType::LIST->value => PropertyType::LIST->getLabel(),
+                        PropertyType::COLOR->value => PropertyType::COLOR->getLabel(),
                         PropertyType::CUSTOM->value => PropertyType::CUSTOM->getLabel(),
                     ]),
 
@@ -220,7 +223,7 @@ public static function table(Table $table): Table
                         ->label(__('eclipse-catalogue::property.table.actions.values'))
                         ->icon('heroicon-o-list-bullet')
                         ->url(fn (Property $record): string => PropertyValueResource::getUrl('index', ['property' => $record->id]))
-                        ->visible(fn (Property $record): bool => $record->type === PropertyType::LIST->value),
+                        ->visible(fn (Property $record): bool => in_array($record->type, [PropertyType::LIST->value, PropertyType::COLOR->value], true)),
                     Tables\Actions\EditAction::make(),
                     Tables\Actions\DeleteAction::make(),
                 ])->label('Actions'),
@@ -230,7 +233,7 @@ public static function table(Table $table): Table
                     Tables\Actions\DeleteBulkAction::make(),
                 ]),
             ])
-            ->recordUrl(fn (Property $record): ?string => $record->type === PropertyType::LIST->value ? PropertyValueResource::getUrl('index', ['property' => $record->id]) : null)
+            ->recordUrl(fn (Property $record): ?string => in_array($record->type, [PropertyType::LIST->value, PropertyType::COLOR->value], true) ? PropertyValueResource::getUrl('index', ['property' => $record->id]) : null)
             ->defaultSort('name');
     }