Add monaco editor

This commit is contained in:
2024-03-07 13:41:39 +02:00
parent 650267ca1e
commit de7abfadd9
14 changed files with 334 additions and 197 deletions

View File

@ -4,19 +4,19 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data"></textarea>
<textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
</div>
<div class="input-group">
<label>Mode</label>
<div>
<input id="sort_mode_alpha" value="alpha" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_alpha">alphabetically</label><br>
<input id="sort_mode_numerically" value="numerically" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_numerically">numerically</label><br>
<input id="sort_mode_by_length" value="by_length" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_by_length">by length</label><br>
<input id="sort_mode_random" value="random" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_random">random</label><br>
<input id="sort_mode_alpha" value="alpha" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_alpha">alphabetically</label><br>
<input id="sort_mode_numerically" value="numerically" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_numerically">numerically</label><br>
<input id="sort_mode_by_length" value="by_length" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_by_length">by length</label><br>
<input id="sort_mode_random" value="random" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_random">random</label><br>
<br>
<input id="sort_mode_reverse" value="random" name="sort_mode_reverse" v-model="toolData.sortModeReverse" type="checkbox"> <label for="sort_mode_reverse">reverse</label>
<input id="sort_mode_reverse" value="random" name="sort_mode_reverse" v-model="toolData.sortModeReverse" v-on:change="result" type="checkbox"> <label for="sort_mode_reverse">reverse</label>
</div>
</div>
@ -24,12 +24,17 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult"></textarea>
<MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
</div>
</template>
<script>
import MonacoEditor from "@/components/MonacoEditor.vue";
export default {
components: {
MonacoEditor
},
data() {
return {
toolData: {
@ -37,10 +42,11 @@ export default {
sortMode: 'alpha',
sortModeReverse: false,
},
toolResult: '',
};
},
computed: {
toolResult() {
methods: {
result() {
let result = []
const data = this.toolData.data.split('\n');
@ -73,7 +79,7 @@ export default {
result = result.reverse();
}
return result.join('\n');
this.toolResult = result.join('\n');
},
},
}