@7365admin1/layer-common 3.2.2-staging.101 → 3.2.2-staging.103
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,84 +1,73 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-row no-gutters>
|
|
3
|
-
<v-col cols="12"
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
<v-row no-gutters class="qr-tagging">
|
|
3
|
+
<v-col cols="12">
|
|
4
|
+
<!--
|
|
5
|
+
The design opens the screen with its name and the screen's actions on
|
|
6
|
+
that one row. The three buttons used to be `tonal` pills floating above
|
|
7
|
+
the card with no heading at all - and their labels measured 1.74:1
|
|
8
|
+
light / 2.18:1 dark on that fill. As `AppButton` they read from the
|
|
9
|
+
tokens. Same three clicks, same `disabled` rules; the primary action
|
|
10
|
+
sits rightmost, where the design puts it.
|
|
11
|
+
-->
|
|
12
|
+
<PageHeader title="QR Tagging">
|
|
13
|
+
<template #actions>
|
|
14
|
+
<AppButton
|
|
15
|
+
variant="ghost"
|
|
11
16
|
:disabled="!items.length"
|
|
12
17
|
@click="handlePrintAll"
|
|
13
18
|
>
|
|
14
19
|
Print All
|
|
15
|
-
</
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
rounded="pill"
|
|
19
|
-
variant="tonal"
|
|
20
|
-
size="large"
|
|
21
|
-
:disabled="!qrCodeAccessCards.length"
|
|
22
|
-
@click="generateQrCodes"
|
|
23
|
-
>
|
|
24
|
-
Generate QR Code
|
|
25
|
-
</v-btn>
|
|
26
|
-
<v-btn
|
|
27
|
-
class="text-none"
|
|
28
|
-
rounded="pill"
|
|
29
|
-
variant="tonal"
|
|
30
|
-
size="large"
|
|
20
|
+
</AppButton>
|
|
21
|
+
<AppButton
|
|
22
|
+
variant="ghost"
|
|
31
23
|
:disabled="!qrCodeAccessCardsToPrint.length"
|
|
32
24
|
@click="handlePrintQrCode"
|
|
33
25
|
>
|
|
34
26
|
Print QR Code
|
|
35
|
-
</
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
clearable
|
|
45
|
-
hide-details
|
|
46
|
-
style="max-width: 240px"
|
|
47
|
-
/>
|
|
48
|
-
</v-row>
|
|
49
|
-
</v-row>
|
|
27
|
+
</AppButton>
|
|
28
|
+
<AppButton
|
|
29
|
+
:disabled="!qrCodeAccessCards.length"
|
|
30
|
+
@click="generateQrCodes"
|
|
31
|
+
>
|
|
32
|
+
Generate QR Code
|
|
33
|
+
</AppButton>
|
|
34
|
+
</template>
|
|
35
|
+
</PageHeader>
|
|
50
36
|
</v-col>
|
|
51
37
|
|
|
52
38
|
<v-col cols="12" v-if="canViewAllQrTagging">
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<
|
|
61
|
-
<template #
|
|
39
|
+
<AppCard class="table-card">
|
|
40
|
+
<!--
|
|
41
|
+
ONE toolbar. The refresh button and the search keep their own
|
|
42
|
+
behaviour; the page range is the toolbar's own count rather than a
|
|
43
|
+
`text-fontgray` caption, and the pager keeps its model and its
|
|
44
|
+
`@update:value`.
|
|
45
|
+
-->
|
|
46
|
+
<CardToolbar :count="pageRange">
|
|
47
|
+
<template #left>
|
|
62
48
|
<v-btn fab icon density="comfortable" @click="fetchItems">
|
|
63
49
|
<v-icon>mdi-refresh</v-icon>
|
|
64
50
|
</v-btn>
|
|
51
|
+
<AppField
|
|
52
|
+
v-model="searchText"
|
|
53
|
+
search
|
|
54
|
+
compact
|
|
55
|
+
placeholder="Search Card..."
|
|
56
|
+
klass="qr-tagging__search"
|
|
57
|
+
/>
|
|
65
58
|
</template>
|
|
66
59
|
|
|
67
|
-
<template #
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
v-model="page"
|
|
74
|
-
:length="pages"
|
|
75
|
-
@update:value="fetchItems"
|
|
76
|
-
/>
|
|
77
|
-
</v-row>
|
|
60
|
+
<template #right>
|
|
61
|
+
<local-pagination
|
|
62
|
+
v-model="page"
|
|
63
|
+
:length="pages"
|
|
64
|
+
@update:value="fetchItems"
|
|
65
|
+
/>
|
|
78
66
|
</template>
|
|
79
|
-
</
|
|
67
|
+
</CardToolbar>
|
|
80
68
|
|
|
81
69
|
<v-data-table
|
|
70
|
+
:loading="loading"
|
|
82
71
|
:headers="tableHeaders"
|
|
83
72
|
:items="items"
|
|
84
73
|
item-value="_id"
|
|
@@ -149,7 +138,7 @@
|
|
|
149
138
|
/>
|
|
150
139
|
</template>
|
|
151
140
|
</v-data-table>
|
|
152
|
-
</
|
|
141
|
+
</AppCard>
|
|
153
142
|
</v-col>
|
|
154
143
|
|
|
155
144
|
<!-- Hidden QR canvases for generation -->
|
|
@@ -468,3 +457,11 @@ function showMessage(msg: string, color: string) {
|
|
|
468
457
|
messageSnackbar.value = true;
|
|
469
458
|
}
|
|
470
459
|
</script>
|
|
460
|
+
|
|
461
|
+
<style scoped>
|
|
462
|
+
/* The search kept its old 240px ceiling; `.app-field--search` is `flex:1` so
|
|
463
|
+
it would otherwise fill the toolbar row. */
|
|
464
|
+
.qr-tagging__search {
|
|
465
|
+
max-width: 240px;
|
|
466
|
+
}
|
|
467
|
+
</style>
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row no-gutters>
|
|
3
|
-
|
|
3
|
+
<!--
|
|
4
|
+
The screen had no heading at all - the page name lived only in the
|
|
5
|
+
navigation rail. `TableMain` draws the design's 22px/800 title row with
|
|
6
|
+
the create button on that same line, so the title is all this needs.
|
|
7
|
+
-->
|
|
8
|
+
<TableMain title="Overnight Parking" :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages" :pageRange="pageRange"
|
|
4
9
|
:createLabel="createLabel" :show-header="true" :extension-height="extensionHeight" :offset="offset"
|
|
5
10
|
v-model:search="searchInput" @refresh="emits('refresh')" @create="emits('create')" @row-click="handleRowClick"
|
|
6
11
|
@update:page="handleUpdatePage">
|
|
@@ -37,10 +42,15 @@
|
|
|
37
42
|
{{ formatDateDDMMYYYYLocal(value) }}
|
|
38
43
|
</template>
|
|
39
44
|
|
|
45
|
+
<!--
|
|
46
|
+
The same four words, the same four meanings - approved/expired/
|
|
47
|
+
rejected/pending map to ok/neutral/err/warn in `utils/status.ts`,
|
|
48
|
+
which is the exact pairing `formatStatus` already made. The shared
|
|
49
|
+
chip's tones are the measured ones, so the label reads at AA in both
|
|
50
|
+
themes; a `flat` `v-chip` painted a Vuetify colour does not.
|
|
51
|
+
-->
|
|
40
52
|
<template #item.status="{ value }">
|
|
41
|
-
<
|
|
42
|
-
{{ formatStatus(value).label }}
|
|
43
|
-
</v-chip>
|
|
53
|
+
<StatusChip :status="value" :label="formatStatus(value).label" />
|
|
44
54
|
</template>
|
|
45
55
|
|
|
46
56
|
<template #item.action="{ item }">
|
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row no-gutters>
|
|
3
|
+
<!--
|
|
4
|
+
The accordion was tokenised in an earlier batch but the screen still
|
|
5
|
+
opened with no name on it. "Settings" is the two apps' OWN navigation
|
|
6
|
+
label, and both wrappers (`-property-management` and `-security`
|
|
7
|
+
`settings.vue`) are bare mounts with no heading of their own, so the
|
|
8
|
+
title belongs here. No action on this row - the screen's saves live
|
|
9
|
+
inside their own sections.
|
|
10
|
+
-->
|
|
11
|
+
<v-col cols="12">
|
|
12
|
+
<PageHeader title="Settings" />
|
|
13
|
+
</v-col>
|
|
14
|
+
|
|
3
15
|
<!--
|
|
4
16
|
The design draws settings as a stack of bordered sections with one open
|
|
5
17
|
at a time. `multiple` is BEHAVIOUR - which sections a user may have open
|
|
@@ -1,80 +1,82 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-container fluid class="pa-6">
|
|
3
|
-
<!--
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
3
|
+
<!--
|
|
4
|
+
THE DESIGN'S TITLE ROW. Was a hand-rolled flex row with a `text-h5`
|
|
5
|
+
heading and a pill button; it is the same title and the same button on
|
|
6
|
+
the same line, drawn by the shared `PageHeader` at 22px/800 so this
|
|
7
|
+
screen's heading matches every other screen's.
|
|
8
|
+
-->
|
|
9
|
+
<PageHeader title="Subscription Plans">
|
|
10
|
+
<template #actions>
|
|
11
|
+
<v-btn
|
|
12
|
+
class="text-none screen-btn-primary"
|
|
13
|
+
variant="flat"
|
|
14
|
+
@click="openCreateModal"
|
|
15
|
+
>
|
|
16
|
+
Create Plan
|
|
17
|
+
</v-btn>
|
|
18
|
+
</template>
|
|
19
|
+
</PageHeader>
|
|
18
20
|
|
|
19
21
|
<!-- Search & Filters Bar -->
|
|
22
|
+
<!--
|
|
23
|
+
The primitives carry these exactly: the search is a string ref, and both
|
|
24
|
+
filters are string refs over `{ title, value }` options whose values are
|
|
25
|
+
already strings, so `AppSelect`'s native branch emits the same string
|
|
26
|
+
this screen has always stored ("all", "monthly", ...). No filter's
|
|
27
|
+
meaning, order or default changed.
|
|
28
|
+
-->
|
|
20
29
|
<v-row class="mb-2" density="compact">
|
|
21
30
|
<!-- Search Input -->
|
|
22
31
|
<v-col cols="12" sm="4" md="3">
|
|
23
|
-
<v-
|
|
24
|
-
v-model="search"
|
|
25
|
-
placeholder="Search Plan"
|
|
26
|
-
prepend-inner-icon="mdi-magnify"
|
|
27
|
-
variant="outlined"
|
|
28
|
-
density="compact"
|
|
29
|
-
hide-details
|
|
30
|
-
clearable
|
|
31
|
-
/>
|
|
32
|
+
<AppField v-model="search" search placeholder="Search Plan" />
|
|
32
33
|
</v-col>
|
|
33
34
|
|
|
34
35
|
<!-- Filter by Category -->
|
|
35
36
|
<v-col cols="12" sm="4" md="3">
|
|
36
|
-
<
|
|
37
|
+
<AppSelect
|
|
37
38
|
v-model="categoryFilter"
|
|
38
39
|
:items="categoryOptions"
|
|
39
40
|
label="Filter by category"
|
|
40
|
-
variant="outlined"
|
|
41
|
-
density="compact"
|
|
42
|
-
hide-details
|
|
43
41
|
/>
|
|
44
42
|
</v-col>
|
|
45
43
|
|
|
46
44
|
<!-- Filter by Billing Cycle -->
|
|
47
45
|
<v-col cols="12" sm="4" md="3">
|
|
48
|
-
<
|
|
46
|
+
<AppSelect
|
|
49
47
|
v-model="billingFilter"
|
|
50
48
|
:items="billingOptions"
|
|
51
49
|
label="Filter by billing cycle"
|
|
52
|
-
variant="outlined"
|
|
53
|
-
density="compact"
|
|
54
|
-
hide-details
|
|
55
50
|
/>
|
|
56
51
|
</v-col>
|
|
57
52
|
</v-row>
|
|
58
53
|
|
|
59
54
|
<!-- Main Table Card -->
|
|
60
|
-
<
|
|
61
|
-
<!--
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<
|
|
55
|
+
<AppCard class="table-card mt-4">
|
|
56
|
+
<!--
|
|
57
|
+
The tabs and the refresh were a hand-built `bg-grey-lighten-4` strip -
|
|
58
|
+
a hard-coded light grey that stayed light in the dark theme. They are
|
|
59
|
+
the card's own toolbar row now, which is where the design draws tabs,
|
|
60
|
+
and it follows the theme because it is tokenised.
|
|
61
|
+
-->
|
|
62
|
+
<CardToolbar>
|
|
63
|
+
<template #tabs>
|
|
64
|
+
<v-tabs v-model="activeTab" color="primary" density="compact">
|
|
65
|
+
<v-tab value="active" class="text-none font-weight-bold">Active</v-tab>
|
|
66
|
+
<v-tab value="deactive" class="text-none font-weight-bold">Deactive</v-tab>
|
|
67
|
+
</v-tabs>
|
|
68
|
+
</template>
|
|
69
|
+
|
|
70
|
+
<template #right>
|
|
69
71
|
<v-btn
|
|
70
72
|
icon="mdi-refresh"
|
|
71
73
|
variant="text"
|
|
72
74
|
density="comfortable"
|
|
73
|
-
|
|
75
|
+
aria-label="Refresh"
|
|
74
76
|
@click="refresh"
|
|
75
77
|
/>
|
|
76
|
-
</
|
|
77
|
-
</
|
|
78
|
+
</template>
|
|
79
|
+
</CardToolbar>
|
|
78
80
|
|
|
79
81
|
<!-- Table View -->
|
|
80
82
|
<v-data-table
|
|
@@ -107,22 +109,21 @@
|
|
|
107
109
|
</template>
|
|
108
110
|
|
|
109
111
|
<!-- Applications Badge -->
|
|
112
|
+
<!-- A count, not a status word, so it takes the design's neutral tag
|
|
113
|
+
shape (no leading dot) rather than a colour it has not earned. -->
|
|
110
114
|
<template #item.applicationIds="{ item }">
|
|
111
|
-
<
|
|
115
|
+
<StatusChip tone="neutral" :dot="false">
|
|
112
116
|
{{ item.applicationIds.length }} Application{{ item.applicationIds.length > 1 ? 's' : '' }}
|
|
113
|
-
</
|
|
117
|
+
</StatusChip>
|
|
114
118
|
</template>
|
|
115
119
|
|
|
116
120
|
<!-- Status Badge -->
|
|
121
|
+
<!-- The shared word -> tone map: "Active" is `ok` (was Vuetify
|
|
122
|
+
`success`) and "Deactive" is unmapped, so it comes out neutral -
|
|
123
|
+
which is the grey it already was. Same two words, same two
|
|
124
|
+
meanings. -->
|
|
117
125
|
<template #item.status="{ item }">
|
|
118
|
-
<
|
|
119
|
-
size="small"
|
|
120
|
-
:color="item.status === 'active' ? 'success' : 'grey'"
|
|
121
|
-
variant="flat"
|
|
122
|
-
class="text-caption font-weight-bold"
|
|
123
|
-
>
|
|
124
|
-
{{ item.status === 'active' ? 'Active' : 'Deactive' }}
|
|
125
|
-
</v-chip>
|
|
126
|
+
<StatusChip :status="item.status === 'active' ? 'Active' : 'Deactive'" />
|
|
126
127
|
</template>
|
|
127
128
|
|
|
128
129
|
<!-- Actions -->
|
|
@@ -166,13 +167,15 @@
|
|
|
166
167
|
</template>
|
|
167
168
|
|
|
168
169
|
<!-- Empty State -->
|
|
170
|
+
<!-- Same sentence, in the shared empty block the design draws it in. -->
|
|
169
171
|
<template #no-data>
|
|
170
|
-
<div class="
|
|
171
|
-
|
|
172
|
+
<div class="table-card__empty">
|
|
173
|
+
<v-icon icon="mdi-magnify-close" size="32" />
|
|
174
|
+
<span>No plans found.</span>
|
|
172
175
|
</div>
|
|
173
176
|
</template>
|
|
174
177
|
</v-data-table>
|
|
175
|
-
</
|
|
178
|
+
</AppCard>
|
|
176
179
|
|
|
177
180
|
<!-- Create / Edit Dialog -->
|
|
178
181
|
<v-dialog v-model="showModal" max-width="600px" persistent>
|
|
@@ -1,55 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
|
|
4
|
-
<template #prepend>
|
|
5
|
-
<slot name="title">Title</slot>
|
|
6
|
-
</template>
|
|
1
|
+
<!--
|
|
2
|
+
THE SECOND LIST CARD - the one `ListView` and `WorkOrder/ListView` draw.
|
|
7
3
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
Was a `v-card` with TWO `v-toolbar`s: the caller's title + action button on
|
|
5
|
+
the top one, and the page range + arrows on a second one under the table. The
|
|
6
|
+
design has neither. The page name and the screen's primary action belong on
|
|
7
|
+
ONE title row ABOVE the card (`PageHeader`), and the range and the pager
|
|
8
|
+
belong on the card's own single top row (`CardToolbar`) - which is exactly
|
|
9
|
+
the shape `TableMain` was converted to.
|
|
13
10
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
>
|
|
33
|
-
<template v-if="$slots.item" v-slot:item>
|
|
34
|
-
<slot name="item" :items="props.items"></slot>
|
|
11
|
+
VISUAL ONLY. Same headers, same items, same slots, same row click, same
|
|
12
|
+
`page` model, same `update:pagination` payloads, same increment/decrement
|
|
13
|
+
guards. Nothing is fetched, filtered, sorted or emitted differently; the two
|
|
14
|
+
toolbars became one row and moved, and that is the whole change.
|
|
15
|
+
-->
|
|
16
|
+
<template>
|
|
17
|
+
<div class="list-card">
|
|
18
|
+
<!--
|
|
19
|
+
The fold: the caller's `title` slot used to be the `v-toolbar`'s prepend,
|
|
20
|
+
i.e. a heading INSIDE the card, and its action button sat on the same
|
|
21
|
+
bar. Both are the design's page-title row, so they move up to it. Only
|
|
22
|
+
drawn when the caller actually supplies a title - a caller that passes
|
|
23
|
+
none used to get the literal fallback word "Title" on the bar, which is
|
|
24
|
+
not a heading anybody asked for.
|
|
25
|
+
-->
|
|
26
|
+
<PageHeader v-if="$slots.title">
|
|
27
|
+
<template #title>
|
|
28
|
+
<slot name="title" />
|
|
35
29
|
</template>
|
|
36
30
|
|
|
37
|
-
<template v-
|
|
38
|
-
<
|
|
39
|
-
<td v-for="col in props.headers" :key="col.value">
|
|
40
|
-
<slot :name="col.value" :item="item">
|
|
41
|
-
{{ item[col.value] }}
|
|
42
|
-
</slot>
|
|
43
|
-
</td>
|
|
44
|
-
</tr>
|
|
31
|
+
<template v-if="$slots['action-button']" #actions>
|
|
32
|
+
<slot name="action-button"></slot>
|
|
45
33
|
</template>
|
|
46
|
-
</
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
34
|
+
</PageHeader>
|
|
35
|
+
|
|
36
|
+
<AppCard class="table-card">
|
|
37
|
+
<!--
|
|
38
|
+
ONE toolbar. The range keeps the exact string the caller computed and
|
|
39
|
+
the arrows keep their own disabled rules and emits; they have simply
|
|
40
|
+
stopped costing a second bar under the table.
|
|
41
|
+
-->
|
|
42
|
+
<CardToolbar :count="props.pageRange">
|
|
43
|
+
<template #right>
|
|
53
44
|
<div class="arrow-navigation">
|
|
54
45
|
<v-btn
|
|
55
46
|
icon="mdi-chevron-left"
|
|
@@ -66,14 +57,48 @@
|
|
|
66
57
|
@click="increment"
|
|
67
58
|
/>
|
|
68
59
|
</div>
|
|
69
|
-
</
|
|
70
|
-
</
|
|
60
|
+
</template>
|
|
61
|
+
</CardToolbar>
|
|
71
62
|
|
|
72
|
-
|
|
63
|
+
<!--
|
|
64
|
+
`extension` used to be rendered by BOTH toolbars, i.e. the same content
|
|
65
|
+
twice, above and below the table. It is one row now, under the toolbar,
|
|
66
|
+
where `TableMain` puts a filter row.
|
|
67
|
+
-->
|
|
68
|
+
<div v-if="$slots.extension" class="table-card__extension">
|
|
73
69
|
<slot name="extension"></slot>
|
|
74
|
-
</
|
|
75
|
-
|
|
76
|
-
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<v-data-table
|
|
73
|
+
v-model="selected"
|
|
74
|
+
:headers="props.headers"
|
|
75
|
+
:items="props.items"
|
|
76
|
+
item-value="_id"
|
|
77
|
+
items-per-page="20"
|
|
78
|
+
fixed-header
|
|
79
|
+
hide-default-footer
|
|
80
|
+
selec
|
|
81
|
+
:loading="props.loading"
|
|
82
|
+
@click:row="handleRowClick"
|
|
83
|
+
:style="`max-height:${props.height}`"
|
|
84
|
+
:class="{ 'clickable-rows': props.clickableRows }"
|
|
85
|
+
>
|
|
86
|
+
<template v-if="$slots.item" v-slot:item>
|
|
87
|
+
<slot name="item" :items="props.items"></slot>
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
<template v-slot:item="{ item }">
|
|
91
|
+
<tr @click="handleRowClick(item)">
|
|
92
|
+
<td v-for="col in props.headers" :key="col.value">
|
|
93
|
+
<slot :name="col.value" :item="item">
|
|
94
|
+
{{ item[col.value] }}
|
|
95
|
+
</slot>
|
|
96
|
+
</td>
|
|
97
|
+
</tr>
|
|
98
|
+
</template>
|
|
99
|
+
</v-data-table>
|
|
100
|
+
</AppCard>
|
|
101
|
+
</div>
|
|
77
102
|
</template>
|
|
78
103
|
|
|
79
104
|
<script setup lang="ts">
|
|
@@ -161,4 +186,20 @@ watch(selectAll, (curr) => {
|
|
|
161
186
|
.clickable-rows tbody tr:hover {
|
|
162
187
|
background-color: var(--hover);
|
|
163
188
|
}
|
|
189
|
+
|
|
190
|
+
/*
|
|
191
|
+
Every caller wraps its title in `<span class="text-h6 font-weight-regular">`,
|
|
192
|
+
because the old toolbar drew no type of its own. Vuetify's typography classes
|
|
193
|
+
are `!important`, so that span would keep 20px/400 inside the design's
|
|
194
|
+
22px/800 heading and the fold would look like it had not happened. The
|
|
195
|
+
heading owns the type now; the caller's span is left to carry whatever else
|
|
196
|
+
it says. Confined to this card's own page head, so no other `PageHeader` is
|
|
197
|
+
touched - and no app repo has to be edited for the title to land.
|
|
198
|
+
*/
|
|
199
|
+
.list-card :deep(.app-page-head__title) * {
|
|
200
|
+
font-size: inherit !important;
|
|
201
|
+
font-weight: inherit !important;
|
|
202
|
+
line-height: inherit !important;
|
|
203
|
+
letter-spacing: inherit !important;
|
|
204
|
+
}
|
|
164
205
|
</style>
|