frontend/src/views/CollectionView/CollectionToolbar.vue

<script setup>
import { ref, watch } from 'vue'
import router from '@/router/index.js'


const value = ref(null)
const options = [
  { label: 'Placeholder 1', value: 'Placeholder 1' },
  { label: 'Placeholder 2', value: 'Placeholder 2' },
]

const addMerch = () => {
  router.push({ name: 'addMerch' })
}

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="toolbar">
    <n-button type="primary" class="toolbar-item" @click="addMerch"> Add merch </n-button>

    <div class="search-wrapper toolbar-item">
      <n-input v-model:value="localValue" placeholder="Search..." clearable />
    </div>

    <div class="selector toolbar-item">
      <n-select
        placeholder="Select label"
        clearable
        multiple
        v-model:value="value"
        :options="options"
        class="mobile-full-width" />
    </div>
  </div>
</template>

<style scoped>

</style>