@7365admin1/layer-common 3.2.2-staging.146 → 3.2.2-staging.148

package/components/BtnUploadFile.vue

@@ -10,12 +10,17 @@
       <v-row no-gutters>
         <v-col v-if="value || readOnly" cols="12">
           <v-row no-gutters>
+            <!-- The strip is one control split in two: the file name, and the
+                 cross that clears it. `rounded=""` on the read-only card was
+                 not "no radius" - Vuetify's `useRounded` treats an empty string
+                 as `true` and adds `.rounded`, i.e. its own 4px. The design's
+                 radius is stated here instead, on both ends. -->
             <v-card
               variant="outlined"
               border="thin"
-              class="px-4 text-caption font-weight-medium"
-              :rounded="readOnly ? '' : '0 s'"
-              height="36"
+              class="btn-input-file__name"
+              :class="{ 'btn-input-file__name--solo': readOnly }"
+              height="40"
               @click="emit('click:view')"
             >
               <v-row no-gutters class="fill-height" align="center">
@@ -26,24 +31,28 @@
               v-if="!readOnly"
               variant="outlined"
               border="s-0 thin"
-              rounded="0 e"
-              class="px-4 d-inline"
-              height="36"
+              class="btn-input-file__clear"
+              height="40"
               @click="emit('click:close')"
             >
               <v-row no-gutters class="fill-height" align="center">
-                <v-icon size="small"> mdi-close </v-icon>
+                <v-icon size="18"> mdi-close </v-icon>
               </v-row>
             </v-card>
           </v-row>
         </v-col>
 
         <v-col v-else cols="12">
+          <!-- This arm is the `v-else` of `v-if="value || readOnly"`, so
+               `value` is always falsy by the time it renders: the old
+               `:prepend-icon="value ? '' : ..."` had an arm that could never be
+               taken, and the icon is unconditional. `screen-btn-ghost` is the
+               design's 40px bordered button while keeping Vuetify's `loading`
+               spinner, which the upload needs and `AppButton` does not have. -->
           <v-btn
-            variant="outlined"
-            border="thin"
-            class="text-none"
-            :prepend-icon="value ? '' : 'mdi-tray-arrow-up'"
+            variant="flat"
+            class="text-none screen-btn-ghost"
+            prepend-icon="mdi-tray-arrow-up"
             :disabled="loading"
             :loading="loading"
             @click="selectAttachment"
@@ -137,3 +146,36 @@ const errorMessage = computed(() => {
   return null;
 });
 </script>
+
+<style scoped>
+/* The design's control box on the attachment strip: 40px, `--r-inner` on the
+   outer corners only (the two cards butt together), a `--line` edge and the
+   13.5px/500 cell type - not Vuetify's `text-caption` scale and 4px radius.
+   `:deep` because the box being styled is the `v-card` root Vuetify renders. */
+.btn-input-file__name,
+.btn-input-file__clear {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text2);
+  border-color: var(--border);
+}
+
+.btn-input-file__name {
+  padding-inline: 14px;
+  border-start-start-radius: var(--r-inner);
+  border-end-start-radius: var(--r-inner);
+}
+
+/* Read-only: there is no cross beside it, so it is a single rounded box. */
+.btn-input-file__name--solo {
+  border-radius: var(--r-inner);
+}
+
+.btn-input-file__clear {
+  display: inline;
+  padding-inline: 12px;
+  border-start-end-radius: var(--r-inner);
+  border-end-end-radius: var(--r-inner);
+}
+</style>

package/components/Input/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="d-flex flex-column">
-        <v-text-field v-bind="$attrs" ref="datePickerRef" :model-value="dateFormattedReadOnly" autocomplete="off"
+        <v-text-field v-bind="$attrs" class="filter-field" ref="datePickerRef" :model-value="dateFormattedReadOnly" autocomplete="off"
             :placeholder="placeholder" :rules="rules" style="z-index: 10" @click="openDatePicker" @click:clear.stop="clearDate">
             <template #append-inner>
                 <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />

package/components/Input/DateTimePicker.vue

@@ -2,6 +2,7 @@
   <div class="d-flex flex-column">
     <v-text-field
       v-bind="$attrs"
+      class="filter-field"
       ref="dateTimePickerRef"
       :model-value="dateTimeFormattedReadOnly"
       autocomplete="off"

package/components/Input/FileV2.vue

@@ -22,7 +22,7 @@
     <template v-else>
       <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
         :loading="processing" :disabled="processing" :height="height" :title="title" :accept="accept"
-        :name="`upload_images`" class="text-caption w-100" clearable :multiple="multiple">
+        :name="`upload_images`" class="w-100 file-v2__drop" clearable :multiple="multiple">
         <template #item="{ props: itemProps, file }">
           <v-file-upload-item v-bind="itemProps" lines="one" nav @click="handleClickItem(file)">
             <template #prepend>
@@ -30,8 +30,19 @@
             </template>
 
             <!-- delete button NOT shown in view mode -->
-            <template #clear="{ props: clearProps }">
-              <v-btn v-if="!viewMode" color="primary" @click.stop="handleRemove(file)"></v-btn>
+            <!-- This button had NO icon and NO label, so it drew as an empty
+                 slab, and `color="primary"` filled that slab with the design's
+                 FOREGROUND token (the link ink) rather than a fill. It is the
+                 remove control for one attached file: a plain close glyph. -->
+            <template #clear>
+              <v-btn
+                v-if="!viewMode"
+                icon="mdi-close"
+                variant="text"
+                size="small"
+                aria-label="Remove file"
+                @click.stop="handleRemove(file)"
+              />
             </template>
           </v-file-upload-item>
         </template>
@@ -39,7 +50,7 @@
     </template>
 
     <v-row no-gutters class="w-100" v-if="errorMessage">
-      <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
+      <p class="text-error w-100 text-center file-v2__error">{{ errorMessage }}</p>
     </v-row>
 
     <ImageCarousel v-model="showImageCarousel" :files="idsArray" :active-file-id="activeImageId" />
@@ -224,12 +235,34 @@ async function downloadFile(id: string, filename: string) {
 
 
 <style scoped>
+/* The drop zone on the design's surface: `--r-inner`, a `--border` edge and the
+   13.5px cell type, instead of Vuetify's 4px radius and `text-caption` scale.
+   `:deep` because every box below is rendered by `v-file-upload`. */
+.file-v2__drop {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  border-radius: var(--r-inner);
+  border-color: var(--border);
+}
+
+.file-v2__drop :deep(.v-file-upload-item) {
+  border-radius: var(--r-inner);
+}
+
 * :deep(.v-file-upload-title) {
-  font-size: 1rem;
-  font-weight: 500;
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
 }
 
 * :deep(.v-file-upload-items) {
   min-width: 100%;
 }
+
+.file-v2__error {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
 </style>

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/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/VehicleNumber.vue

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

package/components/SwitchContext.vue

@@ -201,9 +201,21 @@ const selectItem = (value: string) => {
   color: var(--text);
 }
 
-.switch-context__panel {
-  border-radius: var(--r-menu);
-  box-shadow: var(--shadow-menu);
+/* The panel is a `v-card`, and Vuetify puts it inside `.v-overlay__content`.
+   `screens.css` gives EVERY card in an overlay the modal shape - 16px and the
+   modal shadow - with `!important`, because dialogs open from sixty components
+   and the shape had to be stated once. A menu is an overlay too, so the panel
+   was silently taking the modal shape: measured 16px and
+   `rgba(10, 12, 16, 0.3) 0 24px 64px`, not the 14px `--r-menu` and the lighter
+   `--shadow-menu` it asks for.
+   `!important` alone does NOT win it back: `.switch-context__panel[data-v-...]`
+   and `.v-overlay__content > .v-card` are both two classes, the scope attribute
+   counts, and a tie goes to whichever sheet loaded last - which is screens.css.
+   Measured still 16px with `!important` on the plain class. So the selector
+   carries the overlay class too, to out-specify rather than tie. */
+.v-overlay__content > .switch-context__panel {
+  border-radius: var(--r-menu) !important;
+  box-shadow: var(--shadow-menu) !important;
   border: 1px solid var(--border);
   background: var(--card);
   padding: 14px;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.146",
+  "version": "3.2.2-staging.148",
   "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.",