@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,543 lines (1,542 loc) • 162 kB
JavaScript
var eo = Object.defineProperty;
var to = (e, t, n) => t in e ? eo(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var Ae = (e, t, n) => to(e, typeof t != "symbol" ? t + "" : t, n);
import { defineComponent as Ge, ref as m, computed as E, createVNode as l, Teleport as Yt, createApp as Pt, onUnmounted as mt, Fragment as Be, watch as se, nextTick as nt, onBeforeMount as no, onMounted as ut, watchEffect as oo, Transition as Xt, shallowRef as ao, render as kt, h as lo, cloneVNode as io, mergeProps as wt, inject as pt, withDirectives as Jt, vShow as ro, createTextVNode as Pe, onUpdated as uo, onBeforeUnmount as so, reactive as Se, isVNode as Dt, Comment as Zt, provide as co, getCurrentInstance as Qt, vModelCheckbox as fo } from "vue";
import { LocaleService as We } from "../locale/index.esm.js";
import { isMobilePhone as dt, getMaxZIndex as _t, useGuid as mo, withInstall as Kt, useCommonUtils as en, resolveField as vo, getCustomClass as go } from "../common/index.esm.js";
import "../property-panel/index.esm.js";
import { FButton as Ut } from "../button/index.esm.js";
import "../field-selector/index.esm.js";
import "../collection-property-editor/index.esm.js/src/use-button-items.designer";
import ho from "../tags/index.esm.js";
import { debounce as tn, isPlainObject as qt, cloneDeep as Ot } from "lodash-es";
import { useInputExpand as po } from "../common/index.esm.js/text-box/use-input-expand";
import yo from "../popover/index.esm.js";
import nn from "../drawer/index.esm.js";
import { useResizeObserver as bo } from "@vueuse/core";
import { SETTING_COLUMN_FIELD as Co, COMMAND_COLUMN_FIELD as wo, CellMode as on, SETTING_COLUMN_DATA_TYPE as it, COMMAND_COLUMN_DATA_TYPE as rt, useScreen as xo, useIdentify as So, useGroupData as To, useFilter as Bo, useHierarchy as Fo, useLoading as ko, useDataView as Mo, usePagination as Oo, useSelection as Eo, useDataViewContainerStyle as Io, useCommandColumn as Po, useSettingColumn as Do, useColumn as Ro, useSort as jo, useGroupColumn as Ho, useRow as No, useEdit as zo, useVisualDataBound as Vo, useVisualDataCell as Lo, useVisualDataRow as Ao, useVisualGroupRow as Wo, useVisualSummaryRow as Go, useVisualData as $o, useCellContentStyle as _o, useCellPosition as Uo, useSidebar as qo, useVirtualScroll as Yo, useFitColumn as Xo, useFilterHistory as Jo, useColumnFilter as Zo, useDragColumn as Qo, getColumnHeader as Ko, getPagination as ea, getSidebar as ta, getDisableMask as na, getSummary as oa, getHorizontalScrollbar as aa, getVerticalScrollbar as la, getFilterPanel as ia, getGroupPanel as ra, useAdapt as ua, useNavigation as sa, getEmpty as ca, ColumnSettingSolution as da } from "../data-view/index.esm.js";
import fa, { FDynamicForm as ma, FDynamicFormLabel as va } from "../dynamic-form/index.esm.js";
import "bignumber.js";
import { createPropsResolver as ga } from "../dynamic-resolver/index.esm.js";
const ha = {
/**
* 组件标识
*/
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 },
/**
* 显示扩展按钮
*/
showAppendButton: { type: Boolean, default: !0 },
/**
* 鼠标悬停在组件上时显示文本框内容。
*/
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, default: 0 },
popupOffsetY: { type: Object, default: 0 },
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 },
/** 是否可扩展 */
expandable: { type: Boolean, default: !1 },
/** 扩展模式 text | button */
expandMode: { type: String, default: "text" },
/** 扩展文本内容 */
expandContent: { type: String, default: "" },
/** 扩展按钮是否禁用 */
expandDisabled: { type: Boolean, default: !1 }
}, pa = {
popupContentPosition: { type: Object, default: { left: 0, top: 0 } },
host: { type: Object },
backgroundColor: { type: String, default: "" }
}, ya = /* @__PURE__ */ Ge({
name: "FOverlay",
props: pa,
emits: ["click"],
setup(e, t) {
const n = m(e.popupContentPosition), o = m(e.host), a = E(() => ({
backgroundColor: e.backgroundColor || "",
pointerEvents: "auto"
}));
function r(d) {
t.emit("click"), d.preventDefault(), d.stopPropagation();
}
E(() => {
const d = o.value;
if (d) {
const y = d.getBoundingClientRect(), {
left: b,
top: p,
height: u
} = y;
return {
left: b,
top: p + u
};
}
return n.value;
});
const s = E(() => ({
// position: 'relative',
// left: `${position.value.left}px`,
// top: `${position.value.top}px`
}));
return () => l(Yt, {
to: "body"
}, {
default: () => {
var d, y;
return [l("div", {
class: "overlay-container",
onClick: (b) => r(b),
style: a.value
}, [l("div", {
style: s.value
}, [(y = (d = t.slots).default) == null ? void 0 : y.call(d)])])];
}
});
}
});
function ba(e) {
if (e.content && e.content.render)
return e.content.render;
if (e.render && typeof e.render == "function")
return e.render;
}
function Ca(e) {
const t = document.createElement("div");
t.style.display = "contents";
let n;
const o = e.onClickCallback || (() => {
}), a = () => {
o(), n && n.unmount();
};
return n = Pt({
setup() {
mt(() => {
document.body.removeChild(t);
});
const r = ba(e);
return () => l(ya, {
"popup-content-position": e.popupPosition,
host: e.host,
onClick: a,
backgroundColor: e.backgroundColor
}, {
default: () => [r && r()]
});
}
}), document.body.appendChild(t), n.mount(t), n;
}
class wa {
static show(t) {
return Ca(t);
}
}
const xa = {
/**
* 允许点击遮罩关闭对话框
*/
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 },
/**
* 是否在窗口右上角展示浮动关闭按钮
*/
showFloatingClose: { type: Boolean, default: !1 },
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 },
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 ye {
constructor(t, n) {
this.x = t, this.y = n;
}
static getTransformInfo(t) {
const o = window.getComputedStyle(t).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(",");
if (o.length >= 6) {
const a = parseInt(o[4], 10), r = parseInt(o[5], 10);
return { x: a, y: r };
}
return { x: 0, y: 0 };
}
static fromEvent(t, n = null) {
if (this.isMouseEvent(t))
return new ye(t.clientX, t.clientY);
if (n === null || t.changedTouches.length === 1)
return new ye(t.changedTouches[0].clientX, t.changedTouches[0].clientY);
for (let o = 0; o < t.changedTouches.length; o++)
if (t.changedTouches[o].target === n)
return new ye(t.changedTouches[o].clientX, t.changedTouches[o].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 ye(0, 0);
if (window) {
const o = window.getComputedStyle(t);
if (o) {
const a = parseInt(o.getPropertyValue("left"), 10), r = parseInt(o.getPropertyValue("top"), 10);
n.x = isNaN(a) ? 0 : a, n.y = isNaN(r) ? 0 : r;
}
return n;
}
return null;
}
static copy(t) {
return new ye(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 tt {
constructor(t, n) {
this.width = t, this.height = n;
}
static getCurrent(t) {
const n = new tt(0, 0);
if (window) {
const o = window.getComputedStyle(t);
return o && (n.width = parseInt(o.getPropertyValue("width"), 10), n.height = parseInt(o.getPropertyValue("height"), 10)), n;
}
return null;
}
static copy(t) {
return new tt(0, 0).set(t);
}
set(t) {
return this.width = t.width, this.height = t.height, this;
}
}
function Sa(e, t) {
const n = m(), o = m(), a = m(), r = m(), s = m(), d = m(), y = m(), b = m(), p = m(), u = m(), T = m(), c = m(e.resizeable), f = m(), v = m(e.draggable), S = m(!1);
function w() {
const g = o.value || document.body, F = window.getComputedStyle(g);
if (!F || !n.value)
return;
const D = ye.getTransformInfo(n.value), L = {};
y.value && (L.deltaL = n.value.offsetLeft - y.value.x, L.deltaT = n.value.offsetTop - y.value.y);
const Q = F.getPropertyValue("position");
L.width = g.clientWidth, L.height = g.clientHeight, L.pr = parseInt(F.getPropertyValue("padding-right"), 10), L.pb = parseInt(F.getPropertyValue("padding-bottom"), 10), L.position = F.getPropertyValue("position"), Q === "static" && (g.style.position = "relative"), L.translateX = D.x, L.translateY = D.y, u.value = L;
}
function B(g) {
if (n.value) {
r.value = tt.getCurrent(n.value), s.value = ye.getCurrent(n.value), d.value = r.value ? tt.copy(r.value) : null, y.value = s.value ? ye.copy(s.value) : null, w();
const F = g.target.getAttribute("type") || "";
b.value = {
n: !!F.match(/n/),
s: !!F.match(/s/),
w: !!F.match(/w/),
e: !!F.match(/e/)
};
}
}
function N() {
var g, F, D, L;
if (n.value) {
const Q = n.value;
b.value && ((b.value.n || b.value.s) && ((g = d.value) != null && g.height) && (Q.style.height = d.value.height + "px"), (b.value.w || b.value.e) && ((F = d.value) != null && F.width) && (Q.style.width = d.value.width + "px"), y.value && ((D = y.value) != null && D.x && (Q.style.left = y.value.x + "px"), (L = y.value) != null && L.y && (Q.style.top = y.value.y + "px")));
}
}
function G() {
const g = e.minHeight ? e.minHeight : 1, F = e.minWidth ? e.minWidth : 1;
d.value && y.value && b.value && r.value && (d.value.height < g && (d.value.height = g, b.value.n && s.value && (y.value.y = s.value.y + (r.value.height - g))), d.value.width < F && (d.value.width = F, b.value.w && s.value && (y.value.x = s.value.x + (r.value.width - F))), e.maxHeight && d.value.height > e.maxHeight && (d.value.height = e.maxHeight, s.value && b.value.n && (y.value.y = s.value.y + (r.value.height - e.maxHeight))), e.maxWidth && d.value.width > e.maxWidth && (d.value.width = e.maxWidth, b.value.w && s.value && (y.value.x = s.value.x + (r.value.width - e.maxWidth))));
}
function W() {
if (o.value) {
const g = u.value;
if (y.value && d.value && b.value && r.value) {
const F = g.width - g.pr - g.deltaL - g.translateX - y.value.x, D = g.height - g.pb - g.deltaT - g.translateY - y.value.y;
b.value.n && y.value.y + g.translateY < 0 && s.value && (y.value.y = -g.translateY, d.value.height = r.value.height + s.value.y + g.translateY), b.value.w && y.value.x + g.translateX < 0 && s.value && (y.value.x = -g.translateX, d.value.width = r.value.width + s.value.x + g.translateX), d.value.width > F && (d.value.width = F), d.value.height > D && (d.value.height = D);
}
}
}
function A(g) {
if (!a.value || !r.value || !s.value || !b.value)
return;
g.subtract(a.value);
const F = g.x, D = g.y;
b.value.n ? (y.value.y = s.value.y + D, d.value.height = r.value.height - D) : b.value.s && (d.value.height = r.value.height + D), b.value.e ? d.value.width = r.value.width + F : b.value.w && (d.value.width = r.value.width - F, y.value.x = s.value.x + F), W(), G(), N();
}
function I(g) {
if (!p.value)
return;
const F = ye.fromEvent(g);
F && A(F);
}
function O() {
if (n.value) {
const {
width: g,
height: F,
x: D,
y: L
} = n.value.getBoundingClientRect(), Q = ye.getTransformInfo(n.value);
return {
size: {
width: g,
height: F
},
position: {
x: D - Q.x,
y: L - Q.y
}
};
}
return null;
}
function P(g) {
if (n.value) {
const F = O();
T.value = F;
}
a.value = void 0, r.value = null, s.value = null, d.value = null, y.value = null, b.value = null, p.value = null, document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", P);
}
function k() {
document.addEventListener("mousemove", I), document.addEventListener("mouseup", P);
}
function j(g) {
g instanceof MouseEvent && g.button === 2 || v.value && (document.body.click(), g.stopPropagation(), g.preventDefault(), a.value = ye.fromEvent(g), p.value = g.target, B(g), k());
}
function X(g) {
return n.value = g, c.value && l(Be, null, [l("div", {
class: "fv-resizable-handle fv-resizable-n",
type: "n",
onMousedown: (F) => j(F)
}, null), l("div", {
class: "fv-resizable-handle fv-resizable-e",
type: "e",
onMousedown: (F) => j(F)
}, null), l("div", {
class: "fv-resizable-handle fv-resizable-s",
type: "s",
onMousedown: (F) => j(F)
}, null), l("div", {
class: "fv-resizable-handle fv-resizable-w",
type: "w",
onMousedown: (F) => j(F)
}, null), l("div", {
class: "fv-resizable-handle fv-resizable-ne",
type: "ne",
onMousedown: (F) => j(F)
}, null), l("div", {
class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal",
type: "se",
onMousedown: (F) => j(F)
}, null), l("div", {
class: "fv-resizable-handle fv-resizable-sw",
type: "sw",
onMousedown: (F) => j(F)
}, null), l("div", {
class: "fv-resizable-handle fv-resizable-nw",
type: "nw",
onMousedown: (F) => j(F)
}, null)]);
}
function _(g = !0) {
document.body.click();
const F = o.value || document.body, D = tt.getCurrent(F), L = n.value;
g && L && (f.value = O(), f.value.transform = L.style.transform), D && L && (d.value = D, d.value.height -= 14, d.value.width -= 14, L.style.height = d.value.height + "px", L.style.width = d.value.width + "px", L.style.left = "7px", L.style.top = "7px", L.style.transform = "", T.value = {
size: d.value,
position: {
x: 0,
y: 0
}
}, v.value = !1, S.value = !0);
}
function ce() {
var g, F;
if (document.body.click(), f.value) {
const D = {
width: f.value.size.width || 0,
height: f.value.size.height || 0
}, L = {
x: (window.innerWidth - D.width) / 2,
y: (window.innerHeight - D.height) / 2
};
(g = d.value) == null || g.set(D), (F = y.value) == null || F.set(L);
const Q = n.value;
Q.style.height = D.height + "px", Q.style.width = D.width + "px", Q.style.left = `${L.x}px`, Q.style.top = `${L.y}px`, Q.style.transform = "", T.value = {
size: D,
position: L
}, v.value = e.draggable, S.value = !1;
}
}
function ue() {
if (n.value) {
const g = tt.getCurrent(n.value);
if (g) {
const {
width: F,
height: D
} = g;
n.value.style.left = `${(window.innerWidth - F) / 2}px`, n.value.style.top = `${(window.innerHeight - D) / 2}px`, n.value.style.transform = "";
}
}
}
function ae() {
const g = () => {
S.value ? _(!1) : ue(), document.body.click();
};
return window.addEventListener("resize", g), () => {
window.removeEventListener("resize", g);
};
}
const z = ae();
return {
renderResizeBar: X,
boundingElement: o,
resizedEventParam: T,
maximize: _,
restore: ce,
allowDrag: v,
isMaximized: S,
unWindowResizeHandle: z,
moveToCenter: ue
};
}
function Ta(e, t, n) {
const o = m(), a = m(e.draggable), r = m(e.lockAxis), s = m(), d = m(), y = m(!1), b = m(new ye(0, 0)), p = m(new ye(0, 0)), u = m(new ye(0, 0)), T = m(new ye(0, 0));
se(() => n.value, (I) => {
s.value.style.cursor = I ? "move" : "default";
});
function c(I, O) {
if (O.tagName === "BUTTON")
return !1;
if (O === I)
return !0;
for (const P in O.children)
if (Object.prototype.hasOwnProperty.call(O.children, P) && c(I, O.children[P]))
return !0;
return !1;
}
function f() {
var k, j;
let I = u.value.x + p.value.x, O = u.value.y + p.value.y;
r.value === "x" ? (I = ((k = b.value) == null ? void 0 : k.x) || 0, u.value.x = 0) : r.value === "y" && (O = ((j = b.value) == null ? void 0 : j.y) || 0, u.value.y = 0);
const P = `translate3d(${Math.round(I)}px, ${Math.round(O)}px, 0px)`;
o.value && (o.value.style.transform = P), T.value.x = I, T.value.y = O;
}
function v() {
if (!d.value || !o.value)
return null;
const I = d.value.getBoundingClientRect(), O = o.value.getBoundingClientRect(), P = {
top: I.top < O.top,
right: I.right > O.right,
bottom: I.bottom > O.bottom,
left: I.left < O.left
};
return P.top || (u.value.y -= O.top - I.top), P.bottom || (u.value.y -= O.bottom - I.bottom), P.right || (u.value.x -= O.right - I.right), P.left || (u.value.x -= O.left - I.left), f(), P;
}
function S(I) {
I && (b.value && I.subtract(b.value), u.value.set(I), f(), v());
}
function w(I) {
y.value && a.value && (I.stopPropagation(), I.preventDefault(), S(ye.fromEvent(I, s.value)));
}
function B() {
var I;
if (y.value) {
if (y.value = !1, p.value.add(u.value), u.value.reset(), (I = o.value) == null || I.classList.remove("ng-dragging"), !e.useTransform && o.value) {
const { left: O, top: P } = o.value.getBoundingClientRect();
o.value.style.left = Math.ceil(O) + "px", o.value.style.top = Math.ceil(P) + "px", o.value.style.transform = "none";
}
t.emit("stopMove"), document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", B);
}
}
function N() {
!y.value && s.value && (y.value = !0, s.value.classList.add("ng-dragging"), document.addEventListener("mousemove", w), document.addEventListener("mouseup", B));
}
function G() {
if (o.value) {
const I = ye.getTransformInfo(o.value);
p.value.set(I);
return;
}
p.value.reset();
}
function W(I) {
if (!n.value || I instanceof MouseEvent && I.button === 2)
return;
const O = I.target || I.srcElement;
s.value !== void 0 && O && !c(O, s.value) || a.value !== !1 && (document.body.click(), I.stopPropagation(), I.preventDefault(), b.value = ye.fromEvent(I, o.value), G(), N());
}
function A(I, O, P) {
if (a.value && O) {
if (I)
s.value = I;
else if (e.dragHandle) {
if (e.dragHandle instanceof HTMLElement)
s.value = e.dragHandle;
else if (typeof e.dragHandle == "string") {
const k = O.querySelector(e.dragHandle);
k && (s.value = k);
}
}
o.value = O, d.value = P, s.value ? (s.value.classList.add("ng-draggable"), s.value.addEventListener("mousedown", W)) : a.value = !1;
}
}
return {
registerDraggle: A,
resetTranslate: G
};
}
function an(e, t) {
if (e) {
const n = (o) => {
o.key.toLowerCase() === e.toLowerCase() && t({ event: o, key: e });
};
return document.addEventListener("keydown", n), () => {
document.removeEventListener("keydown", n);
};
}
}
function Ba(e, t) {
const n = m(e.enableEsc);
let o = null;
return n.value ? (o = an("Escape", (a) => {
t.emit("esc", { event: a.event, type: "esc" });
}), {
remove: o
}) : null;
}
function Fa(e, t) {
const n = m(e.enableEnter);
let o = null;
return n.value ? (o = an("Enter", (a) => {
t.emit("enter", { event: a.event, type: "enter" });
}), {
remove: o
}) : null;
}
const st = /* @__PURE__ */ Ge({
name: "FModal",
props: xa,
emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove", "buttonClick"],
setup(e, t) {
const n = m(e.width || 300), o = m(e.height || 200), a = m(e.modelValue), r = m(""), s = m(e.class), d = m(e.fitContent), y = m(e.showHeader), b = m(""), p = m(e.showCloseButton), u = m(e.showMaxButton), T = m(!1), c = m(e.dialogType), f = m(e.src), v = m(""), S = m(e.showButtons), w = m(e.title), B = m(e.containment || null), N = m();
w.value === "错误提示" && (w.value = We.getLocaleValue("messageBox.errorTitle"));
const G = m(!1);
function W() {
const x = document.querySelectorAll(".farris-modal").length;
(!x || x - 1 <= 0) && N.value === document.querySelectorAll(".farris-modal")[0] && document.body.classList.remove("modal-open"), N.value && N.value.classList.remove("show");
}
function A(x, $) {
const te = $ ? "accept" : "cancel";
Promise.resolve().then(() => {
var ne;
return (ne = e.beforeClose) == null ? void 0 : ne.call(e, {
closeType: te
});
}).then((ne) => {
ne && (a.value = !1, t.emit("update:modelValue", !1), $ != null && t.emit($ ? "accept" : "cancel"), t.emit("closed", x), W());
});
}
const I = [{
name: "cancel",
text: We.getLocaleValue("messageBox.cancel") || "取消",
class: "btn btn-secondary",
handle: (x) => {
A(x, !1);
}
}, {
name: "accept",
text: We.getLocaleValue("messageBox.ok") || "确定",
class: "btn btn-primary",
handle: (x) => {
A(x, !0);
}
}], O = m(e.buttons && e.buttons.length ? e.buttons : I), P = E(() => !!b.value), k = E(() => !!S.value && !!O.value), j = m(), X = m(), _ = m(e.maximized || !1), {
renderResizeBar: ce,
maximize: ue,
restore: ae,
boundingElement: z,
resizedEventParam: g,
allowDrag: F,
unWindowResizeHandle: D,
moveToCenter: L
} = Sa(e), {
registerDraggle: Q
} = Ta(e, t, F);
function le() {
return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open");
}
se(() => e.title, (x, $) => {
x !== $ && (w.value = x);
}), se(() => e.modelValue, (x, $) => {
x !== $ && (a.value = x, a.value && e.draggable && nt(() => {
X.value && !B.value && (B.value = X.value.parentElement, z.value = B.value, Q(j.value, X.value, z.value), L());
}), x || (B.value && (B.value = null), W())), a.value ? G.value = le() : (_.value = !1, F.value = e.draggable);
}), se(() => e.showHeader, (x, $) => {
x !== $ && (y.value = x);
}), se(() => e.showButtons, (x, $) => {
x !== $ && (S.value = x);
}), se(() => g.value, (x, $) => {
const te = x || {}, ne = $ || {};
JSON.stringify(te) !== JSON.stringify(ne) && t.emit("resize", {
newSize: x,
oldSize: $,
isMaximized: _.value
});
}), se([() => e.width, () => e.height], (x, $) => {
(x[0] !== $[0] || x[1] !== $[1]) && (n.value = x[0] || 500, o.value = x[1] || 600);
}), se(() => e.class, (x, $) => {
s.value = x;
});
const he = E(() => (a.value && document.body.classList.add("modal-open"), a.value)), de = E(() => {
var te;
const x = {
modal: !0,
"farris-modal": !0,
fade: !0,
"fe-cmp-page-modal": !!e.showFloatingClose
};
x["f-modal-fitContent"] = !!d.value, x.show = !!he.value;
const $ = (te = e.maskClass) == null ? void 0 : te.split(" ");
return $ == null || $.reduce((ne, xe) => (ne[xe] = !0, ne), x), x;
}), Ce = E(() => {
var te;
const x = {
"modal-dialog": !0
}, $ = (te = s.value) == null ? void 0 : te.split(" ");
return $ == null || $.reduce((ne, xe) => (ne[xe] = !0, ne), x), x;
}), ve = () => dt() && !e.isMessager || !!e.fullscreen, Te = E(() => {
const x = document.documentElement.clientWidth, $ = document.documentElement.clientHeight;
if (_.value)
return {
position: "fixed",
top: "0px",
left: "0px",
width: "100vw",
height: "100vh",
margin: "0"
};
const te = Math.min(n.value, x), ne = e.position === "right" ? "100%" : d.value ? "auto" : `${Math.min(o.value, $ - 10)}px`, xe = `${(window.innerHeight - (ne === "100%" || ne === "auto" ? 0 : parseInt(ne))) / 2}px`, Ke = e.position === "right" ? `${window.innerWidth - te}px` : `${(window.innerWidth - te) / 2}px`, h = {
position: "absolute",
top: xe,
left: Ke,
width: dt() ? "auto" : `${te}px`,
height: ne
};
return e.mask || (h.pointerEvents = "auto"), h;
}), $e = m(_t() || 1050), Oe = E(() => {
const x = {
display: "block",
overflow: "hidden"
};
return e.mask || (x.pointerEvents = "none", x.backgroundColor = "transparent"), G.value && (x.backgroundColor = "transparent"), x.zIndex = $e.value, x;
}), _e = E(() => ({
"modal-content": !0,
"modal-content-has-header": y.value,
"is-mobile": ve()
})), Ee = E(() => {
const x = {
display: y.value ? "" : "none"
};
return x["pointer-events"] = F.value ? "auto" : "none", x;
}), we = E(() => ({
"f-icon": !0,
modal_maximize: !0,
modalrevert: _.value
})), fe = E(() => ({
"modal-body": !0,
"f-utils-flex-column": c.value === "iframe",
"f-utils-fill": !0
}));
function Ue() {
return {
height: `${e.footerHeight || 60}px`
};
}
const De = E(() => {
const x = {
textAlgin: v.value
}, $ = Ue();
return Object.assign(x, $);
});
function Re(x) {
if (x == null || x.stopPropagation(), _.value) {
_.value = !1, ae();
return;
}
ue(), _.value = !0;
}
async function ot(x, $) {
x.handle ? await x.handle($, x) && t.emit("closed", $) : t.emit("buttonClick", {
button: x,
$event: $
});
}
function at(x) {
x.width && (n.value = x.width), x.height && (o.value = x.height), x.buttons && (O.value = x.buttons), x.title && (w.value = x.title);
}
let Ie = null, je = null;
no(() => {
G.value = le();
}), ut(() => {
X.value && !B.value && (B.value = X.value.parentElement, z.value = B.value, Q(j.value, X.value, z.value)), he.value && document.body.classList.add("modal-open"), Ie = Ba(e, t), je = Fa(e, t);
}), mt(() => {
D && D(), Ie && Ie.remove(), je && je.remove();
}), t.expose({
modalElementRef: X,
updateModalOptions: at,
close: A,
maxDialog: Re,
isMaximized: _,
disableButtons: (x, $ = !0) => {
O.value.forEach((te) => {
te.name && x.includes(te.name) && (te.disabled = $);
});
}
});
function qe() {
return l("div", {
class: "action-wrapper",
onClick: (x) => A(x, !1)
}, [l("span", {
class: "close-icon"
}, [l("i", {
class: "f-icon f-icon-close"
}, null)])]);
}
function Ye() {
return l("ul", null, [T.value && l("li", {
class: "f-btn-icon f-bare"
}, [l("span", {
class: "f-icon modal_minimize"
}, null)]), u.value && l("li", {
onClick: Re,
class: "f-btn-icon f-bare",
style: "pointer-events: auto;"
}, [l("span", {
class: we.value
}, null)]), p.value && l("li", {
class: "f-btn-icon f-bare",
onClick: (x) => A(x, !1),
style: "pointer-events: auto;"
}, [l("span", {
class: "f-icon modal_close"
}, null)])]);
}
const Ne = (x) => {
x.preventDefault();
const $ = x.currentTarget, te = x.deltaY * 0.5;
$.scrollLeft += te;
};
function Ze() {
return l("div", {
class: "modal-footer",
style: De.value
}, [O.value && l("div", {
class: "buttons",
onWheel: Ne
}, [O.value.map((x) => {
var ne;
const $ = m(x.disabled), te = x.class || ((ne = x.appearance) == null ? void 0 : ne.class);
return l("button", {
name: x.name,
style: x.styles,
type: "button",
disabled: $.value,
class: te + (x.iconClass ? " btn-icontext" : "") + (x.visible === !1 ? "d-none" : ""),
onClick: (xe) => {
ot(x, xe);
}
}, [!!x.iconClass && l("i", {
class: x.iconClass
}, null), x.text]);
})])]);
}
function Xe(x) {
u.value && Re();
}
function ie() {
return l(Be, null, [_.value && l("div", {
class: "modal-header",
style: "position: absolute;background: transparent;height: 45px;width: 100%;",
onDblclick: (x) => Xe()
}, null), l("div", {
ref: j,
class: "modal-header",
style: Ee.value,
onDblclick: (x) => Xe()
}, [t.slots.headerTemplate ? t.slots.headerTemplate() : l("div", {
class: "modal-title"
}, [P.value && l("span", {
class: b.value,
style: "margin-right: 8px"
}, null), l("span", {
class: "modal-title-label"
}, [w.value])]), l("div", {
class: "actions"
}, [Ye()])])]);
}
function Qe() {
return t.slots.footerTemplate ? t.slots.footerTemplate() : k.value && Ze();
}
function Je(x) {
if (x.stopPropagation(), e.allowClickMaskToClose) {
if (x.target !== N.value)
return;
A(x, !1);
}
}
function ze() {
var x, $;
return l("div", {
id: r.value,
class: Ce.value,
style: Te.value,
ref: X
}, [e.showFloatingClose && qe(), l("div", {
class: _e.value
}, [y.value && ie(), l("div", {
class: fe.value
}, [($ = (x = t.slots).default) == null ? void 0 : $.call(x), c.value === "iframe" && l("iframe", {
title: r.value,
class: "f-utils-fill",
width: "100%",
frameborder: "0",
src: f.value
}, null)]), Qe()]), !d.value && X.value && !_.value && ce(X.value)]);
}
function He(x) {
return x || "body";
}
return oo(() => {
he.value && ($e.value = _t() || 1050);
}), () => l(Yt, {
to: He(e.host)
}, {
default: () => [he.value && l(Xt, {
name: "fade",
appear: !0
}, {
default: () => [l("div", {
ref: N,
class: de.value,
style: Oe.value,
onClick: Je
}, [ze()])]
})]
});
}
});
function ln(e) {
if (e.content && e.content.render)
return e.content.render;
if (e.render && typeof e.render == "function")
return e.render;
}
function ka(e) {
const t = document.createElement("div");
t.style.display = "contents";
const n = Pt({
setup(o, a) {
mt(() => {
document.body.removeChild(t);
});
const r = m(), s = m(e.class || ""), d = m(!!e.showButtons), y = m(!!e.showHeader), b = m(e.showCloseButton == null ? !0 : e.showCloseButton), p = m(!!e.showFloatingClose), u = m(!0), T = m(e.title || ""), c = e.acceptCallback || (() => {
}), f = e.rejectCallback || (() => {
}), v = e.closedCallback || ((G) => {
}), S = e.resizeHandle || ((G) => {
}), w = e.stopMoveHandle || ((G) => {
}), B = ln(e), N = (G) => {
u.value = !1, n.unmount(), v(G);
};
return ut(() => {
}), a.expose({
modalRef: r
}), () => l(st, {
ref: r,
class: s.value,
modelValue: u.value,
"onUpdate:modelValue": (G) => u.value = G,
title: T.value,
width: e.width,
height: e.height,
buttons: e.buttons,
"show-header": y.value,
"show-buttons": d.value,
"show-close-button": b.value,
"show-max-button": !1,
showFloatingClose: p.value,
onAccept: c,
onCancel: f,
fitContent: e.fitContent == null ? !0 : e.fitContent,
onClosed: N,
onResize: S,
onStopMove: w
}, {
default: () => [B && B(n)]
});
}
});
return document.body.appendChild(t), n.use(We.i18n), n.mount(t), n;
}
class rn {
// private activeModalInstance = computed(() => {
// return this.modalRefs[this.activeModalIndex.value];
// });
constructor(t) {
Ae(this, "appContext", null);
Ae(this, "modalRef", m());
Ae(this, "activeModalIndex", m(0));
Ae(this, "modalRefs", {});
Ae(this, "isUseEscCloseModal", m(!1));
this.app = t, this.appContext = t ? t._context : null;
}
getCurrentModal() {
return this.modalRefs[this.activeModalIndex.value];
}
adaptToWindow(t, n) {
const {
width: o,
height: a
} = {
width: window.innerWidth,
height: window.innerHeight
};
return o < t && (t = o - 14), a < n && (n = a - 14), {
width: t,
height: n
};
}
static show(t) {
const n = Object.assign({
title: "",
showButtons: !0,
showHeader: !0
}, t);
return ka(n);
}
close(t) {
var n, o;
t ? (o = t.value) == null || o.close() : (n = this.getCurrentModal()) == null || n.close();
}
open(t) {
const n = document.createDocumentFragment();
t.showMaxButton && t.fitContent && (t.showMaxButton = !1);
const o = ao(Object.assign({
title: "",
showButtons: !0,
showHeader: !0,
maximized: !1
}, t)), a = m(!0), r = o.value.acceptCallback || (() => {
}), s = o.value.rejectCallback || (() => {
}), d = o.value.closedCallback || ((O, P) => {
}), y = o.value.openedCallback || ((O) => {
}), b = o.value.resizeHandle || ((O) => {
}), p = t.stopMoveHandle || ((O) => {
});
let u;
const T = ln(o.value), c = (O) => {
var k;
a.value = !1;
const P = (k = O == null ? void 0 : O.target) == null ? void 0 : k.classList.contains("modal_close");
d(O, this.isUseEscCloseModal.value ? "esc" : P ? "icon" : "button");
}, f = (O) => {
c(O), u && nt(() => {
if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], kt(null, n), u = null, this.modalRef.value = null, this.modalRefs) {
const P = Object.keys(this.modalRefs).map((k) => Number(k));
P.length > 0 ? this.activeModalIndex.value = Math.max(...P) : this.activeModalIndex.value = 0, this.modalRefs[this.activeModalIndex.value] && (this.modalRef.value = this.modalRefs[this.activeModalIndex.value]);
}
this.isUseEscCloseModal.value = !1;
});
}, v = (O) => {
var P;
this.isUseEscCloseModal.value = !0, (P = this.getCurrentModal()) == null || P.close(O == null ? void 0 : O.event);
}, {
width: S,
height: w
} = o.value, B = this.adaptToWindow(S || 500, w || 320);
Object.assign(o.value, B);
const N = m(), G = () => l(st, wt({
ref: N,
modelValue: a.value,
"onUpdate:modelValue": (O) => a.value = O
}, o.value, {
isMessager: o.value.class && o.value.class.indexOf("modal-message") > -1,
onAccept: r,
onCancel: s,
onClosed: f,
onResize: b,
onEsc: v,
onStopMove: p,
maximized: o.value.maximized
}), {
default: () => [T && T(this.app)]
});
u = ((O) => {
const P = lo(G, O);
return P.appContext = this.appContext, kt(P, n), P;
})({
...o.value
// 'onUpdate:modelValue': onUpdateModelValue,
}), this.activeModalIndex.value++;
const A = this.activeModalIndex.value;
this.modalRefs[A] = N.value;
const I = (O) => {
o.value = {
...o.value,
...O
}, u && kt(io(u, {
...o
}), n);
};
return nt(() => {
this.modalRefs[A] = N.value, this.modalRef.value = N.value, y(new Event("opened"));
}), {
update: I,
destroy: f,
modalRef: N,
close: () => {
var O;
(O = N.value) == null || O.close();
},
disableButtons: (O, P = !0) => {
var k;
(k = N.value) == null || k.disableButtons(O, P);
}
};
}
}
const ct = Symbol("FModalService");
st.install = (e) => {
e.component(st.name, st);
const t = new rn(e);
e.provide(ct, t), e.provide("FModalService", t);
};
function un(e, t) {
function n() {
const o = e.beforeOpen || e.beforeClickButton || null;
let a = Promise.resolve(!0);
if (o) {
const r = o(t.value);
if (typeof r > "u")
return a;
typeof r == "boolean" ? a = Promise.resolve(r) : a = r;
}
return a;
}
return { judgeCanOpen: n };
}
function Ma(e, t, n, o, a) {
const r = m(e.buttonBehavior), s = m(e.popupOnInput), d = E(() => ({
"input-group-append": !0,
"append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable)
})), { judgeCanOpen: y } = un(e, a), b = E(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable), p = pt(ct, null), u = m();
async function T(v) {
if (await y() && b.value) {
const S = !!t.slots.default;
if (r.value === "Modal") {
const w = e.modalOptions, B = p == null ? void 0 : p.open({
...w,
render: () => t.slots.default && t.slots.default()
});
u.value = B == null ? void 0 : B.modalRef;
}
r.value === "Overlay" && wa.show({
// host: buttonEditRef.value,
host: document.body,
backgroundColor: "rgba(0,0,0,.15)",
render: () => t.slots.default && t.slots.default()
}), S && r.value === "Popup" && o.togglePopup(!0), S && s.value && o.hidePopup(), t.emit("clickButton", { origin: v, value: e.modelValue });
}
}
function c(v) {
t.emit("mouseEnterIcon", v);
}
function f(v) {
t.emit("mouseLeaveIcon", v);
}
return {
buttonGroupClass: d,
onClickButton: T,
onMouseEnterButton: c,
onMouseLeaveButton: f,
modalRef: u
};
}
function Oa(e, t, n, o, a, r) {
const s = m(!1), d = E(() => e.enableClear && !e.readonly && !e.disable && !dt()), { changeTextBoxValue: y, hasClearClass: b } = r, p = m(!1);
function u(S) {
s.value = S, b.value = S;
}
const T = E(() => d.value && !!(a != null && a.value) && p.value);
se(a, () => {
u(T.value);
});
function c(S) {
const w = !e.readonly && !e.disable && e.editable, B = !e.editable;
S == null || S.stopPropagation(), (w || B) && (y(""), a.value = "", u(!s.value), t.emit("clear"));
}
function f(S) {
if (p.value = !0, !!d.value) {
if (!n.value) {
u(!1);
return;
}
!e.disable && !e.readonly && u(!0);
}
}
function v(S) {
p.value = !1, d.value && u(!1);
}
return {
enableClearButton: d,
showClearButton: s,
onClearValue: c,
onMouseEnterTextBox: f,
onMouseLeaveTextBox: v
};
}
function Ea(e, t, n, o, a) {
const r = E(() => e.popupOnInput), s = E(() => e.popupOnFocus), { shouldPopupContent: d, closeAllPopover: y } = a, b = m(!1), p = E(() => e.enableTitle ? n.value : ""), u = E(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), T = E(() => e.readonly || !e.editable || dt()), c = m(!1), f = E(() => !e.disable && c.value), v = E(() => ({
"text-left": e.textAlign === "left",
"text-center": e.textAlign === "center",
"text-right": e.textAlign === "right",
"form-control": !0,
"f-utils-fill": !0
})), S = 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": f.value,
"input-group--has-clear": e.enableClear && b.value
}));
function w(j, X = !0) {
n.value = j, X && (t.emit("change", j), t.emit("update:modelValue", j));
}
function B(j) {
d.value = !1, w(j, !0);
}
se(
() => e.modelValue,
(j) => {
n.value = j;
}
);
function N(j) {
c.value = !1, t.emit("blur", j), j.stopPropagation();
}
function G(j) {
t.emit("click", j), y(), t.slots.default && !e.disable && !e.readonly && e.popupOnClick && a.togglePopup();
}
function W(j) {
!e.disable && !e.readonly && (c.value = !0, T.value || (t.emit("focus", j), s.value && !d.value && a.popup()));
}
function A(j) {
t.emit("input", j);
const X = j.target.value;
o.value = X, n.value !== X && w(X, e.updateOn === "change"), r.value && !d.value && a.popup();
}
function I(j) {
j.target.tagName !== "INPUT" && j.preventDefault(), j.stopPropagation();
}
function O(j) {
t.emit("keydown", j);
}
function P(j) {
j.key === "Enter" && (r.value || s.value) && a.hidePopup(), t.emit("keyup", j);
}
function k(j) {
const X = j.target.value;
j.stopPropagation(), w(X);
}
return {
hasFocusedTextBox: f,
isTextBoxReadonly: T,
textBoxClass: v,
textBoxPlaceholder: u,
textBoxTitle: p,
inputGroupClass: S,
hasClearClass: b,
changeTextBoxValue: w,
commitValue: B,
onBlurTextBox: N,
onClickTextBox: G,
onFocusTextBox: W,
onInput: A,
onKeyDownTextBox: O,
onKeyUpTextBox: P,
onMouseDownTextBox: I,
onTextBoxValueChange: k
};
}
const et = "FarrisVue_PopoverInstancesKey";
function Ia(e, t, n, o) {
const a = m(), r = m(!1), { judgeCanOpen: s } = un(e, o);
se(() => a.value, (c, f) => {
window[et] = window[et] || /* @__PURE__ */ new WeakMap(), c ? window[et].set(n.value, c) : window[et].delete(n.value);
});
function d() {
if (window[et]) {
const c = window[et];
document.querySelectorAll(".f-button-edit,.v-popover").forEach((f) => {
const v = c.get(f);
v && f !== n.value && !n.value.closest(".popover-fitcontent") && v.hide();
});
}
}
function y() {
const c = a.value;
c && (c.show ? c.show(n.value) : c.open && c.open(n.value));
}
async function b(c = !1) {
if (!!t.slots.default) {
if (!c && !r.value && !await s())
return;
r.value = !r.value, r.value && (await nt(), y());
}
}
async function p(c = !1) {
if (!!t.slots.default) {
if (!c && !await s())
return;
r.value = !0, await nt(), y();
}
}
function u() {
r.value = !1;
}
function T() {
r.value = !0, nt(() => {
y();
});
}
return { hidePopup: u, showPopup: T, popup: p, shouldPopupContent: r, togglePopup: b, popoverRef: a, closeAllPopover: d };
}
function Pa(e, t, n) {
const o = m(), {
isTextBoxReadonly: a,
textBoxClass: r,
textBoxPlaceholder: s,
textBoxTitle: d,
onBlurTextBox: y,
onClickTextBox: b,
onFocusTextBox: p,
onInput: u,
onKeyDownTextBox: T,
onKeyUpTextBox: c,
onMouseDownTextBox: f,
onTextBoxValueChange: v
} = n, S = m(e.id), {
uuid: w
} = mo(), B = E(() => ({
// 'border-top-right-radius': '6px',
// 'border-bottom-right-radius': '6px'
}));
ut(() => {
var I, O;
e.selectOnCreated && ((I = o.value) == null || I.select()), e.focusOnCreated && ((O = o.value) == null || O.focus({
preventScroll: !0
})), S.value || (S.value = "button-edit_" + w(8)), S.value = S.value + "-textbox";
});
const N = m(!1), G = (I) => {
I.preventDefault(), N.value = !0;
}, W = (I) => {
I.preventDefault(), N.value = !1, u(I);
};
function A(I) {
N.value || u(I);
}
return () => l("input", {
id: e.id ? e.id + "-textbox" : void 0,
ref: o,
name: "input-group-value",
autocomplete: e.autoComplete ? "on" : "off",
class: r.value,
style: B.value,
disabled: e.disable,
maxlength: e.maxLength,
minlength: e.minLength,
placeholder: s.value,
readonly: a.value,
tabindex: e.tabIndex,
title: d.value,
type: e.inputType,
value: t.value,
onBlur: y,
onChange: v,
onClick: b,
onFocus: p,
onInput: A,
onKeydown: T,
onKeyup: c,
onMousedown: f,
onCompositionend: W,
onCompositionstart: G
}, null);
}
function Da(e, t, n) {
const o = m(e.separator), a = E(() => e.readonly || e.disable), {
changeTextBoxValue: r,
onFocusTextBox: s,
onBlurTextBox: d,
onClickTextBox: y,
textBoxPlaceholder: b
} = n, p = E(() => t.value ? t.value.split(o.value).map((f) => ({
name: f,
selectable: !0
})) : []);
function u(f) {
r(f.map((v) => v.name).join(o.value), !0);
}
se(() => e.separator, (f) => {
o.value = f;
});
const T = m(!e.disable && !e.readonly);
se([() => e.disable, () => e.readonly], ([f, v], [S, w]) => {
T.value = !f && !v;
});
function c(f) {
y(f);
}
return () => l(ho, {
tabindex: e.tabIndex,
onFocus: s,
onBlur: d,
id: `${e.id}-tag-editor`,
class: "form-control",
placeholder: b.value,
data: p.value,
showClose: !a.value,
showInput: !0,
disable: a.value,
onChange: u,
onClick: c
}, null);
}
function Ra(e, t, n, o) {
const {
buttonGroupClass: a,
onClickButton: r,
onMouseEnterButton: s,
onMouseLeaveButton: d
} = n, {
enableClearButton: y,
showClearButton: b,
onClearValue: p
} = o, u = m(), T = tn((v) => {
r(v);
}, e.buttonBehavior === "Modal" ? 0 : 200), c = () => {
t.emit("beforeClearValue");
}, {
renderExpandContent: f
} = po(e, t);
return {
renderButtonGroup: () => l(Be, null, [l("div", {
id: e.id ? `${e.id}-button-group` : void 0,
class: a.value
}, [y.value && Jt(l("span", {
class: "input-group-text input-group-clear",
onClick: p,
onMousedown: c