MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#MUI-32] Création d'un composant saisie assistée (autocomplete) (#46)

Browse Source 
| 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: #46
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #46.
This commit is contained in:
Autin
2026-05-13 06:59:13 +00:00
committed by Autin
parent 9ed094ba86
commit b2e3a83bb9
12 changed files with 1949 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/components/malio/select/Select.vue
View File

@@ -6,6 +6,7 @@
>
<button
:id="buttonId"
ref="buttonRef"
type="button"
class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
:class="[
@@ -115,8 +116,16 @@
: 'border-m-primary'
]"
>
<li
v-if="normalizedOptions.length === 0"
class="px-3 py-2 text-m-muted"
data-test="no-options-text"
>
{{ noOptionsText }}
</li>
<li
v-for="(opt, index) in normalizedOptions"
v-else
:id="optionId(index)"
:key="String(opt.value)"
role="option"
@@ -177,6 +186,7 @@ const props = withDefaults(defineProps<{
rounded?: string
disabled?: boolean
groupClass?: string
noOptionsText?: string
}>(), {
options: () => [],
emptyOptionLabel: '',
@@ -190,12 +200,14 @@ const props = withDefaults(defineProps<{
rounded: 'rounded-md',
disabled: false,
groupClass: '',
noOptionsText: 'Aucune option disponible',
})
const emit = defineEmits<{
(e: 'update:modelValue', v: string | number | null): void
}>()
const root = ref<HTMLElement | null>(null)
const buttonRef = ref<HTMLButtonElement | null>(null)
const isOpen = ref(false)
const activeIndex = ref(-1)
const openDirection = ref<'down' | 'up'>('down')
@@ -299,6 +311,7 @@ function toggle() {
function select(value: string | number | null) {
emit('update:modelValue', value)
close()
buttonRef.value?.blur()
}
function onClickOutside(e: MouseEvent) {
@@ -316,6 +329,21 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
padding: 0 0.25rem;
}
.grow-height {
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
}
.grow-height:focus {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
@media (prefers-reduced-motion: reduce) {
.grow-height {
transition: none;
}
}
:deep(ul[role="listbox"]) {
scrollbar-width: auto;
}

34
app/components/malio/select/SelectCheckbox.vue
View File

@@ -6,6 +6,7 @@
>
<button
:id="buttonId"
ref="buttonRef"
type="button"
class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
:class="[
@@ -144,7 +145,14 @@
]"
>
<li
v-if="displaySelectAll"
v-if="normalizedOptions.length === 0"
class="px-3 py-2 text-m-muted"
data-test="no-options-text"
>
{{ noOptionsText }}
</li>
<li
v-if="displaySelectAll && normalizedOptions.length > 0"
class="border-b border-m-muted/30 px-3 py-2"
@mousedown.prevent
>
@@ -231,6 +239,7 @@ const props = withDefaults(defineProps<{
selectAllLabel?: string
disabled?: boolean
groupClass?: string
noOptionsText?: string
}>(), {
options: () => [],
emptyOptionLabel: '',
@@ -247,12 +256,14 @@ const props = withDefaults(defineProps<{
selectAllLabel: 'Tout sélectionner',
disabled: false,
groupClass: '',
noOptionsText: 'Aucune option disponible',
})
const emit = defineEmits<{
(e: 'update:modelValue', v: Array<string | number>): void
}>()
const root = ref<HTMLElement | null>(null)
const buttonRef = ref<HTMLButtonElement | null>(null)
const isOpen = ref(false)
const activeIndex = ref(-1)
const openDirection = ref<'down' | 'up'>('down')
@@ -367,9 +378,10 @@ function isChecked(value: string | number) {
function toggleOption(value: string | number) {
if (isChecked(value)) {
emit('update:modelValue', props.modelValue.filter(item => item !== value))
return
} else {
emit('update:modelValue', [...props.modelValue, value])
}
emit('update:modelValue', [...props.modelValue, value])
nextTick(() => buttonRef.value?.focus())
}
function toggleAll() {
@@ -378,6 +390,7 @@ function toggleAll() {
} else {
emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
}
nextTick(() => buttonRef.value?.focus())
}
function onClickOutside(e: MouseEvent) {
@@ -395,6 +408,21 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
padding: 0 0.25rem;
}
.grow-height {
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
}
.grow-height:focus {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
@media (prefers-reduced-motion: reduce) {
.grow-height {
transition: none;
}
}
:deep(ul[role="listbox"]) {
scrollbar-width: auto;
scrollbar-gutter: stable;