mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 08:16:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(lint): linter auto fix

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-22 23:31:40 +02:00
parent 8e29a97404
commit 086d31eab5
No known key found for this signature in database
GPG key ID: DBD997E935996158
54 changed files with 1122 additions and 1503 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/tools/url-parser/index.ts
View file

@ -4,7 +4,8 @@ import type { ITool } from './../Tool';
export const tool: ITool = {
name: 'Url parser',
path: '/url-parser',
description: 'Parse an url string to get all the differents parts (protocol, origin, params, port, username-password, ...)',
description:
'Parse an url string to get all the differents parts (protocol, origin, params, port, username-password, ...)',
keywords: ['url', 'parser', 'protocol', 'origin', 'params', 'port', 'username', 'password', 'href'],
component: () => import('./url-parser.vue'),
icon: Unlink,

106
src/tools/url-parser/url-parser.vue
View file

@ -1,55 +1,29 @@
<template>
<n-card>
<n-form-item
label="Your url to parse:"
:feedback="validation.message"
:validation-status="validation.status"
>
<n-input
v-model:value="urlToParse"
placeholder="Your url to parse..."
/>
<n-form-item label="Your url to parse:" :feedback="validation.message" :validation-status="validation.status">
<n-input v-model:value="urlToParse" placeholder="Your url to parse..." />
</n-form-item>
<n-divider style="margin-top: 0;" />
<n-divider style="margin-top: 0" />
<n-form>
<n-input-group
v-for="{title, key} in properties"
:key="key"
>
<n-input-group-label
style="flex: 0 0 120px;"
>
{{ title }}:
</n-input-group-label>
<input-copyable
:value="(urlParsed?.[key] as string) ?? ''"
readonly
placeholder=" "
/>
<n-input-group v-for="{ title, key } in properties" :key="key">
<n-input-group-label style="flex: 0 0 120px"> {{ title }}: </n-input-group-label>
<input-copyable :value="(urlParsed?.[key] as string) ?? ''" readonly placeholder=" " />
</n-input-group>
<n-input-group
v-for="[k, v] in Object.entries(Object.fromEntries(urlParsed?.searchParams.entries() ?? []))"
:key="k"
>
<n-input-group-label
style="flex: 0 0 120px;"
>
>
<n-input-group-label style="flex: 0 0 120px">
<n-icon :component="SubdirectoryArrowRightRound" />
</n-input-group-label>
<input-copyable
:value="k"
readonly
/>
<input-copyable
:value="v"
readonly
/>
<input-copyable :value="k" readonly />
<input-copyable :value="v" readonly />
</n-input-group>
</n-form>
</n-card>
</n-card>
</template>
<script setup lang="ts">
@ -58,45 +32,47 @@ import { SubdirectoryArrowRightRound } from '@vicons/material';
import InputCopyable from '../../components/InputCopyable.vue';
import { useValidation } from '@/composable/validation';
const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash')
const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash');
const urlParsed = computed<URL | undefined>(() => {
try {
return new URL(urlToParse.value)
return new URL(urlToParse.value);
} catch (_) {
return undefined
return undefined;
}
})
const validation = useValidation({source: urlToParse, rules: [
{validator: (value) => {
try {
new URL(value)
return true;
} catch (_) {
return false
}
}, message: 'Invalid url'}
]})
const properties: {title: string, key: keyof URL}[] = [
{title: 'Protocol', key: 'protocol'},
{title: 'Username', key: 'username'},
{title: 'Password', key: 'password'},
{title: 'Hostname', key: 'hostname'},
{title: 'Port', key: 'port'},
{title: 'Path', key: 'pathname'},
{title: 'Params', key: 'search'},
]
});
const validation = useValidation({
source: urlToParse,
rules: [
{
validator: (value) => {
try {
new URL(value);
return true;
} catch (_) {
return false;
}
},
message: 'Invalid url',
},
],
});
const properties: { title: string; key: keyof URL }[] = [
{ title: 'Protocol', key: 'protocol' },
{ title: 'Username', key: 'username' },
{ title: 'Password', key: 'password' },
{ title: 'Hostname', key: 'hostname' },
{ title: 'Port', key: 'port' },
{ title: 'Path', key: 'pathname' },
{ title: 'Params', key: 'search' },
];
</script>
<style lang="less" scoped>
.n-input-group-label {
text-align: right;
}
.n-input-group {
margin: 2px 0;
}
</style>
</style>