SDropZone <s-drop-zone>

Uma área de upload de arquivos que aceita arquivos por arrastar e soltar ou por um seletor de arquivos. SDropZone é o wrapper de Vue 3 tipado do web component <s-drop-zone> do Shopify Polaris.

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

Boas práticas

• Declare os limites de arquivo com accept. Defina restrições claras para os tipos de arquivo que a drop zone aceita.
• Trate droprejected com uma mensagem útil. Quando um arquivo falhar na validação, escute o event e diga aos lojistas o que deu errado.
• Considere disabled durante o processamento. Desativar a drop zone durante um upload impede que os lojistas adicionem mais arquivos enquanto isso.

<SDropZone label="Product images" accept="image/*" />

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

Exemplo

Value: (empty)

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

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

<template>
  <SDropZone label="Upload a file" accept="image/*" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

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

<SDropZone v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descrição
accept	string	Uma string que representa os tipos de arquivo aceitos pela área de soltar. Essa string é uma lista separada por vírgulas de especificadores únicos de tipo de arquivo, que podem ser um dos seguintes: - Uma extensão de arquivo que começa com um ponto (".") (por exemplo, .jpg, .pdf, .doc) - Uma string de tipo MIME válida sem extensões Se omitido, todos os tipos de arquivo são aceitos.
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do item. Quando definido, é anunciado aos compradores que usam tecnologias assistivas e oferece mais contexto a eles.
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.
files	readonly File[]	Um array de objetos File que representa os arquivos atualmente selecionados pelo usuário. Esta propriedade é somente leitura e não pode ser modificada diretamente. Para limpar os arquivos selecionados, defina a prop value como uma string vazia ou null.
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.
multiple	boolean	Se vários arquivos podem ser selecionados ou soltos de uma vez.
name	string	Um identificador do campo que é exclusivo dentro do formulário contêiner mais próximo.
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	Uma string que representa o caminho para os arquivos selecionados. Se nenhum arquivo tiver sido selecionado ainda, o valor é uma string vazia (""). Quando o usuário seleciona vários arquivos, o valor representa o primeiro arquivo da lista de arquivos selecionados. O valor é sempre o nome do arquivo precedido de "C:\fakepath\", que não é o caminho real do arquivo.

Events

Event	Tipo
change	Event
droprejected	CustomEvent
input	Event

Escute-os com listeners no estilo @change em <SDropZone>.

Slots

Slot	Descrição
default	O conteúdo a ser incluído dentro do contêiner da drop zone