@opendata-ai/openchart-vue 8.0.0-rc.2 → 8.0.0-rc.21

package/src/Chart.ts

@@ -1,257 +0,0 @@
-/**
- * Vue Chart component: thin wrapper around the vanilla adapter.
- *
- * Mounts a chart instance on render, updates when spec changes,
- * and cleans up on unmount. All heavy lifting is done by the vanilla
- * createChart() function.
- */
-
-import type {
-  Annotation,
-  AnnotationOffset,
-  ChartSpec,
-  DarkMode,
-  ElementEdit,
-  ElementRef,
-  GraphSpec,
-  LayerSpec,
-  MarkEvent,
-  TextAnnotation,
-  ThemeConfig,
-} from '@opendata-ai/openchart-core';
-import { type ChartInstance, createChart, type MountOptions } from '@opendata-ai/openchart-vanilla';
-import {
-  type CSSProperties,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  inject,
-  onMounted,
-  onUnmounted,
-  type PropType,
-  ref,
-  watch,
-} from 'vue';
-import { VizDarkModeKey, VizThemeKey } from './context';
-
-export interface ChartProps {
-  spec: ChartSpec | LayerSpec | GraphSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  class?: string;
-  style?: string | CSSProperties;
-}
-
-export const Chart = defineComponent({
-  name: 'Chart',
-  props: {
-    spec: {
-      type: Object as PropType<ChartSpec | LayerSpec | GraphSpec>,
-      required: true,
-    },
-    theme: {
-      type: Object as PropType<ThemeConfig>,
-      default: undefined,
-    },
-    darkMode: {
-      type: String as PropType<DarkMode>,
-      default: undefined,
-    },
-    class: {
-      type: String,
-      default: undefined,
-    },
-    style: {
-      type: [String, Object] as PropType<string | CSSProperties>,
-      default: undefined,
-    },
-    selectedElement: {
-      type: Object as PropType<ElementRef>,
-      default: undefined,
-    },
-    highlight: {
-      type: [Array, null] as unknown as PropType<string[] | null>,
-      default: undefined,
-    },
-  },
-  emits: {
-    'mark-click': (_event: MarkEvent) => true,
-    'mark-hover': (_event: MarkEvent) => true,
-    'mark-leave': () => true,
-    'legend-toggle': (_series: string, _visible: boolean) => true,
-    'annotation-click': (_annotation: Annotation, _event: MouseEvent) => true,
-    'annotation-edit': (_annotation: TextAnnotation, _updatedOffset: AnnotationOffset) => true,
-    edit: (_edit: ElementEdit) => true,
-    select: (_element: ElementRef) => true,
-    deselect: (_element: ElementRef) => true,
-    'text-edit': (_element: ElementRef, _oldText: string, _newText: string) => true,
-    'data-point-click': (_data: Record<string, unknown>) => true,
-  },
-  setup(props, { emit, expose }) {
-    const containerRef = ref<HTMLDivElement | null>(null);
-    let instance: ChartInstance | null = null;
-    let prevSpec = '';
-
-    // Inject theme/darkMode from provider as fallbacks
-    const contextTheme = inject(VizThemeKey, undefined);
-    const contextDarkMode = inject(VizDarkModeKey, undefined);
-
-    // Check which event listeners are bound by the parent.
-    // Vue 3 passes listeners as onXxx props on the component vnode.
-    // We cache this at setup time since it won't change.
-    const vm = getCurrentInstance();
-    const vnodeProps = vm?.vnode.props ?? {};
-    const hasAnnotationEditListener =
-      'onAnnotation-edit' in vnodeProps || 'onAnnotationEdit' in vnodeProps;
-    const hasEditListener = 'onEdit' in vnodeProps;
-    const hasSelectListener = 'onSelect' in vnodeProps;
-    const hasDeselectListener = 'onDeselect' in vnodeProps;
-    const hasTextEditListener = 'onText-edit' in vnodeProps || 'onTextEdit' in vnodeProps;
-
-    function resolveTheme(): ThemeConfig | undefined {
-      return props.theme ?? contextTheme?.value;
-    }
-
-    function resolveDarkMode(): DarkMode | undefined {
-      return props.darkMode ?? contextDarkMode?.value;
-    }
-
-    function mountChart() {
-      const container = containerRef.value;
-      if (!container) return;
-
-      const options: MountOptions = {
-        theme: resolveTheme(),
-        darkMode: resolveDarkMode(),
-        onDataPointClick: (data: Record<string, unknown>) => emit('data-point-click', data),
-        onMarkClick: (event: MarkEvent) => emit('mark-click', event),
-        onMarkHover: (event: MarkEvent) => emit('mark-hover', event),
-        onMarkLeave: () => emit('mark-leave'),
-        onLegendToggle: (series: string, visible: boolean) =>
-          emit('legend-toggle', series, visible),
-        onAnnotationClick: (annotation: Annotation, event: MouseEvent) =>
-          emit('annotation-click', annotation, event),
-        // Only include editing callbacks when the parent binds a listener.
-        // Without this gate, every chart gets drag editing wired up.
-        ...(hasAnnotationEditListener
-          ? {
-              onAnnotationEdit: (annotation: TextAnnotation, updatedOffset: AnnotationOffset) =>
-                emit('annotation-edit', annotation, updatedOffset),
-            }
-          : {}),
-        ...(hasEditListener ? { onEdit: (edit: ElementEdit) => emit('edit', edit) } : {}),
-        ...(hasSelectListener
-          ? { onSelect: (element: ElementRef) => emit('select', element) }
-          : {}),
-        ...(hasDeselectListener
-          ? { onDeselect: (element: ElementRef) => emit('deselect', element) }
-          : {}),
-        ...(hasTextEditListener
-          ? {
-              onTextEdit: (element: ElementRef, oldText: string, newText: string) =>
-                emit('text-edit', element, oldText, newText),
-            }
-          : {}),
-        ...(props.selectedElement ? { selectedElement: props.selectedElement } : {}),
-        responsive: true,
-      };
-
-      instance = createChart(container, props.spec, options);
-      prevSpec = JSON.stringify(props.spec);
-      if (props.highlight !== undefined) {
-        instance.setHighlight(props.highlight ?? null);
-      }
-    }
-
-    function destroyChart() {
-      instance?.destroy();
-      instance = null;
-      prevSpec = '';
-    }
-
-    // Expose imperative methods for parent ref access
-    expose({
-      getSelectedElement(): ElementRef | null {
-        return instance?.getSelectedElement() ?? null;
-      },
-      select(elementRef: ElementRef): void {
-        instance?.select(elementRef);
-      },
-      deselect(): void {
-        instance?.deselect();
-      },
-      get instance() {
-        return instance;
-      },
-    });
-
-    onMounted(() => {
-      mountChart();
-    });
-
-    onUnmounted(() => {
-      destroyChart();
-    });
-
-    // Watch spec changes: update if only spec changed, recreate if theme/darkMode changed
-    watch(
-      () => JSON.stringify(props.spec),
-      (newVal) => {
-        if (!instance) return;
-        if (newVal !== prevSpec) {
-          prevSpec = newVal;
-          instance.update(props.spec, { selectedElement: props.selectedElement });
-        }
-      },
-    );
-
-    // Watch selectedElement prop changes
-    watch(
-      () => props.selectedElement,
-      (newVal) => {
-        if (!instance) return;
-        if (newVal) {
-          instance.select(newVal);
-        } else {
-          instance.deselect();
-        }
-      },
-    );
-
-    // Watch highlight prop changes
-    watch(
-      () => props.highlight,
-      (newVal) => {
-        if (!instance) return;
-        instance.setHighlight(newVal ?? null);
-      },
-    );
-
-    // Recreate chart when theme or darkMode change
-    watch(
-      [
-        () => props.theme,
-        () => props.darkMode,
-        () => contextTheme?.value,
-        () => contextDarkMode?.value,
-      ],
-      () => {
-        if (!containerRef.value) return;
-        destroyChart();
-        mountChart();
-      },
-    );
-
-    const rootClass = () => {
-      const base = 'oc-chart-root';
-      return props.class ? `${base} ${props.class}` : base;
-    };
-
-    return () =>
-      h('div', {
-        ref: containerRef,
-        class: rootClass(),
-        style: props.style,
-      });
-  },
-});

package/src/ChartStory.ts

@@ -1,184 +0,0 @@
-/**
- * Vue scrollytelling shell around the vanilla `createChartStory`.
- *
- * Mirrors the React `<ChartStory>`: a sticky chart panel plus a scrolling
- * narrative column whose blocks advance the story. The vanilla driver owns
- * cumulative patch application, mark morphing, crossfade, and camera; this
- * component owns only Vue lifecycle and the sticky layout.
- *
- * Narrative is provided as the default slot's children (one root node per
- * step) or via the `narrative` prop (an array of vnodes/strings). Pass `step`
- * to drive it externally; omit for self-driving scroll.
- */
-
-import type { ChartSpec, GraphSpec, LayerSpec, MapSpec } from '@opendata-ai/openchart-core';
-import type { MountOptions } from '@opendata-ai/openchart-vanilla';
-import {
-  type ChartStoryInstance,
-  type ChartStoryOptions,
-  createChartStory,
-} from '@opendata-ai/openchart-vanilla/story';
-import {
-  type CSSProperties,
-  defineComponent,
-  h,
-  onMounted,
-  onUnmounted,
-  type PropType,
-  ref,
-  type VNode,
-  watch,
-} from 'vue';
-
-export interface ChartStoryProps {
-  spec: ChartSpec | LayerSpec | GraphSpec | MapSpec;
-  steps: ChartStoryOptions['steps'];
-  narrative?: VNode[];
-  step?: number;
-  triggerPosition?: number;
-  cameraMode?: 'step' | 'scrub';
-  mountOptions?: MountOptions;
-}
-
-const sectionStyle: CSSProperties = {
-  position: 'relative',
-  display: 'grid',
-  gridTemplateColumns: 'minmax(0, 26rem) minmax(0, 1fr)',
-  gap: '3rem',
-  alignItems: 'start',
-};
-
-const stepStyle: CSSProperties = {
-  minHeight: '80vh',
-  display: 'flex',
-  alignItems: 'center',
-};
-
-const panelStyle: CSSProperties = {
-  position: 'sticky',
-  top: '2rem',
-  height: 'calc(100vh - 4rem)',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-export const ChartStory = defineComponent({
-  name: 'ChartStory',
-  props: {
-    spec: {
-      type: Object as PropType<ChartSpec | LayerSpec | GraphSpec | MapSpec>,
-      required: true,
-    },
-    steps: {
-      type: Array as PropType<ChartStoryOptions['steps']>,
-      required: true,
-    },
-    narrative: {
-      type: Array as PropType<VNode[]>,
-      default: undefined,
-    },
-    step: {
-      type: Number,
-      default: undefined,
-    },
-    triggerPosition: {
-      type: Number,
-      default: undefined,
-    },
-    cameraMode: {
-      type: String as PropType<'step' | 'scrub'>,
-      default: undefined,
-    },
-    mountOptions: {
-      type: Object as PropType<MountOptions>,
-      default: undefined,
-    },
-  },
-  setup(props, { slots, expose }) {
-    const sectionRef = ref<HTMLElement | null>(null);
-    const mountRef = ref<HTMLDivElement | null>(null);
-    const stepEls = ref<Array<HTMLElement | null>>([]);
-    let story: ChartStoryInstance | null = null;
-
-    onMounted(() => {
-      const mount = mountRef.value;
-      if (!mount) return;
-
-      const blocks = props.narrative ?? [];
-      if (blocks.length > 0 && blocks.length !== props.steps.length) {
-        console.warn(
-          `[openchart] ChartStory: narrative length (${blocks.length}) does not match steps length (${props.steps.length}). Each step should have a corresponding narrative element.`,
-        );
-      }
-
-      story = createChartStory(
-        mount,
-        {
-          spec: props.spec,
-          steps: props.steps,
-          triggerPosition: props.triggerPosition,
-          cameraMode: props.cameraMode,
-        },
-        props.mountOptions,
-      );
-      if (sectionRef.value) story.setContainer(sectionRef.value);
-      stepEls.value.forEach((el, i) => {
-        if (el) story?.registerStep(i, el);
-      });
-      if (props.step !== undefined) story.goTo(props.step);
-    });
-
-    watch(
-      () => props.step,
-      (next) => {
-        if (next !== undefined) story?.goTo(next);
-      },
-    );
-
-    onUnmounted(() => {
-      story?.destroy();
-      story = null;
-    });
-
-    expose({
-      goTo(index: number) {
-        story?.goTo(index);
-      },
-      get instance() {
-        return story;
-      },
-    });
-
-    return () => {
-      // Prefer the `narrative` prop; fall back to default slot children so
-      // consumers can author steps as template markup.
-      const blocks = props.narrative ?? slots.default?.() ?? [];
-      return h('section', { ref: sectionRef, style: sectionStyle }, [
-        h(
-          'div',
-          { style: { position: 'relative' } },
-          blocks.map((content, i) =>
-            h(
-              'div',
-              {
-                // Steps are a fixed ordered list, so the index is the stable
-                // identity. Do not reorder or splice narrative entries at runtime
-                // (that would remap step refs to the wrong content); rebuild the
-                // whole story instead.
-                key: i,
-                ref: (el: unknown) => {
-                  stepEls.value[i] = el as HTMLElement | null;
-                },
-                'data-oc-story-step': i,
-                style: stepStyle,
-              },
-              [h('div', { style: { maxWidth: '36rem' } }, [content])],
-            ),
-          ),
-        ),
-        h('div', { style: panelStyle }, [h('div', { ref: mountRef, style: { width: '100%' } })]),
-      ]);
-    };
-  },
-});

package/src/DataTable.ts

@@ -1,194 +0,0 @@
-/**
- * DataTable component: Vue wrapper around the vanilla table adapter.
- *
- * Mounts a table instance on render, updates when spec changes,
- * and cleans up on unmount. Supports both controlled and uncontrolled modes
- * for sort, search, and pagination state.
- */
-
-import type { DarkMode, SortState, TableSpec, ThemeConfig } from '@opendata-ai/openchart-core';
-import {
-  createTable,
-  type TableInstance,
-  type TableMountOptions,
-} from '@opendata-ai/openchart-vanilla';
-import {
-  type CSSProperties,
-  defineComponent,
-  h,
-  inject,
-  onMounted,
-  onUnmounted,
-  type PropType,
-  ref,
-  watch,
-} from 'vue';
-import { VizDarkModeKey, VizThemeKey } from './context';
-
-export interface DataTableProps {
-  spec: TableSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  class?: string;
-  style?: string | CSSProperties;
-  sort?: SortState | null;
-  search?: string;
-  page?: number;
-}
-
-export const DataTable = defineComponent({
-  name: 'DataTable',
-  props: {
-    spec: {
-      type: Object as PropType<TableSpec>,
-      required: true,
-    },
-    theme: {
-      type: Object as PropType<ThemeConfig>,
-      default: undefined,
-    },
-    darkMode: {
-      type: String as PropType<DarkMode>,
-      default: undefined,
-    },
-    class: {
-      type: String,
-      default: undefined,
-    },
-    style: {
-      type: [String, Object] as PropType<string | CSSProperties>,
-      default: undefined,
-    },
-    sort: {
-      type: [Object, null] as PropType<SortState | null>,
-      default: undefined,
-    },
-    search: {
-      type: String,
-      default: undefined,
-    },
-    page: {
-      type: Number,
-      default: undefined,
-    },
-  },
-  emits: {
-    'row-click': (_row: Record<string, unknown>) => true,
-    'update:sort': (_sort: SortState | null) => true,
-    'update:search': (_query: string) => true,
-    'update:page': (_page: number) => true,
-  },
-  setup(props, { emit }) {
-    const containerRef = ref<HTMLDivElement | null>(null);
-    let instance: TableInstance | null = null;
-
-    // Inject theme/darkMode from provider as fallbacks
-    const contextTheme = inject(VizThemeKey, undefined);
-    const contextDarkMode = inject(VizDarkModeKey, undefined);
-
-    function resolveTheme(): ThemeConfig | undefined {
-      return props.theme ?? contextTheme?.value;
-    }
-
-    function resolveDarkMode(): DarkMode | undefined {
-      return props.darkMode ?? contextDarkMode?.value;
-    }
-
-    function isControlled(): boolean {
-      return props.sort !== undefined || props.search !== undefined || props.page !== undefined;
-    }
-
-    let prevSpec = '';
-
-    function mountTable() {
-      const container = containerRef.value;
-      if (!container) return;
-
-      const mountOptions: TableMountOptions = {
-        theme: resolveTheme(),
-        darkMode: resolveDarkMode(),
-        onRowClick: (row: Record<string, unknown>) => emit('row-click', row),
-        responsive: true,
-        onStateChange: (state) => {
-          if (state.sort !== undefined) emit('update:sort', state.sort);
-          if (state.search !== undefined) emit('update:search', state.search);
-          if (state.page !== undefined) emit('update:page', state.page);
-        },
-      };
-
-      if (isControlled()) {
-        mountOptions.externalState = {
-          sort: props.sort ?? null,
-          search: props.search ?? '',
-          page: props.page ?? 0,
-        };
-      }
-
-      instance = createTable(container, props.spec, mountOptions);
-      prevSpec = JSON.stringify(props.spec);
-    }
-
-    function destroyTable() {
-      instance?.destroy();
-      instance = null;
-      prevSpec = '';
-    }
-
-    onMounted(() => {
-      mountTable();
-    });
-
-    onUnmounted(() => {
-      destroyTable();
-    });
-
-    // Watch spec changes via JSON.stringify comparison (consistent with Chart/Graph)
-    watch(
-      () => JSON.stringify(props.spec),
-      (newVal) => {
-        if (!instance) return;
-        if (newVal !== prevSpec) {
-          prevSpec = newVal;
-          instance.update(props.spec);
-        }
-      },
-    );
-
-    // Recreate when theme or darkMode change
-    watch(
-      [
-        () => props.theme,
-        () => props.darkMode,
-        () => contextTheme?.value,
-        () => contextDarkMode?.value,
-      ],
-      () => {
-        if (!containerRef.value) return;
-        destroyTable();
-        mountTable();
-      },
-    );
-
-    // Sync controlled state without remounting
-    watch([() => props.sort, () => props.search, () => props.page], () => {
-      if (!instance || !isControlled()) return;
-      instance.setState({
-        sort: props.sort ?? null,
-        search: props.search ?? '',
-        page: props.page ?? 0,
-      });
-    });
-
-    const rootClass = () => {
-      const base = 'oc-table-root';
-      return props.class ? `${base} ${props.class}` : base;
-    };
-
-    return () =>
-      h('div', {
-        ref: containerRef,
-        class: rootClass(),
-        style: props.style,
-      });
-  },
-});