- second commit
This commit is contained in:
parent
4fc3bb0a01
commit
59a99ff3c8
61 changed files with 2625 additions and 1182 deletions
281
resources/js/Components/SearchAutocomplete.vue
Normal file
281
resources/js/Components/SearchAutocomplete.vue
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
<template>
|
||||
<!-- <input
|
||||
v-model="data.search"
|
||||
@change="onChange"
|
||||
type="text"
|
||||
class="text-base font-medium block w-full rounded-md border transition ease-in-out focus:ring-1 border-gray-300 border-solid py-2 px-3 text-gray-700 placeholder-gray-400 focus:border-blue-200 focus:ring-blue-500 focus:outline-none"
|
||||
v-bind:name="props.name"
|
||||
/>
|
||||
<ul v-if="data.isOpen" class="mt-1 border-2 border-slate-50 overflow-auto shadow-lg rounded list-none">
|
||||
<li
|
||||
:class="['hover:bg-blue-100 hover:text-blue-800', 'w-full list-none text-left py-2 px-3 cursor-pointer']"
|
||||
v-for="(result, i) in data.results"
|
||||
:key="i"
|
||||
>
|
||||
{{ result.name }}
|
||||
</li>
|
||||
</ul> -->
|
||||
|
||||
<!-- <div class="flex-col justify-center relative"> -->
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="data.search"
|
||||
type="text"
|
||||
:class="inputElClass"
|
||||
:name="props.name"
|
||||
:placeholder="placeholder"
|
||||
autocomplete="off"
|
||||
@keydown.down="onArrowDown"
|
||||
@keydown.up="onArrowUp"
|
||||
/>
|
||||
<svg
|
||||
class="w-4 h-4 absolute left-2.5 top-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- <ul v-if="data.isOpen" class="bg-white border border-gray-100 w-full mt-2 max-h-28 overflow-y-auto"> -->
|
||||
<!-- :ref="(el) => { ul[i] = el }" -->
|
||||
<ul v-if="data.isOpen" class="bg-white dark:bg-slate-800 w-full mt-2 max-h-28 overflow-y-auto scroll-smooth">
|
||||
<li
|
||||
class="pl-8 pr-2 py-1 border-b-2 border-gray-100 relative cursor-pointer hover:bg-yellow-50 hover:text-gray-900"
|
||||
:class="{
|
||||
'bg-yellow-50 text-gray-900': i == selectedIndex,
|
||||
}"
|
||||
v-for="(result, i) in data.results"
|
||||
:key="i"
|
||||
:ref="
|
||||
(el: HTMLLIElement | null) => {
|
||||
ul[i] = el;
|
||||
}
|
||||
"
|
||||
>
|
||||
<svg class="absolute w-4 h-4 left-2 top-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <b>Gar</b>{{ result.name }} -->
|
||||
|
||||
<!-- <span>
|
||||
{{ makeBold(result.name) }}
|
||||
</span> -->
|
||||
<span
|
||||
v-for="(item, index) in makeBold(result.name)"
|
||||
:key="index"
|
||||
:class="{
|
||||
'font-bold': data.search.toLowerCase().includes(item.toLowerCase()),
|
||||
'is-active': index == selectedIndex,
|
||||
}"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, computed, Ref, watch } from 'vue';
|
||||
import axios from 'axios';
|
||||
let props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'autocomplete',
|
||||
},
|
||||
source: {
|
||||
type: [String, Array, Function],
|
||||
required: true,
|
||||
default: '',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'name',
|
||||
},
|
||||
responseProperty: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'name',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
required: Boolean,
|
||||
borderless: Boolean,
|
||||
transparent: Boolean,
|
||||
ctrlKFocus: Boolean,
|
||||
});
|
||||
|
||||
const inputElClass = computed(() => {
|
||||
const base = [
|
||||
'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
|
||||
'dark:placeholder-gray-400',
|
||||
'h-12',
|
||||
props.borderless ? 'border-0' : 'border',
|
||||
props.transparent ? 'bg-transparent' : 'bg-white dark:bg-slate-800',
|
||||
// props.isReadOnly ? 'bg-gray-50 dark:bg-slate-600' : 'bg-white dark:bg-slate-800',
|
||||
];
|
||||
// if (props.icon) {
|
||||
base.push('pl-10');
|
||||
// }
|
||||
return base;
|
||||
});
|
||||
|
||||
let search = ref('');
|
||||
let data = reactive({
|
||||
search: search,
|
||||
isOpen: false,
|
||||
results: [],
|
||||
});
|
||||
let error = ref('');
|
||||
let selectedIndex: Ref<number> = ref(0);
|
||||
// const listItem = ref(null);
|
||||
const ul: Ref<Array<HTMLLIElement | null>> = ref([]);
|
||||
|
||||
watch(selectedIndex, (selectedIndex) => {
|
||||
if (selectedIndex != null && ul.value != null) {
|
||||
const currentElement: HTMLLIElement | null = ul.value[selectedIndex];
|
||||
currentElement &&
|
||||
currentElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'nearest',
|
||||
inline: 'start',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
watch(search, async () => {
|
||||
await onChange();
|
||||
});
|
||||
|
||||
// function clear() {
|
||||
// data.search = "";
|
||||
// data.isOpen = false;
|
||||
// data.results = [];
|
||||
// error.value = "";
|
||||
// // this.$emit("clear");
|
||||
// }
|
||||
|
||||
// function onChange() {
|
||||
// if (!props.source || !data.search) {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// data.isOpen = true;
|
||||
// arrayLikeSearch(props.source);
|
||||
// }
|
||||
async function onChange() {
|
||||
if (!props.source || !data.search) return false;
|
||||
|
||||
selectedIndex.value = 0;
|
||||
|
||||
if (data.search.length >= 2) {
|
||||
data.isOpen = true;
|
||||
switch (true) {
|
||||
case typeof props.source === 'string':
|
||||
return await request(props.source, data.search);
|
||||
// case typeof props.source === 'function':
|
||||
// return props.source(data.search).then((response) => {
|
||||
// data.results = getResults(response);
|
||||
// });
|
||||
case Array.isArray(props.source):
|
||||
return arrayLikeSearch(props.source);
|
||||
default:
|
||||
throw new Error('typeof source is ' + typeof props.source);
|
||||
}
|
||||
} else {
|
||||
data.results = [];
|
||||
data.isOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getResults(response) {
|
||||
// if (props.responseProperty) {
|
||||
// let foundObj;
|
||||
// JSON.stringify(response, (_, nestedValue) => {
|
||||
// if (nestedValue && nestedValue[props.responseProperty]) foundObj = nestedValue[props.responseProperty];
|
||||
|
||||
// return nestedValue;
|
||||
// });
|
||||
// return foundObj;
|
||||
// }
|
||||
if (Array.isArray(response)) {
|
||||
return response;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
// function setResult(result) {
|
||||
// data.search = result[props.label];
|
||||
// data.isOpen = false;
|
||||
// }
|
||||
|
||||
// function request(url) {
|
||||
// return axios.get(url).then((response) => {
|
||||
// data.results = getResults(response);
|
||||
// });
|
||||
// }
|
||||
async function request(url, param) {
|
||||
try {
|
||||
let response = await searchTerm(url, param);
|
||||
error.value = '';
|
||||
data.results = getResults(response);
|
||||
// this.results = res.data;
|
||||
// this.loading = false;
|
||||
} catch (error) {
|
||||
error.value = error.message;
|
||||
// this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function searchTerm(term: string, param): Promise<any> {
|
||||
let res = await axios.get(term, { params: { filter: param } });
|
||||
// console.log(res.data);
|
||||
return res.data; //.response;//.docs;
|
||||
}
|
||||
// async function request(term: string): Promise<any> {
|
||||
// let res = await axios.get('/api/persons', { params: { filter: term } });
|
||||
// return res.data; //.response;//.docs;
|
||||
// }
|
||||
|
||||
function arrayLikeSearch(items) {
|
||||
data.results = items.filter((item) => {
|
||||
return item.toLowerCase().indexOf(data.search.toLowerCase()) > -1;
|
||||
});
|
||||
}
|
||||
|
||||
function makeBold(suggestion) {
|
||||
const query = data.search.valueOf();
|
||||
const regex = new RegExp(query.split('').join('-?'), 'i');
|
||||
const test = suggestion.replace(regex, (match) => '<split>' + match + '<split>');
|
||||
// return suggestion.match(regex);
|
||||
// const splitWord = suggestion.match(regex);
|
||||
return test.split('<split>');
|
||||
}
|
||||
|
||||
function onArrowDown() {
|
||||
if (data.results.length > 0) {
|
||||
selectedIndex.value = selectedIndex.value === data.results.length - 1 ? 0 : selectedIndex.value + 1;
|
||||
// const currentElement: HTMLLIElement = ul.value[selectedIndex.value];
|
||||
}
|
||||
}
|
||||
|
||||
function onArrowUp() {
|
||||
if (data.results.length > 0) {
|
||||
selectedIndex.value = selectedIndex.value == 0 || selectedIndex.value == -1 ? data.results.length - 1 : selectedIndex.value - 1;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue