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>
Malio UI Layer (Nuxt)
Layer Nuxt partageable pour centraliser des composants UI et les réutiliser dans plusieurs projets.
Le layer est à la racine du repo.
Le dossier .playground/ sert à tester localement les composants du layer.
Commandes utiles
Installation
npm install
Développement local (playground)
Préparer les fichiers Nuxt générés du playground (utile pour TypeScript + ESLint) :
npm run dev:prepare
Lancer le playground :
npm run dev
Qualité
Lancer le linter :
npm run lint
Build / preview
Build de production du playground :
npm run build
Génération statique du playground :
npm run generate
Prévisualiser le build :
npm run preview
Livraison / publication du layer (CI)
La publication est automatique via .gitea/workflows/release.yml sur push main / master.
Le job CI :
- Installe les dépendances
- Lance
npm run dev:prepare - Lance
npm run lint - Lance
semantic-release(version automatique + publish sur Gitea Packages)
Les versions sont calculées via Conventional Commits :
fix: ...-> patch (1.0.0->1.0.1)feat: ...-> minor (1.0.0->1.1.0)feat!: ...ouBREAKING CHANGE:-> major (1.0.0->2.0.0)
Secrets requis dans le repo Gitea :
NPM_TOKEN: token avec droits publish packageRELEASE_TOKEN: token avec droits write repo (tags/releases)
Commande locale utile avant push :
npm pack --dry-run
Tester un composant dans le playground
Le playground étend déjà le layer via .playground/nuxt.config.ts.
Exemple rapide :
- Créer un composant dans le layer
Fichierapp/components/malio/Badge.vue
<template>
<span class="inline-flex rounded-full bg-gray-900 px-2 py-1 text-xs text-white">
{{ label }}
</span>
</template>
<script setup lang="ts">
withDefaults(defineProps<{ label?: string }>(), {
label: 'Badge',
})
</script>
- L’utiliser dans le playground
Fichier.playground/pages/index.vue
<template>
<div class="p-6 space-y-4">
<MalioBadge label="Nouveau composant" />
</div>
</template>
- Lancer le playground
npm run dev
Utiliser ce layer dans un autre projet Nuxt
1) Configurer le .npmrc du projet consommateur
Option simple :
@malio:registry=https://gitea.malio.fr/api/packages/MALIO-DEV/npm/
Puis :
export NPM_TOKEN=TON_TOKEN_GITEA
2) Installer le package
npm install @malio/layer-ui
3) Étendre le layer
Dans nuxt.config.ts du projet consommateur :
export default defineNuxtConfig({
extends: ['@malio/layer-ui'],
})