🎨 Updated color codes
This commit is contained in:
liyasthomas
@@ -1,190 +1,189 @@
|
||||
<template>
|
||||
<div class="autocomplete-wrapper">
|
||||
<label>
|
||||
<slot />
|
||||
<input type="text"
|
||||
:placeholder="placeholder"
|
||||
v-model="value"
|
||||
@input="updateSuggestions"
|
||||
@keyup="updateSuggestions"
|
||||
@click="updateSuggestions"
|
||||
@keydown="handleKeystroke"
|
||||
ref="acInput"
|
||||
:spellcheck="spellcheck"
|
||||
:autocapitalize="spellcheck"
|
||||
:autocorrect="spellcheck">
|
||||
<div class="autocomplete-wrapper">
|
||||
<label>
|
||||
<slot />
|
||||
<input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck">
|
||||
|
||||
<ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
|
||||
<li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }">{{ suggestion }}</li>
|
||||
</ul>
|
||||
</label>
|
||||
</div>
|
||||
<ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
|
||||
<li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }">{{ suggestion }}</li>
|
||||
</ul>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.autocomplete-wrapper {
|
||||
.autocomplete-wrapper {
|
||||
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
input:focus + ul.suggestions, ul.suggestions:hover {
|
||||
display: block;
|
||||
}
|
||||
input:focus+ul.suggestions,
|
||||
ul.suggestions:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.suggestions {
|
||||
display: none;
|
||||
background-color: var(--atc-color);
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
margin: 0 4px;
|
||||
left: 0;
|
||||
ul.suggestions {
|
||||
display: none;
|
||||
background-color: var(--atc-color);
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
margin: 0 4px;
|
||||
left: 0;
|
||||
|
||||
padding: 0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
z-index: 9999;
|
||||
transition: transform 200ms ease-out;
|
||||
padding: 0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
z-index: 9999;
|
||||
transition: transform 200ms ease-out;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
padding: 10px 10px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
li {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 8px 16px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: var(--ac-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--ac-color);
|
||||
color: var(--act-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const KEY_TAB = 9;
|
||||
const KEY_ESC = 27;
|
||||
const KEY_TAB = 9;
|
||||
const KEY_ESC = 27;
|
||||
|
||||
const KEY_ARROW_UP = 38;
|
||||
const KEY_ARROW_DOWN = 40;
|
||||
const KEY_ARROW_UP = 38;
|
||||
const KEY_ARROW_DOWN = 40;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
spellcheck: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false
|
||||
},
|
||||
export default {
|
||||
props: {
|
||||
spellcheck: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false
|
||||
},
|
||||
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Start typing...',
|
||||
required: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Start typing...',
|
||||
required: false
|
||||
},
|
||||
|
||||
source: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
source: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
|
||||
value: {}
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value () {
|
||||
this.$emit('input', this.value);
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
value: "",
|
||||
|
||||
selectionStart: 0,
|
||||
suggestionsOffsetLeft: 0,
|
||||
currentSuggestionIndex: -1,
|
||||
suggestionsVisible: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateSuggestions (event) {
|
||||
// Hide suggestions if ESC pressed.
|
||||
if(event.which && event.which === KEY_ESC){
|
||||
event.preventDefault();
|
||||
this.suggestionsVisible = false;
|
||||
this.currentSuggestionIndex = -1;
|
||||
return;
|
||||
}
|
||||
|
||||
// As suggestions is a reactive property, this implicitly
|
||||
// causes suggestions to update.
|
||||
this.selectionStart = this.$refs.acInput.selectionStart;
|
||||
this.suggestionsOffsetLeft = (12 * this.selectionStart);
|
||||
this.suggestionsVisible = true;
|
||||
},
|
||||
|
||||
forceSuggestion (text) {
|
||||
let input = this.value.substring(0, this.selectionStart);
|
||||
this.value = input + text;
|
||||
|
||||
this.selectionStart = this.value.length;
|
||||
this.suggestionsVisible = true;
|
||||
this.currentSuggestionIndex = -1;
|
||||
},
|
||||
|
||||
handleKeystroke (event) {
|
||||
if(event.which === KEY_ARROW_UP){
|
||||
event.preventDefault();
|
||||
|
||||
this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0
|
||||
? this.currentSuggestionIndex - 1
|
||||
: 0;
|
||||
}else if(event.which === KEY_ARROW_DOWN){
|
||||
event.preventDefault();
|
||||
|
||||
this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1
|
||||
? this.currentSuggestionIndex + 1
|
||||
: this.suggestions.length - 1;
|
||||
}
|
||||
|
||||
if(event.which === KEY_TAB){
|
||||
event.preventDefault();
|
||||
|
||||
let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
|
||||
if(activeSuggestion){
|
||||
let input = this.value.substring(0, this.selectionStart);
|
||||
this.value = input + activeSuggestion;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Gets the suggestions list to be displayed under the input box.
|
||||
*
|
||||
* @returns {default.props.source|{type, required}}
|
||||
*/
|
||||
suggestions () {
|
||||
let input = this.value.substring(0, this.selectionStart);
|
||||
|
||||
return this.source.filter((entry) => {
|
||||
return entry.toLowerCase().startsWith(input.toLowerCase())
|
||||
&& input.toLowerCase() !== entry.toLowerCase();
|
||||
})
|
||||
// Cut off the part that's already been typed.
|
||||
.map((entry) => entry.substring(this.selectionStart))
|
||||
// We only want the top 3 suggestions.
|
||||
.slice(0, 3);
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.updateSuggestions({
|
||||
target: this.$refs.acInput
|
||||
});
|
||||
watch: {
|
||||
value() {
|
||||
this.$emit('input', this.value);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
|
||||
selectionStart: 0,
|
||||
suggestionsOffsetLeft: 0,
|
||||
currentSuggestionIndex: -1,
|
||||
suggestionsVisible: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateSuggestions(event) {
|
||||
// Hide suggestions if ESC pressed.
|
||||
if (event.which && event.which === KEY_ESC) {
|
||||
event.preventDefault();
|
||||
this.suggestionsVisible = false;
|
||||
this.currentSuggestionIndex = -1;
|
||||
return;
|
||||
}
|
||||
|
||||
// As suggestions is a reactive property, this implicitly
|
||||
// causes suggestions to update.
|
||||
this.selectionStart = this.$refs.acInput.selectionStart;
|
||||
this.suggestionsOffsetLeft = (12 * this.selectionStart);
|
||||
this.suggestionsVisible = true;
|
||||
},
|
||||
|
||||
forceSuggestion(text) {
|
||||
let input = this.value.substring(0, this.selectionStart);
|
||||
this.value = input + text;
|
||||
|
||||
this.selectionStart = this.value.length;
|
||||
this.suggestionsVisible = true;
|
||||
this.currentSuggestionIndex = -1;
|
||||
},
|
||||
|
||||
handleKeystroke(event) {
|
||||
if (event.which === KEY_ARROW_UP) {
|
||||
event.preventDefault();
|
||||
|
||||
this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0 ?
|
||||
this.currentSuggestionIndex - 1 :
|
||||
0;
|
||||
} else if (event.which === KEY_ARROW_DOWN) {
|
||||
event.preventDefault();
|
||||
|
||||
this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ?
|
||||
this.currentSuggestionIndex + 1 :
|
||||
this.suggestions.length - 1;
|
||||
}
|
||||
|
||||
if (event.which === KEY_TAB) {
|
||||
event.preventDefault();
|
||||
|
||||
let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
|
||||
if (activeSuggestion) {
|
||||
let input = this.value.substring(0, this.selectionStart);
|
||||
this.value = input + activeSuggestion;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Gets the suggestions list to be displayed under the input box.
|
||||
*
|
||||
* @returns {default.props.source|{type, required}}
|
||||
*/
|
||||
suggestions() {
|
||||
let input = this.value.substring(0, this.selectionStart);
|
||||
|
||||
return this.source.filter((entry) => {
|
||||
return entry.toLowerCase().startsWith(input.toLowerCase()) &&
|
||||
input.toLowerCase() !== entry.toLowerCase();
|
||||
})
|
||||
// Cut off the part that's already been typed.
|
||||
.map((entry) => entry.substring(this.selectionStart))
|
||||
// We only want the top 3 suggestions.
|
||||
.slice(0, 3);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.updateSuggestions({
|
||||
target: this.$refs.acInput
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user