From dd67c4f013587d92bdb06bee2714c2e18129f0e8 Mon Sep 17 00:00:00 2001 From: Chase Ingebritson Date: Mon, 23 Nov 2020 13:55:37 -0600 Subject: [PATCH 1/2] fix(pivot): pivot-item active respects prop value --- src/components/pivot/Pivot.vue | 2 +- stories/components/pivot.stories.js | 23 ++++++++++++++++++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/pivot/Pivot.vue b/src/components/pivot/Pivot.vue index 2fd4a51..9964089 100644 --- a/src/components/pivot/Pivot.vue +++ b/src/components/pivot/Pivot.vue @@ -75,7 +75,7 @@ export default { .filter(pivotItem => pivotItem.tag === 'vnt-pivot-item') .forEach((pivotItem, index) => { const attrs = pivotItem.data.attrs; - const isActive = Object.keys(attrs).indexOf('active') > -1; + const isActive = attrs && !!attrs.active const header = createElement('li', { staticClass: 'vnt-pivot__header', diff --git a/stories/components/pivot.stories.js b/stories/components/pivot.stories.js index 8915c8a..e62d591 100644 --- a/stories/components/pivot.stories.js +++ b/stories/components/pivot.stories.js @@ -1,5 +1,15 @@ import { storiesOf } from '@storybook/vue'; +const items = [ + { label: 'Pivot 1', active: true, text: 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim.' }, + { label: 'Pivot 2', active: false, text: 'Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus.' }, + { label: 'Pivot 3', active: false, text: 'Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae' } +]; + +const createData = () => ({ + items +}); + /* eslint no-undef: 0, no-unused-vars: 0 */ storiesOf('Pivot', module) @@ -26,4 +36,15 @@ storiesOf('Pivot', module) Determines which tab should be set as active. Must be added to \`vnt-pivot-item\` element that should be active at start. ` - }); + }) + .add('active', () => ({ + data: () => createData(), + template: ` + + + +

{{ item.text }}

+
+
+
` + })); From 8c4c45a6b21e14cd42810e765116e421a722645b Mon Sep 17 00:00:00 2001 From: Chase Ingebritson Date: Mon, 23 Nov 2020 14:24:20 -0600 Subject: [PATCH 2/2] fix(pivot): fixed failing tests --- src/components/pivot/Pivot.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pivot/Pivot.vue b/src/components/pivot/Pivot.vue index 9964089..76322f3 100644 --- a/src/components/pivot/Pivot.vue +++ b/src/components/pivot/Pivot.vue @@ -75,7 +75,7 @@ export default { .filter(pivotItem => pivotItem.tag === 'vnt-pivot-item') .forEach((pivotItem, index) => { const attrs = pivotItem.data.attrs; - const isActive = attrs && !!attrs.active + const isActive = attrs && (!!attrs.active || attrs.active === ''); const header = createElement('li', { staticClass: 'vnt-pivot__header',