Add url setting type

[huchenlei]

Add URL Input Component

Changes

• Added new UrlInput component with validation
• Supports real-time URL format checking and reachability testing
• Visual feedback for loading, valid, and invalid states
• Integrated with existing form system

  {
    id: 'Comfy.Server.ServerUrl',
    name: 'Server URL',
    type: 'url',
    defaultValue: 'http://localhost:8188'
  }

┆Issue is synchronized with this Notion page by Unito

[christian-byrne]

What's the reason for not using primevue form field component?

[huchenlei]

What's the reason for not using primevue form field component?

The component is designed to be used in settings dialog, which is currently not a primevue form.

[christian-byrne]

The component itself can be a form, which allows for validation with zod, validation/interaction state managament, conditional error components, and so on.

[christian-byrne]

<template>
  <Form>
    <FormField
      v-slot="$field"
      name="url"
      :resolver="zodResolver(urlSchema)"
      :validate-on-blur="true"
      :validate-on-mount="true"
    >
      <IconField>
        <InputText v-bind="$field" class="w-full" :model-value="modelValue" />
        <InputIcon
          v-if="$field.value && !$field.valid"
          class="pi pi-times text-red-500"
        />
        <InputIcon
          v-else-if="$field.touched && $field.valid"
          class="pi pi-check text-green-500"
        />
        <InputIcon
          v-else-if="$field.dirty && $field.value"
          class="pi pi-spin pi-spinner text-neutral-400"
        />
      </IconField>
    </FormField>
  </Form>
</template>

<script setup lang="ts">
import { Form, FormField } from '@primevue/forms'
import { zodResolver } from '@primevue/forms/resolvers/zod'
import IconField from 'primevue/iconfield'
import InputIcon from 'primevue/inputicon'
import InputText from 'primevue/inputtext'
import { z } from 'zod'

import { checkUrlReachable } from '@/utils/networkUtil'

const { modelValue, validateUrlFn } = defineProps<{
  modelValue: string
  validateUrlFn?: (url: string) => Promise<boolean>
}>()

const urlSchema = z
  .string()
  .url()
  .refine(checkUrlReachable)
  .refine(validateUrlFn ?? (() => true))
  .optional()

// Add inheritAttrs option to prevent attrs from being applied to root element
defineOptions({
  inheritAttrs: false
})
</script>