example component added

Author: fatihsolhan

example/src/App.vue

@@ -29,6 +29,8 @@
     <v-dynamic></v-dynamic>
     <h2 class="text-3xl py-2">Advanced dynamic modal</h2>
     <v-dynamic-advanced></v-dynamic-advanced>
+    <h2 class="text-3xl py-2">Tailwind HOC Custom Transition Modal</h2>
+    <hoc-example-tailwind-custom-transition></hoc-example-tailwind-custom-transition>
 
     <modals-container></modals-container>
     <div v-for="i in 100" :key="i">{{ i }}</div>

example/src/components/hoc/HocExampleTailwindCustomTransition.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <v-tailwind-modal
+      v-model="show"
+      @confirm="confirm"
+      @cancel="cancel"
+      :transition="{
+        'enter-active-class': 'transition duration-200 ease-in-out transform',
+        'enter-class': 'translate-y-full',
+        'enter-to-class': 'translate-y-0',
+        'leave-active-class': 'transition duration-200 ease-in-out transform',
+        'leave-to-class': 'translate-y-full',
+        'leave-class': 'translate-y-0'
+      }"
+    >
+      <template v-slot:title>Hello, vue-final-modal</template>
+      <p>
+        Vue Final Modal is a renderless, stackable, detachable and lightweight
+        modal component.
+      </p>
+    </v-tailwind-modal>
+
+    <button class="vfm-btn" @click="show = true">Open modal</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    show: false
+  }),
+  methods: {
+    confirm() {
+      // some code...
+      this.show = false
+    },
+    cancel(close) {
+      // some code...
+      close()
+    }
+  }
+}
+</script>