@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,608 lines • 301 kB
JavaScript
var xn = Object.defineProperty;
var Cn = (e, t, n) => t in e ? xn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var te = (e, t, n) => Cn(e, typeof t != "symbol" ? t + "" : t, n);
import { defineComponent as q, ref as y, computed as B, createVNode as s, Teleport as vt, createApp as Ge, onUnmounted as we, Fragment as le, watch as z, nextTick as oe, onBeforeMount as kn, onMounted as _, watchEffect as wn, Transition as ht, shallowRef as Sn, render as ze, h as Fn, cloneVNode as Tn, mergeProps as he, inject as Z, withDirectives as Xe, vShow as Bn, createTextVNode as U, onUpdated as Ke, onBeforeUnmount as gt, reactive as J, provide as bt, vModelText as Mn, vModelCheckbox as On, getCurrentInstance as En } from "vue";
import { createPropsResolver as fe, resolveAppearance as _e, getPropsResolverGenerator as Dn } from "../dynamic-resolver/index.esm.js";
import { LocaleService as ee } from "../locale/index.esm.js";
import { isMobilePhone as Ce, getMaxZIndex as st, useGuid as In, useTouchMomentum as Pn, useTouch as Nn, useCommonUtils as Pe, useBem as xt, useFarrisConfig as Vn, FormSchemaEntityFieldType$Type as Te, EVENT_PROPERTY_TAB_IDS as Rn, withInstall as Je, getCustomClass as jn, getCustomStyle as Ln } from "../common/index.esm.js";
import { InputBaseProperty as An } from "../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 Hn from "../tags/index.esm.js";
import { debounce as Ze, isUndefined as zn, cloneDeep as pe } from "lodash-es";
import { useInputExpand as $n } from "../common/index.esm.js/text-box/use-input-expand";
import Wn from "../popover/index.esm.js";
import qn from "../drawer/index.esm.js";
import Ct, { FButtonEdit as kt } from "../button-edit/index.esm.js";
import Yn from "../list-view/index.esm.js";
import "bignumber.js";
import Un from "../../designer/button-edit/index.esm.js";
import { useDesignerComponent as Qe, useDragulaCommonRule as Gn } from "../designer-canvas/index.esm.js";
import wt from "../tree-view/index.esm.js";
import Xn from "../event-parameter/index.esm.js";
import { FInputGroup as Kn } from "../input-group/index.esm.js";
const _n = "https://json-schema.org/draft/2020-12/schema", Jn = "https://farris-design.gitee.io/field-selector.schema.json", Zn = "field-selector", Qn = "A Farris Input Component", ea = "object", ta = {
disabled: {
description: "",
type: "boolean",
default: !1
},
readonly: {
description: "",
type: "boolean",
default: !1
},
modelValue: {
description: "",
type: "string",
default: ""
},
repositoryToken: {
description: "",
type: "object",
default: null
},
fields: {
description: "",
type: "array",
default: null
},
editorParams: {
type: "object",
default: null
},
displayText: {
description: "",
type: "string",
default: ""
},
enableClear: {
description: "",
type: "boolean",
default: !0
},
beforeOpen: {
description: "",
type: "function",
default: null
},
onSubmitModal: {
description: "",
type: "function",
default: null
}
}, na = {
$schema: _n,
$id: Jn,
title: Zn,
description: Qn,
type: ea,
properties: ta
}, St = {
disabled: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
enableClear: {
type: Boolean,
default: !0
},
displayText: {
type: String,
default: ""
},
enableExpress: {
type: Boolean,
default: !1
},
modelValue: {
type: String,
default: ""
},
insertType: {
type: String,
default: "below"
// 'above'|'below'
},
fields: {
type: Array,
default: []
},
repositoryToken: {
type: Object,
default: null
},
editorParams: {
type: Object,
default: null
},
onSubmitModal: {
type: Function,
default: null
},
beforeOpen: {
type: Function,
default: null
}
}, aa = fe(St, na), la = {
/**
* 组件标识
*/
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 }
}, oa = {
popupContentPosition: { type: Object, default: { left: 0, top: 0 } },
host: { type: Object },
backgroundColor: { type: String, default: "" }
}, ia = /* @__PURE__ */ q({
name: "FOverlay",
props: oa,
emits: ["click"],
setup(e, t) {
const n = y(e.popupContentPosition), a = y(e.host), l = B(() => ({
backgroundColor: e.backgroundColor || "",
pointerEvents: "auto"
}));
function o(d) {
t.emit("click"), d.preventDefault(), d.stopPropagation();
}
B(() => {
const d = a.value;
if (d) {
const f = d.getBoundingClientRect(), {
left: h,
top: x,
height: m
} = f;
return {
left: h,
top: x + m
};
}
return n.value;
});
const i = B(() => ({
// position: 'relative',
// left: `${position.value.left}px`,
// top: `${position.value.top}px`
}));
return () => s(vt, {
to: "body"
}, {
default: () => {
var d, f;
return [s("div", {
class: "overlay-container",
onClick: (h) => o(h),
style: l.value
}, [s("div", {
style: i.value
}, [(f = (d = t.slots).default) == null ? void 0 : f.call(d)])])];
}
});
}
});
function sa(e) {
if (e.content && e.content.render)
return e.content.render;
if (e.render && typeof e.render == "function")
return e.render;
}
function ra(e) {
const t = document.createElement("div");
t.style.display = "contents";
let n;
const a = e.onClickCallback || (() => {
}), l = () => {
a(), n && n.unmount();
};
return n = Ge({
setup() {
we(() => {
document.body.removeChild(t);
});
const o = sa(e);
return () => s(ia, {
"popup-content-position": e.popupPosition,
host: e.host,
onClick: l,
backgroundColor: e.backgroundColor
}, {
default: () => [o && o()]
});
}
}), document.body.appendChild(t), n.mount(t), n;
}
class ua {
static show(t) {
return ra(t);
}
}
const ca = {
/**
* 允许点击遮罩关闭对话框
*/
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 K {
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 l = parseInt(a[4], 10), o = parseInt(a[5], 10);
return { x: l, y: o };
}
return { x: 0, y: 0 };
}
static fromEvent(t, n = null) {
if (this.isMouseEvent(t))
return new K(t.clientX, t.clientY);
if (n === null || t.changedTouches.length === 1)
return new K(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 K(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 K(0, 0);
if (window) {
const a = window.getComputedStyle(t);
if (a) {
const l = parseInt(a.getPropertyValue("left"), 10), o = parseInt(a.getPropertyValue("top"), 10);
n.x = isNaN(l) ? 0 : l, n.y = isNaN(o) ? 0 : o;
}
return n;
}
return null;
}
static copy(t) {
return new K(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 ce {
constructor(t, n) {
this.width = t, this.height = n;
}
static getCurrent(t) {
const n = new ce(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 ce(0, 0).set(t);
}
set(t) {
return this.width = t.width, this.height = t.height, this;
}
}
function da(e, t) {
const n = y(), a = y(), l = y(), o = y(), i = y(), d = y(), f = y(), h = y(), x = y(), m = y(), v = y(), C = y(e.resizeable), w = y(), T = y(e.draggable), g = y(!1);
function u() {
const O = a.value || document.body, D = window.getComputedStyle(O);
if (!D || !n.value)
return;
const A = K.getTransformInfo(n.value), W = {};
f.value && (W.deltaL = n.value.offsetLeft - f.value.x, W.deltaT = n.value.offsetTop - f.value.y);
const G = D.getPropertyValue("position");
W.width = O.clientWidth, W.height = O.clientHeight, W.pr = parseInt(D.getPropertyValue("padding-right"), 10), W.pb = parseInt(D.getPropertyValue("padding-bottom"), 10), W.position = D.getPropertyValue("position"), G === "static" && (O.style.position = "relative"), W.translateX = A.x, W.translateY = A.y, m.value = W;
}
function p(O) {
if (n.value) {
o.value = ce.getCurrent(n.value), i.value = K.getCurrent(n.value), d.value = o.value ? ce.copy(o.value) : null, f.value = i.value ? K.copy(i.value) : null, u();
const D = O.target.getAttribute("type") || "";
h.value = {
n: !!D.match(/n/),
s: !!D.match(/s/),
w: !!D.match(/w/),
e: !!D.match(/e/)
};
}
}
function S() {
var O, D, A, W;
if (n.value) {
const G = n.value;
h.value && ((h.value.n || h.value.s) && ((O = d.value) != null && O.height) && (G.style.height = d.value.height + "px"), (h.value.w || h.value.e) && ((D = d.value) != null && D.width) && (G.style.width = d.value.width + "px"), f.value && ((A = f.value) != null && A.x && (G.style.left = f.value.x + "px"), (W = f.value) != null && W.y && (G.style.top = f.value.y + "px")));
}
}
function k() {
const O = e.minHeight ? e.minHeight : 1, D = e.minWidth ? e.minWidth : 1;
d.value && f.value && h.value && o.value && (d.value.height < O && (d.value.height = O, h.value.n && i.value && (f.value.y = i.value.y + (o.value.height - O))), d.value.width < D && (d.value.width = D, h.value.w && i.value && (f.value.x = i.value.x + (o.value.width - D))), e.maxHeight && d.value.height > e.maxHeight && (d.value.height = e.maxHeight, i.value && h.value.n && (f.value.y = i.value.y + (o.value.height - e.maxHeight))), e.maxWidth && d.value.width > e.maxWidth && (d.value.width = e.maxWidth, h.value.w && i.value && (f.value.x = i.value.x + (o.value.width - e.maxWidth))));
}
function r() {
if (a.value) {
const O = m.value;
if (f.value && d.value && h.value && o.value) {
const D = O.width - O.pr - O.deltaL - O.translateX - f.value.x, A = O.height - O.pb - O.deltaT - O.translateY - f.value.y;
h.value.n && f.value.y + O.translateY < 0 && i.value && (f.value.y = -O.translateY, d.value.height = o.value.height + i.value.y + O.translateY), h.value.w && f.value.x + O.translateX < 0 && i.value && (f.value.x = -O.translateX, d.value.width = o.value.width + i.value.x + O.translateX), d.value.width > D && (d.value.width = D), d.value.height > A && (d.value.height = A);
}
}
}
function c(O) {
if (!l.value || !o.value || !i.value || !h.value)
return;
O.subtract(l.value);
const D = O.x, A = O.y;
h.value.n ? (f.value.y = i.value.y + A, d.value.height = o.value.height - A) : h.value.s && (d.value.height = o.value.height + A), h.value.e ? d.value.width = o.value.width + D : h.value.w && (d.value.width = o.value.width - D, f.value.x = i.value.x + D), r(), k(), S();
}
function b(O) {
if (!x.value)
return;
const D = K.fromEvent(O);
D && c(D);
}
function F() {
if (n.value) {
const {
width: O,
height: D,
x: A,
y: W
} = n.value.getBoundingClientRect(), G = K.getTransformInfo(n.value);
return {
size: {
width: O,
height: D
},
position: {
x: A - G.x,
y: W - G.y
}
};
}
return null;
}
function N(O) {
if (n.value) {
const D = F();
v.value = D;
}
l.value = void 0, o.value = null, i.value = null, d.value = null, f.value = null, h.value = null, x.value = null, document.removeEventListener("mousemove", b), document.removeEventListener("mouseup", N);
}
function j() {
document.addEventListener("mousemove", b), document.addEventListener("mouseup", N);
}
function V(O) {
O instanceof MouseEvent && O.button === 2 || T.value && (document.body.click(), O.stopPropagation(), O.preventDefault(), l.value = K.fromEvent(O), x.value = O.target, p(O), j());
}
function P(O) {
return n.value = O, C.value && s(le, null, [s("div", {
class: "fv-resizable-handle fv-resizable-n",
type: "n",
onMousedown: (D) => V(D)
}, null), s("div", {
class: "fv-resizable-handle fv-resizable-e",
type: "e",
onMousedown: (D) => V(D)
}, null), s("div", {
class: "fv-resizable-handle fv-resizable-s",
type: "s",
onMousedown: (D) => V(D)
}, null), s("div", {
class: "fv-resizable-handle fv-resizable-w",
type: "w",
onMousedown: (D) => V(D)
}, null), s("div", {
class: "fv-resizable-handle fv-resizable-ne",
type: "ne",
onMousedown: (D) => V(D)
}, null), s("div", {
class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal",
type: "se",
onMousedown: (D) => V(D)
}, null), s("div", {
class: "fv-resizable-handle fv-resizable-sw",
type: "sw",
onMousedown: (D) => V(D)
}, null), s("div", {
class: "fv-resizable-handle fv-resizable-nw",
type: "nw",
onMousedown: (D) => V(D)
}, null)]);
}
function M(O = !0) {
document.body.click();
const D = a.value || document.body, A = ce.getCurrent(D), W = n.value;
O && W && (w.value = F(), w.value.transform = W.style.transform), A && W && (d.value = A, d.value.height -= 14, d.value.width -= 14, W.style.height = d.value.height + "px", W.style.width = d.value.width + "px", W.style.left = "7px", W.style.top = "7px", W.style.transform = "", v.value = {
size: d.value,
position: {
x: 0,
y: 0
}
}, T.value = !1, g.value = !0);
}
function I() {
var O, D;
if (document.body.click(), w.value) {
const A = {
width: w.value.size.width || 0,
height: w.value.size.height || 0
}, W = {
x: (window.innerWidth - A.width) / 2,
y: (window.innerHeight - A.height) / 2
};
(O = d.value) == null || O.set(A), (D = f.value) == null || D.set(W);
const G = n.value;
G.style.height = A.height + "px", G.style.width = A.width + "px", G.style.left = `${W.x}px`, G.style.top = `${W.y}px`, G.style.transform = "", v.value = {
size: A,
position: W
}, T.value = e.draggable, g.value = !1;
}
}
function R() {
if (n.value) {
const O = ce.getCurrent(n.value);
if (O) {
const {
width: D,
height: A
} = O;
n.value.style.left = `${(window.innerWidth - D) / 2}px`, n.value.style.top = `${(window.innerHeight - A) / 2}px`, n.value.style.transform = "";
}
}
}
function $() {
const O = () => {
g.value ? M(!1) : R(), document.body.click();
};
return window.addEventListener("resize", O), () => {
window.removeEventListener("resize", O);
};
}
const L = $();
return {
renderResizeBar: P,
boundingElement: a,
resizedEventParam: v,
maximize: M,
restore: I,
allowDrag: T,
isMaximized: g,
unWindowResizeHandle: L,
moveToCenter: R
};
}
function fa(e, t, n) {
const a = y(), l = y(e.draggable), o = y(e.lockAxis), i = y(), d = y(), f = y(!1), h = y(new K(0, 0)), x = y(new K(0, 0)), m = y(new K(0, 0)), v = y(new K(0, 0));
z(() => n.value, (b) => {
i.value.style.cursor = b ? "move" : "default";
});
function C(b, F) {
if (F.tagName === "BUTTON")
return !1;
if (F === b)
return !0;
for (const N in F.children)
if (Object.prototype.hasOwnProperty.call(F.children, N) && C(b, F.children[N]))
return !0;
return !1;
}
function w() {
var j, V;
let b = m.value.x + x.value.x, F = m.value.y + x.value.y;
o.value === "x" ? (b = ((j = h.value) == null ? void 0 : j.x) || 0, m.value.x = 0) : o.value === "y" && (F = ((V = h.value) == null ? void 0 : V.y) || 0, m.value.y = 0);
const N = `translate3d(${Math.round(b)}px, ${Math.round(F)}px, 0px)`;
a.value && (a.value.style.transform = N), v.value.x = b, v.value.y = F;
}
function T() {
if (!d.value || !a.value)
return null;
const b = d.value.getBoundingClientRect(), F = a.value.getBoundingClientRect(), N = {
top: b.top < F.top,
right: b.right > F.right,
bottom: b.bottom > F.bottom,
left: b.left < F.left
};
return N.top || (m.value.y -= F.top - b.top), N.bottom || (m.value.y -= F.bottom - b.bottom), N.right || (m.value.x -= F.right - b.right), N.left || (m.value.x -= F.left - b.left), w(), N;
}
function g(b) {
b && (h.value && b.subtract(h.value), m.value.set(b), w(), T());
}
function u(b) {
f.value && l.value && (b.stopPropagation(), b.preventDefault(), g(K.fromEvent(b, i.value)));
}
function p() {
var b;
if (f.value) {
if (f.value = !1, x.value.add(m.value), m.value.reset(), (b = a.value) == null || b.classList.remove("ng-dragging"), !e.useTransform && a.value) {
const { left: F, top: N } = a.value.getBoundingClientRect();
a.value.style.left = Math.ceil(F) + "px", a.value.style.top = Math.ceil(N) + "px", a.value.style.transform = "none";
}
t.emit("stopMove"), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", p);
}
}
function S() {
!f.value && i.value && (f.value = !0, i.value.classList.add("ng-dragging"), document.addEventListener("mousemove", u), document.addEventListener("mouseup", p));
}
function k() {
if (a.value) {
const b = K.getTransformInfo(a.value);
x.value.set(b);
return;
}
x.value.reset();
}
function r(b) {
if (!n.value || b instanceof MouseEvent && b.button === 2)
return;
const F = b.target || b.srcElement;
i.value !== void 0 && F && !C(F, i.value) || l.value !== !1 && (document.body.click(), b.stopPropagation(), b.preventDefault(), h.value = K.fromEvent(b, a.value), k(), S());
}
function c(b, F, N) {
if (l.value && F) {
if (b)
i.value = b;
else if (e.dragHandle) {
if (e.dragHandle instanceof HTMLElement)
i.value = e.dragHandle;
else if (typeof e.dragHandle == "string") {
const j = F.querySelector(e.dragHandle);
j && (i.value = j);
}
}
a.value = F, d.value = N, i.value ? (i.value.classList.add("ng-draggable"), i.value.addEventListener("mousedown", r)) : l.value = !1;
}
}
return {
registerDraggle: c,
resetTranslate: k
};
}
function Ft(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 ma(e, t) {
const n = y(e.enableEsc);
let a = null;
return n.value ? (a = Ft("Escape", (l) => {
t.emit("esc", { event: l.event, type: "esc" });
}), {
remove: a
}) : null;
}
function ya(e, t) {
const n = y(e.enableEnter);
let a = null;
return n.value ? (a = Ft("Enter", (l) => {
t.emit("enter", { event: l.event, type: "enter" });
}), {
remove: a
}) : null;
}
const be = /* @__PURE__ */ q({
name: "FModal",
props: ca,
emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove", "buttonClick"],
setup(e, t) {
const n = y(e.width || 300), a = y(e.height || 200), l = y(e.modelValue), o = y(""), i = y(e.class), d = y(e.fitContent), f = y(e.showHeader), h = y(""), x = y(e.showCloseButton), m = y(e.showMaxButton), v = y(!1), C = y(e.dialogType), w = y(e.src), T = y(""), g = y(e.showButtons), u = y(e.title), p = y(e.containment || null), S = y();
u.value === "错误提示" && (u.value = ee.getLocaleValue("messageBox.errorTitle"));
const k = y(!1);
function r() {
const E = document.querySelectorAll(".farris-modal").length;
(!E || E - 1 <= 0) && S.value === document.querySelectorAll(".farris-modal")[0] && document.body.classList.remove("modal-open"), S.value && S.value.classList.remove("show");
}
function c(E, H) {
const Y = H ? "accept" : "cancel";
Promise.resolve().then(() => {
var X;
return (X = e.beforeClose) == null ? void 0 : X.call(e, {
closeType: Y
});
}).then((X) => {
X && (l.value = !1, t.emit("update:modelValue", !1), H != null && t.emit(H ? "accept" : "cancel"), t.emit("closed", E), r());
});
}
const b = [{
name: "cancel",
text: ee.getLocaleValue("messageBox.cancel") || "取消",
class: "btn btn-secondary",
handle: (E) => {
c(E, !1);
}
}, {
name: "accept",
text: ee.getLocaleValue("messageBox.ok") || "确定",
class: "btn btn-primary",
handle: (E) => {
c(E, !0);
}
}], F = y(e.buttons && e.buttons.length ? e.buttons : b), N = B(() => !!h.value), j = B(() => !!g.value && !!F.value), V = y(), P = y(), M = y(e.maximized || !1), {
renderResizeBar: I,
maximize: R,
restore: $,
boundingElement: L,
resizedEventParam: O,
allowDrag: D,
unWindowResizeHandle: A,
moveToCenter: W
} = da(e), {
registerDraggle: G
} = fa(e, t, D);
function Fe() {
return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open");
}
z(() => e.title, (E, H) => {
E !== H && (u.value = E);
}), z(() => e.modelValue, (E, H) => {
E !== H && (l.value = E, l.value && e.draggable && oe(() => {
P.value && !p.value && (p.value = P.value.parentElement, L.value = p.value, G(V.value, P.value, L.value), W());
}), E || (p.value && (p.value = null), r())), l.value ? k.value = Fe() : (M.value = !1, D.value = e.draggable);
}), z(() => e.showHeader, (E, H) => {
E !== H && (f.value = E);
}), z(() => e.showButtons, (E, H) => {
E !== H && (g.value = E);
}), z(() => O.value, (E, H) => {
const Y = E || {}, X = H || {};
JSON.stringify(Y) !== JSON.stringify(X) && t.emit("resize", {
newSize: E,
oldSize: H,
isMaximized: M.value
});
}), z([() => e.width, () => e.height], (E, H) => {
(E[0] !== H[0] || E[1] !== H[1]) && (n.value = E[0] || 500, a.value = E[1] || 600);
}), z(() => e.class, (E, H) => {
i.value = E;
});
const me = B(() => (l.value && document.body.classList.add("modal-open"), l.value)), je = B(() => {
var Y;
const E = {
modal: !0,
"farris-modal": !0,
fade: !0,
"fe-cmp-page-modal": !!e.showFloatingClose
};
E["f-modal-fitContent"] = !!d.value, E.show = !!me.value;
const H = (Y = e.maskClass) == null ? void 0 : Y.split(" ");
return H == null || H.reduce((X, re) => (X[re] = !0, X), E), E;
}), Jt = B(() => {
var Y;
const E = {
"modal-dialog": !0
}, H = (Y = i.value) == null ? void 0 : Y.split(" ");
return H == null || H.reduce((X, re) => (X[re] = !0, X), E), E;
}), Zt = () => Ce() && !e.isMessager || !!e.fullscreen, Qt = B(() => {
const E = document.documentElement.clientWidth, H = document.documentElement.clientHeight;
if (M.value)
return {
position: "fixed",
top: "0px",
left: "0px",
width: "100vw",
height: "100vh",
margin: "0"
};
const Y = Math.min(n.value, E), X = e.position === "right" ? "100%" : d.value ? "auto" : `${Math.min(a.value, H - 10)}px`, re = `${(window.innerHeight - (X === "100%" || X === "auto" ? 0 : parseInt(X))) / 2}px`, bn = e.position === "right" ? `${window.innerWidth - Y}px` : `${(window.innerWidth - Y) / 2}px`, it = {
position: "absolute",
top: re,
left: bn,
width: Ce() ? "auto" : `${Y}px`,
height: X
};
return e.mask || (it.pointerEvents = "auto"), it;
}), lt = y(st() || 1050), en = B(() => {
const E = {
display: "block",
overflow: "hidden"
};
return e.mask || (E.pointerEvents = "none", E.backgroundColor = "transparent"), k.value && (E.backgroundColor = "transparent"), E.zIndex = lt.value, E;
}), tn = B(() => ({
"modal-content": !0,
"modal-content-has-header": f.value,
"is-mobile": Zt()
})), nn = B(() => {
const E = {
display: f.value ? "" : "none"
};
return E["pointer-events"] = D.value ? "auto" : "none", E;
}), an = B(() => ({
"f-icon": !0,
modal_maximize: !0,
modalrevert: M.value
})), ln = B(() => ({
"modal-body": !0,
"f-utils-flex-column": C.value === "iframe",
"f-utils-fill": !0
}));
function on() {
return {
height: `${e.footerHeight || 60}px`
};
}
const sn = B(() => {
const E = {
textAlgin: T.value
}, H = on();
return Object.assign(E, H);
});
function Le(E) {
if (E == null || E.stopPropagation(), M.value) {
M.value = !1, $();
return;
}
R(), M.value = !0;
}
async function rn(E, H) {
E.handle ? await E.handle(H, E) && t.emit("closed", H) : t.emit("buttonClick", {
button: E,
$event: H
});
}
function un(E) {
E.width && (n.value = E.width), E.height && (a.value = E.height), E.buttons && (F.value = E.buttons), E.title && (u.value = E.title);
}
let Ae = null, He = null;
kn(() => {
k.value = Fe();
}), _(() => {
P.value && !p.value && (p.value = P.value.parentElement, L.value = p.value, G(V.value, P.value, L.value)), me.value && document.body.classList.add("modal-open"), Ae = ma(e, t), He = ya(e, t);
}), we(() => {
A && A(), Ae && Ae.remove(), He && He.remove();
}), t.expose({
modalElementRef: P,
updateModalOptions: un,
close: c,
maxDialog: Le,
isMaximized: M,
disableButtons: (E, H = !0) => {
F.value.forEach((Y) => {
Y.name && E.includes(Y.name) && (Y.disabled = H);
});
}
});
function cn() {
return s("div", {
class: "action-wrapper",
onClick: (E) => c(E, !1)
}, [s("span", {
class: "close-icon"
}, [s("i", {
class: "f-icon f-icon-close"
}, null)])]);
}
function dn() {
return s("ul", null, [v.value && s("li", {
class: "f-btn-icon f-bare"
}, [s("span", {
class: "f-icon modal_minimize"
}, null)]), m.value && s("li", {
onClick: Le,
class: "f-btn-icon f-bare",
style: "pointer-events: auto;"
}, [s("span", {
class: an.value
}, null)]), x.value && s("li", {
class: "f-btn-icon f-bare",
onClick: (E) => c(E, !1),
style: "pointer-events: auto;"
}, [s("span", {
class: "f-icon modal_close"
}, null)])]);
}
const fn = (E) => {
E.preventDefault();
const H = E.currentTarget, Y = E.deltaY * 0.5;
H.scrollLeft += Y;
};
function mn() {
return s("div", {
class: "modal-footer",
style: sn.value
}, [F.value && s("div", {
class: "buttons",
onWheel: fn
}, [F.value.map((E) => {
var X;
const H = y(E.disabled), Y = E.class || ((X = E.appearance) == null ? void 0 : X.class);
return s("button", {
name: E.name,
style: E.styles,
type: "button",
disabled: H.value,
class: Y + (E.iconClass ? " btn-icontext" : "") + (E.visible === !1 ? "d-none" : ""),
onClick: (re) => {
rn(E, re);
}
}, [!!E.iconClass && s("i", {
class: E.iconClass
}, null), E.text]);
})])]);
}
function ot(E) {
m.value && Le();
}
function yn() {
return s(le, null, [M.value && s("div", {
class: "modal-header",
style: "position: absolute;background: transparent;height: 45px;width: 100%;",
onDblclick: (E) => ot()
}, null), s("div", {
ref: V,
class: "modal-header",
style: nn.value,
onDblclick: (E) => ot()
}, [t.slots.headerTemplate ? t.slots.headerTemplate() : s("div", {
class: "modal-title"
}, [N.value && s("span", {
class: h.value,
style: "margin-right: 8px"
}, null), s("span", {
class: "modal-title-label"
}, [u.value])]), s("div", {
class: "actions"
}, [dn()])])]);
}
function pn() {
return t.slots.footerTemplate ? t.slots.footerTemplate() : j.value && mn();
}
function vn(E) {
if (E.stopPropagation(), e.allowClickMaskToClose) {
if (E.target !== S.value)
return;
c(E, !1);
}
}
function hn() {
var E, H;
return s("div", {
id: o.value,
class: Jt.value,
style: Qt.value,
ref: P
}, [e.showFloatingClose && cn(), s("div", {
class: tn.value
}, [f.value && yn(), s("div", {
class: ln.value
}, [(H = (E = t.slots).default) == null ? void 0 : H.call(E), C.value === "iframe" && s("iframe", {
title: o.value,
class: "f-utils-fill",
width: "100%",
frameborder: "0",
src: w.value
}, null)]), pn()]), !d.value && P.value && !M.value && I(P.value)]);
}
function gn(E) {
return E || "body";
}
return wn(() => {
me.value && (lt.value = st() || 1050);
}), () => s(vt, {
to: gn(e.host)
}, {
default: () => [me.value && s(ht, {
name: "fade",
appear: !0
}, {
default: () => [s("div", {
ref: S,
class: je.value,
style: en.value,
onClick: vn
}, [hn()])]
})]
});
}
});
function Tt(e) {
if (e.content && e.content.render)
return e.content.render;
if (e.render && typeof e.render == "function")
return e.render;
}
function pa(e) {
const t = document.createElement("div");
t.style.display = "contents";
const n = Ge({
setup(a, l) {
we(() => {
document.body.removeChild(t);
});
const o = y(), i = y(e.class || ""), d = y(!!e.showButtons), f = y(!!e.showHeader), h = y(e.showCloseButton == null ? !0 : e.showCloseButton), x = y(!!e.showFloatingClose), m = y(!0), v = y(e.title || ""), C = e.acceptCallback || (() => {
}), w = e.rejectCallback || (() => {
}), T = e.closedCallback || ((k) => {
}), g = e.resizeHandle || ((k) => {
}), u = e.stopMoveHandle || ((k) => {
}), p = Tt(e), S = (k) => {
m.value = !1, n.unmount(), T(k);
};
return _(() => {
}), l.expose({
modalRef: o
}), () => s(be, {
ref: o,
class: i.value,
modelValue: m.value,
"onUpdate:modelValue": (k) => m.value = k,
title: v.value,
width: e.width,
height: e.height,
buttons: e.buttons,
"show-header": f.value,
"show-buttons": d.value,
"show-close-button": h.value,
"show-max-button": !1,
showFloatingClose: x.value,
onAccept: C,
onCancel: w,
fitContent: e.fitContent == null ? !0 : e.fitContent,
onClosed: S,
onResize: g,
onStopMove: u
}, {
default: () => [p && p(n)]
});
}
});
return document.body.appendChild(t), n.use(ee.i18n), n.mount(t), n;
}
class Bt {
// private activeModalInstance = computed(() => {
// return this.modalRefs[this.activeModalIndex.value];
// });
constructor(t) {
te(this, "appContext", null);
te(this, "modalRef", y());
te(this, "activeModalIndex", y(0));
te(this, "modalRefs", {});
te(this, "isUseEscCloseModal", y(!1));
this.app = t, this.appContext = t ? t._context : null;
}
getCurrentModal() {
return this.modalRefs[this.activeModalIndex.value];
}
adaptToWindow(t, n) {
const {
width: a,
height: l
} = {
width: window.innerWidth,
height: window.innerHeight
};
return a < t && (t = a - 14), l < n && (n = l - 14), {
width: t,
height: n
};
}
static show(t) {
const n = Object.assign({
title: "",
showButtons: !0,
showHeader: !0
}, t);
return pa(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 = Sn(Object.assign({
title: "",
showButtons: !0,
showHeader: !0,
maximized: !1
}, t)), l = y(!0), o = a.value.acceptCallback || (() => {
}), i = a.value.rejectCallback || (() => {
}), d = a.value.closedCallback || ((F, N) => {
}), f = a.value.openedCallback || ((F) => {
}), h = a.value.resizeHandle || ((F) => {
}), x = t.stopMoveHandle || ((F) => {
});
let m;
const v = Tt(a.value), C = (F) => {
var j;
l.value = !1;
const N = (j = F == null ? void 0 : F.target) == null ? void 0 : j.classList.contains("modal_close");
d(F, this.isUseEscCloseModal.value ? "esc" : N ? "icon" : "button");
}, w = (F) => {
C(F), m && oe(() => {
if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], ze(null, n), m = null, this.modalRef.value = null, this.modalRefs) {
const N = Object.keys(this.modalRefs).map((j) => Number(j));
N.length > 0 ? this.activeModalIndex.value = Math.max(...N) : this.activeModalIndex.value = 0, this.modalRefs[this.activeModalIndex.value] && (this.modalRef.value = this.modalRefs[this.activeModalIndex.value]);
}
this.isUseEscCloseModal.value = !1;
});
}, T = (F) => {
var N;
this.isUseEscCloseModal.value = !0, (N = this.getCurrentModal()) == null || N.close(F == null ? void 0 : F.event);
}, {
width: g,
height: u
} = a.value, p = this.adaptToWindow(g || 500, u || 320);
Object.assign(a.value, p);
const S = y(), k = () => s(be, he({
ref: S,
modelValue: l.value,
"onUpdate:modelValue": (F) => l.value = F
}, a.value, {
isMessager: a.value.class && a.value.class.indexOf("modal-message") > -1,
onAccept: o,
onCancel: i,
onClosed: w,
onResize: h,
onEsc: T,
onStopMove: x,
maximized: a.value.maximized
}), {
default: () => [v && v(this.app)]
});
m = ((F) => {
const N = Fn(k, F);
return N.appContext = this.appContext, ze(N, n), N;
})({
...a.value
// 'onUpdate:modelValue': onUpdateModelValue,
}), this.activeModalIndex.value++;
const c = this.activeModalIndex.value;
this.modalRefs[c] = S.value;
const b = (F) => {
a.value = {
...a.value,
...F
}, m && ze(Tn(m, {
...a
}), n);
};
return oe(() => {
this.modalRefs[c] = S.value, this.modalRef.value = S.value, f(new Event("opened"));
}), {
update: b,
destroy: w,
modalRef: S,
close: () => {
var F;
(F = S.value) == null || F.close();
},
disableButtons: (F, N = !0) => {
var j;
(j = S.value) == null || j.disableButtons(F, N);
}
};
}
}
const xe = Symbol("FModalService");
be.install = (e) => {
e.component(be.name, be);
const t = new Bt(e);
e.provide(xe, t), e.provide("FModalService", t);
};
function Mt(e, t) {
function n() {
const a = e.beforeOpen || e.beforeClickButton || null;
let l = Promise.resolve(!0);
if (a) {
const o = a(t.value);
if (typeof o > "u")
return l;
typeof o == "boolean" ? l = Promise.resolve(o) : l = o;
}
return l;
}
return { judgeCanOpen: n };
}
function va(e, t, n, a, l) {
const o = y(e.buttonBehavior), i = y(e.popupOnInput), d = B(() => ({
"input-group-append": !0,
"append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable)
})), { judgeCanOpen: f } = Mt(e, l), h = B(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable), x = Z(xe, null), m = y();
async function v(T) {
if (await f() && h.value) {
const g = !!t.slots.default;
if (o.value === "Modal") {
const u = e.modalOptions, p = x == null ? void 0 : x.open({
...u,
render: () => t.slots.default && t.slots.default()
});
m.value = p == null ? void 0 : p.modalRef;
}
o.value === "Overlay" && ua.show({
// host: buttonEditRef.value,
host: document.body,
backgroundColor: "rgba(0,0,0,.15)",
render: () => t.slots.default && t.slots.default()
}), g && o.value === "Popup" && a.togglePopup(!0), g && i.value && a.hidePopup(), t.emit("clickButton", { origin: T, value: e.modelValue });
}
}
function C(T) {
t.emit("mouseEnterIcon", T);
}
function w(T) {
t.emit("mouseLeaveIcon", T);
}
return {
buttonGroupClass: d,
onClickButton: v,
onMouseEnterButton: C,
onMouseLeaveButton: w,
modalRef: m
};
}
function ha(e, t, n, a, l, o) {
const i = y(!1), d = B(() => e.enableClear && !e.readonly && !e.disable && !Ce()), { changeTextBoxValue: f, hasClearClass: h } = o, x = y(!1);
function m(g) {
i.value = g, h.value = g;
}
const v = B(() => d.value && !!(l != null && l.value) && x.value);
z(l, () => {
m(v.value);
});
function C(g) {
const u = !e.readonly && !e.disable && e.editable, p = !e.editable;
g == null || g.stopPropagation(), (u || p) && (f(""), l.value = "", m(!i.value), t.emit("clear"));
}
function w(g) {
if (x.value = !0, !!d.value) {
if (!n.value) {
m(!1);
return;
}
!e.disable && !e.readonly && m(!0);
}
}
function T(g) {
x.value = !1, d.value && m(!1);
}
return {
enableClearButton: d,
showClearButton: i,
onClearValue: C,
onMouseEnterTextBox: w,
onMouseLeaveTextBox: T
};
}
function ga(e, t, n, a, l) {
const o = B(() => e.popupOnInput), i = B(() => e.popupOnFocus), { shouldPopupContent: d, closeAllPopover: f } = l, h = y(!1), x = B(() => e.enableTitle ? n.value : ""), m = B(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), v = B(() => e.readonly || !e.editable || Ce()), C = y(!1), w = B(() => !e.disable && C.value), T = B(() => ({
"text-left": e.textAlign === "left",
"text-center": e.textAlign === "center",
"text-right": e.textAlign === "right",
"form-control": !0,
"f-utils-fill": !0
})), g = B(() => ({
"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": w.value,
"input-group--has-clear": e.enableClear && h.value
}));
function u(V, P = !0) {
n.value = V, P && (t.emit("change", V), t.emit("update:modelValue", V));
}
function p(V) {
d.value = !1, u(V, !0);
}
z(
() => e.modelValue,
(V) => {
n.value = V;
}
);
function S(V) {
C.value = !1, t.emit("blur", V), V.stopPropagation();
}
function k(V) {
t.emit("click", V), f(), t.slots.default && !e.disable && !e.readonly && e.popupOnClick && l.togglePopup();
}
function r(V) {
!e.disable && !e.readonly && (C.value = !0, v.value || (t.emit("focus", V), i.value && !d.value && l.popup()));
}
function c(V) {
t.emit("input", V);
const P = V.target.value;
a.value = P, n.value !== P && u(P, e.updateOn === "change"), o.value && !d.value && l.popup();
}
function b(V) {
V.target.tagName !== "INPUT" && V.preventDefault(), V.stopPropagation();
}
function F(V) {
t.emit("keydown", V);
}
function N(V) {
V.key === "Enter" && (o.value || i.value) && l.hidePopup(), t.emit("keyup", V);
}
function j(V) {
const P = V.target.value;
V.stopPropagation(), u(P);
}
return {
hasFocusedTextBox: w,
isTextBoxReadonly: v,
textBoxClass: T,
textBoxPlaceholder: m,
textBoxTitle: x,
inputGroupClass: g,
hasClearClass: h,
changeTextBoxValue: u,
commitValue: p,
onBlurTextBox: S,
onClickTextBox: k,
onFocusTextBox: r,
onInput: c,
onKeyDownTextBox: F,
onKeyUpTextBox: N,
onMouseDownTextBox: b,
onTextBoxValueChange: j
};
}
const ue = "FarrisVue_PopoverInstancesKey";
function ba(e, t, n, a) {
const l = y(), o = y(!1), { judgeCanOpen: i } = Mt(e, a);
z(() => l.value, (C, w) => {
window[ue] = window[ue] || /* @__PURE__ */ new WeakMap(), C ? window[ue].set(n.value, C) : window[ue].delete(n.value);
});
function d() {
if (window[ue]) {
const C = window[ue];
document.querySelectorAll(".f-button-edit,.v-popover").forEach((w) => {
const T = C.get(w);
T && w !== n.value && !n.value.closest(".popover-fitcontent") && T.hide();
});
}
}
function f() {
const C = l.value;
C && (C.show ? C.show(n.value) : C.open && C.open(n.value));
}
async function h(C = !1) {
if (!!t.slots.default) {
if (!C && !o.value && !await i())
return;
o.value = !o.value, o.value && (await oe(), f());
}
}
async function x(C = !1) {
if (!!t.slots.default) {
if (!C && !await i())
return;
o.value = !0, await oe(), f();
}
}
function m() {
o.value = !1;
}
function v() {
o.value = !0, oe(() => {
f();
});
}
return { hidePopup: m, showPopup: v, popup: x, shouldPopupContent: o, togglePopup: h, popoverRef: l, closeAllPopover: d };
}
function xa(e, t, n) {
const a = y(), {
isTextBoxReadonly: l,
textBoxClass: o,
textBoxPlaceholder: i,
textBoxTitle: d,
onBlurTextBox: f,
onClickTextBox: h,
onFocusTextBox: x,
onInput: m,
onKeyDownTextBox: v,
onKeyUpTextBox: C,
onMouseDownTextBox: w,
onTextBoxValueChange: T
} = n, g = y(e.id), {
uuid: u
} = In(), p = B(() => ({
// 'border-top-right-radius': '6px',
// 'border-bottom-right-radius': '6px'
}));
_(() => {
var b, F;
e.selectOnCreated && ((b = a.value) == null || b.select()), e.focusOnCreated && ((F = a.value) == null || F.focus({
preventScroll: !0
})), g.value || (g.value = "button-edit_" + u(8)), g.value = g.value + "-textbox";
});
const S = y(!1), k = (b) => {
b.preventDefault(), S.value = !0;
}, r = (b) => {
b.preventDefault(), S.value = !1, m(b);
};
function c(b) {
S.value || m(b);
}
return () => s("input", {
id: e.id ? e.id + "-textbox" : void 0,
ref: a,
name: "input-group-value",
autocomplete: e.autoComplete ? "on" : "off",
class: o.value,
style: p.value,
disabled: e.disable,
maxlength: e.maxLength,
minlength: e.minLength,
placeholder: i.value,
readonly: l.value,
tabindex: e.tabIndex,
title: d.value,
type: e.inputType,
value: t.value,
onBlur: f,
onChange: T,
onClick: h,
onFocus: x,
onInput: c,
onKeydown: v,
onKeyup: C,
onMousedown: w,
onCompositionend: r,
onCompositionstart: k
}, null);
}
function Ca(e, t, n) {
const a = y(e.separator), l = B(() => e.readonly || e.disable), {
changeTextBoxValue: o,
onFocusTextBox: i,
onBlurTextBox: d,
onClickTextBox: f,
textBoxPlaceholder: h
} = n, x = B(() => t.value ? t.value.split(a.value).map((w) => ({
name: w,
selectable: !0
})) : []);
function m(w) {
o(w.map((T) => T.name).join(a.value), !0);
}
z(() => e.separator, (w) => {
a.value = w;
});
const v = y(!e.disable && !e.readonly);
z([()