elk/components/publish/PublishVisibilityPicker.vue
2023-04-12 14:35:35 +02:00

37 lines
1.1 KiB
Vue

<script setup lang="ts">
const { editing } = defineProps<{
editing?: boolean
}>()
let { modelValue } = $defineModels<{
modelValue: string
}>()
const currentVisibility = $computed(() =>
statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0],
)
function chooseVisibility(visibility: string) {
modelValue = visibility
}
</script>
<template>
<CommonTooltip placement="top" :content="editing ? $t(`visibility.${currentVisibility.value}`) : $t('tooltip.change_content_visibility')">
<CommonDropdown placement="bottom">
<slot :visibility="currentVisibility" />
<template #popper>
<CommonDropdownItem
v-for="visibility in statusVisibilities"
:key="visibility.value"
:icon="visibility.icon"
:text="$t(`visibility.${visibility.value}`)"
:description="$t(`visibility.${visibility.value}_desc`)"
:checked="visibility.value === modelValue"
@click="chooseVisibility(visibility.value)"
/>
</template>
</CommonDropdown>
</CommonTooltip>
</template>