feat: implement flexible stripe elements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-stripe-elements-plus",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "Stripe Elements components for Vue",
   "main": "./dist/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
   ],
   "author": {
     "name": "Oleksandr Bystrikov",
-    "url": "https://github.com/ectoflow"
+    "url": "https://softbeehive.com"
   },
   "license": "MIT",
   "bugs": {

src/components/Card.vue

@@ -0,0 +1,14 @@
+<template>
+  <stripe-element v-bind="[$props, $attrs, $listeners]" type="card" />
+</template>
+
+<script>
+import props from './props'
+import StripeElement from './StripeElement'
+
+export default {
+  name: 'Card',
+  components: { StripeElement },
+  props,
+}
+</script>

src/components/CardCvc.vue

@@ -0,0 +1,14 @@
+<template>
+  <stripe-element v-bind="[$props, $attrs, $listeners]" type="cardCvc" />
+</template>
+
+<script>
+import props from './props'
+import StripeElement from './StripeElement'
+
+export default {
+  name: 'CardCvc',
+  components: { StripeElement },
+  props,
+}
+</script>

src/components/CardExpiry.vue

@@ -0,0 +1,14 @@
+<template>
+  <stripe-element v-bind="[$props, $attrs, $listeners]" type="cardExpiry" />
+</template>
+
+<script>
+import props from './props'
+import StripeElement from './StripeElement'
+
+export default {
+  name: 'CardExpiry',
+  components: { StripeElement },
+  props,
+}
+</script>

src/components/CardNumber.vue

@@ -0,0 +1,14 @@
+<template>
+  <stripe-element v-bind="[$props, $attrs, $listeners]" type="cardNumber" />
+</template>
+
+<script>
+import props from './props'
+import StripeElement from './StripeElement'
+
+export default {
+  name: 'CardNumber',
+  components: { StripeElement },
+  props,
+}
+</script>

src/components/StripeElement.vue

@@ -0,0 +1,76 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import props from './props'
+import { createElement, destroy } from '../stripeElements'
+
+export default {
+  name: 'StripeElement',
+  props,
+
+  data() {
+    return {
+      stripeElement: undefined,
+      domElement: document.createElement('div'),
+    }
+  },
+
+  computed: {
+    elementsUsable() {
+      const elms = this.elements
+      if (!elms) return false
+      return Object.keys(this.elements).length > 0
+    },
+  },
+
+  watch: {
+    options: {
+      handler(opts) {
+        if (opts && this.stripeElement) {
+          this.stripeElement.update(opts)
+        }
+      },
+      deep: true,
+    },
+  },
+
+  beforeDestroy() {
+    if (this.stripeElement) {
+      this.stripeElement.unmount()
+      this.stripeElement.destroy()
+    }
+  },
+
+  mounted() {
+    if (this.elementsUsable) {
+      this.mountElement()
+      this.handleEvents()
+    }
+  },
+
+  methods: {
+    mountElement() {
+      const domEl = this.domElement
+      this.stripeElement = createElement(this.elements, this.type, this.options)
+      this.stripeElement.mount(domEl)
+      this.$el.appendChild(domEl)
+
+      return this.stripeElement
+    },
+
+    handleEvents() {
+      // See stripe element events: https://stripe.com/docs/js/element/events
+      const eventTypes = ['change', 'ready', 'focus', 'blur', 'escape']
+      eventTypes.forEach((type) => {
+        this.stripeElement.on(type, this.eventHandler.bind(this, type))
+      })
+    },
+
+    eventHandler(type, e) {
+      return this.$emit(type, e)
+    },
+  },
+}
+</script>