@squirkle-ui/swiper 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KheangLov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# @squirkle-ui/swiper
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Carousel / slider for [Squirkle UI](https://www.npmjs.com/package/squirkle-ui). Works with Vue 3 and Vue 2.7.
+
+## Install
+```bash
+npm i @squirkle-ui/swiper @squirkle-ui/ui
+```
+Or get every component and add-on with [`squirkle-ui`](https://www.npmjs.com/package/squirkle-ui) and import from `squirkle-ui/swiper`.
+
+Peer dependencies: `vue`, `@squirkle-ui/ui`. Set up `@squirkle-ui/ui` first (`app.use(createSquirkle())` and `@squirkle-ui/ui/styles.css`).
+
+## Usage
+```ts
+import { SqSwiper } from '@squirkle-ui/swiper'        // Vue 3
+// import { SqSwiper } from '@squirkle-ui/swiper/vue2' // Vue 2.7
+import '@squirkle-ui/swiper/styles.css'
+```
+```vue
+<template>
+  <SqSwiper v-model="index" :items="slides" :slides-per-view="1.2" :space-between="16" loop>
+    <template #default="{ item }"><img :src="item.src" :alt="item.alt" /></template>
+  </SqSwiper>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SqSwiper } from '@squirkle-ui/swiper'
+const index = ref(0)
+const slides = [{ src: '/a.jpg', alt: 'A' }, { src: '/b.jpg', alt: 'B' }]
+</script>
+```
+Key props: `items`, `itemKey`, `slidesPerView`, `spaceBetween`, `breakpoints`, `effect`, `loop`, `pagination` (`dots` · `fraction` · `progress` · `false`).
+
+
+## License
+MIT © KheangLov · [Source and issues](https://github.com/KheangLov/squirkle-ui)

package/dist/styles.css

@@ -0,0 +1,47 @@
+
+.sq-swiper { position: relative; overflow: hidden; outline: none; touch-action: pan-y; user-select: none;
+}
+.sq-swiper--vertical { touch-action: pan-x;
+}
+.sq-swiper:focus-visible { box-shadow: var(--sq-focus-ring);
+}
+.sq-swiper__track { position: relative; width: 100%; height: 100%; cursor: grab;
+}
+.sq-swiper--dragging .sq-swiper__track { cursor: grabbing;
+}
+.sq-swiper__slide { position: absolute; top: 0; left: 0; height: 100%; transition-property: transform, opacity; transition-timing-function: var(--sq-ease); will-change: transform;
+}
+.sq-swiper--vertical .sq-swiper__slide { width: 100%; height: auto;
+}
+.sq-swiper__slide--jump { transition: none !important;
+}
+.sq-swiper__slide > * { width: 100%; height: 100%;
+}
+.sq-swiper--fade .sq-swiper__slide, .sq-swiper--cards .sq-swiper__slide { width: 100% !important;
+}
+.sq-swiper--cards { overflow: visible; --sq-bg: transparent;
+}
+.sq-swiper__nav { position: absolute; top: 50%; z-index: 120; transform: translateY(-50%);
+}
+.sq-swiper__nav--prev { left: var(--sq-space-3);
+}
+.sq-swiper__nav--next { right: var(--sq-space-3);
+}
+.sq-swiper--vertical .sq-swiper__nav { left: 50%; top: auto; transform: translateX(-50%);
+}
+.sq-swiper--vertical .sq-swiper__nav--prev { top: var(--sq-space-3);
+}
+.sq-swiper--vertical .sq-swiper__nav--next { bottom: var(--sq-space-3);
+}
+.sq-swiper__dots { position: absolute; z-index: 120; left: 50%; bottom: var(--sq-space-3); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 8px; border-radius: var(--sq-radius-pill); background: color-mix(in srgb, var(--sq-overlay) 28%, transparent); backdrop-filter: blur(8px);
+}
+.sq-swiper__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--sq-radius-pill); background: rgb(255 255 255 / 0.55); cursor: pointer; transition: width var(--sq-duration) var(--sq-ease), background var(--sq-duration);
+}
+.sq-swiper__dot--active { width: 22px; background: #fff;
+}
+.sq-swiper__fraction { position: absolute; z-index: 120; right: var(--sq-space-3); bottom: var(--sq-space-3); padding: 2px 10px; border-radius: var(--sq-radius-pill); background: color-mix(in srgb, var(--sq-overlay) 45%, transparent); color: #fff; font-size: var(--sq-text-xs); font-weight: var(--sq-weight-semibold);
+}
+.sq-swiper__progress { position: absolute; z-index: 120; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--sq-overlay) 20%, transparent);
+}
+.sq-swiper__progress > div { height: 100%; background: var(--sq-primary); transition: width var(--sq-duration-slow) var(--sq-ease);
+}

package/dist/types/SqSwiper.vue.d.ts

@@ -0,0 +1,503 @@
+import { type PropType } from 'vue';
+type Effect = 'slide' | 'fade' | 'coverflow' | 'cards';
+interface Responsive {
+    slidesPerView?: number;
+    spaceBetween?: number;
+}
+/**
+ * Touch/mouse swiper. `loop` is a real infinite loop without cloned slides: every slide is positioned
+ * at its wrapped offset from the active index, and slides that wrap around jump without animating.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    items: {
+        type: PropType<unknown[]>;
+        default: () => never[];
+    };
+    itemKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    slidesPerView: {
+        type: NumberConstructor;
+        default: number;
+    };
+    spaceBetween: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** { 640: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } } — keys are min container widths. */
+    breakpoints: {
+        type: PropType<Record<number, Responsive>>;
+        default: undefined;
+    };
+    effect: {
+        type: PropType<Effect>;
+        default: string;
+    };
+    loop: BooleanConstructor;
+    centered: BooleanConstructor;
+    vertical: BooleanConstructor;
+    /** Autoplay delay in ms; 0 disables. */
+    autoplay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    speed: {
+        type: NumberConstructor;
+        default: number;
+    };
+    navigation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pagination: {
+        type: PropType<"dots" | "fraction" | "progress" | false>;
+        default: string;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    rounded: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    root: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    list: import("vue").ComputedRef<unknown[]>;
+    keyOf: (item: unknown, i: number) => string | number;
+    normIndex: import("vue").ComputedRef<number>;
+    pageCount: import("vue").ComputedRef<number>;
+    canPrev: import("vue").ComputedRef<boolean>;
+    canNext: import("vue").ComputedRef<boolean>;
+    slideStyle: (i: number) => Record<string, string>;
+    isVisible: (i: number) => boolean;
+    goTo: (i: number) => void;
+    next: () => number | void;
+    prev: () => number | false | void;
+    onDown: (e: PointerEvent) => void;
+    dragging: import("vue").Ref<boolean, boolean>;
+    hovering: import("vue").Ref<boolean, boolean>;
+    jumping: import("vue").Ref<Set<number> & Omit<Set<number>, keyof Set<any>>, Set<number> | (Set<number> & Omit<Set<number>, keyof Set<any>>)>;
+    rootStyle: import("vue").ComputedRef<{
+        height: string;
+        '--sq-r': string;
+        '--sq-bg': string;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    items: {
+        type: PropType<unknown[]>;
+        default: () => never[];
+    };
+    itemKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    slidesPerView: {
+        type: NumberConstructor;
+        default: number;
+    };
+    spaceBetween: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** { 640: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } } — keys are min container widths. */
+    breakpoints: {
+        type: PropType<Record<number, Responsive>>;
+        default: undefined;
+    };
+    effect: {
+        type: PropType<Effect>;
+        default: string;
+    };
+    loop: BooleanConstructor;
+    centered: BooleanConstructor;
+    vertical: BooleanConstructor;
+    /** Autoplay delay in ms; 0 disables. */
+    autoplay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    speed: {
+        type: NumberConstructor;
+        default: number;
+    };
+    navigation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pagination: {
+        type: PropType<"dots" | "fraction" | "progress" | false>;
+        default: string;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    rounded: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    rounded: string | number;
+    loop: boolean;
+    centered: boolean;
+    vertical: boolean;
+    modelValue: number;
+    items: unknown[];
+    itemKey: string;
+    slidesPerView: number;
+    spaceBetween: number;
+    breakpoints: Record<number, Responsive>;
+    effect: Effect;
+    autoplay: number;
+    pauseOnHover: boolean;
+    speed: number;
+    navigation: boolean;
+    pagination: false | "dots" | "fraction" | "progress";
+    height: string | number;
+    label: string;
+}, {}, {
+    SqBtn: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        text: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        variant: {
+            type: PropType<import("@squirkle-ui/ui").Variant>;
+            default: import("@squirkle-ui/ui").Variant;
+        };
+        color: {
+            default: string;
+            type: StringConstructor;
+        };
+        size: {
+            type: PropType<import("@squirkle-ui/ui").Size>;
+            default: string;
+        };
+        rounded: {
+            type: PropType<import("@squirkle-ui/ui").Rounded>;
+            default: undefined;
+        };
+        icon: {
+            type: (BooleanConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        prependIcon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        appendIcon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        block: BooleanConstructor;
+        loading: BooleanConstructor;
+        disabled: BooleanConstructor;
+        active: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        elevation: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        href: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        to: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        type: {
+            type: PropType<"button" | "submit" | "reset">;
+            default: string;
+        };
+        value: {
+            type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+    }>, {
+        tag: import("vue").ComputedRef<"button" | "router-link" | "a">;
+        style: import("vue").ComputedRef<{
+            "--sq-shadow"?: undefined;
+            "--sq-shadow-filter"?: undefined;
+            "--sq-r": string;
+        } | {
+            "--sq-shadow": string;
+            "--sq-shadow-filter": string;
+            "--sq-r": string;
+        }>;
+        classes: import("vue").ComputedRef<(string | {
+            "sq-btn--icon": boolean;
+            "sq-btn--block": boolean;
+            "sq-btn--loading": boolean;
+            "sq-btn--active": boolean;
+            "sq-disabled": boolean;
+        })[]>;
+        iconName: import("vue").ComputedRef<string | undefined>;
+        isActive: import("vue").ComputedRef<boolean>;
+        isDisabled: import("vue").ComputedRef<boolean>;
+        toggleable: boolean;
+        onClick: (e: MouseEvent) => void;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        text: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        variant: {
+            type: PropType<import("@squirkle-ui/ui").Variant>;
+            default: import("@squirkle-ui/ui").Variant;
+        };
+        color: {
+            default: string;
+            type: StringConstructor;
+        };
+        size: {
+            type: PropType<import("@squirkle-ui/ui").Size>;
+            default: string;
+        };
+        rounded: {
+            type: PropType<import("@squirkle-ui/ui").Rounded>;
+            default: undefined;
+        };
+        icon: {
+            type: (BooleanConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        prependIcon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        appendIcon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        block: BooleanConstructor;
+        loading: BooleanConstructor;
+        disabled: BooleanConstructor;
+        active: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        elevation: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        href: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        to: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        type: {
+            type: PropType<"button" | "submit" | "reset">;
+            default: string;
+        };
+        value: {
+            type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+    }>> & Readonly<{
+        onClick?: ((...args: any[]) => any) | undefined;
+    }>, {
+        loading: boolean;
+        icon: string | boolean;
+        type: "button" | "submit" | "reset";
+        active: boolean;
+        text: string;
+        size: import("@squirkle-ui/ui").Size;
+        color: string;
+        rounded: import("@squirkle-ui/ui").Rounded;
+        block: boolean;
+        disabled: boolean;
+        variant: import("@squirkle-ui/ui").Variant;
+        prependIcon: string;
+        appendIcon: string;
+        elevation: string | number;
+        href: string;
+        to: string | Record<string, any>;
+        value: string | number | boolean | Record<string, any>;
+    }, {}, {
+        SqShape: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            watchKey: {
+                type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            clip: BooleanConstructor;
+        }>, {
+            active: import("vue").Ref<boolean, boolean>;
+            w: import("vue").Ref<number, number>;
+            h: import("vue").Ref<number, number>;
+            bw: import("vue").Ref<number, number>;
+            d: import("vue").ComputedRef<string>;
+            strokeD: import("vue").ComputedRef<string>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            watchKey: {
+                type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            clip: BooleanConstructor;
+        }>> & Readonly<{}>, {
+            clip: boolean;
+            watchKey: string | number | boolean | unknown[] | Record<string, any>;
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        SqIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: string;
+            };
+            color: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            label: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            clickable: BooleanConstructor;
+        }>, {
+            resolved: import("vue").ComputedRef<import("@squirkle-ui/ui/dist/types/icons").ResolvedIcon>;
+            style: import("vue").ComputedRef<{
+                "--sq-icon-size": string;
+                color: string | undefined;
+            }>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: string;
+            };
+            color: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            label: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            clickable: BooleanConstructor;
+        }>> & Readonly<{}>, {
+            label: string;
+            icon: string;
+            clickable: boolean;
+            size: string | number;
+            color: string;
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        SqProgressCircular: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            modelValue: {
+                type: NumberConstructor;
+                default: number;
+            };
+            indeterminate: BooleanConstructor;
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            width: {
+                type: NumberConstructor;
+                default: number;
+            };
+            color: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>, {
+            r: import("vue").ComputedRef<number>;
+            circ: import("vue").ComputedRef<number>;
+            offset: import("vue").ComputedRef<number>;
+            style: import("vue").ComputedRef<{
+                width: string | undefined;
+                height: string | undefined;
+                color: string | undefined;
+            }>;
+            has: (n: string) => boolean;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                type: NumberConstructor;
+                default: number;
+            };
+            indeterminate: BooleanConstructor;
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            width: {
+                type: NumberConstructor;
+                default: number;
+            };
+            color: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{}>, {
+            width: number;
+            size: string | number;
+            color: string;
+            indeterminate: boolean;
+            modelValue: number;
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    SqShape: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        watchKey: {
+            type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        clip: BooleanConstructor;
+    }>, {
+        active: import("vue").Ref<boolean, boolean>;
+        w: import("vue").Ref<number, number>;
+        h: import("vue").Ref<number, number>;
+        bw: import("vue").Ref<number, number>;
+        d: import("vue").ComputedRef<string>;
+        strokeD: import("vue").ComputedRef<string>;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        watchKey: {
+            type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        clip: BooleanConstructor;
+    }>> & Readonly<{}>, {
+        clip: boolean;
+        watchKey: string | number | boolean | unknown[] | Record<string, any>;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+import SqSwiper from './SqSwiper.vue';
+export { SqSwiper };
+export declare const componentNames: readonly ["SqSwiper"];
+export default SqSwiper;