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

Add prettier config, format codebase

Browse Source
This commit is contained in:
David Haz
2025-07-12 11:59:33 +03:00
parent ac8b2c04d8
commit f4d97ee94e
211 changed files with 10586 additions and 8810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/demo/Backgrounds/GridMotionDemo.vue
View File

@@ -2,16 +2,19 @@
<TabbedLayout>
<template #preview>
<h2 className="demo-title-extra">Images</h2>
<div class="relative py-6 rounded-3xl overflow-hidden demo-container" style="height: 700px">
<GridMotion :items="images" />
</div>
<h2 className="demo-title-extra">Custom Content</h2>
<div class="relative py-6 rounded-3xl overflow-hidden demo-container" style="height: 700px">
<GridMotion :items="items" />
</div>
<PropTable :data="propData" />
<Dependencies :dependency-list="['gsap']" />
</template>
@@ -26,59 +29,58 @@
</template>
<script setup lang="ts">
import CliInstallation from "../../components/code/CliInstallation.vue";
import CodeExample from "../../components/code/CodeExample.vue";
import Dependencies from "../../components/code/Dependencies.vue";
import PropTable from "../../components/common/PropTable.vue";
import TabbedLayout from "../../components/common/TabbedLayout.vue";
import GridMotion from "../../content/Backgrounds/GridMotion/GridMotion.vue";
import { gridMotion } from "../../constants/code/Backgrounds/gridMotionCode";
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import GridMotion from '../../content/Backgrounds/GridMotion/GridMotion.vue';
import { gridMotion } from '../../constants/code/Backgrounds/gridMotionCode';
const propData = [
{
name: "items",
type: "array",
default: "[]",
description:
"An array of items to display in the grid. Each item can be a string, JSX element, or an image URL.",
name: 'items',
type: 'array',
default: '[]',
description: 'An array of items to display in the grid. Each item can be a string, JSX element, or an image URL.'
},
{
name: "gradientColor",
type: "string",
default: "black",
description: "Controls the color of the radial gradient used as the background.",
},
name: 'gradientColor',
type: 'string',
default: 'black',
description: 'Controls the color of the radial gradient used as the background.'
}
];
const imageUrl =
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
const numberOfImages = 30;
const images = Array.from({ length: numberOfImages }, () => imageUrl);
const items = [
"Item 1",
'Item 1',
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 2",
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'Item 2',
`<div key='item-1'>Custom Content</div>`,
"Item 4",
'Item 4',
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 5",
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'Item 5',
`<div key='item-1'>Custom Content</div>`,
"Item 7",
'Item 7',
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 8",
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'Item 8',
`<div key='item-1'>Custom Content</div>`,
"Item 10",
'Item 10',
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 11",
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'Item 11',
`<div key='item-1'>Custom Content</div>`,
"Item 13",
'Item 13',
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 14",
'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'Item 14'
];
</script>