import { computed } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import { AllCommunityModule, ModuleRegistry, themeQuartz } from 'ag-grid-community';
ModuleRegistry.registerModules([AllCommunityModule]);
const props = withDefaults(defineProps(), { loading: false, height: '32rem', rowSelection: 'single' });
const emit = defineEmits();
const columnDefs = computed(() => props.columns.map(column => ({
    field: column.field,
    headerName: column.header,
    width: column.width,
    minWidth: column.minWidth ?? 120,
    sortable: column.sortable ?? true,
    filter: column.filterable ?? true,
    valueFormatter: column.formatter
        ? params => column.formatter?.(params.value, params.data) ?? ''
        : undefined
})));
const rowSelectionOptions = computed(() => {
    if (props.rowSelection === 'none')
        return undefined;
    return props.rowSelection === 'multiple'
        ? { mode: 'multiRow' }
        : { mode: 'singleRow' };
});
function onRowClicked(event) {
    if (event.data)
        emit('rowSelected', event.data);
}
const __VLS_defaults = { loading: false, height: '32rem', rowSelection: 'single' };
const __VLS_ctx = {
    ...{},
    ...{},
    ...{},
    ...{},
    ...{},
};
let __VLS_components;
let __VLS_intrinsics;
let __VLS_directives;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
    ...{ class: "ks-grid" },
    ...{ style: ({ height: __VLS_ctx.height }) },
    'aria-busy': (__VLS_ctx.loading),
});
/** @type {__VLS_StyleScopedClasses['ks-grid']} */ ;
let __VLS_0;
/** @ts-ignore @type { | typeof __VLS_components.AgGridVue} */
AgGridVue;
// @ts-ignore
const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
    ...{ 'onRowClicked': {} },
    ...{ style: {} },
    theme: (__VLS_ctx.themeQuartz),
    rowData: (__VLS_ctx.rows),
    columnDefs: (__VLS_ctx.columnDefs),
    rowSelection: (__VLS_ctx.rowSelectionOptions),
    loading: (__VLS_ctx.loading),
}));
const __VLS_2 = __VLS_1({
    ...{ 'onRowClicked': {} },
    ...{ style: {} },
    theme: (__VLS_ctx.themeQuartz),
    rowData: (__VLS_ctx.rows),
    columnDefs: (__VLS_ctx.columnDefs),
    rowSelection: (__VLS_ctx.rowSelectionOptions),
    loading: (__VLS_ctx.loading),
}, ...__VLS_functionalComponentArgsRest(__VLS_1));
let __VLS_5;
const __VLS_6 = {
    /** @type {typeof __VLS_5.rowClicked} */
    onRowClicked: (__VLS_ctx.onRowClicked),
};
var __VLS_3;
var __VLS_4;
// @ts-ignore
[height, loading, loading, themeQuartz, rows, columnDefs, rowSelectionOptions, onRowClicked,];
const __VLS_export = (await import('vue')).defineComponent({
    __typeEmits: {},
    __typeProps: {},
    props: {},
});
export default {};
