@7365admin1/layer-common 3.2.2-staging.141 → 3.2.2-staging.143

package/assets/css/screens.css

@@ -807,3 +807,170 @@
 .screen-back:hover {
   color: var(--accent);
 }
+
+/* ------------------------------------------------------------------ */
+/* 9. The row kebab and the dropdown it opens.                         */
+/*                                                                     */
+/* Both halves are LITERAL, and both were previously left as Vuetify   */
+/* draws them - `Dialog/UpdateMoreAction.vue` says so in a comment,    */
+/* because a menu teleports out of the measured container and could    */
+/* not be render-verified at the time. It can now (force-shot).        */
+/*                                                                     */
+/* The kebab: `iService365 Redesign.dc.html:494`, drawn identically at */
+/* 494, 547, 625 and 660 - a 30px bordered square, 8px radius,         */
+/* transparent fill, `--muted` ink, 17px glyph, `--hover` on hover.    */
+/* 8px is not one of the radius tokens (the set is 7/9/10/12/14/16),   */
+/* so it is written literally rather than snapped to a near token.     */
+/*                                                                     */
+/* The panel: `iService365 Redesign.dc.html:79-90`, the profile        */
+/* dropdown - the only dropdown the handoff draws. 240px, `--card` on  */
+/* a 1px `--border`, 14px radius, `--shadow-menu`, 8px padding; rows   */
+/* are 13px/700 `--text2` at 10px 12px with a 10px radius, and a       */
+/* destructive row is `--err` ink with an `--err-bg` hover (line 89),  */
+/* which is ink and not a filled button.                               */
+/* ------------------------------------------------------------------ */
+.v-btn.screen-kebab {
+  --v-btn-height: 30px;
+  height: 30px;
+  width: 30px;
+  min-width: 30px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.screen-kebab .v-btn__overlay {
+  opacity: 0;
+}
+
+.screen-kebab:hover {
+  background: var(--hover);
+}
+
+.screen-kebab .v-icon {
+  font-size: 17px;
+}
+
+.v-overlay__content > .v-list.screen-menu {
+  width: 240px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-menu);
+  background: var(--card);
+  box-shadow: var(--shadow-menu);
+}
+
+/* Four classes, to beat Vuetify's own `.v-list .v-list-item--density-*`      */
+/* block on specificity rather than on load order - a three-class rule ties   */
+/* with it and loses, which is how the drawer's 10px gap never applied.       */
+.v-overlay__content > .v-list.screen-menu > .screen-menu__item.v-list-item {
+  min-height: 0;
+  padding: 10px 12px;
+  /* MEASURED, not assumed: without `!important` this read back 0px. Vuetify
+     puts the `rounded-0` UTILITY on every `v-list-item` inside a list with no
+     `rounded` prop, and utilities carry `!important`, so a four-class rule
+     still loses to it. Same trap `NavigationItem.vue` hit in batch Q. */
+  border-radius: var(--r-inner) !important;
+  color: var(--text2);
+}
+
+.screen-menu__item .v-list-item-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-nav);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  line-height: 1.3;
+}
+
+.screen-menu__item .v-list-item__prepend > .v-icon {
+  font-size: 18px;
+  color: var(--muted);
+  opacity: 1;
+}
+
+/* The design's row gap is 10px; Vuetify's spacer is wider, and the selector  */
+/* below matches its own four-class shape for the same reason as above.       */
+.screen-menu__item .v-list-item__prepend > .v-icon ~ .v-list-item__spacer {
+  width: 10px;
+}
+
+.screen-menu__item:hover > .v-list-item__overlay {
+  opacity: 0;
+}
+
+.screen-menu__item:hover {
+  background: var(--hover);
+}
+
+.v-overlay__content > .v-list.screen-menu > .screen-menu__item--danger.v-list-item {
+  color: var(--err);
+}
+
+.screen-menu__item--danger .v-list-item__prepend > .v-icon {
+  color: var(--err);
+}
+
+.screen-menu__item--danger:hover {
+  background: var(--err-bg);
+}
+
+/* ------------------------------------------------------------------ */
+/* SIGNATURE PAD - `SignaturePad.vue`.                                 */
+/*                                                                     */
+/* DESIGN GAP, STATED: the handoff draws no signature pad and contains */
+/* no dashed border anywhere, so everything below is the established   */
+/* primitives and tokens, not a handoff literal. The one value taken   */
+/* from the handoff is the caption pair at line 659 - 12.5px / 600.    */
+/*                                                                     */
+/* THE PAD IS PAPER AND STAYS LIGHT IN BOTH THEMES, DELIBERATELY.      */
+/* The canvas ink is `#111` and `stop()` exports the drawing as a PNG  */
+/* that callers render back on light surfaces and print. A `--card`    */
+/* pad would be dark in the dark theme, so the signature would be      */
+/* black-on-black on the pad AND the exported PNG would be a black     */
+/* scrawl on transparency. The three literals here are the LIGHT theme */
+/* values of `--card`, `--border` and `--muted`, named so nobody has   */
+/* to guess where they came from.                                      */
+/* ------------------------------------------------------------------ */
+.screen-signpad {
+  position: relative;
+  overflow: hidden;
+  /* Light `--muted` at 55% - NOT `--border`. A drop zone's dashed edge is an
+     affordance and has to be seen; `--border` (rgb 232,232,225) on a white pad
+     is all but invisible, which the first render showed. This lands on the same
+     weight as the `#bbb` it replaces, from a token value rather than a hex. */
+  border: 1.5px dashed rgba(139, 143, 152, 0.55);
+  border-radius: var(--r-inner);
+  background: rgb(255, 255, 255); /* light `--card` */
+}
+
+.screen-signpad__canvas {
+  display: block;
+  width: 100%;
+  height: 130px;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.screen-signpad__hint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: rgb(139, 143, 152); /* light `--muted` - the pad is paper */
+}
+
+.screen-signpad__label {
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: var(--muted);
+}

package/components/PlanActionsMenu.vue

@@ -1,22 +1,32 @@
 <template>
+  <!-- The per-row kebab and its dropdown. Both were Vuetify defaults: a text
+       icon button with no border, and a plain `v-list` panel at Vuetify's 4px
+       radius with no border at all. The design draws both - the kebab at
+       `iService365 Redesign.dc.html:494`, the dropdown at lines 79-90 - and
+       `.screen-kebab` / `.screen-menu` in `screens.css` carry those values. -->
   <v-menu location="bottom end">
     <template #activator="{ props }">
       <v-btn
         v-bind="props"
         icon="mdi-dots-vertical"
         variant="text"
-        density="comfortable"
+        class="screen-kebab"
       />
     </template>
 
-    <v-list density="compact">
+    <v-list class="screen-menu" density="compact">
       <v-list-item
+        class="screen-menu__item"
         prepend-icon="mdi-pencil-outline"
         title="Edit plan"
         @click="$emit('edit')"
       />
 
+      <!-- Deactivating a plan is the destructive action, so it takes the
+           handoff's destructive row treatment (line 89): `--err` ink over an
+           `--err-bg` hover, not a filled red button. -->
       <v-list-item
+        class="screen-menu__item screen-menu__item--danger"
         prepend-icon="mdi-close-circle-outline"
         title="Deactivate"
         @click="$emit('deactivate')"

package/components/SignaturePad.vue

@@ -1,25 +1,11 @@
 <template>
   <div>
-    <div
-      style="
-        position: relative;
-        border: 1.5px dashed #bbb;
-        border-radius: 6px;
-        background: #fafafa;
-        overflow: hidden;
-      "
-    >
+    <div class="screen-signpad">
       <canvas
         ref="canvasRef"
         :width="W"
         :height="H"
-        style="
-          display: block;
-          width: 100%;
-          height: 130px;
-          cursor: crosshair;
-          touch-action: none;
-        "
+        class="screen-signpad__canvas"
         @mousedown="startMouse"
         @mousemove="moveMouse"
         @mouseup="stop"
@@ -28,23 +14,13 @@
         @touchmove.prevent="moveTouch"
         @touchend="stop"
       />
-      <div
-        v-if="isEmpty"
-        style="
-          position: absolute;
-          inset: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          pointer-events: none;
-        "
-      >
-        <span class="text-caption text-disabled">Draw your signature here</span>
+      <div v-if="isEmpty" class="screen-signpad__hint">
+        Draw your signature here
       </div>
     </div>
 
     <v-row no-gutters align="center" class="mt-1" style="min-height: 28px">
-      <span class="text-caption text-medium-emphasis">{{ label }}</span>
+      <span class="screen-signpad__label">{{ label }}</span>
       <v-spacer />
       <v-btn
         v-if="!isEmpty"

package/components/VisitorSearchResultSummary.vue

@@ -1,27 +1,48 @@
+<!--
+  The summary a visitor search draws under its result. Every one of the four
+  cells was `text-subtitle-1` - Vuetify's 16px/400 Roboto - so the LABEL that
+  names a value ("Name:", "NRIC:") was drawn at exactly the same size, weight
+  and ink as the value itself, and neither was the product font.
+
+  DESIGN GAP, STATED: the handoff draws no visitor-search panel. What it does
+  draw is a label sitting next to the value it names, at
+  `iService365 Redesign.dc.html:659` - `color:var(--muted);font-size:12.5px` -
+  inside a row whose own type is 13.5px/600 with the name at 700 (line 658).
+  Those are the values below: a muted 12.5px label over a 13.5px/700 value, the
+  same label-quieter-than-value relationship `ListItem.vue` already uses.
+
+  The trailing colons are dropped: the design separates a label from its value
+  by weight and ink, not by punctuation.
+-->
 <template>
   <div class="w-100 py-2">
-    <div class="d-flex align-center mb-3 justify-space-between ga-4 w-100">
-      <span class="text-subtitle-1" style="min-width: 50%">
-        <div>Name:</div>
-        <div>{{ displayName }}</div>
-      </span>
-      <span class="text-subtitle-1" style="min-width: 50%">
-        <div>NRIC:</div>
-        <div>{{ item?.nric || "N/A" }}</div>
-      </span>
+    <div class="d-flex flex-wrap align-center mb-3 justify-space-between ga-4 w-100">
+      <!-- These were `<span>` wrappers with `<div>` children - a block inside
+           an inline element, which the parser closes early. Now both are
+           blocks, which is also what makes the 50% min-width behave. -->
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">Name</div>
+        <div class="visitor-summary__value">{{ displayName }}</div>
+      </div>
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">NRIC</div>
+        <div class="visitor-summary__value">{{ item?.nric || "N/A" }}</div>
+      </div>
     </div>
 
     <div
       v-if="contacts.length < 2 && plateNumbers.length < 2"
-      class="d-flex align-center justify-space-between ga-4 w-100"
+      class="d-flex flex-wrap align-center justify-space-between ga-4 w-100"
     >
-      <div class="text-subtitle-1" style="min-width: 50%">
-        <div>Contact:</div>
-        <div>{{ contacts[0] || "N/A" }}</div>
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">Contact</div>
+        <div class="visitor-summary__value">{{ contacts[0] || "N/A" }}</div>
       </div>
-      <div class="text-subtitle-1" style="min-width: 50%">
-        <div>Plate:</div>
-        <div class="text-uppercase">{{ plateNumbers[0] || "N/A" }}</div>
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">Plate</div>
+        <div class="visitor-summary__value text-uppercase">
+          {{ plateNumbers[0] || "N/A" }}
+        </div>
       </div>
     </div>
   </div>
@@ -84,3 +105,26 @@ const plateNumbers = computed(() => {
   );
 });
 </script>
+
+<style scoped>
+.visitor-summary__cell {
+  min-width: 50%;
+}
+
+.visitor-summary__label {
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: var(--fw-cell);
+  letter-spacing: 0;
+  color: var(--muted);
+  margin-bottom: 2px;
+}
+
+.visitor-summary__value {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  color: var(--text);
+}
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.141",
+  "version": "3.2.2-staging.143",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",