nuxt-ui-tools 0.1.0

package/dist/runtime/table/composables/use-table-filter-options.js

@@ -0,0 +1,251 @@
+import { useQuery } from "@tanstack/vue-query";
+import { computed, unref } from "vue";
+import { QUERY_DEFAULTS } from "../constants/query-state.js";
+import {
+  collectFilterOptionBranchIds,
+  filterFilterOptionTree,
+  flattenFilterOptionEntries,
+  resolveFilterOptionEntries,
+  resolveOptionFilterUi
+} from "../utils/index.js";
+export function useTableFilterOptions(options) {
+  const isActive = computed(() => options.active?.value ?? true);
+  const isReady = computed(() => options.ready?.value ?? true);
+  const remoteSource = computed(
+    () => options.schema.value.source.mode === "remote" ? options.schema.value.source : null
+  );
+  const normalizedSearch = computed(() => options.searchQuery.value.trim());
+  const optionDefinition = computed(
+    () => options.definition.kind === "option" ? options.definition : void 0
+  );
+  const optionOperator = computed(() => {
+    if (options.definition.kind !== "option") return void 0;
+    const current = options.filters.getFilterOperator({
+      key: options.definition.key
+    });
+    return current === "isAnyOf" || current === "isNot" ? current : "is";
+  });
+  const optionUi = computed(
+    () => optionDefinition.value ? resolveOptionFilterUi(optionDefinition.value, optionOperator.value) : void 0
+  );
+  const shouldDeriveCounts = computed(() => {
+    if (options.definition.kind === "boolean") return true;
+    if (options.definition.kind !== "option") return false;
+    return optionUi.value?.row.showCounts ?? true;
+  });
+  const shouldResolveCounts = computed(
+    () => shouldDeriveCounts.value && isActive.value && isReady.value
+  );
+  const isRemoteTable = computed(() => options.schema.value.source.mode === "remote");
+  const hasRemoteOptionQuery = computed(
+    () => options.definition.kind === "option" && typeof options.definition.source?.query === "function"
+  );
+  const facetSpec = computed(() => options.definition.source?.facet);
+  const facetConfig = computed(() => {
+    if (!facetSpec.value || typeof facetSpec.value !== "object") return null;
+    return facetSpec.value;
+  });
+  const hasPerFilterFacetQuery = computed(() => typeof facetConfig.value?.query === "function");
+  const usesFacetCounts = computed(
+    () => Boolean(facetSpec.value) && (options.schema.value.source.mode === "client" || hasPerFilterFacetQuery.value || isRemoteTable.value && Boolean(remoteSource.value?.facets))
+  );
+  const resolvedTreeSearchMode = computed(() => {
+    if (optionUi.value?.presentation !== "tree")
+      return hasRemoteOptionQuery.value ? "remote" : "local";
+    const configured = optionUi.value.tree.searchMode;
+    if (configured === "local" || configured === "remote") return configured;
+    return hasRemoteOptionQuery.value ? "remote" : "local";
+  });
+  const querySearch = computed(() => {
+    if (!hasRemoteOptionQuery.value) return void 0;
+    if (resolvedTreeSearchMode.value === "local") return void 0;
+    return normalizedSearch.value || void 0;
+  });
+  const facetSearch = computed(
+    () => resolvedTreeSearchMode.value === "remote" ? normalizedSearch.value || void 0 : void 0
+  );
+  const staticEntries = computed(() => {
+    if (options.definition.kind !== "option") return [];
+    return [...options.definition.source?.options ?? []];
+  });
+  const selectedValues = computed(
+    () => getSelectedValues({
+      filters: options.filters,
+      key: options.definition.key
+    })
+  );
+  const optionQuery = useQuery(
+    computed(() => {
+      const activeDefinition = optionDefinition.value;
+      if (!hasRemoteOptionQuery.value || !activeDefinition || typeof activeDefinition.source?.query !== "function") {
+        return {
+          queryKey: ["table-filter-options", options.definition.key, "disabled"],
+          queryFn: async () => ({ options: [] }),
+          enabled: false
+        };
+      }
+      const queryOptions = unref(
+        activeDefinition.source.query({
+          search: querySearch.value,
+          limit: void 0,
+          cursor: void 0
+        })
+      );
+      return Object.assign(
+        {
+          ...queryOptions,
+          queryKey: queryOptions.queryKey,
+          queryFn: queryOptions.queryFn,
+          placeholderData: (previousData) => previousData
+        },
+        {
+          staleTime: QUERY_DEFAULTS.staleTime.filterOptions,
+          refetchOnWindowFocus: QUERY_DEFAULTS.refetchOnWindowFocus
+        }
+      );
+    })
+  );
+  const perFilterFacetQuery = useQuery(
+    computed(() => {
+      if (!isRemoteTable.value || !usesFacetCounts.value || !facetConfig.value?.query) {
+        return {
+          queryKey: ["table-filter-facets", options.definition.key, "disabled"],
+          queryFn: async () => ({ facets: [] }),
+          enabled: false
+        };
+      }
+      const queryOptions = unref(
+        facetConfig.value.query({
+          table: options.queryContent.facetsBaseContext.value,
+          facets: [
+            {
+              key: options.definition.key,
+              mode: resolveFacetMode(facetConfig.value),
+              search: facetSearch.value,
+              limit: facetConfig.value.limit,
+              cursor: void 0
+            }
+          ]
+        })
+      );
+      return Object.assign(
+        {
+          ...queryOptions,
+          queryKey: queryOptions.queryKey,
+          queryFn: queryOptions.queryFn,
+          placeholderData: (previousData) => previousData,
+          enabled: shouldResolveCounts.value
+        },
+        {
+          staleTime: QUERY_DEFAULTS.staleTime.filterOptions,
+          refetchOnWindowFocus: QUERY_DEFAULTS.refetchOnWindowFocus
+        }
+      );
+    })
+  );
+  const remoteEntries = computed(() => {
+    if (!hasRemoteOptionQuery.value) return [];
+    const result = unref(optionQuery.data);
+    if (Array.isArray(result)) return [...result];
+    return result?.options ? [...result.options] : [];
+  });
+  const facetCounts = computed(() => {
+    if (!usesFacetCounts.value) return [];
+    const facets = isRemoteTable.value && hasPerFilterFacetQuery.value ? unref(perFilterFacetQuery.data)?.facets ?? [] : options.queryContent.facets.value.facets;
+    return facets.find((facet) => facet.key === options.definition.key)?.options ?? [];
+  });
+  const resolvedFacetCounts = computed(
+    () => facetCounts.value.flatMap(
+      (entry) => isPrimitiveFilterOptionValue(entry.value) ? [{ value: entry.value, count: entry.count }] : []
+    )
+  );
+  const resolvedSourceTreeEntries = computed(
+    () => resolveFilterOptionEntries({
+      definition: options.definition,
+      rows: [],
+      options: hasRemoteOptionQuery.value ? remoteEntries.value : staticEntries.value,
+      facetCounts: shouldResolveCounts.value ? resolvedFacetCounts.value : [],
+      selectedValues: selectedValues.value,
+      deriveCounts: false,
+      missingCountFallback: shouldResolveCounts.value ? 0 : void 0
+    })
+  );
+  const sourceEntries = computed(() => flattenFilterOptionEntries(resolvedSourceTreeEntries.value));
+  const selectableSourceEntries = computed(
+    () => sourceEntries.value.filter(
+      (entry) => entry.value != null
+    )
+  );
+  const filteredTreeState = computed(() => {
+    if (optionUi.value?.presentation !== "tree") {
+      return {
+        entries: resolvedSourceTreeEntries.value,
+        expandedIds: []
+      };
+    }
+    if (!normalizedSearch.value.length) {
+      return {
+        entries: resolvedSourceTreeEntries.value,
+        expandedIds: optionUi.value.tree.expandedByDefault ? collectFilterOptionBranchIds(resolvedSourceTreeEntries.value) : []
+      };
+    }
+    if (resolvedTreeSearchMode.value === "local") {
+      return filterFilterOptionTree({
+        entries: resolvedSourceTreeEntries.value,
+        search: normalizedSearch.value
+      });
+    }
+    return {
+      entries: resolvedSourceTreeEntries.value,
+      expandedIds: collectFilterOptionBranchIds(resolvedSourceTreeEntries.value)
+    };
+  });
+  const filteredEntries = computed(() => {
+    if (optionUi.value?.presentation === "tree") {
+      return flattenFilterOptionEntries(filteredTreeState.value.entries).filter(
+        (entry) => entry.value != null
+      );
+    }
+    if (!normalizedSearch.value.length || hasRemoteOptionQuery.value)
+      return selectableSourceEntries.value;
+    return selectableSourceEntries.value.filter(
+      (entry) => entry.label.toLowerCase().includes(normalizedSearch.value.toLowerCase())
+    );
+  });
+  const isInitialLoading = computed(
+    () => optionQuery.isLoading.value && !optionQuery.isPlaceholderData.value
+  );
+  const isStaleLoading = computed(() => !isInitialLoading.value && optionQuery.isFetching.value);
+  const isCountLoading = computed(
+    () => isRemoteTable.value && shouldResolveCounts.value && perFilterFacetQuery.isFetching.value
+  );
+  return {
+    sourceEntries: selectableSourceEntries,
+    sourceTreeEntries: resolvedSourceTreeEntries,
+    filteredEntries,
+    filteredTreeEntries: computed(() => filteredTreeState.value.entries),
+    searchExpandedIds: computed(() => filteredTreeState.value.expandedIds),
+    facetCounts,
+    isLoading: isInitialLoading,
+    isCountLoading,
+    isStaleLoading,
+    isError: computed(() => optionQuery.isError.value || perFilterFacetQuery.isError.value),
+    error: computed(() => optionQuery.error.value ?? perFilterFacetQuery.error.value),
+    refresh: () => Promise.all([optionQuery.refetch(), perFilterFacetQuery.refetch()])
+  };
+}
+function getSelectedValues(options) {
+  const rule = options.filters.getFilterState({ key: options.key });
+  if (Array.isArray(rule?.value)) return rule.value;
+  if (rule?.value != null) return [rule.value];
+  return [];
+}
+function isPrimitiveFilterOptionValue(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function resolveFacetMode(facet) {
+  if (!facet) return void 0;
+  if (facet === "include-self") return "include-self";
+  if (typeof facet === "object") return facet.mode ?? "exclude-self";
+  return "exclude-self";
+}

package/dist/runtime/table/composables/use-table-filter-presentation.d.ts

@@ -0,0 +1,67 @@
+import type { TableFilterOperator, TableQueryStateFilterValue, TableResolvedFilterPresentation } from '../types/index.js';
+import type { useTableFilters } from './use-table-filters.js';
+export interface UseTableFilterPresentationParams {
+    filters: ReturnType<typeof useTableFilters>;
+}
+export declare function useTableFilterPresentation(options: UseTableFilterPresentationParams): {
+    resolved: import("vue").ComputedRef<TableResolvedFilterPresentation<string>[]>;
+    tagDefinitions: import("vue").ComputedRef<import("../types/index.js").TableUiFilterDefinition[]>;
+    activeDynamicDefinitions: import("vue").ComputedRef<import("../types/index.js").TableUiFilterDefinition[]>;
+    dormantDynamicDefinitions: import("vue").ComputedRef<import("../types/index.js").TableUiFilterDefinition[]>;
+    dynamicSessionDefinition: import("vue").ComputedRef<import("../types/index.js").TableUiFilterDefinition | undefined>;
+    panelDefinitions: import("vue").ComputedRef<import("../types/index.js").TableUiFilterDefinition[]>;
+    panelSections: import("vue").ComputedRef<{
+        label: string;
+        items: import("../types/index.js").TableUiFilterDefinition[];
+    }[]>;
+    hasPanelFilters: import("vue").ComputedRef<boolean>;
+    activePanelCount: import("vue").ComputedRef<number>;
+    panelOpen: import("vue").Ref<boolean, boolean>;
+    activateDynamicFilter: (input: {
+        key: string;
+    }) => void;
+    releaseDynamicSession: (input: {
+        key: string;
+    }) => void;
+    getDynamicActivationToken: (input: {
+        key: string;
+    }) => number;
+    openPanel: () => void;
+    closePanel: () => void;
+    resetPanelDraft: () => void;
+    clearPanelDraft: () => void;
+    applyPanelDraft: () => void;
+    getPanelDraftFilterState: (input: {
+        key: string;
+    }) => {
+        key: string;
+        operator?: TableFilterOperator | undefined;
+        value: string | number | boolean | Date | import("../types/index.js").TableFilterPrimitiveValue[] | {
+            from?: number | undefined;
+            to?: number | undefined;
+        } | {
+            from?: Date | undefined;
+            to?: Date | undefined;
+        };
+    } | undefined;
+    getPanelFilterOperator: (input: {
+        key: string;
+    }) => TableFilterOperator | undefined;
+    setPanelFilterOperator: (input: {
+        key: string;
+        operator: TableFilterOperator;
+    }) => void;
+    setPanelScalarFilterValue: (input: {
+        key: string;
+        value: TableQueryStateFilterValue | null | undefined;
+        operator?: TableFilterOperator;
+    }) => void;
+    setPanelOptionFilterValues: (input: {
+        key: string;
+        values: Array<string | number | boolean>;
+        operator?: TableFilterOperator;
+    }) => void;
+    clearPanelFilter: (input: {
+        key: string;
+    }) => void;
+};

package/dist/runtime/table/composables/use-table-filter-presentation.js

@@ -0,0 +1,208 @@
+import { computed, ref } from "vue";
+import { resolveFilterDisplayLocation, resolveFilterDisplayOrder } from "../utils/index.js";
+export function useTableFilterPresentation(options) {
+  const dynamicSessionKey = ref(null);
+  const dynamicActivationToken = ref({});
+  const panelOpen = ref(false);
+  const panelDraftFilters = ref([]);
+  const definitions = computed(
+    () => [...options.filters.definitions.value].sort((left, right) => {
+      const orderDiff = resolveFilterDisplayOrder(left) - resolveFilterDisplayOrder(right);
+      if (orderDiff !== 0) return orderDiff;
+      return left.key.localeCompare(right.key);
+    })
+  );
+  const resolved = computed(
+    () => definitions.value.map((definition) => {
+      const active = options.filters.getFilterState({ key: definition.key }) != null;
+      const location = resolveFilterDisplayLocation(definition.display?.location);
+      const visible = location !== "tag-dynamic" || active;
+      return {
+        key: definition.key,
+        location,
+        order: resolveFilterDisplayOrder(definition),
+        group: definition.display?.group,
+        panelSection: definition.display?.panel?.section,
+        active,
+        visible
+      };
+    })
+  );
+  const tagDefinitions = computed(
+    () => definitions.value.filter((definition) => {
+      const presentation = resolved.value.find((item) => item.key === definition.key);
+      return presentation?.location === "tag";
+    })
+  );
+  const activeDynamicDefinitions = computed(
+    () => definitions.value.filter((definition) => {
+      const presentation = resolved.value.find((item) => item.key === definition.key);
+      return presentation?.location === "tag-dynamic" && presentation.visible && dynamicSessionKey.value !== definition.key;
+    })
+  );
+  const dormantDynamicDefinitions = computed(
+    () => definitions.value.filter((definition) => {
+      const presentation = resolved.value.find((item) => item.key === definition.key);
+      return presentation?.location === "tag-dynamic" && !presentation.visible && dynamicSessionKey.value !== definition.key;
+    })
+  );
+  const dynamicSessionDefinition = computed(
+    () => dynamicSessionKey.value == null ? void 0 : definitions.value.find((definition) => definition.key === dynamicSessionKey.value)
+  );
+  const panelDefinitions = computed(
+    () => definitions.value.filter((definition) => {
+      const presentation = resolved.value.find((item) => item.key === definition.key);
+      return presentation?.location === "panel";
+    })
+  );
+  const hasPanelFilters = computed(() => panelDefinitions.value.length > 0);
+  const activePanelCount = computed(
+    () => panelDefinitions.value.filter(
+      (definition) => options.filters.getFilterState({ key: definition.key }) != null
+    ).length
+  );
+  const panelSections = computed(() => {
+    const sections = /* @__PURE__ */ new Map();
+    for (const definition of panelDefinitions.value) {
+      const section = definition.display?.panel?.section ?? definition.display?.group ?? "Filters";
+      const existing = sections.get(section);
+      if (existing) existing.push(definition);
+      else sections.set(section, [definition]);
+    }
+    return [...sections.entries()].map(([label, items]) => ({
+      label,
+      items
+    }));
+  });
+  function activateDynamicFilter(input) {
+    dynamicSessionKey.value = input.key;
+    dynamicActivationToken.value = {
+      ...dynamicActivationToken.value,
+      [input.key]: (dynamicActivationToken.value[input.key] ?? 0) + 1
+    };
+  }
+  function releaseDynamicSession(input) {
+    if (dynamicSessionKey.value !== input.key) return;
+    dynamicSessionKey.value = null;
+  }
+  function openPanel() {
+    panelDraftFilters.value = options.filters.activeUiFilters.value.filter((rule) => isPanelKey(rule.key)).map((rule) => ({ ...rule }));
+    panelOpen.value = true;
+  }
+  function closePanel() {
+    panelOpen.value = false;
+  }
+  function resetPanelDraft() {
+    panelDraftFilters.value = options.filters.activeUiFilters.value.filter((rule) => isPanelKey(rule.key)).map((rule) => ({ ...rule }));
+  }
+  function clearPanelDraft() {
+    panelDraftFilters.value = [];
+    const preservedRules = options.filters.activeUiFilters.value.filter(
+      (rule) => !isPanelKey(rule.key)
+    );
+    options.filters.replaceFilters({
+      rules: preservedRules
+    });
+  }
+  function applyPanelDraft() {
+    const nextPanelRules = panelDraftFilters.value.map((rule) => ({ ...rule }));
+    const preservedRules = options.filters.activeUiFilters.value.filter(
+      (rule) => !isPanelKey(rule.key)
+    );
+    options.filters.replaceFilters({
+      rules: [...preservedRules, ...nextPanelRules]
+    });
+    panelOpen.value = false;
+  }
+  function getPanelDraftFilterState(input) {
+    return panelDraftFilters.value.find((rule) => rule.key === input.key);
+  }
+  function getPanelFilterOperator(input) {
+    const rule = getPanelDraftFilterState(input);
+    if (rule?.operator) return rule.operator;
+    return options.filters.getFilterOperator({ key: input.key });
+  }
+  function setPanelFilterOperator(input) {
+    const current = getPanelDraftFilterState({ key: input.key });
+    if (current) {
+      upsertPanelRule({
+        key: input.key,
+        value: current.value,
+        operator: input.operator
+      });
+      return;
+    }
+    const value = options.filters.getDefaultFilterValueForOperator({
+      key: input.key,
+      operator: input.operator
+    });
+    upsertPanelRule({
+      key: input.key,
+      value,
+      operator: input.operator
+    });
+  }
+  function setPanelScalarFilterValue(input) {
+    if (input.value == null || input.value === "") {
+      clearPanelFilter({ key: input.key });
+      return;
+    }
+    upsertPanelRule({
+      key: input.key,
+      value: input.value,
+      operator: input.operator ?? getPanelFilterOperator({ key: input.key })
+    });
+  }
+  function setPanelOptionFilterValues(input) {
+    if (!input.values.length) {
+      clearPanelFilter({ key: input.key });
+      return;
+    }
+    upsertPanelRule({
+      key: input.key,
+      value: input.values,
+      operator: input.operator ?? getPanelFilterOperator({ key: input.key })
+    });
+  }
+  function clearPanelFilter(input) {
+    panelDraftFilters.value = panelDraftFilters.value.filter((rule) => rule.key !== input.key);
+  }
+  function getDynamicActivationToken(input) {
+    return dynamicActivationToken.value[input.key] ?? 0;
+  }
+  function isPanelKey(key) {
+    return panelDefinitions.value.some((definition) => definition.key === key);
+  }
+  function upsertPanelRule(rule) {
+    panelDraftFilters.value = [
+      ...panelDraftFilters.value.filter((item) => item.key !== rule.key),
+      rule
+    ];
+  }
+  return {
+    resolved,
+    tagDefinitions,
+    activeDynamicDefinitions,
+    dormantDynamicDefinitions,
+    dynamicSessionDefinition,
+    panelDefinitions,
+    panelSections,
+    hasPanelFilters,
+    activePanelCount,
+    panelOpen,
+    activateDynamicFilter,
+    releaseDynamicSession,
+    getDynamicActivationToken,
+    openPanel,
+    closePanel,
+    resetPanelDraft,
+    clearPanelDraft,
+    applyPanelDraft,
+    getPanelDraftFilterState,
+    getPanelFilterOperator,
+    setPanelFilterOperator,
+    setPanelScalarFilterValue,
+    setPanelOptionFilterValues,
+    clearPanelFilter
+  };
+}

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

@@ -0,0 +1,81 @@
+import { type ComputedRef } from 'vue';
+import type { TableFilterOptionEntry, TableFilterOperator, TableFilterPrimitiveValue, TableQueryStateFilterRule, TableQueryStateFilterValue, TableSchemaView, TableUiFilterDefinition } from '../types/index.js';
+import { getFilterLabelText } from '../utils/index.js';
+import type { UseTableDataReturn } from './use-table-data.js';
+import type { useTableState } from './use-table-state.js';
+export interface UseTableFiltersParams {
+    schema: ComputedRef<TableSchemaView>;
+    state: ReturnType<typeof useTableState>;
+    queryContent: Pick<UseTableDataReturn, 'rawData' | 'data'>;
+}
+export declare function useTableFilters(params: UseTableFiltersParams): {
+    searchQuery: import("vue").WritableComputedRef<string, string>;
+    searchPlaceholder: ComputedRef<string>;
+    hasActiveSearch: ComputedRef<boolean>;
+    definitions: ComputedRef<TableUiFilterDefinition[]>;
+    activeUiFilters: ComputedRef<TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue>[]>;
+    hasActiveUiFilters: ComputedRef<boolean>;
+    getDefinition: (input: {
+        key: string;
+    }) => TableUiFilterDefinition | undefined;
+    getFilterState: (input: {
+        key: string;
+    }) => TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue> | undefined;
+    getFilterOptionEntries: (input: {
+        key: string;
+        entries?: TableFilterOptionEntry[];
+        facetCounts?: Array<{
+            value: string | number | boolean;
+            count: number;
+        }>;
+    }) => (import("../types/index.js").TableResolvedFilterOptionEntry<TableFilterPrimitiveValue> & {
+        value: string | number | boolean;
+    })[];
+    getFilterPreview: (input: {
+        key: string;
+        entries?: Array<{
+            label: string;
+            value: string | number | boolean;
+        }>;
+    }) => import("../utils/index.js").FilterPreviewResult;
+    getFilterOperator: (input: {
+        key: string;
+    }) => TableFilterOperator | undefined;
+    getFilterOperatorOptions: (input: {
+        key: string;
+    }) => {
+        value: TableFilterOperator;
+        label: string;
+    }[];
+    getDefaultFilterValueForOperator: (input: {
+        key: string;
+        operator: TableFilterOperator;
+    }) => TableQueryStateFilterValue;
+    setFilterOperator: (input: {
+        key: string;
+        operator: TableFilterOperator;
+    }) => void;
+    setOptionFilterValues: (input: {
+        key: string;
+        values: TableFilterPrimitiveValue[];
+        operator?: TableFilterOperator;
+    }) => void;
+    toggleOptionFilterValue: (input: {
+        key: string;
+        value: TableFilterPrimitiveValue;
+        operator?: TableFilterOperator;
+    }) => void;
+    setScalarFilterValue: (input: {
+        key: string;
+        value: TableQueryStateFilterValue | null | undefined;
+        operator?: TableFilterOperator;
+    }) => void;
+    clearFilter: (input: {
+        key: string;
+    }) => void;
+    clearAllFilters: () => void;
+    replaceFilters: (input: {
+        rules: TableQueryStateFilterRule[];
+    }) => void;
+    getFilterLabelText: typeof getFilterLabelText;
+};