fix: f2-switch-field docs has wrong example

EventStore · Feb 21, 2025 · 0901959 · 0901959
1 parent d8d88a7
commit 0901959
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 57 deletions.
diff --git a/packages/fields/src/components.d.ts b/packages/fields/src/components.d.ts
@@ -1410,8 +1410,7 @@ declare global {
         new (): HTMLF2SwitchElement;
     };
     interface HTMLF2SwitchFieldElementEventMap {
-        "fieldchange": FieldChange<string>;
-        "enter": any;
+        "fieldchange": FieldChange<boolean>;
         "requestEdit": string;
     }
     /**
@@ -2409,14 +2408,10 @@ declare namespace LocalJSX {
           * The name of the field.
          */
         "name": string;
-        /**
-          * Emitted on keyup of enter, if no modifier keys are held.
-         */
-        "onEnter"?: (event: F2SwitchFieldCustomEvent<any>) => void;
         /**
           * Emitted when the value of the field is changed.
          */
-        "onFieldchange"?: (event: F2SwitchFieldCustomEvent<FieldChange<string>>) => void;
+        "onFieldchange"?: (event: F2SwitchFieldCustomEvent<FieldChange<boolean>>) => void;
         /**
           * Emitted when the user requests to edit.
          */

diff --git a/packages/fields/src/components/switch/field/readme.md b/packages/fields/src/components/switch/field/readme.md
@@ -1,4 +1,4 @@
-# f2-text-field
+# f2-switch-field
 
 <!-- Auto Generated Below -->
 
@@ -15,35 +15,29 @@ A switch with a label.
 import { createValidatedForm } from '@kurrent-ui/forms';
 
 interface Example {
-    name: string | null;
+    notifications: boolean;
+    maintenance: boolean;
 }
 
 const form = createValidatedForm<Example>({
-    name: null,
+    notifications: true,
+    maintenance: false,
 });
 
-const options = [
-    { name: 'Jim', value: 'jim' },
-    { name: 'John', value: 'john' },
-    { name: 'Nathanial', value: 'nathanial' },
-];
-
 export default () => (
     <f2-form>
-        <f2-select-field
-            label={'Choose a name from the list'}
-            documentation={"It doesn't matter who it is."}
-            placeholder={'Choose a name from the list'}
-            options={options}
-            {...form.connect('name')}
+        <f2-switch-field
+            label={'Enable notifications'}
+            documentation={
+                'Receive real-time updates and alerts about system events'
+            }
+            {...form.connect('notifications')}
         />
-        <f2-select-field
+        <f2-switch-field
             disabled
-            label={'Choose a name from the list'}
+            label={'Maintenance mode'}
             documentation={'This field is disabled'}
-            placeholder={'Choose a name from the list'}
-            options={options}
-            {...form.connect('name')}
+            {...form.connect('maintenance')}
         />
     </f2-form>
 );
@@ -74,11 +68,10 @@ export default () => (
 
 ## Events
 
-| Event         | Description                                              | Type                                       |
-| ------------- | -------------------------------------------------------- | ------------------------------------------ |
-| `enter`       | Emitted on keyup of enter, if no modifier keys are held. | `CustomEvent<any>`                         |
-| `fieldchange` | Emitted when the value of the field is changed.          | `CustomEvent<FieldChange<string, string>>` |
-| `requestEdit` | Emitted when the user requests to edit.                  | `CustomEvent<string>`                      |
+| Event         | Description                                     | Type                                        |
+| ------------- | ----------------------------------------------- | ------------------------------------------- |
+| `fieldchange` | Emitted when the value of the field is changed. | `CustomEvent<FieldChange<boolean, string>>` |
+| `requestEdit` | Emitted when the user requests to edit.         | `CustomEvent<string>`                       |
 
 
 ## Shadow Parts

diff --git a/packages/fields/src/components/switch/field/switch-field.tsx b/packages/fields/src/components/switch/field/switch-field.tsx
@@ -28,9 +28,7 @@ export class SwitchField {
     @AttachInternals() internals?: ElementInternals;
 
     /** Emitted when the value of the field is changed. */
-    @Event({ bubbles: true }) fieldchange!: EventEmitter<FieldChange<string>>;
-    /** Emitted on keyup of enter, if no modifier keys are held. */
-    @Event() enter!: EventEmitter;
+    @Event({ bubbles: true }) fieldchange!: EventEmitter<FieldChange<boolean>>;
     /** Emitted when the user requests to edit. */
     @Event({ bubbles: true }) requestEdit!: EventEmitter<string>;
 

diff --git a/packages/fields/src/components/switch/field/usage/example.md b/packages/fields/src/components/switch/field/usage/example.md
@@ -2,35 +2,29 @@
 import { createValidatedForm } from '@kurrent-ui/forms';
 
 interface Example {
-    name: string | null;
+    notifications: boolean;
+    maintenance: boolean;
 }
 
 const form = createValidatedForm<Example>({
-    name: null,
+    notifications: true,
+    maintenance: false,
 });
 
-const options = [
-    { name: 'Jim', value: 'jim' },
-    { name: 'John', value: 'john' },
-    { name: 'Nathanial', value: 'nathanial' },
-];
-
 export default () => (
     <f2-form>
-        <f2-select-field
-            label={'Choose a name from the list'}
-            documentation={"It doesn't matter who it is."}
-            placeholder={'Choose a name from the list'}
-            options={options}
-            {...form.connect('name')}
+        <f2-switch-field
+            label={'Enable notifications'}
+            documentation={
+                'Receive real-time updates and alerts about system events'
+            }
+            {...form.connect('notifications')}
         />
-        <f2-select-field
+        <f2-switch-field
             disabled
-            label={'Choose a name from the list'}
+            label={'Maintenance mode'}
             documentation={'This field is disabled'}
-            placeholder={'Choose a name from the list'}
-            options={options}
-            {...form.connect('name')}
+            {...form.connect('maintenance')}
         />
     </f2-form>
 );

diff --git a/yarn.lock b/yarn.lock
@@ -4372,9 +4372,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001587":
-  version: 1.0.30001651
-  resolution: "caniuse-lite@npm:1.0.30001651"
-  checksum: fe4857b2a91a9cb77993eec9622de68bea0df17c31cb9584ca5c562f64bb3b8fda316d898aa3b1ee3ee9f7d80f6bf13c42acb09d9a56a1a6c64afaf7381472fa
+  version: 1.0.30001700
+  resolution: "caniuse-lite@npm:1.0.30001700"
+  checksum: 9203ed502fd1b74c47f315a001e1d91abe2abecb951f8e15dd1556cfc23a29fa7a7b2cc654380604bb6f58bcfa0c65b78055b9d99a7489c13baa0d4158a6e25e
   languageName: node
   linkType: hard