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

package/components/Input/InputPhoneNumberV2.vue

@@ -8,7 +8,7 @@
         item-title="dial_code"
         item-value="code"
         hide-details
-        class="px-0"
+        class="px-0 filter-field"
         :density="density"
         style="max-width: 110px"
         :rules="[...props.rules]"
@@ -31,6 +31,7 @@
 
       <v-mask-input
         v-model="input"
+        class="filter-field"
         :mask="currentMask"
         :rules="[...props.rules, validatePhone]"
         ref="maskRef"

package/components/Input/ListGroupSelection.vue

@@ -1,6 +1,6 @@
 <template>
   <v-input v-bind="attrs">
-    <v-card width="100%" v-bind="attrs">
+    <v-card class="perm-list screen-card" elevation="0" width="100%" v-bind="attrs">
       <v-list
         v-model:selected="selected"
         lines="two"
@@ -18,14 +18,14 @@
           <v-list-group :value="permissionKey" fluid>
             <template v-slot:activator="{ props }">
               <v-list-item v-bind="props" density="compact">
-                <span class="text-capitalize">
+                <span class="perm-list__group text-capitalize">
                   {{ formatResourceLabel(String(permissionKey)) }}
                 </span>
 
                 <template #prepend>
-                  <v-chip class="mr-2" small>
+                  <span class="perm-list__count mr-2">
                     {{ selectedActionCount(String(permissionKey)) }}
-                  </v-chip>
+                  </span>
                 </template>
               </v-list-item>
             </template>
@@ -34,13 +34,13 @@
               <v-divider></v-divider>
               <v-list-item v-if="attrs.readonly" density="compact">
                 <template #title class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__title text-capitalize">
                     {{ String(itemKey).replace(/-/g, " ") }}
                   </span>
                 </template>
 
                 <template #subtitle class="pl-2">
-                  <span class="text-subtitle-2">{{ item.description }}</span>
+                  <span class="perm-list__sub">{{ item.description }}</span>
                 </template>
               </v-list-item>
 
@@ -50,13 +50,13 @@
                 density="compact"
               >
                 <template #title class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__title text-capitalize">
                     {{ String(itemKey).replace(/-/g, " ") }}
                   </span>
                 </template>
 
                 <template #subtitle class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__sub text-capitalize">
                     {{ String(item.description).replace(/-/g, " ") }}
                   </span>
                 </template>
@@ -101,3 +101,51 @@ const selectedActionCount = (resource: string) => {
     .length;
 };
 </script>
+
+<style scoped>
+.perm-list {
+  font-family: var(--font-sans);
+}
+
+.perm-list__group {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--text);
+}
+
+/**
+ * The count beside each permission group. The handoff draws no counter here at
+ * all, so this is the neutral chip's own geometry - 999px, 12px/700, the tone
+ * wash - rather than a new shape: a `v-chip small`, which is what it was, is
+ * 24px of Vuetify grey with its own font.
+ */
+.perm-list__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: var(--r-pill);
+  background: var(--hover);
+  color: var(--text2);
+  font-size: var(--fs-chip);
+  font-weight: 700;
+}
+
+/* A ticked row was Vuetify's own rgb(224,224,224) slab - a light-theme grey
+   painted on the dark theme too. Same emphasis, on the design's hover wash. */
+.perm-list :deep(.v-list-item--active) {
+  background: var(--hover);
+}
+
+.perm-list__title {
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.perm-list__sub {
+  font-size: var(--fs-cell-dense);
+  color: var(--muted);
+}
+</style>

package/components/Input/NRICNumber.vue

@@ -1,6 +1,7 @@
 <template>
   <v-text-field
     v-model.trim="model"
+    class="filter-field"
     :rules="rules"
     :maxlength="maxlength"
     :placeholder="placeholder"

package/components/Input/NewDate.vue

@@ -113,6 +113,7 @@ const modifyDatePart = (
 <template>
   <v-text-field
     ref="inputRef"
+    class="filter-field"
     v-model="dateValue"
     placeholder="MM/DD/YYYY"
     @input="formatDate"

package/components/Input/Number.vue

@@ -102,6 +102,7 @@ const restoreCursor = () => {
     ref="inputRef"
     v-model="formattedValue"
     v-bind="attrs"
+    class="filter-field"
     type="text"
     @keydown="handleKeyDown"
   >

package/components/Input/Password.vue

@@ -2,6 +2,7 @@
   <v-text-field
     id="_password"
     v-model="password"
+    class="filter-field"
     placeholder="Password"
     :type="showPassword ? 'text' : 'password'"
     :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"

package/components/Input/PhoneNumber.vue

@@ -17,9 +17,10 @@
           zIndex: 3000
         }"
         no-data-text="No countries available"
+        class="filter-field"
       >
         <template #selection="{ item }">
-          <span class="text-body-2">{{ item.raw.dialCode }}</span>
+          <span class="phone-input__code">{{ item.raw.dialCode }}</span>
         </template>
         <template #item="{ item }">
           <v-list-item-title>
@@ -38,6 +39,7 @@
         :rules="phoneValidationRules"
         hide-details="auto"
         type="tel"
+        class="filter-field"
         @input="handlePhoneInput"
       />
     </v-col>
@@ -186,3 +188,21 @@ watch(localDialCode, () => {
   }
 });
 </script>
+
+<style scoped>
+/**
+ * The dial-code selector and the number beside it. Both were factory Vuetify
+ * fields - Roboto, 4px radius, Vuetify's own border - inside forms whose every
+ * other field is already the design's. `.filter-field` is that field, and it is
+ * what `MemberInformation`, `VehicleForm` and `VisitorForm` already put around
+ * this control, so the two halves now match their own row.
+ *
+ * The selected dial code was `text-body-2`, Vuetify's 14px/400 Roboto scale.
+ * It is the same ink as a table cell, so it takes the cell's tokens.
+ */
+.phone-input__code {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+</style>

package/components/Input/VehicleNumber.vue

@@ -1,6 +1,7 @@
 <template>
   <v-text-field
     v-model="model"
+    class="filter-field"
     :rules="rules"
     :maxlength="maxlength"
     :placeholder="placeholder"

package/components/InputLabel.vue

@@ -1,6 +1,6 @@
 <template>
-  <span :class="`text-subtitle-2 font-weight-medium ${props.class}`">
-    {{ title }} <span v-if="props.required" class="text-error">*</span>
+  <span :class="`app-input-label ${props.class}`">
+    {{ title }} <span v-if="props.required" class="app-input-label__req">*</span>
   </span>
 </template>
 

package/components/InvitationClientForm.vue

@@ -1,14 +1,8 @@
 <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">
-          {{ props.title }}
-        </span>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal">
+    <v-card-title>{{ props.title }}</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
+    <v-card-text class="screen-modal__body">
       <v-form v-model="validForm" ref="form" :disabled="disable">
         <v-row no-gutters>
 
@@ -17,6 +11,7 @@
             <InputLabel title="Email" required />
             <v-text-field
               v-model="invite.email"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule, emailRule]"
               :loading="loading.verifyingEmail"
@@ -37,6 +32,7 @@
               multiple
               chips
               closable-chips
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               @update:model-value="handleUpdateApp"
@@ -50,8 +46,9 @@
                     <v-checkbox-btn
                       :model-value="invite.app.includes(item.raw.value)"
                       :disabled="item.raw.disabled"
-                      color="black"
-                      density="comfortable"
+                      color="primary"
+                      class="filter-field"
+              density="comfortable"
                     />
                   </template>
 
@@ -79,6 +76,7 @@
               :items="roles"
               item-title="name"
               item-value="_id"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
             />
@@ -90,6 +88,7 @@
             <v-autocomplete
               v-model="invite.site"
               :items="sites"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               @update:model-value="handleUpdateSite"
@@ -109,21 +108,24 @@
     </v-card-text>
 
     <!-- ACTION -->
-    <v-toolbar density="compact">
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn block variant="text" class="text-none" size="48" @click="cancel">
+        <v-col cols="6" class="pr-2">
+          <v-btn
+            block
+            variant="outlined"
+            class="text-none screen-btn-ghost"
+            @click="cancel"
+          >
             Cancel
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :disabled="!validForm"
             :loading="loading.submittingForm"
             @click="submit"
@@ -132,7 +134,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/InvitationForm.vue

@@ -1,13 +1,8 @@
 <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">
-          {{ props.title }}
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
+  <v-card width="100%" class="screen-modal">
+    <v-card-title>{{ props.title }}</v-card-title>
+
+    <v-card-text class="screen-modal__body">
       <v-form v-model="validForm" ref="form" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-2">
@@ -16,6 +11,7 @@
               <v-col cols="12">
                 <v-text-field
                   v-model="invite.email"
+                  class="filter-field"
                   density="comfortable"
                   :rules="[requiredRule, emailRule]"
                   :loading="loading.verifyingEmail"
@@ -34,6 +30,7 @@
               <v-col cols="12">
                 <v-autocomplete
                   v-model="invite.app"
+                  class="filter-field"
                   density="comfortable"
                   :rules="[requiredRule]"
                   :items="apps"
@@ -53,6 +50,7 @@
                   item-title="name"
                   item-value="_id"
                   :rules="[requiredRule]"
+                  class="filter-field"
                   density="comfortable"
                 ></v-autocomplete>
               </v-col>
@@ -66,6 +64,7 @@
                 <v-autocomplete
                   v-model="invite.site"
                   :items="sites"
+                  class="filter-field"
                   density="comfortable"
                   :rules="[requiredRule]"
                   @update:model-value="handleUpdateSite"
@@ -99,29 +98,24 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col cols="6" class="pr-2">
           <v-btn
-            tile
             block
-            variant="text"
-            class="text-none"
-            size="48"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="cancel"
           >
             {{ props.cancelText }}
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
-            tile
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :disabled="!validForm"
             :loading="loading.submittingForm"
             @click="submit"
@@ -130,7 +124,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/InvitationMain.vue

@@ -1,67 +1,45 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          class="text-none mr-2"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="inviteMember()"
-          v-if="props.inviteMember"
-        >
-          Invite member
-        </v-btn>
-      </v-row>
-    </v-col>
+  <div>
+    <!-- The design's page scaffold: a title with the action on the right of
+         that line, then ONE row inside the card - the two tabs on the left,
+         refresh, the range and the pager on the right. The tabs route exactly
+         as they did; only where they sit has changed. -->
+    <PageHeader title="Invitations">
+      <template v-if="props.inviteMember" #actions>
+        <AppButton @click="inviteMember()">Invite member</AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
-              @click="getVerifications()"
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #tabs>
+            <NuxtLink
+              v-for="tab in invitationTabs"
+              :key="tab.status"
+              class="app-tab"
+              :class="{ 'app-tab--active': props.status === tab.status }"
+              :to="{ name: props.route, params: { status: tab.status } }"
             >
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
+              {{ tab.label }}
+            </NuxtLink>
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getVerifications"
-              />
-            </v-row>
-          </template>
-
-          <template #extension>
-            <v-tabs>
-              <v-tab
-                :to="{
-                  name: props.route,
-                  params: { status: 'pending' },
-                }"
-              >
-                Pending
-              </v-tab>
-              <v-tab
-                :to="{
-                  name: props.route,
-                  params: { status: 'expired' },
-                }"
-              >
-                Expired
-              </v-tab>
-            </v-tabs>
+          <template #right>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
+              @click="getVerifications()"
+            />
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="getVerifications"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -77,7 +55,7 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ value.length }}</v-chip>
+            <StatusChip :dot="false" tone="info" :label="String(value.length)" />
           </template>
           <template #item.createdAt="{ item }">
             {{ item.createdAt ? formatDate(item.createdAt) : "" }}
@@ -103,7 +81,7 @@
             {{ formatStatus(value) }}
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
 
     <ConfirmDialog
@@ -153,10 +131,17 @@
         :app="props.app"
       />
     </v-dialog>
-  </v-row>
+    </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
+/** The same two tabs, same labels, same routes. */
+const invitationTabs = [
+  { status: "pending", label: "Pending" },
+  { status: "expired", label: "Expired" },
+];
+
 const props = defineProps({
   app: {
     type: String,