@farris/ui-vue/components/button-edit/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

var qe = Object.defineProperty;
var $e = (e, t, n) => t in e ? qe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var J = (e, t, n) => $e(e, typeof t != "symbol" ? t + "" : t, n);
import { ref as o, onMounted as ne, defineComponent as ce, computed as O, createVNode as g, Teleport as ye, createApp as pe, onUnmounted as de, Fragment as ee, watch as A, nextTick as Z, onBeforeMount as _e, watchEffect as Je, Transition as Ze, shallowRef as Qe, render as ie, h as et, cloneVNode as tt, mergeProps as be, inject as nt, withDirectives as lt, vShow as at, createTextVNode as re, onUpdated as ot, onBeforeUnmount as ut } from "vue";
import { LocaleService as ae } from "../locale/index.esm.js";
import { isMobilePhone as te, getMaxZIndex as ge, useGuid as st, withInstall as it } from "../common/index.esm.js";
import "../property-panel/index.esm.js";
import "../button/index.esm.js";
import "../field-selector/index.esm.js";
import "../collection-property-editor/index.esm.js/src/use-button-items.designer";
import rt from "../tags/index.esm.js";
import { debounce as we } from "lodash-es";
import { useInputExpand as ct } from "../common/index.esm.js/text-box/use-input-expand";
import dt from "../popover/index.esm.js";
import ft from "../drawer/index.esm.js";
const vt = {
  /**
   * 标记组件的唯一标识
   */
  id: { type: String, default: "" },
  /**
   * 按钮内容，缺省为点击按钮图标
   */
  buttonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
  /**
   * --
   * @default Popup
   */
  buttonBehavior: { type: String, default: "Popup" },
  /**
   * 是否启用自动完成录入文本功能
   * @default false
   */
  autoComplete: { type: Boolean, default: !1 },
  /**
   * 组件自定义样式
   */
  customClass: { type: String, default: "" },
  /**
   * 将组件设置为禁用状态
   * @default false
   */
  disable: { type: Boolean, default: !1 },
  /**
   * 是否允许在输入框编辑文本；inputType为tag时，此属性无效
   * @default true
   */
  editable: { type: Boolean, default: !0 },
  /**
   * 是否启用清空按钮
   * @default false
   */
  enableClear: { type: Boolean, default: !1 },
  /**
   * 组件值
   */
  modelValue: { type: String, default: "" },
  /**
   * 将组件输入框设置为只读
   * @default false
   */
  readonly: { type: Boolean, default: !1 },
  /**
   * 是否允许在禁用组件时仍然显示组件按钮
   * @default false
   */
  showButtonWhenDisabled: { type: Boolean, default: !1 },
  /**
   * 显示扩展按钮
   */
  showAppendButton: { type: Boolean, default: !0 },
  /**
   * 是否启用输入框的的提示文本
   * @default false
   */
  enableTitle: { type: Boolean, default: !1 },
  /**
   * 'text'
   * @default 'text'
   */
  inputType: { type: String, default: "text" },
  /**
   * 是否始终显示输入框提示文本
   * @default false
   */
  forcePlaceholder: { type: Boolean, default: !1 },
  /**
   * 设置输入框提示文本
   */
  placeholder: { type: String, default: "" },
  /**
   * 设置输入框文本最小长度
   */
  minLength: Number,
  /**
   * 设置输入框文本最大长度
   */
  maxLength: { type: Number },
  /**
   * 设置组件 Tab 键索引
   */
  tabIndex: Number,
  popupHost: { type: Object },
  popupRightBoundary: { type: Object },
  popupOffsetX: { type: Object, default: 0 },
  popupOffsetY: { type: Object, default: 0 },
  /**
   * 开启后，输入时自动弹出选择面板；inputType为tag时，此属性无效
   * @default false
   */
  popupOnInput: { type: Boolean, default: !1 },
  /**
   * 开启后，点击输入框自动弹出选择面板；inputType为tag时，此属性无效
   * @default false
   */
  popupOnFocus: { type: Boolean, default: !1 },
  popupOnClick: { type: Boolean, default: !1 },
  /**
   * 样式追加到弹出窗口
   */
  popupClass: { type: String, default: "" },
  /**
   * 弹出面板最小宽度
   * @default 160
   */
  popupMinWidth: { type: Number, default: 160 },
  modalOptions: { type: Object, default: {} },
  wrapText: { type: Boolean, default: !1 },
  /**
   * 是否支持多选
   * @default false
   */
  multiSelect: { type: Boolean, default: !1 },
  /**
   * 多选分隔符
   * @default ,
   */
  separator: { type: String, default: "," },
  /**
   * 设置输入框对齐方式，缺省状况为左对齐，可选择的值包括：'left','center','right'; inputType为tag时，此属性无效
   * @default 'left'
   */
  textAlign: { type: String, default: "left" },
  /**
   * 废弃
   */
  beforeClickButton: { type: Function, default: null },
  /**
   * 作为内嵌编辑器被创建后默认获得焦点
   */
  focusOnCreated: { type: Boolean, default: !1 },
  /**
   * 作为内嵌编辑器被创建后默认选中文本
   */
  selectOnCreated: { type: Boolean, default: !1 },
  /**
   * 打开前
   */
  beforeOpen: { type: Function, default: null },
  /**
   * 更新方式 blur | change
   */
  updateOn: { type: String, default: "change" },
  keepWidthWithReference: { type: Boolean, default: !0 },
  placement: { type: String, default: "bottom-left" },
  /**
   * 根据空间大小重新调整，原下拉面板内容指定的高度
   */
  limitContentBySpace: { type: Boolean, default: !1 },
  beforeClosePopup: { type: Function, default: null },
  /**
   * 是否可扩展
   */
  expandable: { type: Boolean, default: !1 },
  /**
   * 扩展模式 text | button
   */
  expandMode: { type: String, default: "text" },
  /**
   * 扩展文本内容
   */
  expandContent: { type: String, default: "" },
  /**
   * 扩展按钮是否禁用
   */
  expandDisabled: { type: Boolean, default: !1 }
}, ht = {
  popupContentPosition: { type: Object, default: { left: 0, top: 0 } },
  host: { type: Object },
  backgroundColor: { type: String, default: "" }
};
function mt() {
  const e = o(!1);
  return ne(() => {
    e.value = !0;
  }), e;
}
const gt = /* @__PURE__ */ ce({
  name: "FOverlay",
  props: ht,
  emits: ["click"],
  setup(e, t) {
    const n = o(e.popupContentPosition), a = o(e.host), s = mt(), i = O(() => ({
      backgroundColor: e.backgroundColor || "",
      pointerEvents: "auto"
    }));
    function f(r) {
      t.emit("click"), r.preventDefault(), r.stopPropagation();
    }
    O(() => {
      const r = a.value;
      if (r) {
        const m = r.getBoundingClientRect(), {
          left: x,
          top: y,
          height: T
        } = m;
        return {
          left: x,
          top: y + T
        };
      }
      return n.value;
    });
    const c = O(() => ({
      // position: 'relative',
      // left: `${position.value.left}px`,
      // top: `${position.value.top}px`
    }));
    return () => s.value ? g(ye, {
      to: "body"
    }, {
      default: () => {
        var r, m;
        return [g("div", {
          class: "overlay-container",
          onClick: (x) => f(x),
          style: i.value
        }, [g("div", {
          style: c.value
        }, [(m = (r = t.slots).default) == null ? void 0 : m.call(r)])])];
      }
    }) : null;
  }
});
function yt(e) {
  if (e.content && e.content.render)
    return e.content.render;
  if (e.render && typeof e.render == "function")
    return e.render;
}
function pt(e) {
  const t = document.createElement("div");
  t.style.display = "contents";
  let n;
  const a = e.onClickCallback || (() => {
  }), s = () => {
    a(), n && n.unmount();
  };
  return n = pe({
    setup() {
      de(() => {
        document.body.removeChild(t);
      });
      const i = yt(e);
      return () => g(gt, {
        "popup-content-position": e.popupPosition,
        host: e.host,
        onClick: s,
        backgroundColor: e.backgroundColor
      }, {
        default: () => [i && i()]
      });
    }
  }), document.body.appendChild(t), n.mount(t), n;
}
class bt {
  static show(t) {
    return pt(t);
  }
}
const wt = {
  /**
   * 允许点击蒙层关闭对话框
   * @default false
   */
  allowClickMaskToClose: { type: Boolean, default: !1 },
  /**
   * 关闭前事件
   * @default () => { return true; }
   */
  beforeClose: { type: Function, default: () => !0 },
  /**
   * 自定义样式，类名以空格隔开
   * @default ''
   */
  class: { type: String, default: "" },
  /**
   * 自定义蒙层样式，类名以空格隔开
   * @default ''
   */
  maskClass: { type: String, default: "" },
  /**
   * 窗口标题
   */
  title: { type: String, default: "" },
  /**
   * 窗口宽度
   * @default 500
   */
  width: { type: Number, default: 500 },
  /**
   * 窗口高度
   * @default 320
   */
  height: { type: Number, default: 320 },
  /**
   * 底部按钮
   */
  buttons: {
    type: Array,
    default: []
  },
  /**
   * 双向绑定属性是否显示窗口
   * @default false
   */
  modelValue: { type: Boolean, default: !1 },
  /**
   * 是否模态
   * @default true
   */
  mask: { type: Boolean, default: !0 },
  /**
   * 展示头部
   * @default true
   */
  showHeader: { type: Boolean, default: !0 },
  /**
   * 展示默认按钮
   * @default true
   */
  showButtons: { type: Boolean, default: !0 },
  /**
   * 自适应尺寸
   * @default true
   */
  fitContent: { type: Boolean, default: !0 },
  /**
   * 展示右上角关闭弹窗按钮
   * @default true
   */
  showCloseButton: { type: Boolean, default: !0 },
  /**
   * 是否在窗口右上角展示浮动关闭按钮
   */
  showFloatingClose: { type: Boolean, default: !1 },
  /**
   * 展示右上角最大化按钮
   * @default false
   */
  showMaxButton: { type: Boolean, default: !1 },
  minHeight: { type: Number },
  maxHeight: { type: Number },
  minWidth: { type: Number },
  maxWidth: { type: Number },
  containment: { type: Object, default: null },
  /**
   * 可调整窗口尺寸
   * @default false
   */
  resizeable: { type: Boolean, default: !1 },
  /**
   * 可拖拽窗口
   * @default false
   */
  draggable: { type: Boolean, default: !1 },
  /**
   * 拖拽抓手，赋值css选择器
   */
  dragHandle: { type: Object, default: null },
  /**
   * 命令式调用属性，默认关闭按钮回调事件
   */
  closedCallback: { type: Function, default: null },
  openedCallback: { type: Function, default: null },
  // 窗口打开后的回调函数
  resizeHandle: { type: Function, default: null },
  /**
   * 命令式调用属性，默认插槽，返回VNode
   */
  render: { type: Function, default: null },
  /**
   * 命令式调用属性，底部默认确定按钮回调事件
   */
  acceptCallback: { type: Function, default: null },
  /**
   * 命令式调用属性，底部默认取消按钮回调事件
   */
  rejectCallback: { type: Function, default: null },
  enableEsc: { type: Boolean, default: !0 },
  enableEnter: { type: Boolean, default: !1 },
  dialogType: { type: String, default: "" },
  src: { type: String, default: "" },
  /**
   * 底部区域高度，如果设置为0，则不显示底部区域
   * @default 60
   */
  footerHeight: { type: Number, default: 60 },
  position: { type: String, default: "center" },
  host: { type: Object, default: "body" },
  isMessager: { type: Boolean, default: !1 },
  fullscreen: { type: Boolean, default: !1 },
  maximized: { type: Boolean, default: !1 },
  useTransform: { type: Boolean, default: !0 }
};
class D {
  constructor(t, n) {
    this.x = t, this.y = n;
  }
  static getTransformInfo(t) {
    const a = window.getComputedStyle(t).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(",");
    if (a.length >= 6) {
      const s = parseInt(a[4], 10), i = parseInt(a[5], 10);
      return { x: s, y: i };
    }
    return { x: 0, y: 0 };
  }
  static fromEvent(t, n = null) {
    if (this.isMouseEvent(t))
      return new D(t.clientX, t.clientY);
    if (n === null || t.changedTouches.length === 1)
      return new D(t.changedTouches[0].clientX, t.changedTouches[0].clientY);
    for (let a = 0; a < t.changedTouches.length; a++)
      if (t.changedTouches[a].target === n)
        return new D(t.changedTouches[a].clientX, t.changedTouches[a].clientY);
  }
  static isMouseEvent(t) {
    return Object.prototype.toString.apply(t).indexOf("MouseEvent") === 8;
  }
  static isIPosition(t) {
    return !!t && "x" in t && "y" in t;
  }
  static getCurrent(t) {
    const n = new D(0, 0);
    if (window) {
      const a = window.getComputedStyle(t);
      if (a) {
        const s = parseInt(a.getPropertyValue("left"), 10), i = parseInt(a.getPropertyValue("top"), 10);
        n.x = isNaN(s) ? 0 : s, n.y = isNaN(i) ? 0 : i;
      }
      return n;
    }
    return null;
  }
  static copy(t) {
    return new D(0, 0).set(t);
  }
  get value() {
    return { x: this.x, y: this.y };
  }
  add(t) {
    return this.x += t.x, this.y += t.y, this;
  }
  subtract(t) {
    return this.x -= t.x, this.y -= t.y, this;
  }
  multiply(t) {
    this.x *= t, this.y *= t;
  }
  divide(t) {
    this.x /= t, this.y /= t;
  }
  reset() {
    return this.x = 0, this.y = 0, this;
  }
  set(t) {
    return this.x = t.x, this.y = t.y, this;
  }
}
class q {
  constructor(t, n) {
    this.width = t, this.height = n;
  }
  static getCurrent(t) {
    const n = new q(0, 0);
    if (window) {
      const a = window.getComputedStyle(t);
      return a && (n.width = parseInt(a.getPropertyValue("width"), 10), n.height = parseInt(a.getPropertyValue("height"), 10)), n;
    }
    return null;
  }
  static copy(t) {
    return new q(0, 0).set(t);
  }
  set(t) {
    return this.width = t.width, this.height = t.height, this;
  }
}
function Ct(e, t) {
  const n = o(), a = o(), s = o(), i = o(), f = o(), c = o(), r = o(), m = o(), x = o(), y = o(), T = o(), C = o(e.resizeable), b = o(), M = o(e.draggable), E = o(!1);
  function S() {
    const u = a.value || document.body, d = window.getComputedStyle(u);
    if (!d || !n.value)
      return;
    const B = D.getTransformInfo(n.value), z = {};
    r.value && (z.deltaL = n.value.offsetLeft - r.value.x, z.deltaT = n.value.offsetTop - r.value.y);
    const V = d.getPropertyValue("position");
    z.width = u.clientWidth, z.height = u.clientHeight, z.pr = parseInt(d.getPropertyValue("padding-right"), 10), z.pb = parseInt(d.getPropertyValue("padding-bottom"), 10), z.position = d.getPropertyValue("position"), V === "static" && (u.style.position = "relative"), z.translateX = B.x, z.translateY = B.y, y.value = z;
  }
  function P(u) {
    if (n.value) {
      i.value = q.getCurrent(n.value), f.value = D.getCurrent(n.value), c.value = i.value ? q.copy(i.value) : null, r.value = f.value ? D.copy(f.value) : null, S();
      const d = u.target.getAttribute("type") || "";
      m.value = {
        n: !!d.match(/n/),
        s: !!d.match(/s/),
        w: !!d.match(/w/),
        e: !!d.match(/e/)
      };
    }
  }
  function I() {
    var u, d, B, z;
    if (n.value) {
      const V = n.value;
      m.value && ((m.value.n || m.value.s) && ((u = c.value) != null && u.height) && (V.style.height = c.value.height + "px"), (m.value.w || m.value.e) && ((d = c.value) != null && d.width) && (V.style.width = c.value.width + "px"), r.value && ((B = r.value) != null && B.x && (V.style.left = r.value.x + "px"), (z = r.value) != null && z.y && (V.style.top = r.value.y + "px")));
    }
  }
  function H() {
    const u = e.minHeight ? e.minHeight : 1, d = e.minWidth ? e.minWidth : 1;
    c.value && r.value && m.value && i.value && (c.value.height < u && (c.value.height = u, m.value.n && f.value && (r.value.y = f.value.y + (i.value.height - u))), c.value.width < d && (c.value.width = d, m.value.w && f.value && (r.value.x = f.value.x + (i.value.width - d))), e.maxHeight && c.value.height > e.maxHeight && (c.value.height = e.maxHeight, f.value && m.value.n && (r.value.y = f.value.y + (i.value.height - e.maxHeight))), e.maxWidth && c.value.width > e.maxWidth && (c.value.width = e.maxWidth, m.value.w && f.value && (r.value.x = f.value.x + (i.value.width - e.maxWidth))));
  }
  function Y() {
    if (a.value) {
      const u = y.value;
      if (r.value && c.value && m.value && i.value) {
        const d = u.width - u.pr - u.deltaL - u.translateX - r.value.x, B = u.height - u.pb - u.deltaT - u.translateY - r.value.y;
        m.value.n && r.value.y + u.translateY < 0 && f.value && (r.value.y = -u.translateY, c.value.height = i.value.height + f.value.y + u.translateY), m.value.w && r.value.x + u.translateX < 0 && f.value && (r.value.x = -u.translateX, c.value.width = i.value.width + f.value.x + u.translateX), c.value.width > d && (c.value.width = d), c.value.height > B && (c.value.height = B);
      }
    }
  }
  function W(u) {
    if (!s.value || !i.value || !f.value || !m.value)
      return;
    u.subtract(s.value);
    const d = u.x, B = u.y;
    m.value.n ? (r.value.y = f.value.y + B, c.value.height = i.value.height - B) : m.value.s && (c.value.height = i.value.height + B), m.value.e ? c.value.width = i.value.width + d : m.value.w && (c.value.width = i.value.width - d, r.value.x = f.value.x + d), Y(), H(), I();
  }
  function h(u) {
    if (!x.value)
      return;
    const d = D.fromEvent(u);
    d && W(d);
  }
  function v() {
    if (n.value) {
      const {
        width: u,
        height: d,
        x: B,
        y: z
      } = n.value.getBoundingClientRect(), V = D.getTransformInfo(n.value);
      return {
        size: {
          width: u,
          height: d
        },
        position: {
          x: B - V.x,
          y: z - V.y
        }
      };
    }
    return null;
  }
  function k(u) {
    if (n.value) {
      const d = v();
      T.value = d;
    }
    s.value = void 0, i.value = null, f.value = null, c.value = null, r.value = null, m.value = null, x.value = null, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", k);
  }
  function F() {
    document.addEventListener("mousemove", h), document.addEventListener("mouseup", k);
  }
  function p(u) {
    u instanceof MouseEvent && u.button === 2 || M.value && (document.body.click(), u.stopPropagation(), u.preventDefault(), s.value = D.fromEvent(u), x.value = u.target, P(u), F());
  }
  function R(u) {
    return n.value = u, C.value && g(ee, null, [g("div", {
      class: "fv-resizable-handle fv-resizable-n",
      type: "n",
      onMousedown: (d) => p(d)
    }, null), g("div", {
      class: "fv-resizable-handle fv-resizable-e",
      type: "e",
      onMousedown: (d) => p(d)
    }, null), g("div", {
      class: "fv-resizable-handle fv-resizable-s",
      type: "s",
      onMousedown: (d) => p(d)
    }, null), g("div", {
      class: "fv-resizable-handle fv-resizable-w",
      type: "w",
      onMousedown: (d) => p(d)
    }, null), g("div", {
      class: "fv-resizable-handle fv-resizable-ne",
      type: "ne",
      onMousedown: (d) => p(d)
    }, null), g("div", {
      class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal",
      type: "se",
      onMousedown: (d) => p(d)
    }, null), g("div", {
      class: "fv-resizable-handle fv-resizable-sw",
      type: "sw",
      onMousedown: (d) => p(d)
    }, null), g("div", {
      class: "fv-resizable-handle fv-resizable-nw",
      type: "nw",
      onMousedown: (d) => p(d)
    }, null)]);
  }
  function N(u = !0) {
    document.body.click();
    const d = a.value || document.body, B = q.getCurrent(d), z = n.value;
    u && z && (b.value = v(), b.value.transform = z.style.transform), B && z && (c.value = B, c.value.height -= 14, c.value.width -= 14, z.style.height = c.value.height + "px", z.style.width = c.value.width + "px", z.style.left = "7px", z.style.top = "7px", z.style.transform = "", T.value = {
      size: c.value,
      position: {
        x: 0,
        y: 0
      }
    }, M.value = !1, E.value = !0);
  }
  function $() {
    var u, d;
    if (document.body.click(), b.value) {
      const B = {
        width: b.value.size.width || 0,
        height: b.value.size.height || 0
      }, z = {
        x: (window.innerWidth - B.width) / 2,
        y: (window.innerHeight - B.height) / 2
      };
      (u = c.value) == null || u.set(B), (d = r.value) == null || d.set(z);
      const V = n.value;
      V.style.height = B.height + "px", V.style.width = B.width + "px", V.style.left = `${z.x}px`, V.style.top = `${z.y}px`, V.style.transform = "", T.value = {
        size: B,
        position: z
      }, M.value = e.draggable, E.value = !1;
    }
  }
  function _() {
    if (n.value) {
      const u = q.getCurrent(n.value);
      if (u) {
        const {
          width: d,
          height: B
        } = u;
        n.value.style.left = `${(window.innerWidth - d) / 2}px`, n.value.style.top = `${(window.innerHeight - B) / 2}px`, n.value.style.transform = "";
      }
    }
  }
  function U() {
    const u = () => {
      E.value ? N(!1) : _(), document.body.click();
    };
    return window.addEventListener("resize", u), () => {
      window.removeEventListener("resize", u);
    };
  }
  const X = U();
  return {
    renderResizeBar: R,
    boundingElement: a,
    resizedEventParam: T,
    maximize: N,
    restore: $,
    allowDrag: M,
    isMaximized: E,
    unWindowResizeHandle: X,
    moveToCenter: _
  };
}
function xt(e, t, n) {
  const a = o(), s = o(e.draggable), i = o(e.lockAxis), f = o(), c = o(), r = o(!1), m = o(new D(0, 0)), x = o(new D(0, 0)), y = o(new D(0, 0)), T = o(new D(0, 0));
  A(() => n.value, (h) => {
    f.value.style.cursor = h ? "move" : "default";
  });
  function C(h, v) {
    if (v.tagName === "BUTTON")
      return !1;
    if (v === h)
      return !0;
    for (const k in v.children)
      if (Object.prototype.hasOwnProperty.call(v.children, k) && C(h, v.children[k]))
        return !0;
    return !1;
  }
  function b() {
    var F, p;
    let h = y.value.x + x.value.x, v = y.value.y + x.value.y;
    i.value === "x" ? (h = ((F = m.value) == null ? void 0 : F.x) || 0, y.value.x = 0) : i.value === "y" && (v = ((p = m.value) == null ? void 0 : p.y) || 0, y.value.y = 0);
    const k = `translate3d(${Math.round(h)}px, ${Math.round(v)}px, 0px)`;
    a.value && (a.value.style.transform = k), T.value.x = h, T.value.y = v;
  }
  function M() {
    if (!c.value || !a.value)
      return null;
    const h = c.value.getBoundingClientRect(), v = a.value.getBoundingClientRect(), k = {
      top: h.top < v.top,
      right: h.right > v.right,
      bottom: h.bottom > v.bottom,
      left: h.left < v.left
    };
    return k.top || (y.value.y -= v.top - h.top), k.bottom || (y.value.y -= v.bottom - h.bottom), k.right || (y.value.x -= v.right - h.right), k.left || (y.value.x -= v.left - h.left), b(), k;
  }
  function E(h) {
    h && (m.value && h.subtract(m.value), y.value.set(h), b(), M());
  }
  function S(h) {
    r.value && s.value && (h.stopPropagation(), h.preventDefault(), E(D.fromEvent(h, f.value)));
  }
  function P() {
    var h;
    if (r.value) {
      if (r.value = !1, x.value.add(y.value), y.value.reset(), (h = a.value) == null || h.classList.remove("ng-dragging"), !e.useTransform && a.value) {
        const { left: v, top: k } = a.value.getBoundingClientRect();
        a.value.style.left = Math.ceil(v) + "px", a.value.style.top = Math.ceil(k) + "px", a.value.style.transform = "none";
      }
      t.emit("stopMove"), document.removeEventListener("mousemove", S), document.removeEventListener("mouseup", P);
    }
  }
  function I() {
    !r.value && f.value && (r.value = !0, f.value.classList.add("ng-dragging"), document.addEventListener("mousemove", S), document.addEventListener("mouseup", P));
  }
  function H() {
    if (a.value) {
      const h = D.getTransformInfo(a.value);
      x.value.set(h);
      return;
    }
    x.value.reset();
  }
  function Y(h) {
    if (!n.value || h instanceof MouseEvent && h.button === 2)
      return;
    const v = h.target || h.srcElement;
    f.value !== void 0 && v && !C(v, f.value) || s.value !== !1 && (document.body.click(), h.stopPropagation(), h.preventDefault(), m.value = D.fromEvent(h, a.value), H(), I());
  }
  function W(h, v, k) {
    if (s.value && v) {
      if (h)
        f.value = h;
      else if (e.dragHandle) {
        if (e.dragHandle instanceof HTMLElement)
          f.value = e.dragHandle;
        else if (typeof e.dragHandle == "string") {
          const F = v.querySelector(e.dragHandle);
          F && (f.value = F);
        }
      }
      a.value = v, c.value = k, f.value ? (f.value.classList.add("ng-draggable"), f.value.addEventListener("mousedown", Y)) : s.value = !1;
    }
  }
  return {
    registerDraggle: W,
    resetTranslate: H
  };
}
function Ce(e, t) {
  if (e) {
    const n = (a) => {
      a.key.toLowerCase() === e.toLowerCase() && t({ event: a, key: e });
    };
    return document.addEventListener("keydown", n), () => {
      document.removeEventListener("keydown", n);
    };
  }
}
function Bt(e, t) {
  const n = o(e.enableEsc);
  let a = null;
  return n.value ? (a = Ce("Escape", (s) => {
    t.emit("esc", { event: s.event, type: "esc" });
  }), {
    remove: a
  }) : null;
}
function Mt(e, t) {
  const n = o(e.enableEnter);
  let a = null;
  return n.value ? (a = Ce("Enter", (s) => {
    t.emit("enter", { event: s.event, type: "enter" });
  }), {
    remove: a
  }) : null;
}
const Q = /* @__PURE__ */ ce({
  name: "FModal",
  props: wt,
  emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove", "buttonClick"],
  setup(e, t) {
    const n = o(e.width || 300), a = o(e.height || 200), s = o(e.modelValue), i = o(""), f = o(e.class), c = o(e.fitContent), r = o(e.showHeader), m = o(""), x = o(e.showCloseButton), y = o(e.showMaxButton), T = o(!1), C = o(e.dialogType), b = o(e.src), M = o(""), E = o(e.showButtons), S = o(e.title), P = o(e.containment || null), I = o();
    S.value === "错误提示" && (S.value = ae.getLocaleValue("messageBox.errorTitle"));
    const H = o(!1);
    function Y() {
      const l = document.querySelectorAll(".farris-modal").length;
      (!l || l - 1 <= 0) && I.value === document.querySelectorAll(".farris-modal")[0] && document.body.classList.remove("modal-open"), I.value && I.value.classList.remove("show");
    }
    function W(l, w) {
      const L = w ? "accept" : "cancel";
      Promise.resolve().then(() => {
        var j;
        return (j = e.beforeClose) == null ? void 0 : j.call(e, {
          closeType: L
        });
      }).then((j) => {
        j && (s.value = !1, t.emit("update:modelValue", !1), w != null && t.emit(w ? "accept" : "cancel"), t.emit("closed", l), Y());
      });
    }
    const h = [{
      name: "cancel",
      text: ae.getLocaleValue("messageBox.cancel") || "取消",
      class: "btn btn-secondary",
      handle: (l) => {
        W(l, !1);
      }
    }, {
      name: "accept",
      text: ae.getLocaleValue("messageBox.ok") || "确定",
      class: "btn btn-primary",
      handle: (l) => {
        W(l, !0);
      }
    }], v = o(e.buttons && e.buttons.length ? e.buttons : h), k = O(() => !!m.value), F = O(() => !!E.value && !!v.value), p = o(), R = o(), N = o(e.maximized || !1), {
      renderResizeBar: $,
      maximize: _,
      restore: U,
      boundingElement: X,
      resizedEventParam: u,
      allowDrag: d,
      unWindowResizeHandle: B,
      moveToCenter: z
    } = Ct(e), {
      registerDraggle: V
    } = xt(e, t, d);
    function fe() {
      return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open");
    }
    A(() => e.title, (l, w) => {
      l !== w && (S.value = l);
    }), A(() => e.modelValue, (l, w) => {
      l !== w && (s.value = l, s.value && e.draggable && Z(() => {
        R.value && !P.value && (P.value = R.value.parentElement, X.value = P.value, V(p.value, R.value, X.value), z());
      }), l || (P.value && (P.value = null), Y())), s.value ? H.value = fe() : (N.value = !1, d.value = e.draggable);
    }), A(() => e.showHeader, (l, w) => {
      l !== w && (r.value = l);
    }), A(() => e.showButtons, (l, w) => {
      l !== w && (E.value = l);
    }), A(() => u.value, (l, w) => {
      const L = l || {}, j = w || {};
      JSON.stringify(L) !== JSON.stringify(j) && t.emit("resize", {
        newSize: l,
        oldSize: w,
        isMaximized: N.value
      });
    }), A([() => e.width, () => e.height], (l, w) => {
      (l[0] !== w[0] || l[1] !== w[1]) && (n.value = l[0] || 500, a.value = l[1] || 600);
    }), A(() => e.class, (l, w) => {
      f.value = l;
    });
    const le = O(() => (s.value && document.body.classList.add("modal-open"), s.value)), ke = O(() => {
      var L;
      const l = {
        modal: !0,
        "farris-modal": !0,
        fade: !0,
        "fe-cmp-page-modal": !!e.showFloatingClose
      };
      l["f-modal-fitContent"] = !!c.value, l.show = !!le.value;
      const w = (L = e.maskClass) == null ? void 0 : L.split(" ");
      return w == null || w.reduce((j, K) => (j[K] = !0, j), l), l;
    }), Te = O(() => {
      var L;
      const l = {
        "modal-dialog": !0
      }, w = (L = f.value) == null ? void 0 : L.split(" ");
      return w == null || w.reduce((j, K) => (j[K] = !0, j), l), l;
    }), Ee = () => te() && !e.isMessager || !!e.fullscreen, Oe = O(() => {
      const l = document.documentElement.clientWidth, w = document.documentElement.clientHeight;
      if (N.value)
        return {
          position: "fixed",
          top: "0px",
          left: "0px",
          width: "100vw",
          height: "100vh",
          margin: "0"
        };
      const L = Math.min(n.value, l), j = e.position === "right" ? "100%" : c.value ? "auto" : `${Math.min(a.value, w - 10)}px`, K = `${(window.innerHeight - (j === "100%" || j === "auto" ? 0 : parseInt(j))) / 2}px`, Ge = e.position === "right" ? `${window.innerWidth - L}px` : `${(window.innerWidth - L) / 2}px`, me = {
        position: "absolute",
        top: K,
        left: Ge,
        width: te() ? "auto" : `${L}px`,
        height: j
      };
      return e.mask || (me.pointerEvents = "auto"), me;
    }), ve = o(ge() || 1050), ze = O(() => {
      const l = {
        display: "block",
        overflow: "hidden"
      };
      return e.mask || (l.pointerEvents = "none", l.backgroundColor = "transparent"), H.value && (l.backgroundColor = "transparent"), l.zIndex = ve.value, l;
    }), Pe = O(() => ({
      "modal-content": !0,
      "modal-content-has-header": r.value,
      "is-mobile": Ee()
    })), Se = O(() => {
      const l = {
        display: r.value ? "" : "none"
      };
      return l["pointer-events"] = d.value ? "auto" : "none", l;
    }), Ie = O(() => ({
      "f-icon": !0,
      modal_maximize: !0,
      modalrevert: N.value
    })), He = O(() => ({
      "modal-body": !0,
      "f-utils-flex-column": C.value === "iframe",
      "f-utils-fill": !0
    }));
    function Re() {
      return {
        height: `${e.footerHeight || 60}px`
      };
    }
    const Fe = O(() => {
      const l = {
        textAlgin: M.value
      }, w = Re();
      return Object.assign(l, w);
    });
    function oe(l) {
      if (l == null || l.stopPropagation(), N.value) {
        N.value = !1, U();
        return;
      }
      _(), N.value = !0;
    }
    async function Le(l, w) {
      l.handle ? await l.handle(w, l) && t.emit("closed", w) : t.emit("buttonClick", {
        button: l,
        $event: w
      });
    }
    function je(l) {
      l.width && (n.value = l.width), l.height && (a.value = l.height), l.buttons && (v.value = l.buttons), l.title && (S.value = l.title);
    }
    let ue = null, se = null;
    _e(() => {
      H.value = fe();
    }), ne(() => {
      R.value && !P.value && (P.value = R.value.parentElement, X.value = P.value, V(p.value, R.value, X.value)), le.value && document.body.classList.add("modal-open"), ue = Bt(e, t), se = Mt(e, t);
    }), de(() => {
      B && B(), ue && ue.remove(), se && se.remove();
    }), t.expose({
      modalElementRef: R,
      updateModalOptions: je,
      close: W,
      maxDialog: oe,
      isMaximized: N,
      disableButtons: (l, w = !0) => {
        v.value.forEach((L) => {
          L.name && l.includes(L.name) && (L.disabled = w);
        });
      }
    });
    function We() {
      return g("div", {
        class: "action-wrapper",
        onClick: (l) => W(l, !1)
      }, [g("span", {
        class: "close-icon"
      }, [g("i", {
        class: "f-icon f-icon-close"
      }, null)])]);
    }
    function De() {
      return g("ul", null, [T.value && g("li", {
        class: "f-btn-icon f-bare"
      }, [g("span", {
        class: "f-icon modal_minimize"
      }, null)]), y.value && g("li", {
        onClick: oe,
        class: "f-btn-icon f-bare",
        style: "pointer-events: auto;"
      }, [g("span", {
        class: Ie.value
      }, null)]), x.value && g("li", {
        class: "f-btn-icon f-bare",
        onClick: (l) => W(l, !1),
        style: "pointer-events: auto;"
      }, [g("span", {
        class: "f-icon modal_close"
      }, null)])]);
    }
    const Ve = (l) => {
      l.preventDefault();
      const w = l.currentTarget, L = l.deltaY * 0.5;
      w.scrollLeft += L;
    };
    function Ne() {
      return g("div", {
        class: "modal-footer",
        style: Fe.value
      }, [v.value && g("div", {
        class: "buttons",
        onWheel: Ve
      }, [v.value.map((l) => {
        var j;
        const w = o(l.disabled), L = l.class || ((j = l.appearance) == null ? void 0 : j.class);
        return g("button", {
          name: l.name,
          style: l.styles,
          type: "button",
          disabled: w.value,
          class: L + (l.iconClass ? " btn-icontext" : "") + (l.visible === !1 ? "d-none" : ""),
          onClick: (K) => {
            Le(l, K);
          }
        }, [!!l.iconClass && g("i", {
          class: l.iconClass
        }, null), l.text]);
      })])]);
    }
    function he(l) {
      y.value && oe();
    }
    function Ae() {
      return g(ee, null, [N.value && g("div", {
        class: "modal-header",
        style: "position: absolute;background: transparent;height: 45px;width: 100%;",
        onDblclick: (l) => he()
      }, null), g("div", {
        ref: p,
        class: "modal-header",
        style: Se.value,
        onDblclick: (l) => he()
      }, [t.slots.headerTemplate ? t.slots.headerTemplate() : g("div", {
        class: "modal-title"
      }, [k.value && g("span", {
        class: m.value,
        style: "margin-right: 8px"
      }, null), g("span", {
        class: "modal-title-label"
      }, [S.value])]), g("div", {
        class: "actions"
      }, [De()])])]);
    }
    function Ye() {
      return t.slots.footerTemplate ? t.slots.footerTemplate() : F.value && Ne();
    }
    function Ue(l) {
      if (l.stopPropagation(), e.allowClickMaskToClose) {
        if (l.target !== I.value)
          return;
        W(l, !1);
      }
    }
    function Xe() {
      var l, w;
      return g("div", {
        id: i.value,
        class: Te.value,
        style: Oe.value,
        ref: R
      }, [e.showFloatingClose && We(), g("div", {
        class: Pe.value
      }, [r.value && Ae(), g("div", {
        class: He.value
      }, [(w = (l = t.slots).default) == null ? void 0 : w.call(l), C.value === "iframe" && g("iframe", {
        title: i.value,
        class: "f-utils-fill",
        width: "100%",
        frameborder: "0",
        src: b.value
      }, null)]), Ye()]), !c.value && R.value && !N.value && $(R.value)]);
    }
    function Ke(l) {
      return l || "body";
    }
    return Je(() => {
      le.value && (ve.value = ge() || 1050);
    }), () => g(ye, {
      to: Ke(e.host)
    }, {
      default: () => [le.value && g(Ze, {
        name: "fade",
        appear: !0
      }, {
        default: () => [g("div", {
          ref: I,
          class: ke.value,
          style: ze.value,
          onClick: Ue
        }, [Xe()])]
      })]
    });
  }
});
function xe(e) {
  if (e.content && e.content.render)
    return e.content.render;
  if (e.render && typeof e.render == "function")
    return e.render;
}
function kt(e) {
  const t = document.createElement("div");
  t.style.display = "contents";
  const n = pe({
    setup(a, s) {
      de(() => {
        document.body.removeChild(t);
      });
      const i = o(), f = o(e.class || ""), c = o(!!e.showButtons), r = o(!!e.showHeader), m = o(e.showCloseButton == null ? !0 : e.showCloseButton), x = o(!!e.showFloatingClose), y = o(!0), T = o(e.title || ""), C = e.acceptCallback || (() => {
      }), b = e.rejectCallback || (() => {
      }), M = e.closedCallback || ((H) => {
      }), E = e.resizeHandle || ((H) => {
      }), S = e.stopMoveHandle || ((H) => {
      }), P = xe(e), I = (H) => {
        y.value = !1, n.unmount(), M(H);
      };
      return ne(() => {
      }), s.expose({
        modalRef: i
      }), () => g(Q, {
        ref: i,
        class: f.value,
        modelValue: y.value,
        "onUpdate:modelValue": (H) => y.value = H,
        title: T.value,
        width: e.width,
        height: e.height,
        buttons: e.buttons,
        "show-header": r.value,
        "show-buttons": c.value,
        "show-close-button": m.value,
        "show-max-button": !1,
        showFloatingClose: x.value,
        onAccept: C,
        onCancel: b,
        fitContent: e.fitContent == null ? !0 : e.fitContent,
        onClosed: I,
        onResize: E,
        onStopMove: S
      }, {
        default: () => [P && P(n)]
      });
    }
  });
  return document.body.appendChild(t), n.use(ae.i18n), n.mount(t), n;
}
class Tt {
  // private activeModalInstance = computed(() => {
  //     return this.modalRefs[this.activeModalIndex.value];
  // });
  constructor(t) {
    J(this, "appContext", null);
    J(this, "modalRef", o());
    J(this, "activeModalIndex", o(0));
    J(this, "modalRefs", {});
    J(this, "isUseEscCloseModal", o(!1));
    this.app = t, this.appContext = t ? t._context : null;
  }
  getCurrentModal() {
    return this.modalRefs[this.activeModalIndex.value];
  }
  adaptToWindow(t, n) {
    const {
      width: a,
      height: s
    } = {
      width: window.innerWidth,
      height: window.innerHeight
    };
    return a < t && (t = a - 14), s < n && (n = s - 14), {
      width: t,
      height: n
    };
  }
  static show(t) {
    const n = Object.assign({
      title: "",
      showButtons: !0,
      showHeader: !0
    }, t);
    return kt(n);
  }
  close(t) {
    var n, a;
    t ? (a = t.value) == null || a.close() : (n = this.getCurrentModal()) == null || n.close();
  }
  open(t) {
    const n = document.createDocumentFragment();
    t.showMaxButton && t.fitContent && (t.showMaxButton = !1);
    const a = Qe(Object.assign({
      title: "",
      showButtons: !0,
      showHeader: !0,
      maximized: !1
    }, t)), s = o(!0), i = a.value.acceptCallback || (() => {
    }), f = a.value.rejectCallback || (() => {
    }), c = a.value.closedCallback || ((v, k) => {
    }), r = a.value.openedCallback || ((v) => {
    }), m = a.value.resizeHandle || ((v) => {
    }), x = t.stopMoveHandle || ((v) => {
    });
    let y;
    const T = xe(a.value), C = (v) => {
      var F;
      s.value = !1;
      const k = (F = v == null ? void 0 : v.target) == null ? void 0 : F.classList.contains("modal_close");
      c(v, this.isUseEscCloseModal.value ? "esc" : k ? "icon" : "button");
    }, b = (v) => {
      C(v), y && Z(() => {
        if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], ie(null, n), y = null, this.modalRef.value = null, this.modalRefs) {
          const k = Object.keys(this.modalRefs).map((F) => Number(F));
          k.length > 0 ? this.activeModalIndex.value = Math.max(...k) : this.activeModalIndex.value = 0, this.modalRefs[this.activeModalIndex.value] && (this.modalRef.value = this.modalRefs[this.activeModalIndex.value]);
        }
        this.isUseEscCloseModal.value = !1;
      });
    }, M = (v) => {
      var k;
      this.isUseEscCloseModal.value = !0, (k = this.getCurrentModal()) == null || k.close(v == null ? void 0 : v.event);
    }, {
      width: E,
      height: S
    } = a.value, P = this.adaptToWindow(E || 500, S || 320);
    Object.assign(a.value, P);
    const I = o(), H = () => g(Q, be({
      ref: I,
      modelValue: s.value,
      "onUpdate:modelValue": (v) => s.value = v
    }, a.value, {
      isMessager: a.value.class && a.value.class.indexOf("modal-message") > -1,
      onAccept: i,
      onCancel: f,
      onClosed: b,
      onResize: m,
      onEsc: M,
      onStopMove: x,
      maximized: a.value.maximized
    }), {
      default: () => [T && T(this.app)]
    });
    y = ((v) => {
      const k = et(H, v);
      return k.appContext = this.appContext, ie(k, n), k;
    })({
      ...a.value
      // 'onUpdate:modelValue': onUpdateModelValue,
    }), this.activeModalIndex.value++;
    const W = this.activeModalIndex.value;
    this.modalRefs[W] = I.value;
    const h = (v) => {
      a.value = {
        ...a.value,
        ...v
      }, y && ie(tt(y, {
        ...a
      }), n);
    };
    return Z(() => {
      this.modalRefs[W] = I.value, this.modalRef.value = I.value, r(new Event("opened"));
    }), {
      update: h,
      destroy: b,
      modalRef: I,
      close: () => {
        var v;
        (v = I.value) == null || v.close();
      },
      disableButtons: (v, k = !0) => {
        var F;
        (F = I.value) == null || F.disableButtons(v, k);
      }
    };
  }
}
const Be = Symbol("FModalService");
Q.install = (e) => {
  e.component(Q.name, Q);
  const t = new Tt(e);
  e.provide(Be, t), e.provide("FModalService", t);
};
function Me(e, t) {
  function n() {
    const a = e.beforeOpen || e.beforeClickButton || null;
    let s = Promise.resolve(!0);
    if (a) {
      const i = a(t.value);
      if (typeof i > "u")
        return s;
      typeof i == "boolean" ? s = Promise.resolve(i) : s = i;
    }
    return s;
  }
  return { judgeCanOpen: n };
}
function Et(e, t, n, a, s) {
  const i = o(e.buttonBehavior), f = o(e.popupOnInput), c = O(() => ({
    "input-group-append": !0,
    "append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable)
  })), { judgeCanOpen: r } = Me(e, s), m = O(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable), x = nt(Be, null), y = o();
  async function T(M) {
    if (await r() && m.value) {
      const E = !!t.slots.default;
      if (i.value === "Modal") {
        const S = e.modalOptions, P = x == null ? void 0 : x.open({
          ...S,
          render: () => t.slots.default && t.slots.default()
        });
        y.value = P == null ? void 0 : P.modalRef;
      }
      i.value === "Overlay" && bt.show({
        // host: buttonEditRef.value,
        host: document.body,
        backgroundColor: "rgba(0,0,0,.15)",
        render: () => t.slots.default && t.slots.default()
      }), E && i.value === "Popup" && a.togglePopup(!0), E && f.value && a.hidePopup(), t.emit("clickButton", { origin: M, value: e.modelValue });
    }
  }
  function C(M) {
    t.emit("mouseEnterIcon", M);
  }
  function b(M) {
    t.emit("mouseLeaveIcon", M);
  }
  return {
    buttonGroupClass: c,
    onClickButton: T,
    onMouseEnterButton: C,
    onMouseLeaveButton: b,
    modalRef: y
  };
}
function Ot(e, t, n, a, s, i) {
  const f = o(!1), c = O(() => e.enableClear && !e.readonly && !e.disable && !te()), { changeTextBoxValue: r, hasClearClass: m } = i, x = o(!1);
  function y(E) {
    f.value = E, m.value = E;
  }
  const T = O(() => c.value && !!(s != null && s.value) && x.value);
  A(s, () => {
    y(T.value);
  });
  function C(E) {
    const S = !e.readonly && !e.disable && e.editable, P = !e.editable;
    E == null || E.stopPropagation(), (S || P) && (r(""), s.value = "", y(!f.value), t.emit("clear"));
  }
  function b(E) {
    if (x.value = !0, !!c.value) {
      if (!n.value) {
        y(!1);
        return;
      }
      !e.disable && !e.readonly && y(!0);
    }
  }
  function M(E) {
    x.value = !1, c.value && y(!1);
  }
  return {
    enableClearButton: c,
    showClearButton: f,
    onClearValue: C,
    onMouseEnterTextBox: b,
    onMouseLeaveTextBox: M
  };
}
function zt(e, t, n, a, s) {
  const i = O(() => e.popupOnInput), f = O(() => e.popupOnFocus), { shouldPopupContent: c, closeAllPopover: r } = s, m = o(!1), x = O(() => e.enableTitle ? n.value : ""), y = O(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), T = O(() => e.readonly || !e.editable || te()), C = o(!1), b = O(() => !e.disable && C.value), M = O(() => ({
    "text-left": e.textAlign === "left",
    "text-center": e.textAlign === "center",
    "text-right": e.textAlign === "right",
    "form-control": !0,
    "f-utils-fill": !0
  })), E = O(() => ({
    "input-group": !0,
    "f-state-disabled": e.disable,
    "f-state-editable": e.editable && !e.disable && !e.readonly,
    "f-state-readonly": e.readonly,
    "f-state-focus": b.value,
    "input-group--has-clear": e.enableClear && m.value
  }));
  function S(p, R = !0) {
    n.value = p, R && (t.emit("change", p), t.emit("update:modelValue", p));
  }
  function P(p) {
    c.value = !1, S(p, !0);
  }
  A(
    () => e.modelValue,
    (p) => {
      n.value = p;
    }
  );
  function I(p) {
    C.value = !1, t.emit("blur", p), p.stopPropagation();
  }
  function H(p) {
    t.emit("click", p), r(), t.slots.default && !e.disable && !e.readonly && e.popupOnClick && s.togglePopup();
  }
  function Y(p) {
    !e.disable && !e.readonly && (C.value = !0, T.value || (t.emit("focus", p), f.value && !c.value && s.popup()));
  }
  function W(p) {
    t.emit("input", p);
    const R = p.target.value;
    a.value = R, n.value !== R && S(R, e.updateOn === "change"), i.value && !c.value && s.popup();
  }
  function h(p) {
    p.target.tagName !== "INPUT" && p.preventDefault(), p.stopPropagation();
  }
  function v(p) {
    t.emit("keydown", p);
  }
  function k(p) {
    p.key === "Enter" && (i.value || f.value) && s.hidePopup(), t.emit("keyup", p);
  }
  function F(p) {
    const R = p.target.value;
    p.stopPropagation(), S(R);
  }
  return {
    hasFocusedTextBox: b,
    isTextBoxReadonly: T,
    textBoxClass: M,
    textBoxPlaceholder: y,
    textBoxTitle: x,
    inputGroupClass: E,
    hasClearClass: m,
    changeTextBoxValue: S,
    commitValue: P,
    onBlurTextBox: I,
    onClickTextBox: H,
    onFocusTextBox: Y,
    onInput: W,
    onKeyDownTextBox: v,
    onKeyUpTextBox: k,
    onMouseDownTextBox: h,
    onTextBoxValueChange: F
  };
}
const G = "FarrisVue_PopoverInstancesKey";
function Pt(e, t, n, a) {
  const s = o(), i = o(!1), { judgeCanOpen: f } = Me(e, a);
  A(() => s.value, (C, b) => {
    window[G] = window[G] || /* @__PURE__ */ new WeakMap(), C ? window[G].set(n.value, C) : window[G].delete(n.value);
  });
  function c() {
    if (window[G]) {
      const C = window[G];
      document.querySelectorAll(".f-button-edit,.v-popover").forEach((b) => {
        const M = C.get(b);
        M && b !== n.value && !n.value.closest(".popover-fitcontent") && M.hide();
      });
    }
  }
  function r() {
    const C = s.value;
    C && (C.show ? C.show(n.value) : C.open && C.open(n.value));
  }
  async function m(C = !1) {
    if (!!t.slots.default) {
      if (!C && !i.value && !await f())
        return;
      i.value = !i.value, i.value && (await Z(), r());
    }
  }
  async function x(C = !1) {
    if (!!t.slots.default) {
      if (!C && !await f())
        return;
      i.value = !0, await Z(), r();
    }
  }
  function y() {
    i.value = !1;
  }
  function T() {
    i.value = !0, Z(() => {
      r();
    });
  }
  return { hidePopup: y, showPopup: T, popup: x, shouldPopupContent: i, togglePopup: m, popoverRef: s, closeAllPopover: c };
}
function St(e, t, n) {
  const a = o(), {
    isTextBoxReadonly: s,
    textBoxClass: i,
    textBoxPlaceholder: f,
    textBoxTitle: c,
    onBlurTextBox: r,
    onClickTextBox: m,
    onFocusTextBox: x,
    onInput: y,
    onKeyDownTextBox: T,
    onKeyUpTextBox: C,
    onMouseDownTextBox: b,
    onTextBoxValueChange: M
  } = n, E = o(e.id), {
    uuid: S
  } = st(), P = O(() => ({
    // 'border-top-right-radius': '6px',
    // 'border-bottom-right-radius': '6px'
  }));
  ne(() => {
    var h, v;
    e.selectOnCreated && ((h = a.value) == null || h.select()), e.focusOnCreated && ((v = a.value) == null || v.focus({
      preventScroll: !0
    })), E.value || (E.value = "button-edit_" + S(8)), E.value = E.value + "-textbox";
  });
  const I = o(!1), H = (h) => {
    h.preventDefault(), I.value = !0;
  }, Y = (h) => {
    h.preventDefault(), I.value = !1, y(h);
  };
  function W(h) {
    I.value || y(h);
  }
  return () => g("input", {
    id: e.id ? e.id + "-textbox" : void 0,
    ref: a,
    name: "input-group-value",
    autocomplete: e.autoComplete ? "on" : "off",
    class: i.value,
    style: P.value,
    disabled: e.disable,
    maxlength: e.maxLength,
    minlength: e.minLength,
    placeholder: f.value,
    readonly: s.value,
    tabindex: e.tabIndex,
    title: c.value,
    type: e.inputType,
    value: t.value,
    onBlur: r,
    onChange: M,
    onClick: m,
    onFocus: x,
    onInput: W,
    onKeydown: T,
    onKeyup: C,
    onMousedown: b,
    onCompositionend: Y,
    onCompositionstart: H
  }, null);
}
function It(e, t, n) {
  const a = o(e.separator), s = O(() => e.readonly || e.disable), {
    changeTextBoxValue: i,
    onFocusTextBox: f,
    onBlurTextBox: c,
    onClickTextBox: r,
    textBoxPlaceholder: m
  } = n, x = O(() => t.value ? t.value.split(a.value).map((b) => ({
    name: b,
    selectable: !0
  })) : []);
  function y(b) {
    i(b.map((M) => M.name).join(a.value), !0);
  }
  A(() => e.separator, (b) => {
    a.value = b;
  });
  const T = o(!e.disable && !e.readonly);
  A([() => e.disable, () => e.readonly], ([b, M], [E, S]) => {
    T.value = !b && !M;
  });
  function C(b) {
    r(b);
  }
  return () => g(rt, {
    tabindex: e.tabIndex,
    onFocus: f,
    onBlur: c,
    id: `${e.id}-tag-editor`,
    class: "form-control",
    placeholder: m.value,
    data: x.value,
    showClose: !s.value,
    showInput: !0,
    disable: s.value,
    onChange: y,
    onClick: C
  }, null);
}
function Ht(e, t, n, a) {
  const {
    buttonGroupClass: s,
    onClickButton: i,
    onMouseEnterButton: f,
    onMouseLeaveButton: c
  } = n, {
    enableClearButton: r,
    showClearButton: m,
    onClearValue: x
  } = a, y = o(), T = we((M) => {
    i(M);
  }, e.buttonBehavior === "Modal" ? 0 : 200), C = () => {
    t.emit("beforeClearValue");
  }, {
    renderExpandContent: b
  } = ct(e, t);
  return {
    renderButtonGroup: () => g(ee, null, [g("div", {
      id: e.id ? `${e.id}-button-group` : void 0,
      class: s.value
    }, [r.value && lt(g("span", {
      class: "input-group-text input-group-clear",
      onClick: x,
      onMousedown: C
    }, [g("i", {
      class: "f-icon modal_close"
    }, null)]), [[at, m.value]]), t.slots.buttonContent ? g("span", {
      class: "input-group-text input-group-append-button",
      onClick: T,
      onMouseenter: f,
      onMouseleave: c
    }, [t.slots.buttonContent()]) : e.buttonContent ? g("span", {
      class: "input-group-text input-group-append-button",
      innerHTML: e.buttonContent,
      ref: y,
      onClick: (M) => T(M),
      onMouseenter: f,
      onMouseleav