fix: actualizar stimulus

2024-11-24 18:16:22 +00:00 · 2024-07-20 15:21:03 -03:00 · 2024-07-20 15:21:03 -03:00 · b63b0786fd
commit b63b0786fd
parent 3b9f95745e
39 changed files with 81 additions and 69 deletions
--- a/app/javascript/controllers/array_controller.js
+++ b/app/javascript/controllers/array_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  static targets = ["item", "search", "current", "placeholder"];
--- a/app/javascript/controllers/details_controller.js
+++ b/app/javascript/controllers/details_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  static targets = [];
--- a/app/javascript/controllers/dropdown_controller.js
+++ b/app/javascript/controllers/dropdown_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 // https://getbootstrap.com/docs/4.6/components/dropdowns/#single-button
 export default class extends Controller {
--- a/app/javascript/controllers/enter_controller.js
+++ b/app/javascript/controllers/enter_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  /*
--- a/app/javascript/controllers/file_preview_controller.js
+++ b/app/javascript/controllers/file_preview_controller.js
@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import bsCustomFileInput from "bs-custom-file-input";

 document.addEventListener("turbolinks:load", () => {
--- a/app/javascript/controllers/form_validation_controller.js
+++ b/app/javascript/controllers/form_validation_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  static targets = ["invalid", "submitting"];
--- a/app/javascript/controllers/geo_controller.js
+++ b/app/javascript/controllers/geo_controller.js
@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'

 require("leaflet/dist/leaflet.css")
 import L from 'leaflet'
--- a/app/javascript/controllers/htmx_controller.js
+++ b/app/javascript/controllers/htmx_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 /*
 * Un controlador que imita a HTMX
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@ -1,8 +1,8 @@
 // Load all the controllers within this directory and all subdirectories. 
 // Controller files must be named *_controller.js.

-import { Application } from "stimulus"
-import { definitionsFromContext } from "stimulus/webpack-helpers"
+import { Application } from "@hotwired/stimulus"
+import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"

 const application = Application.start()
 const context = require.context("controllers", true, /_controller\.js$/)
--- a/app/javascript/controllers/modal_controller.js
+++ b/app/javascript/controllers/modal_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  static targets = ["modal", "backdrop"];
--- a/app/javascript/controllers/non_geo_controller.js
+++ b/app/javascript/controllers/non_geo_controller.js
@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'

 require("leaflet/dist/leaflet.css")
 import L from 'leaflet'
--- a/app/javascript/controllers/notification_controller.js
+++ b/app/javascript/controllers/notification_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 /*
 * Solo se puede mostrar una notificación a la vez
--- a/app/javascript/controllers/reorder_controller.js
+++ b/app/javascript/controllers/reorder_controller.js
@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'

 /*
 * Permite reordenar las filas de una tabla.
--- a/app/javascript/controllers/required_checkbox_controller.js
+++ b/app/javascript/controllers/required_checkbox_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 /*
 * Para poder indicar que al menos uno del grupo de checkboxes es
--- a/app/javascript/controllers/select_all_controller.js
+++ b/app/javascript/controllers/select_all_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  static targets = ["toggle", "input"];
--- a/app/javascript/controllers/unsaved_changes_controller.js
+++ b/app/javascript/controllers/unsaved_changes_controller.js
@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  connect() {
--- a/app/views/bootstrap/_modal.haml
+++ b/app/views/bootstrap/_modal.haml
@ -28,8 +28,8 @@
 -# XXX: Necesario para poder generar todas las demás
 = yield

-.modal.fade{ tabindex: -1, aria: { hidden: 'true' }, data: { target: 'modal.modal', action: local_assigns[:keydown_actions].join(' ') } }
-  .modal-backdrop.fade{ data: { target: 'modal.backdrop', action: local_assigns[:hide_actions].join(' ') } }
+.modal.fade{ tabindex: -1, aria: { hidden: 'true' }, data: { 'modal-target': 'modal', action: local_assigns[:keydown_actions].join(' ') } }
+  .modal-backdrop.fade{ data: { 'modal-target': 'backdrop', action: local_assigns[:hide_actions].join(' ') } }
  .modal-dialog.modal-dialog-scrollable.modal-dialog-centered.modal-lg
    .modal-content{ **local_assigns[:modal_content_attributes] }
      - if (header = yield(:"#{id}_header")).present?
--- a/app/views/components/_dropdown.haml
+++ b/app/views/components/_dropdown.haml
@ -18,7 +18,7 @@
      toggle: 'true',
      display: 'static',
      action: 'dropdown#toggle',
-      target: 'dropdown.button'
+      'dropdown-target': 'button'
    },
    aria: {
      expanded: 'false'
@ -28,7 +28,7 @@
  .dropdown-menu{
    class: dropdown_classes,
    data: {
-      target: 'dropdown.dropdown'
+      'dropdown-target': 'dropdown'
    }
  }
    = yield
--- a/app/views/components/_dropdown_button.haml
+++ b/app/views/components/_dropdown_button.haml
@ -3,4 +3,4 @@
  @param value [String]
  @param text [String]
 - local_assigns.delete(:text)
-%button.dropdown-item{type: 'submit', data: { target: 'dropdown.item' }, name: name, value: value, **local_assigns.compact }= text
+%button.dropdown-item{type: 'submit', data: { 'dropdown-target': 'item' }, name: name, value: value, **local_assigns.compact }= text
--- a/app/views/components/_dropdown_item.haml
+++ b/app/views/components/_dropdown_item.haml
@ -2,4 +2,4 @@
  @param :text [String] Contenido del link
  @param :path [String,Hash] Link
 - local_assigns[:class] = "dropdown-item #{local_assigns[:class]}"
-= link_to text, path, class: local_assigns[:class], data: { target: 'dropdown.item' }
+= link_to text, path, class: local_assigns[:class], data: { 'dropdown-target': 'item' }
--- a/app/views/components/_select_all.haml
+++ b/app/views/components/_select_all.haml
@ -1,4 +1,4 @@
 -#
  @param id [String]
-= render 'components/checkbox', id: id, data: { action: 'select-all#toggle', target: 'select-all.toggle', **local_assigns.compact } do
+= render 'components/checkbox', id: id, data: { action: 'select-all#toggle', 'select-all-target': 'toggle', **local_assigns.compact } do
  %span.sr-only= t('.label')
--- a/app/views/moderation_queue/_account.haml
+++ b/app/views/moderation_queue/_account.haml
@ -3,7 +3,7 @@

 .row.no-gutters.pt-2
  .col-1
-    = render 'components/checkbox', id: actor_moderation.id, form: form, name: 'actor_moderation[]', value: actor_moderation.id, data: { target: 'select-all.input' }
+    = render 'components/checkbox', id: actor_moderation.id, form: form, name: 'actor_moderation[]', value: actor_moderation.id, data: { 'select-all-target': 'input' }
  .col-11
    - cache [actor_moderation, profile] do
      %h4
--- a/app/views/moderation_queue/_comment.haml
+++ b/app/views/moderation_queue/_comment.haml
@ -22,7 +22,7 @@

 .row.no-gutters
  .col-1
-    = render 'components/checkbox', id: activity_pub.id, name: 'activity_pub[]', value: activity_pub.id, data: { target: 'select-all.input' }, form: form
+    = render 'components/checkbox', id: activity_pub.id, name: 'activity_pub[]', value: activity_pub.id, data: { 'select-all-target': 'input' }, form: form
  .col-11
    - cache [activity_pub, comment] do
      .d-flex.flex-row.align-items-center.justify-content-between
--- a/app/views/moderation_queue/_instance.haml
+++ b/app/views/moderation_queue/_instance.haml
@ -4,7 +4,7 @@

 .row.no-gutters.pt-2
  .col-1
-    = render 'components/checkbox', id: instance.hostname, form: form, name: 'instance_moderation[]', value: instance_moderation.id, data: { target: 'select-all.input' }
+    = render 'components/checkbox', id: instance.hostname, form: form, name: 'instance_moderation[]', value: instance_moderation.id, data: { 'select-all-target': 'input' }
  .col-11
    - cache [instance_moderation, instance] do
      %h4
--- a/app/views/posts/_required_checkbox.haml
+++ b/app/views/posts/_required_checkbox.haml
@ -15,5 +15,5 @@
  - local_assigns[:feedback] ||= t('.required')
  - local_assigns[:type] ||= 'checkbox'

-  %input.form-control.d-none{ type: local_assigns[:type], name: name, data: { target: 'required-checkbox.required', action: 'invalid->required-checkbox#invalid' }, required: initial }
+  %input.form-control.d-none{ type: local_assigns[:type], name: name, data: { 'required-checkbox-target': 'required', action: 'invalid->required-checkbox#invalid' }, required: initial }
  .invalid-feedback.mt-0= local_assigns[:feedback]
--- a/app/views/posts/attributes/_file.haml
+++ b/app/views/posts/attributes/_file.haml
@ -4,11 +4,11 @@
      - when %r{\Avideo/}
        = video_tag url_for(metadata.static_file),
          controls: true, class: 'img-fluid',
-          data: { target: 'file-preview.preview' }
+          data: { 'file-preview-target': 'preview' }
      - when %r{\Aaudio/}
        = audio_tag url_for(metadata.static_file),
          controls: true, class: 'img-fluid',
-          data: { target: 'file-preview.preview' }
+          data: { 'file-preview-target': 'preview' }
      - when 'application/pdf'
        %iframe{ src: url_for(metadata.static_file) }
      - else
@ -27,7 +27,7 @@
      **field_options(attribute, metadata, required: (metadata.required && !metadata.path?)),
      class: "custom-file-input #{invalid(post, attribute)}",
      lang: locale,
-      data: { target: 'file-preview.input', action: 'file-preview#update' })
+      data: { 'file-preview-target': 'input', action: 'file-preview#update' })
    = label_tag "#{base}_#{attribute}_path",
      post_label_t(attribute, :path, post: post), class: 'custom-file-label'
    = render 'posts/attribute_feedback',
--- a/app/views/posts/attributes/_geo.haml
+++ b/app/views/posts/attributes/_geo.haml
@ -10,7 +10,7 @@
      = text_field(*field_name_for(base, attribute, :lat),
        value: metadata.value['lat'],
        **field_options(attribute, metadata),
-        data: { target: 'geo.lat' })
+        data: { 'geo-target': 'lat' })
      = render 'posts/attribute_feedback',
        post: post, attribute: [attribute, :lat], metadata: metadata
  .col
@ -20,8 +20,8 @@
      = text_field(*field_name_for(base, attribute, :lng),
        value: metadata.value['lng'],
        **field_options(attribute, metadata),
-        data: { target: 'geo.lng' })
+        data: { 'geo-target': 'lng' })
      = render 'posts/attribute_feedback',
        post: post, attribute: [attribute, :lng], metadata: metadata
  .col-12.mb-3
-    %div{ data: { target: 'geo.map' }, style: 'height: 250px' }
+    %div{ data: { 'geo-target': 'map' }, style: 'height: 250px' }
--- a/app/views/posts/attributes/_image.haml
+++ b/app/views/posts/attributes/_image.haml
@ -3,7 +3,7 @@
    = image_tag url_for(metadata.static_file),
      alt: metadata.value['description'],
      class: 'img-fluid',
-      data: { target: 'file-preview.preview' }
+      data: { 'file-preview-target': 'preview' }

    -# Mantener el valor si no enviamos ninguna imagen
    = hidden_field_tag "#{base}[#{attribute}][path]", metadata.value['path']
@ -16,7 +16,7 @@
    = image_tag '',
      alt: metadata.value['description'],
      class: 'img-fluid',
-      data: { target: 'file-preview.preview' }
+      data: { 'file-preview-target': 'preview' }

  .custom-file
    = file_field(*field_name_for(base, attribute, :path),
@ -24,7 +24,7 @@
      class: "custom-file-input #{invalid(post, attribute)}",
      accept: ActiveStorage.web_image_content_types.join(','),
      lang: locale,
-      data: { target: 'file-preview.input', action: 'file-preview#update' })
+      data: { 'file-preview-target': 'input', action: 'file-preview#update' })
    = label_tag "#{base}_#{attribute}_path",
      post_label_t(attribute, :path, post: post), class: 'custom-file-label'
    = render 'posts/attribute_feedback',
--- a/app/views/posts/attributes/_new_array.haml
+++ b/app/views/posts/attributes/_new_array.haml
@ -8,7 +8,7 @@
  controllers << 'required-checkbox' if metadata.required

 %div{ data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
    .col.mb-3{ 'aria-hidden': 'true' }
      %span.placeholder.w-100

@ -33,7 +33,7 @@

    Para poder cancelar, mantenemos el estado original y desactivamos
    o activamos los ítemes según estén incluidos en esa lista o no.
-  %ul.placeholder-glow{ data: { target: 'array.current' } }
+  %ul.placeholder-glow{ data: { 'array-target': 'current' } }
    - metadata.value.each do |value|
      = render 'posts/new_array_value', value: value

@ -42,14 +42,14 @@
      .form-group.flex-grow-1.mb-0
        = label_tag id, post_label_t(attribute, post: post), class: 'mb-0'
        %small.feedback.form-text.text-muted.mt-0.mb-1= post_help_t(metadata.name, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search keydown->enter#prevent' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search keydown->enter#prevent' }, type: 'search', placeholder: t('.filter') }

    - content_for :"#{id}_body" do
      .form-group.mb-0{ id: "#{id}_body" }
        -# Eliminamos las tildes para poder buscar independientemente de cómo se escriba.
        - metadata.values.each do |value|
          = render 'targets/array/item', value: value, class: 'mb-2' do
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: value, checked: metadata.value.include?(value), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: value, checked: metadata.value.include?(value), content: value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }

    - content_for :"#{id}_footer" do
      .input-group.w-auto.flex-grow-1.my-0
--- a/app/views/posts/attributes/_new_belongs_to.haml
+++ b/app/views/posts/attributes/_new_belongs_to.haml
@ -21,7 +21,7 @@
  controllers << 'required-checkbox' if metadata.required

 %div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
    .col.p-3{ 'aria-hidden': 'true' }
      %span.placeholder.w-100

@ -44,16 +44,16 @@

    Para poder cancelar, mantenemos el estado original y desactivamos
    o activamos los ítemes según estén incluidos en esa lista o no.
-  .row.no-gutters.placeholder-glow{ data: { target: 'array.current' } }
+  .row.no-gutters.placeholder-glow{ data: { 'array-target': 'current' } }
    -# @todo issue-7537
    - if !metadata.empty? && (indexed_post = site.indexed_posts.find_by(post_id: metadata.value))
-      = render 'posts/new_related_post', post: indexed_post
+      = render 'posts/new_related_post', post: indexed_post, attribute: metadata.type

  = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do
    - content_for :"#{id}_header" do
      .form-group.flex-grow-1.mb-0
        = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }

    - content_for :"#{id}_body" do
      .form-group.mb-0{ id: value_list_id }
--- a/app/views/posts/attributes/_new_has_and_belongs_to_many.haml
+++ b/app/views/posts/attributes/_new_has_and_belongs_to_many.haml
@ -21,7 +21,7 @@
  controllers << 'required-checkbox' if metadata.required

 %div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
    .col.p-3{ 'aria-hidden': 'true' }
      %span.placeholder.w-100

@ -44,23 +44,23 @@

    Para poder cancelar, mantenemos el estado original y desactivamos
    o activamos los ítemes según estén incluidos en esa lista o no.
-  .row.no-gutters.placeholder-glow{ data: { target: 'array.current' } }
+  .row.no-gutters.placeholder-glow{ data: { 'array-target': 'current' } }
    -# @todo issue-7537
    - metadata.value.each do |uuid|
      - if (indexed_post = site.indexed_posts.find_by(post_id: uuid))
-        = render 'posts/new_related_post', post: indexed_post
+        = render 'posts/new_related_post', post: indexed_post, attribute: metadata.type

  = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do
    - content_for :"#{id}_header" do
      .form-group.flex-grow-1.mb-0
        = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }

    - content_for :"#{id}_body" do
      .form-group.mb-0{ id: value_list_id }
        - metadata.values.each_pair do |value, uuid|
          = render 'targets/array/item', value: uuid, 'send-value': uuid, 'human-value': value, class: 'mb-2' do
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }

    -#
      Según la definición del campo, si hay un filtro, tenemos que poder
--- a/app/views/posts/attributes/_new_has_many.haml
+++ b/app/views/posts/attributes/_new_has_many.haml
@ -21,7 +21,7 @@
  controllers << 'required-checkbox' if metadata.required

 %div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
    .col.p-3{ 'aria-hidden': 'true' }
      %span.placeholder.w-100

@ -44,23 +44,23 @@

    Para poder cancelar, mantenemos el estado original y desactivamos
    o activamos los ítemes según estén incluidos en esa lista o no.
-  .row.no-gutters.placeholder-glow{ data: { target: 'array.current' } }
+  .row.no-gutters.placeholder-glow{ data: { 'array-target': 'current' } }
    -# @todo issue-7537
    - metadata.value.each do |uuid|
      - if (indexed_post = site.indexed_posts.find_by(post_id: uuid))
-        = render 'posts/new_related_post', post: indexed_post
+        = render 'posts/new_related_post', post: indexed_post, attribute: metadata.type

  = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do
    - content_for :"#{id}_header" do
      .form-group.flex-grow-1.mb-0
        = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }

    - content_for :"#{id}_body" do
      .form-group.mb-0{ id: value_list_id }
        - metadata.values.each_pair do |value, uuid|
          = render 'targets/array/item', value: uuid, 'send-value': uuid, 'human-value': value, class: 'mb-2' do
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }

    -#
      Según la definición del campo, si hay un filtro, tenemos que poder
--- a/app/views/posts/attributes/_new_predefined_array.haml
+++ b/app/views/posts/attributes/_new_predefined_array.haml
@ -10,7 +10,7 @@
  controllers << 'required-checkbox' if metadata.required

 %div{ data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
    .col.mb-3{ 'aria-hidden': 'true' }
      %span.placeholder.w-100

@ -33,7 +33,7 @@

    Para poder cancelar, mantenemos el estado original y desactivamos
    o activamos los ítemes según estén incluidos en esa lista o no.
-  %ul.placeholder-glow{ data: { target: 'array.current' } }
+  %ul.placeholder-glow{ data: { 'array-target': 'current' } }
    - metadata.values.invert.slice(*metadata.value).each_value do |value|
      = render 'posts/new_array_value', value: value

@ -41,14 +41,14 @@
    - content_for :"#{id}_header" do
      .form-group.flex-grow-1.mb-0
        = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }

    - content_for :"#{id}_body" do
      .form-group.mb-0{ id: "#{id}_body" }
        -# Eliminamos las tildes para poder buscar independientemente de cómo se escriba
        - metadata.values.each_pair do |value, key|
          = render 'targets/array/item', class: 'mb-2', value: key, 'human-value': value do
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: metadata.value.include?(key), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: metadata.value.include?(key), content: value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }

    - content_for :"#{id}_footer" do
      -# Alinear los botones a la derecha
--- a/app/views/posts/attributes/_new_predefined_value.haml
+++ b/app/views/posts/attributes/_new_predefined_value.haml
@ -21,7 +21,7 @@
  controllers << 'required-checkbox' if metadata.required

 %div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
    .col.p-3{ 'aria-hidden': 'true' }
      %span.placeholder.w-100

@ -44,7 +44,7 @@

    Para poder cancelar, mantenemos el estado original y desactivamos
    o activamos los ítemes según estén incluidos en esa lista o no.
-  %ul.list-unstyled.px-3.font-weight-bold.placeholder-glow{ data: { target: 'array.current' } }
+  %ul.list-unstyled.px-3.font-weight-bold.placeholder-glow{ data: { 'array-target': 'current' } }
    - unless metadata.empty?
      = render 'posts/new_array_value', value: metadata.to_s

@ -52,7 +52,7 @@
    - content_for :"#{id}_header" do
      .form-group.flex-grow-1.mb-0
        = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }

    - content_for :"#{id}_body" do
      .form-group.mb-0{ id: value_list_id }
--- a/app/views/posts/attributes/_non_geo.haml
+++ b/app/views/posts/attributes/_non_geo.haml
@ -1,5 +1,5 @@
 .row{ data: { controller: 'non-geo', site: site.url } }
-  .d-none{ hidden: true, data: { target: 'non-geo.overlay' }}
+  .d-none{ hidden: true, data: { 'non-geo-target': 'overlay' }}
  .col-12.mb-3
    %p.mb-0= post_label_t(attribute, post: post)
    %p= post_label_t(attribute, post: post)
@ -12,7 +12,7 @@
      = text_field(*field_name_for(base, attribute, :lat),
        value: metadata.value['lat'],
        **field_options(attribute, metadata),
-        data: { target: 'non-geo.lat' })
+        data: { 'non-geo-target': 'lat' })
      = render 'posts/attribute_feedback',
        post: post, attribute: [attribute, :lat], metadata: metadata
  .col
@ -22,8 +22,8 @@
      = text_field(*field_name_for(base, attribute, :lng),
        value: metadata.value['lng'],
        **field_options(attribute, metadata),
-        data: { target: 'non-geo.lng' })
+        data: { 'non-geo-target': 'lng' })
      = render 'posts/attribute_feedback',
        post: post, attribute: [attribute, :lng], metadata: metadata
  .col-12.mb-3
-    %div{ data: { target: 'non-geo.map' }, style: 'height: 250px' }
+    %div{ data: { 'non-geo-target': 'map' }, style: 'height: 250px' }
--- a/app/views/posts/index.haml
+++ b/app/views/posts/index.haml
@ -1,7 +1,7 @@
 - reorder_allowed = policy(@site).reorder?
 - if reorder_allowed
  - reorder_controller = { controller: 'reorder' }
-  - reorder_target = { target: 'reorder.row' }
+  - reorder_target = { 'reorder-target': 'row' }
 - else
  - reorder_target = reorder_controller = {}

@ -85,7 +85,7 @@
                      = submit_tag t('posts.reorder.submit'), class: 'btn btn-secondary'
                      %button.btn.btn-secondary{ data: { action: 'reorder#unselect' } }
                        = t('posts.reorder.unselect')
-                        %span.badge{ data: { target: 'reorder.counter' } } 0
+                        %span.badge{ data: { 'reorder-target': 'counter' } } 0
                      %button.btn.btn-secondary{ data: { action: 'reorder#up' } }= t('posts.reorder.up')
                      %button.btn.btn-secondary{ data: { action: 'reorder#down' } }= t('posts.reorder.down')
                      %button.btn.btn-secondary{ data: { action: 'reorder#top' } }= t('posts.reorder.top')
--- a/app/views/targets/array/_item.haml
+++ b/app/views/targets/array/_item.haml
@ -21,4 +21,4 @@
  data[:'send-value'] = local_assigns.delete(:'send-value')
  data[:'searchable-value'] = local_assigns.delete(:'searchable-value')

-%div{ **local_assigns, data: { target: 'array.item', value: value, **data } }= yield
+%div{ **local_assigns, data: { 'array-target': 'item', value: value, **data } }= yield
--- a/package.json
+++ b/package.json
@ -9,6 +9,8 @@
    "@babel/plugin-transform-runtime": "^7.12.17",
    "@babel/preset-env": "^7.12.17",
    "@babel/preset-typescript": "~7.12",
+    "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
    "@rails/actiontext": "^6.0.0",
    "@rails/activestorage": "^6.1.3-1",
    "@rails/ujs": "^6.1.3-1",
--- a/yarn.lock
+++ b/yarn.lock
@ -1841,6 +1841,16 @@
  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==

+"@hotwired/stimulus-webpack-helpers@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus-webpack-helpers/-/stimulus-webpack-helpers-1.0.1.tgz#4cd74487adeca576c9865ac2b9fe5cb20cef16dd"
+  integrity sha512-wa/zupVG0eWxRYJjC1IiPBdt3Lruv0RqGN+/DTMmUWUyMAEB27KXmVY6a8YpUVTM7QwVuaLNGW4EqDgrS2upXQ==
+
+"@hotwired/stimulus@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
+  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
+
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
  version "0.3.3"
  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"