feat(publish): support visibility

zio/stable
三咲智子 2022-11-24 17:15:58 +08:00
parent dbf4362d8b
commit ad3d5efb11
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
5 changed files with 86 additions and 4 deletions

View File

@ -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>

View File

@ -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

View File

@ -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
}

View File

@ -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 100644
View File

@ -0,0 +1,3 @@
export type Mutable<T> = {
-readonly[P in keyof T]: T[P]
}