SPasswordField <s-password-field>

Um campo de texto para senhas que oculta o que é digitado. SPasswordField é o wrapper de Vue 3 tipado do web component <s-password-field> do Shopify Polaris.

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

Boas práticas

• Funcione bem com gerenciadores de senhas. Defina um valor de autocomplete adequado, como new-password ou current-password, para que os gerenciadores de senhas ajudem os lojistas a gerar e salvar senhas fortes.
• Informe as regras logo de início. Liste todos os requisitos de senha antes que os lojistas comecem a digitar, em vez de revelá-los só depois de uma entrada inválida. Isso evita frustração e formulários abandonados.
• Oriente os lojistas ao criar uma senha. Dê feedback em tempo real sobre a força da senha e explique o que a tornaria mais forte, em vez de simplesmente impor regras sem contexto.
• Permita que os lojistas colem. Gerenciadores de senhas e ferramentas semelhantes dependem de colar, e bloquear isso empurra os lojistas para senhas mais fracas que eles conseguem digitar de memória.
• Trate as verificações no cliente apenas como feedback. Sempre valide a senha no seu servidor, porque as restrições do navegador são fáceis de contornar. A validação no cliente existe para responder rapidamente, não para oferecer segurança.

<SPasswordField label="New password" autocomplete="new-password" details="Use at least 12 characters." />

Veja as boas práticas da Shopify para <s-password-field> (em inglês) para todas as recomendações.

Exemplo

Length: 0

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

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

<template>
  <SPasswordField label="Password" placeholder="Enter your password" v-model="value" />
  <p>Length: {{ value.length }}</p>
</template>

v-model

v-model em <SPasswordField> se vincula à propriedade value e escuta o event DOM input.

<SPasswordField v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descrição
autocomplete	"current-password" | "new-password" | "on" | "off" | "shipping current-password" | "shipping new-password" | "billing current-password" | "billing new-password"	Uma indicação sobre o conteúdo esperado do campo. Quando definida como on (o padrão), esta propriedade indica que o campo deve oferecer suporte ao preenchimento automático, mas você não tem mais informações semânticas sobre o conteúdo esperado. Quando definida como off, você indica que este campo contém informações confidenciais ou conteúdo que nunca é salvo, como códigos de uso único. Como alternativa, você pode fornecer um valor que descreva os dados específicos que deseja que sejam inseridos neste campo durante o preenchimento automático.
defaultValue	string	O valor padrão do campo.
details	any	Texto adicional que oferece contexto ou orientação sobre o campo. Esse texto é exibido junto com o campo e seu rótulo para oferecer mais informações ou instruções ao usuário. Ele também é exposto aos usuários de leitores de tela.
disabled	boolean	Desativa o campo, impedindo qualquer interação.
error	any	Indica um erro ao usuário. O campo recebe um tratamento visual específico para comunicar problemas que precisam ser resolvidos imediatamente.
id	string	Um identificador exclusivo para o elemento.
label	any	Conteúdo usado como rótulo do campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Altera a visibilidade do rótulo do componente. - visible: o rótulo fica visível para todos os usuários. - exclusive: o rótulo fica visualmente oculto, mas permanece na árvore de acessibilidade.
maxLength	number	Especifica o número máximo de caracteres permitidos.
minLength	number	Especifica o número mínimo de caracteres permitidos.
name	string	Um identificador do campo que é exclusivo dentro do formulário contêiner mais próximo.
placeholder	string	Uma breve indicação que descreve o valor esperado do campo.
readOnly	boolean	O campo não pode ser editado pelo usuário. Ele pode receber foco e é anunciado pelos leitores de tela.
required	boolean	Se o campo exige um valor. Este requisito adiciona valor semântico ao campo, mas não faz um erro aparecer automaticamente. Se quiser exibir um erro quando este campo estiver vazio, você pode fazer isso com a propriedade error.
value	string	O valor atual do campo. Se omitido, o campo ficará vazio.

Events

Event	Tipo
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Escute-os com listeners no estilo @blur em <SPasswordField>.

Slots

Slot	Descrição
details
error