replace some el-button

This commit is contained in:
pa
2026-01-11 12:24:58 +09:00
committed by Natsumi
parent 66d8addc9f
commit 2043a321a4
34 changed files with 317 additions and 237 deletions

View File

@@ -1,6 +1,7 @@
<script setup>
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
import { computed } from 'vue';
import { buttonVariants } from '.';
@@ -8,9 +9,12 @@
variant: { type: null, required: false },
size: { type: null, required: false },
class: { type: null, required: false },
disabled: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'button' }
});
const isNativeButton = computed(() => props.as === 'button' && !props.asChild);
</script>
<template>
@@ -18,6 +22,9 @@
data-slot="button"
:as="as"
:as-child="asChild"
:disabled="isNativeButton ? props.disabled : undefined"
:data-disabled="props.disabled ? '' : undefined"
:aria-disabled="props.disabled || undefined"
:class="cn(buttonVariants({ variant, size }), props.class)">
<slot />
</Primitive>

View File

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
export { default as Button } from './Button.vue';
export const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {