@alaarab/ogrid-vue 2.0.2

package/dist/esm/composables/useOGrid.js

@@ -0,0 +1,406 @@
+import { ref, computed, watch } from 'vue';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, } from '@alaarab/ogrid-core';
+import { useFilterOptions } from './useFilterOptions';
+import { useSideBarState } from './useSideBarState';
+const DEFAULT_PAGE_SIZE = 25;
+const EMPTY_LOADING_OPTIONS = {};
+/**
+ * Top-level orchestration composable for OGrid: manages pagination, sorting, filtering,
+ * column visibility, and sidebar.
+ */
+export function useOGrid(props) {
+    // --- Destructure props reactively ---
+    const columnsProp = computed(() => props.value.columns);
+    const getRowId = computed(() => props.value.getRowId);
+    const data = computed(() => ('data' in props.value ? props.value.data : undefined));
+    const dataSource = computed(() => ('dataSource' in props.value ? props.value.dataSource : undefined));
+    const controlledPage = computed(() => props.value.page);
+    const controlledPageSize = computed(() => props.value.pageSize);
+    const controlledSort = computed(() => props.value.sort);
+    const controlledFilters = computed(() => props.value.filters);
+    const controlledVisibleColumns = computed(() => props.value.visibleColumns);
+    const controlledLoading = computed(() => props.value.isLoading);
+    const onPageChange = computed(() => props.value.onPageChange);
+    const onPageSizeChange = computed(() => props.value.onPageSizeChange);
+    const onSortChange = computed(() => props.value.onSortChange);
+    const onFiltersChange = computed(() => props.value.onFiltersChange);
+    const onVisibleColumnsChange = computed(() => props.value.onVisibleColumnsChange);
+    const columnOrder = computed(() => props.value.columnOrder);
+    const onColumnOrderChange = computed(() => props.value.onColumnOrderChange);
+    const onColumnResized = computed(() => props.value.onColumnResized);
+    const onColumnPinned = computed(() => props.value.onColumnPinned);
+    const defaultPageSize = computed(() => props.value.defaultPageSize ?? DEFAULT_PAGE_SIZE);
+    const defaultSortBy = computed(() => props.value.defaultSortBy);
+    const defaultSortDirection = computed(() => props.value.defaultSortDirection ?? 'asc');
+    const entityLabelPlural = computed(() => props.value.entityLabelPlural ?? 'items');
+    const columnChooserProp = computed(() => props.value.columnChooser);
+    const onFirstDataRendered = computed(() => props.value.onFirstDataRendered);
+    const onError = computed(() => props.value.onError);
+    // Resolve column chooser placement
+    const columnChooserPlacement = computed(() => columnChooserProp.value === false ? 'none'
+        : columnChooserProp.value === 'sidebar' ? 'sidebar'
+            : 'toolbar');
+    const columns = computed(() => flattenColumns(columnsProp.value));
+    const isServerSide = computed(() => dataSource.value != null);
+    const isClientSide = computed(() => !isServerSide.value);
+    const internalData = ref([]);
+    const internalLoading = ref(false);
+    const displayData = computed(() => data.value ?? internalData.value);
+    const displayLoading = computed(() => controlledLoading.value ?? internalLoading.value);
+    const defaultSortField = computed(() => defaultSortBy.value ?? columns.value[0]?.columnId ?? '');
+    const internalPage = ref(1);
+    const internalPageSize = ref(defaultPageSize.value);
+    const internalSort = ref({
+        field: defaultSortField.value,
+        direction: defaultSortDirection.value,
+    });
+    const internalFilters = ref({});
+    const internalVisibleColumns = ref((() => {
+        const visible = columns.value
+            .filter((c) => c.defaultVisible !== false)
+            .map((c) => c.columnId);
+        return new Set(visible.length > 0 ? visible : columns.value.map((c) => c.columnId));
+    })());
+    const columnWidthOverrides = ref({});
+    const pinnedOverrides = ref({});
+    const page = computed(() => controlledPage.value ?? internalPage.value);
+    const pageSize = computed(() => controlledPageSize.value ?? internalPageSize.value);
+    const sort = computed(() => controlledSort.value ?? internalSort.value);
+    const filters = computed(() => controlledFilters.value ?? internalFilters.value);
+    const visibleColumns = computed(() => controlledVisibleColumns.value ?? internalVisibleColumns.value);
+    const setPage = (p) => {
+        if (controlledPage.value === undefined)
+            internalPage.value = p;
+        onPageChange.value?.(p);
+    };
+    const setPageSize = (size) => {
+        if (controlledPageSize.value === undefined)
+            internalPageSize.value = size;
+        onPageSizeChange.value?.(size);
+        setPage(1);
+    };
+    const setSort = (s) => {
+        if (controlledSort.value === undefined)
+            internalSort.value = s;
+        onSortChange.value?.(s);
+        setPage(1);
+    };
+    const setFilters = (f) => {
+        if (controlledFilters.value === undefined)
+            internalFilters.value = f;
+        onFiltersChange.value?.(f);
+        setPage(1);
+    };
+    const setVisibleColumns = (cols) => {
+        if (controlledVisibleColumns.value === undefined)
+            internalVisibleColumns.value = cols;
+        onVisibleColumnsChange.value?.(cols);
+    };
+    const handleSort = (columnKey) => {
+        setSort({
+            field: columnKey,
+            direction: sort.value.field === columnKey && sort.value.direction === 'asc' ? 'desc' : 'asc',
+        });
+    };
+    const handleFilterChange = (key, value) => {
+        setFilters(mergeFilter(filters.value, key, value));
+    };
+    const handleVisibilityChange = (columnKey, isVisible) => {
+        const next = new Set(visibleColumns.value);
+        if (isVisible)
+            next.add(columnKey);
+        else
+            next.delete(columnKey);
+        setVisibleColumns(next);
+    };
+    const internalSelectedRows = ref(new Set());
+    const selectedRowsProp = computed(() => props.value.selectedRows);
+    const effectiveSelectedRows = computed(() => selectedRowsProp.value ?? internalSelectedRows.value);
+    const handleSelectionChange = (event) => {
+        if (selectedRowsProp.value === undefined) {
+            internalSelectedRows.value = new Set(event.selectedRowIds);
+        }
+        props.value.onSelectionChange?.(event);
+    };
+    const multiSelectFilterFields = computed(() => getMultiSelectFilterFields(columns.value));
+    const filterOptionsSource = computed(() => dataSource.value ?? { fetchFilterOptions: undefined });
+    const { filterOptions: serverFilterOptions, loadingOptions: loadingFilterOptions } = useFilterOptions(filterOptionsSource, multiSelectFilterFields);
+    const hasServerFilterOptions = computed(() => dataSource.value?.fetchFilterOptions != null);
+    const clientFilterOptions = computed(() => {
+        if (hasServerFilterOptions.value)
+            return serverFilterOptions.value;
+        return deriveFilterOptionsFromData(displayData.value, columns.value);
+    });
+    // --- Client-side filtering & sorting ---
+    const clientItemsAndTotal = computed(() => {
+        if (!isClientSide.value)
+            return null;
+        const rows = processClientSideData(displayData.value, columns.value, filters.value, sort.value.field, sort.value.direction);
+        const total = rows.length;
+        const start = (page.value - 1) * pageSize.value;
+        const paged = rows.slice(start, start + pageSize.value);
+        return { items: paged, totalCount: total };
+    });
+    // --- Server-side fetching ---
+    const serverItems = ref([]);
+    const serverTotalCount = ref(0);
+    const loading = ref(true);
+    let fetchId = 0;
+    const refreshCounter = ref(0);
+    watch([isServerSide, dataSource, page, pageSize, () => sort.value.field, () => sort.value.direction, filters, refreshCounter], () => {
+        if (!isServerSide.value || !dataSource.value) {
+            if (!isServerSide.value)
+                loading.value = false;
+            return;
+        }
+        const id = ++fetchId;
+        loading.value = true;
+        dataSource.value
+            .fetchPage({
+            page: page.value,
+            pageSize: pageSize.value,
+            sort: { field: sort.value.field, direction: sort.value.direction },
+            filters: filters.value,
+        })
+            .then((res) => {
+            if (id !== fetchId)
+                return;
+            serverItems.value = res.items;
+            serverTotalCount.value = res.totalCount;
+        })
+            .catch((err) => {
+            if (id !== fetchId)
+                return;
+            onError.value?.(err);
+            serverItems.value = [];
+            serverTotalCount.value = 0;
+        })
+            .finally(() => {
+            if (id === fetchId)
+                loading.value = false;
+        });
+    }, { immediate: true });
+    const displayItems = computed(() => isClientSide.value && clientItemsAndTotal.value
+        ? clientItemsAndTotal.value.items
+        : serverItems.value);
+    const displayTotalCount = computed(() => isClientSide.value && clientItemsAndTotal.value
+        ? clientItemsAndTotal.value.totalCount
+        : serverTotalCount.value);
+    // Fire onFirstDataRendered once
+    let firstDataRendered = false;
+    watch(displayItems, (items) => {
+        if (!firstDataRendered && items.length > 0) {
+            firstDataRendered = true;
+            onFirstDataRendered.value?.();
+        }
+    });
+    // With discriminated union, any defined value is active
+    const hasActiveFilters = computed(() => Object.values(filters.value).some((v) => v !== undefined));
+    const columnChooserColumns = computed(() => columns.value.map((c) => ({
+        columnId: c.columnId,
+        name: c.name,
+        required: c.required === true,
+    })));
+    const statusBarConfig = computed(() => {
+        const sb = props.value.statusBar;
+        if (!sb)
+            return undefined;
+        if (typeof sb === 'object')
+            return sb;
+        const totalData = isClientSide.value ? (data.value?.length ?? 0) : serverTotalCount.value;
+        const filteredData = displayTotalCount.value;
+        return {
+            totalCount: totalData,
+            filteredCount: hasActiveFilters.value ? filteredData : undefined,
+            selectedCount: effectiveSelectedRows.value.size,
+            suppressRowCount: true,
+        };
+    });
+    const handleColumnResized = (columnId, width) => {
+        columnWidthOverrides.value = { ...columnWidthOverrides.value, [columnId]: width };
+        onColumnResized.value?.(columnId, width);
+    };
+    const handleColumnPinned = (columnId, pinned) => {
+        if (pinned === null) {
+            const { [columnId]: _, ...rest } = pinnedOverrides.value;
+            pinnedOverrides.value = rest;
+        }
+        else {
+            pinnedOverrides.value = { ...pinnedOverrides.value, [columnId]: pinned };
+        }
+        onColumnPinned.value?.(columnId, pinned);
+    };
+    // --- Side bar ---
+    const sideBarState = useSideBarState({ config: props.value.sideBar });
+    const filterableColumns = computed(() => columns.value
+        .filter((c) => c.filterable && c.filterable.type)
+        .map((c) => ({
+        columnId: c.columnId,
+        name: c.name,
+        filterField: c.filterable.filterField ?? c.columnId,
+        filterType: c.filterable.type,
+    })));
+    const sideBarProps = computed(() => {
+        if (!sideBarState.isEnabled)
+            return null;
+        return {
+            activePanel: sideBarState.activePanel.value,
+            onPanelChange: sideBarState.setActivePanel,
+            panels: sideBarState.panels,
+            position: sideBarState.position,
+            columns: columnChooserColumns.value,
+            visibleColumns: visibleColumns.value,
+            onVisibilityChange: handleVisibilityChange,
+            onSetVisibleColumns: setVisibleColumns,
+            filterableColumns: filterableColumns.value,
+            filters: filters.value,
+            onFilterChange: handleFilterChange,
+            filterOptions: clientFilterOptions.value,
+        };
+    });
+    const clearAllFilters = () => setFilters({});
+    const isLoadingResolved = computed(() => (isServerSide.value && loading.value) || displayLoading.value);
+    // --- Build result objects ---
+    const dataGridProps = computed(() => ({
+        items: displayItems.value,
+        columns: columnsProp.value,
+        getRowId: getRowId.value,
+        sortBy: sort.value.field,
+        sortDirection: sort.value.direction,
+        onColumnSort: handleSort,
+        visibleColumns: visibleColumns.value,
+        columnOrder: columnOrder.value,
+        onColumnOrderChange: onColumnOrderChange.value,
+        onColumnResized: handleColumnResized,
+        onColumnPinned: handleColumnPinned,
+        pinnedColumns: pinnedOverrides.value,
+        initialColumnWidths: columnWidthOverrides.value,
+        freezeRows: props.value.freezeRows,
+        freezeCols: props.value.freezeCols,
+        editable: props.value.editable,
+        cellSelection: props.value.cellSelection,
+        onCellValueChanged: props.value.onCellValueChanged,
+        onUndo: props.value.onUndo,
+        onRedo: props.value.onRedo,
+        canUndo: props.value.canUndo,
+        canRedo: props.value.canRedo,
+        rowSelection: props.value.rowSelection ?? 'none',
+        selectedRows: effectiveSelectedRows.value,
+        onSelectionChange: handleSelectionChange,
+        statusBar: statusBarConfig.value,
+        isLoading: isLoadingResolved.value,
+        filters: filters.value,
+        onFilterChange: handleFilterChange,
+        filterOptions: clientFilterOptions.value,
+        loadingFilterOptions: dataSource.value?.fetchFilterOptions ? loadingFilterOptions.value : EMPTY_LOADING_OPTIONS,
+        peopleSearch: dataSource.value?.searchPeople,
+        getUserByEmail: dataSource.value?.getUserByEmail,
+        layoutMode: props.value.layoutMode,
+        suppressHorizontalScroll: props.value.suppressHorizontalScroll,
+        'aria-label': props.value['aria-label'],
+        'aria-labelledby': props.value['aria-labelledby'],
+        emptyState: {
+            hasActiveFilters: hasActiveFilters.value,
+            onClearAll: clearAllFilters,
+            message: props.value.emptyState?.message,
+            render: props.value.emptyState?.render,
+        },
+    }));
+    const pagination = computed(() => ({
+        page: page.value,
+        pageSize: pageSize.value,
+        displayTotalCount: displayTotalCount.value,
+        setPage,
+        setPageSize,
+        pageSizeOptions: props.value.pageSizeOptions,
+        entityLabelPlural: entityLabelPlural.value,
+    }));
+    const columnChooser = computed(() => ({
+        columns: columnChooserColumns.value,
+        visibleColumns: visibleColumns.value,
+        onVisibilityChange: handleVisibilityChange,
+        placement: columnChooserPlacement.value,
+    }));
+    const layout = computed(() => ({
+        toolbar: props.value.toolbar,
+        toolbarBelow: props.value.toolbarBelow,
+        className: props.value.className,
+        emptyState: props.value.emptyState,
+        sideBarProps: sideBarProps.value,
+    }));
+    const filtersResult = computed(() => ({
+        hasActiveFilters: hasActiveFilters.value,
+        setFilters,
+    }));
+    // --- Imperative API ---
+    const api = computed(() => ({
+        setRowData: (d) => {
+            if (!isServerSide.value)
+                internalData.value = d;
+        },
+        setLoading: (v) => { internalLoading.value = v; },
+        getColumnState: () => ({
+            visibleColumns: Array.from(visibleColumns.value),
+            sort: sort.value,
+            columnOrder: columnOrder.value ?? undefined,
+            columnWidths: Object.keys(columnWidthOverrides.value).length > 0 ? columnWidthOverrides.value : undefined,
+            filters: Object.keys(filters.value).length > 0 ? filters.value : undefined,
+            pinnedColumns: Object.keys(pinnedOverrides.value).length > 0 ? pinnedOverrides.value : undefined,
+        }),
+        applyColumnState: (state) => {
+            if (state.visibleColumns)
+                setVisibleColumns(new Set(state.visibleColumns));
+            if (state.sort)
+                setSort(state.sort);
+            if (state.columnOrder && onColumnOrderChange.value)
+                onColumnOrderChange.value(state.columnOrder);
+            if (state.columnWidths)
+                columnWidthOverrides.value = state.columnWidths;
+            if (state.filters)
+                setFilters(state.filters);
+            if (state.pinnedColumns)
+                pinnedOverrides.value = state.pinnedColumns;
+        },
+        setFilterModel: setFilters,
+        getSelectedRows: () => Array.from(effectiveSelectedRows.value),
+        setSelectedRows: (rowIds) => {
+            if (selectedRowsProp.value === undefined)
+                internalSelectedRows.value = new Set(rowIds);
+        },
+        selectAll: () => {
+            const allIds = new Set(displayItems.value.map((item) => getRowId.value(item)));
+            if (selectedRowsProp.value === undefined)
+                internalSelectedRows.value = allIds;
+            props.value.onSelectionChange?.({ selectedRowIds: Array.from(allIds), selectedItems: displayItems.value });
+        },
+        deselectAll: () => {
+            if (selectedRowsProp.value === undefined)
+                internalSelectedRows.value = new Set();
+            props.value.onSelectionChange?.({ selectedRowIds: [], selectedItems: [] });
+        },
+        clearFilters: () => setFilters({}),
+        clearSort: () => setSort({ field: defaultSortField.value, direction: defaultSortDirection.value }),
+        resetGridState: (options) => {
+            setFilters({});
+            setSort({ field: defaultSortField.value, direction: defaultSortDirection.value });
+            if (!options?.keepSelection) {
+                if (selectedRowsProp.value === undefined)
+                    internalSelectedRows.value = new Set();
+                props.value.onSelectionChange?.({ selectedRowIds: [], selectedItems: [] });
+            }
+        },
+        getDisplayedRows: () => displayItems.value,
+        refreshData: () => {
+            if (isServerSide.value)
+                refreshCounter.value++;
+        },
+    }));
+    return {
+        dataGridProps,
+        pagination,
+        columnChooser,
+        layout,
+        filters: filtersResult,
+        api,
+    };
+}

package/dist/esm/composables/usePeopleFilterState.js

@@ -0,0 +1,66 @@
+import { ref, watch, onUnmounted } from 'vue';
+const PEOPLE_SEARCH_DEBOUNCE_MS = 300;
+export function usePeopleFilterState(params) {
+    const { onUserChange, filterType } = params;
+    const peopleInputRef = ref(null);
+    let peopleSearchTimeout;
+    const peopleSuggestions = ref([]);
+    const isPeopleLoading = ref(false);
+    const peopleSearchText = ref('');
+    const setPeopleSearchText = (v) => {
+        peopleSearchText.value = v;
+    };
+    // Sync temp state when popover opens
+    watch(() => params.isFilterOpen(), (open) => {
+        if (open) {
+            peopleSearchText.value = '';
+            peopleSuggestions.value = [];
+            if (filterType === 'people') {
+                setTimeout(() => peopleInputRef.value?.focus(), 50);
+            }
+        }
+    });
+    // People search with debounce
+    watch([peopleSearchText, () => params.peopleSearch, () => params.isFilterOpen()], ([searchText, search, isOpen]) => {
+        if (peopleSearchTimeout)
+            clearTimeout(peopleSearchTimeout);
+        if (!search || !isOpen || filterType !== 'people')
+            return;
+        if (!searchText.trim()) {
+            peopleSuggestions.value = [];
+            return;
+        }
+        isPeopleLoading.value = true;
+        peopleSearchTimeout = setTimeout(async () => {
+            try {
+                const results = await search(searchText);
+                peopleSuggestions.value = results.slice(0, 10);
+            }
+            catch {
+                peopleSuggestions.value = [];
+            }
+            finally {
+                isPeopleLoading.value = false;
+            }
+        }, PEOPLE_SEARCH_DEBOUNCE_MS);
+    });
+    onUnmounted(() => {
+        if (peopleSearchTimeout)
+            clearTimeout(peopleSearchTimeout);
+    });
+    const handleUserSelect = (user) => {
+        onUserChange?.(user);
+    };
+    const handleClearUser = () => {
+        onUserChange?.(undefined);
+    };
+    return {
+        peopleSuggestions,
+        isPeopleLoading,
+        peopleSearchText,
+        setPeopleSearchText,
+        peopleInputRef,
+        handleUserSelect,
+        handleClearUser,
+    };
+}

package/dist/esm/composables/useRichSelectState.js

@@ -0,0 +1,59 @@
+import { ref, computed } from 'vue';
+/**
+ * Manages searchable rich select editor state with keyboard navigation.
+ */
+export function useRichSelectState(params) {
+    const { values, formatValue, onCommit, onCancel } = params;
+    const searchText = ref('');
+    const highlightedIndex = ref(0);
+    const setSearchText = (text) => {
+        searchText.value = text;
+    };
+    const getDisplayText = (value) => {
+        if (formatValue)
+            return formatValue(value);
+        return value != null ? String(value) : '';
+    };
+    const filteredValues = computed(() => {
+        if (!searchText.value.trim())
+            return values;
+        const lower = searchText.value.toLowerCase();
+        return values.filter((v) => getDisplayText(v).toLowerCase().includes(lower));
+    });
+    const selectValue = (value) => {
+        onCommit(value);
+    };
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                highlightedIndex.value = Math.min(highlightedIndex.value + 1, filteredValues.value.length - 1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                e.stopPropagation();
+                if (filteredValues.value.length > 0 && highlightedIndex.value < filteredValues.value.length) {
+                    selectValue(filteredValues.value[highlightedIndex.value]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                onCancel();
+                break;
+        }
+    };
+    return {
+        searchText,
+        setSearchText,
+        filteredValues,
+        highlightedIndex,
+        handleKeyDown,
+        selectValue,
+        getDisplayText,
+    };
+}

package/dist/esm/composables/useRowSelection.js

@@ -0,0 +1,75 @@
+import { ref, computed } from 'vue';
+/**
+ * Manages row selection state for single or multiple selection modes with shift-click range support.
+ */
+export function useRowSelection(params) {
+    const { items, getRowId, rowSelection, controlledSelectedRows, onSelectionChange, } = params;
+    const internalSelectedRows = ref(new Set());
+    let lastClickedRow = -1;
+    const selectedRowIds = computed(() => {
+        const controlled = controlledSelectedRows.value;
+        if (controlled != null) {
+            return controlled instanceof Set
+                ? controlled
+                : new Set(controlled);
+        }
+        return internalSelectedRows.value;
+    });
+    const updateSelection = (newSelectedIds) => {
+        if (controlledSelectedRows.value === undefined) {
+            internalSelectedRows.value = newSelectedIds;
+        }
+        onSelectionChange?.({
+            selectedRowIds: Array.from(newSelectedIds),
+            selectedItems: items.value.filter((item) => newSelectedIds.has(getRowId(item))),
+        });
+    };
+    const handleRowCheckboxChange = (rowId, checked, rowIndex, shiftKey) => {
+        if (rowSelection.value === 'single') {
+            updateSelection(checked ? new Set([rowId]) : new Set());
+            lastClickedRow = rowIndex;
+            return;
+        }
+        const next = new Set(selectedRowIds.value);
+        const currentItems = items.value;
+        if (shiftKey && lastClickedRow >= 0 && lastClickedRow !== rowIndex) {
+            const start = Math.min(lastClickedRow, rowIndex);
+            const end = Math.max(lastClickedRow, rowIndex);
+            for (let i = start; i <= end; i++) {
+                if (i < currentItems.length) {
+                    const id = getRowId(currentItems[i]);
+                    if (checked)
+                        next.add(id);
+                    else
+                        next.delete(id);
+                }
+            }
+        }
+        else {
+            if (checked)
+                next.add(rowId);
+            else
+                next.delete(rowId);
+        }
+        lastClickedRow = rowIndex;
+        updateSelection(next);
+    };
+    const handleSelectAll = (checked) => {
+        if (checked) {
+            updateSelection(new Set(items.value.map((item) => getRowId(item))));
+        }
+        else {
+            updateSelection(new Set());
+        }
+    };
+    const allSelected = computed(() => items.value.length > 0 && items.value.every((item) => selectedRowIds.value.has(getRowId(item))));
+    const someSelected = computed(() => !allSelected.value && items.value.some((item) => selectedRowIds.value.has(getRowId(item))));
+    return {
+        selectedRowIds,
+        updateSelection,
+        handleRowCheckboxChange,
+        handleSelectAll,
+        allSelected,
+        someSelected,
+    };
+}

package/dist/esm/composables/useSideBarState.js

@@ -0,0 +1,41 @@
+import { ref, computed } from 'vue';
+const DEFAULT_PANELS = ['columns', 'filters'];
+/**
+ * Manages side bar panel state: enabled panels, active panel, position, and toggle/close handlers.
+ */
+export function useSideBarState(params) {
+    const { config } = params;
+    const isEnabled = config != null && config !== false;
+    const parsed = (() => {
+        if (!isEnabled || config === true) {
+            return { panels: DEFAULT_PANELS, position: 'right', defaultPanel: null };
+        }
+        const def = config;
+        return {
+            panels: def.panels ?? DEFAULT_PANELS,
+            position: def.position ?? 'right',
+            defaultPanel: def.defaultPanel ?? null,
+        };
+    })();
+    const activePanel = ref(parsed.defaultPanel);
+    const setActivePanel = (panel) => {
+        activePanel.value = panel;
+    };
+    const toggle = (panel) => {
+        activePanel.value = activePanel.value === panel ? null : panel;
+    };
+    const close = () => {
+        activePanel.value = null;
+    };
+    const isOpen = computed(() => activePanel.value !== null);
+    return {
+        isEnabled,
+        activePanel,
+        setActivePanel,
+        panels: parsed.panels,
+        position: parsed.position,
+        isOpen,
+        toggle,
+        close,
+    };
+}