chore: update type imports for vue-data-ui components

Author: graphieros

app/components/Chart/SplitSparkline.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
-import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
-import { useCssVariables } from '~/composables/useColors'
 import {
+  VueUiSparkline,
   type VueUiSparklineConfig,
   type VueUiSparklineDatasetItem,
-  type VueUiXyDatasetItem,
-} from 'vue-data-ui'
+} from 'vue-data-ui/vue-ui-sparkline'
+import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
+import { useCssVariables } from '~/composables/useColors'
+import type { VueUiXyDatasetItem } from 'vue-data-ui/vue-ui-xy'
 import { getPalette, lightenColor } from 'vue-data-ui/utils'
 import { CHART_PATTERN_CONFIG } from '~/utils/charts'
 
@@ -233,9 +233,10 @@ const configs = computed(() => {
           {{ applyEllipsis(dataset?.[i]?.name ?? '', 27) }}
         </div>
         <VueUiSparkline
+          v-if="datasets[i]"
           :key="`${i}_${step}`"
           :config
-          :dataset="datasets?.[i]"
+          :dataset="datasets[i]"
           :selectedIndex
           @hoverIndex="hoverIndex"
         >

app/components/Compare/FacetBarChart.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
+import {
+  VueUiHorizontalBar,
+  type VueUiHorizontalBarConfig,
+  type VueUiHorizontalBarDatasetItem,
+} from 'vue-data-ui/vue-ui-horizontal-bar'
 import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
-import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { createPatternDef } from 'vue-data-ui/utils'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'

app/components/Compare/FacetScatterChart.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { SelectField } from '#components'
 import { ref, computed } from 'vue'
-import type { FormatterParams, VueUiScatterConfig, VueUiScatterDatasetItem } from 'vue-data-ui'
-import { VueUiScatter } from 'vue-data-ui/vue-ui-scatter'
+import {
+  VueUiScatter,
+  type VueUiScatterConfig,
+  type VueUiScatterDatasetItem,
+} from 'vue-data-ui/vue-ui-scatter'
 import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
 import { loadFile, copyAltTextForCompareScatterChart } from '~/utils/charts'
 
@@ -210,7 +213,7 @@ const config = computed<VueUiScatterConfig>(() => {
                 color: colors.value.fgSubtle,
                 offsetY: 10,
                 fontSize: 14,
-                formatter: (args: FormatterParams) => {
+                formatter: args => {
                   return formatters.value.x!(args.value)
                 },
               },
@@ -231,7 +234,7 @@ const config = computed<VueUiScatterConfig>(() => {
               labels: {
                 color: colors.value.fgSubtle,
                 fontSize: 14,
-                formatter: (args: FormatterParams) => {
+                formatter: args => {
                   return formatters.value.y!(args.value)
                 },
               },

app/components/Package/TrendsChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Theme as VueDataUiTheme, VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
-import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
+import type { Theme as VueDataUiTheme } from 'vue-data-ui'
+import { VueUiXy, type VueUiXyConfig, type VueUiXyDatasetItem } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn, useElementSize, useTimeoutFn } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenOklch } from '~/utils/colors'
@@ -1077,7 +1077,7 @@ const normalisedDataset = computed(() => {
   const lastDateMs = chartData.value.dates.at(-1) ?? 0
   const isAbsoluteMetric = selectedMetric.value === 'contributors'
 
-  return chartData.value.dataset?.map(d => {
+  return (chartData.value.dataset || []).map(d => {
     const series = applyDataPipeline(
       d.series.map(v => v ?? 0),
       {

app/components/Package/VersionDistribution.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
-import { type VueUiXyDatasetItem, type VueUiXyConfig } from 'vue-data-ui'
+import { VueUiXy, type VueUiXyDatasetItem, type VueUiXyConfig } from 'vue-data-ui/vue-ui-xy'
 import { useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenHex } from '~/utils/colors'

app/components/Package/WeeklyDownloadStats.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
+import {
+  VueUiSparkline,
+  type VueUiSparklineConfig,
+  type VueUiSparklineDatasetItem,
+} from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '~/composables/useColors'
 import type { WeeklyDataPoint } from '~/types/chart'
 import { applyDataCorrection } from '~/utils/chart-data-correction'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 import { applyBlocklistCorrection } from '~/utils/download-anomalies'
 import type { RepoRef } from '#shared/utils/git-providers'
-import type { VueUiSparklineConfig, VueUiSparklineDatasetItem } from 'vue-data-ui'
 import { onKeyDown } from '@vueuse/core'
 
 import('vue-data-ui/style.css')