Type modals

components/ModalTemplateAddEditGrid.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SelectStringOption } from '@lukso/web-components'
 
-const { modal, closeModal } = useModal()
+const { modal, closeModal } = useModal<Partial<Grid>>()
 const { formatMessage } = useIntl()
 const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
 const { addGrid, updateGrid } = useGrid()
@@ -15,7 +15,7 @@ const inputErrors = reactive({
   title: '',
 })
 
-const id = computed(() => modal?.data?.grid?.id)
+const id = computed(() => modal?.data?.id)
 const canSubmit = ref(false)
 const isEdit = computed(() => !!id.value)
 

components/ModalTemplateAddGridWidget.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-const { modal } = useModal()
+const { modal } = useModal<Partial<GridWidget>>()
 </script>
 
 <template>
   <AddWidget
     :properties="modal?.data?.properties"
-    :id="modal?.data?.id"
-    :width="modal?.data?.width"
-    :height="modal?.data?.height"
+    :id="modal?.data?.i"
+    :width="modal?.data?.w"
+    :height="modal?.data?.h"
     :type="modal?.data?.type"
   />
 </template>

composables/useModal.ts

@@ -5,7 +5,7 @@ import type { Modal } from '@/types/modal'
  *
  * @param data
  */
-const showModal = async (modal: Modal) => {
+const showModal = async <T = ModalData>(modal: Modal<T>) => {
   const route = useRoute()
   const { isModalOpen } = storeToRefs(useAppStore())
 
@@ -49,12 +49,12 @@ const closeModal = async () => {
   })
 }
 
-export const useModal = () => {
+export const useModal = <T = ModalData>() => {
   const { modal } = useAppStore()
 
   return {
     showModal,
     closeModal,
-    modal,
+    modal: modal as Modal<T>,
   }
 }

domains/grid/components/AddWidget.vue

@@ -31,6 +31,7 @@ const loadComponent = (type?: string): Component | undefined => {
     )
   }
 
+  // when no type we display selection screen
   return defineAsyncComponent(() => import('./AddWidgetSelection.vue'))
 }
 

domains/grid/components/AddWidgetBasic.vue

@@ -62,12 +62,9 @@ const handleCancel = () => {
 }
 
 const handleBackToSelection = () => {
-  showModal({
+  showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
     forceOpen: true,
-    data: {
-      type: undefined, // when no type we display selection screen
-    },
   })
 }
 

domains/grid/components/AddWidgetSelection.vue

@@ -16,12 +16,12 @@ type Props = {
 defineProps<Props>()
 
 const handleSelectWidget = (widgetType: GridWidgetType) => {
-  showModal({
+  showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
     data: {
       type: widgetType,
-      width: 1,
-      height: 1,
+      w: 1,
+      h: 1,
     },
     forceOpen: true,
   })

domains/grid/components/AddWidgetText.vue

@@ -64,12 +64,9 @@ const handleCancel = () => {
 }
 
 const handleBackToSelection = () => {
-  showModal({
+  showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
     forceOpen: true,
-    data: {
-      type: undefined, // when no type we display selection screen
-    },
   })
 }
 </script>

domains/grid/components/GridFloatingMenu.vue

@@ -19,24 +19,14 @@ const handleToggleGridEditMode = async () => {
 }
 
 const handleAddContent = () => {
-  showModal({
+  showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
-    data: {
-      type: undefined, // when no type we display selection screen
-      width: 1,
-      height: 1,
-    },
   })
 }
 
 const handleAddGrid = () => {
-  showModal({
+  showModal<Partial<Grid>>({
     template: 'AddEditGrid',
-    data: {
-      id: undefined,
-      grid: undefined,
-      gridColumns: undefined,
-    },
   })
 }
 

domains/grid/components/GridTabsItem.vue

@@ -44,14 +44,12 @@ const styles = computed(() => {
 })
 
 const handleEdit = () => {
-  showModal({
+  showModal<Partial<Grid>>({
     template: 'AddEditGrid',
     data: {
-      grid: {
-        id: props.grid.id,
-        title: props.grid.title,
-        gridColumns: props.grid.gridColumns,
-      },
+      id: props.grid.id,
+      title: props.grid.title,
+      gridColumns: props.grid.gridColumns,
     },
   })
 }

domains/grid/components/GridWidget.vue

@@ -86,14 +86,14 @@ const handleDelete = () => {
 }
 
 const handleEdit = () => {
-  showModal({
+  showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
     data: {
       properties: props.widget.properties,
-      id: props.widget.i,
+      i: props.widget.i,
       type: props.widget.type,
-      width: props.widget.w,
-      height: props.widget.h,
+      w: props.widget.w,
+      h: props.widget.h,
     },
   })
 }

domains/grid/components/GridWidgetAddContent.vue

@@ -3,13 +3,8 @@ const { showModal } = useModal()
 const { formatMessage } = useIntl()
 
 const handleAddContent = () => {
-  showModal({
+  showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
-    data: {
-      type: undefined, // when no type we display selection screen
-      width: 1,
-      height: 1,
-    },
   })
 }
 </script>

types/modal.ts

@@ -1,10 +1,8 @@
 import type { ModalSizes } from '@lukso/web-components'
 
-export type Modal = {
+export type Modal<T = ModalData> = {
   template?: string
-  data?: {
-    [key: string]: any
-  }
+  data?: T
   size?: ModalSizes
   forceOpen?: boolean
 }
@@ -14,3 +12,7 @@ export type ModalQueryParams = {
   modalSize?: ModalSizes
   modalData?: any
 }
+
+export type ModalData = {
+  [key: string]: any
+}