tristan
dc33cf4135
Polish across the form input components, plus two new features and a few
standalone fixes.
Fixes
-----
* Reserve hint/error/success paragraph space (min-h-[1rem]) in 15
components so a single error message no longer shifts neighboring grid
cells: InputText, Email, Password, Phone, Amount, Number, Upload,
Autocomplete, RichText, TextArea, Select, SelectCheckbox, Time,
TimePicker, CalendarField, Checkbox.
* InputPhone: the '+' add button now follows the icon-state cascade
(muted / primary on focus / black when filled / danger / success) like
the other field icons instead of being permanently primary.
* Select and SelectCheckbox: chevron color follows the field state
(muted by default, primary when open, black when an option is
selected, danger / success on error / success) instead of always being
text-current.
* InputTextArea: single-root component (was multi-root). The message
wrapper used to occupy its own grid cell, breaking row-span layouts.
Now flex flex-col, with the textarea area filling the available height
via flex-1 and the message inside the same root.
* Disabled labels use text-m-muted (border-gray) instead of text-black/60
(dark) across InputText, Email, Password, Amount, Phone, Upload,
Autocomplete, TextArea, RichText. Also removes an unreachable
peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60 rule that
twMerge was silently overriding with text-black.
* InputAutocomplete: eliminates four sources of visual jitter when
focusing / opening a field that already has a selected value.
- Drop peer-focus:-translate-y-[1.55rem] extra label translate.
- Drop the .grow-height:focus padding rule (no more height growth or
downward text shift on focus).
- Drop focus:pl-[11px] (no more 1px horizontal jump).
- Replace !border-b-0 with !border-b-transparent so the bottom border
still reserves its 1px while remaining invisible against the
dropdown.
* Select / SelectCheckbox: same anti-jitter treatment.
- Drop .grow-height:focus padding rule (~12px height growth gone).
- Replace !border-b-0 / !border-t-0 with !border-b-transparent /
!border-t-transparent across danger / success / primary branches.
* Button: default width 240px -> 200px to match the form button sizing
used across the app. Test updated to match.
Features
--------
* InputTextArea: scrollbar turns primary blue on focus
(scrollbar-color: rgb(var(--m-primary)) transparent), matching the
Select listbox styling.
* InputAutocomplete: new localFilter prop (default false). When enabled,
filters the options prop client-side based on the input value
(case-insensitive label.includes(query)), so static lists no longer
need a @search listener. Async/API usage keeps the existing behavior.
Playground "Simple statique" and "Avec icône à gauche" examples use
local-filter.
Playground
----------
* client.vue: tighter grid gap (gap-y-5) plus an example error on a
SelectCheckbox to visually exercise the message-space fix.
Tests
-----
All component test files include regression coverage for the above.
720/720 tests pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
103 lines
2.8 KiB
Vue
103 lines
2.8 KiB
Vue
<template>
|
|
<button
|
|
:id="buttonId"
|
|
:class="mergedButtonClass"
|
|
:disabled="disabled"
|
|
type="button"
|
|
v-bind="attrs"
|
|
@click="onClick"
|
|
>
|
|
<IconifyIcon
|
|
v-if="iconName && iconPosition === 'left'"
|
|
:icon="iconName"
|
|
:width="iconSize"
|
|
:height="iconSize"
|
|
data-test="icon-left"
|
|
/>
|
|
|
|
<span><slot>{{ label }}</slot></span>
|
|
|
|
<IconifyIcon
|
|
v-if="iconName && iconPosition === 'right'"
|
|
:icon="iconName"
|
|
:width="iconSize"
|
|
:height="iconSize"
|
|
data-test="icon-right"
|
|
/>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, useAttrs, useId } from 'vue'
|
|
import { Icon as IconifyIcon } from '@iconify/vue'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
defineOptions({ name: 'MalioButton', inheritAttrs: false })
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
id?: string
|
|
label?: string
|
|
disabled?: boolean
|
|
buttonClass?: string
|
|
variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
|
|
iconName?: string
|
|
iconPosition?: 'left' | 'right'
|
|
iconSize?: string | number
|
|
}>(),
|
|
{
|
|
id: '',
|
|
label: '',
|
|
disabled: false,
|
|
buttonClass: '',
|
|
variant: 'primary',
|
|
iconName: '',
|
|
iconPosition: 'right',
|
|
iconSize: 16,
|
|
},
|
|
)
|
|
|
|
const attrs = useAttrs()
|
|
const generatedId = useId()
|
|
|
|
const buttonId = computed(() => props.id || `malio-button-${generatedId}`)
|
|
|
|
const variantClasses = computed(() => {
|
|
if (props.disabled) {
|
|
if (props.variant === 'tertiary') {
|
|
return 'border border-m-disabled text-m-disabled bg-transparent cursor-not-allowed'
|
|
}
|
|
return 'bg-m-disabled text-white cursor-not-allowed'
|
|
}
|
|
|
|
switch (props.variant) {
|
|
case 'secondary':
|
|
return 'bg-m-btn-secondary hover:bg-m-btn-secondary-hover active:bg-m-btn-secondary-active text-white cursor-pointer'
|
|
case 'tertiary':
|
|
return 'border border-m-btn-primary bg-transparent text-m-btn-primary hover:border-m-btn-primary-hover hover:text-m-btn-primary-hover active:border-m-btn-primary-active active:text-m-btn-primary-active cursor-pointer'
|
|
case 'danger':
|
|
return 'bg-m-btn-danger hover:bg-m-btn-danger-hover active:bg-m-btn-danger-active text-white cursor-pointer'
|
|
default:
|
|
return 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
|
|
}
|
|
})
|
|
|
|
const mergedButtonClass = computed(() =>
|
|
twMerge(
|
|
'inline-flex w-[200px] h-[40px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
|
|
variantClasses.value,
|
|
props.buttonClass,
|
|
),
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'click', e: MouseEvent): void
|
|
}>()
|
|
|
|
function onClick(e: MouseEvent) {
|
|
if (!props.disabled) {
|
|
emit('click', e)
|
|
}
|
|
}
|
|
</script>
|