nuxt-ui-tools 0.1.0

package/dist/runtime/table/composables/use-table-internals.js

@@ -0,0 +1,107 @@
+import { computed, inject, provide, shallowRef } from "vue";
+import { resolveSchemaSource } from "../utils/index.js";
+import { useTableApi } from "./use-table-api.js";
+import { useTableColumns } from "./use-table-columns.js";
+import { useTableControls } from "./use-table-controls.js";
+import { useTableData } from "./use-table-data.js";
+import { useTableFilterPresentation } from "./use-table-filter-presentation.js";
+import { useTableFilters } from "./use-table-filters.js";
+import { useTableGrid } from "./use-table-grid.js";
+import { useTableLayout } from "./use-table-layout.js";
+import { useTablePagination } from "./use-table-pagination.js";
+import { useTableSelection } from "./use-table-selection.js";
+import { useTableStartup } from "./use-table-startup.js";
+import { useTableState } from "./use-table-state.js";
+function createTableInternals(options) {
+  const publicSchema = computed(() => resolveSchemaSource({ schema: options.rawSchema }));
+  const schema = computed(() => publicSchema.value);
+  const tableApi = shallowRef(null);
+  const startup = useTableStartup();
+  const layout = useTableLayout({ schema });
+  const state = useTableState({
+    schema,
+    layout
+  });
+  const queryContent = useTableData({
+    schema,
+    state,
+    startup
+  });
+  const selection = useTableSelection({
+    schema,
+    queryContent
+  });
+  const controls = useTableControls({
+    schema,
+    layout
+  });
+  const filters = useTableFilters({
+    schema,
+    state,
+    queryContent
+  });
+  const filterPresentation = useTableFilterPresentation({
+    filters
+  });
+  const grid = useTableGrid({
+    schema,
+    data: queryContent.data
+  });
+  const tableColumns = useTableColumns({
+    schema,
+    state,
+    data: queryContent,
+    selection,
+    tableLayout: controls.tableLayout,
+    tableApi
+  });
+  const pagination = useTablePagination({
+    schema,
+    layout,
+    state,
+    queryContent
+  });
+  tableApi.value = useTableApi({
+    runtimeSchema: schema,
+    layout,
+    state,
+    selection,
+    controls,
+    columns: tableColumns,
+    filters,
+    pagination,
+    queryContent
+  });
+  if (!tableApi.value) throw new Error("Failed to initialize table API");
+  return {
+    schema,
+    layout,
+    startup,
+    queryState: state.queryState,
+    resolvedFilterState: state.resolvedFilterState,
+    queryContent,
+    tableApi: tableApi.value,
+    selection,
+    filters,
+    filterPresentation,
+    grid,
+    controls,
+    tableColumns,
+    pagination
+  };
+}
+const TABLE_INTERNALS_KEY = Symbol("nuxt-ui-tools.table.internals");
+function provideTableInternals(internals) {
+  provide(TABLE_INTERNALS_KEY, internals);
+}
+function useProvideTableInternals(options) {
+  const internals = createTableInternals(options);
+  provideTableInternals(internals);
+  return internals;
+}
+function useTableInternals() {
+  const internals = inject(TABLE_INTERNALS_KEY, null);
+  if (!internals) throw new Error("useTableInternals must be called inside a <DataList> component");
+  return internals;
+}
+export { createTableInternals, provideTableInternals, useProvideTableInternals, useTableInternals };

package/dist/runtime/table/composables/use-table-layout.d.ts

@@ -0,0 +1,11 @@
+import { type ComputedRef } from 'vue';
+import type { TableSchemaView } from '../types/index.js';
+interface UseTableLayoutParams {
+    schema: ComputedRef<TableSchemaView>;
+}
+export declare function useTableLayout({ schema }: UseTableLayoutParams): {
+    activeLayout: import("vue").WritableComputedRef<"table" | "grid", "table" | "grid">;
+    gridEnabled: ComputedRef<string | boolean | (() => boolean | string) | null>;
+    tableEnabled: ComputedRef<string | boolean | (() => boolean | string) | null>;
+};
+export {};

package/dist/runtime/table/composables/use-table-layout.js

@@ -0,0 +1,32 @@
+import { computed, watch } from "vue";
+import { useQueryState, createEnumCodec } from "#ui-tools/query-state";
+import { useResponsiveValue } from "#ui-tools/shared";
+export function useTableLayout({ schema }) {
+  const defaultLayout = computed(() => schema.value.defaultLayout ?? "table");
+  const gridEnabled = useResponsiveValue(
+    () => schema.value.grid?.enabled ?? Boolean(schema.value.grid)
+  );
+  const tableEnabled = useResponsiveValue(
+    () => schema.value.table?.enabled ?? Boolean(schema.value.table)
+  );
+  const activeLayout = useQueryState({
+    key: "l",
+    codec: createEnumCodec(["grid", "table"]),
+    defaultValue: defaultLayout.value,
+    omitDefault: true
+  });
+  watch(
+    [gridEnabled, tableEnabled, defaultLayout],
+    ([grid, table, fallbackLayout]) => {
+      if (!grid && activeLayout.value === "grid") activeLayout.value = "table";
+      if (!table && activeLayout.value === "table") activeLayout.value = "grid";
+      if (!grid && !table) activeLayout.value = fallbackLayout;
+    },
+    { immediate: true }
+  );
+  return {
+    activeLayout,
+    gridEnabled,
+    tableEnabled
+  };
+}

package/dist/runtime/table/composables/use-table-pagination.d.ts

@@ -0,0 +1,42 @@
+import { type ComputedRef } from 'vue';
+import type { TableSchemaView } from '../types/index.js';
+import type { useTableData } from './use-table-data.js';
+import type { useTableLayout } from './use-table-layout.js';
+import type { useTableState } from './use-table-state.js';
+export interface UseTablePaginationParams {
+    schema: ComputedRef<TableSchemaView>;
+    layout: ReturnType<typeof useTableLayout>;
+    state: ReturnType<typeof useTableState>;
+    queryContent: ReturnType<typeof useTableData>;
+}
+export declare function useTablePagination(options: UseTablePaginationParams): {
+    mode: ComputedRef<"none" | "offset" | "cursor">;
+    rowCount: ComputedRef<number | null>;
+    loadedCount: ComputedRef<number>;
+    currentPage: ComputedRef<number>;
+    pageSize: ComputedRef<number>;
+    totalPages: ComputedRef<number>;
+    canPreviousPage: ComputedRef<boolean>;
+    canNextPage: ComputedRef<boolean>;
+    isLoadingMore: ComputedRef<boolean>;
+    loadMoreError: ComputedRef<unknown>;
+    state: ComputedRef<{
+        mode: "none" | "offset" | "cursor";
+        pageIndex: number;
+        pageSize: number;
+        pageCount: number;
+        loadedCount: number;
+        totalCount: number | null;
+        hasNextPage: boolean;
+        hasPreviousPage: boolean;
+        isLoadingMore: boolean;
+        loadMoreError: unknown;
+    }>;
+    pageSizeOptions: ComputedRef<number[]>;
+    setPage: (page: number) => void;
+    setPageSize: (nextPageSize: number) => void;
+    next: () => void;
+    previous: () => void;
+    reset: () => void;
+    loadMore: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
+};

package/dist/runtime/table/composables/use-table-pagination.js

@@ -0,0 +1,127 @@
+import { computed, ref, watch } from "vue";
+import { getDefaultPageSize, getPageSizeOptions } from "../utils/index.js";
+export function useTablePagination(options) {
+  const stableRemoteRowCount = ref(0);
+  const mode = computed(() => options.state.queryState.pagination.value.mode);
+  const loadedCount = computed(() => options.queryContent.data.value.rows.length);
+  const rowCount = computed(
+    () => options.schema.value.source.mode === "remote" ? stableRemoteRowCount.value : options.queryContent.data.value.rowCount
+  );
+  const currentPage = computed(() => {
+    const pagination = options.state.queryState.pagination.value;
+    return pagination.mode === "offset" ? pagination.pageIndex : 1;
+  });
+  const pageSize = computed(() => {
+    const pagination = options.state.queryState.pagination.value;
+    if (pagination.mode === "none") return Math.max(1, loadedCount.value);
+    return pagination.pageSize;
+  });
+  const totalPages = computed(
+    () => Math.max(1, Math.ceil((rowCount.value ?? loadedCount.value) / Math.max(1, pageSize.value)))
+  );
+  const canPreviousPage = computed(() => mode.value === "offset" && currentPage.value > 1);
+  const canNextPage = computed(() => {
+    if (mode.value === "cursor") return infiniteHasNextPage.value;
+    if (mode.value === "none") return false;
+    return currentPage.value < totalPages.value;
+  });
+  const infiniteHasNextPage = computed(() => options.queryContent.infiniteQuery.hasNextPage.value);
+  const isLoadingMore = computed(() => options.queryContent.infiniteQuery.isFetchingNextPage.value);
+  const loadMoreError = computed(
+    () => options.queryContent.infiniteQuery.isFetchNextPageError.value ? options.queryContent.infiniteQuery.error.value : null
+  );
+  const state = computed(() => ({
+    mode: mode.value,
+    pageIndex: currentPage.value,
+    pageSize: pageSize.value,
+    pageCount: totalPages.value,
+    loadedCount: loadedCount.value,
+    totalCount: rowCount.value,
+    hasNextPage: canNextPage.value,
+    hasPreviousPage: canPreviousPage.value,
+    isLoadingMore: isLoadingMore.value,
+    loadMoreError: loadMoreError.value
+  }));
+  const pageSizeOptions = computed(
+    () => getPageSizeOptions({
+      schema: options.schema.value,
+      layout: options.layout.activeLayout.value
+    })
+  );
+  const compatiblePageSize = computed(() => {
+    if (pageSizeOptions.value.includes(pageSize.value)) return pageSize.value;
+    return getDefaultPageSize({
+      schema: options.schema.value,
+      layout: options.layout.activeLayout.value
+    });
+  });
+  function setPage(page) {
+    if (mode.value !== "offset") return;
+    options.state.queryState.setOffsetPagination({
+      pageIndex: Math.max(1, Math.min(page, totalPages.value)),
+      pageSize: pageSize.value
+    });
+  }
+  function setPageSize(nextPageSize) {
+    if (mode.value !== "offset") return;
+    options.state.queryState.setOffsetPagination({ pageIndex: 1, pageSize: nextPageSize });
+  }
+  function next() {
+    setPage(currentPage.value + 1);
+  }
+  function previous() {
+    setPage(currentPage.value - 1);
+  }
+  function reset() {
+    options.state.queryState.resetPagination();
+  }
+  async function loadMore() {
+    if (mode.value !== "cursor" || !infiniteHasNextPage.value || isLoadingMore.value) return;
+    return options.queryContent.infiniteQuery.fetchNextPage();
+  }
+  watch(
+    [pageSizeOptions, compatiblePageSize],
+    ([optionsList, nextPageSize]) => {
+      if (mode.value !== "offset") return;
+      if (optionsList.includes(pageSize.value)) return;
+      if (nextPageSize === pageSize.value) return;
+      setPageSize(nextPageSize);
+    },
+    { immediate: true }
+  );
+  watch(
+    [
+      () => options.queryContent.data.value.rowCount,
+      () => options.queryContent.status.value.isDataFetching
+    ],
+    ([nextRowCount, isFetching]) => {
+      if (options.schema.value.source.mode !== "remote") {
+        stableRemoteRowCount.value = nextRowCount;
+        return;
+      }
+      if (isFetching) return;
+      stableRemoteRowCount.value = nextRowCount;
+    },
+    { immediate: true }
+  );
+  return {
+    mode,
+    rowCount,
+    loadedCount,
+    currentPage,
+    pageSize,
+    totalPages,
+    canPreviousPage,
+    canNextPage,
+    isLoadingMore,
+    loadMoreError,
+    state,
+    pageSizeOptions,
+    setPage,
+    setPageSize,
+    next,
+    previous,
+    reset,
+    loadMore
+  };
+}

package/dist/runtime/table/composables/use-table-row-actions.d.ts

@@ -0,0 +1,5 @@
+import { type ComputedRef } from 'vue';
+import type { GenericObject, TableRowActionContext } from '../types/index.js';
+export type TableInjectedRowActionScope = TableRowActionContext<GenericObject, Record<string, unknown>, Record<string, unknown>>;
+export declare function provideTableRowActionScope(scope: ComputedRef<TableInjectedRowActionScope>): void;
+export declare function useTableRowActionScope(): ComputedRef<TableInjectedRowActionScope> | null;

package/dist/runtime/table/composables/use-table-row-actions.js

@@ -0,0 +1,8 @@
+import { inject, provide } from "vue";
+const TABLE_ROW_ACTION_SCOPE_KEY = Symbol("nuxt-ui-tools.table.row-actions-scope");
+export function provideTableRowActionScope(scope) {
+  provide(TABLE_ROW_ACTION_SCOPE_KEY, scope);
+}
+export function useTableRowActionScope() {
+  return inject(TABLE_ROW_ACTION_SCOPE_KEY, null);
+}

package/dist/runtime/table/composables/use-table-search.d.ts

@@ -0,0 +1,12 @@
+import { type ComputedRef } from 'vue';
+import type { TableSchemaView } from '../types/index.js';
+import type { useQueryState } from './use-query-state.js';
+export interface UseTableSearchParams {
+    schema: ComputedRef<TableSchemaView>;
+    queryState: ReturnType<typeof useQueryState>;
+}
+export declare function useTableSearch(options: UseTableSearchParams): {
+    searchQuery: import("vue").WritableComputedRef<string, string>;
+    searchPlaceholder: ComputedRef<string>;
+    hasActiveSearch: ComputedRef<boolean>;
+};

package/dist/runtime/table/composables/use-table-search.js

@@ -0,0 +1,26 @@
+import { computed } from "vue";
+import { getFilterTextValue } from "../utils/filters/common.js";
+export function useTableSearch(options) {
+  const searchQuery = computed({
+    get: () => String(options.queryState.filters.value.search ?? ""),
+    set: (value) => {
+      options.queryState.resetPagination();
+      options.queryState.filters.value = {
+        ...options.queryState.filters.value,
+        search: value
+      };
+    }
+  });
+  const searchPlaceholder = computed(
+    () => getFilterTextValue({
+      value: options.schema.value.filters?.search?.placeholder,
+      fallback: "Search rows\u2026"
+    })
+  );
+  const hasActiveSearch = computed(() => searchQuery.value.trim().length > 0);
+  return {
+    searchQuery,
+    searchPlaceholder,
+    hasActiveSearch
+  };
+}

package/dist/runtime/table/composables/use-table-selection.d.ts

@@ -0,0 +1,45 @@
+import { type ComputedRef } from 'vue';
+import type { GenericObject, TableSchemaView } from '../types/index.js';
+import type { useTableData } from './use-table-data.js';
+export interface UseTableSelectionParams {
+    schema: ComputedRef<TableSchemaView>;
+    queryContent: ReturnType<typeof useTableData>;
+}
+export declare function useTableSelection(options: UseTableSelectionParams): {
+    selectionEnabled: ComputedRef<boolean>;
+    rowSelection: import("vue").WritableComputedRef<{
+        [k: string]: boolean;
+    }, Record<string, boolean> | undefined>;
+    selectedKeys: import("vue").Ref<string[], string[]>;
+    selectedRows: ComputedRef<object[]>;
+    selectedCount: ComputedRef<number>;
+    allSelected: ComputedRef<boolean>;
+    partiallySelected: ComputedRef<boolean>;
+    lastTouchedRowId: import("vue").Ref<string | null, string | null>;
+    getRowId: (params: {
+        row: GenericObject;
+        index?: number;
+    }) => string;
+    isRowSelected: (params: {
+        rowId: string;
+    }) => boolean;
+    setRowSelection: (params: {
+        selection: Record<string, boolean>;
+    }) => void;
+    selectRows: (params: {
+        rowIds: string[];
+    }) => void;
+    unselectRows: (params: {
+        rowIds: string[];
+    }) => void;
+    clearSelection: () => void;
+    selectAllRows: () => void;
+    toggleAllRows: (params: {
+        selected: boolean;
+    }) => void;
+    toggleRowSelection: (params: {
+        rowId: string;
+        selected?: boolean;
+        shiftKey?: boolean;
+    }) => void;
+};

package/dist/runtime/table/composables/use-table-selection.js

@@ -0,0 +1,152 @@
+import { computed, ref, watch } from "vue";
+import { resolveTableRowId } from "../utils/index.js";
+export function useTableSelection(options) {
+  const selectedKeys = ref([]);
+  const lastTouchedRowId = ref(null);
+  const pageRows = computed(() => options.queryContent.data.value.rows);
+  const selectionEnabled = computed(() => {
+    const mode = options.schema.value.table?.selection ?? options.schema.value.selection?.mode ?? "auto";
+    return mode !== false;
+  });
+  const selectionScope = computed(() => {
+    if (options.schema.value.source.mode === "remote") return "page";
+    return options.schema.value.selection?.scope ?? "all";
+  });
+  const selectionRows = computed(
+    () => selectionScope.value === "all" ? options.queryContent.selectableRows.value : pageRows.value
+  );
+  const pageRowIds = computed(() => pageRows.value.map((row, index) => getRowId({ row, index })));
+  const scopeRowIds = computed(
+    () => selectionRows.value.map((row, index) => getRowId({ row, index }))
+  );
+  const rowSelection = computed({
+    get: () => Object.fromEntries(
+      pageRowIds.value.filter((rowId) => selectedKeys.value.includes(rowId)).map((rowId) => [rowId, true])
+    ),
+    set: (selection = {}) => setRowSelection({ selection })
+  });
+  const selectedCount = computed(() => selectedKeys.value.length);
+  const allSelected = computed(
+    () => scopeRowIds.value.length > 0 && scopeRowIds.value.every((rowId) => selectedKeys.value.includes(rowId))
+  );
+  const partiallySelected = computed(
+    () => !allSelected.value && scopeRowIds.value.some((rowId) => selectedKeys.value.includes(rowId))
+  );
+  const selectedRows = computed(
+    () => selectionRows.value.filter(
+      (row, index) => selectedKeys.value.includes(getRowId({ row, index }))
+    )
+  );
+  function getRowId(params) {
+    return String(
+      resolveTableRowId({
+        rowKey: options.schema.value.rowKey,
+        row: params.row,
+        index: params.index
+      })
+    );
+  }
+  function isRowSelected(params) {
+    return selectedKeys.value.includes(params.rowId);
+  }
+  function selectRows(params) {
+    if (!selectionEnabled.value) {
+      return;
+    }
+    selectedKeys.value = uniqueRowIds([...selectedKeys.value, ...params.rowIds]);
+  }
+  function unselectRows(params) {
+    if (!selectionEnabled.value) {
+      return;
+    }
+    const removed = new Set(params.rowIds);
+    selectedKeys.value = selectedKeys.value.filter((rowId) => !removed.has(rowId));
+  }
+  function clearSelection() {
+    selectedKeys.value = [];
+    lastTouchedRowId.value = null;
+  }
+  function selectAllRows() {
+    if (!selectionEnabled.value) {
+      return;
+    }
+    selectedKeys.value = uniqueRowIds([...selectedKeys.value, ...scopeRowIds.value]);
+  }
+  function setRowSelection(params) {
+    if (!selectionEnabled.value) {
+      clearSelection();
+      return;
+    }
+    const visibleIds = new Set(pageRowIds.value);
+    const preservedSelection = selectedKeys.value.filter((rowId) => !visibleIds.has(rowId));
+    const nextVisibleSelection = Object.entries(params.selection).filter(([, selected]) => Boolean(selected)).map(([rowId]) => rowId);
+    selectedKeys.value = uniqueRowIds([...preservedSelection, ...nextVisibleSelection]);
+  }
+  function toggleAllRows(params) {
+    if (params.selected) {
+      selectAllRows();
+      return;
+    }
+    unselectRows({ rowIds: scopeRowIds.value });
+  }
+  function toggleRowSelection(params) {
+    if (!selectionEnabled.value) {
+      return;
+    }
+    const nextSelected = params.selected ?? !isRowSelected({ rowId: params.rowId });
+    const targetRowIds = params.shiftKey && lastTouchedRowId.value ? getRangeRowIds({
+      anchorRowId: lastTouchedRowId.value,
+      targetRowId: params.rowId
+    }) : [params.rowId];
+    if (nextSelected) {
+      selectRows({ rowIds: targetRowIds });
+    } else {
+      unselectRows({ rowIds: targetRowIds });
+    }
+    lastTouchedRowId.value = params.rowId;
+  }
+  function getRangeRowIds(params) {
+    const anchorIndex = scopeRowIds.value.indexOf(params.anchorRowId);
+    const targetIndex = scopeRowIds.value.indexOf(params.targetRowId);
+    if (anchorIndex === -1 || targetIndex === -1) {
+      return [params.targetRowId];
+    }
+    const start = Math.min(anchorIndex, targetIndex);
+    const end = Math.max(anchorIndex, targetIndex);
+    return scopeRowIds.value.slice(start, end + 1);
+  }
+  watch(
+    scopeRowIds,
+    (rowIds) => {
+      if (!selectedKeys.value.length && !lastTouchedRowId.value) return;
+      const visibleIdSet = new Set(rowIds);
+      selectedKeys.value = selectedKeys.value.filter((rowId) => visibleIdSet.has(rowId));
+      if (lastTouchedRowId.value && !visibleIdSet.has(lastTouchedRowId.value)) {
+        lastTouchedRowId.value = null;
+      }
+    },
+    { immediate: true }
+  );
+  return {
+    selectionEnabled,
+    rowSelection,
+    selectedKeys,
+    selectedRows,
+    selectedCount,
+    allSelected,
+    partiallySelected,
+    lastTouchedRowId,
+    getRowId,
+    isRowSelected,
+    setRowSelection,
+    selectRows,
+    unselectRows,
+    clearSelection,
+    selectAllRows,
+    toggleAllRows,
+    toggleRowSelection
+  };
+}
+function uniqueRowIds(rowIds) {
+  return Array.from(new Set(rowIds));
+}

package/dist/runtime/table/composables/use-table-startup.d.ts

@@ -0,0 +1,11 @@
+type TableStartupPhase = 'booting' | 'scheduled' | 'active';
+export declare function useTableStartup(): {
+    phase: import("vue").ShallowRef<TableStartupPhase, TableStartupPhase>;
+    isBooting: import("vue").ComputedRef<boolean>;
+    isActive: import("vue").ComputedRef<boolean>;
+    start: () => void;
+    scheduleStart: () => void;
+    dispose: () => void;
+};
+export type UseTableStartupReturn = ReturnType<typeof useTableStartup>;
+export {};

package/dist/runtime/table/composables/use-table-startup.js

@@ -0,0 +1,47 @@
+import { shallowRef, computed } from "vue";
+export function useTableStartup() {
+  const phase = shallowRef("booting");
+  const firstFrameId = shallowRef(null);
+  const secondFrameId = shallowRef(null);
+  const isBooting = computed(() => phase.value !== "active");
+  const isActive = computed(() => phase.value === "active");
+  function dispose() {
+    if (typeof window === "undefined") return;
+    if (firstFrameId.value != null) {
+      window.cancelAnimationFrame(firstFrameId.value);
+      firstFrameId.value = null;
+    }
+    if (secondFrameId.value != null) {
+      window.cancelAnimationFrame(secondFrameId.value);
+      secondFrameId.value = null;
+    }
+  }
+  function start() {
+    dispose();
+    phase.value = "active";
+  }
+  function scheduleStart() {
+    if (phase.value === "active") return;
+    if (typeof window === "undefined") {
+      start();
+      return;
+    }
+    dispose();
+    phase.value = "scheduled";
+    firstFrameId.value = window.requestAnimationFrame(() => {
+      firstFrameId.value = null;
+      secondFrameId.value = window.requestAnimationFrame(() => {
+        secondFrameId.value = null;
+        start();
+      });
+    });
+  }
+  return {
+    phase,
+    isBooting,
+    isActive,
+    start,
+    scheduleStart,
+    dispose
+  };
+}