@7365admin1/layer-common 3.2.2-staging.89 → 3.2.2-staging.91

package/components/MemberMain.vue

@@ -1,68 +1,65 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          v-if="props.seatManagement !== 'index'"
-          class="text-none screen-btn-primary"
-          variant="flat"
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD.
+
+      The handoff opens Members with a 22px title row and puts the tabs INSIDE
+      the card's first row, with the pagination on the far end of that same
+      line. Before this the screen had no title at all - the page name existed
+      only in the rail and the browser tab - and the tabs sat in a toolbar
+      extension, i.e. a second stacked bar below a mostly empty one.
+
+      Nothing here changes what the screen does: the same two tabs route the
+      same way, the same refresh and pager call the same `getAll()`, the same
+      `headers` prop drives the same columns, and the same menu carries the
+      same four actions behind the same permission conditions.
+    -->
+    <PageHeader :title="props.title">
+      <template v-if="props.seatManagement !== 'index'" #actions>
+        <AppButton
           :to="{
             name: props.seatManagement,
             params: { organization: props.orgId },
           }"
-          size="large"
         >
           Manage seats
-        </v-btn>
-      </v-row>
-    </v-col>
-
-    <v-col cols="12">
-      <v-card width="100%" variant="flat" class="table-card">
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-        >
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getAll()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 table-card__range">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getAll()"
-              />
-            </v-row>
-          </template>
-
-          <template #extension>
-            <v-tabs
-              v-model="selectedStatus"
-              color="primary"
-              :height="40"
-              @update:model-value="toRoute"
-              class="w-100"
-            >
-              <v-tab
-                v-for="(tab, i) in tabOptions"
-                :value="tab.status"
-                :key="i"
-                class="text-capitalize"
-              >
-                {{ tab.name }}
-              </v-tab>
-            </v-tabs>
-          </template>
-        </v-toolbar>
-
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <CardToolbar :count="pageRange">
+        <template #tabs>
+          <button
+            v-for="(tab, i) in tabOptions"
+            :key="i"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': selectedStatus === tab.status }"
+            :aria-selected="selectedStatus === tab.status"
+            @click="toRoute(tab.status)"
+          >
+            {{ tab.name }}
+          </button>
+        </template>
+
+        <template #right>
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="getAll()"
+          />
+          <local-pagination
+            v-model="page"
+            :length="pages"
+            @update:value="getAll()"
+          />
+        </template>
+      </CardToolbar>
+
+      <div class="app-table-scroll">
         <v-data-table
           :headers="props.headers"
           :items="items"
@@ -76,6 +73,13 @@
           <template #item.nature="{ item }">
             {{ replaceMatch(item.nature, "_", " ") }}
           </template>
+          <!-- The role is a soft pill in the design, not a plain word. Same
+               text, same column, same source field. -->
+          <template #item.roleName="{ item }">
+            <StatusChip v-if="item.roleName" :dot="false" pill tone="info">
+              {{ item.roleName }}
+            </StatusChip>
+          </template>
           <template #item.dateInvited="{ item }">
             {{ formatDateInvited(item.dateInvited) }}
           </template>
@@ -92,8 +96,13 @@
               offset-y
               width="150"
             >
-              <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">mdi-dots-vertical</v-icon>
+              <template v-slot:activator="{ props: menuProps }">
+                <AppButton
+                  v-bind="menuProps"
+                  variant="row"
+                  icon="mdi-dots-vertical"
+                  aria-label="Member actions"
+                />
               </template>
               <v-list>
                 <v-list-item
@@ -131,8 +140,9 @@
             </v-menu>
           </template>
         </v-data-table>
-      </v-card>
-    </v-col>
+      </div>
+    </AppCard>
+
     <ConfirmDialog
       v-model="confirmDialog"
       :loading="updateLoading"
@@ -235,11 +245,17 @@
         </v-card-text>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
+  /** The design's page title. Every app that mounts this screen calls it
+      Members; a caller that names it otherwise passes its own. */
+  title: {
+    type: String,
+    default: "Members",
+  },
   orgId: {
     type: String,
     default: "",

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/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.89",
+  "version": "3.2.2-staging.91",
   "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) => {
   /**