Skip to content
This repository has been archived by the owner on Sep 30, 2024. It is now read-only.

Commit

Permalink
fix(Tabs): change tab-value to value
Browse files Browse the repository at this point in the history
  • Loading branch information
lukicenturi authored and kelsos committed Jul 3, 2024
1 parent c584d11 commit 48bcbdf
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 23 deletions.
14 changes: 8 additions & 6 deletions src/components/tabs/tab/Tab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ export interface TabProps {
color?: ContextColorsType;
disabled?: boolean;
grow?: boolean;
tabValue?: number | string;
value?: number | string;
active?: boolean;
activeClass?: string;
link?: boolean;
target?: string;
to?: string;
Expand All @@ -25,8 +26,9 @@ const props = withDefaults(defineProps<TabProps>(), {
color: undefined,
disabled: false,
grow: false,
tabValue: generateId(),
value: generateId(),
active: false,
activeClass: '',
link: false,
to: '',
target: '_self',
Expand All @@ -37,10 +39,10 @@ const props = withDefaults(defineProps<TabProps>(), {
});
const emit = defineEmits<{
(e: 'click', tabValue: string | number): void;
(e: 'click', value: string | number): void;
}>();
const { target, grow, active, disabled, vertical, align, tabValue }
const { target, grow, active, activeClass, disabled, vertical, align, value }
= toRefs(props);
const css = useCssModule();
Expand All @@ -52,7 +54,7 @@ const tabClass = computed(() => [
css[`tab--${get(align)}`],
{
[css['tab--grow']]: get(grow),
[`${css['tab--active']} active-tab`]: get(active),
[`${css['tab--active']} active-tab ${get(activeClass)}`]: get(active),
[css['tab--disabled']]: get(disabled),
[css['tab--vertical']]: get(vertical),
},
Expand All @@ -62,7 +64,7 @@ const slots = useSlots();
const attrs = useAttrs();
function click() {
emit('click', get(tabValue));
emit('click', get(value));
}
</script>

Expand Down
33 changes: 22 additions & 11 deletions src/components/tabs/tabs/Tabs.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@ import Tabs from '@/components/tabs/tabs/Tabs.vue';
import Tab from '@/components/tabs/tab/Tab.vue';
import { RouterLinkStub } from '~/tests/stubs/RouterLinkStub';

function createWrapper(options?: any) {
function createWrapper(options: any = {}, customTabValue: boolean = false) {
return mount(Tabs, {
...options,
slots: {
default: [
`<Tab>Tab 1</Tab>`,
`<Tab>Tab 2</Tab>`,
`<Tab>Tab 3</Tab>`,
`<Tab>Tab 4</Tab>`,
],
default: [...new Array(4).keys()].map(item =>
customTabValue
? `<Tab value="tab-${item}">Tab ${item}</Tab>`
: `<Tab>Tab ${item}</Tab>`),
},
stubs: {
RouterLink: RouterLinkStub,
Expand All @@ -40,7 +38,7 @@ describe('tabs/Tabs', () => {
});

it('pass vertical props', async () => {
const wrapper = createWrapper({});
const wrapper = createWrapper();

expect(wrapper.classes()).not.toEqual(
expect.arrayContaining([expect.stringMatching(/_tabs--vertical_/)]),
Expand All @@ -60,7 +58,7 @@ describe('tabs/Tabs', () => {
});

it('pass grow props', async () => {
const wrapper = createWrapper({});
const wrapper = createWrapper();

expect(wrapper.find('div[class*=tabs-bar]').classes()).not.toEqual(
expect.arrayContaining([expect.stringMatching(/_tabs-bar--grow/)]),
Expand All @@ -79,7 +77,7 @@ describe('tabs/Tabs', () => {
});

it('pass disabled props', async () => {
const wrapper = createWrapper({});
const wrapper = createWrapper();

expect(wrapper.find('button').attributes('disabled')).toBeUndefined();

Expand All @@ -91,7 +89,7 @@ describe('tabs/Tabs', () => {
});

it('pass align props', async () => {
const wrapper = createWrapper({});
const wrapper = createWrapper();

expect(wrapper.find('button').classes()).toEqual(
expect.arrayContaining([expect.stringMatching(/_tab--center_/)]),
Expand Down Expand Up @@ -141,4 +139,17 @@ describe('tabs/Tabs', () => {
await nextTick();
expect(get(value)).toBe(3);
});

it ('works with custom tab value', async () => {
const wrapper = createWrapper({}, true);

await nextTick();

const buttons = wrapper.findAll('div[class*=_tabs-wrapper] > button');

expect(buttons).toHaveLength(4);
expect(buttons.at(0).classes()).toEqual(
expect.arrayContaining([expect.stringMatching(/active-tab/)]),
);
});
});
14 changes: 8 additions & 6 deletions src/components/tabs/tabs/Tabs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const children = computed(() => {
|| tab.componentOptions?.propsData
|| {}) as TabProps;
let tabValue: string | number = propsData?.tabValue ?? index;
let tabValue: string | number = propsData?.value ?? index;
if (propsData.link !== false && propsData.to)
tabValue = propsData.to;
Expand All @@ -71,7 +71,7 @@ const children = computed(() => {
const newProps = {
...inheritedProps,
...propsData,
tabValue,
value: tabValue,
active,
};
Expand Down Expand Up @@ -160,8 +160,8 @@ function applyNewValue(onlyLink = false) {
let newValue: string | number = get(value) || 0;
enabledChildren.forEach((child, index) => {
const props = child.node.componentOptions?.propsData as TabProps;
if (!onlyLink && index === 0 && props.tabValue)
newValue = props.tabValue;
if (!onlyLink && index === 0 && props.value)
newValue = props.value;
if (props.link !== false && props.to && isPathMatch(props.to, props))
newValue = props.to;
Expand Down Expand Up @@ -192,7 +192,8 @@ const { top, bottom, left, right } = toRefs(arrivedState);
const { trigger: triggerHorizontal, stop: stopHorizontal } = watchTriggerable(
[wrapperWidth, width],
([ww, w]) => {
set(showArrows, ww > w);
if (w > 0)
set(showArrows, ww > w);
},
{
eventFilter: throttleFilter(50),
Expand All @@ -202,7 +203,8 @@ const { trigger: triggerHorizontal, stop: stopHorizontal } = watchTriggerable(
const { trigger: triggerVertical, stop: stopVertical } = watchTriggerable(
[wrapperHeight, height],
([wh, h]) => {
set(showArrows, wh > h);
if (h > 0)
set(showArrows, wh > h);
},
{
eventFilter: throttleFilter(500),
Expand Down

0 comments on commit 48bcbdf

Please sign in to comment.