Skip to content

Commit b27f2b9

Browse files
43081j43081j
committed
chore: rework design to subbranch version info
1 parent 28bb82d commit b27f2b9

File tree

1 file changed

+115
-109
lines changed

1 file changed

+115
-109
lines changed

‎app/pages/package-timeline/[[org]]/[packageName].vue‎

Lines changed: 115 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -214,115 +214,6 @@ useSeoMeta({
214214
<!-- Timeline -->
215215
<ol v-if="visibleEntries.length" class="relative border-s border-border ms-4">
216216
<li v-for="entry in visibleEntries" :key="entry.version" class="mb-6 ms-6">
217-
<!-- Size event -->
218-
<div v-if="sizeEvents.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
219-
<span
220-
class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border"
221-
:class="
222-
sizeEvents.get(entry.version)!.direction === 'decrease'
223-
? 'bg-green-500 border-green-600'
224-
: 'bg-amber-500 border-amber-600'
225-
"
226-
>
227-
<span
228-
class="w-2.5 h-2.5 text-white"
229-
:class="
230-
sizeEvents.get(entry.version)!.direction === 'decrease'
231-
? 'i-lucide:trending-down'
232-
: 'i-lucide:trending-up'
233-
"
234-
aria-hidden="true"
235-
/>
236-
</span>
237-
<p
238-
class="text-sm"
239-
:class="
240-
sizeEvents.get(entry.version)!.direction === 'decrease'
241-
? 'text-green-700 dark:text-green-400'
242-
: 'text-amber-700 dark:text-amber-400'
243-
"
244-
>
245-
<template v-if="sizeEvents.get(entry.version)!.sizeThresholdExceeded">
246-
{{
247-
sizeEvents.get(entry.version)!.direction === 'decrease'
248-
? $t('package.timeline.size_decrease', {
249-
percent: Math.abs(
250-
Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
251-
),
252-
size: bytesFormatter.format(
253-
Math.abs(sizeEvents.get(entry.version)!.sizeDelta),
254-
),
255-
})
256-
: $t('package.timeline.size_increase', {
257-
percent: Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
258-
size: bytesFormatter.format(sizeEvents.get(entry.version)!.sizeDelta),
259-
})
260-
}}
261-
</template>
262-
<template
263-
v-if="
264-
sizeEvents.get(entry.version)!.sizeThresholdExceeded &&
265-
sizeEvents.get(entry.version)!.depThresholdExceeded
266-
"
267-
>
268-
&middot;
269-
</template>
270-
<template v-if="sizeEvents.get(entry.version)!.depThresholdExceeded">
271-
{{
272-
sizeEvents.get(entry.version)!.depDiff > 0
273-
? $t('package.timeline.dep_increase', {
274-
count: sizeEvents.get(entry.version)!.depDiff,
275-
})
276-
: $t('package.timeline.dep_decrease', {
277-
count: Math.abs(sizeEvents.get(entry.version)!.depDiff),
278-
})
279-
}}
280-
</template>
281-
</p>
282-
</div>
283-
<!-- License change -->
284-
<div v-if="licenseChanges.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
285-
<span
286-
class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border bg-amber-500 border-amber-600"
287-
>
288-
<span class="w-2.5 h-2.5 text-white i-lucide:scale" aria-hidden="true" />
289-
</span>
290-
<p class="text-sm text-amber-700 dark:text-amber-400">
291-
{{
292-
$t('package.timeline.license_change', {
293-
from: licenseChanges.get(entry.version)!.from,
294-
to: licenseChanges.get(entry.version)!.to,
295-
})
296-
}}
297-
</p>
298-
</div>
299-
<!-- ESM change -->
300-
<div v-if="esmChanges.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
301-
<span
302-
class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border"
303-
:class="
304-
esmChanges.get(entry.version) === 'added'
305-
? 'bg-green-500 border-green-600'
306-
: 'bg-amber-500 border-amber-600'
307-
"
308-
>
309-
<span class="w-2.5 h-2.5 text-white i-lucide:package" aria-hidden="true" />
310-
</span>
311-
<p
312-
class="text-sm"
313-
:class="
314-
esmChanges.get(entry.version) === 'added'
315-
? 'text-green-700 dark:text-green-400'
316-
: 'text-amber-700 dark:text-amber-400'
317-
"
318-
>
319-
{{
320-
esmChanges.get(entry.version) === 'added'
321-
? $t('package.timeline.esm_added')
322-
: $t('package.timeline.esm_removed')
323-
}}
324-
</p>
325-
</div>
326217
<!-- Dot -->
327218
<span
328219
class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border border-border"
@@ -354,6 +245,121 @@ useSeoMeta({
354245
day="numeric"
355246
/>
356247
</div>
248+
<!-- Sub-events branch -->
249+
<ol
250+
v-if="sizeEvents.has(entry.version) || licenseChanges.has(entry.version) || esmChanges.has(entry.version)"
251+
class="relative border-s border-border/50 ms-3 mt-2"
252+
>
253+
<!-- Size event -->
254+
<li v-if="sizeEvents.has(entry.version)" class="mb-2 ms-4 relative last:mb-0">
255+
<span
256+
class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
257+
:class="
258+
sizeEvents.get(entry.version)!.direction === 'decrease'
259+
? 'bg-green-500 border-green-600'
260+
: 'bg-amber-500 border-amber-600'
261+
"
262+
>
263+
<span
264+
class="w-2 h-2 text-white"
265+
:class="
266+
sizeEvents.get(entry.version)!.direction === 'decrease'
267+
? 'i-lucide:trending-down'
268+
: 'i-lucide:trending-up'
269+
"
270+
aria-hidden="true"
271+
/>
272+
</span>
273+
<p
274+
class="text-xs"
275+
:class="
276+
sizeEvents.get(entry.version)!.direction === 'decrease'
277+
? 'text-green-700 dark:text-green-400'
278+
: 'text-amber-700 dark:text-amber-400'
279+
"
280+
>
281+
<template v-if="sizeEvents.get(entry.version)!.sizeThresholdExceeded">
282+
{{
283+
sizeEvents.get(entry.version)!.direction === 'decrease'
284+
? $t('package.timeline.size_decrease', {
285+
percent: Math.abs(
286+
Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
287+
),
288+
size: bytesFormatter.format(
289+
Math.abs(sizeEvents.get(entry.version)!.sizeDelta),
290+
),
291+
})
292+
: $t('package.timeline.size_increase', {
293+
percent: Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
294+
size: bytesFormatter.format(sizeEvents.get(entry.version)!.sizeDelta),
295+
})
296+
}}
297+
</template>
298+
<template
299+
v-if="
300+
sizeEvents.get(entry.version)!.sizeThresholdExceeded &&
301+
sizeEvents.get(entry.version)!.depThresholdExceeded
302+
"
303+
>
304+
&middot;
305+
</template>
306+
<template v-if="sizeEvents.get(entry.version)!.depThresholdExceeded">
307+
{{
308+
sizeEvents.get(entry.version)!.depDiff > 0
309+
? $t('package.timeline.dep_increase', {
310+
count: sizeEvents.get(entry.version)!.depDiff,
311+
})
312+
: $t('package.timeline.dep_decrease', {
313+
count: Math.abs(sizeEvents.get(entry.version)!.depDiff),
314+
})
315+
}}
316+
</template>
317+
</p>
318+
</li>
319+
<!-- License change -->
320+
<li v-if="licenseChanges.has(entry.version)" class="mb-2 ms-4 relative last:mb-0">
321+
<span
322+
class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border bg-amber-500 border-amber-600"
323+
>
324+
<span class="w-2 h-2 text-white i-lucide:scale" aria-hidden="true" />
325+
</span>
326+
<p class="text-xs text-amber-700 dark:text-amber-400">
327+
{{
328+
$t('package.timeline.license_change', {
329+
from: licenseChanges.get(entry.version)!.from,
330+
to: licenseChanges.get(entry.version)!.to,
331+
})
332+
}}
333+
</p>
334+
</li>
335+
<!-- ESM change -->
336+
<li v-if="esmChanges.has(entry.version)" class="mb-2 ms-4 relative last:mb-0">
337+
<span
338+
class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
339+
:class="
340+
esmChanges.get(entry.version) === 'added'
341+
? 'bg-green-500 border-green-600'
342+
: 'bg-amber-500 border-amber-600'
343+
"
344+
>
345+
<span class="w-2 h-2 text-white i-lucide:package" aria-hidden="true" />
346+
</span>
347+
<p
348+
class="text-xs"
349+
:class="
350+
esmChanges.get(entry.version) === 'added'
351+
? 'text-green-700 dark:text-green-400'
352+
: 'text-amber-700 dark:text-amber-400'
353+
"
354+
>
355+
{{
356+
esmChanges.get(entry.version) === 'added'
357+
? $t('package.timeline.esm_added')
358+
: $t('package.timeline.esm_removed')
359+
}}
360+
</p>
361+
</li>
362+
</ol>
357363
</li>
358364
</ol>
359365

0 commit comments

Comments
 (0)