Fix dialog

kieuminhcanh · Nov 26, 2024 · 4ce130f · 4ce130f
1 parent 43381f3
commit 4ce130f
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/playground/app.vue b/playground/app.vue
@@ -2,7 +2,7 @@
   <VApp>
     <VMain>
       <VContainer class="d-flex flex-column ga-4">
-        <VExpansionPanels :model-value="[4]">
+        <VExpansionPanels :model-value="[0]">
           <VExpansionPanel title="Dialog">
             <VExpansionPanelText>
               <VRow>
@@ -138,6 +138,8 @@
 
   function onOpenDialog() {
     notifier.dialog(Test, {
+      width: 400,
+      title: 'Dialog Custom',
       onSubmit(data: any) {
         console.log('Submit', data)
       },

diff --git a/playground/components/test.vue b/playground/components/test.vue
@@ -1,34 +1,30 @@
 <template>
-  <VDialog max-width="500" v-model="active">
-    <VCard title="Dialog">
-      <VCardText>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua.
-      </VCardText>
-
-      <VCardActions>
-        <VSpacer></VSpacer>
-
-        <VBtn @click="onCancel" text="Cancel"></VBtn>
-        <VBtn @click="onSubmit" color="primary" text="Submit"></VBtn>
-      </VCardActions>
-    </VCard>
-
-  </VDialog>
-
+  <VCard title="Dialog">
+    <VCardText>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua.
+    </VCardText>
+
+    <VCardActions>
+      <VSpacer></VSpacer>
+
+      <VBtn @click="onCancel" text="Cancel"></VBtn>
+      <VBtn @click="onSubmit" color="primary" text="Submit"></VBtn>
+    </VCardActions>
+  </VCard>
 </template>
 
 <script lang="ts" setup>
   const active = ref(true)
   const emit = defineEmits(['submit', 'cancel'])
 
   function onSubmit() {
-    active.value = false
     emit('submit', 'hello')
   }
 
   function onCancel() {
-    active.value = false
+    console.log('Cancel on component');
+    
     emit('cancel')
   }
 </script>

diff --git a/src/module.ts b/src/module.ts
@@ -22,6 +22,8 @@ export default defineNuxtModule<ModuleOptions>({
   async setup(_options, _nuxt) {
     const resolver = createResolver(import.meta.url)
 
+    _nuxt.options.build.transpile.push('vuetify-nuxt-module');
+
     await installModule('vuetify-nuxt-module')
 
     _nuxt.options.runtimeConfig.public.notifier = _options

diff --git a/src/runtime/components/NotifierComponent.vue b/src/runtime/components/NotifierComponent.vue
@@ -1,75 +1,59 @@
 <template>
-  <VDefaultsProvider root>
-    <VDialog
-      v-model="show"
-      v-bind="options"      
-      activator="parent"
-    >
-      <VCard :title="title">
-        <component
-          :is="component"
-          @on-cancel="onCancelClick"
-          @on-submit="onSubmitClick"
-        />
-        <v-btn
-          v-if="!options.hideExistsButton"
-          icon
-          location="top right"
-          position="fixed"
-          :style="{ top: '5px', right: '10px' }"
-          variant="text"
-          @click="onCancelClick"
-        >
-          <v-icon>{{ options.closeIcon }}</v-icon>
-        </v-btn>
-      </VCard>
-    </VDialog>
-  </VDefaultsProvider>
+  <VDialog v-model="active" v-bind="attrs">
+    <VSheet>
+      <VToolbar v-if="title" :title="title">
+        <v-btn icon="$close" @click="onCancel" />
+      </VToolbar>
+      <component :is="attrs.component" v-if="attrs.component" @submit="onSubmit" @cancel="onCancel" />
+    </VSheet>
+  </VDialog>
 </template>
 
 <script setup lang="ts">
-  defineOptions({ inheritAttrs: false })
+  import { ref, useAttrs, type Component } from 'vue'
+  import { useLocale } from 'vuetify'
+  import type { VDialog } from "vuetify/components"
+  const { t } = useLocale()
 
-  const props = defineProps({
-    title: {
-      type: String,
-      default: null,
-    },
-    component: {
-      type: [String, Object],
-      default: null,
-    },
-    options: {
-      type: Object,
-      default: () => ({}),
-    },
-    status: {
-      type: String,
-      default: 'default',
-    },
-    onSubmit: {
-      type: Function,
-      default: undefined,
-    },
-    onCancel: {
-      type: Function,
-      default: undefined,
-    },
+  const active = ref(true)
+  const emit = defineEmits(['submit', 'cancel'])
+
+  defineOptions({
+    inheritAttrs: false
   })
 
-  const show = defineModel({ default: false, type: Boolean })
+  const attrs: Partial<{
+    width?: string
+    title?: string
+    text?: string
+    isConfirm?: boolean
+    persistent: boolean
+    submitButton?: {
+      color: string
+    },
+    textAlign?: string,
+    buttonAlign?: string,
+    divider?: boolean,
+    color?: string,
+    component: Component
+  }> = useAttrs()
 
-  function onSubmitClick() {
-    show.value = false
-    if (props.onSubmit) {
-      props.onSubmit(true)
+  defineProps({
+    title: String,
+    text: String,
+    isConfirm: {
+      type: Boolean,
+      default: true
     }
+  })
+
+  function onSubmit(data: any) {
+    active.value = false
+    emit('submit', data)
   }
 
-  function onCancelClick() {
-    show.value = false
-    if (props.onCancel) {
-      props.onCancel()
-    }
+  function onCancel() {
+    active.value = false
+    emit('cancel')
   }
 </script>
diff --git a/src/runtime/composables/useNotifier.ts b/src/runtime/composables/useNotifier.ts
@@ -1,6 +1,7 @@
 import { createApp, getCurrentInstance, h, ref, render, resolveComponent, useId, type Component, type InjectionKey, mergeProps } from 'vue'
 import NotifierToast from "../components/NotifierToast.vue"
 import NotifierConfirm from "../components/NotifierConfirm.vue"
+import NotifierComponent from "../components/NotifierComponent.vue"
 
 import type { VDialog } from "vuetify/components/VDialog"
 import { useRuntimeConfig } from '#app'
@@ -10,6 +11,7 @@ interface Notifier {
   onCancel: () => void
 }
 interface ComponentOptions extends VDialog, Notifier {
+  title?: string
   to: string
 }
 
@@ -34,7 +36,7 @@ const defaultOptions = {
     }
   },
   alert: {
-    
+
     color: 'transparent',
     width: 400,
     submitButton: {
@@ -64,7 +66,8 @@ export const useNotifier = () => {
 
   function dialog(component: string | Component, options: Partial<ComponentOptions>) {
     const concreteComponent = typeof component === 'string' ? resolveComponent(component) : component
-    return show(concreteComponent as Component, {
+    return show(NotifierComponent, {
+      component: concreteComponent as Component,
       ...options,
     })
   }