elk/components/publish/PublishVisibilityPicker.vue
2023-08-01 17:44:01 +08:00

37 lines
1.1 KiB
Vue

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