@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
747 lines (746 loc) • 24.6 kB
JavaScript
var le = Object.defineProperty;
var ae = (e, t, o) => t in e ? le(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
var _ = (e, t, o) => ae(e, typeof t != "symbol" ? t + "" : t, o);
import { defineComponent as H, ref as h, computed as P, watch as se, createVNode as r, Fragment as Q, reactive as re, createApp as de, onUnmounted as ce, onMounted as te, Transition as ue, mergeProps as me, onBeforeMount as fe, createTextVNode as q } from "vue";
import pe from "../button-edit/index.esm.js";
import ye from "../tree-grid/index.esm.js";
import ge from "../radio-group/index.esm.js";
import { FormSchemaEntityField$Type as he } from "../common/index.esm.js";
import { createPropsResolver as be } from "../dynamic-resolver/index.esm.js";
import { FormBindingType as j, SchemaDOMMapping as ve } from "../property-panel/index.esm.js";
import { merge as X } from "lodash-es";
import "bignumber.js";
import { FNotifyService as Fe } from "../notify/index.esm.js";
const Te = "https://json-schema.org/draft/2020-12/schema", Se = "https://farris-design.gitee.io/binding-selector.schema.json", we = "binding-selector", Ce = "字段绑定选择器", Ne = "object", Pe = {
disabled: {
description: "",
type: "boolean",
default: !1
},
readonly: {
description: "",
type: "boolean",
default: !1
},
bindingType: {
description: "",
type: "object",
default: {}
},
idField: {
description: "",
type: "string",
default: "id"
},
title: {
description: "",
type: "string",
default: "字段选择器"
},
modalWidth: {
description: "",
type: "number",
default: 800
},
modalHeight: {
description: "",
type: "number",
default: 600
},
separator: {
description: "",
type: "string",
default: ","
},
bindingData: {
description: "",
type: "array",
default: []
},
textField: {
description: "",
type: "string",
default: "code"
},
editorParams: {
description: "",
type: "object",
default: {}
}
}, Ve = {
$schema: Te,
$id: Se,
title: we,
description: Ce,
type: Ne,
properties: Pe
}, Z = [
{ field: "name", title: "名称" },
{ field: "bindingField", title: "绑定字段" },
{ field: "fieldType", title: "字段类型" }
], ee = [
{ field: "name", title: "名称" },
{ field: "code", title: "编号" },
{ field: "displayTypeName", title: "变量类型" }
], xe = [
{ value: "Form", text: "绑定字段" },
{ value: "LocaleVariable", text: "绑定组件变量" },
{ value: "RemoteVariable", text: "绑定表单变量" }
], W = {
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
modelValue: { type: Object, default: null },
bindingType: {
type: Object,
default: {
enable: !0,
value: "Form",
textField: "text",
valueField: "value"
}
},
data: { type: Array, default: [] },
idField: { type: String, default: "id" },
title: { type: String, default: "字段选择器" },
modalWidth: { type: Number, default: 800 },
modalHeight: { type: Number, default: 600 },
multiSelect: { type: Boolean, default: !1 },
/**
* 可选，分隔符
* 默认`,`
*/
separator: { type: String, default: "," },
bindingData: { type: Array, default: [] },
textField: { type: String, default: "code" },
beforeOpenDialog: { type: Function, default: null },
editorParams: { type: Object, default: null },
onFieldSelected: { type: Function, default: null },
/** 是否显示自定义的底部按钮区域 */
showCustomFooter: { type: Boolean, default: !1 }
}, Be = be(W, Ve), Ie = {
showCloseButton: { type: Boolean, default: !0 },
position: { type: String, default: "top-center" },
timeout: { type: Number, default: 3e3 },
theme: { type: String, default: "bootstrap" },
left: { type: Number },
right: { type: Number },
top: { type: Number },
bottom: { type: Number },
id: { type: String },
animate: { type: String, default: "fadeIn" },
options: { type: Object }
}, Oe = {
showCloseButton: { type: Boolean, default: !0 },
animate: { type: String, default: "fadeIn" },
options: { type: Object }
}, U = /* @__PURE__ */ H({
name: "Toast",
props: Oe,
emits: ["close", "click"],
setup: (e, t) => {
const o = h(e.animate), a = "fadeOut", n = P(() => e.options), d = h(!1), c = P(() => {
const y = {
animated: d.value,
toast: !0
};
return y[e.animate] = !1, y[a] = d.value, y[n.value.type] = !0, n.value.theme && (y[n.value.theme] = !0), y;
}), m = P(() => {
const S = `f-icon-${n.value && n.value.type ? n.value.type.replace("toasty-type-", "") : "default"}`, I = {
"f-icon": !0
};
return I[S] = !0, I;
}), b = P(() => n.value.title || n.value.message), v = P(() => n.value.title && n.value.message), w = P(() => !n.value.title && n.value.message), V = P(() => e.showCloseButton), T = P(() => !!n.value.buttons || !!t.slots.default);
function B(y) {
y.stopPropagation(), y.preventDefault(), d.value = !1, setTimeout(() => {
t.emit("close", n.value);
}, 200);
}
function C(y, N) {
}
function E(y) {
return `f-preten-link ${y.customClass ? y.customClass : ""}`;
}
se(o, () => {
o.value;
});
const $ = () => {
var y;
return r(Q, null, [r("div", {
class: "after-toast-msg text-right"
}, [!t.slots.default && ((y = n.value.buttons) == null ? void 0 : y.map((N) => r("span", {
class: E(N),
onClick: (S) => void 0
}, [N.text]))), t.slots.default && t.slots.default()])]);
};
return () => r("div", {
class: c.value,
style: "min-height:44px"
}, [V.value && r("button", {
title: "关闭",
class: "toast-close f-btn-icon f-bare",
onClick: B
}, [r("span", {
class: "f-icon modal_close"
}, null)]), b.value && r("section", {
class: "modal-tips"
}, [r("div", {
class: "float-left modal-tips-iconwrap"
}, [r("span", {
class: m.value
}, null)]), r("div", {
class: "modal-tips-content"
}, [v.value && r(Q, null, [r("h5", {
class: "toast-title modal-tips-title",
innerHTML: n.value.title
}, null), r("p", {
class: "toast-msg",
innerHTML: n.value.message
}, null), T.value && $()]), w.value && (n.value.buttons ? r("div", {
class: "toast-title-btns-wrapper d-flex"
}, [r("h5", {
class: "toast-title modal-tips-title only-toast-msg",
innerHTML: n.value.message
}, null), r("div", {
class: "after-toast-title text-right ml-auto"
}, [$()])]) : r("h5", {
class: "toast-title modal-tips-title only-toast-msg",
innerHTML: n.value.message
}, null))])])]);
}
}), L = /* @__PURE__ */ H({
name: "Notify",
props: Ie,
emits: ["close", "empty"],
setup(e, t) {
const o = P(() => ({
"farris-notify": !0
})), a = {
left: 12,
right: 12,
top: 20,
bottom: 12
}, n = h(), d = h(e.options), c = h(e.showCloseButton), m = P(() => e.position || "bottom-right"), b = P(() => e.timeout != null ? e.timeout : 3e3), v = P(() => {
const T = e.bottom ? e.bottom : a.bottom, B = e.top ? e.top : a.top, C = {
transition: "all 0.2s ease",
left: m.value.indexOf("left") > -1 ? `${e.left ? e.left : a.left}px` : "",
right: m.value.indexOf("right") > -1 ? `${e.right ? e.right : a.right}px` : "",
top: m.value.indexOf("top") > -1 ? `${B}px` : "",
bottom: m.value.indexOf("bottom") > -1 ? `${T}px` : ""
};
return m.value.indexOf("center") > -1 && (C.left = "50%", C.marginLeft = "calc(-24rem / 2)", m.value === "center-center" && (C.top = "50%", C.transform = "translate(-50%, -50%)")), C;
});
function w(T) {
t.emit("close");
}
b.value && setTimeout(() => {
w();
}, b.value), t.expose({
closeToast: w,
container: n,
notifyPosition: m
});
function V(T, B) {
w();
}
return () => r("div", {
class: o.value,
style: v.value,
ref: n
}, [r(U, {
options: d.value,
showCloseButton: c.value,
animate: e.animate,
onClose: (T) => V(T, d.value)
}, null)]);
}
});
class ne {
constructor() {
_(this, "notifyRefs", []);
_(this, "globalConfig", re({}));
}
createNotifyInstance(t) {
const o = this, n = Object.assign({
timeout: 3e3,
position: "bottom-right",
showCloseButton: !0
}, this.globalConfig, {
...t
}), d = document.createElement("div");
d.style.display = "contents";
const c = de({
setup() {
const m = h();
function b() {
m.value.container.style.transform = "scale(0)", setTimeout(() => {
o.updateNotifyPositionForClose(n, m), c.unmount();
}, 220);
}
if (n.position.indexOf("top") > -1) {
const v = o.getNotifyInstances(n.position), w = v[v.length - 1];
if (w) {
const V = w.value.container.getBoundingClientRect();
n.top = V.bottom;
}
}
return ce(() => {
document.body.removeChild(d);
}), te(() => {
o.updateNotifyPositionForCreate(n, m);
}), () => r(ue, {
mode: "out-in",
name: "fade",
appear: !0
}, {
default: () => [r(L, me({
ref: m
}, n, {
onClose: b
}), null)]
});
}
});
return c.provide("NotifyService", this), document.body.appendChild(d), c.mount(d), c;
}
getNotifyInstances(t) {
return this.notifyRefs.filter((o) => o.value.notifyPosition === t);
}
updateNotifyPositionForCreate(t, o) {
if (this.notifyRefs && this.notifyRefs.length) {
const a = window.innerHeight;
t.position.indexOf("bottom") > -1 && this.getNotifyInstances(t.position).forEach((n) => {
const d = n.value.container.getBoundingClientRect();
n.value.container.style.bottom = d.height + a - d.bottom + "px";
});
}
this.notifyRefs = [...this.notifyRefs, o];
}
updateNotifyPositionForClose(t, o) {
const a = this.notifyRefs.indexOf(o);
if (t.position.indexOf("top") > -1) {
const n = this.getNotifyInstances(t.position), d = n.indexOf(o);
n.slice(d + 1).forEach((c) => {
c.value.container.style.top = c.value.container.offsetTop - c.value.container.offsetHeight + "px";
});
}
a > -1 && this.notifyRefs.splice(a, 1);
}
show(t) {
return this.createNotifyInstance(t);
}
buildNotifyProps(t, o) {
let a = "", n = "", d, c, m;
typeof o == "string" ? a = o : o && (a = o.message || "", n = o.title || "", c = o.position || null, m = o.showCloseButton != null ? o.showCloseButton : null, d = o.timeout != null ? o.timeout : null);
const v = {
options: {
type: t,
message: a,
title: n
}
};
return c != null && (v.position = c), m != null && (v.showCloseButton = m), d != null && (v.timeout = d), v;
}
info(t) {
const o = this.buildNotifyProps("info", t);
return this.show(o);
}
success(t) {
const o = this.buildNotifyProps("success", t);
return this.show(o);
}
warning(t) {
const o = this.buildNotifyProps("warning", t);
return this.show(o);
}
error(t) {
const o = this.buildNotifyProps("error", t);
return this.show(o);
}
close(t) {
t && t.unmount();
}
closeAll() {
this.notifyRefs.forEach((t) => {
t == null || t.value.closeToast();
}), this.notifyRefs.length = 0;
}
}
const Me = Symbol("NOTIFY_SERVICE_TOKEN");
L.install = (e) => {
e.component(L.name, L), e.component(U.name, U);
const t = new ne();
e.provide(Me, t), e.provide("FNotifyService", t);
};
const Re = ["moz", "ms", "webkit"];
function $e() {
let e = 0;
return (t) => {
const o = (/* @__PURE__ */ new Date()).getTime(), a = Math.max(0, 16 - (o - e)), n = setTimeout(() => {
t(o + a);
}, a);
return e = o + a, n;
};
}
function Ee() {
if (typeof window > "u")
return () => 0;
if (window.requestAnimationFrame)
return window.requestAnimationFrame.bind(window);
const e = Re.filter((t) => `${t}RequestAnimationFrame` in window)[0];
return e ? window[`${e}RequestAnimationFrame`] : $e();
}
Ee();
var oe = /* @__PURE__ */ ((e) => (e.SimpleField = "SimpleField", e.ComplexField = "ComplexField", e))(oe || {});
function ie(e) {
const { designViewModelUtils: t, schemaService: o, formSchemaUtils: a } = e.editorParams.designerHostService, { viewModelId: n } = e.editorParams;
let d = [], c = [], m = [];
const b = new ne();
b.globalConfig = { position: "top-center" };
function v(l) {
switch (l) {
case "LocaleVariable":
return c;
case "RemoteVariable":
return m;
default:
return d;
}
}
function w() {
d = t.getAllFields2TreeByVMId(n);
}
function V() {
const l = a.getViewModelById(n);
if (l.parent) {
const u = a.getLocaleVariablesByViewModelId(l.parent);
u && u.length && (u[0].data.name = "根组件", c = c.concat(u));
}
const s = a.getLocaleVariablesByViewModelId(n);
c = c.concat(s);
}
function T() {
m = a.getRemoteVariables();
}
function B(l) {
var p, f, g;
const s = X({}, l.rawData, { groupId: null, groupName: null }), u = (p = e.editorParams.componentSchema) == null ? void 0 : p.binding, i = t.getDgViewModel(n);
if (u != null && u.field) {
const F = i.fields.find((x) => x.id === u.field);
if (i.removeField([u.field]), F) {
const { groupId: x, groupName: O, editor: M } = F;
X(s, { editor: M, groupId: x, groupName: O });
}
}
i.addField(s), (g = (f = e.editorParams.componentSchema) == null ? void 0 : f.editor) != null && g.type && i.changeField(s.id, { editor: e.editorParams.componentSchema.editor.type });
}
function C(l) {
var p;
const s = (p = e.editorParams.componentSchema) == null ? void 0 : p.binding, u = t.getDgViewModel(n), i = {
type: "Variable",
id: l.id,
fieldName: l.code,
groupId: "",
groupName: ""
};
if (s != null && s.field) {
const f = a.getViewModelById(n), g = f == null ? void 0 : f.fields.find((F) => F.id === (s == null ? void 0 : s.field));
g && (i.groupName = g.groupName, i.groupId = g.groupId), u.removeField([s == null ? void 0 : s.field]);
}
a.addViewModelField(n, i);
}
function E(l, s) {
if (!e.editorParams.needSyncToViewModel || !e.editorParams.viewModelId || !e.editorParams.designerHostService)
return;
const u = e.editorParams.componentSchema.binding;
u && u.field === l.id || (s === "Form" ? B(l) : C(l));
}
function $(l, s) {
if (e.editorParams.componentSchema) {
switch (e.editorParams.componentSchema.binding || (e.editorParams.componentSchema.binding = {}), s) {
case "Form": {
e.editorParams.componentSchema.binding.path = l.bindingField, e.editorParams.componentSchema.binding.field = l.id, e.editorParams.componentSchema.binding.fullPath = l.path;
break;
}
case "LocaleVariable": {
e.editorParams.componentSchema.binding.path = l.viewModelId === n ? l.code : "root-component." + l.code, e.editorParams.componentSchema.binding.field = l.id, e.editorParams.componentSchema.binding.fullPath = l.code;
break;
}
case "RemoteVariable": {
e.editorParams.componentSchema.binding.path = "root-component." + l.code, e.editorParams.componentSchema.binding.field = l.id, e.editorParams.componentSchema.binding.fullPath = l.code;
break;
}
}
return e.editorParams.componentSchema.binding.type = s, e.editorParams.componentSchema.path = l.bindingPath, e.editorParams.componentSchema.binding;
}
}
function y(l) {
const s = l == null ? void 0 : l.field, u = /* @__PURE__ */ new Set(), i = a.getFormSchema().module, p = a.getViewModelById(n);
let g = i.components.find((F) => F.viewModel === n).componentType;
return (g === "frame" || g === "table") && (g = "form"), i.viewmodels.forEach((F) => {
if (!F.fields || F.fields.length === 0)
return;
const x = i.components.find((M) => M.viewModel === F.id);
let { componentType: O } = x;
(O === "frame" || O === "table") && (O = "form"), !(O !== g || F.bindTo !== p.bindTo) && F.fields.forEach((M) => {
M.id !== s && u.add(M.id);
});
}), u;
}
function N(l) {
if (!l)
return [];
const s = {}, { fieldControlTypeMapping: u } = ve;
for (const i in u) {
const p = u[i];
!p || !p.length || p.forEach((f) => {
s[f.key] = s[f.key] || [], s[f.key].push(i);
});
}
return s[l];
}
function S() {
w(), V(), T();
}
function I(l, s) {
if (l.multiLanguage)
return { fieldType: "multiLanguage", fieldTypeName: "多语言" };
const u = s === j.Form ? l.type.name : l.type, i = s === j.Form ? l.type.displayName : l.displayTypeName;
return { fieldType: u, fieldTypeName: i };
}
function A(l, s) {
var K, Y, D, J;
if (!(l != null && l.length))
return b.warning({ message: "请先选择数据" }), !1;
let u = !0;
const i = (K = e.editorParams) == null ? void 0 : K.componentSchema, p = i == null ? void 0 : i.binding;
if (!p)
return !0;
let f, g = !1;
if (p.type === j.Form) {
const R = o.getFieldByID(p.field);
R && (f = I(R, j.Form).fieldType, R.$type === oe.ComplexField && (g = !0));
} else {
const R = a.getVariableById(p.field);
R && (f = R.type);
}
const F = l[0], { fieldType: x, fieldTypeName: O } = I(F, s), M = "不可以切换成", z = "类型字段，请重新选择！";
if (g || !f) {
const R = N((J = (D = (Y = e.editorParams) == null ? void 0 : Y.componentSchema) == null ? void 0 : D.editor) == null ? void 0 : J.type);
return R && !R.includes(x) && (b.warning(`${M}${O}${z}`), u = !1), u;
}
return f && f !== x ? e.editorParams.canChangeFieldType ? !0 : (b.warning(`${M}${O}${z}`), !1) : u;
}
return {
initTreeData: S,
getTreeDataSource: v,
updateViewModel: E,
updateComponentSchema: $,
resolveOccupiedFields: y,
resolveFieldTypesByEditorType: N,
checkFieldValiation: A
};
}
const G = /* @__PURE__ */ H({
name: "FBindingSelectorContainer",
props: W,
emits: ["selected", "bindingTypeChange", "cancel", "submit"],
setup(e, t) {
var l, s, u;
const o = h(e.data), a = h(((l = e.modelValue) == null ? void 0 : l.type) || "Form"), n = h(e.bindingData), d = h(), c = h(), m = h(), {
getTreeDataSource: b,
initTreeData: v,
resolveOccupiedFields: w,
resolveFieldTypesByEditorType: V
} = ie(e), T = h([]);
fe(() => {
var i, p, f, g, F, x;
v(), o.value = b(a.value), (i = e.editorParams) != null && i.disableOccupiedFields && (c.value = w((f = (p = e.editorParams) == null ? void 0 : p.componentSchema) == null ? void 0 : f.binding)), m.value = V((x = (F = (g = e.editorParams) == null ? void 0 : g.componentSchema) == null ? void 0 : F.editor) == null ? void 0 : x.type), T.value = a.value === "Form" ? Z : ee;
}), te(() => {
var p, f, g;
const i = (g = (f = (p = e.editorParams) == null ? void 0 : p.componentSchema) == null ? void 0 : f.binding) == null ? void 0 : g.field;
i && d.value.selectItemById(i);
});
const B = {
"f-utils-fill": !0,
"m-2": (s = e.bindingType) == null ? void 0 : s.enable,
"mx-2": !((u = e.bindingType) != null && u.enable),
border: !0
};
function C(i) {
T.value = i === "Form" ? Z : ee, d.value.updateColumns(T.value), o.value = b(i), d.value.updateDataSource(o.value), d.value.clearSelection(), n.value = [], t.emit("selected", []), t.emit("bindingTypeChange", i);
}
function E(i) {
n.value = i, t.emit("selected", i);
}
function $() {
return r("div", {
class: "px-3"
}, [r(ge, {
name: "bindingType",
textField: e.bindingType.textField,
valueField: e.bindingType.valueField,
enumData: xe,
modelValue: a.value,
"onUpdate:modelValue": (i) => a.value = i,
onChangeValue: C
}, null)]);
}
const y = {
customRowStatus: (i) => {
var f;
if (i.raw.$type && i.raw.$type !== he.SimpleField || c.value && c.value.has(i.raw.id))
return i.disabled = !0, i;
const p = a.value === "Form" ? (f = i.raw.type) == null ? void 0 : f.name : i.raw.type;
return p && m.value && !m.value.includes(p) ? (i.disabled = !0, i) : (i.disabled = !1, i);
}
};
function N() {
return r(ye, {
ref: d,
fit: !0,
data: o.value,
idField: e.idField,
columns: T.value,
rowNumber: {
enable: !1
},
columnOption: {
fitColumns: !0
},
onSelectionChange: E,
"row-option": y
}, null);
}
function S() {
t.emit("cancel");
}
function I() {
if (!n.value || !n.value.length) {
const i = new Fe();
return i.globalConfig = {
position: "top-center"
}, i.warning({
message: "请先选择数据"
}), !1;
}
return !0;
}
function A() {
I() && t.emit("submit", {
selectedData: n.value[0],
bindingType: a.value
});
}
return () => r("div", {
class: "h-100 d-flex flex-column"
}, [e.bindingType.enable && $(), r("div", {
class: B,
style: "position:relative;border-radius:10px;"
}, [q(" "), N()]), e.showCustomFooter ? r("div", {
class: "modal-footer"
}, [r("button", {
type: "button",
class: "btn btn-secondary",
onClick: S
}, [q("取消")]), r("button", {
type: "button",
class: "btn btn-primary",
onClick: A
}, [q("确定")])]) : ""]);
}
}), k = /* @__PURE__ */ H({
name: "FBindingSelector",
props: W,
emits: ["selected", "bindingTypeChanged"],
setup(e, t) {
var y, N;
const o = '<i class="f-icon f-icon-lookup"></i>', a = h(e.bindingData), n = h(e.data), d = h(), c = h(((y = e.modelValue) == null ? void 0 : y.type) || "Form"), m = h((N = e.modelValue) == null ? void 0 : N.path), {
updateViewModel: b,
updateComponentSchema: v,
checkFieldValiation: w
} = ie(e);
function V(S) {
a.value = S;
}
function T(S) {
c.value = S;
}
function B(S) {
m.value = S.path;
}
function C() {
return r(G, {
ref: d,
data: n.value,
onSelected: V,
modelValue: e.modelValue,
idField: e.idField,
bindingData: a.value,
onBindingTypeChange: T,
editorParams: e.editorParams,
bindingType: e.bindingType,
showCustomFooter: !1
}, null);
}
function E() {
return !!w(a.value, c.value);
}
const $ = {
title: e.title,
fitContent: !1,
height: e.modalHeight,
width: e.modalWidth,
buttons: [{
name: "cancel",
text: "取消",
class: "btn btn-secondary",
handle: (S) => (a.value = [], !0)
}, {
name: "accept",
text: "确定",
class: "btn btn-primary",
handle: (S) => {
if (!E())
return !1;
b(a.value[0], c.value);
const I = v(a.value[0], c.value);
return B(I), e.onFieldSelected && typeof e.onFieldSelected == "function" && e.onFieldSelected(I, void 0, a.value[0]), !0;
}
}],
resizeable: !1,
draggable: !0
};
return () => r(pe, {
modelValue: m.value,
"onUpdate:modelValue": (S) => m.value = S,
editable: !1,
disabled: e.disabled,
readonly: e.readonly,
inputType: "text",
enableClear: !1,
buttonContent: o,
buttonBehavior: "Modal",
modalOptions: $
}, {
default: () => [r("div", {
class: "h-100 d-flex flex-column"
}, [C()])]
});
}
});
k.install = (e) => {
e.component(k.name, k), e.component(G.name, G);
};
k.register = (e, t, o, a) => {
e["binding-selector"] = k, t["binding-selector"] = Be;
};
export {
k as BindingSelector,
G as FBindingSelectorContainer,
W as bindingSelectorProps,
xe as bindingTypes,
k as default,
Z as fieldColumns,
Be as propsResolver,
ee as variableColumns
};