This commit is contained in:
j3d1 2026-08-19 23:09:21 +02:00
parent 4787acd8eb
commit 67c7415c3b
6 changed files with 691 additions and 407 deletions

View file

@ -7,7 +7,7 @@
<div class="template-grid d-flex flex-wrap align-items-start">
<div v-for="t in labelTemplates" :key="t.id" class="template-option d-flex flex-column text-center"
:class="{'template-option-disabled': !isAvailable(t)}"
:title="isAvailable(t) ? '' : 'Not available - open this page from an item to fill in the fields this layout needs.'"
:title="isAvailable(t) ? '' : 'Not available - fill in the fields this layout needs above.'"
role="button" @click="isAvailable(t) && $emit('input', t.id)">
<canvas :ref="el => setTemplateCanvasRef(t.id, el)"
class="img-thumbnail template-thumb-canvas"
@ -52,12 +52,13 @@
</style>
<script>
import {LABEL_TEMPLATES, drawFallbackLabel, templateIsAvailable, templateContent} from "@/label-drawing.js";
import {drawFallbackLabel} from "@/label.js";
import {LABEL_TEMPLATES, templateIsAvailable, templateContent} from "@/label-layouts.js";
export default {
name: "LabelLayoutPreview",
props: {
// Named content fields the templates draw from (see label-content.js's buildLabelFields)
// Named content fields the templates draw from (see label.js's buildLabelFields)
// - kept in sync by the parent, not owned here. A field missing from this object (rather
// than present-but-empty) means a template that needs it is unavailable right now.
fields: {
@ -109,7 +110,7 @@ export default {
continue;
}
const content = templateContent(t, this.fields);
if (!this.isAvailable(t) || (!content.qr && !content.text)) {
if (!this.isAvailable(t) || !content) {
canvas.width = 1;
canvas.height = 1;
continue;