@coreui/vue-pro/dist/cjs/components/password-input/CPasswordInput.js

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var CFormControlWrapper = require('../form/CFormControlWrapper.js');

// CPasswordInput.ts
const CPasswordInput = vue.defineComponent({
    name: 'CPasswordInput',
    inheritAttrs: false,
    props: {
        /**
         * Accessible label for the toggle visibility button.
         */
        ariaLabelToggler: {
            type: String,
            default: 'Toggle password visibility',
        },
        /**
         * Delay emitting `change` and `update:modelValue` events.
         * `true` = 500ms delay, or specify custom delay in ms.
         */
        delay: {
            type: [Boolean, Number],
            default: false,
        },
        /**
         * Disables the password input field. When `true`, the user cannot interact with the field.
         */
        disabled: Boolean,
        /**
         * General feedback text shown below the input.
         */
        feedback: String,
        /**
         * Feedback text shown when input is invalid.
         */
        feedbackInvalid: String,
        /**
         * Feedback text shown when input is valid.
         */
        feedbackValid: String,
        /**
         * Class for the floating label wrapper.
         */
        floatingClassName: String,
        /**
         * Floating label text.
         */
        floatingLabel: String,
        /**
         * ID of the input element.
         */
        id: String,
        /**
         * Marks the input as invalid.
         */
        invalid: Boolean,
        /**
         * Main label for the input.
         */
        label: String,
        /**
         * The current value of the password input, used with v-model.
         */
        modelValue: String,
        /**
         * Makes the input read-only, allowing text selection only.
         */
        readOnly: Boolean,
        /**
         * Controls the initial visibility of the password.
         */
        showPassword: Boolean,
        /**
         * Sets the visual size of the input. Accepts `'sm'`, `'lg'`, or undefined.
         */
        size: {
            type: String,
            default: undefined,
        },
        /**
         * Helper or hint text displayed below the input.
         */
        text: String,
        /**
         * Enables tooltip-style validation feedback messages.
         */
        tooltipFeedback: Boolean,
        /**
         * Marks the input as valid.
         */
        valid: Boolean,
        /**
         * Alternative to `modelValue`, mostly for manual `:value` binding.
         */
        value: String,
    },
    emits: ['update:modelValue', 'change'],
    setup(props, { emit, attrs }) {
        const { delay, showPassword, size, invalid, valid } = vue.toRefs(props);
        const localValue = vue.ref(props.modelValue ?? props.value ?? '');
        const visible = vue.ref(showPassword.value ?? false);
        const inputType = vue.computed(() => (visible.value ? 'text' : 'password'));
        vue.watch(() => props.modelValue ?? props.value, (val) => {
            if (val !== localValue.value) {
                localValue.value = val;
            }
        });
        let timeout;
        vue.watch(localValue, (val) => {
            if (delay.value) {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    emit('update:modelValue', val);
                    emit('change', val);
                }, typeof delay.value === 'number' ? delay.value : 500);
            }
            else {
                emit('update:modelValue', val);
                emit('change', val);
            }
        });
        const togglePassword = () => {
            visible.value = !visible.value;
        };
        return () => vue.h(CFormControlWrapper.CFormControlWrapper, {
            describedby: attrs['aria-describedby'],
            feedback: props.feedback,
            feedbackInvalid: props.feedbackInvalid,
            feedbackValid: props.feedbackValid,
            floatingClassName: props.floatingLabel
                ? ['form-password', props.floatingClassName].join(' ')
                : props.floatingClassName,
            floatingLabel: props.floatingLabel,
            id: props.id,
            invalid: props.invalid,
            label: props.label,
            text: props.text,
            tooltipFeedback: props.tooltipFeedback,
            valid: props.valid,
        }, {
            default: () => {
                const inputEl = vue.h('input', {
                    ...attrs,
                    id: props.id,
                    type: inputType.value,
                    class: [
                        'form-control',
                        {
                            [`form-control-${size.value}`]: size.value,
                            'is-invalid': invalid.value,
                            'is-valid': valid.value,
                        },
                        attrs.class,
                    ],
                    value: localValue.value,
                    onInput: (e) => {
                        localValue.value = e.target.value;
                    },
                    disabled: props.disabled,
                    readOnly: props.readOnly,
                });
                const buttonEl = vue.h('button', {
                    type: 'button',
                    class: 'form-password-action',
                    'data-coreui-toggle': 'password',
                    'aria-label': props.ariaLabelToggler,
                    onClick: togglePassword,
                }, [vue.h('span', { class: 'form-password-action-icon' })]);
                const content = [inputEl, buttonEl];
                return props.floatingLabel ? content : vue.h('div', { class: 'form-password' }, content);
            },
        });
    },
});

exports.CPasswordInput = CPasswordInput;
//# sourceMappingURL=CPasswordInput.js.map