Fix TypeScript type error: use OrbitShape type for shape ref in OrbitImagesDemo

Co-authored-by: DavidHDev <48634587+DavidHDev@users.noreply.github.com>

src/demo/Animations/OrbitImagesDemo.vue

@@ -23,71 +23,21 @@
       </div>
 
       <Customize>
-        <PreviewSelect
-          title="Shape"
-          v-model="shape"
-          :options="shapeOptions"
-        />
+        <PreviewSelect title="Shape" v-model="shape" :options="shapeOptions" />
 
-        <PreviewSelect
-          title="Direction"
-          v-model="direction"
-          :options="directionOptions"
-        />
+        <PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
 
-        <PreviewSlider
-          title="Radius X"
-          v-model="radiusX"
-          :min="50"
-          :max="600"
-          :step="10"
-          value-unit="px"
-        />
+        <PreviewSlider title="Radius X" v-model="radiusX" :min="50" :max="600" :step="10" value-unit="px" />
 
-        <PreviewSlider
-          title="Radius Y"
-          v-model="radiusY"
-          :min="50"
-          :max="600"
-          :step="10"
-          value-unit="px"
-        />
+        <PreviewSlider title="Radius Y" v-model="radiusY" :min="50" :max="600" :step="10" value-unit="px" />
 
-        <PreviewSlider
-          title="Radius"
-          v-model="radius"
-          :min="50"
-          :max="600"
-          :step="10"
-          value-unit="px"
-        />
+        <PreviewSlider title="Radius" v-model="radius" :min="50" :max="600" :step="10" value-unit="px" />
 
-        <PreviewSlider
-          title="Rotation"
-          v-model="rotation"
-          :min="-180"
-          :max="180"
-          :step="1"
-          value-unit="°"
-        />
+        <PreviewSlider title="Rotation" v-model="rotation" :min="-180" :max="180" :step="1" value-unit="°" />
 
-        <PreviewSlider
-          title="Duration"
-          v-model="duration"
-          :min="5"
-          :max="120"
-          :step="5"
-          value-unit="s"
-        />
+        <PreviewSlider title="Duration" v-model="duration" :min="5" :max="120" :step="5" value-unit="s" />
 
-        <PreviewSlider
-          title="Item Size"
-          v-model="itemSize"
-          :min="20"
-          :max="120"
-          :step="4"
-          value-unit="px"
-        />
+        <PreviewSlider title="Item Size" v-model="itemSize" :min="20" :max="120" :step="4" value-unit="px" />
 
         <PreviewSwitch title="Fill (Distribute Evenly)" v-model="fill" />
 
@@ -123,7 +73,7 @@ import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
 import PreviewSelect from '../../components/common/PreviewSelect.vue';
 import RefreshButton from '../../components/common/RefreshButton.vue';
-import OrbitImages from '../../content/Animations/OrbitImages/OrbitImages.vue';
+import OrbitImages, { type OrbitShape } from '../../content/Animations/OrbitImages/OrbitImages.vue';
 import { orbitImages } from '@/constants/code/Animations/orbitImagesCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
@@ -138,7 +88,7 @@ const images = [
   'https://picsum.photos/300/300?grayscale&random=6'
 ];
 
-const shape = ref<string>('ellipse');
+const shape = ref<OrbitShape>('ellipse');
 const radiusX = ref(340);
 const radiusY = ref(80);
 const radius = ref(160);
@@ -169,29 +119,79 @@ const directionOptions = [
 
 const propData = [
   { name: 'images', type: 'string[]', default: '[]', description: 'Array of image URLs to orbit along the path.' },
-  { name: 'altPrefix', type: 'string', default: '"Orbiting image"', description: 'Prefix for auto-generated alt attributes.' },
-  { name: 'shape', type: 'OrbitShape', default: '"ellipse"', description: 'Preset shape: ellipse, circle, square, rectangle, triangle, star, heart, infinity, wave, or custom.' },
-  { name: 'customPath', type: 'string', default: 'undefined', description: 'Custom SVG path string (used when shape="custom").' },
-  { name: 'baseWidth', type: 'number', default: '1400', description: 'Base width for the design coordinate space used for responsive scaling.' },
+  {
+    name: 'altPrefix',
+    type: 'string',
+    default: '"Orbiting image"',
+    description: 'Prefix for auto-generated alt attributes.'
+  },
+  {
+    name: 'shape',
+    type: 'OrbitShape',
+    default: '"ellipse"',
+    description: 'Preset shape: ellipse, circle, square, rectangle, triangle, star, heart, infinity, wave, or custom.'
+  },
+  {
+    name: 'customPath',
+    type: 'string',
+    default: 'undefined',
+    description: 'Custom SVG path string (used when shape="custom").'
+  },
+  {
+    name: 'baseWidth',
+    type: 'number',
+    default: '1400',
+    description: 'Base width for the design coordinate space used for responsive scaling.'
+  },
   { name: 'radiusX', type: 'number', default: '700', description: 'Horizontal radius for ellipse/rectangle shapes.' },
   { name: 'radiusY', type: 'number', default: '170', description: 'Vertical radius for ellipse/rectangle shapes.' },
-  { name: 'radius', type: 'number', default: '300', description: 'Radius for circle, square, triangle, star, heart shapes.' },
+  {
+    name: 'radius',
+    type: 'number',
+    default: '300',
+    description: 'Radius for circle, square, triangle, star, heart shapes.'
+  },
   { name: 'starPoints', type: 'number', default: '5', description: 'Number of points for star shape.' },
   { name: 'starInnerRatio', type: 'number', default: '0.5', description: 'Inner radius ratio for star (0-1).' },
-  { name: 'rotation', type: 'number', default: '-8', description: 'Rotation angle of the entire orbit path in degrees.' },
+  {
+    name: 'rotation',
+    type: 'number',
+    default: '-8',
+    description: 'Rotation angle of the entire orbit path in degrees.'
+  },
   { name: 'duration', type: 'number', default: '40', description: 'Duration of one complete orbit in seconds.' },
   { name: 'itemSize', type: 'number', default: '64', description: 'Width/height of each orbiting item in pixels.' },
   { name: 'direction', type: '"normal" | "reverse"', default: '"normal"', description: 'Animation direction.' },
-  { name: 'fill', type: 'boolean', default: 'true', description: 'Whether to distribute items evenly around the orbit.' },
+  {
+    name: 'fill',
+    type: 'boolean',
+    default: 'true',
+    description: 'Whether to distribute items evenly around the orbit.'
+  },
   { name: 'width', type: 'number | "100%"', default: '100', description: 'Container width in pixels or "100%".' },
   { name: 'height', type: 'number | "auto"', default: '100', description: 'Container height in pixels or "auto".' },
   { name: 'className', type: 'string', default: '""', description: 'Additional CSS class for the container.' },
   { name: 'showPath', type: 'boolean', default: 'false', description: 'Whether to show the orbit path for debugging.' },
-  { name: 'pathColor', type: 'string', default: '"rgba(0,0,0,0.1)"', description: 'Stroke color when showPath is true.' },
+  {
+    name: 'pathColor',
+    type: 'string',
+    default: '"rgba(0,0,0,0.1)"',
+    description: 'Stroke color when showPath is true.'
+  },
   { name: 'pathWidth', type: 'number', default: '2', description: 'Stroke width when showPath is true.' },
-  { name: 'easing', type: 'string', default: '"linear"', description: 'Animation easing: linear, easeIn, easeOut, easeInOut.' },
+  {
+    name: 'easing',
+    type: 'string',
+    default: '"linear"',
+    description: 'Animation easing: linear, easeIn, easeOut, easeInOut.'
+  },
   { name: 'paused', type: 'boolean', default: 'false', description: 'Whether the animation is paused.' },
-  { name: 'responsive', type: 'boolean', default: 'false', description: 'Enable responsive scaling based on container width.' }
+  {
+    name: 'responsive',
+    type: 'boolean',
+    default: 'false',
+    description: 'Enable responsive scaling based on container width.'
+  }
 ];
 
 watch([shape, direction], () => {