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

package/components/TiptapEditorQr.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <VCard class="mx-auto">
+    <!-- AppCard, not VCard: the design's 14px radius and 1px rule, without
+         Vuetify's own elevation and 4px corner fighting the class for it.
+         Same swap as TiptapEditor, which wraps the same editor. -->
+    <AppCard class="mx-auto">
       <VuetifyTiptap
         v-model="content"
         markdown-theme="github"
@@ -9,7 +12,7 @@
         :maxWidth="maxWidth"
         :disabled="isViewMode"
       />
-    </VCard>
+    </AppCard>
   </div>
 </template>
 

package/components/Tooltip/Info.vue

@@ -1,33 +1,78 @@
+<!--
+  The little "i" that explains a field.
+
+  TWO FIXES, one of them the same defect batch P found in the toast:
+
+  1. `size` is declared `default: ""`. An EMPTY STRING IS NOT `undefined`, so
+     Vue's default machinery never runs and the empty string reaches Vuetify,
+     which builds the class `v-btn--size-` - a class that matches nothing. The
+     button then had no size class at all and fell back to the bare `.v-btn`
+     box. `props.size || undefined` lets Vuetify's own default apply when a
+     caller says nothing, which is what the prop was written to mean.
+  2. `p-0 m-0` are not Vuetify classes and never were - nothing in this project
+     defines them. Dead attributes, removed.
+
+  DESIGN GAP, STATED: the handoff draws no tooltip anywhere (`grep -i tooltip`
+  returns nothing). So the surface below is not invented - it is the same
+  assembly the toast uses for the same reason: the design's inner radius, its
+  menu shadow, its font and its button type scale, applied to Vuetify's
+  tooltip in place of a 4px Roboto pill.
+-->
 <template>
-    <v-tooltip v-bind="$attrs" :text="text" @click.stop>
-        <template v-slot:activator="{ props: activatorProps }">
-            <v-btn icon="mdi-information-symbol" v-bind="activatorProps" class="p-0 m-0 d-flex align-center"
-                :density="density" :size="size" color="primary-button" />
-        </template>
-    </v-tooltip>
+  <v-tooltip v-bind="$attrs" :text="text" content-class="app-tooltip" @click.stop>
+    <template #activator="{ props: activatorProps }">
+      <v-btn
+        icon="mdi-information-symbol"
+        v-bind="activatorProps"
+        class="d-flex align-center"
+        :density="density"
+        :size="props.size || undefined"
+        color="primary-button"
+      />
+    </template>
+  </v-tooltip>
 </template>
 
 <script setup lang="ts">
+import type { VTooltip } from "vuetify/components";
 
-import type { VTooltip} from "vuetify/components"
-
-type TTooltipDensity = VTooltip["$props"]["density"]
+type TTooltipDensity = VTooltip["$props"]["density"];
 
 const props = defineProps({
-    text: {
-        type: String,
-        default: ""
-    },
-     size: {
-        type: String,
-        default: ""
-    },
-    density: {
-        type: String as PropType<TTooltipDensity>,
-        default: "default"
-    }
-})
-
+  text: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: String,
+    default: "",
+  },
+  density: {
+    type: String as PropType<TTooltipDensity>,
+    default: "default",
+  },
+});
 </script>
 
-<style scoped></style>
+<style>
+/* NOT scoped: a tooltip teleports to the overlay container, outside this
+   component's DOM, so a scoped rule cannot reach it. The class is namespaced
+   for the same reason. */
+.v-tooltip > .v-overlay__content.app-tooltip {
+  /* MEASURED FIRST, then fixed. Left to Vuetify the panel came out
+     `rgb(251,251,248)` on the light page - `--sidebar`, the navigation-rail
+     colour, 1.03:1 against `--bg` with no border. The identical fall-through
+     batch P found behind the invisible toast. `--card` + `--border` is what
+     every other floating panel in this product uses (see `.app-profile-menu`
+     in `Layout/Header.vue`), so the edge is what carries the boundary. */
+  background: var(--card);
+  border: 1px solid var(--border);
+  color: var(--text2);
+  border-radius: var(--r-inner);
+  box-shadow: var(--shadow-menu);
+  font-family: var(--font-sans);
+  font-size: var(--fs-btn);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+</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"
@@ -149,51 +141,39 @@
     </HygieneUpdateMoreAction>
   </v-dialog>
 
-  <v-dialog v-model="dialogDeleteUnit" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            Delete {{ selectedUnit?.name || "Unit" }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text>
-        <span class="text-subtitle-2"
-          >Are you sure you want to delete this unit?</span
-        >
+  <!--
+    Was a `v-toolbar` title bar over a toolbar footer of two block buttons, the
+    confirm one on `color="black"` - not a token, so it drew a light-theme fill
+    on the dark theme. The shared confirmation shape now.
+  -->
+  <v-dialog v-model="dialogDeleteUnit" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        Delete {{ selectedUnit?.name || "Unit" }}
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
+        Are you sure you want to delete this unit?
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="dialogDeleteUnit = false"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold"
-              height="48"
-              :loading="submitting"
-              @click="_deleteUnit"
-            >
-              Delete
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogDeleteUnit = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="_deleteUnit"
+        >
+          Delete
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 

package/components/UnitPersonCard.vue

@@ -3,26 +3,26 @@
     <v-row>
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Name" />
-        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly"
-          :class="{ 'no-pointer': readOnly }" />
+        <v-text-field :model-value="person.name" class="filter-field" density="comfortable"
+          :readonly="readOnly" :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Email Address" />
-        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly"
-          :class="{ 'no-pointer': readOnly }" />
+        <v-text-field :model-value="person.email" class="filter-field" density="comfortable"
+          :readonly="readOnly" :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="NRIC" />
-        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly"
-          :class="{ 'no-pointer': readOnly }" />
+        <v-text-field :model-value="person.nric" class="filter-field" density="comfortable"
+          :readonly="readOnly" :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Mobile Number" />
-        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly"
-          :class="{ 'no-pointer': readOnly }" />
+        <v-text-field :model-value="person.contact" class="filter-field" density="comfortable"
+          :readonly="readOnly" :class="{ 'no-pointer': readOnly }" />
       </v-col>
     </v-row>
 
@@ -30,11 +30,14 @@
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Other Documents and Files" :viewMode="readOnly" />
 
-        <p v-if="!person.files?.length" class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5">
+        <!-- Was `text-blue-darken-2`, a fixed Vuetify blue that stays the same
+             on the dark theme. An empty note is `--muted`; a file link is
+             `--accent-text`, the design's link ink. -->
+        <p v-if="!person.files?.length" class="screen-hint unit-person__empty ml-2 mt-5">
           **No documents to display**
         </p>
-        <v-list v-else dense nav class="mt-2">
-          <v-list-item v-for="file in person.files" :key="file.id" class="text-blue-darken-2"
+        <v-list v-else dense nav class="mt-2 unit-person__files">
+          <v-list-item v-for="file in person.files" :key="file.id" class="unit-person__file"
             :href="getFileUrl(file.id)" target="_blank">
             <v-list-item-content>
               <v-list-item-title class="d-flex align-center">
@@ -53,11 +56,14 @@
       <v-col v-if="prop.showOwnerOption" cols="12" md="4">
         <v-checkbox :model-value="person.isOwner" readonly hide-details density="compact" @click="handleClick">
           <template #label>
-            <span class="font-weight-bold text-subtitle-2 ml-2">Is Owner?</span>
+            <span class="unit-person__check-label ml-2">Is Owner?</span>
           </template>
         </v-checkbox>
 
-        <span class="d-flex text-caption text-gray-5 ml-7">As owner, you will be receiving emails and updates
+        <!-- `text-gray-5` is not a Vuetify class and not a token - it resolved
+             to nothing, so this sat on the body ink. `.screen-hint` is the
+             design's sub-line. -->
+        <span class="d-flex screen-hint ml-7">As owner, you will be receiving emails and updates
                 related to this unit.</span>
       </v-col>
     </v-row>
@@ -120,4 +126,27 @@ const handleClick = () => {
 .no-pointer {
   pointer-events: none;
 }
+
+/* `.screen-hint` carries the ink; only the size is stated here, and it is the
+   cell size, not Vuetify's `text-caption` (12px/400 Roboto). */
+.unit-person__empty {
+  font-size: var(--fs-cell);
+}
+
+/* A `v-list` paints Vuetify's own `surface` - a square-cornered lighter slab
+   sitting on the card, measured on the dark theme. The files are links on the
+   card, so the list carries no surface of its own. */
+.unit-person__files {
+  background: transparent;
+}
+
+.unit-person__file {
+  color: var(--accent-text);
+}
+
+.unit-person__check-label {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
 </style>

package/components/VehicleAddSelection.vue

@@ -1,36 +1,24 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          Add Vehicle
-        </span>
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
-      <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Status</span>
-      <template v-for="item in selection" :key="item.value">
-        <v-btn color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
-      </template>
-    </v-card-text>
-
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="12">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="cancel"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal vehicle-add">
+    <v-card-title>Add Vehicle</v-card-title>
+
+    <div class="screen-modal__body vehicle-add__body">
+      <p class="vehicle-add__hint">Please Select Status</p>
+      <AppButton
+        v-for="item in selection"
+        :key="item.value"
+        class="vehicle-add__option"
+        @click="select(item.value)"
+      >
+        {{ item.label }}
+      </AppButton>
+    </div>
+
+    <div class="vehicle-add__footer">
+      <AppButton variant="ghost" class="vehicle-add__cancel" @click="cancel">
+        Cancel
+      </AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -56,3 +44,31 @@ function select(value: TVehicleType | 'seasonpass') {
   emit("select", value);
 }
 </script>
+
+<style scoped>
+/* The three choices are full-width by the screen's own design, so the only
+   thing said here is the width and the stack - the button itself is AppButton. */
+.vehicle-add__body {
+  padding: 20px;
+}
+
+.vehicle-add__hint {
+  margin: 0 0 14px;
+  text-align: center;
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+
+.vehicle-add__option {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.vehicle-add__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 20px 20px;
+}
+</style>