kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
50 wiersze
877 B
Vue
50 wiersze
877 B
Vue
<template>
|
|
<b-input :value="value" ref="filter" :placeholder="placeholder" type="search" icon-pack="far" icon="search" :class="{ filter: true, invalid }" :size="size" rounded @input="updateValue" />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FilterInput',
|
|
props: {
|
|
value: String,
|
|
size: String,
|
|
placeholder: {
|
|
type: String,
|
|
default: 'Filter'
|
|
},
|
|
isRegex: Boolean
|
|
},
|
|
computed: {
|
|
invalid () {
|
|
if (!this.isRegex) {
|
|
return false
|
|
}
|
|
|
|
try {
|
|
RegExp(this.value)
|
|
return false
|
|
} catch (e) {
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
updateValue (value) {
|
|
this.$emit('input', value)
|
|
},
|
|
focus () {
|
|
this.$refs.filter.focus()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.filter {
|
|
max-width: 20em;
|
|
}
|
|
.filter.invalid >>> input {
|
|
background-color: #ffeeee;
|
|
}
|
|
</style>
|