nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/table/components/table/table-renderer.vue.d.ts

@@ -0,0 +1,44 @@
+import type { DataListControlSize, DataListTableUi } from '../../types/index.js';
+type __VLS_Props = {
+    gutter?: number;
+    height?: string;
+    size?: DataListControlSize;
+    fill?: boolean;
+    ui?: DataListTableUi;
+};
+type ColumnSlot = {
+    kind: 'column';
+    columnId: string;
+    key: string;
+} | {
+    kind: 'spacer';
+    colSpan: number;
+    key: string;
+};
+declare var __VLS_34: {
+    columnSlots: ColumnSlot[];
+    leafColumns: import("@tanstack/table-core").Column<{
+        columnPinningFeature: import("@tanstack/table-core").TableFeature;
+        columnResizingFeature: import("@tanstack/table-core").TableFeature;
+        columnSizingFeature: import("@tanstack/table-core").TableFeature;
+        columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
+        coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+        columnMeta: import("../../utils/index.js").DataListColumnMeta;
+    }, object, unknown>[];
+}, __VLS_36: {};
+type __VLS_Slots = {} & {
+    footer?: (props: typeof __VLS_34) => any;
+} & {
+    empty?: (props: typeof __VLS_36) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    resetColumnSizing: () => void;
+}, {}, {}, {}, 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/table/table-row-actions-control.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/table-row-actions-control.vue

@@ -0,0 +1,42 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed } from "vue";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { mergeDataListProps } from "../../utils";
+import RowActions from "../actions/row-actions.vue";
+const dataListUi = useDataListUi();
+const buttonProps = computed(
+  () => mergeDataListProps(
+    {
+      color: "neutral",
+      icon: "i-lucide-ellipsis",
+      size: dataListUi.controlSize.value,
+      variant: "ghost"
+    },
+    dataListUi.ui.value.table?.props?.rowActions
+  )
+);
+</script>
+
+<template>
+  <div class="flex justify-end">
+    <RowActions
+      :size="dataListUi.controlSize.value"
+      :content="{ align: 'end', side: 'bottom', sideOffset: 8 }"
+      :modal="false"
+      portal
+      :ui="{
+  content: 'z-[80] min-w-48',
+  item: 'nut-dl-menu__item gap-2 text-[13px]',
+  itemLeadingIcon: 'size-3.5 text-muted'
+}"
+    >
+      <UButton
+        v-bind="buttonProps"
+        square
+        aria-label="Row actions"
+        class="nut-dl-rowbtn text-muted hover:text-default focus-visible:text-default"
+      />
+    </RowActions>
+  </div>
+</template>

package/dist/runtime/table/components/table/table-row-actions-control.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/table-selection-control.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    modelValue: boolean | 'indeterminate';
+    ariaLabel: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/table-selection-control.vue

@@ -0,0 +1,34 @@
+<script setup>
+import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
+import { computed } from "vue";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { mergeDataListProps } from "../../utils";
+const props = defineProps({
+  modelValue: { type: [Boolean, String], required: true },
+  ariaLabel: { type: String, required: true }
+});
+const emit = defineEmits(["toggle"]);
+const dataListUi = useDataListUi();
+const checkboxProps = computed(
+  () => mergeDataListProps(
+    { color: "primary", size: dataListUi.controlSize.value },
+    dataListUi.ui.value.table?.props?.checkbox
+  )
+);
+function toggle(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  emit("toggle", event);
+}
+</script>
+
+<template>
+  <span class="inline-flex items-center" @click="toggle">
+    <UCheckbox
+      v-bind="checkboxProps"
+      :model-value="props.modelValue"
+      :aria-label="props.ariaLabel"
+      class="nut-dl-check"
+    />
+  </span>
+</template>

package/dist/runtime/table/components/table/table-selection-control.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    modelValue: boolean | 'indeterminate';
+    ariaLabel: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/utils/{SearchQueryInput.d.vue.ts → search-query-input.d.vue.ts}

@@ -1,9 +1,10 @@
-import type { DataListSearchUi } from '../../types/index.js';
+import type { DataListControlSize, DataListInputProps, DataListSearchUi } from '../../types/index.js';
 type __VLS_Props = {
     placeholder: string;
     loading?: boolean;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    size: DataListControlSize;
     ui?: DataListSearchUi;
+    inputProps?: DataListInputProps;
 };
 type __VLS_ModelProps = {
     modelValue: string;

package/dist/runtime/table/components/utils/{SearchQueryInput.vue → search-query-input.vue}

@@ -1,41 +1,54 @@
 <script setup>
 import UInput from "@nuxt/ui/components/Input.vue";
-import { ref, watch } from "vue";
+import { computed, 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 }
+  size: { type: String, required: true },
+  ui: { type: Object, required: false },
+  inputProps: { type: Object, required: false }
 });
 const model = defineModel({ type: String, ...{ required: true } });
 const localValue = ref(model.value);
 watch(
   model,
   (value) => {
-    if (value === localValue.value) return;
+    if (value === localValue.value) {
+      return;
+    }
     localValue.value = value;
   },
   { flush: "sync" }
 );
+const inputAttrs = computed(() => ({
+  color: "neutral",
+  icon: "i-lucide-search",
+  variant: "outline",
+  ...props.inputProps
+}));
 function commitValue() {
-  if (localValue.value === model.value) return;
+  if (localValue.value === model.value) {
+    return;
+  }
   model.value = localValue.value;
 }
 </script>
 
 <template>
   <UInput
+    v-bind="inputAttrs"
     :model-value="localValue"
-    :size="props.size ?? 'md'"
-    color="primary"
-    variant="outline"
-    icon="i-lucide-search"
+    :size="props.size"
     :loading="loading"
     :placeholder="placeholder"
     :ui="ui"
-    class="max-w-full shrink-0"
+    class="nut-dl-search max-w-full shrink-0"
     @update:model-value="localValue = String($event ?? '')"
     @blur="commitValue"
     @keydown.enter.prevent="commitValue"
   />
 </template>
+
+<style>
+.nut-dl-search input{text-overflow:ellipsis}
+</style>

package/dist/runtime/table/components/utils/{SearchQueryInput.vue.d.ts → search-query-input.vue.d.ts}

@@ -1,9 +1,10 @@
-import type { DataListSearchUi } from '../../types/index.js';
+import type { DataListControlSize, DataListInputProps, DataListSearchUi } from '../../types/index.js';
 type __VLS_Props = {
     placeholder: string;
     loading?: boolean;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    size: DataListControlSize;
     ui?: DataListSearchUi;
+    inputProps?: DataListInputProps;
 };
 type __VLS_ModelProps = {
     modelValue: string;

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

@@ -0,0 +1,19 @@
+interface ViewportLike {
+    breakpoint: {
+        value: string;
+    };
+    queries: {
+        value?: Record<string, {
+            mediaQuery: string;
+        }>;
+    } | Record<string, {
+        mediaQuery: string;
+    }>;
+    isLessThan: (breakpoint: string) => boolean;
+}
+export declare function syncViewportBreakpoint(viewport?: ViewportLike): void;
+export declare function useDataListBreakpoint(): {
+    isMobile: import("vue").ComputedRef<boolean>;
+    isTablet: import("vue").ComputedRef<boolean>;
+};
+export {};

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

@@ -0,0 +1,32 @@
+import { useNuxtApp } from "nuxt/app";
+import { computed } from "vue";
+let synced = false;
+export function syncViewportBreakpoint(viewport) {
+  if (synced || !("window" in globalThis)) {
+    return;
+  }
+  viewport ??= useNuxtApp().$viewport;
+  if (!viewport) {
+    return;
+  }
+  synced = true;
+  const queries = "value" in viewport.queries && viewport.queries.value ? viewport.queries.value : (
+    // SAFETY: nuxt-viewport exposes plain query maps when it is not wrapped in a ref.
+    viewport.queries
+  );
+  for (const [key, query] of Object.entries(queries ?? {})) {
+    if (window.matchMedia(query.mediaQuery).matches) {
+      if (viewport.breakpoint.value !== key) {
+        viewport.breakpoint.value = key;
+      }
+      return;
+    }
+  }
+}
+export function useDataListBreakpoint() {
+  const $viewport = useNuxtApp().$viewport;
+  syncViewportBreakpoint($viewport);
+  const isMobile = computed(() => Boolean($viewport?.isLessThan("md")));
+  const isTablet = computed(() => Boolean($viewport?.isLessThan("lg")) && !isMobile.value);
+  return { isMobile, isTablet };
+}

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

@@ -1,12 +1,12 @@
-import { type ComputedRef } from 'vue';
+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>;
+    density: ComputedRef<DataListDensity>;
+    ui: ComputedRef<DataListUiConfig>;
 };
 export declare function useDataListUi(): {
-    ui: ComputedRef<DataListUiConfig>;
-    density: ComputedRef<DataListDensity>;
     controlSize: ComputedRef<DataListControlSize>;
+    density: ComputedRef<DataListDensity>;
+    ui: ComputedRef<DataListUiConfig>;
 };

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

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

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

@@ -7,6 +7,8 @@ export function provideDataListViewport(element) {
 }
 export function useDataListViewport() {
   const state = useInjectedDataListViewportState();
-  if (!state) throw new Error("useDataListViewport must be called inside <DataListContent>");
+  if (!state) {
+    throw new Error("useDataListViewport must be called inside <DataListContent>");
+  }
   return state;
 }

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

@@ -1,4 +1,4 @@
-import { type Ref } from 'vue';
+import type { Ref } from 'vue';
 export interface UseFilterTagSessionParams {
     isOpen?: Ref<boolean>;
     session?: boolean;
@@ -11,8 +11,8 @@ export interface UseFilterTagSessionParams {
     onDismiss: () => void;
 }
 export declare function useFilterTagSession(options: UseFilterTagSessionParams): {
+    close: () => void;
+    handleOpenChange: (nextOpen: boolean) => void;
     isOpen: Ref<boolean, boolean>;
     open: () => void;
-    handleOpenChange: (nextOpen: boolean) => void;
-    close: () => void;
 };

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

@@ -1,22 +1,30 @@
 import { ref } from "vue";
 export function useFilterTagSession(options) {
   const isOpen = options.isOpen ?? ref(false);
-  if (options.embedded) isOpen.value = true;
+  if (options.embedded) {
+    isOpen.value = true;
+  }
   function runCloseEffects() {
     options.onClose();
     if (options.session) {
       options.onSessionClosed();
       return;
     }
-    if (options.dynamic && !options.hasCommittedState()) options.onDismiss();
+    if (options.dynamic && !options.hasCommittedState()) {
+      options.onDismiss();
+    }
   }
   function open() {
-    if (isOpen.value) return;
+    if (isOpen.value) {
+      return;
+    }
     isOpen.value = true;
     options.onOpen();
   }
   function handleOpenChange(nextOpen) {
-    if (!nextOpen && !isOpen.value) return;
+    if (!nextOpen && !isOpen.value) {
+      return;
+    }
     isOpen.value = nextOpen;
     if (nextOpen) {
       options.onOpen();
@@ -25,15 +33,19 @@ export function useFilterTagSession(options) {
     runCloseEffects();
   }
   function close() {
-    if (!isOpen.value) return;
+    if (!isOpen.value) {
+      return;
+    }
     isOpen.value = false;
     runCloseEffects();
   }
-  if (options.embedded) queueMicrotask(options.onOpen);
+  if (options.embedded) {
+    queueMicrotask(options.onOpen);
+  }
   return {
-    isOpen,
-    open,
+    close,
     handleOpenChange,
-    close
+    isOpen,
+    open
   };
 }

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

@@ -1,5 +1,5 @@
-import { type ComputedRef, type Ref } from 'vue';
-import type { TableOptionFilterDefinition, TableOptionFilterOperator, TableResolvedFilterOptionEntry, TableSchemaView } from '../types/index.js';
+import type { ComputedRef, Ref } from 'vue';
+import type { TableFilterOptionEntry, 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;
@@ -16,34 +16,70 @@ export interface UseOptionFilterEditorStateParams {
     setSelectedValues: (values: PrimitiveFilterValue[]) => void;
 }
 export declare function useOptionFilterEditorState(options: UseOptionFilterEditorStateParams): {
+    displayEntries: ComputedRef<{
+        icon: string | undefined;
+        selected: boolean;
+        id: string;
+        label: string;
+        value: string | number | boolean;
+        color?: string;
+        count?: number;
+        children: TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue>[];
+    }[]>;
+    filterUi: ComputedRef<import("../types/index.js").TableOptionFilterUiResolved>;
+    flatRadioItems: ComputedRef<{
+        color: string | undefined;
+        count: number | undefined;
+        icon: string | undefined;
+        label: string;
+        truncate: boolean;
+        value: string;
+    }[]>;
+    flatRadioValue: import("vue").WritableComputedRef<string | undefined, string | undefined>;
     optionSource: {
-        sourceEntries: ComputedRef<(TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue> & {
-            value: string | number | boolean;
-        })[]>;
-        sourceTreeEntries: ComputedRef<TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue>[]>;
+        error: ComputedRef<Error | null>;
+        facetCounts: ComputedRef<import("../types/index.js").TableFacetOptionResult<unknown>[]>;
         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>]>;
+        isLoading: ComputedRef<boolean>;
+        isStaleLoading: ComputedRef<boolean>;
+        refresh: () => Promise<[import("@tanstack/vue-query").QueryObserverResult<TableFilterOptionEntry[] | import("../types/index.js").TableFilterOptionQueryResult, Error>, import("@tanstack/vue-query").QueryObserverResult<import("../types/index.js").TableFacetExecutionResult<string, unknown>, Error>]>;
+        searchExpandedIds: ComputedRef<string[]>;
+        sourceEntries: ComputedRef<(TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue> & {
+            value: string | number | boolean;
+        })[]>;
+        sourceTreeEntries: ComputedRef<TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue>[]>;
     };
-    filterUi: ComputedRef<import("../types/index.js").TableOptionFilterUiResolved>;
-    displayEntries: ComputedRef<{
+    resetExpandedIds: () => void;
+    toggleExpanded: (id: string) => void;
+    toggleTreeEntry: (entry: {
+        value?: PrimitiveFilterValue;
+        selectable: boolean;
+        branchSelectable?: boolean;
+        expandable: boolean;
+        id: string;
+    }) => void;
+    toggleValue: (value: PrimitiveFilterValue) => void;
+    treeRadioItems: ComputedRef<{
+        color: string | undefined;
+        count: number | undefined;
+        depth: number;
+        disabled: boolean;
+        expandable: boolean;
+        expanded: boolean;
         icon: string | undefined;
-        selected: boolean;
         id: string;
         label: string;
-        value: string | number | boolean;
-        count?: number;
-        children: TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue>[];
+        selectable: boolean;
+        truncate: boolean;
+        value: string;
     }[]>;
+    treeRadioValue: import("vue").WritableComputedRef<string | undefined, string | undefined>;
+    triggerSummary: ComputedRef<string>;
     visibleTreeEntries: ComputedRef<{
         expanded: boolean;
         indeterminate: boolean;
@@ -51,6 +87,7 @@ export declare function useOptionFilterEditorState(options: UseOptionFilterEdito
         label: string;
         value?: import("../types/index.js").TableFilterPrimitiveValue | undefined;
         icon?: string;
+        color?: string;
         count?: number;
         selected: boolean;
         depth: number;
@@ -58,38 +95,5 @@ export declare function useOptionFilterEditorState(options: UseOptionFilterEdito
         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 {};