Skip to content

Instantly share code, notes, and snippets.

@Chambo015

Chambo015/tooltip_+_dialog.vue

Created January 14, 2025 04:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Chambo015/488b1399d069ee50ca3a9719e71c262a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Chambo015/488b1399d069ee50ca3a9719e71c262a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Chambo015 created this gist Jan 14, 2025.
    58 changes: 58 additions & 0 deletions tooltip_+_dialog.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <script setup lang="ts">
    import { CircleXIcon, PencilIcon, Settings2Icon, TrashIcon } from 'lucide-vue-next';
    defineProps<{
    title: string
    id: number | string
    }>();
    const showDeleteDialog = ref(false);
    // То что поможет скрыть тултип после закрытия модального окна
    const isTooltipAllowed = ref(false);
    </script>

    <template>
    <TooltipProvider>
    <div class="flex flex-1 items-center justify-between overflow-hidden">
    <p class="grow-1 truncate">
    {{ title }}
    </p>
    <Tooltip :delay-duration="0" disable-hoverable-content>
    <TooltipTrigger as-child @mouseenter="isTooltipAllowed = true">
    <Button class="size-6 shrink-0 p-0 opacity-0 transition-opacity group-hover:opacity-100" size="icon" variant="ghost" @click="showDeleteDialog = true">
    <CircleXIcon class="size-4 text-red-500" />
    </Button>
    </TooltipTrigger>
    <TooltipContent v-if="isTooltipAllowed" side="left">
    <p class="text-xs text-red-500">
    {{ $t('action.delete') }}
    </p>
    </TooltipContent>
    </Tooltip>
    </div>
    </TooltipProvider>
    <AlertDialog v-model:open="showDeleteDialog" @update:open="isTooltipAllowed = false">
    <AlertDialogContent>
    <AlertDialogHeader>
    <AlertDialogTitle class="line-clamp-3 break-all">
    Вы уверены что хотите удалить <span>“{{ title }}”</span>?
    </AlertDialogTitle>
    <AlertDialogDescription>
    Пользователи не смогут выбрать эту тему
    </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
    <AlertDialogCancel class="h-9 px-3 text-sm">
    {{ $t('action.cancel') }}
    </AlertDialogCancel>
    <Button
    size="sm"
    variant="destructive"
    @click="showDeleteDialog = false"
    >
    {{ $t('action.delete') }}
    </Button>
    </AlertDialogFooter>
    </AlertDialogContent>
    </AlertDialog>
    </template>