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

Farris Vue, a Farris Design based Vue3 component library.

import { ref as p, computed as s, watch as O, onMounted as E, nextTick as P, createVNode as c, withDirectives as L, vModelText as R, reactive as j, resolveDirective as F, defineComponent as D, Fragment as G } from "vue";
import { useTextBox as H, useClear as K, withInstall as z } from "../common/index.esm.js";
import { useNumber as U, useFormat as W, useSpinner as $, useTextBox as _ } from "../number-spinner/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 || void 0, default: void 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 },
  /**
   * 作为内嵌编辑器被创建后默认获得焦点
   */
  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: {} }
};
function Z(e, t) {
  const l = p(e.groupText), o = s(() => e.showButtonWhenDisabled && (e.readonly || e.disabled)), n = s(() => e.enableClear || !!e.groupText);
  return { appendedButtonClass: s(() => ({
    "input-group-append": !0,
    "append-force-show": o.value
  })), appendedContent: l, shouldShowAppendedButton: n };
}
function q(e, t, l, o) {
  const { appendedContent: n } = o, f = p(e.enableViewPassword), i = s(() => e.type === "password"), v = '<span class="f-icon f-icon-eye" style="color: rgb(56, 143, 255);"></span>', d = '<span class="f-icon f-icon-eye"></span>', r = p(!1);
  O(() => [e.readonly, e.disabled], ([h, x]) => {
    i.value && (l.value = h || x ? "password" : l.value, n.value = h || x ? d : n.value);
  });
  function g() {
    return r.value = !r.value, l.value = r.value ? "text" : "password", n.value = r.value ? v : d, !1;
  }
  function u() {
    l.value = i.value ? "password" : "text", n.value = i.value ? f.value ? d : "" : n.value;
  }
  return u(), { isPassword: i, onClickAppendedButton: g };
}
function J(e, t, l) {
  const o = p(), {
    onBlurTextBox: n,
    onFocusTextBox: f,
    onInput: i,
    onKeyDown: v,
    textBoxValue: d
  } = l, r = s(() => e.disabled || e.readonly || !e.editable ? "" : e.placeholder), g = s(() => ({
    "form-control": !0,
    "f-utils-fill": !0
  })), u = s(() => ({
    "text-align": e.textAlign
  }));
  function h(y) {
    y.stopPropagation();
  }
  function x() {
    var y, B;
    e.selectOnCreated && ((y = o.value) == null || y.select()), e.focusOnCreated && ((B = o.value) == null || B.focus({
      preventScroll: !0
    }));
  }
  async function m(y) {
    f(y), await P, x();
  }
  return E(async () => {
    await P, x();
  }), () => c("input", {
    ref: o,
    class: g.value,
    style: u.value,
    type: "text",
    value: d.value,
    disabled: e.disabled,
    readonly: e.readonly || !e.editable,
    placeholder: r.value,
    onBlur: n,
    onChange: h,
    onFocus: m,
    onInput: i,
    onKeydown: v
  }, null);
}
function Q(e, t, l) {
  const {
    canDownward: o,
    canUpward: n,
    onClickDownButton: f,
    onClickUpButton: i
  } = l, v = s(() => ({
    "input-group-append": !0,
    "btn-group": !0,
    "btn-group-number": !0
  })), d = s(() => ({
    btn: !0,
    "btn-secondary": !0,
    "btn-number-flag": !0
  })), r = s(() => ({
    cursor: n() ? "pointer" : "not-allowed",
    "margin-left": 0
  })), g = s(() => ({
    cursor: o() ? "pointer" : "not-allowed",
    "margin-left": 0
  }));
  return () => c("div", {
    class: v.value
  }, [c("button", {
    class: d.value,
    style: r.value,
    onClick: i,
    disabled: !n()
  }, [c("span", {
    class: "f-icon f-icon-arrow-chevron-up number-arrow-chevron",
    style: "cursor: inherit"
  }, null)]), c("button", {
    class: d.value,
    style: g.value,
    onClick: f,
    disabled: !o()
  }, [c("span", {
    class: "f-icon f-icon-arrow-chevron-down number-arrow-chevron",
    style: "cursor: inherit"
  }, null)])]);
}
function X(e, t) {
  const l = U(e, t), o = W(e, t, l), n = $(e, t, o, l), f = _(e, t, o, l, n), i = Q(e, t, n), {
    displayValue: v,
    modelValue: d,
    getRealValue: r
  } = l, g = J(e, t, f), {
    format: u
  } = o, {
    isFocus: h
  } = f, x = s(() => !e.disabled && !e.readonly);
  return E(() => {
    const m = r(e.modelValue);
    v.value = u(m);
  }), O(() => [e.value], ([m]) => {
    const y = r(m);
    d.value = y, v.value = u(y);
  }), O(() => [e.modelValue], ([m]) => {
    m !== d.value && (d.value = m, !h.value && (v.value = u(r(m))));
  }), O(() => [e.precision, e.useThousands, e.prefix, e.suffix, e.showZero], () => {
    v.value = u(d.value);
  }), () => c("div", {
    class: "input-group  flex-row f-cmp-number-spinner"
  }, [g(), x.value && i()]);
}
function ee(e, t, l, o) {
  const n = p(), {
    inputGroupClass: f,
    onBlur: i,
    onFocus: v
  } = o, {
    clearButtonClass: d,
    clearButtonStyle: r
  } = l, g = s(() => e.maxLength ? e.maxLength : e.modelValue ? e.modelValue.length : 0), u = (b) => {
    var C, a;
    b.stopPropagation(), t.emit("update:modelValue", (C = b.target) == null ? void 0 : C.value), t.emit("valueChange", (a = b.target) == null ? void 0 : a.value);
  }, h = s(() => ({
    "form-control": !0,
    "h-100": e.autoHeight
  })), x = s(() => e.enableClear && !e.readonly && !e.disabled), m = s(() => e.disabled || e.readonly ? "" : e.placeholder), y = s(() => ({
    ...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 = s(() => {
    const b = {
      resize: "none",
      "padding-right": "15px"
    };
    return e.rows > 2 ? {
      height: "auto",
      ...b
    } : b;
  }), w = (b) => {
    b.stopPropagation(), n.value.value = "", t.emit("update:modelValue", ""), t.emit("valueChange", "");
  };
  function T() {
    return L(c("textarea", {
      class: h.value,
      id: e.id,
      "onUpdate:modelValue": (b) => e.modelValue = b,
      ref: n,
      minlength: e.minLength,
      maxlength: e.maxLength ? e.maxLength : null,
      tabindex: e.tabIndex,
      disabled: e.disabled,
      readonly: e.readonly,
      autocomplete: e.autocomplete,
      placeholder: m.value,
      autofocus: e.autofocus,
      rows: e.rows,
      onInput: u,
      onFocus: v,
      onBlur: i,
      style: B.value
    }, null), [[R, e.modelValue]]);
  }
  function S() {
    return e.showCount && c("span", {
      style: "position: absolute;bottom: 0;right: 5px;z-index:999;font-size:12px"
    }, [`${e.modelValue ? e.modelValue.length : 0}/${g.value}`]);
  }
  function I() {
    return x.value && c("span", {
      id: "clearIcon",
      class: d.value,
      style: y.value,
      onClick: (b) => w(b)
    }, [c("i", {
      class: "f-icon modal_close",
      style: "font-size:8px;color:#fff"
    }, null)]);
  }
  return {
    renderTextarea: T,
    renderCount: S,
    renderClear: I
  };
}
function te(e, t, l, o) {
  const n = p(), f = p(e.autocomplete), i = p(e.enableTitle), {
    isPassword: v
  } = l, d = p(e.minLength), r = p(e.maxLength), g = p(e.tabIndex), {
    disabled: u,
    displayText: h,
    inputType: x,
    onBlur: m,
    onFocus: y,
    onInput: B,
    onClick: w,
    onKeydown: T,
    onKeyup: S,
    onMousedown: I,
    onMouseup: b,
    onTextBoxValueChange: C,
    readonly: a,
    placeholder: k,
    textBoxClass: V,
    textBoxTitle: N
  } = o;
  return E(() => {
    var A, M;
    e.selectOnCreated && ((A = n.value) == null || A.select()), e.focusOnCreated && ((M = n.value) == null || M.focus({
      preventScroll: !0
    }));
  }), () => c("input", {
    ref: n,
    name: "input-group-value",
    autocomplete: f.value,
    class: V.value,
    disabled: u == null ? void 0 : u.value,
    maxlength: r.value,
    minlength: d.value,
    placeholder: k.value,
    readonly: a == null ? void 0 : a.value,
    tabindex: g.value,
    title: i.value && !v.value ? N.value : "",
    type: x.value,
    value: h == null ? void 0 : h.value,
    onBlur: m,
    onClick: w,
    onChange: C,
    onFocus: y,
    onInput: B,
    onKeydown: T,
    onKeyup: S,
    onMousedown: I,
    onMouseup: b
  }, null);
}
function ne(e, t) {
  const l = s(() => e.useExtendInfo && !!e.extendInfo), o = j({
    content: e.extendInfo
  });
  function n() {
    t.emit("updateExtendInfo");
  }
  return () => l.value && L(c("span", {
    class: "input-group-before-tips",
    onMouseenter: n
  }, [c("i", {
    class: "f-icon f-icon-info-circle"
  }, null), c("b", {
    class: "tips-arrow"
  }, null)]), [[F("tooltip"), o]]);
}
function oe(e, t, l, o, n) {
  const {
    appendedButtonClass: f,
    appendedContent: i
  } = l, v = s(() => e.showButtonWhenDisabled && (!e.editable || !e.readonly) && !e.disabled), d = s(() => i.value && !t.slots.groupTextTemplate), r = s(() => !!t.slots.groupTextTemplate), {
    clearButtonClass: g,
    clearButtonStyle: u,
    onClearValue: h,
    shouldShowClearButton: x
  } = o;
  function m() {
    return c("span", {
      id: "clearIcon",
      class: g.value,
      style: u.value,
      onClick: (a) => h(a)
    }, [c("i", {
      class: "f-icon modal_close"
    }, null)]);
  }
  function y(a) {
    t.emit("iconMouseEnter", a);
  }
  function B(a) {
    t.emit("iconMouseLeave", a);
  }
  function w(a) {
    v.value && t.emit("clickHandle", {
      originalEvent: a
    }), a.stopPropagation();
  }
  const T = e.type === "password" ? n.onClickAppendedButton : w;
  function S() {
    return c("span", {
      class: "input-group-text",
      onMouseenter: (a) => y(a),
      onMouseleave: (a) => B(a),
      innerHTML: i.value,
      onClick: (a) => T(a)
    }, null);
  }
  function I() {
    return t.slots.groupTextTemplate && t.slots.groupTextTemplate();
  }
  function b() {
    return d.value ? S : r.value ? I : "";
  }
  const C = b();
  return () => c("div", {
    class: f.value
  }, [x.value && m(), C && C()]);
}
const le = /* @__PURE__ */ D({
  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 l = p(), o = p(e.modelValue), n = p(e.modelValue), f = H(e, t, o, n, l), {
      inputGroupClass: i,
      inputType: v,
      inputGroupStyle: d
    } = f, r = Z(e), {
      shouldShowAppendedButton: g
    } = r, u = K(e, t, f), {
      onMouseEnter: h,
      onMouseLeave: x
    } = u, m = q(e, t, v, r), y = X(e, t), {
      renderTextarea: B,
      renderCount: w,
      renderClear: T
    } = ee(e, t, u, f), S = te(e, t, m, f), I = oe(e, t, r, u, m), b = ne(e, t), C = s(() => e.type === "number"), a = s(() => e.type === "textarea");
    O(() => [e.value], ([V]) => {
      o.value = V, n.value = V;
    }), O(() => [e.modelValue], ([V]) => {
      o.value = V, n.value = V;
    }), E(() => {
      e.value && (o.value = e.value, n.value = e.value);
    });
    const k = () => c("div", {
      ref: l,
      id: e.id,
      class: i.value,
      style: d.value,
      onMouseenter: h,
      onMouseleave: x
    }, [C.value ? y() : a.value ? B() : c(G, null, [b(), S()]), !a.value && g.value && I(), a.value && T(), a.value && w()]);
    return () => k();
  }
}), re = z(le);
export {
  le as FInputGroup,
  re as default,
  Y as inputGroupProps
};