feat: FlipCard

package.json

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

src/FlipCard.stories.js

@@ -0,0 +1,36 @@
+import FlipCard from './FlipCard.vue'
+import { action } from '@storybook/addon-actions'
+
+export default {
+  title: 'Deck/Flip Card',
+  component: FlipCard,
+  argTypes: {
+    flipped: {
+      control: { type: 'boolean' }
+    },
+  },
+};
+
+const flip = action("flip")
+
+const Template = (args) => ({
+  components: { FlipCard },
+  methods: {
+    flip(data) { flip(data); args.flipped = !args.flipped }
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="width:200px;height:400px">
+    <FlipCard v-bind="args" @click="flip" class="card">
+      <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>
+    </div>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  flipped: false
+};

src/FlipCard.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="card">
+        <div class="face face--front" :class="$attrs.class">
+            <slot name="front" />
+        </div>
+
+        <div class="face face--back" :class="$attrs.class">
+            <slot name="back" />
+        </div>
+    </div>
+</template>
+
+
+<script lang="ts" setup>
+import { computed, defineProps, toRefs, defineEmits } from 'vue'
+
+/* -------------------------------------------------------------------------- */
+/*                                  Interface                                 */
+/* -------------------------------------------------------------------------- */
+
+const props = defineProps<{
+    flipped: boolean
+}>()
+
+/* -------------------------------------------------------------------------- */
+/*                                    State                                   */
+/* -------------------------------------------------------------------------- */
+
+const { flipped } = 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);
+
+.card {
+    width: 100%;
+    height: 100%;
+    perspective: 900px;
+
+    .face {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        backface-visibility: hidden;
+        transition: .5s ease-in-out;
+        overflow: hidden;
+
+        &--front {
+            transform: rotateY($flipAngleFront);
+        }
+
+        &--back {
+            transform: rotateY($flipAngleBack);
+        }
+    }
+}
+</style>

src/index.ts

@@ -1,3 +1,4 @@
 export { default as DarkImage } from './DarkImage.vue'
 export { default as SVGTextLines } from './SVGTextLines.vue'
-export { default as AudioPlayer } from './AudioPlayer.vue'
+export { default as AudioPlayer } from './AudioPlayer.vue'
+export { default as FlipCard } from './FlipCard.vue'