Add docker compose/decompose tool

package.json

@@ -9,31 +9,33 @@
   },
   "dependencies": {
     "@monaco-editor/loader": "^1.4.0",
-    "autoprefixer": "^10.4.19",
-    "axios": "^1.6.0",
+    "autoprefixer": "^10.4.20",
+    "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",
-    "postcss": "^8.4.39",
+    "pinia": "^2.2.4",
+    "postcss": "^8.4.47",
     "sha1": "^1.1.1",
-    "sql-formatter": "^15.3.2",
-    "tailwindcss": "^3.4.4",
-    "vue": "^3.4.31",
+    "sql-formatter": "^15.4.5",
+    "tailwindcss": "^3.4.14",
+    "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";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@use "tailwindcss/base";
+@use "tailwindcss/components";
+@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/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>
 

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,