elk/components/publish/PublishThreadTools.vue

46 lines
1.4 KiB
Vue
Raw Normal View History

<script setup lang="ts">
const props = defineProps<{
draftKey: string
draftItemIndex: number
}>()
const { threadIsActive, addThreadItem, threadItems, removeThreadItem } = useThreadComposer(props.draftKey)
const isRemovableItem = computed(() => threadIsActive.value && props.draftItemIndex < threadItems.value.length - 1)
function addOrRemoveItem() {
if (isRemovableItem.value)
removeThreadItem(props.draftItemIndex)
else
addThreadItem()
}
const { t } = useI18n()
const label = computed(() => {
if (!isRemovableItem.value && props.draftItemIndex === 0)
return t('tooltip.start_thread')
return isRemovableItem.value ? t('tooltip.remove_thread_item') : t('tooltip.add_thread_item')
})
</script>
<template>
<div flex flex-row rounded-3 :class="{ 'bg-border': threadIsActive }">
<div
v-if="threadIsActive" dir="ltr" pointer-events-none pe-1 pt-2 pl-2 text-sm tabular-nums text-secondary flex
gap="0.5"
>
{{ draftItemIndex + 1 }}<span text-secondary-light>/</span><span text-secondary-light>{{ threadItems.length
}}</span>
</div>
<CommonTooltip placement="top" :content="label">
<button btn-action-icon :aria-label="label" @click="addOrRemoveItem">
<div v-if="isRemovableItem" i-ri:chat-delete-line />
<div v-else i-ri:chat-new-line />
</button>
</CommonTooltip>
</div>
</template>