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

chore(playground): bump Button component

Browse Source
This commit is contained in:
MuhammadM1998 2024-05-04 11:35:23 +03:00
parent c27db5b4c4
commit 40e91f5502
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/module/playground/components/ui/button/Button.vue
View File

@ -1,23 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import { buttonVariants } from '.' import type { HTMLAttributes } from 'vue'
import { Primitive, type PrimitiveProps } from 'radix-vue'
import { type ButtonVariants, buttonVariants } from '.'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
interface Props { interface Props extends PrimitiveProps {
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant'] variant?: ButtonVariants['variant']
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size'] size?: ButtonVariants['size']
as?: string class?: HTMLAttributes['class']
} }
withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
as: 'button', as: 'button',
}) })
</script> </script>
<template> <template>
<component <Primitive
:is="as" :as="as"
:class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')" :as-child="asChild"
:class="cn(buttonVariants({ variant, size }), props.class)"
> >
<slot /> <slot />
</component> </Primitive>
</template> </template>

7
packages/module/playground/components/ui/button/index.ts
View File

@ -1,9 +1,9 @@
import { cva } from 'class-variance-authority' import { type VariantProps, 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 whitespace-nowrap 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',
{ {
variants: { variants: {
variant: { variant: {
@ -19,6 +19,7 @@ export const buttonVariants = cva(
}, },
size: { size: {
default: 'h-10 px-4 py-2', default: 'h-10 px-4 py-2',
xs: 'h-7 rounded px-2',
sm: 'h-9 rounded-md px-3', sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8', lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10', icon: 'h-10 w-10',
@ -30,3 +31,5 @@ export const buttonVariants = cva(
}, },
}, },
) )
export type ButtonVariants = VariantProps<typeof buttonVariants>