Add str len mode, refactor str case mode

src/views/StrLength.vue

@@ -0,0 +1,52 @@
+<template>
+  <h2 class="tool-title">Str length</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+  </div>
+
+  <div class="input-group">
+    <label>Mode</label>
+
+    <div>
+      <input id="count_mode_characters" value="characters" name="count_mode" v-model="toolData.countMode" type="radio"> <label for="count_mode_characters">characters</label><br>
+      <input id="count_mode_words" value="words" name="count_mode" v-model="toolData.countMode" type="radio"> <label for="count_mode_words">words</label>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolData: {
+        data: '',
+        countMode: 'characters',
+      },
+    };
+  },
+  computed: {
+    toolResult() {
+      switch (this.toolData.countMode) {
+        case 'characters':
+          return this.toolData.data.length;
+        case 'words':
+          return this.toolData.data.trim().split(/\s+/).length;
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/views/StrToLower.vue

@@ -1,37 +0,0 @@
-<template>
-  <h2 class="tool-title">Str to lower</h2>
-  <hr class="mt-5 mb-5">
-
-  <div class="input-group">
-    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
-  </div>
-
-  <hr class="mt-5 mb-5">
-
-  <div class="input-group">
-    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      toolData: {
-        data: '',
-      },
-    };
-  },
-  computed: {
-    toolResult() {
-      return this.toolData.data.toLocaleLowerCase();
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-
-</style>

src/views/StrToLowerUppper.vue

@@ -0,0 +1,52 @@
+<template>
+  <h2 class="tool-title">Str to lower/upper</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+  </div>
+
+  <div class="input-group">
+    <label>Mode</label>
+
+    <div>
+      <input id="case_mode_lower" value="lower" name="case_mode" v-model="toolData.caseMode" type="radio"> <label for="case_mode_lower">to lower</label><br>
+      <input id="case_mode_upper" value="upper" name="case_mode" v-model="toolData.caseMode" type="radio"> <label for="case_mode_upper">to upper</label>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolData: {
+        data: '',
+        caseMode: 'upper',
+      },
+    };
+  },
+  computed: {
+    toolResult() {
+      switch (this.toolData.caseMode) {
+        case 'lower':
+          return this.toolData.data.toLocaleLowerCase();
+        case 'upper':
+          return this.toolData.data.toLocaleUpperCase();
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/views/StrToUpper.vue

@@ -1,37 +0,0 @@
-<template>
-  <h2 class="tool-title">Str to upper</h2>
-  <hr class="mt-5 mb-5">
-
-  <div class="input-group">
-    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
-  </div>
-
-  <hr class="mt-5 mb-5">
-
-  <div class="input-group">
-    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      toolData: {
-        data: '',
-      },
-    };
-  },
-  computed: {
-    toolResult() {
-      return this.toolData.data.toLocaleUpperCase();
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-
-</style>