@ionic/vue 8.4.3-dev.11738077091.1746b338 → 8.4.3-nightly.20250124

package/dist/index.js

@@ -89,11 +89,13 @@ import { defineCustomElement as defineCustomElement$1j } from 'ionicons/componen
 import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-action-sheet.js';
 import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-alert.js';
 import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-loading.js';
-import { defineCustomElement as defineCustomElement$1n } from '@ionic/core/components/ion-modal.js';
-import { defineCustomElement as defineCustomElement$1o } from '@ionic/core/components/ion-picker-legacy.js';
-import { defineCustomElement as defineCustomElement$1p } from '@ionic/core/components/ion-popover.js';
-import { defineCustomElement as defineCustomElement$1q } from '@ionic/core/components/ion-toast.js';
+import { defineCustomElement as defineCustomElement$1n } from '@ionic/core/components/ion-picker-legacy.js';
+import { defineCustomElement as defineCustomElement$1o } from '@ionic/core/components/ion-toast.js';
+import { defineCustomElement as defineCustomElement$1p } from '@ionic/core/components/ion-modal.js';
+import { defineCustomElement as defineCustomElement$1q } from '@ionic/core/components/ion-popover.js';
 
+// @ts-nocheck
+// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
 const UPDATE_VALUE_EVENT = 'update:modelValue';
 const MODEL_VALUE = 'modelValue';
 const ROUTER_LINK_VALUE = 'routerLink';
@@ -112,10 +114,11 @@ const ARIA_PROP_PREFIX = 'aria';
 const EMPTY_PROP$1 = Symbol();
 const DEFAULT_EMPTY_PROP$1 = { default: EMPTY_PROP$1 };
 const getComponentClasses = (classes) => {
-    return classes?.split(' ') || [];
+    return (classes === null || classes === void 0 ? void 0 : classes.split(' ')) || [];
 };
 const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
-    return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter((c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
+    var _a;
+    return [...Array.from(((_a = ref.value) === null || _a === void 0 ? void 0 : _a.classList) || []), ...defaultClasses].filter((c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
 };
 /**
  * Create a callback to define a Vue component wrapper around a Web Component.
@@ -124,15 +127,12 @@ const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
  * @prop componentProps - An array of properties on the
  * component. These usually match up with the @Prop definitions
  * in each component's TSX file.
- * @prop emitProps - An array of for event listener on the Component.
- * these usually match up with the @Event definitions
- * in each compont'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)
  */
-const defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent) => {
+const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
     /**
      * Create a Vue component wrapper around a Web Component.
      * Note: The `props` here are not all properties on a component.
@@ -142,7 +142,8 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
         defineCustomElement();
     }
     const Container = defineComponent((props, { attrs, slots, emit }) => {
-        let modelPropValue = modelProp ? props[modelProp] : undefined;
+        var _a;
+        let modelPropValue = props[modelProp];
         const containerRef = ref();
         const classes = new Set(getComponentClasses(attrs.class));
         /**
@@ -167,25 +168,16 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
                          * 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 && modelProp) {
-                            modelPropValue = (e?.target)[modelProp];
+                        if (e.target.tagName === el.tagName) {
+                            modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[modelProp];
                             emit(UPDATE_VALUE_EVENT, modelPropValue);
                         }
                     });
                 });
-                /**
-                 * we register the event emmiter for @Event definitions
-                 * so we can use @event
-                 */
-                emitProps.forEach((eventName) => {
-                    el.addEventListener(eventName, (e) => {
-                        emit(eventName, e);
-                    });
-                });
             },
         };
         const currentInstance = getCurrentInstance();
-        const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
+        const hasRouter = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.appContext) === null || _a === void 0 ? void 0 : _a.provides[NAV_MANAGER];
         const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
         const handleRouterLink = (ev) => {
             const { routerLink } = props;
@@ -219,7 +211,6 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
             getComponentClasses(attrs.class).forEach((value) => {
                 classes.add(value);
             });
-            // @ts-expect-error
             const oldClick = props.onClick;
             const handleClick = (ev) => {
                 if (oldClick !== undefined) {
@@ -245,14 +236,6 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
                 if ((props.hasOwnProperty(key) && value !== EMPTY_PROP$1) || key.startsWith(ARIA_PROP_PREFIX)) {
                     propsToAdd[key] = value;
                 }
-                /**
-                 * register event handlers on the component
-                 */
-                const eventHandlerKey = 'on' + key.slice(0, 1).toUpperCase() + key.slice(1);
-                const eventHandler = attrs[eventHandlerKey];
-                if (containerRef.value && attrs.hasOwnProperty(eventHandlerKey) && 'addEventListener' in containerRef.value) {
-                    containerRef.value.addEventListener(key, eventHandler);
-                }
             }
             if (modelProp) {
                 /**
@@ -262,27 +245,18 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
                  * was set as a static value (i.e. no v-model).
                  */
                 if (props[MODEL_VALUE] !== EMPTY_PROP$1) {
-                    propsToAdd = {
-                        ...propsToAdd,
-                        [modelProp]: props[MODEL_VALUE],
-                    };
+                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: props[MODEL_VALUE] });
                 }
                 else if (modelPropValue !== EMPTY_PROP$1) {
-                    propsToAdd = {
-                        ...propsToAdd,
-                        [modelProp]: modelPropValue,
-                    };
+                    propsToAdd = Object.assign(Object.assign({}, 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 (ROUTER_LINK_VALUE in props && props[ROUTER_LINK_VALUE] !== EMPTY_PROP$1) {
-                propsToAdd = {
-                    ...propsToAdd,
-                    href: props[ROUTER_LINK_VALUE],
-                };
+            if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP$1) {
+                propsToAdd = Object.assign(Object.assign({}, propsToAdd), { href: props[ROUTER_LINK_VALUE] });
             }
             /**
              * vModelDirective is only needed on components that support v-model.
@@ -293,27 +267,17 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
         };
     });
     if (typeof Container !== 'function') {
-        let emits = [];
-        let props = {};
-        props[ROUTER_LINK_VALUE] = DEFAULT_EMPTY_PROP$1;
-        componentProps.forEach((componentProp) => (props[componentProp] = DEFAULT_EMPTY_PROP$1));
-        emits = emitProps;
+        Container.name = name;
+        Container.props = {
+            [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP$1,
+        };
+        componentProps.forEach((componentProp) => {
+            Container.props[componentProp] = DEFAULT_EMPTY_PROP$1;
+        });
         if (modelProp) {
-            props[MODEL_VALUE] = DEFAULT_EMPTY_PROP$1;
-            emits.push(UPDATE_VALUE_EVENT);
+            Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP$1;
+            Container.emits = [UPDATE_VALUE_EVENT];
         }
-        /**
-         * Add emit props to the component.
-         * This is necessary for Vue to know
-         * which events to listen to.
-         * @see https://v3.vuejs.org/guide/component-custom-events.html#event-names
-         */
-        // @ts-expect-error
-        Container.name = name;
-        // @ts-expect-error
-        Container.emits = emits;
-        // @ts-expect-error
-        Container.props = props;
     }
     return Container;
 };
@@ -337,9 +301,6 @@ const IonAccordionGroup = /*@__PURE__*/ defineContainer('ion-accordion-group', d
     'expand',
     'ionChange',
     'ionValueChange'
-], [
-    'ionChange',
-    'ionValueChange'
 ], 'value', 'ion-change');
 const IonAvatar = /*@__PURE__*/ defineContainer('ion-avatar', defineCustomElement$2);
 const IonBackdrop = /*@__PURE__*/ defineContainer('ion-backdrop', defineCustomElement$3, [
@@ -347,8 +308,6 @@ const IonBackdrop = /*@__PURE__*/ defineContainer('ion-backdrop', defineCustomEl
     'tappable',
     'stopPropagation',
     'ionBackdropTap'
-], [
-    'ionBackdropTap'
 ]);
 const IonBadge = /*@__PURE__*/ defineContainer('ion-badge', defineCustomElement$4, [
     'color'
@@ -370,10 +329,6 @@ const IonBreadcrumb = /*@__PURE__*/ defineContainer('ion-breadcrumb', defineCust
     'ionFocus',
     'ionBlur',
     'collapsedClick'
-], [
-    'ionFocus',
-    'ionBlur',
-    'collapsedClick'
 ]);
 const IonBreadcrumbs = /*@__PURE__*/ defineContainer('ion-breadcrumbs', defineCustomElement$6, [
     'color',
@@ -381,8 +336,6 @@ const IonBreadcrumbs = /*@__PURE__*/ defineContainer('ion-breadcrumbs', defineCu
     'itemsBeforeCollapse',
     'itemsAfterCollapse',
     'ionCollapsedClick'
-], [
-    'ionCollapsedClick'
 ]);
 const IonButton = /*@__PURE__*/ defineContainer('ion-button', defineCustomElement$7, [
     'color',
@@ -403,9 +356,6 @@ const IonButton = /*@__PURE__*/ defineContainer('ion-button', defineCustomElemen
     'form',
     'ionFocus',
     'ionBlur'
-], [
-    'ionFocus',
-    'ionBlur'
 ]);
 const IonButtons = /*@__PURE__*/ defineContainer('ion-buttons', defineCustomElement$8, [
     'collapse'
@@ -446,10 +396,6 @@ const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineCustomEl
     'ionChange',
     'ionFocus',
     'ionBlur'
-], [
-    'ionChange',
-    'ionFocus',
-    'ionBlur'
 ], 'checked', 'ion-change');
 const IonChip = /*@__PURE__*/ defineContainer('ion-chip', defineCustomElement$f, [
     'color',
@@ -493,10 +439,6 @@ const IonContent = /*@__PURE__*/ defineContainer('ion-content', defineCustomElem
     'ionScrollStart',
     'ionScroll',
     'ionScrollEnd'
-], [
-    'ionScrollStart',
-    'ionScroll',
-    'ionScrollEnd'
 ]);
 const IonDatetime = /*@__PURE__*/ defineContainer('ion-datetime', defineCustomElement$i, [
     'color',
@@ -536,14 +478,6 @@ const IonDatetime = /*@__PURE__*/ defineContainer('ion-datetime', defineCustomEl
     'ionBlur',
     'ionStyle',
     'ionRender'
-], [
-    'ionCancel',
-    'ionChange',
-    'ionValueChange',
-    'ionFocus',
-    'ionBlur',
-    'ionStyle',
-    'ionRender'
 ], 'value', 'ion-change');
 const IonDatetimeButton = /*@__PURE__*/ defineContainer('ion-datetime-button', defineCustomElement$j, [
     'color',
@@ -573,9 +507,6 @@ const IonFabButton = /*@__PURE__*/ defineContainer('ion-fab-button', defineCusto
     'closeIcon',
     'ionFocus',
     'ionBlur'
-], [
-    'ionFocus',
-    'ionBlur'
 ]);
 const IonFabList = /*@__PURE__*/ defineContainer('ion-fab-list', defineCustomElement$m, [
     'activated',
@@ -598,18 +529,12 @@ const IonImg = /*@__PURE__*/ defineContainer('ion-img', defineCustomElement$q, [
     'ionImgWillLoad',
     'ionImgDidLoad',
     'ionError'
-], [
-    'ionImgWillLoad',
-    'ionImgDidLoad',
-    'ionError'
 ]);
 const IonInfiniteScroll = /*@__PURE__*/ defineContainer('ion-infinite-scroll', defineCustomElement$r, [
     'threshold',
     'disabled',
     'position',
     'ionInfinite'
-], [
-    'ionInfinite'
 ]);
 const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer('ion-infinite-scroll-content', defineCustomElement$s, [
     'loadingSpinner',
@@ -654,11 +579,6 @@ const IonInput = /*@__PURE__*/ defineContainer('ion-input', defineCustomElement$
     'ionChange',
     'ionBlur',
     'ionFocus'
-], [
-    'ionInput',
-    'ionChange',
-    'ionBlur',
-    'ionFocus'
 ], 'value', 'ion-input');
 const IonInputPasswordToggle = /*@__PURE__*/ defineContainer('ion-input-password-toggle', defineCustomElement$u, [
     'color',
@@ -699,23 +619,16 @@ const IonItemOption = /*@__PURE__*/ defineContainer('ion-item-option', defineCus
 const IonItemOptions = /*@__PURE__*/ defineContainer('ion-item-options', defineCustomElement$z, [
     'side',
     'ionSwipe'
-], [
-    'ionSwipe'
 ]);
 const IonItemSliding = /*@__PURE__*/ defineContainer('ion-item-sliding', defineCustomElement$A, [
     'disabled',
     'ionDrag'
-], [
-    'ionDrag'
 ]);
 const IonLabel = /*@__PURE__*/ defineContainer('ion-label', defineCustomElement$B, [
     'color',
     'position',
     'ionColor',
     'ionStyle'
-], [
-    'ionColor',
-    'ionStyle'
 ]);
 const IonList = /*@__PURE__*/ defineContainer('ion-list', defineCustomElement$C, [
     'lines',
@@ -738,12 +651,6 @@ const IonMenu = /*@__PURE__*/ defineContainer('ion-menu', defineCustomElement$E,
     'ionDidOpen',
     'ionDidClose',
     'ionMenuChange'
-], [
-    'ionWillOpen',
-    'ionWillClose',
-    'ionDidOpen',
-    'ionDidClose',
-    'ionMenuChange'
 ]);
 const IonMenuButton = /*@__PURE__*/ defineContainer('ion-menu-button', defineCustomElement$F, [
     'color',
@@ -767,8 +674,6 @@ const IonNote = /*@__PURE__*/ defineContainer('ion-note', defineCustomElement$I,
 ]);
 const IonPicker = /*@__PURE__*/ defineContainer('ion-picker', defineCustomElement$J, [
     'ionInputModeChange'
-], [
-    'ionInputModeChange'
 ]);
 const IonPickerColumn = /*@__PURE__*/ defineContainer('ion-picker-column', defineCustomElement$K, [
     'disabled',
@@ -776,8 +681,6 @@ const IonPickerColumn = /*@__PURE__*/ defineContainer('ion-picker-column', defin
     'color',
     'numericInput',
     'ionChange'
-], [
-    'ionChange'
 ]);
 const IonPickerColumnOption = /*@__PURE__*/ defineContainer('ion-picker-column-option', defineCustomElement$L, [
     'disabled',
@@ -801,9 +704,6 @@ const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', defineCustomElement$
     'alignment',
     'ionFocus',
     'ionBlur'
-], [
-    'ionFocus',
-    'ionBlur'
 ], 'value', 'ion-change');
 const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-radio-group', defineCustomElement$O, [
     'allowEmptySelection',
@@ -812,9 +712,6 @@ const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-radio-group', defineCus
     'value',
     'ionChange',
     'ionValueChange'
-], [
-    'ionChange',
-    'ionValueChange'
 ], 'value', 'ion-change');
 const IonRange = /*@__PURE__*/ defineContainer('ion-range', defineCustomElement$P, [
     'color',
@@ -839,13 +736,6 @@ const IonRange = /*@__PURE__*/ defineContainer('ion-range', defineCustomElement$
     'ionBlur',
     'ionKnobMoveStart',
     'ionKnobMoveEnd'
-], [
-    'ionChange',
-    'ionInput',
-    'ionFocus',
-    'ionBlur',
-    'ionKnobMoveStart',
-    'ionKnobMoveEnd'
 ], 'value', 'ion-input');
 const IonRefresher = /*@__PURE__*/ defineContainer('ion-refresher', defineCustomElement$Q, [
     'pullMin',
@@ -857,10 +747,6 @@ const IonRefresher = /*@__PURE__*/ defineContainer('ion-refresher', defineCustom
     'ionRefresh',
     'ionPull',
     'ionStart'
-], [
-    'ionRefresh',
-    'ionPull',
-    'ionStart'
 ]);
 const IonRefresherContent = /*@__PURE__*/ defineContainer('ion-refresher-content', defineCustomElement$R, [
     'pullingIcon',
@@ -872,8 +758,6 @@ const IonReorder = /*@__PURE__*/ defineContainer('ion-reorder', defineCustomElem
 const IonReorderGroup = /*@__PURE__*/ defineContainer('ion-reorder-group', defineCustomElement$T, [
     'disabled',
     'ionItemReorder'
-], [
-    'ionItemReorder'
 ]);
 const IonRippleEffect = /*@__PURE__*/ defineContainer('ion-ripple-effect', defineCustomElement$U, [
     'type'
@@ -909,14 +793,6 @@ const IonSearchbar = /*@__PURE__*/ defineContainer('ion-searchbar', defineCustom
     'ionBlur',
     'ionFocus',
     'ionStyle'
-], [
-    'ionInput',
-    'ionChange',
-    'ionCancel',
-    'ionClear',
-    'ionBlur',
-    'ionFocus',
-    'ionStyle'
 ], 'value', 'ion-input');
 const IonSegment = /*@__PURE__*/ defineContainer('ion-segment', defineCustomElement$X, [
     'color',
@@ -928,10 +804,6 @@ const IonSegment = /*@__PURE__*/ defineContainer('ion-segment', defineCustomElem
     'ionChange',
     'ionSelect',
     'ionStyle'
-], [
-    'ionChange',
-    'ionSelect',
-    'ionStyle'
 ], 'value', 'ion-change');
 const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-segment-button', defineCustomElement$Y, [
     'contentId',
@@ -939,13 +811,11 @@ const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-segment-button', def
     'layout',
     'type',
     'value'
-], [], 'value', 'ion-change');
+], 'value', 'ion-change');
 const IonSegmentContent = /*@__PURE__*/ defineContainer('ion-segment-content', defineCustomElement$Z);
 const IonSegmentView = /*@__PURE__*/ defineContainer('ion-segment-view', defineCustomElement$_, [
     'disabled',
     'ionSegmentViewScroll'
-], [
-    'ionSegmentViewScroll'
 ]);
 const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineCustomElement$$, [
     'cancelText',
@@ -973,13 +843,6 @@ const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineCustomElemen
     'ionFocus',
     'ionBlur',
     'ionStyle'
-], [
-    'ionChange',
-    'ionCancel',
-    'ionDismiss',
-    'ionFocus',
-    'ionBlur',
-    'ionStyle'
 ], 'value', 'ion-change');
 const IonSelectModal = /*@__PURE__*/ defineContainer('ion-select-modal', defineCustomElement$10, [
     'header',
@@ -993,8 +856,6 @@ const IonSelectOption = /*@__PURE__*/ defineContainer('ion-select-option', defin
 const IonSkeletonText = /*@__PURE__*/ defineContainer('ion-skeleton-text', defineCustomElement$12, [
     'animated',
     'ionStyle'
-], [
-    'ionStyle'
 ]);
 const IonSpinner = /*@__PURE__*/ defineContainer('ion-spinner', defineCustomElement$13, [
     'color',
@@ -1007,8 +868,6 @@ const IonSplitPane = /*@__PURE__*/ defineContainer('ion-split-pane', defineCusto
     'disabled',
     'when',
     'ionSplitPaneVisible'
-], [
-    'ionSplitPaneVisible'
 ]);
 const IonTab = /*@__PURE__*/ defineContainer('ion-tab', defineCustomElement$15, [
     'active',
@@ -1052,19 +911,12 @@ const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomEl
     'ionInput',
     'ionBlur',
     'ionFocus'
-], [
-    'ionChange',
-    'ionInput',
-    'ionBlur',
-    'ionFocus'
 ], 'value', 'ion-input');
 const IonThumbnail = /*@__PURE__*/ defineContainer('ion-thumbnail', defineCustomElement$18);
 const IonTitle = /*@__PURE__*/ defineContainer('ion-title', defineCustomElement$19, [
     'color',
     'size',
     'ionStyle'
-], [
-    'ionStyle'
 ]);
 const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElement$1a, [
     'color',
@@ -1079,10 +931,6 @@ const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElemen
     'ionChange',
     'ionFocus',
     'ionBlur'
-], [
-    'ionChange',
-    'ionFocus',
-    'ionBlur'
 ], 'checked', 'ion-change');
 const IonToolbar = /*@__PURE__*/ defineContainer('ion-toolbar', defineCustomElement$1b, [
     'color'
@@ -1280,9 +1128,8 @@ const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
     return () => {
         return h("ion-back-button", Object.assign({ onClick }, attrs), slots.default && slots.default());
     };
-}, {
-    name: "IonBackButton",
 });
+IonBackButton.name = "IonBackButton";
 
 const IonPage = /*@__PURE__*/ defineComponent({
     name: "IonPage",
@@ -1316,7 +1163,7 @@ const IonRouterOutlet = /*@__PURE__*/ defineComponent({
         const matchedRouteRef = computed(() => route.matched[depth]);
         let previousMatchedRouteRef;
         let previousMatchedPath;
-        provide(viewDepthKey, (depth + 1));
+        provide(viewDepthKey, depth + 1);
         provide(matchedRouteKey, matchedRouteRef);
         const ionRouterOutlet = ref();
         const id = generateId("ion-router-outlet");
@@ -2155,11 +2002,10 @@ const userComponents = shallowRef([]);
 const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
     defineCustomElement$1h();
     return () => {
-        return h("ion-app", Object.assign({ name: "IonApp" }, attrs), [slots.default && slots.default(), ...userComponents.value]);
+        return h("ion-app", Object.assign({}, attrs), [slots.default && slots.default(), ...userComponents.value]);
     };
-}, {
-    name: "IonApp",
 });
+IonApp.name = "IonApp";
 /**
  * When rendering user components inside of
  * ion-modal, or ion-popover the component
@@ -2218,39 +2064,38 @@ const IonNav = /*@__PURE__*/ defineComponent((props) => {
     return () => {
         return h("ion-nav", Object.assign(Object.assign({}, props), { delegate }), views.value);
     };
-}, {
-    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,
-        },
-    },
 });
+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,
+    },
+    animation: {
+        type: Function,
+        default: undefined,
+    },
+    root: {
+        type: [Function, Object, String],
+        default: undefined,
+    },
+    rootParams: {
+        type: Object,
+        default: undefined,
+    },
+    swipeGesture: {
+        type: Boolean,
+        default: undefined,
+    },
+};
 
 const IonIcon = /*@__PURE__*/ defineComponent({
     name: "IonIcon",
@@ -2293,13 +2138,13 @@ const IonIcon = /*@__PURE__*/ defineComponent({
 const EMPTY_PROP = Symbol();
 const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
 const defineOverlayContainer = (name, defineCustomElement, componentProps = [], hasDelegateHost, controller) => {
-    const createControllerComponent = (options) => {
+    const createControllerComponent = () => {
         return defineComponent((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) {
                 defineCustomElement();
@@ -2349,7 +2194,7 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                     await overlay.value.present();
                     return;
                 }
-                const restOfProps = {};
+                let restOfProps = {};
                 /**
                  * We can use Object.entries here
                  * to avoid the hasOwnProperty check,
@@ -2358,8 +2203,7 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                  */
                 for (const key in props) {
                     const value = props[key];
-                    if (Object.prototype.hasOwnProperty.call(props, key) &&
-                        value !== EMPTY_PROP) {
+                    if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
                         restOfProps[key] = value;
                     }
                 }
@@ -2374,7 +2218,7 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                 const component = slots.default && slots.default()[0];
                 overlay.value = controller.create(Object.assign(Object.assign({}, restOfProps), { component }));
                 overlay.value = await overlay.value;
-                eventListeners.forEach((eventListener) => {
+                eventListeners.forEach(eventListener => {
                     overlay.value.addEventListener(eventListener.componentEv, () => {
                         emit(eventListener.frameworkEv);
                     });
@@ -2382,17 +2226,17 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                 await overlay.value.present();
             };
             return () => {
-                return h("div", {
-                    style: { display: "none" },
+                return h('div', {
+                    style: { display: 'none' },
                     onVnodeMounted,
                     onVnodeUpdated,
                     onVnodeBeforeUnmount,
-                    isOpen: props.isOpen === true,
+                    isOpen: props.isOpen === true
                 });
             };
-        }, options);
+        });
     };
-    const createInlineComponent = (options) => {
+    const createInlineComponent = () => {
         return defineComponent((props, { slots }) => {
             if (defineCustomElement !== undefined) {
                 defineCustomElement();
@@ -2400,12 +2244,12 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
             const isOpen = ref(false);
             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 () => {
-                const restOfProps = {};
+                let restOfProps = {};
                 /**
                  * We can use Object.entries here
                  * to avoid the hasOwnProperty check,
@@ -2414,8 +2258,7 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                  */
                 for (const key in props) {
                     const value = props[key];
-                    if (Object.prototype.hasOwnProperty.call(props, key) &&
-                        value !== EMPTY_PROP) {
+                    if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
                         restOfProps[key] = value;
                     }
                 }
@@ -2425,7 +2268,7 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                  */
                 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;
                 };
@@ -2436,27 +2279,22 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                  * 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);
+                (isOpen.value || restOfProps.keepContentsMounted || restOfProps.keepContentsMounted === '') ? renderChildren() : undefined);
             };
-        }, options);
+        });
     };
-    const options = {
-        name,
-        props: Object.assign({ isOpen: DEFAULT_EMPTY_PROP }, componentProps.reduce((acc, prop) => {
-            acc[prop] = DEFAULT_EMPTY_PROP;
-            return acc;
-        }, {})),
-        emits: typeof controller !== "undefined"
-            ? ["willPresent", "didPresent", "willDismiss", "didDismiss"]
-            : undefined,
+    const Container = (controller !== undefined) ? createControllerComponent() : createInlineComponent();
+    Container.name = name;
+    Container.props = {
+        'isOpen': DEFAULT_EMPTY_PROP
     };
-    return controller !== undefined
-        ? createControllerComponent(options)
-        : createInlineComponent(options);
+    componentProps.forEach(componentProp => {
+        Container.props[componentProp] = DEFAULT_EMPTY_PROP;
+    });
+    if (controller !== undefined) {
+        Container.emits = ['willPresent', 'didPresent', 'willDismiss', 'didDismiss'];
+    }
+    return Container;
 };
 
 /**
@@ -2466,10 +2304,10 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
 const IonActionSheet = /*@__PURE__*/ defineOverlayContainer('ion-action-sheet', defineCustomElement$1k, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
 const IonAlert = /*@__PURE__*/ defineOverlayContainer('ion-alert', defineCustomElement$1l, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']);
 const IonLoading = /*@__PURE__*/ defineOverlayContainer('ion-loading', defineCustomElement$1m, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
-const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineCustomElement$1n, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true);
-const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer('ion-picker-legacy', defineCustomElement$1o, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
-const IonPopover = /*@__PURE__*/ defineOverlayContainer('ion-popover', defineCustomElement$1p, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
-const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineCustomElement$1q, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);
+const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer('ion-picker-legacy', defineCustomElement$1n, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
+const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineCustomElement$1o, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);
+const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineCustomElement$1p, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true);
+const IonPopover = /*@__PURE__*/ defineOverlayContainer('ion-popover', defineCustomElement$1q, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
 
 // TODO(FW-2969): types
 /**
@@ -2486,16 +2324,16 @@ const createController = (defineCustomElement, oldController, useDelegate = fals
     };
     return oldController;
 };
-const modalController = /*@__PURE__*/ createController(defineCustomElement$1n, modalController$1, true);
-const popoverController = /*@__PURE__*/ createController(defineCustomElement$1p, popoverController$1, true);
+const modalController = /*@__PURE__*/ createController(defineCustomElement$1p, modalController$1, true);
+const popoverController = /*@__PURE__*/ createController(defineCustomElement$1q, popoverController$1, true);
 const alertController = /*@__PURE__*/ createController(defineCustomElement$1l, alertController$1);
 const actionSheetController = /*@__PURE__*/ createController(defineCustomElement$1k, actionSheetController$1);
 const loadingController = /*@__PURE__*/ createController(defineCustomElement$1m, loadingController$1);
 /**
  * @deprecated Use the inline ion-picker component instead.
  */
-const pickerController = /*@__PURE__*/ createController(defineCustomElement$1o, pickerController$1);
-const toastController = /*@__PURE__*/ createController(defineCustomElement$1q, toastController$1);
+const pickerController = /*@__PURE__*/ createController(defineCustomElement$1n, pickerController$1);
+const toastController = /*@__PURE__*/ createController(defineCustomElement$1o, toastController$1);
 
 export { IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, IonicVue, actionSheetController, alertController, loadingController, modalController, onIonViewDidEnter, onIonViewDidLeave, onIonViewWillEnter, onIonViewWillLeave, pickerController, popoverController, toastController, useBackButton, useIonRouter, useKeyboard };
 //# sourceMappingURL=index.js.map