File tree Expand file tree Collapse file tree 3 files changed +78
-6
lines changed Expand file tree Collapse file tree 3 files changed +78
-6
lines changed Original file line number Diff line number Diff line change @@ -4,7 +4,7 @@ import { computed } from 'vue'
4
4
import type { PreviewMode } from ' ./types'
5
5
6
6
defineOptions ({
7
- editorType: ' monaco ' ,
7
+ editorType: ' codemirror ' ,
8
8
})
9
9
10
10
const props = defineProps <{
Original file line number Diff line number Diff line change 2
2
import FileSelector from ' ./FileSelector.vue'
3
3
import Message from ' ../Message.vue'
4
4
import { debounce } from ' ../utils'
5
- import { inject } from ' vue'
5
+ import { inject , ref } from ' vue'
6
6
import { Store } from ' ../store'
7
+ import MessageToggle from ' ./MessageToggle.vue'
7
8
import type { EditorComponentType } from ' ./types'
8
9
9
10
const props = defineProps <{
10
11
editorComponent: EditorComponentType
11
12
}>()
12
13
13
14
const store = inject (' store' ) as Store
15
+ const showMessage = ref (true )
14
16
15
17
const onChange = debounce ((code : string ) => {
16
18
store .state .activeFile .code = code
@@ -25,10 +27,13 @@ const onChange = debounce((code: string) => {
25
27
:value =" store.state.activeFile.code"
26
28
:filename =" store.state.activeFile.filename"
27
29
/>
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 >
32
37
</div >
33
38
</template >
34
39
Original file line number Diff line number Diff line change
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 >
You can’t perform that action at this time.
0 commit comments