@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,539 lines (1,538 loc) • 94.9 kB
JavaScript
var Ot = Object.defineProperty;
var jt = (e, m, t) => m in e ? Ot(e, m, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[m] = t;
var J = (e, m, t) => jt(e, typeof m != "symbol" ? m + "" : m, t);
import { getCustomClass as re, isMobilePhone as At, useGuid as _t, withInstall as $t } from "../../components/common/index.esm.js";
import { resolveAppearance as Lt, createPropsResolver as lt, createResponseToolbarEventHandlerResolver as Nt, getSchemaByType as at } from "../../components/dynamic-resolver/index.esm.js";
import { responseToolbarProps as ct } from "../../components/response-toolbar/index.esm.js";
import { computed as fe, createVNode as L, Teleport as Ft, getCurrentInstance as Wt, reactive as Pe, withDirectives as Ee, resolveDirective as Me, ref as oe, defineComponent as ze, watch as ke, onMounted as Ge, onUnmounted as ut, nextTick as Te, inject as xe, provide as qt, createTextVNode as zt } from "vue";
import { LocaleService as Gt } from "../../components/locale/index.esm.js";
import { canvasChanged as Fe, useDesignerInnerComponent as Ut, FDesignerInnerItem as Yt, useDesignerComponent as Xt, setPositionForSelectedElement as Ht } from "../../components/designer-canvas/index.esm.js";
import { BaseControlProperty as dt } from "../../components/property-panel/index.esm.js";
import { isPlainObject as nt, cloneDeep as Ce } from "lodash-es";
import { TabToolbarItemProperty as Vt } from "../../components/tabs/index.esm.js";
const Qt = /* @__PURE__ */ new Map([
["buttons", "items"],
["appearance", Lt]
]);
function ft(e, m, t) {
return m;
}
const Zt = "https://json-schema.org/draft/2020-12/schema", Jt = "https://farris-design.gitee.io/response-toolbar.schema.json", Kt = "response-toolbar", en = "A Farris Toolbar Component", tn = "object", nn = {
id: {
description: "The unique identifier for a Response Toolbar",
type: "string"
},
type: {
description: "The type string of Response Toolbar",
type: "string",
default: "response-toolbar"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string",
default: ""
}
}
},
alignment: {
description: "The alignment of Response Toolbar Button.",
type: "string",
default: "right"
},
buttons: {
description: "The items of Response Toolbar.",
type: "array",
default: []
},
buttonSize: {
type: "string",
default: ""
},
visible: {
description: "",
type: "boolean",
default: !0
},
moreButtonClass: {
description: "处于下拉菜单时的样式",
type: "string",
default: "btn-secondary"
}
}, on = [
"id",
"type",
"buttons"
], rn = {
onClick: "点击事件"
}, sn = {
$schema: Zt,
$id: Jt,
title: Kt,
description: en,
type: tn,
properties: nn,
required: on,
events: rn
}, ln = "https://json-schema.org/draft/2020-12/schema", an = "https://farris-design.gitee.io/response-toolbar-item.schema.json", cn = "response-toolbar-item", un = "A Farris Toolbar Item Component", dn = "object", fn = {
id: {
description: "The unique identifier for a Response Toolbar",
type: "string"
},
type: {
description: "The type string of Response Toolbar",
type: "string",
default: "response-toolbar-item"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string",
default: ""
}
}
},
alignment: {
description: "对齐",
type: "string",
default: "right"
},
text: {
description: "文本",
type: "string",
default: "按钮"
},
icon: {
description: "图标",
type: "string",
default: ""
},
disabled: {
description: "禁用",
type: "boolean",
default: !1
},
visible: {
description: "是否可见",
type: "boolean",
default: !0
},
onClick: {
description: "点击事件",
type: "string",
default: ""
},
tipsEnable: {
description: "",
type: "boolean",
default: !1
},
tipsText: {
description: "",
type: "string",
default: ""
},
dropdownClass: {
description: "处于下拉菜单时的样式",
type: "string",
default: ""
},
split: {
description: "",
type: "boolean",
default: !1
}
}, pn = [
"id",
"type",
"text"
], hn = {
onClick: "点击事件"
}, gn = {
$schema: ln,
$id: an,
title: cn,
description: un,
type: dn,
properties: fn,
required: pn,
events: hn
}, bn = Object.assign({}, ct, {
componentId: { type: String, default: "" }
}), Ue = lt(
ct,
sn,
Qt,
ft
), vn = {
id: { type: String, default: "" },
item: { type: Object, default: {} },
items: { type: Object, default: {} },
class: { type: String, default: "" },
text: { type: String, default: "" },
disabled: { type: Boolean, default: !1 },
icon: { type: String, default: "" },
componentId: { type: String, default: "" },
// 是否展开子级
expanded: { type: Boolean, default: !1 },
alignment: { Type: String, default: "right" },
split: { type: Boolean, default: !1 },
// 是否下拉
isDP: { type: Boolean, default: !1 },
// 是否下拉项
isDPItem: { type: Boolean, default: !1 }
}, pt = Object.assign({}, vn, {
item: { type: Object, default: {} },
items: { type: Object, default: {} },
class: { type: String, default: "btn-secondary" },
alignment: { Type: String, default: "right" }
}), mn = lt(
pt,
gn,
void 0,
ft
), yn = Nt(), wn = {
id: { type: String, default: "" },
/** 组件自定义样式 */
customClass: { type: String, default: "" },
alignment: { Type: String, default: "right" },
items: {
Type: Array,
default: []
},
/** 控制是否可见 */
visible: { type: Boolean, default: !0 },
/** 更多按钮的样式 */
moreButtonClass: { type: String, default: "btn-secondary" }
};
class ht {
constructor(m) {
/** 工具栏项标识 */
J(this, "id", "");
/** 工具栏项自定义样式 */
J(this, "class", "btn-secondary");
/** 图标 */
J(this, "icon", "");
/** 所属分组 */
J(this, "groupId", "");
/** 收藏顺序 */
J(this, "order", -1);
/** 是否作为下拉菜单的顶层按钮 */
J(this, "asDropDownTop", !1);
/** 文本 */
J(this, "text", "");
/** 是否可见原值 */
J(this, "visible", !0);
/** 控制界面是否显示 */
J(this, "shown", !0);
J(this, "responsed", !1);
/** 是否启用提示消息 */
J(this, "tipsEnable", !1);
/** 提示消息内容 */
J(this, "tipsText", "");
/** 记录宽度 */
J(this, "width", 0);
/** 下拉时的样式名 */
J(this, "dropdownClass", "");
J(this, "onClick", () => {
});
J(this, "options");
var h, c;
this.options = m;
const t = [
"id",
"class",
"icon",
"groupId",
"order",
"asDropDownTop",
"text",
"isDP",
"visible",
"responsed",
"width",
"tipsEnable",
"tipsText",
"dropdownClass",
"onClick"
];
Object.keys(m).filter((r) => t.indexOf(r) > -1).forEach((r) => {
r === "visible" ? this[r] = m[r] === void 0 ? !0 : m[r] : this[r] = m[r];
}), this.shown = this.visible, (h = m.appearance) != null && h.class && (this.class = (c = m.appearance) == null ? void 0 : c.class);
}
/** 是否可用 */
get enable() {
return Object.keys(this.options).indexOf("disabled") > -1 ? !this.options.disabled : fe(() => !0);
}
/** 设置宽度 */
setWidth(m) {
this.width = parseInt(m, 10);
}
/** 获取宽度 */
getWidth() {
return this.visible ? this.width : !1;
}
}
class xn extends ht {
constructor(m) {
super(m);
}
}
function gt() {
function e(m) {
const t = [];
return m.reduce((h, c) => (c.children && c.children.length > 0 ? h.push(new Ie(c)) : h.push(new xn(c)), h), t), t;
}
return { buildResponseToolbarItems: e };
}
const { buildResponseToolbarItems: Cn } = gt();
class Ie extends ht {
constructor(t) {
super(t);
J(this, "placement", "");
// 下拉位置
/** 是否可见 */
J(this, "visible", !0);
/** 下拉class */
J(this, "dropdownClass", "");
/** 下拉菜单class */
J(this, "menuClass", "");
/** 是否用分开的下拉按钮 */
J(this, "split", !1);
J(this, "children", []);
J(this, "expanded", !1);
J(this, "shown", !0);
const h = ["visible", "icon", "isDP", "class", "dropdownClass", "menuClass", "placement", "split", "expanded"];
Object.keys(t).filter((c) => h.indexOf(c) > -1).forEach((c) => {
c === "visible" ? this[c] = t[c] === void 0 ? !0 : t[c] : this[c] = t[c];
}), this.shown = this.visible, t.children && t.children.length && (this.children = Cn(t.children));
}
}
function Ye() {
function e(t) {
const h = {
"f-icon": !0
};
if (t.icon) {
const c = t.icon.trim().split(" ");
c && c.length && c.reduce((r, T) => (r[T] = !0, r), h);
}
return h;
}
function m(t) {
return !!(t.icon && t.icon.trim());
}
return { iconClass: e, shouldShowIcon: m };
}
function Tn(e, m) {
function t(p) {
return re({
"dropdown-menu": !0
}, p.menuClass);
}
function h(p) {
const o = {
disabled: !p.enable,
"dropdown-submenu": !0,
"f-rt-dropdown": !0,
"text-truncate": !0
};
return re(o, p.dropdownClass);
}
function c(p) {
const o = {
disabled: !p.enable,
"dropdown-item": !0,
"f-rt-btn": !0,
"text-truncate": !0
};
return re(o, p.dropdownClass);
}
function r(p) {
const o = {
disabled: !p.enable,
"dropdown-item": !0,
"f-rt-btn": !0,
"text-truncate": !0,
"f-rt-toggle": !p.split,
"btn-icontext": !!(p.icon && p.icon.trim()),
"dropdown-toggle": !p.split,
"btn-secondary": !0
};
return re(o, p.dropdownClass);
}
function T(p) {
const o = {
"f-rt-btn": !0,
"text-truncate": !0,
"btn-icontext": !!(p.icon && p.icon.trim()),
"d-block": !0
};
return re(o, p.dropdownClass);
}
let x;
const g = /* @__PURE__ */ new Map();
let E = "";
function P(p) {
E = "#" + p;
}
function u(p, o, F) {
p.stopPropagation();
const I = F ? F.id : "__top_item__";
if (o.children && o.children.length && (o.expanded = !o.expanded, o.expanded)) {
if (g.has(I) && g.get(I) !== o) {
const f = g.get(I);
f && (f.expanded = !1, g.delete(I));
}
g.set(I, o);
}
}
function l(p, o) {
document.body.click(), o.enable && (p.stopPropagation(), typeof o.onClick == "function" && o.onClick(p, o.id), e.emit("click", p, o.id));
}
function d(p, o) {
const F = p.target;
F.className.indexOf("dropdown-item") < 0 || (F.title = F.scrollWidth > F.clientWidth ? o : "");
}
function i(p, o, F) {
if (o.tipsEnable && o.tipsText) {
const I = Pe({
content: o.tipsText,
enable: o.tipsEnable
});
return Ee(L("li", {
class: c(o),
id: o.id,
key: o.id + "_" + F,
onClick: (f) => l(f, o)
}, [L("span", {
class: T(o)
}, [m.shouldShowIcon(o) && L("i", {
class: m.iconClass(o)
}, null), o.text])]), [[Me("tooltip"), I]]);
}
return L("li", {
class: c(o),
id: o.id,
onClick: (I) => l(I, o)
}, [L("span", {
class: T(o),
onMouseenter: (I) => d(I, o.text)
}, [m.shouldShowIcon(o) && L("i", {
class: m.iconClass(o)
}, null), o.text])]);
}
function n(p, o, F) {
o.enable && (typeof o.onClick == "function" && F.onClick(p, o.id), e.emit("click", p, o.id), F.split || u(p, o, F));
}
function S(p, o, F) {
p && p.stopPropagation(), u(p, o, F);
}
function O(p, o) {
p.stopPropagation();
const F = o.id;
if (o.children && o.children.length && o.expanded && g.has(F)) {
const I = g.get(F);
I && (I.expanded = !1, g.delete(F));
}
}
function G(p, o, F) {
if (o.tipsEnable && o.tipsText) {
const I = Pe({
content: o.tipsText,
enable: o.tipsEnable
});
return L("li", {
class: h(o),
id: o.id,
key: o.id + "_" + F,
onClick: (f) => n(f, o, p)
}, [Ee(L("span", {
class: r(o)
}, [m.shouldShowIcon(o) && L("i", {
class: m.iconClass(o)
}, null), o.text]), [[Me("tooltip"), I]]), o.split && L("span", {
class: "dropdown-toggle dropdown-toggle-split f-rt-toggle",
onClick: (f) => S(f, o, p)
}, null), x(o, o)]);
}
return L("li", {
class: h(o),
id: o.id,
onClick: (I) => n(I, o, p),
onMouseenter: (I) => d(I, o.text)
}, [L("span", {
class: r(o)
}, [m.shouldShowIcon(o) && L("i", {
class: m.iconClass(o)
}, null), o.text]), o.split && L("span", {
class: "dropdown-toggle dropdown-toggle-split f-rt-toggle",
onClick: (I) => S(I, o, p)
}, null), x(o, o)]);
}
function j(p) {
return p.children.filter((o) => o.visible).map((o, F) => o.children && o.children.length ? G(p, o, F) : i(p, o, F));
}
function D(p, o) {
if (!p)
return 1080;
let F = -1;
const I = p.children.length;
for (let f = 0; f < I; f++)
if (p.children[f].id === o) {
F = f;
break;
}
return 1080 + I - F;
}
function b(p, o, F) {
var W, Y;
const I = {
display: p.expanded ? "block" : "none",
position: "fixed",
maxWidth: "300px",
minWidth: "120px",
zIndex: 1080,
// 先用固定zIndex,后期会统一调用动态的zIndex
overflowY: "auto",
maxHeight: "none"
}, f = document.querySelector(E);
if (!f)
return I;
const w = Wt();
let s = (Y = (W = w == null ? void 0 : w.exposed) == null ? void 0 : W.elementRef.value) == null ? void 0 : Y.querySelector("#" + o);
if (s || (s = f == null ? void 0 : f.querySelector("#" + o)), !s)
return I;
const v = window.innerWidth, k = window.innerHeight, M = s == null ? void 0 : s.getClientRects();
if (s && M && M.length) {
const {
top: X,
width: $,
left: N,
right: V,
height: U
} = M[0], H = Math.ceil(U + X);
I.top = `${H}px`, I.left = `${N}px`;
const q = p.id + "_menu", te = (s == null ? void 0 : s.querySelector("#" + q)) || (f == null ? void 0 : f.querySelector("#" + q)) || null;
if (te) {
te.style.visibility = "hidden", te.style.display = "block";
const ae = te.offsetHeight;
I.zIndex = p.expanded ? D(f, q) : 1080, I.display === "block" && (te.style.display = "block");
const y = te.getBoundingClientRect();
if (F) {
I.top = `${X - 6}px`;
const C = Math.ceil($ + N);
I.left = `${C}px`;
}
v - N - $ < y.width && (I.left = `${(F ? N : V) - y.width}px`), k - X - U < ae ? X > ae ? (I.top = `${X - ae - 6}px`, I.maxHeight = `${X - 16}px`) : (I.maxHeight = `${k - H}px`, X > k - X - U && (I.top = "10px", I.maxHeight = `${X - 16}px`)) : I.maxHeight = `${k - H}px`, te.style.visibility = "visible";
}
}
return I;
}
x = function(p, o) {
const F = o ? o.id : p.id;
return L(Ft, {
to: E,
disabled: !p.expanded
}, {
default: () => [L("ul", {
class: t(p),
style: b(p, F, o),
id: p.id + "_menu",
onWheel: (I) => O(I, p)
}, [j(p)])]
});
};
function B() {
g.forEach((p) => {
p.expanded = !1;
}), g.clear();
}
return {
renderDropdownMenu: x,
clearAllDropDownMenu: B,
updateContainerId: P
};
}
function Dn(e, m, t) {
const h = oe(e.alignment), {
renderDropdownMenu: c,
clearAllDropDownMenu: r,
updateContainerId: T
} = Tn(m, t);
function x(n) {
const S = {
"btn-group": !0,
"f-rt-dropdown": !0,
"f-btn-ml": h.value === "right" || h.value === "center",
"f-btn-mr": h.value === "left"
};
return re(S, n.dropdownClass);
}
function g(n) {
const S = {
btn: !0,
disabled: !n.enable,
"f-rt-btn": !0,
"btn-icontext": !!(n.icon && n.icon.trim()) && n.text,
// 图标+文本
"f-rt-toggle": !n.split,
"dropdown-toggle": !n.split,
"f-btn-icon": n.icon && !n.text
// 只有图标
};
return re(S, n.class);
}
function E(n) {
return re({
btn: !0,
"dropdown-toggle": !0,
"dropdown-toggle-split": !0
}, n.class);
}
function P(n) {
return n.split ? {
display: "flex"
} : {
display: "flex",
"border-radius": "6px"
};
}
function u(n, S) {
n.stopPropagation();
const O = S.expanded;
document.body.click(), typeof S.onClick == "function" && S.onClick(n, S.id), m.emit("click", n, S.id), S.split || (S.expanded = !O);
}
function l(n, S) {
n.stopPropagation();
const O = S.expanded;
document.body.click(), S.expanded = !O;
}
function d(n, S = !0) {
if (n.tipsEnable && n.tipsText) {
const O = Pe({
content: n.tipsText,
enable: n.tipsEnable
});
return L("div", {
id: n.id,
class: x(n)
}, [Ee(L("div", {
class: g(n),
style: P(n),
onClick: (G) => n.enable && u(G, n)
}, [t.shouldShowIcon(n) && L("i", {
class: t.iconClass(n)
}, null), n.text && L("span", null, [n.text])]), [[Me("tooltip"), O]]), n.split && L("button", {
class: E(n),
style: "border-radius:0 6px 6px 0;",
onClick: (G) => l(G, n)
}, null), S && c(n)]);
}
return L("div", {
id: n.id,
class: x(n)
}, [L("div", {
class: g(n),
style: P(n),
onClick: (O) => n.enable && u(O, n)
}, [t.shouldShowIcon(n) && L("i", {
class: t.iconClass(n)
}, null), n.text && L("span", null, [n.text])]), n.split && L("button", {
class: E(n),
style: "border-radius:0 6px 6px 0;",
onClick: (O) => l(O, n)
}, null), S && c(n)]);
}
function i() {
r();
}
return {
renderToolbarDropdown: d,
clearAllDropDown: i,
updateContainerId: T
};
}
const {
buildResponseToolbarItems: ot
} = gt(), Sn = /* @__PURE__ */ ze({
name: "FResponseToolbar",
props: wn,
emits: ["click"],
setup(e, m) {
const t = oe(ot(e.items)), h = oe(), c = oe(), r = oe(), T = At(), x = {
id: "__more_buttons__",
text: T ? "" : Gt.getLocaleValue("responseToolbar.more"),
icon: T ? "f-icon-more-horizontal" : "",
class: e.moreButtonClass
}, g = oe(new Ie(x)), E = Object.assign({}, x, {
id: x.id + "width"
}), P = oe(-1), u = Ye();
let l = !1;
const {
guid: d,
uuid: i
} = _t(), n = e.id ? e.id : "toolbar-" + d(), S = oe(), O = "dropdown-container-" + n + "-" + i(4), {
renderToolbarDropdown: G,
clearAllDropDown: j,
updateContainerId: D
} = Dn(e, m, u);
D(O);
const b = fe(() => g.value.children.length > 0), B = fe(() => e.visible ? g.value.children.length > 0 ? !0 : t.value.findIndex((y) => y.shown && y.children && y.children.length > 0) > -1 : !1);
function p() {
e.visible && !S.value && document && (S.value = document.createElement("div"), S.value.id = O, document.body.appendChild(S.value));
}
p();
function o() {
S.value && document.body.contains(S.value) && (document.body.removeChild(S.value), S.value = null);
}
ke(B, (y, C) => {
y ? p() : o();
});
const F = fe(() => {
const y = {
"f-toolbar": !0,
"f-response-toolbar": !0,
"position-relative": !0,
"f-response-toolbar-sm": e.buttonSize === "sm",
"f-response-toolbar-lg": e.buttonSize === "lg",
"d-none": !e.visible
};
return re(y, e.customClass);
}), I = fe(() => ({
"w-100": !0,
"d-flex": !0,
"flex-nowrap": !0,
"justify-content-end": e.alignment === "right",
"justify-content-start": e.alignment === "left",
"justify-content-center": e.alignment === "center"
}));
function f(y) {
y && y.target.closest("ul.dropdown-menu") && y.type === "wheel" || (t.value.filter((C) => C.children && C.children.length > 0).forEach((C) => {
C.expanded = !1;
}), g.value.expanded = !1, j());
}
function w(y, C) {
var ee;
const _ = {
btn: !0,
"f-rt-btn": !0,
"f-btn-ml": e.alignment === "right" || C > 0 && e.alignment === "center",
"f-btn-mr": e.alignment === "left",
"btn-icontext": !!(y.icon && y.icon.trim())
}, K = ((ee = y == null ? void 0 : y.appearance) == null ? void 0 : ee.class) || y.class || "btn-secondary";
return re(_, K);
}
function s(y, C) {
document.body.click(), typeof C.onClick == "function" && C.onClick(y, C.id), m.emit("click", y, C.id);
}
function v(y, C) {
if (y.tipsEnable && y.tipsText) {
const _ = Pe({
content: y.tipsText,
enable: y.tipsEnable
});
return Ee(L("button", {
type: "button",
class: w(y, C),
id: y.id,
disabled: !y.enable,
onClick: (K) => s(K, y)
}, [u.shouldShowIcon(y) && L("i", {
class: u.iconClass(y)
}, null), y.text]), [[Me("tooltip"), _]]);
}
return L("button", {
type: "button",
class: w(y, C),
id: y.id,
disabled: !y.enable,
onClick: (_) => s(_, y)
}, [u.shouldShowIcon(y) && L("i", {
class: u.iconClass(y)
}, null), y.text]);
}
let k = /* @__PURE__ */ new Map(), M = [];
function W(y) {
const C = Math.ceil(parseFloat(getComputedStyle(y).getPropertyValue("margin-left"))), _ = Math.ceil(parseFloat(getComputedStyle(y).getPropertyValue("margin-right")));
return (C || 0) + y.getBoundingClientRect().width + (_ || 0);
}
function Y(y, C, _) {
if (C < P.value) {
let K = _ - 1;
for (; K >= 0; K--) {
const ee = y[K], ne = W(ee);
if (C += ne, C >= P.value)
break;
}
_ = K;
}
return C -= P.value, _ = _ < 0 ? 0 : _, {
start: _,
space: C
};
}
function X(y) {
const C = r.value;
let _ = y;
const ee = Array.from(C.children).filter((ce) => ce.id !== "__more_buttons__"), ne = ee.length;
let ye = !1, se = 0;
for (; se < ne; se++) {
const ce = ee[se], we = W(ce);
if (we <= _)
_ -= we;
else {
const he = Y(ee, _, se);
se = he.start, _ = he.space, ye = !0;
break;
}
}
if (!ye && M.length > 0) {
const ce = Y(ee, _, se);
se = ce.start, _ = ce.space;
}
const De = M.length > 0;
for (; se < ne; se++) {
const ce = ee[se], we = W(ce);
k.set(ce.id, !0);
const he = M.find((Be) => Be.id === ce.id);
he ? he.width = we : M[De ? "unshift" : "push"]({
id: ce.id,
width: we
});
}
return _;
}
function $() {
k = /* @__PURE__ */ new Map(), M = [];
}
function N(y = !1) {
const C = Object.assign({}, g.value);
C.children = [];
const _ = new Ie(C), K = t.value.reduce((ee, ne) => {
const ye = e.items.find((se) => se.id === ne.id);
return y ? (_.children.push(ne), ne.shown = !1, ee) : (k.has(ne.id) ? (_.children.push(ne), ne.shown = !1) : ne.shown = ye.visible !== !1, ee.push(ne), ee);
}, []);
g.value = _, t.value = K;
}
function V(y) {
if (T) {
$(), N(!0);
return;
}
let C = X(y);
if (M.length) {
let _ = 0;
for (; _ < M.length; _++) {
const K = e.items.find((ee) => ee.id === M[_].id);
if (K && K.visible !== !1) {
const ee = M[_].width;
if (C >= ee || _ === M.length - 1 && C + P.value >= ee)
C -= ee;
else
break;
}
}
for (let K = 0; K < _; K++)
k.delete(M[K].id);
M.splice(0, _ - 1);
}
N();
}
function U() {
if (h.value && P.value < 0) {
const y = h.value.querySelector("#" + E.id);
if (!y)
return;
y.getBoundingClientRect().width === 0 ? P.value = -1 : P.value = W(y);
}
}
function H(y = -1) {
if (y === 0 || !r.value || !c.value)
return;
y < 0 && (y = c.value.getBoundingClientRect().width), y = Math.ceil(y);
const C = Math.ceil(r.value.getBoundingClientRect().width);
if (T) {
V(y), f();
return;
}
(y >= 0 && y < C || M.length) && (U(), V(y), f());
}
function q() {
return P.value < 0 && L("div", {
style: "position:fixed;top:-40px;visibility:hidden;"
}, [G(new Ie(E))]);
}
const te = new ResizeObserver((y) => {
if (y.length) {
if (T)
return;
const _ = y[0].contentRect.width;
H(_);
}
});
function ae() {
c.value && !l && (te.observe(c.value), l = !0);
}
return Ge(() => {
U(), H(), ae(), document.body.addEventListener("click", f), document.body.addEventListener("wheel", f);
}), ut(() => {
te.disconnect(), o(), document.body.removeEventListener("click", f), document.body.removeEventListener("wheel", f);
}), ke(() => e.items, () => {
t.value = ot(e.items), g.value.children = [], Te(() => {
U(), $(), H();
});
}, {
deep: !0
}), ke(() => e.visible, (y) => {
y && Te(() => {
U(), H(), ae();
});
}), m.expose({
elementRef: h
}), () => L("div", {
class: F.value,
id: n,
ref: h,
style: {
"overflow-y": P.value < 0 ? "hidden" : "initial"
}
}, [e.visible && q(), e.visible && L("div", {
ref: c,
class: I.value
}, [L("div", {
ref: r,
class: "d-inline-block f-response-content",
style: "white-space: nowrap;"
}, [t.value.filter((y) => y.shown).map((y, C) => y.children && y.children.length > 0 ? G(y) : v(y, C)), b.value && G(g.value)])])]);
}
});
class kn extends dt {
constructor(t, h, c = "response-toolbar") {
super(t, h);
// 有三类值 response-toolbar、section-toolbar、tab-toolbar
J(this, "toolbarType", "response-toolbar");
this.toolbarType = c;
}
getPropertyConfig(t) {
return this.propertyConfig.categories.basic = this.getBasicPropConfig(t), this.toolbarType !== "tab-toolbar" && this.getAppearancePropConfig(t), this.propertyConfig.categories.behavior = this.getBehaviorConfig(t), this.propertyConfig;
}
getAppearancePropConfig(t) {
this.propertyConfig.categories.appearance = {
title: "外观",
description: "Appearance",
properties: {
class: {
title: "class样式",
type: "string",
description: "组件的CSS样式",
$converter: "/converter/appearance.converter",
parentPropertyID: "appearance"
}
}
};
}
getBehaviorProperties(t) {
this.propertyConfig.categories.behavior = {
title: "行为",
description: "",
properties: {
alignment: {
title: "对齐方式",
description: "在工具栏区域内按钮组的位置",
type: "enum",
editor: {
type: "combo-list",
textField: "name",
valueField: "value",
data: [
{
value: "left",
name: "左对齐"
},
{
value: "center",
name: "居中"
},
{
value: "right",
name: "右对齐"
}
]
}
}
}
};
}
}
function In(e, m, t) {
const h = e.schema;
function c() {
var n, S, O;
let i = ((n = e.parent) == null ? void 0 : n.schema.type) || "";
i === "drawer" && (((S = e.parent) == null ? void 0 : S.schema.headerToolbar.id) === h.id ? i = "drawer-header-toolbar" : ((O = e.parent) == null ? void 0 : O.schema.footerToolbar.id) === h.id && (i = "drawer-footer-toolbar")), ["page-header", "tabs", "section", "drawer-header-toolbar", "drawer-footer-toolbar"].findIndex((G) => G === i) === -1 && (i = ""), t.toolbarPosition = i;
}
c();
function r(i) {
return !1;
}
function T(i, n) {
return n.text = i.label, n;
}
function x() {
return !1;
}
function g() {
return !1;
}
function E() {
return !1;
}
function P() {
return !0;
}
function u(i) {
return new kn(i, m, h.type).getPropertyConfig(h);
}
function l(i) {
var G;
i && (i.stopPropagation(), i.preventDefault());
const { schema: n } = e;
n.buttons || (n.buttons = []);
let S = "";
if (n.type)
S = n.type + "-item";
else
switch ((G = e.parent) == null ? void 0 : G.schema.type) {
case "tabs":
S = "tab-toolbar-item";
break;
case "section":
S = "section-toolbar-item";
break;
case "drawer":
S = "drawer-toolbar-item";
break;
default:
S = "response-toolbar-item";
}
const O = at(S);
O.id = `toolbar_item_${Math.random().toString().slice(2, 6)}`, n.buttons.push(O), t.updateToolbarItems(), t.changeSelectedId("");
}
function d() {
return [
{
id: "appendItem",
title: "新增按钮",
text: "",
icon: "f-icon f-icon-plus-circle text-white",
onClick: (i) => l(i)
}
];
}
return {
canAccepts: r,
checkCanAddComponent: E,
checkCanDeleteComponent: g,
checkCanMoveComponent: x,
hideNestedPaddingInDesginerView: P,
onResolveNewComponentSchema: T,
getPropsConfig: u,
getCustomButtons: d
};
}
var me = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
function Pn(e) {
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
function Se(e) {
throw new Error('Could not dynamically require "' + e + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
}
var bt = { exports: {} };
(function(e, m) {
(function(t) {
e.exports = t();
})(function() {
return (/* @__PURE__ */ function() {
function t(h, c, r) {
function T(E, P) {
if (!c[E]) {
if (!h[E]) {
var u = typeof Se == "function" && Se;
if (!P && u) return u(E, !0);
if (x) return x(E, !0);
var l = new Error("Cannot find module '" + E + "'");
throw l.code = "MODULE_NOT_FOUND", l;
}
var d = c[E] = { exports: {} };
h[E][0].call(d.exports, function(i) {
var n = h[E][1][i];
return T(n || i);
}, d, d.exports, t, h, c, r);
}
return c[E].exports;
}
for (var x = typeof Se == "function" && Se, g = 0; g < r.length; g++) T(r[g]);
return T;
}
return t;
}())({
1: [function(t, h, c) {
var r = {}, T = "(?:^|\\s)", x = "(?:\\s|$)";
function g(u) {
var l = r[u];
return l ? l.lastIndex = 0 : r[u] = l = new RegExp(T + u + x, "g"), l;
}
function E(u, l) {
var d = u.className;
d.length ? g(l).test(d) || (u.className += " " + l) : u.className = l;
}
function P(u, l) {
u.className = u.className.replace(g(l), " ").trim();
}
h.exports = {
add: E,
rm: P
};
}, {}],
2: [function(t, h, c) {
(function(r) {
var T = t("contra/emitter"), x = t("crossvent"), g = t("./classes"), E = document, P = E.documentElement;
function u(f, w) {
var s = arguments.length;
s === 1 && Array.isArray(f) === !1 && (w = f, f = []);
var v, k, M, W, Y, X, $, N, V, U = null, H, q, te = !1, ae = 0, y, C = w || {};
C.moves === void 0 && (C.moves = G), C.accepts === void 0 && (C.accepts = G), C.invalid === void 0 && (C.invalid = yt), C.containers === void 0 && (C.containers = f || []), C.isContainer === void 0 && (C.isContainer = O), C.copy === void 0 && (C.copy = !1), C.copySortSource === void 0 && (C.copySortSource = !1), C.revertOnSpill === void 0 && (C.revertOnSpill = !1), C.removeOnSpill === void 0 && (C.removeOnSpill = !1), C.direction === void 0 && (C.direction = "vertical"), C.ignoreInputTextSelection === void 0 && (C.ignoreInputTextSelection = !0), C.mirrorContainer === void 0 && (C.mirrorContainer = E.body);
var _ = T({
containers: C.containers,
start: mt,
end: He,
cancel: Je,
remove: Ze,
destroy: se,
canMove: Be,
dragging: !1
});
return C.removeOnSpill === !0 && _.on("over", xt).on("out", Ct), ee(), _;
function K(a) {
return _.containers.indexOf(a) !== -1 || C.isContainer(a);
}
function ee(a) {
var R = a ? "remove" : "add";
i(P, R, "mousedown", ce), i(P, R, "mouseup", Oe);
}
function ne(a) {
var R = a ? "remove" : "add";
i(P, R, "mousemove", we);
}
function ye(a) {
var R = a ? "remove" : "add";
x[R](P, "selectstart", De), x[R](P, "click", De);
}
function se() {
ee(!0), Oe({});
}
function De(a) {
H && a.preventDefault();
}
function ce(a) {
W = a.clientX, Y = a.clientY;
var R = n(a) !== 1 || a.metaKey || a.ctrlKey;
if (!R) {
var A = a.target, z = he(A);
z && (H = z, ne(), a.type === "mousedown" && (B(A) ? A.focus() : a.preventDefault()));
}
}
function we(a) {
if (H) {
if (n(a) === 0) {
Oe({});
return;
}
if (!(a.clientX !== void 0 && Math.abs(a.clientX - W) <= (C.slideFactorX || 0) && a.clientY !== void 0 && Math.abs(a.clientY - Y) <= (C.slideFactorY || 0))) {
if (C.ignoreInputTextSelection) {
var R = I("clientX", a) || 0, A = I("clientY", a) || 0, z = E.elementFromPoint(R, A);
if (B(z))
return;
}
var Q = H;
ne(!0), ye(), He(), Xe(Q), g.add(N || M, "gu-transit"), Dt(), Tt(), ae = 0, _e(a);
}
}
}
function he(a) {
if (!(_.dragging && v) && !K(a)) {
for (var R = a; b(a) && K(b(a)) === !1; )
if (C.invalid(a, R) || (a = b(a), !a))
return;
var A = b(a);
if (A && !C.invalid(a, R)) {
var z = C.moves(a, A, R, o(a));
if (z)
return {
item: a,
source: A
};
}
}
}
function Be(a) {
return !!he(a);
}
function mt(a) {
var R = he(a);
R && Xe(R);
}
function Xe(a) {
Bt(a.item, a.source) && (N = a.item.cloneNode(!0), _.emit("cloned", N, a.item, "copy")), k = a.source, M = a.item, X = $ = o(a.item), _.dragging = !0, _.emit("drag", M, k);
}
function yt() {
return !1;
}
function He() {
if (_.dragging) {
var a = N || M;
Qe(a, b(a));
}
}
function Ve() {
H = !1, ne(!0), ye(!0);
}
function Oe(a) {
if (Ve(), !!_.dragging) {
var R = N || M, A = I("clientX", a) || 0, z = I("clientY", a) || 0, Q = S(v, A, z), Z = Ke(Q, A, z);
Z && (N && C.copySortSource || !N || Z !== k) ? Qe(R, Z) : C.removeOnSpill ? Ze() : Je();
}
}
function Qe(a, R) {
var A = b(a);
N && C.copySortSource && R === k && A.removeChild(M), Ae(R) ? _.emit("cancel", a, k) : _.emit("drop", a, R, k, $), je();
}
function Ze() {
if (_.dragging) {
var a = N || M, R = b(a);
R && R.removeChild(a), _.emit(N ? "cancel" : "remove", a, R, k), je();
}
}
function Je(a) {
if (_.dragging) {
var R = arguments.length > 0 ? a : C.revertOnSpill, A = N || M, z = b(A), Q = Ae(z);
Q === !1 && R && (N ? z && z.removeChild(N) : k.insertBefore(A, X)), Q || R ? _.emit("cancel", A, k, k) : _.emit("drop", A, z, k, $), je();
}
}
function je() {
var a = N || M;
Ve(), St(), kt(), a && g.rm(a, "gu-transit"), V && clearTimeout(V), _.dragging = !1, U && _.emit("out", a, U, k), _.emit("dragend", a, ae), k = M = N = X = $ = V = U = null;
}
function Ae(a, R) {
var A;
return R !== void 0 ? A = R : v ? A = $ : A = o(N || M), a === k && A === X;
}
function Ke(a, R, A) {
for (var z = a; z && !Q(); )
z = b(z);
return z;
function Q() {
var Z = K(z);
if (Z === !1)
return !1;
var ge = et(z, a), ue = tt(z, ge, R, A), pe = Ae(z, ue);
return pe ? !0 : C.accepts(M, z, k, ue);
}
}
function _e(a) {
if (!v)
return;
a.preventDefault();
var R = I("clientX", a) || 0, A = I("clientY", a) || 0;
v.style.left = R - 2 + "px", v.style.top = A - 2 + "px";
var z = N || M, Q = S(v, R, A), Z = Ke(Q, R, A), ge = Z !== null && Z !== U;
(ge || Z === null) && (de(), U = Z, ve()), Rt(Q, A);
var ue = b(z);
if (Z === k && N && !C.copySortSource) {
ue && ue.removeChild(z);
return;
}
var pe, be = et(Z, Q);
if (te = It(be, Z), be !== null)
pe = tt(Z, be, R, A);
else if (C.revertOnSpill === !0 && !N)
pe = X, Z = k;
else {
N && ue && ue.removeChild(z), N && q && (q.style.display = "none");
return;
}
q.style.display = "block", wt(pe, z, ge), pe ? Et(be, pe) : Mt(Z);
function ie(le) {
_.emit(le, z, U, k);
}
function ve() {
ge && ie("over");
}
function de() {
U && ie("out");
}
}
function wt(a, R, A) {
(a === R || a === o(R)) && ($ = o(R)), (a === null && A || a !== R && a !== o(R)) && ($ = a);
}
function xt(a) {
g.rm(a, "gu-hide");
}
function Ct(a) {
_.dragging && g.add(a, "gu-hide");
}
function Tt() {
v || (v = document.createElement("div"), v.style = "background: grey; color: white; height: 24px; text-align: center; padding: 3px 10px; min-width: 100px;border-radius: 4px; box-shadow: 0 0 6px grey;", v.innerHTML = C.getMirrorText && C.getMirrorText(M) || "控件", g.add(v, "gu-mirror"), C.mirrorContainer.appendChild(v), i(P, "add", "mousemove", _e), g.add(C.mirrorContainer, "gu-unselectable"), _.emit("cloned", v, M, "mirror"));
}
function Dt() {
if (q = document.createElement("div"), g.add(q, "gu-insertion"), M) {
var a = M.getBoundingClientRect();
q.style.left = a.left + "px", q.style.top = a.top + "px";
}
te = !1, C.mirrorContainer.appendChild(q);
}
function St() {
v && (g.rm(C.mirrorContainer, "gu-unselectable"), i(P, "remove", "mousemove", _e), b(v).removeChild(v), v = null);
}
function kt() {
q && (b(q).removeChild(q), q = null);
}
function et(a, R) {
for (var A = R; A !== a && b(A) !== a; )
A = b(A);
return A === P ? null : A;
}
function It(a, R) {
if (!R)
return te;
var A = a || R && R.lastElementChild;
if (!A)
return !0;
var z = getComputedStyle(a), Q = /^inline/.test(z.getPropertyValue("display")) || /^(left|right)$/.test(z.getPropertyValue("float"));
if (Q)
return !0;
if (R) {
var Z = getComputedStyle(R), ge = Z.getPropertyValue("display");
if (/flex$/.test(ge)) {
var ue = Z.getPropertyValue("flex-direction") || "row";
if (ue === "row" || ue === "row-reverse")
return !Pt(R);
}
return !1;
}
return !0;
}
function Pt(a) {
if (!a.children || !a.children.length)
return !1;
for (const R of Array.from(a.children)) {
const z = (R.className && R.className.split(" ") || []).filter((Q) => /^col(-md|-xl|-el){0,1}-([1-9]|10|11|12)$/.test(Q));
if (!z.length)
return !1;
for (const Q of z) {
const Z = Q.slice(Q.lastIndexOf("-") + 1);
if (parseInt(Z, 10) !== 12)
return !1;
}
}
return !0;
}
function Et(a, R) {
const A = R.getBoundingClientRect();
if (q.style.left = A.left + "px", q.style.top = A.top + "px", te) {
if (q.style.height = A.height + "px", q.style.width = "4px", a) {
const z = a.getBoundingClientRect();
z.top !== A.top && (q.style.left = z.right + "px", q.style.top = z.top + "px", q.style.height = z.height + "px");
}
} else if (q.style.height = "4px", q.style.width = A.width + "px", y) {
const z = y.getBoundingClientRect();
A.top < z.top && (q.style.display = "none");
}
R === M && M && (q.style.display = "none");
}
function Mt(a) {
$ = null;
var R = a.lastElementChild;
if (R) {
var A = R.getBoundingClientRect();
te ? (q.style.left = A.right + "px", q.style.top = A.top + "px", q.style.height = A.height + "px", q.style.width = "4px") : (q.style.left = A.left + "px", q.style.top = A.bottom + "px", q.style.height = "4px", q.style.width = A.width + "px"), R === M && M && (q.style.display = "none");
} else
q.style.display = "none";
}
function Rt(a, R) {
if (!C.mirrorContainer.contains(a) || !window.scrollContainerList || !Array.from(window.scrollContainerList).length || (y = l(a), !y || !y.contains(a)))
return;
const A = document.querySelector(".dgComponentSelected"), z = y.getBoundingClientRect();
if (R - 30 < z.top && y.scrollTop > 0) {
let Q = y.scrollTop < 10 ? y.scrollTop : 10;
y.scrollBy(0, -1 * Q), A && y.contains(A) && (ae = ae + -1 * Q);
}
if (R + 30 > z.bottom && y.scrollTop < y.scrollHeight - y.clientHeight) {
const Q = y.scrollHeight - y.clientHeight - y.scrollTop;
let Z = Q < 10 ? Q : 10;
y.scrollBy(0, Z), A && y.contains(A) && (ae = ae + Z);
}
}
function tt(a, R, A, z) {
var Q = C.direction === "horizontal", Z = C.direction === "mixed", ge = R !== a ? pe() : ue();
return ge;
function ue() {
var ie = a.children.length, ve, de, le;
for (ve = 0; ve < ie; ve++)
if (de = a.children[ve], le = de.getBoundingClientRect(), Q && le.left + le.width / 2 > A || !Z && !Q && le.top + le.height / 2 > z || Z && le.left + le.width > A && le.top + le.height > z)
return de;
return null;
}
function pe() {
var ie = R.getBoundingClientRect();
if (Z) {
var ve = z - ie.top, de = A - ie.left, le = ie.bottom - z, $e = ie.right - A, Le = Math.min(de, $e, ve, le), Ne;
return te ? Ne = $e < de : Ne = le === Le || $e === Le || de === Le, be(Ne);
}
return be(Q ? A > ie.left + j(ie) / 2 : z > ie.top + D(ie) / 2);
}
function be(ie) {
return ie ? o(R) : R;
}
}
function Bt(a, R) {
return typeof C.copy == "boolean" ? C.copy : C.copy(a, R);
}
}
function l(f) {
const w = Array.from(window.scrollContainerList);
if (w.length === 1) {
const v = Array.from(window.scrollContainerList)[0];
return document.getElementById(v);
}
const s = d(w);
for (const v of s)
if (v.contains(f))
return v;
return null;
}
function d(f) {
const w = [];
return f.forEach((s) => {
const v = document.getElementById(s);
v && w.push(v);
}), w.sort((s, v) => s.contains(v) ? 1 : v.contains(s) ? -1 : 0), w;
}
function i(f, w, s, v) {
var k = {
mouseup: "touchend",
mousedown: "touchstart",
mousemove: "touchmove"
}, M = {
mouseup: "pointerup",
mousedown: "pointerdown",
mousemove: "pointermove"
}, W = {
mouseup: "MSPointerUp",
mousedown: "MSPointerDown",
mousemove: "MSPointerMove"
};
r.navigator.pointerEnabled ? x[w](f, M[s], v) : r.navigator.msPointerEnabled ? x[w](f, W[s], v) : (x[w](f, k[s], v), x[w](f, s, v));
}
function n(f) {
if (f.touches !== void 0)
return f.touches.length;
if (f.which !== void 0 && f.which !== 0)
return f.which;
if (f.buttons !== void 0)
return f.buttons;
var w = f.button;
if (w !== void 0)
return w & 1 ? 1 : w & 2 ? 3 : w & 4 ? 2 : 0;
}
function S(f, w, s) {
f = f || {};
var v = f.className || "", k;
return f.className += " gu-hide", k = E.elementFromPoint(w, s), f.className = v, k;
}
function O() {
return !1;
}
function G() {
return !0;
}
function j(f) {
return f.width || f.right - f.left;
}
function D(f) {
return f.height || f.bottom - f.top;
}
function b(f) {
return f.parentNode === E ? null : f.parentNode;
}
function B(f) {
return f.tagName === "INPUT" || f.tagName === "TEXTAREA" || f.tagName === "SELECT" || p(f);
}
function p(f) {
return !f || f.contentEditable === "false" ? !1 : f.contentEditable === "true" ? !0 : p(b(f));
}
function o(f) {
return f.nextElementSibling || w();
function w() {
var s = f;
do
s = s.nextSibling;
while (s && s.nodeType !== 1);
return s;
}
}
function F(f) {
return f.targetTouches && f.targetTouches.length ? f.targetTouches[0] : f.changedTouches && f.changedTouches.length ? f.changedTouches[0] : f;
}
function I(f, w) {
var s = F(w), v = {
pageX: "clientX",
// IE8
pageY: "clientY"
// IE8
};
return f in v && !(f in s) && v[f] in s && (f = v[f]), s[f];
}
h.exports = u;
}).call(this, typeof me < "u" ? me : typeof self < "u" ? self : typeof window < "u" ? window : {});
}, { "./classes": 1, "contra/emitter": 5, crossvent: 6 }],
3: [function(t, h, c) {
h.exports = function(T, x) {
return Array.prototype.slice.call(T, x);
};
}, {}],
4: [function(t, h, c) {
var r = t("ticky");
h.exports = function(x, g, E) {
x && r(function() {
x.apply(E || null, g || []);
});
};
}, { ticky: 10 }],
5: [function(t, h, c) {
var r = t("atoa"), T = t("./debounce");
h.exports = function(g, E) {
var P = E || {}, u = {};
return g === void 0 && (g = {}), g.on = function(l, d) {
return u[l] ? u[l].push(d) : u[l] = [d], g;
}, g.once = function(l, d) {
return d._once = !0, g.on(l, d), g;
}, g.off = function(l, d) {
var i = arguments.length;
if (i === 1)
delete u[l];
else if (i === 0)
u = {};
else {
var n = u[l];
if (!n)
return g;
n.splice(n.indexOf(d), 1);
}
return g;
}, g.emit = function() {