mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 22:49:31 -07:00
Add prettier config, format codebase
This commit is contained in:
David Haz
@@ -2,8 +2,14 @@
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative demo-container h-[650px] overflow-hidden">
|
||||
<Cubes :borderStyle="borderStyle" :gridSize="gridSize" :maxAngle="maxAngle" :radius="radius"
|
||||
:autoAnimate="autoAnimate" :rippleOnClick="rippleOnClick" />
|
||||
<Cubes
|
||||
:borderStyle="borderStyle"
|
||||
:gridSize="gridSize"
|
||||
:maxAngle="maxAngle"
|
||||
:radius="radius"
|
||||
:autoAnimate="autoAnimate"
|
||||
:rippleOnClick="rippleOnClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
@@ -21,6 +27,7 @@
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependencyList="['gsap']" />
|
||||
</template>
|
||||
|
||||
@@ -35,117 +42,117 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import PreviewSelect from '../../components/common/PreviewSelect.vue'
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue'
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import PropTable from '../../components/common/PropTable.vue'
|
||||
import Dependencies from '../../components/code/Dependencies.vue'
|
||||
import { ref } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSelect from '../../components/common/PreviewSelect.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
|
||||
import { cubes } from '../../constants/code/Animations/cubesCode'
|
||||
import Cubes from '../../content/Animations/Cubes/Cubes.vue'
|
||||
import { cubes } from '../../constants/code/Animations/cubesCode';
|
||||
import Cubes from '../../content/Animations/Cubes/Cubes.vue';
|
||||
|
||||
const borderStyle = ref("2px dashed #A7EF9E")
|
||||
const gridSize = ref(10)
|
||||
const maxAngle = ref(45)
|
||||
const radius = ref(3)
|
||||
const autoAnimate = ref(true)
|
||||
const rippleOnClick = ref(true)
|
||||
const borderStyle = ref('2px dashed #A7EF9E');
|
||||
const gridSize = ref(10);
|
||||
const maxAngle = ref(45);
|
||||
const radius = ref(3);
|
||||
const autoAnimate = ref(true);
|
||||
const rippleOnClick = ref(true);
|
||||
|
||||
const borderOptions = [
|
||||
{ value: "2px dotted #fff", label: "Dotted White" },
|
||||
{ value: "2px dashed #A7EF9E", label: "Dashed Green" },
|
||||
{ value: "3px solid #fff", label: "Solid White" }
|
||||
]
|
||||
{ value: '2px dotted #fff', label: 'Dotted White' },
|
||||
{ value: '2px dashed #A7EF9E', label: 'Dashed Green' },
|
||||
{ value: '3px solid #fff', label: 'Solid White' }
|
||||
];
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: "gridSize",
|
||||
type: "number",
|
||||
default: "10",
|
||||
description: "The size of the grid (number of cubes per row/column)"
|
||||
name: 'gridSize',
|
||||
type: 'number',
|
||||
default: '10',
|
||||
description: 'The size of the grid (number of cubes per row/column)'
|
||||
},
|
||||
{
|
||||
name: "cubeSize",
|
||||
type: "number",
|
||||
default: "undefined",
|
||||
description: "Fixed size of each cube in pixels. If not provided, cubes will be responsive"
|
||||
name: 'cubeSize',
|
||||
type: 'number',
|
||||
default: 'undefined',
|
||||
description: 'Fixed size of each cube in pixels. If not provided, cubes will be responsive'
|
||||
},
|
||||
{
|
||||
name: "maxAngle",
|
||||
type: "number",
|
||||
default: "45",
|
||||
description: "Maximum rotation angle for the tilt effect in degrees"
|
||||
name: 'maxAngle',
|
||||
type: 'number',
|
||||
default: '45',
|
||||
description: 'Maximum rotation angle for the tilt effect in degrees'
|
||||
},
|
||||
{
|
||||
name: "radius",
|
||||
type: "number",
|
||||
default: "3",
|
||||
description: "Radius of the tilt effect (how many cubes around the cursor are affected)"
|
||||
name: 'radius',
|
||||
type: 'number',
|
||||
default: '3',
|
||||
description: 'Radius of the tilt effect (how many cubes around the cursor are affected)'
|
||||
},
|
||||
{
|
||||
name: "easing",
|
||||
type: "string",
|
||||
name: 'easing',
|
||||
type: 'string',
|
||||
default: "'power3.out'",
|
||||
description: "GSAP easing function for the tilt animation"
|
||||
description: 'GSAP easing function for the tilt animation'
|
||||
},
|
||||
{
|
||||
name: "duration",
|
||||
type: "object",
|
||||
default: "{ enter: 0.3, leave: 0.6 }",
|
||||
description: "Animation duration for enter and leave effects"
|
||||
name: 'duration',
|
||||
type: 'object',
|
||||
default: '{ enter: 0.3, leave: 0.6 }',
|
||||
description: 'Animation duration for enter and leave effects'
|
||||
},
|
||||
{
|
||||
name: "cellGap",
|
||||
type: "number | object",
|
||||
default: "undefined",
|
||||
description: "Gap between cubes. Can be a number or object with row/col properties"
|
||||
name: 'cellGap',
|
||||
type: 'number | object',
|
||||
default: 'undefined',
|
||||
description: 'Gap between cubes. Can be a number or object with row/col properties'
|
||||
},
|
||||
{
|
||||
name: "borderStyle",
|
||||
type: "string",
|
||||
name: 'borderStyle',
|
||||
type: 'string',
|
||||
default: "'1px solid #fff'",
|
||||
description: "CSS border style for cube faces"
|
||||
description: 'CSS border style for cube faces'
|
||||
},
|
||||
{
|
||||
name: "faceColor",
|
||||
type: "string",
|
||||
name: 'faceColor',
|
||||
type: 'string',
|
||||
default: "'#060010'",
|
||||
description: "Background color for cube faces"
|
||||
description: 'Background color for cube faces'
|
||||
},
|
||||
{
|
||||
name: "shadow",
|
||||
type: "boolean | string",
|
||||
default: "false",
|
||||
description: "Shadow effect for cubes. Can be boolean or custom CSS shadow"
|
||||
name: 'shadow',
|
||||
type: 'boolean | string',
|
||||
default: 'false',
|
||||
description: 'Shadow effect for cubes. Can be boolean or custom CSS shadow'
|
||||
},
|
||||
{
|
||||
name: "autoAnimate",
|
||||
type: "boolean",
|
||||
default: "true",
|
||||
description: "Whether to automatically animate when user is idle"
|
||||
name: 'autoAnimate',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: 'Whether to automatically animate when user is idle'
|
||||
},
|
||||
{
|
||||
name: "rippleOnClick",
|
||||
type: "boolean",
|
||||
default: "true",
|
||||
description: "Whether to show ripple effect on click"
|
||||
name: 'rippleOnClick',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: 'Whether to show ripple effect on click'
|
||||
},
|
||||
{
|
||||
name: "rippleColor",
|
||||
type: "string",
|
||||
name: 'rippleColor',
|
||||
type: 'string',
|
||||
default: "'#fff'",
|
||||
description: "Color of the ripple effect"
|
||||
description: 'Color of the ripple effect'
|
||||
},
|
||||
{
|
||||
name: "rippleSpeed",
|
||||
type: "number",
|
||||
default: "2",
|
||||
description: "Speed multiplier for the ripple animation"
|
||||
name: 'rippleSpeed',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Speed multiplier for the ripple animation'
|
||||
}
|
||||
]
|
||||
];
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user