docs(refresher): use RefresherCustomEvent type in playground examples (#4180)

Author: ace-of-aces

static/usage/v7/refresher/advanced/angular/example_component_ts.md

@@ -11,6 +11,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
@@ -82,10 +83,10 @@ export class ExampleComponent {
     }
   }
 
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       this.addItems(3, true);
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }

static/usage/v7/refresher/advanced/react/main_tsx.md

@@ -11,7 +11,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 import { ellipse } from 'ionicons/icons';
 
@@ -44,7 +44,7 @@ function Example() {
     }
   }, []);
 
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       addItems(3, true);
       event.detail.complete();

static/usage/v7/refresher/advanced/vue.md

@@ -51,6 +51,7 @@
       IonRefresherContent,
       IonTitle,
       IonToolbar,
+      RefresherCustomEvent,
     },
     setup() {
       const names = [
@@ -82,7 +83,7 @@
 
       addItems(5);
 
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           addItems(3, true);
           event.target.complete();

static/usage/v7/refresher/basic/angular/example_component_ts.md

@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }

static/usage/v7/refresher/basic/react.md

@@ -7,11 +7,11 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();

static/usage/v7/refresher/basic/vue.md

@@ -16,13 +16,21 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonContent,
+    IonHeader,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+    RefresherCustomEvent,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();

static/usage/v7/refresher/custom-content/angular/example_component_ts.md

@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }

static/usage/v7/refresher/custom-content/react.md

@@ -7,12 +7,12 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 import { chevronDownCircleOutline } from 'ionicons/icons';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();

static/usage/v7/refresher/custom-content/vue.md

@@ -27,9 +27,17 @@
   import { chevronDownCircleOutline } from 'ionicons/icons';
 
   export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
+    components: {
+      IonContent,
+      IonHeader,
+      IonRefresher,
+      IonRefresherContent,
+      IonTitle,
+      IonToolbar,
+      RefresherCustomEvent,
+    },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();

static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md

@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }