fix(url-tools): keep duplicate params, show fragment, add strict encoding

src/tools/url-encoder/url-encoder.vue

@@ -5,7 +5,16 @@ import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 
 const encodeInput = ref('Hello world :)');
-const encodeOutput = computed(() => withDefaultOnError(() => encodeURIComponent(encodeInput.value), ''));
+// RFC 3986 also reserves !, ', (, ) and * which encodeURIComponent leaves as-is (#1445)
+const encodeStrict = useStorage('url-encoder:strict', false);
+
+function strictEncode(value: string) {
+  return encodeURIComponent(value).replace(/[!'()*]/g, ch => `%${ch.charCodeAt(0).toString(16).toUpperCase()}`);
+}
+
+const encodeOutput = computed(() =>
+  withDefaultOnError(() => (encodeStrict.value ? strictEncode(encodeInput.value) : encodeURIComponent(encodeInput.value)), ''),
+);
 
 const encodedValidation = useValidation({
   source: encodeInput,

src/tools/url-parser/url-parser.vue

@@ -21,6 +21,7 @@ const properties: { title: string; key: keyof URL }[] = [
   { title: 'Port', key: 'port' },
   { title: 'Path', key: 'pathname' },
   { title: 'Params', key: 'search' },
+  { title: 'Fragment', key: 'hash' },
 ];
 </script>
 
@@ -49,8 +50,8 @@ const properties: { title: string; key: keyof URL }[] = [
     />
 
     <div
-      v-for="[k, v] in Object.entries(Object.fromEntries(urlParsed?.searchParams.entries() ?? []))"
-      :key="k"
+      v-for="[k, v] in urlParsed?.searchParams.entries() ?? []"
+      :key="`${k}=${v}`"
       mb-2
       w-full
       flex