nuxt-ui-tools 0.1.0

package/dist/runtime/table/components/table/TableRenderer.vue

@@ -0,0 +1,148 @@
+<script setup>
+import UTable from "@nuxt/ui/components/Table.vue";
+import { computed, nextTick, ref, watch } from "vue";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListUiClass } from "../../utils";
+import { createDefaultColumnState, resolveTableRowId } from "../../utils";
+import TableEmptyState from "./TableEmptyState.vue";
+import TableLoadingState from "./TableLoadingState.vue";
+const internals = useTableInternals();
+const props = defineProps({
+  height: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const tableRef = ref(null);
+const tableRows = computed(
+  () => internals.queryContent.data.value.rows
+);
+const showInitialLoading = computed(
+  () => internals.queryContent.status.value.isBooting || internals.queryContent.status.value.isPending && tableRows.value.length === 0
+);
+const showRefreshing = computed(
+  () => tableRows.value.length > 0 && (internals.queryContent.status.value.isRefreshing || internals.queryContent.status.value.isRevalidating)
+);
+const tableEmpty = computed(() => !showInitialLoading.value && tableRows.value.length === 0);
+const bodyPlaceholderMinHeight = computed(
+  () => props.height ? `calc(${props.height} - 7rem)` : "24rem"
+);
+const bodyOverlayTop = "2.625rem";
+const defaultColumnState = createDefaultColumnState();
+function getVirtualRow(index) {
+  return tableRows.value[index] ?? {};
+}
+watch(tableEmpty, (isEmpty) => {
+  if (!isEmpty) return;
+  nextTick(() => {
+    const element = tableRef.value?.$el;
+    if (!(element instanceof HTMLElement)) return;
+    element.scrollTo({ top: 0, left: 0 });
+  });
+});
+</script>
+
+<template>
+  <div
+    :class="mergeDataListUiClass('relative overflow-hidden', void 0, ui?.root)"
+    :style="height ? { height } : void 0"
+  >
+    <UTable
+      v-if="!internals.queryContent.status.value.isBooting"
+      ref="tableRef"
+      :data="tableRows"
+      :columns="internals.tableColumns.tableColumns.value"
+      :column-order="internals.tableColumns.tableState.value.columnOrder"
+      :column-visibility="internals.tableColumns.tableState.value.columnVisibility"
+      :column-pinning="internals.tableColumns.tableState.value.columnPinning"
+      :column-sizing="internals.tableColumns.tableState.value.columnSizing"
+      :column-sizing-info="internals.tableColumns.tableState.value.columnSizingInfo"
+      :column-sizing-options="{ enableColumnResizing: true, columnResizeMode: 'onChange' }"
+      :row-selection="internals.selection.rowSelection.value"
+      @update:column-order="internals.tableColumns.tableState.value.columnOrder = $event ?? []"
+      @update:column-visibility="
+  internals.tableColumns.tableState.value.columnVisibility = $event ?? {}
+"
+      @update:column-pinning="
+  internals.tableColumns.tableState.value.columnPinning = $event ?? defaultColumnState.columnPinning
+"
+      @update:column-sizing="internals.tableColumns.tableState.value.columnSizing = $event ?? {}"
+      @update:column-sizing-info="
+  internals.tableColumns.tableState.value.columnSizingInfo = $event ?? defaultColumnState.columnSizingInfo
+"
+      @update:row-selection="internals.selection.setRowSelection({ selection: $event ?? {} })"
+      :get-row-id="
+  (row, index) => resolveTableRowId({ rowKey: internals.schema.value.rowKey, row, index })
+"
+      :sorting-options="{ manualSorting: true }"
+      sticky="header"
+      :loading="showRefreshing"
+      loading-color="primary"
+      loading-animation="carousel"
+      :class="height ? 'h-full' : void 0"
+      :ui="{
+  root: ui?.base,
+  caption: ui?.caption,
+  thead: mergeDataListUiClass(
+    'group/table-head after:inset-x-0 after:bottom-0 after:w-full after:z-[2] after:pointer-events-none',
+    void 0,
+    ui?.thead
+  ),
+  tbody: ui?.tbody,
+  tfoot: ui?.tfoot,
+  tr: mergeDataListUiClass('transition-colors', void 0, ui?.tr),
+  th: ui?.th,
+  td: ui?.td,
+  separator: ui?.separator,
+  empty: ui?.empty,
+  loading: ui?.loading
+}"
+      :virtualize="
+  height ? {
+    enabled: true,
+    getItemKey: (index) => resolveTableRowId({
+      rowKey: internals.schema.value.rowKey,
+      row: getVirtualRow(index),
+      index
+    })
+  } : false
+"
+    >
+      <template #empty>
+        <slot name="empty">
+          <div />
+        </slot>
+      </template>
+    </UTable>
+
+    <div
+      v-if="showInitialLoading"
+      :class="
+  mergeDataListUiClass(
+    'pointer-events-none absolute inset-x-0 bottom-0 z-10',
+    void 0,
+    ui?.loadingOverlay
+  )
+"
+      :style="{ top: bodyOverlayTop }"
+    >
+      <TableLoadingState :min-height="bodyPlaceholderMinHeight" />
+    </div>
+
+    <div
+      v-if="tableEmpty"
+      :class="
+  mergeDataListUiClass(
+    'pointer-events-none absolute inset-x-0 bottom-0 z-10 flex items-center justify-center',
+    void 0,
+    ui?.emptyOverlay
+  )
+"
+      :style="{ top: bodyOverlayTop }"
+    >
+      <TableEmptyState :min-height="bodyPlaceholderMinHeight" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep([data-slot=root]){scrollbar-color:color-mix(in oklab,var(--ui-border) 82%,transparent) transparent;scrollbar-width:thin}:deep([data-slot=root]:hover){scrollbar-color:color-mix(in oklab,var(--ui-border-accented) 92%,transparent) transparent}:deep([data-slot=root]::-webkit-scrollbar){height:10px;width:10px}:deep([data-slot=root]::-webkit-scrollbar-track){background:transparent}:deep([data-slot=root]::-webkit-scrollbar-thumb){background:color-mix(in oklab,var(--ui-border) 86%,transparent);background-clip:padding-box;border:2px solid transparent;border-radius:999px}:deep([data-slot=root]:hover::-webkit-scrollbar-thumb){background:color-mix(in oklab,var(--ui-border-accented) 80%,transparent);background-clip:padding-box}:deep([data-slot=root]::-webkit-scrollbar-thumb:hover){background:color-mix(in oklab,var(--ui-border-accented) 95%,transparent);background-clip:padding-box}:deep([data-slot=root]::-webkit-scrollbar-corner){background:transparent}:deep(th[data-pinned]){backdrop-filter:blur(6px) saturate(120%);background-color:color-mix(in oklab,var(--ui-bg) 94%,transparent)!important;background-image:none!important}:deep(td[data-pinned]){backdrop-filter:none;background-color:color-mix(in oklab,var(--ui-bg) 96%,transparent)!important;background-image:none!important}:deep(tbody tr[data-selected=true] td){background-color:color-mix(in oklab,var(--ui-bg-elevated) 88%,transparent)!important;color:var(--ui-text)!important}:deep(tbody tr:hover td){background-color:color-mix(in oklab,var(--ui-bg-elevated) 18%,transparent)!important}:deep(tr[data-selected=true] td[data-pinned]){backdrop-filter:none;background-color:color-mix(in oklab,var(--ui-bg-elevated) 96%,transparent)!important;color:var(--ui-text)!important}:deep(tbody tr:hover td[data-pinned]){backdrop-filter:none;background-color:color-mix(in oklab,var(--ui-bg-elevated) 68%,transparent)!important}:deep(td[data-pinned=left]),:deep(th[data-pinned=left]){box-shadow:12px 0 18px -18px color-mix(in oklab,var(--ui-border-accented) 80%,transparent)}:deep(td[data-pinned=right]),:deep(th[data-pinned=right]){box-shadow:-12px 0 18px -18px color-mix(in oklab,var(--ui-border-accented) 80%,transparent)}:deep(thead th){border-bottom-color:var(--ui-border)!important}:deep(thead tr[data-slot=separator]){background-color:var(--ui-border)!important;border-color:var(--ui-border)!important}:deep(tbody td){border-bottom-color:color-mix(in oklab,var(--ui-border) 34%,transparent)!important}
+</style>

package/dist/runtime/table/components/table/TableRenderer.vue.d.ts

@@ -0,0 +1,18 @@
+import type { DataListTableUi } from '../../types/index.js';
+type __VLS_Props = {
+    height?: string;
+    ui?: DataListTableUi;
+};
+declare var __VLS_17: {};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/table/components/utils/SearchQueryInput.d.vue.ts

@@ -0,0 +1,18 @@
+import type { DataListSearchUi } from '../../types/index.js';
+type __VLS_Props = {
+    placeholder: string;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    ui?: DataListSearchUi;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/utils/SearchQueryInput.vue

@@ -0,0 +1,41 @@
+<script setup>
+import UInput from "@nuxt/ui/components/Input.vue";
+import { ref, watch } from "vue";
+const props = defineProps({
+  placeholder: { type: String, required: true },
+  loading: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const model = defineModel({ type: String, ...{ required: true } });
+const localValue = ref(model.value);
+watch(
+  model,
+  (value) => {
+    if (value === localValue.value) return;
+    localValue.value = value;
+  },
+  { flush: "sync" }
+);
+function commitValue() {
+  if (localValue.value === model.value) return;
+  model.value = localValue.value;
+}
+</script>
+
+<template>
+  <UInput
+    :model-value="localValue"
+    :size="props.size ?? 'md'"
+    color="primary"
+    variant="outline"
+    icon="i-lucide-search"
+    :loading="loading"
+    :placeholder="placeholder"
+    :ui="ui"
+    class="max-w-full shrink-0"
+    @update:model-value="localValue = String($event ?? '')"
+    @blur="commitValue"
+    @keydown.enter.prevent="commitValue"
+  />
+</template>

package/dist/runtime/table/components/utils/SearchQueryInput.vue.d.ts

@@ -0,0 +1,18 @@
+import type { DataListSearchUi } from '../../types/index.js';
+type __VLS_Props = {
+    placeholder: string;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    ui?: DataListSearchUi;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/composables/index.d.ts

@@ -0,0 +1 @@
+export * from './use-table.js';

package/dist/runtime/table/composables/index.js

@@ -0,0 +1 @@
+export * from "./use-table.js";

package/dist/runtime/table/composables/use-data-list-ui.d.ts

@@ -0,0 +1,12 @@
+import { type ComputedRef } from 'vue';
+import type { DataListControlSize, DataListDensity, DataListUiConfig } from '../types/index.js';
+export declare function provideDataListUi(ui: ComputedRef<DataListUiConfig>): {
+    ui: ComputedRef<DataListUiConfig>;
+    density: ComputedRef<DataListDensity>;
+    controlSize: ComputedRef<DataListControlSize>;
+};
+export declare function useDataListUi(): {
+    ui: ComputedRef<DataListUiConfig>;
+    density: ComputedRef<DataListDensity>;
+    controlSize: ComputedRef<DataListControlSize>;
+};

package/dist/runtime/table/composables/use-data-list-ui.js

@@ -0,0 +1,24 @@
+import { createInjectionState } from "@vueuse/core";
+import { computed } from "vue";
+const densitySizes = {
+  compact: "sm",
+  default: "md",
+  comfortable: "lg"
+};
+const [provideDataListUiState, useInjectedDataListUiState] = createInjectionState(
+  (ui) => {
+    const density = computed(() => ui.value.density ?? "default");
+    const controlSize = computed(
+      () => ui.value.control?.size ?? densitySizes[density.value]
+    );
+    return { ui, density, controlSize };
+  }
+);
+export function provideDataListUi(ui) {
+  return provideDataListUiState(ui);
+}
+export function useDataListUi() {
+  const state = useInjectedDataListUiState();
+  if (!state) throw new Error("useDataListUi must be called inside a <DataListRoot> component");
+  return state;
+}

package/dist/runtime/table/composables/use-data-list-viewport.d.ts

@@ -0,0 +1,7 @@
+import type { Ref } from 'vue';
+export declare function provideDataListViewport(element: Ref<HTMLElement | null>): {
+    element: Ref<HTMLElement | null, HTMLElement | null>;
+};
+export declare function useDataListViewport(): {
+    element: Ref<HTMLElement | null, HTMLElement | null>;
+};

package/dist/runtime/table/composables/use-data-list-viewport.js

@@ -0,0 +1,12 @@
+import { createInjectionState } from "@vueuse/core";
+const [provideDataListViewportState, useInjectedDataListViewportState] = createInjectionState(
+  (element) => ({ element })
+);
+export function provideDataListViewport(element) {
+  return provideDataListViewportState(element);
+}
+export function useDataListViewport() {
+  const state = useInjectedDataListViewportState();
+  if (!state) throw new Error("useDataListViewport must be called inside <DataListContent>");
+  return state;
+}

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

@@ -0,0 +1,19 @@
+import { type Ref } from 'vue';
+export interface UseFilterTagSessionParams {
+    isOpen?: Ref<boolean>;
+    activationToken?: Ref<number | undefined>;
+    session?: boolean;
+    dynamic?: boolean;
+    hasCommittedState: () => boolean;
+    onActivated: () => void;
+    onOpen: () => void;
+    onClose: () => void;
+    onSessionClosed: () => void;
+    onDismiss: () => void;
+}
+export declare function useFilterTagSession(options: UseFilterTagSessionParams): {
+    isOpen: Ref<boolean, boolean>;
+    openWithLock: () => void;
+    handleOpenChange: (open: boolean) => void;
+    close: () => void;
+};

package/dist/runtime/table/composables/use-filter-tag-session.js

@@ -0,0 +1,59 @@
+import { ref, watch } from "vue";
+export function useFilterTagSession(options) {
+  const isOpen = options.isOpen ?? ref(false);
+  const lastActivationToken = ref(null);
+  let dismissLocked = false;
+  function runCloseEffects() {
+    options.onClose();
+    if (options.session) {
+      options.onSessionClosed();
+      return;
+    }
+    if (options.dynamic && !options.hasCommittedState()) options.onDismiss();
+  }
+  function openWithLock() {
+    dismissLocked = true;
+    setTimeout(() => {
+      isOpen.value = true;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          dismissLocked = false;
+        });
+      });
+    });
+  }
+  function handleOpenChange(open) {
+    if (!open && dismissLocked) return;
+    if (!open && !isOpen.value) return;
+    isOpen.value = open;
+    if (open) {
+      options.onOpen();
+      return;
+    }
+    runCloseEffects();
+  }
+  function close() {
+    if (!isOpen.value) return;
+    isOpen.value = false;
+    runCloseEffects();
+  }
+  if (options.activationToken) {
+    queueMicrotask(() => {
+      watch(
+        options.activationToken,
+        (value) => {
+          if (value == null || value === lastActivationToken.value) return;
+          lastActivationToken.value = value;
+          options.onActivated();
+        },
+        { immediate: true }
+      );
+    });
+  }
+  return {
+    isOpen,
+    openWithLock,
+    handleOpenChange,
+    close
+  };
+}

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

@@ -0,0 +1,2 @@
+declare const useProvideGridRow: (rowIndex: number) => number, useGridRow: () => number | undefined;
+export { useGridRow, useProvideGridRow };

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

@@ -0,0 +1,3 @@
+import { createInjectionState } from "@vueuse/core";
+const [useProvideGridRow, useGridRow] = createInjectionState((rowIndex) => rowIndex);
+export { useGridRow, useProvideGridRow };

package/dist/runtime/table/composables/use-option-filter-editor-state.d.ts

@@ -0,0 +1,95 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { TableOptionFilterDefinition, TableOptionFilterOperator, TableResolvedFilterOptionEntry, TableSchemaView } from '../types/index.js';
+import type { UseTableDataReturn } from './use-table-data.js';
+import type { useTableFilters } from './use-table-filters.js';
+type PrimitiveFilterValue = string | number | boolean;
+export interface UseOptionFilterEditorStateParams {
+    definition: TableOptionFilterDefinition;
+    operator: Ref<TableOptionFilterOperator>;
+    selectedValues: Ref<PrimitiveFilterValue[]>;
+    searchQuery: Ref<string>;
+    active?: Ref<boolean>;
+    ready?: Ref<boolean>;
+    filters: ReturnType<typeof useTableFilters>;
+    queryContent: Pick<UseTableDataReturn, 'facets' | 'facetsBaseContext'>;
+    schema: ComputedRef<TableSchemaView>;
+    setSelectedValues: (values: PrimitiveFilterValue[]) => void;
+}
+export declare function useOptionFilterEditorState(options: UseOptionFilterEditorStateParams): {
+    optionSource: {
+        sourceEntries: ComputedRef<(TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue> & {
+            value: string | number | boolean;
+        })[]>;
+        sourceTreeEntries: ComputedRef<TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue>[]>;
+        filteredEntries: ComputedRef<(TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue> & {
+            value: string | number | boolean;
+        })[]>;
+        filteredTreeEntries: ComputedRef<TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue>[]>;
+        searchExpandedIds: ComputedRef<string[]>;
+        facetCounts: ComputedRef<import("../types/index.js").TableFacetOptionResult<unknown>[]>;
+        isLoading: ComputedRef<boolean>;
+        isCountLoading: ComputedRef<boolean>;
+        isStaleLoading: ComputedRef<boolean>;
+        isError: ComputedRef<boolean>;
+        error: ComputedRef<Error | null>;
+        refresh: () => Promise<[import("@tanstack/vue-query").QueryObserverResult<import("../types/index.js").TableFilterOptionEntry[] | import("../types/index.js").TableFilterOptionQueryResult, Error>, import("@tanstack/vue-query").QueryObserverResult<import("../types/index.js").TableFacetExecutionResult<string, unknown>, Error>]>;
+    };
+    filterUi: ComputedRef<import("../types/index.js").TableOptionFilterUiResolved>;
+    displayEntries: ComputedRef<{
+        icon: string | undefined;
+        selected: boolean;
+        id: string;
+        label: string;
+        value: string | number | boolean;
+        count?: number;
+        children: TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue>[];
+    }[]>;
+    visibleTreeEntries: ComputedRef<{
+        expanded: boolean;
+        indeterminate: boolean;
+        id: string;
+        label: string;
+        value?: import("../types/index.js").TableFilterPrimitiveValue | undefined;
+        icon?: string;
+        count?: number;
+        selected: boolean;
+        depth: number;
+        expandable: boolean;
+        selectable: boolean;
+        branchSelectable: boolean;
+    }[]>;
+    flatRadioItems: ComputedRef<{
+        label: string;
+        value: string;
+        count: number | undefined;
+        icon: string | undefined;
+        truncate: boolean;
+    }[]>;
+    flatRadioValue: import("vue").WritableComputedRef<string | undefined, string | undefined>;
+    treeRadioItems: ComputedRef<{
+        id: string;
+        label: string;
+        value: string;
+        count: number | undefined;
+        icon: string | undefined;
+        truncate: boolean;
+        depth: number;
+        expandable: boolean;
+        expanded: boolean;
+        selectable: boolean;
+        disabled: boolean;
+    }[]>;
+    treeRadioValue: import("vue").WritableComputedRef<string | undefined, string | undefined>;
+    triggerSummary: ComputedRef<string>;
+    toggleValue: (value: PrimitiveFilterValue) => void;
+    toggleTreeEntry: (entry: {
+        value?: PrimitiveFilterValue;
+        selectable: boolean;
+        branchSelectable?: boolean;
+        expandable: boolean;
+        id: string;
+    }) => void;
+    toggleExpanded: (id: string) => void;
+    resetExpandedIds: () => void;
+};
+export {};