@7365admin1/layer-common 3.2.2-staging.90 → 3.2.2-staging.92

package/components/PageHeader.vue

@@ -0,0 +1,40 @@
+<!--
+  THE PAGE TITLE ROW.
+
+  The design opens EVERY screen with this row: the page's name at 22px/800,
+  and the screen's primary action on the right of the same line. The product
+  has never had it - the page name lived only in the browser tab and in the
+  navigation rail - which is the single most visible difference between the
+  staging site and the handoff.
+
+  It is a label and a slot. It fetches nothing, decides nothing and navigates
+  nowhere; the action passed into it is the screen's own button.
+-->
+<template>
+  <div class="app-page-head">
+    <div>
+      <h1 class="app-page-head__title">
+        <slot name="title">{{ title }}</slot>
+      </h1>
+
+      <!-- The design's second line: a location, a count, a date range. Only
+           drawn when a screen supplies one. -->
+      <div v-if="subtitle || $slots.subtitle" class="app-page-head__sub">
+        <v-icon v-if="subtitleIcon" :icon="subtitleIcon" size="15" />
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.actions" class="app-page-head__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: { type: String, default: "" },
+  subtitle: { type: String, default: "" },
+  subtitleIcon: { type: String, default: "" },
+});
+</script>

package/components/StatusChip.vue

@@ -10,7 +10,10 @@
   translate or shorten a status.
 -->
 <template>
-  <span class="status-chip" :class="[toneClass, { 'status-chip--plain': !dot }]">
+  <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
@@ -27,8 +30,14 @@ const props = defineProps({
   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, role names) carry no leading dot. */
+  /** 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
@@ -68,6 +77,12 @@ const toneClass = computed(() =>
   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);
+}
+
 .status-chip__dot {
   width: 6px;
   height: 6px;

package/components/SwitchContext.vue

@@ -100,6 +100,24 @@ const name = computed(() => {
   return prop.items.find((item) => item.value === selected.value)?.text ?? "";
 });
 
+/**
+ * THE BREADCRUMB'S SITE HALF.
+ *
+ * The top bar draws `Site name / Page`, but the site's NAME is only ever
+ * resolved here - each application loads its own site list and hands it to
+ * this selector, so the bar had nothing to print and showed the page alone.
+ * The label already on screen is mirrored into shared state for the bar to
+ * read. It is a label: no request is made, and what the selector selects is
+ * untouched.
+ */
+const shellSiteName = useState<string>("shell-context-site-name", () => "");
+
+watchEffect(() => {
+  if (prop.title?.toLowerCase() === "site" && name.value) {
+    shellSiteName.value = name.value;
+  }
+});
+
 const selectItem = (value: string) => {
   selected.value = value;
   menu.value = false;

package/package.json

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

package/plugins/vuetify.ts

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