feat: FlipCard margin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akdasa-studios/shlokas-uikit",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "files": [
     "dist"
   ],

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'
 };

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 {