#Key-Value Input Component

#Introduction

The key-value-input component provides a powerful and flexible way to handle key-value pairs input. It features dynamic row management, validation, drag-and-drop reordering, and full accessibility support. Perfect for environment variables, metadata, configuration settings, or any structured data input scenario.

#Installation

Use the fluxtor artisan command to install the key-value component easily:

php artisan fluxtor:install key-value

#Basic Usage

<x-ui.key-value 
    wire:model="configurations" 
    label="Configuration Settings"
/>

#Usage with Livewire

you need to have an array of keyed arrays with key and value keys pair

<!-- you should have sometime looks like this in your livewire component : 
 $userPreferences => [
        ['key' => 'theme', 'value' => 'dark'],
        ['key' => 'language', 'value' => 'English'],
        ['key' => 'timezone', 'value' => 'UTC+1'],
        ['key' => 'notifications', 'value' => 'enabled']
    ];
 -->
<div>
    <x-ui.key-value 
        wire:model="envVariables" 
        label="Environment Variables"
        key-label="Variable Name"
        value-label="Variable Value"
    />
</div>

#Usage with Raw Blade (Alpine.js)

<div x-data="{ 
    configs: [
        { key: 'database_host', value: 'localhost' },
        { key: 'cache_driver', value: 'redis' }
    ]
}">
    <x-ui.key-value 
        x-model="configs"
        label="Server Configuration"
        key-label="Config Key"
        value-label="Config Value"
    />
</div>

#Customization

#Labels and Placeholders

Customize the labels and placeholders for keys and values.

<x-ui.key-value 
    wire:model="envVars" 
    label="Environment Variables"
    key-label="Variable Name"
    value-label="Variable Value"
    key-placeholder="e.g., NODE_ENV"
    value-placeholder="e.g., production"
/>

#Row Constraints

Control the minimum and maximum number of rows.

<x-ui.key-value 
    wire:model="requiredSettings" 
    label="Required Settings (2-5 rows)"
    :min-rows="2"
    :max-rows="5"
    :required="true"
/>
<x-ui.key-value 
    wire:model="optionalSettings" 
    label="Optional Settings (0-10 rows)"
    :min-rows="0"
    :max-rows="10"
/>

#Advanced Features

#Validation and Constraints

Set validation rules and constraints to ensure data quality.

<x-ui.key-value 
    wire:model="validatedConfig" 
    label="Validated Configuration"
    :prevent-duplicate-keys="true"
    :allow-empty-values="false"
    :required="true"
/>

#Drag and Drop Reordering

Enable or disable drag-and-drop reordering of rows.

<x-ui.key-value 
    wire:model="reorderableConfig" 
    label="Reorderable Configuration"
    :reorderable="true"
/>

#Row Management Features

Control which row management features are available.

<x-ui.key-value 
    wire:model="managedRows" 
    label="Full Row Management"
    :reorderable="true"
    :show-duplicate="true"
    :show-top-bar="true"
/>

#Simplified Interface

Create a minimal interface by hiding advanced features.

<x-ui.key-value 
    wire:model="simpleConfig" 
    label="Simple Configuration"
    :reorderable="false"
    :show-duplicate="false"
    :show-top-bar="false"
/>

#States

#Disabled State

<x-ui.key-value 
    wire:model="disabledConfig" 
    label="Disabled Configuration"
    :disabled="true"
/>

#Component Props