elk/components/publish/PublishWidget.vue

67 lines
1.3 KiB
Vue
Raw Normal View History

2022-11-21 06:55:31 +00:00
<script setup lang="ts">
import type { CreateStatusParamsWithStatus } from 'masto'
const {
draftKey,
placeholder = 'What is on your mind?',
inReplyToId,
} = defineProps<{
draftKey: string
placeholder?: string
inReplyToId?: string
}>()
let isSending = $ref(false)
2022-11-23 13:06:27 +00:00
const storageKey = `elk-draft-${draftKey}`
2022-11-21 06:55:31 +00:00
function getDefaultStatus(): CreateStatusParamsWithStatus {
return {
status: '',
inReplyToId,
}
}
const draft = useLocalStorage<CreateStatusParamsWithStatus>(storageKey, getDefaultStatus())
async function publish() {
try {
isSending = true
await masto.statuses.create(draft.value)
draft.value = getDefaultStatus()
}
finally {
isSending = false
}
}
onUnmounted(() => {
if (!draft.value.status) {
draft.value = undefined
nextTick(() => {
localStorage.removeItem(storageKey)
})
}
})
</script>
<template>
<div
flex flex-col gap-4
:class="isSending ? 'pointer-events-none' : ''"
>
<textarea
v-model="draft.status"
:placeholder="placeholder"
p2 border-rounded w-full h-40
2022-11-23 02:16:31 +00:00
bg-gray:10 outline-none border="~ base"
2022-11-21 06:55:31 +00:00
/>
<div flex justify-end>
<button
2022-11-23 03:06:56 +00:00
btn-solid
:disabled="!draft.status"
2022-11-21 06:55:31 +00:00
@click="publish"
>
Publish!
</button>
</div>
</div>
</template>