feat: chip add onChange$ event

Author: gioboa

apps/docs/content/_components/chip.md

@@ -76,15 +76,16 @@ When using `SfChip` without any text label/description inside, you should specif
 
 ## Props
 
-| Prop name     | Type                             | Default value | Possible values  |
-| ------------- | -------------------------------- | ------------- | ---------------- |
-| `ref?`        | `Signal<Element>`                |               |                  |
-| `class?`      | `string`                         |               |                  |
-| `size?`       | `string`                         | `'base'`      | `'sm'`, `'base'` |
-| `square?`     | `boolean`                        |               |                  |
-| `inputProps?` | `QwikIntrinsicElements['input']` |               |                  |
-| `slotPrefix?` | `boolean`                        |               |                  |
-| `slotSuffix?` | `boolean`                        |               |                  |
+| Prop name     | Type                                                               | Default value | Possible values  |
+| ------------- | ------------------------------------------------------------------ | ------------- | ---------------- |
+| `ref?`        | `Signal<Element>`                                                  |               |                  |
+| `class?`      | `string`                                                           |               |                  |
+| `size?`       | `string`                                                           | `'base'`      | `'sm'`, `'base'` |
+| `square?`     | `boolean`                                                          |               |                  |
+| `inputProps?` | `QwikIntrinsicElements['input']`                                   |               |                  |
+| `slotPrefix?` | `boolean`                                                          |               |                  |
+| `slotSuffix?` | `boolean`                                                          |               |                  |
+| `onChange$?`  | `PropFunction<(event: QwikChangeEvent<HTMLInputElement>) => void>` |               |                  |
 
 ## Slots
 

apps/website/src/routes/examples/SfChip/index.tsx

@@ -80,6 +80,7 @@ export default component$(() => {
           onChange$: selectHandler,
         }}
         slotPrefix={true}
+        onChange$={(e) => console.log(e)}
       >
         <div q:slot="prefix">
           <SfThumbnail

apps/website/src/routes/index.tsx

@@ -1,9 +1,8 @@
 import { component$ } from '@builder.io/qwik';
-import { SfLink } from 'qwik-storefront-ui';
 export default component$(() => (
   <>
-    <SfLink href="/examples?show=true">Examples</SfLink>
+    <a href="/examples?show=true">Examples</a>
     <hr />
-    <SfLink href="/showcases?show=true">Showcases</SfLink>
+    <a href="/showcases?show=true">Showcases</a>
   </>
 ));

packages/qwik-storefront-ui/src/components/SfChip/SfChip.tsx

@@ -10,6 +10,7 @@ export const SfChip = component$<SfChipProps>(
     inputProps,
     square = false,
     ref,
+    onChange$,
     ...attributes
   }: SfChipProps) => {
     const chipId = useId();
@@ -59,6 +60,7 @@ export const SfChip = component$<SfChipProps>(
           class="hidden"
           type="checkbox"
           {...inputProps}
+          onChange$={(e) => onChange$ && onChange$(e)}
         />
         <label
           for={chipId}

packages/qwik-storefront-ui/src/components/SfChip/types.ts

@@ -1,4 +1,9 @@
-import { QwikIntrinsicElements, Signal } from '@builder.io/qwik';
+import {
+  PropFunction,
+  QwikChangeEvent,
+  QwikIntrinsicElements,
+  Signal,
+} from '@builder.io/qwik';
 
 export type SfChipProps = {
   ref?: Signal<Element | undefined>;
@@ -8,6 +13,7 @@ export type SfChipProps = {
   inputProps?: QwikIntrinsicElements['input'];
   slotPrefix?: boolean;
   slotSuffix?: boolean;
+  onChange$?: PropFunction<(event: QwikChangeEvent<HTMLInputElement>) => void>;
 };
 
 export enum SfChipSize {