song-ui-u
Version:
vue3 + js的PC前端组件库
390 lines (354 loc) • 12.6 kB
JavaScript
import { mergeModels, shallowRef, computed, useModel, ref, nextTick, watch, onMounted, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot, createBlock, createCommentVNode, createElementVNode } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { useStyle } from '../../../hook/use-style/index.mjs';
import { useEvent } from '../../../hook/use-event/index.mjs';
import { useExpose } from '../../../hook/use-expose/index.mjs';
import '../../../hook/use-zindex/index.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../../image/index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import { XUpload } from '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../index.mjs';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
const __default__ = { name: "x-sender" };
const _sfc_main = /*#__PURE__*/Object.assign(__default__, {
props: /*#__PURE__*/mergeModels({
placeholder: {
type: String,
default: "请输入",
},
maxlength: {
type: [String, Number],
default: "",
},
width: {
type: String,
default: "",
},
rows: {
type: String,
default: "",
},
position: {
type: String,
default: "between", // between bottom
},
disabled: Boolean, // 禁用
count: Boolean, // 统计
rows: {
type: Number,
default: 1,
},
minRows: {
type: Number,
default: 1,
},
maxRows: {
type: Number,
default: 8,
},
}, {
"modelValue": {},
"modelModifiers": {},
"imageList": {
type: Array,
default: () => [],
},
"imageListModifiers": {},
}),
emits: /*#__PURE__*/mergeModels([
"input",
"clear",
"focus",
"blur",
"mouseenter",
"mouselevel",
"compositionstart",
"compositionupdate",
"compositionend",
"change",
"keydown",
"keyup",
"success",
"paste",
], ["update:modelValue", "update:imageList"]),
setup(__props, { expose: __expose, emit: __emit }) {
const ns = useNamespace("sender");
// input
const _ref = shallowRef(null);
const { focusExpose, blurExpose, selectExpose } = useExpose(_ref);
// event
const {
isFocus,
isComposition,
focusEvent,
blurEvent,
mouseenterEvent,
mouselevelEvent,
compositionStartEvent,
compositionUpdateEvent,
compositionEndEvent,
changeEvent,
keydownEvent,
keyupEvent,
} = useEvent();
// style
const uStyle = useStyle();
const styleWidth = computed(() => uStyle.width(props.width));
// defineModel
const modelValue = useModel(__props, "modelValue");
// emits
const emit = __emit;
/** props */
const props = __props;
// showLimit
const showLimit = computed(
() => props.count && !props.disabled && props.maxlength
);
// 文本长度
const valueLength = computed(() => modelValue.value.length);
const isColorDanger = computed(() => {
return props.maxlength && props.count && valueLength.value > props.maxlength;
});
const dynamicRows = ref(props.rows);
const adjustHeight = () => {
const textarea = _ref.value;
if (!textarea) return;
// 重置为默认行数
textarea.rows = props.minRows;
const scrollHeight = textarea.scrollHeight;
textarea.clientHeight;
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight, 10);
let rows = Math.floor(scrollHeight / lineHeight);
rows = Math.max(rows, props.minRows);
rows = Math.min(rows, props.maxRows);
dynamicRows.value = rows;
textarea.rows = rows;
};
const isAdj = computed(() => {
return dynamicRows.value > props.rows;
});
// 清除
const handlerClear = () => {
modelValue.value = "";
// emit input
emit("input", "");
emit("clear", "");
};
const handlerCompositionEnd = (e) => {
compositionEndEvent(e).then(() => {
handlerInput(e);
});
};
const handlerInput = (e) => {
if (isComposition.value) return;
const value = e.target.value;
modelValue.value = value;
// 自适应高度
adjustHeight();
emit("input", value, e);
};
const uploadRef = ref(null);
const file = ref(null);
const paste = ref(null);
const handelPaste = (e) => {
// 获取剪贴板中的内容
const items = e.clipboardData?.items;
if (items) {
for (let i = 0; i < items.length; i++) {
const item = items[i];
// 判断是否是图片类型
if (item.type.startsWith("image/")) {
const blob = item.getAsFile(); // 获取图片的 Blob 对象
if (blob) {
// 将 Blob 转换为 URL
paste.value = URL.createObjectURL(blob);
// 将blob转成File
const bobleTofile = new File(
[blob],
new Date().getTime() + "." + blob.type.split("/")[1],
{
type: blob.type,
}
);
file.value = bobleTofile;
if (uploadRef.value) {
uploadRef.value.upload(file.value);
}
emit("paste", file);
// 在这里可以将图片插入到页面或者上传到服务器
}
}
}
}
};
nextTick(() => {
watch(
() => uploadRef.value,
() => {
uploadRef.value.upload(file.value);
}
);
});
const imageList = useModel(__props, "imageList");
const success = (res) => {
console.log(res, "res");
emit("success", res);
};
onMounted(() => {
// 初始化自适应高度
adjustHeight();
});
__expose({
ref: _ref, // 输入框对象
focus: focusExpose,
blur: blurExpose,
select: selectExpose,
clear: handlerClear,
});
const __returned__ = { ns, _ref, focusExpose, blurExpose, selectExpose, isFocus, isComposition, focusEvent, blurEvent, mouseenterEvent, mouselevelEvent, compositionStartEvent, compositionUpdateEvent, compositionEndEvent, changeEvent, keydownEvent, keyupEvent, uStyle, styleWidth, modelValue, emit, props, showLimit, valueLength, isColorDanger, dynamicRows, adjustHeight, isAdj, handlerClear, handlerCompositionEnd, handlerInput, uploadRef, file, paste, handelPaste, imageList, success, ref, computed, shallowRef, watch, onMounted, nextTick, get useNamespace() { return useNamespace }, get useStyle() { return useStyle }, get useEvent() { return useEvent }, get useExpose() { return useExpose }, get XUpload() { return XUpload } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}
});
const _hoisted_1 = ["rows", "placeholder", "value", "disabled"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createElementBlock("div", {
style: normalizeStyle([$setup.styleWidth]),
class: normalizeClass([$setup.ns.b(), $setup.ns.is('focus', $setup.isFocus)]),
onMouseenter: _cache[8] || (_cache[8] = (...args) => ($setup.mouseenterEvent && $setup.mouseenterEvent(...args))),
onMouseleave: _cache[9] || (_cache[9] = (...args) => ($setup.mouselevelEvent && $setup.mouselevelEvent(...args)))
}, [
(_ctx.$slots.top || $setup.paste)
? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass([$setup.ns.e('wapper-top')])
}, [
(_ctx.$slots.top)
? renderSlot(_ctx.$slots, "top", { key: 0 })
: ($setup.paste)
? (openBlock(), createBlock($setup["XUpload"], {
key: 1,
imageSize: "80",
type: "imageList",
isVerify: false,
uploadUrl: "http://localhost:3000/upload/chunk",
verifyUrl: "http://localhost:3000/upload/verify",
mergeUrl: "http://localhost:3000/upload/merge",
imageList: $setup.imageList,
"onUpdate:imageList": _cache[0] || (_cache[0] = $event => (($setup.imageList) = $event)),
onSuccess: $setup.success,
ref: "uploadRef"
}, null, 8 /* PROPS */, ["imageList"]))
: createCommentVNode("v-if", true)
], 2 /* CLASS */))
: createCommentVNode("v-if", true),
createElementVNode("div", {
class: normalizeClass([
$setup.ns.e('inner-wrapper'),
$setup.ns.m('position', $props.position),
$setup.ns.is('adj', $setup.isAdj),
])
}, [
($props.position == 'between' && _ctx.$slots.prefix)
? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass([$setup.ns.e('prefix')])
}, [
renderSlot(_ctx.$slots, "prefix")
], 2 /* CLASS */))
: createCommentVNode("v-if", true),
createElementVNode("textarea", {
ref: "_ref",
rows: $setup.dynamicRows,
onInput: $setup.handlerInput,
onFocus: _cache[1] || (_cache[1] = (...args) => ($setup.focusEvent && $setup.focusEvent(...args))),
onBlur: _cache[2] || (_cache[2] = (...args) => ($setup.blurEvent && $setup.blurEvent(...args))),
onCompositionstart: _cache[3] || (_cache[3] = (...args) => ($setup.compositionStartEvent && $setup.compositionStartEvent(...args))),
onCompositionupdate: _cache[4] || (_cache[4] = (...args) => ($setup.compositionUpdateEvent && $setup.compositionUpdateEvent(...args))),
onCompositionend: $setup.handlerCompositionEnd,
onChange: _cache[5] || (_cache[5] = (...args) => ($setup.changeEvent && $setup.changeEvent(...args))),
onKeydown: _cache[6] || (_cache[6] = (...args) => ($setup.keydownEvent && $setup.keydownEvent(...args))),
onKeyup: _cache[7] || (_cache[7] = (...args) => ($setup.keyupEvent && $setup.keyupEvent(...args))),
placeholder: $props.placeholder,
value: $setup.modelValue,
disabled: $props.disabled,
class: normalizeClass([$setup.ns.e('inner'), $setup.ns.is('bottom', $props.position == 'bottom')]),
onPaste: $setup.handelPaste
}, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1),
($props.position == 'between' && _ctx.$slots.action)
? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass([$setup.ns.e('action')])
}, [
renderSlot(_ctx.$slots, "action")
], 2 /* CLASS */))
: createCommentVNode("v-if", true),
($props.position == 'bottom')
? (openBlock(), createElementBlock("div", {
key: 2,
class: normalizeClass([$setup.ns.e('bottom')])
}, [
createElementVNode("div", {
class: normalizeClass([$setup.ns.e('action')])
}, [
renderSlot(_ctx.$slots, "action")
], 2 /* CLASS */),
createElementVNode("div", {
class: normalizeClass([$setup.ns.e('prefix')])
}, [
renderSlot(_ctx.$slots, "prefix")
], 2 /* CLASS */)
], 2 /* CLASS */))
: createCommentVNode("v-if", true)
], 2 /* CLASS */),
(_ctx.$slots.bottom)
? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass($setup.ns.e('wapper-bottom'))
}, [
renderSlot(_ctx.$slots, "bottom")
], 2 /* CLASS */))
: createCommentVNode("v-if", true)
], 38 /* CLASS, STYLE, NEED_HYDRATION */))
}
var Sender = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\sender\\src\\index.vue"]]);
export { Sender as default };
//# sourceMappingURL=index.vue.mjs.map