atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 06:29:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #66 from Gazoon007/feat/magnet-lines-demo-customize-component

Browse Source 
feat(MagnetLinesDemo): integrate customize component
This commit is contained in:
David
2025-08-02 10:34:05 +03:00
committed by GitHub
parent bd3ad949a6 8456b3430c
commit 8b47b409f6
1 changed files with 49 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/demo/Animations/MagnetLinesDemo.vue
View File

@@ -2,9 +2,31 @@
<TabbedLayout>
<template #preview>
<div class="demo-container">
<MagnetLines :rows="10" :columns="12" container-size="40vmin" line-width="2px" line-height="30px" />
<MagnetLines
:rows="rows"
:columns="columns"
container-size="500px"
:line-width="lineWidthPx"
:line-height="lineHeightPx"
:line-color="lineColor"
:base-angle="baseAngle"
/>
</div>
<Customize>
<PreviewColor title="Line Color" v-model="lineColor" />
<PreviewSlider title="Rows" v-model="rows" :min="5" :max="maxRows" :step="1" />
<PreviewSlider title="Columns" v-model="columns" :min="5" :max="15" :step="1" />
<PreviewSlider title="Line Height (px)" v-model="lineHeight" :min="10" :max="50" :step="5" />
<PreviewSlider title="Line Width (px)" v-model="lineWidth" :min="1" :max="5" :step="1" />
<PreviewSlider title="Base Angle (°)" v-model="baseAngle" :min="-45" :max="45" :step="1" />
</Customize>
<PropTable :data="propData" />
</template>
@@ -19,13 +41,39 @@
</template>
<script setup lang="ts">
import { computed, nextTick, ref, watch } 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 PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewColor from '../../components/common/PreviewColor.vue';
import MagnetLines from '../../content/Animations/MagnetLines/MagnetLines.vue';
import { magnetLines } from '@/constants/code/Animations/magnetLinesCode';
const lineHeight = ref(30);
const lineWidth = ref(2);
const lineColor = ref('#efefef');
const baseAngle = ref(-10);
const columns = ref(12);
const lineWidthPx = computed(() => `${lineWidth.value}px`);
const lineHeightPx = computed(() => `${lineHeight.value}px`);
const maxRows = computed(() => {
const containerHeight = 500;
return Math.floor(containerHeight / lineHeight.value);
});
const rows = ref(Math.min(10, maxRows.value));
watch(lineHeight, () => {
nextTick(() => {
rows.value = Math.min(rows.value, maxRows.value);
});
});
const propData = [
{
name: 'rows',