From 2490db8c28517e5e946ca40b145e76486986f67a Mon Sep 17 00:00:00 2001 From: Allisat Date: Tue, 25 Nov 2025 09:23:17 +0100 Subject: [PATCH 1/2] fix(NO-TICKET): fix error in slider-element, cause by missing items check --- .npmrc | 1 - .../interactions/slider-element/CHANGELOG.md | 4 ++ .../interactions/slider-element/package.json | 2 +- .../slider-element/src/slider-element.js | 63 ++++++++++--------- .../stories/slider-element.stories.js | 4 ++ 5 files changed, 43 insertions(+), 31 deletions(-) delete mode 100644 .npmrc diff --git a/.npmrc b/.npmrc deleted file mode 100644 index c658278..0000000 --- a/.npmrc +++ /dev/null @@ -1 +0,0 @@ -@webtides:registry=https://npm.pkg.github.com/ diff --git a/packages/interactions/slider-element/CHANGELOG.md b/packages/interactions/slider-element/CHANGELOG.md index 61e88c9..0086ade 100644 --- a/packages/interactions/slider-element/CHANGELOG.md +++ b/packages/interactions/slider-element/CHANGELOG.md @@ -15,6 +15,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p +## [0.4.16] - 2025-11-25 + +- fix error in slider-element, cause by missing items check + ## [0.4.15] - 2022-07-21 ### Changed diff --git a/packages/interactions/slider-element/package.json b/packages/interactions/slider-element/package.json index d28778d..66019e5 100644 --- a/packages/interactions/slider-element/package.json +++ b/packages/interactions/slider-element/package.json @@ -1,6 +1,6 @@ { "name": "@webtides/slider-element", - "version": "0.4.15", + "version": "0.4.16", "description": "A slider element that lets you slide child elements", "author": "@webtides", "homepage": "https://github.com/webtides/element-library", diff --git a/packages/interactions/slider-element/src/slider-element.js b/packages/interactions/slider-element/src/slider-element.js index 8edbf6d..f43dbe9 100644 --- a/packages/interactions/slider-element/src/slider-element.js +++ b/packages/interactions/slider-element/src/slider-element.js @@ -12,21 +12,6 @@ export default class SliderElement extends TemplateElement { super({ shadowRender: true, deferUpdate: true, adoptGlobalStyles: false, styles: [style], ...options }); } - properties() { - return { - itemSelector: '.item', - itemsToShow: 1, - itemsToScroll: 1, - rewind: false, - selectedIndex: 0, - autoSelect: false, - dots: true, - arrows: true, - setIndexAfterResize: true, - manualScrollEndDelay: 200, - }; - } - get canSlide() { if (!this.$refs.scroller) { return false; @@ -42,6 +27,21 @@ export default class SliderElement extends TemplateElement { return this.selectedIndex < this.itemsCount; } + properties() { + return { + itemSelector: '.item', + itemsToShow: 1, + itemsToScroll: 1, + rewind: false, + selectedIndex: 0, + autoSelect: false, + dots: true, + arrows: true, + setIndexAfterResize: true, + manualScrollEndDelay: 200, + }; + } + connected() { this.indexItems(); this.requestUpdate().then(() => { @@ -96,13 +96,15 @@ export default class SliderElement extends TemplateElement { if (this.autoSelect && this.canSlide) { //check if element is already visible const target = this.items[this.selectedIndex]; - const parent = this.$refs.scroller; - const { marginLeft, marginRight } = getComputedStyle(target); - const targetWidth = target.offsetWidth + parseInt(marginLeft) + parseInt(marginRight); - if (target.offsetLeft + targetWidth < parent.scrollLeft + parent.offsetWidth) { - // means is in bounds - this.next(); - return; + if (target) { + const parent = this.$refs.scroller; + const { marginLeft, marginRight } = getComputedStyle(target); + const targetWidth = target.offsetWidth + parseInt(marginLeft) + parseInt(marginRight); + if (target.offsetLeft + targetWidth < parent.scrollLeft + parent.offsetWidth) { + // means is in bounds + this.next(); + return; + } } } this.scrollToIndex(); @@ -115,15 +117,16 @@ export default class SliderElement extends TemplateElement { if (this.autoSelect && this.canSlide) { //check if element is already visible const target = this.items[this.selectedIndex]; - const { marginLeft } = getComputedStyle(target); - const parent = this.$refs.scroller; - if (target.offsetLeft - parseInt(marginLeft) > parent.scrollLeft) { - // means is still in viewport - this.previous(); - return; + if (target) { + const { marginLeft } = getComputedStyle(target); + const parent = this.$refs.scroller; + if (target.offsetLeft - parseInt(marginLeft) > parent.scrollLeft) { + // means is still in viewport + this.previous(); + return; + } } } - this.scrollToIndex(); } @@ -150,6 +153,8 @@ export default class SliderElement extends TemplateElement { this.startScrollEndTimer(); } const target = this.items[this.selectedIndex]; + if (!target) return; + const parent = this.$refs.scroller; const parentWidth = parent.offsetWidth; diff --git a/packages/interactions/slider-element/stories/slider-element.stories.js b/packages/interactions/slider-element/stories/slider-element.stories.js index bd674db..8d14654 100644 --- a/packages/interactions/slider-element/stories/slider-element.stories.js +++ b/packages/interactions/slider-element/stories/slider-element.stories.js @@ -145,6 +145,10 @@ export const variableWidthEdgeFocusVariant = () => html` `; +export const noItemsVariant = () => html` + +`; + class RenderingElement extends TemplateElement { constructor() { super({ shadowRender: false, deferUpdate: true }); From dc035ece9cd1225749539f90d6ea5745c51fff84 Mon Sep 17 00:00:00 2001 From: Markus Hesper Date: Tue, 25 Nov 2025 11:07:12 +0100 Subject: [PATCH 2/2] chore(no-ticket): update action cache versions --- .github/workflows/npm-run-test.yml | 4 ++-- .github/workflows/publish-npm.yaml | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/npm-run-test.yml b/.github/workflows/npm-run-test.yml index 43d8fbb..6aca42a 100644 --- a/.github/workflows/npm-run-test.yml +++ b/.github/workflows/npm-run-test.yml @@ -14,11 +14,11 @@ jobs: with: node-version: 12 registry-url: https://npm.pkg.github.com/ - scope: "@webtides" + scope: '@webtides' - name: Get yarn cache directory path id: yarn-cache-dir-path run: echo "::set-output name=dir::$(yarn cache dir)" - - uses: actions/cache@v1 + - uses: actions/cache@v3 id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) with: path: ${{ steps.yarn-cache-dir-path.outputs.dir }} diff --git a/.github/workflows/publish-npm.yaml b/.github/workflows/publish-npm.yaml index 1676e86..bcc1bc5 100644 --- a/.github/workflows/publish-npm.yaml +++ b/.github/workflows/publish-npm.yaml @@ -17,11 +17,11 @@ jobs: with: node-version: 12 registry-url: https://npm.pkg.github.com/ - scope: "@webtides" + scope: '@webtides' - name: Get yarn cache directory path id: yarn-cache-dir-path run: echo "::set-output name=dir::$(yarn cache dir)" - - uses: actions/cache@v1 + - uses: actions/cache@v3 id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) with: path: ${{ steps.yarn-cache-dir-path.outputs.dir }} @@ -42,11 +42,11 @@ jobs: with: node-version: 12 registry-url: https://npm.pkg.github.com/ - scope: "@webtides" + scope: '@webtides' - name: Get yarn cache directory path id: yarn-cache-dir-path run: echo "::set-output name=dir::$(yarn cache dir)" - - uses: actions/cache@v1 + - uses: actions/cache@v3 id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) with: path: ${{ steps.yarn-cache-dir-path.outputs.dir }}