feat(hash-text): compute all hashes at the same time (#242)

* compute all hashes at the same time instead of using a select

* add prettier config

* Revert "add prettier config"

This reverts commit fd374ff6fd.

Prettier config is in `.eslintrc.cjs`. Should run the lint script or
should use ESLint's VS Code extension.

* fix: address requested changes

 - rename hashedText to hashText since it's a function and no longer a variable
 - rename to list to algoNames
 - rename to type to AlgoName

removed unused import

* revert back to allow empty value to be hashed; lint

src/tools/hash-text/hash-text.vue

@@ -2,35 +2,22 @@
   <div>
     <n-card>
       <n-input v-model:value="clearText" type="textarea" placeholder="Your string..." :autosize="{ minRows: 3 }" />
-      <br />
-      <br />
-      <n-select v-model:value="algo" :options="Object.keys(algos).map((label) => ({ label, value: label }))" />
 
-      <br />
+      <n-divider />
-      <n-input
+
-        style="text-align: center"
+      <div v-for="algo in algoNames" :key="algo" style="margin: 5px 0">
-        :value="hashedText"
+        <n-input-group>
-        type="textarea"
+          <n-input-group-label style="flex: 0 0 120px"> {{ algo }} </n-input-group-label>
-        placeholder="Your string hash"
+          <input-copyable :value="hashText(algo, clearText)" readonly />
-        :autosize="{ minRows: 1 }"
+        </n-input-group>
-        readonly
+      </div>
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      />
-      <br />
-      <br />
-      <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
-      </n-space>
     </n-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useCopy } from '@/composable/copy';
+import InputCopyable from '../../components/InputCopyable.vue';
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3, RIPEMD160 } from 'crypto-js';
 
 const algos = {
@@ -44,11 +31,11 @@ const algos = {
   RIPEMD160,
 } as const;
 
+type AlgoNames = keyof typeof algos;
+const algoNames = Object.keys(algos) as AlgoNames[];
+
 const clearText = ref(
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus metus blandit dolor lacus natoque ad fusce aliquam velit.',
 );
-const algo = ref<keyof typeof algos>('SHA256');
+const hashText = (algo: AlgoNames, value: string) => algos[algo](value).toString();
-const hashedText = computed(() => algos[algo.value](clearText.value).toString());
-
-const { copy } = useCopy({ source: hashedText, text: 'Hash copied to the clipboard' });
 </script>