31 lines
612 B
Vue
31 lines
612 B
Vue
<template>
|
|
<div class="ui-mask">
|
|
<p><span>{{ prefix }}</span>: <span>{{ display }}</span></p>
|
|
<UiIcon @click="show = !show" class="pointer" v-if="enabled">visibility</UiIcon>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
prefix: string,
|
|
enabled: boolean,
|
|
value: string
|
|
}>();
|
|
|
|
const show = ref(false);
|
|
|
|
const display = computed(() => {
|
|
if (props.enabled && show.value === false)
|
|
{
|
|
const length = props.value.length;
|
|
return "*".repeat(length);
|
|
}
|
|
return props.value;
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ui-mask {
|
|
gap: 1rem;
|
|
}
|
|
</style> |