refactor(ui): replaced some n-input with c-input-text

1 files changed, 39 insertions, 31 deletions

diff --git a/src/tools/url-parser/url-parser.vue b/src/tools/url-parser/url-parser.vue
index ac80f61..04ab939 100644
--- a/src/tools/url-parser/url-parser.vue
+++ b/src/tools/url-parser/url-parser.vue
@@ -1,51 +1,59 @@
 <template>
   <c-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>
+    <c-input-text
+      v-model:value="urlToParse"
+      label="Your url to parse:"
+      placeholder="Your url to parse..."
+      raw-text
+      :validation-rules="urlValidationRules"
+    />
 
-    <n-divider style="margin-top: 0" />
+    <n-divider />
 
-    <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>
+    <input-copyable
+      v-for="{ title, key } in properties"
+      :key="key"
+      :label="title"
+      :value="(urlParsed?.[key] as string) ?? ''"
+      readonly
+      label-position="left"
+      label-width="110px"
+      mb-2
+      placeholder=" "
+    />
 
-      <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-icon :component="SubdirectoryArrowRightRound" />
-        </n-input-group-label>
-        <input-copyable :value="k" readonly />
-        <input-copyable :value="v" readonly />
-      </n-input-group>
-    </n-form>
+    <div
+      v-for="[k, v] in Object.entries(Object.fromEntries(urlParsed?.searchParams.entries() ?? []))"
+      :key="k"
+      mb-2
+      w-full
+      flex
+    >
+      <div style="flex: 1 0 110px">
+        <icon-mdi-arrow-right-bottom />
+      </div>
+
+      <input-copyable :value="k" readonly />
+      <input-copyable :value="v" readonly />
+    </div>
   </c-card>
 </template>
 
 <script setup lang="ts">
-import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
-import { SubdirectoryArrowRightRound } from '@vicons/material';
 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 validation = useValidation({
-  source: urlToParse,
-  rules: [
-    {
-      validator: (value) => isNotThrowing(() => new URL(value)),
-      message: 'Invalid url',
-    },
-  ],
-});
+const urlValidationRules = [
+  {
+    validator: (value: string) => isNotThrowing(() => new URL(value)),
+    message: 'Invalid url',
+  },
+];
 
 const properties: { title: string; key: keyof URL }[] = [
   { title: 'Protocol', key: 'protocol' },