mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-04-22 01:54:38 -06:00
feat: move DomeGallery styles to Tailwind classes
This commit is contained in:
onmax
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[600px]">
|
||||
<DomeGallery
|
||||
:key="rerenderKey"
|
||||
:fit="fit"
|
||||
:fit-basis="fitBasis"
|
||||
:min-radius="minRadius"
|
||||
:max-radius="maxRadius"
|
||||
:pad-factor="padFactor"
|
||||
:overlay-blur-color="overlayBlurColor"
|
||||
:max-vertical-rotation-deg="maxVerticalRotationDeg"
|
||||
:drag-sensitivity="dragSensitivity"
|
||||
:enlarge-transition-ms="enlargeTransitionMs"
|
||||
:segments="segments"
|
||||
:drag-dampening="dragDampening"
|
||||
:opened-image-width="openedImageWidth"
|
||||
:opened-image-height="openedImageHeight"
|
||||
:image-border-radius="imageBorderRadius"
|
||||
:opened-image-border-radius="openedImageBorderRadius"
|
||||
:grayscale="grayscale"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Fit" v-model="fit" :min="0.1" :max="1" :step="0.05" />
|
||||
|
||||
<PreviewSelect title="Fit Basis" v-model="fitBasis" :options="fitBasisOptions" />
|
||||
|
||||
<PreviewSlider title="Min Radius" v-model="minRadius" :min="200" :max="800" :step="50" />
|
||||
|
||||
<PreviewSlider title="Pad Factor" v-model="padFactor" :min="0.1" :max="0.5" :step="0.05" />
|
||||
|
||||
<PreviewColor title="Overlay Blur Color" v-model="overlayBlurColor" />
|
||||
|
||||
<PreviewSlider title="Max Vertical Rotation" v-model="maxVerticalRotationDeg" :min="0" :max="15" :step="1" />
|
||||
|
||||
<PreviewSlider title="Drag Sensitivity" v-model="dragSensitivity" :min="5" :max="50" :step="5" />
|
||||
|
||||
<PreviewSlider title="Enlarge Transition (ms)" v-model="enlargeTransitionMs" :min="200" :max="800" :step="50" />
|
||||
|
||||
<PreviewSlider title="Segments" v-model="segments" :min="20" :max="50" :step="5" />
|
||||
|
||||
<PreviewSlider title="Drag Dampening" v-model="dragDampening" :min="0.5" :max="5" :step="0.5" />
|
||||
|
||||
<PreviewText title="Opened Image Width" v-model="openedImageWidth" placeholder="e.g., 400px" />
|
||||
|
||||
<PreviewText title="Opened Image Height" v-model="openedImageHeight" placeholder="e.g., 400px" />
|
||||
|
||||
<PreviewText title="Image Border Radius" v-model="imageBorderRadius" placeholder="e.g., 30px" />
|
||||
|
||||
<PreviewText title="Opened Image Border Radius" v-model="openedImageBorderRadius" placeholder="e.g., 30px" />
|
||||
|
||||
<PreviewSwitch title="Grayscale" v-model="grayscale" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="domeGallery" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="domeGallery.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.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 PreviewSelect from '../../components/common/PreviewSelect.vue';
|
||||
import PreviewText from '../../components/common/PreviewText.vue';
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
||||
import DomeGallery from '../../content/Components/DomeGallery/DomeGallery.vue';
|
||||
import { domeGallery } from '@/constants/code/Components/domeGalleryCode';
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
|
||||
const fit = ref(0.8);
|
||||
const fitBasis = ref<'auto' | 'min' | 'max' | 'width' | 'height'>('auto');
|
||||
const minRadius = ref(600);
|
||||
const maxRadius = ref(Infinity);
|
||||
const padFactor = ref(0.25);
|
||||
const overlayBlurColor = ref('#060010');
|
||||
const maxVerticalRotationDeg = ref(0);
|
||||
const dragSensitivity = ref(20);
|
||||
const enlargeTransitionMs = ref(300);
|
||||
const segments = ref(34);
|
||||
const dragDampening = ref(2);
|
||||
const openedImageWidth = ref('250px');
|
||||
const openedImageHeight = ref('350px');
|
||||
const imageBorderRadius = ref('30px');
|
||||
const openedImageBorderRadius = ref('30px');
|
||||
const grayscale = ref(true);
|
||||
|
||||
const { rerenderKey } = useForceRerender();
|
||||
|
||||
const fitBasisOptions = [
|
||||
{ label: 'Auto', value: 'auto' },
|
||||
{ label: 'Minimum', value: 'min' },
|
||||
{ label: 'Maximum', value: 'max' },
|
||||
{ label: 'Width', value: 'width' },
|
||||
{ label: 'Height', value: 'height' }
|
||||
];
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'images',
|
||||
type: 'Array<string | { src: string; alt?: string }>',
|
||||
default: 'DEFAULT_IMAGES',
|
||||
description: 'Array of images to display. Can be URLs or objects with src and alt properties.'
|
||||
},
|
||||
{
|
||||
name: 'fit',
|
||||
type: 'number',
|
||||
default: '0.5',
|
||||
description: 'Size factor for dome radius relative to container dimensions.'
|
||||
},
|
||||
{
|
||||
name: 'fitBasis',
|
||||
type: '"auto" | "min" | "max" | "width" | "height"',
|
||||
default: '"auto"',
|
||||
description: 'Determines which container dimension to use as basis for dome sizing.'
|
||||
},
|
||||
{
|
||||
name: 'minRadius',
|
||||
type: 'number',
|
||||
default: '600',
|
||||
description: 'Minimum dome radius in pixels.'
|
||||
},
|
||||
{
|
||||
name: 'maxRadius',
|
||||
type: 'number',
|
||||
default: 'Infinity',
|
||||
description: 'Maximum dome radius in pixels.'
|
||||
},
|
||||
{
|
||||
name: 'padFactor',
|
||||
type: 'number',
|
||||
default: '0.25',
|
||||
description: 'Padding factor for viewer area around the dome.'
|
||||
},
|
||||
{
|
||||
name: 'overlayBlurColor',
|
||||
type: 'string',
|
||||
default: '"#060010"',
|
||||
description: 'Color used for blur overlay and edge fading effects.'
|
||||
},
|
||||
{
|
||||
name: 'maxVerticalRotationDeg',
|
||||
type: 'number',
|
||||
default: '5',
|
||||
description: 'Maximum vertical rotation angle in degrees for drag interactions.'
|
||||
},
|
||||
{
|
||||
name: 'dragSensitivity',
|
||||
type: 'number',
|
||||
default: '20',
|
||||
description: 'Sensitivity of drag interactions. Lower values require more movement.'
|
||||
},
|
||||
{
|
||||
name: 'enlargeTransitionMs',
|
||||
type: 'number',
|
||||
default: '300',
|
||||
description: 'Duration of image enlargement animation in milliseconds.'
|
||||
},
|
||||
{
|
||||
name: 'segments',
|
||||
type: 'number',
|
||||
default: '35',
|
||||
description: 'Number of grid segments for image placement on the dome.'
|
||||
},
|
||||
{
|
||||
name: 'dragDampening',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Inertia damping factor for momentum after drag release.'
|
||||
},
|
||||
{
|
||||
name: 'openedImageWidth',
|
||||
type: 'string',
|
||||
default: '"250px"',
|
||||
description: 'Width of enlarged image when opened.'
|
||||
},
|
||||
{
|
||||
name: 'openedImageHeight',
|
||||
type: 'string',
|
||||
default: '"350px"',
|
||||
description: 'Height of enlarged image when opened.'
|
||||
},
|
||||
{
|
||||
name: 'imageBorderRadius',
|
||||
type: 'string',
|
||||
default: '"30px"',
|
||||
description: 'Border radius for image tiles on the dome.'
|
||||
},
|
||||
{
|
||||
name: 'openedImageBorderRadius',
|
||||
type: 'string',
|
||||
default: '"30px"',
|
||||
description: 'Border radius for enlarged image when opened.'
|
||||
},
|
||||
{
|
||||
name: 'grayscale',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: 'Whether to apply grayscale filter to images.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
Reference in New Issue
Block a user