usar input-tag en reemplazo de select2

app/assets/javascripts/application.js

@@ -1,4 +1,5 @@
 //= require rails-ujs
 //= require turbolinks
 //= require zepto/dist/zepto.min.js
+//= require input-tag/input-tag.js
 //= require_tree .

app/assets/javascripts/input-tag.js

@@ -0,0 +1,10 @@
+$(document).on('turbolinks:load', function() {
+  $('.taggable').each(function() {
+    this.innerHTML = '';
+
+    new InputTag({
+      target: this,
+      props: { ...this.dataset }
+    });
+  });
+});

app/assets/stylesheets/application.scss

@@ -183,3 +183,33 @@ textarea.post-content {
     }
   }
 }
+
+.taggable {
+  .input-tag {
+    legend {
+      @extend .sr-only
+    }
+
+    label {
+      margin: 0.5rem;
+    }
+
+    input {
+      vertical-align: middle;
+
+      &[type=text] {
+        @extend .form-control;
+        display: inline-block;
+        width: calc(100% - 90px);
+      }
+
+      &[type=checkbox] {
+      }
+
+      &[type=button] {
+        @extend .btn;
+        @extend .btn-info;
+      }
+    }
+  }
+}

app/helpers/application_helper.rb

@@ -100,6 +100,10 @@ module ApplicationHelper
     "#{attribute.join('-')}-feedback"
   end
 
+  def id_for_datalist(*attribute)
+    "#{attribute.join('-')}-datalist"
+  end
+
   private
 
   def post_t(*attribute, post:, type:)

app/models/metadata_template.rb

@@ -51,6 +51,10 @@ MetadataTemplate = Struct.new(:site, :document, :name, :label, :type,
     true
   end
 
+  def array?
+    type == 'array'
+  end
+
   private
 
   # Si es obligatorio no puede estar vacío

app/views/posts/attributes/_array.haml

@@ -1,7 +1,18 @@
--# TODO: Convertir a select2 o nuestro reemplazo
 .form-group{ class: invalid(post, attribute) }
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
-  = text_field 'post', attribute, value: metadata.value.join(', '),
+
-    **field_options(attribute, metadata)
+  .taggable{ data: { values: metadata.value.join(','),
+    name: "post[#{attribute}][]", list: id_for_datalist(attribute),
+    remove: 'false', legend: post_label_t(attribute, post: post),
+    described: id_for_help(attribute) } }
+
+    = text_field(*field_name_for('post', attribute, '[]'),
+      value: metadata.value.join(', '),
+      **field_options(attribute, metadata))
+
   = render 'posts/attribute_feedback',
     post: post, attribute: attribute, metadata: metadata
+
+  %datalist{ id: id_for_datalist(attribute) }
+    - site.everything_of(attribute).each do |value|
+      %option{ value: value }

package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "codemirror": "^5.48.2",
     "commonmark": "^0.29.0",
+    "input-tag": "https://0xacab.org/sutty/input-tag.git",
     "table-dragger": "^1.0.2",
     "tui-editor": "^1.4.5",
     "zepto": "^1.2.0"

yarn.lock

@@ -147,6 +147,10 @@ highlight.js@^9.12.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.9.tgz#865257da1dbb4a58c4552d46c4b3854f77f0e6d5"
   integrity sha512-M0zZvfLr5p0keDMCAhNBp03XJbKBxUx5AfyfufMdFMEP4N/Xj6dh0IqC75ys7BAzceR34NgcvXjupRVaHBPPVQ==
 
+"input-tag@https://0xacab.org/sutty/input-tag.git":
+  version "0.0.6"
+  resolved "https://0xacab.org/sutty/input-tag.git#5bfcbcb83abd941caadab09f80cc684909f12a37"
+
 jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"