charts search added

src/views/ChartsView.vue

@@ -1,14 +1,15 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useChartsApi } from '@/api/charts.js'
 import PeriodSelector from '@/components/PeriodSelector.vue'
 import ChartsCard from '@/views/ChartsView/ChartsCard.vue'
 import router from '@/router/index.js'
+import ChartsSearch from '@/views/ChartsView/ChartsSearch.vue'
 
 
 const { getChartsPrices } = useChartsApi()
 
-const pricesList = ref(null)
+const pricesList = ref([])
 const loading = ref(true)
 const error = ref(null)
 
@@ -38,12 +39,26 @@ onMounted(() => {
 function handleSelectDays(days) {
   fetchPrices(days)
 }
+
+const searchQuery = ref('');
+
+
+const filteredPrices = computed(() => {
+  if (!searchQuery.value.trim()) {
+    return pricesList.value;
+  }
+  const q = searchQuery.value.toLowerCase();
+  return pricesList.value.filter(item =>
+    item.name.toLowerCase().includes(q)
+  );
+});
 </script>
 
 <template>
+  <ChartsSearch v-model="searchQuery" />
   <PeriodSelector @days="handleSelectDays" />
   <n-grid responsive="screen" cols="1 s:1 m:1 l:2 xl:2 2xl:2" class="grid-main">
-    <n-gi class="grid-item" v-for="item in pricesList" :key="item.merch_uuid">
+    <n-gi class="grid-item" v-for="item in filteredPrices" :key="item.merch_uuid">
       <router-link :to="`/details/${item.merch_uuid}`" class="card-link">
         <ChartsCard :chartsData="item" />
       </router-link>

src/views/ChartsView/ChartsSearch.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const localValue = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    localValue.value = newVal
+  }
+)
+
+watch(localValue, (newVal) => {
+  emit('update:modelValue', newVal)
+})
+</script>
+
+<template>
+  <div class="search-bar">
+    <n-input v-model:value="localValue" placeholder="Search..." clearable />
+  </div>
+</template>
+
+<style scoped>
+.search-bar {
+  flex-shrink: 0;
+  flex-grow: 1;
+  min-width: 200px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+</style>