From 8580c92dfcfa900e2d9491b02851cdeb9638e322 Mon Sep 17 00:00:00 2001
From: Joff Tiquez <jofftiquez@gmail.com>
Date: Fri, 4 Aug 2023 00:21:54 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(docs):=20add=20new=20composabl?=
 =?UTF-8?q?e=20components=20for=20Vue=20Stripe=20Components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added new files: use-checkout.vue, use-constants.vue, use-elements.vue, use-payment-element.vue, use-stripe.vue
- Each file represents a different composable component for Vue Stripe Components
- Each file includes a template with a main heading and a script section
- The script section imports necessary dependencies and defines page metadata using the useSeoMeta and definePageMeta functions
- The metadata includes title, description, and Twitter card information for each composable component

These new composable components were added to provide additional functionality and flexibility to Vue Stripe Components. They allow for easier integration and customization of Stripe payment functionality in Vue.js applications.
---
 src/pages/docs/composables/use-checkout.vue   | 32 +++++++++++++++++++
 src/pages/docs/composables/use-constants.vue  | 32 +++++++++++++++++++
 src/pages/docs/composables/use-elements.vue   | 32 +++++++++++++++++++
 .../docs/composables/use-payment-element.vue  | 32 +++++++++++++++++++
 src/pages/docs/composables/use-stripe.vue     | 32 +++++++++++++++++++
 5 files changed, 160 insertions(+)
 create mode 100644 src/pages/docs/composables/use-checkout.vue
 create mode 100644 src/pages/docs/composables/use-constants.vue
 create mode 100644 src/pages/docs/composables/use-elements.vue
 create mode 100644 src/pages/docs/composables/use-payment-element.vue
 create mode 100644 src/pages/docs/composables/use-stripe.vue

diff --git a/src/pages/docs/composables/use-checkout.vue b/src/pages/docs/composables/use-checkout.vue
new file mode 100644
index 0000000..348c3b2
--- /dev/null
+++ b/src/pages/docs/composables/use-checkout.vue
@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>useCheckout</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'useCheckout - Vue Stripe Components';
+    const metaDescription = 'useCheckout for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>
diff --git a/src/pages/docs/composables/use-constants.vue b/src/pages/docs/composables/use-constants.vue
new file mode 100644
index 0000000..e720a5a
--- /dev/null
+++ b/src/pages/docs/composables/use-constants.vue
@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>useConstants</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'useConstants - Vue Stripe Components';
+    const metaDescription = 'useConstants for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>
diff --git a/src/pages/docs/composables/use-elements.vue b/src/pages/docs/composables/use-elements.vue
new file mode 100644
index 0000000..ca20102
--- /dev/null
+++ b/src/pages/docs/composables/use-elements.vue
@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>useElements</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'useElements - Vue Stripe Components';
+    const metaDescription = 'useElements for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>
diff --git a/src/pages/docs/composables/use-payment-element.vue b/src/pages/docs/composables/use-payment-element.vue
new file mode 100644
index 0000000..a79893b
--- /dev/null
+++ b/src/pages/docs/composables/use-payment-element.vue
@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>usePaymentElement</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'usePaymentElement - Vue Stripe Components';
+    const metaDescription = 'usePaymentElement for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>
diff --git a/src/pages/docs/composables/use-stripe.vue b/src/pages/docs/composables/use-stripe.vue
new file mode 100644
index 0000000..4724bf2
--- /dev/null
+++ b/src/pages/docs/composables/use-stripe.vue
@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>useStripe</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'useStripe - Vue Stripe Components';
+    const metaDescription = 'useStripe for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>