@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,611 lines • 51.9 kB
JavaScript
var Ne = Object.defineProperty;
var Ae = (e, t, n) => t in e ? Ne(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var J = (e, t, n) => Ae(e, typeof t != "symbol" ? t + "" : t, n);
import { defineComponent as se, ref as o, computed as E, createVNode as y, Teleport as he, createApp as me, onUnmounted as re, Fragment as ne, watch as U, nextTick as Z, onBeforeMount as Xe, onMounted as le, watchEffect as Ue, Transition as Ke, shallowRef as Ye, render as ie, h as $e, cloneVNode as Ge, mergeProps as ge, inject as qe, withDirectives as _e, vShow as Je, onUpdated as Ze, onBeforeUnmount as Qe, createTextVNode as et } from "vue";
import { LocaleService as te } from "../locale/index.esm.js";
import { isMobilePhone as tt, getMaxZIndex as ve, useGuid as nt, withInstall as lt } from "../common/index.esm.js";
import "../property-panel/index.esm.js";
import at from "../tags/index.esm.js";
import { debounce as ot } from "lodash-es";
import ut from "../popover/index.esm.js";
const it = {
/**
* 组件标识
*/
id: { type: String, default: "" },
/**
* 扩展按钮显示内容，这是一段现在扩展按钮中的html标签
*/
buttonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
buttonBehavior: { type: String, default: "Popup" },
/**
* 启用输入框自动完成功能
*/
autoComplete: { type: Boolean, default: !1 },
/**
* 组件自定义样式
*/
customClass: { type: String, default: "" },
/**
* 禁用组件，既不允许在输入框中录入，也不允许点击扩展按钮。
*/
disable: { type: Boolean, default: !1 },
/**
* 允许在输入框中录入文本。
*/
editable: { type: Boolean, default: !0 },
/**
* 显示清空文本按钮
*/
enableClear: { type: Boolean, default: !1 },
/**
* 组件值
*/
modelValue: { type: String, default: "" },
/**
* 将组件设置为只读，既不允许在输入框中录入，也不允许点击扩展按钮，但是允许复制输入框中的内容。
*/
readonly: { type: Boolean, default: !1 },
/**
* 禁用组件时，是否显示扩展按钮
*/
showButtonWhenDisabled: { type: Boolean, default: !1 },
/**
* 鼠标悬停在组件上时显示文本框内容。
*/
enableTitle: { type: Boolean, default: !1 },
/**
* 输入框类型
*/
inputType: { type: String, default: "text" },
/**
* 显示输入框提示信息
*/
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 },
popupOnInput: { type: Boolean, default: !1 },
popupOnFocus: { type: Boolean, default: !1 },
popupOnClick: { type: Boolean, default: !1 },
/**
* 样式追加到弹出窗口
*/
popupClass: { type: String, default: "" },
popupMinWidth: { type: Number, default: 160 },
modalOptions: { type: Object, default: {} },
wrapText: { type: Boolean, default: !1 },
/**
* 可选，是否支持多选
* 默认`false`
*/
multiSelect: { type: Boolean, default: !1 },
/**
* 可选，分隔符
* 默认`,`
*/
separator: { type: String, default: "," },
/** 对齐方式 */
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 }
}, st = {
popupContentPosition: { type: Object, default: { left: 0, top: 0 } },
host: { type: Object },
backgroundColor: { type: String, default: "" }
}, rt = /* @__PURE__ */ se({
name: "FOverlay",
props: st,
emits: ["click"],
setup(e, t) {
const n = o(e.popupContentPosition), l = o(e.host), i = E(() => ({
backgroundColor: e.backgroundColor || "",
pointerEvents: "auto"
}));
function s(u) {
t.emit("click"), u.preventDefault(), u.stopPropagation();
}
E(() => {
const u = l.value;
if (u) {
const f = u.getBoundingClientRect(), {
left: g,
top: w,
height: p
} = f;
return {
left: g,
top: w + p
};
}
return n.value;
});
const c = E(() => ({
// position: 'relative',
// left: `${position.value.left}px`,
// top: `${position.value.top}px`
}));
return () => y(he, {
to: "body"
}, {
default: () => {
var u, f;
return [y("div", {
class: "overlay-container",
onClick: (g) => s(g),
style: i.value
}, [y("div", {
style: c.value
}, [(f = (u = t.slots).default) == null ? void 0 : f.call(u)])])];
}
});
}
});
function ct(e) {
if (e.content && e.content.render)
return e.content.render;
if (e.render && typeof e.render == "function")
return e.render;
}
function dt(e) {
const t = document.createElement("div");
t.style.display = "contents";
let n;
const l = e.onClickCallback || (() => {
}), i = () => {
l(), n && n.unmount();
};
return n = me({
setup() {
re(() => {
document.body.removeChild(t);
});
const s = ct(e);
return () => y(rt, {
"popup-content-position": e.popupPosition,
host: e.host,
onClick: i,
backgroundColor: e.backgroundColor
}, {
default: () => [s && s()]
});
}
}), document.body.appendChild(t), n.mount(t), n;
}
class ft {
static show(t) {
return dt(t);
}
}
const vt = {
/**
* 允许点击遮罩关闭对话框
*/
allowClickMaskToClose: { type: Boolean, default: !1 },
/**
* 关闭对话框前事件， 是个函数，返回true或者false
*/
beforeClose: { type: Function, default: () => !0 },
/**
* 自定义类
*/
class: { type: String, default: "" },
/**
* 自定义遮罩类
*/
maskClass: { type: String, default: "" },
/**
* 模态框标题
*/
title: { type: String, default: "" },
/**
* 模态框宽度
*/
width: { type: Number, default: 500 },
/**
* 模态框高度
*/
height: { type: Number, default: 320 },
/**
* 自定义按钮列表
*/
buttons: {
type: Array,
default: []
},
/**
* 是否展示模态框
*/
modelValue: { type: Boolean, default: !1 },
/**
* 是否模态
*/
mask: { type: Boolean, default: !0 },
/**
* 是否展示头部
*/
showHeader: { type: Boolean, default: !0 },
/**
* 是否展示默认按钮
*/
showButtons: { type: Boolean, default: !0 },
/**
* 是否启用自适应样式
*/
fitContent: { type: Boolean, default: !0 },
/**
* 是否展示右上角按钮
*/
showCloseButton: { type: Boolean, default: !0 },
showMaxButton: { type: Boolean, default: !1 },
minHeight: { type: Number },
maxHeight: { type: Number },
minWidth: { type: Number },
maxWidth: { type: Number },
containment: { type: Object, default: null },
resizeable: { type: Boolean, default: !1 },
draggable: { type: Boolean, default: !1 },
dragHandle: { type: Object, default: null },
closedCallback: { type: Function, default: null },
openedCallback: { type: Function, default: null },
// 窗口打开后的回调函数
resizeHandle: { type: Function, default: null },
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: "" },
footerHeight: { type: Number, default: 60 },
host: { type: Object, default: "body" },
isMessager: { type: Boolean, default: !1 },
maximized: { type: Boolean, default: !1 }
};
class F {
constructor(t, n) {
this.x = t, this.y = n;
}
static getTransformInfo(t) {
const l = window.getComputedStyle(t).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(",");
if (l.length >= 6) {
const i = parseInt(l[4], 10), s = parseInt(l[5], 10);
return { x: i, y: s };
}
return { x: 0, y: 0 };
}
static fromEvent(t, n = null) {
if (this.isMouseEvent(t))
return new F(t.clientX, t.clientY);
if (n === null || t.changedTouches.length === 1)
return new F(t.changedTouches[0].clientX, t.changedTouches[0].clientY);
for (let l = 0; l < t.changedTouches.length; l++)
if (t.changedTouches[l].target === n)
return new F(t.changedTouches[l].clientX, t.changedTouches[l].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 F(0, 0);
if (window) {
const l = window.getComputedStyle(t);
if (l) {
const i = parseInt(l.getPropertyValue("left"), 10), s = parseInt(l.getPropertyValue("top"), 10);
n.x = isNaN(i) ? 0 : i, n.y = isNaN(s) ? 0 : s;
}
return n;
}
return null;
}
static copy(t) {
return new F(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 l = window.getComputedStyle(t);
return l && (n.width = parseInt(l.getPropertyValue("width"), 10), n.height = parseInt(l.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 ht(e, t) {
const n = o(), l = o(), i = o(), s = o(), c = o(), u = o(), f = o(), g = o(), w = o(), p = o(), M = o(), x = o(e.resizeable), b = o(), k = o(e.draggable), z = o(!1);
function R() {
const r = l.value || document.body, h = window.getComputedStyle(r);
if (!h || !n.value)
return;
const S = F.getTransformInfo(n.value), T = {};
f.value && (T.deltaL = n.value.offsetLeft - f.value.x, T.deltaT = n.value.offsetTop - f.value.y);
const D = h.getPropertyValue("position");
T.width = r.clientWidth, T.height = r.clientHeight, T.pr = parseInt(h.getPropertyValue("padding-right"), 10), T.pb = parseInt(h.getPropertyValue("padding-bottom"), 10), T.position = h.getPropertyValue("position"), D === "static" && (r.style.position = "relative"), T.translateX = S.x, T.translateY = S.y, p.value = T;
}
function I(r) {
if (n.value) {
s.value = q.getCurrent(n.value), c.value = F.getCurrent(n.value), u.value = s.value ? q.copy(s.value) : null, f.value = c.value ? F.copy(c.value) : null, R();
const h = r.target.getAttribute("type") || "";
g.value = {
n: !!h.match(/n/),
s: !!h.match(/s/),
w: !!h.match(/w/),
e: !!h.match(/e/)
};
}
}
function O() {
var r, h, S, T;
if (n.value) {
const D = n.value;
g.value && ((g.value.n || g.value.s) && ((r = u.value) != null && r.height) && (D.style.height = u.value.height + "px"), (g.value.w || g.value.e) && ((h = u.value) != null && h.width) && (D.style.width = u.value.width + "px"), f.value && ((S = f.value) != null && S.x && (D.style.left = f.value.x + "px"), (T = f.value) != null && T.y && (D.style.top = f.value.y + "px")));
}
}
function V() {
const r = e.minHeight ? e.minHeight : 1, h = e.minWidth ? e.minWidth : 1;
u.value && f.value && g.value && s.value && (u.value.height < r && (u.value.height = r, g.value.n && c.value && (f.value.y = c.value.y + (s.value.height - r))), u.value.width < h && (u.value.width = h, g.value.w && c.value && (f.value.x = c.value.x + (s.value.width - h))), e.maxHeight && u.value.height > e.maxHeight && (u.value.height = e.maxHeight, c.value && g.value.n && (f.value.y = c.value.y + (s.value.height - e.maxHeight))), e.maxWidth && u.value.width > e.maxWidth && (u.value.width = e.maxWidth, g.value.w && c.value && (f.value.x = c.value.x + (s.value.width - e.maxWidth))));
}
function N() {
if (l.value) {
const r = p.value;
if (f.value && u.value && g.value && s.value) {
const h = r.width - r.pr - r.deltaL - r.translateX - f.value.x, S = r.height - r.pb - r.deltaT - r.translateY - f.value.y;
g.value.n && f.value.y + r.translateY < 0 && c.value && (f.value.y = -r.translateY, u.value.height = s.value.height + c.value.y + r.translateY), g.value.w && f.value.x + r.translateX < 0 && c.value && (f.value.x = -r.translateX, u.value.width = s.value.width + c.value.x + r.translateX), u.value.width > h && (u.value.width = h), u.value.height > S && (u.value.height = S);
}
}
}
function W(r) {
if (!i.value || !s.value || !c.value || !g.value)
return;
r.subtract(i.value);
const h = r.x, S = r.y;
g.value.n ? (f.value.y = c.value.y + S, u.value.height = s.value.height - S) : g.value.s && (u.value.height = s.value.height + S), g.value.e ? u.value.width = s.value.width + h : g.value.w && (u.value.width = s.value.width - h, f.value.x = c.value.x + h), N(), V(), O();
}
function d(r) {
if (!w.value)
return;
const h = F.fromEvent(r);
h && W(h);
}
function v() {
if (n.value) {
const {
width: r,
height: h,
x: S,
y: T
} = n.value.getBoundingClientRect(), D = F.getTransformInfo(n.value);
return {
size: {
width: r,
height: h
},
position: {
x: S - D.x,
y: T - D.y
}
};
}
return null;
}
function B(r) {
if (n.value) {
const h = v();
M.value = h;
}
i.value = void 0, s.value = null, c.value = null, u.value = null, f.value = null, g.value = null, w.value = null, document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", B);
}
function L() {
document.addEventListener("mousemove", d), document.addEventListener("mouseup", B);
}
function m(r) {
r instanceof MouseEvent && r.button === 2 || k.value && (document.body.click(), r.stopPropagation(), r.preventDefault(), i.value = F.fromEvent(r), w.value = r.target, I(r), L());
}
function H(r) {
return n.value = r, x.value && y(ne, null, [y("div", {
class: "fv-resizable-handle fv-resizable-n",
type: "n",
onMousedown: (h) => m(h)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-e",
type: "e",
onMousedown: (h) => m(h)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-s",
type: "s",
onMousedown: (h) => m(h)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-w",
type: "w",
onMousedown: (h) => m(h)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-ne",
type: "ne",
onMousedown: (h) => m(h)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal",
type: "se",
onMousedown: (h) => m(h)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-sw",
type: "sw",
onMousedown: (h) => m(h)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-nw",
type: "nw",
onMousedown: (h) => m(h)
}, null)]);
}
function _(r = !0) {
document.body.click();
const h = l.value || document.body, S = q.getCurrent(h), T = n.value;
r && T && (b.value = v(), b.value.transform = T.style.transform), S && T && (u.value = S, u.value.height -= 14, u.value.width -= 14, T.style.height = u.value.height + "px", T.style.width = u.value.width + "px", T.style.left = "7px", T.style.top = "7px", T.style.transform = "", M.value = {
size: u.value,
position: {
x: 0,
y: 0
}
}, k.value = !1, z.value = !0);
}
function K() {
var r, h;
if (document.body.click(), b.value) {
const S = {
width: b.value.size.width || 0,
height: b.value.size.height || 0
}, T = {
x: (window.innerWidth - S.width) / 2,
y: (window.innerHeight - S.height) / 2
};
(r = u.value) == null || r.set(S), (h = f.value) == null || h.set(T);
const D = n.value;
D.style.height = S.height + "px", D.style.width = S.width + "px", D.style.left = `${T.x}px`, D.style.top = `${T.y}px`, D.style.transform = "", M.value = {
size: S,
position: T
}, k.value = e.draggable, z.value = !1;
}
}
function $() {
if (n.value) {
const r = q.getCurrent(n.value);
if (r) {
const {
width: h,
height: S
} = r;
n.value.style.left = `${(window.innerWidth - h) / 2}px`, n.value.style.top = `${(window.innerHeight - S) / 2}px`, n.value.style.transform = "";
}
}
}
function P() {
const r = () => {
z.value ? _(!1) : $(), document.body.click();
};
return window.addEventListener("resize", r), () => {
window.removeEventListener("resize", r);
};
}
const A = P();
return {
renderResizeBar: H,
boundingElement: l,
resizedEventParam: M,
maximize: _,
restore: K,
allowDrag: k,
isMaximized: z,
unWindowResizeHandle: A,
moveToCenter: $
};
}
function mt(e, t, n) {
const l = o(), i = o(e.draggable), s = o(e.lockAxis), c = o(), u = o(), f = o(!1), g = o(new F(0, 0)), w = o(new F(0, 0)), p = o(new F(0, 0)), M = o(new F(0, 0));
U(() => n.value, (d) => {
c.value.style.cursor = d ? "move" : "default";
});
function x(d, v) {
if (v.tagName === "BUTTON")
return !1;
if (v === d)
return !0;
for (const B in v.children)
if (Object.prototype.hasOwnProperty.call(v.children, B) && x(d, v.children[B]))
return !0;
return !1;
}
function b() {
var L, m;
let d = p.value.x + w.value.x, v = p.value.y + w.value.y;
s.value === "x" ? (d = ((L = g.value) == null ? void 0 : L.x) || 0, p.value.x = 0) : s.value === "y" && (v = ((m = g.value) == null ? void 0 : m.y) || 0, p.value.y = 0);
const B = `translate3d(${Math.round(d)}px, ${Math.round(v)}px, 0px)`;
l.value && (l.value.style.transform = B), M.value.x = d, M.value.y = v;
}
function k() {
if (!u.value || !l.value)
return null;
const d = u.value.getBoundingClientRect(), v = l.value.getBoundingClientRect(), B = {
top: d.top < v.top,
right: d.right > v.right,
bottom: d.bottom > v.bottom,
left: d.left < v.left
};
return B.top || (p.value.y -= v.top - d.top), B.bottom || (p.value.y -= v.bottom - d.bottom), B.right || (p.value.x -= v.right - d.right), B.left || (p.value.x -= v.left - d.left), b(), B;
}
function z(d) {
d && (g.value && d.subtract(g.value), p.value.set(d), b(), k());
}
function R(d) {
f.value && i.value && (d.stopPropagation(), d.preventDefault(), z(F.fromEvent(d, c.value)));
}
function I() {
var d;
f.value && (f.value = !1, w.value.add(p.value), p.value.reset(), (d = l.value) == null || d.classList.remove("ng-dragging"), t.emit("stopMove"), document.removeEventListener("mousemove", R), document.removeEventListener("mouseup", I));
}
function O() {
!f.value && c.value && (f.value = !0, c.value.classList.add("ng-dragging"), document.addEventListener("mousemove", R), document.addEventListener("mouseup", I));
}
function V() {
if (l.value) {
const d = F.getTransformInfo(l.value);
w.value.set(d);
return;
}
w.value.reset();
}
function N(d) {
if (!n.value || d instanceof MouseEvent && d.button === 2)
return;
const v = d.target || d.srcElement;
c.value !== void 0 && v && !x(v, c.value) || i.value !== !1 && (document.body.click(), d.stopPropagation(), d.preventDefault(), g.value = F.fromEvent(d, l.value), V(), O());
}
function W(d, v, B) {
if (i.value && v) {
if (d)
c.value = d;
else if (e.dragHandle) {
if (e.dragHandle instanceof HTMLElement)
c.value = e.dragHandle;
else if (typeof e.dragHandle == "string") {
const L = v.querySelector(e.dragHandle);
L && (c.value = L);
}
}
l.value = v, u.value = B, c.value ? (c.value.classList.add("ng-draggable"), c.value.addEventListener("mousedown", N)) : i.value = !1;
}
}
return {
registerDraggle: W,
resetTranslate: V
};
}
function ye(e, t) {
if (e) {
const n = (l) => {
l.key.toLowerCase() === e.toLowerCase() && t({ event: l, key: e });
};
return document.addEventListener("keydown", n), () => {
document.removeEventListener("keydown", n);
};
}
}
function gt(e, t) {
const n = o(e.enableEsc);
let l = null;
return n.value ? (l = ye("Escape", (i) => {
t.emit("esc", { event: i.event, type: "esc" });
}), {
remove: l
}) : null;
}
function yt(e, t) {
const n = o(e.enableEnter);
let l = null;
return n.value ? (l = ye("Enter", (i) => {
t.emit("enter", { event: i.event, type: "enter" });
}), {
remove: l
}) : null;
}
const Q = /* @__PURE__ */ se({
name: "FModal",
props: vt,
emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove"],
setup(e, t) {
const n = o(e.width || 300), l = o(e.height || 200), i = o(e.modelValue), s = o(""), c = o(e.class), u = o(e.fitContent), f = o(e.showHeader), g = o(""), w = o(e.showCloseButton), p = o(e.showMaxButton), M = o(!1), x = o(e.dialogType), b = o(e.src), k = o(""), z = o(e.showButtons), R = o(e.title), I = o(e.containment || null), O = o();
R.value === "错误提示" && (R.value = te.getLocaleValue("messageBox.errorTitle"));
const V = o(!1);
function N(a, C) {
const j = C ? "accept" : "cancel";
Promise.resolve().then(() => {
var X;
return (X = e.beforeClose) == null ? void 0 : X.call(e, {
closeType: j
});
}).then((X) => {
X && (i.value = !1, t.emit("update:modelValue", !1), C != null && t.emit(C ? "accept" : "cancel"), t.emit("closed", a));
});
}
const W = [{
name: "cancel",
text: te.getLocaleValue("messageBox.cancel") || "取消",
class: "btn btn-secondary",
handle: (a) => {
N(a, !1);
}
}, {
name: "accept",
text: te.getLocaleValue("messageBox.ok") || "确定",
class: "btn btn-primary",
handle: (a) => {
N(a, !0);
}
}], d = o(e.buttons && e.buttons.length ? e.buttons : W), v = E(() => !!g.value), B = E(() => !!z.value && !!d.value), L = o(), m = o(), H = o(e.maximized || !1), {
renderResizeBar: _,
maximize: K,
restore: $,
boundingElement: P,
resizedEventParam: A,
allowDrag: r,
unWindowResizeHandle: h,
moveToCenter: S
} = ht(e), {
registerDraggle: T
} = mt(e, t, r);
function D() {
return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open");
}
function Ce() {
const a = document.querySelectorAll(".farris-modal").length;
(!a || a - 1 <= 0) && document.body.classList.remove("modal-open"), O.value && O.value.classList.remove("show");
}
U(() => e.title, (a, C) => {
a !== C && (R.value = a);
}), U(() => e.modelValue, (a, C) => {
a !== C && (i.value = a, i.value && e.draggable && Z(() => {
m.value && !I.value && (I.value = m.value.parentElement, P.value = I.value, T(L.value, m.value, P.value), S());
}), a || (I.value && (I.value = null), Ce())), i.value ? V.value = D() : (H.value = !1, r.value = e.draggable);
}), U(() => e.showHeader, (a, C) => {
a !== C && (f.value = a);
}), U(() => e.showButtons, (a, C) => {
a !== C && (z.value = a);
}), U(() => A.value, (a, C) => {
const j = a || {}, X = C || {};
JSON.stringify(j) !== JSON.stringify(X) && t.emit("resize", {
newSize: a,
oldSize: C,
isMaximized: H.value
});
}), U([() => e.width, () => e.height], (a, C) => {
(a[0] !== C[0] || a[1] !== C[1]) && (n.value = a[0] || 500, l.value = a[1] || 600);
}), U(() => e.class, (a, C) => {
c.value = a;
});
const ee = E(() => (i.value && document.body.classList.add("modal-open"), i.value)), xe = E(() => {
var j;
const a = {
modal: !0,
"farris-modal": !0,
fade: !0
};
a["f-modal-fitContent"] = !!u.value, a.show = !!ee.value;
const C = (j = e.maskClass) == null ? void 0 : j.split(" ");
return C == null || C.reduce((X, Y) => (X[Y] = !0, X), a), a;
}), Be = E(() => {
var j;
const a = {
"modal-dialog": !0
}, C = (j = c.value) == null ? void 0 : j.split(" ");
return C == null || C.reduce((X, Y) => (X[Y] = !0, X), a), a;
}), ce = () => tt() && !e.isMessager, Me = E(() => {
const a = document.documentElement.clientWidth, C = document.documentElement.clientHeight;
if (H.value)
return {
position: "fixed",
top: "0px",
left: "0px",
width: "100vw",
height: "100vh",
margin: "0"
};
const j = Math.min(n.value, a), X = u.value ? "auto" : `${Math.min(l.value, C - 10)}px`, Y = {
position: "absolute",
top: `${(window.innerHeight - parseInt(X === "auto" ? "0" : X)) / 2}px`,
left: `${(window.innerWidth - j) / 2}px`,
width: `${j}px`,
height: X
};
return ce() && (Y.top = "0px", Y.left = "0px", Y.width = `${window.innerWidth}px`, Y.height = `${window.innerHeight}px`), e.mask || (Y.pointerEvents = "auto"), Y;
}), de = o(ve() || 1050), ke = E(() => {
const a = {
display: "block",
overflow: "hidden"
};
return e.mask || (a.pointerEvents = "none", a.backgroundColor = "transparent"), V.value && (a.backgroundColor = "transparent"), a.zIndex = de.value, a;
}), Te = E(() => ({
"modal-content": !0,
"modal-content-has-header": f.value,
"is-mobile": ce()
})), Ee = E(() => {
const a = {
display: f.value ? "" : "none"
};
return a["pointer-events"] = r.value ? "auto" : "none", a;
}), Oe = E(() => ({
"f-icon": !0,
modal_maximize: !0,
modalrevert: H.value
})), ze = E(() => ({
"modal-body": !0,
"f-utils-flex-column": x.value === "iframe",
"f-utils-fill": !0
}));
function Pe() {
return {
height: `${e.footerHeight || 60}px`
};
}
const Se = E(() => {
const a = {
textAlgin: k.value
}, C = Pe();
return Object.assign(a, C);
});
function ae(a) {
if (a == null || a.stopPropagation(), H.value) {
H.value = !1, $();
return;
}
K(), H.value = !0;
}
async function Re(a, C) {
a.handle && await a.handle(C, a) && t.emit("closed", C);
}
function Ie(a) {
a.width && (n.value = a.width), a.height && (l.value = a.height), a.buttons && (d.value = a.buttons), a.title && (R.value = a.title);
}
let oe = null, ue = null;
Xe(() => {
V.value = D();
}), le(() => {
m.value && !I.value && (I.value = m.value.parentElement, P.value = I.value, T(L.value, m.value, P.value)), ee.value && document.body.classList.add("modal-open"), oe = gt(e, t), ue = yt(e, t);
}), re(() => {
h && h(), oe && oe.remove(), ue && ue.remove();
}), t.expose({
modalElementRef: m,
updateModalOptions: Ie,
close: N,
maxDialog: ae,
isMaximized: H,
disableButtons: (a, C = !0) => {
d.value.forEach((j) => {
j.name && a.includes(j.name) && (j.disabled = C);
});
}
});
function He() {
return y("ul", null, [M.value && y("li", {
class: "f-btn-icon f-bare"
}, [y("span", {
class: "f-icon modal_minimize"
}, null)]), p.value && y("li", {
onClick: ae,
class: "f-btn-icon f-bare",
style: "pointer-events: auto;"
}, [y("span", {
class: Oe.value
}, null)]), w.value && y("li", {
class: "f-btn-icon f-bare",
onClick: (a) => N(a, !1),
style: "pointer-events: auto;"
}, [y("span", {
class: "f-icon modal_close"
}, null)])]);
}
function Le() {
return y("div", {
class: "modal-footer",
style: Se.value
}, [d.value && d.value.map((a) => {
const C = o(a.disabled);
return y("button", {
name: a.name,
style: a.styles,
type: "button",
disabled: C.value,
class: a.class + (a.iconClass ? " btn-icontext" : ""),
onClick: (j) => {
Re(a, j);
}
}, [!!a.iconClass && y("i", {
class: a.iconClass
}, null), a.text]);
})]);
}
function fe(a) {
p.value && ae();
}
function je() {
return y(ne, null, [H.value && y("div", {
class: "modal-header",
style: "position: absolute;background: transparent;height: 45px;width: 100%;",
onDblclick: (a) => fe()
}, null), y("div", {
ref: L,
class: "modal-header",
style: Ee.value,
onDblclick: (a) => fe()
}, [t.slots.headerTemplate ? t.slots.headerTemplate() : y("div", {
class: "modal-title"
}, [v.value && y("span", {
class: g.value,
style: "margin-right: 8px"
}, null), y("span", {
class: "modal-title-label"
}, [R.value])]), y("div", {
class: "actions"
}, [He()])])]);
}
function Fe() {
return t.slots.footerTemplate ? t.slots.footerTemplate() : B.value && Le();
}
function We(a) {
if (a.stopPropagation(), e.allowClickMaskToClose) {
if (a.target !== O.value)
return;
N(a, !1);
}
}
function De() {
var a, C;
return y("div", {
id: s.value,
class: Be.value,
style: Me.value,
ref: m
}, [y("div", {
class: Te.value
}, [f.value && je(), y("div", {
class: ze.value
}, [(C = (a = t.slots).default) == null ? void 0 : C.call(a), x.value === "iframe" && y("iframe", {
title: s.value,
class: "f-utils-fill",
width: "100%",
frameborder: "0",
src: b.value
}, null)]), Fe()]), !u.value && m.value && !H.value && _(m.value)]);
}
function Ve(a) {
return a || "body";
}
return Ue(() => {
ee.value && (de.value = ve() || 1050);
}), () => y(he, {
to: Ve(e.host)
}, {
default: () => [ee.value && y(Ke, {
name: "fade",
appear: !0
}, {
default: () => [y("div", {
ref: O,
class: xe.value,
style: ke.value,
onClick: We
}, [De()])]
})]
});
}
});
function be(e) {
if (e.content && e.content.render)
return e.content.render;
if (e.render && typeof e.render == "function")
return e.render;
}
function bt(e) {
const t = document.createElement("div");
t.style.display = "contents";
const n = me({
setup(l, i) {
re(() => {
document.body.removeChild(t);
});
const s = o(), c = o(e.class || ""), u = o(!!e.showButtons), f = o(!!e.showHeader), g = o(e.showCloseButton == null ? !0 : e.showCloseButton), w = o(!0), p = o(e.title || ""), M = e.acceptCallback || (() => {
}), x = e.rejectCallback || (() => {
}), b = e.closedCallback || ((O) => {
}), k = e.resizeHandle || ((O) => {
}), z = e.stopMoveHandle || ((O) => {
}), R = be(e), I = (O) => {
w.value = !1, n.unmount(), b(O);
};
return le(() => {
}), i.expose({
modalRef: s
}), () => y(Q, {
ref: s,
class: c.value,
modelValue: w.value,
"onUpdate:modelValue": (O) => w.value = O,
title: p.value,
width: e.width,
height: e.height,
buttons: e.buttons,
"show-header": f.value,
"show-buttons": u.value,
"show-close-button": g.value,
"show-max-button": !1,
onAccept: M,
onCancel: x,
fitContent: e.fitContent == null ? !0 : e.fitContent,
onClosed: I,
onResize: k,
onStopMove: z
}, {
default: () => [R && R(n)]
});
}
});
return document.body.appendChild(t), n.use(te.i18n), n.mount(t), n;
}
class pt {
// 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: l,
height: i
} = {
width: window.innerWidth,
height: window.innerHeight
};
return l < t && (t = l - 14), i < n && (n = i - 14), {
width: t,
height: n
};
}
static show(t) {
const n = Object.assign({
title: "",
showButtons: !0,
showHeader: !0
}, t);
return bt(n);
}
close(t) {
var n, l;
t ? (l = t.value) == null || l.close() : (n = this.getCurrentModal()) == null || n.close();
}
open(t) {
const n = document.createDocumentFragment();
t.showMaxButton && t.fitContent && (t.showMaxButton = !1);
const l = Ye(Object.assign({
title: "",
showButtons: !0,
showHeader: !0,
maximized: !1
}, t)), i = o(!0), s = l.value.acceptCallback || (() => {
}), c = l.value.rejectCallback || (() => {
}), u = l.value.closedCallback || ((v, B) => {
}), f = l.value.openedCallback || ((v) => {
}), g = l.value.resizeHandle || ((v) => {
}), w = t.stopMoveHandle || ((v) => {
});
let p;
const M = be(l.value), x = (v) => {
var L;
i.value = !1;
const B = (L = v == null ? void 0 : v.target) == null ? void 0 : L.classList.contains("modal_close");
u(v, this.isUseEscCloseModal.value ? "esc" : B ? "icon" : "button");
}, b = (v) => {
x(v), p && Z(() => {
if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], ie(null, n), p = null, this.modalRef.value = null, this.modalRefs) {
const B = Object.keys(this.modalRefs).map((L) => Number(L));
B.length > 0 ? this.activeModalIndex.value = Math.max(...B) : this.activeModalIndex.value = 0;
}
this.isUseEscCloseModal.value = !1;
});
}, k = (v) => {
var B;
this.isUseEscCloseModal.value = !0, (B = this.getCurrentModal()) == null || B.close(v == null ? void 0 : v.event);
}, {
width: z,
height: R
} = l.value, I = this.adaptToWindow(z || 500, R || 320);
Object.assign(l.value, I);
const O = o(), V = () => y(Q, ge({
ref: O,
modelValue: i.value,
"onUpdate:modelValue": (v) => i.value = v
}, l.value, {
isMessager: l.value.class && l.value.class.indexOf("modal-message") > -1,
onAccept: s,
onCancel: c,
onClosed: b,
onResize: g,
onEsc: k,
onStopMove: w,
maximized: l.value.maximized
}), {
default: () => [M && M(this.app)]
});
p = ((v) => {
const B = $e(V, v);
return B.appContext = this.appContext, ie(B, n), B;
})({
...l.value
// 'onUpdate:modelValue': onUpdateModelValue,
}), this.activeModalIndex.value++;
const W = this.activeModalIndex.value;
this.modalRefs[W] = O.value;
const d = (v) => {
l.value = {
...l.value,
...v
}, p && ie(Ge(p, {
...l
}), n);
};
return Z(() => {
this.modalRefs[W] = O.value, this.modalRef.value = O.value, f(new Event("opened"));
}), {
update: d,
destroy: b,
modalRef: this.modalRef,
close: () => {
this.modalRefs[W] && this.modalRefs[W].close();
},
disableButtons: (v, B = !0) => {
this.modalRefs[W] && this.modalRefs[W].disableButtons(v, B);
}
};
}
}
const pe = Symbol("FModalService");
Q.install = (e) => {
e.component(Q.name, Q);
const t = new pt(e);
e.provide(pe, t), e.provide("FModalService", t);
};
function we(e, t) {
function n() {
const l = e.beforeOpen || e.beforeClickButton || null;
let i = Promise.resolve(!0);
if (l) {
const s = l(t.value);
if (typeof s > "u")
return i;
typeof s == "boolean" ? i = Promise.resolve(s) : i = s;
}
return i;
}
return { judgeCanOpen: n };
}
function wt(e, t, n, l, i) {
const s = o(e.buttonBehavior), c = o(e.popupOnInput), u = E(() => ({
"input-group-append": !0,
"append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable)
})), { judgeCanOpen: f } = we(e, i), g = E(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable), w = qe(pe, null), p = o();
async function M(k) {
if (await f() && g.value) {
const z = !!t.slots.default;
if (s.value === "Modal") {
const R = e.modalOptions, I = w == null ? void 0 : w.open({
...R,
render: () => t.slots.default && t.slots.default()
});
p.value = I == null ? void 0 : I.modalRef;
}
s.value === "Overlay" && ft.show({
// host: buttonEditRef.value,
host: document.body,
backgroundColor: "rgba(0,0,0,.15)",
render: () => t.slots.default && t.slots.default()
}), z && s.value === "Popup" && l.togglePopup(!0), z && c.value && l.hidePopup(), t.emit("clickButton", { origin: k, value: e.modelValue });
}
}
function x(k) {
t.emit("mouseEnterIcon", k);
}
function b(k) {
t.emit("mouseLeaveIcon", k);
}
return {
buttonGroupClass: u,
onClickButton: M,
onMouseEnterButton: x,
onMouseLeaveButton: b,
modalRef: p
};
}
function Ct(e, t, n, l, i, s) {
const c = o(!1), u = E(() => e.enableClear && !e.readonly && !e.disable), { changeTextBoxValue: f, hasClearClass: g } = s;
function w(b) {
c.value = b, g.value = b;
}
U(i, () => {
w(!!i.value);
});
function p(b) {
const k = !e.readonly && !e.disable && e.editable, z = !e.editable;
b.stopPropagation(), (k || z) && (f(""), i.value = "", w(!c.value), t.emit("clear"));
}
function M(b) {
if (u.value) {
if (!n.value) {
w(!1);
return;
}
!e.disable && !e.readonly && w(!0);
}
}
function x(b) {
u.value && w(!1);
}
return {
enableClearButton: u,
showClearButton: c,
onClearValue: p,
onMouseEnterTextBox: M,
onMouseLeaveTextBox: x
};
}
function xt(e, t, n, l, i) {
const s = E(() => e.popupOnInput), c = E(() => e.popupOnFocus), { shouldPopupContent: u, closeAllPopover: f } = i, g = o(!1), w = E(() => e.enableTitle ? n.value : ""), p = E(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), M = E(() => e.readonly || !e.editable), x = o(!1), b = E(() => !e.disable && x.value), k = E(() => ({
"text-left": e.textAlign === "left",
"text-center": e.textAlign === "center",
"text-right": e.textAlign === "right",
"form-control": !0,
"f-utils-fill": !0
})), z = E(() => ({
"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 && g.value
}));
function R(m, H = !0) {
n.value = m, H && (t.emit("change", m), t.emit("update:modelValue", m));
}
function I(m) {
u.value = !1, R(m, !0);
}
U(
() => e.modelValue,
(m) => {
n.value = m;
}
);
function O(m) {
x.value = !1, t.emit("blur", m), m.stopPropagation();
}
function V(m) {
t.emit("click", m), f(), t.slots.default && !e.disable && !e.readonly && e.popupOnClick && i.togglePopup();
}
function N(m) {
!e.disable && !e.readonly && (x.value = !0, M.value || (t.emit("focus", m), c.value && !u.value && i.popup()));
}
function W(m) {
t.emit("input", m);
const H = m.target.value;
l.value = H, n.value !== H && R(H, e.updateOn === "change"), s.value && !u.value && i.popup();
}
function d(m) {
m.target.tagName !== "INPUT" && m.preventDefault(), m.stopPropagation();
}
function v(m) {
t.emit("keydown", m);
}
function B(m) {
m.key === "Enter" && (s.value || c.value) && i.hidePopup(), t.emit("keyup", m);
}
function L(m) {
const H = m.target.value;
m.stopPropagation(), R(H);
}
return {
hasFocusedTextBox: b,
isTextBoxReadonly: M,
textBoxClass: k,
textBoxPlaceholder: p,
textBoxTitle: w,
inputGroupClass: z,
hasClearClass: g,
changeTextBoxValue: R,
commitValue: I,
onBlurTextBox: O,
onClickTextBox: V,
onFocusTextBox: N,
onInput: W,
onKeyDownTextBox: v,
onKeyUpTextBox: B,
onMouseDownTextBox: d,
onTextBoxValueChange: L
};
}
const G = "FarrisVue_PopoverInstancesKey";
function Bt(e, t, n, l) {
const i = o(), s = o(!1), { judgeCanOpen: c } = we(e, l);
U(() => i.value, (x, b) => {
window[G] = window[G] || /* @__PURE__ */ new WeakMap(), x ? window[G].set(n.value, x) : window[G].delete(n.value);
});
function u() {
if (window[G]) {
const x = window[G];
document.querySelectorAll(".f-button-edit,.v-popover").forEach((b) => {
const k = x.get(b);
k && b !== n.value && !n.value.closest(".popover-fitcontent") && k.hide();
});
}
}
function f() {
const x = i.value;
x && x.show(n.value);
}
async function g(x = !1) {
if (!!t.slots.default) {
if (!x && !s.value && !await c())
return;
s.value = !s.value, s.value && (await Z(), f());
}
}
async function w(x = !1) {
if (!!t.slots.default) {
if (!x && !await c())
return;
s.value = !0, await Z(), f();
}
}
function p() {
s.value = !1;
}
function M() {
s.value = !0, Z(() => {
f();
});
}
return { hidePopup: p, showPopup: M, popup: w, shouldPopupContent: s, togglePopup: g, popoverRef: i, closeAllPopover: u };
}
function Mt(e, t, n) {
const l = o(), {
isTextBoxReadonly: i,
textBoxClass: s,
textBoxPlaceholder: c,
textBoxTitle: u,
onBlurTextBox: f,
onClickTextBox: g,
onFocusTextBox: w,
onInput: p,
onKeyDownTextBox: M,
onKeyUpTextBox: x,
onMouseDownTextBox: b,
onTextBoxValueChange: k
} = n, z = o(e.id), {
uuid: R
} = nt(), I = E(() => ({
// 'border-top-right-radius': '6px',
// 'border-bottom-right-radius': '6px'
}));
le(() => {
var d, v;
e.selectOnCreated && ((d = l.value) == null || d.select()), e.focusOnCreated && ((v = l.value) == null || v.focus({
preventScroll: !0
})), z.value || (z.value = "button-edit_" + R(8)), z.value = z.value + "-textbox";
});
const O = o(!1), V = (d) => {
d.preventDefault(), O.value = !0;
}, N = (d) => {
d.preventDefault(), O.value = !1, p(d);
};
function W(d) {
O.value || p(d);
}
return () => y("input", {
id: e.id ? e.id + "-textbox" : void 0,
ref: l,
name: "input-group-value",
autocomplete: e.autoComplete ? "on" : "off",
class: s.value,
style: I.value,
disabled: e.disable,
maxlength: e.maxLength,
minlength: e.minLength,
placeholder: c.value,
readonly: i.value,
tabindex: e.tabIndex,
title: u.value,
type: e.inputType,
value: t.value,
onBlur: f,
onChange: k,
onClick: g,
onFocus: w,
onInput: W,
onKeydown: M,
onKeyup: x,
onMousedown: b,
onCompositionend: N,
onCompositionstart: V
}, null);
}
function kt(e, t, n) {
const l = o(e.separator), i = E(() => e.readonly || e.disable), {
changeTextBoxValue: s,
onFocusTextBox: c,
onBlurTextBox: u,
onClickTextBox: f,
textBoxPlaceholder: g
} = n, w = E(() => t.value ? t.value.split(l.value).map((b) => ({
name: b,
selectable: !0
})) : []);
function p(b) {
s(b.map((k) => k.name).join(l.value), !0);
}
U(() => e.separator, (b) => {
l.value = b;
});
const M = o(!e.disable && !e.readonly);
U([() => e.disable, () => e.readonly], ([b, k], [z, R]) => {
M.value = !b && !k;
});
function x(b) {
f(b);
}
return () => y(at, {
tabindex: e.tabIndex,
onFocus: c,
onBlur: u,
id: `${e.id}-tag-editor`,
class: "form-control",
placeholder: g.value,
data: w.value,
showClose: !i.value,
showInput: !0,
disable: i.value,
onChange: p,
onClick: x
}, null);
}
function Tt(e, t, n, l) {
const {
buttonGroupClass: i,
onClickButton: s,
onMouseEnterButton: c,
onMouseLeaveButton: u
} = n, {
enableClearButton: f,
showClearButton: g,
onClearValue: w
} = l, p = o(), M = ot((b) => {
s(b);
}, e.buttonBehavior === "Modal" ? 0 : 200), x = () => {
t.emit("beforeClearValue");
};
return {
renderButtonGroup: () => y("div", {
id: e.id ? `${e.id}-button-group` : void 0,
class: i.value
}, [f.value && _e(y("span", {
class: "input-group-text input-group-clear",
onClick: w,
onMousedown: x
}, [y("i", {
class: "f-icon modal_close"
}, null)]), [[Je, g.value]]), t.slots.buttonContent ? y("span", {
class: "input-group-text input-group-append-button",
onClick: M,
onMouseenter: c,
onMouseleave: u
}, [t.slots.buttonContent()]) : e.buttonContent ? y("span", {
class: "input-group-text input-group-append-button",
innerHTML: e.buttonContent,
ref: p,
onClick: (b) => M(b),
onMouseenter: c,
onMouseleave: u
}, null) : null]),
buttonHandleElement: p
};
}
function Et(e, t, n) {
const l = o(e.popupMinWidth), {
hidePopup: i,
popoverRef: s
} = n, c = () => {
t.emit("shown");
};
return () => y(ut, {
id: `${e.id}-popover`,
ref: s,
placement: e.placement,
host: e.popupHost,
"keep-width-with-reference": e.keepWidthWithReference,
fitContent: !0,
"right-boundary": e.popupRightBoundary,
minWidth: l.value,
class: e.popupClass,
offsetX: e.popupOffsetX,
onHidden: i,
onShown: c,
beforeClose: e.beforeClosePopup,
limitContentBySpace: e.limitContentBySpace
}, {
default: () => {
var u, f;
return [(f = (u = t.slots).default) == null ? void 0 : f.call(u)];
}
});
}
const Ot = /* @__PURE__ */ se({
name: "FButtonEdit",
props: it,
emits: ["updateExtendInfo", "clear", "change", "click", "clickButton", "blur", "focus", "mouseEnterIcon", "mouseLeaveIcon", "keyup", "keydown", "inputClick", "input", "update:modelValue", "beforeClearValue", "shown"],
setup(e, t) {
const n = o(), l = o(e.customClass), i = o(e.modelValue), s = Bt(e, t, n, i), {
shouldPopupContent: c,
hidePopup: u,
showPopup: f,
togglePopup: g
} = s, w = wt(e, t, n, s, i), p = o(""), M = xt(e, t, i, p, s), {
hasFocusedTextBox: x,
commitValue: b,
inputGroupClass: k
} = M, z = Ct(e, t, i, x, p, M), {
onMouseEnterTextBox: R,
onMouseLeaveTextBox: I
} = z, O = o(!1), V = E(() => {
const P = {
"f-button-edit": !0,
"f-cmp-inputgroup": !0,
"f-button-edit-nowrap": !e.wrapText
};
return l.value && l.value.split(" ").reduce((A, r) => (A[r] = !0, A), P), P;
}), N = E(() => ({
overflow: e.wrapText ? "hidden" : ""
})), W = E(() => ({
// paddingLeft: '3px',
// backgroundColor: '#fff'
}));
function d() {
if (!e.multiSelect || e.inputType !== "tag" || !n.value)
return 0;
let P = 0;
const A = Array.from(n.value.querySelectorAll(".farris-tag-item"));
return A && A.length && (P = A.map((r) => r.offsetTop).filter((r) => r > 20).length), P;
}
const v = o(d());
Ze(() => {
v.value = d();
});
function B() {
return e.multiSelect && e.inputType === "tag" ? () => y(ne, null, [kt(e, i, M)(), !!v.value && y("div", {
class: "d-flex flex-row mr-2 more-tags",
"more-tags": !0
}, [y("span", {
class: "multi--more-text"
}, [et("+"), v.value])])]) : Mt(e, i, M);
}
let L = B();
U([() => e.multiSelect, () => e.inputType], () => {
L = B();
});
const {
renderButtonGroup: m,
buttonHandleElement: H
} = Tt(e, t, w, z), _ = Et(e, t, s), K = o(c.value), $ = {
displayText: p,
commitValue: b,
elementRef: n,
hidePopup: u,
showPopup: f,
popoverRef: s.popoverRef,
shouldPopupContent: c,
togglePopup: g,
openDialog: () => {
H.value && e.buttonBehavior === "Modal" && H.value.click();
},
getModal: () => {
var P;
return e.buttonBehavior === "Modal" ? (P = w.modalRef.value) == null ? void 0 : P.value : null;
},
getTextbox: () => {
var P;
return (P = n.value) == null ? void 0 : P.querySelector("input");
},
forceClosePopup: () => {
K.value = !1, O.value = !0, c.value = !1;
}
};
return le(() => {
n.value.componentInstance = $, window.onresize = () => {
document.body.click();
};
}), Qe(() => {
var P;
window.onresize = null, (P = window[G]) == null || P.delet