diff options
Diffstat (limited to 'src/tools/xml-formatter/xml-formatter.vue')
-rw-r--r-- | src/tools/xml-formatter/xml-formatter.vue | 46 |
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> |