import { defineComponent, ref, computed } from 'vue';
const input = defineComponent({
    name: 'Input',
    props: {
        size: {
            type: String,
            default: 'medium',
            validator(value) {
                return ['small', 'medium', 'large'].includes(value);
            },
        },
        type: {
            type: String,
            default: 'text',
            validator(value) {
                return ['text', 'password', 'textarea'].includes(value);
            },
        },
        disabled: {
            type: Boolean,
            default: false,
            validator(value) {
                return typeof value == 'boolean';
            },
        },
        value: [String, Number],
        placeholder: String,
        rows: {
            type: Number,
            default: 4,
        },
        cols: Number,
    },
    emits: ['update:value'],
    setup(props, { emit, slots }) {
        const inputSize = computed(() => {
            return 'u-input-size-' + props.size;
        });
        const isFocus = ref(false);
        const onFocus = () => {
            isFocus.value = true;
        };
        const onBlur = () => {
            isFocus.value = false;
        };
        const inputType = computed(() => {
            return props.type == 'password' ? 'password' : '';
        });
        const onInput = (e) => {
            emit('update:value', e.target.value);
        };
        return () => {
            var _a, _b;
            return (<div class={[
                    'u-input',
                    { 'u-input-focus': isFocus.value },
                    { 'u-input-disabled': props.disabled },
                ]}>
        {props.type != 'textarea' ? (<div class={['u-input-wrapper', inputSize.value]}>
            {slots.prefix && (<div class={['u-input-prefix']}>{(_a = slots.prefix) === null || _a === void 0 ? void 0 : _a.call(slots)}</div>)}

            <div class={['u-input-input']}>
              <input placeholder={props.placeholder} class="u-input__input-el" type={inputType.value} onFocus={onFocus} onBlur={onBlur} onInput={onInput} value={props.value} disabled={props.disabled}></input>
            </div>

            {slots.prefix && (<div class={['u-input-suffix']}>
                {slots.suffix && ((_b = slots.suffix) === null || _b === void 0 ? void 0 : _b.call(slots))}
              </div>)}
          </div>) : null}
        {props.type == 'textarea' ? (<div class={['u-input-textarea']}>
            <textarea placeholder={props.placeholder} class="u-input__textarea-el" onFocus={onFocus} onBlur={onBlur} onInput={onInput} rows={props.rows} cols={props.cols} value={props.value} disabled={props.disabled}></textarea>
          </div>) : null}
      </div>);
        };
    },
});
export default input;