Browse Source

refactor(gui-v2): search field style improvement

pull/2860/head
Pranav C 2 years ago committed by Pranav C
parent
commit
4eb762ef40
  1. 16
      packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

16
packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

@ -1,6 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore' import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
import { MetaInj, ReloadViewDataHookInj, SearchFieldAndQueryCbkInj } from '~/context' import { MetaInj, ReloadViewDataHookInj } from '~/context'
import MdiSearchIcon from '~icons/mdi/magnify'
import MdiMenuDownIcon from '~icons/mdi/menu-down'
const reloadData = inject(ReloadViewDataHookInj) const reloadData = inject(ReloadViewDataHookInj)
const { search, meta } = useSmartsheetStoreOrThrow() const { search, meta } = useSmartsheetStoreOrThrow()
@ -11,18 +13,24 @@ const columns = computed(() =>
label: c.title, label: c.title,
})), })),
) )
</script> </script>
<template> <template>
<a-input <a-input
v-model:value="search.value" v-model:value="search.value"
size="small" size="small"
class="max-w-[250px]" class="max-w-[200px]"
placeholder="Filter query" placeholder="Filter query"
@press-enter="reloadData.trigger()" @press-enter="reloadData.trigger()"
> >
<template #addonBefore> <template #addonBefore @click="isDropdownOpen = true">
<a-select v-model:value="search.field" :options="columns" style="width: 80px" class="!text-xs" size="small" /> <div class="flex align-center relative">
<MdiSearchIcon class="text-grey"/>
<MdiMenuDownIcon class="text-grey"/>
<a-select size="small" :dropdownMatchSelectWidth="false" v-model:value="search.field" :options="columns" class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0">
</a-select>
</div>
</template> </template>
</a-input> </a-input>
</template> </template>

Loading…
Cancel
Save