From 4ce130f2d30ddd6f69a7ed6a0cbcb35e1a5386ee Mon Sep 17 00:00:00 2001
From: Ken Kieu <minhcanhdn0704@gmail.com>
Date: Mon, 25 Nov 2024 23:24:18 -0800
Subject: [PATCH] Fix dialog

---
 package-lock.json                            |  35 +++++-
 playground/app.vue                           |   4 +-
 playground/components/test.vue               |  34 +++---
 src/module.ts                                |   2 +
 src/runtime/components/NotifierComponent.vue | 108 ++++++++-----------
 src/runtime/composables/useNotifier.ts       |   7 +-
 6 files changed, 103 insertions(+), 87 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9c5c7cf..0d95e92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "my-module",
+  "name": "vuetify-notifier-nuxt-module",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "my-module",
+      "name": "vuetify-notifier-nuxt-module",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
@@ -21,6 +21,7 @@
         "changelogen": "^0.5.7",
         "eslint": "^9.15.0",
         "nuxt": "^3.14.159",
+        "sass": "^1.81.0",
         "typescript": "latest",
         "vitest": "^2.1.5",
         "vue-tsc": "^2.1.10",
@@ -573,7 +574,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "dev": true,
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -7218,6 +7219,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/immutable": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
+      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -11042,6 +11050,27 @@
       ],
       "license": "MIT"
     },
+    "node_modules/sass": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.0.tgz",
+      "integrity": "sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
     "node_modules/scslre": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/scslre/-/scslre-0.3.0.tgz",
diff --git a/playground/app.vue b/playground/app.vue
index 6efd81e..6462ca5 100644
--- 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
index ebf8b4d..d3b1f24 100644
--- a/playground/components/test.vue
+++ b/playground/components/test.vue
@@ -1,21 +1,17 @@
 <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>
@@ -23,12 +19,12 @@
   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
index 210647f..3fea801 100644
--- 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
index 691eb12..f045dfe 100644
--- 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
index ec69a9a..f835c21 100644
--- 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,
     })
   }