song-ui-u/lib/components/sender/src/index.vue.cjs

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var index$3 = require('../../../hook/use-namespace/index.cjs');
var index$2 = require('../../../hook/use-style/index.cjs');
var index = require('../../../hook/use-event/index.cjs');
var index$1 = require('../../../hook/use-expose/index.cjs');
require('../../../hook/use-zindex/index.cjs');
require('../../button/index.cjs');
require('../../buttonGroup/index.cjs');
require('../../icon/index.cjs');
require('../../input/index.cjs');
require('../../textarea/index.cjs');
require('../../row/index.cjs');
require('../../col/index.cjs');
require('../../container/index.cjs');
require('../../checkbox/index.cjs');
require('../../switch/index.cjs');
require('../../form/index.cjs');
require('../../message/index.cjs');
require('../../mask/src/mask.cjs');
require('../../modal/index.cjs');
require('../../messageBox/index.cjs');
require('../../drawer/index.cjs');
require('../../badge/index.cjs');
require('../../space/index.cjs');
require('../../image/index.cjs');
require('../../radio/index.cjs');
require('../../divider/index.cjs');
require('../../chat/index.cjs');
require('../../progress/index.cjs');
var index$4 = require('../../upload/index.cjs');
require('../../vTree/index.cjs');
require('../../table/index.cjs');
require('../../tabs/index.cjs');
require('../../menu/index.cjs');
require('../../steps/index.cjs');
require('../../header/index.cjs');
require('../../breadcrumble/index.cjs');
require('../../datePicker/index.cjs');
require('../../tooltip/index.cjs');
require('../../popover/index.cjs');
require('../../timePicker/index.cjs');
require('../../select/index.cjs');
require('../../collapse/index.cjs');
require('../../card/index.cjs');
require('../../timeline/index.cjs');
require('../../tag/index.cjs');
require('../../result/index.cjs');
require('../index.cjs');
var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.cjs');

const __default__ = { name: "x-sender" };

const _sfc_main = /*#__PURE__*/Object.assign(__default__, {
  props: /*#__PURE__*/vue.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__*/vue.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 = index$3.useNamespace("sender");
// input
const _ref = vue.shallowRef(null);
const { focusExpose, blurExpose, selectExpose } = index$1.useExpose(_ref);
// event
const {
  isFocus,
  isComposition,
  focusEvent,
  blurEvent,
  mouseenterEvent,
  mouselevelEvent,
  compositionStartEvent,
  compositionUpdateEvent,
  compositionEndEvent,
  changeEvent,
  keydownEvent,
  keyupEvent,
} = index.useEvent();

// style
const uStyle = index$2.useStyle();
const styleWidth = vue.computed(() => uStyle.width(props.width));
// defineModel
const modelValue = vue.useModel(__props, "modelValue");
// emits
const emit = __emit;
/** props */
const props = __props;
// showLimit
const showLimit = vue.computed(
  () => props.count && !props.disabled && props.maxlength
);
// 文本长度
const valueLength = vue.computed(() => modelValue.value.length);
const isColorDanger = vue.computed(() => {
  return props.maxlength && props.count && valueLength.value > props.maxlength;
});

const dynamicRows = vue.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 = vue.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 = vue.ref(null);
const file = vue.ref(null);
const paste = vue.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);
          // 在这里可以将图片插入到页面或者上传到服务器
        }
      }
    }
  }
};

vue.nextTick(() => {
  vue.watch(
    () => uploadRef.value,
    () => {
      uploadRef.value.upload(file.value);
    }
  );
});

const imageList = vue.useModel(__props, "imageList");

const success = (res) => {
  console.log(res, "res");
  emit("success", res);
};

vue.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: vue.ref, computed: vue.computed, shallowRef: vue.shallowRef, watch: vue.watch, onMounted: vue.onMounted, nextTick: vue.nextTick, get useNamespace() { return index$3.useNamespace }, get useStyle() { return index$2.useStyle }, get useEvent() { return index.useEvent }, get useExpose() { return index$1.useExpose }, get XUpload() { return index$4.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 (vue.openBlock(), vue.createElementBlock("div", {
    style: vue.normalizeStyle([$setup.styleWidth]),
    class: vue.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)
      ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          class: vue.normalizeClass([$setup.ns.e('wapper-top')])
        }, [
          (_ctx.$slots.top)
            ? vue.renderSlot(_ctx.$slots, "top", { key: 0 })
            : ($setup.paste)
              ? (vue.openBlock(), vue.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"]))
              : vue.createCommentVNode("v-if", true)
        ], 2 /* CLASS */))
      : vue.createCommentVNode("v-if", true),
    vue.createElementVNode("div", {
      class: vue.normalizeClass([
        $setup.ns.e('inner-wrapper'),
        $setup.ns.m('position', $props.position),
        $setup.ns.is('adj', $setup.isAdj),
      ])
    }, [
      ($props.position == 'between' && _ctx.$slots.prefix)
        ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: vue.normalizeClass([$setup.ns.e('prefix')])
          }, [
            vue.renderSlot(_ctx.$slots, "prefix")
          ], 2 /* CLASS */))
        : vue.createCommentVNode("v-if", true),
      vue.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: vue.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)
        ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 1,
            class: vue.normalizeClass([$setup.ns.e('action')])
          }, [
            vue.renderSlot(_ctx.$slots, "action")
          ], 2 /* CLASS */))
        : vue.createCommentVNode("v-if", true),
      ($props.position == 'bottom')
        ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 2,
            class: vue.normalizeClass([$setup.ns.e('bottom')])
          }, [
            vue.createElementVNode("div", {
              class: vue.normalizeClass([$setup.ns.e('action')])
            }, [
              vue.renderSlot(_ctx.$slots, "action")
            ], 2 /* CLASS */),
            vue.createElementVNode("div", {
              class: vue.normalizeClass([$setup.ns.e('prefix')])
            }, [
              vue.renderSlot(_ctx.$slots, "prefix")
            ], 2 /* CLASS */)
          ], 2 /* CLASS */))
        : vue.createCommentVNode("v-if", true)
    ], 2 /* CLASS */),
    (_ctx.$slots.bottom)
      ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 1,
          class: vue.normalizeClass($setup.ns.e('wapper-bottom'))
        }, [
          vue.renderSlot(_ctx.$slots, "bottom")
        ], 2 /* CLASS */))
      : vue.createCommentVNode("v-if", true)
  ], 38 /* CLASS, STYLE, NEED_HYDRATION */))
}
var Sender = /*#__PURE__*/_pluginVue_exportHelper(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\sender\\src\\index.vue"]]);

module.exports = Sender;
//# sourceMappingURL=index.vue.cjs.map