Remove tag input naming inconsistencies

getformwork · Feb 22, 2025 · e5f96a0 · e5f96a0
1 parent 395a6bd
commit e5f96a0
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 38 deletions.
diff --git a/panel/src/scss/components/_forms.scss b/panel/src/scss/components/_forms.scss
@@ -8,5 +8,5 @@
 @use "forms/forms-file";
 @use "forms/forms-image";
 @use "forms/forms-range";
-@use "forms/forms-tag";
+@use "forms/forms-tags";
 @use "forms/forms-togglegroup";
diff --git a/...src/scss/components/forms/_forms-tag.scss → ...rc/scss/components/forms/_forms-tags.scss b/...src/scss/components/forms/_forms-tag.scss → ...rc/scss/components/forms/_forms-tags.scss
@@ -1,7 +1,7 @@
 @use "../mixins" as *;
 @use "../variables" as *;
 
-.form-input-tag {
+.form-input-tags-wrap {
     position: relative;
     display: block;
     box-sizing: border-box;
@@ -16,19 +16,19 @@
     @include user-select-none;
 }
 
-.form-input-wrap > .form-input-tag {
+.form-input-wrap > .form-input-tags-wrap {
     margin-bottom: 0;
 }
 
-.form-input-wrap .form-input-icon + .form-input-tag {
-    padding-left: 1.5rem;
+.form-input-wrap .form-input-icon + .form-input-tags-wrap {
+    padding-left: 1.75rem;
 }
 
-.form-input-tag.focused {
+.form-input-tags-wrap.focused {
     border-color: var(--color-accent-500);
 }
 
-.tag-inner-input {
+.form-input-tags-wrap .form-input {
     display: inline-block;
     width: auto;
     max-width: 100%;
@@ -46,11 +46,7 @@
     }
 }
 
-.form-input-tag-hidden {
-    display: none;
-}
-
-.form-input-tag .tag {
+.form-input-tags-wrap .tag {
     display: inline-block;
     box-sizing: border-box;
     padding: 0 0.375rem;
@@ -65,16 +61,12 @@
     }
 }
 
-.form-input-tag .tag:first-child {
-    margin-left: 0.25rem;
-}
-
-.form-input-tag.disabled,
-.form-input-tag.disabled .tag-inner-input {
+.form-input-tags-wrap.disabled,
+.form-input-tags-wrap.disabled .form-input {
     background-color: var(--color-base-800);
 }
 
-.form-input-tag.disabled .tag {
+.form-input-tags-wrap.disabled .tag {
     background-color: var(--color-base-600);
 }
 
@@ -96,7 +88,7 @@
     font-weight: 600;
 }
 
-.form-input-tag.is-dragging,
-.form-input-tag.is-dragging * {
+.form-input-tags-wrap.is-dragging,
+.form-input-tags-wrap.is-dragging * {
     cursor: grabbing !important;
 }
diff --git a/panel/src/ts/components/inputs.ts b/panel/src/ts/components/inputs.ts
@@ -9,7 +9,7 @@ import { ImagePicker } from "./inputs/image-picker";
 import { RangeInput } from "./inputs/range-input";
 import { SelectInput } from "./inputs/select-input";
 import { SlugInput } from "./inputs/slug-input";
-import { TagInput } from "./inputs/tag-input";
+import { TagsInput } from "./inputs/tags-input";
 
 export class Inputs {
     [name: string]: object;
@@ -23,7 +23,7 @@ export class Inputs {
 
         $$("input[type=file]", parent).forEach((element: HTMLInputElement) => (this[element.name] = new FileInput(element)));
 
-        $$("input[data-field=tags]", parent).forEach((element: HTMLInputElement) => (this[element.name] = new TagInput(element, app.config.TagInput)));
+        $$(".form-input-tags", parent).forEach((element: HTMLInputElement) => (this[element.name] = new TagsInput(element, app.config.TagInput)));
 
         $$("input[data-field=duration]", parent).forEach((element: HTMLInputElement) => (this[element.name] = new DurationInput(element, app.config.DurationInput)));
 

diff --git a/panel/src/ts/components/inputs/tag-input.ts → panel/src/ts/components/inputs/tags-input.ts b/panel/src/ts/components/inputs/tag-input.ts → panel/src/ts/components/inputs/tags-input.ts
@@ -4,22 +4,22 @@ import { debounce } from "../../utils/events";
 import { insertIcon } from "../icons";
 import Sortable from "sortablejs";
 
-interface TagInputOptions {
+interface TagsInputOptions {
     labels: { [key: string]: string };
     addKeyCodes: string[];
     limit: number;
     accept: "options" | "any";
     orderable: boolean;
 }
 
-interface TagInputDropdownItem {
+interface TagsInputDropdownItem {
     value: string;
     icon?: string;
     thumb?: string;
 }
 
-export class TagInput {
-    constructor(input: HTMLInputElement, userOptions: Partial<TagInputOptions>) {
+export class TagsInput {
+    constructor(input: HTMLInputElement, userOptions: Partial<TagsInputOptions>) {
         const defaults = { addKeyCodes: ["Comma"], limit: Infinity, accept: "options", orderable: true };
 
         const options = Object.assign({}, defaults, userOptions);
@@ -49,15 +49,15 @@ export class TagInput {
                 options.orderable = false;
             }
 
-            field.className = "form-input-tag";
+            field.className = "form-input-tags-wrap";
 
-            innerInput.className = "form-input tag-inner-input";
+            innerInput.className = "form-input";
             innerInput.type = "text";
+            innerInput.id = input.id;
             innerInput.placeholder = input.placeholder;
 
-            hiddenInput.className = "form-input-tag-hidden";
+            hiddenInput.className = "form-input-hidden";
             hiddenInput.name = input.name;
-            hiddenInput.id = input.id;
             hiddenInput.type = "text";
             hiddenInput.value = input.value;
             hiddenInput.readOnly = true;
@@ -137,7 +137,7 @@ export class TagInput {
 
         function createDropdown() {
             if ("options" in input.dataset) {
-                const list: { [key: string | number]: string | TagInputDropdownItem } = JSON.parse(input.dataset.options ?? "{}");
+                const list: { [key: string | number]: string | TagsInputDropdownItem } = JSON.parse(input.dataset.options ?? "{}");
                 const isAssociative = !Array.isArray(list);
 
                 if ("accept" in input.dataset) {

diff --git a/panel/views/fields/files.php b/panel/views/fields/files.php
@@ -2,7 +2,7 @@
 <div class="form-input-wrap">
     <span class="form-input-icon"><?= $this->icon($field->get('icon', 'file')) ?></span>
     <input <?= $this->attr([
-                'class'          => 'form-input',
+                'class'          => ['form-input', 'form-input-tags'],
                 'type'           => 'text',
                 'id'             => $field->name(),
                 'name'           => $field->formName(),
@@ -11,7 +11,6 @@
                 'required'       => $field->isRequired(),
                 'disabled'       => $field->isDisabled(),
                 'hidden'         => $field->isHidden(),
-                'data-field'     => 'tags',
                 'data-limit'     => $field->limit(),
                 'data-options'   => Formwork\Parsers\Json::encode($field->options()),
                 'data-accept'    => 'options',

diff --git a/panel/views/fields/images.php b/panel/views/fields/images.php
@@ -2,7 +2,7 @@
 <div class="form-input-wrap">
     <span class="form-input-icon"><?= $this->icon($field->get('icon', 'image')) ?></span>
     <input <?= $this->attr([
-                'class'          => 'form-input',
+                'class'          => ['form-input', 'form-input-tags'],
                 'type'           => 'text',
                 'id'             => $field->name(),
                 'name'           => $field->formName(),
@@ -11,7 +11,6 @@
                 'required'       => $field->isRequired(),
                 'disabled'       => $field->isDisabled(),
                 'hidden'         => $field->isHidden(),
-                'data-field'     => 'tags',
                 'data-limit'     => $field->limit(),
                 'data-options'   => Formwork\Parsers\Json::encode($field->options()),
                 'data-accept'    => 'options',

diff --git a/panel/views/fields/tags.php b/panel/views/fields/tags.php
@@ -2,7 +2,7 @@
 <div class="form-input-wrap">
     <span class="form-input-icon"><?= $this->icon($field->get('icon', 'tag')) ?></span>
     <input <?= $this->attr([
-                'class'          => 'form-input',
+                'class'          => ['form-input', 'form-input-tags'],
                 'type'           => 'text',
                 'id'             => $field->name(),
                 'name'           => $field->formName(),
@@ -11,7 +11,6 @@
                 'required'       => $field->isRequired(),
                 'disabled'       => $field->isDisabled(),
                 'hidden'         => $field->isHidden(),
-                'data-field'     => 'tags',
                 'data-limit'     => $field->get('limit'),
                 'data-options'   => $field->has('options') ? Formwork\Parsers\Json::encode($field->options()) : null,
                 'data-accept'    => $field->get('accept', 'options'),