123 lines
4.9 KiB
JavaScript
123 lines
4.9 KiB
JavaScript
import { w as withInstall } from "../badge/index2.js";
|
|
import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, createVNode, createCommentVNode, toDisplayString } from "vue";
|
|
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
|
|
import { g as isObject } from "../_chunks/@vueuse/index.js";
|
|
var index = /* @__PURE__ */ (() => ":root{--textarea-border-radius: var(--global-border-radius);--textarea-border-color: var(--global-neutral-color-3)}.layui-textarea{border-width:1px;border-style:solid;background-color:#fff;color:#000000d9;border-radius:var(--textarea-border-radius);border-color:var(--textarea-border-color);display:block;width:100%;height:auto;line-height:20px;min-height:100px;padding:6px 10px;resize:vertical;position:relative;transition:none;-webkit-transition:none}.layui-textarea-wrapper{position:relative}.layui-textarea:hover,.layui-textarea:focus{border-color:#d2d2d2!important}.layui-textarea-clear{position:absolute;color:#00000073;right:10px;top:10px}.layui-textarea::-webkit-input-placeholder{line-height:1.3}.layui-texterea-count{color:inherit;white-space:nowrap;pointer-events:none;text-align:right;margin-top:4px}.layui-textarea-disabled{cursor:not-allowed!important;opacity:.6}\n")();
|
|
const _hoisted_1 = { class: "layui-textarea-wrapper" };
|
|
const _hoisted_2 = ["value", "placeholder", "name", "disabled", "maxlength"];
|
|
const _hoisted_3 = {
|
|
key: 0,
|
|
class: "layui-textarea-clear"
|
|
};
|
|
const _hoisted_4 = {
|
|
key: 1,
|
|
class: "layui-texterea-count"
|
|
};
|
|
const __default__ = {
|
|
name: "LayTextarea"
|
|
};
|
|
const _sfc_main = defineComponent({
|
|
...__default__,
|
|
props: {
|
|
name: null,
|
|
modelValue: null,
|
|
placeholder: null,
|
|
disabled: { type: Boolean },
|
|
showCount: { type: Boolean },
|
|
allowClear: { type: Boolean },
|
|
maxlength: null,
|
|
autosize: { type: [Boolean, Object] }
|
|
},
|
|
emits: ["blur", "input", "update:modelValue", "change", "focus", "clear"],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const textareaRef = ref(null);
|
|
const composing = ref(false);
|
|
const onInput = function(event) {
|
|
const inputElement = event.target;
|
|
emit("input", inputElement.value);
|
|
if (composing.value) {
|
|
return;
|
|
}
|
|
emit("update:modelValue", inputElement.value);
|
|
};
|
|
const onFocus = function(event) {
|
|
emit("focus", event);
|
|
};
|
|
const onBlur = function(event) {
|
|
emit("blur", event);
|
|
};
|
|
const onChange = (event) => {
|
|
const inputElement = event.target;
|
|
emit("change", inputElement.value);
|
|
};
|
|
const onClear = function() {
|
|
emit("update:modelValue", "");
|
|
emit("clear");
|
|
};
|
|
const onCompositionstart = () => {
|
|
composing.value = true;
|
|
};
|
|
const onCompositionend = (event) => {
|
|
composing.value = false;
|
|
onInput(event);
|
|
};
|
|
const hasContent = computed(() => {
|
|
var _a;
|
|
return ((_a = props.modelValue) == null ? void 0 : _a.length) > 0;
|
|
});
|
|
const wordCount = computed(() => {
|
|
var _a, _b;
|
|
let count = String((_b = (_a = props.modelValue) == null ? void 0 : _a.length) != null ? _b : 0);
|
|
if (props.maxlength) {
|
|
count += "/" + props.maxlength;
|
|
}
|
|
return count;
|
|
});
|
|
watch([() => props.modelValue, textareaRef], () => {
|
|
var _a, _b;
|
|
if (!textareaRef.value || !props.autosize)
|
|
return;
|
|
const height = ((_a = textareaRef.value) == null ? void 0 : _a.scrollHeight) + 2;
|
|
if (isObject(props.autosize)) {
|
|
const { minHeight, maxHeight } = props.autosize;
|
|
if (height < minHeight || height > maxHeight)
|
|
return;
|
|
}
|
|
textareaRef.value.style.height = "1px";
|
|
textareaRef.value.style.height = `${((_b = textareaRef.value) == null ? void 0 : _b.scrollHeight) + 2}px`;
|
|
}, {
|
|
immediate: true
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
createElementVNode("textarea", {
|
|
ref_key: "textareaRef",
|
|
ref: textareaRef,
|
|
class: normalizeClass(["layui-textarea", { "layui-textarea-disabled": __props.disabled }]),
|
|
value: __props.modelValue,
|
|
placeholder: __props.placeholder,
|
|
name: __props.name,
|
|
disabled: __props.disabled,
|
|
maxlength: __props.maxlength,
|
|
onCompositionstart,
|
|
onCompositionend,
|
|
onInput,
|
|
onFocus,
|
|
onChange,
|
|
onBlur
|
|
}, null, 42, _hoisted_2),
|
|
__props.allowClear && unref(hasContent) ? (openBlock(), createElementBlock("span", _hoisted_3, [
|
|
createVNode(unref(_sfc_main$2E), {
|
|
type: "layui-icon-close-fill",
|
|
onClick: onClear
|
|
})
|
|
])) : createCommentVNode("", true),
|
|
__props.showCount ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(wordCount)), 1)) : createCommentVNode("", true)
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { component as default };
|