refactor(frontend): replace stimulus with web component for tag input

getindiekit · Nov 4, 2023 · 3046e2f · 3046e2f
1 parent dbdec55
commit 3046e2f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 58 deletions.
diff --git a/packages/frontend/components/tag-input/index.js b/packages/frontend/components/tag-input/index.js
@@ -1,56 +1,28 @@
-import { Controller } from "@hotwired/stimulus";
 import TagInput from "@accessible-components/tag-input";
 
-export const TagInputController = class extends Controller {
-  static values = {
-    tag: String,
-    placeholder: String,
-    edit: String,
-    delete: String,
-    added: String,
-    updated: String,
-    deleted: String,
-    selected: String,
-    noneSelected: String,
-    instruction: String,
-  };
-
-  initialize() {
-    const {
-      element,
-      addedValue,
-      deleteValue,
-      deletedValue,
-      editValue,
-      instructionValue,
-      noneSelectedValue,
-      placeholderValue,
-      selectedValue,
-      tagValue,
-      updatedValue,
-    } = this;
-
-    const $replacedField = element.querySelector(".field");
-    const $replacedInput = element.querySelector(".input");
-    const $replacedLabel = element.querySelector(".label");
+export const TagInputComponent = class extends HTMLElement {
+  connectedCallback() {
+    const $replacedField = this.querySelector(".field");
+    const $replacedInput = this.querySelector(".input");
+    const $replacedLabel = this.querySelector(".label");
 
     const value = $replacedInput.getAttribute("value");
     const tags = value ? $replacedInput.getAttribute("value").split(",") : [];
 
-    const tagInput = new TagInput(element, {
-      ariaTag: tagValue,
-      ariaEditTag: editValue,
-      ariaDeleteTag: deleteValue,
-      ariaTagAdded: addedValue,
-      ariaTagDeleted: deletedValue,
-      ariaTagUpdated: updatedValue,
-      ariaTagSelected: selectedValue,
-      ariaNoTagsSelected: noneSelectedValue,
-      ariaInputLabel: instructionValue,
+    const tagInput = new TagInput(this, {
+      ariaTag: this.getAttribute("tag"),
+      ariaEditTag: this.getAttribute("edit"),
+      ariaDeleteTag: this.getAttribute("delete"),
+      ariaTagAdded: this.getAttribute("added"),
+      ariaTagDeleted: this.getAttribute("deleted"),
+      ariaTagUpdated: this.getAttribute("updated"),
+      ariaTagSelected: this.getAttribute("selected"),
+      ariaNoTagsSelected: this.getAttribute("none-selected"),
+      ariaInputLabel: this.getAttribute("instruction"),
       disabled: $replacedInput.getAttribute("disabled"),
       label: $replacedLabel.innerHTML,
       name: $replacedInput.getAttribute("name"),
-      placeholder: placeholderValue,
+      placeholder: this.getAttribute("placeholder"),
       tags,
     });
 

diff --git a/packages/frontend/components/tag-input/styles.css b/packages/frontend/components/tag-input/styles.css
@@ -1,3 +1,7 @@
+tag-input-component {
+  display: block;
+}
+
 .tag-input-label {
   display: block;
   font: var(--label-font, var(--font-label));

diff --git a/packages/frontend/components/tag-input/template.njk b/packages/frontend/components/tag-input/template.njk
@@ -1,38 +1,38 @@
 {% from "../input/macro.njk" import input with context %}
 {% set tag = opts.localisation.tag | default(__("tagInput.defaultTag")) %}
 {% set tags = opts.localisation.tags | default(__("tagInput.defaultTags")) %}
-<div data-controller="tag-input"
-  data-tag-input-tag-value="{{ "{{TAG}} " + tag + "." }}"
-  data-tag-input-placeholder-value="{{ __("tagInput.placeholder", {
+<tag-input-component
+  tag="{{ "{{TAG}} " + tag + "." }}"
+  placeholder="{{ __("tagInput.placeholder", {
     tags: tags
   }) }}"
-  data-tag-input-edit-value="{{ __("tagInput.edit", {
+  edit="{{ __("tagInput.edit", {
     tag: tag
   }) }}"
-  data-tag-input-delete-value="{{ __("tagInput.delete", {
+  delete="{{ __("tagInput.delete", {
     name: "{{TAG}}",
     tag: tag
   }) }}"
-  data-tag-input-added-value="{{ __("tagInput.added", {
+  added="{{ __("tagInput.added", {
     name: "{{TAG}}",
     tag: tag
   }) }}"
-  data-tag-input-updated-value="{{ __("tagInput.updated", {
+  updated="{{ __("tagInput.updated", {
     name: "{{TAG}}",
     tag: tag
   }) }}"
-  data-tag-input-deleted-value="{{ __("tagInput.deleted", {
+  deleted="{{ __("tagInput.deleted", {
     name: "{{TAG}}",
     tag: tag
   }) }}"
-  data-tag-input-selected-value="{{ __("tagInput.selected", {
+  selected="{{ __("tagInput.selected", {
     name: "{{TAG}}",
     tag: tag
   }) }}"
-  data-tag-input-none-selected-value="{{ __("tagInput.noneSelected", {
+  none-selected="{{ __("tagInput.noneSelected", {
     tags: tags
   }) }}"
-  data-tag-input-instruction-value="{{ __("tagInput.instruction", {
+  instruction="{{ __("tagInput.instruction", {
     list: "{{TAGS}}",
     tags: tags
   }) }}">
@@ -48,4 +48,4 @@
     attributes: opts.attributes,
     errorMessage: opts.errorMessage
   }) }}
-</div>
+</tag-input-component>
diff --git a/packages/frontend/scripts/app.js b/packages/frontend/scripts/app.js
@@ -7,7 +7,7 @@ import { GeoInputController } from "../components/geo-input/index.js";
 import { PreviewController } from "../components/preview/index.js";
 import { NotificationController } from "../components/notification/index.js";
 import { RadiosComponent } from "../components/radios/index.js";
-import { TagInputController } from "../components/tag-input/index.js";
+import { TagInputComponent } from "../components/tag-input/index.js";
 import { TextareaController } from "../components/textarea/index.js";
 
 window.Stimulus = Application.start();
@@ -18,5 +18,5 @@ Stimulus.register("geo-input", GeoInputController);
 Stimulus.register("notification", NotificationController);
 Stimulus.register("preview", PreviewController);
 customElements.define("radios-component", RadiosComponent);
-Stimulus.register("tag-input", TagInputController);
+customElements.define("tag-input-component", TagInputComponent);
 Stimulus.register("textarea", TextareaController);