@7365admin1/layer-common 4.90.2-staging.491 → 4.90.2

package/components/HidProfileQrCode.vue

@@ -1,332 +0,0 @@
-<!--
-  MY HID QR CODE.
-
-  The signed-in member's own pass for one reader. Every other HID screen acts on
-  somebody else - a resident being enrolled, a visitor being issued a pass. This
-  one has no subject picker at all, because the server takes the caller from the
-  session and there is no user id to send.
-
-  Issuing a code does NOT grant access. A member's door permission comes from the
-  HID permissions screen, and minting an access rule here would let anyone who
-  can press Generate admit themselves. So the screen reports what the permissions
-  screen says (`assigned`) and warns when a code would be refused at the door,
-  rather than handing out something that silently fails.
--->
-<template>
-  <div class="hid-profile-qr">
-    <div class="hid-profile-qr__header">
-      <h2 class="hid-profile-qr__title">HID QR Code</h2>
-      <AppSelect
-        v-if="readerOptions.length"
-        v-model="selectedReaderId"
-        class="reader-select"
-        :items="readerOptions"
-        @update:model-value="loadProfile"
-      />
-    </div>
-
-    <v-card class="screen-modal hid-profile-qr__card">
-      <v-card-text class="screen-modal__body">
-        <div v-if="loading" class="hid-profile-qr__state">Loading...</div>
-
-        <div v-else-if="!readerOptions.length" class="hid-profile-qr__state">
-          No HID reader is set up for this site yet.
-        </div>
-
-        <template v-else>
-          <p class="hid-profile-qr__reader">
-            {{ profile?.readerName || "HID reader" }}
-            <span>{{ profile?.portalName || "Portal not configured" }}</span>
-          </p>
-
-          <!-- A code this reader cannot read is worse than no code, so the
-               capability is checked before anything is offered. -->
-          <v-alert
-            v-if="profile && !profile.qrEnabled"
-            type="warning"
-            variant="tonal"
-            density="compact"
-            class="mb-4"
-          >
-            This reader is not set up to read QR codes.
-          </v-alert>
-
-          <!-- The honest part: a code opens the door only for a member the
-               permissions screen already admits. `assigned` is null when the
-               lookup failed, which is not the same as "no". -->
-          <v-alert
-            v-else-if="profile && profile.assigned === false"
-            type="warning"
-            variant="tonal"
-            density="compact"
-            class="mb-4"
-          >
-            You are not assigned to this reader, so this code will be refused at
-            the door. Ask a property manager to add you on the HID permissions
-            screen.
-          </v-alert>
-
-          <div v-if="qrImage" class="hid-profile-qr__code">
-            <img :src="qrImage" alt="Your HID QR code" width="220" height="220" />
-            <p class="hid-profile-qr__issued">
-              Issued {{ formatIssuedAt(profile?.issuedAt) }}
-            </p>
-          </div>
-          <p v-else class="hid-profile-qr__state">
-            You have no QR code on this reader yet.
-          </p>
-
-          <div class="hid-profile-qr__actions">
-            <AppButton
-              :disabled="working || !profile?.qrEnabled"
-              @click="generate"
-            >
-              {{ profile?.issued ? "Regenerate" : "Generate QR Code" }}
-            </AppButton>
-            <AppButton
-              v-if="qrImage"
-              variant="ghost"
-              icon="mdi-download"
-              @click="downloadQr"
-            >
-              Download
-            </AppButton>
-            <AppButton
-              v-if="profile?.issued"
-              variant="ghost"
-              :disabled="working"
-              @click="remove"
-            >
-              Remove
-            </AppButton>
-          </div>
-
-          <p class="field-hint">
-            Regenerating replaces the previous code. The old one stops working
-            immediately.
-          </p>
-        </template>
-      </v-card-text>
-    </v-card>
-
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color" timeout="4000">
-      {{ snackbar.message }}
-    </v-snackbar>
-  </div>
-</template>
-
-<script setup lang="ts">
-import QRCode from "qrcode";
-import type { HidProfileQr } from "../composables/useHidAmico";
-
-const props = defineProps<{ site: string }>();
-
-const { getReaders, getProfileQr, issueProfileQr, deleteProfileQr } = useHidAmico();
-
-type HidReaderOption = { _id: string; name?: string; portalName?: string };
-
-const readers = ref<HidReaderOption[]>([]);
-const { selectHidReader, resolveForSite } = useHidReaderSelection();
-const selectedReaderId = ref("");
-const profile = ref<HidProfileQr | null>(null);
-const qrImage = ref("");
-const loading = ref(false);
-const working = ref(false);
-const snackbar = reactive({ show: false, color: "success", message: "" });
-
-const readerOptions = computed(() => readers.value.map((reader) => ({
-  title: `${reader.name || reader._id} — ${reader.portalName || "Portal not configured"}`,
-  value: reader._id,
-})));
-
-function showToast(message: string, color: "success" | "error" = "success") {
-  snackbar.message = message;
-  snackbar.color = color;
-  snackbar.show = true;
-}
-
-function toRecord(value: unknown): Record<string, any> {
-  return value && typeof value === "object" ? (value as Record<string, any>) : {};
-}
-
-function errorMessage(error: unknown) {
-  const record = toRecord(error);
-  return String(toRecord(record.data).message || record.message || "Something went wrong.");
-}
-
-function formatIssuedAt(value?: string) {
-  if (!value) return "";
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
-}
-
-/**
- * The image is drawn here, never fetched. The value is the credential itself,
- * so keeping it on this page and out of any URL is the point.
- */
-async function renderQr(value: string) {
-  if (!value) {
-    qrImage.value = "";
-    return;
-  }
-  try {
-    qrImage.value = await QRCode.toDataURL(value, { width: 440, margin: 1 });
-  } catch (error) {
-    console.error("Unable to render the HID QR code:", error);
-    qrImage.value = "";
-  }
-}
-
-/**
- * Saves the rendered code as a PNG.
- *
- * Straight off the data URL already in the page - no request, so the credential
- * never travels again to be downloaded. Same anchor-click approach `VisitorForm`
- * uses for a visitor pass, and the reader name is in the file name because a
- * member can hold one code per reader.
- */
-function downloadQr() {
-  if (!qrImage.value) return;
-  const slug = String(profile.value?.readerName || "reader")
-    .trim()
-    .replace(/[^a-z0-9]+/gi, "-")
-    .replace(/^-|-$/g, "")
-    .toLowerCase();
-  const link = document.createElement("a");
-  link.href = qrImage.value;
-  link.download = `hid-qr-${slug || "reader"}.png`;
-  link.click();
-}
-
-async function loadReaders() {
-  if (!props.site) return;
-  const response = toRecord(await getReaders({ site: props.site, page: 1, limit: 100 }));
-  const data = toRecord(response.data);
-  const items = response.items ?? data.items ?? data.readers ?? [];
-  readers.value = (Array.isArray(items) ? items : []).filter((reader) => reader?._id);
-  /* Shared with every other HID screen — see `useHidReaderSelection`. The
-     resolver refuses a remembered reader that is not this site's, so a site
-     switch or a deleted reader falls back to the first rather than querying
-     an id the site does not own. */
-  selectedReaderId.value = resolveForSite(props.site, readers.value);
-}
-
-async function loadProfile() {
-  if (!selectedReaderId.value) return;
-  loading.value = true;
-  try {
-    const response = await getProfileQr(selectedReaderId.value);
-    profile.value = response?.data ?? null;
-    await renderQr(profile.value?.qrValue || "");
-  } catch (error: unknown) {
-    profile.value = null;
-    qrImage.value = "";
-    showToast(errorMessage(error), "error");
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function generate() {
-  if (!selectedReaderId.value) return;
-  working.value = true;
-  try {
-    const response = await issueProfileQr(selectedReaderId.value);
-    profile.value = response?.data ?? null;
-    await renderQr(profile.value?.qrValue || "");
-    showToast("QR code generated.");
-  } catch (error: unknown) {
-    showToast(errorMessage(error), "error");
-  } finally {
-    working.value = false;
-  }
-}
-
-async function remove() {
-  if (!selectedReaderId.value) return;
-  if (!window.confirm("Remove your QR code from this reader?")) return;
-  working.value = true;
-  try {
-    const response = await deleteProfileQr(selectedReaderId.value);
-    profile.value = response?.data ?? null;
-    await renderQr("");
-    showToast("QR code removed.");
-  } catch (error: unknown) {
-    showToast(errorMessage(error), "error");
-  } finally {
-    working.value = false;
-  }
-}
-
-watch(
-  () => props.site,
-  async () => {
-    await loadReaders();
-    await loadProfile();
-  },
-  { immediate: true },
-);
-
-/* Publish every change, including the seed above: a screen that had to fall
-   back to the first reader should leave the others agreeing with it. */
-watch(selectedReaderId, (value) => {
-  if (value) selectHidReader(props.site, value);
-});
-</script>
-
-<style scoped>
-.hid-profile-qr__header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.hid-profile-qr__title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.hid-profile-qr__card {
-  margin-top: 16px;
-  max-width: 460px;
-}
-
-.hid-profile-qr__reader {
-  margin: 0 0 14px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.hid-profile-qr__reader span {
-  display: block;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.hid-profile-qr__code {
-  display: grid;
-  place-items: center;
-  margin-bottom: 14px;
-}
-
-.hid-profile-qr__issued {
-  margin: 8px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.hid-profile-qr__state {
-  color: var(--muted);
-  font-size: 13.5px;
-  padding: 8px 0 14px;
-}
-
-.hid-profile-qr__actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-</style>

package/components/InventoryPoDialog.vue

@@ -1,111 +0,0 @@
-<template>
-  <v-dialog v-model="show" max-width="720" scrollable>
-    <v-card class="screen-modal">
-      <v-card-title class="d-flex align-center">
-        Check a purchase order
-        <v-spacer />
-        <v-btn icon="mdi-close" variant="text" class="screen-modal__close" aria-label="Close" @click="show = false" />
-      </v-card-title>
-
-      <v-card-text class="screen-modal__body">
-        <p class="text-body-2 text-medium-emphasis mb-3">
-          Type a PO number to see, for each item, how many were ordered, how many have arrived so far (over every delivery), and what is still to come.
-        </p>
-        <v-form class="d-flex ga-2 align-start mb-4" @submit.prevent="lookUp">
-          <v-text-field v-model="po" placeholder="e.g. PO-0412" density="comfortable" prepend-inner-icon="mdi-magnify" hide-details autofocus class="flex-grow-1" />
-          <v-btn type="submit" class="text-none screen-btn-primary" variant="flat" :loading="loading" :disabled="!po.trim()" style="height: 48px">Look up</v-btn>
-        </v-form>
-
-        <div v-if="error" class="text-body-2 text-error">{{ error }}</div>
-        <div v-else-if="result && !result.lines.length" class="text-center text-medium-emphasis py-6">
-          Nothing has been received against PO "{{ result.po }}" in this store yet. Check the number, or record the delivery with Receive Stock.
-        </div>
-
-        <template v-else-if="result">
-          <div class="text-subtitle-2 mb-2">PO {{ result.po }} — {{ result.lines.length }} item{{ result.lines.length === 1 ? "" : "s" }}</div>
-          <AppCard v-for="l in result.lines" :key="l.item" class="pa-3 mb-2">
-            <div class="d-flex flex-wrap align-center ga-2">
-              <div class="font-weight-medium">{{ l.itemName }}</div>
-              <v-spacer />
-              <v-chip size="small" variant="tonal" :color="chip(l).color">{{ chip(l).label }}</v-chip>
-            </div>
-            <div class="text-body-2 mt-1">{{ poLineText(l) }}</div>
-            <v-progress-linear
-              v-if="l.ordered"
-              :model-value="Math.min(100, (l.received / l.ordered) * 100)"
-              :color="chip(l).color"
-              height="6"
-              rounded
-              class="my-2"
-              :aria-label="`${l.received} of ${l.ordered} received`"
-            />
-            <div v-for="d in l.deliveries" :key="d._id" class="text-caption text-medium-emphasis">
-              {{ standardFormatDate(d.date) }} · {{ d.qty }} {{ l.unit }} · {{ deliveryText(d) }}
-            </div>
-          </AppCard>
-        </template>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-import useInventory from "../composables/useInventory";
-import useUtils from "../composables/useUtils";
-import { poLineText, receivingLabel } from "../utils/inventory-receiving";
-
-const show = defineModel<boolean>({ default: false });
-const props = defineProps({
-  store: { type: Object as PropType<TInventoryStore>, required: true },
-  /** Open straight on this PO (a PO number clicked in a report). */
-  initialPo: { type: String, default: "" },
-});
-
-const api = useInventory();
-const { standardFormatDate } = useUtils();
-
-const po = ref("");
-const loading = ref(false);
-const error = ref("");
-const result = ref<{ po: string; lines: TInventoryPoLine[] } | null>(null);
-
-const chip = (l: TInventoryPoLine) =>
-  l.ordered === null
-    ? { label: "Ordered qty not recorded", color: undefined }
-    : l.outstanding
-      ? { label: `${l.outstanding} to come`, color: "warning" }
-      : { label: "Complete", color: "success" };
-
-const deliveryText = (d: TInventoryPoLine["deliveries"][number]) =>
-  [
-    receivingLabel(d.receivingType),
-    d.doNumber ? `DO ${d.doNumber}${d.doDate ? ` (${standardFormatDate(d.doDate)})` : ""}` : "",
-    d.receiptNumber ? `Receipt ${d.receiptNumber}` : "",
-    d.supplier,
-    d.receivedBy ? `received by ${d.receivedBy}` : "",
-  ]
-    .filter(Boolean)
-    .join(" · ");
-
-async function lookUp() {
-  if (!po.value.trim()) return;
-  loading.value = true;
-  error.value = "";
-  try {
-    result.value = await api.getPurchaseOrder(props.store._id, po.value.trim());
-  } catch (e: any) {
-    result.value = null;
-    error.value = e?.data?.message || "Could not look up this PO. Please try again.";
-  } finally {
-    loading.value = false;
-  }
-}
-
-watch(show, (open) => {
-  if (!open) return;
-  po.value = props.initialPo;
-  result.value = null;
-  error.value = "";
-  if (po.value) lookUp();
-});
-</script>

package/components/VehicleQrStickerDialog.vue

@@ -1,249 +0,0 @@
-<template>
-  <v-dialog :model-value="modelValue" width="1100" scrollable persistent @update:model-value="close">
-    <v-card data-test="vehicle-qr-dialog">
-      <v-card-title class="d-flex align-center">
-        <v-icon class="mr-2">mdi-qrcode</v-icon>
-        {{ step === "select" ? "Print QR stickers" : "Check before printing" }}
-        <v-spacer />
-        <v-btn icon="mdi-close" variant="text" size="small" aria-label="Close" @click="close(false)" />
-      </v-card-title>
-
-      <v-card-text>
-        <v-alert v-if="error" type="error" variant="tonal" density="compact" class="mb-3">{{ error }}</v-alert>
-
-        <!-- Step 1: choose vehicles -->
-        <template v-if="step === 'select'">
-          <div class="d-flex flex-wrap align-center ga-2 mb-2">
-            <v-checkbox-btn :model-value="allOnPageTicked" :indeterminate="someOnPageTicked && !allOnPageTicked"
-              aria-label="Select all on this page" @update:model-value="(v: any) => tickGroup(plates.map((p) => p.id), !!v)" />
-            <span class="text-body-2">Select all on this page</span>
-            <v-spacer />
-            <v-btn variant="tonal" size="small" class="text-none" :loading="loadingAll" @click="loadAll">
-              Select all matching the current tab and search
-            </v-btn>
-          </div>
-          <v-table density="compact" fixed-header height="360">
-            <thead>
-              <tr><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Status</th></tr>
-            </thead>
-            <tbody>
-              <tr v-for="p in plates" :key="p.id">
-                <td><v-checkbox-btn :model-value="selected.includes(p.id)" :aria-label="`Select ${p.plateNumber}`"
-                    @update:model-value="(v: any) => tickGroup([p.id], !!v)" /></td>
-                <td>{{ p.unitLabel || "-" }}</td>
-                <td>{{ p.ownerName || "-" }}</td>
-                <td class="font-weight-bold">{{ p.plateNumber }}</td>
-                <td>{{ p.status || "-" }}</td>
-              </tr>
-              <tr v-if="!plates.length"><td colspan="5" class="text-center text-medium-emphasis py-6">No vehicles to list</td></tr>
-            </tbody>
-          </v-table>
-          <p class="text-caption text-medium-emphasis mt-2 mb-0">
-            Up to {{ STICKER_MAX_PER_REQUEST }} stickers at a time. Ticked: {{ selected.length }}.
-          </p>
-        </template>
-
-        <!-- Step 2: review + preview -->
-        <template v-else>
-          <v-alert v-if="missing.length" type="warning" variant="tonal" density="compact" class="mb-3">
-            {{ missing.length }} vehicle(s) could not be found and were skipped.
-          </v-alert>
-          <v-alert v-if="dropped" type="info" variant="tonal" density="compact" class="mb-3">
-            {{ dropped }} more vehicle(s) were over the {{ STICKER_MAX_PER_REQUEST }} limit - print again for the rest.
-          </v-alert>
-          <v-table density="compact" fixed-header height="220">
-            <thead>
-              <tr><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Check</th></tr>
-            </thead>
-            <tbody>
-              <tr v-for="it in items" :key="it.vehicleId">
-                <td><v-checkbox-btn :model-value="ticked.includes(it.vehicleId)" :aria-label="`Print ${it.plateNumber}`"
-                    @update:model-value="(v: any) => (ticked = setIds(ticked, [it.vehicleId], !!v))" /></td>
-                <td>{{ installerLine(it).place || "-" }}</td>
-                <td>{{ installerLine(it).owner || "-" }}</td>
-                <td class="font-weight-bold">{{ it.plateNumber }}</td>
-                <td>
-                  <v-chip v-if="stickerWarning(it.status)" size="small" variant="tonal"
-                    :color="stickerWarning(it.status)!.level" prepend-icon="mdi-alert">
-                    {{ stickerWarning(it.status)!.text }}
-                  </v-chip>
-                  <span v-else class="text-medium-emphasis">OK</span>
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-          <p class="text-caption text-medium-emphasis my-2">
-            Expired, blocklisted and inactive vehicles start unticked. Each sticker has a cut-off strip under the
-            dashed line saying which unit and owner it is for - cut it off before pasting the sticker on the car.
-          </p>
-          <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview" />
-        </template>
-      </v-card-text>
-
-      <v-card-actions>
-        <v-btn v-if="step === 'review' && !fromReissue" variant="text" class="text-none" @click="step = 'select'">Back</v-btn>
-        <v-spacer />
-        <v-btn variant="text" class="text-none" @click="close(false)">Cancel</v-btn>
-        <v-btn v-if="step === 'select'" color="primary" variant="flat" class="text-none" :disabled="!selected.length"
-          :loading="loading" @click="goReview">
-          Preview {{ selected.length }} sticker{{ selected.length === 1 ? "" : "s" }}
-        </v-btn>
-        <v-btn v-else color="primary" variant="flat" class="text-none" prepend-icon="mdi-printer"
-          :disabled="!ticked.length || !docHtml" @click="print">
-          Print {{ ticked.length }} sticker{{ ticked.length === 1 ? "" : "s" }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script lang="ts" setup>
-import QRCode from "qrcode";
-import useVehicle from "../composables/useVehicle";
-import { errorConverter } from "../utils/data";
-import {
-  STICKER_MAX_PER_REQUEST,
-  buildStickerDocument,
-  defaultPlateIds,
-  defaultStickerIds,
-  idsForRequest,
-  installerLine,
-  setIds,
-  stickerPlateRows,
-  stickerWarning,
-  type StickerItem,
-  type StickerPlateRow,
-} from "../utils/vehicle-qr-sticker";
-
-const props = defineProps({
-  modelValue: { type: Boolean, default: false },
-  site: { type: String, required: true },
-  /** The list's rows on the current page. */
-  rows: { type: Array as PropType<Array<Record<string, any>>>, default: () => [] },
-  /** The list's current tab and search, used by "select all matching". */
-  view: { type: String, default: "" },
-  search: { type: String, default: "" },
-  /** Vehicle ids to go straight to review with (a re-issued sticker). */
-  vehicleIds: { type: Array as PropType<string[]>, default: () => [] },
-});
-const emit = defineEmits(["update:modelValue"]);
-
-const { getVehicles, getVehicleQrStickers } = useVehicle();
-
-const step = ref<"select" | "review">("select");
-const plates = ref<StickerPlateRow[]>([]);
-const selected = ref<string[]>([]);
-const items = ref<StickerItem[]>([]);
-const ticked = ref<string[]>([]);
-const missing = ref<string[]>([]);
-const dropped = ref(0);
-const loading = ref(false);
-const loadingAll = ref(false);
-const error = ref("");
-const docHtml = ref("");
-const frame = ref<HTMLIFrameElement | null>(null);
-const fromReissue = computed(() => props.vehicleIds.length > 0);
-
-const allOnPageTicked = computed(() => plates.value.length > 0 && plates.value.every((p) => selected.value.includes(p.id)));
-const someOnPageTicked = computed(() => plates.value.some((p) => selected.value.includes(p.id)));
-
-function tickGroup(ids: string[], on: boolean) {
-  selected.value = setIds(selected.value, ids, on);
-}
-
-function close(value: boolean) {
-  emit("update:modelValue", value);
-}
-
-watch(
-  () => props.modelValue,
-  async (open) => {
-    if (!open) return;
-    error.value = "";
-    items.value = [];
-    docHtml.value = "";
-    step.value = "select";
-    plates.value = stickerPlateRows(props.rows);
-    selected.value = defaultPlateIds(plates.value);
-    if (props.vehicleIds.length) {
-      selected.value = [...props.vehicleIds];
-      await goReview();
-    }
-  },
-  { immediate: true },
-);
-
-/** Every page of the current tab + search, up to the per-request cap. */
-async function loadAll() {
-  loadingAll.value = true;
-  error.value = "";
-  try {
-    const all: Array<Record<string, any>> = [];
-    let page = 1;
-    let pages = 1;
-    do {
-      const res: any = await getVehicles({ page, limit: 100, search: props.search, view: props.view, site: props.site });
-      all.push(...(res?.items ?? []));
-      pages = res?.pages || 1;
-      page += 1;
-    } while (page <= pages && stickerPlateRows(all).length < STICKER_MAX_PER_REQUEST);
-    plates.value = stickerPlateRows(all);
-    selected.value = defaultPlateIds(plates.value);
-  } catch (e: any) {
-    error.value = errorConverter(e);
-  } finally {
-    loadingAll.value = false;
-  }
-}
-
-async function goReview() {
-  loading.value = true;
-  error.value = "";
-  try {
-    const { ids, dropped: over } = idsForRequest(selected.value);
-    const res = await getVehicleQrStickers(props.site, ids);
-    items.value = (res?.items ?? []) as StickerItem[];
-    missing.value = res?.missing ?? [];
-    dropped.value = over;
-    ticked.value = defaultStickerIds(items.value);
-    step.value = "review";
-  } catch (e: any) {
-    error.value = errorConverter(e);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// The same document is the preview and the print job. Error correction Q and a
-// 4-module quiet zone; the QR is drawn at 32 mm so it scans from arm's length.
-let renderToken = 0;
-watch([items, ticked], async () => {
-  const mine = ++renderToken;
-  const chosen = items.value.filter((i) => ticked.value.includes(i.vehicleId));
-  if (!chosen.length) {
-    docHtml.value = "";
-    return;
-  }
-  const svgs = await Promise.all(
-    chosen.map((i) => QRCode.toString(i.qr, { type: "svg", errorCorrectionLevel: "Q", margin: 4 })),
-  );
-  if (mine === renderToken) docHtml.value = buildStickerDocument(chosen, svgs);
-});
-
-function print() {
-  const win = frame.value?.contentWindow;
-  if (!win) return;
-  win.focus();
-  win.print();
-}
-</script>
-
-<style scoped>
-.sticker-preview {
-  width: 100%;
-  height: 460px;
-  border: 1px solid var(--v-border-color, #ccc);
-  border-radius: 8px;
-  background: #e9e9e9;
-}
-</style>