From acb0062d5117a80c0a8e3b519157188c9894ea8d Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Tue, 3 Sep 2024 22:00:55 +0200
Subject: [PATCH] atropos v1

---
 components/atropos.vue | 33 +++++++++++++++++++++++++++++++++
 pages/atropos.vue      |  5 +++++
 plugins/atropos.ts     |  9 +++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 components/atropos.vue
 create mode 100644 pages/atropos.vue
 create mode 100644 plugins/atropos.ts

diff --git a/components/atropos.vue b/components/atropos.vue
new file mode 100644
index 0000000..55e68e6
--- /dev/null
+++ b/components/atropos.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="container mx-auto p-4">
+    <atropos-component ref="atropos" class="my-atropos" active-offset="40" shadow-scale="1.05">
+      <img src="https://files.erudi.fr/screenshit/41684f3ebccdde7352339aa0ae79bc43d50a2b79.jpg" data-atropos-offset="-5" alt="3D Image 2" />
+      <img src="/logo.svg" alt="3D Image" data-atropos-offset="0" class="absolute inset-0 w-full h-full object-cover" />
+    </atropos-component>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const atropos = ref(null);
+
+onMounted(() => {
+  atropos.value.addEventListener('enter', () => {
+    console.log('Entered');
+  });
+  atropos.value.addEventListener('leave', () => {
+    console.log('Left');
+  });
+  atropos.value.addEventListener('rotate', (event) => {
+    console.log('Rotate', event.detail);
+  });
+});
+</script>
+
+<style scoped>
+.my-atropos {
+  width: 320px;
+  height: 160px;
+}
+</style>
diff --git a/pages/atropos.vue b/pages/atropos.vue
new file mode 100644
index 0000000..4ebbe4f
--- /dev/null
+++ b/pages/atropos.vue
@@ -0,0 +1,5 @@
+<template>
+  <section>
+    <atropos></atropos>
+  </section>
+</template>
\ No newline at end of file
diff --git a/plugins/atropos.ts b/plugins/atropos.ts
new file mode 100644
index 0000000..9596b95
--- /dev/null
+++ b/plugins/atropos.ts
@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('atropos/element').then(({ default: AtroposComponent }) => {
+      customElements.define('atropos-component', AtroposComponent);
+    });
+  }
+});