From 26244cdc8ced863918f0ceb8138ca89bf6792461 Mon Sep 17 00:00:00 2001 From: lauramargar <114984466+lauramargar@users.noreply.github.com> Date: Fri, 17 May 2024 12:23:19 +0200 Subject: [PATCH 1/2] feat(scroll)!: replace `ScrollMixin` by `UseScroll` composable (#1473) BREAKING CHANGE: `WindowScroll' component will no longer be available and has been removed. --- packages/_vue3-migration-test/.eslintrc.js | 4 +- packages/_vue3-migration-test/src/router.ts | 8 +- .../src/x-modules/scroll/index.ts | 1 + .../src/x-modules/scroll/test-base-scroll.vue | 56 ++ .../src/components/scroll/base-scroll.vue | 91 +- .../src/components/scroll/index.ts | 2 +- .../src/components/scroll/scroll.mixin.ts | 322 ------- .../src/components/scroll/use-scroll.ts | 290 ++++++ packages/x-components/src/router.ts | 15 - .../src/views/infinite-scroll-body.vue | 77 -- .../src/views/infinite-scroll-document.vue | 60 -- .../src/views/infinite-scroll-html.vue | 66 -- .../__tests__/window-scroll.spec.ts | 834 ------------------ .../src/x-modules/scroll/components/index.ts | 1 - .../scroll/components/window-scroll.vue | 232 ----- 15 files changed, 443 insertions(+), 1616 deletions(-) create mode 100644 packages/_vue3-migration-test/src/x-modules/scroll/test-base-scroll.vue delete mode 100644 packages/x-components/src/components/scroll/scroll.mixin.ts create mode 100644 packages/x-components/src/components/scroll/use-scroll.ts delete mode 100644 packages/x-components/src/views/infinite-scroll-body.vue delete mode 100644 packages/x-components/src/views/infinite-scroll-document.vue delete mode 100644 packages/x-components/src/views/infinite-scroll-html.vue delete mode 100644 packages/x-components/src/x-modules/scroll/components/__tests__/window-scroll.spec.ts delete mode 100644 packages/x-components/src/x-modules/scroll/components/window-scroll.vue diff --git a/packages/_vue3-migration-test/.eslintrc.js b/packages/_vue3-migration-test/.eslintrc.js index 067d170b77..054726173d 100644 --- a/packages/_vue3-migration-test/.eslintrc.js +++ b/packages/_vue3-migration-test/.eslintrc.js @@ -5,6 +5,8 @@ module.exports = { project: 'tsconfig.eslint.json' }, rules: { - 'max-len': 'off' + 'max-len': 'off', + '@typescript-eslint/explicit-function-return-type': 'off', + 'vue/no-multiple-template-root': 'off' } }; diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts index b0338e1304..aa225fbdbe 100644 --- a/packages/_vue3-migration-test/src/router.ts +++ b/packages/_vue3-migration-test/src/router.ts @@ -14,7 +14,8 @@ import { TestScroll, TestSortDropdown, TestSortList, - TestSortPickerList + TestSortPickerList, + TestBaseScroll } from './'; const routes = [ @@ -73,6 +74,11 @@ const routes = [ name: 'Scroll', component: TestScroll }, + { + path: '/base-scroll', + name: 'BaseScroll', + component: TestBaseScroll + }, { path: '/sort-dropdown', name: 'SortDropdown', diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/index.ts b/packages/_vue3-migration-test/src/x-modules/scroll/index.ts index 0a0c301dd9..297de40eef 100644 --- a/packages/_vue3-migration-test/src/x-modules/scroll/index.ts +++ b/packages/_vue3-migration-test/src/x-modules/scroll/index.ts @@ -1,2 +1,3 @@ export { default as TestScroll } from './test-scroll.vue'; +export { default as TestBaseScroll } from './test-base-scroll.vue'; export * from './x-module'; diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/test-base-scroll.vue b/packages/_vue3-migration-test/src/x-modules/scroll/test-base-scroll.vue new file mode 100644 index 0000000000..09fa7c56f6 --- /dev/null +++ b/packages/_vue3-migration-test/src/x-modules/scroll/test-base-scroll.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/packages/x-components/src/components/scroll/base-scroll.vue b/packages/x-components/src/components/scroll/base-scroll.vue index 4815250c77..cc4a5c00d3 100644 --- a/packages/x-components/src/components/scroll/base-scroll.vue +++ b/packages/x-components/src/components/scroll/base-scroll.vue @@ -1,13 +1,18 @@ diff --git a/packages/x-components/src/components/scroll/index.ts b/packages/x-components/src/components/scroll/index.ts index 5408c1a126..193f9eb23a 100644 --- a/packages/x-components/src/components/scroll/index.ts +++ b/packages/x-components/src/components/scroll/index.ts @@ -1,3 +1,3 @@ export { default as BaseScroll } from './base-scroll.vue'; -export { default as ScrollMixin } from './scroll.mixin'; export * from './scroll.types'; +export * from './use-scroll'; diff --git a/packages/x-components/src/components/scroll/scroll.mixin.ts b/packages/x-components/src/components/scroll/scroll.mixin.ts deleted file mode 100644 index d5255049ce..0000000000 --- a/packages/x-components/src/components/scroll/scroll.mixin.ts +++ /dev/null @@ -1,322 +0,0 @@ -import Vue from 'vue'; -import { Component, Prop, Watch } from 'vue-property-decorator'; -import { throttle } from '../../utils/throttle'; -import { XEvent } from '../../wiring/events.types'; -import { XOn } from '../decorators/bus.decorators'; -import { ScrollDirection } from './scroll.types'; - -/** - * Mixin to share Scroll logic. - * - * @public - */ -@Component -/* eslint-disable @typescript-eslint/unbound-method */ -export default class ScrollMixin extends Vue { - /** - * The scrolling container reference. - * - * @public - */ - public $el!: HTMLElement; - /** - * Distance to the end of the scroll that when reached will emit the - * `scroll:about-to-end` event. - * - * @public - */ - @Prop({ default: 100 }) - public distanceToBottom!: number; - /** - * Positive vertical distance to still consider that the element is the first one visible. - * For example, if set to 100, after scrolling 100 pixels, the first rendered element - * will still be considered the first one. - */ - @Prop({ default: 100 }) - public firstElementThresholdPx!: number; - /** - * Time duration to ignore the subsequent scroll events after an emission. - * Higher values will decrease events precision but can prevent performance issues. - * - * @public - */ - @Prop({ default: 100 }) - public throttleMs!: number; - - /** - * If true (default), sets the scroll position to the top when certain events are emitted. - * - * @public - */ - @Prop({ type: Boolean, default: true }) - protected resetOnChange!: boolean; - - /** - * List of events that should reset the scroll when emitted. - * - * @public - */ - @Prop({ - default: () => [ - 'SearchBoxQueryChanged', - 'SortChanged', - 'SelectedFiltersChanged', - 'SelectedFiltersForRequestChanged', - 'SelectedRelatedTagsChanged', - 'UserChangedExtraParams' - ] - }) - public resetOn!: XEvent; - - /** - * Property for getting the client height of scroll. - * - * @internal - */ - protected clientHeight = 0; - /** - * Property for getting the current position of scroll. - * - * @internal - */ - protected currentPosition = 0; - /** - * Property for getting the direction of scroll. - * - * @internal - */ - protected direction!: ScrollDirection; - /** - * Property for getting the previous position of scroll. - * - * @internal - */ - protected previousPosition = 0; - /** - * Property for getting the scroll height. - * - * @internal - */ - protected scrollHeight = 0; - /** - * Flag to know if the property clientHeight is changing or gets the final value. - * - * @internal - */ - protected isClientHeightChanging = false; - /** - * Property for setting the direction of scroll. - * - * @internal - */ - protected scrollDirection: ScrollDirection = 'UP'; - - /** - * Restores the clientHeight flag when clientHeight property stops changing. - * Also sets a new previous position, before update the current one. - * - * @internal - */ - protected restoreClientHeightFlag(): void { - this.isClientHeightChanging = false; - this.previousPosition = this.currentPosition; - } - - protected throtteledCall = throttle(this.restoreClientHeightFlag, 100); - - /** - * Throttled version of the function that stores the DOM scroll related properties. - * The duration of the throttle is configured through the - * {@link ScrollMixin.throttleMs}. - * - * @returns A throttled version of the function to store the scroll data. - * @internal - */ - protected get throttledStoreScrollData(): () => void { - return throttle(this.storeScrollData, this.throttleMs); - } - - /** - * Returns distance missing to endPosition position. - * - * @returns A number for knowing the distance missing to endPosition position. - * @internal - */ - protected get distanceToEnd(): number { - return this.scrollEndPosition - this.currentPosition; - } - - /** - * Returns `true` when the amount of pixels scrolled is greater than - * the {@link ScrollMixin.distanceToBottom}. - * - * @returns A boolean for knowing if the user is about to reaching to the end. - * @internal - */ - protected get hasScrollAlmostReachedEnd(): boolean { - return !this.hasScrollReachedStart && this.distanceToBottom > this.distanceToEnd; - } - - /** - * Returns `true` when there is no more content to scroll. - * - * @returns A boolean for knowing if the user scrolls to the end. - * @internal - */ - protected get hasScrollReachedEnd(): boolean { - return this.currentPosition === this.scrollEndPosition; - } - - /** - * Returns `true` when the scroll is at the initial position. - * - * @returns A boolean for knowing if the user scrolls to the start. - * @internal - */ - protected get hasScrollReachedStart(): boolean { - return this.currentPosition === 0; - } - - /** - * Returns end position of scroll. - * - * @returns A number for knowing end position of scroll. - * @internal - */ - protected get scrollEndPosition(): number { - return this.scrollHeight - this.clientHeight; - } - - /** - * Initialises DOM dependant scroll properties. - * - * @internal - */ - mounted(): void { - this.$nextTick().then(() => { - if (!this.$el) { - // TODO Replace with Empathy's logger - // eslint-disable-next-line no-console - console.warn( - '[ScrollMixin]', - 'Components using this mixin must set `this.$el` to the HTML node that is scrolling.' - ); - } else { - this.storeScrollData(); - } - }); - } - - /** - * Resets the scroll position. - * - * @internal - */ - @XOn(instance => (instance as ScrollMixin).resetOn) - resetScroll(): void { - this.$nextTick().then(() => { - if (this.resetOnChange) { - this.$el.scrollTo({ top: 0 }); - } - }); - } - - /** - * Change the isClientHeightChanging flag when the property clientHeight is changing and - * calls throttleledCall method. - * - * @internal - */ - @Watch('clientHeight', { immediate: true }) - protected onClientHeightChanged(): void { - this.isClientHeightChanging = true; - - this.throtteledCall(); - } - - /** - * Emits the `scroll` event. - * - * @param _newScrollPosition - The new position of scroll. - * @param oldScrollPosition - The old position of scroll. - * @internal - */ - @Watch('currentPosition') - protected emitScroll(_newScrollPosition: number, oldScrollPosition: number): void { - this.$emit('scroll', this.currentPosition); - this.previousPosition = oldScrollPosition; - } - - /** - * Sets direction of scroll based in {@link ScrollDirection} when the current position - * has changed. - * - * @internal - */ - @Watch('currentPosition') - protected setScrollDirection(): void { - if (!this.isClientHeightChanging && this.currentPosition !== this.previousPosition) { - this.scrollDirection = this.currentPosition > this.previousPosition ? 'DOWN' : 'UP'; - } - } - - /** - * Emits the 'scroll:at-start' event when the user reaches the start. - * - * @param isScrollAtStart - For knowing if the user reaches at start. - * @internal - */ - @Watch('hasScrollReachedStart') - protected emitScrollReachedAtStart(isScrollAtStart: boolean): void { - this.$emit('scroll:at-start', isScrollAtStart); - } - - /** - * Emits the 'scroll:almost-at-end' event when the user is about to reach to end. - * - * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end. - * @internal - */ - @Watch('hasScrollAlmostReachedEnd') - protected emitScrollAlmostAtEnd(isScrollAlmostAtEnd: boolean): void { - this.$emit('scroll:almost-at-end', isScrollAlmostAtEnd); - } - - /** - * Emits the 'scroll:at-end' event when the user reaches the end. - * - * @param isScrollAtEnd - For knowing if the user reaches at end. - * @internal - */ - @Watch('hasScrollReachedEnd') - protected emitScrollAtEnd(isScrollAtEnd: boolean): void { - this.$emit('scroll:at-end', isScrollAtEnd); - } - - /** - * Emits the `scroll:direction-change` event when the scrolling direction has changed. - * - * @param direction - The new direction of scroll. - * @internal - */ - @Watch('scrollDirection') - protected emitScrollDirection(direction: ScrollDirection): void { - if (!this.isClientHeightChanging) { - this.$emit('scroll:direction-change', direction); - } - } - - /** - * Updates scroll related properties. - * - * @internal - */ - protected storeScrollData(): void { - if (this.$el) { - this.currentPosition = this.$el.scrollTop; - this.scrollHeight = this.$el.scrollHeight; - this.clientHeight = this.$el.clientHeight; - } - } -} -/* eslint-enable @typescript-eslint/unbound-method */ diff --git a/packages/x-components/src/components/scroll/use-scroll.ts b/packages/x-components/src/components/scroll/use-scroll.ts new file mode 100644 index 0000000000..63efcca59b --- /dev/null +++ b/packages/x-components/src/components/scroll/use-scroll.ts @@ -0,0 +1,290 @@ +import { computed, nextTick, onMounted, Ref, ref, SetupContext, watch } from 'vue'; +import { isArray } from '@empathyco/x-utils'; +import { XEvent } from '../../wiring/events.types'; +import { throttle } from '../../utils/throttle'; +import { use$x } from '../../composables/use-$x'; +import { ScrollDirection } from './scroll.types'; + +/** + * Composable to share Scroll logic. + * + * @param props - Composable props. + * @param context - Component setup context. + * @param scrollEl - The scrolling container reference. + * @returns A throttled version of the function to store the scroll data. + * @public + */ +export function useScroll( + props: { + /** + * Distance to the end of the scroll that when reached will emit the + * `scroll:about-to-end` event. + * + * @public + */ + distanceToBottom: number; + /** + * Positive vertical distance to still consider that the element is the first one visible. + * For example, if set to 100, after scrolling 100 pixels, the first rendered element + * will still be considered the first one. + */ + firstElementThresholdPx: number; + /** + * Time duration to ignore the subsequent scroll events after an emission. + * Higher values will decrease events precision but can prevent performance issues. + * + * @public + */ + throttleMs: number; + /** + * If true (default), sets the scroll position to the top when certain events are emitted. + * + * @public + */ + resetOnChange: boolean; + /** + * List of events that should reset the scroll when emitted. + * + * @public + */ + resetOn: XEvent | XEvent[]; + }, + { emit }: SetupContext, + scrollEl: Ref +) { + /** + * Property for getting the client height of scroll. + * + * @internal + */ + const clientHeight = ref(0); + + /** + * Property for getting the current position of scroll. + * + * @internal + */ + const currentPosition = ref(0); + + /** + * Property for getting the previous position of scroll. + * + * @internal + */ + const previousPosition = ref(0); + + /** + * Property for getting the scroll height. + * + * @internal + */ + const scrollHeight = ref(0); + /** + * Flag to know if the property clientHeight is changing or gets the final value. + * + * @internal + */ + const isClientHeightChanging = ref(false); + + /** + * Property for setting the direction of scroll. + * + * @internal + */ + const scrollDirection: Ref = ref('UP'); + + /** + * Restores the clientHeight flag when clientHeight property stops changing. + * Also sets a new previous position, before update the current one. + * + * @internal + */ + const restoreClientHeightFlag = (): void => { + isClientHeightChanging.value = false; + previousPosition.value = currentPosition.value; + }; + + const throtteledCall = throttle(restoreClientHeightFlag, 100); + + /** + * Updates scroll related properties. + * + * @internal + */ + const storeScrollData = () => { + if (scrollEl.value) { + currentPosition.value = scrollEl.value.scrollTop; + scrollHeight.value = scrollEl.value.scrollHeight; + clientHeight.value = scrollEl.value.clientHeight; + } + }; + + /** + * Throttled version of the function that stores the DOM scroll related properties. + * The duration of the throttle is configured through the `throttleMs` prop passed as parameter. + * + * @returns A throttled version of the function to store the scroll data. + * @internal + */ + const throttledStoreScrollData = computed(() => throttle(storeScrollData, props.throttleMs)); + + /** + * Returns end position of scroll. + * + * @returns A number for knowing end position of scroll. + * @internal + */ + const scrollEndPosition = computed(() => scrollHeight.value - clientHeight.value); + + /** + * Returns distance missing to endPosition position. + * + * @returns A number for knowing the distance missing to endPosition position. + * @internal + */ + const distanceToEnd = computed(() => scrollEndPosition.value - currentPosition.value); + + /** + * Returns `true` when there is no more content to scroll. + * + * @returns A boolean for knowing if the user scrolls to the end. + * @internal + */ + const hasScrollReachedEnd = computed(() => currentPosition.value === scrollEndPosition.value); + + /** + * Returns `true` when the scroll is at the initial position. + * + * @returns A boolean for knowing if the user scrolls to the start. + * @internal + */ + const hasScrollReachedStart = computed(() => currentPosition.value === 0); + + /** + * Returns `true` when the amount of pixels scrolled is greater than + * the `distanceToBottom` prop passed as parameter. + * + * @returns A boolean for knowing if the user is about to reaching to the end. + * @internal + */ + const hasScrollAlmostReachedEnd = computed( + () => !hasScrollReachedStart.value && props.distanceToBottom > distanceToEnd.value + ); + + onMounted(() => { + nextTick().then(() => { + if (!scrollEl.value) { + // TODO Replace with Empathy's logger + // eslint-disable-next-line no-console + console.warn( + '[useScroll]', + // eslint-disable-next-line max-len + 'Components using this composable must pass `scrollEl` as the HTML node that is scrolling.' + ); + } else { + storeScrollData(); + } + }); + }); + + /** + * Change the isClientHeightChanging flag when the property clientHeight is changing and + * calls throttleledCall method. + * + * @internal + */ + watch( + clientHeight, + () => { + isClientHeightChanging.value = true; + + throtteledCall(); + }, + { immediate: true } + ); + + /** + * Emits the `scroll` event. + * + * @param _newScrollPosition - The new position of scroll. + * @param oldScrollPosition - The old position of scroll. + * @internal + */ + watch(currentPosition, (_newScrollPosition: number, oldScrollPosition: number) => { + emit('scroll', currentPosition.value); + previousPosition.value = oldScrollPosition; + }); + + /** + * Sets direction of scroll based in {@link ScrollDirection} when the current position + * has changed. + * + * @internal + */ + watch(currentPosition, () => { + if (!isClientHeightChanging.value && currentPosition.value !== previousPosition.value) { + scrollDirection.value = currentPosition.value > previousPosition.value ? 'DOWN' : 'UP'; + } + }); + + /** + * Emits the 'scroll:almost-at-end' event when the user is about to reach to end. + * + * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end. + * @internal + */ + watch(hasScrollReachedStart, (isScrollAtStart: boolean) => { + emit('scroll:at-start', isScrollAtStart); + }); + + /** + * Sets direction of scroll based in {@link ScrollDirection} when the current position + * has changed. + * + * @internal + */ + watch(hasScrollAlmostReachedEnd, (isScrollAlmostAtEnd: boolean) => { + emit('scroll:almost-at-end', isScrollAlmostAtEnd); + }); + + /** + * Emits the 'scroll:at-end' event when the user reaches the end. + * + * @param isScrollAtEnd - For knowing if the user reaches at end. + * @internal + */ + watch(hasScrollReachedEnd, (isScrollAtEnd: boolean) => { + emit('scroll:at-end', isScrollAtEnd); + }); + + /** + * Emits the `scroll:direction-change` event when the scrolling direction has changed. + * + * @param direction - The new direction of scroll. + * @internal + */ + watch(scrollDirection, (direction: ScrollDirection) => { + if (!isClientHeightChanging.value) { + emit('scroll:direction-change', direction); + } + }); + + /** + * Resets the scroll position. + * + * @internal + */ + const $x = use$x(); + const resetOnEvents = isArray(props.resetOn) ? props.resetOn : [props.resetOn]; + resetOnEvents.forEach(event => + $x.on(event, false).subscribe(() => + nextTick().then(() => { + if (props.resetOnChange) { + scrollEl.value?.scrollTo({ top: 0 }); + } + }) + ) + ); + + return { throttledStoreScrollData }; +} diff --git a/packages/x-components/src/router.ts b/packages/x-components/src/router.ts index 6cfac9ea7e..3a948b9096 100644 --- a/packages/x-components/src/router.ts +++ b/packages/x-components/src/router.ts @@ -38,21 +38,6 @@ if (process.env.NODE_ENV !== 'production') { name: 'Infinite Scroll Container', component: () => import('./views/infinite-scroll.vue') }, - { - path: '/infinite-scroll-document', - name: 'Infinite Scroll Document', - component: () => import('./views/infinite-scroll-document.vue') - }, - { - path: '/infinite-scroll-html', - name: 'Infinite Scroll HTML', - component: () => import('./views/infinite-scroll-html.vue') - }, - { - path: '/infinite-scroll-body', - name: 'Infinite Scroll Body', - component: () => import('./views/infinite-scroll-body.vue') - }, { path: '/accessibility-check', name: 'Accessibility Check', diff --git a/packages/x-components/src/views/infinite-scroll-body.vue b/packages/x-components/src/views/infinite-scroll-body.vue deleted file mode 100644 index 8a12b3a17c..0000000000 --- a/packages/x-components/src/views/infinite-scroll-body.vue +++ /dev/null @@ -1,77 +0,0 @@ - - - - - diff --git a/packages/x-components/src/views/infinite-scroll-document.vue b/packages/x-components/src/views/infinite-scroll-document.vue deleted file mode 100644 index 2e0f81a325..0000000000 --- a/packages/x-components/src/views/infinite-scroll-document.vue +++ /dev/null @@ -1,60 +0,0 @@ - - - - - diff --git a/packages/x-components/src/views/infinite-scroll-html.vue b/packages/x-components/src/views/infinite-scroll-html.vue deleted file mode 100644 index c8901ca4b5..0000000000 --- a/packages/x-components/src/views/infinite-scroll-html.vue +++ /dev/null @@ -1,66 +0,0 @@ - - - - - diff --git a/packages/x-components/src/x-modules/scroll/components/__tests__/window-scroll.spec.ts b/packages/x-components/src/x-modules/scroll/components/__tests__/window-scroll.spec.ts deleted file mode 100644 index a1a2b42002..0000000000 --- a/packages/x-components/src/x-modules/scroll/components/__tests__/window-scroll.spec.ts +++ /dev/null @@ -1,834 +0,0 @@ -import { mount, Wrapper } from '@vue/test-utils'; -import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils'; -import { XPlugin } from '../../../../plugins/x-plugin'; -import { scrollXModule } from '../../x-module'; -import WindowScroll from '../window-scroll.vue'; - -async function renderWindowScroll({ - template = ``, - throttleMs = 200, - scrollHeight = 800, - clientHeight = 200, - distanceToBottom = 100, - scrollableElement, - showComponent -}: RenderWindowScrollOptions = {}): Promise { - const [, localVue] = installNewXPlugin({ initialXModules: [scrollXModule] }); - - const html = document.documentElement; - html.scrollTop = 0; - jest.spyOn(html, 'clientHeight', 'get').mockImplementation(() => clientHeight); - jest.spyOn(html, 'scrollHeight', 'get').mockImplementation(() => scrollHeight); - jest.spyOn(html, 'removeEventListener'); - - const body = document.body; - body.scrollTop = 0; - jest.spyOn(body, 'clientHeight', 'get').mockImplementation(() => clientHeight); - jest.spyOn(body, 'scrollHeight', 'get').mockImplementation(() => scrollHeight); - jest.spyOn(body, 'removeEventListener'); - - const wrapperContainer = mount( - { - props: ['throttleMs', 'distanceToBottom', 'scrollableElement'], - components: { - WindowScroll - }, - template, - data() { - return { showComponent }; - } - }, - { - propsData: { - throttleMs, - distanceToBottom, - scrollableElement - }, - localVue - } - ); - const wrapper = wrapperContainer.findComponent(WindowScroll); - - await localVue.nextTick(); - - return { - wrapper, - async scrollHtml(options: { to: number; durationMs: number }) { - html.scrollTop = options.to; - html.dispatchEvent(new Event('scroll')); - jest.advanceTimersByTime(options.durationMs); - await localVue.nextTick(); - }, - async scrollBody(options: { to: number; durationMs: number }) { - body.scrollTop = options.to; - body.dispatchEvent(new Event('scroll')); - jest.advanceTimersByTime(options.durationMs); - await localVue.nextTick(); - }, - async scrollContent(options: { to: number; durationMs: number }) { - const scrollContent = wrapperContainer.find(getDataTestSelector('content')).element; - jest.spyOn(scrollContent, 'clientHeight', 'get').mockImplementation(() => 700); - jest.spyOn(scrollContent, 'scrollHeight', 'get').mockImplementation(() => 150); - - scrollContent.scrollTop = options.to; - scrollContent.dispatchEvent(new Event('scroll')); - jest.advanceTimersByTime(options.durationMs); - await localVue.nextTick(); - }, - async setShowComponent(showComponent: boolean): Promise { - await wrapperContainer.setData({ showComponent }); - await localVue.nextTick(); - } - }; -} - -describe('testing Main Scroll Component', () => { - beforeAll(jest.useFakeTimers); - afterEach(jest.clearAllTimers); - - describe('html', () => { - it('throttles the scroll event', async () => { - const { wrapper, scrollHtml } = await renderWindowScroll({ - throttleMs: 200, - scrollableElement: 'html' - }); - - const listenerScrolled = jest.fn(); - wrapper.vm.$x.on('UserScrolled', true).subscribe(listenerScrolled); - expect(listenerScrolled).not.toHaveBeenCalled(); - - await scrollHtml({ - to: 50, - durationMs: 100 - }); - await scrollHtml({ - to: 100, - durationMs: 99 - }); - - expect(listenerScrolled).not.toHaveBeenCalled(); - - await scrollHtml({ - to: 150, - durationMs: 1 - }); - - expect(listenerScrolled).toHaveBeenCalledTimes(1); - expect(listenerScrolled).toHaveBeenNthCalledWith(1, { - eventPayload: 150, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - }); - - // eslint-disable-next-line max-len - it('emits the `UserChangedScrollDirection` event when the user changes scrolling direction', async () => { - const { wrapper, scrollHtml } = await renderWindowScroll({ - throttleMs: 200, - scrollableElement: 'html' - }); - - const listenerChangeDirection = jest.fn(); - wrapper.vm.$x.on('UserChangedScrollDirection', true).subscribe(listenerChangeDirection); - expect(listenerChangeDirection).not.toHaveBeenCalled(); - - await scrollHtml({ - to: 300, - durationMs: 200 - }); - - await scrollHtml({ - to: 500, - durationMs: 200 - }); - - await scrollHtml({ - to: 200, - durationMs: 200 - }); - - await scrollHtml({ - to: 100, - durationMs: 200 - }); - - expect(listenerChangeDirection).toHaveBeenCalledTimes(2); - expect(listenerChangeDirection).toHaveBeenNthCalledWith(1, { - eventPayload: 'DOWN', - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerChangeDirection).toHaveBeenNthCalledWith(2, { - eventPayload: 'UP', - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - }); - - // eslint-disable-next-line max-len - it('emits the `UserReachedScrollStart` event when the user scrolls back to the top', async () => { - const { wrapper, scrollHtml } = await renderWindowScroll({ - throttleMs: 200, - scrollableElement: 'html' - }); - - const listenerScrollStart = jest.fn(); - wrapper.vm.$x.on('UserReachedScrollStart', true).subscribe(listenerScrollStart); - expect(listenerScrollStart).not.toHaveBeenCalled(); - - await scrollHtml({ - to: 300, - durationMs: 200 - }); - - await scrollHtml({ - to: 0, - durationMs: 200 - }); - - expect(listenerScrollStart).toHaveBeenCalledTimes(2); - expect(listenerScrollStart).toHaveBeenNthCalledWith(1, { - eventPayload: false, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerScrollStart).toHaveBeenNthCalledWith(2, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - }); - - // eslint-disable-next-line max-len - it('emits `UserAlmostReachedScrollEnd` and`UserReachedScrollEnd` when the user scrolls to the bottom', async () => { - const { wrapper, scrollHtml } = await renderWindowScroll({ - throttleMs: 200, - scrollHeight: 800, - clientHeight: 200, - distanceToBottom: 300, - scrollableElement: 'html' - }); - - const listenerAlmostReachedScrollEnd = jest.fn(); - wrapper.vm.$x - .on('UserAlmostReachedScrollEnd', true) - .subscribe(listenerAlmostReachedScrollEnd); - const listenerReachedScrollEnd = jest.fn(); - wrapper.vm.$x.on('UserReachedScrollEnd', true).subscribe(listenerReachedScrollEnd); - - await scrollHtml({ - to: 501, - durationMs: 200 - }); - - expect(listenerAlmostReachedScrollEnd).toHaveBeenCalledTimes(1); - expect(listenerReachedScrollEnd).toHaveBeenCalledTimes(1); - expect(listenerAlmostReachedScrollEnd).toHaveBeenNthCalledWith(1, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerReachedScrollEnd).toHaveBeenNthCalledWith(1, { - eventPayload: false, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await scrollHtml({ - to: 600, - durationMs: 200 - }); - - expect(listenerAlmostReachedScrollEnd).toHaveBeenCalledTimes(1); - expect(listenerReachedScrollEnd).toHaveBeenCalledTimes(2); - expect(listenerReachedScrollEnd).toHaveBeenNthCalledWith(2, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await scrollHtml({ - to: 0, - durationMs: 200 - }); - - expect(listenerAlmostReachedScrollEnd).toHaveBeenCalledTimes(2); - expect(listenerReachedScrollEnd).toHaveBeenCalledTimes(3); - expect(listenerAlmostReachedScrollEnd).toHaveBeenNthCalledWith(2, { - eventPayload: false, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerReachedScrollEnd).toHaveBeenNthCalledWith(3, { - eventPayload: false, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await scrollHtml({ - to: 600, - durationMs: 200 - }); - - expect(listenerAlmostReachedScrollEnd).toHaveBeenCalledTimes(3); - expect(listenerReachedScrollEnd).toHaveBeenCalledTimes(4); - expect(listenerAlmostReachedScrollEnd).toHaveBeenNthCalledWith(3, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerReachedScrollEnd).toHaveBeenNthCalledWith(4, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - }); - - it('does not trigger event when scrolling in body or other element', async () => { - const { wrapper, scrollBody, scrollContent } = await renderWindowScroll({ - template: `
- -
-
`, - throttleMs: 200, - scrollableElement: 'html' - }); - - const listenerScrolled = jest.fn(); - wrapper.vm.$x.on('UserScrolled', true).subscribe(listenerScrolled); - expect(listenerScrolled).not.toHaveBeenCalled(); - - await scrollBody({ - to: 500, - durationMs: 200 - }); - - await scrollContent({ - to: 700, - durationMs: 200 - }); - - expect(listenerScrolled).not.toHaveBeenCalled(); - }); - - it('does not emit event if component is not rendered or is destroyed', async () => { - const { scrollHtml, setShowComponent } = await renderWindowScroll({ - template: ` - `, - throttleMs: 200, - scrollableElement: 'html', - showComponent: false - }); - - const listenerScrolled = jest.fn(); - XPlugin.bus.on('UserScrolled', true).subscribe(listenerScrolled); - expect(listenerScrolled).not.toHaveBeenCalled(); - - await scrollHtml({ - to: 300, - durationMs: 200 - }); - - await scrollHtml({ - to: 600, - durationMs: 200 - }); - - expect(listenerScrolled).not.toHaveBeenCalled(); - - await setShowComponent(true); - - expect(listenerScrolled).toHaveBeenCalledTimes(1); - expect(listenerScrolled).toHaveBeenNthCalledWith(1, { - eventPayload: 600, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await scrollHtml({ - to: 800, - durationMs: 200 - }); - - expect(listenerScrolled).toHaveBeenCalledTimes(2); - expect(listenerScrolled).toHaveBeenNthCalledWith(2, { - eventPayload: 800, - metadata: { - moduleName: 'scroll', - target: document.documentElement, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await setShowComponent(false); - - await scrollHtml({ - to: 500, - durationMs: 200 - }); - - // eslint-disable-next-line @typescript-eslint/unbound-method - expect(document.documentElement.removeEventListener).toHaveBeenCalledTimes(1); - expect(listenerScrolled).toHaveBeenCalledTimes(2); - }); - }); - - describe('body', () => { - it('throttles the scroll event', async () => { - const { wrapper, scrollBody } = await renderWindowScroll({ - throttleMs: 200, - scrollableElement: 'body' - }); - - const listenerScrolled = jest.fn(); - wrapper.vm.$x.on('UserScrolled', true).subscribe(listenerScrolled); - expect(listenerScrolled).not.toHaveBeenCalled(); - - await scrollBody({ - to: 50, - durationMs: 100 - }); - await scrollBody({ - to: 100, - durationMs: 99 - }); - - expect(listenerScrolled).not.toHaveBeenCalled(); - - await scrollBody({ - to: 150, - durationMs: 1 - }); - - expect(listenerScrolled).toHaveBeenCalledTimes(1); - expect(listenerScrolled).toHaveBeenNthCalledWith(1, { - eventPayload: 150, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - }); - - // eslint-disable-next-line max-len - it('emits the `UserChangedScrollDirection` event when the user changes scrolling direction', async () => { - const { wrapper, scrollBody } = await renderWindowScroll({ - throttleMs: 200, - scrollableElement: 'body' - }); - - const listenerChangeDirection = jest.fn(); - wrapper.vm.$x.on('UserChangedScrollDirection', true).subscribe(listenerChangeDirection); - expect(listenerChangeDirection).not.toHaveBeenCalled(); - - await scrollBody({ - to: 300, - durationMs: 200 - }); - - await scrollBody({ - to: 500, - durationMs: 200 - }); - - await scrollBody({ - to: 200, - durationMs: 200 - }); - - await scrollBody({ - to: 100, - durationMs: 200 - }); - - expect(listenerChangeDirection).toHaveBeenCalledTimes(2); - expect(listenerChangeDirection).toHaveBeenNthCalledWith(1, { - eventPayload: 'DOWN', - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerChangeDirection).toHaveBeenNthCalledWith(2, { - eventPayload: 'UP', - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - }); - - // eslint-disable-next-line max-len - it('emits the `UserReachedScrollStart` event when the user scrolls back to the top', async () => { - const { wrapper, scrollBody } = await renderWindowScroll({ - throttleMs: 200, - scrollableElement: 'body' - }); - - const listenerScrollStart = jest.fn(); - wrapper.vm.$x.on('UserReachedScrollStart', true).subscribe(listenerScrollStart); - expect(listenerScrollStart).not.toHaveBeenCalled(); - - await scrollBody({ - to: 300, - durationMs: 200 - }); - - await scrollBody({ - to: 0, - durationMs: 200 - }); - - expect(listenerScrollStart).toHaveBeenCalledTimes(2); - expect(listenerScrollStart).toHaveBeenNthCalledWith(1, { - eventPayload: false, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerScrollStart).toHaveBeenNthCalledWith(2, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - }); - - // eslint-disable-next-line max-len - it('emits `UserAlmostReachedScrollEnd` and`UserReachedScrollEnd` when the user scrolls to the bottom', async () => { - const { wrapper, scrollBody } = await renderWindowScroll({ - throttleMs: 200, - scrollHeight: 800, - clientHeight: 200, - distanceToBottom: 300, - scrollableElement: 'body' - }); - - const listenerAlmostReachedScrollEnd = jest.fn(); - wrapper.vm.$x - .on('UserAlmostReachedScrollEnd', true) - .subscribe(listenerAlmostReachedScrollEnd); - const listenerReachedScrollEnd = jest.fn(); - wrapper.vm.$x.on('UserReachedScrollEnd', true).subscribe(listenerReachedScrollEnd); - - await scrollBody({ - to: 501, - durationMs: 200 - }); - - expect(listenerAlmostReachedScrollEnd).toHaveBeenCalledTimes(1); - expect(listenerReachedScrollEnd).toHaveBeenCalledTimes(1); - expect(listenerAlmostReachedScrollEnd).toHaveBeenNthCalledWith(1, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerReachedScrollEnd).toHaveBeenNthCalledWith(1, { - eventPayload: false, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await scrollBody({ - to: 600, - durationMs: 200 - }); - - expect(listenerAlmostReachedScrollEnd).toHaveBeenCalledTimes(1); - expect(listenerReachedScrollEnd).toHaveBeenCalledTimes(2); - expect(listenerReachedScrollEnd).toHaveBeenNthCalledWith(2, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await scrollBody({ - to: 0, - durationMs: 200 - }); - - expect(listenerAlmostReachedScrollEnd).toHaveBeenCalledTimes(2); - expect(listenerReachedScrollEnd).toHaveBeenCalledTimes(3); - expect(listenerAlmostReachedScrollEnd).toHaveBeenNthCalledWith(2, { - eventPayload: false, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerReachedScrollEnd).toHaveBeenNthCalledWith(3, { - eventPayload: false, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await scrollBody({ - to: 600, - durationMs: 200 - }); - - expect(listenerAlmostReachedScrollEnd).toHaveBeenCalledTimes(3); - expect(listenerReachedScrollEnd).toHaveBeenCalledTimes(4); - expect(listenerAlmostReachedScrollEnd).toHaveBeenNthCalledWith(3, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - expect(listenerReachedScrollEnd).toHaveBeenNthCalledWith(4, { - eventPayload: true, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - }); - - it('does not trigger event when scrolling in document or other element', async () => { - const { wrapper, scrollHtml, scrollContent } = await renderWindowScroll({ - template: `
- -
-
`, - throttleMs: 200, - scrollableElement: 'body' - }); - - const listenerScrolled = jest.fn(); - wrapper.vm.$x.on('UserScrolled', true).subscribe(listenerScrolled); - expect(listenerScrolled).not.toHaveBeenCalled(); - - await scrollHtml({ - to: 500, - durationMs: 200 - }); - - await scrollContent({ - to: 700, - durationMs: 200 - }); - - expect(listenerScrolled).not.toHaveBeenCalled(); - }); - - it('does not emit event if component is not rendered or is destroyed', async () => { - const { scrollBody, setShowComponent } = await renderWindowScroll({ - template: ` - `, - throttleMs: 200, - scrollableElement: 'body', - showComponent: false - }); - - const listenerScrolled = jest.fn(); - XPlugin.bus.on('UserScrolled', true).subscribe(listenerScrolled); - expect(listenerScrolled).not.toHaveBeenCalled(); - - await scrollBody({ - to: 300, - durationMs: 200 - }); - - await scrollBody({ - to: 600, - durationMs: 200 - }); - - expect(listenerScrolled).not.toHaveBeenCalled(); - - await setShowComponent(true); - - expect(listenerScrolled).toHaveBeenCalledTimes(1); - expect(listenerScrolled).toHaveBeenNthCalledWith(1, { - eventPayload: 600, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await scrollBody({ - to: 800, - durationMs: 200 - }); - - expect(listenerScrolled).toHaveBeenCalledTimes(2); - expect(listenerScrolled).toHaveBeenNthCalledWith(2, { - eventPayload: 800, - metadata: { - moduleName: 'scroll', - target: document.body, - id: 'main-scroll', - location: undefined, - replaceable: true - } - }); - - await setShowComponent(false); - - await scrollBody({ - to: 500, - durationMs: 200 - }); - - // eslint-disable-next-line @typescript-eslint/unbound-method - expect(document.body.removeEventListener).toHaveBeenCalledTimes(1); - expect(listenerScrolled).toHaveBeenCalledTimes(2); - }); - }); -}); - -interface RenderWindowScrollOptions { - /** The template to be rendered. */ - template?: string; - /** Number for throttle of scroll. */ - throttleMs?: number; - /** Number of scroll height of main scroll. */ - scrollHeight?: number; - /** Number of client height of main scroll. */ - clientHeight?: number; - /** Distance to the end of the main scroll. */ - distanceToBottom?: number; - /** ScrollableElement where apply the scroll. */ - scrollableElement?: 'html' | 'body'; - /** If it will show the WindowScroll or not. */ - showComponent?: boolean; -} - -interface RenderWindowScrollAPI { - /** The wrapper for the base scroll component. */ - wrapper: Wrapper; - /** Function that dispatch the event scroll document. */ - scrollHtml: (options: { to: number; durationMs: number }) => Promise; - /** Function that dispatch the event scroll body. */ - scrollBody: (options: { to: number; durationMs: number }) => Promise; - /** Function that change variable of showComponent for show or not the WindowScroll. */ - setShowComponent: (showComponent: boolean) => Promise; - /** Function that dispatch the event scroll about a element. */ - scrollContent: (options: { to: number; durationMs: number }) => Promise; -} diff --git a/packages/x-components/src/x-modules/scroll/components/index.ts b/packages/x-components/src/x-modules/scroll/components/index.ts index 624bf8780d..e9f2e85123 100644 --- a/packages/x-components/src/x-modules/scroll/components/index.ts +++ b/packages/x-components/src/x-modules/scroll/components/index.ts @@ -1,6 +1,5 @@ export { default as Scroll } from './scroll.vue'; export { default as ScrollToTop } from './scroll-to-top.vue'; -export { default as WindowScroll } from './window-scroll.vue'; export { default as MainScrollItem } from './main-scroll-item.vue'; export { default as MainScroll } from './main-scroll.vue'; export * from './scroll.const'; diff --git a/packages/x-components/src/x-modules/scroll/components/window-scroll.vue b/packages/x-components/src/x-modules/scroll/components/window-scroll.vue deleted file mode 100644 index ec85ba6954..0000000000 --- a/packages/x-components/src/x-modules/scroll/components/window-scroll.vue +++ /dev/null @@ -1,232 +0,0 @@ - - - -## Events - -A list of events that the component will emit: - -- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts): - the event is emitted after the user scrolls in this container. The payload is the scroll top - distance in pixels. -- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts): - the event is emitted when the user changes the scroll direction. The payload is the new scrolling - direction. -- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts): - the event is emitted when the user scrolls up to the initial position of the scroll. -- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts): - the event is emitted when the user is about to reach the bottom part of the scroll. -- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts): - the event is emitted when the user has reached the bottom part of the scroll. - -## Vue Events - -- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll - top distance in pixels. -- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The - payload is the new scrolling direction. -- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the - scroll. -- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of - the scroll. -- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll. - -## Example - -The `WindowScroll` component manages the scroll state of the `body` or `html` elements. It does the -necessary calculations for knowing the direction of scroll, if the scroll has reached its starting -position, if it is about to reach its ending position or if it has already reached it end. Whenever -this state changes, it emits the appropiate X Event to the rest of the application - -### Custom usage - -#### Overriding the properties and using document scroll events. - -```vue - - - -``` - -#### Using body and XEvents. - -If we want to listen scroll body we should do some changes in css for body. This is an example, so -therefore the height of body can be get any value that you want. The template style should have a -similar styles the corresponding style for tag body like in the next example. - -```vue - - - - -``` - From 9485e458103cfef8cfe2a40fe66f23be157a7fa6 Mon Sep 17 00:00:00 2001 From: empathy/x Date: Fri, 17 May 2024 10:38:19 +0000 Subject: [PATCH 2/2] chore(release): publish - vue3-migration-test@1.0.0-alpha.10 - @empathyco/x-components@5.0.0-alpha.13 --- packages/_vue3-migration-test/CHANGELOG.md | 13 +++++++++++++ packages/_vue3-migration-test/package.json | 2 +- packages/x-components/CHANGELOG.md | 13 +++++++++++++ packages/x-components/package.json | 2 +- 4 files changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md index 27d41e9759..ca8050575f 100644 --- a/packages/_vue3-migration-test/CHANGELOG.md +++ b/packages/_vue3-migration-test/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.0-alpha.10](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.9...vue3-migration-test@1.0.0-alpha.10) (2024-05-17) + + +### ⚠ BREAKING CHANGES + +* **scroll:** `WindowScroll' component will no longer be available and has been removed. + +### Features + +* **scroll:** replace `ScrollMixin` by `UseScroll` composable (#1473) ([26244cd](https://github.com/empathyco/x/commit/26244cdc8ced863918f0ceb8138ca89bf6792461)) + + + ## [1.0.0-alpha.9](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.8...vue3-migration-test@1.0.0-alpha.9) (2024-05-15) diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json index 280ad5efae..2b0d6b7fb3 100644 --- a/packages/_vue3-migration-test/package.json +++ b/packages/_vue3-migration-test/package.json @@ -1,7 +1,7 @@ { "name": "vue3-migration-test", "private": "true", - "version": "1.0.0-alpha.9", + "version": "1.0.0-alpha.10", "scripts": { "dev": "vite", "preview": "vite preview", diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md index 445ab3329e..aec246ddf3 100644 --- a/packages/x-components/CHANGELOG.md +++ b/packages/x-components/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.0.0-alpha.13](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.12...@empathyco/x-components@5.0.0-alpha.13) (2024-05-17) + + +### ⚠ BREAKING CHANGES + +* **scroll:** `WindowScroll' component will no longer be available and has been removed. + +### Features + +* **scroll:** replace `ScrollMixin` by `UseScroll` composable (#1473) ([26244cd](https://github.com/empathyco/x/commit/26244cdc8ced863918f0ceb8138ca89bf6792461)) + + + ## [5.0.0-alpha.12](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.11...@empathyco/x-components@5.0.0-alpha.12) (2024-05-15) diff --git a/packages/x-components/package.json b/packages/x-components/package.json index 9edb2804de..995b2e4232 100644 --- a/packages/x-components/package.json +++ b/packages/x-components/package.json @@ -1,6 +1,6 @@ { "name": "@empathyco/x-components", - "version": "5.0.0-alpha.12", + "version": "5.0.0-alpha.13", "description": "Empathy X Components", "author": "Empathy Systems Corporation S.L.", "license": "Apache-2.0",