feat: 🎸 改用 vueuse 的 inject

Author: JinghuiS

doc/package.json

@@ -24,7 +24,7 @@
     "vue": "^3.2.45",
     "vue-demi": "^0.13.11",
     "vue-i18n": "^9.2.2",
-    "vue-modal-provider": "^0.4.0",
+    "vue-modal-provider": "^0.4.1",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

doc/pnpm-lock.yaml

@@ -2,19 +2,13 @@
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 import HelloWorld from "./components/HelloWorld.vue";
-import { ModalProvider } from "../src";
+import { ModalProvider, useModal, useModalRef } from "../src";
+
+const modal = useModal(HelloWorld);
 </script>
 
 <template>
   <ModalProvider>
-    <div>
-      <a href="https://vitejs.dev" target="_blank">
-        <!-- <img src="/vite.svg" class="logo" alt="Vite logo" /> -->
-      </a>
-      <a href="https://vuejs.org/" target="_blank">
-        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-      </a>
-    </div>
     <HelloWorld />
   </ModalProvider>
 </template>

example/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <Modal v-model="visible">
+    <div @click="close()">close child</div>
+
+    {{ visible ? "show" : "false" }}
+  </Modal>
+</template>
+<script lang="ts" setup>
+import Modal from "./Modal.vue";
+import { useModalRef } from "../../src";
+import { inject } from "vue";
+const props = defineProps<{ msg: number }>();
+const { args, visible, hide, remove, reject, resolve } = useModalRef();
+
+const close = () => {
+  resolve();
+  hide();
+
+  remove();
+};
+</script>

example/components/ChildTest.vue

@@ -1,15 +1,24 @@
 <template>
   <Modal v-model="visible">
-    {{ msg }}
+    <div @click="close()">close father</div>
 
+    <div @click="childModal.show()">open child</div>
     {{ visible ? "show" : "false" }}
   </Modal>
 </template>
 <script lang="ts" setup>
 import Modal from "./Modal.vue";
-import { useModalRef } from "../../src";
+import { useModal, useModalRef } from "../../src";
 import { inject } from "vue";
+import ChildTest from "./ChildTest.vue";
 const props = defineProps<{ msg: number }>();
-const { args, visible, hide } = useModalRef();
-let one = inject("test");
+
+const childModal = useModal(ChildTest);
+const { args, visible, hide, remove, reject, resolve } = useModalRef();
+
+const close = () => {
+  hide();
+  resolve();
+  remove();
+};
 </script>

example/components/ModalTest.vue

@@ -92,6 +92,7 @@
     "email": "1292077619@qq.com"
   },
   "dependencies": {
+    "@vueuse/core": "^10.11.0",
     "vue": "^3.4.23"
   },
   "devDependencies": {