Search and Data Processing

/**
 * Reactive fuzzy search using Fuse.js
 * @param search - Search term string
 * @param data - Array of data items to search
 * @param options - Fuse.js and VueUse configuration options
 * @returns Fuse instance and reactive search results
 */
function useFuse<DataItem>(
  search: MaybeRefOrGetter<string>,
  data: MaybeRefOrGetter<DataItem[]>,
  options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>
): {
  /** The Fuse.js instance */
  fuse: Ref<Fuse<DataItem>>;
  /** Reactive search results */
  results: ComputedRef<FuseResult<DataItem>[]>;
};

interface UseFuseOptions<T> {
  /** Fuse.js configuration options */
  fuseOptions?: FuseOptions<T>;
  /** Maximum number of results to return */
  resultLimit?: number;
  /** Return all items when search is empty */
  matchAllWhenSearchEmpty?: boolean;
}

// Fuse.js types
type FuseOptions<T> = IFuseOptions<T>;

interface FuseResult<T> {
  item: T;
  refIndex: number;
  score?: number;
  matches?: FuseResultMatch[];
}

interface FuseResultMatch {
  indices: readonly [number, number][];
  value?: string;
  refIndex?: number;
  key?: string;
}

import { useFuse } from "@vueuse/integrations/useFuse";
import { ref } from 'vue';

// Basic search
const users = ref([
  { name: 'John Doe', email: 'john@example.com' },
  { name: 'Jane Smith', email: 'jane@example.com' },
  { name: 'Bob Johnson', email: 'bob@example.com' }
]);

const searchTerm = ref('john');
const { results } = useFuse(searchTerm, users, {
  fuseOptions: {
    keys: ['name', 'email'],
    threshold: 0.4
  }
});

// Advanced search with custom options
const products = ref([
  { title: 'MacBook Pro', category: 'laptop', price: 2000 },
  { title: 'iPhone 13', category: 'phone', price: 800 },
  { title: 'iPad Air', category: 'tablet', price: 600 }
]);

const query = ref('mac');
const { fuse, results } = useFuse(query, products, {
  fuseOptions: {
    keys: [
      { name: 'title', weight: 0.7 },
      { name: 'category', weight: 0.3 }
    ],
    threshold: 0.3,
    includeMatches: true,
    includeScore: true
  },
  resultLimit: 10,
  matchAllWhenSearchEmpty: true
});

// Access Fuse instance directly
console.log(fuse.value.search('laptop'));

/**
 * Reactive string case transformations
 * @param input - Input string to transform
 * @param type - Type of case transformation
 * @param options - Additional transformation options
 * @returns Reactive transformed string
 */
function useChangeCase(
  input: MaybeRef<string>,
  type: MaybeRefOrGetter<ChangeCaseType>,
  options?: MaybeRefOrGetter<Options>
): WritableComputedRef<string>;

function useChangeCase(
  input: MaybeRefOrGetter<string>,
  type: MaybeRefOrGetter<ChangeCaseType>,
  options?: MaybeRefOrGetter<Options>
): ComputedRef<string>;

type ChangeCaseType = 
  | 'camelCase'     // camelCase
  | 'pascalCase'    // PascalCase  
  | 'snakeCase'     // snake_case
  | 'kebabCase'     // kebab-case
  | 'constantCase'  // CONSTANT_CASE
  | 'dotCase'       // dot.case
  | 'headerCase'    // Header-Case
  | 'noCase'        // no case
  | 'pathCase'      // path/case
  | 'sentenceCase'  // Sentence case
  | 'capitalCase';  // Capital Case

interface Options {
  locale?: string | string[];
  delimiter?: string;
  prefixCharacters?: string;
  suffixCharacters?: string;
}

import { useChangeCase } from "@vueuse/integrations/useChangeCase";
import { ref } from 'vue';

// Basic case transformation
const input = ref('hello world example');
const caseType = ref('camelCase');
const transformed = useChangeCase(input, caseType);
// Result: 'helloWorldExample'

// Multiple transformations
const originalText = ref('User Name Field');

const camelCase = useChangeCase(originalText, 'camelCase');
// Result: 'userNameField'

const snakeCase = useChangeCase(originalText, 'snakeCase');
// Result: 'user_name_field'

const kebabCase = useChangeCase(originalText, 'kebabCase');
// Result: 'user-name-field'

const constantCase = useChangeCase(originalText, 'constantCase');
// Result: 'USER_NAME_FIELD'

// With options
const customTransform = useChangeCase(
  'hello-world_example',
  'camelCase',
  { delimiter: '-_' }
);

// Writable computed (first overload)
const editableInput = ref('initial text');
const writableTransform = useChangeCase(editableInput, 'camelCase');
writableTransform.value = 'new text'; // Updates editableInput