webdatarocks / vue-webdatarocks Goto Github PK

<template>
    <div ref="pivot">Pivot</div>
</template>

<script setup lang="ts">
import { ref } from '@vue/reactivity';
import { onMounted } from 'vue';
import WebDataRocks from 'webdatarocks';
import type { Report, CellBuilder, CellData } from 'webdatarocks';

// in the future an interface for defineProps will be able to be imported but that is not compatible at the moment.
const props = defineProps<{
    // params
    toolbar?: boolean;
    width?: string | number;
    height?: string | number;
    report?: Report | string;
    global?: Report;
    customizeCell?: (cell: CellBuilder, data: CellData) => void;
    // events
    aftergriddraw?: (param: object) => void;
    beforegriddraw?: (param: object) => void;
    beforetoolbarcreated?: (toolbar: any) => void;
    cellclick?: (cell: CellData) => void;
    celldoubleclick?: (cell: CellData) => void;
    datachanged?: (param: object) => void;
    dataerror?: (param: object) => void;
    datafilecancelled?: () => void;
    dataloaded?: () => void;
    exportcomplete?: () => void;
    exportstart?: () => void;
    fieldslistclose?: () => void;
    fieldslistopen?: () => void;
    filterclose?: () => void;
    filteropen?: () => void;
    loadingdata?: () => void;
    loadinglocalization?: () => void;
    loadingolapstructure?: () => void;
    loadingreportfile?: () => void;
    localizationerror?: () => void;
    localizationloaded?: () => void;
    openingreportfile?: () => void;
    printcomplete?: () => void;
    printstart?: () => void;
    querycomplete?: () => void;
    queryerror?: () => void;
    ready?: () => void;
    reportchange?: () => void;
    reportcomplete?: () => void;
    reportfileloaded?: () => void;
    reportfilecancelled?: () => void;
    reportfileerror?: () => void;
    runningquery?: () => void;
    update?: () => void;
}>();

const pivot = ref<HTMLElement | null>(null);

onMounted(() => {
    if (pivot.value) {
        new WebDataRocks({ ...props, container: pivot.value });
    }
});
</script>

<style>
@import 'webdatarocks/webdatarocks.min.css';
</style>