95 lines
2.7 KiB
Vue
95 lines
2.7 KiB
Vue
<template>
|
|
<h2 class="tool-title">Str sort lines</h2>
|
|
<hr class="mt-5 mb-5">
|
|
|
|
<div class="input-group">
|
|
<label for="data">Data</label>
|
|
<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" 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"
|
|
v-on:change="result" type="checkbox"> <label for="sort_mode_reverse">reverse</label>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mt-5 mb-5">
|
|
|
|
<div class="input-group">
|
|
<label for="result">Result</label>
|
|
<MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MonacoEditor from "@/components/MonacoEditor.vue";
|
|
|
|
export default {
|
|
components: {
|
|
MonacoEditor
|
|
},
|
|
data() {
|
|
return {
|
|
toolData: {
|
|
data: "",
|
|
sortMode: "alpha",
|
|
sortModeReverse: false
|
|
},
|
|
toolResult: ""
|
|
};
|
|
},
|
|
methods: {
|
|
result() {
|
|
let result = [];
|
|
const data = this.toolData.data.split("\n");
|
|
|
|
switch (this.toolData.sortMode) {
|
|
case "alpha":
|
|
result = data.sort(function(a, b) {
|
|
return a.localeCompare(b);
|
|
});
|
|
break;
|
|
case "numerically":
|
|
const collator = new Intl.Collator([], { numeric: true });
|
|
|
|
result = data.sort(function(a, b) {
|
|
return collator.compare(a, b);
|
|
});
|
|
break;
|
|
case "by_length":
|
|
result = data.sort(function(a, b) {
|
|
return a.length - b.length;
|
|
});
|
|
break;
|
|
case "random":
|
|
result = data.sort(function(a, b) {
|
|
return Math.random() - .5;
|
|
});
|
|
break;
|
|
}
|
|
|
|
if (this.toolData.sortModeReverse) {
|
|
result = result.reverse();
|
|
}
|
|
|
|
this.toolResult = result.join("\n");
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style> |