From da8a6700cca7832f74d0cc4d6349cb1dac7c116d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 27 Jul 2022 16:44:23 +0200
Subject: [PATCH] feat(gui-v2): add flipping card

---
 .../components/general/FlippingCard.vue       | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/general/FlippingCard.vue

diff --git a/packages/nc-gui-v2/components/general/FlippingCard.vue b/packages/nc-gui-v2/components/general/FlippingCard.vue
new file mode 100644
index 0000000000..ba228843b5
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/FlippingCard.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+type FlipTrigger = 'hover' | 'click' | { duration: number }
+
+interface Props {
+  triggers?: FlipTrigger[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  triggers: () => ['click'] as FlipTrigger[],
+})
+
+let flipped = $ref(false)
+let hovered = $ref(false)
+let flipTimer = $ref<NodeJS.Timer | null>(null)
+
+onMounted(() => {
+  const duration = props.triggers.reduce((dur, trigger) => {
+    if (typeof trigger !== 'string') {
+      dur = trigger.duration
+    }
+
+    return dur
+  }, 0)
+
+  if (duration > 0) {
+    flipTimer = setInterval(() => {
+      if (!hovered) {
+        flipped = !flipped
+      }
+    }, duration)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (flipTimer) {
+    clearInterval(flipTimer)
+  }
+})
+
+function onHover(isHovering: boolean) {
+  hovered = isHovering
+
+  if (props.triggers.find((trigger) => trigger === 'hover')) {
+    flipped = isHovering
+  }
+}
+
+function onClick() {
+  if (props.triggers.find((trigger) => trigger === 'click')) {
+    flipped = !flipped
+  }
+}
+</script>
+
+<template>
+  <div class="flip-card" @click="onClick" @mouseover="onHover(true)" @mouseleave="onHover(false)">
+    <div class="flipper" :style="{ transform: flipped ? 'rotateY(180deg)' : '' }">
+      <div class="front" :style="{ 'pointer-events': flipped ? 'none' : 'auto' }">
+        <slot name="front" />
+      </div>
+      <div class="back" :style="{ 'pointer-events': flipped ? 'auto' : 'none' }">
+        <slot name="back" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.flip-card {
+  background-color: transparent;
+  perspective: 1000px;
+}
+
+.flipper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.front,
+.back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.back {
+  transform: rotateY(180deg);
+}
+</style>