feat(publish): support visibility
This commit is contained in:
parent
dbf4362d8b
commit
ad3d5efb11
|
@ -2,7 +2,9 @@
|
|||
import { dropdownContextKey } from './ctx'
|
||||
|
||||
defineProps<{
|
||||
description?: string
|
||||
icon?: string
|
||||
checked?: boolean
|
||||
}>()
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
|
@ -15,8 +17,26 @@ const handleClick = (evt: MouseEvent) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div flex gap-2 items-center cursor-pointer px4 py3 font-700 hover="bg-active" @click="handleClick">
|
||||
<div
|
||||
flex gap-3 items-center cursor-pointer px4 py3 hover-bg-active
|
||||
@click="handleClick"
|
||||
>
|
||||
<div v-if="icon" :class="icon" />
|
||||
<span text-15px><slot /></span>
|
||||
<div flex="~ col">
|
||||
<div text-15px font-700>
|
||||
<slot />
|
||||
</div>
|
||||
<div text-3 text="gray/90">
|
||||
<slot name="description">
|
||||
<p v-if="description">
|
||||
{{ description }}
|
||||
</p>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex-auto />
|
||||
|
||||
<div v-if="checked" i-ri:check-line />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import type { CreateStatusParams, CreateStatusParamsWithStatus } from 'masto'
|
||||
import type { CreateStatusParams, CreateStatusParamsWithStatus, StatusVisibility } from 'masto'
|
||||
|
||||
const {
|
||||
draftKey,
|
||||
|
@ -16,6 +16,7 @@ function getDefaultStatus(): CreateStatusParamsWithStatus {
|
|||
return {
|
||||
status: '',
|
||||
inReplyToId,
|
||||
visibility: 'public',
|
||||
}
|
||||
}
|
||||
const draft = $computed(() => {
|
||||
|
@ -35,6 +36,10 @@ const status = $computed(() => {
|
|||
} as CreateStatusParams
|
||||
})
|
||||
|
||||
const currentVisibility = $computed(() => {
|
||||
return STATUS_VISIBILITIES.find(v => v.value === status.visibility)!
|
||||
})
|
||||
|
||||
let isUploading = $ref<boolean>(false)
|
||||
|
||||
async function handlePaste(evt: ClipboardEvent) {
|
||||
|
@ -81,6 +86,10 @@ function removeAttachment(index: number) {
|
|||
draft.attachments.splice(index, 1)
|
||||
}
|
||||
|
||||
function chooseVisibility(visibility: StatusVisibility) {
|
||||
draft.params.visibility = visibility
|
||||
}
|
||||
|
||||
async function publish() {
|
||||
try {
|
||||
isSending = true
|
||||
|
@ -135,6 +144,27 @@ onUnmounted(() => {
|
|||
<div i-ri:upload-line />
|
||||
</button>
|
||||
|
||||
<CommonDropdown>
|
||||
<button btn-action-icon>
|
||||
<div :class="currentVisibility.icon" />
|
||||
</button>
|
||||
|
||||
<template #popper>
|
||||
<CommonDropdownItem
|
||||
v-for="visibility in STATUS_VISIBILITIES"
|
||||
:key="visibility.value"
|
||||
:icon="visibility.icon"
|
||||
:checked="visibility.value === draft.params.visibility"
|
||||
@click="chooseVisibility(visibility.value)"
|
||||
>
|
||||
{{ visibility.label }}
|
||||
<template #description>
|
||||
{{ visibility.description }}
|
||||
</template>
|
||||
</CommonDropdownItem>
|
||||
</template>
|
||||
</CommonDropdown>
|
||||
|
||||
<div flex-auto />
|
||||
|
||||
<button
|
||||
|
|
|
@ -1,6 +1,34 @@
|
|||
import type { Ref } from 'vue'
|
||||
import type { Account, Relationship, Status } from 'masto'
|
||||
|
||||
// @unocss-include
|
||||
export const STATUS_VISIBILITIES = [
|
||||
{
|
||||
value: 'public',
|
||||
label: 'Public',
|
||||
icon: 'i-ri:global-line',
|
||||
description: 'Visible for all',
|
||||
},
|
||||
{
|
||||
value: 'unlisted',
|
||||
label: 'Unlisted',
|
||||
icon: 'i-ri:lock-unlock-line',
|
||||
description: 'Visible for all, but opted-out of discovery features',
|
||||
},
|
||||
{
|
||||
value: 'private',
|
||||
label: 'Followers only',
|
||||
icon: 'i-ri:lock-line',
|
||||
description: 'Visible for followers only',
|
||||
},
|
||||
{
|
||||
value: 'direct',
|
||||
label: 'Mentioned people only',
|
||||
icon: 'i-ri:at-line',
|
||||
description: 'Visible for mentioned users only',
|
||||
},
|
||||
] as const
|
||||
|
||||
export function getDisplayName(account: Account) {
|
||||
return account.displayName || account.username
|
||||
}
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import type { Attachment, CreateStatusParamsWithStatus } from 'masto'
|
||||
import { STORAGE_KEY_DRAFTS } from '~/constants'
|
||||
import type { Mutable } from '~/types/utils'
|
||||
|
||||
export type DraftMap = Record<string, {
|
||||
params: CreateStatusParamsWithStatus
|
||||
params: Mutable<CreateStatusParamsWithStatus>
|
||||
attachments: Attachment[]
|
||||
}>
|
||||
|
||||
|
|
3
types/utils.ts
Normal file
3
types/utils.ts
Normal file
|
@ -0,0 +1,3 @@
|
|||
export type Mutable<T> = {
|
||||
-readonly[P in keyof T]: T[P]
|
||||
}
|
Loading…
Reference in a new issue