bard-tag_field 0.4.0 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2710ff20fb473cf6eef8319d72f88cf59b0f3c24cca66badbad936f644df368b
-  data.tar.gz: e16029c932fc9329796d05b587dd8a5697d59a99a0db9692f15c8b37bfaa04c1
+  metadata.gz: 7a90b26ef508ec001cae14170b6ce96c543d6610c984622a1a2f3d9722c3e713
+  data.tar.gz: 5bafffc31b38325321042c768d96cb9d4b7f829a8d05f803d9f6bb96d38c85e1
 SHA512:
-  metadata.gz: 5694eb901dd9ce23e13b1685da503150c3adbf7fb102124b7c9c3f7114dfffaeb56e6f8d000606e96172f2ae21193a8d8eb47c7e2c1cb625f4579c38271321a3
-  data.tar.gz: b812a1d58f7280aca270133b0b6ff372b0d406c9122fd7b42a5ec17073104baf6a0242000cedc9075f5f8a9a9f29c24ff30f2f5dc060a0b20c17e2445a655099
+  metadata.gz: ca88e6931e551b19f280e6ecec610251c44b7778ebc88b93693ce3b9a3f05df800d9743b5bf58bf9d97f45bb542be0fae5e8a64ad6d04a5dbd813dac455eeb79
+  data.tar.gz: 61013f52ca3daadefc24a4d1a7f3346d392a31ebefd2c144ddd2490975d4a51a6d27d840fb818bdbdf463256661f1dd655915e7e6f2c237c5b4f99f16ad7e402

data/app/assets/javascripts/input-tag.js

@@ -1015,7 +1015,7 @@ class TagOption extends HTMLElement {
           display: inline-flex;
           align-items: center;
           float: none;
-          font-size: 1.25em;
+          font-size: 14px;
           line-height: 1;
           min-height: 32px;
           color: #fff;
@@ -1028,7 +1028,7 @@ class TagOption extends HTMLElement {
           z-index: 1;
           border: none;
           background: none;
-          font-size: 1.4em;
+          font-size: 20px;
           display: inline-block;
           color: rgba(255, 255, 255, 0.6);
           right: 10px;
@@ -1120,8 +1120,17 @@ class InputTag extends HTMLElement {
 
   processTagOptions() {
     if(!this._taggle || !this._taggle.tag) return
-    const tagOptions = Array.from(this.children).filter(e => e.tagName === 'TAG-OPTION');
-    const values = tagOptions.map(e => e.value).filter(value => value !== null && value !== undefined);
+    let tagOptions = Array.from(this.children).filter(e => e.tagName === 'TAG-OPTION');
+    let values = tagOptions.map(e => e.value).filter(value => value !== null && value !== undefined);
+
+    // Enforce maxTags constraint for single mode
+    if (!this.multiple && values.length > 1) {
+      // Remove excess tag-options from DOM (keep only the first one)
+      tagOptions.slice(1).forEach(el => el.remove());
+      tagOptions = tagOptions.slice(0, 1);
+      values = values.slice(0, 1);
+    }
+
     this._taggle.tag.elements = tagOptions;
     this._taggle.tag.values = values;
     this._inputPosition = this._taggle.tag.values.length;
@@ -1136,6 +1145,9 @@ class InputTag extends HTMLElement {
 
     // Update internal value to match
     this.updateValue();
+
+    // Ensure input visibility is updated when tags change via DOM
+    this.updateInputVisibility();
   }
 
   get form() {
@@ -1146,9 +1158,13 @@ class InputTag extends HTMLElement {
     return this.getAttribute("name");
   }
 
+  get multiple() {
+    return this.hasAttribute('multiple');
+  }
+
   get value() {
     const internalValue = this._internals.value;
-    if (this.hasAttribute('multiple')) {
+    if (this.multiple) {
       return internalValue; // Return array for multiple mode
     } else {
       return internalValue.length > 0 ? internalValue[0] : ''; // Return string for single mode
@@ -1173,7 +1189,7 @@ class InputTag extends HTMLElement {
     values.forEach(value => formData.append(this.name, value));
     // For single mode, append empty string when no values (like standard HTML inputs)
     // For multiple mode, leave empty (like standard HTML multiple selects)
-    if (values.length === 0 && !this.hasAttribute('multiple')) {
+    if (values.length === 0 && !this.multiple) {
       formData.append(this.name, "");
     }
     this._internals.setFormValue(formData);
@@ -1281,14 +1297,14 @@ class InputTag extends HTMLElement {
         }
         input {
           display: block;
-          height: 32px;
+          height: 38px;
           float: none;
           margin: 0;
           padding-left: 10px !important;
           padding-right: 30px !important;
           width: auto !important;
           min-width: 70px;
-          font-size: 1.25em;
+          font-size: 14px;
           width: 100%;
           line-height: 2;
           padding: 0 0 0 10px;
@@ -1301,11 +1317,11 @@ class InputTag extends HTMLElement {
           color: #333;
         }
         button {
-          width: 30px;
+          width: 38px;
           text-align: center;
-          line-height: 30px;
+          line-height: 36px;
           border: 1px solid #e0e0e0;
-          font-size: 2em;
+          font-size: 20px;
           color: #666;
           position: absolute !important;
           z-index: 10;
@@ -1337,7 +1353,7 @@ class InputTag extends HTMLElement {
           flex-wrap: wrap;
           background: #fff;
           list-style: none;
-          font-size: 1.25em;
+          font-size: 14px;
           min-width: 200px;
         }
         .ui-menu .ui-menu-item{
@@ -1379,7 +1395,6 @@ class InputTag extends HTMLElement {
     this.inputTarget = this.shadowRoot.querySelector("#inputTarget");
 
     this.required = this.hasAttribute("required");
-    this.multiple = this.hasAttribute("multiple");
 
     const maxTags = this.multiple ? undefined : 1;
     const placeholder = this.inputTarget.getAttribute("placeholder");
@@ -1443,6 +1458,12 @@ class InputTag extends HTMLElement {
       },
       render: item => h(`<li class="ui-menu-item" data-value="${item.value}">${item.label}</li>`),
       onSelect: item => {
+        // Prevent adding multiple tags in single mode
+        if (!this.multiple && this._taggle.getTagValues().length > 0) {
+          this._taggleInputTarget.value = '';
+          return
+        }
+
         // Create a tag-option element with proper value/label separation
         const tagOption = document.createElement('tag-option');
         tagOption.setAttribute('value', item.value);
@@ -1580,7 +1601,7 @@ class InputTag extends HTMLElement {
     values.forEach(value => formData.append(this.name, value));
     // For single mode, append empty string when no values (like standard HTML inputs)
     // For multiple mode, leave empty (like standard HTML multiple selects)
-    if (values.length === 0 && !this.hasAttribute('multiple')) {
+    if (values.length === 0 && !this.multiple) {
       formData.append(this.name, "");
     }
     this._internals.setFormValue(formData);
@@ -1643,10 +1664,9 @@ class InputTag extends HTMLElement {
   updateInputVisibility() {
     if (!this._taggleInputTarget || !this.buttonTarget) return;
 
-    const isMultiple = this.hasAttribute('multiple');
     const hasTags = this._taggle && this._taggle.getTagValues().length > 0;
 
-    if (isMultiple) {
+    if (this.multiple) {
       // Multiple mode: always show input and button
       this._taggleInputTarget.style.display = '';
       this.buttonTarget.style.display = '';
@@ -1715,9 +1735,6 @@ class InputTag extends HTMLElement {
   handleMultipleChange(isMultiple) {
     if (!this._taggle) return;
 
-    // Update the internal multiple state
-    this.multiple = isMultiple;
-
     // Get current tags
     const currentTags = this._taggle.getTagValues();
 
@@ -1816,7 +1833,7 @@ class InputTag extends HTMLElement {
     values.forEach(value => formData.append(this.name, value));
     // For single mode, append empty string when no values (like standard HTML inputs)
     // For multiple mode, leave empty (like standard HTML multiple selects)
-    if (values.length === 0 && !this.hasAttribute('multiple')) {
+    if (values.length === 0 && !this.multiple) {
       formData.append(this.name, "");
     }
     this._internals.setFormValue(formData);

data/bard-tag/package.json

@@ -5,11 +5,11 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "rollup": "^4.5.2"
+    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "rollup": "^4.52.5"
   },
   "dependencies": {
-    "@botandrose/input-tag": "0.3.0"
+    "@botandrose/input-tag": "0.4.2"
   }
 }

data/lib/bard/tag_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module TagField
-    VERSION = "0.4.0"
+    VERSION = "0.4.2"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-tag_field
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.2
 platform: ruby
 authors:
 - Micah Geisel
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2025-08-23 00:00:00.000000000 Z
+date: 2025-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails