Natuurlijk! Hier is een overzicht van de functionaliteit en eigenschappen voor een aangepast veldtype in Statamic 3.2 dat tekst invoer combineert met kleurselectie: Functionaliteit en eigenschappen: 1. Samengevoegd veldtype: - Bevat een tekstveld waar gebruikers tekst kunnen invoeren. - Bevat een kleurkiezer (color picker) waarmee gebruikers een kleur kunnen selecteren. 2. Gebruikersinterface: - Een gebruiksvriendelijke interface die beide invoeropties naast elkaar of onder elkaar toont. - Mogelijkheid om de kleurkeuze visueel weer te geven, bijvoorbeeld via een kleurweergave of kleurvoorbeeld. 3. Data opslag: - Slaat zowel de tekst als de kleur op in één gestructureerde data, bijvoorbeeld als JSON of als een array. - Voorbeeld: `{"text": "voorbeeld", "color": "#ff0000"}` 4. Validatie: - Mogelijkheid om verplichte invoer of validatie op het tekstveld en de kleur toe te passen. 5. Instellingen: - Opties om bijvoorbeeld een standaardwaarde te definiëren. - Mogelijkheid om het veld te labelen en te voorzien van beschrijvingen. Technische vereisten: - Compatibiliteit met Statamic 3.2. - Gebruik van Laravel en Vue.js (de frontend van Statamic) voor de interface. - Het veldtype moet geregistreerd kunnen worden via een custom addon (bijvoorbeeld in de map `addons/`). Eventuele beperkingen: - Geen afhankelijkheid van externe packages tenzij deze compatibel zijn met Statamic 3.2. - Zorg dat de code onderhoudbaar en uitbreidbaar blijft. Kort samengevat: Je ontwikkelt een custom veldtype dat bestaat uit een tekstinput en een kleurkeuzer, waarbij de gegevens opgeslagen worden als een samengestelde structuur. Het veld moet gebruiksvriendelijk zijn, compatibel met Statamic 3.2, en eenvoudig te configureren voor websitebeheerders. Wil je dat ik je help met het schrijven van voorbeeldcode of een stappenplan voor de implementatie?

Absoluut. Hier is een uitgebreide handleiding voor het ontwerpen en ontwikkelen van een aangepast veldtype (een "Kleurentekstveld") voor je Statamic 3.2 website. --- ### 1. Functionele Beschrijving van het Veldtype Het veldtype, dat we `kleurentekst` zullen noemen, combineert twee functies in één veld: 1. **Tekstinvoer:** Een standaard tekstveld waar de gebruiker een waarde (bijv. een label, tag, of titel) kan invoeren. 2. **Kleurselectie:** Een kleurenkiezer (color picker) waarmee de gebruiker een hexadecimale kleurcode (#ffffff) kan selecteren of invoeren. De opgeslagen waarde in het entry/formulier zal een array of een string zijn die beide waarden bevat, zodat je ze gemakkelijk in je front-end kunt gebruiken. ### 2. Eigenschappen en Functionaliteit * **Weergave in het Controlepaneel (CP):** Het veld toont een tekstinput naast een kleurinput (type="color"). * **Standaardwaarde:** Mogelijkheid om een standaard tekstwaarde en/of een standaardkleur (#hexcode) in te stellen via het veldconfiguratie. * **Validatie:** Optioneel valideren of beide velden zijn ingevuld, of slechts één. * **Opslagformaat:** Het slaat de gegevens op als een array. Bijvoorbeeld: ```json { "tekst": "Mijn Label", "kleur": "#ff0000" } ``` * **Front-end Gebruik:** Je kunt eenvoudig de individuele waarden (`tekst` en `kleur`) in je Antlers templates benaderen. --- ### 3. Stapsgewijze Handleiding voor Ontwikkeling (Statamic 3.2) #### Stap 1: Aanmaken van de Addon Statamic 3.x gebruikt Composer packages voor addons. De eenvoudigste manier om te beginnen is met de officiële generator. 1. Navigeer naar de root map van je Statamic project via de terminal. 2. Voer het volgende commando uit (vervang `vendor/kleurentekst-veld` met je gewenste package naam): ```bash php please make:addon vendor/kleurentekst-veld ``` (Bijv. `php please make:addon janssen/kleurentekst-veld`) 3. Volg de prompts. Zorg ervoor dat je **"Fieldtype"** selecteert wanneer er wordt gevraagd welk type addon je wilt maken. 4. De generator zal een nieuwe map aanmaken in `site/addons/` of in `vendor/` (afhankelijk van je keuze) met de juiste bestandsstructuur. #### Stap 2: De Belangrijkste Bestanden Je addon-structuur ziet er ongeveer zo uit: ``` site/addons/janssen/kleurentekst-veld/ ├── src/ │ └── Fieldtype.php <-- De belangrijkste PHP klasse ├── resources/ │ ├── dist/ │ │ └── js/ │ │ └── fieldtype.js <-- De Vue.js component │ └── js/ │ └── fieldtype.js <-- De Vue.js bronbestand └── composer.json ``` #### Stap 3: De PHP Fieldtype Klasse (`src/Fieldtype.php`) Deze klasse handelt de server-side logica af: pre-processing, pre-loading, en hoe de waarde wordt opgeslagen. ```php <?php namespace Janssen\KleurentekstVeld; use Statamic\Fields\Fieldtype; class KleurentekstVeldFieldtype extends Fieldtype { /** * De Vue.js component die in het CP gerenderd moet worden. */ public $component = 'kleurentekst_veld'; /** * Pre-process de waarde voordat deze naar het Vue.js component wordt gestuurd. * Dit haalt de array uit de database en maakt deze klaar voor de input velden. */ public function preProcess($data) { return [ 'tekst' => $data['tekst'] ?? $this->config('standaard_tekst', ''), 'kleur' => $data['kleur'] ?? $this->config('standaard_kleur', '#3490dc') ]; } /** * Process de waarde van het Vue.js component voordat deze wordt opgeslagen. * Dit zet de waarden van de input velden om naar een array voor opslag. */ public function process($data) { // Zorg ervoor dat we altijd een consistente array opslaan. return [ 'tekst' => $data['tekst'] ?? '', 'kleur' => $data['kleur'] ?? '#3490dc' ]; } /** * Pre-process de waarde voor gebruik in een Antlers template. * Hier retourneren we de volledige array. */ public function preProcessIndex($data) { return $data; } /** * Definieer de configureerbare instellingen voor dit veld in de blueprint editor. */ protected function configFieldItems(): array { return [ 'standaard_tekst' => [ 'type' => 'text', 'instructions' => 'Standaard tekstwaarde voor het veld.', 'width' => 50 ], 'standaard_kleur' => [ 'type' => 'text', 'instructions' => 'Standaard kleurwaarde (hex code, bijv. #ff0000).', 'width' => 50, 'default' => '#3490dc' ] ]; } } ``` #### Stap 4: De Vue.js Component (`resources/js/fieldtype.js`) Deze component bepaalt hoe het veld eruitziet en zich gedraagt in het Statamic controlepaneel. ```javascript import { Fieldtype } from 'statamic-vue2-fields/src/components/fieldtypes/Fieldtype'; export default { mixins: [Fieldtype], data() { return { // Onze lokale data wordt gekoppeld aan de `value` van het field. tekst: this.value?.tekst || this.config.standaard_tekst || '', kleur: this.value?.kleur || this.config.standaard_kleur || '#3490dc' }; }, watch: { // Wanneer een van de waarden verandert, updaten we de `value` van het veld. tekst() { this.updateValue(); }, kleur() { this.updateValue(); } }, methods: { // Deze methode wordt aangeroepen om de nieuwe waarde door te geven aan de parent component. updateValue() { this.update({ tekst: this.tekst, kleur: this.kleur }); } }, template: ` <div class="flex items-center space-x-2"> <!-- Tekst Input --> <div class="flex-1"> <input type="text" class="input-text" v-model="tekst" :placeholder="config.placeholder || 'Voer tekst in'" /> </div> <!-- Kleur Input --> <div class="flex-none"> <input type="color" v-model="kleur" class="h-10 w-10 cursor-pointer" /> <span class="ml-1 text-xs text-grey-60">{{ kleur }}</span> </div> </div> ` }; ``` #### Stap 5: Compileren en Registreren 1. **Compileer de JS:** Je moet de Vue.js component compileren zodat Statamic hem kan laden. * Zorg ervoor dat je `node.js` en `npm` hebt geïnstalleerd. * Navigeer naar je addon-map: `cd site/addons/janssen/kleurentekst-veld` * Installeer dependencies: `npm install` * Compileer de assets: `npm run dev` of `npm run prod` 2. **Registreer de Addon:** Zorg ervoor dat je addon is geregistreerd in `config/statamic/addons.php`. ```php <?php return [ 'janssen/kleurentekst-veld' => [ 'namespace' => 'Janssen\\KleurentekstVeld' ], // ... andere addons ]; ``` --- ### 4. Gebruik in een Blueprint en Template **In je Blueprint (.yaml bestand):** ```yaml fields: - handle: mijn_kleuren_label field: type: kleurentekst_veld display: 'Mijn Kleuren Label' standaard_tekst: 'Default Text' standaard_kleur: '#ff0000' ``` **In je Antlers Template:** ```html <!-- Toon de tekst met de gekozen kleur als inline CSS --> <span style="color: {{ mijn_kleuren_label:kleur }};"> {{ mijn_kleuren_label:tekst }} </span> <!-- Of gebruik de waarden individueel --> De kleurcode is: {{ mijn_kleuren_label:kleur }} ``` ### 5. Technische Vereisten en Compatibiliteit * **Statamic 3.2:** Deze handleiding is specifiek geschreven voor de architectuur van Statamic 3.x, die Vue.js 2.x gebruikt voor het CP. De code is compatibel met versie 3.2. * **PHP 7.4+:** Zorg dat je PHP versie compatibel is met Statamic 3.2. * **Node.js & NPM:** Vereist voor het compileren van de JavaScript assets. Succes met het bouwen van je aangepaste veldtype! Dit is een solide basis die je naar wens kunt uitbreiden.