feat(demo): update to [email protected]

Author: MichaelGitArt

packages/demo/package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "dependencies": {
     "@vueuse/core": "^5.2.0",
-    "gitart-vue-dialog": "1.0.3"
+    "gitart-vue-dialog": "1.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.3.0",

packages/demo/src/App.vue

@@ -25,6 +25,10 @@
         <NestingDialogLayout />
       </div>
 
+      <div p="y-3">
+        <ActivatorDialogLayout />
+      </div>
+
       <TheFooter m="t-4" />
     </div>
   </div>
@@ -41,6 +45,7 @@ import TheFooter from '@/components/Interface/TheFooter.vue'
 import DialogLayout from '@/components/Layout/DialogLayout.vue'
 import ProgrammaticalDialogLayout from '@/components/Layout/ProgrammaticalDialogLayout.vue'
 import NestingDialogLayout from '@/components/Layout/NestingDialogLayout.vue'
+import ActivatorDialogLayout from '@/components/Layout/ActivatorDialogLayout.vue'
 
 export default defineComponent({
   name: 'App',
@@ -51,6 +56,7 @@ export default defineComponent({
     DialogLayout,
     ProgrammaticalDialogLayout,
     NestingDialogLayout,
+    ActivatorDialogLayout,
   },
 })
 </script>

packages/demo/src/components/Layout/ActivatorDialogLayout.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <h3 m="b-3">
+      Dialogs using #activator slot
+    </h3>
+
+    <GDialog
+      v-model="dialog"
+      max-width="400"
+    >
+      <template #activator="attrs">
+        <Btn v-bind="attrs" m="r-2">
+          Activator
+        </Btn>
+      </template>
+
+      <DialogToolbar @close="dialog = false" />
+
+      <div p="x-5 y-4">
+        <h3 m="b-4">
+          Activator
+        </h3>
+      </div>
+    </GDialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+import { GDialog } from 'gitart-vue-dialog'
+
+import DialogToolbar from '@/components/Dialog/DialogToolbar.vue'
+
+import Btn from '@/components/UI/Btn/Btn.vue'
+
+export default defineComponent({
+  name: 'DialogLayout',
+  components: {
+    GDialog,
+    DialogToolbar,
+    Btn,
+  },
+
+  setup() {
+    const dialog = ref(false)
+
+    return {
+      dialog,
+    }
+  },
+})
+</script>