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

Farris Vue, a Farris Design based Vue3 component library.

import { ref as y, computed as i, watch as P, onMounted as A, createVNode as m, withDirectives as k, vModelText as R, resolveDirective as O, defineComponent as F, Fragment as G } from "vue";
import { useTextBox as H, useClear as D, withInstall as z } from "../common/index.esm.js";
import { useNumber as K, useFormat as j, useSpinner as W, useTextBox as _, getSpinnerRender as $, getNumberTextBoxRender as Z } from "../number-spinner/index.esm.js";
import { LocaleService as U } from "../locale/index.esm.js";
const Y = {
  id: { Type: String, default: "" },
  /** 是否自动完成 */
  autocomplete: { Type: String, default: "off" },
  /** 自定义CLASS */
  customClass: { Type: String, default: "" },
  /** 禁用 */
  disabled: { Type: Boolean, default: !1 },
  /** 允许编辑 */
  editable: { Type: Boolean, default: !0 },
  /** 启用清除按钮 */
  enableClear: { Type: Boolean, default: !0 },
  /** 启用提示文本 */
  enableTitle: { Type: Boolean, default: !0 },
  /** 启用密码 */
  enableViewPassword: { Type: Boolean, default: !0 },
  /** 始终显示占位符文本 */
  forcePlaceholder: { Type: Boolean, default: !1 },
  /** 扩展按钮 */
  groupText: { Type: String, default: "" },
  /** 密码模式 */
  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: "" },
  /** 隐藏边线 */
  showBorder: { Type: Boolean, default: !0 },
  /** 步长 */
  step: { Type: Number, default: 1 },
  /** 启用提示信息 */
  placeholder: { Type: String, default: "" },
  precision: { Type: Number, default: 0 },
  /** 只读 */
  readonly: { Type: Boolean, default: !1 },
  /** 当组件禁用或只读时显示后边的按钮 */
  showButtonWhenDisabled: { Type: Boolean, default: !1 },
  /** tab索引 */
  tabIndex: { Type: Number, default: 0 },
  /** 文本在输入框中的对齐方式 */
  textAlign: { Type: String, default: "left" },
  /** 是否启用前置扩展信息；在输入框前面 显示 ① 图标鼠标滑过后显示 */
  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 }
};
function q(e, t) {
  const a = y(e.groupText), l = i(() => e.showButtonWhenDisabled && (e.readonly || e.disabled)), n = i(() => e.type === "password" || e.enableClear || !!e.groupText || l.value);
  return { appendedButtonClass: i(() => ({
    "input-group-append": !0,
    "append-force-show": l.value
  })), appendedContent: a, shouldShowAppendedButton: n };
}
function J(e, t, a, l) {
  const { appendedContent: n } = l, c = y(e.enableViewPassword), d = i(() => e.type === "password"), h = '<span class="f-icon f-icon-eye" style="color: rgb(56, 143, 255);"></span>', f = '<span class="f-icon f-icon-eye"></span>', s = y(!1);
  P(() => [e.readonly, e.disabled], ([g, p]) => {
    d.value && (a.value = g || p ? "password" : a.value, n.value = g || p ? f : n.value);
  });
  function x() {
    return s.value = !s.value, a.value = s.value ? "text" : "password", n.value = s.value ? h : f, !1;
  }
  function r() {
    a.value = d.value ? "password" : "text", n.value = d.value ? c.value ? f : "" : n.value;
  }
  return r(), { isPassword: d, onClickAppendedButton: x };
}
function Q(e, t) {
  const a = K(e, t), l = j(e, t, a), n = W(e, t, l, a), c = _(e, t, l, a, n), d = $(e, t, n), {
    displayValue: h,
    modelValue: f,
    getRealValue: s
  } = a, x = Z(e, t, c), {
    format: r
  } = l, {
    isFocus: g
  } = c, p = i(() => !e.disabled && !e.readonly);
  return A(() => {
    const v = s(e.modelValue);
    h.value = r(v);
  }), P(() => [e.value], ([v]) => {
    const B = s(v);
    f.value = B, h.value = r(B);
  }), P(() => [e.modelValue], ([v]) => {
    v !== f.value && (f.value = v, !g.value && (h.value = r(s(v))));
  }), P(() => [e.precision, e.useThousands, e.prefix, e.suffix, e.showZero], () => {
    h.value = r(f.value);
  }), () => m("div", {
    class: "input-group  flex-row f-cmp-number-spinner"
  }, [x(), p.value && d()]);
}
function X(e) {
  return e ? U.getRealPropertyValue(e, "请输入", "input-group.placeholder") : "";
}
function ee(e, t, a, l) {
  const n = y(), {
    inputGroupClass: c,
    onBlur: d,
    onFocus: h
  } = l, {
    clearButtonClass: f,
    clearButtonStyle: s
  } = a, x = i(() => e.maxLength ? e.maxLength : e.modelValue ? e.modelValue.length : 0), r = (u) => {
    var o, E;
    u.stopPropagation(), t.emit("update:modelValue", (o = u.target) == null ? void 0 : o.value), t.emit("valueChange", (E = u.target) == null ? void 0 : E.value);
  }, g = i(() => ({
    "form-control": !0,
    "h-100": e.autoHeight
  })), p = i(() => e.enableClear && !e.readonly && !e.disabled), v = X(e.placeholder), B = i(() => e.disabled || e.readonly ? "" : v), b = i(() => ({
    ...s.value,
    position: "absolute",
    right: "5px",
    top: "50%",
    transform: "translateY(-50%)",
    "background-color": "rgb(199, 207, 221)",
    "border-radius": "100%",
    width: "16px",
    height: "16px"
  })), C = i(() => {
    const u = {
      resize: "none",
      "padding-right": "15px"
    };
    return e.rows > 2 ? {
      height: "auto",
      ...u
    } : u;
  }), T = (u) => {
    u.stopPropagation(), n.value.value = "", t.emit("update:modelValue", ""), t.emit("valueChange", "");
  };
  function w() {
    return k(m("textarea", {
      class: g.value,
      id: e.id,
      "onUpdate:modelValue": (u) => e.modelValue = u,
      ref: n,
      minlength: e.minLength,
      maxlength: e.maxLength ? e.maxLength : null,
      tabindex: e.tabIndex,
      disabled: e.disabled,
      readonly: e.readonly,
      autocomplete: e.autocomplete,
      placeholder: B.value,
      autofocus: e.autofocus,
      rows: e.rows,
      onInput: r,
      onFocus: h,
      onBlur: d,
      style: C.value
    }, null), [[R, e.modelValue]]);
  }
  function S() {
    return e.showCount && m("span", {
      style: "position: absolute;bottom: 0;right: 5px;z-index:999;font-size:12px"
    }, [`${e.modelValue ? e.modelValue.length : 0}/${x.value}`]);
  }
  function I() {
    return p.value && m("span", {
      id: "clearIcon",
      class: f.value,
      style: b.value,
      onClick: (u) => T(u)
    }, [m("i", {
      class: "f-icon modal_close",
      style: "font-size:8px;color:#fff"
    }, null)]);
  }
  return {
    renderTextarea: w,
    renderCount: S,
    renderClear: I
  };
}
function te(e, t, a, l) {
  const n = y(), c = y(e.autocomplete), d = y(e.enableTitle), {
    isPassword: h
  } = a, f = y(e.minLength), s = y(e.maxLength), x = y(e.tabIndex), {
    disabled: r,
    displayText: g,
    inputType: p,
    onBlur: v,
    onFocus: B,
    onInput: b,
    onClick: C,
    onKeydown: T,
    onKeyup: w,
    onMousedown: S,
    onMouseup: I,
    onTextBoxValueChange: u,
    readonly: o,
    placeholder: E,
    textBoxClass: V,
    textBoxTitle: N
  } = l;
  return A(() => {
    var M, L;
    e.selectOnCreated && ((M = n.value) == null || M.select()), e.focusOnCreated && ((L = n.value) == null || L.focus({
      preventScroll: !0
    }));
  }), () => m("input", {
    id: e.id + "_textbox",
    ref: n,
    name: "input-group-value",
    autocomplete: c.value,
    class: V.value,
    disabled: r == null ? void 0 : r.value,
    maxlength: s.value,
    minlength: f.value,
    placeholder: E.value,
    readonly: o == null ? void 0 : o.value,
    tabindex: x.value,
    title: d.value && !h.value ? N.value : "",
    type: p.value,
    value: g == null ? void 0 : g.value,
    onBlur: v,
    onClick: C,
    onChange: u,
    onFocus: B,
    onInput: b,
    onKeydown: T,
    onKeyup: w,
    onMousedown: S,
    onMouseup: I
  }, null);
}
function ne(e, t) {
  const a = y(e.extendInfo), l = i(() => e.useExtendInfo && !!e.extendInfo), n = i(() => ({
    content: a.value
  }));
  P(() => e.extendInfo, (d) => {
    a.value = d;
  });
  function c() {
    t.emit("updateExtendInfo");
  }
  return () => l.value && k(m("span", {
    class: "input-group-before-tips",
    onMouseenter: c
  }, [m("i", {
    class: "f-icon f-icon-info-circle"
  }, null), m("b", {
    class: "tips-arrow"
  }, null)]), [[O("tooltip"), n.value]]);
}
function oe(e, t, a, l, n) {
  const {
    appendedButtonClass: c,
    appendedContent: d
  } = a, h = i(() => e.showButtonWhenDisabled && (!e.editable || !e.readonly) && !e.disabled), f = i(() => d.value && !t.slots.groupTextTemplate), s = i(() => !!t.slots.groupTextTemplate), {
    clearButtonClass: x,
    clearButtonStyle: r,
    onClearValue: g,
    shouldShowClearButton: p
  } = l;
  function v() {
    return m("span", {
      id: "clearIcon",
      class: x.value,
      style: r.value,
      onClick: (o) => g(o)
    }, [m("i", {
      class: "f-icon modal_close"
    }, null)]);
  }
  function B(o) {
    t.emit("iconMouseEnter", o);
  }
  function b(o) {
    t.emit("iconMouseLeave", o);
  }
  function C(o) {
    h.value && t.emit("clickHandle", {
      originalEvent: o
    }), o.stopPropagation();
  }
  const T = e.type === "password" ? n.onClickAppendedButton : C;
  function w() {
    return m("span", {
      class: "input-group-text",
      onMouseenter: (o) => B(o),
      onMouseleave: (o) => b(o),
      innerHTML: d.value,
      onClick: (o) => T(o)
    }, null);
  }
  function S() {
    return t.slots.groupTextTemplate && t.slots.groupTextTemplate();
  }
  function I() {
    return f.value ? w : s.value ? S : "";
  }
  const u = I();
  return () => m("div", {
    class: c.value
  }, [p.value && v(), u && u()]);
}
const ae = /* @__PURE__ */ F({
  name: "FInputGroup",
  props: Y,
  emits: ["clear", "change", "blur", "click", "clickHandle", "focus", "input", "keydown", "keyup", "iconMouseEnter", "iconMouseLeave", "update:modelValue", "update:value", "updateExtendInfo", "valueChange", "mousedownEvent", "mouseupEvent"],
  setup(e, t) {
    const a = y(), l = y(e.modelValue), n = y(e.modelValue), c = H(e, t, l, n, a), {
      inputGroupClass: d,
      inputType: h,
      inputGroupStyle: f
    } = c, s = q(e), {
      shouldShowAppendedButton: x
    } = s, r = D(e, t, c), {
      onMouseEnter: g,
      onMouseLeave: p
    } = r, v = J(e, t, h, s), B = Q(e, t), {
      renderTextarea: b,
      renderCount: C,
      renderClear: T
    } = ee(e, t, r, c), w = te(e, t, v, c), S = oe(e, t, s, r, v), I = ne(e, t), u = i(() => e.type === "number"), o = i(() => e.type === "textarea");
    P(() => [e.value], ([V]) => {
      l.value = V, n.value = V;
    }), P(() => [e.modelValue], ([V]) => {
      l.value = V, n.value = V;
    }), A(() => {
      e.value && (l.value = e.value, n.value = e.value);
    });
    const E = () => m("div", {
      ref: a,
      id: e.id,
      class: d.value,
      style: f.value,
      onMouseenter: g,
      onMouseleave: p
    }, [u.value ? B() : o.value ? b() : m(G, null, [I(), w()]), !o.value && !u.value && x.value && S(), o.value && T(), o.value && C()]);
    return () => E();
  }
}), re = z(ae);
export {
  ae as FInputGroup,
  re as default,
  Y as inputGroupProps
};