@farm-investimentos/front-mfe-components 15.14.12 → 15.14.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/front-mfe-components.common.js +105 -103
- package/dist/front-mfe-components.common.js.map +1 -1
- package/dist/front-mfe-components.css +1 -1
- package/dist/front-mfe-components.umd.js +105 -103
- package/dist/front-mfe-components.umd.js.map +1 -1
- package/dist/front-mfe-components.umd.min.js +1 -1
- package/dist/front-mfe-components.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Tabs/Tabs.vue +12 -10
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="farm-tabs-wrapper">
|
|
3
|
-
<button
|
|
4
|
-
class="farm-tabs-nav farm-tabs-nav--left"
|
|
3
|
+
<button
|
|
4
|
+
class="farm-tabs-nav farm-tabs-nav--left"
|
|
5
5
|
@click="scrollLeft"
|
|
6
6
|
@mouseenter="hoverLeft = true"
|
|
7
7
|
@mouseleave="hoverLeft = false"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
>
|
|
10
10
|
<farm-icon color="primary" size="24px">chevron-left</farm-icon>
|
|
11
11
|
</button>
|
|
12
|
-
|
|
12
|
+
|
|
13
13
|
<div class="farm-tabs" ref="tabsContainer">
|
|
14
14
|
<div class="tabs" :class="{ 'tabs--disabled': !allowUserChange }">
|
|
15
15
|
<div
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
</div>
|
|
52
52
|
</div>
|
|
53
53
|
</div>
|
|
54
|
-
|
|
55
|
-
<button
|
|
56
|
-
class="farm-tabs-nav farm-tabs-nav--right"
|
|
54
|
+
|
|
55
|
+
<button
|
|
56
|
+
class="farm-tabs-nav farm-tabs-nav--right"
|
|
57
57
|
@click="scrollRight"
|
|
58
58
|
@mouseenter="hoverRight = true"
|
|
59
59
|
@mouseleave="hoverRight = false"
|
|
@@ -142,7 +142,7 @@ export default defineComponent({
|
|
|
142
142
|
const container = this.$refs.tabsContainer as HTMLElement;
|
|
143
143
|
if (container) {
|
|
144
144
|
const { scrollLeft, scrollWidth, clientWidth } = container;
|
|
145
|
-
|
|
145
|
+
|
|
146
146
|
this.canScrollLeft = scrollLeft > 0;
|
|
147
147
|
this.canScrollRight = scrollLeft < scrollWidth - clientWidth - 1;
|
|
148
148
|
}
|
|
@@ -173,9 +173,11 @@ export default defineComponent({
|
|
|
173
173
|
this.selected = this.initialSelect;
|
|
174
174
|
},
|
|
175
175
|
mounted() {
|
|
176
|
-
this
|
|
176
|
+
this.$nextTick(() => {
|
|
177
|
+
this.updateScrollButtons();
|
|
178
|
+
});
|
|
177
179
|
window.addEventListener('resize', this.updateScrollButtons);
|
|
178
|
-
|
|
180
|
+
|
|
179
181
|
const container = this.$refs.tabsContainer as HTMLElement;
|
|
180
182
|
if (container) {
|
|
181
183
|
container.addEventListener('scroll', this.updateScrollButtons);
|
|
@@ -183,7 +185,7 @@ export default defineComponent({
|
|
|
183
185
|
},
|
|
184
186
|
beforeUnmount() {
|
|
185
187
|
window.removeEventListener('resize', this.updateScrollButtons);
|
|
186
|
-
|
|
188
|
+
|
|
187
189
|
const container = this.$refs.tabsContainer as HTMLElement;
|
|
188
190
|
if (container) {
|
|
189
191
|
container.removeEventListener('scroll', this.updateScrollButtons);
|