EyeToHide

Visão geral

EyeToHide serve para ocultar informações sensíveis da página (preferencialmente tags de texto) que estiverem com o atributo hide.

Clique para ocultar:

No último trimestre, a empresa Acme Corp registrou um aumento significativo nas vendas, atingindo um total de $1.500.000 em receita. Esse resultado foi impulsionado principalmente pela performance excepcional de nossa equipe de vendas, liderada por João Silva, cujo empenho e dedicação foram fundamentais para alcançar esses números impressionantes. Além disso, o produto XYZ destacou-se no mercado, contribuindo com 40% do total das vendas. Para garantir a continuidade desse crescimento, estamos planejando um investimento adicional de $500.000 no próximo semestre, focado em inovação e expansão de mercado. A diretora financeira, Maria Oliveira, ressaltou a importância de manter a sustentabilidade financeira enquanto buscamos novas oportunidades. Estamos confiantes de que, com esses investimentos e o talento de nossa equipe, conseguiremos superar as metas estabelecidas e fortalecer ainda mais a posição da Acme Corp no setor.

Clique para visualizar o código

<script setup>
import { ref } from 'vue';
import { LxEyeToHide } from '@lde/lxcomponents';

const hideInfo = ref(false);
</script>

<template>
	<div class="mb-3">
		<label for="lx-eye-to-hide-example" class="form-label">Clique para ocultar:</label>
		<LxEyeToHide v-model="hideInfo" id="lx-eye-to-hide-example" custom-color="var(--lx-silver-600)" parent-id="lx-eye-to-hide-example-content" />
	</div>
	<div id="lx-eye-to-hide-example-content">
		No último trimestre, a empresa <b hide>Acme Corp</b> registrou um aumento significativo nas vendas, atingindo um total de <span hide hide-fixed="5">$1.500.000</span> em
		receita. Esse resultado foi impulsionado principalmente pela performance excepcional de nossa equipe de vendas, liderada por <i hide>João Silva</i>, cujo empenho e
		dedicação foram fundamentais para alcançar esses números impressionantes. Além disso, o produto <span hide>XYZ</span> destacou-se no mercado, contribuindo com
		<b hide>40%</b> do total das vendas. Para garantir a continuidade desse crescimento, estamos planejando um investimento adicional de
		<span hide hide-fixed="5">$500.000</span> no próximo semestre, focado em inovação e expansão de mercado. A diretora financeira, <i hide hide-fixed="5">Maria Oliveira</i>,
		ressaltou a importância de manter a sustentabilidade financeira enquanto buscamos novas oportunidades. Estamos confiantes de que, com esses investimentos e o talento de
		nossa equipe, conseguiremos superar as metas estabelecidas e fortalecer ainda mais a posição da <b hide>Acme Corp</b> no setor.
	</div>
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
parent-id	Se desejar limitar o hide apenas para uma parte da página, insira o id da tag de maior hierarquia dessa área. Útil caso tenham 2 ou mais olhos ao mesmo tempo	String	-
disabled	Desabilitar a mudança do olho	Boolean	false
hidden-element	Utilize se desejar substituir o texto da tag por uma string específica. Essa opção ignora a custom-color, mantendo a cor original do texto	String	-
max-length	Caso seja necessário definir um tamanho máximo para os textos ocultos	Number	-

Atributos (para as tags de texto que serão ocultas)

Nome	Descrição	Tipo	Padrão
hide	Atributo necessário para o LxEyeToHide reconhecer que é um texto a ser oculto: <b hide>Vai sumir</b>	Boolean	-
hide-fixed	Se o texto oculto precisa ter um tamanho fixo, para evitar que seja possível reconhecer o número de dígitos de valores monetários, por exemplo: <b hide hide-fixed="5">R$ 123.321,12</b>	Number	-

Playground

SaldoR$ 1.321.123,31

Nome	Controle
disabled
hidden-element
max-length

Clique para exibir o código

<script setup>
import { ref } from 'vue';
import { LxEyeToHide } from '@lde/lxcomponents';

const hideInfo = ref(false);
const disabled = ref(false);
const hiddenElement = ref('');
const maxLength = ref(0);

const resetOnFocusOrclick = () => {
	// Necessário apenas no playground
	hideInfo.value = false;
};
</script>

<template>
	<div class="row align-items-center">
		<div class="col-6">
			<div class="d-flex flex-column align-items-end" id="lx-eye-to-hide-playground-content">
				<small class="text-muted">Saldo</small>
				<b hide>R$ 1.321.123,31</b>
			</div>
		</div>
		<div class="col-6">
			<LxEyeToHide
				v-model="hideInfo"
				id="lx-eye-to-hide-playground"
				:disabled="disabled"
				parent-id="lx-eye-to-hide-playground-content"
				:hidden-element="hiddenElement"
				:max-length="maxLength"
			/>
		</div>
	</div>

	<!-- playground controls -->
	<table style="max-height: 50vh">
		<thead>
			<tr>
				<th style="width: 140px">Nome</th>
				<th class="">Controle</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<label class="form-label m-0"> disabled </label>
				</td>
				<td>
					<input v-model="disabled" class="form-check-input" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">hidden-element</label>
				</td>
				<td>
					<input v-model="hiddenElement" type="text" class="form-control" @focus="resetOnFocusOrclick" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">max-length</label>
				</td>
				<td>
					<input v-model="maxLength" type="number" class="form-control" @focus="resetOnFocusOrclick" />
				</td>
			</tr>
		</tbody>
	</table>
</template>