add: Form create load

src/components/ui/Products.vue

@@ -0,0 +1,61 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { searchProducts } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+
+    // defineProps(['selectedCategory']);
+    defineProps({
+        selectedProduct: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedProduct', 'clear-option'])
+
+    const searchProductFn = async(query) => {
+        isLoading.value = true;
+        const resp = await searchProducts(query);
+        options.value = resp;
+        isLoading.value = false;
+        // truckTypes.value = resp;
+    }
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedProduct"
+        @input="$event => $emit('update:selectedProduct', $event.target.value)"
+        :options="options"
+        :multiple="multiple"
+        :searchable="true"
+        :loading="isLoading"
+        :close-on-select="true"
+        @search-change="searchProductFn"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por producto"
+        label="name"
+        track-by="name"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover seleción"
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Lista vacia.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>