@ionic/vue 8.4.4-dev.11741648084.118e26ac → 8.4.4-dev.11741872392.110b2b59

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives, computed, provide, shallowRef, watch, onUnmounted, Fragment, isVNode, Teleport, onMounted } from 'vue';
+import { defineComponent, ref, onMounted, getCurrentInstance, inject, h, withDirectives, computed, provide, shallowRef, watch, onUnmounted, Fragment, isVNode, Teleport } from 'vue';
 import { defineCustomElement } from '@ionic/core/components/ion-accordion.js';
 import { defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion-group.js';
 import { defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-avatar.js';
@@ -141,10 +141,30 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
     if (defineCustomElement !== undefined) {
         defineCustomElement();
     }
-    const Container = defineComponent((props, { attrs, slots, emit }) => {
+    const emits = emitProps;
+    const props = [ROUTER_LINK_VALUE, ...componentProps].reduce((acc, prop) => {
+        acc[prop] = DEFAULT_EMPTY_PROP$1;
+        return acc;
+    }, {});
+    if (modelProp) {
+        emits.push(UPDATE_VALUE_EVENT);
+        props[MODEL_VALUE] = DEFAULT_EMPTY_PROP$1;
+    }
+    return defineComponent((props, { attrs, slots, emit }) => {
         let modelPropValue = modelProp ? props[modelProp] : undefined;
         const containerRef = ref();
         const classes = new Set(getComponentClasses(attrs.class));
+        onMounted(() => {
+            /**
+             * we register the event emmiter for @Event definitions
+             * so we can use @event
+             */
+            emitProps.forEach((eventName) => {
+                containerRef.value?.addEventListener(eventName, (e) => {
+                    emit(eventName, e);
+                });
+            });
+        });
         /**
          * This directive is responsible for updating any reactive
          * reference associated with v-model on the component.
@@ -157,9 +177,9 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
          */
         const vModelDirective = {
             created: (el) => {
-                const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+                const eventsNames = (Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]).map((ev) => ev.replace(/-([a-z])/g, (g) => g[1].toUpperCase()));
                 eventsNames.forEach((eventName) => {
-                    el.addEventListener(eventName.toLowerCase(), (e) => {
+                    el.addEventListener(eventName, (e) => {
                         /**
                          * 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
@@ -173,15 +193,6 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
                         }
                     });
                 });
-                /**
-                 * 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();
@@ -229,7 +240,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
                     handleRouterLink(ev);
                 }
             };
-            let propsToAdd = {
+            const propsToAdd = {
                 ref: containerRef,
                 class: getElementClasses(containerRef, classes),
                 onClick: handleClick,
@@ -262,16 +273,10 @@ 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[modelProp] = props[MODEL_VALUE];
                 }
                 else if (modelPropValue !== EMPTY_PROP$1) {
-                    propsToAdd = {
-                        ...propsToAdd,
-                        [modelProp]: modelPropValue,
-                    };
+                    propsToAdd[modelProp] = modelPropValue;
                 }
             }
             // If router link is defined, add href to props
@@ -279,10 +284,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
             // 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],
-                };
+                propsToAdd.href = props[ROUTER_LINK_VALUE];
             }
             /**
              * vModelDirective is only needed on components that support v-model.
@@ -291,31 +293,11 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
             const node = h(name, propsToAdd, slots.default && slots.default());
             return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
         };
+    }, {
+        name,
+        props,
+        emits,
     });
-    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;
-        if (modelProp) {
-            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;
 };
 
 /* eslint-disable */
@@ -439,13 +421,10 @@ const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineCustomEl
     'checked',
     'indeterminate',
     'disabled',
-    'errorText',
-    'helperText',
     'value',
     'labelPlacement',
     'justify',
     'alignment',
-    'required',
     'ionChange',
     'ionFocus',
     'ionBlur'
@@ -813,8 +792,6 @@ const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-radio-group', defineCus
     'compareWith',
     'name',
     'value',
-    'helperText',
-    'errorText',
     'ionChange',
     'ionValueChange'
 ], [
@@ -958,8 +935,6 @@ const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineCustomElemen
     'compareWith',
     'disabled',
     'fill',
-    'errorText',
-    'helperText',
     'interface',
     'interfaceOptions',
     'justify',
@@ -974,7 +949,6 @@ const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineCustomElemen
     'expandedIcon',
     'shape',
     'value',
-    'required',
     'ionChange',
     'ionCancel',
     'ionDismiss',
@@ -1079,14 +1053,11 @@ const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElemen
     'name',
     'checked',
     'disabled',
-    'errorText',
-    'helperText',
     'value',
     'enableOnOffLabels',
     'labelPlacement',
     'justify',
     'alignment',
-    'required',
     'ionChange',
     'ionFocus',
     'ionBlur'
@@ -1242,19 +1213,6 @@ const useIonRouter = () => {
     };
 };
 
-// TODO(FW-2969): types
-const toKebabCase = (eventName) => {
-    return eventName
-        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-        .toLowerCase();
-};
-const getHelperFunctions = () => {
-    return {
-        ael: (el, eventName, cb, opts) => el.addEventListener(toKebabCase(eventName), cb, opts),
-        rel: (el, eventName, cb, opts) => el.removeEventListener(toKebabCase(eventName), cb, opts),
-        ce: (eventName, opts) => new CustomEvent(toKebabCase(eventName), opts),
-    };
-};
 const IonicVue = {
     async install(_, config = {}) {
         /**
@@ -1267,8 +1225,7 @@ const IonicVue = {
         if (typeof document !== "undefined") {
             document.documentElement.classList.add("ion-ce");
         }
-        const { ael, rel, ce } = getHelperFunctions();
-        initialize(Object.assign(Object.assign({}, config), { _ael: ael, _rel: rel, _ce: ce }));
+        initialize(config);
     },
 };
 
@@ -2263,41 +2220,40 @@ const IonNav = /*@__PURE__*/ defineComponent((props) => {
     },
 });
 
-const IonIcon = /*@__PURE__*/ defineComponent({
-    name: "IonIcon",
-    props: {
-        color: String,
-        flipRtl: Boolean,
-        icon: String,
-        ios: String,
-        lazy: String,
-        md: String,
-        mode: String,
-        name: String,
-        size: String,
-        src: String,
-    },
-    setup(props, { slots }) {
-        defineCustomElement$1j();
-        return () => {
-            var _a, _b;
-            const { icon, ios, md, mode } = props;
-            let iconToUse;
-            const config = getConfig();
-            const iconMode = mode || (config === null || config === void 0 ? void 0 : config.get("mode"));
-            if (ios || md) {
-                if (iconMode === "ios") {
-                    iconToUse = (_a = ios !== null && ios !== void 0 ? ios : md) !== null && _a !== void 0 ? _a : icon;
-                }
-                else {
-                    iconToUse = (_b = md !== null && md !== void 0 ? md : ios) !== null && _b !== void 0 ? _b : icon;
-                }
+const IonIcon = /*@__PURE__*/ defineComponent((props, { slots }) => {
+    defineCustomElement$1j();
+    return () => {
+        var _a, _b;
+        const { icon, ios, md, mode } = props;
+        let iconToUse;
+        const config = getConfig();
+        const iconMode = mode || (config === null || config === void 0 ? void 0 : config.get("mode"));
+        if (ios || md) {
+            if (iconMode === "ios") {
+                iconToUse = (_a = ios !== null && ios !== void 0 ? ios : md) !== null && _a !== void 0 ? _a : icon;
             }
             else {
-                iconToUse = icon;
+                iconToUse = (_b = md !== null && md !== void 0 ? md : ios) !== null && _b !== void 0 ? _b : icon;
             }
-            return h("ion-icon", Object.assign(Object.assign({}, props), { icon: iconToUse }), slots);
-        };
+        }
+        else {
+            iconToUse = icon;
+        }
+        return h("ion-icon", Object.assign(Object.assign({}, props), { icon: iconToUse }), slots);
+    };
+}, {
+    name: "IonIcon",
+    props: {
+        color: { type: String },
+        flipRtl: { type: Boolean },
+        icon: { type: String },
+        ios: { type: String },
+        lazy: { type: Boolean },
+        md: { type: String },
+        mode: { type: String },
+        name: { type: String },
+        size: { type: String },
+        src: { type: String },
     },
 });
 
@@ -2307,10 +2263,10 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
     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}WillPresent`, frameworkEv: "willPresent" },
+                { componentEv: `${name}DidPresent`, frameworkEv: "didPresent" },
+                { componentEv: `${name}WillDismiss`, frameworkEv: "willDismiss" },
+                { componentEv: `${name}DidDismiss`, frameworkEv: "didDismiss" },
             ];
             if (defineCustomElement !== undefined) {
                 defineCustomElement();
@@ -2404,16 +2360,31 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
         }, options);
     };
     const createInlineComponent = (options) => {
-        return defineComponent((props, { slots }) => {
+        return defineComponent((props, { slots, emit }) => {
             if (defineCustomElement !== undefined) {
                 defineCustomElement();
             }
             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("ionMount", (ev) => {
+                    emit("ionMount", ev);
+                    isOpen.value = true;
+                });
+                elementRef.value.addEventListener("willPresent", (ev) => {
+                    emit("willPresent", ev);
+                    isOpen.value = true;
+                });
+                elementRef.value.addEventListener("didDismiss", (ev) => {
+                    emit("didDismiss", ev);
+                    isOpen.value = false;
+                });
+                elementRef.value.addEventListener("willDismiss", (ev) => {
+                    emit("willDismiss", ev);
+                });
+                elementRef.value.addEventListener("didPresent", (ev) => {
+                    emit("didPresent", ev);
+                });
             });
             return () => {
                 const restOfProps = {};
@@ -2477,7 +2448,7 @@ 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', 'expandToScroll', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true);
+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']);