Skip to content

Commit

Permalink
feat(Tabs): add new tabs variants: underline (default), filled, `…
Browse files Browse the repository at this point in the history 
…underline-filled`, `segmented-control`
  • Loading branch information
@gravitano
gravitano committed May 29, 2023
1 parent 3da1bef commit e00b1e4
Show file tree
Hide file tree
Showing 5 changed files with 188 additions and 12 deletions.
45 changes: 43 additions & 2 deletions packages/tabs/src/VTabs.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {tabVariants} from './variants';
import VTabs from './VTabs.vue';
import VTab from './VTab.vue';
import VBtn from '@morpheme/button';
Expand All @@ -17,14 +18,40 @@ export default {
components: {VTabsSlider},
title: 'Components/Tabs',
component: VTabs,
argTypes: {},
argTypes: {
color: {
control: {
type: 'select',
options: [
'default',
'primary',
'secondary',
'info',
'warning',
'success',
'error',
],
},
},
variant: {
control: {
type: 'select',
options: [
'underline',
'filled',
'underline-filled',
'segmented-control',
],
},
},
},
args: {
modelValue: 0,
items: createItems(),
},
};

const Template: Story<{}> = (args) => ({
const Template: Story<typeof VTabs> = (args) => ({
components: {VTabs},
setup() {
const items = ref(args.items || []);
Expand All @@ -35,6 +62,20 @@ const Template: Story<{}> = (args) => ({
<v-tabs v-bind="args" v-model:items="items" />`,
});

export const Variants: Story<{}> = (args) => ({
components: {VTabs},
setup() {
return {args, variants: tabVariants};
},
template: `
<v-tabs
v-for="variant in variants"
:key="variant"
:variant="variant"
v-bind="args"
/>`,
});

export const Default = Template.bind({});
Default.args = {};
Default.parameters = {
Expand Down
7 changes: 7 additions & 0 deletions packages/tabs/src/VTabs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import VBtn from '@morpheme/button';
import Icon from '@morpheme/icon';
import VTab from './VTab.vue';
import VTabsSlider from './VTabsSlider.vue';
import {TabVariants} from './variants';
const props = defineProps({
modelValue: {
Expand All @@ -31,6 +32,7 @@ const props = defineProps({
},
color: {
type: String as PropType<
| 'gray'
| 'primary'
| 'secondary'
| 'info'
Expand Down Expand Up @@ -97,6 +99,10 @@ const props = defineProps({
type: String,
default: 'md',
},
variant: {
type: String as PropType<TabVariants>,
default: 'underline',
},
});
const {
Expand Down Expand Up @@ -263,6 +269,7 @@ provide('activeTab', readonly(selected));
defaultWrapperClass,
wrapperClass,
`v-tabs-${color}`,
`v-tabs--${variant}`,
{
'v-tabs--vertical': vertical,
'v-tabs--center-active': centerActive,
Expand Down
13 changes: 7 additions & 6 deletions packages/tabs/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import './VTabs.dark.scss';
export {default} from './VTabs.vue';
export {default as VTabs} from './VTabs.vue';
export {default as VTab} from './VTab.vue';
export {default as VTabsSlider} from './VTabsSlider.vue';
export * from './types';
import './VTabs.dark.scss';
export {default} from './VTabs.vue';
export {default as VTabs} from './VTabs.vue';
export {default as VTab} from './VTab.vue';
export {default as VTabsSlider} from './VTabsSlider.vue';
export * from './types';
export * from './variants';
8 changes: 8 additions & 0 deletions packages/tabs/src/variants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export const tabVariants = [
'underline',
'filled',
'underline-filled',
'segmented-control',
];

export type TabVariants = typeof tabVariants[number];
127 changes: 123 additions & 4 deletions packages/themes/src/morpheme/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
--v-tabs-item-hover-border-radius: var(--v-tabs-item-border-radius);

/* slider */
--v-tabs-slider-display: block;
--v-tabs-slider-height: 3px;
--v-tabs-slider-width: 3rem;
--v-tabs-slider-max-width: 28rem;
Expand Down Expand Up @@ -67,6 +68,7 @@
left: 0px;
right: 0px;
bottom: 0px;
display: var(--v-tabs-slider-display);
}

&-items {
Expand All @@ -76,7 +78,7 @@
flex-direction: row;
display: flex;
align-items: center;
column-gap: 0.25rem/* 4px */;
column-gap: 0.25rem /* 4px */;
white-space: nowrap;
overflow-x: auto;
height: 100%;
Expand Down Expand Up @@ -112,9 +114,11 @@
display: flex;
align-items: center;
justify-content: space-between;
row-gap: 0.25rem/* 4px */;
row-gap: 0.25rem /* 4px */;
cursor: pointer;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform,
filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
height: 100%;
Expand All @@ -132,6 +136,7 @@
background-color: var(--v-tabs-item-hover-bg-color);
color: var(--v-tabs-item-hover-text-color);
border-radius: var(--v-tabs-item-hover-border-radius);
box-shadow: var(--v-tabs-item-hover-box-shadow);
border: 1px solid var(--v-tabs-item-hover-border-color);
}

Expand All @@ -143,6 +148,7 @@
background-color: var(--v-tabs-item-active-bg-color);
color: var(--v-tabs-item-active-text-color);
border-radius: var(--v-tabs-item-active-border-radius);
box-shadow: var(--v-tabs-item-active-box-shadow);
border: 1px solid var(--v-tabs-item-active-border-color);
}

Expand All @@ -152,12 +158,18 @@
}

&-remove {
margin-left: 0.5rem/* 8px */;
margin-left: 0.5rem /* 8px */;
padding: 0px;
}
}

/* colors */
&-default {
--v-tabs-slider-bg-color: var(--color-gray-500);
--v-tabs-slider-border-color: var(--color-gray-700);
--v-tabs-item-active-text-color: var(--color-gray-700);
}

&-secondary {
--v-tabs-slider-bg-color: var(--color-secondary-500);
--v-tabs-slider-border-color: var(--color-secondary-500);
Expand Down Expand Up @@ -187,4 +199,111 @@
--v-tabs-slider-border-color: var(--color-success-500);
--v-tabs-item-active-text-color: var(--color-success-500);
}

// variants
// &--underline {
// default
// }

&--underline-filled,
&--filled {
--v-tabs-slider-display: none;

&.v-tabs-default {
--v-tabs-item-active-bg-color: var(--color-gray-50);
}
&.v-tabs-primary {
--v-tabs-item-active-bg-color: var(--color-primary-50);
}
&.v-tabs-secondary {
--v-tabs-item-active-bg-color: var(--color-secondary-50);
}
&.v-tabs-info {
--v-tabs-item-active-bg-color: var(--color-info-50);
}
&.v-tabs-warning {
--v-tabs-item-active-bg-color: var(--color-warning-50);
}
&.v-tabs-error {
--v-tabs-item-active-bg-color: var(--color-error-50);
}
&.v-tabs-success {
--v-tabs-item-active-bg-color: var(--color-success-50);
}
}

&--underline-filled {
--v-tabs-slider-display: block;
}

&--segmented-control {
--v-tabs-slider-height: 40px;
--v-tabs-padding-x: 0;
--v-tabs-padding-y: 0;
--v-tabs-bg-color: var(--color-gray-50);

// slider
--v-tabs-slider-display: block;
--v-tabs-slider-height: 45px;
--v-tabs-slider-max-width: 28rem;
--v-tabs-slider-border-color: var(--color-transparent);

// active item
--v-tabs-item-active-bg-color: var(--color-transparent);

// shadow
--v-tabs-item-active-box-shadow: var(--effect-shadow-sm);

// vertical
&.v-tabs--vertical {
--v-tabs-slider-height: auto;

.v-tabs-slider {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}

.v-tabs-items {
padding: var(--size-spacing-2) var(--size-spacing-2);
}

.v-tabs-slider {
top: 0.5rem;
z-index: 0;
}

.v-tabs-item {
z-index: 1;
}

&.v-tabs-default {
--v-tabs-slider-bg-color: var(--color-white);
--v-tabs-item-active-text-color: var(--color-gray-700);
}
&.v-tabs-primary {
--v-tabs-slider-bg-color: var(--color-primary-50);
--v-tabs-item-active-text-color: var(--color-primary-700);
}
&.v-tabs-secondary {
--v-tabs-slider-bg-color: var(--color-secondary-50);
--v-tabs-item-active-text-color: var(--color-secondary-700);
}
&.v-tabs-info {
--v-tabs-slider-bg-color: var(--color-info-50);
--v-tabs-item-active-text-color: var(--color-info-700);
}
&.v-tabs-warning {
--v-tabs-slider-bg-color: var(--color-warning-50);
--v-tabs-item-active-text-color: var(--color-warning-700);
}
&.v-tabs-error {
--v-tabs-slider-bg-color: var(--color-error-50);
--v-tabs-item-active-text-color: var(--color-error-700);
}
&.v-tabs-success {
--v-tabs-slider-bg-color: var(--color-success-50);
--v-tabs-item-active-text-color: var(--color-success-700);
}
}
}

0 comments on commit e00b1e4

Please sign in to comment.