song-ui-u/es/components/textarea/src/index.vue.mjs

vue3 + js的PC前端组件库

import { mergeModels, shallowRef, computed, useModel, ref, watchEffect, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, toDisplayString, createCommentVNode } 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 _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';

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

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: Number,
    default: 1,
  },
  minRows: {
    type: Number,
    default: 1,
  },
  maxRows: {
    type: Number,
    default: 8,
  },
  disabled: Boolean,
  count: Boolean,
}, {
    "modelValue": {},
    "modelModifiers": {},
  }),
  emits: /*#__PURE__*/mergeModels([
  "input",
  "clear",
  "focus",
  "blur",
  "mouseenter",
  "mouselevel",
  "compositionstart",
  "compositionupdate",
  "compositionend",
  "change",
  "keydown",
  "keyup",
], ["update:modelValue"]),
  setup(__props, { expose: __expose, emit: __emit }) {

const ns = useNamespace("textarea");
// 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;

const dynamicRows = ref(props.rows);
const content = ref("");

const adjustHeight = () => {
  const textarea = _ref.value;
  if (!textarea) return;

  // 重置为默认行数
  textarea.rows = props.minRows;

  const scrollHeight = textarea.scrollHeight;
  const clientHeight = 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;

  // 判断是否需要显示滚动条
  showOverflowY.value = scrollHeight > clientHeight;
};

watchEffect(() => {
  if (_ref.value) {
    adjustHeight();
  }
});

watch(modelValue, (newVal) => {
  content.value = newVal;
  adjustHeight();
});
// 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 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);
};

__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, dynamicRows, content, adjustHeight, showLimit, valueLength, isColorDanger, handlerClear, handlerCompositionEnd, handlerInput, ref, computed, shallowRef, watch, watchEffect, get useNamespace() { return useNamespace }, get useStyle() { return useStyle }, get useEvent() { return useEvent }, get useExpose() { return useExpose } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}

});

const _hoisted_1 = ["rows", "placeholder", "value", "disabled", "maxlength"];

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", {
    style: normalizeStyle([$setup.styleWidth]),
    class: normalizeClass([$setup.ns.b()]),
    onMouseenter: _cache[7] || (_cache[7] = (...args) => ($setup.mouseenterEvent && $setup.mouseenterEvent(...args))),
    onMouseleave: _cache[8] || (_cache[8] = (...args) => ($setup.mouselevelEvent && $setup.mouselevelEvent(...args)))
  }, [
    createElementVNode("textarea", {
      ref: "_ref",
      rows: $setup.dynamicRows,
      onInput: $setup.handlerInput,
      onFocus: _cache[0] || (_cache[0] = (...args) => ($setup.focusEvent && $setup.focusEvent(...args))),
      onBlur: _cache[1] || (_cache[1] = (...args) => ($setup.blurEvent && $setup.blurEvent(...args))),
      onCompositionstart: _cache[2] || (_cache[2] = (...args) => ($setup.compositionStartEvent && $setup.compositionStartEvent(...args))),
      onCompositionupdate: _cache[3] || (_cache[3] = (...args) => ($setup.compositionUpdateEvent && $setup.compositionUpdateEvent(...args))),
      onCompositionend: $setup.handlerCompositionEnd,
      onChange: _cache[4] || (_cache[4] = (...args) => ($setup.changeEvent && $setup.changeEvent(...args))),
      onKeydown: _cache[5] || (_cache[5] = (...args) => ($setup.keydownEvent && $setup.keydownEvent(...args))),
      onKeyup: _cache[6] || (_cache[6] = (...args) => ($setup.keyupEvent && $setup.keyupEvent(...args))),
      placeholder: $props.placeholder,
      value: $setup.modelValue,
      disabled: $props.disabled,
      maxlength: $props.maxlength,
      class: normalizeClass([
        $setup.ns.e('inner'),
        $setup.ns.is('color-danger', $setup.isColorDanger),
        $setup.ns.is('focus', $setup.isFocus),
        $setup.ns.is('disabled', $props.disabled),
      ])
    }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1),
    ($setup.showLimit)
      ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: normalizeClass([$setup.ns.e('count')])
        }, toDisplayString($setup.valueLength) + " / " + toDisplayString($props.maxlength), 3 /* TEXT, CLASS */))
      : createCommentVNode("v-if", true)
  ], 38 /* CLASS, STYLE, NEED_HYDRATION */))
}
var Textarea = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\textarea\\src\\index.vue"]]);

export { Textarea as default };
//# sourceMappingURL=index.vue.mjs.map