hippofish/packages/frontend/src/components/MkFormDialog.file.vue
anatawa12 4579be0f54
新着ノートをサウンドで通知する機能をdeck UIに追加 (#13867)
* feat(deck-ui): implement note notification

* chore: remove notify in antenna

* docs(changelog): 新着ノートをサウンドで通知する機能をdeck UIに追加

* fix: type error in test

* lint: key order

* fix: remove notify column

* test: remove test for notify

* chore: make sound selectable

* fix: add license header

* fix: add license header again

* Unnecessary await

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>

* ファイルを選択してください -> ファイルが選択されていません

* fix: i18n忘れ

* fix: i18n忘れ

* pleaseSelectFile > fileNotSelected

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
2024-05-27 20:54:53 +09:00

71 lines
1.6 KiB
Vue

<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkButton inline rounded primary @click="selectButton($event)">{{ i18n.ts.selectFile }}</MkButton>
<div :class="['_nowrap', !fileName && $style.fileNotSelected]">{{ friendlyFileName }}</div>
</div>
</template>
<script setup lang="ts">
import * as Misskey from 'misskey-js';
import { computed, ref } from 'vue';
import { i18n } from '@/i18n.js';
import MkButton from '@/components/MkButton.vue';
import { selectFile } from '@/scripts/select-file.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
const props = defineProps<{
fileId?: string | null;
validate?: (file: Misskey.entities.DriveFile) => Promise<boolean>;
}>();
const emit = defineEmits<{
(ev: 'update', result: Misskey.entities.DriveFile): void;
}>();
const fileUrl = ref('');
const fileName = ref<string>('');
const friendlyFileName = computed<string>(() => {
if (fileName.value) {
return fileName.value;
}
if (fileUrl.value) {
return fileUrl.value;
}
return i18n.ts.fileNotSelected;
});
if (props.fileId) {
misskeyApi('drive/files/show', {
fileId: props.fileId,
}).then((apiRes) => {
fileName.value = apiRes.name;
fileUrl.value = apiRes.url;
});
}
function selectButton(ev: MouseEvent) {
selectFile(ev.currentTarget ?? ev.target).then(async (file) => {
if (!file) return;
if (props.validate && !await props.validate(file)) return;
emit('update', file);
fileName.value = file.name;
fileUrl.value = file.url;
});
}
</script>
<style module>
.fileNotSelected {
font-weight: 700;
color: var(--infoWarnFg);
}
</style>