mirror of
https://github.com/koel/koel
synced 2024-12-20 17:43:36 +00:00
49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<input v-model="value" :type="type" v-bind="$attrs">
|
||
|
|
<button type="button" @click.prevent="toggleReveal">
|
||
|
|
<icon v-if="type === 'password'" :icon="faEye" />
|
||
|
|
<icon v-else :icon="faEyeSlash" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, ref } from 'vue'
|
||
|
|
import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons'
|
||
|
|
|
||
|
|
// we don't want the wrapping div to inherit the fallthrough attrs
|
||
|
|
defineOptions({ inheritAttrs: false })
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<{ modelValue?: string }>(), { modelValue: '' })
|
||
|
|
|
||
|
|
const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
|
||
|
|
|
||
|
|
const type = ref<'password' | 'text'>('password')
|
||
|
|
|
||
|
|
const value = computed({
|
||
|
|
get: () => props.modelValue,
|
||
|
|
set: value => emit('update:modelValue', value)
|
||
|
|
})
|
||
|
|
|
||
|
|
const toggleReveal = () => (type.value = type.value === 'password' ? 'text' : 'password')
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
div {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
position: absolute;
|
||
|
|
padding: 8px 6px;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
color: var(--color-bg-primary);
|
||
|
|
}
|
||
|
|
</style>
|