song-ui-u/lib/components/textarea/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');
var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.cjs');

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

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

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

const dynamicRows = vue.ref(props.rows);
const content = vue.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;
};

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

vue.watch(modelValue, (newVal) => {
  content.value = newVal;
  adjustHeight();
});
// 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 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: vue.ref, computed: vue.computed, shallowRef: vue.shallowRef, watch: vue.watch, watchEffect: vue.watchEffect, get useNamespace() { return index$3.useNamespace }, get useStyle() { return index$2.useStyle }, get useEvent() { return index.useEvent }, get useExpose() { return index$1.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 (vue.openBlock(), vue.createElementBlock("div", {
    style: vue.normalizeStyle([$setup.styleWidth]),
    class: vue.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)))
  }, [
    vue.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: vue.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)
      ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          class: vue.normalizeClass([$setup.ns.e('count')])
        }, vue.toDisplayString($setup.valueLength) + " / " + vue.toDisplayString($props.maxlength), 3 /* TEXT, CLASS */))
      : vue.createCommentVNode("v-if", true)
  ], 38 /* CLASS, STYLE, NEED_HYDRATION */))
}
var Textarea = /*#__PURE__*/_pluginVue_exportHelper(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\textarea\\src\\index.vue"]]);

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