From 4b03bed3aad191812a863de9deb92b216dbdb566 Mon Sep 17 00:00:00 2001
From: Maxime Allanic <maxime@allanic.me>
Date: Thu, 22 May 2025 17:22:36 +0200
Subject: [PATCH 1/2] feat: update ASelect component to use defineEmits and
 improve props definition

---
 components/ASelect.vue | 68 +++++++++++++++++++++++++++++-------------
 1 file changed, 47 insertions(+), 21 deletions(-)

diff --git a/components/ASelect.vue b/components/ASelect.vue
index 92028e0..a18ec6c 100644
--- a/components/ASelect.vue
+++ b/components/ASelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, computed, PropType, watch, ref } from "vue";
+import { defineProps, computed, PropType, watch, ref, defineEmits } from "vue";
 import { useColor } from "../stores/color";
 import type { Colors } from "../stores/color";
 import Multiselect from "@vueform/multiselect";
@@ -26,29 +26,42 @@ interface ASelectProps {
   label: string | null;
   closeOnSelect: boolean;
   appendToBody: boolean;
+  hideSelected: boolean;
 }
 
-const props = withDefaults(defineProps<ASelectProps>(), {
-  modelValue: [],
-  options: ["Option 1", "Option 2", "Option 3"],
-  noResults: "No results found",
-  noOptions: "The list is empty",
-  placeholder: "Type your tag..",
-  color: "grey-lighter",
-  tagColor: "primary",
-  arrowColor: "grey",
-  mode: "tags",
-  disabled: false,
-  createOption: false,
-  openDirection: undefined,
-  required: false,
-  searchable: true,
-  name: undefined,
-  label: null,
-  closeOnSelect: false,
-  appendToBody: false,
+const props = defineProps({
+  modelValue: { type: Array as PropType<string[]>, default: () => [] },
+  options: { type: Array as PropType<string[]>, default: () => ["Option 1", "Option 2", "Option 3"] },
+  noResults: { type: String, default: "No results found" },
+  noOptions: { type: String, default: "The list is empty" },
+  placeholder: { type: String, default: "Type your tag.." },
+  color: { type: String as PropType<Colors>, default: "grey-light" },
+  tagColor: { type: String as PropType<Colors>, default: "primary" },
+  arrowColor: { type: String as PropType<Colors>, default: "grey" },
+  mode: { type: String as PropType<"tags"|"single"|"multiple"|undefined>, default: "tags" },
+  disabled: { type: Boolean, default: false },
+  createOption: { type: Boolean, default: false },
+  openDirection: { type: String as PropType<"top"|"bottom"|undefined>, default: undefined },
+  required: { type: Boolean, default: false },
+  searchable: { type: Boolean, default: true },
+  name: { type: String as PropType<string|undefined>, default: undefined },
+  label: { type: String as PropType<string|null>, default: null },
+  closeOnSelect: { type: Boolean, default: false },
+  appendToBody: { type: Boolean, default: false },
+  hideSelected: { type: Boolean, default: false },
 });
 
+// Emit events as per component API
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string[], id?: string): void;
+  (e: 'select', option: any, id?: string): void;
+  (e: 'remove', option: any, id?: string): void;
+  (e: 'search-change', query: string, id?: string): void;
+  (e: 'tag', query: string, id?: string): void;
+  (e: 'open', id?: string): void;
+  (e: 'close', value: string[], id?: string): void;
+}>();
+
 const color = computed(() => {
   return props.color;
 });
@@ -74,6 +87,7 @@ const isInputFilled = computed(() => inputValue?.value?.length > 0);
 
 const onInputChange = (newValue: string[]) => {
   inputValue.value = newValue;
+  emit('update:modelValue', newValue, props.name);
 };
 
 const isInputFilledToChangeBorderColor = computed(() => {
@@ -90,6 +104,12 @@ const isInputFilledToChangeBorderColor = computed(() => {
   return true;
 });
 
+const onSelectOption = (opt: any) => emit('select', opt, props.name);
+const onRemoveOption = (opt: any) => emit('remove', opt, props.name);
+const onSearchChange = (query: string) => emit('search-change', query, props.name);
+const onTagEvent = (query: string) => emit('tag', query, props.name);
+const onOpen = () => emit('open', props.name);
+const onClose = (value: string[]) => emit('close', value, props.name);
 </script>
 
 <template>
@@ -110,7 +130,7 @@ const isInputFilledToChangeBorderColor = computed(() => {
       :clearOnSelect="mode !== 'single' && required"
       :canDeselect="mode !== 'single' && required"
       :clearOnBlur="true"
-      :hide-selected="false"
+      :hide-selected="hideSelected"
       :noOptionsText="noOptions"
       :noResultsText="noResults"
       :placeholder="placeholder"
@@ -119,6 +139,12 @@ const isInputFilledToChangeBorderColor = computed(() => {
       :open-direction="openDirection"
       class="multiselect"
       @change="onInputChange($event)"
+      @select="onSelectOption"
+      @remove="onRemoveOption"
+      @search-change="onSearchChange"
+      @tag="onTagEvent"
+      @open="onOpen"
+      @close="onClose"
     >
       <template #option="{ option, search }">
         <template v-if="mode == 'multiple'">

From 9d450a5a623c7cf650e98d3ffd407e5ebd0f981b Mon Sep 17 00:00:00 2001
From: Maxime Allanic <maxime@allanic.me>
Date: Fri, 23 May 2025 13:05:25 +0200
Subject: [PATCH 2/2] refactor: replace defineProps with withDefaults for
 improved props handling in ASelect component

---
 components/ASelect.vue | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/components/ASelect.vue b/components/ASelect.vue
index a18ec6c..f4434d4 100644
--- a/components/ASelect.vue
+++ b/components/ASelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, computed, PropType, watch, ref, defineEmits } from "vue";
+import { defineProps, withDefaults, computed, watch, ref, defineEmits } from "vue";
 import { useColor } from "../stores/color";
 import type { Colors } from "../stores/color";
 import Multiselect from "@vueform/multiselect";
@@ -29,26 +29,26 @@ interface ASelectProps {
   hideSelected: boolean;
 }
 
-const props = defineProps({
-  modelValue: { type: Array as PropType<string[]>, default: () => [] },
-  options: { type: Array as PropType<string[]>, default: () => ["Option 1", "Option 2", "Option 3"] },
-  noResults: { type: String, default: "No results found" },
-  noOptions: { type: String, default: "The list is empty" },
-  placeholder: { type: String, default: "Type your tag.." },
-  color: { type: String as PropType<Colors>, default: "grey-light" },
-  tagColor: { type: String as PropType<Colors>, default: "primary" },
-  arrowColor: { type: String as PropType<Colors>, default: "grey" },
-  mode: { type: String as PropType<"tags"|"single"|"multiple"|undefined>, default: "tags" },
-  disabled: { type: Boolean, default: false },
-  createOption: { type: Boolean, default: false },
-  openDirection: { type: String as PropType<"top"|"bottom"|undefined>, default: undefined },
-  required: { type: Boolean, default: false },
-  searchable: { type: Boolean, default: true },
-  name: { type: String as PropType<string|undefined>, default: undefined },
-  label: { type: String as PropType<string|null>, default: null },
-  closeOnSelect: { type: Boolean, default: false },
-  appendToBody: { type: Boolean, default: false },
-  hideSelected: { type: Boolean, default: false },
+const props = withDefaults(defineProps<ASelectProps>(), {
+  modelValue: () => [],
+  options: () => ["Option 1", "Option 2", "Option 3"],
+  noResults: "No results found",
+  noOptions: "The list is empty",
+  placeholder: "Type your tag..",
+  color: "grey-light",
+  tagColor: "primary",
+  arrowColor: "grey",
+  mode: "tags",
+  disabled: false,
+  createOption: false,
+  openDirection: undefined,
+  required: false,
+  searchable: true,
+  name: undefined,
+  label: null,
+  closeOnSelect: false,
+  appendToBody: false,
+  hideSelected: false
 });
 
 // Emit events as per component API