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

feat : ajouts du composant input text area et fix sur le input text

Browse Source
This commit is contained in:
Kevin Boudet
2026-02-27 09:24:37 +01:00
parent 0a3cf50576
commit 594708e71c
8 changed files with 767 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/components/malio/InputText.vue
View File

@@ -8,37 +8,42 @@
v-maska="mask"
:name="name"
:autocomplete="autocomplete"
class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none focus:border-2"
class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 "
:class="[
disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
hasError
? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
: hasSuccess
? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
: 'border-m-muted focus:border-m-primary focus:pl-[11px]',
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
: 'border-m-muted focus:border-m-primary',
textInput,
iconInputPaddingClass,
focusPaddingClass,
rounded,
]"
:required="required"
:maxlength="maxLength"
:minlength="minLength"
:disabled="disabled"
:value="modelValue ?? ''"
:value="currentValue"
:readonly="readonly"
:aria-invalid="!!error"
:aria-describedby="describedBy"
v-bind="attrs"
placeholder=" "
placeholder="_"
type="text"
@input="onInput"
@focus="isFocused = true"
@blur="isFocused = false"
>
<label
v-if="label"
:for="inputId"
class="floating-label absolute left-3 top-2 mt-1 origin-left transition-transform duration-150 font-medium"
class="floating-label absolute top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
:class="[
labelPositionClass,
shouldFloatLabel ? '-translate-y-[1.15rem] scale-90' : '',
disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
hasError
? 'text-m-error'
@@ -59,7 +64,7 @@
data-test="icon"
:class="[
hasError ? 'text-m-error' : hasSuccess ? 'text-m-success' : '',
'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
iconPositionClass,
iconColor,
]"
/>
@@ -85,7 +90,7 @@
import type {MaskInputOptions} from 'maska'
import {vMaska} from 'maska/vue'
import {computed, useAttrs, useId} from 'vue'
import {computed, ref, useAttrs, useId} from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
defineOptions({name: 'MalioInputText', inheritAttrs: false})
@@ -110,6 +115,7 @@ const props = withDefaults(
error?: string
success?: string
iconName?: string
iconPosition?: 'left' | 'right'
rounded?: string
iconSize?: string | number
iconColor?: string
@@ -118,9 +124,10 @@ const props = withDefaults(
{
id: '',
name: '',
autocomplete: '',
autocomplete: 'off',
modelValue: undefined,
iconName: '',
iconPosition: 'right',
label: '',
minWidth: 'w-96',
maxWidth: '',
@@ -143,8 +150,13 @@ const props = withDefaults(
const attrs = useAttrs()
const generatedId = useId()
const localValue = ref('')
const isFocused = ref(false)
const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
const isControlled = computed(() => props.modelValue !== undefined)
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!props.success)
@@ -162,20 +174,34 @@ const emit = defineEmits<{
const onInput = (event: Event) => {
const target = event.target as HTMLInputElement
if (!isControlled.value) {
localValue.value = target.value
}
emit('update:modelValue', target.value)
}
const iconInputPaddingClass = computed(() => {
return props.iconName ? 'pr-10' : ''
if (!props.iconName) return ''
return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3'
})
const labelPositionClass = computed(() => {
if (props.iconName && props.iconPosition === 'left') return 'left-8'
return 'left-3'
})
const focusPaddingClass = computed(() => {
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
return 'focus:pl-[11px]'
})
const iconPositionClass = computed(() => {
const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
})
</script>
<style scoped>
.floating-input:focus + label,
.floating-input:not(:placeholder-shown) + label {
transform: translateY(-1.15rem) scale(0.9);
}
.floating-label {
background: white;
padding: 0 0.25rem;

185
app/components/malio/InputTextArea.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<div
class="relative mt-4 w-full"
>
<textarea
:id="inputId"
:name="name"
:autocomplete="autocomplete"
class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 overflow-auto"
:class="[
disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
hasError
? 'border-m-error focus:border-m-error focus:pl-[11px]'
: hasSuccess
? 'border-m-success focus:border-m-success focus:pl-[11px]'
: 'border-m-muted focus:border-m-primary focus:pl-[11px]',
textInput,
showCounterComputed ? 'pb-6' : '',
rounded,
]"
:required="required"
:maxlength="maxLength"
:rows="rowsCount"
:disabled="disabled"
:value="currentValue"
:readonly="readonly"
:aria-invalid="hasError"
:aria-describedby="describedBy"
:style="textareaStyle"
v-bind="attrs"
placeholder="_"
@input="onInput"
@focus="isFocused = true"
@blur="isFocused = false"
/>
<label
v-if="label"
:for="inputId"
class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
:class="[
shouldFloatLabel ? '-translate-y-[1.15rem] scale-90' : '',
disabled ? 'text-black/60' : '',
hasError
? 'text-m-error'
: hasSuccess
? 'text-m-success'
: isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
textLabel,
]"
>
{{ label }}
</label>
<span
v-if="showCounterComputed"
class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
>
{{ currentLength }}/{{ maxLength }}
</span>
</div>
<div
v-if="hasError || hasSuccess || hint"
class="mt-1 flex items-center justify-between gap-2 text-xs"
>
<p
:id="`${inputId}-describedby`"
:class="[
hasError
? 'text-m-error'
: hasSuccess
? 'text-m-success'
: 'text-m-muted',
'ml-[2px]',
]"
>
{{ error || success || hint }}
</p>
</div>
</template>
<script setup lang="ts">
import {computed, ref, useAttrs, useId} from 'vue'
defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
const props = withDefaults(
defineProps<{
id?: string
label?: string
name?: string
autocomplete?: string
modelValue?: string | null | undefined
size?: number | string
textInput?: string
textLabel?: string
resize?: 'none' | 'both' | 'horizontal' | 'vertical'
minResizeWidth?: number
maxResizeWidth?: number
minResizeHeight?: number
maxResizeHeight?: number
required?: boolean
maxLength?: number
showCounter?: boolean
disabled?: boolean
readonly?: boolean
hint?: string
error?: string
success?: string
rounded?: string
}>(),
{
id: '',
name: '',
autocomplete: 'off',
modelValue: undefined,
label: '',
size: 2,
textInput: 'text-lg',
required: false,
maxLength: 800,
showCounter: false,
readonly: false,
textLabel: 'text-sm',
disabled: false,
rounded: 'rounded-md',
hint: '',
error: '',
success: '',
resize: 'both',
minResizeWidth: 280,
maxResizeWidth: 640,
minResizeHeight: 40,
maxResizeHeight: 320,
},
)
const attrs = useAttrs()
const generatedId = useId()
const localValue = ref('')
const isFocused = ref(false)
const inputId = computed(() => props.id?.toString() || `malio-input-textarea-${generatedId}`)
const isControlled = computed(() => props.modelValue !== undefined)
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!props.success && !hasError.value)
const rowsCount = computed(() => Math.max(1, Number(props.size || 3)))
const currentLength = computed(() => (currentValue.value ?? '').length)
const showCounterComputed = computed(() =>
props.showCounter && Number(props.maxLength) > 0
)
const toCssSize = (value: number | string) => (typeof value === 'number' ? `${value}px` : value)
const textareaStyle = computed(() => ({
resize: props.resize,
minWidth: toCssSize(props.minResizeWidth),
maxWidth: toCssSize(props.maxResizeWidth),
minHeight: toCssSize(props.minResizeHeight),
maxHeight: toCssSize(props.maxResizeHeight),
}))
const describedBy = computed(() =>
(hasError.value || hasSuccess.value || !!props.hint) ? `${inputId.value}-describedby` : undefined,
)
const emit = defineEmits<{
(event: 'update:modelValue', value: string): void
}>()
const onInput = (event: Event) => {
const target = event.target as HTMLTextAreaElement
if (!isControlled.value) {
localValue.value = target.value
}
emit('update:modelValue', target.value)
}
</script>
<style scoped>
.floating-label {
background: white;
padding: 0 0.25rem;
}
</style>