update the readme a bit

README.md

@@ -1,8 +1,12 @@
-# Vaul Vue
+# Former
 
 Vaul Vue is an unstyled drawer component for Vue that can be used as a Dialog replacement on tablet and mobile devices.
 It uses [Radix Vue's Dialog primitive](https://www.radix-vue.com/components/dialog.html) under the hood and is a feature complete port of [Emil Kowalski's Vaul library](https://github.com/emilkowalski/vaul) (built for React).
 
+## Playground
+
+Create and test your own form at [playground](https://geprog.github.io/former).
+
 ## Installation
 
 ```bash
@@ -41,5 +45,4 @@ import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger }
 
 All credits go to these open-source works and resources
 
-- Major credits go to [Emil Kowalski](https://emilkowal.ski/) for the original [Vaul library](https://github.com/emilkowalski/vaul).
-- [Radix Vue](https://www.radix-vue.com/) for the Dialog primitive used under the hood.
+-

packages/formkit-app/src/App.vue → packages/former/src/App.vue

@@ -8,6 +8,11 @@
         height="50"
         class="mx-auto mb-8 w-48"
       >
+      <FormKit
+        type="button"
+        :label="isEdit ? 'Edit' : 'Preview'"
+        :onClick="() => isEdit = !isEdit"
+        />
       <div ref="el">
         <FormKitSchema :schema :library />
       </div>
@@ -36,23 +41,20 @@
 </template>
 
 <script setup lang="ts">
-import { FormKitSchema } from '@formkit/vue'
-import { ref } from 'vue';
+import { FormKitSchema, FormKit } from '@formkit/vue'
+import { ref,computed, provide  } from 'vue';
 import type { FormKitSchemaNode } from '@formkit/core';
 import { useSortable } from '@vueuse/integrations/useSortable';
 import { markRaw } from 'vue';
 import FormKitEdit from './components/FormKitEdit.vue';
-import { computed } from 'vue';
 import TextEditForm from './components/TextEditForm.vue';
 
-// async function submit() {
-//   await new Promise(r => setTimeout(r, 1000))
-//   alert('Submitted! 🎉')
-// }
+const isEdit = ref(true);
+provide('isEdit', isEdit);
 
 const library = markRaw({
   FormKit: FormKitEdit,
-})
+});
 
 const editingId = ref<number>();
 

packages/formkit-app/src/components/FormKitEdit.vue → packages/former/src/components/FormKitEdit.vue

@@ -6,7 +6,7 @@
         <FormKit v-bind="$attrs" />
       </div>
 
-      <div class="flex ml-auto gap-4">
+      <div class="ml-auto gap-4 hidden group-hover:flex">
         <FormKit
         type="button"
         label="Edit"
@@ -33,6 +33,9 @@
 
 <script setup lang="ts">
 import { FormKit } from '@formkit/vue';
+import { inject, type Ref } from 'vue';
 
-defineProps<{ isEdit?: boolean; onDelete?: () => void; addAfter?: () => void; edit?: () => void }>();
+const isEdit = inject<Ref<boolean>>('isEdit');
+
+defineProps<{ onDelete?: () => void; addAfter?: () => void; edit?: () => void }>();
 </script>