barkey/packages/frontend/src/components/MkInfo.vue
かっこかり 24e629ca5c
enhance: 初期設定とチュートリアルを統合 (#12141)
* better onboarding experience

* enhance: iroiro

* (add) title

* (enhance) 戻る・次へボタンを全ページでstickyに

* fix merging

* (add) iroiro

* remove unnecessary file

* Update CHANGELOG.md

* tweak texts

* (fix) reactionViewer mock

* change strings

* Update MkTutorialDialog.Note.vue

* Update ja-JP.yml

* (fix) reactionViewer error

* (fix) path

* refactor

* fix

* Update MkPostForm.vue

* Update ja-JP.yml

* Update ja-JP.yml

* tweak text

* Update ja-JP.yml

* Update ja-JP.yml

* Update ja-JP.yml

* (add) achivement

* (add) もう一度見れますよメッセージを追加

* Revert "feat: レジストリAPIをサードパーティから利用可能に (#12229)"

This reverts commit 79346272f8.

* Revert "(add) もう一度見れますよメッセージを追加"

This reverts commit 6123b35215133f0d5e5db356bb43f4acbafab8fa.

* Revert "Revert "feat: レジストリAPIをサードパーティから利用可能に (#12229)""

This reverts commit bae684e484ef99308d7ac816a822047117efe1c6.

* tweak

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2023-11-03 15:35:07 +09:00

58 lines
1.1 KiB
Vue

<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="[$style.root, { [$style.warn]: warn }]">
<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
<i v-else class="ti ti-info-circle" :class="$style.i"></i>
<div><slot></slot></div>
<button v-if="closable" :class="$style.button" class="_button" @click="close()"><i class="ti ti-x"></i></button>
</div>
</template>
<script lang="ts" setup>
import { } from 'vue';
const props = defineProps<{
warn?: boolean;
closable?: boolean;
}>();
const emit = defineEmits<{
(ev: 'close'): void;
}>();
function close() {
// こいつの中では非表示動作は行わない
emit('close');
}
</script>
<style lang="scss" module>
.root {
display: flex;
align-items: center;
padding: 12px 14px;
font-size: 90%;
background: var(--infoBg);
color: var(--infoFg);
border-radius: var(--radius);
white-space: pre-wrap;
&.warn {
background: var(--infoWarnBg);
color: var(--infoWarnFg);
}
}
.i {
margin-right: 4px;
}
.button {
margin-left: auto;
padding: 4px;
}
</style>