fix(vue): respect keepContentsMounted if passed as attribute (#28167)

Issue number: resolves #28165

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The overlay implementation in Vue only checks for truthy
`keepContentsMounted` values. When setting this prop as an attribute,
the value of it is `''` which is falsy. As a result, content does not
get mounted.

One of Vue's ESLint rules states that this should be supported:
https://eslint.vuejs.org/rules/prefer-true-attribute-shorthand.html

Part of the issue may also be that Vue does not know the type of this
property and so it assume "any":

> The shorthand form is not always equivalent! If a prop accepts
multiple types, but Boolean is not the first one, a shorthand prop won't
pass true.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The overlay wrapper now checks for `''` values. If
`keepContentsMounted === ''` then the inner contents will be mounted
because this means the prop is being set using the attribute shorthand.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.3.5-dev.11694621267.1e5f63c2`

Author: liamdebeasi

packages/vue/src/vue-component-lib/overlays.ts

@@ -177,7 +177,14 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
         return h(
           name,
           { ...restOfProps, ref: elementRef },
-          (isOpen.value || restOfProps.keepContentsMounted) ? renderChildren() : undefined
+
+          /**
+           * When binding keepContentsMounted as an attribute
+           * i.e. <ion-modal keep-contents-mounted></ion-modal>
+           * 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
         )
       }
     });

packages/vue/test/base/src/views/OverlaysKeepContentsMounted.vue

@@ -14,6 +14,10 @@
 
       <ion-button id="open-auto-mount-popover">Open Auto Mount Popover</ion-button>
 
+      <ion-button id="open-auto-mount-modal-attribute">Open Auto Mount Modal (Attribute)</ion-button>
+
+      <ion-button id="open-auto-mount-modal-attribute-false">Open Auto Mount Modal (Attribute False)</ion-button>
+
       <br /><br />
 
       <ion-modal
@@ -31,6 +35,22 @@
       >
         <PopoverContent :title="overlayProps.title"></PopoverContent>
       </ion-popover>
+
+      <ion-modal
+        id="auto-mount-modal-attribute"
+        keep-contents-mounted
+        trigger="open-auto-mount-modal-attribute"
+      >
+        <ModalContent :title="overlayProps.title"></ModalContent>
+      </ion-modal>
+
+      <ion-modal
+        id="auto-mount-modal-attribute-false"
+        keep-contents-mounted="false"
+        trigger="open-auto-mount-modal-attribute-false"
+      >
+        <ModalContent :title="overlayProps.title"></ModalContent>
+      </ion-modal>
     </ion-content>
   </ion-page>
 </template>

packages/vue/test/base/tests/e2e/specs/overlays-keep-contents-mounted.cy.js

@@ -25,6 +25,14 @@ describe('overlays - keepContentsMounted', () => {
 
       cy.get('ion-modal#auto-mount-modal ion-content').should('exist');
     });
+
+    it('should mount content if passed as attribute', () => {
+      cy.get('ion-modal#auto-mount-modal-attribute ion-content').should('exist');
+    });
+
+    it('should not mount content if passed as attribute with a value of false', () => {
+      cy.get('ion-modal#auto-mount-modal-attribute-false ion-content').should('not.exist');
+    });
   })
   describe('popover', () => {
     it('should not mount component if false', () => {