feat(new-tool): math evaluator

3 files changed, 83 insertions, 0 deletions

diff --git a/src/tools/index.ts b/src/tools/index.ts
index 90e217c..72b2915 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './tool';
 
+import { tool as mathEvaluator } from './math-evaluator';
 import { tool as jsonViewer } from './json-viewer';
 import { tool as htmlEntities } from './html-entities';
 import { tool as urlParser } from './url-parser';
@@ -54,6 +55,11 @@ export const toolsByCategory: ToolCategory[] = [
     components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer],
   },
   {
+    name: 'Math',
+    icon: LockOpen,
+    components: [mathEvaluator],
+  },
+  {
     name: 'Text',
     icon: LockOpen,
     components: [loremIpsumGenerator, textStatistics],
diff --git a/src/tools/math-evaluator/index.ts b/src/tools/math-evaluator/index.ts
new file mode 100644
index 0000000..ad783d2
--- /dev/null
+++ b/src/tools/math-evaluator/index.ts
@@ -0,0 +1,39 @@
+import { Math } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Math evaluator',
+  path: '/math-evaluator',
+  description: `Evaluate math expression, like a calculator on steroid (you can use function like sqrt, cos, sin, abs, ...)`,
+  keywords: [
+    'math',
+    'evaluator',
+    'acos',
+    'acosh',
+    'acot',
+    'acoth',
+    'acsc',
+    'acsch',
+    'asec',
+    'asech',
+    'asin',
+    'asinh',
+    'atan',
+    'atan2',
+    'atanh',
+    'cos',
+    'cosh',
+    'cot',
+    'coth',
+    'csc',
+    'csch',
+    'sec',
+    'sech',
+    'sin',
+    'sinh',
+    'tan',
+    'tanh',
+  ],
+  component: () => import('./math-evaluator.vue'),
+  icon: Math,
+});
diff --git a/src/tools/math-evaluator/math-evaluator.vue b/src/tools/math-evaluator/math-evaluator.vue
new file mode 100644
index 0000000..26fb6b1
--- /dev/null
+++ b/src/tools/math-evaluator/math-evaluator.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <n-input
+      v-model:value="expression"
+      rows="1"
+      type="textarea"
+      placeholder="Your math expression (ex: 2*sqrt(6) )..."
+      size="large"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+    <br />
+    <br />
+
+    <n-card v-if="result !== ''" title="Result ">
+      {{ result }}
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { evaluate } from 'mathjs';
+import { computed, ref } from 'vue';
+
+const expression = ref('');
+
+const result = computed(() => {
+  try {
+    return evaluate(expression.value) ?? '';
+  } catch (_) {
+    return '';
+  }
+});
+</script>
+
+<style lang="less" scoped></style>