chore: fix type, import missing error

2024-04-15 00:31:14 +08:00 · 2024-04-15 00:31:14 +08:00 · e356b25d13
commit e356b25d13
parent 4296624cdb
15 changed files with 309 additions and 130 deletions
--- a/apps/www/.vitepress/theme/components/MobileNav.vue
+++ b/apps/www/.vitepress/theme/components/MobileNav.vue
@ -5,6 +5,7 @@ import Logo from './Logo.vue'
 import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
 import { Button } from '@/lib/registry/default/ui/button'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import { Badge } from '@/lib/registry/new-york/ui/badge'

 const open = ref(false)
 </script>
--- a/apps/www/.vitepress/theme/components/ThemePopover.vue
+++ b/apps/www/.vitepress/theme/components/ThemePopover.vue
@ -1,21 +1,13 @@
 <script setup lang="ts">
-import { onMounted, watch } from 'vue'
 import { Paintbrush } from 'lucide-vue-next'
-import { useData } from 'vitepress'
+import { onMounted, watch } from 'vue'
 import { allColors } from './theming/utils/data'
-import { RADII, useConfigStore } from '@/stores/config'
-import { colors } from '@/lib/registry'
+import ThemeCustomizer from './ThemeCustomizer.vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Label } from '@/lib/registry/new-york/ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import RadixIconsCheck from '~icons/radix-icons/check'
-import RadixIconsSun from '~icons/radix-icons/sun'
-import RadixIconsMoon from '~icons/radix-icons/moon'
+import { useConfigStore } from '@/stores/config'

-defineProps<{ title?: string }>()
-
-const { theme, radius, setRadius, setTheme } = useConfigStore()
-const { isDark } = useData()
+const { theme, radius } = useConfigStore()

 // Whenever the component is mounted, update the document class list
 onMounted(() => {
@ -40,97 +32,16 @@ watch(radius, (radius) => {
 <template>
  <Popover>
    <PopoverTrigger as-child>
-      <Button variant="outline" class="h-9 rounded-[0.5rem]">
+      <Button
+        class="w-9 h-9"
+        :variant="'ghost'"
+        :size="'icon'"
+      >
        <Paintbrush class="w-4 h-4" />
-        <span v-if="title" class="ml-2">{{ title }}</span>
      </Button>
    </PopoverTrigger>
    <PopoverContent :side-offset="8" align="end" class="w-96">
-      <div class="p-4">
-        <div class="grid space-y-1">
-          <h1 class="text-md text-foreground font-semibold">
-            Customize
-          </h1>
-          <p class="text-xs text-muted-foreground">
-            Pick a style and color for your components.
-          </p>
-        </div>
-        <div class="space-y-1.5 pt-6">
-          <Label for="color" class="text-xs"> Color </Label>
-          <div class="grid grid-cols-3 gap-2 py-1.5">
-            <Button
-              v-for="(color, index) in allColors"
-              :key="index"
-              variant="outline"
-              class="h-8 justify-start px-3"
-              :class="
-                color === theme
-                  ? 'border-foreground border-2'
-                  : ''
-              "
-              @click="setTheme(color)"
-            >
-              <span
-                class="h-5 w-5 rounded-full flex items-center justify-center"
-                :style="{ backgroundColor: colors[color][7].rgb }"
-              >
-                <RadixIconsCheck
-                  v-if="color === theme"
-                  class="h-3 w-3 text-white"
-                />
-              </span>
-              <span class="ml-2 text-xs capitalize">
-                {{ color }}
-              </span>
-            </Button>
-          </div>
-        </div>
-        <div class="space-y-1.5 pt-6">
-          <Label for="radius" class="text-xs"> Radius </Label>
-          <div class="grid grid-cols-5 gap-2 py-1.5">
-            <Button
-              v-for="(r, index) in RADII"
-              :key="index"
-              variant="outline"
-              class="h-8 justify-center px-3"
-              :class="
-                r === radius
-                  ? 'border-foreground border-2'
-                  : ''
-              "
-              @click="setRadius(r)"
-            >
-              <span class="text-xs">
-                {{ r }}
-              </span>
-            </Button>
-          </div>
-        </div>
-        <div class="space-y-1.5 pt-6">
-          <Label for="theme" class="text-xs"> Theme </Label>
-
-          <div class="flex space-x-2 py-1.5">
-            <Button
-              class="h-8"
-              variant="outline"
-              :class="{ 'border-2 border-foreground': !isDark }"
-              @click="isDark = false"
-            >
-              <RadixIconsSun class="w-4 h-4 mr-2" />
-              <span class="text-xs">Light</span>
-            </Button>
-            <Button
-              class="h-8"
-              variant="outline"
-              :class="{ 'border-2 border-foreground': isDark }"
-              @click="isDark = true"
-            >
-              <RadixIconsMoon class="w-4 h-4 mr-2" />
-              <span class="text-xs">Dark</span>
-            </Button>
-          </div>
-        </div>
-      </div>
+      <ThemeCustomizer :all-colors="allColors" />
    </PopoverContent>
  </Popover>
 </template>
--- a/apps/www/package.json
+++ b/apps/www/package.json
@ -47,6 +47,7 @@
    "@iconify-json/lucide": "^1.1.180",
    "@iconify-json/ph": "^1.1.12",
    "@iconify-json/radix-icons": "^1.1.14",
+    "@iconify-json/ri": "^1.1.18",
    "@iconify-json/simple-icons": "^1.1.94",
    "@iconify-json/tabler": "^1.1.106",
    "@iconify/vue": "^4.1.1",
--- a/apps/www/src/lib/registry/default/example/AreaChartDemo.vue
+++ b/apps/www/src/lib/registry/default/example/AreaChartDemo.vue
@ -10,10 +10,8 @@ const data = [
  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
 ]
-
-const categories = ['total', 'predicted']
 </script>

 <template>
-  <AreaChart :data="data" index="name" :categories="categories" />
+  <AreaChart :data="data" index="name" :categories="['total', 'predicted']" />
 </template>
--- a/apps/www/src/lib/registry/default/example/BarChartDemo.vue
+++ b/apps/www/src/lib/registry/default/example/BarChartDemo.vue
@ -10,15 +10,13 @@ const data = [
  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
 ]
-
-const categories = ['total', 'predicted']
 </script>

 <template>
  <BarChart
    :data="data"
    index="name"
-    :categories="categories"
+    :categories="['total', 'predicted']"
    :y-formatter="(tick, i) => {
      return typeof tick === 'number'
        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
--- a/apps/www/src/lib/registry/default/example/LineChartDemo.vue
+++ b/apps/www/src/lib/registry/default/example/LineChartDemo.vue
@ -2,23 +2,274 @@
 import { LineChart } from '@/lib/registry/default/ui/chart-line'

 const data = [
-  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'May', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500 },
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
 ]
-
-const categories = ['total']
 </script>

 <template>
  <LineChart
    :data="data"
-    index="name"
-    :categories="categories"
+    index="year"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
    :y-formatter="(tick, i) => {
      return typeof tick === 'number'
        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
--- a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
  showGridLine: true,
 })

+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]

@ -91,7 +95,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()

 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }

 const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
--- a/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
@ -71,6 +71,10 @@ const props = withDefaults(defineProps<{
  showGridLine: true,
 })

+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]

@ -86,7 +90,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()

 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }
 </script>

--- a/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
@ -3,7 +3,7 @@ import { VisCrosshair, VisTooltip } from '@unovis/vue'
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import { omit } from '@unovis/ts'
 import { createApp, watch } from 'vue'
-import { ChartTooltip } from '@/lib/registry/new-york/ui/chart'
+import { ChartTooltip } from '@/lib/registry/default/ui/chart'

 const props = withDefaults(defineProps<{
  colors: string[]
--- a/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue
@ -10,10 +10,8 @@ const data = [
  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
 ]
-
-const categories = ['total', 'predicted']
 </script>

 <template>
-  <AreaChart :data="data" index="name" :categories="categories" />
+  <AreaChart :data="data" index="name" :categories="['total', 'predicted']" />
 </template>
--- a/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue
@ -10,15 +10,13 @@ const data = [
  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
 ]
-
-const categories = ['total', 'predicted']
 </script>

 <template>
  <BarChart
    :data="data"
    index="name"
-    :categories="categories"
+    :categories="['total', 'predicted']"
    :y-formatter="(tick, i) => {
      return typeof tick === 'number'
        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
--- a/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue
@ -263,15 +263,13 @@ const data = [
    'Import Growth Rate': 2.51,
  },
 ]
-
-const categories = ['Export Growth Rate', 'Import Growth Rate']
 </script>

 <template>
  <LineChart
    :data="data"
    index="year"
-    :categories="categories"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
    :y-formatter="(tick, i) => {
      return typeof tick === 'number'
        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
--- a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
  showGridLine: true,
 })

+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]

@ -91,7 +95,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()

 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }

 const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
--- a/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
@ -71,6 +71,10 @@ const props = withDefaults(defineProps<{
  showGridLine: true,
 })

+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]

@ -86,7 +90,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()

 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }
 </script>

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -132,6 +132,9 @@ importers:
      '@iconify-json/radix-icons':
        specifier: ^1.1.14
        version: 1.1.14
+      '@iconify-json/ri':
+        specifier: ^1.1.18
+        version: 1.1.18
      '@iconify-json/simple-icons':
        specifier: ^1.1.94
        version: 1.1.94
@ -2218,6 +2221,12 @@ packages:
      '@iconify/types': 2.0.0
    dev: true

+  /@iconify-json/ri@1.1.18:
+    resolution: {integrity: sha512-/gm7OrzhX6iOklhSnhK102unCzA+5wB0OJzXPgvpMr19VOD+dkXzIxEAbGu5lhFCxgn5TJ2jJLc8DtvnZWsyrw==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
  /@iconify-json/simple-icons@1.1.94:
    resolution: {integrity: sha512-2UwwbEJeZ/aMpACG/dZoOhNszKFO+IjcRCbYB+lMqd+6fA5ewykRy63IP8//UdviazOPamGJ/XbNBJH/o1YFdQ==}
    dependencies: