bard-attachment_field 0.5.4 → 0.5.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce6c35b5100e96423e481bdb7cb16685dd12eb13fd2712f0aa6e0018193a75e8
-  data.tar.gz: 70a5d3a46439faabb9588ec04655f92092bd94c357ec5b492b56bf1376621d64
+  metadata.gz: 81087a83b5826f9f496ec7e3de2a8e06ddf4f4020042ab09fab2f9266ddc9034
+  data.tar.gz: ced1aae9518fbec16dd3f588217cad02e3eee964d135d0706917b85a46624d33
 SHA512:
-  metadata.gz: 6f73d93cd92298b236646d0bbe72d54bccfe8490fe0bc8dc2dc0e46512afaecca53e6fb44ff4ab4ebb6a2343483afc17fba84171d392ff9981bb0e5ebd1ae4e5
-  data.tar.gz: 78ecf96abad31aaebf81a9a4d0cc8073a8a565ead77cd6c0406d95bb34b0b05371fb1711db616079969ca437ef6cb72b8039c5fef99f15c15e14e5d6a3af0ae1
+  metadata.gz: 03c6a1bd3681a43146ada1ab6afb6e9482ab59a847fb87b242457aeae8e95fbe99c4995f3f3a0fbe7f8e0ed3e6a9b8775e6ccf0a988b1c1972ea247b836410a6
+  data.tar.gz: 0d2a288ef42ee0476cda23547b0319c59dc0cacb0d5002fd7d2af3dc3466e1f8f33476a935f8bcd0bf4e518524f481a26a994818d53723422d032a35b023e747

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.5.5] - 2026-06-06
+
+### Bug Fixes
+
+- Capture the block passed to `attachment_field` instead of using its return
+  value. Previously the block's markup leaked to the surrounding output buffer,
+  leaving `<input-attachment>` with no `<attachment-file>` child — so editing a
+  record and saving without touching the file submitted an empty value and
+  silently purged the existing attachment.
+
 ## [0.2.0] - 2026-03-03
 
 ### Features

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

@@ -4790,43 +4790,190 @@ var o = H2;
 var e = a;
 
 // dist/components/index2.js
-var r = null;
-function n2(r4) {
-  const n3 = Number(r4);
-  if (Number.isNaN(n3)) throw new TypeError(`progress-bar: percent must be numeric, got ${JSON.stringify(r4)}`);
-  return Math.min(100, Math.max(0, n3));
+var n2 = null;
+function r(n3) {
+  const r4 = Number(n3);
+  if (Number.isNaN(r4)) throw new TypeError(`progress-bar: percent must be numeric, got ${JSON.stringify(n3)}`);
+  return Math.min(100, Math.max(0, r4));
 }
 var e2 = class extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this._percent = 0, this._rendered = false;
+    super(), this.attachShadow({ mode: "open" }), this._percent = null, this._renderedMode = null;
   }
   connectedCallback() {
-    this._rendered || (this.render(), this._rendered = true), this.updateBar();
+    this.render(), this.setAttribute("role", "progressbar"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", "100"), this.updateBar();
   }
   get percent() {
     return this._percent;
   }
-  set percent(r4) {
-    this.setAttribute("percent", n2(r4));
+  set percent(n3) {
+    null == n3 ? this.removeAttribute("percent") : this.setAttribute("percent", r(n3));
   }
   get error() {
     return this.hasAttribute("error");
   }
-  set error(r4) {
-    this.toggleAttribute("error", Boolean(r4));
+  set error(n3) {
+    this.toggleAttribute("error", Boolean(n3));
+  }
+  get indeterminate() {
+    return !this.hasAttribute("percent");
+  }
+  get mode() {
+    return "circular" === this.getAttribute("mode") ? "circular" : "linear";
+  }
+  set mode(n3) {
+    this.setAttribute("mode", n3);
   }
   static get observedAttributes() {
-    return ["percent"];
+    return ["percent", "mode"];
   }
-  attributeChangedCallback(r4, e3, t) {
-    "percent" === r4 && (this._percent = n2(t), this.updateBar());
+  attributeChangedCallback(n3, e3, t) {
+    "percent" === n3 && (this._percent = null === t ? null : r(t)), "mode" === n3 && this.render(), this.updateBar();
   }
   updateBar() {
-    const r4 = this.shadowRoot?.querySelector(".bar");
-    r4 && (r4.style.width = `${this._percent}%`), this.setAttribute("aria-valuenow", String(this._percent));
+    if ("circular" === this.mode) {
+      const n3 = this.shadowRoot?.querySelector(".progress-ring");
+      n3 && (n3.style.strokeDashoffset = this.indeterminate ? "" : String(100 * (1 - this._percent / 100)));
+    } else {
+      const n3 = this.shadowRoot?.querySelector(".bar");
+      n3 && (n3.style.width = this.indeterminate ? "" : `${this._percent}%`);
+    }
+    this.indeterminate ? this.removeAttribute("aria-valuenow") : this.setAttribute("aria-valuenow", String(this._percent));
   }
   render() {
-    this.shadowRoot.adoptedStyleSheets = [(r || (r = new CSSStyleSheet(), r.replaceSync("\n  :host {\n    --progress-color: #2E7D32;\n    --error-color: #7a242f;\n    --progress-duration: 120ms;\n    --bar-height: 32px;\n    --bar-padding: 8px;\n    display: block;\n    overflow: hidden;\n    background: #333333;\n    border: 1px solid #999;\n    border-radius: 4px;\n  }\n\n  .content {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: var(--bar-height);\n    box-sizing: border-box;\n    padding: var(--bar-padding);\n    color: white;\n    font-size: 13px;\n    z-index: 0;\n  }\n\n  .bar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 0%;\n    background: var(--progress-color);\n    transition: width var(--progress-duration) ease;\n    z-index: -1;\n  }\n\n  :host([error]) .bar {\n    background: var(--error-color);\n  }\n")), r)], this.shadowRoot.innerHTML = '\n      <span class="content">\n        <div class="bar"></div>\n        <slot></slot>\n      </span>\n    ', this.setAttribute("role", "progressbar"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", "100");
+    const r4 = this.mode;
+    this._renderedMode !== r4 && (this._renderedMode = r4, this.shadowRoot.adoptedStyleSheets = [(n2 || (n2 = new CSSStyleSheet(), n2.replaceSync(`
+  :host {
+    --progress-color: #2E7D32;
+    --error-color: #7a242f;
+    --indeterminate-color: #999;
+    --track-color: #333333;
+    --progress-duration: 120ms;
+    --indeterminate-duration: 1.5s;
+    --bar-height: 32px;
+    --bar-padding: 8px;
+    --circular-size: 64px;
+    --circular-thickness: 16;
+    display: block;
+    overflow: hidden;
+    background: var(--track-color);
+    border: 1px solid #999;
+    border-radius: 4px;
+    min-height: var(--bar-height);
+    padding: var(--bar-padding);
+    font-size: 13px;
+    align-content: center;
+    box-sizing: border-box;
+    position: relative;
+  }
+  .bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    background: var(--progress-color);
+    transition: width var(--progress-duration) ease;
+    z-index: 1;
+  }
+  .text{position: relative; z-index: 2;}
+  :host([error]) .bar {
+    background: var(--error-color);
+  }
+
+  /* Indeterminate (linear): no percent set \u2014 a fixed-width segment sweeping across the track. */
+  :host(:not([percent])) .bar {
+    background: var(--indeterminate-color);
+    width: 40%;
+    animation: indeterminate-linear var(--indeterminate-duration) infinite linear;
+  }
+
+  @keyframes indeterminate-linear {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(250%); }
+  }
+
+  /* Circular mode: the host box styling is for the linear track, so drop it. */
+  :host([mode="circular"]) {
+    background: transparent;
+    border: none;
+    overflow: visible;
+    padding: 0;
+    min-height: 0;
+  }
+
+  .circular {
+    position: relative;
+    display: inline-flex;
+    width: var(--circular-size);
+    height: var(--circular-size);
+  }
+
+  .ring {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+
+  .ring circle {
+    fill: none;
+    stroke-width: var(--circular-thickness);
+    /* Shrink the radius so the stroke's outer edge always lands inside the
+       100x100 viewBox, no matter how thick --circular-thickness is. */
+    r: calc(49px - var(--circular-thickness) * 0.5px);
+  }
+
+  .track {
+    stroke: var(--track-color);
+  }
+
+  .progress-ring {
+    stroke: var(--progress-color);
+    stroke-linecap: round;
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    transition: stroke-dashoffset var(--progress-duration) ease;
+  }
+
+  :host(:not([percent])) .progress-ring {
+    stroke: var(--indeterminate-color);
+  }
+
+  :host([error]) .progress-ring {
+    stroke: var(--error-color);
+  }
+
+  .label {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    mix-blend-mode: difference;
+  }
+
+  /* When the host carries its own inline styling (e.g. a color override), opt
+     out of the blend trick and just inherit, so the override wins predictably. */
+  :host([style]) .label {
+    mix-blend-mode: initial;
+    color: inherit;
+  }
+
+  /* Indeterminate (circular): no percent set \u2014 spin a fixed arc around the ring. */
+  :host(:not([percent])) .ring {
+    animation: indeterminate-rotate var(--indeterminate-duration) infinite linear;
+  }
+
+  :host(:not([percent])) .progress-ring {
+    stroke-dashoffset: 75;
+  }
+
+  @keyframes indeterminate-rotate {
+    0%   { transform: rotate(-90deg); }
+    100% { transform: rotate(270deg); }
+  }
+`)), n2)], this.shadowRoot.innerHTML = "circular" === r4 ? '\n  <div class="circular">\n    <svg class="ring" viewBox="0 0 100 100">\n      <circle class="track" cx="50" cy="50" r="40"></circle>\n      <circle class="progress-ring" cx="50" cy="50" r="40" pathLength="100"></circle>\n    </svg>\n    <span class="label"><slot></slot></span>\n  </div>\n' : '\n  <div class="bar"></div>\n  <div class="text"><slot></slot></div>\n');
   }
 };
 customElements.get("progress-bar") || customElements.define("progress-bar", e2);

data/input-attachment/package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@botandrose/file-drop": "^0.1.1",
-    "@botandrose/progress-bar": "^0.3.0",
+    "@botandrose/progress-bar": "^0.4.1",
     "@rails/activestorage": "^8.1.0",
     "@rails/request.js": "0.0.13",
     "@stencil/core": "^4.43.2",

data/lib/bard/attachment_field/field.rb

@@ -8,8 +8,12 @@ module Bard
         })
         add_default_name_and_id(options)
 
-        content_tag("input-attachment", options) do
-          next block.call(options) if block
+        content = if block
+          # Capture the template block's rendered markup. Using block.call would
+          # return the block's value while its markup leaked to the surrounding
+          # output buffer, leaving <input-attachment> childless (see BARD #262849).
+          @template_object.capture(options, &block)
+        else
           Array(object.try(@method_name)).map do |attachment|
             content_tag("attachment-file", nil, {
               name: options["name"],
@@ -20,6 +24,8 @@ module Bard
             })
           end.join("\n").html_safe
         end
+
+        content_tag("input-attachment", content, options)
       end
 
       private

data/lib/bard/attachment_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module AttachmentField
-    VERSION = "0.5.4"
+    VERSION = "0.5.6"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-attachment_field
 version: !ruby/object:Gem::Version
-  version: 0.5.4
+  version: 0.5.6
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-05-30 00:00:00.000000000 Z
+date: 2026-06-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activestorage