fix(sliding-item): swipe event

core/src/components.d.ts

@@ -2030,7 +2030,7 @@ export namespace Components {
     /**
     * Emitted when the item has been fully swiped.
     */
-    'onIonSwipe'?: (event: CustomEvent<void>) => void;
+    'onIonSwipe'?: (event: CustomEvent<any>) => void;
     /**
     * The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
     */

core/src/components/item-option/item-option.scss

@@ -7,6 +7,7 @@
   --ion-color-base: #{ion-color(primary, base)};
   --ion-color-contrast: #{ion-color(primary, contrast)};
 
+  background: #{current-color(base)};
   color: #{current-color(contrast)};
 
   font-family: $font-family-base;
@@ -23,16 +24,12 @@
 
   outline: none;
 
-  background: #{current-color(base)};
+  background: transparent;
 
   cursor: pointer;
   appearance: none;
 }
 
-.item-option-native:hover {
-  opacity: 0.8;
-}
-
 .item-option-button-inner {
   display: flex;
 

core/src/components/item-options/item-options.tsx

@@ -24,11 +24,13 @@ export class ItemOptions {
   /**
    * Emitted when the item has been fully swiped.
    */
-  @Event() ionSwipe!: EventEmitter<void>;
+  @Event() ionSwipe!: EventEmitter<any>;
 
   @Method()
   fireSwipeEvent() {
-    this.ionSwipe.emit();
+    this.ionSwipe.emit({
+      side: this.side
+    });
   }
 
   hostData() {

core/src/components/item-sliding/item-sliding.tsx

@@ -108,14 +108,8 @@ export class ItemSliding {
    * the width of the options.
    */
   @Method()
-  async getSlidingRatio(): Promise<number> {
-    if (this.openAmount > 0) {
-      return this.openAmount / this.optsWidthRightSide;
-    } else if (this.openAmount < 0) {
-      return this.openAmount / this.optsWidthLeftSide;
-    } else {
-      return 0;
-    }
+  getSlidingRatio(): Promise<number> {
+    return Promise.resolve(this.getSlidingRatioSync());
   }
 
   /**
@@ -232,11 +226,12 @@ export class ItemSliding {
       restingPoint = 0;
     }
 
+    const state = this.state;
     this.setOpenAmount(restingPoint, true);
 
-    if ((this.state & SlidingState.SwipeEnd) !== 0 && this.rightOptions) {
+    if ((state & SlidingState.SwipeEnd) !== 0 && this.rightOptions) {
       this.rightOptions.fireSwipeEvent();
-    } else if ((this.state & SlidingState.SwipeStart) !== 0 && this.leftOptions) {
+    } else if ((state & SlidingState.SwipeStart) !== 0 && this.leftOptions) {
       this.leftOptions.fireSwipeEvent();
     }
   }
@@ -290,14 +285,24 @@ export class ItemSliding {
 
     style.transform = `translate3d(${-openAmount}px,0,0)`;
     this.ionDrag.emit({
-      amount: openAmount
+      amount: openAmount,
+      ratio: this.getSlidingRatioSync()
     });
   }
 
+  private getSlidingRatioSync(): number {
+    if (this.openAmount > 0) {
+      return this.openAmount / this.optsWidthRightSide;
+    } else if (this.openAmount < 0) {
+      return this.openAmount / this.optsWidthLeftSide;
+    } else {
+      return 0;
+    }
+  }
+
   hostData() {
     return {
       class: {
-        'item-sliding': true,
         'item-sliding-active-slide': (this.state !== SlidingState.Disabled),
         'item-sliding-active-options-end': (this.state & SlidingState.End) !== 0,
         'item-sliding-active-options-start': (this.state & SlidingState.Start) !== 0,
@@ -308,7 +313,6 @@ export class ItemSliding {
   }
 }
 
-/** @hidden */
 function swipeShouldReset(isResetDirection: boolean, isMovingFast: boolean, isOnResetZone: boolean): boolean {
   // The logic required to know when the sliding item should close (openAmount=0)
   // depends on three booleans (isCloseDirection, isMovingFast, isOnCloseZone)