@saasmakers/ui 1.4.44 → 1.4.46

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>
 
@@ -169,45 +174,66 @@ defineExpose({ focus })
     >
       <slot name="inputLeft" />
 
-      <input
-        :id="id"
-        ref="input"
-        :autocomplete="autocomplete ? 'on' : 'off'"
-        class="h-full w-full flex-1 appearance-none items-center rounded-lg outline-none placeholder-gray-600 dark:placeholder-gray-400"
-        :class="{
-          'field-disabled': disabled,
-          'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,
-          'text-gray-900 dark:text-gray-100': !lineThrough,
-          'text-gray-500 dark:text-gray-500 line-through': lineThrough,
-          'font-medium tracking-tight uppercase': uppercase,
-          'font-normal': !uppercase,
-          'text-center': alignment === 'center',
-          'text-left': alignment === 'left',
-          'text-right': alignment === 'right',
-          'bg-gray-100 dark:bg-gray-900': background === 'gray',
-          'bg-white dark:bg-gray-900': background === 'white',
-          'border shadow-sm border-gray-200 dark:border-gray-800 px-3': border === 'full',
-          'hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full' && !disabled,
-          'border-b border-gray-200 dark:border-gray-800 px-10': border === 'bottom',
-          'border-0 p-0': border === 'none',
-          'text-xs': size === 'xs',
-          'text-sm': size === 'sm',
-          'text-base': size === 'base',
-          'text-lg': size === 'lg',
-        }"
-        :disabled="disabled"
-        :max="max"
-        :min="min"
-        :placeholder="placeholder"
-        spellcheck="false"
-        :type="type"
-        :value="modelValue"
-        @blur="onFieldBlur"
-        @focus="onFieldFocus"
-        @input="onFieldInput"
-        @keydown="onFieldKeyDown"
-        @keyup="onFieldKeyUp"
-      >
+      <div class="relative h-full min-w-0 flex-1">
+        <input
+          :id="id"
+          ref="input"
+          :autocomplete="autocomplete ? 'on' : 'off'"
+          class="h-full w-full appearance-none items-center rounded-lg outline-none placeholder-gray-600 dark:placeholder-gray-400"
+          :class="{
+            'field-disabled': disabled,
+            'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,
+            'text-gray-900 dark:text-gray-100': !lineThrough,
+            'text-gray-500 dark:text-gray-500 line-through': lineThrough,
+            'font-medium tracking-tight uppercase': uppercase,
+            'font-normal': !uppercase,
+            'text-center': alignment === 'center',
+            'text-left': alignment === 'left',
+            'text-right': alignment === 'right',
+            'bg-gray-100 dark:bg-gray-900': background === 'gray',
+            'bg-white dark:bg-gray-900': background === 'white',
+            'border shadow-sm border-gray-200 dark:border-gray-800': border === 'full',
+            'pl-3 pr-10': border === 'full' && type === 'password',
+            'px-3': border === 'full' && type !== 'password',
+            'hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full' && !disabled,
+            'border-b border-gray-200 dark:border-gray-800': border === 'bottom',
+            'pl-10 pr-16': border === 'bottom' && type === 'password',
+            'px-10': border === 'bottom' && type !== 'password',
+            'border-0 p-0': border === 'none' && type !== 'password',
+            'border-0 pr-9': border === 'none' && type === 'password',
+            'text-xs': size === 'xs',
+            'text-sm': size === 'sm',
+            'text-base': size === 'base',
+            'text-lg': size === 'lg',
+          }"
+          :disabled="disabled"
+          :max="max"
+          :min="min"
+          :placeholder="placeholder"
+          spellcheck="false"
+          :type="type === 'password' && showPassword ? 'text' : type"
+          :value="modelValue"
+          @blur="onFieldBlur"
+          @focus="onFieldFocus"
+          @input="onFieldInput"
+          @keydown="onFieldKeyDown"
+          @keyup="onFieldKeyUp"
+        >
+
+        <button
+          v-if="type === 'password'"
+          class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 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>
 
       <BaseSpinner
         v-if="loading"

package/package.json

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