Add Tailor field

Plugin.php

@@ -49,10 +49,10 @@ public function boot()
             'maxYear' => [
                 'title' => 'Max. Year',
                 'type' => 'string'
-                
+
             ],
         ];
-        
+
         if(PluginManager::instance()->exists('RainLab.Builder')){
             Event::listen('pages.builder.registerControls', function($controlLibrary) use($properties) {
                 $controlLibrary->registerControl(
@@ -73,4 +73,14 @@ public function registerFormWidgets()
             \LucasPalomba\YearPicker\FormWidgets\YearPicker::class => 'yearpicker'
         ];
     }
+
+    /**
+     * registerContentFields
+     */
+    public function registerContentFields()
+    {
+        return [
+            \LucasPalomba\YearPicker\ContentFields\YearPicker::class => 'lp-yearpicker'
+        ];
+    }
 }

contentfields/YearPicker.php

@@ -0,0 +1,66 @@
+<?php namespace LucasPalomba\YearPicker\ContentFields;
+
+use Tailor\Classes\ContentFieldBase;
+use October\Contracts\Element\FormElement;
+use October\Contracts\Element\ListElement;
+use October\Contracts\Element\FilterElement;
+
+class YearPicker extends ContentFieldBase
+{
+    public $minYear = null;
+
+    public $maxYear = null;
+
+    /**
+     * defineConfig will process the field configuration.
+     */
+    public function defineConfig(array $config)
+    {
+        if (isset($config['minYear'])) {
+            $this->minYear = $config['minYear'];
+        }
+        if (isset($config['minYear'])) {
+            $this->maxYear = $config['maxYear'];
+        }
+    }
+
+    /**
+     * defineFormField will define how a field is displayed in a form.
+     */
+    public function defineFormField(FormElement $form, $context = null)
+    {
+        $form->addFormField($this->fieldName, $this->label)->useConfig($this->config);
+    }
+
+    /**
+     * defineListColumn will define how a field is displayed in a list.
+     */
+    public function defineListColumn(ListElement $list, $context = null)
+    {
+        $list->defineColumn($this->fieldName, $this->label)->displayAs('text');
+    }
+
+    /**
+     * defineFilterScope will define how a field is displayed in a filter.
+     */
+    public function defineFilterScope(FilterElement $filter, $context = null)
+    {
+        // ...
+    }
+
+    /**
+     * extendModelObject will extend the record model.
+     */
+    public function extendModelObject($model)
+    {
+        // ...
+    }
+
+    /**
+     * extendDatabaseTable adds any required columns to the database.
+     */
+    public function extendDatabaseTable($table)
+    {
+        $table->mediumText($this->fieldName)->nullable();
+    }
+}

contentfields/yearpicker/assets/css/yearpicker.css

@@ -0,0 +1,105 @@
+:root {
+    --background-color: #fff;
+    --border-color: #95a6a733;
+    --text-color: #555;
+    --selected-text-color: #6bc48d;
+    --hover-background-color: #eee;
+}
+
+.yearpicker-container {
+    position: absolute;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
+    box-shadow: 0 0 32px rgb(67 86 100 / 20%);;
+    border-radius: 8px;
+    font-family: sans-serif;
+    font-size: 12px;
+    margin-top: 5px;
+    width: 310px;
+    z-index: 10100;
+}
+
+.yearpicker-header {
+    display: flex;
+    width: 100%;
+    height: 2.5rem;
+    border-bottom: 1px solid var(--border-color);
+    align-items: center;
+    justify-content: space-between;
+    padding:0.25rem 1rem;
+}
+
+.yearpicker-prev,
+.yearpicker-next {
+    background-color: transparent;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 75% 75%;
+    border: 0;
+    cursor: pointer;
+    display: block;
+    height: 30px;
+    opacity: .5;
+    outline: none;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    *position: absolute;
+    text-indent: 100%;
+    *top: 0;
+    white-space: nowrap;
+    width: 20px;
+}
+
+.yearpicker-prev{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==);
+}
+.yearpicker-next{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=);
+}
+
+.yearpicker-prev:hover,
+.yearpicker-next:hover {
+    opacity: 1;
+}
+
+.yearpicker-current{
+    line-height: 1;
+}
+
+.yearpicker-year {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0.5rem;
+}
+
+.yearpicker-items {
+    list-style: none;
+    padding: 1rem 0.5rem;
+    flex: 0 0 33.3%;
+    width: 100%;
+}
+
+.yearpicker-items:hover {
+    background-color: var(--hover-background-color);
+    color: var(--selected-text-color);
+    cursor: pointer;
+}
+
+.yearpicker-items.selected {
+    background: var(--selected-text-color);
+    color:#fff;
+}
+
+.hide {
+    display: none;
+}
+
+.yearpicker-items.disabled {
+    pointer-events: none;
+    color: #bbb;
+}