sard-uniapp/use/usePopoutInput.js

sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库

import { computed, ref, watch } from 'vue';
import { useTwoWayVisible } from './useTwoWayVisible';
import { omit } from '../utils';
import { defaultConfig } from '../components/config';
export function pickPopoutInputProps(props, slots) {
    return computed(() => ({
        rootStyle: props.rootStyle,
        rootClass: props.rootClass,
        placeholder: props.placeholder,
        readonly: props.readonly,
        disabled: props.disabled,
        clearable: props.clearable,
        loading: props.loading,
        multiline: props.multiline,
        arrow: props.arrow,
        arrowFamily: props.arrowFamily,
        inputProps: props.inputProps,
        internalPrepend: slots.prepend ? 1 : 0,
        internalAppend: slots.append ? 1 : 0,
        internalArrow: slots.arrow ? 1 : 0,
    }));
}
const popoutInputKeys = [
    'rootClass',
    'rootStyle',
    'placeholder',
    'readonly',
    'disabled',
    'clearable',
    'loading',
    'multiline',
    'arrow',
    'arrowFamily',
    'inputProps',
    'internalPrepend',
    'internalAppend',
    'internalArrow',
];
export function omitPopoutInputProps(props, keys = []) {
    return computed(() => ({
        ...omit(props, [...popoutInputKeys, ...keys]),
        title: props.title ?? props.placeholder,
    }));
}
const defaultValueOnClear = () => undefined;
export function usePopoutInput(props, emit, options = {}) {
    // visible
    const { visible } = useTwoWayVisible(props, emit);
    const show = () => {
        visible.value = true;
    };
    const onVisibleHook = (name) => {
        emit('visible-hook', name);
        emit(name);
    };
    // value
    const innerValue = ref(props.modelValue);
    const getValueOnClear = () => (props.valueOnClear || defaultConfig.valueOnClear || defaultValueOnClear)();
    watch(() => props.modelValue, () => {
        innerValue.value = props.modelValue;
    });
    const onChange = (...args) => {
        emit('update:model-value', ...args);
        emit('change', ...args);
    };
    const onClear = () => {
        inputValue.value = '';
        innerValue.value = getValueOnClear();
        if (options.onClear) {
            options.onClear(innerValue.value);
        }
        else {
            emit('update:model-value', innerValue.value);
            emit('change', innerValue.value);
        }
    };
    // input
    const inputValue = ref('');
    return {
        innerVisible: visible,
        innerValue,
        inputValue,
        show,
        onChange,
        onClear,
        onVisibleHook,
    };
}