chore(release): 2.3.2

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.3.2](https://github.com/CorentinTh/it-tools/compare/v2.3.1...v2.3.2) (2022-05-09)
+
+
+### Bug Fixes
+
+* **base-converter:** responsive input ([0b0cbd5](https://github.com/CorentinTh/it-tools/commit/0b0cbd55c3809ded2eedfa0b2238bc950b01516a))
+* **base64-converter:** async onUpload callback ([84cf1bb](https://github.com/CorentinTh/it-tools/commit/84cf1bb9645c5ae31579098df59471f7d99f6f0c))
+* **typo:** misspelings ([9755e51](https://github.com/CorentinTh/it-tools/commit/9755e51fe216e5e25c56417152e70cb5bce26b11))
+
+
+### Refactors
+
+* **responsive:** row layout for multicards on big screens ([e21230b](https://github.com/CorentinTh/it-tools/commit/e21230bbd9550ba3315607b021a60a4f9f9e1b61))
+
 ### [2.3.1](https://github.com/CorentinTh/it-tools/compare/v2.3.0...v2.3.1) (2022-04-24)
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "it-tools",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "it-tools",
-      "version": "2.3.1",
+      "version": "2.3.2",
       "dependencies": {
         "@it-tools/bip39": "^0.0.4",
         "@vicons/material": "^0.12.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",

src/layouts/tool.layout.vue

@@ -33,20 +33,36 @@ useHead(head);
           {{ route.meta.description }}
         </div>
       </div>
+    </div>
 
+    <div class="tool-content">
       <slot />
     </div>
   </base-layout>
 </template>
 
 <style lang="less" scoped>
+.tool-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  ::v-deep(& > *) {
+    flex: 0 1 600px;
+  }
+}
+
 .tool-layout {
-  max-width: 700px;
+  max-width: 600px;
   margin: 0 auto;
   box-sizing: border-box;
 
   .tool-header {
     padding: 40px 0;
+    width: 100%;
 
     .n-h1 {
       opacity: 0.9;

src/tools/base64-converter/base64-converter.vue

@@ -40,7 +40,7 @@ const fileInput = ref() as Ref<File>;
 const { base64: fileBase64 } = useBase64(fileInput);
 const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: 'Base64 string copied to the clipboard' });
 
-function onUpload({ file: { file } }: { file: UploadFileInfo }) {
+async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
   if (file) {
     fileList.value = [];
     fileInput.value = file;
@@ -50,8 +50,7 @@ function onUpload({ file: { file } }: { file: UploadFileInfo }) {
 
 <style lang="less" scoped>
 .n-input,
-.n-upload,
+.n-upload {
-.n-card {
   margin-bottom: 15px;
 }
 

src/tools/base64-converter/index.ts

@@ -5,7 +5,7 @@ export const tool: ITool = {
   name: 'Base64 converter',
   path: '/base64-converter',
   description: "Convert string, files or images into a it's base64 representation.",
-  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'convertion', 'web', 'data', 'format'],
+  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
   component: () => import('./base64-converter.vue'),
   icon: FileDigit,
   redirectFrom: ['/file-to-base64', '/base64-string-converter'],

src/tools/bcrypt/bcrypt.vue

@@ -22,7 +22,6 @@
     </n-space>
   </n-card>
 
-  <br />
   <n-card title="Compare string with hash">
     <n-form label-width="120">
       <n-form-item label="Your string: " label-placement="left">

src/tools/crontab-generator/crontab-generator.vue

@@ -28,7 +28,6 @@
       </n-form>
     </n-space>
   </n-card>
-  <br />
   <n-card>
     <pre>
 ┌──────────── [optional] seconds (0 - 59)

src/tools/date-time-converter/index.ts

@@ -5,7 +5,7 @@ export const tool: ITool = {
   name: 'Date-time converter',
   path: '/date-converter',
   description: 'Convert date and time into the various different formats',
-  keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'mounth', 'day', 'minute', 'seconde'],
+  keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
   component: () => import('./date-time-converter.vue'),
   icon: Calendar,
 };

src/tools/device-information/device-information.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card v-for="{ name, information } in sections" :key="name" :title="name" style="margin-bottom: 15px">
+  <n-card v-for="{ name, information } in sections" :key="name" :title="name">
     <n-grid cols="1 400:2" x-gap="12" y-gap="12">
       <n-gi v-for="{ label, value } in information" :key="label" class="information">
         <n-card :bordered="false" embedded>
@@ -66,7 +66,7 @@ const sections = [
         value: computed(() => navigator.languages.join(', ')),
       },
       {
-        label: 'Plateform',
+        label: 'Platform',
         value: computed(() => navigator.platform),
       },
       {

src/tools/encryption/encryption.vue

@@ -1,81 +1,78 @@
 <template>
-  <div>
+  <n-card title="Encrypt">
-    <n-card title="Encrypt">
+    <n-space item-style="flex: 1 1 0">
-      <n-space item-style="flex: 1 1 0">
+      <n-form-item label="Your text:" :show-feedback="false">
-        <n-form-item label="Your text:" :show-feedback="false">
-          <n-input
-            v-model:value="cypherInput"
-            type="textarea"
-            placeholder="The string to cypher"
-            :autosize="{ minRows: 4 }"
-          />
-        </n-form-item>
-        <n-space vertical>
-          <n-form-item label="Your secret key:" :show-feedback="false">
-            <n-input v-model:value="cypherSecret" />
-          </n-form-item>
-          <n-form-item label="Encryption algorithm:" :show-feedback="false">
-            <n-select
-              v-model:value="cypherAlgo"
-              :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-            />
-          </n-form-item>
-        </n-space>
-      </n-space>
-      <br />
-      <n-form-item label="Yout text encrypted:" :show-feedback="false">
         <n-input
-          :value="cypherOutput"
+          v-model:value="cypherInput"
           type="textarea"
-          placeholder="Your string hash"
+          placeholder="The string to cypher"
-          :autosize="{ minRows: 2 }"
+          :autosize="{ minRows: 4 }"
-          readonly
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
         />
       </n-form-item>
-    </n-card>
+      <n-space vertical>
+        <n-form-item label="Your secret key:" :show-feedback="false">
+          <n-input v-model:value="cypherSecret" />
+        </n-form-item>
+        <n-form-item label="Encryption algorithm:" :show-feedback="false">
+          <n-select
+            v-model:value="cypherAlgo"
+            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+          />
+        </n-form-item>
+      </n-space>
+    </n-space>
     <br />
-    <n-card title="Decrypt">
+    <n-form-item label="Your text encrypted:" :show-feedback="false">
-      <n-space item-style="flex: 1 1 0">
+      <n-input
-        <n-form-item label="Your encrypted text:" :show-feedback="false">
+        :value="cypherOutput"
-          <n-input
+        type="textarea"
-            v-model:value="decryptInput"
+        placeholder="Your string hash"
-            type="textarea"
+        :autosize="{ minRows: 2 }"
-            placeholder="The string to cypher"
+        readonly
-            :autosize="{ minRows: 4 }"
+        autocomplete="off"
-          />
+        autocorrect="off"
-        </n-form-item>
+        autocapitalize="off"
-        <n-space vertical>
+        spellcheck="false"
-          <n-form-item label="Your secret key:" :show-feedback="false">
+      />
-            <n-input v-model:value="decryptSecret" />
+    </n-form-item>
-          </n-form-item>
+  </n-card>
-          <n-form-item label="Encryption algorithm:" :show-feedback="false">
+  <n-card title="Decrypt">
-            <n-select
+    <n-space item-style="flex: 1 1 0">
-              v-model:value="decryptAlgo"
+      <n-form-item label="Your encrypted text:" :show-feedback="false">
-              :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-            />
-          </n-form-item>
-        </n-space>
-      </n-space>
-      <br />
-      <n-form-item label="Yout decrypted text:" :show-feedback="false">
         <n-input
-          :value="decryptOutput"
+          v-model:value="decryptInput"
           type="textarea"
-          placeholder="Your string hash"
+          placeholder="The string to cypher"
-          :autosize="{ minRows: 2 }"
+          :autosize="{ minRows: 4 }"
-          readonly
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
         />
       </n-form-item>
-    </n-card>
+      <n-space vertical>
-  </div>
+        <n-form-item label="Your secret key:" :show-feedback="false">
+          <n-input v-model:value="decryptSecret" />
+        </n-form-item>
+        <n-form-item label="Encryption algorithm:" :show-feedback="false">
+          <n-select
+            v-model:value="decryptAlgo"
+            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+          />
+        </n-form-item>
+      </n-space>
+    </n-space>
+    <br />
+    <n-form-item label="Your decrypted text:" :show-feedback="false">
+      <n-input
+        :value="decryptOutput"
+        type="textarea"
+        placeholder="Your string hash"
+        :autosize="{ minRows: 2 }"
+        readonly
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </n-form-item>
+  </n-card>
 </template>
 
 <script setup lang="ts">

src/tools/encryption/index.ts

@@ -5,7 +5,7 @@ export const tool: ITool = {
   name: 'Encrypt / decrypt text',
   path: '/encryption',
   description: 'Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4.',
-  keywords: ['cypher', 'uncypher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
+  keywords: ['cypher', 'encipher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
   component: () => import('./encryption.vue'),
   icon: Lock,
   redirectFrom: ['/cypher'],

src/tools/git-memo/index.ts

@@ -4,9 +4,8 @@ import type { ITool } from '../Tool';
 export const tool: ITool = {
   name: 'Git cheatsheet',
   path: '/git-memo',
-  description:
+  description: 'Git is a decentralized version management software. With this cheatsheet you will have a quick access to the most common git commands.',
-    'Git is a decentralized version management sofware. With this cheatsheet you will have a quick acces to the most common git commands.',
+  keywords: ['git', 'push', 'force', 'pull', 'commit', 'amend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
-  keywords: ['git', 'push', 'force', 'pull', 'commit', 'ammend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
   component: () => import('./git-memo.vue'),
   icon: BrandGit,
 };

src/tools/html-entities/html-entities.vue

@@ -23,7 +23,6 @@
       <n-button secondary @click="copyEscaped"> Copy </n-button>
     </n-space>
   </n-card>
-  <br />
   <n-card title="Unescape html entities">
     <n-form-item label="Your escaped string :">
       <n-input

src/tools/integer-base-converter/index.ts

@@ -4,8 +4,8 @@ import type { ITool } from '../Tool';
 export const tool: ITool = {
   name: 'Integer base converter',
   path: '/base-converter',
-  description: 'Convert numver between different bases (decimal, hexadecimal, binary, octale, base64, ...)',
+  description: 'Convert number between different bases (decimal, hexadecimal, binary, octal, base64, ...)',
-  keywords: ['integer', 'number', 'base', 'convertion', 'decimal', 'hexadecimal', 'binary', 'octale', 'base64'],
+  keywords: ['integer', 'number', 'base', 'conversion', 'decimal', 'hexadecimal', 'binary', 'octal', 'base64'],
   component: () => import('./integer-base-converter.vue'),
   icon: ArrowsLeftRight,
 };

src/tools/integer-base-converter/integer-base-converter.vue

@@ -1,27 +1,37 @@
 <template>
   <div>
     <n-card>
-      <n-input-group>
+      <div v-if="styleStore.isSmallScreen">
-        <n-input-group-label style="width: 200px"> Input number: </n-input-group-label>
+        <n-input-group>
-        <n-input-number v-model:value="inputNumber" min="0" />
+          <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
+          <n-input-number v-model:value="inputNumber" min="0" style="width: 100%" />
+        </n-input-group>
+        <n-input-group>
+          <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
+          <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100%" />
+        </n-input-group>
+      </div>
 
-        <n-input-group-label style="width: 200px"> Input base: </n-input-group-label>
+      <n-input-group v-else>
-        <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100px" />
+        <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
+        <n-input-number v-model:value="inputNumber" min="0" />
+        <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
+        <n-input-number v-model:value="inputBase" max="64" min="2" />
       </n-input-group>
       <n-divider />
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Binary (2): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Binary (2): </n-input-group-label>
         <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })" readonly />
       </n-input-group>
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Octale (8): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Octal (8): </n-input-group-label>
         <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })" readonly />
       </n-input-group>
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Decimal (10): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Decimal (10): </n-input-group-label>
         <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
           readonly
@@ -29,7 +39,7 @@
       </n-input-group>
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Hexadecimal (16): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Hexadecimal (16): </n-input-group-label>
         <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
           readonly
@@ -37,15 +47,15 @@
       </n-input-group>
 
       <n-input-group>
-        <n-input-group-label style="width: 200px"> Base64 (64): </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 170px"> Base64 (64): </n-input-group-label>
         <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
           readonly
         />
       </n-input-group>
       <n-input-group>
-        <n-input-group-label style="width: 90px"> Custom: </n-input-group-label>
+        <n-input-group-label style="flex: 0 0 85px"> Custom: </n-input-group-label>
-        <n-input-number v-model:value="outputBase" style="width: 110px" max="64" min="2" />
+        <n-input-number v-model:value="outputBase" style="flex: 0 0 86px" max="64" min="2" />
         <input-copyable
           :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
           readonly
@@ -59,6 +69,9 @@
 import { ref } from 'vue';
 import { convertBase } from './integer-base-converter.model';
 import InputCopyable from '../../components/InputCopyable.vue';
+import { useStyleStore } from '@/stores/style.store';
+
+const styleStore = useStyleStore();
 
 const inputNumber = ref(42);
 const inputBase = ref(10);

src/tools/random-port-generator/index.ts

@@ -5,7 +5,7 @@ export const tool: ITool = {
   name: 'Random port generator',
   path: '/random-port-generator',
   description: 'Generate random port numbers outside of the range of "known" ports (0-1023).',
-  keywords: ['system', 'port', 'lan', 'generator', 'random', 'developement', 'computer'],
+  keywords: ['system', 'port', 'lan', 'generator', 'random', 'development', 'computer'],
   component: () => import('./random-port-generator.vue'),
   icon: Server,
 };

src/tools/url-encoder/url-encoder.vue

@@ -1,63 +1,60 @@
 <template>
-  <div>
+  <n-card title="Encode">
-    <n-card title="Encode">
+    <n-form-item
-      <n-form-item
+      label="Your string :"
-        label="Your string :"
+      :feedback="encodedValidation.message"
-        :feedback="encodedValidation.message"
+      :validation-status="encodedValidation.status"
-        :validation-status="encodedValidation.status"
+    >
-      >
+      <n-input
-        <n-input
+        v-model:value="encodeInput"
-          v-model:value="encodeInput"
+        type="textarea"
-          type="textarea"
+        placeholder="The string to encode"
-          placeholder="The string to encode"
+        :autosize="{ minRows: 2 }"
-          :autosize="{ minRows: 2 }"
+      />
-        />
+    </n-form-item>
-      </n-form-item>
 
-      <n-form-item label="Your string encoded :">
+    <n-form-item label="Your string encoded :">
-        <n-input
+      <n-input
-          :value="encodeOutput"
+        :value="encodeOutput"
-          type="textarea"
+        type="textarea"
-          readonly
+        readonly
-          placeholder="Your string encoded"
+        placeholder="Your string encoded"
-          :autosize="{ minRows: 2 }"
+        :autosize="{ minRows: 2 }"
-        />
+      />
-      </n-form-item>
+    </n-form-item>
 
-      <n-space justify="center">
+    <n-space justify="center">
-        <n-button secondary @click="copyEncoded"> Copy </n-button>
+      <n-button secondary @click="copyEncoded"> Copy </n-button>
-      </n-space>
+    </n-space>
-    </n-card>
+  </n-card>
-    <br />
+  <n-card title="Decode">
-    <n-card title="Decode">
+    <n-form-item
-      <n-form-item
+      label="Your encoded string :"
-        label="Your encoded string :"
+      :feedback="decodeValidation.message"
-        :feedback="decodeValidation.message"
+      :validation-status="decodeValidation.status"
-        :validation-status="decodeValidation.status"
+    >
-      >
+      <n-input
-        <n-input
+        v-model:value="decodeInput"
-          v-model:value="decodeInput"
+        type="textarea"
-          type="textarea"
+        placeholder="The string to decode"
-          placeholder="The string to decode"
+        :autosize="{ minRows: 2 }"
-          :autosize="{ minRows: 2 }"
+      />
-        />
+    </n-form-item>
-      </n-form-item>
 
-      <n-form-item label="Your string decoded :">
+    <n-form-item label="Your string decoded :">
-        <n-input
+      <n-input
-          :value="decodeOutput"
+        :value="decodeOutput"
-          type="textarea"
+        type="textarea"
-          readonly
+        readonly
-          placeholder="Your string decoded"
+        placeholder="Your string decoded"
-          :autosize="{ minRows: 2 }"
+        :autosize="{ minRows: 2 }"
-        />
+      />
-      </n-form-item>
+    </n-form-item>
 
-      <n-space justify="center">
+    <n-space justify="center">
-        <n-button secondary @click="copyDecoded"> Copy </n-button>
+      <n-button secondary @click="copyDecoded"> Copy </n-button>
-      </n-space>
+    </n-space>
-    </n-card>
+  </n-card>
-  </div>
 </template>
 
 <script setup lang="ts">

src/tools/url-parser/index.ts

@@ -4,8 +4,7 @@ import type { ITool } from './../Tool';
 export const tool: ITool = {
   name: 'Url parser',
   path: '/url-parser',
-  description:
+  description: 'Parse an url string to get all the different parts (protocol, origin, params, port, username-password, ...)',
-    'Parse an url string to get all the differents parts (protocol, origin, params, port, username-password, ...)',
   keywords: ['url', 'parser', 'protocol', 'origin', 'params', 'port', 'username', 'password', 'href'],
   component: () => import('./url-parser.vue'),
   icon: Unlink,