✨ feature: Added Input component
This commit is contained in:
Paul Valerie GOMA
parent
a2b7120257
commit
3e028d04c6
224
src/components/input/VInput.vue
Normal file
224
src/components/input/VInput.vue
Normal file
|
|
@ -0,0 +1,224 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import InputText from 'primevue/inputtext';
|
||||||
|
import Textarea from 'primevue/textarea';
|
||||||
|
import VHint from '../hint/VHint.vue';
|
||||||
|
import VDivider from '../divider/VDivider.vue';
|
||||||
|
import VLabel from '../label/VLabel.vue';
|
||||||
|
import type IVInput from './IVInput.type';
|
||||||
|
import { computed, useAttrs, useId, ref, watch } from 'vue';
|
||||||
|
import styles from '@visua/typography.module.css';
|
||||||
|
import Password from 'primevue/password';
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<IVInput>(), {
|
||||||
|
id: () => useId(),
|
||||||
|
descriptionId: undefined,
|
||||||
|
hint: '',
|
||||||
|
label: '',
|
||||||
|
modelValue: '',
|
||||||
|
wrapperClass: '',
|
||||||
|
isInvalid: false,
|
||||||
|
isValid: false,
|
||||||
|
isTextarea: false,
|
||||||
|
labelVisible: false,
|
||||||
|
isPassword: false,
|
||||||
|
weakLabel: 'Faible',
|
||||||
|
mediumLabel: 'Moyen',
|
||||||
|
strongLabel: 'Fort',
|
||||||
|
promptLabel: 'Entrez un mot de passe',
|
||||||
|
toggleMask: false,
|
||||||
|
placeholder: '',
|
||||||
|
passwordHint: undefined,
|
||||||
|
})
|
||||||
|
const attrs = useAttrs()
|
||||||
|
|
||||||
|
const isDisabled = computed(() => 'disabled' in attrs)
|
||||||
|
|
||||||
|
const emit = defineEmits([
|
||||||
|
'update:modelValue',
|
||||||
|
'value-change',
|
||||||
|
'change'
|
||||||
|
])
|
||||||
|
|
||||||
|
const localModelValue = ref(props.modelValue);
|
||||||
|
watch(() => props.modelValue, (newVal) => {
|
||||||
|
if(localModelValue.value !== newVal) {
|
||||||
|
localModelValue.value = newVal;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
watch(localModelValue, (newVal) => {
|
||||||
|
if(props.modelValue !== newVal){
|
||||||
|
emit('update:modelValue', newVal);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const labelState = computed(() => {
|
||||||
|
if(!props.isInvalid && !props.isValid && !isDisabled.value) return 'default';
|
||||||
|
else if(!props.isInvalid && props.isValid && !isDisabled.value) return 'success';
|
||||||
|
else if(props.isInvalid && !props.isValid && !isDisabled.value) return 'error';
|
||||||
|
else return undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="main-container">
|
||||||
|
<VLabel
|
||||||
|
v-if="props.labelVisible"
|
||||||
|
:for="props.id"
|
||||||
|
:label="props.label"
|
||||||
|
:required="!isDisabled"
|
||||||
|
:disabled="isDisabled"
|
||||||
|
:type="labelState"
|
||||||
|
:hint="props.hint"
|
||||||
|
>
|
||||||
|
<template #required-type v-if="props.required">
|
||||||
|
<slot name="required-type"/>
|
||||||
|
</template>
|
||||||
|
</VLabel>
|
||||||
|
<!-- Password -->
|
||||||
|
<Password
|
||||||
|
v-if="props.isPassword"
|
||||||
|
:id="props.id"
|
||||||
|
v-bind="attrs"
|
||||||
|
:class="[styles['text-body-MD-standard-text-Regular'], {
|
||||||
|
'p-password': true,
|
||||||
|
'error': props.isInvalid && !props.isValid && !isDisabled,
|
||||||
|
'success': !props.isInvalid && props.isValid && !isDisabled,
|
||||||
|
}]"
|
||||||
|
:disabled="isDisabled"
|
||||||
|
:aria-disabled="isDisabled"
|
||||||
|
:aria-describedby="descriptionId || undefined"
|
||||||
|
:weakLabel="props.weakLabel"
|
||||||
|
:mediumLabel="props.mediumLabel"
|
||||||
|
:strongLabel="props.strongLabel"
|
||||||
|
:promptLabel="props.promptLabel"
|
||||||
|
:toggleMask="props.toggleMask"
|
||||||
|
:placeholder="props.placeholder"
|
||||||
|
:fluid="true"
|
||||||
|
v-model:model-value="localModelValue"
|
||||||
|
@update:model-value="emit('update:modelValue', $event)"
|
||||||
|
@valueChange="emit('value-change', $event)"
|
||||||
|
@change="emit('change', $event)"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<div
|
||||||
|
:class="styles['text-body-MD-standard-text-Medium']"
|
||||||
|
style="padding-bottom: 0.5rem;"
|
||||||
|
>Niveau de complexité</div>
|
||||||
|
</template>
|
||||||
|
<template v-if="props.passwordHint !== undefined" #footer>
|
||||||
|
<VDivider/>
|
||||||
|
<VHint title="Votre mot de passe doit contenir au moins :"/>
|
||||||
|
<div
|
||||||
|
role="alert"
|
||||||
|
aria-live="polite"
|
||||||
|
>
|
||||||
|
<template v-if="Array.isArray(props.passwordHint)">
|
||||||
|
<VHint
|
||||||
|
v-for="message in props.passwordHint"
|
||||||
|
:key="`password-hint-${message}`"
|
||||||
|
:id="descriptionId"
|
||||||
|
:data-testid="descriptionId"
|
||||||
|
:title="message"
|
||||||
|
type="info"
|
||||||
|
icon
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<VHint
|
||||||
|
v-else-if="props.passwordHint"
|
||||||
|
:title="props.passwordHint"
|
||||||
|
:id="descriptionId"
|
||||||
|
:data-testid="descriptionId"
|
||||||
|
type="info"
|
||||||
|
icon
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Password>
|
||||||
|
|
||||||
|
<!-- Textarea -->
|
||||||
|
<Textarea
|
||||||
|
v-else-if="props.isTextarea"
|
||||||
|
:id="props.id"
|
||||||
|
v-bind="attrs"
|
||||||
|
:class="[styles['text-body-MD-standard-text-Regular'], {
|
||||||
|
'p-textarea': true,
|
||||||
|
'error': props.isInvalid && !props.isValid && !isDisabled,
|
||||||
|
'success': !props.isInvalid && props.isValid && !isDisabled,
|
||||||
|
}]"
|
||||||
|
:disabled="isDisabled"
|
||||||
|
:aria-disabled="isDisabled"
|
||||||
|
:aria-describedby="descriptionId || undefined"
|
||||||
|
:placeholder="props.placeholder"
|
||||||
|
@valueChange="emit('value-change', $event)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- InputText -->
|
||||||
|
<InputText
|
||||||
|
v-else
|
||||||
|
:id="props.id"
|
||||||
|
v-bind="attrs"
|
||||||
|
:class="[styles['text-body-MD-standard-text-Regular'], {
|
||||||
|
'p-inputtext': true,
|
||||||
|
'error': props.isInvalid && !props.isValid && !isDisabled,
|
||||||
|
'success': !props.isInvalid && props.isValid && !isDisabled,
|
||||||
|
}]"
|
||||||
|
:disabled="isDisabled"
|
||||||
|
:aria-disabled="isDisabled"
|
||||||
|
:aria-describedby="descriptionId || undefined"
|
||||||
|
:placeholder="props.placeholder"
|
||||||
|
v-model:model-value="localModelValue"
|
||||||
|
@update:model-value="emit('update:modelValue', $event)"
|
||||||
|
@valueChange="emit('value-change', $event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="css" scoped>
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-textarea {
|
||||||
|
min-height: 5.5rem;
|
||||||
|
max-height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-password,
|
||||||
|
.p-inputtext { height: 2.5rem;}
|
||||||
|
|
||||||
|
.p-password,
|
||||||
|
.p-textarea,
|
||||||
|
.p-inputtext {width: inherit;}
|
||||||
|
|
||||||
|
.p-textarea,
|
||||||
|
.p-inputtext {border: var(--border-width) solid var(--input-border-color);}
|
||||||
|
|
||||||
|
.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
|
||||||
|
.p-textarea.success, .p-textarea.success:focus-visible, .p-textarea.success:hover,
|
||||||
|
.p-inputtext.success, .p-inputtext.success:focus-visible, .p-inputtext.success:hover {border: var(--large-border-width) solid var(--border-plain-success);}
|
||||||
|
|
||||||
|
.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
|
||||||
|
.p-textarea.error, .p-textarea.error:focus-visible, .p-textarea.error:hover,
|
||||||
|
.p-inputtext.error, .p-inputtext.error:focus-visible, .p-inputtext.error:hover {border: var(--large-border-width) solid var(--border-plain-error);}
|
||||||
|
|
||||||
|
.p-password:disabled,
|
||||||
|
.p-textarea:disabled,
|
||||||
|
.p-inputtext:disabled {
|
||||||
|
border-color: var(--border-disabled-grey);
|
||||||
|
color: var(--text-disabled-grey);
|
||||||
|
background-color: var(--background-disabled-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-disabled,
|
||||||
|
.p-password:disabled,
|
||||||
|
.p-textarea:disabled,
|
||||||
|
.p-inputtext:disabled {color: var(--text-disabled-grey);}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user