@farris/ui-vue/components/input-group/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as g, computed as i, watch as w, onMounted as L, createVNode as d, withDirectives as N, vModelText as F, resolveDirective as O, Fragment as R, mergeProps as D, defineComponent as G } from "vue";
import { useTextBox as H, useClear as z, withInstall as K } from "../common/index.esm.js";
import { useNumber as j, useFormat as W, useSpinner as _, useTextBox as $, getSpinnerRender as Z, getNumberTextBoxRender as U } from "../number-spinner/index.esm.js";
import { LocaleService as Y } from "../locale/index.esm.js";
import { useInputExpand as q } from "../common/index.esm.js/text-box/use-input-expand";
const J = {
  id: { Type: String, default: "" },
  /**
   * 针对 txt 类型的输入框，是否启用自动完成.off 不启用自动完成，on 启用自动完成,具体可以参考原生input autocomplete属性赋值
   * @default off
   */
  autocomplete: { Type: String, default: "off" },
  /**
   * 自定义样式
   */
  customClass: { Type: String, default: "" },
  /**
   * 禁用
   */
  disabled: { Type: Boolean, default: !1 },
  /**
   * 是否允许编辑，true 是允许编辑
   * @default true
   */
  editable: { Type: Boolean, default: !0 },
  /**
   * 是否启用清空按钮，true 是当有文本时显示清空按钮
   * @default true
   */
  enableClear: { Type: Boolean, default: !0 },
  /**
   * 鼠标移动到组件内时显示组件内的文本，true 是启用提示
   * @default true
   */
  enableTitle: { Type: Boolean, default: !0 },
  /**
   * 是否启用查看密码明文功能，true 是启用
   * @default true
   */
  enableViewPassword: { Type: Boolean, default: !0 },
  /**
   * 是否始终显示占位符文本。true 始终显示占位符
   * @default false
   */
  forcePlaceholder: { Type: Boolean, default: !1 },
  /**
   * 扩展按钮的文本
   */
  groupText: { Type: String, default: "" },
  /**
   * 密码模式
   */
  showType: { Type: String, default: "text" },
  /**
   * 输入框类型，可选：text 文本输入框、number 数字输入框、password 密码输入框、textarea 多行文本输入框
   * @default text
   */
  type: { Type: String, default: "text" },
  /**
   * 最大值
   */
  max: { type: [Number, String] },
  /**
   * 最小值
   */
  min: { type: [Number, String] },
  /**
   * 设置文本最大长度
   */
  maxLength: { Type: Number || void 0, default: void 0 },
  /**
   * 最小长度
   */
  minLength: { Type: Number || void 0, default: void 0 },
  /**
   * 组件绑定值
   */
  modelValue: { Type: String || Boolean, default: "" },
  /**
   * 是否显示边线，默认 true显示边线
   * @default true
   */
  showBorder: { Type: Boolean, default: !0 },
  /**
   * 步长
   */
  step: { Type: Number, default: 1 },
  /**
   * 启用提示信息文本
   */
  placeholder: { Type: String, default: "" },
  precision: { Type: Number, default: 0 },
  /**
   * 只读
   * @default false
   */
  readonly: { Type: Boolean, default: !1 },
  /**
   * 当组件禁用或只读时显示后边的按钮
   * @default false
   */
  showButtonWhenDisabled: { Type: Boolean, default: !1 },
  /**
   * tab键索引,默认从0开始，-1表示不可通过Tab键获得焦点
   * @default 0
   */
  tabIndex: { Type: Number, default: 0 },
  /**
   * 文本在输入框中的对齐方式，可选: left 左对齐、center 居中对齐、right 右对齐
   * @default left
   */
  textAlign: { Type: String, default: "left" },
  /**
   * 是否启用前置扩展信息；设置为true后，鼠标悬停时显示 `extendInfo`配置的文本
   * @default false
   */
  useExtendInfo: { Type: Boolean, default: !1 },
  /**
   * 前置扩展信息文本
   */
  extendInfo: { Type: String, default: "" },
  /**
   * 输入值
   */
  value: { Type: String, default: "" },
  /**
   * 是否撑开高度
   */
  autoHeight: { type: Boolean, default: !1 },
  /**
   * 自动聚焦
   */
  autofocus: { type: Boolean, default: !1 },
  /**
   * 文本区域可见的行数
   */
  rows: { type: Number, default: 2 },
  /**
   * 展示输入文本数量
   */
  showCount: { type: Boolean, default: !1 },
  showZero: { type: Boolean, default: !1 },
  /**
   * 作为内嵌编辑器被创建后默认获得焦点
   */
  focusOnCreated: { type: Boolean, default: !1 },
  /**
   * 作为内嵌编辑器被创建后默认选中文本
   */
  selectOnCreated: { type: Boolean, default: !1 },
  /**
   * modelValue 更新时机， 默认 blur； 可选值：blur | input - blur: 离开焦点时更新 - change: 输入时更新
   */
  updateOn: { type: String, default: "blur" },
  formatValidation: { type: Object, default: {} },
  /**
   * 是否启用快捷键
   */
  keyboard: { type: Boolean, default: !0 },
  /**
   * 是否可扩展
   */
  expandable: { type: Boolean, default: !1 },
  /**
   * 扩展模式 text | button
   */
  expandMode: { type: String, default: "text" },
  /**
   * 扩展文本内容
   */
  expandContent: { type: String, default: "" },
  /**
   * 扩展按钮是否禁用
   */
  expandDisabled: { type: Boolean, default: !1 }
};
function Q(e, n) {
  const o = g(e.groupText), l = i(() => e.showButtonWhenDisabled && (e.readonly || e.disabled)), a = i(() => e.type === "password" || e.showType === "password" || e.enableClear || !!e.groupText || l.value);
  return { appendedButtonClass: i(() => ({
    "input-group-append": !0,
    "append-force-show": l.value
  })), appendedContent: o, shouldShowAppendedButton: a };
}
function X(e, n, o, l) {
  const { appendedContent: a } = l, s = g(e.enableViewPassword), u = i(() => e.type === "password" || e.showType === "password"), v = '<span class="f-icon f-icon-eye" style="color: rgb(56, 143, 255);"></span>', m = '<span class="f-icon f-icon-eye"></span>', c = g(!1);
  w(() => [e.readonly, e.disabled], ([y, b]) => {
    u.value && (o.value = y || b ? "password" : o.value, a.value = e.readonly || e.disabled ? "" : s.value ? m : "");
  });
  function x() {
    return c.value = !c.value, o.value = c.value ? "text" : "password", a.value = c.value ? v : m, !1;
  }
  function h() {
    o.value = u.value ? "password" : o.value, u.value && (a.value = e.readonly || e.disabled ? "" : s.value ? m : "");
  }
  return h(), { isPassword: u, onClickAppendedButton: x };
}
function ee(e, n) {
  const o = j(e, n), l = W(e, n, o), a = _(e, n, l, o), s = $(e, n, l, o, a), u = Z(e, n, a), {
    displayValue: v,
    modelValue: m,
    getRealValue: c
  } = o, x = U(e, n, s), {
    format: h
  } = l, {
    isFocus: y
  } = s, b = i(() => !e.disabled && !e.readonly);
  return L(() => {
    const f = c(e.modelValue);
    v.value = h(f);
  }), w(() => [e.value], ([f]) => {
    const C = c(f);
    m.value = C, v.value = h(C);
  }), w(() => [e.modelValue], ([f]) => {
    f !== m.value && (m.value = f, !y.value && (v.value = h(c(f))));
  }), w(() => [e.precision, e.useThousands, e.prefix, e.suffix, e.showZero], () => {
    v.value = h(m.value);
  }), () => d("div", {
    class: "input-group  flex-row f-cmp-number-spinner",
    style: "border:none;"
  }, [x(), b.value && u()]);
}
function ne(e) {
  return e ? Y.getRealPropertyValue(e, "请输入", "input-group.placeholder") : "";
}
function te(e, n, o, l) {
  const a = g(), {
    inputGroupClass: s,
    onBlur: u,
    onFocus: v
  } = l, {
    clearButtonClass: m,
    clearButtonStyle: c
  } = o, x = i(() => e.maxLength ? e.maxLength : e.modelValue ? e.modelValue.length : 0), h = (r) => {
    var T, t;
    r.stopPropagation(), n.emit("update:modelValue", (T = r.target) == null ? void 0 : T.value), n.emit("valueChange", (t = r.target) == null ? void 0 : t.value);
  }, y = i(() => ({
    "form-control": !0,
    "h-100": e.autoHeight
  })), b = i(() => e.enableClear && !e.readonly && !e.disabled), f = ne(e.placeholder), C = i(() => e.disabled || e.readonly ? "" : f), B = i(() => ({
    ...c.value,
    position: "absolute",
    right: "5px",
    top: "50%",
    transform: "translateY(-50%)",
    "background-color": "rgb(199, 207, 221)",
    "border-radius": "100%",
    width: "16px",
    height: "16px"
  })), S = i(() => {
    const r = {
      resize: "none",
      "padding-right": "15px"
    };
    return e.rows > 2 ? {
      height: "auto",
      ...r
    } : r;
  }), I = (r) => {
    r.stopPropagation(), a.value.value = "", n.emit("update:modelValue", ""), n.emit("valueChange", "");
  };
  function V() {
    return N(d("textarea", {
      class: y.value,
      id: e.id,
      "onUpdate:modelValue": (r) => e.modelValue = r,
      ref: a,
      minlength: e.minLength,
      maxlength: e.maxLength ? e.maxLength : null,
      tabindex: e.tabIndex,
      disabled: e.disabled,
      readonly: e.readonly,
      autocomplete: e.autocomplete,
      placeholder: C.value,
      autofocus: e.autofocus,
      rows: e.rows,
      onInput: h,
      onFocus: v,
      onBlur: u,
      style: S.value
    }, null), [[F, e.modelValue]]);
  }
  function P() {
    return e.showCount && d("span", {
      style: "position: absolute;bottom: 0;right: 5px;z-index:999;font-size:12px"
    }, [`${e.modelValue ? e.modelValue.length : 0}/${x.value}`]);
  }
  function E() {
    return b.value && d("span", {
      id: "clearIcon",
      class: m.value,
      style: B.value,
      onClick: (r) => I(r)
    }, [d("i", {
      class: "f-icon modal_close",
      style: "font-size:8px;color:#fff"
    }, null)]);
  }
  return {
    renderTextarea: V,
    renderCount: P,
    renderClear: E
  };
}
function ae(e, n, o, l) {
  const a = g(), s = g(e.autocomplete), u = g(e.enableTitle), {
    isPassword: v
  } = o, m = g(e.minLength), c = g(e.maxLength), x = g(e.tabIndex), {
    disabled: h,
    displayText: y,
    inputType: b,
    onBlur: f,
    onFocus: C,
    onInput: B,
    onClick: S,
    onKeydown: I,
    onKeyup: V,
    onMousedown: P,
    onMouseup: E,
    onTextBoxValueChange: r,
    readonly: T,
    placeholder: t,
    textBoxClass: M,
    textBoxTitle: p
  } = l;
  return L(() => {
    var k, A;
    e.selectOnCreated && ((k = a.value) == null || k.select()), e.focusOnCreated && ((A = a.value) == null || A.focus({
      preventScroll: !0
    }));
  }), () => d("input", {
    id: e.id + "_textbox",
    ref: a,
    name: "input-group-value",
    autocomplete: s.value,
    class: M.value,
    disabled: h == null ? void 0 : h.value,
    maxlength: c.value,
    minlength: m.value,
    placeholder: t.value,
    readonly: T == null ? void 0 : T.value,
    tabindex: x.value,
    title: u.value && !v.value ? p.value : "",
    type: b.value,
    value: y == null ? void 0 : y.value,
    onBlur: f,
    onClick: S,
    onChange: r,
    onFocus: C,
    onInput: B,
    onKeydown: I,
    onKeyup: V,
    onMousedown: P,
    onMouseup: E
  }, null);
}
function oe(e, n) {
  const o = g(e.extendInfo), l = i(() => e.useExtendInfo && !!e.extendInfo), a = i(() => ({
    content: o.value
  }));
  w(() => e.extendInfo, (u) => {
    o.value = u;
  });
  function s() {
    n.emit("updateExtendInfo");
  }
  return () => l.value && N(d("span", {
    class: "input-group-before-tips",
    onMouseenter: s
  }, [d("i", {
    class: "f-icon f-icon-info-circle"
  }, null), d("b", {
    class: "tips-arrow"
  }, null)]), [[O("tooltip"), a.value]]);
}
function le(e, n, o, l, a) {
  const {
    appendedButtonClass: s,
    appendedContent: u
  } = o, v = i(() => !e.readonly && !e.disabled), m = i(() => u.value && !n.slots.groupTextTemplate), c = i(() => !!n.slots.groupTextTemplate), {
    clearButtonClass: x,
    clearButtonStyle: h,
    onClearValue: y,
    shouldShowClearButton: b
  } = l, f = g(0);
  w(u, (t) => {
    f.value++;
  });
  function C() {
    return d("span", {
      id: "clearIcon",
      class: x.value,
      style: h.value,
      onClick: (t) => y(t)
    }, [d("i", {
      class: "f-icon modal_close"
    }, null)]);
  }
  function B(t) {
    n.emit("iconMouseEnter", t);
  }
  function S(t) {
    n.emit("iconMouseLeave", t);
  }
  function I(t) {
    v.value && n.emit("clickHandle", {
      originalEvent: t
    }), t.stopPropagation();
  }
  const V = e.type === "password" || e.showType === "password" ? a.onClickAppendedButton : I;
  function P() {
    const t = u.value;
    if (!t || !(e.showButtonWhenDisabled || !e.disabled && !e.readonly))
      return null;
    const p = {
      class: "input-group-text",
      onMouseenter: B,
      onMouseleave: S,
      onClick: V
    };
    if (typeof t == "string")
      return d("span", D(p, {
        innerHTML: t
      }), null);
    if (typeof t == "function") {
      const k = t();
      return d("span", p, [typeof k == "string" ? d("span", {
        innerHTML: k
      }, null) : k]);
    } else
      return d("span", p, [t]);
  }
  function E() {
    return n.slots.groupTextTemplate && n.slots.groupTextTemplate();
  }
  function r() {
    return m.value ? P() : c.value ? E() : "";
  }
  w(() => e.expandDisabled, (t, M) => {
    f.value++;
  });
  const {
    renderExpandContent: T
  } = q({
    ...e,
    skipReadonlyCheck: !0
  }, n);
  return () => d(R, null, [d("div", {
    class: s.value,
    key: "append-button-" + f.value
  }, [b.value && C(), r()]), T()]);
}
const ue = /* @__PURE__ */ G({
  name: "FInputGroup",
  props: J,
  emits: ["clear", "change", "blur", "click", "clickHandle", "focus", "input", "keydown", "keyup", "iconMouseEnter", "iconMouseLeave", "update:modelValue", "update:value", "updateExtendInfo", "valueChange", "mousedownEvent", "mouseupEvent", "expandClick"],
  setup(e, n) {
    const o = g(), l = g(e.modelValue), a = g(e.modelValue), s = H(e, n, l, a, o), {
      inputGroupClass: u,
      inputType: v,
      inputGroupStyle: m,
      changeTextBoxValue: c
    } = s, x = Q(e), {
      shouldShowAppendedButton: h
    } = x, y = z(e, n, s), {
      onMouseEnter: b,
      onMouseLeave: f
    } = y, C = X(e, n, v, x), B = ee(e, n), {
      renderTextarea: S,
      renderCount: I,
      renderClear: V
    } = te(e, n, y, s), P = ae(e, n, C, s), E = le(e, n, x, y, C), r = oe(e, n), T = i(() => v.value === "number"), t = i(() => v.value === "textarea");
    w(() => [e.value], ([p]) => {
      l.value = p, a.value = p;
    }), w(() => [e.modelValue], ([p]) => {
      l.value = p, a.value = p;
    }), L(() => {
      e.value && (l.value = e.value, a.value = e.value);
    }), n.expose({
      clear: () => {
        c("", !1), a.value = "";
      },
      setText: (p) => {
        c(p, !1), a.value = p;
      }
    });
    const M = () => d("div", {
      ref: o,
      id: e.id,
      class: u.value,
      style: m.value,
      onMouseenter: b,
      onMouseleave: f
    }, [T.value ? B() : t.value ? S() : d(R, null, [r(), P()]), !t.value && !T.value && h.value && E(), t.value && V(), t.value && I()]);
    return () => M();
  }
}), fe = K(ue);
export {
  ue as FInputGroup,
  fe as default,
  J as inputGroupProps
};