various improvements on TreeSelect

components/Ui/Input/TreeSelect.vue

@@ -12,7 +12,7 @@
   >
     <template #selection="{ item, index }">
       <v-chip
-        v-if="index < maxVisibleChips"
+        v-if="maxVisibleChips && index < maxVisibleChips"
         :key="item.raw.value"
         closable
         @click:close="removeItem(item.raw.value)"
@@ -20,7 +20,7 @@
         {{ item.raw.label }}
       </v-chip>
       <span
-        v-if="index === maxVisibleChips && selectedItems.length > maxVisibleChips"
+        v-if="maxVisibleChips && index === maxVisibleChips && selectedItems.length > maxVisibleChips"
         class="text-grey text-caption align-self-center"
       >
         (+{{ selectedItems.length - maxVisibleChips }} autres)
@@ -69,7 +69,8 @@
 
       <template v-else>
         <v-list-item
-          v-bind="props"
+          @click="toggleItem(item.raw.value)"
+          :active="selectedItems.includes(item.raw.value)"
           :class="{ 'pl-12': item.raw.level === 2, 'pl-8': item.raw.level === 1 }"
         >
           <template #prepend>
@@ -77,6 +78,7 @@
               :model-value="selectedItems.includes(item.raw.value)"
               @click.stop="toggleItem(item.raw.value)"
               color="primary"
+              :hide-details="true"
             />
           </template>
           <v-list-item-title>
@@ -107,6 +109,11 @@ const props = defineProps({
     type: Array as PropType<SelectItem[]>,
     required: true
   },
+  maxVisibleChips: {
+    type: Number,
+    required: false,
+    default: null
+  }
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -199,7 +206,7 @@ const removeItem = (value: string) => {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .v-list-item--active {
   background-color: rgba(var(--v-theme-primary), 0.1);
 }