@7365admin1/layer-common 3.2.2-staging.158 → 3.2.2-staging.160

package/components/OnlineFormRenderPreview.vue

@@ -5,25 +5,25 @@
     width="560"
     persistent
   >
-    <v-card max-height="85vh" class="d-flex flex-column">
-      <v-toolbar color="grey-darken-3" class="flex-grow-0">
-        <v-toolbar-title class="text-subtitle-1 font-weight-bold text-white text-uppercase">
-          {{ form?.formType }}
-        </v-toolbar-title>
-      </v-toolbar>
+    <!-- The title row was a `grey-darken-3` v-toolbar: the same hardcoded grey
+         slab on both themes, with white text sitting on it. A `v-card-title` on
+         `.screen-modal` is the same row on the card's own surface, so it
+         follows the theme. -->
+    <v-card class="screen-modal d-flex flex-column">
+      <v-card-title class="flex-grow-0">{{ form?.formType }}</v-card-title>
 
-      <v-card-subtitle class="px-6 pt-3 pb-0 text-caption text-medium-emphasis flex-grow-0">
+      <v-card-subtitle class="screen-hint px-6 pb-0 flex-grow-0">
         Form preview — fields are read-only
       </v-card-subtitle>
 
-      <v-card-text class="px-6 py-4 flex-grow-1" style="overflow-y: auto">
+      <v-card-text class="screen-modal__body px-6 py-4 flex-grow-1">
         <template v-for="(input, index) in form?.inputs" :key="index">
           <v-text-field
             v-if="input.dataType === 'Text Input'"
             :label="input.label"
             density="comfortable"
             variant="outlined"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -34,7 +34,7 @@
             density="comfortable"
             variant="outlined"
             rows="3"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -45,7 +45,7 @@
             type="date"
             density="comfortable"
             variant="outlined"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -56,7 +56,7 @@
             :items="input.options || []"
             density="comfortable"
             variant="outlined"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -65,29 +65,24 @@
             v-else-if="input.dataType === 'Checkbox'"
             :label="input.label"
             density="comfortable"
-            class="mb-1"
+            class="filter-field mb-1"
             readonly
           />
         </template>
       </v-card-text>
 
-      <v-toolbar density="compact" class="flex-grow-0">
-        <v-row no-gutters>
-          <v-col cols="12">
-            <v-btn
-              tile
-              block
-              variant="flat"
-              color="black"
-              class="text-none"
-              height="48"
-              @click="$emit('update:modelValue', false)"
-            >
-              Close Preview
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <!-- The design's modal footer. The Close button was a `color="black"`
+           square-cornered block fill - the same black on both themes, and the
+           shape of a primary action for what is only a dismiss. -->
+      <div class="screen-modal__footer flex-grow-0">
+        <v-btn
+          variant="outlined"
+          class="screen-btn-ghost"
+          @click="$emit('update:modelValue', false)"
+        >
+          Close Preview
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>

package/components/OnlineFormsConfiguration.vue

@@ -22,24 +22,23 @@
       <AppCard class="table-card">
         <CardToolbar :count="pageRange">
           <template #left>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
+            <!-- The design's 32px icon button, the same one every other
+                 converted table toolbar uses, instead of Vuetify's tinted
+                 fab. -->
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
               @click="getOnlineFormConfigurations"
-            >
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
-              :color="sortAlpha ? 'primary' : undefined"
+            />
+            <AppButton
+              variant="icon"
+              icon="mdi-sort-alphabetical-ascending"
+              class="online-forms-config__sort"
+              :class="{ 'online-forms-config__sort--on': sortAlpha }"
               :title="sortAlpha ? 'Sorted A–Z' : 'Sort A–Z'"
               @click="sortAlpha = !sortAlpha"
-            >
-              <v-icon>mdi-sort-alphabetical-ascending</v-icon>
-            </v-btn>
+            />
             <AppField
               v-model="search"
               search
@@ -109,12 +108,15 @@
         @cancel="previewDialog = false"
       >
         <template #title-actions>
+          <!-- `color="white"` was correct only while the fill's title bar was a
+               hardcoded dark slab. The bar now paints from `--card`, so the
+               pencil takes the card's own ink; `error` is a theme colour and
+               follows both themes. -->
           <v-btn
             v-if="canUpdate && canUpdateOnlineFormConfiguration"
             icon
             size="small"
             variant="text"
-            color="white"
             @click="openEditDialog()"
           >
             <v-icon>mdi-pencil</v-icon>
@@ -133,34 +135,38 @@
       </OnlineFormFill>
 
       <!-- Fallback: no block definition found for this form type -->
-      <v-card v-else width="100%">
-        <v-card-text class="text-center pa-10">
-          <v-icon size="48" class="mb-3 text-medium-emphasis">mdi-file-question-outline</v-icon>
-          <div class="text-body-2 text-medium-emphasis">
-            No preview available for "{{ selectedFormType }}".
-          </div>
-        </v-card-text>
-        <v-toolbar density="compact">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="previewDialog = false">
+      <v-card v-else class="screen-modal" width="100%">
+        <!-- The design's empty block, the same one every other "nothing to
+             show here" surface in the layer draws. -->
+        <div class="screen-empty">
+          <v-icon size="48">mdi-file-question-outline</v-icon>
+          <div>No preview available for "{{ selectedFormType }}".</div>
+        </div>
+        <div class="screen-modal__footer">
+          <v-btn variant="outlined" class="screen-btn-ghost" @click="previewDialog = false">
             Close
           </v-btn>
-        </v-toolbar>
+        </div>
       </v-card>
     </v-dialog>
 
     <!-- Delete Dialog -->
+    <!-- 520px is the handoff's `--modal-w`. The two `v-toolbar`s this drew for
+         its title row and its footer were Vuetify `surface` slabs - a visible
+         grey bar on the dark card; a `v-card-title` and the shared
+         `.screen-modal__footer` are the same rows on the card's own surface.
+         The confirming button was a hardcoded `color="black"` fill, the same
+         black on both themes. -->
     <v-dialog
       v-model="confirmDialog"
       :loading="deleteLoading"
-      width="450"
+      width="520"
       persistent
     >
-      <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
-          <span class="font-weight-medium text-h5">Delete Online Form</span>
-        </v-toolbar>
-        <v-card-text>
-          <p class="text-subtitle-2 text-center">
+      <v-card class="screen-modal" width="100%">
+        <v-card-title>Delete Online Form</v-card-title>
+        <v-card-text class="screen-modal__body">
+          <p class="text-center">
             Are you sure you want to delete this online form? This action cannot
             be undone.
           </p>
@@ -171,38 +177,25 @@
             </span>
           </v-row>
         </v-card-text>
-        <v-toolbar density="compact">
-          <v-row no-gutters>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                variant="text"
-                class="text-none"
-                @click="confirmDialog = false"
-                :disabled="deleteLoading"
-              >
-                Close
-              </v-btn>
-            </v-col>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                color="black"
-                variant="flat"
-                class="text-none"
-                :loading="deleteLoading"
-                :disabled="deleteLoading"
-                @click="handleDeleteOnlineFormConfiguration()"
-              >
-                Delete Online Form
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-toolbar>
+        <div class="screen-modal__footer">
+          <v-btn
+            variant="outlined"
+            class="screen-btn-ghost"
+            :disabled="deleteLoading"
+            @click="confirmDialog = false"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            variant="flat"
+            class="screen-btn-primary"
+            :loading="deleteLoading"
+            :disabled="deleteLoading"
+            @click="handleDeleteOnlineFormConfiguration()"
+          >
+            Delete Online Form
+          </v-btn>
+        </div>
       </v-card>
     </v-dialog>
 
@@ -433,4 +426,12 @@ function successUpdate() {
 .online-forms-config__search {
   max-width: 240px;
 }
+
+/* The sort toggle is the only control on this toolbar with an on/off state.
+   `--accent-strong` is the design's own accent; the icon button has no
+   "selected" variant, so the state is one declaration rather than a variant
+   nothing else would use. */
+.online-forms-config__sort--on {
+  color: var(--accent-strong);
+}
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.158",
+  "version": "3.2.2-staging.160",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/status.ts

@@ -58,6 +58,11 @@ const TONES: Record<string, TStatusTone> = {
   resolved: "ok", // was #4CAF50, green
   active: "ok", // was `success`
 
+  // An online-form submission sent back to the resident to correct and send
+  // again. Unlisted it would come out neutral, which would make "needs your
+  // attention" look the same as "nothing is happening".
+  resubmission: "warn",
+
   assigned: "info", // was `primary`, on the access-card details dialog
   replaced: "warn", // was `orange`, same screen
   returned: "warn", // was `orange`, same screen - the card came back