verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 92 Releases Wiki Activity

fix: refs #7699 add icons and hint #1123

Merged
alexm merged 18 commits from 7699-refactroViewPassword into dev 2025-01-08 13:20:17 +00:00
Conversation 0 Commits 18 Files Changed 11 +31 -38
2 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f0364124cc - Show all commits

34
src/components/common/VnChangePassword.vue
View File

@ -76,48 +76,42 @@ defineExpose({ show: () => changePassDialog.value.show() });
v-if="props.askOldPass"
:label="t('Old password')"
v-model="passwords.oldPassword"
:type="showPwd ? 'password' : 'text'"
type="password"
:required="true"
autofocus
>
<template #append>
<QIcon
:name="showPwd ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="showPwd = !showPwd"
/>
</template>
</VnInput>
:clearable="true"
:show-pwd="showPwd"
@update:show-pwd="showPwd = $event"
/>
<VnInput
:required="true"
autofocus
v-model="passwords.newPassword"
:label="$t('New password')"
:type="showPwd ? 'password' : 'text'"
hint=""
:show-pwd="showPwd"
@update:show-pwd="showPwd = $event"
>
<template #append>
<!-- <template #append>
<QIcon
:name="showPwd ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="showPwd = !showPwd"
/>
</template>
</template> -->
</VnInput>
<VnInput
:label="t('Repeat password')"
v-model="passwords.repeatPassword"
:type="showRpPwd ? 'password' : 'text'"
hint=""
>
<template #append>
type="password"
:toggle-visibility="true"
/>
<!-- <template #append>
<QIcon
:name="showRpPwd ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="showRpPwd = !showRpPwd"
/>
</template>
</VnInput>
</template> -->
</QCardSection>
</QForm>
<QCardActions>

35
src/components/common/VnInput.vue
View File

@ -42,9 +42,15 @@ const $props = defineProps({
type: Number,
default: null,
},
toggleVisibility: {
carlossa marked this conversation as resolved Outdated
jsegarra commented 2024-12-26 08:56:31 +00:00
Outdated
Review
Copy Link

Se podria hacer con $attrs en vez de añadir prop, no?

Se podria hacer con $attrs en vez de añadir prop, no?
// Nueva propiedad
type: Boolean,
default: false,
},
});
const vnInputRef = ref(null);
const showPassword = ref(false); // Estado para la visibilidad de contraseña
const value = computed({
get() {
return $props.modelValue;
@ -124,7 +130,7 @@ const handleInsertMode = (e) => {
ref="vnInputRef"
v-model="value"
v-bind="{ ...$attrs, ...styleAttrs }"
carlossa marked this conversation as resolved Outdated
jsegarra commented 2024-12-26 08:59:05 +00:00
Outdated
Review
Copy Link

Estamos añadiendo una condición a VnInput y debería estar en un componente aparte

Estamos añadiendo una condición a VnInput y debería estar en un componente aparte
:type="$attrs.type"
:type="toggleVisibility ? (showPassword ? 'text' : 'password') : $attrs.type"
:class="{ required: isRequired }"
@keyup.enter="emit('keyup.enter')"
@keydown="handleKeydown"
@ -134,10 +140,18 @@ const handleInsertMode = (e) => {
hide-bottom-space
:data-cy="$attrs.dataCy ?? $attrs.label + '_input'"
>
<template v-if="$slots.prepend" #prepend>
<template #prepend>
<slot name="prepend" />
</template>
<template #append>
carlossa marked this conversation as resolved Outdated
jsegarra commented 2024-12-26 08:56:56 +00:00
Outdated
Review
Copy Link

Añdimos un icono condicional a VnInput.

Propuesta, crear VnInputPassword

Añdimos un icono condicional a VnInput. Propuesta, crear VnInputPassword
<!-- Icono para mostrar/ocultar contraseña -->
<QIcon
v-if="toggleVisibility"
:name="showPassword ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="showPassword = !showPassword"
/>
<!-- Ícono para borrar el valor -->
<QIcon
name="close"
size="xs"
@ -155,7 +169,7 @@ const handleInsertMode = (e) => {
emit('remove');
}
"
></QIcon>
/>
<slot name="append" v-if="$slots.append && !$attrs.disabled" />
<QIcon v-if="info" name="info">
<QTooltip max-width="350px">
@ -166,18 +180,3 @@ const handleInsertMode = (e) => {
</QInput>
</div>
</template>
<i18n>
carlossa marked this conversation as resolved Outdated
jsegarra commented 2025-01-03 16:18:40 +00:00
Outdated
Review
Copy Link

ojo, que creo que nos hemos llevado cosas por delante, me refiero que hemos quitado código de dev, es intencional?

ojo, que creo que nos hemos llevado cosas por delante, me refiero que hemos quitado código de dev, es intencional?
en:
inputMin: Must be more than {value}
maxLength: The value exceeds {value} characters
inputMax: Must be less than {value}
es:
inputMin: Debe ser mayor a {value}
maxLength: El valor excede los {value} carácteres
inputMax: Debe ser menor a {value}
</i18n>
<style lang="scss">
.q-field__append {
padding-inline: 0;
}
</style>