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

Farris Vue, a Farris Design based Vue3 component library.

import { useCommonUtils as K, useTextBox as R, useClear as A, getCustomStyle as $, withInstall as j } from "../common/index.esm.js";
import { defineComponent as G, ref as i, computed as c, onMounted as W, createVNode as u, withDirectives as _, vModelText as q, nextTick as J } from "vue";
const Q = {
  /** 是否撑开高度 */
  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: String, default: "enter" },
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" }
}, X = /* @__PURE__ */ G({
  name: "FTextarea",
  props: Q,
  emits: ["clear", "change", "blur", "click", "clickHandle", "focus", "input", "keydown", "keyup", "iconMouseEnter", "iconMouseLeave", "update:modelValue", "update:value", "updateExtendInfo", "valueChange", "mousedownEvent", "mouseupEvent"],
  setup(e, a) {
    const {
      isUndefined: Y
    } = K(), m = i(), l = i(null), g = i(""), n = i(""), v = R(e, a, n, g, m), {
      inputGroupClass: h,
      onBlur: p,
      onFocus: C,
      onMousedown: B,
      onMouseup: w,
      onTextBoxValueChange: b,
      hasFocused: x,
      maxLength: f
    } = v, S = A(e, a, v), {
      onMouseEnter: E,
      onMouseLeave: M,
      clearButtonClass: k,
      shouldShowClearButton: T,
      clearButtonStyle: V
    } = S, I = (t) => {
      var o, r, s, d;
      t.stopPropagation(), a.emit("input", (o = t.target) == null ? void 0 : o.value), e.updateOn === "change" && (a.emit("update:modelValue", (r = t.target) == null ? void 0 : r.value), a.emit("valueChange", (s = t.target) == null ? void 0 : s.value), a.emit("change", (d = t.target) == null ? void 0 : d.value));
    }, O = (t) => {
      t.stopPropagation(), l.value.value = "", a.emit("update:modelValue", ""), a.emit("valueChange", ""), a.emit("change", "");
    }, L = (t) => {
      if (e.readonly || !x)
        return;
      const {
        altKey: o,
        key: r
      } = t;
      if (r === "Enter" && !o && e.lineBreak === "alt enter") {
        t.preventDefault();
        return;
      }
      if (o && r === "Enter" && e.lineBreak === "alt enter") {
        t.stopPropagation(), t.preventDefault();
        const {
          selectionStart: s,
          selectionEnd: d
        } = l.value;
        n.value = n.value.slice(0, s) + `
` + n.value.slice(d), J(() => {
          var y;
          l.value.selectionStart = s + 1, l.value.selectionEnd = s + 1, (y = l.value) == null || y.focus();
        }), e.updateOn === "change" && (a.emit("update:modelValue", n.value), a.emit("valueChange", n.value), a.emit("change", n.value));
        return;
      }
    }, F = c(() => ({
      "form-control": !0,
      "h-100": e.autoHeight
    })), N = c(() => {
      const t = {};
      return e.resizable || (t.resize = "none"), e.rows > 2 ? {
        height: "auto",
        ...t
      } : t;
    }), P = c(() => e.disabled || e.readonly ? "" : e.placeholder), U = () => l.value;
    a.expose({
      elementRef: l,
      getTextareaElement: U
    });
    function z() {
      var t, o;
      e.selectOnCreated && ((t = l.value) == null || t.select()), e.focusOnCreated && ((o = l.value) == null || o.focus({
        preventScroll: !0
      }));
    }
    const D = c(() => $({
      position: "relative"
    }, e.customStyle));
    W(() => {
      z();
    });
    const H = () => {
      const t = n.value.length;
      return f.value && u("div", {
        class: "word-count"
      }, [u("span", {
        class: "word-count-text"
      }, [`${t}/${f.value}`])]);
    };
    return () => u("div", {
      ref: m,
      class: h.value,
      onMouseenter: E,
      onMouseleave: M,
      style: D.value
    }, [u("div", {
      class: "f-textarea-wrap"
    }, [_(u("textarea", {
      ref: l,
      class: F.value,
      id: e.id,
      "onUpdate:modelValue": (t) => n.value = t,
      minlength: e.minLength,
      maxlength: f.value,
      tabindex: e.tabIndex,
      disabled: e.disabled,
      readonly: e.readonly,
      autocomplete: e.autocomplete,
      placeholder: P.value,
      autofocus: e.autofocus,
      rows: e.rows,
      onInput: I,
      onFocus: C,
      onChange: b,
      onKeydown: L,
      onBlur: p,
      onMousedown: B,
      onMouseup: w,
      style: N.value
    }, null), [[q, n.value]]), T.value && u("span", {
      id: "clearIcon",
      class: k.value,
      style: V.value,
      onClick: (t) => O(t)
    }, [u("i", {
      class: "f-icon modal_close"
    }, null)]), e.showCount && H()])]);
  }
}), te = j(X);
export {
  X as FTextarea,
  te as default,
  Q as textAreaProps
};