156 lines
3.9 KiB
Vue
156 lines
3.9 KiB
Vue
<template>
|
|
<div ref="wrapper" class="relative">
|
|
<input
|
|
:id="inputId"
|
|
:name="inputName"
|
|
ref="input"
|
|
v-model="inputValue"
|
|
:type="actualType"
|
|
:step="step"
|
|
:min="min"
|
|
:readonly="readonly"
|
|
:disabled="disabled"
|
|
:placeholder="placeholder"
|
|
dir="auto"
|
|
class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full"
|
|
:class="classList"
|
|
@keyup="keyup"
|
|
@change="change"
|
|
@focus="focused"
|
|
@blur="blurred"
|
|
/>
|
|
<div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
|
|
<span class="material-symbols text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
|
|
</div>
|
|
<div v-if="type === 'password' && isHovering" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
|
|
<span class="material-symbols text-gray-400 cursor-pointer text-lg" @click.stop.prevent="showPassword = !showPassword">{{ !showPassword ? 'visibility' : 'visibility_off' }}</span>
|
|
</div>
|
|
<div v-else-if="showCopy" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
|
|
<span class="material-symbols text-gray-400 cursor-pointer text-lg" @click.stop.prevent="copyToClipboard">{{ !hasCopied ? 'content_copy' : 'done' }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: [String, Number],
|
|
placeholder: String,
|
|
readonly: Boolean,
|
|
type: {
|
|
type: String,
|
|
default: 'text'
|
|
},
|
|
disabled: Boolean,
|
|
paddingY: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
paddingX: {
|
|
type: Number,
|
|
default: 3
|
|
},
|
|
noSpinner: Boolean,
|
|
textCenter: Boolean,
|
|
clearable: Boolean,
|
|
inputId: String,
|
|
inputName: String,
|
|
showCopy: Boolean,
|
|
step: [String, Number],
|
|
min: [String, Number],
|
|
customInputClass: String
|
|
},
|
|
data() {
|
|
return {
|
|
showPassword: false,
|
|
isHovering: false,
|
|
isFocused: false,
|
|
hasCopied: false
|
|
}
|
|
},
|
|
computed: {
|
|
inputValue: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
},
|
|
classList() {
|
|
var _list = []
|
|
_list.push(`px-${this.paddingX}`)
|
|
_list.push(`py-${this.paddingY}`)
|
|
if (this.noSpinner) _list.push('no-spinner')
|
|
if (this.textCenter) _list.push('text-center')
|
|
if (this.customInputClass) _list.push(this.customInputClass)
|
|
return _list.join(' ')
|
|
},
|
|
actualType() {
|
|
if (this.type === 'password' && this.showPassword) return 'text'
|
|
return this.type
|
|
}
|
|
},
|
|
methods: {
|
|
copyToClipboard() {
|
|
if (this.hasCopied) return
|
|
this.$copyToClipboard(this.inputValue).then((success) => {
|
|
this.hasCopied = success
|
|
setTimeout(() => {
|
|
this.hasCopied = false
|
|
}, 2000)
|
|
})
|
|
},
|
|
clear() {
|
|
this.inputValue = ''
|
|
this.$emit('clear')
|
|
},
|
|
focused() {
|
|
this.isFocused = true
|
|
this.$emit('focus')
|
|
},
|
|
blurred() {
|
|
this.isFocused = false
|
|
this.$emit('blur')
|
|
},
|
|
change(e) {
|
|
this.$emit('change', e.target.value)
|
|
},
|
|
keyup(e) {
|
|
this.$emit('keyup', e)
|
|
},
|
|
blur() {
|
|
if (this.$refs.input) this.$refs.input.blur()
|
|
},
|
|
setFocus() {
|
|
if (this.$refs.input) this.$refs.input.focus()
|
|
},
|
|
mouseover() {
|
|
this.isHovering = true
|
|
},
|
|
mouseleave() {
|
|
this.isHovering = false
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.type === 'password' && this.$refs.wrapper) {
|
|
this.$refs.wrapper.addEventListener('mouseover', this.mouseover)
|
|
this.$refs.wrapper.addEventListener('mouseleave', this.mouseleave)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
input {
|
|
border-style: inherit !important;
|
|
}
|
|
input:read-only {
|
|
color: #bbb;
|
|
background-color: #444;
|
|
}
|
|
input::-webkit-calendar-picker-indicator {
|
|
filter: invert(1);
|
|
}
|
|
</style>
|