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

fix: readonly component style + TabList + required component (#61)
Release / release (push) Successful in 1m24s
Details

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é

---------

Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #61
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #61.
This commit is contained in:
Autin
2026-06-04 06:45:24 +00:00
committed by Autin
parent b55050b2ad
commit 9ff3e83c03
58 changed files with 3192 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/malio/select/Select.vue
+45 -20
View File
@@ -8,8 +8,10 @@
: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="peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none"
:class="[
isReadonly ? '' : 'grow-height',
isReadonly ? '' : 'focus-visible:border-m-primary',
hasError
? isOpen
? openDirection === 'down'
@@ -22,14 +24,16 @@
? 'rounded-b-none !border !border-m-success !border-b-transparent'
: 'rounded-t-none !border !border-m-success !border-t-transparent'
: 'border-m-success'
: isOpen
? openDirection === 'down'
? 'rounded-b-none !border !border-m-primary !border-b-transparent'
: 'rounded-t-none !border !border-m-primary !border-t-transparent'
: isOptionSelected
? 'border-black'
: 'border-m-muted',
disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
: isReadonly
? 'border-black'
: isOpen
? openDirection === 'down'
? 'rounded-b-none !border !border-m-primary !border-b-transparent'
: 'rounded-t-none !border !border-m-primary !border-t-transparent'
: isOptionSelected
? 'border-black'
: 'border-m-muted',
disabled ? 'cursor-not-allowed border-m-muted text-black/60' : isReadonly ? 'cursor-default' : 'cursor-pointer',
label ? 'min-h-[40px]' : 'h-[40px] py-0',
rounded,
textField,
@@ -38,6 +42,8 @@
:aria-controls="listboxId"
:aria-invalid="hasError"
:aria-describedby="describedBy"
:aria-required="required || undefined"
:aria-readonly="isReadonly || undefined"
:disabled="disabled"
@click="toggle"
>
@@ -50,16 +56,20 @@
? 'text-m-danger'
: hasSuccess
? 'text-m-success'
: isOpen
? 'text-m-primary'
: isOptionSelected
: isReadonly
? isOptionSelected
? 'text-black'
: 'text-m-muted',
: 'text-m-muted'
: isOpen
? 'text-m-primary'
: isOptionSelected
? 'text-black'
: 'text-m-muted',
textLabel,
]"
:style="labelTransformStyle"
>
{{ label }}
{{ label }}<MalioRequiredMark v-if="required" />
</label>
<span
@@ -82,11 +92,15 @@
? 'text-m-success'
: disabled
? 'text-m-muted'
: isOpen
? 'text-m-primary'
: isOptionSelected
: isReadonly
? isOptionSelected
? 'text-black'
: 'text-m-muted'
: isOpen
? 'text-m-primary'
: isOptionSelected
? 'text-black'
: 'text-m-muted'
]"
>
<slot name="icon">
@@ -152,6 +166,7 @@
</ul>
</div>
<p
v-if="reserveMessageSpace || hint || error || success"
:id="`${buttonId}-describedby`"
:class="[
hasError
@@ -159,7 +174,8 @@
: hasSuccess
? 'text-m-success'
: 'text-m-muted',
'mt-1 ml-[2px] text-xs min-h-[1rem]',
'mt-1 ml-[2px] text-xs',
reserveMessageSpace ? 'min-h-[1rem]' : '',
]"
>
{{ error || success || hint }}
@@ -171,6 +187,7 @@
import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
import {Icon as IconifyIcon} from '@iconify/vue'
import {twMerge} from 'tailwind-merge'
import MalioRequiredMark from '../shared/RequiredMark.vue'
defineOptions({name: 'MalioSelect', inheritAttrs: false})
@@ -191,8 +208,11 @@ const props = withDefaults(defineProps<{
textLabel?: string
rounded?: string
disabled?: boolean
readonly?: boolean
groupClass?: string
noOptionsText?: string
required?: boolean
reserveMessageSpace?: boolean
}>(), {
options: () => [],
emptyOptionLabel: '',
@@ -205,8 +225,11 @@ const props = withDefaults(defineProps<{
textLabel: 'text-sm',
rounded: 'rounded-md',
disabled: false,
readonly: false,
groupClass: '',
noOptionsText: 'Aucune option disponible',
required: false,
reserveMessageSpace: true,
})
const emit = defineEmits<{
@@ -234,8 +257,9 @@ const hasSuccess = computed(() => !!props.success && !hasError.value)
const isOptionSelected = computed(() =>
props.options.some(o => o.value === props.modelValue)
)
const isReadonly = computed(() => props.readonly && !props.disabled)
const shouldFloatLabel = computed(() =>
isOpen.value || isOptionSelected.value
isReadonly.value ? isOptionSelected.value : (isOpen.value || isOptionSelected.value)
)
const selectedLabel = computed(() =>
props.options.find(o => o.value === props.modelValue)?.label ?? ''
@@ -263,6 +287,7 @@ function updateOpenDirection() {
}
function open() {
if (props.disabled || props.readonly) return
updateOpenDirection()
isOpen.value = true
@@ -306,7 +331,7 @@ function close() {
}
function toggle() {
if (props.disabled) return
if (props.disabled || props.readonly) return
if (isOpen.value) {
close()
return