feat(gui-v2): search component layout

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { MetaInj } from '~/context'
+
+const { modelValue, field } = defineProps<{
+  modelValue?: string
+  field?: any
+}>()
+
+const emit = defineEmits(['update:modelValue', 'update:field'])
+
+const localValue = computed({
+  get: () => modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+const localField = computed({
+  get: () => field,
+  set: (val) => emit('update:field', val),
+})
+
+const meta = inject(MetaInj)
+const columns = computed(() =>
+  meta?.value?.columns?.map((c) => ({
+    value: c.id,
+    label: c.title,
+  })),
+)
+</script>
+
+<template>
+  <a-input-search v-model:value="localValue" class="max-w-[250px]">
+    <template #addonBefore>
+      <a-select v-model:value="localField" :options="columns" style="width: 100px" class="!text-xs" />
+    </template>
+  </a-input-search>
+</template>
+
+<style scoped></style>

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div dense class="nc-table-toolbar w-100 p-1 flex gap-1" style="z-index: 7">
+  <div dense class="nc-table-toolbar w-100 p-1 flex gap-1 align-center" style="z-index: 7">
+    <SmartsheetToolbarSearchData class="flex-shrink" />
     <SmartsheetToolbarFieldsMenu :show-system-fields="false" />
     <SmartsheetToolbarColumnFilterMenu />
     <SmartsheetToolbarSortListMenu />