ADD: Action delete button
This commit is contained in:
@@ -7,6 +7,7 @@
|
|||||||
<span class="float-end mx-2 w-4 cursor-grab">
|
<span class="float-end mx-2 w-4 cursor-grab">
|
||||||
<GripHorizontal class="action-handle mb-0.5 inline-block size-4 text-zinc-600" />
|
<GripHorizontal class="action-handle mb-0.5 inline-block size-4 text-zinc-600" />
|
||||||
</span>
|
</span>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
<Popover v-model:open="open">
|
<Popover v-model:open="open">
|
||||||
<PopoverTrigger as-child>
|
<PopoverTrigger as-child>
|
||||||
<Button
|
<Button
|
||||||
@@ -49,6 +50,24 @@
|
|||||||
</Command>
|
</Command>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
<Button
|
||||||
|
v-if="!confirmDelete"
|
||||||
|
class="aspect-square border border-zinc-800 bg-transparent p-1 text-muted-foreground hover:bg-orange-900 hover:text-zinc-100"
|
||||||
|
@click="confirmDelete = true"
|
||||||
|
><Trash2 class="size-4"
|
||||||
|
/></Button>
|
||||||
|
<template v-else>
|
||||||
|
<Button
|
||||||
|
class="aspect-square bg-orange-950 p-1 text-zinc-200 hover:bg-orange-900 hover:text-zinc-100"
|
||||||
|
><Check class="size-4"
|
||||||
|
/></Button>
|
||||||
|
<Button
|
||||||
|
class="aspect-square border border-zinc-800 bg-transparent p-1 text-zinc-200 hover:bg-zinc-800 hover:text-zinc-100"
|
||||||
|
@click="confirmDelete = false"
|
||||||
|
><X class="size-4"
|
||||||
|
/></Button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Separator />
|
<Separator />
|
||||||
<component :is="actionOptions[value]?.component ? actionOptions[value]?.component : WIP" />
|
<component :is="actionOptions[value]?.component ? actionOptions[value]?.component : WIP" />
|
||||||
@@ -73,7 +92,7 @@ import { cn } from '@renderer/lib/utils'
|
|||||||
import SendKeyAction from '@renderer/components/config/actions/SendKeyAction.vue'
|
import SendKeyAction from '@renderer/components/config/actions/SendKeyAction.vue'
|
||||||
import SendStringAction from '@renderer/components/config/actions/SendStringAction.vue'
|
import SendStringAction from '@renderer/components/config/actions/SendStringAction.vue'
|
||||||
import ScrambleText from '@renderer/components/common/ScrambleText.vue'
|
import ScrambleText from '@renderer/components/common/ScrambleText.vue'
|
||||||
import { ChevronsUpDown, Check, GripHorizontal } from 'lucide-vue-next'
|
import { ChevronsUpDown, Check, GripHorizontal, Trash2, X } from 'lucide-vue-next'
|
||||||
import { useElementSize } from '@vueuse/core'
|
import { useElementSize } from '@vueuse/core'
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
@@ -102,4 +121,5 @@ const { width } = useElementSize(comboboxButton)
|
|||||||
|
|
||||||
const open = ref(false)
|
const open = ref(false)
|
||||||
const value = ref('')
|
const value = ref('')
|
||||||
|
const confirmDelete = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user