From 2b6965211dd9193026b85576d292f9f5138f99e6 Mon Sep 17 00:00:00 2001 From: Silver343 <51054165+Silver343@users.noreply.github.com> Date: Sat, 8 Jun 2024 15:03:51 +0100 Subject: [PATCH] feat(Tabs): handle `size` prop (#124) Co-authored-by: Benjamin Canac --- playground/pages/tabs.vue | 21 ++- src/runtime/components/Tabs.vue | 4 +- src/theme/tabs.ts | 35 ++++- test/components/Tabs.spec.ts | 2 + .../__snapshots__/Tabs.spec.ts.snap | 135 ++++++++++++------ 5 files changed, 151 insertions(+), 46 deletions(-) diff --git a/playground/pages/tabs.vue b/playground/pages/tabs.vue index d0f3708d..f0542a30 100644 --- a/playground/pages/tabs.vue +++ b/playground/pages/tabs.vue @@ -4,10 +4,12 @@ import theme from '#build/ui/tabs' const colors = Object.keys(theme.variants.color) const variants = Object.keys(theme.variants.variant) const orientations = Object.keys(theme.variants.orientation) +const sizes = Object.keys(theme.variants.size) const color = ref(theme.defaultVariants.color) const variant = ref(theme.defaultVariants.variant) const orientation = ref('horizontal' as const) +const size = ref('md' as const) const items = [{ label: 'Tab1', @@ -33,12 +35,27 @@ const items = [{ +
- + - + diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue index 02e3f3b0..2954ba2b 100644 --- a/src/runtime/components/Tabs.vue +++ b/src/runtime/components/Tabs.vue @@ -25,6 +25,7 @@ export interface TabsProps extends Omit { items?: T[] color?: TabsVariants['color'] variant?: TabsVariants['variant'] + size?: TabsVariants['size'] content?: boolean | Omit class?: any ui?: Partial @@ -62,6 +63,7 @@ const contentProps = toRef(() => defu(props.content || {}, { forceMount: true }) const ui = computed(() => tv({ extend: tabs, slots: props.ui })({ color: props.color, variant: props.variant, + size: props.size, orientation: props.orientation })) @@ -73,7 +75,7 @@ const ui = computed(() => tv({ extend: tabs, slots: props.ui })({ - + diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts index 312cb11e..4b626196 100644 --- a/src/theme/tabs.ts +++ b/src/theme/tabs.ts @@ -5,10 +5,11 @@ export default (options: Required) => ({ root: 'flex items-center gap-2', list: 'relative flex p-1 group', indicator: 'absolute transition-[translate,width] duration-200', - trigger: ['relative inline-flex items-center justify-center gap-1.5 shrink-0 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', options.transitions && 'transition-colors'], + trigger: ['relative inline-flex items-center justify-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', options.transitions && 'transition-colors'], content: 'focus:outline-none w-full', - leadingIcon: 'shrink-0 size-5', + leadingIcon: 'shrink-0', leadingAvatar: 'shrink-0', + leadingAvatarSize: '', label: 'truncate' }, variants: { @@ -38,6 +39,33 @@ export default (options: Required) => ({ list: 'flex-col items-center', indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]' } + }, + size: { + xs: { + trigger: 'px-2 py-1 text-xs gap-1', + leadingIcon: 'size-4', + leadingAvatarSize: '3xs' + }, + sm: { + trigger: 'px-2.5 py-1.5 text-xs gap-1.5', + leadingIcon: 'size-4', + leadingAvatarSize: '3xs' + }, + md: { + trigger: 'px-3 py-1.5 text-sm gap-1.5', + leadingIcon: 'size-5', + leadingAvatarSize: '2xs' + }, + lg: { + trigger: 'px-3 py-2 text-sm gap-2', + leadingIcon: 'size-5', + leadingAvatarSize: '2xs' + }, + xl: { + trigger: 'px-3 py-2 text-base gap-2', + leadingIcon: 'size-6', + leadingAvatarSize: 'xs' + } } }, compoundVariants: [{ @@ -104,6 +132,7 @@ export default (options: Required) => ({ }], defaultVariants: { color: 'white', - variant: 'pill' + variant: 'pill', + size: 'md' } }) diff --git a/test/components/Tabs.spec.ts b/test/components/Tabs.spec.ts index 82e53899..21355398 100644 --- a/test/components/Tabs.spec.ts +++ b/test/components/Tabs.spec.ts @@ -6,6 +6,7 @@ import theme from '#build/ui/tabs' describe('Tabs', () => { const colors = Object.keys(theme.variants.color) as any const variants = Object.keys(theme.variants.variant) as any + const sizes = Object.keys(theme.variants.size) as any const items = [{ label: 'Tab1', @@ -34,6 +35,7 @@ describe('Tabs', () => { ['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }], ...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]), ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]), + ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]), ['without content', { props: { ...props, content: false } }], ['with class', { props: { ...props, class: 'w-96' } }], ['with ui', { props: { ...props, ui: { content: 'w-full ring ring-gray-200 dark:ring-gray-800' } } }], diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap index c71b4ef7..026d44c4 100644 --- a/test/components/__snapshots__/Tabs.spec.ts.snap +++ b/test/components/__snapshots__/Tabs.spec.ts.snap @@ -3,18 +3,18 @@ exports[`Tabs > renders with class correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with color black correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -25,7 +25,7 @@ exports[`Tabs > renders with color black correctly 1`] = ` exports[`Tabs > renders with color green correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -36,7 +36,7 @@ exports[`Tabs > renders with color green correctly 1`] = ` exports[`Tabs > renders with color primary correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -47,7 +47,7 @@ exports[`Tabs > renders with color primary correctly 1`] = ` exports[`Tabs > renders with color red correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -58,7 +58,7 @@ exports[`Tabs > renders with color red correctly 1`] = ` exports[`Tabs > renders with color white correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -69,40 +69,40 @@ exports[`Tabs > renders with color white correctly 1`] = ` exports[`Tabs > renders with content slot correctly 1`] = ` "
-
+
-
Content slot
- - +
Content slot
+ +
" `; exports[`Tabs > renders with custom slot correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with default slot correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with defaultValue correctly 1`] = ` "
-
+
And, this is the content for Tab2
@@ -113,7 +113,7 @@ exports[`Tabs > renders with defaultValue correctly 1`] = ` exports[`Tabs > renders with items correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -124,18 +124,18 @@ exports[`Tabs > renders with items correctly 1`] = ` exports[`Tabs > renders with leading slot correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with modelValue correctly 1`] = ` "
-
+
And, this is the content for Tab2
@@ -146,7 +146,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = ` exports[`Tabs > renders with orientation vertical correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -154,32 +154,87 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
" `; +exports[`Tabs > renders with size lg correctly 1`] = ` +"
+
+
+
+
This is the content shown for Tab1
+ + +
" +`; + +exports[`Tabs > renders with size md correctly 1`] = ` +"
+
+
+
+
This is the content shown for Tab1
+ + +
" +`; + +exports[`Tabs > renders with size sm correctly 1`] = ` +"
+
+
+
+
This is the content shown for Tab1
+ + +
" +`; + +exports[`Tabs > renders with size xl correctly 1`] = ` +"
+
+
+
+
This is the content shown for Tab1
+ + +
" +`; + +exports[`Tabs > renders with size xs correctly 1`] = ` +"
+
+
+
+
This is the content shown for Tab1
+ + +
" +`; + exports[`Tabs > renders with trailing slot correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with ui correctly 1`] = ` "
-
+
-
This is the content shown for Tab1
- - +
This is the content shown for Tab1
+ +
" `; exports[`Tabs > renders with variant link correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -190,7 +245,7 @@ exports[`Tabs > renders with variant link correctly 1`] = ` exports[`Tabs > renders with variant pill correctly 1`] = ` "
-
+
This is the content shown for Tab1
@@ -201,7 +256,7 @@ exports[`Tabs > renders with variant pill correctly 1`] = ` exports[`Tabs > renders without content correctly 1`] = ` "
-
+
"