add PasswordField

app/components/EditorCard.vue

@@ -1,4 +1,4 @@
-<!--suppress VueUnrecognizedSlot -->
+<!--suppress VueUnrecognizedSlot, JSUnresolvedReference -->
 <template>
   <Card class="mx-auto max-w-prose">
     <template #content>
@@ -23,7 +23,7 @@
             @inactive="validate(field)"
           >
             <template #inactive>
-              <div class="ml-1 block text-sm text-primary dark:text-primary">
+              <div class="ml-1 text-sm text-primary dark:text-primary">
                 {{ _startCase(field) }}
               </div>
 
@@ -46,7 +46,7 @@
             </template>
 
             <template #active="{ deactivate }">
-              <div class="ml-1 block text-sm text-primary dark:text-primary">
+              <div class="ml-1 text-sm text-primary dark:text-primary">
                 {{ _startCase(field) }}
               </div>
 
@@ -73,12 +73,20 @@
               <ComboBox
                 v-else-if="type === 'autocomplete'"
                 v-model="model[field]"
-                :tabindex="0"
                 :inputId="field"
+                :tabindex="0"
                 :suggestions="suggestions?.[field]"
                 @blur="waitForAnimation(deactivate)"
               />
 
+              <PasswordField
+                v-else-if="type === 'password'"
+                v-model="model[field]"
+                :inputId="field"
+                :tabindex="0"
+                @blur="waitForAnimation(deactivate)"
+              />
+
               <InputText
                 v-else
                 v-model="model[field]"
@@ -151,7 +159,7 @@ const props = defineProps({
   },
 
   modelId: {
-    type: [String, Number],
+    type: String,
     required: false,
     validator: (value, props) => props.action === "create" || isPresent(value)
   },
@@ -217,6 +225,7 @@ onBeforeRouteLeave(async () => {
 async function focusFormControl(field, type) {
   await nextTick()
   const control = document.getElementById(field)
+  // noinspection JSUnresolvedReference
   control.focus()
 
   switch (type) {

app/components/PasswordField.vue

@@ -0,0 +1,29 @@
+<template>
+  <Password
+    :feedback="false"
+    fluid
+    toggleMask
+  >
+    <template #maskicon="{ toggleCallback }">
+      <Icon
+        class="absolute inset-e-3 top-1/2 -mt-2 h-4 w-4 text-surface-500
+          dark:text-surface-400"
+        name="ph:eye-slash-bold"
+        @click="toggleCallback"
+      />
+    </template>
+
+    <template #unmaskicon="{ toggleCallback }">
+      <Icon
+        class="absolute inset-e-3 top-1/2 -mt-2 h-4 w-4 text-surface-500
+          dark:text-surface-400"
+        name="ph:eye-bold"
+        @click="toggleCallback"
+      />
+    </template>
+  </Password>
+</template>
+
+<script setup></script>
+
+<style scoped></style>