feat(12.1-02): password and form-only fields, rules per operation and preset
- pact.FormVirtualFields lists form fields that are not model columns: never bound, filled or projected; their values reach the Form hooks through cabana.VirtualFieldsFromContext when the field's context allows the operation - type: password is a masked field that must be listed as virtual - pact.FormRules supplies the rule set per operation and replaces the model's Rules() for admin saves; a rule on a virtual field sees the submitted value - preset on a text field follows another text field on the create form - SPA: PasswordField, preset handling in FormView, empty password left out of an update - README, docs, OpenAPI document, TS types and dist updated
This commit is contained in:
56
admin/src/components/form/fields/PasswordField.vue
Normal file
56
admin/src/components/form/fields/PasswordField.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, inject, ref, watch } from 'vue'
|
||||
import { Eye, EyeOff } from '@lucide/vue'
|
||||
import { t } from '../../../app/i18n'
|
||||
import { controlAttributes, controlClass, type FieldControlProps } from '../control'
|
||||
import { FORM_SESSION } from '../formContext'
|
||||
|
||||
// Password control (UI-SPEC S7, D-19). The server never sends a value, so the
|
||||
// field is empty on load; the value leaves only in the save body. The toggle
|
||||
// switches the input between hidden and visible text. After a successful save
|
||||
// the form clears the value and the control returns to hidden.
|
||||
const props = defineProps<FieldControlProps>()
|
||||
const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
|
||||
|
||||
const shown = ref(false)
|
||||
const text = computed(() => (typeof props.modelValue === 'string' ? props.modelValue : ''))
|
||||
const attrs = computed(() => controlAttributes(props.field))
|
||||
|
||||
const session = inject(FORM_SESSION, null)
|
||||
if (session) {
|
||||
watch(session.revision, () => {
|
||||
shown.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<input
|
||||
:id="controlId"
|
||||
autocomplete="new-password"
|
||||
spellcheck="false"
|
||||
v-bind="attrs"
|
||||
:name="field.name"
|
||||
:type="shown ? 'text' : 'password'"
|
||||
:value="text"
|
||||
:required="field.required || undefined"
|
||||
:aria-required="field.required ? 'true' : undefined"
|
||||
:aria-invalid="invalid ? 'true' : undefined"
|
||||
:aria-describedby="describedBy || undefined"
|
||||
:class="controlClass(invalid)"
|
||||
class="h-input pr-12"
|
||||
@input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-password-toggle
|
||||
:aria-pressed="shown ? 'true' : 'false'"
|
||||
:aria-label="t(shown ? 'backend::lang.form.hide_password' : 'backend::lang.form.show_password')"
|
||||
class="absolute top-1/2 right-1.5 flex size-8 -translate-y-1/2 items-center justify-center rounded-pager text-muted transition-colors duration-150 ease-out hover:bg-hover hover:text-text"
|
||||
@click="shown = !shown"
|
||||
>
|
||||
<component :is="shown ? EyeOff : Eye" :size="16" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user