@farris/ui-vue/components/textarea/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { useCommonUtils as R, useTextBox as A, useClear as H, withInstall as W } from "../common/index.esm.js";
import { defineComponent as j, ref as i, computed as r, watch as G, onMounted as _, createVNode as s, withDirectives as q, vModelText as J, nextTick as Q } from "vue";
const X = {
  /** 是否撑开高度 */
  autoHeight: { type: Boolean, default: !1 },
  /** 自动聚焦 */
  autofocus: { type: Boolean, default: !1 },
  /** 自动完成 */
  autocomplete: { type: Boolean, default: !1 },
  /** when length equals 0 and allowUnlimtedWhenEmpty equals true, 
  character input is not limited */
  allowUnlimtedWhenEmpty: { type: Boolean, default: !1 },
  /** 禁用 */
  disabled: { type: Boolean, default: !1 },
  /** 启用清除按钮 */
  enableClear: { type: Boolean, default: !1 },
  /** 组件标识 */
  id: { type: String, default: "" },
  /** 最小字符长度 */
  minLength: { type: Number, default: 0 },
  /** 最大字符长度 */
  maxLength: { type: Number },
  /** 组件值 */
  modelValue: { type: String, default: "" },
  /** 背景文字 */
  placeholder: { type: String, default: "" },
  /** 只读 */
  readonly: { type: Boolean, default: !1 },
  /** 可编辑，用在公共方法内平衡样式 */
  editable: { type: Boolean, default: !0 },
  /** 文本区域可见的行数 */
  rows: { type: Number },
  /** 是否可以拖拽调整大小  */
  resizable: { type: Boolean, default: !1 },
  /** 展示输入文本数量 */
  showCount: { type: Boolean, default: !1 },
  /** 展示边线 */
  showBorder: { Type: Boolean, default: !0 },
  /** 键盘按键索引 */
  tabIndex: { type: Number, default: -1 },
  /**
  * 作为内嵌编辑器被创建后默认获得焦点
  */
  focusOnCreated: { type: Boolean, default: !1 },
  /**
   * 作为内嵌编辑器被创建后默认选中文本
   */
  selectOnCreated: { type: Boolean, default: !1 },
  /**
   * modelValue 更新时机， 默认 blur； 可选值：blur | input
   * - blur: 离开焦点时更新
   * - change: 输入时更新
   */
  updateOn: { type: String, default: "blur" },
  lineBreak: { type: Boolean, default: "enter" }
}, Y = /* @__PURE__ */ j({
  name: "FTextarea",
  props: X,
  emits: ["update:modelValue", "valueChange", "change", "mousedownEvent", "mouseupEvent"],
  setup(e, a) {
    var v;
    const {
      isUndefined: h
    } = R(), f = i(), l = i(null), g = r(() => e.modelValue), c = r(() => {
      if (!(e.allowUnlimtedWhenEmpty && e.maxLength === 0 || h(e.maxLength)))
        return typeof e.maxLength == "number" && !isNaN(e.maxLength) ? e.maxLength : e.modelValue ? e.modelValue.length : 0;
    }), n = i(((v = e.modelValue) == null ? void 0 : v.slice(0, c.value)) || ""), m = A(e, a, n, g, f), {
      inputGroupClass: B,
      onBlur: C,
      onFocus: x,
      onMousedown: b,
      onMouseup: w,
      onTextBoxValueChange: V,
      hasFocused: E
    } = m, S = H(e, a, m), {
      onMouseEnter: T,
      onMouseLeave: L,
      clearButtonClass: M,
      shouldShowClearButton: p,
      clearButtonStyle: I
    } = S, N = (t) => {
      var o, d, u;
      t.stopPropagation(), a.emit("update:modelValue", (o = t.target) == null ? void 0 : o.value), a.emit("valueChange", (d = t.target) == null ? void 0 : d.value), a.emit("change", (u = t.target) == null ? void 0 : u.value);
    }, U = (t) => {
      t.stopPropagation(), l.value.value = "", a.emit("update:modelValue", ""), a.emit("valueChange", ""), a.emit("change", "");
    }, k = (t) => {
      if (e.readonly || !E)
        return;
      const {
        altKey: o,
        key: d
      } = t;
      if (d === "Enter" && !o && e.lineBreak === "alt enter") {
        t.preventDefault();
        return;
      }
      if (o && d === "Enter" && e.lineBreak === "alt enter") {
        t.stopPropagation(), t.preventDefault();
        const {
          selectionStart: u,
          selectionEnd: K
        } = l.value;
        n.value = n.value.slice(0, u) + `
` + n.value.slice(K), Q(() => {
          var y;
          l.value.selectionStart = u + 1, l.value.selectionEnd = u + 1, (y = l.value) == null || y.focus();
        }), a.emit("update:modelValue", n.value), a.emit("valueChange", n.value), a.emit("change", n.value);
        return;
      }
    }, O = r(() => ({
      "form-control": !0,
      "h-100": e.autoHeight
    })), F = r(() => {
      const t = {};
      return e.resizable || (t.resize = "none"), e.rows > 2 ? {
        height: "auto",
        ...t
      } : t;
    }), P = r(() => e.disabled || e.readonly ? "" : e.placeholder);
    G(() => e.modelValue, (t, o) => {
      t !== o && (n.value = t);
    });
    const z = () => l.value;
    a.expose({
      elementRef: l,
      getTextareaElement: z
    });
    function D() {
      var t, o;
      e.selectOnCreated && ((t = l.value) == null || t.select()), e.focusOnCreated && ((o = l.value) == null || o.focus({
        preventScroll: !0
      }));
    }
    return _(() => {
      D();
    }), () => s("div", {
      ref: f,
      class: B.value,
      onMouseenter: T,
      onMouseleave: L,
      style: "position:relative"
    }, [q(s("textarea", {
      ref: l,
      class: O.value,
      id: e.id,
      "onUpdate:modelValue": (t) => n.value = t,
      minlength: e.minLength,
      maxlength: c.value,
      tabindex: e.tabIndex,
      disabled: e.disabled,
      readonly: e.readonly,
      autocomplete: e.autocomplete,
      placeholder: P.value,
      autofocus: e.autofocus,
      rows: e.rows,
      onInput: N,
      onFocus: x,
      onChange: V,
      onKeydown: k,
      onBlur: C,
      onMousedown: b,
      onMouseup: w,
      style: F.value
    }, null), [[J, n.value]]), p.value && s("span", {
      id: "clearIcon",
      class: M.value,
      style: I.value,
      onClick: (t) => U(t)
    }, [s("i", {
      class: "f-icon modal_close"
    }, null)])]);
  }
}), ee = W(Y);
export {
  Y as FTextarea,
  ee as default,
  X as textAreaProps
};