elk/components/publish/PublishVisibilityPicker.vue

37 lines
1.1 KiB
Vue
Raw Normal View History

2023-01-04 10:41:19 +00:00
<script setup lang="ts">
const { editing } = defineProps<{
editing?: boolean
}>()
const modelValue = defineModel<string>({
required: true,
})
2023-01-04 10:41:19 +00:00
const currentVisibility = computed(() =>
statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
2023-01-04 10:41:19 +00:00
)
function chooseVisibility(visibility: string) {
modelValue.value = visibility
2023-01-04 10:41:19 +00:00
}
</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>