@directus/composables 11.2.1 → 11.2.3

package/dist/index.d.ts

@@ -1,18 +1,18 @@
-import { AppCollection, Field, Item, Query, RefRecord } from '@directus/types';
-import { ComputedRef, Ref, WritableComputedRef, Component } from 'vue';
-import { LayoutConfig, AppExtensionConfigs } from '@directus/extensions';
-import { DirectusClient, RestClient } from '@directus/sdk';
-import { AxiosInstance } from 'axios';
+import { Component, ComputedRef, Ref, WritableComputedRef } from "vue";
+import { AxiosInstance } from "axios";
+import { AppCollection, AppExtensionConfigs, Field, Item, LayoutConfig, Query, RefRecord } from "@directus/types";
+import { DirectusClient, RestClient } from "@directus/sdk";
 
+//#region src/use-collection.d.ts
 type UsableCollection = {
-    info: ComputedRef<AppCollection | null>;
-    fields: ComputedRef<Field[]>;
-    defaults: ComputedRef<Record<string, any>>;
-    primaryKeyField: ComputedRef<Field | null>;
-    userCreatedField: ComputedRef<Field | null>;
-    sortField: ComputedRef<string | null>;
-    isSingleton: ComputedRef<boolean>;
-    accountabilityScope: ComputedRef<'all' | 'activity' | null>;
+  info: ComputedRef<AppCollection | null>;
+  fields: ComputedRef<Field[]>;
+  defaults: ComputedRef<Record<string, any>>;
+  primaryKeyField: ComputedRef<Field | null>;
+  userCreatedField: ComputedRef<Field | null>;
+  sortField: ComputedRef<string | null>;
+  isSingleton: ComputedRef<boolean>;
+  accountabilityScope: ComputedRef<'all' | 'activity' | null>;
 };
 /**
  * A Vue composable that provides reactive access to collection metadata, fields, and computed properties.
@@ -50,10 +50,11 @@ type UsableCollection = {
  * ```
  */
 declare function useCollection(collectionKey: string | Ref<string | null>): UsableCollection;
-
+//#endregion
+//#region src/use-custom-selection.d.ts
 type UsableCustomSelection = {
-    otherValue: Ref<string | null>;
-    usesOtherValue: ComputedRef<boolean>;
+  otherValue: Ref<string | null>;
+  usesOtherValue: ComputedRef<boolean>;
 };
 /**
  * A Vue composable for managing custom selection values that aren't present in a predefined list of items.
@@ -92,14 +93,14 @@ type UsableCustomSelection = {
  */
 declare function useCustomSelection(currentValue: Ref<string | null>, items: Ref<any[]>, emit: (event: string | null) => void): UsableCustomSelection;
 type OtherValue = {
-    key: string;
-    value: string;
-    focus?: boolean;
+  key: string;
+  value: string;
+  focus?: boolean;
 };
 type UsableCustomSelectionMultiple = {
-    otherValues: Ref<OtherValue[]>;
-    addOtherValue: (value?: string, focus?: boolean) => void;
-    setOtherValue: (key: string, newValue: string | null) => void;
+  otherValues: Ref<OtherValue[]>;
+  addOtherValue: (value?: string, focus?: boolean) => void;
+  setOtherValue: (key: string, newValue: string | null) => void;
 };
 /**
  * A Vue composable for managing multiple custom selection values that aren't present in a predefined list of items.
@@ -142,11 +143,12 @@ type UsableCustomSelectionMultiple = {
  * ```
  */
 declare function useCustomSelectionMultiple(currentValues: Ref<string[] | null>, items: Ref<any[]>, emit: (event: string[] | null) => void): UsableCustomSelectionMultiple;
-
+//#endregion
+//#region src/use-element-size.d.ts
 declare global {
-    interface Window {
-        ResizeObserver: any;
-    }
+  interface Window {
+    ResizeObserver: any;
+  }
 }
 /**
  * A Vue composable that reactively tracks the size of a DOM element using ResizeObserver.
@@ -179,10 +181,11 @@ declare global {
  * - Handles cases where the target element might be undefined
  */
 declare function useElementSize<T extends Element>(target: T | Ref<T> | Ref<undefined>): {
-    width: Ref<number>;
-    height: Ref<number>;
+  width: Ref<number>;
+  height: Ref<number>;
 };
-
+//#endregion
+//#region src/use-filter-fields.d.ts
 /**
  * A Vue composable that filters and groups fields based on multiple filter criteria.
  *
@@ -229,17 +232,18 @@ declare function useElementSize<T extends Element>(target: T | Ref<T> | Ref<unde
  * - Groups are initialized as empty arrays even if no fields match the criteria
  */
 declare function useFilterFields<T extends string>(fields: Ref<Field[]>, filters: Record<T, (field: Field) => boolean>): {
-    fieldGroups: ComputedRef<Record<Extract<T, string>, Field[]>>;
+  fieldGroups: ComputedRef<Record<Extract<T, string>, Field[]>>;
 };
-
+//#endregion
+//#region src/use-groupable.d.ts
 /**
  * Represents a groupable item instance with its active state and value.
  */
 type GroupableInstance = {
-    /** Reactive reference to the active state of the item */
-    active: Ref<boolean>;
-    /** Unique identifier for the item within the group */
-    value: string | number | undefined;
+  /** Reactive reference to the active state of the item */
+  active: Ref<boolean>;
+  /** Unique identifier for the item within the group */
+  value: string | number | undefined;
 };
 /**
  * Configuration options for the useGroupable composable.
@@ -247,27 +251,27 @@ type GroupableInstance = {
  * of a component that has the `useGroupableParent` composition enabled.
  */
 type GroupableOptions = {
-    /** Unique identifier for this groupable item */
-    value?: string | number;
-    /** Name of the group to inject from (defaults to 'item-group') */
-    group?: string;
-    /** External reactive reference to control the active state */
-    active?: Ref<boolean>;
-    /** Whether to watch the external active reference for changes */
-    watch?: boolean;
+  /** Unique identifier for this groupable item */
+  value?: string | number;
+  /** Name of the group to inject from (defaults to 'item-group') */
+  group?: string;
+  /** External reactive reference to control the active state */
+  active?: Ref<boolean>;
+  /** Whether to watch the external active reference for changes */
+  watch?: boolean;
 };
 /**
  * Return type for the useGroupable composable.
  */
 type UsableGroupable = {
-    /** Reactive reference to the active state */
-    active: Ref<boolean>;
-    /** Toggle the active state of this item */
-    toggle: () => void;
-    /** Activate this item (if not already active) */
-    activate: () => void;
-    /** Deactivate this item (if currently active) */
-    deactivate: () => void;
+  /** Reactive reference to the active state */
+  active: Ref<boolean>;
+  /** Toggle the active state of this item */
+  toggle: () => void;
+  /** Activate this item (if not already active) */
+  activate: () => void;
+  /** Deactivate this item (if currently active) */
+  deactivate: () => void;
 };
 /**
  * Vue composable for creating groupable child items that can participate in group selection.
@@ -303,38 +307,38 @@ declare function useGroupable(options?: GroupableOptions): UsableGroupable;
  * State configuration for the groupable parent.
  */
 type GroupableParentState = {
-    /** External selection state (can be readonly) */
-    selection?: Ref<(string | number)[] | undefined> | Ref<readonly (string | number)[] | undefined>;
-    /** Callback fired when the selection changes */
-    onSelectionChange?: (newSelectionValues: readonly (string | number)[]) => void;
-    /** Callback fired when an item is toggled */
-    onToggle?: (item: GroupableInstance) => void;
+  /** External selection state (can be readonly) */
+  selection?: Ref<(string | number)[] | undefined> | Ref<readonly (string | number)[] | undefined>;
+  /** Callback fired when the selection changes */
+  onSelectionChange?: (newSelectionValues: readonly (string | number)[]) => void;
+  /** Callback fired when an item is toggled */
+  onToggle?: (item: GroupableInstance) => void;
 };
 /**
  * Configuration options for the groupable parent.
  */
 type GroupableParentOptions = {
-    /** Whether at least one item must always be selected */
-    mandatory?: Ref<boolean>;
-    /** Maximum number of items that can be selected (-1 for unlimited) */
-    max?: Ref<number>;
-    /** Whether multiple items can be selected simultaneously */
-    multiple?: Ref<boolean>;
+  /** Whether at least one item must always be selected */
+  mandatory?: Ref<boolean>;
+  /** Maximum number of items that can be selected (-1 for unlimited) */
+  max?: Ref<number>;
+  /** Whether multiple items can be selected simultaneously */
+  multiple?: Ref<boolean>;
 };
 /**
  * Return type for the useGroupableParent composable.
  */
 type UsableGroupableParent = {
-    /** Reactive array of all registered groupable items */
-    items: Ref<GroupableInstance[]>;
-    /** Computed selection array (readonly) */
-    selection: Ref<readonly (string | number)[]>;
-    /** Internal selection state */
-    internalSelection: Ref<(string | number)[]>;
-    /** Get the value identifier for a given item */
-    getValueForItem: (item: GroupableInstance) => string | number;
-    /** Synchronize children's active state with selection */
-    updateChildren: () => void;
+  /** Reactive array of all registered groupable items */
+  items: Ref<GroupableInstance[]>;
+  /** Computed selection array (readonly) */
+  selection: Ref<readonly (string | number)[]>;
+  /** Internal selection state */
+  internalSelection: Ref<(string | number)[]>;
+  /** Get the value identifier for a given item */
+  getValueForItem: (item: GroupableInstance) => string | number;
+  /** Synchronize children's active state with selection */
+  updateChildren: () => void;
 };
 /**
  * Vue composable for creating a group parent that manages multiple groupable child items.
@@ -383,37 +387,39 @@ type UsableGroupableParent = {
  * ```
  */
 declare function useGroupableParent(state?: GroupableParentState, options?: GroupableParentOptions, group?: string): UsableGroupableParent;
-
+//#endregion
+//#region src/use-items.d.ts
 type ManualSortData = {
-    item: string | number;
-    to: string | number;
+  item: string | number;
+  to: string | number;
 };
 type UsableItems = {
-    itemCount: Ref<number | null>;
-    totalCount: Ref<number | null>;
-    items: Ref<Item[]>;
-    totalPages: ComputedRef<number>;
-    loading: Ref<boolean>;
-    error: Ref<any>;
-    changeManualSort: (data: ManualSortData) => Promise<void>;
-    getItems: () => Promise<void>;
-    getTotalCount: () => Promise<void>;
-    getItemCount: () => Promise<void>;
+  itemCount: Ref<number | null>;
+  totalCount: Ref<number | null>;
+  items: Ref<Item[]>;
+  totalPages: ComputedRef<number>;
+  loading: Ref<boolean>;
+  error: Ref<any>;
+  changeManualSort: (data: ManualSortData) => Promise<void>;
+  getItems: () => Promise<void>;
+  getTotalCount: () => Promise<void>;
+  getItemCount: () => Promise<void>;
 };
 type ComputedQuery = {
-    fields: Ref<Query['fields']> | ComputedRef<Query['fields']> | WritableComputedRef<Query['fields']>;
-    limit: Ref<Query['limit']> | ComputedRef<Query['limit']> | WritableComputedRef<Query['limit']>;
-    sort: Ref<Query['sort']> | ComputedRef<Query['sort']> | WritableComputedRef<Query['sort']>;
-    search: Ref<Query['search']> | ComputedRef<Query['search']> | WritableComputedRef<Query['search']>;
-    filter: Ref<Query['filter']> | ComputedRef<Query['filter']> | WritableComputedRef<Query['filter']>;
-    page: Ref<Query['page']> | WritableComputedRef<Query['page']>;
-    /** System filter applied to total item count. */
-    filterSystem?: Ref<Query['filter']> | ComputedRef<Query['filter']> | WritableComputedRef<Query['filter']>;
-    alias?: Ref<Query['alias']> | ComputedRef<Query['alias']> | WritableComputedRef<Query['alias']>;
-    deep?: Ref<Query['deep']> | ComputedRef<Query['deep']> | WritableComputedRef<Query['deep']>;
+  fields: Ref<Query['fields']> | ComputedRef<Query['fields']> | WritableComputedRef<Query['fields']>;
+  limit: Ref<Query['limit']> | ComputedRef<Query['limit']> | WritableComputedRef<Query['limit']>;
+  sort: Ref<Query['sort']> | ComputedRef<Query['sort']> | WritableComputedRef<Query['sort']>;
+  search: Ref<Query['search']> | ComputedRef<Query['search']> | WritableComputedRef<Query['search']>;
+  filter: Ref<Query['filter']> | ComputedRef<Query['filter']> | WritableComputedRef<Query['filter']>;
+  page: Ref<Query['page']> | WritableComputedRef<Query['page']>;
+  /** System filter applied to total item count. */
+  filterSystem?: Ref<Query['filter']> | ComputedRef<Query['filter']> | WritableComputedRef<Query['filter']>;
+  alias?: Ref<Query['alias']> | ComputedRef<Query['alias']> | WritableComputedRef<Query['alias']>;
+  deep?: Ref<Query['deep']> | ComputedRef<Query['deep']> | WritableComputedRef<Query['deep']>;
 };
 declare function useItems(collection: Ref<string | null>, query: ComputedQuery): UsableItems;
-
+//#endregion
+//#region src/use-layout.d.ts
 declare const WRITABLE_PROPS: readonly ["selection", "layoutOptions", "layoutQuery"];
 type WritableProp = (typeof WRITABLE_PROPS)[number];
 /**
@@ -511,9 +517,10 @@ declare function createLayoutWrapper<Options, Query>(layout: LayoutConfig): Comp
  * ```
  */
 declare function useLayout<Options = any, Query = any>(layoutId: Ref<string | null>): {
-    layoutWrapper: ComputedRef<Component>;
+  layoutWrapper: ComputedRef<Component>;
 };
-
+//#endregion
+//#region src/use-size-class.d.ts
 /**
  * Vue props definition for size-related boolean properties.
  *
@@ -536,28 +543,28 @@ declare function useLayout<Options = any, Query = any>(layoutId: Ref<string | nu
  * ```
  */
 declare const sizeProps: {
-    xSmall: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    small: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    large: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    xLarge: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+  xSmall: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  small: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  large: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  xLarge: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
 };
 interface SizeProps {
-    xSmall?: boolean;
-    small?: boolean;
-    large?: boolean;
-    xLarge?: boolean;
+  xSmall?: boolean;
+  small?: boolean;
+  large?: boolean;
+  xLarge?: boolean;
 }
 /**
  * Composable for generating CSS size class names based on size props.
@@ -618,7 +625,8 @@ interface SizeProps {
  * ```
  */
 declare function useSizeClass<T>(props: T & SizeProps): ComputedRef<string | null>;
-
+//#endregion
+//#region src/use-sync.d.ts
 /**
  * Composable for creating two-way binding between parent and child components.
  *
@@ -753,7 +761,8 @@ declare function useSizeClass<T>(props: T & SizeProps): ComputedRef<string | nul
  * ```
  */
 declare function useSync<T, K extends keyof T & string, E extends (event: `update:${K}`, ...args: any[]) => void>(props: T, key: K, emit: E): Ref<T[K]>;
-
+//#endregion
+//#region src/use-system.d.ts
 /**
  * Vue composable that provides access to the global Directus stores through dependency injection.
  *
@@ -1054,5 +1063,5 @@ declare function useSdk<Schema extends object = any>(): DirectusClient<Schema> &
  * ```
  */
 declare function useExtensions(): RefRecord<AppExtensionConfigs>;
-
-export { type ComputedQuery, type GroupableInstance, type GroupableOptions, type ManualSortData, type OtherValue, type UsableCollection, type UsableCustomSelection, type UsableGroupable, type UsableItems, createLayoutWrapper, isWritableProp, sizeProps, useApi, useCollection, useCustomSelection, useCustomSelectionMultiple, useElementSize, useExtensions, useFilterFields, useGroupable, useGroupableParent, useItems, useLayout, useSdk, useSizeClass, useStores, useSync };
+//#endregion
+export { ComputedQuery, GroupableInstance, GroupableOptions, ManualSortData, OtherValue, UsableCollection, UsableCustomSelection, UsableGroupable, UsableItems, createLayoutWrapper, isWritableProp, sizeProps, useApi, useCollection, useCustomSelection, useCustomSelectionMultiple, useElementSize, useExtensions, useFilterFields, useGroupable, useGroupableParent, useItems, useLayout, useSdk, useSizeClass, useStores, useSync };