feat(new-tool): yaml and json converters

1 files changed, 32 insertions, 0 deletions

diff --git a/src/tools/yaml-to-json-converter/yaml-to-json.vue b/src/tools/yaml-to-json-converter/yaml-to-json.vue
new file mode 100644
index 0000000..c066bdd
--- /dev/null
+++ b/src/tools/yaml-to-json-converter/yaml-to-json.vue
@@ -0,0 +1,32 @@
+<template>
+  <format-transformer
+    input-label="Your YAML"
+    input-placeholder="Paste your yaml here..."
+    output-label="JSON from your YAML"
+    output-language="json"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { parse as parseYaml } from 'yaml';
+
+const transformer = (value: string) =>
+  withDefaultOnError(() => {
+    const obj = parseYaml(value);
+    return obj ? JSON.stringify(obj, null, 3) : '';
+  }, '');
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (value: string) => isNotThrowing(() => parseYaml(value)),
+    message: 'Provided YAML is not valid.',
+  },
+];
+</script>
+
+<style lang="less" scoped></style>