taro-ui-vue3
Version:
Taro UI Rewritten in Vue 3.0
268 lines (267 loc) • 7.78 kB
JavaScript
import {h, defineComponent, ref, computed, mergeProps} from "vue";
import {Input, Text, View, Label} from "@tarojs/components";
import {isTest, uuid} from "../utils/common";
import {useModelValue} from "../composables/model";
function getInputProps(props) {
const actualProps = {
type: props.type,
maxLength: props.maxLength,
disabled: props.disabled,
password: false
};
switch (actualProps.type) {
case "phone":
actualProps.type = "number";
actualProps.maxLength = 11;
break;
case "password":
actualProps.type = "text";
actualProps.password = true;
break;
default:
break;
}
if (!props.disabled && !props.editable) {
actualProps.disabled = true;
}
return actualProps;
}
const AtInput = defineComponent({
name: "AtInput",
props: {
name: {
type: String,
default: ""
},
title: {
type: String,
default: ""
},
type: {
type: String,
default: "text",
validator: (val) => ["text", "number", "password", "phone", "idcard", "digit"].includes(val)
},
error: Boolean,
clear: Boolean,
border: {
type: Boolean,
default: true
},
disabled: Boolean,
value: {
type: String,
default: ""
},
placeholder: {
type: String,
default: ""
},
placeholderStyle: {
type: String,
default: ""
},
placeholderClass: {
type: String,
default: ""
},
editable: {
type: Boolean,
default: true
},
adjustPosition: Boolean,
autoFocus: Boolean,
focus: Boolean,
required: Boolean,
cursorSpacing: {
type: Number,
default: 50
},
cursor: {
type: Number,
default: 0
},
selectionStart: {
type: Number,
default: -1
},
selectionEnd: {
type: Number,
default: -1
},
maxLength: {
type: Number,
default: 140
},
confirmType: {
type: String,
default: "done",
validator: (val) => ["done", "send", "search", "next", "go"].includes(val)
},
onChange: Function,
onBlur: Function,
onFocus: Function,
onConfirm: Function,
onClick: Function,
onKeyboardHeightChange: Function,
onErrorClick: Function
},
setup(props, {attrs, slots, emit}) {
const inputValue = useModelValue(props, emit, "value");
const inputID = ref(`weui-input_${isTest() ? "2020" : uuid()}`);
const inputProps = computed(() => getInputProps(props));
const rootClasses = computed(() => ({
"at-input": true,
"at-input--without-border": !props.border
}));
const containerClasses = computed(() => ({
"at-input__container": true,
"at-input--error": props.error,
"at-input--disabled": inputProps.value.disabled
}));
const overlayClasses = computed(() => ({
"at-input__overlay": true,
"at-input__overlay--hidden": !inputProps.value.disabled
}));
const placeholderClasses = computed(() => Boolean(props.placeholderClass) ? `placeholder ${props.placeholderClass}` : "placeholder");
const titleClasses = computed(() => ({
"at-input__title": true,
"at-input__title--required": props.required
}));
function handleInput(e) {
var _a;
if (!inputProps.value.disabled) {
if (attrs["onUpdate:value"]) {
inputValue.value = e.detail.value;
} else {
(_a = props.onChange) == null ? void 0 : _a.call(props, e.detail.value, e);
}
}
}
function handleFocus(e) {
var _a;
if (!inputProps.value.disabled) {
(_a = props.onFocus) == null ? void 0 : _a.call(props, e.detail.value, e);
if (process.env.TARO_ENV === "h5") {
inputID.value = "weui-input" + uuid(10, 32);
}
}
}
function handleBlur(e) {
var _a;
if (!inputProps.value.disabled) {
(_a = props.onBlur) == null ? void 0 : _a.call(props, e.detail.value, e);
}
}
function handleConfirm(e) {
var _a;
if (!inputProps.value.disabled) {
(_a = props.onConfirm) == null ? void 0 : _a.call(props, e.detail.value, e);
}
}
function handleClick(e) {
if (!props.editable && typeof props.onClick === "function") {
props.onClick(e);
}
}
function handleClearValue(e) {
var _a;
if (attrs["onUpdate:value"]) {
inputValue.value = "";
} else {
(_a = props.onChange) == null ? void 0 : _a.call(props, "", e);
}
if (process.env.TARO_ENV === "h5") {
const inputNode = document.querySelector(`#${inputID.value} > .weui-input`);
inputNode.value = "";
}
}
function handleKeyboardHeightChange(e) {
var _a;
if (!inputProps.value.disabled) {
(_a = props.onKeyboardHeightChange) == null ? void 0 : _a.call(props, e);
}
}
function handleErrorClick(e) {
var _a;
(_a = props.onErrorClick) == null ? void 0 : _a.call(props, e);
}
return () => {
return h(View, mergeProps(attrs, {
class: rootClasses.value
}), {
default: () => [
h(View, {
class: containerClasses.value
}, {
default: () => [
h(View, {
class: overlayClasses.value,
onTap: handleClick
}),
props.title && h(Label, {
class: titleClasses.value,
for: props.name
}, {default: () => props.title}) || null,
h(Input, {
class: "at-input__input",
id: inputID.value,
name: props.name,
type: inputProps.value.type,
password: inputProps.value.password,
placeholderStyle: props.placeholderStyle,
placeholderClass: placeholderClasses.value,
placeholder: props.placeholder,
cursorSpacing: props.cursorSpacing,
maxlength: inputProps.value.maxLength,
autoFocus: props.autoFocus,
focus: props.focus,
value: inputValue.value,
confirmType: props.confirmType,
cursor: props.cursor,
selectionStart: props.selectionStart,
selectionEnd: props.selectionEnd,
adjustPosition: props.adjustPosition,
onBlur: handleBlur,
onInput: handleInput,
onFocus: handleFocus,
onConfirm: handleConfirm,
onKeyboardheightchange: handleKeyboardHeightChange
}),
props.clear && String(props.value) && h(View, {
class: "at-input__icon",
onTouchstart: handleClearValue
}, {
default: () => [
h(Text, {
class: "at-icon at-icon-close-circle at-input__icon-close"
})
]
}) || null,
props.error && h(View, {
class: "at-input__icon",
onTouchstart: handleErrorClick
}, {
default: () => [
h(Text, {
class: "at-icon at-icon-alert-circle at-input__icon-alert"
})
]
}) || null,
slots.default && h(View, {
class: "at-input__children"
}, {default: () => {
var _a;
return (_a = slots.default) == null ? void 0 : _a.call(slots);
}})
]
})
]
});
};
}
});
var input_default = AtInput;
export {
input_default as default
};