feat: model attribute conditions and section conditional visibility

CHANGELOG.md

@@ -11,7 +11,7 @@ All notable changes to `custom-fields` will be documented in this file.
 - **RichTextColumn**: Better rich editor display in tables
 - **Tags Filter**: Colored badges and filters for tags input
 - **Upgrade Command**: Automated migration tool (`vendor/bin/custom-fields-upgrade`)
-- **Optional Sections**: `SYSTEM_SECTIONS_ENABLED` feature flag for sectionless mode
+- **Optional Sections**: `SYSTEM_SECTIONS` feature flag for sectionless mode
 - **Field Search**: Search functionality in custom fields management page
 - **Field Deactivation**: Soft-disable non-system-defined fields and sections
 - **Avatar Configuration**: Display options for entity references

README.md

@@ -68,7 +68,7 @@ public function form(Schema $schema): Form
     return $schema->components([
         // Your existing form fields...
 
-        CustomFields::form()->forSchema($schema)->build()
+        CustomFields::form()->build()
     ]);
 }
 ```

config/custom-fields.php

@@ -56,7 +56,7 @@
             CustomFieldsFeature::UI_TABLE_FILTERS,
             CustomFieldsFeature::UI_FIELD_WIDTH_CONTROL,
             CustomFieldsFeature::SYSTEM_MANAGEMENT_INTERFACE,
-            CustomFieldsFeature::SYSTEM_SECTIONS_ENABLED,
+            CustomFieldsFeature::SYSTEM_SECTIONS,
         )
         ->disable(
             CustomFieldsFeature::SYSTEM_MULTI_TENANCY,

database/migrations/create_custom_fields_table.php

@@ -14,10 +14,10 @@
 {
     public function up(): void
     {
-        $sectionsEnabled = FeatureManager::isEnabled(CustomFieldsFeature::SYSTEM_SECTIONS_ENABLED);
+        $sectionsEnabled = FeatureManager::isEnabled(CustomFieldsFeature::SYSTEM_SECTIONS);
 
         /**
-         * Custom Field Sections (only created when SYSTEM_SECTIONS_ENABLED)
+         * Custom Field Sections (only created when SYSTEM_SECTIONS)
          */
         if ($sectionsEnabled) {
             Schema::create(config('custom-fields.database.table_names.custom_field_sections'), function (Blueprint $table): void {
@@ -170,7 +170,7 @@ public function down(): void
         Schema::dropIfExists(config('custom-fields.database.table_names.custom_field_options'));
         Schema::dropIfExists(config('custom-fields.database.table_names.custom_fields'));
 
-        if (FeatureManager::isEnabled(CustomFieldsFeature::SYSTEM_SECTIONS_ENABLED)) {
+        if (FeatureManager::isEnabled(CustomFieldsFeature::SYSTEM_SECTIONS)) {
             Schema::dropIfExists(config('custom-fields.database.table_names.custom_field_sections'));
         }
     }

docs/content/1.getting-started/2.quickstart.md

@@ -52,9 +52,7 @@ public static function form(Schema $schema): Schema
             Forms\Components\TextInput::make('email'),
 
             // Add Custom Fields
-            CustomFields::form()->forSchema($schema)
-                                ->build()
-                                ->columnSpanFull()
+            CustomFields::form()->build()->columnSpanFull()
         ]);
 }
 ```

docs/content/2.essentials/1.configuration.md

@@ -126,7 +126,7 @@ The package supports these features that can be enabled/disabled:
 | `UI_FIELD_WIDTH_CONTROL` | Custom field width per field |
 | `SYSTEM_MANAGEMENT_INTERFACE` | Enable the management interface |
 | `SYSTEM_MULTI_TENANCY` | Enable multi-tenant isolation |
-| `SYSTEM_SECTIONS_ENABLED` | Enable field grouping in sections |
+| `SYSTEM_SECTIONS` | Enable field grouping in sections |
 
 ::alert{type="info"}
 If your custom models include tenant-specific scoping logic, you'll need to register a [custom tenant resolver](#custom-tenant-resolution) to ensure validation works correctly.

resources/boost/skills/custom-fields-development/SKILL.md

@@ -194,7 +194,7 @@ use Relaticle\CustomFields\FeatureSystem\FeatureConfigurator;
         CustomFieldsFeature::FIELD_OPTION_COLORS,
         CustomFieldsFeature::UI_TABLE_COLUMNS,
         CustomFieldsFeature::UI_TABLE_FILTERS,
-        CustomFieldsFeature::SYSTEM_SECTIONS_ENABLED,
+        CustomFieldsFeature::SYSTEM_SECTIONS,
     )
     ->disable(
         CustomFieldsFeature::SYSTEM_MULTI_TENANCY,
@@ -214,7 +214,7 @@ use Relaticle\CustomFields\FeatureSystem\FeatureConfigurator;
 | `UI_TOGGLEABLE_COLUMNS` | Allow users to toggle column visibility |
 | `UI_FIELD_WIDTH_CONTROL` | Control field width in forms |
 | `SYSTEM_MANAGEMENT_INTERFACE` | Admin page for managing fields |
-| `SYSTEM_SECTIONS_ENABLED` | Organize fields into sections |
+| `SYSTEM_SECTIONS` | Organize fields into sections |
 | `SYSTEM_MULTI_TENANCY` | Tenant isolation for fields |
 
 ## Configuration

resources/views/tables/columns/email-column.blade.php

@@ -41,41 +41,35 @@
     }"
     x-on:keydown.esc="isOpen() && (closePanel(), $event.stopPropagation())"
     x-on:click.outside="closePanel()"
-    class="relative"
+    @if ($hiddenCount > 0)
+        x-ref="trigger"
+        :aria-expanded="isOpen() ? 'true' : 'false'"
+        aria-haspopup="menu"
+        :aria-controls="$id('panel')"
+        x-on:click="togglePanel()"
+        x-on:keydown.enter.prevent="togglePanel()"
+        x-on:keydown.space.prevent="togglePanel()"
+    @endif
+    class="fi-ta-text relative {{ $hiddenCount > 0 ? 'cursor-pointer' : '' }}"
 >
-    {{-- Screen reader live region --}}
     <div x-ref="announcer" aria-live="polite" aria-atomic="true" class="sr-only"></div>
 
     @if (empty($entries))
-        <span class="text-gray-400 dark:text-gray-500">—</span>
+        {{-- Empty: no value --}}
     @else
-        {{-- Collapsed View - Single line with truncated values --}}
-        <div
-            @if ($hiddenCount > 0)
-                x-ref="trigger"
-                role="button"
-                tabindex="0"
-                :aria-expanded="isOpen() ? 'true' : 'false'"
-                aria-haspopup="menu"
-                :aria-controls="$id('panel')"
-                x-on:click="togglePanel()"
-                x-on:keydown.enter.prevent="togglePanel()"
-                x-on:keydown.space.prevent="togglePanel()"
-            @endif
-            class="flex items-center gap-x-3 text-left overflow-hidden {{ $hiddenCount > 0 ? 'cursor-pointer' : '' }}"
-        >
+        <div class="inline-flex items-center gap-x-2">
             @foreach ($visibleEntries as $index => $entry)
                 <div class="group/value relative inline-flex items-center py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shrink-0">
                     <a
                         href="mailto:{{ $entry }}"
                         x-on:click.stop
-                        class="text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate max-w-[120px]"
+                        class="block text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate"
                     >{{ $entry }}</a>
                     <button
                         type="button"
                         x-on:click.stop="copyToClipboard(@js($entry), 'visible-{{ $index }}', $event)"
                         aria-label="Copy {{ $entry }} to clipboard"
-                        class="absolute right-0 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
+                        class="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
                     >
                         <x-heroicon-m-clipboard-document
                             x-show="copiedIndex !== 'visible-{{ $index }}'"
@@ -92,12 +86,11 @@ class="size-3.5 text-green-500"
                 </div>
             @endforeach
             @if ($hiddenCount > 0)
-                <span class="text-sm text-gray-400 dark:text-gray-500 whitespace-nowrap" aria-hidden="true">+{{ $hiddenCount }}</span>
+                <span class="text-sm text-gray-400 dark:text-gray-500 whitespace-nowrap shrink-0" aria-hidden="true">+{{ $hiddenCount }}</span>
                 <span class="sr-only">and {{ $hiddenCount }} more. Press Enter to view all.</span>
             @endif
         </div>
 
-        {{-- Expanded Popover - All values --}}
         @if ($hiddenCount > 0)
             <div
                 x-cloak
@@ -108,25 +101,25 @@ class="size-3.5 text-green-500"
                 role="menu"
                 :id="$id('panel')"
                 aria-label="All email addresses"
-                class="absolute z-50 w-[180px] rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:bg-gray-900 dark:ring-white/10"
+                class="absolute z-50 w-[260px] rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:bg-gray-900 dark:ring-white/10"
             >
-                <div class="py-1 max-h-[280px] overflow-y-auto overflow-x-auto">
+                <div class="py-1 max-h-[280px] overflow-y-auto">
                     @foreach ($entries as $index => $entry)
                         <div
                             role="menuitem"
-                            class="flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                            class="px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                         >
-                            <div class="group/value relative inline-flex items-center py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                            <div class="group/value relative min-w-0 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                 <a
                                     href="mailto:{{ $entry }}"
                                     x-on:click.stop
-                                    class="text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2"
+                                    class="block text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate"
                                 >{{ $entry }}</a>
                                 <button
                                     type="button"
                                     x-on:click.stop="copyToClipboard(@js($entry), {{ $index }}, $event)"
                                     aria-label="Copy {{ $entry }} to clipboard"
-                                    class="absolute right-0 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
+                                    class="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
                                 >
                                     <x-heroicon-m-clipboard-document
                                         x-show="copiedIndex !== {{ $index }}"