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

Farris Vue, a Farris Design based Vue3 component library.

import { ref as g, computed as c, watch as T, onMounted as M, createVNode as h, withDirectives as L, vModelText as F, resolveDirective as O, Fragment as N, defineComponent 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: "" },
  /** 密码模式 */
  showType: { Type: String, 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: "" },
  /** 隐藏边线 */
  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 = g(e.groupText), l = c(() => e.showButtonWhenDisabled && (e.readonly || e.disabled)), o = c(() => e.type === "password" || e.showType === "password" || e.enableClear || !!e.groupText || l.value);
  return { appendedButtonClass: c(() => ({
    "input-group-append": !0,
    "append-force-show": l.value
  })), appendedContent: a, shouldShowAppendedButton: o };
}
function J(e, t, a, l) {
  const { appendedContent: o } = l, s = g(e.enableViewPassword), u = c(() => 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>', r = g(!1);
  T(() => [e.readonly, e.disabled], ([y, b]) => {
    u.value && (a.value = y || b ? "password" : a.value, o.value = e.readonly || e.disabled ? "" : s.value ? m : "");
  });
  function x() {
    return r.value = !r.value, a.value = r.value ? "text" : "password", o.value = r.value ? v : m, !1;
  }
  function i() {
    a.value = u.value ? "password" : a.value, u.value && (o.value = e.readonly || e.disabled ? "" : s.value ? m : "");
  }
  return i(), { isPassword: u, onClickAppendedButton: x };
}
function Q(e, t) {
  const a = K(e, t), l = j(e, t, a), o = W(e, t, l, a), s = _(e, t, l, a, o), u = $(e, t, o), {
    displayValue: v,
    modelValue: m,
    getRealValue: r
  } = a, x = Z(e, t, s), {
    format: i
  } = l, {
    isFocus: y
  } = s, b = c(() => !e.disabled && !e.readonly);
  return M(() => {
    const f = r(e.modelValue);
    v.value = i(f);
  }), T(() => [e.value], ([f]) => {
    const p = r(f);
    m.value = p, v.value = i(p);
  }), T(() => [e.modelValue], ([f]) => {
    f !== m.value && (m.value = f, !y.value && (v.value = i(r(f))));
  }), T(() => [e.precision, e.useThousands, e.prefix, e.suffix, e.showZero], () => {
    v.value = i(m.value);
  }), () => h("div", {
    class: "input-group  flex-row f-cmp-number-spinner",
    style: "border:none;"
  }, [x(), b.value && u()]);
}
function X(e) {
  return e ? U.getRealPropertyValue(e, "请输入", "input-group.placeholder") : "";
}
function ee(e, t, a, l) {
  const o = g(), {
    inputGroupClass: s,
    onBlur: u,
    onFocus: v
  } = l, {
    clearButtonClass: m,
    clearButtonStyle: r
  } = a, x = c(() => e.maxLength ? e.maxLength : e.modelValue ? e.modelValue.length : 0), i = (d) => {
    var n, E;
    d.stopPropagation(), t.emit("update:modelValue", (n = d.target) == null ? void 0 : n.value), t.emit("valueChange", (E = d.target) == null ? void 0 : E.value);
  }, y = c(() => ({
    "form-control": !0,
    "h-100": e.autoHeight
  })), b = c(() => e.enableClear && !e.readonly && !e.disabled), f = X(e.placeholder), p = c(() => e.disabled || e.readonly ? "" : f), w = c(() => ({
    ...r.value,
    position: "absolute",
    right: "5px",
    top: "50%",
    transform: "translateY(-50%)",
    "background-color": "rgb(199, 207, 221)",
    "border-radius": "100%",
    width: "16px",
    height: "16px"
  })), B = c(() => {
    const d = {
      resize: "none",
      "padding-right": "15px"
    };
    return e.rows > 2 ? {
      height: "auto",
      ...d
    } : d;
  }), C = (d) => {
    d.stopPropagation(), o.value.value = "", t.emit("update:modelValue", ""), t.emit("valueChange", "");
  };
  function S() {
    return L(h("textarea", {
      class: y.value,
      id: e.id,
      "onUpdate:modelValue": (d) => e.modelValue = d,
      ref: o,
      minlength: e.minLength,
      maxlength: e.maxLength ? e.maxLength : null,
      tabindex: e.tabIndex,
      disabled: e.disabled,
      readonly: e.readonly,
      autocomplete: e.autocomplete,
      placeholder: p.value,
      autofocus: e.autofocus,
      rows: e.rows,
      onInput: i,
      onFocus: v,
      onBlur: u,
      style: B.value
    }, null), [[F, e.modelValue]]);
  }
  function I() {
    return e.showCount && h("span", {
      style: "position: absolute;bottom: 0;right: 5px;z-index:999;font-size:12px"
    }, [`${e.modelValue ? e.modelValue.length : 0}/${x.value}`]);
  }
  function V() {
    return b.value && h("span", {
      id: "clearIcon",
      class: m.value,
      style: w.value,
      onClick: (d) => C(d)
    }, [h("i", {
      class: "f-icon modal_close",
      style: "font-size:8px;color:#fff"
    }, null)]);
  }
  return {
    renderTextarea: S,
    renderCount: I,
    renderClear: V
  };
}
function te(e, t, a, l) {
  const o = g(), s = g(e.autocomplete), u = g(e.enableTitle), {
    isPassword: v
  } = a, m = g(e.minLength), r = g(e.maxLength), x = g(e.tabIndex), {
    disabled: i,
    displayText: y,
    inputType: b,
    onBlur: f,
    onFocus: p,
    onInput: w,
    onClick: B,
    onKeydown: C,
    onKeyup: S,
    onMousedown: I,
    onMouseup: V,
    onTextBoxValueChange: d,
    readonly: n,
    placeholder: E,
    textBoxClass: P,
    textBoxTitle: R
  } = l;
  return M(() => {
    var k, A;
    e.selectOnCreated && ((k = o.value) == null || k.select()), e.focusOnCreated && ((A = o.value) == null || A.focus({
      preventScroll: !0
    }));
  }), () => h("input", {
    id: e.id + "_textbox",
    ref: o,
    name: "input-group-value",
    autocomplete: s.value,
    class: P.value,
    disabled: i == null ? void 0 : i.value,
    maxlength: r.value,
    minlength: m.value,
    placeholder: E.value,
    readonly: n == null ? void 0 : n.value,
    tabindex: x.value,
    title: u.value && !v.value ? R.value : "",
    type: b.value,
    value: y == null ? void 0 : y.value,
    onBlur: f,
    onClick: B,
    onChange: d,
    onFocus: p,
    onInput: w,
    onKeydown: C,
    onKeyup: S,
    onMousedown: I,
    onMouseup: V
  }, null);
}
function ne(e, t) {
  const a = g(e.extendInfo), l = c(() => e.useExtendInfo && !!e.extendInfo), o = c(() => ({
    content: a.value
  }));
  T(() => e.extendInfo, (u) => {
    a.value = u;
  });
  function s() {
    t.emit("updateExtendInfo");
  }
  return () => l.value && L(h("span", {
    class: "input-group-before-tips",
    onMouseenter: s
  }, [h("i", {
    class: "f-icon f-icon-info-circle"
  }, null), h("b", {
    class: "tips-arrow"
  }, null)]), [[O("tooltip"), o.value]]);
}
function ae(e, t, a, l, o) {
  const {
    appendedButtonClass: s,
    appendedContent: u
  } = a, v = c(() => !e.readonly && !e.disabled), m = c(() => u.value && !t.slots.groupTextTemplate), r = c(() => !!t.slots.groupTextTemplate), {
    clearButtonClass: x,
    clearButtonStyle: i,
    onClearValue: y,
    shouldShowClearButton: b
  } = l, f = g(0);
  T(u, (n) => {
    f.value++;
  });
  function p() {
    return h("span", {
      id: "clearIcon",
      class: x.value,
      style: i.value,
      onClick: (n) => y(n)
    }, [h("i", {
      class: "f-icon modal_close"
    }, null)]);
  }
  function w(n) {
    t.emit("iconMouseEnter", n);
  }
  function B(n) {
    t.emit("iconMouseLeave", n);
  }
  function C(n) {
    v.value && t.emit("clickHandle", {
      originalEvent: n
    }), n.stopPropagation();
  }
  const S = e.type === "password" || e.showType === "password" ? o.onClickAppendedButton : C;
  function I() {
    return h(N, null, [(e.showButtonWhenDisabled || !e.disabled && !e.readonly) && h("span", {
      class: "input-group-text",
      onMouseenter: (n) => w(n),
      onMouseleave: (n) => B(n),
      innerHTML: u.value,
      onClick: (n) => S(n)
    }, null)]);
  }
  function V() {
    return t.slots.groupTextTemplate && t.slots.groupTextTemplate();
  }
  function d() {
    return m.value ? I() : r.value ? V() : "";
  }
  return () => h("div", {
    class: s.value,
    key: "append-button-" + f.value
  }, [b.value && p(), d()]);
}
const oe = /* @__PURE__ */ G({
  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 = g(), l = g(e.modelValue), o = g(e.modelValue), s = H(e, t, l, o, a), {
      inputGroupClass: u,
      inputType: v,
      inputGroupStyle: m
    } = s, r = q(e), {
      shouldShowAppendedButton: x
    } = r, i = D(e, t, s), {
      onMouseEnter: y,
      onMouseLeave: b
    } = i, f = J(e, t, v, r), p = Q(e, t), {
      renderTextarea: w,
      renderCount: B,
      renderClear: C
    } = ee(e, t, i, s), S = te(e, t, f, s), I = ae(e, t, r, i, f), V = ne(e, t), d = c(() => v.value === "number"), n = c(() => v.value === "textarea");
    T(() => [e.value], ([P]) => {
      l.value = P, o.value = P;
    }), T(() => [e.modelValue], ([P]) => {
      l.value = P, o.value = P;
    }), M(() => {
      e.value && (l.value = e.value, o.value = e.value);
    });
    const E = () => h("div", {
      ref: a,
      id: e.id,
      class: u.value,
      style: m.value,
      onMouseenter: y,
      onMouseleave: b
    }, [d.value ? p() : n.value ? w() : h(N, null, [V(), S()]), !n.value && !d.value && x.value && I(), n.value && C(), n.value && B()]);
    return () => E();
  }
}), re = z(oe);
export {
  oe as FInputGroup,
  re as default,
  Y as inputGroupProps
};