96 lines
2.9 KiB
Vue
96 lines
2.9 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { breadcrumbMeta } from '@Controllers/BreadcrumbController.js';
|
|
|
|
import IconButton from '@Holos/Button/Icon.vue'
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
import BreadcrumbContainer from '@Holos/Breadcrumb/Container.vue'
|
|
import BreadcrumbItem from '@Holos/Breadcrumb/Item.vue'
|
|
|
|
/** Definidores */
|
|
const vroute = useRoute();
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits([
|
|
'search'
|
|
]);
|
|
|
|
/** Propiedades */
|
|
const props = defineProps({
|
|
title: String,
|
|
placeholder: {
|
|
default: Lang('search'),
|
|
type: String
|
|
}
|
|
})
|
|
|
|
const breadcrumbs = breadcrumbMeta(vroute);
|
|
const query = ref('');
|
|
|
|
/** Métodos */
|
|
const search = () => {
|
|
emit('search', query.value);
|
|
}
|
|
|
|
const clear = () => {
|
|
query.value = '';
|
|
|
|
search();
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<BreadcrumbContainer>
|
|
<template v-for="(item, index) in breadcrumbs" :key="item.name">
|
|
<BreadcrumbItem
|
|
:name="item.name"
|
|
:icon="item.icon"
|
|
:route="item.route"
|
|
:active="index === breadcrumbs.length - 1"
|
|
/>
|
|
</template>
|
|
</BreadcrumbContainer>
|
|
<div class="flex w-full justify-between items-center border-y-2 border-page-t dark:border-page-dt">
|
|
<div>
|
|
<div class="relative py-1 z-0">
|
|
<div @click="search" class="absolute inset-y-0 right-2 flex items-center pl-3 cursor-pointer">
|
|
<GoogleIcon
|
|
:title="$t('search')"
|
|
class="text-xl text-gray-700 hover:scale-110 hover:text-danger"
|
|
name="search"
|
|
/>
|
|
<GoogleIcon
|
|
v-show="query"
|
|
:title="$t('clear')"
|
|
class="text-xl text-gray-700 hover:scale-110 hover:text-danger"
|
|
name="close"
|
|
@click="clear"
|
|
/>
|
|
</div>
|
|
<input
|
|
id="search"
|
|
class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-sm outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1"
|
|
autocomplete="off"
|
|
:placeholder="placeholder"
|
|
required
|
|
type="text"
|
|
v-model="query"
|
|
@keyup.enter="search"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-1 text-sm" id="buttons">
|
|
<slot />
|
|
<RouterLink :to="$view({name:'index'})">
|
|
<IconButton
|
|
:title="$t('home')"
|
|
class="text-white !bg-blue-600"
|
|
icon="home"
|
|
filled
|
|
/>
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</template> |