choo-taro-ui-vue3
Version:
Taro UI Rewritten in Vue 3.0
298 lines (290 loc) • 9.95 kB
JavaScript
import { defineComponent, ref, computed, toRefs, createCommentVNode, resolveComponent, normalizeClass, createVNode, toDisplayString, createTextVNode, withCtx, openBlock, createBlock, renderSlot, mergeProps } from 'vue';
import { uuid } from '../utils';
import { useModelValue } from '../composables';
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;
}
if (!props.disabled && !props.editable) {
actualProps.disabled = true;
}
return actualProps;
}
const AtInput = defineComponent({
name: "AtInput",
emits: [
"blur",
"focus",
"confirm",
"click",
"error-click",
"update:modelValue",
"keyboard-height-change"
],
props: {
name: {
type: String,
default: ""
},
title: String,
type: {
type: String,
default: "text",
validator: (val) => ["text", "number", "password", "phone", "idcard", "digit"].includes(val)
},
error: Boolean,
clear: Boolean,
disabled: Boolean,
border: {
type: Boolean,
default: true
},
modelValue: {
type: String,
default: ""
},
placeholder: {
type: String,
default: ""
},
placeholderStyle: {
type: String,
default: ""
},
placeholderClass: {
type: String,
default: ""
},
editable: {
type: Boolean,
default: true
},
focus: Boolean,
required: Boolean,
autoFocus: Boolean,
adjustPosition: 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)
}
},
setup(props, { emit }) {
const inputID = ref("weui-input" + uuid());
const inputValue = useModelValue(props, emit, "modelValue");
const inputProps = computed(() => getInputProps(props));
const rootClasses = computed(() => ["at-input", {
"at-input--without-border": !props.border
}]);
const containerClasses = computed(() => ["at-input__container", {
"at-input--error": props.error,
"at-input--disabled": inputProps.value.disabled
}]);
const overlayClasses = computed(() => ["at-input__overlay", {
"at-input__overlay--hidden": !inputProps.value.disabled
}]);
const placeholderClasses = computed(() => Boolean(props.placeholderClass) ? `placeholder ${props.placeholderClass}` : "placeholder");
const titleClasses = computed(() => ["at-input__title", {
"at-input__title--required": props.required
}]);
function handleInput(e) {
if (!inputProps.value.disabled) {
inputValue.value = e.detail.value;
}
}
function handleFocus(e) {
if (!inputProps.value.disabled) {
emit("focus", e.detail.value);
if (process.env.TARO_ENV === "h5") {
inputID.value = "weui-input" + uuid(10, 32);
}
}
}
function handleBlur(e) {
if (!inputProps.value.disabled) {
emit("blur", e.detail.value);
}
}
function handleConfirm(e) {
if (!inputProps.value.disabled) {
emit("confirm", e.detail.value);
}
}
function handleClick(e) {
if (!props.editable) {
emit("click", e);
}
}
function handleClearValue() {
inputValue.value = "";
if (process.env.TARO_ENV === "h5") {
const inputNode = document.querySelector(`#${inputID.value} > .weui-input`);
inputNode.value = "";
}
}
function handleKeyboardHeightChange(e) {
if (!inputProps.value.disabled) {
emit("keyboard-height-change", e);
}
}
function handleErrorClick(e) {
emit("error-click", e);
}
return {
...toRefs(props),
inputID,
inputProps,
inputValue,
rootClasses,
titleClasses,
overlayClasses,
containerClasses,
placeholderClasses,
handleBlur,
handleClick,
handleFocus,
handleInput,
handleConfirm,
handleClearValue,
handleErrorClick,
handleKeyboardHeightChange
};
}
});
// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _normalizeClass = normalizeClass, _createVNode = createVNode, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _withCtx = withCtx, _openBlock = openBlock, _createBlock = createBlock, _renderSlot = renderSlot, _mergeProps = mergeProps;
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";
const _component_taro_label = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-label") : "label";
const _component_taro_input = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-input") : "input";
const _component_taro_text = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-text") : "text";
return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: _ctx.rootClasses }), {
default: _withCtx(() => [
_createVNode(_component_taro_view, {
class: _normalizeClass(_ctx.containerClasses)
}, {
default: _withCtx(() => [
_createCommentVNode(" overlay "),
_createVNode(_component_taro_view, {
class: _normalizeClass(_ctx.overlayClasses),
onTap: _ctx.handleClick
}, null, 8 /* PROPS */, ["class", "onTap"]),
_createCommentVNode(" title "),
(_ctx.title)
? (_openBlock(), _createBlock(_component_taro_label, {
key: 0,
for: _ctx.name,
class: _normalizeClass(_ctx.titleClasses)
}, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(_ctx.title), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["for", "class"]))
: _createCommentVNode("v-if", true),
_createCommentVNode(" input "),
_createVNode(_component_taro_input, {
class: "at-input__input",
id: _ctx.inputID,
name: _ctx.name,
value: _ctx.inputValue,
type: _ctx.inputProps.type,
password: _ctx.inputProps.password,
maxlength: _ctx.inputProps.maxLength,
placeholder: _ctx.placeholder,
"placeholder-style": _ctx.placeholderStyle,
"placeholder-class": _ctx.placeholderClasses,
focus: _ctx.focus,
cursor: _ctx.cursor,
"auto-focus": _ctx.autoFocus,
"confirm-type": _ctx.confirmType,
"selection-end": _ctx.selectionEnd,
"cursor-spacing": _ctx.cursorSpacing,
"selection-start": _ctx.selectionStart,
"adjust-position": _ctx.adjustPosition,
onInput: _ctx.handleInput,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onConfirm: _ctx.handleConfirm,
onKeyboardheightchange: _ctx.handleKeyboardHeightChange
}, null, 8 /* PROPS */, ["id", "name", "value", "type", "password", "maxlength", "placeholder", "placeholder-style", "placeholder-class", "focus", "cursor", "auto-focus", "confirm-type", "selection-end", "cursor-spacing", "selection-start", "adjust-position", "onInput", "onFocus", "onBlur", "onConfirm", "onKeyboardheightchange"]),
_createCommentVNode(" clear icon "),
(_ctx.clear && String(_ctx.modelValue))
? (_openBlock(), _createBlock(_component_taro_view, {
key: 1,
class: "at-input__icon",
onTouchend: _ctx.handleClearValue
}, {
default: _withCtx(() => [
_createVNode(_component_taro_text, { class: "at-icon at-icon-close-circle at-input__icon-close" })
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onTouchend"]))
: _createCommentVNode("v-if", true),
_createCommentVNode(" error icon "),
(_ctx.error)
? (_openBlock(), _createBlock(_component_taro_view, {
key: 2,
class: "at-input__icon",
onTouchend: _ctx.handleErrorClick
}, {
default: _withCtx(() => [
_createVNode(_component_taro_text, { class: "at-icon at-icon-close-circle at-input__icon-alert" })
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onTouchend"]))
: _createCommentVNode("v-if", true),
_createCommentVNode(" input slot "),
(Boolean(_ctx.$slots.default))
? (_openBlock(), _createBlock(_component_taro_view, {
key: 3,
class: "at-input__children"
}, {
default: _withCtx(() => [
_renderSlot(_ctx.$slots, "default")
]),
_: 3 /* FORWARDED */
}))
: _createCommentVNode("v-if", true)
]),
_: 3 /* FORWARDED */
}, 8 /* PROPS */, ["class"])
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["class"]))
}
AtInput.render = _sfc_render;
export default AtInput;