elk/components/publish/PublishVisibilityPicker.vue
2023-01-09 22:27:03 +02:00

36 lines
1.1 KiB
Vue

<script setup lang="ts">
const { editing } = defineProps<{
editing?: boolean
}>()
let { modelValue } = $defineModel<{
modelValue: string
}>()
const currentVisibility = $computed(() =>
statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0],
)
const 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>