@7365admin1/layer-common 3.2.1-staging.70 → 3.2.1-staging.72

package/components/FeedbackMain.vue

@@ -721,9 +721,9 @@ const {
     _getFeedbacks({
       page: page.value,
       site: route.params.site as string,
-      provider: currentUser.value.serviceProvider,
-      ...(currentUser.value.type != "site" && {
-        userId: currentUser.value._id,
+      provider: currentUser.value?.serviceProvider,
+      ...(currentUser.value?.type != "site" && {
+        userId: currentUser.value?._id,
       }),
       service: "Security",
       dateFrom: moment(startDate.value, "DD/MM/YYYY").startOf("day"),
@@ -998,9 +998,9 @@ async function handleAccept() {
         _id: feedbackData.value._id,
         statusUpdate: {
           status: "In-Progress",
-          updatedById: currentUser.value._id,
-          updatedByName: `${currentUser.value.givenName} ${currentUser.value.surname}`,
-          assignee: currentUser.value._id,
+          updatedById: currentUser.value?._id,
+          updatedByName: `${currentUser.value?.givenName} ${currentUser.value?.surname}`,
+          assignee: currentUser.value?._id,
           provider: currentUser.value?.serviceProvider,
         },
       };
@@ -1158,7 +1158,7 @@ async function submit() {
     isSubmitting.value = true;
 
     const result = await createFeedback({
-      createdBy: currentUser.value._id,
+      createdBy: currentUser.value?._id,
       description: _feedback.value.description,
       attachments: _feedback.value.attachments,
       site: route.params.site as string,

package/components/Layout/NavigationDrawer.vue

@@ -3,19 +3,39 @@
   <!--
     `bg-brand-surface`, not `bg-primary`: `primary` is a foreground colour on a
     dark page (it has to carry `class="text-primary"` sentences at 4.5:1), and a
-    fill that carries a white label cannot also be that. `brand-surface` is the
-    deep brand navy in both themes - identical to light `primary`, so light mode
-    is unchanged - and the white label on it reads 16.51:1 light, 8.70:1 dark.
-
-    `floating` dropped so the drawer draws its own edge. The fill is 2.14:1
-    against the dark page, under the 3:1 a boundary wants; the border is 3.22:1
-    and carries it. In light mode the border is black at 0.26 over the navy, so
-    nothing there changes.
+    fill that carries a label cannot also be that. `brand-surface` is a real
+    surface in each theme - see `utils/theme.ts` - so the drawer belongs to the
+    application it is in rather than being the one panel the theme switch never
+    reached. Its label reads 15.43:1 light, 13.21:1 dark.
+
+    NO HARDCODED LABEL COLOUR ANYWHERE IN HERE. Vuetify paints the drawer with
+    `on-brand-surface` and the list inside it inherits that through
+    `bg-transparent`, which the drawer supplies to every `v-list` it contains.
+    A `text-white` in here (or in an app's `#action` / `#services` slot) is
+    white on a light rail at 1.13:1.
+
+    `floating` dropped so the drawer draws its own edge, and the three
+    opacities below are raised on this element only:
+
+    - `border-opacity` 0.45. A surface is a low-contrast panel by design
+      (1.13:1 light, 1.19:1 dark against the page), so the edge is what carries
+      the boundary: 3.27:1 light, 4.33:1 dark. The theme-wide value stays where
+      it is; raising that would redraw every table and card edge in eleven
+      applications.
+    - `hover-opacity` 0.08. Material's 0.04 is 1.11:1 on this rail, which is
+      not feedback. 0.08 is 1.17:1 light, 1.24:1 dark.
+    - `activated-opacity` 0.18. The active item is `primary` text on a
+      primary-tinted fill (see `NavigationItem.vue`); 0.12 left the fill at
+      1.15:1, 0.18 is 1.44:1 light, 1.33:1 dark.
   -->
-  <v-navigation-drawer v-model="drawer" permanent class="bg-brand-surface">
+  <v-navigation-drawer
+    v-model="drawer"
+    permanent
+    class="bg-brand-surface brand-drawer"
+  >
     <v-list>
       <v-list-item>
-        <v-list-item-title class="text-h6 text-white">
+        <v-list-item-title class="text-h6">
           {{ props.title || APP_NAME }}
         </v-list-item-title>
       </v-list-item>
@@ -103,3 +123,12 @@ const handleClick = (item: any) => {
   emit("navigate", item);
 };
 </script>
+
+<style scoped>
+/* Scoped to the drawer: none of these reach the rest of the application. */
+.brand-drawer {
+  --v-border-opacity: 0.45;
+  --v-hover-opacity: 0.08;
+  --v-activated-opacity: 0.18;
+}
+</style>

package/components/NavigationItem.vue

@@ -1,9 +1,16 @@
+<!--
+  `color="primary"` is applied by Vuetify only while the item is active, so the
+  page you are on is named by colour and not just by a 1.15:1 tint you cannot
+  see. `primary` reads 14.56:1 on the light rail and 5.38:1 on the dark one,
+  and it is the one brand colour that is a foreground in both themes.
+-->
 <template>
   <v-list-group v-if="children && children.length">
     <template #activator="{ props: groupProps }">
       <v-list-item
         v-bind="groupProps"
         :prepend-icon="icon"
+        color="primary"
         class="text-subtitle-2"
         @click.stop="onParentClick"
       >
@@ -25,6 +32,7 @@
     v-else-if="routeTo"
     :prepend-icon="icon"
     :to="routeTo"
+    color="primary"
     class="text-subtitle-2"
   >
     {{ title }}
@@ -34,6 +42,7 @@
     v-else-if="props.link"
     :prepend-icon="icon"
     :href="props.link"
+    color="primary"
     class="text-subtitle-2"
   >
     {{ title }}

package/components/VisitorManagement.vue

@@ -1707,7 +1707,7 @@ async function handleVisitorDataFromScannedQRCodeCheckInOut(
           site: visitorData.site ?? siteId,
         },
         update: {
-          updatedBy: currentUser.value._id,
+          updatedBy: currentUser.value?._id,
           visitorPass: visitorPass.find(
             (i: Record<string, any>) => i.keyId === null
           )

package/composables/useComment.ts

@@ -89,13 +89,13 @@ export default function useComment() {
 
       comments.value = _comments.items
         .map((comment: any) => {
-          if (comment.createdBy === currentUser.value._id) {
+          if (comment.createdBy === currentUser.value?._id) {
             comment.justify = "end";
           } else {
             comment.justify = "start";
             if (
               ((Array.isArray(comment.seenBy) &&
-                !comment.seenBy.includes(currentUser.value._id)) ||
+                !comment.seenBy.includes(currentUser.value?._id)) ||
                 !comment?.seenBy) &&
               comment?._id
             ) {
@@ -111,7 +111,7 @@ export default function useComment() {
         );
 
       if (Array.isArray(updateSeenIds) && updateSeenIds.length > 0) {
-        const seenBy = await updateSeenBy(updateSeenIds, currentUser.value._id);
+        const seenBy = await updateSeenBy(updateSeenIds, currentUser.value?._id);
       }
     } catch (error) {
       console.log("error :", error);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.1-staging.70",
+  "version": "3.2.1-staging.72",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/utils/theme.test.ts

@@ -24,6 +24,20 @@ const contrast = (a: string, b: string): number => {
   return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
 };
 
+/** `fg` at `alpha` composited over `bg` - an overlay is not its raw value. */
+const over = (fg: string, bg: string, alpha: number): string =>
+  "#" +
+  [0, 2, 4]
+    .map((i) =>
+      Math.round(
+        parseInt(fg.slice(1 + i, 3 + i), 16) * alpha +
+          parseInt(bg.slice(1 + i, 3 + i), 16) * (1 - alpha)
+      )
+        .toString(16)
+        .padStart(2, "0")
+    )
+    .join("");
+
 const WHITE = "#FFFFFF";
 const dark = DARK_THEME.colors;
 const light = LIGHT_THEME.colors;
@@ -65,21 +79,100 @@ test("text-primary is readable on the surface each theme puts it on", () => {
 /**
  * The drawer is the reason `primary` was moved in the first place. If someone
  * points it back at `primary` this fails, because a foreground colour cannot
- * carry a white label.
+ * carry the drawer's label.
  */
-test("the nav drawer fill carries a white label in both themes", () => {
+test("the nav drawer fill carries its own label in both themes", () => {
   assert.ok(
-    contrast(WHITE, dark["brand-surface"]) >= 4.5,
-    `white on the dark drawer: ${contrast(
-      WHITE,
+    contrast(dark["on-brand-surface"], dark["brand-surface"]) >= 4.5,
+    `dark drawer label: ${contrast(
+      dark["on-brand-surface"],
       dark["brand-surface"]
     ).toFixed(2)}`
   );
-  assert.ok(contrast(WHITE, light["brand-surface"]) >= 4.5);
+  assert.ok(
+    contrast(light["on-brand-surface"], light["brand-surface"]) >= 4.5,
+    `light drawer label: ${contrast(
+      light["on-brand-surface"],
+      light["brand-surface"]
+    ).toFixed(2)}`
+  );
 });
 
-test("light mode's drawer fill is exactly what light primary used to be", () => {
-  assert.equal(light["brand-surface"], light.primary);
+/**
+ * The defect this replaced: `brand-surface` was the same deep navy in both
+ * themes, so the drawer was the one panel the theme switch did not reach. A
+ * light-theme surface has to be light, a dark-theme surface has to be dark,
+ * and if the two are ever within 3:1 of each other the switch is invisible on
+ * the drawer again.
+ */
+test("the drawer belongs to its theme, and the switch visibly changes it", () => {
+  assert.ok(
+    contrast(light["brand-surface"], WHITE) < 1.5,
+    "the light drawer must be a light surface, not a dark slab on a white page"
+  );
+  assert.ok(
+    contrast(dark["brand-surface"], dark.background) < 1.5,
+    "the dark drawer must sit with the dark page, not float above it"
+  );
+  assert.ok(
+    contrast(light["brand-surface"], dark["brand-surface"]) >= 3,
+    `light and dark drawers only ${contrast(
+      light["brand-surface"],
+      dark["brand-surface"]
+    ).toFixed(2)} apart - the switch would look like it does nothing`
+  );
+});
+
+/**
+ * The drawer's fill is deliberately close to the page, so the edge is the
+ * boundary and it is the thing that has to reach 3:1. 0.45 is the value
+ * `NavigationDrawer.vue` sets on itself; the theme-wide `border-opacity` is
+ * left alone.
+ */
+test("the drawer's own edge clears the 3:1 a boundary wants", () => {
+  const edge = (fg: string, bg: string) => over(fg, bg, 0.45);
+
+  assert.ok(
+    contrast(edge("#000000", light["brand-surface"]), WHITE) >= 3,
+    `light drawer edge vs page: ${contrast(
+      edge("#000000", light["brand-surface"]),
+      WHITE
+    ).toFixed(2)}`
+  );
+  assert.ok(
+    contrast(edge(WHITE, dark["brand-surface"]), dark.background) >= 3,
+    `dark drawer edge vs page: ${contrast(
+      edge(WHITE, dark["brand-surface"]),
+      dark.background
+    ).toFixed(2)}`
+  );
+});
+
+/** The active item is named by colour, so `primary` has to be readable on it. */
+test("the active nav item is readable on the drawer in both themes", () => {
+  assert.ok(
+    contrast(light.primary, light["brand-surface"]) >= 4.5,
+    `light: ${contrast(light.primary, light["brand-surface"]).toFixed(2)}`
+  );
+  assert.ok(
+    contrast(dark.primary, dark["brand-surface"]) >= 4.5,
+    `dark: ${contrast(dark.primary, dark["brand-surface"]).toFixed(2)}`
+  );
+});
+
+/**
+ * `v-list-subheader` is the one thing in the drawer that does NOT inherit the
+ * drawer's label colour - Vuetify paints it `on-surface` at medium emphasis.
+ * That is why apps used to hardcode `text-white` on it. It has to work
+ * unaided now, or those hardcodes come back.
+ */
+test("an unstyled subheader is readable on the drawer in both themes", () => {
+  assert.ok(
+    contrast(over("#000000", light["brand-surface"], 0.6), light["brand-surface"]) >= 4.5
+  );
+  assert.ok(
+    contrast(over(WHITE, dark["brand-surface"], 0.6), dark["brand-surface"]) >= 4.5
+  );
 });
 
 test("primary-button carries a white label in both themes", () => {
@@ -92,19 +185,6 @@ test("primary-button carries a white label in both themes", () => {
  * apart between them is a bug nobody sees until they flip the switch.
  */
 test("disabled text clears 4.5:1 on the surface each theme puts it on", () => {
-  const over = (fg: string, bg: string, alpha: number) =>
-    "#" +
-    [0, 2, 4]
-      .map((i) =>
-        Math.round(
-          parseInt(fg.slice(1 + i, 3 + i), 16) * alpha +
-            parseInt(bg.slice(1 + i, 3 + i), 16) * (1 - alpha)
-        )
-          .toString(16)
-          .padStart(2, "0")
-      )
-      .join("");
-
   assert.equal(LIGHT_THEME.variables["disabled-opacity"], 0.55);
   assert.equal(DARK_THEME.variables["disabled-opacity"], 0.55);
   assert.ok(contrast(over("#000000", WHITE, 0.55), WHITE) >= 4.5);

package/utils/theme.ts

@@ -32,22 +32,49 @@
  * There is no overlap - a value light enough for 4.5:1 text on `surface`
  * (#1B242F) can carry white at 3.48:1 at the very best.
  *
- * So the fill is not `primary` any more. `brand-surface` below is the deep
- * brand navy, it is what the navigation drawer is painted with, and `primary`
- * is free to be a foreground colour. The foreground uses outnumber the fill
- * uses by roughly an order of magnitude, which is why the split falls this way
- * round.
+ * So the fill is not `primary` any more. `brand-surface` below is what the
+ * navigation drawer is painted with, and `primary` is free to be a foreground
+ * colour. The foreground uses outnumber the fill uses by roughly an order of
+ * magnitude, which is why the split falls this way round.
+ */
+
+/**
+ * `brand-surface` IS A SURFACE, AND A SURFACE BELONGS TO ITS THEME.
+ *
+ * It was first set to the deep brand navy in BOTH themes, which made the
+ * navigation drawer the one part of the product the theme switch did not
+ * reach: a near-black slab bolted onto a white application in light mode, and
+ * a lighter blue block sitting 1.80:1 off the cards beside it in dark mode. It
+ * belonged to neither.
+ *
+ * It is now a real surface in each theme - a light navy-tinted rail on the
+ * light page, the same `surface` the app bar and the cards use on the dark
+ * page - so the drawer reads as part of the application it is in and the
+ * switch visibly changes it. The brand is carried by the title and by the
+ * active item, which is `primary` in both themes, rather than by painting the
+ * whole rail.
+ *
+ * The drawer is a low-contrast panel against the page by design (1.13:1 light,
+ * 1.19:1 dark, exactly like every other surface in Material), so its edge is
+ * what carries the boundary. `NavigationDrawer.vue` raises `border-opacity` on
+ * itself alone to reach 3:1 there without redrawing every table and card edge
+ * in eleven applications.
+ *
+ * `on-brand-surface` is set explicitly rather than left to Vuetify's black or
+ * white, so the label is the same near-black / near-white the rest of the
+ * theme reads in.
  */
 export const LIGHT_THEME = {
   dark: false,
   colors: {
     primary: "#042134",
     /**
-     * The navigation drawer's own fill. Identical to light `primary`, so light
-     * mode renders exactly as it did before the drawer stopped using `primary`.
-     * White label on it: 16.51:1.
+     * The navigation drawer's own fill: a navy-tinted light rail, 1.13:1
+     * against the white page and carried by its own 3.27:1 edge.
      */
-    "brand-surface": "#042134",
+    "brand-surface": "#EDF1F7",
+    /** The drawer's label colour. On the rail: 15.43:1. */
+    "on-brand-surface": "#0B1B27",
     "primary-button": "#1867C0",
     "text-primary": "#052439",
   },
@@ -87,8 +114,16 @@ export const DARK_THEME = {
      * that still do that.
      */
     primary: "#5B9BE0",
-    /** The navigation drawer's own fill. White label on it: 8.70:1. */
-    "brand-surface": "#17506F",
+    /**
+     * The navigation drawer's own fill. Deliberately the same value as
+     * `surface`: on a dark page the drawer, the app bar and the cards are the
+     * same material, which is what makes the rail read as part of the
+     * application instead of a blue block laid on top of it. The token stays
+     * separate from `surface` so the drawer can be moved on its own later.
+     */
+    "brand-surface": "#1B242F",
+    /** The drawer's label colour. On the rail: 13.21:1. */
+    "on-brand-surface": "#E8ECF1",
     /** Unchanged on purpose: it already passes in both themes. */
     "primary-button": "#1867C0",
     /** #052439 on a dark page measures 1.18:1. This is 15.72:1. */