src/components/common/VnSection.vue

@@ -80,7 +80,6 @@ onBeforeMount(() => {
         />
         <div :id="searchbarId"></div>
     </slot>
-
     <RightMenu>
         <template #right-panel v-if="$slots['rightMenu'] || rightFilter">
             <slot name="rightMenu">

src/components/ui/FetchedTags.vue

@@ -18,8 +18,7 @@ const $props = defineProps({
     },
     columns: {
         type: Number,
-        required: false,
+        default: 3,
-        default: null,
     },
 });
 

src/pages/Item/ItemList.vue

@@ -391,7 +391,7 @@ onBeforeMount(async () => {
                     {{ row?.subName.toUpperCase() }}
                 </div>
             </div>
-            <FetchedTags :item="row" :columns="3" />
+            <FetchedTags :item="row" />
         </template>
         <template #more-create-dialog="{ data }">
             <VnInput

src/pages/Order/Card/OrderCatalog.vue

@@ -15,15 +15,18 @@ const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const dataKey = 'OrderCatalogList';
-const arrayData = useArrayData(dataKey);
+const catalogParams = {
-const store = arrayData.store;
-const tags = ref([]);
-const itemRefs = ref({});
-
-let catalogParams = {
     orderFk: route.params.id,
     orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
 };
+const arrayData = useArrayData(dataKey, {
+    url: 'Orders/CatalogFilter',
+    limit: 50,
+    userParams: catalogParams,
+});
+const store = arrayData.store;
+const tags = ref([]);
+const itemRefs = ref({});
 
 onMounted(() => {
     stateStore.rightDrawer = true;
@@ -66,7 +69,6 @@ function extractValueTags(items) {
     );
     tagValue.value = resultValueTags;
 }
-const autoLoad = computed(() => !!JSON.parse(route?.query.table ?? '{}')?.categoryFk);
 
 watch(
     () => store.data,
@@ -78,16 +80,15 @@ watch(
 </script>
 
 <template>
-    <VnSearchbar
+    <Teleport to="#section-searchbar" v-if="stateStore.isHeaderMounted()">
-        :data-key="dataKey"
+        <VnSearchbar
-        :user-params="catalogParams"
+            :data-key="dataKey"
-        :static-params="['orderFk', 'orderBy']"
+            :redirect="false"
-        :redirect="false"
+            :label="t('Search items')"
-        url="Orders/CatalogFilter"
+            :info="t('You can search items by name or id')"
-        :label="t('Search items')"
+            :search-remove-params="false"
-        :info="t('You can search items by name or id')"
+        />
-        :search-remove-params="false"
+    </Teleport>
-    />
     <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <OrderCatalogFilter
             :data-key="dataKey"
@@ -98,13 +99,7 @@ watch(
     </Teleport>
     <QPage class="column items-center q-pa-md" data-cy="orderCatalogPage">
         <div class="full-width">
-            <VnPaginate
+            <VnPaginate :data-key="dataKey">
-                :data-key="dataKey"
-                url="Orders/CatalogFilter"
-                :limit="50"
-                :user-params="catalogParams"
-                :auto-load="autoLoad"
-            >
                 <template #body="{ rows }">
                     <div class="catalog-list">
                         <div v-if="rows && !rows?.length" class="no-result">