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> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <QDrawer
<Teleport to="#searchbar" v-if="props.searchDataKey"> v-model="stateStore.leftDrawer"
<slot name="searchbar"> show-if-above
<VnSearchbar :width="256"
:data-key="props.searchDataKey" v-if="stateStore.isHeaderMounted()"
:url="props.searchUrl" >
:label="props.searchbarLabel" <QScrollArea class="fit">
:info="props.searchbarInfo" <component :is="descriptor" />
:custom-route-redirect-name="searchCustomRouteRedirect" <QSeparator />
:redirect="searchRedirect" <LeftMenu source="card" />
/> </QScrollArea>
</slot> </QDrawer>
</Teleport> <slot name="searchbar" v-if="props.searchDataKey">
<slot v-else name="searchbar" /> <VnSearchbar
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256"> :data-key="props.searchDataKey"
<QScrollArea class="fit"> :url="props.searchUrl"
<component :is="descriptor" /> :label="props.searchbarLabel"
<QSeparator /> :info="props.searchbarInfo"
<LeftMenu source="card" /> :custom-route-redirect-name="searchCustomRouteRedirect"
</QScrollArea> :redirect="searchRedirect"
</QDrawer> />
</template> </slot>
<slot v-else name="searchbar" />
<RightMenu> <RightMenu>
<template #right-panel v-if="props.filterPanel"> <template #right-panel v-if="props.filterPanel">
<component :is="props.filterPanel" :data-key="props.searchDataKey" /> <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 VnInput from 'src/components/common/VnInput.vue';
import useRedirect from 'src/composables/useRedirect'; import useRedirect from 'src/composables/useRedirect';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useStateStore } from 'src/stores/useStateStore';
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const state = useStateStore();
const props = defineProps({ const props = defineProps({
dataKey: { dataKey: {
@ -107,36 +109,37 @@ async function search() {
}); });
} }
</script> </script>
<template> <template>
<QForm @submit="search" id="searchbarForm"> <Teleport to="#searchbar" v-if="state.isHeaderMounted()">
<VnInput <QForm @submit="search" id="searchbarForm">
id="searchbar" <VnInput
v-model="searchText" id="searchbar"
:placeholder="t(props.label)" v-model="searchText"
dense :placeholder="t(props.label)"
standout dense
autofocus standout
> autofocus
<template #prepend> >
<QIcon <template #prepend>
v-if="!quasar.platform.is.mobile" <QIcon
class="cursor-pointer" v-if="!quasar.platform.is.mobile"
name="search" class="cursor-pointer"
@click="search" name="search"
/> @click="search"
</template> />
<template #append> </template>
<QIcon <template #append>
v-if="props.info && $q.screen.gt.xs" <QIcon
name="info" v-if="props.info && $q.screen.gt.xs"
class="cursor-info" name="info"
> class="cursor-info"
<QTooltip>{{ t(props.info) }}</QTooltip> >
</QIcon> <QTooltip>{{ t(props.info) }}</QTooltip>
</template> </QIcon>
</VnInput> </template>
</QForm> </VnInput>
</QForm>
</Teleport>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>