[#MUI-24] Fix composant Select (#22)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #22
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #22.
This commit is contained in:
2026-03-26 07:33:20 +00:00
committed by Autin
parent 7ee64289a8
commit e8ddf4e083

View File

@@ -1,8 +1,7 @@
<template> <template>
<div <div
ref="root" ref="root"
class="relative mt-4 w-full" :class="mergedGroupClass"
:class="[minWidth, maxWidth]"
> >
<button <button
:id="buttonId" :id="buttonId"
@@ -154,6 +153,7 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue' import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
import {Icon as IconifyIcon} from '@iconify/vue' import {Icon as IconifyIcon} from '@iconify/vue'
import {twMerge} from 'tailwind-merge'
defineOptions({name: 'MalioSelect', inheritAttrs: false}) defineOptions({name: 'MalioSelect', inheritAttrs: false})
@@ -176,6 +176,7 @@ const props = withDefaults(defineProps<{
textLabel?: string textLabel?: string
rounded?: string rounded?: string
disabled?: boolean disabled?: boolean
groupClass?: string
}>(), { }>(), {
options: () => [], options: () => [],
emptyOptionLabel: '', emptyOptionLabel: '',
@@ -190,6 +191,7 @@ const props = withDefaults(defineProps<{
textLabel: 'text-sm', textLabel: 'text-sm',
rounded: 'rounded-md', rounded: 'rounded-md',
disabled: false, disabled: false,
groupClass: '',
}) })
const emit = defineEmits<{ const emit = defineEmits<{
@@ -208,6 +210,9 @@ const normalizedOptions = computed<Option[]>(() => [
{label: props.emptyOptionLabel, value: null}, {label: props.emptyOptionLabel, value: null},
...props.options, ...props.options,
]) ])
const mergedGroupClass = computed(() =>
twMerge('relative mt-4 w-full', props.minWidth, props.maxWidth, props.groupClass),
)
const hasError = computed(() => !!props.error) const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!props.success && !hasError.value) const hasSuccess = computed(() => !!props.success && !hasError.value)
const isOptionSelected = computed(() => const isOptionSelected = computed(() =>
@@ -315,7 +320,6 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
:deep(ul[role="listbox"]) { :deep(ul[role="listbox"]) {
scrollbar-width: auto; scrollbar-width: auto;
scrollbar-gutter: stable;
} }
:deep(.select-scrollbar-primary) { :deep(.select-scrollbar-primary) {