Component Boom

src/demo/Animations/MagnetDemo.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="magnet-demo">
+    <TabbedLayout>
+      <template #preview>
+        <h2 class="demo-title-extra">Container</h2>
+        <div class="demo-container">
+          <Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength">
+            <div class="magnet-container">
+              Hover Me!
+            </div>
+          </Magnet>
+
+        </div>
+
+        <h2 class="demo-title-extra">Link</h2>
+        <div class="demo-container">
+          <Magnet :key="rerenderKey + 1" :padding="Math.floor(padding / 2)" :disabled="disabled"
+            :magnetStrength="magnetStrength">
+            <a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noreferrer" class="magnet-link">
+              Star <span class="accent">Vue Bits</span> on GitHub!
+            </a>
+          </Magnet>
+
+        </div>
+
+        <Customize>
+          <PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
+
+          <PreviewSlider title="Padding" v-model="padding" :min="0" :max="300" :step="10" value-unit="px"
+            @update:model-value="forceRerender" />
+
+          <PreviewSlider title="Strength" v-model="magnetStrength" :min="1" :max="10" :step="1"
+            @update:model-value="forceRerender" />
+        </Customize>
+
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="magnet" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="magnet.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import Magnet from '../../content/Animations/Magnet/Magnet.vue'
+import { magnet } from '@/constants/code/Animations/magnetCode'
+import { useForceRerender } from '@/composables/useForceRerender'
+
+const disabled = ref(false)
+const padding = ref(100)
+const magnetStrength = ref(2)
+const { rerenderKey, forceRerender } = useForceRerender()
+
+const propData = [
+  {
+    name: 'padding',
+    type: 'number',
+    default: '100',
+    description: 'Specifies the distance (in pixels) around the element that activates the magnet pull.',
+  },
+  {
+    name: 'disabled',
+    type: 'boolean',
+    default: 'false',
+    description: 'Disables the magnet effect when set to true.',
+  },
+  {
+    name: 'magnetStrength',
+    type: 'number',
+    default: '2',
+    description: 'Controls the strength of the pull; higher values reduce movement, lower values increase it.',
+  },
+  {
+    name: 'activeTransition',
+    type: 'string',
+    default: '"transform 0.3s ease-out"',
+    description: 'CSS transition applied to the element when the magnet is active.',
+  },
+  {
+    name: 'inactiveTransition',
+    type: 'string',
+    default: '"transform 0.5s ease-in-out"',
+    description: 'CSS transition applied when the magnet is inactive (mouse out of range).',
+  },
+  {
+    name: 'wrapperClassName',
+    type: 'string',
+    default: '""',
+    description: 'Optional CSS class name for the outermost wrapper element.',
+  },
+  {
+    name: 'innerClassName',
+    type: 'string',
+    default: '""',
+    description: 'Optional CSS class name for the moving (inner) element.',
+  }
+]
+</script>
+
+<style scoped>
+.demo-title-extra {
+  font-size: 1.1rem;
+  color: #fff;
+  margin: 2rem 0 1rem 0;
+  font-weight: 600;
+}
+
+.demo-container {
+  position: relative;
+  min-height: 300px;
+}
+
+.magnet-container {
+  width: 200px;
+  height: 100px;
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #fff;
+  background: #111;
+  border: 1px solid #222;
+  border-radius: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.magnet-link {
+  font-size: 1.125rem;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.magnet-link:hover {
+  color: #f0f0f0;
+}
+
+.accent {
+  color: #27ff56;
+}
+</style>