feat: add package comparison feature #383
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| <script setup lang="ts"> | ||
| defineProps<{ | ||
| /** Number of columns (2-4) */ | ||
| columns: number | ||
| /** Column headers (package names or version numbers) */ | ||
| headers: string[] | ||
| }>() | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="overflow-x-auto"> | ||
| <div | ||
| class="comparison-grid" | ||
| :class="[columns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${columns}`]" | ||
| :style="{ '--columns': columns }" | ||
| > | ||
| <!-- Header row --> | ||
| <div class="comparison-header"> | ||
| <div class="comparison-label" /> | ||
| <div | ||
| v-for="(header, index) in headers" | ||
| :key="index" | ||
| class="comparison-cell comparison-cell-header" | ||
| > | ||
| <span class="font-mono text-sm font-medium text-fg truncate" :title="header"> | ||
| {{ header }} | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Facet rows --> | ||
| <slot /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .comparison-grid { | ||
| display: grid; | ||
| gap: 0; | ||
| } | ||
|
|
||
| .comparison-grid.columns-2 { | ||
| grid-template-columns: minmax(120px, 180px) repeat(2, 1fr); | ||
| } | ||
|
|
||
| .comparison-grid.columns-3 { | ||
| grid-template-columns: minmax(120px, 160px) repeat(3, 1fr); | ||
| } | ||
|
|
||
| .comparison-grid.columns-4 { | ||
| grid-template-columns: minmax(100px, 140px) repeat(4, 1fr); | ||
| } | ||
|
|
||
| .comparison-header { | ||
| display: contents; | ||
| } | ||
|
|
||
| .comparison-header > .comparison-label { | ||
| padding: 0.75rem 1rem; | ||
| border-bottom: 1px solid var(--color-border); | ||
| } | ||
|
|
||
| .comparison-header > .comparison-cell-header { | ||
| padding: 0.75rem 1rem; | ||
| background: var(--color-bg-subtle); | ||
| border-bottom: 1px solid var(--color-border); | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* First header cell rounded top-start */ | ||
| .comparison-header > .comparison-cell-header:first-of-type { | ||
| border-start-start-radius: 0.5rem; | ||
| } | ||
|
|
||
| /* Last header cell rounded top-end */ | ||
| .comparison-header > .comparison-cell-header:last-of-type { | ||
| border-start-end-radius: 0.5rem; | ||
| } | ||
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| <script setup lang="ts"> | ||
| import type { FacetValue } from '#shared/types' | ||
|
|
||
| const props = defineProps<{ | ||
| /** Facet label */ | ||
| label: string | ||
| /** Description/tooltip for the facet */ | ||
| description?: string | ||
| /** Values for each column */ | ||
| values: (FacetValue | null | undefined)[] | ||
| /** Whether this facet is loading (e.g., install size) */ | ||
| facetLoading?: boolean | ||
| /** Whether each column is loading (array matching values) */ | ||
| columnLoading?: boolean[] | ||
| /** Whether to show the proportional bar (defaults to true for numeric values) */ | ||
| bar?: boolean | ||
| /** Package headers for display */ | ||
| headers: string[] | ||
| }>() | ||
|
|
||
| // Check if all values are numeric (for bar visualization) | ||
| const isNumeric = computed(() => { | ||
| return props.values.every(v => v === null || v === undefined || typeof v.raw === 'number') | ||
| }) | ||
|
|
||
| // Show bar if explicitly enabled, or if not specified and values are numeric | ||
| const showBar = computed(() => { | ||
| return props.bar ?? isNumeric.value | ||
| }) | ||
|
|
||
| // Get max value for bar width calculation | ||
| const maxValue = computed(() => { | ||
| if (!isNumeric.value) return 0 | ||
| return Math.max(...props.values.map(v => (typeof v?.raw === 'number' ? v.raw : 0))) | ||
| }) | ||
|
|
||
| // Calculate bar width percentage for a value | ||
| function getBarWidth(value: FacetValue | null | undefined): number { | ||
| if (!isNumeric.value || !maxValue.value || !value || typeof value.raw !== 'number') return 0 | ||
| return (value.raw / maxValue.value) * 100 | ||
| } | ||
|
|
||
| function getStatusClass(status?: FacetValue['status']): string { | ||
| switch (status) { | ||
| case 'good': | ||
| return 'text-emerald-400' | ||
| case 'info': | ||
| return 'text-blue-400' | ||
| case 'warning': | ||
| return 'text-amber-400' | ||
| case 'bad': | ||
| return 'text-red-400' | ||
| default: | ||
| return 'text-fg' | ||
| } | ||
| } | ||
|
|
||
| // Check if a specific cell is loading | ||
| function isCellLoading(index: number): boolean { | ||
| return props.facetLoading || (props.columnLoading?.[index] ?? false) | ||
| } | ||
|
|
||
| // Get short package name (without version) for mobile display | ||
| function getShortName(header: string): string { | ||
| const atIndex = header.lastIndexOf('@') | ||
| if (atIndex > 0) { | ||
| return header.substring(0, atIndex) | ||
| } | ||
| return header | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="border border-border rounded-lg overflow-hidden"> | ||
| <!-- Facet header --> | ||
| <div class="flex items-center gap-1.5 px-3 py-2 bg-bg-subtle border-b border-border"> | ||
| <span class="text-xs text-fg-muted uppercase tracking-wider font-medium">{{ label }}</span> | ||
| <span | ||
| v-if="description" | ||
| class="i-carbon:information w-3 h-3 text-fg-subtle" | ||
| :title="description" | ||
| aria-hidden="true" | ||
| /> | ||
| </div> | ||
|
|
||
| <!-- Package values --> | ||
| <div class="divide-y divide-border"> | ||
| <div | ||
| v-for="(value, index) in values" | ||
| :key="index" | ||
| class="relative flex items-center justify-between gap-2 px-3 py-2" | ||
| > | ||
| <!-- Background bar for numeric values --> | ||
| <div | ||
| v-if="showBar && value && getBarWidth(value) > 0" | ||
| class="absolute inset-y-0 inset-is-0 bg-fg/5 transition-all duration-300" | ||
| :style="{ width: `${getBarWidth(value)}%` }" | ||
| aria-hidden="true" | ||
| /> | ||
|
|
||
| <!-- Package name --> | ||
| <span | ||
| class="relative font-mono text-xs text-fg-muted truncate flex-shrink min-w-0" | ||
| :title="headers[index]" | ||
| > | ||
| {{ getShortName(headers[index] ?? '') }} | ||
| </span> | ||
|
|
||
| <!-- Value --> | ||
| <span class="relative flex-shrink-0"> | ||
| <!-- Loading state --> | ||
| <template v-if="isCellLoading(index)"> | ||
| <span | ||
| class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin" | ||
| aria-hidden="true" | ||
| /> | ||
| </template> | ||
|
|
||
| <!-- No data --> | ||
| <template v-else-if="!value"> | ||
| <span class="text-fg-subtle text-sm">-</span> | ||
| </template> | ||
|
|
||
| <!-- Value display --> | ||
| <template v-else> | ||
| <span class="font-mono text-sm tabular-nums" :class="getStatusClass(value.status)"> | ||
| <!-- Date values use DateTime component for i18n and user settings --> | ||
| <DateTime | ||
| v-if="value.type === 'date'" | ||
| :datetime="value.display" | ||
| date-style="medium" | ||
| /> | ||
| <template v-else>{{ value.display }}</template> | ||
| </span> | ||
| </template> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| <script setup lang="ts"> | ||
| import type { FacetValue } from '#shared/types' | ||
|
|
||
| const props = defineProps<{ | ||
| /** Facet label */ | ||
| label: string | ||
| /** Description/tooltip for the facet */ | ||
| description?: string | ||
| /** Values for each column */ | ||
| values: (FacetValue | null | undefined)[] | ||
| /** Whether this facet is loading (e.g., install size) */ | ||
| facetLoading?: boolean | ||
| /** Whether each column is loading (array matching values) */ | ||
| columnLoading?: boolean[] | ||
| /** Whether to show the proportional bar (defaults to true for numeric values) */ | ||
| bar?: boolean | ||
| }>() | ||
|
|
||
| // Check if all values are numeric (for bar visualization) | ||
| const isNumeric = computed(() => { | ||
| return props.values.every(v => v === null || v === undefined || typeof v.raw === 'number') | ||
| }) | ||
|
Comment on lines
+19
to
+22
Collaborator
Author
There was a problem hiding this comment. might be better to just explicitly mark the facets we want with |
||
|
|
||
| // Show bar if explicitly enabled, or if not specified and values are numeric | ||
| const showBar = computed(() => { | ||
| return props.bar ?? isNumeric.value | ||
| }) | ||
|
|
||
| // Get max value for bar width calculation | ||
| const maxValue = computed(() => { | ||
| if (!isNumeric.value) return 0 | ||
| return Math.max(...props.values.map(v => (typeof v?.raw === 'number' ? v.raw : 0))) | ||
| }) | ||
|
|
||
| // Calculate bar width percentage for a value | ||
| function getBarWidth(value: FacetValue | null | undefined): number { | ||
| if (!isNumeric.value || !maxValue.value || !value || typeof value.raw !== 'number') return 0 | ||
| return (value.raw / maxValue.value) * 100 | ||
| } | ||
|
|
||
| function getStatusClass(status?: FacetValue['status']): string { | ||
| switch (status) { | ||
| case 'good': | ||
| return 'text-emerald-400' | ||
| case 'info': | ||
| return 'text-blue-400' | ||
| case 'warning': | ||
| return 'text-amber-400' | ||
| case 'bad': | ||
| return 'text-red-400' | ||
| default: | ||
| return 'text-fg' | ||
| } | ||
| } | ||
|
|
||
| // Check if a specific cell is loading | ||
| function isCellLoading(index: number): boolean { | ||
| return props.facetLoading || (props.columnLoading?.[index] ?? false) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="contents"> | ||
| <!-- Label cell --> | ||
| <div | ||
| class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border" | ||
| :title="description" | ||
| > | ||
| <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span> | ||
| <span | ||
| v-if="description" | ||
| class="i-carbon:information w-3 h-3 text-fg-subtle" | ||
| aria-hidden="true" | ||
| /> | ||
| </div> | ||
|
|
||
| <!-- Value cells --> | ||
| <div | ||
| v-for="(value, index) in values" | ||
| :key="index" | ||
| class="comparison-cell relative flex items-end justify-center px-4 py-3 border-b border-border" | ||
| > | ||
| <!-- Background bar for numeric values --> | ||
| <div | ||
| v-if="showBar && value && getBarWidth(value) > 0" | ||
| class="absolute inset-y-1 inset-is-1 bg-fg/5 rounded-sm transition-all duration-300" | ||
| :style="{ width: `calc(${getBarWidth(value)}% - 8px)` }" | ||
| aria-hidden="true" | ||
| /> | ||
|
|
||
| <!-- Loading state --> | ||
| <template v-if="isCellLoading(index)"> | ||
| <span | ||
| class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin" | ||
| aria-hidden="true" | ||
| /> | ||
| </template> | ||
|
|
||
| <!-- No data --> | ||
| <template v-else-if="!value"> | ||
| <span class="text-fg-subtle text-sm">-</span> | ||
| </template> | ||
|
|
||
| <!-- Value display --> | ||
| <template v-else> | ||
| <span class="relative font-mono text-sm tabular-nums" :class="getStatusClass(value.status)"> | ||
| <!-- Date values use DateTime component for i18n and user settings --> | ||
| <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" /> | ||
| <template v-else>{{ value.display }}</template> | ||
| </span> | ||
| </template> | ||
| </div> | ||
| </div> | ||
| </template> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This (and some other components) was intended to be reusable for both package comparison and [email protected] vs. [email protected] comparison, though I ended up not including the latter in this already huge PR 😅.