@7365admin1/layer-common 3.2.2-staging.135 → 3.2.2-staging.136

package/components/FileInputWithList.vue

@@ -13,10 +13,16 @@
       @update:modelValue="handleFileSelect"
       @click:clear="handleClear"
       :hide-input="hasHideInput"
+      class="filter-field"
     >
       <template v-slot:append v-if="hasLabel">
         <slot name="append">
-          <v-btn color="primary" height="50px" @click="openCameraDialog">
+          <v-btn
+            variant="text"
+            class="screen-icon-btn"
+            aria-label="Take a picture"
+            @click="openCameraDialog"
+          >
             <v-icon>mdi-camera</v-icon>
           </v-btn>
         </slot>
@@ -29,7 +35,7 @@
           <template v-for="(file, index) in files" :key="file.name">
             <v-chip
               closable
-              class="text-wrap text-caption custom-chip"
+              class="text-wrap custom-chip file-list__chip"
               @click:close="removeFile(index)"
             >
               <span class="chip-text">{{ file.name }}</span>
@@ -54,16 +60,18 @@
         width="800"
         max-width="800"
       >
-        <v-card elevation="2" class="d-flex flex-column align-center pa-2">
-          <v-toolbar>
-            <v-card-title class="text-h5">Take a Picture</v-card-title>
-            <v-spacer></v-spacer>
+        <v-card elevation="0" class="screen-modal d-flex flex-column align-center">
+          <v-card-title class="d-flex align-center">
+            Take a Picture
+            <v-spacer />
             <v-btn
-              color="grey-darken-1"
+              variant="text"
               icon="mdi-close"
+              class="screen-modal__close"
+              aria-label="Close"
               @click="closeCameraDialog"
             ></v-btn>
-          </v-toolbar>
+          </v-card-title>
 
           <div
             id="reader"
@@ -89,15 +97,25 @@
 
           <v-row align="center" justify="center">
             <v-col cols="6">
-              <v-btn color="primary" icon class="mt-4" @click="switchCamera">
+              <v-btn
+                variant="text"
+                class="screen-icon-btn mt-4"
+                aria-label="Switch camera"
+                @click="switchCamera"
+              >
                 <v-icon>mdi-camera-switch</v-icon>
               </v-btn>
             </v-col>
             <v-col cols="6">
+              <!--
+                Was `color="secondary"`, which is NOT one of the four theme
+                names `utils/theme.ts` maps onto the design's palette - it fell
+                through to Vuetify's own secondary and drew an off-palette slab.
+                This is the capture button, so it is the design's PRIMARY.
+              -->
               <v-btn
-                color="secondary"
-                icon
-                class="mt-4"
+                class="screen-btn-primary mt-4"
+                aria-label="Take the picture"
                 @click="captureImageFromCamera"
               >
                 <v-icon large>mdi-camera-outline</v-icon>
@@ -289,6 +307,21 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+/**
+ * The attachment tags under the field. They were Vuetify's default chip on
+ * `text-caption` - a grey pill on the Roboto scale - which is the one thing in
+ * the chat composer that did not match the tags the rest of the product draws.
+ * The design's tag radius and chip type, on tokens, so it follows the theme.
+ */
+.file-list__chip {
+  border-radius: var(--r-tag);
+  background: var(--hover);
+  color: var(--text2);
+  font-family: var(--font-sans);
+  font-size: var(--fs-chip);
+  font-weight: var(--fw-chip);
+}
+
 .custom-chip {
   max-width: 100%;
   height: auto !important;

package/components/Input/PhoneNumber.vue

@@ -17,9 +17,10 @@
           zIndex: 3000
         }"
         no-data-text="No countries available"
+        class="filter-field"
       >
         <template #selection="{ item }">
-          <span class="text-body-2">{{ item.raw.dialCode }}</span>
+          <span class="phone-input__code">{{ item.raw.dialCode }}</span>
         </template>
         <template #item="{ item }">
           <v-list-item-title>
@@ -38,6 +39,7 @@
         :rules="phoneValidationRules"
         hide-details="auto"
         type="tel"
+        class="filter-field"
         @input="handlePhoneInput"
       />
     </v-col>
@@ -186,3 +188,21 @@ watch(localDialCode, () => {
   }
 });
 </script>
+
+<style scoped>
+/**
+ * The dial-code selector and the number beside it. Both were factory Vuetify
+ * fields - Roboto, 4px radius, Vuetify's own border - inside forms whose every
+ * other field is already the design's. `.filter-field` is that field, and it is
+ * what `MemberInformation`, `VehicleForm` and `VisitorForm` already put around
+ * this control, so the two halves now match their own row.
+ *
+ * The selected dial code was `text-body-2`, Vuetify's 14px/400 Roboto scale.
+ * It is the same ink as a table cell, so it takes the cell's tokens.
+ */
+.phone-input__code {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+</style>

package/components/SwitchContext.vue

@@ -13,7 +13,7 @@
           :prepend-icon="prop.icon"
           append-icon="mdi-chevron-down"
           :to="props.route"
-          class="text-subtitle-2 font-weight-bold"
+          class="switch-context__activator"
         >
           <!-- The design prints the organisation and site names in full.
                Vuetify's list-item title truncates by default, which cut them
@@ -25,8 +25,8 @@
       </v-list>
     </template>
 
-    <v-card width="300px" rounded="lg" class="pa-4">
-      <span class="text-subtitle-2 font-weight-bold">
+    <v-card width="300px" elevation="0" class="switch-context__panel">
+      <span class="switch-context__heading">
         Switch {{ prop.title }} context
       </span>
       <v-text-field
@@ -35,7 +35,7 @@
         density="compact"
         width="100%"
         hide-details
-        class="mb-2"
+        class="filter-field mb-2"
       >
         <template #prepend-inner>
           <v-icon>mdi-magnify</v-icon>
@@ -45,7 +45,7 @@
       <v-list class="pa-0 my-2" density="compact" max-height="200px">
         <v-list-item
           density="compact"
-          class="text-caption font-weight-bold"
+          class="switch-context__row"
           v-for="item in prop.items"
           :key="item.value"
           @click="selectItem(item.value)"
@@ -129,6 +129,55 @@ const selectItem = (value: string) => {
 </script>
 
 <style scoped>
+/**
+ * The rail's context selector and the panel it opens.
+ *
+ * The panel was a factory `v-card` with `pa-4` and Vuetify's `text-subtitle-2`
+ * / `text-caption` scale, so it was the one menu in the shell that did NOT
+ * match the profile menu the top bar already draws. It takes the SAME surface
+ * as `Layout/Header`'s `.app-profile-menu` - 14px radius, the design's menu
+ * shadow, a 1px border - rather than a third treatment invented here.
+ *
+ * The typography utilities also sat on elements that CONTAIN icons
+ * (`prepend-icon`, the chevron, the tick), which is the exact shape the central
+ * icon-font guard exists to catch. Tokens carry no such risk.
+ */
+.switch-context__activator {
+  font-size: var(--fs-nav);
+  font-weight: 700;
+  color: var(--text);
+}
+
+.switch-context__panel {
+  border-radius: var(--r-menu);
+  box-shadow: var(--shadow-menu);
+  border: 1px solid var(--border);
+  background: var(--card);
+  padding: 14px;
+}
+
+.switch-context__heading {
+  display: block;
+  font-size: var(--fs-btn);
+  font-weight: 800;
+  line-height: 1.3;
+  color: var(--text);
+  margin-bottom: 10px;
+}
+
+/* The profile menu's row, to the pixel - same padding, same radius, same
+   weight - because it is the same control one panel over. */
+.switch-context__row {
+  border-radius: var(--r-inner-sm);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn);
+  color: var(--text2);
+}
+
+.switch-context__row:hover {
+  background: var(--hover);
+}
+
 /* Wrap onto a second line instead of truncating - the design shows the full
    organisation and site names. */
 .switch-context__name {

package/components/TableList.vue

@@ -1,12 +1,10 @@
 <template>
-  <v-card
-    width="100%"
-    variant="outlined"
-    border="thin"
-    rounded="lg"
-    :loading="loading"
-  >
-    <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
+  <v-card width="100%" elevation="0" class="table-card" :loading="loading">
+    <v-toolbar
+      density="compact"
+      class="table-card__toolbar px-3"
+      color="transparent"
+    >
       <template #prepend>
         <v-checkbox v-model="selectAll" hide-details class="mx-1"></v-checkbox>
 
@@ -17,7 +15,7 @@
 
       <template #append>
         <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
+          <span class="table-card__range mr-2">
             {{ props.pageRange }}
           </span>
           <div class="arrow-navigation">
@@ -41,7 +39,9 @@
       </template>
 
       <template v-if="$slots.extension" v-slot:extension>
-        <slot name="extension"></slot>
+        <div class="table-card__extension">
+          <slot name="extension"></slot>
+        </div>
       </template>
     </v-toolbar>
     <div :style="{ overflowY: 'auto', height }">

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.135",
+  "version": "3.2.2-staging.136",
   "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.",