Add str pad tool

src/components/Sidebar.vue

@@ -39,6 +39,7 @@ export default {
         'str_sort_lines': 'Str sort lines',
         'str_to_lower_upper': 'Str to lower/upper',
         'str_remove_duplicate_lines': 'Str remove duplicate lines',
+        'str_pad': 'Str pad',
         'url_encode_decode': 'URL encode/decode',
         'url_query_viewer': 'URL query viewer',
       },

src/router/index.js

@@ -55,6 +55,11 @@ const router = createRouter({
 			name: 'str_remove_duplicate_lines',
 			component: () => import('../views/StrRemoveDuplicateLines.vue'),
 		},
+		{
+			path: '/str_pad',
+			name: 'str_pad',
+			component: () => import('../views/StrPad.vue'),
+		},
 		{
 			path: '/str_to_php_array',
 			name: 'str_to_php_array',

src/views/StrPad.vue

@@ -0,0 +1,98 @@
+<template>
+  <h2 class="tool-title">Str pad</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 for="data">Symbol</label>
+    <input id="data" class="input" v-model="toolData.padSymbol" v-on:keyup="result" placeholder="0" type="text">
+  </div>
+
+  <div class="input-group">
+    <label for="data">Pad count / Fixed length</label>
+    <input id="data" class="input" v-model="toolData.padCount" v-on:keyup="result" placeholder="0" type="text">
+  </div>
+
+  <div class="input-group">
+    <label>Pad position</label>
+
+    <div>
+      <input id="pad_pos_begin" value="begin" name="pad_pos" v-model="toolData.padPos" v-on:change="result" type="radio"> <label for="pad_pos_begin">begin</label><br>
+      <input id="pad_pos_end" value="end" name="pad_pos" v-model="toolData.padPos" v-on:change="result" type="radio"> <label for="pad_pos_end">end</label>
+    </div>
+  </div>
+
+  <div class="input-group">
+    <label>Pad by</label>
+
+    <div>
+      <input id="pad_by_repeat_symbol" value="repeat_symbol" name="pad_by" v-model="toolData.padBy" v-on:change="result" type="radio"> <label for="pad_by_repeat_symbol">repeat symbol</label><br>
+      <input id="pad_by_string_length" value="string_length" name="pad_by" v-model="toolData.padBy" v-on:change="result" type="radio"> <label for="pad_by_string_length">to string length</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: '',
+        padSymbol: '0',
+        padCount: 3,
+        padPos: 'begin',
+        padBy: 'string_length',
+      },
+      toolResult: '',
+    };
+  },
+  methods: {
+    result() {
+      const lines = this.toolData.data.split('\n');
+
+      const paddedLines = lines.map((line) => {
+        if (this.toolData.padBy === 'string_length') {
+          const padLength = Math.max(0, this.toolData.padCount - line.length);
+          const padding = this.toolData.padSymbol.repeat(padLength);
+
+          if (this.toolData.padPos === 'begin') {
+            return padding + line;
+          } else {
+            return line + padding;
+          }
+        } else {
+          const padding = this.toolData.padSymbol.repeat(this.toolData.padCount);
+
+          if (this.toolData.padPos === 'begin') {
+            return padding + line;
+          } else {
+            return line + padding;
+          }
+        }
+      });
+
+      this.toolResult = paddedLines.join('\n');
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>