Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add whitespace-nowrap for Button, Select, Tab (#266)

Browse Source 
* fix(Button): add 'whitespace-nowrap' to base styles

* refactor(Button): use VariantProps for Button Props instead of NonNullable

* fix(Select): add whitespace-nowrap and truncate to SelectTrigger
This commit is contained in:
Roman Hrynevych 2024-01-12 22:34:05 +02:00 committed by GitHub
parent d3806fc056
commit 825f14e8b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/www/src/lib/registry/default/ui/button/Button.vue
View File

@ -1,15 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VariantProps } from 'class-variance-authority'
import { Primitive, type PrimitiveProps } from 'radix-vue' import { Primitive, type PrimitiveProps } from 'radix-vue'
import { buttonVariants } from '.' import { buttonVariants } from '.'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
interface Props extends PrimitiveProps { interface Props extends PrimitiveProps {
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant'] variant?: ButtonVariantProps['variant']
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size'] size?: ButtonVariantProps['size']
as?: string as?: string
} }
withDefaults(defineProps<Props>(), { withDefaults(defineProps<Props>(), {
variant: 'default',
size: 'default',
as: 'button', as: 'button',
}) })
</script> </script>

2
apps/www/src/lib/registry/default/ui/button/index.ts
View File

@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority'
export { default as Button } from './Button.vue' export { default as Button } from './Button.vue'
export const buttonVariants = cva( export const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', 'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{ {
variants: { variants: {
variant: { variant: {

2
apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
View File

@ -17,7 +17,7 @@ const props = withDefaults(
v-bind="props" v-bind="props"
:class="[ :class="[
cn( cn(
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',
props.class, props.class,
), ),
props.invalid props.invalid

9
apps/www/src/lib/registry/new-york/ui/button/Button.vue
View File

@ -1,15 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VariantProps } from 'class-variance-authority'
import { Primitive, type PrimitiveProps } from 'radix-vue' import { Primitive, type PrimitiveProps } from 'radix-vue'
import { buttonVariants } from '.' import { buttonVariants } from '.'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
interface Props extends PrimitiveProps { interface Props extends PrimitiveProps {
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant'] variant?: ButtonVariantProps['variant']
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size'] size?: ButtonVariantProps['size']
as?: string as?: string
} }
withDefaults(defineProps<Props>(), { withDefaults(defineProps<Props>(), {
variant: 'default',
size: 'default',
as: 'button', as: 'button',
}) })
</script> </script>

2
apps/www/src/lib/registry/new-york/ui/button/index.ts
View File

@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority'
export { default as Button } from './Button.vue' export { default as Button } from './Button.vue'
export const buttonVariants = cva( export const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', 'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
{ {
variants: { variants: {
variant: { variant: {

2
apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
View File

@ -17,7 +17,7 @@ const props = withDefaults(
v-bind="props" v-bind="props"
:class="[ :class="[
cn( cn(
'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50', 'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',
props.class, props.class,
), ),
props.invalid props.invalid