Skip to content

Commit

Permalink
feat: create tab-slider plugin component (#32)
Browse files Browse the repository at this point in the history 
Co-authored-by: Driss Chelouati <driss.chelouati@gmail.com>
Co-authored-by: Sacha Stafyniak <sacha@digisquad.io>
  • Loading branch information
@bpsmartdesign @driss-chelouati @stafyniaksacha
3 people authored Jul 23, 2023
1 parent 8033b9b commit 4cb4540
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 0 deletions.
27 changes: 27 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2441,6 +2441,20 @@ export default withShurikenUI({
bgHover: 'black/20',
bgHoverDark: 'white/20',
},
tabSlider: {
track: {
bg: 'muted-100',
bgDark: 'muted-700',
size: 'full',
font: 'sans',
},
item: {
notActiveText: 'muted-400',
activeText: 'white',
},
naver: {
bg: 'primary-500',
duration: '300',
toast: {
font: 'sans',
title: {
Expand Down Expand Up @@ -2534,6 +2548,19 @@ export default withShurikenUI({
default: 'md',
smooth: 'lg',
curved: 'xl',
full: 'full',
},
tabsSM: {
twoSlotsW: '[140px]',
threeSlotsW: '[210px]',
track: '8',
},
tabsMD: {
twoSlotsW: '[250px]',
threeSlotsW: '[320px]',
track: '10',
},
},
},
borderless: {
shadow: 'muted-300/30',
Expand Down
2 changes: 2 additions & 0 deletions src/plugins/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import select from './select'
import radio from './radio'
import progressCircle from './progress-circle'
import slimscroll from './slimscroll'
import tabSlider from './tab-slider'
import toast from './toast'
import tabs from './tabs'
import text from './text'
Expand Down Expand Up @@ -84,6 +85,7 @@ const components = [
radio,
progressCircle,
slimscroll,
tabSlider,
toast,
tabs,
tag,
Expand Down
171 changes: 171 additions & 0 deletions src/plugins/components/tab-slider.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
import plugin from 'tailwindcss/plugin'
import { defu } from 'defu'
import { type PluginOption, defaultPluginOptions } from '../options'

const defaultTabSliderConfig = {
track: {
bg: 'muted-100',
bgDark: 'muted-700',
size: 'full',
font: 'sans',
},
item: {
notActiveText: 'muted-400',
activeText: 'white',
},
naver: {
bg: 'primary-500',
duration: '300',
},
rounded: {
default: 'md',
smooth: 'lg',
curved: 'xl',
full: 'full',
},
tabsSM: {
twoSlotsW: '[140px]',
threeSlotsW: '[210px]',
track: '8',
},
tabsMD: {
twoSlotsW: '[250px]',
threeSlotsW: '[320px]',
track: '10',
},
}

export default plugin.withOptions(
function (options: PluginOption) {
const { prefix } = defu(options, defaultPluginOptions)

return function ({ addComponents, theme }) {
const config = theme(
'shurikenUi.tabSlider'
) satisfies typeof defaultTabSliderConfig

addComponents({
[`.${prefix}-tab-slider`]: {
[`@apply relative`]: {},

[`.${prefix}-tab-slider-inner`]: {
[`@apply mb-6 flex`]: {},
},
[`.${prefix}-tab-slider-track`]: {
[`@apply relative bg-${config.track.bg} dark:bg-${config.track.bgDark} relative flex w-${config.track.size} items-center font-${config.track.font}`]:
{},
},
[`.${prefix}-tab-slider-item`]: {
[`@apply relative z-20 flex h-full flex-1 items-center justify-center`]:
{},

[`&:not(.${prefix}-active)`]: {
[`@apply text-${config.item.notActiveText}`]: {},
},
[`&.${prefix}-active`]: {
[`@apply text-${config.item.activeText}`]: {},
},
},
[`.${prefix}-tab-slider-naver`]: {
[`@apply bg-${config.naver.bg} absolute start-0 top-0 z-10 h-full transition-all duration-${config.naver.duration}`]:
{},
},
[`.${prefix}-tab-content`]: {
[`@apply relative block`]: {},
},
[`&.${prefix}-tabs-centered`]: {
[`.${prefix}-tab-slider-inner`]: {
[`@apply justify-center`]: {},
},
},
[`&.${prefix}-tabs-end`]: {
[`.${prefix}-tab-slider-inner`]: {
[`@apply justify-end`]: {},
},
},
[`&.${prefix}-tabs-rounded`]: {
[`.${prefix}-tab-slider-track, .${prefix}-tab-slider-naver`]: {
[`@apply rounded-${config.rounded.default}`]: {},
},
},
[`&.${prefix}-tabs-smooth`]: {
[`.${prefix}-tab-slider-track, .${prefix}-tab-slider-naver`]: {
[`@apply rounded-${config.rounded.smooth}`]: {},
},
},
[`&.${prefix}-tabs-curved`]: {
[`.${prefix}-tab-slider-track, .${prefix}-tab-slider-naver`]: {
[`@apply rounded-${config.rounded.curved}`]: {},
},
},
[`&.${prefix}-tabs-full`]: {
[`.${prefix}-tab-slider-track, .${prefix}-tab-slider-naver`]: {
[`@apply rounded-${config.rounded.full}`]: {},
},
},
[`&.${prefix}-tabs-sm`]: {
[`&.${prefix}-tabs-two-slots .${prefix}-tab-slider-inner`]: {
[`@apply max-w-${config.tabsSM.twoSlotsW}`]: {},
},
[`&.${prefix}-tabs-three-slots .${prefix}-tab-slider-inner`]: {
[`@apply max-w-${config.tabsSM.threeSlotsW}`]: {},
},
[`.${prefix}-tab-slider-track`]: {
[`@apply h-${config.tabsSM.track}`]: {},
},
},
[`&.${prefix}-tabs-md`]: {
[`&.${prefix}-tabs-two-slots .${prefix}-tab-slider-inner`]: {
[`@apply max-w-${config.tabsMD.twoSlotsW}`]: {},
},
[`&.${prefix}-tabs-three-slots .${prefix}-tab-slider-inner`]: {
[`@apply max-w-${config.tabsMD.threeSlotsW}`]: {},
},
[`.${prefix}-tab-slider-track`]: {
[`@apply h-${config.tabsMD.track}`]: {},
},
},
[`&.${prefix}-tabs-two-slots`]: {
[`.${prefix}-tab-slider-naver, .${prefix}-tab-slider-item`]: {
[`@apply w-1/2`]: {},
},
[`.${prefix}-tab-slider-item:first-child.${prefix}-active ~ .${prefix}-tab-slider-naver`]:
{
[`@apply ms-0`]: {},
},
[`.${prefix}-tab-slider-item:nth-child(2).${prefix}-active ~ .${prefix}-tab-slider-naver`]:
{
[`@apply ms-[50%]`]: {},
},
},
[`&.${prefix}-tabs-three-slots`]: {
[`.${prefix}-tab-slider-naver, .${prefix}-tab-slider-item`]: {
[`@apply w-1/3`]: {},
},
[`.${prefix}-tab-slider-item:first-child.${prefix}-active ~ .${prefix}-tab-slider-naver`]:
{
[`@apply ms-0`]: {},
},
[`.${prefix}-tab-slider-item:nth-child(2).${prefix}-active ~ .${prefix}-tab-slider-naver`]:
{
[`@apply ms-[33.3%]`]: {},
},
[`.${prefix}-tab-slider-item:nth-child(3).${prefix}-active ~ .${prefix}-tab-slider-naver`]:
{
[`@apply ms-[66.6%]`]: {},
},
},
},
})
}
},
function () {
return {
theme: {
shurikenUi: {
tabSlider: defaultTabSliderConfig,
},
},
}
}
)

0 comments on commit 4cb4540

Please sign in to comment.