Added support for value_only in Array field. Fixed misalignment of Array field when adding new ones.

themes/grav/css-compiled/template.css

@@ -603,6 +603,8 @@ form .dynfields .form-row, form [data-grav-field="array"] .form-row {
     display: inline-block;
     line-height: 1.7;
     cursor: pointer; }
+  form .dynfields .form-row.array-field-value_only, form [data-grav-field="array"] .form-row.array-field-value_only {
+    width: 100%; }
 form .button-bar {
   margin-top: 1rem;
   background: #e6e6e6;

themes/grav/js/forms/fields/array.js

@@ -37,6 +37,10 @@
         return this.el.data('grav-array-name')
     };
 
+    ArrayField.prototype.isValueOnly = function() {
+        return this.el.find('[data-grav-array-mode="value_only"]').length;
+    };
+
     ArrayField.prototype.value = function(val) {
         if (typeof val === 'object') {
             // Remove old
@@ -81,10 +85,16 @@
 
     ArrayField.prototype.add = function() {
         $(this._getNewField()).insertAfter($(event.target).closest('[data-grav-array-type="row"]'));
+        if (this.isValueOnly()) {
+            this.refreshAll();
+        }
     };
 
     ArrayField.prototype.remove = function() {
         $(event.target).closest('[data-grav-array-type="row"]').remove();
+        if (this.isValueOnly()) {
+            this.refreshAll();
+        }
     };
 
     ArrayField.prototype.update = function() {
@@ -94,8 +104,15 @@
         valueField.attr('name', keyField.val());
     };
 
+    ArrayField.prototype.refreshAll = function() {
+        this.el.find('[data-grav-array-type="value"]').each(function(index, element){
+            $(element).attr('name', index);
+        });
+    };
+
     ArrayField.prototype._getNewField = function(key, value) {
         var name = this.name(),
+            value_only = this.isValueOnly(),
             placeholder = {
                 key: this.el.data('grav-array-keyname') || 'Key',
                 val: this.el.data('grav-array-valuename') || 'Value'
@@ -104,12 +121,22 @@
         key = key || '';
         value = value || '';
 
-        return '<div class="form-row" data-grav-array-type="row">' +
+        var output;
-            '<input data-grav-array-type="key" type="text" value="' + key + '"  placeholder="' + placeholder.key + '" />' +
+
-            '<input data-grav-array-type="value" type="text" name="' + key + '" value="' + value + '" placeholder="' + placeholder.val + '" />' +
+        if (value_only) {
-            '<span data-grav-array-action="rem" class="fa fa-minus"></span>' +
+            output = '<div class="form-row array-field-value_only" data-grav-array-type="row">' + "\n" +
-            '<span data-grav-array-action="add" class="fa fa-plus"></span>' +
+                '<input data-grav-array-type="value" type="text" value="' + value + '" placeholder="' + placeholder.val + '" />' + "\n";
-        '</div>';
+        } else {
+            output = '<div class="form-row" data-grav-array-type="row">' + "\n" +
+                '<input data-grav-array-type="key" type="text" value="' + key + '"  placeholder="' + placeholder.key + '" />' + "\n" +
+                '<input data-grav-array-type="value" type="text" name="' + key + '" value="' + value + '" placeholder="' + "\n" + placeholder.val + '" />';
+        }
+
+        output +=  '<span data-grav-array-action="rem" class="fa fa-minus"></span>' + "\n" +
+            '<span data-grav-array-action="add" class="fa fa-plus"></span>' + "\n" +
+            '</div>';
+
+        return output;
     };
 
     root.Array = ArrayField;

themes/grav/scss/template/_forms.scss

@@ -286,6 +286,10 @@ form {
                 line-height: 1.7;
                 cursor: pointer;
             }
+            
+            &.array-field-value_only {
+                width: 100%;
+            }
         }
 
 

themes/grav/templates/forms/fields/array/array.html.twig

@@ -8,23 +8,25 @@
 {% endblock %}
 
 {% block input %}
-    <div data-grav-array-type="container">
+    <div data-grav-array-type="container"{% if field.value_only %} data-grav-array-mode="value_only"{% endif %}>
         {% if value|length %}
-            {% for key, text in value %}
+            {% for key, text in value -%}
-            <div class="form-row" data-grav-array-type="row">
+            <div class="form-row{% if field.value_only %} array-field-value_only{% endif %}" data-grav-array-type="row">
+                {% if field.value_only != true %}
                 <input data-grav-array-type="key" type="text" value="{{ key }}" placeholder="{{ field.placeholder_key }}" />
+                {% endif %}
                 <input data-grav-array-type="value" type="text" name="{{ key }}" value="{{ text|join(', ') }}" placeholder="{{ field.placeholder_value }}" />
                 <span data-grav-array-action="rem" class="fa fa-minus"></span>
                 <span data-grav-array-action="add" class="fa fa-plus"></span>
             </div>
             {% endfor %}
-        {% else %}
+        {%- else -%}
             <div class="form-row" data-grav-array-type="row">
                 <input data-grav-array-type="key" type="text" placeholder="{{ field.placeholder_key }}" />
                 <input data-grav-array-type="value" type="text" placeholder="{{ field.placeholder_value }}" />
                 <span data-grav-array-action="rem" class="fa fa-minus"></span>
                 <span data-grav-array-action="add" class="fa fa-plus"></span>
             </div>
-        {% endif %}
+        {%- endif %}
     </div>
 {% endblock %}