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