docs: remove examples-fallback.md and update example imports to use local paths in Vue components

ismail9k · ismail9k · commit a79b8e3288ea · 2025-03-15T22:31:47.000+03:00
diff --git a/docs/examples-fallback.md b/docs/examples-fallback.md
diff --git a/docs/examples/ExampleActiveClasses.vue b/docs/examples/ExampleActiveClasses.vue
@@ -1,6 +1,6 @@
 <script setup>
-import 'vue3-carousel/carousel.css'
-import { Carousel, Slide, Navigation } from 'vue3-carousel'
+import '../../dist/carousel.css'
+import { Carousel, Slide, Navigation } from '../../dist/carousel.mjs'
 
 const images = Array.from({ length: 10 }, (_, index) => ({
   id: index + 1,
diff --git a/docs/examples/ExampleAutoplay.vue b/docs/examples/ExampleAutoplay.vue
@@ -1,6 +1,6 @@
 <script setup>
-import 'vue3-carousel/carousel.css'
-import { Carousel, Slide, Navigation } from 'vue3-carousel'
+import '../../dist/carousel.css'
+import { Carousel, Slide, Navigation } from '../../dist/carousel.mjs'
 
 const images = Array.from({ length: 10 }, (_, index) => ({
   id: index + 1,
diff --git a/docs/examples/ExampleBasic.vue b/docs/examples/ExampleBasic.vue
@@ -1,6 +1,6 @@
 <script setup>
-import 'vue3-carousel/carousel.css'
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
+import '../../dist/carousel.css'
+import { Carousel, Slide, Pagination, Navigation } from '../../dist/carousel.mjs'
 
 const images = Array.from({ length: 10 }, (_, index) => ({
   id: index + 1,
diff --git a/docs/examples/ExampleBreakpoints.vue b/docs/examples/ExampleBreakpoints.vue
@@ -1,6 +1,6 @@
 <script setup>
-import 'vue3-carousel/carousel.css'
-import { Carousel, Slide, Navigation } from 'vue3-carousel'
+import '../../dist/carousel.css'
+import { Carousel, Slide, Navigation } from '../../dist/carousel.mjs'
 
 const images = Array.from({ length: 10 }, (_, index) => ({
   id: index + 1,
diff --git a/docs/examples/ExampleCustomNavigation.vue b/docs/examples/ExampleCustomNavigation.vue
@@ -1,7 +1,7 @@
 <script setup>
-import 'vue3-carousel/dist/carousel.css'
+import '../../dist/dist/carousel.css'
 import { ref } from 'vue'
-import { Carousel, Slide } from 'vue3-carousel'
+import { Carousel, Slide } from '../../dist/carousel.mjs'
 
 const carouselRef = ref()
 const currentSlide = ref(1)
diff --git a/docs/examples/ExampleDisable.vue b/docs/examples/ExampleDisable.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { ref } from 'vue'
-import { Carousel, Pagination, Navigation, Slide } from 'vue3-carousel'
-import 'vue3-carousel/carousel.css'
+import '../../dist/carousel.css'
+import { Carousel, Pagination, Navigation, Slide } from '../../dist/carousel.mjs'
+
 const config = {}
 const enabled = ref(true)
 </script>
diff --git a/docs/examples/ExampleGallery.vue b/docs/examples/ExampleGallery.vue
@@ -1,6 +1,6 @@
 <script setup>
-import 'vue3-carousel/carousel.css'
-import { Carousel, Slide, Navigation } from 'vue3-carousel'
+import '../../dist/carousel.css'
+import { Carousel, Slide, Navigation } from '../../dist/carousel.mjs'
 import { ref } from 'vue'
 
 const currentSlide = ref(0)
diff --git a/docs/examples/ExampleMouseWheel.vue b/docs/examples/ExampleMouseWheel.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Carousel, Pagination, Navigation, Slide } from 'vue3-carousel'
-import 'vue3-carousel/carousel.css'
+import { Carousel, Pagination, Navigation, Slide } from '../../dist/carousel.mjs'
+import '../../dist/carousel.css'
 
 const images = Array.from({ length: 10 }, (_, index) => ({
   id: index + 1,
diff --git a/docs/examples/ExampleVertical.vue b/docs/examples/ExampleVertical.vue
@@ -1,6 +1,6 @@
 <script setup>
-import 'vue3-carousel/carousel.css'
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
+import '../../dist/carousel.css'
+import { Carousel, Slide, Pagination, Navigation } from '../../dist/carousel.mjs'
 
 const carouselConfig = {
   dir: 'ttb',
diff --git a/docs/examples/ExampleWrapAround.vue b/docs/examples/ExampleWrapAround.vue
@@ -1,6 +1,6 @@
 <script setup>
-import 'vue3-carousel/carousel.css'
-import { Carousel, Slide, Navigation } from 'vue3-carousel'
+import '../../dist/carousel.css'
+import { Carousel, Slide, Navigation } from '../../dist/carousel.mjs'
 
 const images = Array.from({ length: 10 }, (_, index) => ({
   id: index + 1,
diff --git a/docs/examples/index.ts b/docs/examples/index.ts
@@ -18,12 +18,18 @@ import VerticalExampleRaw from './ExampleVertical.vue?raw'
 // @ts-ignore
 import WrapAroundExampleRaw from './ExampleWrapAround.vue?raw'
 
-export const BasicExample = BasicExampleRaw
-export const WrapAroundExample = WrapAroundExampleRaw
-export const VerticalExample = VerticalExampleRaw
-export const BreakpointsExample = BreakpointsExampleRaw
-export const AutoplayExample = AutoplayExampleRaw
-export const ActiveClassesExample = ActiveClassesExampleRaw
-export const CustomNavigationExample = CustomNavigationExampleRaw
-export const GalleryExample = GalleryExampleRaw
-export const MouseWheelExample = MouseWheelExampleRaw
+function formatExample(exampleRaw: string) {
+  return exampleRaw
+    .replace('../../dist/carousel.css', 'vue3-carousel/carousel.css')
+    .replace('../../dist/carousel.mjs', 'vue3-carousel')
+}
+
+export const BasicExample = formatExample(BasicExampleRaw)
+export const WrapAroundExample = formatExample(WrapAroundExampleRaw)
+export const VerticalExample = formatExample(VerticalExampleRaw)
+export const BreakpointsExample = formatExample(BreakpointsExampleRaw)
+export const AutoplayExample = formatExample(AutoplayExampleRaw)
+export const ActiveClassesExample = formatExample(ActiveClassesExampleRaw)
+export const CustomNavigationExample = formatExample(CustomNavigationExampleRaw)
+export const GalleryExample = formatExample(GalleryExampleRaw)
+export const MouseWheelExample = formatExample(MouseWheelExampleRaw)
