@mantine-vue/carousel 1.1.2

package/lib/Carousel.d.ts

@@ -0,0 +1,66 @@
+import { type DefineComponent } from 'vue';
+import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
+import { CarouselSlide } from './CarouselSlide';
+import classes from './Carousel.module.css';
+export type CarouselStylesNames = 'slide' | 'root' | 'viewport' | 'container' | 'controls' | 'control' | 'indicators' | 'indicator';
+export interface CarouselProps {
+    /** Options passed down to embla carousel */
+    emblaOptions?: EmblaOptionsType;
+    /** Called when next slide is shown */
+    onNextSlide?: () => void;
+    /** Called when previous slider is shown */
+    onPreviousSlide?: () => void;
+    /** Called with slide index when slide changes */
+    onSlideChange?: (index: number) => void;
+    /** Get embla API as ref */
+    getEmblaApi?: (embla: EmblaCarouselType) => void;
+    /** Props passed down to next control */
+    nextControlProps?: Record<string, any>;
+    /** Props passed down to previous control */
+    previousControlProps?: Record<string, any>;
+    /** Controls size of the next and previous controls @default 26 */
+    controlSize?: string | number;
+    /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */
+    controlsOffset?: string | number;
+    /** Controls slide width based on viewport width @default '100%' */
+    slideSize?: string | number | Record<string, string | number>;
+    /** Key of theme.spacing or number to set gap between slides */
+    slideGap?: string | number | Record<string, string | number>;
+    /** Carousel orientation @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Determines type of queries used for responsive styles @default 'media' */
+    type?: 'media' | 'container';
+    /** Slides container `height`, required for vertical orientation */
+    height?: string | number;
+    /** Determines whether gap between slides should be treated as part of the slide size @default true */
+    includeGapInSize?: boolean;
+    /** Index of initial slide */
+    initialSlide?: number;
+    /** Determines whether next/previous controls should be displayed @default true */
+    withControls?: boolean;
+    /** Determines whether indicators should be displayed @default false */
+    withIndicators?: boolean;
+    /** A list of embla plugins */
+    plugins?: EmblaPluginType[];
+    /** Icon of the next control */
+    nextControlIcon?: any;
+    /** Icon of the previous control */
+    previousControlIcon?: any;
+    /** Determines whether arrow key should switch slides @default true */
+    withKeyboardEvents?: boolean;
+    /** Function to get props for indicator button */
+    getIndicatorProps?: (index: number) => Record<string, any>;
+    id?: string;
+    classNames?: any;
+    styles?: any;
+    vars?: any;
+    unstyled?: boolean;
+    mod?: any;
+}
+declare const varsResolver: (theme: import("@mantine-vue/core").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+export declare const Carousel: DefineComponent<CarouselProps> & {
+    classes: typeof classes;
+    varsResolver: typeof varsResolver;
+    Slide: typeof CarouselSlide;
+};
+export {};

package/lib/CarouselSlide.d.ts

@@ -0,0 +1,161 @@
+import { type PropType } from 'vue';
+export type CarouselSlideStylesNames = 'slide';
+export interface CarouselSlideProps {
+    classNames?: any;
+    styles?: any;
+    mod?: any;
+}
+export declare const CarouselSlide: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        classNames: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        styles: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        mod: {
+            type: PropType<any>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        classNames: Function | Record<string, any>;
+        styles: Function | Record<string, any>;
+        mod: any;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        classNames: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        styles: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        mod: {
+            type: PropType<any>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, {
+        classNames: Function | Record<string, any>;
+        styles: Function | Record<string, any>;
+        mod: any;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    classNames: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    styles: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    mod: {
+        type: PropType<any>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    classNames: Function | Record<string, any>;
+    styles: Function | Record<string, any>;
+    mod: any;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $: import("vue").ComponentInternalInstance;
+    $data: {};
+    $props: Partial<{
+        classNames: Function | Record<string, any>;
+        styles: Function | Record<string, any>;
+        mod: any;
+    }> & Omit<{
+        readonly classNames?: Function | Record<string, any> | undefined;
+        readonly styles?: Function | Record<string, any> | undefined;
+        readonly mod?: any;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "classNames" | "styles" | "mod">;
+    $attrs: import("vue").Attrs;
+    $refs: {
+        [x: string]: unknown;
+    };
+    $slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+    $root: import("vue").ComponentPublicInstance | null;
+    $parent: import("vue").ComponentPublicInstance | null;
+    $host: Element | null;
+    $emit: (event: string, ...args: any[]) => void;
+    $el: any;
+    $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+        classNames: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        styles: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        mod: {
+            type: PropType<any>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        classNames: Function | Record<string, any>;
+        styles: Function | Record<string, any>;
+        mod: any;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+        beforeCreate?: (() => void) | (() => void)[];
+        created?: (() => void) | (() => void)[];
+        beforeMount?: (() => void) | (() => void)[];
+        mounted?: (() => void) | (() => void)[];
+        beforeUpdate?: (() => void) | (() => void)[];
+        updated?: (() => void) | (() => void)[];
+        activated?: (() => void) | (() => void)[];
+        deactivated?: (() => void) | (() => void)[];
+        beforeDestroy?: (() => void) | (() => void)[];
+        beforeUnmount?: (() => void) | (() => void)[];
+        destroyed?: (() => void) | (() => void)[];
+        unmounted?: (() => void) | (() => void)[];
+        renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+        renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+        errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+    };
+    $forceUpdate: () => void;
+    $nextTick: typeof import("vue").nextTick;
+    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+} & Readonly<{
+    classNames: Function | Record<string, any>;
+    styles: Function | Record<string, any>;
+    mod: any;
+}> & Omit<Readonly<import("vue").ExtractPropTypes<{
+    classNames: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    styles: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    mod: {
+        type: PropType<any>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, "classNames" | "styles" | "mod"> & {} & {} & import("vue").ComponentCustomProperties & {} & {
+    $props: import("@mantine-vue/core").BoxProps;
+}) & {
+    classes: Record<string, string>;
+};

package/lib/CarouselVariables.d.ts

@@ -0,0 +1,67 @@
+import { type PropType } from 'vue';
+type StyleProp<T> = T | Partial<Record<string, T>>;
+export declare const CarouselVariables: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    slideSize: {
+        type: PropType<StyleProp<string | number>>;
+        default: undefined;
+    };
+    slideGap: {
+        type: PropType<StyleProp<string | number>>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    slideSize: {
+        type: PropType<StyleProp<string | number>>;
+        default: undefined;
+    };
+    slideGap: {
+        type: PropType<StyleProp<string | number>>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    slideSize: StyleProp<string | number>;
+    slideGap: StyleProp<string | number>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const CarouselContainerVariables: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    slideSize: {
+        type: PropType<StyleProp<string | number>>;
+        default: undefined;
+    };
+    slideGap: {
+        type: PropType<StyleProp<string | number>>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    slideSize: {
+        type: PropType<StyleProp<string | number>>;
+        default: undefined;
+    };
+    slideGap: {
+        type: PropType<StyleProp<string | number>>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    slideSize: StyleProp<string | number>;
+    slideGap: StyleProp<string | number>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export {};

package/lib/get-chevron-rotation.d.ts

@@ -0,0 +1,6 @@
+export interface GetChevronRotationOptions {
+    dir: 'rtl' | 'ltr';
+    orientation: 'horizontal' | 'vertical' | undefined;
+    direction: 'next' | 'previous';
+}
+export declare function getChevronRotation({ dir, orientation, direction }: GetChevronRotationOptions): number;

package/lib/get-indicator-navigation.d.ts

@@ -0,0 +1,3 @@
+export declare function getNextIndicatorIndex(index: number, total: number): number;
+export declare function getPreviousIndicatorIndex(index: number, total: number): number;
+export declare function clamp(value: number, min: number, max: number): number;

package/lib/index.d.mts

@@ -0,0 +1,6 @@
+export { Carousel } from './Carousel';
+export { useCarouselContext } from './Carousel.context';
+export { CarouselSlide } from './CarouselSlide';
+export type { CarouselProps, CarouselStylesNames } from './Carousel';
+export type { CarouselSlideProps, CarouselSlideStylesNames } from './CarouselSlide';
+export type { CarouselContextValue } from './Carousel.context';

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export { Carousel } from './Carousel';
+export { useCarouselContext } from './Carousel.context';
+export { CarouselSlide } from './CarouselSlide';
+export type { CarouselProps, CarouselStylesNames } from './Carousel';
+export type { CarouselSlideProps, CarouselSlideStylesNames } from './CarouselSlide';
+export type { CarouselContextValue } from './Carousel.context';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@mantine-vue/carousel",
+  "version": "1.1.2",
+  "description": "Embla based carousel, Vue equivalent to @mantine/carousel",
+  "license": "MIT",
+  "files": [
+    "cjs",
+    "esm",
+    "lib",
+    "styles.css",
+    "styles.layer.css",
+    "styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    }
+  },
+  "devDependencies": {
+    "@mantine-vue/core": "workspace:*",
+    "@mantine-vue/hooks": "workspace:*",
+    "@vue/compiler-dom": "^3.5.0",
+    "@vue/test-utils": "^2.4.6",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-vue": "^8.6.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "@mantine-vue/core": "1.1.1",
+    "@mantine-vue/hooks": "1.1.2",
+    "embla-carousel": ">=8.0.0",
+    "embla-carousel-vue": ">=8.0.0",
+    "vue": "^3.5.0"
+  }
+}

package/styles.css

@@ -0,0 +1,173 @@
+._root_avx3r_1 {
+  --carousel-height: auto;
+  position: relative;
+}
+
+._viewport_avx3r_6 {
+  height: var(--carousel-height);
+  overflow: hidden;
+}
+
+._viewport_avx3r_6[data-type='container'] {
+    container: carousel / inline-size;
+  }
+
+._container_avx3r_15 {
+  display: flex;
+  flex-direction: row;
+  height: var(--carousel-height);
+}
+
+:where([data-include-gap-in-size]) ._container_avx3r_15:where([data-orientation='vertical']) {
+      margin-bottom: calc(var(--carousel-slide-gap) * -1);
+    }
+
+:where([data-include-gap-in-size]) ._container_avx3r_15:where([data-orientation='horizontal']) {
+      margin-inline-end: calc(var(--carousel-slide-gap) * -1);
+    }
+
+._container_avx3r_15:where([data-orientation='vertical']) {
+    flex-direction: column;
+  }
+
+._controls_avx3r_35 {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  pointer-events: none;
+}
+
+._controls_avx3r_35:where([data-orientation='vertical']) {
+    inset-inline-start: calc(50% - var(--carousel-control-size) / 2);
+    top: 0;
+    bottom: 0;
+    flex-direction: column;
+    padding: var(--carousel-controls-offset) 0;
+  }
+
+._controls_avx3r_35:where([data-orientation='horizontal']) {
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: calc(50% - var(--carousel-control-size) / 2);
+    flex-direction: row;
+    padding: 0 var(--carousel-controls-offset);
+  }
+
+._control_avx3r_35 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: var(--carousel-control-size);
+  min-height: var(--carousel-control-size);
+  border-radius: var(--carousel-control-size);
+  pointer-events: all;
+  background-color: var(--mantine-color-white);
+  color: var(--mantine-color-black);
+  box-shadow: var(--mantine-shadow-md);
+  border: 1px solid var(--mantine-color-gray-3);
+  transition: opacity 100ms ease;
+}
+
+:where([data-mantine-color-scheme='light']) ._control_avx3r_35 {
+    opacity: 0.85;
+}
+
+:where([data-mantine-color-scheme='dark']) ._control_avx3r_35 {
+    opacity: 0.65;
+}
+
+@media (hover: hover) {
+
+  ._control_avx3r_35:hover {
+    opacity: 1;
+  }
+}
+
+@media (hover: none) {
+
+  ._control_avx3r_35:active {
+    opacity: 1;
+  }
+}
+
+._indicators_avx3r_87 {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  gap: calc(0.5rem * var(--mantine-scale));
+  pointer-events: none;
+}
+
+._indicators_avx3r_87:where([data-orientation='vertical']) {
+    bottom: 0;
+    top: 0;
+    inset-inline-end: var(--mantine-spacing-md);
+    flex-direction: column;
+  }
+
+._indicators_avx3r_87:where([data-orientation='horizontal']) {
+    bottom: var(--mantine-spacing-md);
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    flex-direction: row;
+  }
+
+._indicator_avx3r_87 {
+  pointer-events: all;
+  border-radius: var(--mantine-radius-xl);
+  box-shadow: var(--mantine-shadow-sm);
+  opacity: 0.6;
+  background-color: var(--mantine-color-white);
+}
+
+@media (hover: hover) {
+
+  ._indicator_avx3r_87:hover {
+    opacity: 1;
+  }
+}
+
+@media (hover: none) {
+
+  ._indicator_avx3r_87:active {
+    opacity: 1;
+  }
+}
+
+._indicator_avx3r_87:where([data-active]) {
+    opacity: 1;
+  }
+
+._indicator_avx3r_87:where([data-orientation='vertical']) {
+    width: calc(0.3125rem * var(--mantine-scale));
+    height: calc(1.5625rem * var(--mantine-scale));
+  }
+
+._indicator_avx3r_87:where([data-orientation='horizontal']) {
+    width: calc(1.5625rem * var(--mantine-scale));
+    height: calc(0.3125rem * var(--mantine-scale));
+  }
+
+._slide_avx3r_135 {
+  position: relative;
+  flex: 0 0 var(--carousel-slide-size, 100%);
+}
+
+._root_avx3r_1:where([data-include-gap-in-size]) ._slide_avx3r_135:where([data-orientation='vertical']) {
+      padding-bottom: var(--carousel-slide-gap);
+    }
+
+._root_avx3r_1:where([data-include-gap-in-size]) ._slide_avx3r_135:where([data-orientation='horizontal']) {
+      padding-inline-end: var(--carousel-slide-gap);
+    }
+
+._root_avx3r_1:where(:not([data-include-gap-in-size])) ._slide_avx3r_135:where([data-orientation='vertical']) {
+      margin-bottom: var(--carousel-slide-gap);
+    }
+
+._root_avx3r_1:where(:not([data-include-gap-in-size])) ._slide_avx3r_135:where([data-orientation='horizontal']) {
+      margin-inline-end: var(--carousel-slide-gap);
+    }
+/*$vite$:1*/