SUrlField <s-url-field>

Un campo de texto para direcciones web. SUrlField es el wrapper de Vue 3 tipado del web component <s-url-field> de Shopify Polaris.

import { SUrlField } from 'polaris-vue-elements'

Buenas prácticas

• Valida las URL por tu cuenta. La validación de URL integrada en el navegador es mínima y varía entre navegadores, así que añade tus propias comprobaciones de estructura, protocolos permitidos y los formatos que acepta tu caso de uso.
• Muestra el formato que esperas. Indica a los comerciantes si deben incluir un protocolo, qué protocolos se permiten y qué tipo de URL quieres. Una URL de ejemplo completa en el placeholder lo deja claro.
• Decide cómo gestionar un protocolo que falta. Los comerciantes suelen omitir https://. Elige si añadirlo por ellos, aceptar URL sin él o mostrar un error que explique qué falta.
• Elige límites de longitud según dónde se use la URL. Los navegadores y los servidores admiten longitudes máximas distintas, así que define maxLength según el destino de la URL en lugar de un número arbitrario y menciona el límite cuando sea relevante.
• Explica para qué sirve la URL. Usa label y details para dejar claro su propósito, ya que una URL de imagen de producto, un enlace a un perfil social y una referencia externa requieren cada uno algo diferente.

<SUrlField label="Product image URL" placeholder="https://example.com/images/product.jpg" details="Link directly to a JPG or PNG file." />

Consulta las buenas prácticas de Shopify para <s-url-field> (en inglés) para ver todas las recomendaciones.

Ejemplo

Value: (empty)

<script setup>
import { ref } from 'vue'
import { SUrlField } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SUrlField label="Website" placeholder="https://example.com" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model en <SUrlField> se vincula a la propiedad value y escucha el event DOM input.

<SUrlField v-model="value" />

equivale a:

<SUrlField :value="value" @input="value = $event.target.value" />

Props

Prop	Tipo	Descripción
autocomplete	"photo" | "url" | "impp" | "home impp" | "mobile impp" | "fax impp" | "pager impp" | "on" … (15 more)	Una indicación sobre el contenido previsto del campo. Cuando se establece en on (el valor predeterminado), esta propiedad indica que el campo debe admitir el autocompletado, pero no tienes más información semántica sobre el contenido previsto. Cuando se establece en off, indicas que este campo contiene información confidencial o contenido que nunca se guarda, como los códigos de un solo uso. Como alternativa, puedes proporcionar un valor que describa los datos concretos que quieres que se introduzcan en este campo durante el autocompletado.
defaultValue	string	El valor predeterminado del campo.
details	any	Texto adicional que aporta contexto u orientación sobre el campo. Este texto se muestra junto con el campo y su etiqueta para ofrecer más información o instrucciones al usuario. También se expone a los usuarios de lectores de pantalla.
disabled	boolean	Desactiva el campo e impide cualquier interacción.
error	any	Indica un error al usuario. El campo recibe un tratamiento estilístico específico para comunicar problemas que deben resolverse de inmediato.
id	string	Un identificador único para el elemento.
label	any	Contenido que se usa como etiqueta del campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Cambia la visibilidad de la etiqueta del componente. - visible: la etiqueta es visible para todos los usuarios. - exclusive: la etiqueta se oculta visualmente, pero permanece en el árbol de accesibilidad.
maxLength	number	Especifica el número máximo de caracteres permitidos.
minLength	number	Especifica el número mínimo de caracteres permitidos.
name	string	Un identificador del campo que es único dentro del formulario contenedor más cercano.
placeholder	string	Una breve indicación que describe el valor esperado del campo.
readOnly	boolean	El usuario no puede editar el campo. Puede recibir el foco y los lectores de pantalla lo anuncian.
required	boolean	Si el campo requiere un valor. Este requisito añade valor semántico al campo, pero no hará que aparezca un error automáticamente. Si quieres mostrar un error cuando este campo esté vacío, puedes hacerlo con la propiedad error.
value	string	El valor actual del campo. Si se omite, el campo estará vacío.

Algunas columnas de tipo de arriba están truncadas para facilitar la lectura; la unión completa está disponible en los tipos de TypeScript generados de la biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Escúchalos con listeners del estilo @blur en <SUrlField>.

Slots

Slot	Descripción
details
error