Merge pull request #98 from onmax/feat/dome-gallery

feat: add DomeGallery component

Author: DavidHDev

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Laser Flow', 'Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
+export const NEW = ['Laser Flow', 'Dome Gallery', 'Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -87,6 +87,7 @@ export const CATEGORIES = [
  'Tilted Card',
  'Glass Icons',
  'Decay Card',
+ 'Dome Gallery',
  'Flowing Menu',
  'Elastic Slider',
  'Stack',

src/constants/Components.ts

@@ -71,6 +71,7 @@ const components = {
  'infinite-scroll': () => import('../demo/Components/InfiniteScrollDemo.vue'),
  'glass-icons': () => import('../demo/Components/GlassIconsDemo.vue'),
  'decay-card': () => import('../demo/Components/DecayCardDemo.vue'),
+ 'dome-gallery': () => import('../demo/Components/DomeGalleryDemo.vue'),
  'flowing-menu': () => import('../demo/Components/FlowingMenuDemo.vue'),
  'elastic-slider': () => import('../demo/Components/ElasticSliderDemo.vue'),
  'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue'),

src/constants/code/Components/domeGalleryCode.ts

@@ -0,0 +1,30 @@
+import code from '@content/Components/DomeGallery/DomeGallery.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const domeGallery = createCodeObject(code, 'Components/DomeGallery', {
+ installation: `# No external dependencies required`,
+ usage: `<template>
+ <DomeGallery
+ :images="[
+ 'https://images.unsplash.com/photo-1755331039789-7e5680e26e8f?q=80&w=774&auto=format&fit=crop',
+ 'https://images.unsplash.com/photo-1755569309049-98410b94f66d?q=80&w=772&auto=format&fit=crop',
+ 'https://images.unsplash.com/photo-1755497595318-7e5e3523854f?q=80&w=774&auto=format&fit=crop'
+ ]"
+ :fit="0.8"
+ fit-basis="auto"
+ :min-radius="600"
+ :segments="34"
+ :drag-sensitivity="20"
+ :enlarge-transition-ms="300"
+ :grayscale="true"
+ overlay-blur-color="#060010"
+ image-border-radius="30px"
+ opened-image-width="250px"
+ opened-image-height="350px"
+ />
+</template>
+
+<script setup lang="ts">
+ import DomeGallery from "./DomeGallery.vue";
+</script>`
+});