@7365admin1/layer-common 3.2.2-staging.136 → 3.2.2-staging.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,13 +1,10 @@
1
1
  <template>
2
- <v-card width="100%">
3
- <v-toolbar>
4
- <v-row no-gutters class="fill-height px-6" align="center">
5
- <span class="font-weight-bold text-h5"> Add Unit </span>
6
- </v-row>
7
- </v-toolbar>
8
- <v-card-text style="max-height: 100vh; overflow-y: auto">
2
+ <v-card width="100%" class="screen-modal">
3
+ <v-card-title>Add Unit</v-card-title>
4
+
5
+ <v-card-text class="screen-modal__body pa-0">
9
6
  <v-form v-model="validForm" :disabled="disable">
10
- <v-row no-gutters>
7
+ <v-row no-gutters class="px-6 pt-4">
11
8
  <!-- <v-col cols="12" class="mt-2">
12
9
  <v-row no-gutters>
13
10
  <InputLabel class="text-capitalize" title="Name" required />
@@ -25,11 +22,11 @@
25
22
  <v-row>
26
23
  <v-col cols="12" md="6" class="mt-2">
27
24
  <v-row no-gutters>
28
- <InputLabel class="text-capitalize" title="Block" required />
25
+ <InputLabel class="text-capitalize font-weight-bold" title="Block" required />
29
26
  <v-col cols="12">
30
27
  <v-autocomplete v-model="buildingUnit.building" :items="buildings" item-title="name"
31
- item-value="_id" v-model:search="searchBuilding" :hide-no-data="false" density="comfortable"
32
- :rules="[requiredRule]" variant="outlined">
28
+ item-value="_id" v-model:search="searchBuilding" :hide-no-data="false" class="filter-field"
29
+ density="comfortable" :rules="[requiredRule]" variant="outlined">
33
30
  <template v-slot:item="{ props: itemProps, item }">
34
31
  <v-list-item v-bind="itemProps" :title="item?.raw?.name">
35
32
 
@@ -45,20 +42,20 @@
45
42
 
46
43
  <v-col cols="12" md="6" class="mt-2">
47
44
  <v-row no-gutters>
48
- <InputLabel class="text-capitalize" title="Level" required />
45
+ <InputLabel class="text-capitalize font-weight-bold" title="Level" required />
49
46
  <v-col cols="12">
50
47
  <v-select v-model="buildingUnit.level" :items="buildingLevels" item-title="name" item-value="_id"
51
- density="comfortable" :rules="[requiredRule]"></v-select>
48
+ class="filter-field" density="comfortable" :rules="[requiredRule]"></v-select>
52
49
  </v-col>
53
50
  </v-row>
54
51
  </v-col>
55
52
 
56
53
  <v-col cols="12" md="6" class="mt-2">
57
54
  <v-row no-gutters>
58
- <InputLabel class="text-capitalize" title="No. of Units to be added" required />
55
+ <InputLabel class="text-capitalize font-weight-bold" title="No. of Units to be added" required />
59
56
  <v-col cols="12">
60
- <v-text-field v-model.number="buildingUnitQty" density="comfortable" :rules="[requiredRule]"
61
- type="number" @update:model-value="setBuildingLevels()"></v-text-field>
57
+ <v-text-field v-model.number="buildingUnitQty" class="filter-field" density="comfortable"
58
+ :rules="[requiredRule]" type="number" @update:model-value="setBuildingLevels()"></v-text-field>
62
59
  </v-col>
63
60
  </v-row>
64
61
  </v-col>
@@ -176,7 +173,7 @@
176
173
  <v-row no-gutters>
177
174
  <!-- <InputLabel class="text-capitalize font-weight-bold" :title="`#${unitLabelIndex + 1}`" /> -->
178
175
  <v-col cols="12">
179
- <v-text-field v-model.trim="unitLabels[unitLabelIndex]"
176
+ <v-text-field v-model.trim="unitLabels[unitLabelIndex]" class="filter-field"
180
177
  density="comfortable"></v-text-field>
181
178
  </v-col>
182
179
  </v-row>
@@ -225,22 +222,22 @@
225
222
  </v-form>
226
223
  </v-card-text>
227
224
 
228
- <v-toolbar density="compact">
225
+ <v-card-actions class="screen-modal__footer">
229
226
  <v-row no-gutters>
230
- <v-col cols="6">
231
- <v-btn tile block variant="text" class="text-none" size="48" @click="cancel" :disabled="disable">
227
+ <v-col cols="6" class="pr-2">
228
+ <v-btn block variant="outlined" class="text-none screen-btn-ghost" @click="cancel" :disabled="disable">
232
229
  Cancel
233
230
  </v-btn>
234
231
  </v-col>
235
232
 
236
- <v-col cols="6">
237
- <v-btn tile block variant="flat" color="black" class="text-none" size="48" :disabled="!validForm || disable"
233
+ <v-col cols="6" class="pl-2">
234
+ <v-btn block variant="flat" class="text-none screen-btn-primary" :disabled="!validForm || disable"
238
235
  @click="submit" :loading="disable">
239
236
  Submit
240
237
  </v-btn>
241
238
  </v-col>
242
239
  </v-row>
243
- </v-toolbar>
240
+ </v-card-actions>
244
241
 
245
242
  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
246
243
  </v-card>
@@ -1,19 +1,15 @@
1
1
  <template>
2
- <v-card class="pa-2 pb-0">
2
+ <v-card class="screen-modal">
3
3
  <!-- Header -->
4
- <v-card-title class="pb-2">
5
- <span class="text-h6 font-weight-bold">
6
- {{ isEditing ? "Edit Plan" : "Create New Plan" }}
7
- </span>
4
+ <v-card-title>
5
+ {{ isEditing ? "Edit Plan" : "Create New Plan" }}
8
6
  </v-card-title>
9
7
 
10
8
  <!-- Form Content -->
11
- <v-form ref="formRef" class="my-4" @submit.prevent="submit">
12
- <v-card-text class="pa-2 max-h-70vh overflow-y-auto">
9
+ <v-form ref="formRef" @submit.prevent="submit">
10
+ <v-card-text class="screen-modal__body px-6 pt-4">
13
11
  <!-- Plan Details Section -->
14
- <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
15
- Plan Details
16
- </div>
12
+ <div class="plan-form__section">Plan Details</div>
17
13
 
18
14
  <!-- Plan Name -->
19
15
  <v-text-field
@@ -22,8 +18,8 @@
22
18
  placeholder="e.g., Business"
23
19
  variant="outlined"
24
20
  density="compact"
21
+ class="filter-field mb-3"
25
22
  :error-messages="errors.name"
26
- class="mb-3"
27
23
  required
28
24
  >
29
25
  <template #label>
@@ -38,9 +34,9 @@
38
34
  placeholder="Enter description"
39
35
  variant="outlined"
40
36
  density="compact"
37
+ class="filter-field mb-3"
41
38
  rows="2"
42
39
  auto-grow
43
- class="mb-3"
44
40
  />
45
41
 
46
42
  <!-- Max Seats -->
@@ -50,7 +46,7 @@
50
46
  min="0"
51
47
  variant="outlined"
52
48
  density="compact"
53
- class="mb-4"
49
+ class="filter-field mb-4"
54
50
  required
55
51
  >
56
52
  <template #label>
@@ -59,9 +55,7 @@
59
55
  </v-text-field>
60
56
 
61
57
  <!-- Pricing Section -->
62
- <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
63
- Pricing
64
- </div>
58
+ <div class="plan-form__section">Pricing</div>
65
59
 
66
60
  <!-- Plan Type -->
67
61
  <v-select
@@ -69,7 +63,7 @@
69
63
  :items="planTypeOptions"
70
64
  variant="outlined"
71
65
  density="compact"
72
- class="mb-3"
66
+ class="filter-field mb-3"
73
67
  >
74
68
  <template #label>
75
69
  Subscription plan type <span class="text-error">*</span>
@@ -84,7 +78,7 @@
84
78
  placeholder="Select billing cycle"
85
79
  variant="outlined"
86
80
  density="compact"
87
- class="mb-3"
81
+ class="filter-field mb-3"
88
82
  >
89
83
  <template #label>
90
84
  Billing cycle <span class="text-error">*</span>
@@ -93,15 +87,13 @@
93
87
 
94
88
  <!-- Bundle Applications (Chip Toggle) -->
95
89
  <div v-if="form.planType !== 'custom_apps'" class="mb-4">
96
- <div class="text-caption font-weight-medium text-grey-darken-2 mb-2">
97
- Included Applications
98
- </div>
90
+ <div class="plan-form__label mb-2">Included Applications</div>
99
91
 
100
92
  <v-chip-group
101
93
  v-model="form.bundleApps"
102
94
  column
103
95
  multiple
104
- selected-class="bg-grey-darken-3 text-white"
96
+ selected-class="plan-form__chip--on"
105
97
  >
106
98
  <v-chip
107
99
  v-for="app in APP_LIST"
@@ -127,7 +119,7 @@
127
119
  :suffix="form.billingCycle === 'annually' ? '/yr' : '/mo'"
128
120
  variant="outlined"
129
121
  density="compact"
130
- class="mb-3"
122
+ class="filter-field mb-3"
131
123
  >
132
124
  <template #label>
133
125
  Price <span class="text-error">*</span>
@@ -136,7 +128,7 @@
136
128
 
137
129
  <!-- Custom Applications (List Checkbox) -->
138
130
  <div v-if="form.planType === 'custom_apps'" class="mb-4">
139
- <div class="text-caption font-weight-medium text-grey-darken-2 mb-1">
131
+ <div class="plan-form__label mb-1">
140
132
  Included Applications <span class="text-error">*</span>
141
133
  </div>
142
134
 
@@ -161,7 +153,7 @@
161
153
 
162
154
  <template #append>
163
155
  <div class="d-flex align-center" style="gap: 4px">
164
- <span class="text-caption text-grey">$</span>
156
+ <span class="plan-form__unit">$</span>
165
157
  <v-text-field
166
158
  v-model.number="form.customAppPrices[app.value]"
167
159
  type="number"
@@ -172,7 +164,7 @@
172
164
  style="width: 84px"
173
165
  :disabled="!form.customApps.includes(app.value)"
174
166
  />
175
- <span class="text-caption text-grey">/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}</span>
167
+ <span class="plan-form__unit">/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}</span>
176
168
  </div>
177
169
  </template>
178
170
  </v-list-item>
@@ -180,20 +172,16 @@
180
172
  </v-card>
181
173
 
182
174
  <!-- Custom Total Price Display -->
183
- <v-sheet
184
- color="grey-lighten-4"
185
- rounded
186
- class="pa-3 d-flex align-center justify-space-between mb-1"
187
- >
188
- <span class="text-caption text-grey-darken-2">
175
+ <div class="plan-form__total mb-1">
176
+ <span class="plan-form__label">
189
177
  Total price {{ form.billingCycle === 'annually' ? '/ year' : '/ month' }}
190
178
  </span>
191
- <span class="text-subtitle-1 font-weight-bold">
179
+ <span class="plan-form__total-value">
192
180
  ${{ customTotalPrice.toLocaleString() }}
193
181
  </span>
194
- </v-sheet>
182
+ </div>
195
183
 
196
- <p class="text-caption text-grey">
184
+ <p class="plan-form__unit">
197
185
  Calculated automatically from the selected applications.
198
186
  </p>
199
187
  </div>
@@ -211,20 +199,20 @@
211
199
  </v-card-text>
212
200
 
213
201
  <!-- Footer Buttons -->
214
- <v-toolbar density="compact">
202
+ <v-card-actions class="screen-modal__footer">
215
203
  <v-row no-gutters>
216
- <v-col cols="6">
217
- <v-btn tile block variant="text" class="text-none" size="48" @click="$emit('cancel')">
204
+ <v-col cols="6" class="pr-2">
205
+ <v-btn block variant="outlined" class="text-none screen-btn-ghost" @click="$emit('cancel')">
218
206
  Cancel
219
207
  </v-btn>
220
208
  </v-col>
221
- <v-col cols="6">
222
- <v-btn tile block type="submit" variant="flat" color="primary" class="text-none" size="48">
209
+ <v-col cols="6" class="pl-2">
210
+ <v-btn block type="submit" variant="flat" class="text-none screen-btn-primary">
223
211
  {{ isEditing ? "Save Changes" : "Create Plan" }}
224
212
  </v-btn>
225
213
  </v-col>
226
214
  </v-row>
227
- </v-toolbar>
215
+ </v-card-actions>
228
216
  </v-form>
229
217
  </v-card>
230
218
  </template>
@@ -395,7 +383,53 @@ function submit() {
395
383
  </script>
396
384
 
397
385
  <style scoped>
398
- .max-h-70vh {
399
- max-height: 70vh;
386
+ /* The design's section label: the same all-caps rule the rest of the estate
387
+ uses, instead of Vuetify's `text-subtitle-2 text-grey-darken-3`, which is a
388
+ fixed grey that does not follow the theme. */
389
+ .plan-form__section {
390
+ font-size: var(--fs-section-label);
391
+ font-weight: var(--fw-section-label);
392
+ letter-spacing: var(--ls-section-label);
393
+ text-transform: uppercase;
394
+ color: var(--muted);
395
+ margin-bottom: 12px;
396
+ }
397
+
398
+ .plan-form__label {
399
+ font-size: var(--fs-cell-dense);
400
+ font-weight: 600;
401
+ color: var(--text2);
402
+ }
403
+
404
+ .plan-form__unit {
405
+ font-size: var(--fs-chip-lg);
406
+ font-weight: 600;
407
+ color: var(--muted);
408
+ }
409
+
410
+ /* Was `<v-sheet color="grey-lighten-4">`, a light-theme-only grey that stayed
411
+ light in dark mode. */
412
+ .plan-form__total {
413
+ display: flex;
414
+ align-items: center;
415
+ justify-content: space-between;
416
+ padding: 12px;
417
+ border-radius: var(--r-inner);
418
+ background: var(--hover);
419
+ }
420
+
421
+ .plan-form__total-value {
422
+ font-size: var(--fs-card-title);
423
+ font-weight: var(--fw-card-title);
424
+ color: var(--text);
425
+ }
426
+
427
+ /* The selected application chip. The handoff draws no chip GROUP, so this is
428
+ the estate's soft-accent selected tone rather than an invented one - it
429
+ replaces `bg-grey-darken-3 text-white`, which was a fixed dark grey. */
430
+ .plan-form__chip--on {
431
+ background: var(--accent-soft) !important;
432
+ color: var(--accent-text) !important;
433
+ border-color: var(--accent) !important;
400
434
  }
401
435
  </style>
@@ -1,26 +1,24 @@
1
1
  <template>
2
2
  <v-dialog v-model="show" max-width="680" persistent>
3
- <v-card class="d-flex flex-column" max-height="90vh">
4
- <v-toolbar flat color="grey-lighten-4">
5
- <v-row no-gutters class="fill-height px-6" align="center">
6
- <v-toolbar-title class="text-h6 font-weight-bold">
7
- {{
8
- props.mode === "edit"
9
- ? "Edit Schedule Task"
10
- : "Create Schedule Task"
11
- }}
12
- </v-toolbar-title>
13
- <v-spacer />
14
- <v-btn
15
- icon="mdi-close"
16
- variant="text"
17
- @click="close"
18
- :disabled="submitting"
19
- />
20
- </v-row>
21
- </v-toolbar>
22
-
23
- <v-card-text class="pa-4 flex-grow-1" style="overflow-y: auto">
3
+ <v-card class="screen-modal">
4
+ <v-card-title class="d-flex align-center">
5
+ {{
6
+ props.mode === "edit"
7
+ ? "Edit Schedule Task"
8
+ : "Create Schedule Task"
9
+ }}
10
+ <v-spacer />
11
+ <v-btn
12
+ icon="mdi-close"
13
+ variant="text"
14
+ class="screen-modal__close"
15
+ aria-label="Close"
16
+ @click="close"
17
+ :disabled="submitting"
18
+ />
19
+ </v-card-title>
20
+
21
+ <v-card-text class="screen-modal__body">
24
22
  <v-form ref="formRef" v-model="valid">
25
23
  <v-row dense>
26
24
  <v-col cols="12">
@@ -30,15 +28,15 @@
30
28
  v-model="subject"
31
29
  variant="outlined"
32
30
  density="comfortable"
31
+ class="filter-field mb-4"
33
32
  placeholder="Enter task title"
34
33
  hide-details="auto"
35
- class="mb-4"
36
34
  />
37
35
  </v-col>
38
36
 
39
37
  <v-col cols="12">
40
38
  <InputLabel for="date-range" title="Select Dates" required />
41
- <v-sheet border rounded class="pa-4 mb-4" color="grey-lighten-5">
39
+ <div class="task-form__panel mb-4">
42
40
  <v-date-picker
43
41
  v-model="pickerDates"
44
42
  multiple
@@ -49,7 +47,7 @@
49
47
  class="ma-0"
50
48
  />
51
49
  <v-divider class="my-3" />
52
- <div class="text-caption text-medium-emphasis mb-2">
50
+ <div class="task-form__hint mb-2">
53
51
  {{ selectedDates.length }} date(s) selected
54
52
  </div>
55
53
  <div
@@ -66,10 +64,10 @@
66
64
  {{ date }}
67
65
  </v-chip>
68
66
  </div>
69
- <div v-else class="text-caption text-disabled">
67
+ <div v-else class="task-form__hint">
70
68
  No dates selected. Click on the calendar to select dates.
71
69
  </div>
72
- </v-sheet>
70
+ </div>
73
71
  </v-col>
74
72
 
75
73
  <v-col cols="12">
@@ -80,9 +78,9 @@
80
78
  type="time"
81
79
  variant="outlined"
82
80
  density="comfortable"
81
+ class="filter-field mb-4"
83
82
  hide-details="auto"
84
83
  prepend-inner-icon="mdi-clock-outline"
85
- class="mb-4"
86
84
  />
87
85
  </v-col>
88
86
 
@@ -98,10 +96,10 @@
98
96
  multiple
99
97
  variant="outlined"
100
98
  density="comfortable"
99
+ class="filter-field mb-4"
101
100
  :loading="loadingAreas"
102
101
  placeholder="Choose one or more areas"
103
102
  hide-details="auto"
104
- class="mb-4"
105
103
  chips
106
104
  closable-chips
107
105
  >
@@ -116,7 +114,7 @@
116
114
  </v-chip>
117
115
  <span
118
116
  v-if="index === 3"
119
- class="text-grey text-caption align-self-center"
117
+ class="task-form__hint align-self-center"
120
118
  >
121
119
  (+{{ selectedAreas.length - 3 }} others)
122
120
  </span>
@@ -215,7 +213,7 @@
215
213
  </v-chip>
216
214
  </div>
217
215
 
218
- <span v-else class="text-caption text-disabled">
216
+ <span v-else class="task-form__hint">
219
217
  No units configured
220
218
  </span>
221
219
  </v-card-text>
@@ -233,38 +231,34 @@
233
231
  v-model="description"
234
232
  variant="outlined"
235
233
  density="comfortable"
234
+ class="filter-field mb-2"
236
235
  rows="4"
237
236
  placeholder="Add additional details about this task..."
238
237
  hide-details="auto"
239
- class="mb-2"
240
238
  />
241
239
  </v-col>
242
240
  </v-row>
243
241
  </v-form>
244
242
  </v-card-text>
245
243
 
246
- <v-toolbar class="pa-0" density="compact">
244
+ <v-card-actions class="screen-modal__footer">
247
245
  <v-row no-gutters>
248
- <v-col cols="6" class="pa-0">
246
+ <v-col cols="6" class="pr-2">
249
247
  <v-btn
250
248
  block
251
- variant="text"
252
- class="text-none"
253
- size="large"
249
+ variant="outlined"
250
+ class="text-none screen-btn-ghost"
254
251
  @click="close"
255
- height="48"
256
252
  :disabled="submitting"
257
253
  >
258
254
  Cancel
259
255
  </v-btn>
260
256
  </v-col>
261
- <v-col cols="6" class="pa-0">
257
+ <v-col cols="6" class="pl-2">
262
258
  <v-btn
263
259
  block
264
260
  variant="flat"
265
- color="primary"
266
- class="text-none font-weight-bold rounded-0"
267
- height="48"
261
+ class="text-none screen-btn-primary"
268
262
  @click="submitTask"
269
263
  :loading="submitting"
270
264
  >
@@ -272,7 +266,7 @@
272
266
  </v-btn>
273
267
  </v-col>
274
268
  </v-row>
275
- </v-toolbar>
269
+ </v-card-actions>
276
270
  </v-card>
277
271
  </v-dialog>
278
272
 
@@ -568,3 +562,28 @@ watch(
568
562
  { immediate: false }
569
563
  );
570
564
  </script>
565
+
566
+ <style scoped>
567
+ /* Was `<v-sheet border rounded color="grey-lighten-5">` - a fixed light grey
568
+ that stayed light on the dark theme. The design has no calendar panel, so
569
+ this is the estate's own card surface and border, nothing invented. */
570
+ .task-form__panel {
571
+ padding: 16px;
572
+ border: 1px solid var(--border);
573
+ border-radius: var(--r-inner);
574
+ background: var(--card);
575
+ }
576
+
577
+ /* Replaces `text-caption text-disabled` / `text-medium-emphasis` / `text-grey`,
578
+ three different Vuetify greys doing the same job.
579
+
580
+ `--text2`, not `--muted`: the design is silent on this hint line, and `--muted`
581
+ at 12px measured 3.24:1 on the light card. That pairing would have been OURS,
582
+ not the design's, so it is fixed here with an existing token rather than
583
+ recorded. `--text2` measures 8.2:1. */
584
+ .task-form__hint {
585
+ font-size: var(--fs-chip-lg);
586
+ font-weight: 600;
587
+ color: var(--text2);
588
+ }
589
+ </style>
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@7365admin1/layer-common",
3
3
  "license": "MIT",
4
4
  "type": "module",
5
- "version": "3.2.2-staging.136",
5
+ "version": "3.2.2-staging.138",
6
6
  "author": "7365admin1",
7
7
  "main": "./nuxt.config.ts",
8
8
  "//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.",