feat(vue): support for showModal (#1872)

Author: tiagogviegas

.changeset/quick-seas-notice.md

@@ -0,0 +1,7 @@
+---
+'@siemens/ix-vue': minor
+---
+
+add support for showModal
+
+Fixes #1771

packages/vue-test-app/package.json

@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
     "typescript": "^4.9.5",
     "vite": "^4.5.14",
     "vue-tsc": "^1.8.27"

packages/vue-test-app/src/Root.vue

@@ -10,6 +10,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
+import { IxApplicationContext } from "@siemens/ix-vue"
+
+
 import App from './App.vue';
 import AboutAndLegal from './preview-examples/about-and-legal.vue';
 import ActionCard from './preview-examples/action-card.vue';
@@ -471,6 +474,8 @@ const currentView = computed(() => {
 </script>
 
 <template>
-  <component :is="currentView"></component>
+  <IxApplicationContext>
+    <component :is="currentView"></component>
+  </IxApplicationContext>
 </template>
 import layoutAutoVue from './preview-examples/layout-auto.vue';

packages/vue-test-app/src/preview-examples/modal-sizes.vue

@@ -7,10 +7,9 @@
  * LICENSE file in the root directory of this source tree.
 -->
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import { IxModalSize } from '@siemens/ix';
-import { IxButton, IxModal } from '@siemens/ix-vue';
-import { ref } from 'vue';
+import { IxButton, Modal, ModalSlotProps, showModal } from '@siemens/ix-vue';
 
 const sizes: IxModalSize[] = [
   '360',
@@ -21,17 +20,20 @@ const sizes: IxModalSize[] = [
   'full-width',
   'full-screen',
 ];
-const currentSize = ref<IxModalSize | undefined>(undefined);
-const show = ref(false);
 
 const open = (size: IxModalSize) => {
-  currentSize.value = size;
-  show.value = true;
+  showModal({
+    size,
+    content:
+      <Modal>
+        {
+          ({ closeModal }: ModalSlotProps) => <IxButton onClick={closeModal}> Modal with size {size} </IxButton>
+        }
+      </Modal>
+  });
 };
 
-const closeModal = () => {
-  show.value = false;
-};
+
 </script>
 
 <style scoped src="./modal-sizes.css"></style>
@@ -42,8 +44,4 @@ const closeModal = () => {
       Show modal size {{ size }}
     </IxButton>
   </div>
-
-  <IxModal v-if="show && currentSize" :size="currentSize" @close="show = false">
-    <IxButton @click="closeModal"> Modal with size {{ currentSize }} </IxButton>
-  </IxModal>
 </template>

packages/vue-test-app/src/preview-examples/modal.vue

@@ -7,38 +7,35 @@
  * LICENSE file in the root directory of this source tree.
 -->
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import {
-  HTMLRefElement,
   IxButton,
-  IxModal,
   IxModalHeader,
   IxModalContent,
   IxModalFooter,
+  Modal,
+  ModalSlotProps,
+  showModal
 } from '@siemens/ix-vue';
-import { ref } from 'vue';
 
-const modalRef = ref<HTMLRefElement<HTMLIxModalElement>>();
-const close = () => {
-  modalRef.value?.$el.closeModal('close payload!');
-  show.value = false;
-};
-const dismiss = () => {
-  modalRef.value?.$el.dismissModal('dismiss payload');
-  show.value = false;
-};
+function show() {
+  showModal({
+    content: <Modal>{
+      ({ closeModal, dismissModal }: ModalSlotProps) => [
+        <IxModalHeader>Message headline</IxModalHeader>,
+        <IxModalContent>Message text lorem ipsum</IxModalContent>,
+        <IxModalFooter>
+          <IxButton outline onClick={() => dismissModal()}>Cancel</IxButton>
+          <IxButton onClick={() => closeModal()}>OK</IxButton>
+        </IxModalFooter>
+      ]
+    }
+    </Modal >
+  })
+}
 
-const show = ref(false);
 </script>
 
 <template>
-  <IxButton @click="show = true">Show modal</IxButton>
-  <IxDialog ref="modalRef" v-if="show">
-    <IxModalHeader onclose="dismiss()">Message headline</IxModalHeader>
-    <IxModalContent>Message text lorem ipsum</IxModalContent>
-    <IxModalFooter>
-      <IxButton outline @click="dismiss()"> Cancel </IxButton>
-      <IxButton @click="close()">OK</IxButton>
-    </IxModalFooter>
-  </IxDialog>
+  <IxButton @click="show()">Show modal</IxButton>
 </template>

packages/vue-test-app/src/vite-env.d.ts

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+export {};
+declare module 'vue' {
+  interface ComponentCustomProps {
+    onClick?: (...args: any[]) => void;
+  }
+}

packages/vue-test-app/tsconfig.json

@@ -6,6 +6,7 @@
     "moduleResolution": "Node",
     "strict": true,
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,

packages/vue-test-app/vite.config.ts

@@ -8,6 +8,7 @@
  */
 
 import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 import { defineConfig } from 'vite';
 import path from 'path';
 import fs from 'fs';
@@ -33,6 +34,11 @@ export default defineConfig(() => {
     });
 
   return {
-    plugins: [vue()],
+    plugins: [
+      vue(),
+      vueJsx({
+        include: ['src/preview-examples/modal*.vue'],
+      }),
+    ],
   };
 });

packages/vue/package.json

@@ -21,7 +21,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "pnpm clean && rollup --config rollup.config.mjs",
+    "build": "pnpm clean && vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
     "clean": "rimraf dist",
     "lint": "eslint src"
   },
@@ -30,17 +30,18 @@
     "@stencil/vue-output-target": "^0.10.7"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^8.5.0",
     "@siemens/ix": "workspace:*",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "eslint": "~8.21.0",
     "eslint-config-ix": "workspace:*",
     "eslint-plugin-vue": "^9.27.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.1",
-    "typescript": "^4.9.5",
-    "vue": "^3.4.34"
+    "typescript": "^5.8.3",
+    "vue": "^3.4.34",
+    "vite": "^6.3.5",
+    "vue-tsc": "^2.2.10",
+    "@vitejs/plugin-vue": "^5.2.3"
   },
   "peerDependencies": {
     "@siemens/ix-icons": "^3.0.0",