fix(vue): resolve remaining issues

Author: christian-bromann

packages/angular/src/directives/proxies.ts

@@ -52,6 +52,7 @@
     "@babel/types": "^7.18.4",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^11.1.5",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",

packages/angular/standalone/src/directives/proxies.ts

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

packages/vue/package-lock.json

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

packages/vue/package.json

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