verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 59 Releases Wiki Activity

refactor: refs #6891 searchbar teleport

This commit is contained in:
Jorge Penadés 2024-06-03 12:58:26 +02:00
parent c78828d6a6
commit 36ff4e9312
2 changed files with 55 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/common/VnCard.vue
View File

@ -56,28 +56,29 @@ watchEffect(() => {
});
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar" v-if="props.searchDataKey">
<slot name="searchbar">
<VnSearchbar
:data-key="props.searchDataKey"
:url="props.searchUrl"
:label="props.searchbarLabel"
:info="props.searchbarInfo"
:custom-route-redirect-name="searchCustomRouteRedirect"
:redirect="searchRedirect"
/>
</slot>
</Teleport>
<slot v-else name="searchbar" />
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<component :is="descriptor" />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
</template>
<QDrawer
v-model="stateStore.leftDrawer"
show-if-above
:width="256"
v-if="stateStore.isHeaderMounted()"
>
<QScrollArea class="fit">
<component :is="descriptor" />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<slot name="searchbar" v-if="props.searchDataKey">
<VnSearchbar
:data-key="props.searchDataKey"
:url="props.searchUrl"
:label="props.searchbarLabel"
:info="props.searchbarInfo"
:custom-route-redirect-name="searchCustomRouteRedirect"
:redirect="searchRedirect"
/>
</slot>
<slot v-else name="searchbar" />
<RightMenu>
<template #right-panel v-if="props.filterPanel">
<component :is="props.filterPanel" :data-key="props.searchDataKey" />

61
src/components/ui/VnSearchbar.vue
View File

@ -5,9 +5,11 @@ import { useArrayData } from 'composables/useArrayData';
import VnInput from 'src/components/common/VnInput.vue';
import useRedirect from 'src/composables/useRedirect';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'src/stores/useStateStore';
const quasar = useQuasar();
const { t } = useI18n();
const state = useStateStore();
const props = defineProps({
dataKey: {
@ -107,36 +109,37 @@ async function search() {
});
}
</script>
<template>
<QForm @submit="search" id="searchbarForm">
<VnInput
id="searchbar"
v-model="searchText"
:placeholder="t(props.label)"
dense
standout
autofocus
>
<template #prepend>
<QIcon
v-if="!quasar.platform.is.mobile"
class="cursor-pointer"
name="search"
@click="search"
/>
</template>
<template #append>
<QIcon
v-if="props.info && $q.screen.gt.xs"
name="info"
class="cursor-info"
>
<QTooltip>{{ t(props.info) }}</QTooltip>
</QIcon>
</template>
</VnInput>
</QForm>
<Teleport to="#searchbar" v-if="state.isHeaderMounted()">
<QForm @submit="search" id="searchbarForm">
<VnInput
id="searchbar"
v-model="searchText"
:placeholder="t(props.label)"
dense
standout
autofocus
>
<template #prepend>
<QIcon
v-if="!quasar.platform.is.mobile"
class="cursor-pointer"
name="search"
@click="search"
/>
</template>
<template #append>
<QIcon
v-if="props.info && $q.screen.gt.xs"
name="info"
class="cursor-info"
>
<QTooltip>{{ t(props.info) }}</QTooltip>
</QIcon>
</template>
</VnInput>
</QForm>
</Teleport>
</template>
<style lang="scss" scoped>