Skip to content

Commit db48422

Browse files
johnleiderjohnleider
committed
chore(dev): wire kitchen sink to emerald feedback round
Loads Manrope via Google Fonts so typography matches the Figma spec. Splits Avatar examples into image, text, icon, and group rows and introduces a small avatar-group helper. Swaps alert icons to the outline weight, tightens the carousel/tooltip demos to the new behavior, replaces the bold-icon tag row that wasn't in Figma, opts the autocomplete content into eager so a preset v-model resolves its display label, notes the date picker as a placeholder until the v0 calendar primitive lands, and adds a compact table example.
1 parent 47bbfcd commit db48422

3 files changed

Lines changed: 128 additions & 33 deletions

File tree

‎dev/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66

77
<title>Vuetify0</title>
8+
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
812
</head>
913
<body>
1014
<div id="app"></div>

‎dev/src/EmeraldKitchenSink.vue‎

Lines changed: 123 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,8 @@
161161

162162
<section>
163163
<h2>Avatar</h2>
164+
165+
<p class="muted">Image</p>
164166
<div class="row">
165167
<EmAvatar size="sm">
166168
<EmAvatarImage alt="Small avatar" src="https://i.pravatar.cc/80?img=32" />
@@ -174,6 +176,10 @@
174176
<EmAvatarImage alt="Large avatar" src="https://i.pravatar.cc/96?img=47" />
175177
<EmAvatarFallback>LG</EmAvatarFallback>
176178
</EmAvatar>
179+
</div>
180+
181+
<p class="muted">Text (initials)</p>
182+
<div class="row">
177183
<EmAvatar size="sm">
178184
<EmAvatarFallback>AB</EmAvatarFallback>
179185
</EmAvatar>
@@ -183,12 +189,47 @@
183189
<EmAvatar size="lg">
184190
<EmAvatarFallback>EF</EmAvatarFallback>
185191
</EmAvatar>
192+
</div>
193+
194+
<p class="muted">Icon</p>
195+
<div class="row">
196+
<EmAvatar size="sm">
197+
<EmAvatarFallback>
198+
<PhUser :size="16" weight="regular" />
199+
</EmAvatarFallback>
200+
</EmAvatar>
201+
<EmAvatar size="md">
202+
<EmAvatarFallback>
203+
<PhUser :size="20" weight="regular" />
204+
</EmAvatarFallback>
205+
</EmAvatar>
186206
<EmAvatar size="lg">
187207
<EmAvatarFallback>
188-
<PhUser :size="24" weight="duotone" />
208+
<PhUser :size="24" weight="regular" />
189209
</EmAvatarFallback>
190210
</EmAvatar>
191211
</div>
212+
213+
<p class="muted">Group</p>
214+
<div class="row">
215+
<div class="emerald-avatar-group">
216+
<EmAvatar size="md">
217+
<EmAvatarImage alt="Member 1" src="https://i.pravatar.cc/80?img=12" />
218+
<EmAvatarFallback>JD</EmAvatarFallback>
219+
</EmAvatar>
220+
<EmAvatar size="md">
221+
<EmAvatarImage alt="Member 2" src="https://i.pravatar.cc/80?img=32" />
222+
<EmAvatarFallback>SM</EmAvatarFallback>
223+
</EmAvatar>
224+
<EmAvatar size="md">
225+
<EmAvatarImage alt="Member 3" src="https://i.pravatar.cc/80?img=47" />
226+
<EmAvatarFallback>LG</EmAvatarFallback>
227+
</EmAvatar>
228+
<EmAvatar size="md">
229+
<EmAvatarFallback>+3</EmAvatarFallback>
230+
</EmAvatar>
231+
</div>
232+
</div>
192233
</section>
193234

194235
<section>
@@ -332,26 +373,6 @@
332373
</EmTag>
333374
</div>
334375

335-
<p class="muted">Bold icon weight — alternate icon style</p>
336-
<div class="row">
337-
<EmTag variant="neutral">
338-
<PhCheckCircle :size="16" weight="bold" />
339-
chip text
340-
</EmTag>
341-
<EmTag variant="primary">
342-
<PhCheckCircle :size="16" weight="bold" />
343-
chip text
344-
</EmTag>
345-
<EmTag variant="success">
346-
<PhCheckCircle :size="16" weight="bold" />
347-
chip text
348-
</EmTag>
349-
<EmTag variant="error">
350-
<PhX :size="16" weight="bold" />
351-
chip text
352-
</EmTag>
353-
</div>
354-
355376
<p class="muted">Text only — no icon</p>
356377
<div class="row">
357378
<EmTag variant="neutral">vue</EmTag>
@@ -929,7 +950,7 @@
929950
<EmAutoCompleteInput placeholder="Search your framework" />
930951
<PhCaretDown :size="14" weight="duotone" />
931952
</EmAutoCompleteControl>
932-
<EmAutoCompleteContent>
953+
<EmAutoCompleteContent eager>
933954
<EmAutoCompleteItem :value="'vuetify'">Vuetify</EmAutoCompleteItem>
934955
<EmAutoCompleteItem :value="'vue'">Vue</EmAutoCompleteItem>
935956
<EmAutoCompleteItem :value="'primevue'">Prime Vue</EmAutoCompleteItem>
@@ -940,6 +961,7 @@
940961

941962
<section>
942963
<h2>DatePicker</h2>
964+
<p class="muted">Visual scaffold only — replaces with the new DatePicker once v0 ships a calendar primitive (createCalendar / useDate-backed root).</p>
943965
<EmDatePicker v-model="datePickerValue">
944966
<EmDatePickerCalendar>
945967
<EmDatePickerHeader>
@@ -970,8 +992,9 @@
970992
<h2>Upload</h2>
971993
<EmUpload v-model="uploadFiles" multiple style="width: 420px;">
972994
<EmUploadDropzone>
973-
<PhFileArrowUp :size="16" weight="duotone" />
974-
<span>Drag and Drop your files</span>
995+
<PhFileArrowUp :size="28" weight="regular" />
996+
<strong>Drag and drop your files</strong>
997+
<span class="muted" style="margin: 0;">or click to browse</span>
975998
</EmUploadDropzone>
976999
</EmUpload>
9771000
</section>
@@ -1016,7 +1039,7 @@
10161039
<div class="stack" style="max-width: 520px;">
10171040
<EmAlert>
10181041
<EmAlertIcon>
1019-
<PhInfo :size="24" weight="duotone" />
1042+
<PhInfo :size="24" weight="regular" />
10201043
</EmAlertIcon>
10211044
<EmAlertBody>
10221045
<EmAlertTitle>Alert Title</EmAlertTitle>
@@ -1025,7 +1048,7 @@
10251048
</EmAlert>
10261049
<EmAlert variant="error">
10271050
<EmAlertIcon>
1028-
<PhXCircle :size="24" weight="duotone" />
1051+
<PhXCircle :size="24" weight="regular" />
10291052
</EmAlertIcon>
10301053
<EmAlertBody>
10311054
<EmAlertTitle>Error Alert</EmAlertTitle>
@@ -1034,7 +1057,7 @@
10341057
</EmAlert>
10351058
<EmAlert variant="success">
10361059
<EmAlertIcon>
1037-
<PhCheckCircle :size="24" weight="duotone" />
1060+
<PhCheckCircle :size="24" weight="regular" />
10381061
</EmAlertIcon>
10391062
<EmAlertBody>
10401063
<EmAlertTitle>Success Alert</EmAlertTitle>
@@ -1043,7 +1066,7 @@
10431066
</EmAlert>
10441067
<EmAlert variant="info">
10451068
<EmAlertIcon>
1046-
<PhInfo :size="24" weight="duotone" />
1069+
<PhInfo :size="24" weight="regular" />
10471070
</EmAlertIcon>
10481071
<EmAlertBody>
10491072
<EmAlertTitle>Info Alert</EmAlertTitle>
@@ -1052,7 +1075,7 @@
10521075
</EmAlert>
10531076
<EmAlert variant="warning">
10541077
<EmAlertIcon>
1055-
<PhWarning :size="24" weight="duotone" />
1078+
<PhWarning :size="24" weight="regular" />
10561079
</EmAlertIcon>
10571080
<EmAlertBody>
10581081
<EmAlertTitle>Warning Alert</EmAlertTitle>
@@ -1061,7 +1084,7 @@
10611084
</EmAlert>
10621085
<EmAlert variant="neutral">
10631086
<EmAlertIcon>
1064-
<PhAirplaneTilt :size="24" weight="duotone" />
1087+
<PhAirplaneTilt :size="24" weight="regular" />
10651088
</EmAlertIcon>
10661089
<EmAlertBody>
10671090
<EmAlertTitle>Alert</EmAlertTitle>
@@ -1184,12 +1207,12 @@
11841207

11851208
<section>
11861209
<h2>Tooltip</h2>
1187-
<EmTooltip :model-value="true">
1210+
<EmTooltip>
11881211
<EmTooltipContent position-area="top">
11891212
Hello, I'm Tooltip
11901213
</EmTooltipContent>
11911214
<EmTooltipActivator>
1192-
<EmButton>Open Tooltip</EmButton>
1215+
<EmButton>Hover for tooltip</EmButton>
11931216
</EmTooltipActivator>
11941217
</EmTooltip>
11951218
</section>
@@ -1229,7 +1252,8 @@
12291252

12301253
<section>
12311254
<h2>Table</h2>
1232-
<EmTable style="max-width: 760px;">
1255+
<p class="muted">Default — sortable headers, selected row, status cells</p>
1256+
<EmTable>
12331257
<EmTableHead>
12341258
<EmTableRow>
12351259
<EmTableHeader sort="none" sortable>
@@ -1295,6 +1319,53 @@
12951319
</EmTableRow>
12961320
</EmTableBody>
12971321
</EmTable>
1322+
1323+
<p class="muted" style="margin-top: 1.5rem;">Compact — fewer columns, no border</p>
1324+
<EmTable :bordered="false">
1325+
<EmTableHead>
1326+
<EmTableRow>
1327+
<EmTableHeader>Plan</EmTableHeader>
1328+
<EmTableHeader>Status</EmTableHeader>
1329+
<EmTableHeader align="end">Seats</EmTableHeader>
1330+
<EmTableHeader align="end">MRR</EmTableHeader>
1331+
</EmTableRow>
1332+
</EmTableHead>
1333+
<EmTableBody>
1334+
<EmTableRow>
1335+
<EmTableCell>Starter</EmTableCell>
1336+
<EmTableCell>
1337+
<EmTag tone="tinted" variant="success">
1338+
<PhCheckCircle :size="14" weight="fill" />
1339+
active
1340+
</EmTag>
1341+
</EmTableCell>
1342+
<EmTableCell align="end">12</EmTableCell>
1343+
<EmTableCell align="end">$120</EmTableCell>
1344+
</EmTableRow>
1345+
<EmTableRow>
1346+
<EmTableCell>Pro</EmTableCell>
1347+
<EmTableCell>
1348+
<EmTag tone="tinted" variant="warning">
1349+
<PhWarning :size="14" weight="fill" />
1350+
trial
1351+
</EmTag>
1352+
</EmTableCell>
1353+
<EmTableCell align="end">48</EmTableCell>
1354+
<EmTableCell align="end">$960</EmTableCell>
1355+
</EmTableRow>
1356+
<EmTableRow>
1357+
<EmTableCell>Enterprise</EmTableCell>
1358+
<EmTableCell>
1359+
<EmTag tone="tinted" variant="error">
1360+
<PhXCircle :size="14" weight="fill" />
1361+
churned
1362+
</EmTag>
1363+
</EmTableCell>
1364+
<EmTableCell align="end">120</EmTableCell>
1365+
<EmTableCell align="end">—</EmTableCell>
1366+
</EmTableRow>
1367+
</EmTableBody>
1368+
</EmTable>
12981369
</section>
12991370

13001371
<section>
@@ -1448,6 +1519,25 @@
14481519
font-size: 1.25rem;
14491520
}
14501521
1522+
.emerald-avatar-group {
1523+
display: inline-flex;
1524+
align-items: center;
1525+
}
1526+
1527+
.emerald-avatar-group > :deep(.emerald-avatar) {
1528+
box-shadow: 0 0 0 2px var(--emerald-background, #faf9ff);
1529+
}
1530+
1531+
.emerald-avatar-group > :deep(.emerald-avatar) + :deep(.emerald-avatar) {
1532+
margin-left: -10px;
1533+
}
1534+
1535+
.muted {
1536+
margin: 0.5rem 0 0.25rem;
1537+
font-size: 0.75rem;
1538+
color: var(--emerald-neutral-500);
1539+
}
1540+
14511541
:deep(.sink-carousel-slide) {
14521542
width: 100%;
14531543
aspect-ratio: 1 / 1;

‎dev/src/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ declare module 'vue' {
186186
EmStepper: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepper.vue')['default']
187187
EmStepperItem: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperItem.vue')['default']
188188
EmStepperLabel: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperLabel.vue')['default']
189+
EmStepperLabelDescription: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue')['default']
189190
EmStepperSeparator: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperSeparator.vue')['default']
190191
EmSwitch: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitch.vue')['default']
191192
EmSwitchGroup: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue')['default']

0 commit comments

Comments
 (0)