feat: Implement useComboBox

.changeset/hip-crabs-march.md

@@ -0,0 +1,5 @@
+---
+'@formwerk/core': minor
+---
+
+feat: implement useComboBox

packages/core/src/collections/api.ts

@@ -0,0 +1,38 @@
+// import { computed, ComputedRef, MaybeRefOrGetter, toValue } from 'vue';
+// import { getFromPath } from '../utils/path';
+// import { isObject } from '../../../shared/src';
+
+// export interface CollectionInit<TItem> {
+//   /**
+//    * The items to be displayed in the collection.
+//    */
+//   items: MaybeRefOrGetter<TItem[]>;
+//   /**
+//    * The property to track by, it can be a function that extracts the value from the item. Should be the same as the "value" prop of the option.
+//    */
+//   key?: string | ((item: TItem) => unknown);
+// }
+
+// export interface CollectionManager<TItem> {
+//   items: ComputedRef<TItem[]>;
+//   key: (item: TItem) => unknown;
+// }
+
+// // TODO: Implement fetching, loading, pagination, adding a new item, etc...
+// export function defineCollection<TItem>(init: CollectionInit<TItem>): CollectionManager<TItem> {
+//   const { items, key } = init;
+
+//   return {
+//     items: computed(() => toValue(items)),
+//     key:
+//       typeof key === 'function'
+//         ? key
+//         : item => {
+//             if (key && isObject(item)) {
+//               return getFromPath(item, key, item);
+//             }
+
+//             return item;
+//           },
+//   };
+// }

packages/core/src/collections/filter.spec.ts

@@ -0,0 +1,88 @@
+import { useDefaultFilter, type FilterContext } from './filter';
+
+describe('useDefaultFilter', () => {
+  const createContext = (search: string, label: string): FilterContext<string> => ({
+    search,
+    option: {
+      label,
+      value: label,
+    },
+  });
+
+  describe('case insensitive (default)', () => {
+    const { contains, startsWith, endsWith, equals } = useDefaultFilter();
+
+    it('contains should match substring regardless of case', () => {
+      expect(contains(createContext('world', 'Hello World'))).toBe(true);
+      expect(contains(createContext('WORLD', 'Hello World'))).toBe(true);
+      expect(contains(createContext('world', 'HELLO WORLD'))).toBe(true);
+      expect(contains(createContext('xyz', 'Hello World'))).toBe(false);
+    });
+
+    it('startsWith should match beginning of string regardless of case', () => {
+      expect(startsWith(createContext('hell', 'Hello World'))).toBe(true);
+      expect(startsWith(createContext('HELL', 'Hello World'))).toBe(true);
+      expect(startsWith(createContext('hell', 'HELLO WORLD'))).toBe(true);
+      expect(startsWith(createContext('world', 'Hello World'))).toBe(false);
+    });
+
+    it('endsWith should match end of string regardless of case', () => {
+      expect(endsWith(createContext('world', 'Hello World'))).toBe(true);
+      expect(endsWith(createContext('WORLD', 'Hello World'))).toBe(true);
+      expect(endsWith(createContext('world', 'HELLO WORLD'))).toBe(true);
+      expect(endsWith(createContext('hello', 'Hello World'))).toBe(false);
+    });
+
+    it('equals should match exact string regardless of case', () => {
+      expect(equals(createContext('hello world', 'Hello World'))).toBe(true);
+      expect(equals(createContext('HELLO WORLD', 'Hello World'))).toBe(true);
+      expect(equals(createContext('hello', 'Hello World'))).toBe(false);
+    });
+  });
+
+  describe('case sensitive', () => {
+    const { contains, startsWith, endsWith, equals } = useDefaultFilter({ caseSensitive: true });
+
+    it('contains should match substring with exact case', () => {
+      expect(contains(createContext('World', 'Hello World'))).toBe(true);
+      expect(contains(createContext('WORLD', 'Hello World'))).toBe(false);
+      expect(contains(createContext('world', 'Hello World'))).toBe(false);
+    });
+
+    it('startsWith should match beginning of string with exact case', () => {
+      expect(startsWith(createContext('Hello', 'Hello World'))).toBe(true);
+      expect(startsWith(createContext('HELLO', 'Hello World'))).toBe(false);
+      expect(startsWith(createContext('hello', 'Hello World'))).toBe(false);
+    });
+
+    it('endsWith should match end of string with exact case', () => {
+      expect(endsWith(createContext('World', 'Hello World'))).toBe(true);
+      expect(endsWith(createContext('WORLD', 'Hello World'))).toBe(false);
+      expect(endsWith(createContext('world', 'Hello World'))).toBe(false);
+    });
+
+    it('equals should match exact string with exact case', () => {
+      expect(equals(createContext('Hello World', 'Hello World'))).toBe(true);
+      expect(equals(createContext('HELLO WORLD', 'Hello World'))).toBe(false);
+      expect(equals(createContext('hello world', 'Hello World'))).toBe(false);
+    });
+  });
+
+  describe('debounce configuration', () => {
+    it('should set default debounce to 0', () => {
+      const { contains, startsWith, endsWith, equals } = useDefaultFilter();
+      expect(contains.debounceMs).toBe(0);
+      expect(startsWith.debounceMs).toBe(0);
+      expect(endsWith.debounceMs).toBe(0);
+      expect(equals.debounceMs).toBe(0);
+    });
+
+    it('should set custom debounce value', () => {
+      const { contains, startsWith, endsWith, equals } = useDefaultFilter({ debounceMs: 300 });
+      expect(contains.debounceMs).toBe(300);
+      expect(startsWith.debounceMs).toBe(300);
+      expect(endsWith.debounceMs).toBe(300);
+      expect(equals.debounceMs).toBe(300);
+    });
+  });
+});

packages/core/src/collections/filter.ts

@@ -0,0 +1,51 @@
+export interface FilterContext<TValue> {
+  search: string;
+  option: {
+    label: string;
+    value: TValue;
+  };
+}
+
+export interface FilterFn {
+  (context: FilterContext<unknown>): boolean;
+  debounceMs: number;
+}
+
+export interface FilterOptions {
+  caseSensitive?: boolean;
+  debounceMs?: number;
+}
+
+export function useDefaultFilter(options: FilterOptions = {}) {
+  const { caseSensitive = false, debounceMs = 0 } = options;
+
+  const withCaseSensitive = caseSensitive ? (value: string) => value : (value: string) => value.toLowerCase();
+
+  const contains: FilterFn = ({ search, option }) => {
+    return withCaseSensitive(option.label).includes(withCaseSensitive(search));
+  };
+
+  const startsWith: FilterFn = ({ search, option }) => {
+    return withCaseSensitive(option.label).startsWith(withCaseSensitive(search));
+  };
+
+  const endsWith: FilterFn = ({ search, option }) => {
+    return withCaseSensitive(option.label).endsWith(withCaseSensitive(search));
+  };
+
+  const equals: FilterFn = ({ search, option }) => {
+    return withCaseSensitive(option.label) === withCaseSensitive(search);
+  };
+
+  contains.debounceMs = debounceMs;
+  startsWith.debounceMs = debounceMs;
+  endsWith.debounceMs = debounceMs;
+  equals.debounceMs = debounceMs;
+
+  return {
+    contains,
+    startsWith,
+    endsWith,
+    equals,
+  };
+}

packages/core/src/collections/index.ts

@@ -0,0 +1,2 @@
+// export * from './api';
+export * from './filter';

packages/core/src/constants/index.ts

@@ -16,6 +16,8 @@ export const FieldTypePrefixes = {
   SliderThumb: 'st',
   FormRepeater: 'fr',
   CustomField: 'cf',
+  ComboBox: 'cbx',
+  ListBox: 'lb',
 } as const;
 
 export const NOOP = () => {};

packages/core/src/index.ts

@@ -5,7 +5,12 @@ export * from './useRadio';
 export * from './useSlider';
 export * from './useCheckbox';
 export * from './useNumberField';
+export * from './useOption';
+export * from './useOptionGroup';
+export * from './useListBox';
+export * from './collections';
 export * from './useSelect';
+export * from './useComboBox';
 export * from './useHiddenField';
 export * from './useCustomField';
 export * from './types';

packages/core/src/useComboBox/index.ts

@@ -0,0 +1 @@
+export * from './useComboBox';