feat: FlipCard

.storybook/preview-head.html

@@ -1,3 +1,14 @@
 <script>
   window.global = window;
-</script>
+</script>
+
+<style>
+.side {
+  width: 100%;
+  height: 100%;
+  background-color: aliceblue;
+}
+.padding {
+  /* padding: 10px; */
+}
+</style>

package.json

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

src/FlipCard.stories.js

@@ -23,15 +23,14 @@ const Template = (args) => ({
   },
   template: `
     <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 v-bind="args" @click="flip" card-class="padding" side-class="side">
+      <template #front>FRONT</template>
+      <template #back>BACK</template>
     </FlipCard>
     </div>`,
 });
 
 export const Default = Template.bind({});
 Default.args = {
   flipped: false,
-  margin: '10px'
 };

src/FlipCard.vue

@@ -1,50 +1,65 @@
 <template>
     <div class="card">
-        <div class="face face--front" :class="$attrs.class">
-            <slot name="front" />
+        <div class="face face--front" :class="cardClass">
+            <div :class="sideClass">
+                <slot name="front" />
+            </div>
         </div>
 
-        <div class="face face--back" :class="$attrs.class">
-            <slot name="back" />
+        <div class="face face--back" :class="cardClass">
+            <div :class="sideClass">
+                <slot name="back" />
+            </div>
+        </div>
+
+        <div class="face no-events" :class="cardClass">
+            <div v-show="showOverlay" :class="sideClass">
+                <slot name="overlay" />
+            </div>
         </div>
     </div>
 </template>
 
-
 <script lang="ts" setup>
-import { computed, defineProps, toRefs, ref } from 'vue'
+import { computed, defineProps, toRefs, withDefaults } from 'vue'
 
 /* -------------------------------------------------------------------------- */
 /*                                  Interface                                 */
 /* -------------------------------------------------------------------------- */
 
 export interface Props {
     flipped: boolean,
-    margin?: string
+    showOverlay: boolean
+    sideClass?: string
+    cardClass?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    margin: '0px'
+    flipped: false, showOverlay: false,
+    sideClass: undefined
 })
 
 /* -------------------------------------------------------------------------- */
 /*                                    State                                   */
 /* -------------------------------------------------------------------------- */
 
-const { flipped, margin } = toRefs(props)
+const { flipped, sideClass, showOverlay } = 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);
-$margin:         v-bind(margin);
+$flipAngleBack: calc(v-bind(flipAngle) * 1deg - 180deg);
 
 .card {
-    width: calc(100% -  ($margin * 2));
-    height: calc(100% - ($margin * 2));
-    translate: $margin $margin;
-    perspective: 900px;
+    width: 100%;
+    height: 100%;
+    perspective: 2700px;
+
+    touch-action: none;
+    user-select: none;
+    will-change: transform;
 
     .face {
         position: absolute;
@@ -65,4 +80,8 @@ $margin:         v-bind(margin);
         }
     }
 }
-</style>
+
+.no-events {
+    pointer-events: none;
+}
+</style>