From d1cf3a3c266da29314ccbedb63888013f6558146 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Advaita=20K=E1=B9=9B=E1=B9=A3=E1=B9=87a=20D=C4=81sa?=
 <advaita.krishna.das@gmail.com>
Date: Thu, 2 Mar 2023 13:42:57 +0100
Subject: [PATCH] feat: FlipCard margin

---
 package-lock.json       |  4 ++--
 package.json            |  2 +-
 src/FlipCard.stories.js |  7 ++++---
 src/FlipCard.vue        | 23 +++++++++++++++--------
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d45469b..59cbc1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@akdasa-studios/shlokas-uikit",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@akdasa-studios/shlokas-uikit",
-      "version": "0.0.11",
+      "version": "0.0.14",
       "dependencies": {
         "@vueuse/core": "^9.13.0",
         "vue": "^3.2.45"
diff --git a/package.json b/package.json
index 059af81..f154567 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@akdasa-studios/shlokas-uikit",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "files": [
     "dist"
   ],
diff --git a/src/FlipCard.stories.js b/src/FlipCard.stories.js
index 31773a5..a816b91 100644
--- a/src/FlipCard.stories.js
+++ b/src/FlipCard.stories.js
@@ -22,8 +22,8 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-    <div style="width:200px;height:400px">
-    <FlipCard v-bind="args" @click="flip" class="card">
+    <div style="width:200px;height:400px;background-color:gray">
+    <FlipCard v-bind="args" @click="flip">
       <template #front><div style="background-color:lightblue;height:100%">FRONT</div></template>
       <template #back><div style="background-color:lightgreen;height:100%">BACK</div></template>
     </FlipCard>
@@ -32,5 +32,6 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-  flipped: false
+  flipped: false,
+  margin: '10px'
 };
diff --git a/src/FlipCard.vue b/src/FlipCard.vue
index 0389d3d..490ca63 100644
--- a/src/FlipCard.vue
+++ b/src/FlipCard.vue
@@ -12,31 +12,38 @@
 
 
 <script lang="ts" setup>
-import { computed, defineProps, toRefs, defineEmits } from 'vue'
+import { computed, defineProps, toRefs, ref } from 'vue'
 
 /* -------------------------------------------------------------------------- */
 /*                                  Interface                                 */
 /* -------------------------------------------------------------------------- */
 
-const props = defineProps<{
-    flipped: boolean
-}>()
+export interface Props {
+    flipped: boolean,
+    margin?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    margin: '0px'
+})
 
 /* -------------------------------------------------------------------------- */
 /*                                    State                                   */
 /* -------------------------------------------------------------------------- */
 
-const { flipped } = toRefs(props)
+const { flipped, margin } = toRefs(props)
 const flipAngle = computed(() => flipped.value ? 180 : 0)
 </script>
 
 <style scoped lang="scss">
 $flipAngleFront: calc(v-bind(flipAngle) * 1deg);
-$flipAngleBack: calc(v-bind(flipAngle) * 1deg - 180deg);
+$flipAngleBack:  calc(v-bind(flipAngle) * 1deg - 180deg);
+$margin:         v-bind(margin);
 
 .card {
-    width: 100%;
-    height: 100%;
+    width: calc(100% -  ($margin * 2));
+    height: calc(100% - ($margin * 2));
+    translate: $margin $margin;
     perspective: 900px;
 
     .face {