import { ref, PropType } from 'vue';
import { createNamespace } from '../utils';
import { useTouch } from '../composables/use-touch';
import Loading from '../loading';
const [createComponent, bem] = createNamespace('key');
const CollapseIcon = (
);
const DeleteIcon = (
);
export default createComponent({
props: {
type: String as PropType<'delete' | 'extra' | 'close'>,
text: [Number, String],
color: String,
wider: Boolean,
large: Boolean,
loading: Boolean,
},
emits: ['press'],
setup(props, { emit, slots }) {
const active = ref(false);
const touch = useTouch();
const onTouchStart = (event: TouchEvent) => {
touch.start(event);
active.value = true;
};
const onTouchMove = (event: TouchEvent) => {
touch.move(event);
if (touch.direction.value) {
active.value = false;
}
};
const onTouchEnd = (event: TouchEvent) => {
if (active.value) {
// eliminate tap delay on safari
// see: https://github.com/youzan/vant/issues/6836
if (!slots.default) {
event.preventDefault();
}
active.value = false;
emit('press', props.text, props.type);
}
};
const renderContent = () => {
if (props.loading) {
return ;
}
const text = slots.default ? slots.default() : props.text;
switch (props.type) {
case 'delete':
return text || DeleteIcon;
case 'extra':
return text || CollapseIcon;
default:
return text;
}
};
return () => (
);
},
});