feat(button): goback attribute

core/src/components.d.ts

@@ -488,6 +488,7 @@ declare global {
 
 declare global {
   interface HTMLIonAnchorElement extends HTMLStencilElement {
+    'goBack': boolean;
     'href': string;
   }
   var HTMLIonAnchorElement: {
@@ -507,6 +508,7 @@ declare global {
   }
   namespace JSXElements {
     export interface IonAnchorAttributes extends HTMLAttributes {
+      'goBack'?: boolean;
       'href'?: string;
     }
   }
@@ -734,6 +736,7 @@ declare global {
      * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
      */
     'fill': 'clear' | 'outline' | 'solid' | 'default';
+    'goBack': boolean;
     /**
      * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
      */
@@ -796,6 +799,7 @@ declare global {
        * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
        */
       'fill'?: 'clear' | 'outline' | 'solid' | 'default';
+      'goBack'?: boolean;
       /**
        * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
        */
@@ -2599,6 +2603,7 @@ declare global {
      * If true, the user cannot interact with the item. Defaults to `false`.
      */
     'disabled': boolean;
+    'goBack': boolean;
     /**
      * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
      */
@@ -2641,6 +2646,7 @@ declare global {
        * If true, the user cannot interact with the item. Defaults to `false`.
        */
       'disabled'?: boolean;
+      'goBack'?: boolean;
       /**
        * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
        */
@@ -4703,7 +4709,7 @@ declare global {
     'delegate': FrameworkDelegate;
     'getRouteId': () => RouteID;
     'setRoot': (component: string | HTMLElement, params?: { [key: string]: any; }, opts?: RouterOutletOptions) => Promise<boolean>;
-    'setRouteId': (id: string, data: any, direction: number) => Promise<RouteWrite>;
+    'setRouteId': (id: string, params: any, direction: number) => Promise<RouteWrite>;
   }
   var HTMLIonRouterOutletElement: {
     prototype: HTMLIonRouterOutletElement;

core/src/components/anchor/anchor.tsx

@@ -9,9 +9,13 @@ export class Anchor {
 
   @Prop() href: string;
 
+  @Prop() goBack = false;
+
   render() {
     return <a
       href={this.href}
-      onClick={(ev) => openURL(this.href, ev)}><slot/></a>;
+      onClick={(ev) => openURL(this.href, ev, this.goBack)}>
+        <slot/>
+      </a>;
   }
 }

core/src/components/anchor/readme.md

@@ -7,6 +7,11 @@
 
 ## Properties
 
+#### goBack
+
+boolean
+
+
 #### href
 
 string
@@ -14,6 +19,11 @@ string
 
 ## Attributes
 
+#### go-back
+
+boolean
+
+
 #### href
 
 string

core/src/components/back-button/back-button.tsx

@@ -1,7 +1,6 @@
 import { Component, Element, Prop } from '@stencil/core';
 import { Config } from '../../index';
 import { openURL } from '../../utils/theme';
-import { RouterDirection } from '../router/utils/interfaces';
 
 @Component({
   tag: 'ion-back-button',
@@ -42,7 +41,7 @@ export class BackButton {
       ev.preventDefault();
       nav.pop();
     } else if (this.defaultHref) {
-      openURL(this.defaultHref, ev, RouterDirection.Back);
+      openURL(this.defaultHref, ev, true);
     }
   }
 

core/src/components/button/button.tsx

@@ -83,6 +83,7 @@ export class Button {
    */
   @Prop() mode: 'ios' | 'md';
 
+  @Prop() goBack = false;
   /**
    * Emitted when the button has focus.
    */
@@ -148,7 +149,7 @@ export class Button {
         disabled={this.disabled}
         onFocus={this.onFocus.bind(this)}
         onKeyUp={this.onKeyUp.bind(this)}
-        onClick={(ev) => openURL(this.href, ev)}
+        onClick={(ev) => openURL(this.href, ev, this.goBack)}
         onBlur={this.onBlur.bind(this)}>
           <span class='button-inner'>
             <slot name='icon-only'></slot>

core/src/components/button/readme.md

@@ -119,6 +119,11 @@ button with a border, or to `"solid"`. The default style is `"solid"` except ins
 a toolbar, where the default is `"clear"`.
 
 
+#### goBack
+
+boolean
+
+
 #### href
 
 string
@@ -210,6 +215,11 @@ button with a border, or to `"solid"`. The default style is `"solid"` except ins
 a toolbar, where the default is `"clear"`.
 
 
+#### go-back
+
+boolean
+
+
 #### href
 
 string

core/src/components/item/item.tsx

@@ -54,6 +54,9 @@ export class Item {
    */
   @Prop() tappable = false;
 
+  @Prop() goBack = false;
+
+
   @Listen('ionStyle')
   itemStyle(ev: UIEvent) {
     ev.stopPropagation();
@@ -122,7 +125,7 @@ export class Item {
       <TagType
         {...attrs}
         class={themedClasses}
-        onClick={(ev) => openURL(this.href, ev)}>
+        onClick={(ev) => openURL(this.href, ev, this.goBack)}>
         <slot name='start'></slot>
         <div class='item-inner'>
           <div class='input-wrapper'>

core/src/components/item/readme.md

@@ -31,6 +31,11 @@ boolean
 If true, the user cannot interact with the item. Defaults to `false`.
 
 
+#### goBack
+
+boolean
+
+
 #### href
 
 string
@@ -82,6 +87,11 @@ boolean
 If true, the user cannot interact with the item. Defaults to `false`.
 
 
+#### go-back
+
+boolean
+
+
 #### href
 
 string

core/src/utils/theme.ts

@@ -1,5 +1,4 @@
 import { CssClassMap } from '../index';
-import { RouterDirection } from '../components/router/utils/interfaces';
 
 /**
  * Create the mode and color classes for the component based on the classes passed in
@@ -66,14 +65,13 @@ export function getClassMap(classes: string | undefined): CssClassMap {
   return map;
 }
 
-export function openURL(url: string, ev: Event, direction = RouterDirection.Forward) {
+export function openURL(url: string, ev: Event, goBack = false) {
   if (url && url[0] !== '#' && url.indexOf('://') === -1) {
     const router = document.querySelector('ion-router');
     if (router) {
       ev && ev.preventDefault();
-      return router.componentOnReady().then(() => router.push(url, direction));
+      return router.componentOnReady().then(() => router.push(url, goBack ? -1 : 1));
     }
   }
   return Promise.resolve();
 }
-