feat: export selector, docs: update typo

packages/shared/examples/basic-scatter-plot/basic-scatter-plot.vue

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
 import type { NumericAccessor, StringAccessor } from '@unovis/ts'
 import { VisXYContainer, VisScatter, VisAxis, VisBulletLegend } from '@unovis/svelte'
 import { data, DataRecord } from './data'

packages/shared/examples/multi-line-chart/multi-line-chart.vue

@@ -1,4 +1,4 @@
-<script  setup lang='ts'>
+<script  setup lang="ts">
 import { Scale } from '@unovis/ts'
 import { VisXYContainer, VisLine, VisAxis, VisBulletLegend } from '@unovis/vue'
 import { data, labels, CityTemps } from './data'

packages/vue/autogen/component.ts

@@ -30,7 +30,7 @@ import { arePropsEqual, useForwardProps } from '../../utils/props'
 ${isStandAlone ? '' : `import { ${elementSuffix}AccessorKey } from '../../utils/context'\n`}
 ${isStandAlone ? '' : `const accessor = inject(${elementSuffix}AccessorKey)\n`}
 // data and required props ${isComplexPropComponent ? '\n// !!! temporary solution to ignore complex type. related issue: https://github.com/vuejs/core/issues/8412' : ''}
-interface Props extends ${isComplexPropComponent ? '/** @vue-ignore */' : ''} ${componentName}ConfigInterface${genericsStr} { }
+${isComplexPropComponent ? `interface Props extends /** @vue-ignore */ ${componentName}ConfigInterface${genericsStr} { }` : `type Props = ${componentName}ConfigInterface${genericsStr}`}
 const props = defineProps<Props & { data?: ${dataType} }>()
 
 ${propDefs.length && !isStandAlone ? `${propDefs.join('\n')}` : isStandAlone ? 'const data = computed(() => props.data)' : ''}
@@ -68,6 +68,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const Vis${componentName}Selectors = ${componentName}.selectors
+</script>
+
 <template>
   <div data-vis-${elementSuffix} ${isStandAlone ? 'ref="elRef"' : ''}/>
 </template>

packages/vue/autogen/index.ts

@@ -52,7 +52,7 @@ for (const component of components) {
     exec(`npx eslint ${pathComponent} --fix`)
   })
 
-  exports.push(`export { default as Vis${component.name} } from './${path}/${file}'`)
+  exports.push(`export { default as Vis${component.name}, Vis${component.name}Selectors } from './${path}/${file}'`)
 
   // eslint-disable-next-line no-console
   console.log(`${component.name} generated`)

packages/vue/src/components.ts

@@ -1,21 +1,21 @@
-export { default as VisLine } from './components/line/index.vue'
-export { default as VisArea } from './components/area/index.vue'
-export { default as VisAxis } from './components/axis/index.vue'
-export { default as VisBrush } from './components/brush/index.vue'
-export { default as VisFreeBrush } from './components/free-brush/index.vue'
-export { default as VisCrosshair } from './components/crosshair/index.vue'
-export { default as VisGroupedBar } from './components/grouped-bar/index.vue'
-export { default as VisScatter } from './components/scatter/index.vue'
-export { default as VisStackedBar } from './components/stacked-bar/index.vue'
-export { default as VisTimeline } from './components/timeline/index.vue'
-export { default as VisXYLabels } from './components/xy-labels/index.vue'
-export { default as VisDonut } from './components/donut/index.vue'
-export { default as VisTopoJSONMap } from './components/topojson-map/index.vue'
-export { default as VisSankey } from './components/sankey/index.vue'
-export { default as VisGraph } from './components/graph/index.vue'
-export { default as VisChordDiagram } from './components/chord-diagram/index.vue'
-export { default as VisNestedDonut } from './components/nested-donut/index.vue'
-export { default as VisTooltip } from './components/tooltip/index.vue'
-export { default as VisLeafletMap } from './html-components/leaflet-map/index.vue'
-export { default as VisLeafletFlowMap } from './html-components/leaflet-flow-map/index.vue'
-export { default as VisBulletLegend } from './html-components/bullet-legend/index.vue'
+export { default as VisLine, VisLineSelectors } from './components/line/index.vue'
+export { default as VisArea, VisAreaSelectors } from './components/area/index.vue'
+export { default as VisAxis, VisAxisSelectors } from './components/axis/index.vue'
+export { default as VisBrush, VisBrushSelectors } from './components/brush/index.vue'
+export { default as VisFreeBrush, VisFreeBrushSelectors } from './components/free-brush/index.vue'
+export { default as VisCrosshair, VisCrosshairSelectors } from './components/crosshair/index.vue'
+export { default as VisGroupedBar, VisGroupedBarSelectors } from './components/grouped-bar/index.vue'
+export { default as VisScatter, VisScatterSelectors } from './components/scatter/index.vue'
+export { default as VisStackedBar, VisStackedBarSelectors } from './components/stacked-bar/index.vue'
+export { default as VisTimeline, VisTimelineSelectors } from './components/timeline/index.vue'
+export { default as VisXYLabels, VisXYLabelsSelectors } from './components/xy-labels/index.vue'
+export { default as VisDonut, VisDonutSelectors } from './components/donut/index.vue'
+export { default as VisTopoJSONMap, VisTopoJSONMapSelectors } from './components/topojson-map/index.vue'
+export { default as VisSankey, VisSankeySelectors } from './components/sankey/index.vue'
+export { default as VisGraph, VisGraphSelectors } from './components/graph/index.vue'
+export { default as VisChordDiagram, VisChordDiagramSelectors } from './components/chord-diagram/index.vue'
+export { default as VisNestedDonut, VisNestedDonutSelectors } from './components/nested-donut/index.vue'
+export { default as VisTooltip, VisTooltipSelectors } from './components/tooltip/index.vue'
+export { default as VisLeafletMap, VisLeafletMapSelectors } from './html-components/leaflet-map/index.vue'
+export { default as VisLeafletFlowMap, VisLeafletFlowMapSelectors } from './html-components/leaflet-flow-map/index.vue'
+export { default as VisBulletLegend, VisBulletLegendSelectors } from './html-components/bullet-legend/index.vue'

packages/vue/src/components/area/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  AreaConfigInterface<Datum> { }
+type Props = AreaConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisAreaSelectors = Area.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/axis/index.vue

@@ -8,7 +8,7 @@ import { axisAccessorKey } from '../../utils/context'
 const accessor = inject(axisAccessorKey)
 
 // data and required props 
-interface Props extends  AxisConfigInterface<Datum> { }
+type Props = AxisConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisAxisSelectors = Axis.selectors
+</script>
+
 <template>
   <div data-vis-axis />
 </template>

packages/vue/src/components/brush/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  BrushConfigInterface<Datum> { }
+type Props = BrushConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisBrushSelectors = Brush.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/chord-diagram/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  ChordDiagramConfigInterface<N, L> { }
+type Props = ChordDiagramConfigInterface<N, L>
 const props = defineProps<Props & { data?: { nodes: N[]; links?: L[] } }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisChordDiagramSelectors = ChordDiagram.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/crosshair/index.vue

@@ -48,6 +48,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisCrosshairSelectors = Crosshair.selectors
+</script>
+
 <template>
   <div data-vis-crosshair />
 </template>

packages/vue/src/components/donut/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  DonutConfigInterface<Datum> { }
+type Props = DonutConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisDonutSelectors = Donut.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/free-brush/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  FreeBrushConfigInterface<Datum> { }
+type Props = FreeBrushConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisFreeBrushSelectors = FreeBrush.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/graph/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  GraphConfigInterface<N, L> { }
+type Props = GraphConfigInterface<N, L>
 const props = defineProps<Props & { data?: { nodes: N[]; links?: L[] } }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisGraphSelectors = Graph.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/grouped-bar/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  GroupedBarConfigInterface<Datum> { }
+type Props = GroupedBarConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisGroupedBarSelectors = GroupedBar.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/line/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  LineConfigInterface<Datum> { }
+type Props = LineConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisLineSelectors = Line.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/nested-donut/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  NestedDonutConfigInterface<Datum> { }
+type Props = NestedDonutConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisNestedDonutSelectors = NestedDonut.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/sankey/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  SankeyConfigInterface<N, L> { }
+type Props = SankeyConfigInterface<N, L>
 const props = defineProps<Props & { data?: { nodes: N[]; links?: L[] } }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisSankeySelectors = Sankey.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/scatter/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  ScatterConfigInterface<Datum> { }
+type Props = ScatterConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisScatterSelectors = Scatter.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/stacked-bar/index.vue

@@ -8,7 +8,7 @@ import { componentAccessorKey } from '../../utils/context'
 const accessor = inject(componentAccessorKey)
 
 // data and required props 
-interface Props extends  StackedBarConfigInterface<Datum> { }
+type Props = StackedBarConfigInterface<Datum>
 const props = defineProps<Props & { data?: Datum[] }>()
 
 const data = computed(() => accessor.data.value ?? props.data)
@@ -47,6 +47,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisStackedBarSelectors = StackedBar.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/timeline/index.vue

@@ -49,6 +49,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisTimelineSelectors = Timeline.selectors
+</script>
+
 <template>
   <div data-vis-component />
 </template>

packages/vue/src/components/tooltip/index.vue

@@ -8,7 +8,7 @@ import { tooltipAccessorKey } from '../../utils/context'
 const accessor = inject(tooltipAccessorKey)
 
 // data and required props 
-interface Props extends  TooltipConfigInterface { }
+type Props = TooltipConfigInterface
 const props = defineProps<Props & { data?: null }>()
 
 
@@ -44,6 +44,10 @@ defineExpose({
 })
 </script>
 
+<script lang="ts">
+export const VisTooltipSelectors = Tooltip.selectors
+</script>
+
 <template>
   <div data-vis-tooltip />
 </template>