fix(composables/class): use generic types for modifier in useModifierGroup

Author: homj

apps/demo/src/app/components/button/button.component.ts

@@ -23,8 +23,8 @@ export class ButtonComponent {
     readonly type = useAttribute('type', { defaultValue: 'button' });
     readonly isDisabled = useBooleanAttribute('disabled');
     readonly isLoading = useModifier('is-loading', { initialValue: false });
-    readonly appearance = useModifierGroup('solid');
-    readonly color = useModifierGroup(undefined, { prefix: 'color' });
+    readonly appearance = useModifierGroup<'solid' | 'outline'>('solid');
+    readonly color = useModifierGroup<'red' | 'green'>(undefined, { prefix: 'color' });
 
     constructor() {
         bindAttribute('tabindex', computed(() => this.isDisabled() ? '-1' : '0'));

libs/composables/class/src/modifier-group.composable.ts

@@ -121,7 +121,7 @@ const normalizeOptions = (options?: IBindModifierGroupOptions) => ({
  * @param modifier - The signal to bind
  * @param options - A set of {@link IBindModifierGroupOptions options}
  */
-export const bindModifierGroup = <T extends Signal<string | null | undefined>>(
+export const bindModifierGroup = <Modifier extends string, T extends Signal<Modifier | null | undefined>>(
     modifier: T,
     options?: IBindModifierGroupOptions
 ) => {
@@ -183,11 +183,11 @@ export const bindModifierGroup = <T extends Signal<string | null | undefined>>(
  * @param initialValue - The initial modifier
  * @param options - A set of {@link IBindModifierGroupOptions options}
  */
-export const useModifierGroup = (
-    initialValue?: string,
+export const useModifierGroup = <Modifier extends string>(
+    initialValue?: Modifier,
     options?: IBindModifierGroupOptions
 ) => {
-    const modifier = signal<string | null | undefined>(initialValue);
+    const modifier = signal<Modifier | null | undefined>(initialValue);
 
     bindModifierGroup(modifier, options);