@7365admin1/layer-common 3.2.2-staging.118 → 3.2.2-staging.121

package/assets/css/primitives.css

@@ -41,6 +41,57 @@
   font-family: var(--font-sans);
 }
 
+/**
+ * ...and the places Vuetify hard-codes Roboto, which BEAT the rule above
+ * because they name the element rather than inherit into it. In
+ * vuetify 3.12 that is exactly 81 declarations, in three files:
+ *
+ *   main.css   `html` (1) and the typography utilities .text-h1 ...
+ *              .text-overline (13), each repeated for the five responsive
+ *              breakpoints .text-sm-* ... .text-xxl-* (65) = 79
+ *   VBadge.css `.v-badge__badge`
+ *   VKbd.css   `.v-kbd`
+ *
+ * None of them carries `!important`, so specificity alone re-points them:
+ * `:root` (0,1,0) beats `html` (0,0,1), and a descendant of `.v-application`
+ * (0,2,0) beats a bare `.text-h1` (0,1,0). No `!important` here either -
+ * a screen that wants a different face must still be able to say so.
+ *
+ * This lives HERE, once, and not in each of the eleven apps: the utilities
+ * are Vuetify's, the token is this layer's, and a per-app copy would drift.
+ *
+ * The var() fallback keeps Vuetify's own stack if a build ever resolves a
+ * pre-redesign layer-common in which `--font-sans` does not exist.
+ */
+:root {
+  font-family: var(--font-sans, Roboto, sans-serif);
+}
+
+.v-application
+  :is(
+    [class*="text-h"],
+    [class*="text-subtitle"],
+    [class*="text-body"],
+    [class*="text-button"],
+    [class*="text-caption"],
+    [class*="text-overline"],
+    .v-badge__badge,
+    .v-kbd
+  ),
+.v-overlay-container
+  :is(
+    [class*="text-h"],
+    [class*="text-subtitle"],
+    [class*="text-body"],
+    [class*="text-button"],
+    [class*="text-caption"],
+    [class*="text-overline"],
+    .v-badge__badge,
+    .v-kbd
+  ) {
+  font-family: var(--font-sans, Roboto, sans-serif);
+}
+
 /* ------------------------------------------------------------------ */
 /* PageHeader - the row every screen opens with.                       */
 /* ------------------------------------------------------------------ */
@@ -398,6 +449,23 @@
   opacity: 1;
 }
 
+/* The `trailing` slot's control - same muted weight as the leading icon, so a
+   reveal toggle reads as field chrome rather than as a second action. */
+.app-field__trailing {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.app-field__trailing:hover {
+  color: var(--text2);
+}
+
 /* A `<select>` keeps the native menu; only the chrome is ours. */
 select.app-field__input {
   font-weight: 600;
@@ -574,6 +642,106 @@ select.app-field__input {
   color: var(--on-accent-strong);
 }
 
+/* ------------------------------------------------------------------ */
+/* Switch - the settings toggle.                                       */
+/* ------------------------------------------------------------------ */
+
+/**
+ * THE DESIGN'S TOGGLE, WRITTEN ONCE.
+ *
+ * The handoff draws it on the Settings screen's ANPR Camera section and then
+ * says, in the prototype's own words, that every other module's
+ * "toggles, form fields and tables use the same styling as the ANPR Camera
+ * section" - so this IS the spec for the HID panels, not an interpretation:
+ *
+ *   track  38x22, `border-radius:999px`; ON `var(--accent)`, OFF `var(--hover)`
+ *   thumb  18x18 circle at `top:2px`; ON `left:18px` `#ffffff`,
+ *                                     OFF `left:2px`  `var(--muted)`
+ *   label  13.5px/700; the OFF label is `var(--text2)`
+ *
+ * `--toggle-w` / `--toggle-h` were put in `tokens.css` in Phase 1 for exactly
+ * this and had no rule to serve until now.
+ *
+ * Vuetify slides `.v-selection-control__input` and leaves the thumb static
+ * inside it; the design slides the THUMB inside a fixed track. So the input's
+ * transform is reset and the thumb is positioned directly - otherwise the two
+ * movements compound and the knob leaves the track.
+ *
+ * Three HID panels each carried their own copy of this with hardcoded hexes
+ * (`#8b9297` / `#2eaf55` / `#e0e0e0`), which is why a disabled toggle read as
+ * light grey on the dark theme's dark card. One rule, both themes, no hex.
+ */
+.app-switch .v-selection-control__wrapper {
+  position: relative;
+  flex: 0 0 auto;
+  width: var(--toggle-w);
+  height: var(--toggle-h);
+}
+
+.app-switch .v-switch__track {
+  position: absolute;
+  inset: 0;
+  width: var(--toggle-w);
+  height: var(--toggle-h);
+  border-radius: var(--r-pill);
+  background: var(--hover);
+  opacity: 1;
+  transition: background var(--motion);
+}
+
+.app-switch .v-selection-control--dirty .v-switch__track {
+  background: var(--accent);
+}
+
+.app-switch .v-selection-control__input {
+  position: absolute;
+  inset: 0;
+  width: var(--toggle-w);
+  height: var(--toggle-h);
+  /* Vuetify's own slide. The design moves the thumb, not this box. */
+  transform: none;
+}
+
+/* The 40px hover/ripple disc is bigger than the whole control in this shape. */
+.app-switch .v-selection-control__input::before,
+.app-switch .v-selection-control__input .v-ripple__container {
+  display: none;
+}
+
+.app-switch .v-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--muted);
+  box-shadow: none;
+  transition: left var(--motion), background var(--motion);
+}
+
+.app-switch .v-selection-control--dirty .v-switch__thumb {
+  left: 18px;
+  background: #ffffff;
+}
+
+.app-switch .v-label {
+  padding-inline-start: 12px;
+  color: var(--text2);
+  font-family: var(--font-sans);
+  font-size: 13.5px;
+  font-weight: 700;
+  opacity: 1;
+}
+
+.app-switch .v-selection-control--dirty .v-label {
+  color: var(--text);
+}
+
+.app-switch.v-input--disabled {
+  opacity: 0.55;
+}
+
 /* ------------------------------------------------------------------ */
 /* KpiTile - the dashboard's headline figure.                          */
 /* ------------------------------------------------------------------ */

package/assets/css/screens.css

@@ -360,6 +360,19 @@
   color: var(--on-accent-strong);
 }
 
+/*
+ * `min-width: 0` above is what lets a button shrink to its label, and it is
+ * one class more specific than Vuetify's `.v-btn--block { min-width: 100% }` -
+ * so it silently CANCELLED `block`. Measured on the ten create/edit forms:
+ * a `block` Cancel sat 80.8px wide inside a 672px half-column instead of
+ * filling it, on every width and both themes. Restoring it needs the block
+ * class named, so this reaches only the buttons that asked to be full width.
+ */
+.v-btn.v-btn--block.screen-btn-primary,
+.v-btn.v-btn--block.screen-btn-ghost {
+  min-width: 100%;
+}
+
 /* Vuetify paints `variant="tonal"` with an overlay layer ABOVE the button's own
    background, so without this the accent fill shows through a wash. */
 .screen-btn-primary .v-btn__overlay,
@@ -534,6 +547,11 @@
 /* The header row and the rows under it.                               */
 /* ------------------------------------------------------------------ */
 
+/**
+ * `padding: 12px 20px`, not 10px - read off the prototype's own header row,
+ * which is `padding:12px 20px;font-size:11px;font-weight:800;letter-spacing:
+ * .07em;text-transform:uppercase;color:var(--muted);background:var(--thead)`.
+ */
 .table-card thead th {
   background: var(--thead) !important;
   color: var(--muted) !important;
@@ -541,21 +559,78 @@
   font-weight: var(--fw-table-head) !important;
   letter-spacing: var(--ls-table-head);
   text-transform: uppercase;
-  padding: 10px var(--cellpad-x) !important;
+  padding: 12px var(--cellpad-x) !important;
   height: auto !important;
   border-bottom: 1px solid var(--border) !important;
   white-space: nowrap;
 }
 
+/**
+ * ROW HEIGHT IS THE LINE BOX, NOT THE PADDING.
+ *
+ * The padding was already the design's `15px 20px`, and the type was already
+ * `13.5px / 600` - measured, both correct. The row was still too tall, because
+ * Vuetify puts `line-height: 1.5` on a cell: a 20.25px line box around 13.5px
+ * type, which makes a text-only row 51.25px.
+ *
+ * The prototype sets NO line-height at all, so its rows draw at the font's own
+ * normal leading - so this sets `normal` rather than a number, which is the
+ * same thing said out loud. Measured: a text-only row is then exactly 49.0px,
+ * the design's figure, and a row carrying a chip or the design's 26-28px avatar
+ * grows past it on its own - which is where the design's taller rows come from.
+ * Height follows content, exactly as the prototype does it, and is pinned to
+ * nothing.
+ */
 .table-card tbody td {
   font-size: var(--fs-cell);
   font-weight: var(--fw-cell);
   color: var(--text);
   padding: var(--cellpad) var(--cellpad-x) !important;
   height: auto !important;
+  /* `!important` for the same reason the padding needs it: Vuetify's own rule
+     is five levels of descendant, which no two-class selector can outrank. */
+  line-height: normal !important;
   font-variant-numeric: tabular-nums;
 }
 
+/**
+ * The design bolds the name column. Every table in the prototype that leads
+ * with a name draws it `font-weight:700` against the row's own 600 - it is what
+ * makes a row scannable, and it was missing from every table here.
+ *
+ * `:first-child` rather than a prop: the caller's own `headers` decide what the
+ * first column is, so no caller changes and no new API. A cell whose CONTENT
+ * sets its own weight - a chip, a link, an avatar block - still wins, because
+ * this only sets what the cell's children inherit.
+ */
+.table-card tbody td:first-child {
+  font-weight: 700;
+}
+
+/**
+ * THE DESIGN'S FIXED COLUMN PROPORTIONS - opt-in, because they cannot be
+ * derived. The prototype lays every table out as a CSS grid with a per-table
+ * `grid-template-columns` (`0.9fr 1.5fr 1.7fr 0.8fr 1fr 1.1fr` on Feedbacks,
+ * `2fr 1fr 1fr` on Units, and so on). Those proportions are a design decision
+ * per screen; nothing in a caller's `headers` array says what they should be,
+ * so a shared component cannot invent them.
+ *
+ * What `TableMain` can do is honour them when a caller states them: a `weight`
+ * on a header becomes that column's share, and only then does the table switch
+ * to `table-layout: fixed` so the widths are obeyed rather than treated as
+ * hints. A caller that sets no weights gets exactly today's automatic layout.
+ */
+.table-card .table-card__fixed table {
+  table-layout: fixed;
+}
+
+/* Fixed layout means a long value can no longer widen its column, so it has to
+   be told what to do instead of overflowing the cell. */
+.table-card .table-card__fixed tbody td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .table-card tbody tr:hover > td {
   background: var(--hover);
 }

package/components/AccessCard/AvailableStats.vue

@@ -1,24 +1,32 @@
 <template>
   <v-row no-gutters align="center" style="gap: 8px">
     <span class="text-caption text-medium-emphasis mr-1">Available:</span>
-    <v-chip
-      size="small"
-      variant="tonal"
-      color="primary"
-      prepend-icon="mdi-card-account-details"
-      :loading="loading"
-    >
+    <!--
+      These were `v-chip variant="tonal"` on Vuetify's `primary` / `secondary`.
+      `secondary` is never defined in this layer's theme, so the QR chip was
+      painting itself Vuetify's BUILT-IN default `#48a9a6` - a colour the design
+      never chose, and one that measures 2.58:1 on the page background.
+
+      `StatusChip`'s `tone` prop is the documented route for a chip that is a
+      COUNT rather than a status word: the screen has already worked out the
+      meaning and only needs the design's tone.
+
+      Both take `neutral`, and that is the design system's own rule rather than
+      a preference - `utils/status.ts`: a value the design never named must NOT
+      be guessed into a colour. The handoff draws no "available cards" stat, so
+      neither count has a colour of its own to honour. They are told apart by
+      their icon and label. `info` was measured here too and reads 3.88:1 on
+      the page background, which would have ADDED a sub-AA pair to buy a
+      distinction the design never asked for.
+    -->
+    <StatusChip tone="neutral" pill :dot="false">
+      <v-icon icon="mdi-card-account-details" size="14" />
       NFC: <strong class="ml-1">{{ availablePhysical }}</strong>
-    </v-chip>
-    <v-chip
-      size="small"
-      variant="tonal"
-      color="secondary"
-      prepend-icon="mdi-qrcode"
-      :loading="loading"
-    >
+    </StatusChip>
+    <StatusChip tone="neutral" pill :dot="false">
+      <v-icon icon="mdi-qrcode" size="14" />
       QR Code: <strong class="ml-1">{{ availableNonPhysical }}</strong>
-    </v-chip>
+    </StatusChip>
   </v-row>
 </template>
 

package/components/AddPassKeyToVisitor.vue

@@ -1,24 +1,21 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
-      <v-row
-        no-gutters
-        class="fill-height px-6 d-flex justify-space-between align-center"
-        align="center"
-      >
-        <span class="font-weight-bold text-subtitle-1"
-          >{{ isEditMode ? "Edit" : "Assign" }} Pass &amp; Keys</span
-        >
-        <ButtonClose @click="emit('close')" />
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text>
-      <v-row no-gutters class="ga-1">
+  <v-card width="100%" class="screen-modal passkey" :loading="processing">
+    <div class="passkey__head">
+      <v-card-title>{{ isEditMode ? "Edit" : "Assign" }} Pass &amp; Keys</v-card-title>
+      <AppButton
+        variant="icon"
+        icon="mdi-close"
+        aria-label="Close"
+        @click="emit('close')"
+      />
+    </div>
+
+    <div class="screen-modal__body passkey__body">
+      <!-- `.filter-field` is the design's input, and it is a descendant
+           selector, so both autocompletes get it from this one class. -->
+      <v-row no-gutters class="ga-1 filter-field">
         <v-col cols="12">
-          <span class="text-subtitle-2 text-medium-emphasis">
-            Name: {{ prop.visitor.name }}
-          </span>
+          <span class="passkey__name">Name: {{ prop.visitor.name }}</span>
         </v-col>
 
         <!-- Pass section -->
@@ -27,15 +24,11 @@
 
           <!-- Existing pass -->
           <div v-if="existingPass" class="d-flex align-center ga-2 mb-2">
-            <v-chip
-              prepend-icon="mdi-card-bulleted-outline"
-              color="blue"
-              variant="tonal"
-              size="small"
-            >
+            <StatusChip tone="info" :dot="false">
+              <v-icon icon="mdi-card-bulleted-outline" size="13" />
               {{ existingPass.prefixAndName }}
-            </v-chip>
-            <span class="text-caption text-medium-emphasis">(current)</span>
+            </StatusChip>
+            <span class="passkey__current">(current)</span>
           </div>
 
           <!-- New pass selector -->
@@ -79,21 +72,26 @@
             v-if="existingKeys.length > 0"
             class="d-flex flex-wrap ga-1 mb-2"
           >
-            <v-chip
+            <!-- The design's tag chip, keeping the remove control the product
+                 already had: the tone and the shape are the shared ones, only
+                 the close button is drawn inside rather than by Vuetify. -->
+            <StatusChip
               v-for="key in existingKeys.filter((k) => k.status != 'Removed')"
               :key="key.keyId"
-              prepend-icon="mdi-key"
-              color="orange"
-              variant="tonal"
-              size="small"
-              closable
-              @click:close="removeExistingKey(key)"
+              tone="warn"
+              :dot="false"
             >
+              <v-icon icon="mdi-key" size="13" />
               {{ key.prefixAndName }}
-            </v-chip>
-            <span class="text-caption text-medium-emphasis align-self-center">
-              (current)
-            </span>
+              <button
+                class="passkey__remove"
+                :aria-label="`Remove ${key.prefixAndName}`"
+                @click="removeExistingKey(key)"
+              >
+                <v-icon icon="mdi-close-circle" size="14" />
+              </button>
+            </StatusChip>
+            <span class="passkey__current align-self-center">(current)</span>
           </div>
 
           <!-- New keys selector -->
@@ -132,41 +130,16 @@
       </v-row>
 
       <v-row v-if="errorMessage" no-gutters class="mt-2">
-        <p class="text-error text-subtitle-2 w-100 text-center">
-          {{ errorMessage }}
-        </p>
-      </v-row>
-    </v-card-text>
-
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            text="Cancel"
-            @click="emit('close')"
-          />
-        </v-col>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :text="isEditMode ? 'Save' : 'Assign'"
-            :disabled="!canSubmit"
-            :loading="processing"
-            @click="handleSubmit"
-          />
-        </v-col>
+        <p class="passkey__error">{{ errorMessage }}</p>
       </v-row>
-    </v-toolbar>
+    </div>
+
+    <div class="passkey__footer">
+      <AppButton variant="ghost" @click="emit('close')">Cancel</AppButton>
+      <AppButton :disabled="!canSubmit" @click="handleSubmit">
+        {{ isEditMode ? "Save" : "Assign" }}
+      </AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -448,4 +421,53 @@ async function handleSubmit() {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.passkey__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.passkey__body {
+  padding: 4px 20px 0;
+}
+
+.passkey__name,
+.passkey__current {
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+.passkey__error {
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  font-size: var(--fs-cell);
+  color: var(--err);
+}
+
+/* The chip's own remove control - `currentColor`, so it stays on whatever
+   tone the chip carries rather than picking a second colour. */
+.passkey__remove {
+  display: inline-flex;
+  margin-left: 2px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.75;
+}
+
+.passkey__remove:hover {
+  opacity: 1;
+}
+
+.passkey__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/AppDateField.vue

@@ -7,11 +7,12 @@
   accessible and free.
 -->
 <template>
-  <label class="app-field" :class="{ 'app-field--compact': compact }">
+  <label v-bind="rootAttrs" class="app-field" :class="{ 'app-field--compact': compact }">
     <v-icon class="app-field__icon" icon="mdi-calendar-month-outline" size="17" />
     <span v-if="label" class="app-field__label">{{ label }}</span>
     <input
       class="app-field__input"
+      v-bind="inputAttrs"
       type="date"
       :value="model"
       :min="min || undefined"
@@ -23,6 +24,19 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+/** Same split as `AppField`, and for the same reason: the root is a `<label>`,
+    so an `aria-label` left to fall through would never reach the input. */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const rootAttrs = computed(() => ({ class: attrs.class, style: attrs.style }));
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs;
+  return rest;
+});
+
 const model = defineModel({ type: String, default: "" });
 
 defineProps({

package/components/AppField.vue

@@ -8,6 +8,7 @@
 -->
 <template>
   <label
+    v-bind="rootAttrs"
     class="app-field"
     :class="[{ 'app-field--compact': compact, 'app-field--search': search }, klass]"
   >
@@ -20,6 +21,7 @@
     <span v-if="label" class="app-field__label">{{ label }}</span>
     <input
       class="app-field__input"
+      v-bind="inputAttrs"
       :type="type"
       :value="model"
       :placeholder="placeholder"
@@ -27,10 +29,33 @@
       :readonly="readonly"
       @input="model = ($event.target as HTMLInputElement).value"
     />
+    <!-- A trailing control INSIDE the box: the password reveal on the HID PIN,
+         SIP password and reader password fields. The handoff draws no password
+         field at all, so the eye is this product's, not the design's - but it
+         belongs in one place rather than being re-hacked in three screens. -->
+    <slot name="trailing" />
   </label>
 </template>
 
 <script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+/**
+ * The root is a `<label>`, so an `aria-label`, `inputmode` or `autocomplete`
+ * left to fall through would land on the LABEL and never reach the input -
+ * silently costing the field its accessible name. `class` and `style` still
+ * belong on the root (that is what every existing caller styles), so the two
+ * are split rather than moved wholesale.
+ */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const rootAttrs = computed(() => ({ class: attrs.class, style: attrs.style }));
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs;
+  return rest;
+});
+
 const model = defineModel({ type: String, default: "" });
 
 defineProps({

package/components/BuildingUnitFormEdit.vue

@@ -263,8 +263,12 @@
 
         <v-col v-if="canUpdateUnit || canDeleteUnit" cols="6" class="pa-0">
           <v-menu>
+            <!-- Was `color="black"`: a fixed slab that stayed black on the dark
+                 card. `primary-button` is the theme's FILL token, and its pair
+                 `on-primary-button` supplies the white label - unlike
+                 `primary`, which is a FOREGROUND here. -->
             <template #activator="{ props }">
-              <v-btn block variant="flat" color="black" class="text-none" height="48" v-bind="props" tile
+              <v-btn block variant="flat" color="primary-button" class="text-none" height="48" v-bind="props" tile
                 :disabled="!canUpdateUnit && !canDeleteUnit">
                 More actions
               </v-btn>

package/components/Card/DeleteConfirmation.vue

@@ -6,9 +6,12 @@
             <!-- `text-error` is Vuetify's own class over `--v-theme-error`,
                  which is the design's `--err` in both themes - already a token,
                  so it stays. -->
-            <span v-if="message" class="text-error mt-2">
+            <!-- A `div`, as in the Dialog/ twin: on an inline `span` the `mt-2`
+                 does nothing and the warning ran straight into the title with
+                 no space - "delete this?This removes the record...". -->
+            <div v-if="message" class="text-error mt-2">
                 {{ message }} Do you want to delete anyway?
-            </span>
+            </div>
         </v-card-text>
 
         <!-- The design's footer: two equal-width buttons, ghost then primary,