Skip to content

Commit 51819cc

Browse files
Blackman99sxzz
andauthored
feat: add error toggle (vuejs#98)
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
1 parent 5f543da commit 51819cc

File tree

3 files changed

+78
-6
lines changed

3 files changed

+78
-6
lines changed

src/editor/CodeMirrorEditor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { computed } from 'vue'
44
import type { PreviewMode } from './types'
55
66
defineOptions({
7-
editorType: 'monaco',
7+
editorType: 'codemirror',
88
})
99
1010
const props = defineProps<{

src/editor/EditorContainer.vue

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22
import FileSelector from './FileSelector.vue'
33
import Message from '../Message.vue'
44
import { debounce } from '../utils'
5-
import { inject } from 'vue'
5+
import { inject, ref } from 'vue'
66
import { Store } from '../store'
7+
import MessageToggle from './MessageToggle.vue'
78
import type { EditorComponentType } from './types'
89
910
const props = defineProps<{
1011
editorComponent: EditorComponentType
1112
}>()
1213
1314
const store = inject('store') as Store
15+
const showMessage = ref(true)
1416
1517
const onChange = debounce((code: string) => {
1618
store.state.activeFile.code = code
@@ -25,10 +27,13 @@ const onChange = debounce((code: string) => {
2527
:value="store.state.activeFile.code"
2628
:filename="store.state.activeFile.filename"
2729
/>
28-
<Message
29-
v-if="props.editorComponent.editorType !== 'monaco'"
30-
:err="store.state.errors[0]"
31-
/>
30+
<template v-if="editorComponent.editorType !== 'monaco'">
31+
<Message
32+
v-show="showMessage"
33+
:err="store.state.errors[0]"
34+
/>
35+
<MessageToggle v-model="showMessage" />
36+
</template>
3237
</div>
3338
</template>
3439

src/editor/MessageToggle.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script setup lang="ts">
2+
withDefaults(
3+
defineProps<{
4+
modelValue?: boolean
5+
}>(),
6+
{
7+
modelValue: false,
8+
}
9+
)
10+
11+
defineEmits<{
12+
(e: 'update:modelValue', value: boolean): void
13+
}>()
14+
</script>
15+
<template>
16+
<div class="wrapper" @click="$emit('update:modelValue', !modelValue)">
17+
<span>Show Error</span>
18+
<div class="toggle" :class="[{ active: modelValue }]">
19+
<div class="indicator" />
20+
</div>
21+
</div>
22+
</template>
23+
<style scoped>
24+
.wrapper {
25+
position: absolute;
26+
bottom: 8px;
27+
right: 12px;
28+
z-index: 11;
29+
display: flex;
30+
align-items: center;
31+
background-color: var(--bg);
32+
color: var(--text-light);
33+
cursor: pointer;
34+
padding: 4px 8px;
35+
border-radius: 2px;
36+
user-select: none;
37+
}
38+
.toggle {
39+
display: inline-block;
40+
margin-left: 4px;
41+
width: 32px;
42+
height: 18px;
43+
border-radius: 12px;
44+
position: relative;
45+
background-color: var(--border);
46+
}
47+
48+
.indicator {
49+
font-size: 12px;
50+
background-color: var(--text-light);
51+
width: 14px;
52+
height: 14px;
53+
border-radius: 50%;
54+
transition: transform ease-in-out 0.2s;
55+
position: absolute;
56+
left: 2px;
57+
top: 2px;
58+
color: var(--bg);
59+
text-align: center;
60+
}
61+
62+
.active .indicator {
63+
background-color: var(--color-branding);
64+
transform: translateX(14px);
65+
color: white;
66+
}
67+
</style>

0 commit comments

Comments
 (0)