Aggiustamenti Proxy, Impl di list.

components/FloatInputPwdField.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const id = useId();
+const props = defineProps({
+  value: {
+    type: String,
+    default: undefined,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  }
+});
+
+// use `toRef` to create reactive references to `name` prop which is passed to `useField`
+// this is important because vee-validte needs to know if the field name changes
+// https://vee-validate.logaretm.com/v4/guide/composition-api/caveats
+const name = toRef(props, 'name');
+
+// we don't provide any rules here because we are using form-level validation
+// https://vee-validate.logaretm.com/v4/guide/validation#form-level-validation
+const {
+  value: inputValue,
+  errorMessage,
+  handleBlur,
+  meta
+} = useField(name, undefined, {
+  initialValue: props.value
+});
+
+const invalid = computed(() => errorMessage.value ? true : undefined);
+
+const show = ref(false);
+const type = computed(() => show.value ? 'text' : 'password');
+const icon = computed(() => show.value ? 'pi pi-eye-slash' : 'pi pi-eye');
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-2">
+    <div class="flex flex-row justify-between gap-2">
+      <FloatLabel variant="on" class="grow">
+        <InputText
+          :id="id" v-model="inputValue" class="w-full" :invalid="invalid" :type="type" @blur="handleBlur"
+        />
+        <label :for="id">
+          {{ label }}
+        </label>
+      </FloatLabel>
+      <Button :icon="icon" @click="show = !show"/>
+    </div>
+    <Message v-if="errorMessage && meta.touched" class="text-wrap">{{ errorMessage }}</Message>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/FloatInputTextField.vue

@@ -42,7 +42,7 @@ const invalid = computed(() => errorMessage.value ? true : undefined);
   <div class="grid grid-cols-1 gap-2">
     <FloatLabel variant="on">
       <InputText
-        :id="id" v-model="inputValue" class="w-full" :invalid="invalid" @blur="handleBlur"
+        :id="id" v-model="inputValue" class="w-full" :invalid="invalid" :type="type" @blur="handleBlur"
       />
       <label :for="id">
         {{ label }}