feat: improve generic props

apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue

@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: KeyOfT[]
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -77,7 +77,10 @@ const props = withDefaults(defineProps<{
   showGradiant: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({

apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue

@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: Array<KeyOfT>
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
   name: category,
@@ -102,14 +106,14 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
       <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" />
 
       <VisBarComponent
-        :x="(d: T, i: number) => i"
-        :y="categories.map(category => (d: T) => d[category]) "
+        :x="(d: Data, i: number) => i"
+        :y="categories.map(category => (d: Data) => d[category]) "
         :color="colors"
         :rounded-corners="4"
         :bar-padding="0.1"
         :attributes="{
           [selectorsBar]: {
-            opacity: (d: T, i:number) => {
+            opacity: (d: Data, i:number) => {
               const pos = i % categories.length
               return legendItems[pos]?.inactive ? filterOpacity : 1
             },

apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue

@@ -14,11 +14,11 @@ const props = withDefaults(defineProps<{
   /**
    * Sets the key to map the data to the chart.
    */
-  index: string
+  index: KeyOfT
   /**
    * Sets the name of the key containing the quantitative chart values.
    */
-  category: string
+  category: KeyOfT
   /**
    * Change the default colors.
    */
@@ -60,8 +60,12 @@ const props = withDefaults(defineProps<{
   showLegend: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
+const category = computed(() => props.category as KeyOfT)
+const index = computed(() => props.index as KeyOfT)
+
 const isMounted = useMounted()
 const activeSegmentKey = ref<string>()
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))

apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue

@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: KeyOfT[]
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -71,7 +71,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({

apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue

@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: KeyOfT[]
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -77,7 +77,10 @@ const props = withDefaults(defineProps<{
   showGradiant: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({

apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue

@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: Array<KeyOfT>
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -77,7 +77,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
   name: category,

apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue

@@ -14,11 +14,11 @@ const props = withDefaults(defineProps<{
   /**
    * Sets the key to map the data to the chart.
    */
-  index: string
+  index: KeyOfT
   /**
    * Sets the name of the key containing the quantitative chart values.
    */
-  category: string
+  category: KeyOfT
   /**
    * Change the default colors.
    */
@@ -60,8 +60,12 @@ const props = withDefaults(defineProps<{
   showLegend: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
+const category = computed(() => props.category as KeyOfT)
+const index = computed(() => props.index as KeyOfT)
+
 const isMounted = useMounted()
 const activeSegmentKey = ref<string>()
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))

apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue

@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: KeyOfT[]
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -71,7 +71,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({