vue-snap 1.2.0 → 1.3.0

package/README.md

@@ -31,6 +31,7 @@ The idea behind this plugin is to create a fully responsive and well-optimized c
 - **No calculations or heavy logic** – performance-first approach
 - **Fully responsive** – most customization is handled via CSS (e.g. number of visible slides)
 - **ESM bundle with tree-shaking** – dead code is automatically eliminated
+- **TypeScript support** – ships with bundled type declarations out of the box
 - **SSR support** – works with frameworks like Nuxt.js 🎉 [More here](https://github.com/bartdominiak/vue-snap/tree/master/examples)
 - **Vue 3 support** 🎉  [More here](#installation--usage)
 - **Modern browser support** – compatible with all common browsers [More here](https://caniuse.com/css-snappoints)
@@ -52,7 +53,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import VueSnap from 'vue-snap'
-import 'vue-snap/dist/vue-snap.css'
+import 'vue-snap/style.css'
 
 const myApp = createApp(App)
 
@@ -64,7 +65,7 @@ myApp.mount('#app')
 
 ```js
 import { Carousel, Slide } from 'vue-snap'
-import 'vue-snap/dist/vue-snap.css'
+import 'vue-snap/style.css'
 
 export default {
   components: {

package/dist/components/Carousel.vue.d.ts

@@ -0,0 +1,53 @@
+interface CarouselProps {
+    tag?: string;
+    hideArrowsOnBound?: boolean;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    i18n?: {
+        slideLeft: string;
+        slideRight: string;
+    };
+}
+declare var __VLS_9: {}, __VLS_11: {
+    changeSlide: (direction: number) => void;
+    isBoundLeft: boolean;
+    isBoundRight: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    arrows?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<CarouselProps, {
+    changeSlide: (direction: number) => void;
+    goToSlide: (index: number) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    mounted: (...args: any[]) => void;
+    slideChange: (...args: any[]) => void;
+    leftBound: (...args: any[]) => void;
+    rightBound: (...args: any[]) => void;
+    autoplay: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<CarouselProps> & Readonly<{
+    onMounted?: ((...args: any[]) => any) | undefined;
+    onSlideChange?: ((...args: any[]) => any) | undefined;
+    onLeftBound?: ((...args: any[]) => any) | undefined;
+    onRightBound?: ((...args: any[]) => any) | undefined;
+    onAutoplay?: ((...args: any[]) => any) | undefined;
+}>, {
+    autoplay: boolean;
+    autoplayInterval: number;
+    tag: string;
+    hideArrowsOnBound: boolean;
+    i18n: {
+        slideLeft: string;
+        slideRight: string;
+    };
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Slide.vue.d.ts

@@ -0,0 +1,31 @@
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * Custom tag
+     */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * Custom tag
+     */
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/entry.d.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+import { default as Carousel } from './components/Carousel.vue';
+import { default as Slide } from './components/Slide.vue';
+export declare const VueSnap: {
+    install: (app: App) => void;
+};
+export { Carousel, Slide };
+export default VueSnap;

package/dist/hooks/useCarousel.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'vue';
+type CarouselEmits = {
+    (e: 'mounted', value: boolean): void;
+    (e: 'slideChange', index: number): void;
+    (e: 'leftBound', value: boolean): void;
+    (e: 'rightBound', value: boolean): void;
+    (e: 'autoplay', value: boolean): void;
+};
+type AutoplayOptions = {
+    autoplay: Ref<boolean>;
+    autoplayInterval: Ref<number>;
+};
+export declare function useCarousel(emit: CarouselEmits, vsWrapper: Ref<HTMLElement | null>, { autoplay, autoplayInterval }: AutoplayOptions): {
+    goToSlide: (index: number) => void;
+    changeSlide: (direction: number) => void;
+    isBoundLeft: Ref<boolean, boolean>;
+    isBoundRight: Ref<boolean, boolean>;
+    pauseAutoplay: () => void;
+    resumeAutoplay: () => void;
+};
+export {};

package/dist/utils/helpers.d.ts

@@ -0,0 +1,6 @@
+export declare const isClient: boolean;
+export declare const approximatelyEqual: (v1: number, v2: number, epsilon?: number) => boolean;
+export declare function debounce<T extends (...args: unknown[]) => void>(fn: T, wait: number): {
+    (...args: Parameters<T>): void;
+    cancel: () => void;
+};

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "vue-snap",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "description": "Lightweight Carousel based on CSS Scroll Snap",
   "main": "dist/vue-snap.umd.js",
   "module": "dist/vue-snap.es.js",
   "unpkg": "dist/vue-snap.js",
+  "types": "dist/entry.d.ts",
+  "files": [
+    "dist"
+  ],
   "engines": {
     "node": ">=22"
   },
   "exports": {
     ".": {
+      "types": "./dist/entry.d.ts",
       "import": "./dist/vue-snap.es.js",
       "require": "./dist/vue-snap.umd.js"
     },
+    "./style.css": "./dist/vue-snap.css",
     "./dist/vue-snap.css": "./dist/vue-snap.css"
   },
   "scripts": {
@@ -50,6 +56,7 @@
     "sass-embedded": "^1.100.0",
     "typescript": "5",
     "vite": "^8.1.4",
+    "vite-plugin-dts": "^5.0.3",
     "vue-tsc": "^3.3.7"
   }
 }

package/.claude/settings.local.json

@@ -1,44 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(pnpm --version)",
-      "Bash(pnpm add *)",
-      "Bash(pnpm remove *)",
-      "Bash(npx biome *)",
-      "Bash(curl -s https://biomejs.dev/schemas/2.5.3/schema.json)",
-      "Bash(python3 -c ' *)",
-      "Bash(python3 *)",
-      "Bash(pnpm lint *)",
-      "Bash(echo \"exit=$?\")",
-      "Bash(npx vue-tsc *)",
-      "Bash(pnpm run *)",
-      "Bash(pnpm install *)",
-      "Bash(node -e \"console.log\\(require.resolve\\('vue-snap/package.json'\\)\\)\")",
-      "Bash(node -e ' *)",
-      "Bash(bun --version)",
-      "Bash(bun add *)",
-      "Bash(bun run *)",
-      "Bash(gh pr *)",
-      "Bash(git fetch *)",
-      "Bash(git rev-list *)",
-      "Bash(bunx vue-tsc *)",
-      "Bash(open *)",
-      "Bash(bun x *)",
-      "Bash(git add *)",
-      "Bash(git commit -m ' *)",
-      "Bash(git branch *)",
-      "Bash(git checkout *)",
-      "Bash(git reset *)",
-      "Bash(git -C /Users/bartek/Sites/vue-snap log --oneline -5 -- index.html)",
-      "Bash(curl -sI http://localhost:8123/index.html)",
-      "Bash(curl -sI http://localhost:8123/dist/vue-snap.js)",
-      "Bash(pkill -f \"http-server -p 8123\")",
-      "Bash(git -C /Users/bartek/Sites/vue-snap status)",
-      "Bash(curl -s http://localhost:5173/)",
-      "Skill(run)",
-      "Bash(command -v chromium-cli)",
-      "Bash(bunx --help)",
-      "Bash(pkill -f \"vite\")"
-    ]
-  }
-}

package/CHANGELOG.md

@@ -1,281 +0,0 @@
-# Changelog
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-## [1.2.0] - 2026-07-09
-
-### Fixed
-- Carousel boundary events (`leftBound`/`rightBound`) now fire once, edge-triggered, instead of repeatedly on every scroll tick
-- `changeSlide`/`goToSlide` no longer emit a duplicate `slideChange` for the same navigation
-
-### Changed
-- Migrated examples to Bun
-- Replaced ESLint with Biome
-
-## [1.1.0] - 2025-06-21
-## Updated
-- Refactored core logic into a custom useCarousel hook
-- Removed unnecessary logic (e.g. resize events, lodash/debounce)
-- Simplified and optimized carousel calculations
-- Minified entire carousel bundle to just 4KB
-
-## [1.0.3] - 2025-06-15
-
-### Fixed
-- Package.json import/export destination files
-
-## [1.0.2] - 2025-06-15
-
-### Fixed
-- Package.json import/export destination files
-
-## [1.0.1] - 2025-06-15
-
-### Fixed
-- Package.json import/export destination files
-
-## [1.0.0] - 2025-06-15
-
-### Added
-- Vitepress docs
-### Fixed
-- Github Workflow Pipeline
-### Removed
-- Rollup configs
-- Storybook
-
-## [0.7.1] - 2021-05-07
-
-### Added
-- Mounted event
-### Fixed
-- Prevent duplicated event page trigger
-
-## [0.7.0] - 2021-02-08
-### Removed
-- maxPages and its calculation (#55)
-
-### Updated
-- Replace changeSlide with simpler goToSlide, for consistent behavior with exposed go-to-page API + removal of dependent method that is not in use anymore (#55)
-- Split getting current page index from setting it, supporting passing the index from outside, for example goToSlide method, so in some cases the index will change, even if there was no scroll event. (#55)
-
-### Fixed
-- Fix support for calculating a proper current slide index, when there is nothing left to scroll (#55)
-
-## [0.6.7] - 2021-02-08
-### Added
-- Go to slide API (#54)
-
-## [0.6.6] - 2020-12-06
-### Updated
-- Rollback rollup-plugin-vue(6.0.0 => 5.1.9)
-
-## [0.6.5] - 2020-12-05
-### Updated
-- Dependencies
-
-## [0.6.4] - 2020-11-29
-### Added
-- changeSlide, BoundLeft, BoundRight inside slot-scope
-
-## [0.6.3] - 2020-11-23
-### Updated
-- elementScrollBy function name (#47)
-- Dependencies
-
-## [0.6.2] - 2020-11-01
-### Fixed
-- Slide children method
-
-## [0.6.1] - 2020-09-24
-### Updated
-- Yarn lock file
-
-## [0.6.0] - 2020-09-24
-### Removed
-- Removed maximum node version range (#41)
-- Node version max range (#41)
-
-### Added
-- Added dynamic tag support (#41)
-- Added i18n support with proper validation (#41)
-- Reset list-style CSS (#41)
-
-## [0.5.2] - 2020-09-21
-### Updated
-- Rollup configs
-- Vue@2 and Vue@3 examples
-- Docs
-- Dependencies
-- TravisCI Config (Auto-deploy only Vue@2 version)
-
-## [0.5.1] - 2020-09-17
-### Updated
-- Docs
-
-## [0.5.0] - 2020-09-17
-### Added
-- Emit page and bound events (#35)
-- Slot/Props/Event descriptions
-
-### Updated
-- seamless-scroll-polyfill (1.1.0 => 1.2.1)
-- Stories markups
-
-## [0.4.0] - 2020-09-15
-### Added
-- Ability to disable arrows and arrowsOnBound (#30)
-
-### Fixed
-- Created onResizefn/onScrollFn variables to avoid memory leaks (#28)
-- Improve bound calculation precision (#28)
-- Avoiding undefined ref (#28)
-- Decrease MutationObserver scope only to vsWrapper
-
-### Updated
-- Renamed Navigation slot to Arrows (#30)
-
-## [0.3.4] - 2020-09-15
-### Fixed
-- seamless-scroll-polyfill(^1.1.0 => 1.1.0)
-
-## [0.3.3] - 2020-09-15
-### Fixed
-- TravisCI Config with proper ENV variables
-
-## [0.3.2] - 2020-09-15
-### Added
-- Automated travis deployment
-
-## [0.3.1] - 2020-09-14
-### Updated
-- TravisCI configs
-
-## [0.3.0] - 2020-09-05
-### Added
-- Dynamic slides support (#25)
-
-### Updated
-- Dependencies
-
-## [0.2.0] - 2020-08-29
-### Added
-- VueLazy lib
-
-### Updated
-- Dependencies
-
-### Deleted
-- Static height in wrapper (#22)
-- Old directives
-
-## [0.1.0-beta.9] - 2020-08-26
-### Updated
-- Dependencies
-
-### Added
-- Missing type for button arrows (#21)
-
-## [0.1.0-beta.8] - 2020-07-12
-### Deleted
-- develop branch
-
-### Updated
-- trigger deployment only on tag release
-
-## [0.1.0-beta.7] - 2020-07-12
-### Updated
-- changed spread to Array.from (reduce bundle size)
-
-## [0.1.0-beta.6] - 2020-07-12
-### Fixed
-- storybook typo
-
-## [0.1.0-beta.5] - 2020-07-12
-### Added
-- storybook-static folder to .npmignore
-
-## [0.1.0-beta.4] - 2020-07-12
-### Fixed
-- tag typo
-
-## [0.1.0-beta.3] - 2020-07-12
-### Added
-- non-regular slide widths Support (#16)
-- SSR Support (#13)
-- Event optimisation with debounce
-- Reorganize methods, and load only on need (like Events: Scroll, Resize, or on init)
-
-### Updated
-- docs with new installation proccess
-
-### Moved
-- rollup configs to seperate folders
-
-## [0.1.0-beta.2] - 2020-06-24
-### Added
-- Rollup init
-
-### Deleted
-- Webpack configs
-
-## [0.1.0-beta.1] - 2020-06-17
-### Fixed
-- Docs: example relative url
-
-### Added
-- seamless-scroll-polyfill package
-
-### Deleted
-- Docs: removed example url
-- scss-loader and reduce final bundle size
-- comments in final bundle
-
-### Moved
-- Vue as peerDependency
-
-## [0.1.0-alpha.8] - 2020-06-14
-### Fixed
-- Docs: Workaround for non-supported SSR plugin
-
-## [0.1.0-alpha.7] - 2020-06-14
-### Added
-- Docs: Intersection-observer polyfill
-
-### Fixed
-- Docs: taking VueSnap from dist folder (compiled version)
-
-## [0.1.0-alpha.6] - 2020-06-14
-### Added
-- Scroll Smooth polyfill (#11)
-
-## [0.1.0-alpha.5] - 2020-06-14
-### Added
-- Lazyload support
-- Lazyload examples to docs and storybook
-
-## [0.1.0-alpha.4] - 2020-06-13
-### Added
-- Examples to docs
-- Babel presets
-
-## [0.1.0-alpha.3] - 2020-06-13
-### Added
-- docs & storybook deployment
-
-## [0.1.0-alpha.2] - 2020-06-13
-### Added
-- initialize eslint #8
-- initilize git hooks (husky) #8
-- initialize VuePress #6
-- Storybook Addons (docs, a11y, actions, knobs, viewport, storysource) #2
-- props/slots preview #2
-- initilize travis #7
-
-## [0.1.0-alpha.1] - 2020-06-12
-### Added
-- Project init

package/CLAUDE.md

@@ -1,31 +0,0 @@
-## Core Philosophy
-Write simple, readable, lightweight code. Prefer clarity over cleverness. Avoid overhead and premature complexity.
-
-## Functions
-- Use pure functions; avoid mutating state.
-- Keep functions small with a single responsibility — one function does one thing.
-- Make functions modular and standalone (no hidden dependencies on outer state).
-- Use guard clauses (early return) to keep nesting shallow.
-- Flatten asynchronous code with async/await over nested promise chains.
-
-## Readability
-- Name things clearly — descriptive names over comments. Code should read as self-documenting.
-- Comment the *why*, not the *what*. Skip comments that just restate the code.
-- Avoid magic numbers — extract them into named constants.
-- Prefer composition over deep nesting; flat is readable.
-- Keep a consistent style; let a formatter (Prettier/Biome) handle it automatically.
-
-## State & Data
-- No magic numbers/strings — name them as constants. Function-specific → top of the function; shared → top of the module.
-- Immutability by default — `const` over `let`; return new objects instead of mutating.
-- Validate inputs at boundaries; handle errors explicitly and fail fast.
-- Never swallow errors silently.
-
-## Architecture
-- Modern, fast, lightweight — avoid library overhead.
-  - Prefer native/stdlib solutions first.
-  - Only add a dependency for genuinely complex, well-tested problems (e.g. date parsing, crypto). Don't reinvent those.
-- Avoid premature abstraction — don't add layers, config, or generics until a real second use case exists.
-- Split code into modules by concern; don't put everything in one file.
-  - Heuristic: split when a file exceeds ~200 lines or mixes responsibilities.
-- No dead code — delete unused code instead of commenting it out (version control remembers).

package/biome.json

@@ -1,21 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/2.5.3/schema.json",
-	"vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
-	"files": { "includes": ["**", "!!**/dist"] },
-	"formatter": { "enabled": true, "indentStyle": "space", "indentWidth": 2 },
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true,
-			"style": {}
-		},
-		"domains": {
-			"vue": "recommended"
-		}
-	},
-	"javascript": { "formatter": { "quoteStyle": "single" } },
-	"assist": {
-		"enabled": true,
-		"actions": { "source": { "organizeImports": "on" } }
-	}
-}