refactor: reorganize Slide component structure and improve type definitions for clarity and maintainability

Author: ismail9k

src/components/Slide/Slide.css

@@ -1,11 +1,8 @@
 .carousel__slide {
-  flex-shrink: 0;
-  margin: 0;
-
+  align-items: center;
   display: flex;
+  flex-shrink: 0;
   justify-content: center;
-  align-items: center;
-
-  /* Fix iOS scrolling #22 */
+  margin: 0;
   transform: translateZ(0);
 }

src/components/Slide/Slide.ts

@@ -1,36 +1,27 @@
 import {
-  defineComponent,
-  inject,
-  h,
-  SetupContext,
   computed,
-  ComputedRef,
+  defineComponent,
   getCurrentInstance,
-  onUnmounted,
-  provide,
-  useId,
+  h,
+  inject,
   onMounted,
+  onUnmounted,
   onUpdated,
-  DeepReadonly,
+  provide,
   ref,
+  useId,
 } from 'vue'
 
 import { injectCarousel } from '@/shared'
 import { disableChildrenTabbing } from '@/utils'
 
 import { SlideProps } from './Slide.types'
 
+import type { ComputedRef, DeepReadonly, SetupContext } from 'vue'
+
 export const Slide = defineComponent({
   name: 'CarouselSlide',
   props: {
-    isClone: {
-      type: Boolean,
-      default: false,
-    },
-    position: {
-      type: String,
-      default: undefined,
-    },
     id: {
       type: String,
       default: (props: { isClone?: boolean }) => (props.isClone ? undefined : useId()),
@@ -39,6 +30,14 @@ export const Slide = defineComponent({
       type: Number,
       default: undefined,
     },
+    isClone: {
+      type: Boolean,
+      default: false,
+    },
+    position: {
+      type: String,
+      default: undefined,
+    },
   },
   setup(props: DeepReadonly<SlideProps>, { attrs, slots, expose }: SetupContext) {
     const carousel = inject(injectCarousel)

src/components/Slide/Slide.types.ts

@@ -1,6 +1,6 @@
-export interface SlideProps {
+export type SlideProps = {
   id?: string
-  position?: 'before' | 'after'
   index: number
   isClone?: boolean
+  position?: 'before' | 'after'
 }