Cellule-financiere-transverse-PMO/visua-vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix: bug fixed

Browse Source
This commit is contained in:
Paul Valerie GOMA 2025-07-22 12:22:48 +02:00
parent 8b9310b794
commit 748b6e67db
1 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/input/VInput.vue
View File

@ -31,6 +31,7 @@ const props = withDefaults(defineProps<IVInput>(), {
disabled: false,
errorMessage: '',
validMessage: '',
feedback: false,
})
const attrs = useAttrs()
@ -85,10 +86,11 @@ const labelState = computed(() => {
v-if="props.isPassword"
:id="props.id"
v-bind="attrs"
class="p-password"
:class="[styles['text-body-MD-standard-text-Regular'], {
'p-password': true,
'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage || !!props.validMessage,
'disabled': props.disabled,
}]"
:disabled="props.disabled"
:aria-disabled="props.disabled"
@ -97,8 +99,9 @@ const labelState = computed(() => {
:mediumLabel="props.mediumLabel"
:strongLabel="props.strongLabel"
:promptLabel="props.promptLabel"
:toggleMask="props.toggleMask"
:toggleMask="props.toggleMask && !props.disabled"
:placeholder="props.placeholder"
:feedback="props.feedback"
:fluid="true"
v-model:model-value="localModelValue"
@update:model-value="emit('update:modelValue', $event)"
@ -246,26 +249,55 @@ const labelState = computed(() => {
.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-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-inputtext-border-color: transparent;
--p-inputtext-hover-border-color: transparent;
--p-inputtext-focus-border-color: transparent;
border-radius: var(--input-border-raduis);
border: var(--large-border-width) solid var(--border-plain-success);
}
.p-password.error{
--p-inputtext-border-color: transparent;
--p-inputtext-hover-border-color: transparent;
--p-inputtext-focus-border-color: transparent;
border-radius: var(--input-border-raduis);
border: var(--large-border-width) solid var(--border-plain-error);
}
.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);
border: var(--border-width) solid var(--border-disabled-grey);
color: var(--text-disabled-grey);
background-color: var(--background-disabled-grey);
--p-inputtext-placeholder-color: var(--text-disabled-grey);
--p-form-field-placeholder-color: var(--text-disabled-grey);
--p-textarea-placeholder-color: var(--text-disabled-grey);
--p-form-field-border-color: var(--border-disabled-grey);
--p-inputtext-border-color: var(--border-disabled-grey);
-webkit-user-select: none;
user-select: none;
}
.p-password.disabled{
--p-inputtext-border-color: var(--border-disabled-grey);
--p-inputtext-hover-border-color: var(--border-disabled-grey);
--p-inputtext-focus-border-color: var(--border-disabled-grey);
--p-inputtext-placeholder-color: var(--text-disabled-grey);
--p-form-field-placeholder-color: var(--text-disabled-grey);
-webkit-user-select: none;
user-select: none;
}
</style>