admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix all type errors in design system (#3956)

Browse Source 
* 📘 Fix type errors in design system

* 🔥 Remove unneeded `?`

* 🔧 Add design system to Vetur

* 📘 Improve typing of `$el`

* ♻️ Address feedback

* 📘 Type leftover `MouseEvent`

* 📘 Type `event.target` properly
This commit is contained in:
Iván Ovejero
2022-08-29 12:21:40 +02:00
committed by GitHub
parent 1e6b1b8227
commit 3ae6450f0b
29 changed files with 153 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/design-system/src/components/N8nTabs/Tabs.vue
View File

@@ -51,12 +51,13 @@ export default Vue.extend({
N8nIcon,
},
mounted() {
const container = this.$refs.tabs;
const container = this.$refs.tabs as HTMLDivElement | undefined;
if (container) {
container.addEventListener('scroll', (e) => {
container.addEventListener('scroll', (event: Event) => {
const width = container.clientWidth;
const scrollWidth = container.scrollWidth;
this.scrollPosition = e.srcElement.scrollLeft;
// @ts-ignore
this.scrollPosition = event.srcElement.scrollLeft;
this.canScrollRight = scrollWidth - width > this.scrollPosition;
});
@@ -73,13 +74,15 @@ export default Vue.extend({
}
},
destroyed() {
this.resizeObserver.disconnect();
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
},
data() {
return {
scrollPosition: 0,
canScrollRight: false,
resizeObserver: null,
resizeObserver: null as ResizeObserver | null,
};
},
props: {
@@ -102,13 +105,16 @@ export default Vue.extend({
this.scroll(50);
},
scroll(left: number) {
const container = this.$refs.tabs;
const container = this.$refs.tabs as (HTMLDivElement & { scrollBy: ScrollByFunction }) | undefined;
if (container) {
container.scrollBy({ left, top: 0, behavior: 'smooth' });
}
},
},
});
type ScrollByFunction = (arg: { left: number, top: number, behavior: 'smooth' | 'instant' | 'auto' }) => void;
</script>