@ionic/vue 8.4.2 → 8.4.3-dev.11738077091.1746b338

package/dist/index.js

@@ -89,13 +89,11 @@ 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-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';
+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';
 
-// @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';
@@ -114,11 +112,10 @@ const ARIA_PROP_PREFIX = 'aria';
 const EMPTY_PROP$1 = Symbol();
 const DEFAULT_EMPTY_PROP$1 = { default: EMPTY_PROP$1 };
 const getComponentClasses = (classes) => {
-    return (classes === null || classes === void 0 ? void 0 : classes.split(' ')) || [];
+    return classes?.split(' ') || [];
 };
 const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
-    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);
+    return [...Array.from(ref.value?.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.
@@ -127,12 +124,15 @@ 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 = [], modelProp, modelUpdateEvent) => {
+const defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent) => {
     /**
      * Create a Vue component wrapper around a Web Component.
      * Note: The `props` here are not all properties on a component.
@@ -142,8 +142,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
         defineCustomElement();
     }
     const Container = defineComponent((props, { attrs, slots, emit }) => {
-        var _a;
-        let modelPropValue = props[modelProp];
+        let modelPropValue = modelProp ? props[modelProp] : undefined;
         const containerRef = ref();
         const classes = new Set(getComponentClasses(attrs.class));
         /**
@@ -168,16 +167,25 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
                          * 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 === null || e === void 0 ? void 0 : e.target)[modelProp];
+                        if (e.target.tagName === el.tagName && modelProp) {
+                            modelPropValue = (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 = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.appContext) === null || _a === void 0 ? void 0 : _a.provides[NAV_MANAGER];
+        const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
         const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
         const handleRouterLink = (ev) => {
             const { routerLink } = props;
@@ -211,6 +219,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
             getComponentClasses(attrs.class).forEach((value) => {
                 classes.add(value);
             });
+            // @ts-expect-error
             const oldClick = props.onClick;
             const handleClick = (ev) => {
                 if (oldClick !== undefined) {
@@ -236,6 +245,14 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
                 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) {
                 /**
@@ -245,18 +262,27 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
                  * was set as a static value (i.e. no v-model).
                  */
                 if (props[MODEL_VALUE] !== EMPTY_PROP$1) {
-                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: props[MODEL_VALUE] });
+                    propsToAdd = {
+                        ...propsToAdd,
+                        [modelProp]: props[MODEL_VALUE],
+                    };
                 }
                 else if (modelPropValue !== EMPTY_PROP$1) {
-                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: modelPropValue });
+                    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$1) {
-                propsToAdd = Object.assign(Object.assign({}, propsToAdd), { href: props[ROUTER_LINK_VALUE] });
+            if (ROUTER_LINK_VALUE in props && props[ROUTER_LINK_VALUE] !== EMPTY_PROP$1) {
+                propsToAdd = {
+                    ...propsToAdd,
+                    href: props[ROUTER_LINK_VALUE],
+                };
             }
             /**
              * vModelDirective is only needed on components that support v-model.
@@ -267,17 +293,27 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
         };
     });
     if (typeof Container !== 'function') {
-        Container.name = name;
-        Container.props = {
-            [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP$1,
-        };
-        componentProps.forEach((componentProp) => {
-            Container.props[componentProp] = DEFAULT_EMPTY_PROP$1;
-        });
+        let emits = [];
+        let props = {};
+        props[ROUTER_LINK_VALUE] = DEFAULT_EMPTY_PROP$1;
+        componentProps.forEach((componentProp) => (props[componentProp] = DEFAULT_EMPTY_PROP$1));
+        emits = emitProps;
         if (modelProp) {
-            Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP$1;
-            Container.emits = [UPDATE_VALUE_EVENT];
+            props[MODEL_VALUE] = DEFAULT_EMPTY_PROP$1;
+            emits.push(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;
 };
@@ -301,6 +337,9 @@ 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, [
@@ -308,6 +347,8 @@ const IonBackdrop = /*@__PURE__*/ defineContainer('ion-backdrop', defineCustomEl
     'tappable',
     'stopPropagation',
     'ionBackdropTap'
+], [
+    'ionBackdropTap'
 ]);
 const IonBadge = /*@__PURE__*/ defineContainer('ion-badge', defineCustomElement$4, [
     'color'
@@ -329,6 +370,10 @@ const IonBreadcrumb = /*@__PURE__*/ defineContainer('ion-breadcrumb', defineCust
     'ionFocus',
     'ionBlur',
     'collapsedClick'
+], [
+    'ionFocus',
+    'ionBlur',
+    'collapsedClick'
 ]);
 const IonBreadcrumbs = /*@__PURE__*/ defineContainer('ion-breadcrumbs', defineCustomElement$6, [
     'color',
@@ -336,6 +381,8 @@ const IonBreadcrumbs = /*@__PURE__*/ defineContainer('ion-breadcrumbs', defineCu
     'itemsBeforeCollapse',
     'itemsAfterCollapse',
     'ionCollapsedClick'
+], [
+    'ionCollapsedClick'
 ]);
 const IonButton = /*@__PURE__*/ defineContainer('ion-button', defineCustomElement$7, [
     'color',
@@ -356,6 +403,9 @@ const IonButton = /*@__PURE__*/ defineContainer('ion-button', defineCustomElemen
     'form',
     'ionFocus',
     'ionBlur'
+], [
+    'ionFocus',
+    'ionBlur'
 ]);
 const IonButtons = /*@__PURE__*/ defineContainer('ion-buttons', defineCustomElement$8, [
     'collapse'
@@ -396,6 +446,10 @@ 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',
@@ -439,6 +493,10 @@ const IonContent = /*@__PURE__*/ defineContainer('ion-content', defineCustomElem
     'ionScrollStart',
     'ionScroll',
     'ionScrollEnd'
+], [
+    'ionScrollStart',
+    'ionScroll',
+    'ionScrollEnd'
 ]);
 const IonDatetime = /*@__PURE__*/ defineContainer('ion-datetime', defineCustomElement$i, [
     'color',
@@ -478,6 +536,14 @@ 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',
@@ -507,6 +573,9 @@ const IonFabButton = /*@__PURE__*/ defineContainer('ion-fab-button', defineCusto
     'closeIcon',
     'ionFocus',
     'ionBlur'
+], [
+    'ionFocus',
+    'ionBlur'
 ]);
 const IonFabList = /*@__PURE__*/ defineContainer('ion-fab-list', defineCustomElement$m, [
     'activated',
@@ -529,12 +598,18 @@ 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',
@@ -579,6 +654,11 @@ 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',
@@ -619,16 +699,23 @@ 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',
@@ -651,6 +738,12 @@ 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',
@@ -674,6 +767,8 @@ 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',
@@ -681,6 +776,8 @@ const IonPickerColumn = /*@__PURE__*/ defineContainer('ion-picker-column', defin
     'color',
     'numericInput',
     'ionChange'
+], [
+    'ionChange'
 ]);
 const IonPickerColumnOption = /*@__PURE__*/ defineContainer('ion-picker-column-option', defineCustomElement$L, [
     'disabled',
@@ -704,6 +801,9 @@ 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',
@@ -712,6 +812,9 @@ 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',
@@ -736,6 +839,13 @@ 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',
@@ -747,6 +857,10 @@ const IonRefresher = /*@__PURE__*/ defineContainer('ion-refresher', defineCustom
     'ionRefresh',
     'ionPull',
     'ionStart'
+], [
+    'ionRefresh',
+    'ionPull',
+    'ionStart'
 ]);
 const IonRefresherContent = /*@__PURE__*/ defineContainer('ion-refresher-content', defineCustomElement$R, [
     'pullingIcon',
@@ -758,6 +872,8 @@ 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'
@@ -793,6 +909,14 @@ 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',
@@ -804,6 +928,10 @@ 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',
@@ -811,11 +939,13 @@ 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',
@@ -843,6 +973,13 @@ 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',
@@ -856,6 +993,8 @@ 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',
@@ -868,6 +1007,8 @@ const IonSplitPane = /*@__PURE__*/ defineContainer('ion-split-pane', defineCusto
     'disabled',
     'when',
     'ionSplitPaneVisible'
+], [
+    'ionSplitPaneVisible'
 ]);
 const IonTab = /*@__PURE__*/ defineContainer('ion-tab', defineCustomElement$15, [
     'active',
@@ -911,12 +1052,19 @@ 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',
@@ -931,6 +1079,10 @@ 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'
@@ -1128,8 +1280,9 @@ 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",
@@ -1163,7 +1316,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");
@@ -2002,10 +2155,11 @@ const userComponents = shallowRef([]);
 const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
     defineCustomElement$1h();
     return () => {
-        return h("ion-app", Object.assign({}, attrs), [slots.default && slots.default(), ...userComponents.value]);
+        return h("ion-app", Object.assign({ name: "IonApp" }, 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
@@ -2064,38 +2218,39 @@ const IonNav = /*@__PURE__*/ defineComponent((props) => {
     return () => {
         return h("ion-nav", Object.assign(Object.assign({}, 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,
-    },
-    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,
+        },
     },
-};
+});
 
 const IonIcon = /*@__PURE__*/ defineComponent({
     name: "IonIcon",
@@ -2138,13 +2293,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 = () => {
+    const createControllerComponent = (options) => {
         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();
@@ -2194,7 +2349,7 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                     await overlay.value.present();
                     return;
                 }
-                let restOfProps = {};
+                const restOfProps = {};
                 /**
                  * We can use Object.entries here
                  * to avoid the hasOwnProperty check,
@@ -2203,7 +2358,8 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                  */
                 for (const key in props) {
                     const value = props[key];
-                    if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
+                    if (Object.prototype.hasOwnProperty.call(props, key) &&
+                        value !== EMPTY_PROP) {
                         restOfProps[key] = value;
                     }
                 }
@@ -2218,7 +2374,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);
                     });
@@ -2226,17 +2382,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 = () => {
+    const createInlineComponent = (options) => {
         return defineComponent((props, { slots }) => {
             if (defineCustomElement !== undefined) {
                 defineCustomElement();
@@ -2244,12 +2400,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 () => {
-                let restOfProps = {};
+                const restOfProps = {};
                 /**
                  * We can use Object.entries here
                  * to avoid the hasOwnProperty check,
@@ -2258,7 +2414,8 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                  */
                 for (const key in props) {
                     const value = props[key];
-                    if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
+                    if (Object.prototype.hasOwnProperty.call(props, key) &&
+                        value !== EMPTY_PROP) {
                         restOfProps[key] = value;
                     }
                 }
@@ -2268,7 +2425,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;
                 };
@@ -2279,22 +2436,27 @@ 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 Container = (controller !== undefined) ? createControllerComponent() : createInlineComponent();
-    Container.name = name;
-    Container.props = {
-        'isOpen': DEFAULT_EMPTY_PROP
+    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,
     };
-    componentProps.forEach(componentProp => {
-        Container.props[componentProp] = DEFAULT_EMPTY_PROP;
-    });
-    if (controller !== undefined) {
-        Container.emits = ['willPresent', 'didPresent', 'willDismiss', 'didDismiss'];
-    }
-    return Container;
+    return controller !== undefined
+        ? createControllerComponent(options)
+        : createInlineComponent(options);
 };
 
 /**
@@ -2304,10 +2466,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 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']);
+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']);
 
 // TODO(FW-2969): types
 /**
@@ -2324,16 +2486,16 @@ const createController = (defineCustomElement, oldController, useDelegate = fals
     };
     return oldController;
 };
-const modalController = /*@__PURE__*/ createController(defineCustomElement$1p, modalController$1, true);
-const popoverController = /*@__PURE__*/ createController(defineCustomElement$1q, popoverController$1, true);
+const modalController = /*@__PURE__*/ createController(defineCustomElement$1n, modalController$1, true);
+const popoverController = /*@__PURE__*/ createController(defineCustomElement$1p, 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$1n, pickerController$1);
-const toastController = /*@__PURE__*/ createController(defineCustomElement$1o, toastController$1);
+const pickerController = /*@__PURE__*/ createController(defineCustomElement$1o, pickerController$1);
+const toastController = /*@__PURE__*/ createController(defineCustomElement$1q, 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