Skip to content

Commit 3d2877c

Browse files
cylewaitforitcylewaitforit
committed
Merge branch 'main' into sb-add-docs-darktheme
2 parents c0cf183 + 4ad0679 commit 3d2877c

File tree

30 files changed

+1402
-106
lines changed

30 files changed

+1402
-106
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"editor.formatOnSave": true,
44
"i18n-ally.keystyle": "nested",
55
"i18n-ally.localesPaths": ["./i18n/locales"],
6-
"typescript.tsdk": "node_modules/typescript/lib",
6+
"js/ts.tsdk.path": "node_modules/typescript/lib",
77
"explorer.fileNesting.enabled": true,
88
"explorer.fileNesting.patterns": {
99
"*.vue": "${capture}.stories.ts"

‎app/components/Chart/PatternSlot.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script setup lang="ts">
2+
/**
3+
* This component is designed to create various patterns from seeds, and included
4+
* inside vue-data-ui charts in the #pattern slots.
5+
* Using patterns helps users with vision deficency (like achromatopsia) to distinguish
6+
* series in the context of data visualisation.
7+
*/
8+
import { computed } from 'vue'
9+
import { createSeededSvgPattern, type ChartPatternSlotProps } from '~/utils/charts'
10+
11+
const props = defineProps<ChartPatternSlotProps>()
12+
13+
const pattern = computed(() =>
14+
createSeededSvgPattern(props.seed, {
15+
foregroundColor: props.foregroundColor,
16+
backgroundColor: props.color ?? props.fallbackColor,
17+
minimumSize: props.minSize,
18+
maximumSize: props.maxSize,
19+
}),
20+
)
21+
</script>
22+
23+
<template>
24+
<pattern
25+
:id
26+
patternUnits="userSpaceOnUse"
27+
:width="pattern.width"
28+
:height="pattern.height"
29+
:patternTransform="`rotate(${pattern.rotation})`"
30+
v-html="pattern.contentMarkup"
31+
/>
32+
</template>

‎app/components/Compare/FacetBarChart.vue‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { ref, computed } from 'vue'
33
import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
44
import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
55
import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
6+
import { createChartPatternSlotMarkup } from '~/utils/charts'
67
import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
8+
79
import {
810
loadFile,
911
insertLineBreaks,
@@ -213,13 +215,40 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
213215
backdropFilter: false,
214216
backgroundColor: 'transparent',
215217
customFormat: ({ datapoint }) => {
216-
const name = datapoint?.name?.replace(/\n/g, '<br>')
218+
const name = datapoint?.name?.replace(/\n/g, '<br>') ?? ''
219+
const safeSeriesIndex = (datapoint?.absoluteIndex as number) ?? 0
220+
const patternId = `tooltip-pattern-${safeSeriesIndex}`
221+
const usePattern = safeSeriesIndex !== 0
222+
223+
const patternMarkup = usePattern
224+
? createChartPatternSlotMarkup({
225+
id: patternId,
226+
seed: safeSeriesIndex,
227+
foregroundColor: colors.value.bg!,
228+
fallbackColor: 'transparent',
229+
maxSize: 24,
230+
minSize: 16,
231+
})
232+
: ''
233+
234+
const markerMarkup = usePattern
235+
? `
236+
<rect x="0" y="0" width="20" height="20" rx="3" fill="${datapoint?.color ?? 'transparent'}" />
237+
<rect x="0" y="0" width="20" height="20" rx="3" fill="url(#${patternId})" />
238+
`
239+
: `
240+
<rect x="0" y="0" width="20" height="20" rx="3" fill="${datapoint?.color ?? 'transparent'}" />
241+
`
242+
217243
return `
218244
<div class="font-mono p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
219245
<div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3">
220246
<div class="w-3 h-3">
221-
<svg viewBox="0 0 2 2" class="w-full h-full">
222-
<rect x="0" y="0" width="2" height="2" rx="0.3" fill="${datapoint?.color}" />
247+
<svg viewBox="0 0 20 20" class="w-full h-full" aria-hidden="true">
248+
<defs>
249+
${patternMarkup}
250+
</defs>
251+
${markerMarkup}
223252
</svg>
224253
</div>
225254
<span class="text-3xs uppercase tracking-wide text-[var(--fg)]/70 truncate">
@@ -230,7 +259,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
230259
</span>
231260
</div>
232261
</div>
233-
`
262+
`
234263
},
235264
},
236265
},
@@ -243,8 +272,19 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
243272
<div class="font-mono facet-bar">
244273
<ClientOnly v-if="dataset.length">
245274
<VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
275+
<template #pattern="{ patternId, seriesIndex }">
276+
<ChartPatternSlot
277+
v-if="seriesIndex != 0"
278+
:id="patternId"
279+
:seed="seriesIndex"
280+
:foreground-color="colors.bg!"
281+
fallback-color="transparent"
282+
:max-size="24"
283+
:min-size="16"
284+
/>
285+
</template>
286+
246287
<template #svg="{ svg }">
247-
<!-- Inject npmx logo & tagline during SVG and PNG print -->
248288
<g
249289
v-if="svg.isPrintingSvg || svg.isPrintingImg"
250290
v-html="
@@ -261,15 +301,19 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
261301
<span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
262302
<span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
263303
</template>
304+
264305
<template #optionCsv>
265306
<span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
266307
</template>
308+
267309
<template #optionImg>
268310
<span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
269311
</template>
312+
270313
<template #optionSvg>
271314
<span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
272315
</template>
316+
273317
<template #optionAltCopy>
274318
<span
275319
class="w-6 h-6"

‎app/components/Package/Dependencies.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,11 @@ const numberFormatter = useNumberFormatter()
150150
:to="packageRoute(dep, getVulnerableDepInfo(dep)!.version)"
151151
class="shrink-0"
152152
:class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
153-
:title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
153+
:title="
154+
$t('package.dependencies.vulnerabilities_count', {
155+
count: getVulnerableDepInfo(dep)!.counts.total,
156+
})
157+
"
154158
classicon="i-lucide:shield-check"
155159
>
156160
<span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
@@ -176,7 +180,11 @@ const numberFormatter = useNumberFormatter()
176180
({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
177181
</span>
178182
<span v-if="getVulnerableDepInfo(dep)" class="sr-only">
179-
({{ getVulnerableDepInfo(dep)!.counts.total }} vulnerabilities)
183+
({{
184+
$t('package.dependencies.vulnerabilities_count', {
185+
count: getVulnerableDepInfo(dep)!.counts.total,
186+
})
187+
}})
180188
</span>
181189
</span>
182190
</li>

‎app/components/Package/ListToolbar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ const { selectedPackages, clearSelectedPackages } = usePackageSelection()
228228
</ButtonBase>
229229
<button
230230
@click="clearSelectedPackages"
231-
aria-label="Close action bar"
231+
:aria-label="$t('filters.clear_selected_label')"
232232
class="flex items-center ms-2"
233233
>
234234
<span class="i-lucide:x text-sm" />

‎app/components/Package/SkillsModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
8383
"
8484
@click="selectedMethod = 'skills-cli'"
8585
>
86-
skills CLI
86+
{{ $t('package.skills.skills_cli') }}
8787
</button>
8888
</div>
8989
</div>

‎app/components/Package/TableRow.vue‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,6 @@ const isSelected = computed<boolean>(() => {
2222
return isPackageSelected(props.result.package.name)
2323
})
2424
25-
function formatDownloads(count?: number): string {
26-
if (count === undefined) return '-'
27-
if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`
28-
if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`
29-
return count.toString()
30-
}
31-
3225
function formatScore(value?: number): string {
3326
if (value === undefined || value === 0) return '-'
3427
return Math.round(value * 100).toString()
@@ -44,6 +37,8 @@ const allMaintainersText = computed(() => {
4437
if (!pkg.value.maintainers?.length) return ''
4538
return pkg.value.maintainers.map(m => m.name || m.email).join(', ')
4639
})
40+
41+
const compactNumberFormatter = useCompactNumberFormatter()
4742
</script>
4843

4944
<template>
@@ -89,7 +84,11 @@ const allMaintainersText = computed(() => {
8984
v-if="isColumnVisible('downloads')"
9085
class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
9186
>
92-
{{ formatDownloads(result.downloads?.weekly) }}
87+
{{
88+
result.downloads?.weekly !== undefined
89+
? compactNumberFormatter.format(result.downloads.weekly)
90+
: '-'
91+
}}
9392
</td>
9493

9594
<!-- Updated -->

‎app/components/Package/VersionDistribution.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -375,7 +375,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
375375
tabindex="0"
376376
class="i-lucide:info w-3.5 h-3.5 text-fg-subtle cursor-help shrink-0 rounded-sm"
377377
role="img"
378-
aria-label="versions info"
378+
:aria-label="$t('package.versions.grouping_versions_about')"
379379
/>
380380
</TooltipApp>
381381
</label>
@@ -412,7 +412,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
412412
tabindex="0"
413413
class="i-lucide:info w-3.5 h-3.5 text-fg-subtle cursor-help shrink-0 rounded-sm"
414414
role="img"
415-
aria-label="versions info"
415+
:aria-label="$t('package.versions.grouping_usage_about')"
416416
/>
417417
</TooltipApp>
418418
</label>

‎app/components/PaginationControls.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ function handlePageSizeChange(event: Event) {
155155
@change="handlePageSizeChange"
156156
:items="
157157
PAGE_SIZE_OPTIONS.map(size => ({
158-
label: $t('filters.pagination.per_page', { count: size }),
158+
label: $t('filters.pagination.per_page', { count: $n(size) }),
159159
value: String(size),
160160
}))
161161
"
@@ -207,7 +207,7 @@ function handlePageSizeChange(event: Event) {
207207
:aria-current="page === currentPage ? 'page' : undefined"
208208
@click="goToPage(page)"
209209
>
210-
{{ page }}
210+
{{ $n(page) }}
211211
</button>
212212
</template>
213213

‎app/components/VersionSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -543,7 +543,7 @@ watch(
543543
type="button"
544544
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0"
545545
:aria-expanded="group.isExpanded"
546-
:aria-label="group.isExpanded ? 'Collapse' : 'Expand'"
546+
:aria-label="group.isExpanded ? $t('common.collapse') : $t('common.expand')"
547547
@click.stop="toggleGroup(group.id)"
548548
>
549549
<span

0 commit comments

Comments
 (0)