[Feature]: Show password button on input type=password

[DesertCookie]

Describe the feature

Similar to how it was discussed here for ShadcnUI, I think the Input component would benefit from a "show password"-button.

I have implemented such a functionality locally in my Nuxt project and am happy with it. I would like to know whether this is something the current implementation of Shadcn-Vue would benefit from in your opinion, or whether, because the original ShadcnUI doesn't seem to have this in its native Input component, this should not be added.

I am ready to make a PR, but wanted to quickly discuss here, before going into implementation details (which definitely need some more looking at; I currently use Nuxt Icon and am unsure how this would make my current implementation adaptable).

---

This is my current Input component (regular input to compare):

import type { HTMLAttributes } from 'vue'
import { ref } from 'vue'
import { useVModel } from '@vueuse/core'
import { cn } from '@/lib/utils'

const props = defineProps<{
    defaultValue?: string | number
    modelValue?: string | number
    class?: HTMLAttributes['class']
    type: string
}>()

const emits = defineEmits<{
    (e: 'update:modelValue', payload: string | number): void
}>()

const modelValue = useVModel(props, 'modelValue', emits, {
    passive: true,
    defaultValue: props.defaultValue,
})

const showPassword = ref(false)

<div class="relative">
    <input v-model="modelValue"
           :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class) + (type==='password'? ' pr-9': '')"
           :type="showPassword ? 'text' : type">
    <div v-if="type === 'password'"
         class="absolute right-1 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center cursor-pointer text-gray-400 hover:text-gray-500 transition-colors"
         @click="showPassword = !showPassword">
        <LazyIcon :name="showPassword ? 'hugeicons:view-off' : 'hugeicons:view'"
                  class="w-4 h-4"/>
    </div>
</div>

• Increases size of clickable eye-area to 32x32 px while keeping the icon at 16x16 px.
• Restricts the input from overlapping with the eye icon.
• Tested to work with AutoForm and supplying type password via field configs.

Additional information

• [X] I intend to submit a PR for this feature.
• [X] I have already implemented and/or tested this feature.

[sadeghbarati]

This project's goal is to remain aligned with shadcn/ui. If the feature you are requesting is not in the original shadcn/ui, it will not be considered here.

Btw thanks for sharing 👍