Skip to content

Commit 12b1ef3

Browse files
surmon-chinasurmon-china
committed
chore: format
1 parent d9b35f2 commit 12b1ef3

File tree

1 file changed

+127
-127
lines changed

1 file changed

+127
-127
lines changed

‎dev/App.vue‎

Lines changed: 127 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,111 @@
11
<script setup lang="ts">
2-
import { reactive, shallowRef, computed, onMounted } from 'vue'
3-
import { javascript } from '@codemirror/lang-javascript'
4-
import { html } from '@codemirror/lang-html'
5-
import { json } from '@codemirror/lang-json'
6-
import { markdown } from '@codemirror/lang-markdown'
7-
import { oneDark } from '@codemirror/theme-one-dark'
8-
import { Codemirror } from '../src'
2+
import { reactive, shallowRef, computed, onMounted } from 'vue'
3+
import { javascript } from '@codemirror/lang-javascript'
4+
import { html } from '@codemirror/lang-html'
5+
import { json } from '@codemirror/lang-json'
6+
import { markdown } from '@codemirror/lang-markdown'
7+
import { oneDark } from '@codemirror/theme-one-dark'
8+
import { Codemirror } from '../src'
99
10-
const themes: any = { oneDark }
11-
const languages: any = {
12-
javascript: javascript(),
13-
html: html(),
14-
json: json(),
15-
markdown: markdown()
16-
}
17-
18-
const consoleLog = console.log
19-
const code = shallowRef(`console.log('Hello World')`)
20-
const view = shallowRef()
21-
const state = reactive({
22-
disabled: false,
23-
indentWithTab: true,
24-
tabSize: 4,
25-
autofocus: true,
26-
placeholder: 'input...',
27-
backgroundColor: 'red',
28-
language: 'javascript',
29-
theme: 'oneDark',
30-
phrases: 'en-us'
31-
})
10+
const themes: any = { oneDark }
11+
const languages: any = {
12+
javascript: javascript(),
13+
html: html(),
14+
json: json(),
15+
markdown: markdown()
16+
}
3217
33-
const handleReady = (payload: any) => {
34-
console.log('handleReady payload:', payload)
35-
}
18+
const consoleLog = console.log
19+
const code = shallowRef(`console.log('Hello World')`)
20+
const view = shallowRef()
21+
const config = reactive({
22+
disabled: false,
23+
indentWithTab: true,
24+
tabSize: 4,
25+
autofocus: true,
26+
placeholder: 'input...',
27+
backgroundColor: 'red',
28+
language: 'javascript',
29+
theme: 'oneDark',
30+
phrases: 'en-us'
31+
})
3632
37-
const extensions = computed(() => {
38-
const result = []
39-
result.push(languages[state.language])
40-
if (themes[state.theme]) {
41-
result.push(themes[state.theme])
33+
const handleReady = (payload: any) => {
34+
console.log('handleReady payload:', payload)
4235
}
43-
return result
44-
})
4536
46-
onMounted(() => {
47-
console.log('mounted view:', view)
48-
})
37+
const extensions = computed(() => {
38+
const result = []
39+
result.push(languages[config.language])
40+
if (themes[config.theme]) {
41+
result.push(themes[config.theme])
42+
}
43+
return result
44+
})
45+
46+
onMounted(() => {
47+
console.log('mounted view:', view)
48+
})
4949
50-
const germanPhrases = {
51-
// @codemirror/view
52-
'Control character': 'Steuerzeichen',
53-
// @codemirror/commands
54-
'Selection deleted': 'Auswahl gelöscht',
55-
// @codemirror/language
56-
'Folded lines': 'Eingeklappte Zeilen',
57-
'Unfolded lines': 'Ausgeklappte Zeilen',
58-
to: 'bis',
59-
'folded code': 'eingeklappter Code',
60-
unfold: 'ausklappen',
61-
'Fold line': 'Zeile einklappen',
62-
'Unfold line': 'Zeile ausklappen',
63-
// @codemirror/search
64-
'Go to line': 'Springe zu Zeile',
65-
go: 'OK',
66-
Find: 'Suchen',
67-
Replace: 'Ersetzen',
68-
next: 'nächste',
69-
previous: 'vorherige',
70-
all: 'alle',
71-
'match case': 'groß/klein beachten',
72-
'by word': 'ganze Wörter',
73-
replace: 'ersetzen',
74-
'replace all': 'alle ersetzen',
75-
close: 'schließen',
76-
'current match': 'aktueller Treffer',
77-
'replaced $ matches': '$ Treffer ersetzt',
78-
'replaced match on line $': 'Treffer on Zeile $ ersetzt',
79-
'on line': 'auf Zeile',
80-
// @codemirror/autocomplete
81-
Completions: 'Vervollständigungen',
82-
// @codemirror/lint
83-
Diagnostics: 'Diagnosen',
84-
'No diagnostics': 'Keine Diagnosen'
85-
}
50+
const germanPhrases = {
51+
// @codemirror/view
52+
'Control character': 'Steuerzeichen',
53+
// @codemirror/commands
54+
'Selection deleted': 'Auswahl gelöscht',
55+
// @codemirror/language
56+
'Folded lines': 'Eingeklappte Zeilen',
57+
'Unfolded lines': 'Ausgeklappte Zeilen',
58+
to: 'bis',
59+
'folded code': 'eingeklappter Code',
60+
unfold: 'ausklappen',
61+
'Fold line': 'Zeile einklappen',
62+
'Unfold line': 'Zeile ausklappen',
63+
// @codemirror/search
64+
'Go to line': 'Springe zu Zeile',
65+
go: 'OK',
66+
Find: 'Suchen',
67+
Replace: 'Ersetzen',
68+
next: 'nächste',
69+
previous: 'vorherige',
70+
all: 'alle',
71+
'match case': 'groß/klein beachten',
72+
'by word': 'ganze Wörter',
73+
replace: 'ersetzen',
74+
'replace all': 'alle ersetzen',
75+
close: 'schließen',
76+
'current match': 'aktueller Treffer',
77+
'replaced $ matches': '$ Treffer ersetzt',
78+
'replaced match on line $': 'Treffer on Zeile $ ersetzt',
79+
'on line': 'auf Zeile',
80+
// @codemirror/autocomplete
81+
Completions: 'Vervollständigungen',
82+
// @codemirror/lint
83+
Diagnostics: 'Diagnosen',
84+
'No diagnostics': 'Keine Diagnosen'
85+
}
8686
</script>
8787

8888
<template>
8989
<div class="example">
9090
<div class="toolbar">
91-
<pre class="state">{{ state }}</pre>
91+
<pre class="state">{{ config }}</pre>
9292
<div class="config">
9393
<p>
94-
<button @click="state.disabled = !state.disabled">toggle disabled</button>
94+
<button @click="config.disabled = !config.disabled">toggle disabled</button>
9595
</p>
9696
<p>
97-
<button @click="state.autofocus = !state.autofocus">toggle autofocus</button>
97+
<button @click="config.autofocus = !config.autofocus">toggle autofocus</button>
9898
</p>
9999
<p>
100-
<button @click="state.indentWithTab = !state.indentWithTab">toggle indentWithTab</button>
100+
<button @click="config.indentWithTab = !config.indentWithTab">toggle indentWithTab</button>
101101
</p>
102102
<p>
103103
<label for="tabSize">tabSize:</label>
104-
<input type="range" id="tabSize" min="2" max="10" step="2" v-model.number="state.tabSize" />
104+
<input type="range" id="tabSize" min="2" max="10" step="2" v-model.number="config.tabSize" />
105105
</p>
106106
<p>
107107
<label for="backgroundColor">backgroundColor:</label>
108-
<select name="backgroundColor" id="backgroundColor" v-model="state.backgroundColor">
108+
<select name="backgroundColor" id="backgroundColor" v-model="config.backgroundColor">
109109
<option
110110
:value="option"
111111
:key="option"
@@ -117,7 +117,7 @@ const germanPhrases = {
117117
</p>
118118
<p>
119119
<label for="language">language:</label>
120-
<select name="language" id="language" v-model="state.language">
120+
<select name="language" id="language" v-model="config.language">
121121
<option
122122
:value="option"
123123
:key="option"
@@ -129,15 +129,15 @@ const germanPhrases = {
129129
</p>
130130
<p>
131131
<label for="theme">theme:</label>
132-
<select name="theme" id="theme" v-model="state.theme">
132+
<select name="theme" id="theme" v-model="config.theme">
133133
<option :value="option" :key="option" v-for="option in ['default', 'oneDark']">
134134
{{ option }}
135135
</option>
136136
</select>
137137
</p>
138138
<p>
139139
<label for="phrases">phrases:</label>
140-
<select name="phrases" id="phrases" v-model="state.phrases">
140+
<select name="phrases" id="phrases" v-model="config.phrases">
141141
<option :value="option" :key="option" v-for="option in ['en-us', 'de-de']">
142142
{{ option }}
143143
</option>
@@ -150,14 +150,14 @@ const germanPhrases = {
150150
<codemirror
151151
class="codemirror"
152152
ref="cm"
153-
:autofocus="state.autofocus"
154-
:placeholder="state.placeholder"
155-
:indentWithTab="state.indentWithTab"
156-
:tabSize="state.tabSize"
157-
:disabled="state.disabled"
158-
:style="{ backgroundColor: state.backgroundColor }"
153+
:autofocus="config.autofocus"
154+
:placeholder="config.placeholder"
155+
:indentWithTab="config.indentWithTab"
156+
:tabSize="config.tabSize"
157+
:disabled="config.disabled"
158+
:style="{ backgroundColor: config.backgroundColor }"
159159
:extensions="extensions"
160-
:phrases="state.phrases === 'en-us' ? {} : germanPhrases"
160+
:phrases="config.phrases === 'en-us' ? {} : germanPhrases"
161161
v-model="code"
162162
@ready="handleReady"
163163
@change="consoleLog('change', $event)"
@@ -169,47 +169,47 @@ const germanPhrases = {
169169
</template>
170170

171171
<style lang="scss">
172-
body {
173-
margin: 0;
174-
}
175-
176-
.example {
177-
width: 100vw;
178-
height: 100vh;
179-
display: flex;
180-
flex-direction: column;
181-
justify-content: center;
182-
align-items: center;
172+
body {
173+
margin: 0;
174+
}
183175
184-
.toolbar {
176+
.example {
177+
width: 100vw;
178+
height: 100vh;
185179
display: flex;
180+
flex-direction: column;
181+
justify-content: center;
186182
align-items: center;
187-
margin-bottom: 1rem;
188183
189-
.state {
190-
margin: 2rem 0;
191-
margin-right: 2rem;
192-
padding: 2em;
193-
border: 1px solid #ccc;
184+
.toolbar {
185+
display: flex;
186+
align-items: center;
187+
margin-bottom: 1rem;
188+
189+
.state {
190+
margin: 2rem 0;
191+
margin-right: 2rem;
192+
padding: 2em;
193+
border: 1px solid #ccc;
194+
}
194195
}
195-
}
196196
197-
.content {
198-
display: flex;
199-
width: 100%;
200-
justify-content: center;
197+
.content {
198+
display: flex;
199+
width: 100%;
200+
justify-content: center;
201201
202-
.code {
203-
overflow: scroll;
204-
}
202+
.code {
203+
overflow: scroll;
204+
}
205205
206-
.code,
207-
.codemirror .cm-editor {
208-
width: 30vw;
209-
height: 50vh;
210-
margin: 0 1rem;
211-
border: 1px solid #ddd;
206+
.code,
207+
.codemirror .cm-editor {
208+
width: 30vw;
209+
height: 50vh;
210+
margin: 0 1rem;
211+
border: 1px solid #ddd;
212+
}
212213
}
213214
}
214-
}
215215
</style>

0 commit comments

Comments
 (0)