diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue index 4e51b19..9649a87 100644 --- a/src/components/input/VInput.vue +++ b/src/components/input/VInput.vue @@ -28,10 +28,13 @@ const props = withDefaults(defineProps(), { toggleMask: false, placeholder: '', passwordHint: undefined, + disabled: false, + errorMessage: '', + validMessage: '', }) const attrs = useAttrs() -const isDisabled = computed(() => 'disabled' in attrs) +// const props.disabled = computed(() => 'disabled' in attrs) const emit = defineEmits([ 'update:modelValue', @@ -54,9 +57,9 @@ watch(localModelValue, (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'; + if(!props.isInvalid && !props.isValid && !props.disabled) return 'default'; + else if(!props.isInvalid && props.isValid && !props.disabled) return 'success'; + else if(props.isInvalid && !props.isValid && !props.disabled) return 'error'; else return undefined }) @@ -68,8 +71,8 @@ const labelState = computed(() => { v-if="props.labelVisible" :for="props.id" :label="props.label" - :required="!isDisabled" - :disabled="isDisabled" + :required="!props.disabled" + :disabled="props.disabled" :type="labelState" :hint="props.hint" > @@ -84,11 +87,11 @@ const labelState = computed(() => { 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, + 'error': props.isInvalid && !props.isValid && !props.disabled, + 'success': !props.isInvalid && props.isValid && !props.disabled, }]" - :disabled="isDisabled" - :aria-disabled="isDisabled" + :disabled="props.disabled" + :aria-disabled="props.disabled" :aria-describedby="descriptionId || undefined" :weakLabel="props.weakLabel" :mediumLabel="props.mediumLabel" @@ -145,11 +148,11 @@ const labelState = computed(() => { 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, + 'error': props.isInvalid && !props.isValid && !props.disabled, + 'success': !props.isInvalid && props.isValid && !props.disabled, }]" - :disabled="isDisabled" - :aria-disabled="isDisabled" + :disabled="props.disabled" + :aria-disabled="props.disabled" :aria-describedby="descriptionId || undefined" :placeholder="props.placeholder" @valueChange="emit('value-change', $event)" @@ -162,17 +165,62 @@ const labelState = computed(() => { 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, + 'error': props.isInvalid && !props.isValid && !props.disabled, + 'success': !props.isInvalid && props.isValid && !props.disabled, }]" - :disabled="isDisabled" - :aria-disabled="isDisabled" + :disabled="props.disabled" + :aria-disabled="props.disabled" :aria-describedby="descriptionId || undefined" :placeholder="props.placeholder" v-model:model-value="localModelValue" @update:model-value="emit('update:modelValue', $event)" @valueChange="emit('value-change', $event)" /> +
+ + + + +
@@ -215,10 +263,9 @@ const labelState = computed(() => { border-color: 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); } -.label-disabled, -.p-password:disabled, -.p-textarea:disabled, -.p-inputtext:disabled {color: var(--text-disabled-grey);}