@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/StatusChip.vue

@@ -0,0 +1,156 @@
+<!--
+  THE STATUS CHIP.
+
+  A pill in the tone the design assigns to the status WORD, with the 6px
+  leading dot. The word -> tone mapping is `utils/status.ts` and is shared, so
+  "Open" is the same green on a work order and on a Daily Occurrence Book, and
+  a status the design never named comes out neutral rather than guessed.
+
+  Colour only. The chip prints the label it is given; it does not decide, map,
+  translate or shorten a status.
+-->
+<template>
+  <span
+    class="status-chip"
+    :class="[toneClass, { 'status-chip--plain': !dot && !pill, 'status-chip--pill': pill }]"
+  >
+    <span v-if="dot" class="status-chip__dot" />
+    <!-- The slot is for the chips that already carried an icon next to their
+         word - a padlock on "Closed - View Only" - so adopting the design's
+         pill does not quietly drop it. -->
+    <slot>{{ label ?? status }}</slot>
+    <!--
+      The remove control. NEW design, approved by the owner on 2026-08-14 - the
+      handoff draws no removable chip. It is an affordance ON the existing pill,
+      not a second shape, so a removable "KEY-309" and a read-only "Issued" stay
+      visibly the same family: same 999px pill, same 4px 10px, same 12px/700,
+      same 24px height. A chip that cannot be removed is byte-for-byte unchanged.
+    -->
+    <button
+      v-if="removable"
+      type="button"
+      class="status-chip__x"
+      :aria-label="removeLabel || `Remove ${label ?? status}`"
+      @click="emit('remove')"
+    >
+      <v-icon icon="mdi-close" :size="12" />
+    </button>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { statusToneClass } from "../utils/status";
+
+const props = defineProps({
+  /** The status word - what decides the colour. */
+  status: { type: String, default: "" },
+  /** What to PRINT, when that differs from the word being matched on. */
+  label: { type: String, default: undefined },
+  /** The design's tag chips (pass IDs, counts) carry no leading dot. */
+  dot: { type: Boolean, default: true },
+  /**
+   * The handoff draws TWO dotless chips, and they are not the same shape: the
+   * 7px-radius 11px tag on a pass, and the 999px 11.5px pill a role name sits
+   * in on the Members screen. `pill` picks the second.
+   */
+  pill: { type: Boolean, default: false },
+  /**
+   * For the chips that are not a status WORD at all - a countdown, a rating, a
+   * count - where the screen has already worked out the meaning and only needs
+   * the design's tone. Given, it wins over the word mapping.
+   */
+  tone: {
+    type: String as PropType<"ok" | "warn" | "err" | "info" | "neutral" | "">,
+    default: "",
+  },
+  /** Draws the × and emits `remove` when it is pressed. */
+  removable: { type: Boolean, default: false },
+  /**
+   * The × 's accessible name. Defaults to `Remove <the printed label>`, which
+   * is right for an identifier chip ("Remove KEY-309"); give it explicitly
+   * whenever the printed text alone would not tell a screen-reader user what
+   * is about to be taken away.
+   */
+  removeLabel: { type: String, default: "" },
+});
+
+const emit = defineEmits<{ (e: "remove"): void }>();
+
+const toneClass = computed(() =>
+  props.tone ? `tone-${props.tone}` : statusToneClass(props.status)
+);
+</script>
+
+<style scoped>
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: var(--r-pill);
+  font-family: var(--font-sans);
+  font-size: var(--fs-chip-lg);
+  font-weight: var(--fw-chip);
+  line-height: 1.4;
+  white-space: nowrap;
+  /* `--tone-bg` is set alongside the colour by the `.tone-*` class - see
+     assets/css/tokens.css - so one class carries both halves of the pair the
+     contrast was measured on. */
+  background: var(--tone-bg);
+}
+
+.status-chip--plain {
+  border-radius: var(--r-tag);
+  font-size: var(--fs-chip);
+}
+
+/* The role tag: `padding:3px 10px;border-radius:999px;font-size:11.5px`. */
+.status-chip--pill {
+  padding: 3px 10px;
+  font-size: var(--fs-chip);
+}
+
+/*
+ * A 12px glyph needs a 24px target to stay pressable at 360px, but the chip is
+ * only 24px tall - so the hit area is INSET into the pill's own padding rather
+ * than added to it. The negative margin is what keeps the × from making a
+ * removable chip taller than the read-only one beside it.
+ */
+.status-chip__x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: -6px -6px -6px 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--r-pill);
+  background: transparent;
+  /* Chips read as labels first and controls second, so the × sits back from
+     the word until it is reached for. */
+  color: inherit;
+  opacity: 0.62;
+  cursor: pointer;
+  transition: opacity var(--motion) ease, background var(--motion) ease;
+}
+
+.status-chip__x:hover,
+.status-chip__x:focus-visible {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.v-theme--dark .status-chip__x:hover,
+.v-theme--dark .status-chip__x:focus-visible {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.status-chip__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--r-pill);
+  background: currentColor;
+  flex: 0 0 6px;
+}
+</style>

package/components/StockCard.vue

@@ -5,15 +5,18 @@
     color="page-background-color fill-height header-row"
   >
     <v-col cols="12" sm="12" md="11" lg="12" xl="12">
-      <v-row no-gutters class="mb-4">
-        <v-col cols="auto">
-          <v-btn variant="text" color="primary" class="text-none" @click="back">
-            <v-icon left>mdi-arrow-left</v-icon>
+      <!-- The loose Back link above the card becomes the design's title row -
+           the page name on the left, its action right-aligned on the same line.
+           `title` was already declared here and never drawn. -->
+      <PageHeader :title="title">
+        <template #actions>
+          <AppButton variant="ghost" icon="mdi-arrow-left" @click="back">
             Back
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-card class="pa-5 position-relative rounded-lg">
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <AppCard class="pa-5 position-relative">
         <!-- Stock Information -->
         <v-row class="pt-2">
           <v-col cols="12">
@@ -104,7 +107,7 @@
             </TableMain>
           </v-col>
         </v-row>
-      </v-card>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
@@ -181,9 +184,11 @@ watchEffect(() => {
 </script>
 
 <style scoped>
-.text-fontgray {
-  color: #7e7e7e;
-}
+/* The scoped `.text-fontgray { color: #7e7e7e }` that used to sit here is gone.
+   It out-specified the layer's tokenised rule in `assets/css/screens.css`, which
+   is why these four field labels were the estate's one measured 4.06:1 - the
+   same fixed grey in both themes. The surface under them is `AppCard`, which is
+   itself tokenised, so the ink can safely follow the theme. */
 
 :deep() .v-table .v-table__wrapper > table > thead > tr > th:not(:last-child) {
   border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));