javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): update Stencil Vue output target (#30159)

Browse Source 
This patch includes some necessary updates for
`@stencil/vue-output-target@v0.9.0`:

- we started to export Stencils helpers as runtime via
`@stencil/vue-output-target/runtime` similar to what we did in React
- this version requires some updates to Vue and TypeScript as well
- adjustments related to that update
This commit is contained in:
Christian Bromann
2025-01-29 08:31:31 -08:00
committed by GitHub
parent 0030be8195
commit eb725fce6e
16 changed files with 860 additions and 814 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
packages/angular/src/directives/proxies.ts
View File

@@ -18,7 +18,7 @@ import { Components } from '@ionic/core';
inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value'],
})
export class IonAccordion {
protected el: HTMLElement;
protected el: HTMLIonAccordionElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -40,7 +40,7 @@ export declare interface IonAccordion extends Components.IonAccordion {}
inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value'],
})
export class IonAccordionGroup {
protected el: HTMLElement;
protected el: HTMLIonAccordionGroupElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -73,7 +73,7 @@ This event will not emit when programmatically setting the `value` property.
inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger'],
})
export class IonActionSheet {
protected el: HTMLElement;
protected el: HTMLIonActionSheetElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -136,7 +136,7 @@ Shorthand for ionActionSheetDidDismiss.
inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger'],
})
export class IonAlert {
protected el: HTMLElement;
protected el: HTMLIonAlertElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -198,7 +198,7 @@ Shorthand for ionAlertDidDismiss.
inputs: [],
})
export class IonApp {
protected el: HTMLElement;
protected el: HTMLIonAppElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -219,7 +219,7 @@ export declare interface IonApp extends Components.IonApp {}
inputs: [],
})
export class IonAvatar {
protected el: HTMLElement;
protected el: HTMLIonAvatarElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -241,7 +241,7 @@ export declare interface IonAvatar extends Components.IonAvatar {}
inputs: ['stopPropagation', 'tappable', 'visible'],
})
export class IonBackdrop {
protected el: HTMLElement;
protected el: HTMLIonBackdropElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -269,7 +269,7 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
inputs: ['color', 'mode'],
})
export class IonBadge {
protected el: HTMLElement;
protected el: HTMLIonBadgeElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -291,7 +291,7 @@ export declare interface IonBadge extends Components.IonBadge {}
inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target'],
})
export class IonBreadcrumb {
protected el: HTMLElement;
protected el: HTMLIonBreadcrumbElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -323,7 +323,7 @@ export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode'],
})
export class IonBreadcrumbs {
protected el: HTMLElement;
protected el: HTMLIonBreadcrumbsElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -353,7 +353,7 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type'],
})
export class IonButton {
protected el: HTMLElement;
protected el: HTMLIonButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -385,7 +385,7 @@ export declare interface IonButton extends Components.IonButton {
inputs: ['collapse'],
})
export class IonButtons {
protected el: HTMLElement;
protected el: HTMLIonButtonsElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -407,7 +407,7 @@ export declare interface IonButtons extends Components.IonButtons {}
inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'],
})
export class IonCard {
protected el: HTMLElement;
protected el: HTMLIonCardElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -429,7 +429,7 @@ export declare interface IonCard extends Components.IonCard {}
inputs: ['mode'],
})
export class IonCardContent {
protected el: HTMLElement;
protected el: HTMLIonCardContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -451,7 +451,7 @@ export declare interface IonCardContent extends Components.IonCardContent {}
inputs: ['color', 'mode', 'translucent'],
})
export class IonCardHeader {
protected el: HTMLElement;
protected el: HTMLIonCardHeaderElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -473,7 +473,7 @@ export declare interface IonCardHeader extends Components.IonCardHeader {}
inputs: ['color', 'mode'],
})
export class IonCardSubtitle {
protected el: HTMLElement;
protected el: HTMLIonCardSubtitleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -495,7 +495,7 @@ export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
inputs: ['color', 'mode'],
})
export class IonCardTitle {
protected el: HTMLElement;
protected el: HTMLIonCardTitleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -517,7 +517,7 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
})
export class IonCheckbox {
protected el: HTMLElement;
protected el: HTMLIonCheckboxElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -557,7 +557,7 @@ This event will not emit when programmatically setting the `checked` property.
inputs: ['color', 'disabled', 'mode', 'outline'],
})
export class IonChip {
protected el: HTMLElement;
protected el: HTMLIonChipElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -579,7 +579,7 @@ export declare interface IonChip extends Components.IonChip {}
inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'],
})
export class IonCol {
protected el: HTMLElement;
protected el: HTMLIonColElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -602,7 +602,7 @@ export declare interface IonCol extends Components.IonCol {}
inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'],
})
export class IonContent {
protected el: HTMLElement;
protected el: HTMLIonContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -645,7 +645,7 @@ Set `scrollEvents` to `true` to enable.
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
})
export class IonDatetime {
protected el: HTMLElement;
protected el: HTMLIonDatetimeElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -689,7 +689,7 @@ This event will not emit when programmatically setting the `value` property.
inputs: ['color', 'datetime', 'disabled', 'mode'],
})
export class IonDatetimeButton {
protected el: HTMLElement;
protected el: HTMLIonDatetimeButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -712,7 +712,7 @@ export declare interface IonDatetimeButton extends Components.IonDatetimeButton
inputs: ['activated', 'edge', 'horizontal', 'vertical'],
})
export class IonFab {
protected el: HTMLElement;
protected el: HTMLIonFabElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -734,7 +734,7 @@ export declare interface IonFab extends Components.IonFab {}
inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
})
export class IonFabButton {
protected el: HTMLElement;
protected el: HTMLIonFabButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -766,7 +766,7 @@ export declare interface IonFabButton extends Components.IonFabButton {
inputs: ['activated', 'side'],
})
export class IonFabList {
protected el: HTMLElement;
protected el: HTMLIonFabListElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -788,7 +788,7 @@ export declare interface IonFabList extends Components.IonFabList {}
inputs: ['collapse', 'mode', 'translucent'],
})
export class IonFooter {
protected el: HTMLElement;
protected el: HTMLIonFooterElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -810,7 +810,7 @@ export declare interface IonFooter extends Components.IonFooter {}
inputs: ['fixed'],
})
export class IonGrid {
protected el: HTMLElement;
protected el: HTMLIonGridElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -832,7 +832,7 @@ export declare interface IonGrid extends Components.IonGrid {}
inputs: ['collapse', 'mode', 'translucent'],
})
export class IonHeader {
protected el: HTMLElement;
protected el: HTMLIonHeaderElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -854,7 +854,7 @@ export declare interface IonHeader extends Components.IonHeader {}
inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'],
})
export class IonIcon {
protected el: HTMLElement;
protected el: HTMLIonIconElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -876,7 +876,7 @@ export declare interface IonIcon extends Components.IonIcon {}
inputs: ['alt', 'src'],
})
export class IonImg {
protected el: HTMLElement;
protected el: HTMLIonImgElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -913,7 +913,7 @@ export declare interface IonImg extends Components.IonImg {
inputs: ['disabled', 'position', 'threshold'],
})
export class IonInfiniteScroll {
protected el: HTMLElement;
protected el: HTMLIonInfiniteScrollElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -944,7 +944,7 @@ your async operation has completed.
inputs: ['loadingSpinner', 'loadingText'],
})
export class IonInfiniteScrollContent {
protected el: HTMLElement;
protected el: HTMLIonInfiniteScrollContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -967,7 +967,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearInputIcon', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'],
})
export class IonInput {
protected el: HTMLElement;
protected el: HTMLIonInputElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1028,7 +1028,7 @@ This event will not emit when programmatically setting the `value` property.
inputs: ['color', 'hideIcon', 'mode', 'showIcon'],
})
export class IonInputPasswordToggle {
protected el: HTMLElement;
protected el: HTMLIonInputPasswordToggleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1050,7 +1050,7 @@ export declare interface IonInputPasswordToggle extends Components.IonInputPassw
inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'],
})
export class IonItem {
protected el: HTMLElement;
protected el: HTMLIonItemElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1072,7 +1072,7 @@ export declare interface IonItem extends Components.IonItem {}
inputs: ['color', 'mode', 'sticky'],
})
export class IonItemDivider {
protected el: HTMLElement;
protected el: HTMLIonItemDividerElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1093,7 +1093,7 @@ export declare interface IonItemDivider extends Components.IonItemDivider {}
inputs: [],
})
export class IonItemGroup {
protected el: HTMLElement;
protected el: HTMLIonItemGroupElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1115,7 +1115,7 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'],
})
export class IonItemOption {
protected el: HTMLElement;
protected el: HTMLIonItemOptionElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1137,7 +1137,7 @@ export declare interface IonItemOption extends Components.IonItemOption {}
inputs: ['side'],
})
export class IonItemOptions {
protected el: HTMLElement;
protected el: HTMLIonItemOptionsElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1166,7 +1166,7 @@ export declare interface IonItemOptions extends Components.IonItemOptions {
inputs: ['disabled'],
})
export class IonItemSliding {
protected el: HTMLElement;
protected el: HTMLIonItemSlidingElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1194,7 +1194,7 @@ export declare interface IonItemSliding extends Components.IonItemSliding {
inputs: ['color', 'mode', 'position'],
})
export class IonLabel {
protected el: HTMLElement;
protected el: HTMLIonLabelElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1217,7 +1217,7 @@ export declare interface IonLabel extends Components.IonLabel {}
inputs: ['inset', 'lines', 'mode'],
})
export class IonList {
protected el: HTMLElement;
protected el: HTMLIonListElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1239,7 +1239,7 @@ export declare interface IonList extends Components.IonList {}
inputs: ['color', 'lines', 'mode'],
})
export class IonListHeader {
protected el: HTMLElement;
protected el: HTMLIonListHeaderElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1262,7 +1262,7 @@ export declare interface IonListHeader extends Components.IonListHeader {}
inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'],
})
export class IonLoading {
protected el: HTMLElement;
protected el: HTMLIonLoadingElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1325,7 +1325,7 @@ Shorthand for ionLoadingDidDismiss.
inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
})
export class IonMenu {
protected el: HTMLElement;
protected el: HTMLIonMenuElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1367,7 +1367,7 @@ export declare interface IonMenu extends Components.IonMenu {
inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type'],
})
export class IonMenuButton {
protected el: HTMLElement;
protected el: HTMLIonMenuButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1389,7 +1389,7 @@ export declare interface IonMenuButton extends Components.IonMenuButton {}
inputs: ['autoHide', 'menu'],
})
export class IonMenuToggle {
protected el: HTMLElement;
protected el: HTMLIonMenuToggleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1411,7 +1411,7 @@ export declare interface IonMenuToggle extends Components.IonMenuToggle {}
inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'],
})
export class IonNavLink {
protected el: HTMLElement;
protected el: HTMLIonNavLinkElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1433,7 +1433,7 @@ export declare interface IonNavLink extends Components.IonNavLink {}
inputs: ['color', 'mode'],
})
export class IonNote {
protected el: HTMLElement;
protected el: HTMLIonNoteElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1455,7 +1455,7 @@ export declare interface IonNote extends Components.IonNote {}
inputs: ['mode'],
})
export class IonPicker {
protected el: HTMLElement;
protected el: HTMLIonPickerElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1478,7 +1478,7 @@ export declare interface IonPicker extends Components.IonPicker {}
inputs: ['color', 'disabled', 'mode', 'value'],
})
export class IonPickerColumn {
protected el: HTMLElement;
protected el: HTMLIonPickerColumnElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1510,7 +1510,7 @@ This event will not emit when programmatically setting the `value` property.
inputs: ['color', 'disabled', 'value'],
})
export class IonPickerColumnOption {
protected el: HTMLElement;
protected el: HTMLIonPickerColumnOptionElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1533,7 +1533,7 @@ export declare interface IonPickerColumnOption extends Components.IonPickerColum
inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
})
export class IonPickerLegacy {
protected el: HTMLElement;
protected el: HTMLIonPickerLegacyElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1595,7 +1595,7 @@ Shorthand for ionPickerDidDismiss.
inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'],
})
export class IonProgressBar {
protected el: HTMLElement;
protected el: HTMLIonProgressBarElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1617,7 +1617,7 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
inputs: ['alignment', 'color', 'disabled', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
})
export class IonRadio {
protected el: HTMLElement;
protected el: HTMLIonRadioElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1649,7 +1649,7 @@ export declare interface IonRadio extends Components.IonRadio {
inputs: ['allowEmptySelection', 'compareWith', 'name', 'value'],
})
export class IonRadioGroup {
protected el: HTMLElement;
protected el: HTMLIonRadioGroupElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1681,7 +1681,7 @@ This event will not emit when programmatically setting the `value` property.
inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
})
export class IonRange {
protected el: HTMLElement;
protected el: HTMLIonRangeElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1743,7 +1743,7 @@ mouse drag, touch gesture, or keyboard interaction.
inputs: ['closeDuration', 'disabled', 'mode', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
})
export class IonRefresher {
protected el: HTMLElement;
protected el: HTMLIonRefresherElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1784,7 +1784,7 @@ called when the async operation has completed.
inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'],
})
export class IonRefresherContent {
protected el: HTMLElement;
protected el: HTMLIonRefresherContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1805,7 +1805,7 @@ export declare interface IonRefresherContent extends Components.IonRefresherCont
inputs: [],
})
export class IonReorder {
protected el: HTMLElement;
protected el: HTMLIonReorderElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1828,7 +1828,7 @@ export declare interface IonReorder extends Components.IonReorder {}
inputs: ['disabled'],
})
export class IonReorderGroup {
protected el: HTMLElement;
protected el: HTMLIonReorderGroupElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1861,7 +1861,7 @@ to be called in order to finalize the reorder action.
inputs: ['type'],
})
export class IonRippleEffect {
protected el: HTMLElement;
protected el: HTMLIonRippleEffectElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1882,7 +1882,7 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
inputs: [],
})
export class IonRow {
protected el: HTMLElement;
protected el: HTMLIonRowElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1905,7 +1905,7 @@ export declare interface IonRow extends Components.IonRow {}
inputs: ['animated', 'autocapitalize', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
})
export class IonSearchbar {
protected el: HTMLElement;
protected el: HTMLIonSearchbarElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1965,7 +1965,7 @@ This event will not emit when programmatically setting the `value` property.
inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'],
})
export class IonSegment {
protected el: HTMLElement;
protected el: HTMLIonSegmentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1997,7 +1997,7 @@ This event will not emit when programmatically setting the `value` property.
inputs: ['contentId', 'disabled', 'layout', 'mode', 'type', 'value'],
})
export class IonSegmentButton {
protected el: HTMLElement;
protected el: HTMLIonSegmentButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2018,7 +2018,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
inputs: [],
})
export class IonSegmentContent {
protected el: HTMLElement;
protected el: HTMLIonSegmentContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2040,7 +2040,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
inputs: ['disabled'],
})
export class IonSegmentView {
protected el: HTMLElement;
protected el: HTMLIonSegmentViewElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2071,7 +2071,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'],
})
export class IonSelect {
protected el: HTMLElement;
protected el: HTMLIonSelectElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2119,7 +2119,7 @@ This event will not emit when programmatically setting the `value` property.
inputs: ['header', 'multiple', 'options'],
})
export class IonSelectModal {
protected el: HTMLElement;
protected el: HTMLIonSelectModalElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2141,7 +2141,7 @@ export declare interface IonSelectModal extends Components.IonSelectModal {}
inputs: ['disabled', 'value'],
})
export class IonSelectOption {
protected el: HTMLElement;
protected el: HTMLIonSelectOptionElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2163,7 +2163,7 @@ export declare interface IonSelectOption extends Components.IonSelectOption {}
inputs: ['animated'],
})
export class IonSkeletonText {
protected el: HTMLElement;
protected el: HTMLIonSkeletonTextElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2185,7 +2185,7 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
inputs: ['color', 'duration', 'name', 'paused'],
})
export class IonSpinner {
protected el: HTMLElement;
protected el: HTMLIonSpinnerElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2207,7 +2207,7 @@ export declare interface IonSpinner extends Components.IonSpinner {}
inputs: ['contentId', 'disabled', 'when'],
})
export class IonSplitPane {
protected el: HTMLElement;
protected el: HTMLIonSplitPaneElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2236,7 +2236,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
inputs: ['component', 'tab'],
})
export class IonTab {
protected el: HTMLElement;
protected el: HTMLIonTabElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2258,7 +2258,7 @@ export declare interface IonTab extends Components.IonTab {}
inputs: ['color', 'mode', 'selectedTab', 'translucent'],
})
export class IonTabBar {
protected el: HTMLElement;
protected el: HTMLIonTabBarElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2280,7 +2280,7 @@ export declare interface IonTabBar extends Components.IonTabBar {}
inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'],
})
export class IonTabButton {
protected el: HTMLElement;
protected el: HTMLIonTabButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2302,7 +2302,7 @@ export declare interface IonTabButton extends Components.IonTabButton {}
inputs: ['color', 'mode'],
})
export class IonText {
protected el: HTMLElement;
protected el: HTMLIonTextElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2325,7 +2325,7 @@ export declare interface IonText extends Components.IonText {}
inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'],
})
export class IonTextarea {
protected el: HTMLElement;
protected el: HTMLIonTextareaElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2376,7 +2376,7 @@ the user clears the textarea by performing a keydown event.
inputs: [],
})
export class IonThumbnail {
protected el: HTMLElement;
protected el: HTMLIonThumbnailElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2398,7 +2398,7 @@ export declare interface IonThumbnail extends Components.IonThumbnail {}
inputs: ['color', 'size'],
})
export class IonTitle {
protected el: HTMLElement;
protected el: HTMLIonTitleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2421,7 +2421,7 @@ export declare interface IonTitle extends Components.IonTitle {}
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger'],
})
export class IonToast {
protected el: HTMLElement;
protected el: HTMLIonToastElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2483,7 +2483,7 @@ Shorthand for ionToastDidDismiss.
inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
})
export class IonToggle {
protected el: HTMLElement;
protected el: HTMLIonToggleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2523,7 +2523,7 @@ This event will not emit when programmatically setting the `checked` property.
inputs: ['color', 'mode'],
})
export class IonToolbar {
protected el: HTMLElement;
protected el: HTMLIonToolbarElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;

148
packages/angular/standalone/src/directives/proxies.ts
View File

@@ -93,7 +93,7 @@ import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/
standalone: true
})
export class IonAccordion {
protected el: HTMLElement;
protected el: HTMLIonAccordionElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -117,7 +117,7 @@ export declare interface IonAccordion extends Components.IonAccordion {}
standalone: true
})
export class IonAccordionGroup {
protected el: HTMLElement;
protected el: HTMLIonAccordionGroupElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -152,7 +152,7 @@ This event will not emit when programmatically setting the `value` property.
standalone: true
})
export class IonActionSheet {
protected el: HTMLElement;
protected el: HTMLIonActionSheetElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -217,7 +217,7 @@ Shorthand for ionActionSheetDidDismiss.
standalone: true
})
export class IonAlert {
protected el: HTMLElement;
protected el: HTMLIonAlertElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -281,7 +281,7 @@ Shorthand for ionAlertDidDismiss.
standalone: true
})
export class IonApp {
protected el: HTMLElement;
protected el: HTMLIonAppElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -304,7 +304,7 @@ export declare interface IonApp extends Components.IonApp {}
standalone: true
})
export class IonAvatar {
protected el: HTMLElement;
protected el: HTMLIonAvatarElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -328,7 +328,7 @@ export declare interface IonAvatar extends Components.IonAvatar {}
standalone: true
})
export class IonBackdrop {
protected el: HTMLElement;
protected el: HTMLIonBackdropElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -358,7 +358,7 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
standalone: true
})
export class IonBadge {
protected el: HTMLElement;
protected el: HTMLIonBadgeElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -382,7 +382,7 @@ export declare interface IonBadge extends Components.IonBadge {}
standalone: true
})
export class IonBreadcrumb {
protected el: HTMLElement;
protected el: HTMLIonBreadcrumbElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -416,7 +416,7 @@ export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
standalone: true
})
export class IonBreadcrumbs {
protected el: HTMLElement;
protected el: HTMLIonBreadcrumbsElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -448,7 +448,7 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
standalone: true
})
export class IonButton {
protected el: HTMLElement;
protected el: HTMLIonButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -482,7 +482,7 @@ export declare interface IonButton extends Components.IonButton {
standalone: true
})
export class IonButtons {
protected el: HTMLElement;
protected el: HTMLIonButtonsElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -506,7 +506,7 @@ export declare interface IonButtons extends Components.IonButtons {}
standalone: true
})
export class IonCard {
protected el: HTMLElement;
protected el: HTMLIonCardElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -530,7 +530,7 @@ export declare interface IonCard extends Components.IonCard {}
standalone: true
})
export class IonCardContent {
protected el: HTMLElement;
protected el: HTMLIonCardContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -554,7 +554,7 @@ export declare interface IonCardContent extends Components.IonCardContent {}
standalone: true
})
export class IonCardHeader {
protected el: HTMLElement;
protected el: HTMLIonCardHeaderElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -578,7 +578,7 @@ export declare interface IonCardHeader extends Components.IonCardHeader {}
standalone: true
})
export class IonCardSubtitle {
protected el: HTMLElement;
protected el: HTMLIonCardSubtitleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -602,7 +602,7 @@ export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
standalone: true
})
export class IonCardTitle {
protected el: HTMLElement;
protected el: HTMLIonCardTitleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -626,7 +626,7 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
standalone: true
})
export class IonChip {
protected el: HTMLElement;
protected el: HTMLIonChipElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -650,7 +650,7 @@ export declare interface IonChip extends Components.IonChip {}
standalone: true
})
export class IonCol {
protected el: HTMLElement;
protected el: HTMLIonColElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -675,7 +675,7 @@ export declare interface IonCol extends Components.IonCol {}
standalone: true
})
export class IonContent {
protected el: HTMLElement;
protected el: HTMLIonContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -719,7 +719,7 @@ Set `scrollEvents` to `true` to enable.
standalone: true
})
export class IonDatetimeButton {
protected el: HTMLElement;
protected el: HTMLIonDatetimeButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -744,7 +744,7 @@ export declare interface IonDatetimeButton extends Components.IonDatetimeButton
standalone: true
})
export class IonFab {
protected el: HTMLElement;
protected el: HTMLIonFabElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -768,7 +768,7 @@ export declare interface IonFab extends Components.IonFab {}
standalone: true
})
export class IonFabButton {
protected el: HTMLElement;
protected el: HTMLIonFabButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -802,7 +802,7 @@ export declare interface IonFabButton extends Components.IonFabButton {
standalone: true
})
export class IonFabList {
protected el: HTMLElement;
protected el: HTMLIonFabListElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -826,7 +826,7 @@ export declare interface IonFabList extends Components.IonFabList {}
standalone: true
})
export class IonFooter {
protected el: HTMLElement;
protected el: HTMLIonFooterElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -850,7 +850,7 @@ export declare interface IonFooter extends Components.IonFooter {}
standalone: true
})
export class IonGrid {
protected el: HTMLElement;
protected el: HTMLIonGridElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -874,7 +874,7 @@ export declare interface IonGrid extends Components.IonGrid {}
standalone: true
})
export class IonHeader {
protected el: HTMLElement;
protected el: HTMLIonHeaderElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -898,7 +898,7 @@ export declare interface IonHeader extends Components.IonHeader {}
standalone: true
})
export class IonImg {
protected el: HTMLElement;
protected el: HTMLIonImgElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -937,7 +937,7 @@ export declare interface IonImg extends Components.IonImg {
standalone: true
})
export class IonInfiniteScroll {
protected el: HTMLElement;
protected el: HTMLIonInfiniteScrollElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -970,7 +970,7 @@ your async operation has completed.
standalone: true
})
export class IonInfiniteScrollContent {
protected el: HTMLElement;
protected el: HTMLIonInfiniteScrollContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -994,7 +994,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
standalone: true
})
export class IonInputPasswordToggle {
protected el: HTMLElement;
protected el: HTMLIonInputPasswordToggleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1018,7 +1018,7 @@ export declare interface IonInputPasswordToggle extends Components.IonInputPassw
standalone: true
})
export class IonItem {
protected el: HTMLElement;
protected el: HTMLIonItemElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1042,7 +1042,7 @@ export declare interface IonItem extends Components.IonItem {}
standalone: true
})
export class IonItemDivider {
protected el: HTMLElement;
protected el: HTMLIonItemDividerElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1065,7 +1065,7 @@ export declare interface IonItemDivider extends Components.IonItemDivider {}
standalone: true
})
export class IonItemGroup {
protected el: HTMLElement;
protected el: HTMLIonItemGroupElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1089,7 +1089,7 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
standalone: true
})
export class IonItemOption {
protected el: HTMLElement;
protected el: HTMLIonItemOptionElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1113,7 +1113,7 @@ export declare interface IonItemOption extends Components.IonItemOption {}
standalone: true
})
export class IonItemOptions {
protected el: HTMLElement;
protected el: HTMLIonItemOptionsElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1144,7 +1144,7 @@ export declare interface IonItemOptions extends Components.IonItemOptions {
standalone: true
})
export class IonItemSliding {
protected el: HTMLElement;
protected el: HTMLIonItemSlidingElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1174,7 +1174,7 @@ export declare interface IonItemSliding extends Components.IonItemSliding {
standalone: true
})
export class IonLabel {
protected el: HTMLElement;
protected el: HTMLIonLabelElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1199,7 +1199,7 @@ export declare interface IonLabel extends Components.IonLabel {}
standalone: true
})
export class IonList {
protected el: HTMLElement;
protected el: HTMLIonListElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1223,7 +1223,7 @@ export declare interface IonList extends Components.IonList {}
standalone: true
})
export class IonListHeader {
protected el: HTMLElement;
protected el: HTMLIonListHeaderElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1248,7 +1248,7 @@ export declare interface IonListHeader extends Components.IonListHeader {}
standalone: true
})
export class IonLoading {
protected el: HTMLElement;
protected el: HTMLIonLoadingElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1313,7 +1313,7 @@ Shorthand for ionLoadingDidDismiss.
standalone: true
})
export class IonMenu {
protected el: HTMLElement;
protected el: HTMLIonMenuElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1357,7 +1357,7 @@ export declare interface IonMenu extends Components.IonMenu {
standalone: true
})
export class IonMenuButton {
protected el: HTMLElement;
protected el: HTMLIonMenuButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1381,7 +1381,7 @@ export declare interface IonMenuButton extends Components.IonMenuButton {}
standalone: true
})
export class IonMenuToggle {
protected el: HTMLElement;
protected el: HTMLIonMenuToggleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1405,7 +1405,7 @@ export declare interface IonMenuToggle extends Components.IonMenuToggle {}
standalone: true
})
export class IonNavLink {
protected el: HTMLElement;
protected el: HTMLIonNavLinkElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1429,7 +1429,7 @@ export declare interface IonNavLink extends Components.IonNavLink {}
standalone: true
})
export class IonNote {
protected el: HTMLElement;
protected el: HTMLIonNoteElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1453,7 +1453,7 @@ export declare interface IonNote extends Components.IonNote {}
standalone: true
})
export class IonPicker {
protected el: HTMLElement;
protected el: HTMLIonPickerElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1478,7 +1478,7 @@ export declare interface IonPicker extends Components.IonPicker {}
standalone: true
})
export class IonPickerColumn {
protected el: HTMLElement;
protected el: HTMLIonPickerColumnElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1512,7 +1512,7 @@ This event will not emit when programmatically setting the `value` property.
standalone: true
})
export class IonPickerColumnOption {
protected el: HTMLElement;
protected el: HTMLIonPickerColumnOptionElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1537,7 +1537,7 @@ export declare interface IonPickerColumnOption extends Components.IonPickerColum
standalone: true
})
export class IonPickerLegacy {
protected el: HTMLElement;
protected el: HTMLIonPickerLegacyElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1601,7 +1601,7 @@ Shorthand for ionPickerDidDismiss.
standalone: true
})
export class IonProgressBar {
protected el: HTMLElement;
protected el: HTMLIonProgressBarElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1625,7 +1625,7 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
standalone: true
})
export class IonRadio {
protected el: HTMLElement;
protected el: HTMLIonRadioElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1660,7 +1660,7 @@ export declare interface IonRadio extends Components.IonRadio {
standalone: true
})
export class IonRefresher {
protected el: HTMLElement;
protected el: HTMLIonRefresherElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1703,7 +1703,7 @@ called when the async operation has completed.
standalone: true
})
export class IonRefresherContent {
protected el: HTMLElement;
protected el: HTMLIonRefresherContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1726,7 +1726,7 @@ export declare interface IonRefresherContent extends Components.IonRefresherCont
standalone: true
})
export class IonReorder {
protected el: HTMLElement;
protected el: HTMLIonReorderElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1751,7 +1751,7 @@ export declare interface IonReorder extends Components.IonReorder {}
standalone: true
})
export class IonReorderGroup {
protected el: HTMLElement;
protected el: HTMLIonReorderGroupElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1786,7 +1786,7 @@ to be called in order to finalize the reorder action.
standalone: true
})
export class IonRippleEffect {
protected el: HTMLElement;
protected el: HTMLIonRippleEffectElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1809,7 +1809,7 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
standalone: true
})
export class IonRow {
protected el: HTMLElement;
protected el: HTMLIonRowElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1833,7 +1833,7 @@ export declare interface IonRow extends Components.IonRow {}
standalone: true
})
export class IonSegmentButton {
protected el: HTMLElement;
protected el: HTMLIonSegmentButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1856,7 +1856,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
standalone: true
})
export class IonSegmentContent {
protected el: HTMLElement;
protected el: HTMLIonSegmentContentElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1880,7 +1880,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
standalone: true
})
export class IonSegmentView {
protected el: HTMLElement;
protected el: HTMLIonSegmentViewElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1912,7 +1912,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
standalone: true
})
export class IonSelectModal {
protected el: HTMLElement;
protected el: HTMLIonSelectModalElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1936,7 +1936,7 @@ export declare interface IonSelectModal extends Components.IonSelectModal {}
standalone: true
})
export class IonSelectOption {
protected el: HTMLElement;
protected el: HTMLIonSelectOptionElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1960,7 +1960,7 @@ export declare interface IonSelectOption extends Components.IonSelectOption {}
standalone: true
})
export class IonSkeletonText {
protected el: HTMLElement;
protected el: HTMLIonSkeletonTextElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -1984,7 +1984,7 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
standalone: true
})
export class IonSpinner {
protected el: HTMLElement;
protected el: HTMLIonSpinnerElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2008,7 +2008,7 @@ export declare interface IonSpinner extends Components.IonSpinner {}
standalone: true
})
export class IonSplitPane {
protected el: HTMLElement;
protected el: HTMLIonSplitPaneElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2039,7 +2039,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
standalone: true
})
export class IonTab {
protected el: HTMLElement;
protected el: HTMLIonTabElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2063,7 +2063,7 @@ export declare interface IonTab extends Components.IonTab {}
standalone: true
})
export class IonTabBar {
protected el: HTMLElement;
protected el: HTMLIonTabBarElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2087,7 +2087,7 @@ export declare interface IonTabBar extends Components.IonTabBar {}
standalone: true
})
export class IonTabButton {
protected el: HTMLElement;
protected el: HTMLIonTabButtonElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2111,7 +2111,7 @@ export declare interface IonTabButton extends Components.IonTabButton {}
standalone: true
})
export class IonText {
protected el: HTMLElement;
protected el: HTMLIonTextElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2134,7 +2134,7 @@ export declare interface IonText extends Components.IonText {}
standalone: true
})
export class IonThumbnail {
protected el: HTMLElement;
protected el: HTMLIonThumbnailElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2158,7 +2158,7 @@ export declare interface IonThumbnail extends Components.IonThumbnail {}
standalone: true
})
export class IonTitle {
protected el: HTMLElement;
protected el: HTMLIonTitleElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2183,7 +2183,7 @@ export declare interface IonTitle extends Components.IonTitle {}
standalone: true
})
export class IonToast {
protected el: HTMLElement;
protected el: HTMLIonToastElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
@@ -2247,7 +2247,7 @@ Shorthand for ionToastDidDismiss.
standalone: true
})
export class IonToolbar {
protected el: HTMLElement;
protected el: HTMLIonToolbarElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;

663
packages/vue/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
packages/vue/package.json
View File

@@ -52,7 +52,9 @@
"@babel/types": "^7.18.4",
"@ionic/eslint-config": "^0.3.0",
"@ionic/prettier-config": "^2.0.0",
"@rollup/plugin-node-resolve": "^16.0.0",
"@rollup/plugin-typescript": "^11.1.5",
"@stencil/vue-output-target": "0.9.4",
"@typescript-eslint/eslint-plugin": "^5.48.2",
"@typescript-eslint/parser": "^5.48.2",
"change-case": "^4.1.1",
@@ -61,8 +63,8 @@
"prettier": "^2.8.3",
"rimraf": "^3.0.2",
"rollup": "^4.2.0",
"typescript": "^4.7.3",
"vue": "3.2.47",
"typescript": "^5.7.3",
"vue": "3.4.38",
"vue-router": "^4.0.16"
},
"dependencies": {

13
packages/vue/rollup.config.mjs
View File

@@ -1,4 +1,6 @@
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
const external = ['vue', 'vue-router'];
export default {
@@ -12,6 +14,13 @@ export default {
sourcemap: true
},
],
plugins: [typescript()],
external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons')
plugins: [
typescript(),
resolve()
],
external: (
id => external.includes(id) ||
id.startsWith('@ionic/core') ||
id.startsWith('ionicons')
)
};

7
packages/vue/scripts/copy-overlays.js
View File

@@ -37,7 +37,7 @@ function generateOverlays() {
let componentImports = [];
let componentDefinitions = [];
components.forEach(component => {
components.sort((a, b) => a.tag.localeCompare(b.tag)).forEach(component => {
const docsBlock = getDocsBlock(component.tag);
const props = getPropsFromDocsBlock(docsBlock);
@@ -57,13 +57,12 @@ export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${comp
* Changes made to this file will be overwritten on build.
*/
import {
import type {
JSX,
} from '@ionic/core/components';
${componentImports.join('\n')}
import { defineOverlayContainer } from '../vue-component-lib/overlays';
import { defineOverlayContainer } from '../utils/overlays';
${componentDefinitions.join('')}
`;

32
packages/vue/src/components/IonApp.ts
View File

@@ -3,20 +3,24 @@ import type { VNode } from "vue";
import { h, defineComponent, shallowRef } from "vue";
const userComponents = shallowRef([]);
export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
defineCustomElement();
return () => {
return h(
"ion-app",
{
...attrs,
},
[slots.default && slots.default(), ...userComponents.value]
);
};
});
IonApp.name = "IonApp";
export const IonApp = /*@__PURE__*/ defineComponent(
(_, { attrs, slots }) => {
defineCustomElement();
return () => {
return h(
"ion-app",
{
name: "IonApp",
...attrs,
},
[slots.default && slots.default(), ...userComponents.value]
);
};
},
{
name: "IonApp",
}
);
/**
* When rendering user components inside of

5
packages/vue/src/components/IonBackButton.ts
View File

@@ -34,7 +34,8 @@ export const IonBackButton = /*@__PURE__*/ defineComponent(
slots.default && slots.default()
);
};
},
{
name: "IonBackButton",
}
);
IonBackButton.name = "IonBackButton";

98
packages/vue/src/components/IonNav.ts
View File

@@ -4,54 +4,56 @@ import { defineComponent, h, shallowRef } from "vue";
import { VueDelegate } from "../framework-delegate";
export const IonNav = /*@__PURE__*/ defineComponent((props) => {
defineCustomElement();
const views = shallowRef([]);
export const IonNav = /*@__PURE__*/ defineComponent(
(props) => {
defineCustomElement();
const views = shallowRef([]);
/**
* Allows us to create the component
* within the Vue application context.
*/
const addView = (component: VNode) =>
(views.value = [...views.value, component]);
const removeView = (component: VNode) =>
(views.value = views.value.filter((cmp) => cmp !== component));
/**
* Allows us to create the component
* within the Vue application context.
*/
const addView = (component: VNode) =>
(views.value = [...views.value, component]);
const removeView = (component: VNode) =>
(views.value = views.value.filter((cmp) => cmp !== component));
const delegate = VueDelegate(addView, removeView);
return () => {
return h("ion-nav", { ...props, delegate }, views.value);
};
});
IonNav.name = "IonNav";
/**
* The default values follow what is defined at
* https://ionicframework.com/docs/api/nav#properties
* otherwise the default values on the Web Component
* may be overridden. For example, if the default animated value
* is not `true` below, then Vue would default the prop to `false`
* which would override the Web Component default of `true`.
*/
IonNav.props = {
animated: {
type: Boolean,
default: true,
const delegate = VueDelegate(addView, removeView);
return () => {
return h("ion-nav", { ...props, delegate }, views.value);
};
},
animation: {
type: Function,
default: undefined,
},
root: {
type: [Function, Object, String],
default: undefined,
},
rootParams: {
type: Object,
default: undefined,
},
swipeGesture: {
type: Boolean,
default: undefined,
},
};
{
name: "IonNav",
/**
* The default values follow what is defined at
* https://ionicframework.com/docs/api/nav#properties
* otherwise the default values on the Web Component
* may be overridden. For example, if the default animated value
* is not `true` below, then Vue would default the prop to `false`
* which would override the Web Component default of `true`.
*/
props: {
animated: {
type: Boolean,
default: true,
},
animation: {
type: Function,
default: undefined,
},
root: {
type: [Function, Object, String],
default: undefined,
},
rootParams: {
type: Object,
default: undefined,
},
swipeGesture: {
type: Boolean,
default: undefined,
},
},
}
);

2
packages/vue/src/components/IonRouterOutlet.ts
View File

@@ -44,7 +44,7 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
let previousMatchedRouteRef: Ref | undefined;
let previousMatchedPath: string | undefined;
provide(viewDepthKey, depth + 1);
provide(viewDepthKey, (depth + 1) as 0);
provide(matchedRouteKey, matchedRouteRef);
const ionRouterOutlet = ref();

4
packages/vue/src/components/IonTabBar.ts
View File

@@ -43,7 +43,7 @@ export const IonTabBar = defineComponent({
data() {
return {
tabState: {
activeTab: undefined,
activeTab: undefined as string | undefined,
tabs: {},
/**
* Passing this prop to each tab button
@@ -52,7 +52,7 @@ export const IonTabBar = defineComponent({
*/
hasRouterOutlet: false,
},
tabVnodes: [],
tabVnodes: [] as VNode[],
/* eslint-disable @typescript-eslint/no-empty-function */
_tabsWillChange: { type: Function, default: () => {} },
_tabsDidChange: { type: Function, default: () => {} },

17
packages/vue/src/components/Overlays.ts
View File

@@ -3,19 +3,18 @@
* Changes made to this file will be overwritten on build.
*/
import {
import type {
JSX,
} from '@ionic/core/components';
import { defineCustomElement as defineIonActionSheetCustomElement } from '@ionic/core/components/ion-action-sheet.js'
import { defineCustomElement as defineIonAlertCustomElement } from '@ionic/core/components/ion-alert.js'
import { defineCustomElement as defineIonLoadingCustomElement } from '@ionic/core/components/ion-loading.js'
import { defineCustomElement as defineIonPickerLegacyCustomElement } from '@ionic/core/components/ion-picker-legacy.js'
import { defineCustomElement as defineIonToastCustomElement } from '@ionic/core/components/ion-toast.js'
import { defineCustomElement as defineIonModalCustomElement } from '@ionic/core/components/ion-modal.js'
import { defineCustomElement as defineIonPickerLegacyCustomElement } from '@ionic/core/components/ion-picker-legacy.js'
import { defineCustomElement as defineIonPopoverCustomElement } from '@ionic/core/components/ion-popover.js'
import { defineCustomElement as defineIonToastCustomElement } from '@ionic/core/components/ion-toast.js'
import { defineOverlayContainer } from '../vue-component-lib/overlays';
import { defineOverlayContainer } from '../utils/overlays';
export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
@@ -23,11 +22,11 @@ export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-
export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
export const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer<JSX.IonPickerLegacy>('ion-picker-legacy', defineIonPickerLegacyCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);
export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true);
export const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer<JSX.IonPickerLegacy>('ion-picker-legacy', defineIonPickerLegacyCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);

126
packages/vue/src/proxies.ts
View File

@@ -1,9 +1,9 @@
/* eslint-disable */
/* tslint:disable */
/* auto-generated vue proxies */
import { defineContainer } from './vue-component-lib/utils';
import { defineContainer } from '@stencil/vue-output-target/runtime';
import type { JSX } from '@ionic/core/components';
import type { JSX } from '@ionic/core';
import { defineCustomElement as defineIonAccordion } from '@ionic/core/components/ion-accordion.js';
import { defineCustomElement as defineIonAccordionGroup } from '@ionic/core/components/ion-accordion-group.js';
@@ -102,6 +102,9 @@ export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionG
'expand',
'ionChange',
'ionValueChange'
], [
'ionChange',
'ionValueChange'
],
'value', 'ion-change');
@@ -114,6 +117,8 @@ export const IonBackdrop = /*@__PURE__*/ defineContainer<JSX.IonBackdrop>('ion-b
'tappable',
'stopPropagation',
'ionBackdropTap'
], [
'ionBackdropTap'
]);
@@ -139,6 +144,10 @@ export const IonBreadcrumb = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumb>('i
'ionFocus',
'ionBlur',
'collapsedClick'
], [
'ionFocus',
'ionBlur',
'collapsedClick'
]);
@@ -148,6 +157,8 @@ export const IonBreadcrumbs = /*@__PURE__*/ defineContainer<JSX.IonBreadcrumbs>(
'itemsBeforeCollapse',
'itemsAfterCollapse',
'ionCollapsedClick'
], [
'ionCollapsedClick'
]);
@@ -170,6 +181,9 @@ export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-butto
'form',
'ionFocus',
'ionBlur'
], [
'ionFocus',
'ionBlur'
]);
@@ -224,6 +238,10 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
'ionChange',
'ionFocus',
'ionBlur'
], [
'ionChange',
'ionFocus',
'ionBlur'
],
'checked', 'ion-change');
@@ -274,6 +292,10 @@ export const IonContent = /*@__PURE__*/ defineContainer<JSX.IonContent>('ion-con
'ionScrollStart',
'ionScroll',
'ionScrollEnd'
], [
'ionScrollStart',
'ionScroll',
'ionScrollEnd'
]);
@@ -315,6 +337,14 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime, JSX.Io
'ionBlur',
'ionStyle',
'ionRender'
], [
'ionCancel',
'ionChange',
'ionValueChange',
'ionFocus',
'ionBlur',
'ionStyle',
'ionRender'
],
'value', 'ion-change');
@@ -351,6 +381,9 @@ export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion
'closeIcon',
'ionFocus',
'ionBlur'
], [
'ionFocus',
'ionBlur'
]);
@@ -383,6 +416,10 @@ export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', defin
'ionImgWillLoad',
'ionImgDidLoad',
'ionError'
], [
'ionImgWillLoad',
'ionImgDidLoad',
'ionError'
]);
@@ -391,6 +428,8 @@ export const IonInfiniteScroll = /*@__PURE__*/ defineContainer<JSX.IonInfiniteSc
'disabled',
'position',
'ionInfinite'
], [
'ionInfinite'
]);
@@ -439,6 +478,11 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput, JSX.IonInput
'ionChange',
'ionBlur',
'ionFocus'
], [
'ionInput',
'ionChange',
'ionBlur',
'ionFocus'
],
'value', 'ion-input');
@@ -492,12 +536,16 @@ export const IonItemOption = /*@__PURE__*/ defineContainer<JSX.IonItemOption>('i
export const IonItemOptions = /*@__PURE__*/ defineContainer<JSX.IonItemOptions>('ion-item-options', defineIonItemOptions, [
'side',
'ionSwipe'
], [
'ionSwipe'
]);
export const IonItemSliding = /*@__PURE__*/ defineContainer<JSX.IonItemSliding>('ion-item-sliding', defineIonItemSliding, [
'disabled',
'ionDrag'
], [
'ionDrag'
]);
@@ -506,6 +554,9 @@ export const IonLabel = /*@__PURE__*/ defineContainer<JSX.IonLabel>('ion-label',
'position',
'ionColor',
'ionStyle'
], [
'ionColor',
'ionStyle'
]);
@@ -534,6 +585,12 @@ export const IonMenu = /*@__PURE__*/ defineContainer<JSX.IonMenu>('ion-menu', de
'ionDidOpen',
'ionDidClose',
'ionMenuChange'
], [
'ionWillOpen',
'ionWillClose',
'ionDidOpen',
'ionDidClose',
'ionMenuChange'
]);
@@ -562,6 +619,10 @@ export const IonNav = /*@__PURE__*/ defineContainer<JSX.IonNav>('ion-nav', defin
'ionNavWillLoad',
'ionNavWillChange',
'ionNavDidChange'
], [
'ionNavWillLoad',
'ionNavWillChange',
'ionNavDidChange'
]);
@@ -580,6 +641,8 @@ export const IonNote = /*@__PURE__*/ defineContainer<JSX.IonNote>('ion-note', de
export const IonPicker = /*@__PURE__*/ defineContainer<JSX.IonPicker>('ion-picker', defineIonPicker, [
'ionInputModeChange'
], [
'ionInputModeChange'
]);
@@ -589,6 +652,8 @@ export const IonPickerColumn = /*@__PURE__*/ defineContainer<JSX.IonPickerColumn
'color',
'numericInput',
'ionChange'
], [
'ionChange'
]);
@@ -618,6 +683,9 @@ export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio, JSX.IonRadio
'alignment',
'ionFocus',
'ionBlur'
], [
'ionFocus',
'ionBlur'
],
'value', 'ion-change');
@@ -629,6 +697,9 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup, JS
'value',
'ionChange',
'ionValueChange'
], [
'ionChange',
'ionValueChange'
],
'value', 'ion-change');
@@ -656,6 +727,13 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange, JSX.IonRange
'ionBlur',
'ionKnobMoveStart',
'ionKnobMoveEnd'
], [
'ionChange',
'ionInput',
'ionFocus',
'ionBlur',
'ionKnobMoveStart',
'ionKnobMoveEnd'
],
'value', 'ion-input');
@@ -670,6 +748,10 @@ export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion
'ionRefresh',
'ionPull',
'ionStart'
], [
'ionRefresh',
'ionPull',
'ionStart'
]);
@@ -687,6 +769,8 @@ export const IonReorder = /*@__PURE__*/ defineContainer<JSX.IonReorder>('ion-reo
export const IonReorderGroup = /*@__PURE__*/ defineContainer<JSX.IonReorderGroup>('ion-reorder-group', defineIonReorderGroup, [
'disabled',
'ionItemReorder'
], [
'ionItemReorder'
]);
@@ -728,6 +812,14 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar, JSX.
'ionBlur',
'ionFocus',
'ionStyle'
], [
'ionInput',
'ionChange',
'ionCancel',
'ionClear',
'ionBlur',
'ionFocus',
'ionStyle'
],
'value', 'ion-input');
@@ -742,6 +834,10 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment, JSX.IonS
'ionChange',
'ionSelect',
'ionStyle'
], [
'ionChange',
'ionSelect',
'ionStyle'
],
'value', 'ion-change');
@@ -752,7 +848,7 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
'layout',
'type',
'value'
],
], [],
'value', 'ion-change');
@@ -762,6 +858,8 @@ export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentCon
export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [
'disabled',
'ionSegmentViewScroll'
], [
'ionSegmentViewScroll'
]);
@@ -791,6 +889,13 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect, JSX.IonSel
'ionFocus',
'ionBlur',
'ionStyle'
], [
'ionChange',
'ionCancel',
'ionDismiss',
'ionFocus',
'ionBlur',
'ionStyle'
],
'value', 'ion-change');
@@ -811,6 +916,8 @@ export const IonSelectOption = /*@__PURE__*/ defineContainer<JSX.IonSelectOption
export const IonSkeletonText = /*@__PURE__*/ defineContainer<JSX.IonSkeletonText>('ion-skeleton-text', defineIonSkeletonText, [
'animated',
'ionStyle'
], [
'ionStyle'
]);
@@ -827,6 +934,8 @@ export const IonSplitPane = /*@__PURE__*/ defineContainer<JSX.IonSplitPane>('ion
'disabled',
'when',
'ionSplitPaneVisible'
], [
'ionSplitPaneVisible'
]);
@@ -876,6 +985,11 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea, JSX.Io
'ionInput',
'ionBlur',
'ionFocus'
], [
'ionChange',
'ionInput',
'ionBlur',
'ionFocus'
],
'value', 'ion-input');
@@ -887,6 +1001,8 @@ export const IonTitle = /*@__PURE__*/ defineContainer<JSX.IonTitle>('ion-title',
'color',
'size',
'ionStyle'
], [
'ionStyle'
]);
@@ -903,6 +1019,10 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle, JSX.IonTog
'ionChange',
'ionFocus',
'ionBlur'
], [
'ionChange',
'ionFocus',
'ionBlur'
],
'checked', 'ion-change');

143
packages/vue/src/vue-component-lib/overlays.ts → packages/vue/src/utils/overlays.ts
View File

@@ -1,4 +1,5 @@
import { defineComponent, h, ref, VNode, onMounted } from 'vue';
import type { VNode, ComponentOptions } from "vue";
import { defineComponent, h, ref, onMounted } from "vue";
// TODO(FW-2969): types
@@ -9,15 +10,20 @@ export interface OverlayProps {
const EMPTY_PROP = Symbol();
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
export const defineOverlayContainer = <Props extends object>(name: string, defineCustomElement: () => void, componentProps: string[] = [], hasDelegateHost?: boolean, controller?: any) => {
const createControllerComponent = () => {
export const defineOverlayContainer = <Props extends object>(
name: string,
defineCustomElement: () => void,
componentProps: string[] = [],
hasDelegateHost?: boolean,
controller?: any
) => {
const createControllerComponent = (options: ComponentOptions) => {
return defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
const eventListeners = [
{ componentEv: `${name}-will-present`, frameworkEv: 'willPresent' },
{ componentEv: `${name}-did-present`, frameworkEv: 'didPresent' },
{ componentEv: `${name}-will-dismiss`, frameworkEv: 'willDismiss' },
{ componentEv: `${name}-did-dismiss`, frameworkEv: 'didDismiss' },
{ componentEv: `${name}-will-present`, frameworkEv: "willPresent" },
{ componentEv: `${name}-did-present`, frameworkEv: "didPresent" },
{ componentEv: `${name}-will-dismiss`, frameworkEv: "willDismiss" },
{ componentEv: `${name}-did-dismiss`, frameworkEv: "didDismiss" },
];
if (defineCustomElement !== undefined) {
@@ -27,8 +33,8 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
const overlay = ref();
const onVnodeMounted = async () => {
const isOpen = props.isOpen;
isOpen && (await present(props))
}
isOpen && (await present(props));
};
const onVnodeUpdated = async (node: VNode, prevNode: VNode) => {
const isOpen = node.props!.isOpen;
@@ -45,11 +51,11 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
} else {
await dismiss();
}
}
};
const onVnodeBeforeUnmount = async () => {
await dismiss();
}
};
const dismiss = async () => {
if (!overlay.value) return;
@@ -61,7 +67,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
await overlay.value;
overlay.value = undefined;
}
};
const present = async (props: Readonly<Props>) => {
/**
@@ -77,7 +83,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
return;
}
let restOfProps: any = {};
const restOfProps: Record<string, unknown> = {};
/**
* We can use Object.entries here
@@ -87,7 +93,10 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
*/
for (const key in props) {
const value = props[key] as any;
if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
if (
Object.prototype.hasOwnProperty.call(props, key) &&
value !== EMPTY_PROP
) {
restOfProps[key] = value;
}
}
@@ -104,35 +113,32 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
const component = slots.default && slots.default()[0];
overlay.value = controller.create({
...restOfProps,
component
component,
});
overlay.value = await overlay.value;
eventListeners.forEach(eventListener => {
eventListeners.forEach((eventListener) => {
overlay.value.addEventListener(eventListener.componentEv, () => {
emit(eventListener.frameworkEv);
});
})
});
await overlay.value.present();
}
};
return () => {
return h(
'div',
{
style: { display: 'none' },
onVnodeMounted,
onVnodeUpdated,
onVnodeBeforeUnmount,
isOpen: props.isOpen === true
}
);
}
});
return h("div", {
style: { display: "none" },
onVnodeMounted,
onVnodeUpdated,
onVnodeBeforeUnmount,
isOpen: props.isOpen === true,
});
};
}, options);
};
const createInlineComponent = () => {
const createInlineComponent = (options: any) => {
return defineComponent((props, { slots }) => {
if (defineCustomElement !== undefined) {
defineCustomElement();
@@ -141,13 +147,22 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
const elementRef = ref();
onMounted(() => {
elementRef.value.addEventListener('ion-mount', () => isOpen.value = true);
elementRef.value.addEventListener('will-present', () => isOpen.value = true);
elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false);
elementRef.value.addEventListener(
"ion-mount",
() => (isOpen.value = true)
);
elementRef.value.addEventListener(
"will-present",
() => (isOpen.value = true)
);
elementRef.value.addEventListener(
"did-dismiss",
() => (isOpen.value = false)
);
});
return () => {
let restOfProps: any = {};
const restOfProps: Record<string, unknown> = {};
/**
* We can use Object.entries here
@@ -157,7 +172,10 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
*/
for (const key in props) {
const value = (props as any)[key];
if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
if (
Object.prototype.hasOwnProperty.call(props, key) &&
value !== EMPTY_PROP
) {
restOfProps[key] = value;
}
}
@@ -168,11 +186,11 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
*/
const renderChildren = () => {
if (hasDelegateHost) {
return h('div', { className: 'ion-delegate-host ion-page' }, slots);
return h("div", { className: "ion-delegate-host ion-page" }, slots);
}
return slots;
}
};
return h(
name,
@@ -184,27 +202,32 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
* the value of the prop will be the empty string which is
* why we still call renderChildren() in that case.
*/
(isOpen.value || restOfProps.keepContentsMounted || restOfProps.keepContentsMounted === '') ? renderChildren() : undefined
)
}
});
}
const Container = (controller !== undefined) ? createControllerComponent() : createInlineComponent();
Container.name = name;
Container.props = {
'isOpen': DEFAULT_EMPTY_PROP
isOpen.value ||
restOfProps.keepContentsMounted ||
restOfProps.keepContentsMounted === ""
? renderChildren()
: undefined
);
};
}, options);
};
componentProps.forEach(componentProp => {
Container.props[componentProp] = DEFAULT_EMPTY_PROP;
});
const options: ComponentOptions = {
name,
props: {
isOpen: DEFAULT_EMPTY_PROP,
...componentProps.reduce((acc, prop) => {
acc[prop] = DEFAULT_EMPTY_PROP;
return acc;
}, {} as Record<string, unknown>),
},
emits:
typeof controller !== "undefined"
? ["willPresent", "didPresent", "willDismiss", "didDismiss"]
: undefined,
};
if (controller !== undefined) {
Container.emits = ['willPresent', 'didPresent', 'willDismiss', 'didDismiss'];
}
return Container;
}
return controller !== undefined
? createControllerComponent(options)
: createInlineComponent(options);
};

236
packages/vue/src/vue-component-lib/utils.ts
View File

@@ -1,236 +0,0 @@
// @ts-nocheck
// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
import { defineComponent, getCurrentInstance, h, inject, ref, Ref, withDirectives } from 'vue';
export interface InputProps<T> {
modelValue?: T;
}
const UPDATE_VALUE_EVENT = 'update:modelValue';
const MODEL_VALUE = 'modelValue';
const ROUTER_LINK_VALUE = 'routerLink';
const NAV_MANAGER = 'navManager';
const ROUTER_PROP_PREFIX = 'router';
const ARIA_PROP_PREFIX = 'aria';
/**
* Starting in Vue 3.1.0, all properties are
* added as keys to the props object, even if
* they are not being used. In order to correctly
* account for both value props and v-model props,
* we need to check if the key exists for Vue <3.1.0
* and then check if it is not undefined for Vue >= 3.1.0.
* See https://github.com/vuejs/vue-next/issues/3889
*/
const EMPTY_PROP = Symbol();
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
interface NavManager<T = any> {
navigate: (options: T) => void;
}
const getComponentClasses = (classes: unknown) => {
return (classes as string)?.split(' ') || [];
};
const getElementClasses = (
ref: Ref<HTMLElement | undefined>,
componentClasses: Set<string>,
defaultClasses: string[] = []
) => {
return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter(
(c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
);
};
/**
* Create a callback to define a Vue component wrapper around a Web Component.
*
* @prop name - The component tag name (i.e. `ion-button`)
* @prop componentProps - An array of properties on the
* component. These usually match up with the @Prop definitions
* in each component's TSX file.
* @prop customElement - An option custom element instance to pass
* to customElements.define. Only set if `includeImportCustomElements: true` in your config.
* @prop modelProp - The prop that v-model binds to (i.e. value)
* @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
*/
export const defineContainer = <Props, VModelType = string | number | boolean>(
name: string,
defineCustomElement: any,
componentProps: string[] = [],
modelProp?: string,
modelUpdateEvent?: string
) => {
/**
* Create a Vue component wrapper around a Web Component.
* Note: The `props` here are not all properties on a component.
* They refer to whatever properties are set on an instance of a component.
*/
if (defineCustomElement !== undefined) {
defineCustomElement();
}
const Container = defineComponent<Props & InputProps<VModelType>>((props, { attrs, slots, emit }) => {
let modelPropValue = props[modelProp];
const containerRef = ref<HTMLElement>();
const classes = new Set(getComponentClasses(attrs.class));
/**
* This directive is responsible for updating any reactive
* reference associated with v-model on the component.
* This code must be run inside of the "created" callback.
* Since the following listener callbacks as well as any potential
* event callback defined in the developer's app are set on
* the same element, we need to make sure the following callbacks
* are set first so they fire first. If the developer's callback fires first
* then the reactive reference will not have been updated yet.
*/
const vModelDirective = {
created: (el: HTMLElement) => {
const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
eventsNames.forEach((eventName: string) => {
el.addEventListener(eventName.toLowerCase(), (e: Event) => {
/**
* Only update the v-model binding if the event's target is the element we are
* listening on. For example, Component A could emit ionChange, but it could also
* have a descendant Component B that also emits ionChange. We only want to update
* the v-model for Component A when ionChange originates from that element and not
* when ionChange bubbles up from Component B.
*/
if (e.target.tagName === el.tagName) {
modelPropValue = (e?.target as any)[modelProp];
emit(UPDATE_VALUE_EVENT, modelPropValue);
}
});
});
},
};
const currentInstance = getCurrentInstance();
const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
const handleRouterLink = (ev: Event) => {
const { routerLink } = props;
if (routerLink === EMPTY_PROP) return;
if (navManager !== undefined) {
/**
* This prevents the browser from
* performing a page reload when pressing
* an Ionic component with routerLink.
* The page reload interferes with routing
* and causes ion-back-button to disappear
* since the local history is wiped on reload.
*/
ev.preventDefault();
let navigationPayload: any = { event: ev };
for (const key in props) {
const value = props[key];
if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
navigationPayload[key] = value;
}
}
navManager.navigate(navigationPayload);
} else {
console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
}
};
return () => {
modelPropValue = props[modelProp];
getComponentClasses(attrs.class).forEach((value) => {
classes.add(value);
});
const oldClick = props.onClick;
const handleClick = (ev: Event) => {
if (oldClick !== undefined) {
oldClick(ev);
}
if (!ev.defaultPrevented) {
handleRouterLink(ev);
}
};
let propsToAdd: any = {
ref: containerRef,
class: getElementClasses(containerRef, classes),
onClick: handleClick,
};
/**
* We can use Object.entries here
* to avoid the hasOwnProperty check,
* but that would require 2 iterations
* where as this only requires 1.
*/
for (const key in props) {
const value = props[key];
if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
propsToAdd[key] = value;
}
}
if (modelProp) {
/**
* If form value property was set using v-model
* then we should use that value.
* Otherwise, check to see if form value property
* was set as a static value (i.e. no v-model).
*/
if (props[MODEL_VALUE] !== EMPTY_PROP) {
propsToAdd = {
...propsToAdd,
[modelProp]: props[MODEL_VALUE],
};
} else if (modelPropValue !== EMPTY_PROP) {
propsToAdd = {
...propsToAdd,
[modelProp]: modelPropValue,
};
}
}
// If router link is defined, add href to props
// in order to properly render an anchor tag inside
// of components that should become activatable and
// focusable with router link.
if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
propsToAdd = {
...propsToAdd,
href: props[ROUTER_LINK_VALUE],
};
}
/**
* vModelDirective is only needed on components that support v-model.
* As a result, we conditionally call withDirectives with v-model components.
*/
const node = h(name, propsToAdd, slots.default && slots.default());
return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
};
});
if (typeof Container !== 'function') {
Container.name = name;
Container.props = {
[ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
};
componentProps.forEach((componentProp) => {
Container.props[componentProp] = DEFAULT_EMPTY_PROP;
});
if (modelProp) {
Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
Container.emits = [UPDATE_VALUE_EVENT];
}
}
return Container;
};

4
packages/vue/tsconfig.json
View File

@@ -7,8 +7,8 @@
"experimentalDecorators": true,
"esModuleInterop": true,
"lib": ["dom", "es2020"],
"module": "es2015",
"moduleResolution": "node",
"module": "ES2020",
"moduleResolution": "bundler",
"noImplicitAny": true,
"noImplicitReturns": false,
"noUnusedLocals": true,