astro-swiper 0.0.1 → 0.1.0

package/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) Pascal Brand
+// MIT License
+
+export * from "./src"

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "astro-swiper",
-  "version": "0.0.1",
-  "description": "Astro component for swiper",
+  "version": "0.1.0",
+  "description": "Astro component for swiper, dedicated to slider / carousel / photo swiper / slide",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pascal-brand38/astro-swiper.git"
@@ -18,5 +15,18 @@
   "bugs": {
     "url": "https://github.com/pascal-brand38/astro-swiper/issues"
   },
-  "homepage": "https://github.com/pascal-brand38/astro-swiper#readme"
+  "homepage": "https://github.com/pascal-brand38/astro-swiper#readme",
+  "exports": "./index.ts",
+  "files": [
+    "index.ts",
+    "src/**"
+  ],
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "astro": "^5.9.2",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "swiper": "^11.2.8"
+  }
 }

package/src/components/Swiper.astro

@@ -0,0 +1,52 @@
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle'
+
+import type { AstroSwiperType } from './index'
+
+type Props = AstroSwiperType
+
+
+const {
+  options={},
+  class: className = '',
+  ...props
+} = Astro.props;
+
+const swiperId = 'astro-swiper-' + Math.random().toString(36).slice(2, 11)
+
+---
+
+<!-- Slider main container -->
+<astro-swiper
+  class={`swiper ${swiperId} ${className}`}
+  {...props}
+  data-options={JSON.stringify(options)}
+  data-id={swiperId}>
+    <slot/>
+</astro-swiper>
+
+
+<script>
+  import Swiper from 'swiper/bundle'
+  import { register } from 'swiper/element/bundle';
+
+
+  class AstroSwiper extends HTMLElement {
+    constructor() {
+      super();
+  register();
+
+
+      // Read the message from the data attribute.
+      const options = JSON.parse(this.dataset.options || '')
+      const id = this.dataset.id    // to have more than 1 swiper in a single page
+
+      const swiper = new Swiper(`.${id}`, options)
+    }
+  }
+
+  customElements.define('astro-swiper', AstroSwiper);
+</script>

package/src/components/SwiperButtonNext.astro

@@ -0,0 +1,24 @@
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<"div">
+
+const {
+  class: className = '',
+  ...props
+} = Astro.props;
+
+
+---
+
+<!-- next button -->
+<div
+  class={`swiper-button-next ${className}`}
+  {...props}>
+    <slot/>
+</div>

package/src/components/SwiperButtonPrev.astro

@@ -0,0 +1,24 @@
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<"div">
+
+const {
+  class: className = '',
+  ...props
+} = Astro.props;
+
+
+---
+
+<!-- prev button -->
+<div
+  class={`swiper-button-prev ${className}`}
+  {...props}>
+    <slot/>
+</div>

package/src/components/SwiperPagination.astro

@@ -0,0 +1,23 @@
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<"div">
+
+const {
+  class: className = '',
+  ...props
+} = Astro.props;
+
+
+---
+
+<div
+  class={`swiper-pagination ${className}`}
+  {...props}>
+    <slot/>
+</div>

package/src/components/SwiperScrollbar.astro

@@ -0,0 +1,23 @@
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<"div">
+
+const {
+  class: className = '',
+  ...props
+} = Astro.props;
+
+
+---
+
+<div
+  class={`swiper-scrollbar ${className}`}
+  {...props}>
+    <slot/>
+</div>

package/src/components/SwiperSlide.astro

@@ -0,0 +1,24 @@
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<"div">
+
+const {
+  class: className = '',
+  ...props
+} = Astro.props;
+
+
+---
+
+<!-- a single slide -->
+<div
+  class={`swiper-slide ${className}`}
+  {...props}>
+    <slot/>
+</div>

package/src/components/SwiperWrapper.astro

@@ -0,0 +1,24 @@
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<"div">
+
+const {
+  class: className = '',
+  ...props
+} = Astro.props;
+
+
+---
+
+<!-- Slider wrapper, containing all the slides -->
+<div
+  class={`swiper-wrapper ${className}`}
+  {...props}>
+    <slot/>
+</div>

package/src/index.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Pascal Brand
+// MIT License
+
+import type { SwiperOptions } from 'swiper/types'
+
+import type { HTMLAttributes } from 'astro/types'
+
+export interface AstroSwiperType extends HTMLAttributes<"div"> {
+  options?: SwiperOptions,
+}
+
+export { default as Swiper } from './components/Swiper.astro'
+export { default as SwiperButtonNext } from './components/SwiperButtonNext.astro'
+export { default as SwiperButtonPrev } from './components/SwiperButtonPrev.astro'
+export { default as SwiperPagination } from './components/SwiperPagination.astro'
+export { default as SwiperScrollbar } from './components/SwiperScrollbar.astro'
+export { default as SwiperSlide } from './components/SwiperSlide.astro'
+export { default as SwiperWrapper } from './components/SwiperWrapper.astro'