diff options
Diffstat (limited to 'src/tools/url-parser/url-parser.vue')
-rw-r--r-- | src/tools/url-parser/url-parser.vue | 60 |
1 files changed, 30 insertions, 30 deletions
diff --git a/src/tools/url-parser/url-parser.vue b/src/tools/url-parser/url-parser.vue index 04ab939..cadd07e 100644 --- a/src/tools/url-parser/url-parser.vue +++ b/src/tools/url-parser/url-parser.vue @@ -1,3 +1,30 @@ +<script setup lang="ts"> +import { computed, ref } from 'vue'; +import InputCopyable from '../../components/InputCopyable.vue'; +import { isNotThrowing } from '@/utils/boolean'; +import { withDefaultOnError } from '@/utils/defaults'; + +const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash'); + +const urlParsed = computed(() => withDefaultOnError(() => new URL(urlToParse.value), undefined)); +const urlValidationRules = [ + { + validator: (value: string) => isNotThrowing(() => new URL(value)), + 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> + <template> <c-card> <c-input-text @@ -10,7 +37,7 @@ <n-divider /> - <input-copyable + <InputCopyable v-for="{ title, key } in properties" :key="key" :label="title" @@ -33,39 +60,12 @@ <icon-mdi-arrow-right-bottom /> </div> - <input-copyable :value="k" readonly /> - <input-copyable :value="v" readonly /> + <InputCopyable :value="k" readonly /> + <InputCopyable :value="v" readonly /> </div> </c-card> </template> -<script setup lang="ts"> -import { isNotThrowing } from '@/utils/boolean'; -import { withDefaultOnError } from '@/utils/defaults'; -import { computed, ref } from 'vue'; -import InputCopyable from '../../components/InputCopyable.vue'; - -const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash'); - -const urlParsed = computed(() => withDefaultOnError(() => new URL(urlToParse.value), undefined)); -const urlValidationRules = [ - { - validator: (value: string) => isNotThrowing(() => new URL(value)), - 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; |