fix/Added url validation ui indicator

packages/nc-gui-v2/components.d.ts

@@ -103,6 +103,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
+    MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
@@ -127,6 +128,7 @@ declare module '@vue/runtime-core' {
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
+    MdiFileEyeOutline: typeof import('~icons/mdi/file-eye-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFlashOutline: typeof import('~icons/mdi/flash-outline')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']

packages/nc-gui-v2/components/cell/Url.vue

@@ -2,6 +2,7 @@
 import type { VNodeRef } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
 import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
+import MaterialSymbolsWarning from '~icons/material-symbols/warning'
 
 interface Props {
   modelValue?: string | null
@@ -22,13 +23,13 @@ const vModel = computed({
   get: () => value,
   set: (val) => {
     localState.value = val
-    if (!column.value.meta?.validate || (val && isValidURL(val))) {
+    if (!column.value.meta?.validate || (val && isValidURL(val)) || !val) {
       emit('update:modelValue', val)
     }
   },
 })
 
-const isValid = computed(() => value && isValidURL(value))
+const isValid = computed(() => !column.value.meta?.validate || (value && isValidURL(value)))
 
 const url = computed(() => {
   if (!value || !isValidURL(value)) return ''
@@ -55,11 +56,22 @@ watch(
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
-
-  <nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
-
-  <span v-else>{{ value }}</span>
+  <div class="flex flex-row items-center justify-between">
+    <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm w-full" @blur="editEnabled = false" />
+
+    <nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
+
+    <span v-else class="w-9/10 overflow-ellipsis overflow-hidden">{{ value }}</span>
+
+    <div v-if="!isValid && value?.length && !editEnabled" class="mr-1 w-1/10">
+      <a-tooltip placement="top">
+        <template #title> Invalid URL </template>
+        <div class="flex flex-row items-center">
+          <MaterialSymbolsWarning />
+        </div>
+      </a-tooltip>
+    </div>
+  </div>
 </template>
 
 <!--