@7365admin1/layer-common 3.2.2-staging.85 → 3.2.2-staging.87

package/components/TableHygiene.vue

@@ -5,10 +5,8 @@
         <slot name="actions">
           <v-btn
             v-if="canCreate"
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none screen-btn-primary"
+            variant="flat"
             @click="emits('create')"
           >
             {{ createLabel }}
@@ -18,16 +16,11 @@
     </v-col>
 
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
+      <v-card width="100%" variant="flat" class="table-card" :loading="loading">
         <v-toolbar
           density="compact"
-          color="grey-lighten-4"
+          color="transparent"
+          class="table-card__toolbar"
           :extension-height="extensionHeight"
         >
           <template #prepend>
@@ -46,7 +39,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination
@@ -68,25 +61,16 @@
           :max-height="`calc(100vh - (${offset}px))`"
           class="overflow-y-auto"
         >
-          <v-row
-            v-if="groupedItems.length === 0"
-            no-gutters
-            justify="center"
-            class="py-10"
-          >
-            <v-col
-              cols="auto"
-              class="text-center text-medium-emphasis text-body-2"
-            >
-              {{ noDataText }}
-            </v-col>
-          </v-row>
+          <div v-if="groupedItems.length === 0" class="table-card__empty">
+            <v-icon icon="mdi-magnify-close" size="32" />
+            <span>{{ noDataText }}</span>
+          </div>
 
           <template
             v-for="(group, groupIndex) in groupedItems"
             :key="`group-${groupIndex}`"
           >
-            <v-sheet color="grey-lighten-4" border="b t">
+            <v-sheet color="transparent" class="table-card__group" border="b t">
               <v-row no-gutters align="center" class="px-4 py-2">
                 <v-col cols="auto" class="d-flex align-center ga-2">
                   <span
@@ -94,39 +78,37 @@
                   >
                     Set {{ group.set }}
                   </span>
-                  <v-chip
+                  <StatusChip
                     v-if="group.isScheduleTask"
-                    size="x-small"
-                    color="info"
-                    variant="tonal"
-                    prepend-icon="mdi-calendar-clock"
+                    tone="info"
+                    :dot="false"
                     class="text-none"
                   >
+                    <v-icon size="12">mdi-calendar-clock</v-icon>
                     Schedule Task
-                  </v-chip>
+                  </StatusChip>
                   <slot name="group-header-chips" :group="group">
-                    <v-chip
+                    <StatusChip
                       v-if="group.completedByName && isGroupComplete(group)"
-                      size="x-small"
-                      color="success"
-                      variant="tonal"
-                      prepend-icon="mdi-check-circle-outline"
+                      status="Completed"
+                      :dot="false"
                       class="text-none"
                     >
+                      <v-icon size="12">mdi-check-circle-outline</v-icon>
                       Completed · {{ group.completedByName }}
-                    </v-chip>
-                    <v-chip
+                    </StatusChip>
+                    <StatusChip
                       v-else-if="
                         group.completedByName && isGroupInProgress(group)
                       "
-                      size="x-small"
-                      color="warning"
-                      variant="tonal"
-                      prepend-icon="mdi-progress-clock"
+                      status="Ongoing"
+                      tone="warn"
+                      :dot="false"
                       class="text-none"
                     >
+                      <v-icon size="12">mdi-progress-clock</v-icon>
                       Ongoing · {{ group.completedByName }}
-                    </v-chip>
+                    </StatusChip>
                   </slot>
                 </v-col>
                 <v-spacer />
@@ -139,7 +121,8 @@
             <v-sheet
               v-for="item in group.items"
               :key="item[itemValue]"
-              color="white"
+              color="transparent"
+              class="table-card__row"
               border="b"
             >
               <v-row no-gutters align="center" class="px-4 py-2">

package/components/TableMain.vue

@@ -216,136 +216,3 @@ watch(
   }
 );
 </script>
-
-<style scoped>
-/* ------------------------------------------------------------------ */
-/* The card.                                                           */
-/* ------------------------------------------------------------------ */
-
-.table-card {
-  font-family: var(--font-sans);
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: var(--r-card);
-  box-shadow: var(--shadow);
-  overflow: hidden;
-}
-
-/**
- * The toolbar was `color="grey-lighten-4"` - a literal Vuetify grey, which is
- * a near-white bar sitting on a #1c1e24 card in dark mode. It is the card's
- * own surface now, with the design's rule under it.
- */
-.table-card__toolbar {
-  border-bottom: 1px solid var(--border);
-}
-
-.table-card__range {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--muted);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ------------------------------------------------------------------ */
-/* The header row and the rows under it.                               */
-/* ------------------------------------------------------------------ */
-
-.table-card :deep(thead th) {
-  background: var(--thead) !important;
-  color: var(--muted) !important;
-  font-size: var(--fs-table-head) !important;
-  font-weight: var(--fw-table-head) !important;
-  letter-spacing: var(--ls-table-head);
-  text-transform: uppercase;
-  padding: 10px var(--cellpad-x) !important;
-  height: auto !important;
-  border-bottom: 1px solid var(--border) !important;
-  white-space: nowrap;
-}
-
-.table-card :deep(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;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-card :deep(tbody tr:hover > td) {
-  background: var(--hover);
-}
-
-/* ------------------------------------------------------------------ */
-/* Empty state, in-card search, buttons and in-card tabs.              */
-/* ------------------------------------------------------------------ */
-
-.table-card__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 52px 16px;
-  font-size: var(--fs-cell);
-  color: var(--muted);
-}
-
-.table-card__empty :deep(.v-icon) {
-  color: var(--muted);
-}
-
-/* The in-card variant: 34px, 10px radius, as drawn. */
-.table-card__search :deep(.v-field) {
-  border-radius: var(--r-inner);
-  font-size: var(--fs-cell);
-}
-
-.table-card__primary {
-  height: var(--btn-h);
-  border-radius: var(--r-inner);
-  padding: 0 16px;
-  font-size: var(--fs-btn);
-  font-weight: var(--fw-btn-strong);
-  letter-spacing: 0;
-  background: var(--accent-strong);
-  color: var(--on-accent-strong);
-}
-
-.table-card__ghost {
-  height: var(--btn-h);
-  border-radius: var(--r-inner);
-  padding: 0 16px;
-  font-size: var(--fs-btn);
-  font-weight: var(--fw-btn);
-  letter-spacing: 0;
-  color: var(--text2);
-  border-color: var(--border);
-  background: var(--card);
-}
-
-/**
- * Tabs that a screen puts in this card's extension slot: 13px, the active one
- * at 800 in `--accent-text` over a 2px accent underline. Tabs elsewhere in the
- * product are their own screens' and are restyled with them.
- */
-.table-card :deep(.v-tab) {
-  font-size: var(--fs-nav);
-  font-weight: var(--fw-cell);
-  letter-spacing: 0;
-  text-transform: none;
-  color: var(--muted);
-  min-width: 0;
-}
-
-.table-card :deep(.v-tab.v-tab--selected) {
-  font-weight: var(--fw-table-head);
-  color: var(--accent-text);
-}
-
-.table-card :deep(.v-tab .v-tab__slider) {
-  height: 2px;
-  background: var(--accent);
-}
-</style>

package/components/UnitMain.vue

@@ -24,10 +24,8 @@
                 <!-- Primary action -->
                 <v-btn
                   v-if="canCreateUnit"
-                  class="text-none mr-3"
-                  rounded="pill"
-                  variant="tonal"
-                  size="large"
+                  class="text-none mr-3 screen-btn-primary"
+                  variant="flat"
                   @click="onCreateUnit()"
                 >
                   Add Unit
@@ -37,10 +35,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       href="/files/unit-sample-data.xlsx"
                       target="_blank"
                       download
@@ -55,10 +51,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="onImportData"
                     >
                       <v-icon>mdi-upload</v-icon>
@@ -71,10 +65,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="handleDownloadExcel"
                       :loading="isDownloading"
                     >
@@ -88,7 +80,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/package.json

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

package/plugins/vuetify.ts

@@ -53,6 +53,7 @@ import type { CookieOptions } from "#app";
  */
 import "../assets/css/tokens.css";
 import "../assets/css/shell.css";
+import "../assets/css/screens.css";
 
 export default defineNuxtPlugin((app) => {
   /**

package/utils/status.test.ts

@@ -35,6 +35,42 @@ test("an unmapped status comes out neutral rather than guessed", () => {
   }
 });
 
+/**
+ * PHASE 4. Each of these words is on a module screen today with a colour a
+ * per-screen `getStatusColor` gave it. The list has to keep giving it the SAME
+ * tone, or adopting the shared chip would quietly repaint a status.
+ */
+test("the product's own status words keep the tone the screens already gave them", () => {
+  for (const s of ["Accepted", "Approved", "Resolved", "Active"]) {
+    assert.equal(statusTone(s), "ok", s);
+  }
+
+  for (const s of ["Rejected", "Deleted", "Suspended"]) {
+    assert.equal(statusTone(s), "err", s);
+  }
+
+  for (const s of ["In Progress", "In-Progress", "To-Do", "Awaiting Approval"]) {
+    assert.equal(statusTone(s), "warn", s);
+  }
+
+  for (const s of ["Ongoing", "For Review"]) {
+    assert.equal(statusTone(s), "info", s);
+  }
+
+  for (const s of ["Inactive", "Expired"]) {
+    assert.equal(statusTone(s), "neutral", s);
+  }
+});
+
+/**
+ * The one place the handoff and the old per-screen colour disagree: `Open` was
+ * grey on the cleaning schedules and the design names it `ok`. Pinned so the
+ * disagreement is a decision on the record rather than a surprise.
+ */
+test("Open follows the design, not the old grey", () => {
+  assert.equal(statusTone("open"), "ok");
+});
+
 test("the class name matches what tokens.css actually defines", () => {
   assert.equal(statusToneClass("Paid"), "tone-ok");
   assert.equal(statusToneClass("Whatever"), "tone-neutral");

package/utils/status.ts

@@ -34,6 +34,42 @@ const TONES: Record<string, TStatusTone> = {
 
   role: "info",
   info: "info",
+
+  /**
+   * PHASE 4 - THE WORDS THIS PRODUCT ACTUALLY USES.
+   *
+   * The handoff names ten words; the module screens show more than that, and
+   * each of them is ALREADY painted a colour today by a per-screen
+   * `getStatusColor`. So these are not new opinions - each one is the tone the
+   * screens already give that word, moved into the one list so that "Ongoing"
+   * is the same blue on a cleaning schedule and on a scheduled area. Where the
+   * old per-screen colour and the design disagree the design wins, and there
+   * is exactly one of those: `Open` was grey and the handoff names it `ok`.
+   *
+   * Anything still unlisted stays neutral, deliberately - see above.
+   */
+  ongoing: "info", // was `primary`
+  "in progress": "warn", // was #FB8C00, orange
+  "for review": "info", // was `primary`
+  "to do": "warn", // was `orange`
+
+  accepted: "ok", // was `success`
+  approved: "ok",
+  resolved: "ok", // was #4CAF50, green
+  active: "ok", // was `success`
+
+  rejected: "err", // was `error`
+  deleted: "err", // was `error`
+  suspended: "err", // was `error`
+
+  complete: "ok",
+
+  inactive: "neutral", // was `grey`
+  "in active": "neutral", // the same word, printed "In-Active"
+  declined: "neutral", // was Vuetify's `default`
+  expired: "neutral", // was `grey`
+
+  "awaiting approval": "warn", // a waiting state, like Pending
 };
 
 /**