=
23 | Set extends `${infer P}:${infer S}`
24 | ? `on${Capitalize}Event${Capitalize}`
25 | : `onEvent${Capitalize}`;
26 |
27 | type TinyCarouselReactEventProps =
28 | /** Makes fields optional */
29 | Partial<
30 | Record<
31 | RenamePrefix>,
32 | CustomEventListener
33 | >
34 | >;
35 |
36 | export interface TinyCarouselProps extends TinyCarouselReactEventProps {
37 | /** [string] - let's you render a custom tag element as TinyCarousel wrapper (default: "ul") */
38 | tag?: keyof JSX.IntrinsicElements;
39 | /** [string] - adds classname on main carousel wrapper */
40 | className?: string;
41 | /** [PluginsProp] - import plugins from TinyCarousel ecosystem to this carousel instance */
42 | plugins?: PluginsProp;
43 | /** [Partial] - configure this TinyCarousel instance */
44 | config?: Partial;
45 | /** [React.ReactNode] - pass in the carousel slides */
46 | children?: React.ReactNode;
47 | }
48 |
49 | export type TinyCarouselRef = TinyCarouselCore | undefined;
50 |
51 | const MATCH_CAMEL_CASE = /([a-z]*)/i;
52 | function propToEventName (propEventName: keyof TinyCarouselReactEventProps): keyof EventDetailMap {
53 | const [prefix, ...rest] = propEventName.slice(2).split('Event');
54 | const eventParts = rest.join('Event').split(MATCH_CAMEL_CASE).filter(Boolean);
55 | return (prefix ? prefix.toLowerCase() + ':' : '') + eventParts.join('-').toLowerCase() as keyof EventDetailMap;
56 | }
57 |
58 | const TinyCarousel = forwardRef((
59 | {
60 | tag: Tag = 'ul',
61 | plugins,
62 | config,
63 | children,
64 | className,
65 | ...eventListeners
66 | },
67 | ref,
68 | ) => {
69 | const element = useRef(null);
70 | const previousEventListeners = useRef(eventListeners);
71 | const carousel = useRef();
72 | const initTinyCarousel = () => {
73 | if (!element.current) return;
74 |
75 | const newConfig = carousel.current?.active
76 | ? { ...config, active: carousel.current.active }
77 | : config;
78 |
79 | carousel.current?.destroy();
80 | const newCarousel = new TinyCarouselCore(element.current, newConfig);
81 |
82 | plugins?.forEach(([plugin, ...pluginOptions]) =>
83 | newCarousel.use(plugin, ...pluginOptions)
84 | );
85 |
86 | carousel.current = newCarousel.init();
87 |
88 | if (typeof ref === 'function') ref(carousel.current);
89 | else if (ref) ref.current = carousel.current;
90 | };
91 |
92 | useEffect(() => {
93 | const prev = previousEventListeners.current;
94 | previousEventListeners.current = eventListeners;
95 |
96 | if (!element.current) return;
97 | (Object.keys(prev) as (keyof typeof previousEventListeners.current)[])
98 | .forEach(eventName => {
99 | const listener = eventListeners[eventName];
100 | if (listener) {
101 | element.current?.removeEventListener(
102 | propToEventName(eventName) as any,
103 | listener as EventListener,
104 | );
105 | }
106 | });
107 | (Object.keys(eventListeners) as (keyof typeof eventListeners)[])
108 | .forEach(eventName => {
109 | const listener = eventListeners[eventName];
110 | if (listener) {
111 | element.current?.addEventListener(
112 | propToEventName(eventName) as any,
113 | listener as EventListener,
114 | );
115 | }
116 | });
117 | }, [eventListeners]);
118 |
119 | useEffect(
120 | initTinyCarousel,
121 | [Tag, plugins, config, children, className, ref]
122 | );
123 |
124 | // to ignore "Expression produces a union type that is too complex to represent. ts(2590)"
125 | // read more: https://github.com/chakra-ui/chakra-ui/issues/3714
126 | // @ts-ignore
127 | return {children} ;
128 | });
129 |
130 | export default TinyCarousel;
--------------------------------------------------------------------------------
/packages/react/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import reportWebVitals from './reportWebVitals';
5 |
6 | ReactDOM.render(
7 |
8 | ,
10 | document.getElementById('root')
11 | );
12 |
13 | // If you want to start measuring performance in your app, pass a function
14 | // to log results (for example: reportWebVitals(console.log))
15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
16 | reportWebVitals();
17 |
--------------------------------------------------------------------------------
/packages/react/src/logo.svg:
--------------------------------------------------------------------------------
1 | ",
45 | "license": "MIT",
46 | "bugs": {
47 | "url": "https://github.com/FRSource/tiny-carousel/issues"
48 | },
49 | "repository": {
50 | "type": "git",
51 | "url": "git+https://github.com/FRSource/tiny-carousel.git"
52 | },
53 | "homepage": "https://www.frsource.org/tiny-carousel/utils/",
54 | "publishConfig": {
55 | "access": "public"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/packages/utils/src/dom.spec.test.ts:
--------------------------------------------------------------------------------
1 | import { debounce } from './limiters';
2 | import { referenceParentOffsetLeft, findScrollContainerXCenter, findXSnapIndex, addScrollEndListener } from "./dom";
3 | import { on } from './events';
4 |
5 | jest.mock('./limiters.ts');
6 | jest.mock('./events.ts');
7 |
8 | const parentScrollLeft = 150;
9 | const parentOffsetLeft = 200;
10 | const parentClientWidth = 500;
11 | const debounceMock = debounce as jest.Mock;
12 | const debouncedCallback = jest.fn();
13 | let parent: HTMLElement;
14 | let child: HTMLElement;
15 |
16 | beforeAll(() => {
17 | debounceMock.mockReturnValue(debouncedCallback);
18 | })
19 |
20 | beforeEach(() => {
21 | parent = {
22 | scrollLeft: parentScrollLeft,
23 | offsetLeft: parentOffsetLeft,
24 | clientWidth: parentClientWidth,
25 | } as HTMLElement;
26 | child = {} as HTMLElement;
27 | });
28 |
29 | afterEach(()=> jest.clearAllMocks());
30 |
31 | describe('referenceParentOffsetLeft', () => {
32 | describe('when child is empty', () => {
33 | it('should return parent.offsetLeft', () => {
34 | expect(referenceParentOffsetLeft(parent)).toBe(parentOffsetLeft);
35 | });
36 | });
37 |
38 | describe('when child`s offsetParent is the parent element', () => {
39 | beforeEach(() =>
40 | (child as unknown as { offsetParent: HTMLElement })
41 | .offsetParent = parent
42 | );
43 |
44 | it('should return 0', () => {
45 | expect(referenceParentOffsetLeft(parent, child)).toBe(0);
46 | });
47 | });
48 |
49 | describe('when child`s offsetParent is not parent element', () => {
50 | it('should return parent.offsetLeft', () => {
51 | expect(referenceParentOffsetLeft(parent, child)).toBe(parentOffsetLeft);
52 | });
53 | });
54 | });
55 |
56 | describe('findScrollContainerXCenter', () => {
57 | it('should correctly calculate horizontal center of a scroll container', () => {
58 | expect(findScrollContainerXCenter(parent)).toBe(600);
59 | });
60 |
61 | describe('when child offsetParent is the parent', () => {
62 | it('should correctly calculate horizontal center of a scroll container', () => {
63 | expect(findScrollContainerXCenter(parent, child)).toBe(600);
64 | });
65 | });
66 | });
67 |
68 | describe('findXSnapIndex', () => {
69 | const items = [
70 | { offsetLeft: 0, offsetWidth: 400 },
71 | { offsetLeft: 400, offsetWidth: 400 },
72 | { offsetLeft: 800, offsetWidth: 400 },
73 | ] as HTMLElement[];
74 |
75 | it('should go through elements until it finds correct index', () => {
76 | expect(findXSnapIndex(parent, items, false)).toBe(1);
77 | });
78 |
79 | describe('when scrollPositionX = 0', () => {
80 | it('should return 0', () => {
81 | expect(findXSnapIndex(parent, items, false, -400)).toBe(0);
82 | });
83 | });
84 |
85 | describe('when carouselElement scrollLeft is bigger than the offset of the last item', () => {
86 | it('should return number of children', () => {
87 | expect(findXSnapIndex(parent, items, false, 1000)).toBe(3);
88 | });
89 | });
90 |
91 | describe('when items array is empty', () => {
92 | it('should return 0', () => {
93 | expect(findXSnapIndex(parent, [], false, 500)).toBe(0);
94 | });
95 | });
96 |
97 | describe('when carouselElement scrollLeft = 0', () => {
98 | it('should return 0', () => {
99 | const element = { ...parent, scrollLeft: 0 };
100 | expect(findXSnapIndex(element, items, false, 500)).toBe(0);
101 | });
102 | });
103 |
104 | describe('when overflow = true and scrollLeft = 0', () => {
105 | it('should return -1', () => {
106 | const element = { ...parent, scrollLeft: 0 };
107 | expect(findXSnapIndex(
108 | element,
109 | [
110 | { offsetLeft: 500 },
111 | { offsetLeft: 1000 },
112 | { offsetLeft: 1500 },
113 | ] as HTMLElement[],
114 | true,
115 | )).toBe(-1);
116 | });
117 | });
118 | });
119 |
120 | describe('addScrollEndListener', () => {
121 | const element = {} as Element;
122 | let callback: jest.Mock;
123 |
124 | beforeEach(() => callback = jest.fn());
125 |
126 | it('should call debounce method, set debounced callback as scroll event handler and return it', () => {
127 | expect(addScrollEndListener(element, callback)).toBe(debouncedCallback);
128 | expect(debounceMock).toHaveBeenCalledWith(callback, void 0);
129 | expect(on).toHaveBeenCalledWith(element, 'scroll', debouncedCallback, expect.objectContaining({ passive: true }));
130 | });
131 | });
132 |
--------------------------------------------------------------------------------
/packages/utils/src/dom.ts:
--------------------------------------------------------------------------------
1 | import { on } from './events';
2 | import { debounce } from './limiters';
3 |
4 | /**
5 | * to overcome calculation problems when offsetLeft is calculated not directly from the parent,
6 | * but from the body
7 | */
8 | export const referenceParentOffsetLeft = (parent: HTMLElement, child?: HTMLElement) => {
9 | return child?.offsetParent !== parent
10 | ? parent.offsetLeft
11 | : 0;
12 | }
13 |
14 | export const findScrollContainerXCenter = (element: HTMLElement, referenceItem?: HTMLElement) => {
15 | const scrollPositionX = element.scrollLeft + element.clientWidth / 2;
16 |
17 | return scrollPositionX + referenceParentOffsetLeft(element, referenceItem);
18 | }
19 |
20 | export const findXSnapIndex = (carouselElement: HTMLElement, children: HTMLElement[], overflow: boolean | undefined, offset = 0) => {
21 | if (
22 | !children.length ||
23 | carouselElement.scrollLeft === 0 && !overflow
24 | ) return 0;
25 |
26 | const firstElement = children[0];
27 | const scrollPositionX = findScrollContainerXCenter(carouselElement, firstElement) + offset;
28 |
29 | let i = firstElement.offsetLeft > 0 ? -1 : 0;
30 | let item: HTMLElement;
31 | while ((item = children[++i]) && scrollPositionX >= item.offsetLeft);
32 |
33 | if (
34 | i === children.length &&
35 | scrollPositionX >= children[children.length - 1].offsetLeft + children[children.length - 1].offsetWidth
36 | ) return children.length;
37 |
38 | return --i;
39 | }
40 |
41 | export function addScrollEndListener (element: Element, callback: () => unknown, timeout?: number) {
42 | callback = debounce(callback, timeout);
43 | on(element, 'scroll', callback, { passive: true });
44 | return callback;
45 | }
46 |
--------------------------------------------------------------------------------
/packages/utils/src/events.spec.test.ts:
--------------------------------------------------------------------------------
1 | import { off, on, dispatch } from "./events";
2 |
3 | const event = 'before:go-to';
4 | const options: AddEventListenerOptions = { passive: true };
5 | let element: HTMLElement;
6 | let handler: jest.Mock;
7 |
8 | beforeAll(() => handler = jest.fn());
9 | beforeEach(() => element = document.createElement('div'));
10 | afterEach(() => jest.clearAllMocks());
11 |
12 | describe('on', () => {
13 | let addEventListenerSpy: jest.SpyInstance;
14 | beforeEach(() => addEventListenerSpy = jest.spyOn(element, 'addEventListener'));
15 |
16 | it('should setup an event listener', () => {
17 | on(element, event, handler, options);
18 |
19 | expect(addEventListenerSpy).toHaveBeenCalledWith(event, handler, options);
20 | });
21 |
22 | it('should run handler on incoming event', () => {
23 | on(element, event, handler, options);
24 | element.dispatchEvent(new CustomEvent(event));
25 |
26 | expect(handler).toHaveBeenCalled();
27 | });
28 | });
29 |
30 | describe('off', () => {
31 | let removeEventListenerSpy: jest.SpyInstance;
32 | beforeEach(() => removeEventListenerSpy = jest.spyOn(element, 'removeEventListener'));
33 |
34 | it('should setup an event listener', () => {
35 | off(element, event, handler);
36 |
37 | expect(removeEventListenerSpy).toHaveBeenCalledWith(event, handler);
38 | });
39 |
40 | it('should not run handler on incoming event', () => {
41 | on(element, event, handler, options);
42 | off(element, event, handler);
43 | element.dispatchEvent(new CustomEvent(event));
44 |
45 | expect(handler).not.toHaveBeenCalled();
46 | });
47 | });
48 |
49 | describe('dispatch', () => {
50 | const payload = {to: {index: 1}};
51 | let dispatchEventSpy: jest.SpyInstance;
52 | beforeEach(() => dispatchEventSpy = jest.spyOn(element, 'dispatchEvent'));
53 |
54 | it('should dispatch a CustomEvent with proper event name, payload & event options', () => {
55 | dispatch(element, event as unknown as never, payload as unknown as never, { bubbles: true });
56 | expect(dispatchEventSpy).toHaveBeenCalledWith(expect.any(CustomEvent));
57 | expect(dispatchEventSpy).toHaveBeenCalledWith(expect.objectContaining({
58 | type: event,
59 | detail: payload,
60 | bubbles: true,
61 | }));
62 | });
63 |
64 | it('should trigger an event handler with CustomEvent with proper event name & payload as a payload', () => {
65 | on(element, event, handler);
66 | dispatch(element, event as unknown as never, payload as unknown as never);
67 |
68 | expect(dispatchEventSpy).toHaveBeenCalledWith(expect.any(CustomEvent));
69 | expect(handler).toHaveBeenCalledWith(expect.objectContaining({ detail: payload }));
70 | });
71 | });
72 |
--------------------------------------------------------------------------------
/packages/utils/src/events.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-empty-interface
2 | export interface EventDetailMap {
3 | /**
4 | * interface used to specify custom event names
5 | * and possible types for data passed along with each event type
6 | * for the usage example, please have a look into @frsource/tiny-carousel-plugin-custom-events codebase
7 | **/
8 | }
9 | // eslint-disable-next-line @typescript-eslint/no-empty-interface
10 | export interface CustomEventRequiredPayload {
11 | /**
12 | * interface used to specify required part of each event payload
13 | * should be set correctly by @frsource/tiny-carousel-plugin-custom-events codebase
14 | **/
15 | }
16 | export type CustomEventPayload = EventDetailMap[E] & CustomEventRequiredPayload;
17 | export type CustomEventListener =
18 | ((e: CustomEvent>)=> void);
19 |
20 | // TODO: add possibility to pass event/target array?
21 |
22 | export const on: {
23 | (target: EventTarget, event: E, handler: CustomEventListener, options?: boolean | AddEventListenerOptions): void;
24 | (target: EventTarget, event: string, handler: EventListener, options?: boolean | AddEventListenerOptions): void;
25 | } = (target: EventTarget, event: string, handler: EventListener | CustomEventListener, options?: boolean | AddEventListenerOptions) => {
26 | target.addEventListener(event, handler as EventListener, options);
27 | }
28 |
29 | export const off: {
30 | (target: EventTarget, event: E, handler: CustomEventListener): void;
31 | (target: EventTarget, event: string, handler: EventListener): void;
32 | } = (target: EventTarget, event: string, handler: EventListener | CustomEventListener) => {
33 | target.removeEventListener(event, handler as EventListener);
34 | }
35 |
36 | export const dispatch: {
37 | (target: EventTarget, event: E, payload: CustomEventPayload, options?: EventInit): boolean;
38 | (target: EventTarget, event: string, payload?: unknown, options?: EventInit): boolean;
39 | } = (
40 | target: EventTarget, event: string, payload?: unknown, options?: EventInit
41 | ) =>
42 | target.dispatchEvent(new CustomEvent(event, Object.assign({ detail: payload }, options)));
43 |
--------------------------------------------------------------------------------
/packages/utils/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './events';
2 | export * from './limiters';
3 | export * from './dom';
4 |
--------------------------------------------------------------------------------
/packages/utils/src/limiters.spec.test.ts:
--------------------------------------------------------------------------------
1 | import { throttle, debounce } from "./limiters";
2 |
3 | const context = {};
4 | const args = ['anything', 2];
5 | let callback: jest.Mock;
6 | let throttled: (...args: unknown[])=> void;
7 | let debounced: (...args: unknown[])=> void;
8 |
9 | beforeAll(() => {
10 | jest.useFakeTimers('modern');
11 | callback = jest.fn();
12 | });
13 | afterEach(() => {
14 | jest.advanceTimersByTime(1000); // flush all pending debounced/throttled fns
15 | jest.clearAllMocks();
16 | });
17 | afterAll(() => jest.useRealTimers());
18 |
19 | describe('throttle', () => {
20 | beforeEach(() => throttled = throttle(callback, 1000));
21 |
22 | it('should run the callback immediately with correct context and arguments', () => {
23 | throttled.apply(context, args);
24 | expect(callback).toHaveBeenCalledTimes(1);
25 | expect(callback).toHaveBeenCalledWith(...args);
26 | expect(callback.mock.instances[0]).toBe(context);
27 | });
28 |
29 | describe('when 500ms have passed', () => {
30 | it('should run the callback immediately with correct context and arguments', () => {
31 | throttled.apply(context, args);
32 | jest.advanceTimersByTime(500);
33 |
34 | expect(callback).toHaveBeenCalledTimes(1);
35 | expect(callback).toHaveBeenCalledWith(...args);
36 | expect(callback.mock.instances[0]).toBe(context);
37 | });
38 | });
39 |
40 | describe('when ran twice and 1000ms have passed', () => {
41 | it('should run the callback twice with correct context and arguments', () => {
42 | throttled.apply(context, args);
43 | throttled.apply(context, args);
44 | jest.advanceTimersByTime(1000);
45 |
46 | expect(callback).toHaveBeenCalledTimes(2);
47 | expect(callback).toHaveBeenCalledWith(...args);
48 | expect(callback.mock.calls[1]).toMatchObject(args);
49 | expect(callback.mock.instances[0]).toBe(context);
50 | expect(callback.mock.instances[1]).toBe(context);
51 | });
52 | });
53 |
54 | describe('when ran four times throughout 2000ms passed', () => {
55 | it('should run the callback immediately with correct context and arguments', () => {
56 | throttled.apply(context, args);
57 | throttled.apply(context, args);
58 | jest.advanceTimersByTime(800);
59 | throttled.apply(context, args);
60 | jest.advanceTimersByTime(200);
61 | throttled.apply(context, args);
62 | jest.advanceTimersByTime(1000);
63 |
64 | expect(callback).toHaveBeenCalledTimes(3);
65 | expect(callback).toHaveBeenCalledWith(...args);
66 | expect(callback.mock.calls[1]).toMatchObject(args);
67 | expect(callback.mock.calls[2]).toMatchObject(args);
68 | expect(callback.mock.instances[0]).toBe(context);
69 | expect(callback.mock.instances[1]).toBe(context);
70 | expect(callback.mock.instances[2]).toBe(context);
71 | });
72 | });
73 | });
74 |
75 | describe('debounce', () => {
76 | beforeEach(() => debounced = debounce(callback, 1000));
77 |
78 | it('should not call callback immediately', () => {
79 | debounced();
80 |
81 | expect(callback).not.toHaveBeenCalled();
82 | });
83 |
84 | describe('when 500ms passed', () => {
85 | it('should not call callback yet', () => {
86 | debounced();
87 | jest.advanceTimersByTime(500);
88 |
89 | expect(callback).not.toHaveBeenCalled();
90 | });
91 | });
92 |
93 | describe('when called twice and 1000ms passed', () => {
94 | it('should call callback once', () => {
95 | debounced();
96 | debounced();
97 | jest.advanceTimersByTime(1000);
98 |
99 | expect(callback).toHaveBeenCalledTimes(1);
100 | });
101 | });
102 |
103 | describe('when nothing passed as the timeout argument', () => {
104 | it('should default to 500ms', () => {
105 | debounced = debounce(callback);
106 |
107 | debounced();
108 | jest.advanceTimersByTime(500);
109 |
110 | expect(callback).toHaveBeenCalledTimes(1);
111 | });
112 | });
113 |
114 | describe('when called single time, wait 500ms, called second time, wait 1500s, called third time, wait 1000ms', () => {
115 | it('should be called twice', () => {
116 | debounced();
117 | jest.advanceTimersByTime(500);
118 | debounced();
119 | jest.advanceTimersByTime(1500);
120 | debounced();
121 | jest.advanceTimersByTime(1000);
122 |
123 | expect(callback).toHaveBeenCalledTimes(2);
124 | });
125 | });
126 | });
127 |
--------------------------------------------------------------------------------
/packages/utils/src/limiters.ts:
--------------------------------------------------------------------------------
1 | // Throttle with ensured final and immediate invocations
2 | // see: https://gist.github.com/beaucharman/e46b8e4d03ef30480d7f4db5a78498ca#gistcomment-3608554
3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
4 | export const throttle = unknown>(callback: F, wait: number): F => {
5 | let queuedToRun: ReturnType | undefined;
6 | let previouslyRun: number;
7 | return function invokeFn(this: ThisType, ...args: Parameters) {
8 | const now = Date.now();
9 | queuedToRun = clearTimeout(queuedToRun) as undefined;
10 | if (!previouslyRun || (now - previouslyRun >= wait)) {
11 | callback.apply(this, args);
12 | previouslyRun = now;
13 | } else {
14 | queuedToRun = setTimeout(
15 | () => invokeFn.apply(this, args),
16 | wait - (now - previouslyRun)
17 | ) as unknown as ReturnType;
18 | }
19 | } as F;
20 | };
21 |
22 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
23 | export const debounce = unknown>(fn: F, wait = 500) => {
24 | let timeout: number;
25 | return function (this: ThisType, ...args: Parameters) {
26 | clearTimeout(timeout)
27 | timeout = (setTimeout as Window['setTimeout'])(() => fn.call(this, ...args), wait)
28 | }
29 | };
30 |
--------------------------------------------------------------------------------
/packages/utils/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "**/*"
5 | ]
6 | }
--------------------------------------------------------------------------------
/packages/vue/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | coverage
4 | **/node_modules
5 | **/dist
6 |
--------------------------------------------------------------------------------
/packages/vue/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | es6: true,
4 | node: true
5 | },
6 | extends: [
7 | '../../.eslintrc.js',
8 | 'plugin:vue/essential',
9 | '@vue/typescript/recommended'
10 | ],
11 | parserOptions: {
12 | ecmaVersion: 2020
13 | },
14 | rules: {
15 | 'no-undef': 'off'
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/vue/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
8 |
9 |
11 |
12 |
14 |
15 |
17 |
18 |
19 | Brings @frsource/tiny-carousel into the Vue 2/3 world 💚
20 |
21 |
22 | Usage guide
23 | ·
24 | API Reference
25 | ·
26 | Contribution
27 | ·
28 | File an Issue
29 | ·
30 | Have a question or an idea?
31 |
33 |
34 |
35 | The @frsource/tiny-carousel integration for Vue .
37 | Tiny Carousel ecosystem .
39 |
42 |
44 |
45 |
46 |
47 | www.frsource.org/tiny-carousel
53 |
54 |
55 | ## Documentation
56 |
57 | For docs, please visit [frsource.org/tiny-carousel](https://www.frsource.org/tiny-carousel/)
58 |
59 | - [Getting Started](https://www.frsource.org/tiny-carousel/guide/usage/#vue)
60 | - [API Reference](https://www.frsource.org/tiny-carousel/api-reference/integration-vue/)
61 | - [Ecosystem & plugins](https://www.frsource.org/tiny-carousel/ecosystem/)
62 |
63 | ## Questions
64 |
65 | Don’t hesitate to ask a question directly on the [discussions board](https://github.com/FRSOURCE/tiny-carousel/discussions)!
66 |
67 | ## Changelog
68 |
69 | Changes for every release are documented in the [release notes](https://github.com/FRSOURCE/tiny-carousel/releases) and [CHANGELOG](https://github.com/FRSOURCE/tiny-carousel/blob/master/packages/vue/CHANGELOG.md).
70 |
71 | ## License
72 |
73 | [MIT](https://opensource.org/licenses/MIT)
74 |
75 | Copyright (c) 2021-present, Jakub FRS Freisler, FRSOURCE
76 |
77 |
--------------------------------------------------------------------------------
/packages/vue/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/cli-plugin-babel/preset'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/vue/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
3 | testEnvironment: 'jsdom'
4 | }
5 |
--------------------------------------------------------------------------------
/packages/vue/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@frsource/tiny-carousel-vue",
3 | "amdName": "tinyCarouselVue",
4 | "version": "0.7.2",
5 | "description": "Brings @frsource/tiny-carousel into the Vue 2/3 world 💚",
6 | "source": "src/TinyCarousel.ts",
7 | "types": "dist/TinyCarousel.d.ts",
8 | "main": "dist/index.js",
9 | "umd:main": "dist/index.umd.js",
10 | "unpkg": "dist/index.umd.js",
11 | "module": "dist/index.module.js",
12 | "exports": "./dist/index.modern.js",
13 | "scripts": {
14 | "start": "vue-cli-service serve",
15 | "build": "microbundle --globals vue=Vue",
16 | "vuebuild": "vue-cli-service build --target lib ./src/components/TinyCarousel.ts",
17 | "test": "pnpm test:vue2 && pnpm test:vue3",
18 | "pretest:vue2": "vue-demi-switch 2",
19 | "test:vue2": "pnpm test:unit",
20 | "pretest:vue3": "vue-demi-switch 3 vue3",
21 | "test:vue3": "pnpm test:unit",
22 | "test:unit": "vue-cli-service test:unit",
23 | "watch:test": "vue-cli-service test:unit --watch",
24 | "fixme.coverage": "vue-cli-service test:unit --coverage",
25 | "lint": "vue-cli-service lint",
26 | "fix:lint": "vue-cli-service lint --fix"
27 | },
28 | "keywords": [
29 | "carousel",
30 | "slider",
31 | "swiper",
32 | "tiny",
33 | "vue",
34 | "integration",
35 | "vuejs",
36 | "vue2",
37 | "vue3",
38 | "vue.js",
39 | "efficient",
40 | "modular",
41 | "lightweight",
42 | "mobile-friendly",
43 | "css snap",
44 | "scroll snap",
45 | "snapping points",
46 | "vanillaJS",
47 | "accessibility",
48 | "css",
49 | "js"
50 | ],
51 | "author": "Jakub Freisler ",
52 | "license": "MIT",
53 | "bugs": {
54 | "url": "https://github.com/FRSource/tiny-carousel/issues"
55 | },
56 | "repository": {
57 | "type": "git",
58 | "url": "git+https://github.com/FRSource/tiny-carousel.git"
59 | },
60 | "homepage": "https://www.frsource.org/tiny-carousel/ecosystem/#vue",
61 | "publishConfig": {
62 | "access": "public"
63 | },
64 | "devDependencies": {
65 | "@frsource/tiny-carousel-core": "^0.10.2",
66 | "@frsource/tiny-carousel-plugin-autoplay": "^0.4.5",
67 | "@frsource/tiny-carousel-plugin-custom-events": "^0.4.5",
68 | "@frsource/tiny-carousel-plugin-mouse-drag": "^0.4.3",
69 | "@typescript-eslint/eslint-plugin": "5.62.0",
70 | "@typescript-eslint/parser": "5.62.0",
71 | "@vue/cli-plugin-babel": "5.0.8",
72 | "@vue/cli-plugin-eslint": "5.0.8",
73 | "@vue/cli-plugin-typescript": "4.5.19",
74 | "@vue/cli-plugin-unit-jest": "4.5.19",
75 | "@vue/cli-service": "4.5.19",
76 | "@vue/eslint-config-typescript": "11.0.0",
77 | "@vue/test-utils": "2.4.1",
78 | "core-js": "3.32.1",
79 | "eslint-plugin-vue": "9.17.0",
80 | "vue": "2.7.8",
81 | "vue-demi": "0.14.6",
82 | "vue-template-compiler": "2.7.8",
83 | "vue3": "npm:vue@3.3.4"
84 | },
85 | "peerDependencies": {
86 | "@frsource/tiny-carousel-core": "^0.10.0",
87 | "vue": "^2.6.0 || ^3.0.0"
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/packages/vue/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/packages/vue/public/favicon.ico
--------------------------------------------------------------------------------
/packages/vue/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <%= htmlWebpackPlugin.options.title %>
10 |
11 |
12 |
13 | We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/packages/vue/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Tiny carousel - your favourite carousel library 👑
5 |
6 |
7 |
8 |
16 |
17 |
23 |
24 |
25 | Carousel is {{ isInitialized ? 'initialized' : 'not initialized' }}
26 |
27 |
28 | prev
29 | next
30 | Add slide
31 | Remove slide
32 |
33 |
34 |
35 |
36 |
87 |
88 |
134 |
--------------------------------------------------------------------------------
/packages/vue/src/TinyCarousel.ts:
--------------------------------------------------------------------------------
1 | import { Config, PluginDefinition, TinyCarousel } from '@frsource/tiny-carousel-core';
2 | import type { OmitFirstItem } from '@frsource/tiny-carousel-core/dist/helpers';
3 | import type { PropType, VNode, CreateElement, VNodeData } from 'vue';
4 | import Vue from 'vue';
5 |
6 | export type PluginProp = [PD, ...OmitFirstItem>];
7 | export type PluginsProp> = PluginProp[];
8 |
9 | export type PluginDefinitionConfig = PD extends PluginDefinition ? C : never;
10 | export type TinyCarouselComponent = InstanceType;
11 |
12 | // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
13 | export const definePlugin = <
14 | PD extends PluginDefinition,
15 | C extends PluginDefinitionConfig
16 | >(...args: C extends unknown[] ? [PD, ...C] : [PD]) => args;
17 |
18 | let oldChildNodes: Node[] = [];
19 | function initTinyCarouselWrapperIfNeeded (this: Vue & { initTinyCarousel: ()=> void}) {
20 | this.$nextTick(function() {
21 | const { childNodes } = this.$el as HTMLElement;
22 | if (
23 | oldChildNodes.length !== childNodes.length ||
24 | oldChildNodes.some((oldChildNode, i) => oldChildNode !== childNodes[i])
25 | ) {
26 | oldChildNodes = Array.from(childNodes);
27 | this.initTinyCarousel();
28 | }
29 | });
30 | }
31 |
32 | // this one makes output bundle few bytes smaller ¯\_(ツ)_/¯
33 | function initTinyCarouselWrapper (this: Vue & { initTinyCarousel: ()=> void}) {
34 | this.$nextTick(this.initTinyCarousel);
35 | }
36 |
37 | // to make compatible Vue 3
38 | const identityAsExtend = ((v: unknown) => v) as typeof Vue['extend'];
39 |
40 | const component = identityAsExtend({
41 | name: 'TinyCarousel',
42 | props: {
43 | tag: {
44 | type: String as PropType,
45 | default: 'ul',
46 | },
47 | plugins: {
48 | type: Array as PropType,
49 | default: () => []
50 | },
51 | config: {
52 | type: Object as PropType | undefined>,
53 | default: void 0,
54 | },
55 | },
56 | data() {
57 | return {
58 | carousel: void 0 as TinyCarousel | undefined,
59 | };
60 | },
61 | mounted: initTinyCarouselWrapperIfNeeded,
62 | updated: initTinyCarouselWrapperIfNeeded,
63 | watch: {
64 | tag: initTinyCarouselWrapper,
65 | plugins: initTinyCarouselWrapper,
66 | config: initTinyCarouselWrapper,
67 | },
68 | methods: {
69 | initTinyCarousel() {
70 | let config = this.config;
71 |
72 | if (this.carousel?.active) {
73 | config = { ...config, active: this.carousel.active };
74 | }
75 |
76 | this.carousel?.destroy();
77 | const carousel = new TinyCarousel(this.$el as HTMLElement, config);
78 |
79 | this.plugins.forEach(([plugin, ...pluginOptions]) =>
80 | carousel.use(plugin, ...pluginOptions)
81 | );
82 |
83 | return this.carousel = carousel.init();
84 | }
85 | },
86 | render(h: CreateElement): VNode {
87 | // Vue 3
88 | if (typeof h !== 'function')
89 | h = (Vue as unknown as { h: CreateElement }).h;
90 |
91 | const data: VNodeData = '$listeners' in this
92 | // Vue 2
93 | ? { on: this.$listeners }
94 | // Vue 3
95 | : (this as Vue).$attrs;
96 |
97 | const slotDefault = typeof this.$slots.default !== 'function'
98 | // Vue 2
99 | ? this.$slots.default
100 | // Vue 3
101 | : (this.$slots.default as ()=> VNode[])();
102 |
103 | return h(
104 | this.tag,
105 | data,
106 | slotDefault,
107 | );
108 | }
109 | });
110 |
111 | export default component;
--------------------------------------------------------------------------------
/packages/vue/src/main.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 |
4 | Vue.config.productionTip = false
5 |
6 | new Vue({
7 | render: h => h(App),
8 | }).$mount('#app')
9 |
--------------------------------------------------------------------------------
/packages/vue/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | import Vue from 'vue'
3 | export default Vue
4 | }
5 |
--------------------------------------------------------------------------------
/packages/vue/tests/unit/tinyCarousel.spec.ts:
--------------------------------------------------------------------------------
1 | // import { shallowMount } from '@vue/test-utils'
2 | // import TinyCarouselComponent from '@/components/TinyCarousel.vue'
3 | // import { TinyCarousel } from '../../../core/dist'
4 |
5 | // TODO: tests
6 | it('doesn`t fail', () => {
7 | // const wrapper = shallowMount(TinyCarouselComponent);
8 | expect(1).toBe(1)
9 | })
10 |
--------------------------------------------------------------------------------
/packages/vue/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "src/*"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/packages/vue/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | configureWebpack(config) {
3 | config.plugins.some((plugin, index) => {
4 | return plugin.options?.filename === 'demo.html' ? config.plugins.splice(index, 1) : false;
5 | });
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "packages/*"
3 |
--------------------------------------------------------------------------------
/release-please-config.json:
--------------------------------------------------------------------------------
1 | {
2 | "sequential-calls": true,
3 | "plugins": ["node-workspace"],
4 | "packages": {
5 | "packages/core": {
6 | "path": "packages/core",
7 | "component": "@frsource/tiny-carousel-core"
8 | },
9 | "packages/docs": {
10 | "component": "@frsource/tiny-carousel-docs",
11 | "path": "packages/docs"
12 | },
13 | "packages/plugin-autoplay": {
14 | "component": "@frsource/tiny-carousel-plugin-autoplay",
15 | "path": "packages/plugin-autoplay"
16 | },
17 | "packages/plugin-custom-events": {
18 | "component": "@frsource/tiny-carousel-plugin-custom-events",
19 | "path": "packages/plugin-custom-events"
20 | },
21 | "packages/plugin-mouse-drag": {
22 | "component": "@frsource/tiny-carousel-plugin-mouse-drag",
23 | "path": "packages/plugin-mouse-drag"
24 | },
25 | "packages/plugin-scroll-snap-fallback": {
26 | "component": "@frsource/tiny-carousel-plugin-scroll-snap-fallback",
27 | "path": "packages/plugin-scroll-snap-fallback"
28 | },
29 | "packages/react": {
30 | "component": "@frsource/tiny-carousel-react",
31 | "path": "packages/react"
32 | },
33 | "packages/utils": {
34 | "component": "@frsource/tiny-carousel-utils",
35 | "path": "packages/utils"
36 | },
37 | "packages/vue": {
38 | "component": "@frsource/tiny-carousel-vue",
39 | "path": "packages/vue"
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 | "extends": ["github>FRSOURCE/renovate-config"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/src/logo.png
--------------------------------------------------------------------------------
/src/logo.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/src/logo.psd
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "target": "es5"
5 | },
6 | "include": [
7 | "packages/**/*",
8 | "packages/*"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
13 |
14 |
15 | 
51 | 
45 | 
