@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
185 lines (184 loc) • 6.54 kB
JavaScript
import { defineComponent, useSlots, toRefs, computed, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createElementVNode, withModifiers, renderSlot, withDirectives, normalizeStyle, createVNode } from "vue";
import { inTextareaProps } from "./types.mjs";
import { IconClose } from "../../_utils/icons.mjs";
import { useInput } from "../../_headless/use-input.mjs";
import { useI18n } from "../../locale/index.mjs";
import "../../scrollbar/index.mjs";
import { vScrollbar } from "../../scrollbar/vScrollbar.mjs";
const _hoisted_1 = ["for"];
const _hoisted_2 = ["date-value"];
const _hoisted_3 = ["id", "value", "placeholder", "readonly", "disabled", "rows", "cols"];
const _hoisted_4 = ["innerHTML"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "InTextarea",
props: inTextareaProps,
emits: ["update:modelValue", "change", "input", "blur", "focus", "clear", "pressEnter"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const slots = useSlots();
const { t } = useI18n();
const { modelValue, inputOnOutlimit, maxLength, minLength } = toRefs(props);
const {
displayValue,
clearValue: clear,
isValid,
inputValueLength,
isOutLengthLimit,
handleBlur,
handleInput,
handleFocus,
handleClear,
inputEl
} = useInput({
emits,
maxLength,
minLength,
inputOnOutlimit,
modelValue,
defaultValue: props.defaultValue ?? "",
emitUpdate: (value) => {
emits("update:modelValue", value);
},
format: props.format,
validate: props.validate,
valueOnInvalidChange: props.valueOnInvalidChange
});
const resizeValue = computed(() => {
if (props.autoSize || props.disabled) {
return "none";
} else {
if (props.resize === "h") {
return "horizontal";
} else if (props.resize === "v") {
return "vertical";
}
return props.resize;
}
});
const isClearable = computed(() => props.clearable && !props.disabled && !props.readonly);
const focus = () => {
var _a;
(_a = inputEl.value) == null ? void 0 : _a.focus();
};
const blur = () => {
var _a;
(_a = inputEl.value) == null ? void 0 : _a.blur();
};
const mirrorValue = computed(() => {
return displayValue.value;
});
const scrollbarProps = computed(() => {
if (props.scrollbar === true) {
return {
showType: "hover",
size: "small"
};
}
return props.scrollbar;
});
__expose({
inputEl,
focus,
blur,
clear
});
return (_ctx, _cache) => {
var _a, _b;
return openBlock(), createElementBlock("label", {
class: normalizeClass(["o_textarea", {
"o_textarea-clearable": isClearable.value && unref(displayValue) !== "",
"o_textarea-disabled": props.disabled,
"o_textarea-readonly": props.readonly,
"o_textarea-invalid": !unref(isValid),
"o_textarea-auto-size": props.autoSize,
"o_textarea-limit": props.maxLength
}]),
for: props.textareaId
}, [
((_a = slots.prefix) == null ? void 0 : _a.call(slots)) ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: "o_textarea-prefix",
onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["prevent"]))
},
[
renderSlot(_ctx.$slots, "prefix")
],
32
/* NEED_HYDRATION */
)) : createCommentVNode("v-if", true),
createElementVNode("div", {
class: normalizeClass(["o_textarea-wrap", {
"o_textarea-wrap-auto-size": props.autoSize
}]),
"date-value": mirrorValue.value
}, [
withDirectives(createElementVNode("textarea", {
id: props.textareaId,
ref_key: "inputEl",
ref: inputEl,
value: unref(displayValue),
class: "o_textarea-textarea",
placeholder: props.placeholder,
readonly: props.readonly,
disabled: props.disabled,
rows: props.rows,
cols: props.cols,
style: normalizeStyle({
resize: resizeValue.value
}),
onFocus: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => unref(handleFocus) && unref(handleFocus)(...args)),
onBlur: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => unref(handleBlur) && unref(handleBlur)(...args)),
onInput: _cache[3] || (_cache[3] = //@ts-ignore
(...args) => unref(handleInput) && unref(handleInput)(...args))
}, null, 44, _hoisted_3), [
[unref(vScrollbar), scrollbarProps.value]
]),
isClearable.value ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: "o_textarea-icon o_textarea-clear",
onClick: _cache[4] || (_cache[4] = //@ts-ignore
(...args) => unref(handleClear) && unref(handleClear)(...args)),
onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {
}, ["prevent"]))
},
[
createVNode(unref(IconClose), { class: "o_textarea-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : createCommentVNode("v-if", true),
props.maxLength ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(["o_textarea-icon o_textarea-count", { "o_textarea-count-error": unref(isOutLengthLimit) }]),
innerHTML: unref(t)("input.limit", unref(inputValueLength), props.maxLength)
}, null, 10, _hoisted_4)) : createCommentVNode("v-if", true)
], 10, _hoisted_2),
((_b = slots.suffix) == null ? void 0 : _b.call(slots)) ? (openBlock(), createElementBlock(
"div",
{
key: 1,
class: "o_textarea-suffix",
onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {
}, ["prevent"]))
},
[
renderSlot(_ctx.$slots, "suffix")
],
32
/* NEED_HYDRATION */
)) : createCommentVNode("v-if", true)
], 10, _hoisted_1);
};
}
});
export {
_sfc_main as default
};