ui(badges): add background image bleed support (cfg_json, PVC layout)

- Add `bleed` field to BadgeTemplateCfg (CSS length, e.g. "0.125in")
- Badge view: derive bleed_offset, move bg-image to absolute positioned div
  that extends past card edges; add isolation:isolate to badge_front stacking context
- Template form: add bleed input in Advanced > Appearance; wire to cfg_json save/load
- PVC layout CSS: change overflow:hidden → overflow:visible in print rule to allow
  bleed div to render at physical card boundary (Zebra driver clips at card edge)
- Prevents white borders on PVC cards when printer has slight alignment variance.
  Screen preview shows bleed visually extending past the card outline.
This commit is contained in:
Scott Idem
2026-04-10 14:25:08 -04:00
parent cfdec1e305
commit c7fa75afc7
4 changed files with 55 additions and 5 deletions

View File

@@ -44,6 +44,8 @@
height: 5.5in !important;
max-width: 3.5in !important;
max-height: 5.5in !important;
overflow: hidden !important;
/* Allow visible: the bleed div inside badge_front extends past the card
boundary intentionally. The Zebra driver clips at the physical card edge. */
overflow: visible !important;
}
}

View File

@@ -30,6 +30,12 @@ export interface BadgeTemplateCfg {
// Body text color: either a Tailwind `text-*` class or a hex color like `#112233`.
body_text_color?: string;
// Background image bleed: how far the background image extends past the physical
// card edge on all four sides. Prevents white borders when the printer clips at the
// card boundary. Any CSS length is valid: "0.125in", "3mm", "9px".
// Leave unset (or "0") for no bleed.
bleed?: string;
// Allow arbitrary extra keys to preserve forward-compatibility.
[key: string]: any;
}