@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
234 lines (233 loc) • 6.54 kB
JavaScript
import { useCommonUtils as K, useTextBox as R, useClear as A, getCustomStyle as $, withInstall as j } from "../common/index.esm.js";
import { defineComponent as G, ref as i, computed as c, onMounted as W, createVNode as u, withDirectives as _, vModelText as q, nextTick as J } from "vue";
const Q = {
/**
* 自动撑开高度
* @default false
*/
autoHeight: { type: Boolean, default: !1 },
/**
* 自动聚焦
* @default false
*/
autofocus: { type: Boolean, default: !1 },
/**
* 自动完成
* @default false
*/
autocomplete: { type: Boolean, default: !1 },
/**
* 当设置文本长度为0，如果开启，支持无限制输入
* @default false
*/
allowUnlimtedWhenEmpty: { type: Boolean, default: !1 },
/**
* 禁用
* @default false
*/
disabled: { type: Boolean, default: !1 },
/**
* 启用清空操作
* @default false
*/
enableClear: { type: Boolean, default: !1 },
/**
* 组件标识
* @default ''
*/
id: { type: String, default: "" },
/**
* 最小文本长度
* @default 0
*/
minLength: { type: Number, default: 0 },
/**
* 最大文本长度
*/
maxLength: { type: Number },
/**
* 绑定值
*/
modelValue: { type: String, default: "" },
/**
* 背景文字
* @default ''
*/
placeholder: { type: String, default: "" },
/**
* 只读
* @default false
*/
readonly: { type: Boolean, default: !1 },
/**
* 可编辑，用在公共方法内平衡样式
*/
editable: { type: Boolean, default: !0 },
/**
* 行数
*/
rows: { type: Number },
/**
* 允许拖拽调整大小
* @default false
*/
resizable: { type: Boolean, default: !1 },
/**
* 展示输入文本数量
*/
showCount: { type: Boolean, default: !1 },
/**
* 展示边线
*/
showBorder: { Type: Boolean, default: !0 },
/**
* 键盘按键索引
*/
tabIndex: { type: Number, default: -1 },
/**
* 初始化后自动聚焦
* @default false
*/
focusOnCreated: { type: Boolean, default: !1 },
/**
* 初始化后自动选中
* @default false
*/
selectOnCreated: { type: Boolean, default: !1 },
/**
* modelValue 更新时机， 默认 blur； 可选值：blur | input - blur: 离开焦点时更新 - change: 输入时更新
*/
updateOn: { type: String, default: "blur" },
lineBreak: { type: String, default: "enter" },
customClass: { type: String, default: "" },
customStyle: { type: String, default: "" }
}, X = /* @__PURE__ */ G({
name: "FTextarea",
props: Q,
emits: ["clear", "change", "blur", "click", "clickHandle", "focus", "input", "keydown", "keyup", "iconMouseEnter", "iconMouseLeave", "update:modelValue", "update:value", "updateExtendInfo", "valueChange", "mousedownEvent", "mouseupEvent"],
setup(e, a) {
const {
isUndefined: Y
} = K(), m = i(), l = i(null), g = i(""), n = i(""), v = R(e, a, n, g, m), {
inputGroupClass: h,
onBlur: p,
onFocus: C,
onMousedown: B,
onMouseup: w,
onTextBoxValueChange: b,
hasFocused: x,
maxLength: f
} = v, S = A(e, a, v), {
onMouseEnter: E,
onMouseLeave: M,
clearButtonClass: k,
shouldShowClearButton: T,
clearButtonStyle: V
} = S, I = (t) => {
var o, r, s, d;
t.stopPropagation(), a.emit("input", (o = t.target) == null ? void 0 : o.value), e.updateOn === "change" && (a.emit("update:modelValue", (r = t.target) == null ? void 0 : r.value), a.emit("valueChange", (s = t.target) == null ? void 0 : s.value), a.emit("change", (d = t.target) == null ? void 0 : d.value));
}, O = (t) => {
t.stopPropagation(), l.value.value = "", a.emit("update:modelValue", ""), a.emit("valueChange", ""), a.emit("change", "");
}, L = (t) => {
if (e.readonly || !x)
return;
const {
altKey: o,
key: r
} = t;
if (r === "Enter" && !o && e.lineBreak === "alt enter") {
t.preventDefault();
return;
}
if (o && r === "Enter" && e.lineBreak === "alt enter") {
t.stopPropagation(), t.preventDefault();
const {
selectionStart: s,
selectionEnd: d
} = l.value;
n.value = n.value.slice(0, s) + `
` + n.value.slice(d), J(() => {
var y;
l.value.selectionStart = s + 1, l.value.selectionEnd = s + 1, (y = l.value) == null || y.focus();
}), e.updateOn === "change" && (a.emit("update:modelValue", n.value), a.emit("valueChange", n.value), a.emit("change", n.value));
return;
}
}, F = c(() => ({
"form-control": !0,
"h-100": e.autoHeight
})), N = c(() => {
const t = {};
return e.resizable || (t.resize = "none"), e.rows > 2 ? {
height: "auto",
...t
} : t;
}), P = c(() => e.disabled || e.readonly ? "" : e.placeholder), U = () => l.value;
a.expose({
elementRef: l,
getTextareaElement: U
});
function z() {
var t, o;
e.selectOnCreated && ((t = l.value) == null || t.select()), e.focusOnCreated && ((o = l.value) == null || o.focus({
preventScroll: !0
}));
}
const D = c(() => $({
position: "relative"
}, e.customStyle));
W(() => {
z();
});
const H = () => {
const t = n.value.length;
return f.value && u("div", {
class: "word-count"
}, [u("span", {
class: "word-count-text"
}, [`${t}/${f.value}`])]);
};
return () => u("div", {
ref: m,
class: h.value,
onMouseenter: E,
onMouseleave: M,
style: D.value
}, [u("div", {
class: "f-textarea-wrap"
}, [_(u("textarea", {
ref: l,
class: F.value,
id: e.id,
"onUpdate:modelValue": (t) => n.value = t,
minlength: e.minLength,
maxlength: f.value,
tabindex: e.tabIndex,
disabled: e.disabled,
readonly: e.readonly,
autocomplete: e.autocomplete,
placeholder: P.value,
autofocus: e.autofocus,
rows: e.rows,
onInput: I,
onFocus: C,
onChange: b,
onKeydown: L,
onBlur: p,
onMousedown: B,
onMouseup: w,
style: N.value
}, null), [[q, n.value]]), T.value && u("span", {
id: "clearIcon",
class: k.value,
style: V.value,
onClick: (t) => O(t)
}, [u("i", {
class: "f-icon modal_close"
}, null)]), e.showCount && H()])]);
}
}), te = j(X);
export {
X as FTextarea,
te as default,
Q as textAreaProps
};