Add docker compose/decompose tool

package.json

@@ -9,31 +9,33 @@
   },
   "dependencies": {
     "@monaco-editor/loader": "^1.4.0",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
-    "axios": "^1.6.0",
+    "axios": "^1.7.7",
     "bcryptjs": "^2.4.3",
+    "composerize": "^1.6.12",
     "cronstrue": "^2.50.0",
+    "decomposerize": "^1.4.1",
     "easyqrcodejs": "^4.6.1",
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.4",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.47",
     "sha1": "^1.1.1",
-    "sql-formatter": "^15.3.2",
+    "sql-formatter": "^15.4.5",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.14",
-    "vue": "^3.4.31",
+    "vue": "^3.5.12",
     "vue-axios": "^3.5.2",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.10.3",
+    "@rushstack/eslint-patch": "^1.10.4",
     "@vitejs/plugin-vue": "^2.3.4",
     "@vue/eslint-config-prettier": "^7.1.0",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-vue": "^8.7.1",
     "prettier": "^2.8.8",
-    "sass": "^1.77.6",
+    "sass": "^1.80.4",
     "vite": "^2.9.18",
     "vue-cli-plugin-tailwind": "~3.0.0"
   }

src/assets/app.scss

@@ -1,6 +1,6 @@
-@import "tailwindcss/base";
+@use "tailwindcss/base";
-@import "tailwindcss/components";
+@use "tailwindcss/components";
-@import "tailwindcss/utilities";
+@use "tailwindcss/utilities";
 
 
 /**

src/router/index.js

@@ -147,6 +147,11 @@ const router = createRouter({
       name: "docker_rename_volume",
       component: () => import("../views/docker/RenameVolume.vue"),
     },
+    {
+      path: "/docker_convert_run_compose",
+      name: "docker_convert_run_compose",
+      component: () => import("../views/docker/ConvertRunCompose.vue"),
+    },
 
     /**
      * SQL manipulation

src/stores/toolsStore.js

@@ -27,6 +27,7 @@ export const useToolsStore = defineStore("tools", {
         "%_of_number": "% of number",
       },
       Docker: {
+        docker_convert_run_compose: "Convert run compose",
         docker_rename_volume: "Rename volume",
       },
       GO: {

src/views/docker/ConvertRunCompose.vue

@@ -0,0 +1,96 @@
+<template>
+  <h2 class="tool-title">Docker run/compose</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_delimiter">Mode</label>
+
+    <div>
+      <input
+        id="mode_run"
+        value="run"
+        name="mode"
+        v-model="toolData.mode"
+        v-on:change="result"
+        type="radio"
+      />
+      <label for="mode_run"> to run</label><br />
+      <input
+        id="mode_compose"
+        value="compose"
+        name="mode"
+        v-model="toolData.mode"
+        v-on:change="result"
+        type="radio"
+      />
+      <label for="mode_compose"> to compose</label><br />
+    </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";
+import composerize from "composerize";
+import decomposerize from "decomposerize";
+
+export default {
+  components: {
+    MonacoEditor,
+  },
+  data() {
+    return {
+      toolData: {
+        data: "",
+        mode: "compose",
+      },
+      toolResult: "",
+    };
+  },
+  methods: {
+    result() {
+      if (!this.toolData.data.length) {
+        this.toolResult = "";
+        return;
+      }
+
+      try {
+        switch (this.toolData.mode) {
+          case "compose":
+            this.toolResult = composerize(this.toolData.data);
+            break;
+          case "run":
+            this.toolResult = decomposerize(this.toolData.data, {
+              command: "docker run",
+              rm: true,
+              detach: true,
+              multiline: true,
+              "long-args": false,
+              "arg-value-separator": " ",
+            });
+            break;
+        }
+      } catch (e) {
+        this.toolResult = e;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss"></style>

src/views/php/Serialize.vue

@@ -19,7 +19,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="mode_serialize">serialize</label><br />
+      <label for="mode_serialize"> serialize</label><br />
       <input
         id="mode_unserialize"
         value="unserialize"
@@ -28,7 +28,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="mode_unserialize">unserialize</label><br />
+      <label for="mode_unserialize"> unserialize</label><br />
     </div>
   </div>
 

src/views/sql/SplitInView.vue

@@ -41,7 +41,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="wrap_in_quotes_no">No</label><br />
+      <label for="wrap_in_quotes_no"> no</label><br />
       <input
         id="wrap_in_quotes_single"
         value="single"
@@ -50,7 +50,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="wrap_in_quotes_single">Single</label><br />
+      <label for="wrap_in_quotes_single"> single</label><br />
       <input
         id="wrap_in_quotes_double"
         value="double"
@@ -59,7 +59,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="wrap_in_quotes_double">Double</label>
+      <label for="wrap_in_quotes_double"> double</label>
     </div>
   </div>
 

src/views/strings/FixRuEnKeyboard.vue

@@ -19,7 +19,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="keyboard_mode_en_ru">en -> ru</label><br />
+      <label for="keyboard_mode_en_ru"> en -> ru</label><br />
       <input
         id="keyboard_mode_ru_en"
         value="ru-en"
@@ -28,7 +28,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="keyboard_mode_ru_en">ru -> en</label>
+      <label for="keyboard_mode_ru_en"> ru -> en</label>
     </div>
   </div>
 

src/views/strings/Length.vue

@@ -27,7 +27,7 @@
         :disabled="toolData.dataDelimiter.length"
         type="radio"
       />
-      <label for="count_mode_characters">characters</label><br />
+      <label for="count_mode_characters"> characters</label><br />
       <input
         id="count_mode_words"
         value="words"
@@ -37,7 +37,7 @@
         :disabled="toolData.dataDelimiter.length"
         type="radio"
       />
-      <label for="count_mode_words">words</label><br />
+      <label for="count_mode_words"> words</label><br />
       <input
         id="count_mode_lines"
         value="lines"
@@ -47,7 +47,7 @@
         :disabled="toolData.dataDelimiter.length"
         type="radio"
       />
-      <label for="count_mode_lines">lines</label>
+      <label for="count_mode_lines"> lines</label>
     </div>
   </div>
 

src/views/strings/Pad.vue

@@ -43,7 +43,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="pad_pos_begin">begin</label><br />
+      <label for="pad_pos_begin"> begin</label><br />
       <input
         id="pad_pos_end"
         value="end"
@@ -52,7 +52,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="pad_pos_end">end</label>
+      <label for="pad_pos_end"> end</label>
     </div>
   </div>
 
@@ -68,7 +68,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="pad_by_repeat_symbol">repeat symbol</label><br />
+      <label for="pad_by_repeat_symbol"> repeat symbol</label><br />
       <input
         id="pad_by_string_length"
         value="string_length"
@@ -77,7 +77,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="pad_by_string_length">to string length</label>
+      <label for="pad_by_string_length"> to string length</label>
     </div>
   </div>
 

src/views/strings/SortLines.vue

@@ -19,7 +19,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="sort_mode_alpha">alphabetically</label><br />
+      <label for="sort_mode_alpha"> alphabetically</label><br />
       <input
         id="sort_mode_numerically"
         value="numerically"
@@ -28,7 +28,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="sort_mode_numerically">numerically</label><br />
+      <label for="sort_mode_numerically"> numerically</label><br />
       <input
         id="sort_mode_by_length"
         value="by_length"
@@ -37,7 +37,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="sort_mode_by_length">by length</label><br />
+      <label for="sort_mode_by_length"> by length</label><br />
       <input
         id="sort_mode_random"
         value="random"
@@ -46,7 +46,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="sort_mode_random">random</label><br />
+      <label for="sort_mode_random"> random</label><br />
       <br />
       <input
         id="sort_mode_reverse"
@@ -56,7 +56,7 @@
         v-on:change="result"
         type="checkbox"
       />
-      <label for="sort_mode_reverse">reverse</label>
+      <label for="sort_mode_reverse"> reverse</label>
     </div>
   </div>
 

src/views/strings/ToLowerUppper.vue

@@ -19,7 +19,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="case_mode_lower">to lower</label><br />
+      <label for="case_mode_lower"> to lower</label><br />
       <input
         id="case_mode_upper"
         value="upper"
@@ -28,7 +28,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="case_mode_upper">to upper</label>
+      <label for="case_mode_upper"> to upper</label>
     </div>
   </div>
 

src/views/strings/UrlEncodeDecode.vue

@@ -19,7 +19,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="encode_mode_encode">encode</label><br />
+      <label for="encode_mode_encode"> encode</label><br />
       <input
         id="encode_mode_decode"
         value="decode"
@@ -28,7 +28,7 @@
         v-on:change="result"
         type="radio"
       />
-      <label for="encode_mode_decode">decode</label>
+      <label for="encode_mode_decode"> decode</label>
     </div>
   </div>
 

src/views/unix/FileBase64EncodeDecode.vue

@@ -37,7 +37,7 @@
         v-model="toolData.base64Mode"
         type="radio"
       />
-      <label for="base64_mode_encode">file -> base64</label><br />
+      <label for="base64_mode_encode"> file -> base64</label><br />
       <input
         id="base64_mode_decode"
         value="decode"
@@ -45,7 +45,7 @@
         v-model="toolData.base64Mode"
         type="radio"
       />
-      <label for="base64_mode_decode">base64 -> file</label>
+      <label for="base64_mode_decode"> base64 -> file</label>
     </div>
   </div>
 

vite.config.js

@@ -16,6 +16,14 @@ export default defineConfig({
       "@node_modules": pathTo("./node_modules"),
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: "modern",
+        importers: [],
+      },
+    },
+  },
   server: {
     host: true,
     port: 3000,