mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-15 11:42:15 +01:00
use cn helper for alert-dialog modals
This commit is contained in:
@@ -1,8 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { buttonVariants } from '@/packages/ui/src';
|
import { buttonVariants } from '@/packages/ui/src';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui';
|
import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui';
|
||||||
import { computed, type HTMLAttributes } from 'vue';
|
import { computed, type HTMLAttributes } from 'vue';
|
||||||
import { twMerge } from 'tailwind-merge';
|
|
||||||
const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
|
const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AlertDialogAction v-bind="delegatedProps" :class="twMerge(buttonVariants(), props.class)">
|
<AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
</AlertDialogAction>
|
</AlertDialogAction>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { buttonVariants } from '@/packages/ui/src';
|
import { buttonVariants } from '@/packages/ui/src';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui';
|
import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui';
|
||||||
import { computed, type HTMLAttributes } from 'vue';
|
import { computed, type HTMLAttributes } from 'vue';
|
||||||
import { twMerge } from 'tailwind-merge';
|
|
||||||
|
|
||||||
const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>();
|
const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>();
|
||||||
|
|
||||||
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
|
|||||||
<template>
|
<template>
|
||||||
<AlertDialogCancel
|
<AlertDialogCancel
|
||||||
v-bind="delegatedProps"
|
v-bind="delegatedProps"
|
||||||
:class="twMerge(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
|
:class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
|
||||||
<slot />
|
<slot />
|
||||||
</AlertDialogCancel>
|
</AlertDialogCancel>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui';
|
import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui';
|
||||||
import { computed, type HTMLAttributes } from 'vue';
|
import { computed, type HTMLAttributes } from 'vue';
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { cn } from '../utils/cn';
|
||||||
|
|
||||||
const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>();
|
const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>();
|
||||||
|
|
||||||
@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps);
|
|||||||
<template>
|
<template>
|
||||||
<CalendarCell
|
<CalendarCell
|
||||||
:class="
|
:class="
|
||||||
twMerge(
|
cn(
|
||||||
'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50',
|
'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50',
|
||||||
props.class
|
props.class
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user