-
-
Notifications
You must be signed in to change notification settings - Fork 540
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: userquin <userquin@gmail.com> closes #372
- Loading branch information
Showing
10 changed files
with
383 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| <script setup lang="ts"> | ||
| import type { mastodon } from 'masto' | ||
| const emit = defineEmits<{ | ||
| (e: 'listUpdated', list: mastodon.v1.List): void | ||
| (e: 'listRemoved', id: string): void | ||
| }>() | ||
| const { list } = $defineProps<{ | ||
| list: mastodon.v1.List | ||
| }>() | ||
| const { modelValue } = defineModel<{ | ||
| modelValue: string | ||
| }>() | ||
| modelValue.value = list.title | ||
| const { t } = useI18n() | ||
| const client = useMastoClient() | ||
| let isEditing = $ref<boolean>(false) | ||
| let busy = $ref<boolean>(false) | ||
| let deleteBusy = $ref<boolean>(false) | ||
| const enableSaveButton = computed(() => list.title !== modelValue.value) | ||
| const edit = ref() | ||
| const input = ref() | ||
| const prepareEdit = () => { | ||
| isEditing = true | ||
| nextTick(() => { | ||
| input.value.focus() | ||
| }) | ||
| } | ||
| const cancelEdit = (updateTitle = true) => { | ||
| isEditing = false | ||
| if (updateTitle) | ||
| modelValue.value = list.title | ||
| nextTick(() => { | ||
| edit.value.focus() | ||
| }) | ||
| } | ||
| async function finishEditing() { | ||
| if (busy || !isEditing || !enableSaveButton.value) | ||
| return | ||
| busy = true | ||
| await nextTick() | ||
| try { | ||
| const updateList = await client.v1.lists.update(list.id, { | ||
| title: modelValue.value, | ||
| }) | ||
| cancelEdit(false) | ||
| emit('listUpdated', updateList) | ||
| } | ||
| finally { | ||
| busy = false | ||
| } | ||
| } | ||
| async function removeList() { | ||
| if (deleteBusy) | ||
| return | ||
| deleteBusy = true | ||
| await nextTick() | ||
| const confirmDelete = await openConfirmDialog({ | ||
| title: t('confirm.delete_list.title'), | ||
| confirm: t('confirm.delete_list.confirm'), | ||
| cancel: t('confirm.delete_list.cancel'), | ||
| }) | ||
| if (confirmDelete === 'confirm') { | ||
| await nextTick() | ||
| try { | ||
| await client.v1.lists.remove(list.id) | ||
| emit('listRemoved', list.id) | ||
| } | ||
| finally { | ||
| deleteBusy = false | ||
| } | ||
| } | ||
| else { | ||
| deleteBusy = false | ||
| } | ||
| } | ||
| onBeforeUnmount(() => cancelEdit(false)) | ||
| </script> | ||
|
|
||
| <template> | ||
| <form hover:bg-active flex justify-between items-center @submit.prevent="finishEditing"> | ||
| <div | ||
| v-if="isEditing" | ||
| bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row" | ||
| items-center relative focus-within:box-shadow-outline gap-3 | ||
| > | ||
| <CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')"> | ||
| <button | ||
| type="button" | ||
| rounded-full text-sm p2 transition-colors | ||
| hover:text-primary | ||
| @click="cancelEdit(true)" | ||
| > | ||
| <span block text-current i-ri:close-fill /> | ||
| </button> | ||
| </CommonTooltip> | ||
| <input | ||
| ref="input" | ||
| v-model="modelValue" | ||
| rounded-3 | ||
| w-full | ||
| bg-transparent | ||
| outline="focus:none" | ||
| pe-4 | ||
| pb="1px" | ||
| flex-1 | ||
| placeholder-text-secondary | ||
| @keydown.esc="cancelEdit(true)" | ||
| > | ||
| </div> | ||
| <NuxtLink v-else :to="`list/${list.id}`" block grow p4> | ||
| {{ list.title }} | ||
| </NuxtLink> | ||
| <div mr4 flex gap2> | ||
| <CommonTooltip v-if="isEditing" :content="$t('list.save')"> | ||
| <button | ||
| type="submit" | ||
| text-sm p2 border-1 transition-colors | ||
| border-dark hover:text-primary | ||
| btn-action-icon | ||
| :disabled="deleteBusy || !enableSaveButton || busy" | ||
| > | ||
| <template v-if="isEditing"> | ||
| <span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip"> | ||
| <span block i-ri:loader-2-fill aria-hidden="true" /> | ||
| </span> | ||
| <span v-else block text-current i-ri:save-2-fill class="rtl-flip" /> | ||
| </template> | ||
| </button> | ||
| </CommonTooltip> | ||
| <CommonTooltip v-else :content="$t('list.edit')"> | ||
| <button | ||
| ref="edit" | ||
| type="button" | ||
| text-sm p2 border-1 transition-colors | ||
| border-dark hover:text-primary | ||
| btn-action-icon | ||
| @click.prevent="prepareEdit" | ||
| > | ||
| <span block text-current i-ri:edit-2-line class="rtl-flip" /> | ||
| </button> | ||
| </CommonTooltip> | ||
| <CommonTooltip :content="$t('list.delete')"> | ||
| <button | ||
| type="button" | ||
| text-sm p2 border-1 transition-colors | ||
| border-dark hover:text-primary | ||
| btn-action-icon | ||
| :disabled="isEditing" | ||
| @click.prevent="removeList" | ||
| > | ||
| <span v-if="deleteBusy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip"> | ||
| <span block i-ri:loader-2-fill aria-hidden="true" /> | ||
| </span> | ||
| <span v-else block text-current i-ri:delete-bin-2-line class="rtl-flip" /> | ||
| </button> | ||
| </CommonTooltip> | ||
| </div> | ||
| </form> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.