- add validator for checking languages of translated titles and description
- add notification messages via notiwind.ts - add Project.ts - add new component TabelPersons.vue - add additional routes - npm updates
This commit is contained in:
parent
59a99ff3c8
commit
080c21126b
24 changed files with 979 additions and 349 deletions
|
|
@ -17,68 +17,72 @@
|
|||
</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) => {
|
||||
<div class="mb-6 mx-2 mt-2">
|
||||
<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"
|
||||
@keydown.enter="onEnter"
|
||||
/>
|
||||
<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"
|
||||
@click.prevent="setResult(result)"
|
||||
:ref="
|
||||
(el: HTMLLIElement) => {
|
||||
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 }} -->
|
||||
>
|
||||
<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>
|
||||
<!-- <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> -->
|
||||
<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>
|
||||
<span> - {{ result.email }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -119,6 +123,8 @@ let props = defineProps({
|
|||
ctrlKFocus: Boolean,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['person']);
|
||||
|
||||
const inputElClass = computed(() => {
|
||||
const base = [
|
||||
'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
|
||||
|
|
@ -143,11 +149,11 @@ let data = reactive({
|
|||
let error = ref('');
|
||||
let selectedIndex: Ref<number> = ref(0);
|
||||
// const listItem = ref(null);
|
||||
const ul: Ref<Array<HTMLLIElement | null>> = ref([]);
|
||||
const ul: Ref<Array<HTMLLIElement>> = ref([]);
|
||||
|
||||
watch(selectedIndex, (selectedIndex) => {
|
||||
watch(selectedIndex, (selectedIndex: number) => {
|
||||
if (selectedIndex != null && ul.value != null) {
|
||||
const currentElement: HTMLLIElement | null = ul.value[selectedIndex];
|
||||
const currentElement: HTMLLIElement = ul.value[selectedIndex];
|
||||
currentElement &&
|
||||
currentElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
|
|
@ -161,13 +167,6 @@ 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) {
|
||||
|
|
@ -278,4 +277,30 @@ function onArrowUp() {
|
|||
selectedIndex.value = selectedIndex.value == 0 || selectedIndex.value == -1 ? data.results.length - 1 : selectedIndex.value - 1;
|
||||
}
|
||||
}
|
||||
|
||||
function setResult(person) {
|
||||
// this.search = person.full_name;
|
||||
clear();
|
||||
// this.$emit('person', person);
|
||||
emit('person', person);
|
||||
}
|
||||
|
||||
function clear() {
|
||||
data.search = '';
|
||||
data.isOpen = false;
|
||||
data.results = [];
|
||||
error.value = '';
|
||||
// this.$emit("clear");
|
||||
}
|
||||
|
||||
function onEnter() {
|
||||
if (Array.isArray(data.results) && data.results.length && selectedIndex.value !== -1 && selectedIndex.value < data.results.length) {
|
||||
//this.display = this.results[this.selectedIndex];
|
||||
const person = data.results[selectedIndex.value];
|
||||
// this.$emit('person', person);
|
||||
emit('person', person);
|
||||
clear();
|
||||
selectedIndex.value = -1;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue