@saasmakers/ui 1.4.44 → 1.4.45

package/app/components/fields/FieldInput.vue

@@ -45,6 +45,7 @@ defineSlots<{
 const id = useId()
 const modelValue = defineModel<FieldInput['modelValue']>({ default: '' })
 const input = ref<HTMLInputElement>()
+const showPassword = ref(false)
 const { isDesktopBrowser } = useDevice()
 
 onMounted(() => {
@@ -133,6 +134,10 @@ function onFieldKeyUp(event: KeyboardEvent) {
   emit('keyup', event, value)
 }
 
+function onTogglePasswordVisibility() {
+  showPassword.value = !showPassword.value
+}
+
 defineExpose({ focus })
 </script>
 
@@ -200,7 +205,7 @@ defineExpose({ focus })
         :min="min"
         :placeholder="placeholder"
         spellcheck="false"
-        :type="type"
+        :type="type === 'password' && showPassword ? 'text' : type"
         :value="modelValue"
         @blur="onFieldBlur"
         @focus="onFieldFocus"
@@ -216,6 +221,20 @@ defineExpose({ focus })
       />
 
       <slot name="inputRight" />
+
+      <button
+        v-if="type === 'password'"
+        class="ml-2 text-gray-500 flex-initial dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+        :disabled="disabled"
+        tabindex="-1"
+        type="button"
+        @click="onTogglePasswordVisibility"
+      >
+        <BaseIcon
+          :icon="showPassword ? 'solar:eye-closed-linear' : 'solar:eye-linear'"
+          size="sm"
+        />
+      </button>
     </div>
 
     <FieldMessage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.44",
+  "version": "1.4.45",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",