aboutsummaryrefslogtreecommitdiff
path: root/src/tools/xml-formatter/xml-formatter.vue
diff options
context:
space:
mode:
authorGravatar jmmanzano <manzano.jm@gmail.com> 2023-06-18 12:27:26 +0200
committerGravatar GitHub <noreply@github.com> 2023-06-18 10:27:26 +0000
commita6bbeaebd8e4f629ff20d6e2386be9c8734f6d8d (patch)
tree586b395e8c4854d362d844a6b15bb9cc85f52b64 /src/tools/xml-formatter/xml-formatter.vue
parentf771e7a99f962463401cdd8addd455782605675f (diff)
downloadit-tools-a6bbeaebd8e4f629ff20d6e2386be9c8734f6d8d.tar.gz
it-tools-a6bbeaebd8e4f629ff20d6e2386be9c8734f6d8d.tar.zst
it-tools-a6bbeaebd8e4f629ff20d6e2386be9c8734f6d8d.zip
feat(new tool): xml formatter (#457)
* feat(new tool): xml formatter * feat(xml-formatter): added happy path e2e tests * refactor(xml-formatter): improved unit tests * refactor(xml-formatter): add better suitable icon * feat(xml-formatter): added happy path e2e tests * feat(xml-formatter): registered xml as syntax highlighter * chore(auto-import): removed unused NSpace --------- Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
Diffstat (limited to '')
-rw-r--r--src/tools/xml-formatter/xml-formatter.vue46
1 files changed, 46 insertions, 0 deletions
diff --git a/src/tools/xml-formatter/xml-formatter.vue b/src/tools/xml-formatter/xml-formatter.vue
new file mode 100644
index 0000000..d59cf8c
--- /dev/null
+++ b/src/tools/xml-formatter/xml-formatter.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { formatXml, isValidXML } from './xml-formatter.service';
+import type { UseValidationRule } from '@/composable/validation';
+
+const defaultValue = '<hello><world>foo</world><world>bar</world></hello>';
+const indentSize = useStorage('xml-formatter:indent-size', 2);
+const collapseContent = useStorage('xml-formatter:collapse-content', true);
+
+function transformer(value: string) {
+ return formatXml(value, {
+ indentation: ' '.repeat(indentSize.value),
+ collapseContent: collapseContent.value,
+ lineSeparator: '\n',
+ });
+}
+
+const rules: UseValidationRule<string>[] = [
+ {
+ validator: isValidXML,
+ message: 'Provided XML is not valid.',
+ },
+];
+</script>
+
+<template>
+ <div important:flex-full important:flex-shrink-0 important:flex-grow-0>
+ <div flex justify-center>
+ <n-form-item label="Collapse content:" label-placement="left">
+ <n-switch v-model:value="collapseContent" />
+ </n-form-item>
+ <n-form-item label="Indent size:" label-placement="left" label-width="100" :show-feedback="false">
+ <n-input-number v-model:value="indentSize" min="0" max="10" w-100px />
+ </n-form-item>
+ </div>
+ </div>
+
+ <format-transformer
+ input-label="Your XML"
+ input-placeholder="Paste your XML here..."
+ output-label="Formatted XML from your XML"
+ output-language="xml"
+ :input-validation-rules="rules"
+ :transformer="transformer"
+ :input-default="defaultValue"
+ />
+</template>