@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
736 lines (735 loc) • 21.5 kB
JavaScript
import { ref as S, onMounted as Y, defineComponent as M, createVNode as m, withDirectives as A, vShow as z, Teleport as K, Fragment as Z, inject as I } from "vue";
import { isPlainObject as _, cloneDeep as G } from "lodash-es";
const J = {}, Q = {};
function W(e) {
const { properties: t, title: a, ignore: n } = e, i = n && Array.isArray(n), l = Object.keys(t).reduce((c, d) => ((!i || !n.find((B) => B === d)) && (c[d] = t[d].type === "object" && t[d].properties ? W(t[d]) : G(t[d].default)), c), {});
if (a && (!i || !n.find((c) => c === "id"))) {
const c = a.toLowerCase().replace(/-/g, "_");
l.id = `${c}_${Math.random().toString().slice(2, 6)}`;
}
return l;
}
function ee(e) {
const { properties: t, title: a, required: n } = e;
if (n && Array.isArray(n)) {
const i = n.reduce((l, c) => (l[c] = t[c].type === "object" && t[c].properties ? W(t[c]) : G(t[c].default), l), {});
if (a && n.find((l) => l === "id")) {
const l = a.toLowerCase().replace(/-/g, "_");
i.id = `${l}_${Math.random().toString().slice(2, 6)}`;
}
return i;
}
return {
type: a
};
}
function U(e, t = {}, a) {
const n = J[e];
if (n) {
let i = ee(n);
const l = Q[e];
return i = l ? l({ getSchemaByType: U }, i, t, a) : i, i;
}
return null;
}
function te(e, t) {
const a = W(t);
return Object.keys(a).reduce((n, i) => (Object.prototype.hasOwnProperty.call(e, i) && (n[i] && _(n[i]) && _(e[i] || !e[i]) ? Object.assign(n[i], e[i] || {}) : n[i] = e[i]), n), a), a;
}
function P(e, t) {
return Object.keys(e).filter((n) => e[n] != null).reduce((n, i) => {
if (t.has(i)) {
const l = t.get(i);
if (typeof l == "string")
n[l] = e[i];
else {
const c = l(i, e[i], e);
Object.assign(n, c);
}
} else
n[i] = e[i];
return n;
}, {});
}
function ne(e, t, a = /* @__PURE__ */ new Map()) {
const n = te(e, t);
return P(n, a);
}
function oe(e = {}) {
function t(s, f, r, y) {
if (typeof r == "number")
return y[s].length === r;
if (typeof r == "object") {
const b = Object.keys(r)[0], g = r[b];
if (b === "not")
return Number(y[s].length) !== Number(g);
if (b === "moreThan")
return Number(y[s].length) >= Number(g);
if (b === "lessThan")
return Number(y[s].length) <= Number(g);
}
return !1;
}
function a(s, f, r, y) {
return y[s] && y[s].propertyValue && String(y[s].propertyValue.value) === String(r);
}
const n = /* @__PURE__ */ new Map([
["length", t],
["getProperty", a]
]);
Object.keys(e).reduce((s, f) => (s.set(f, e[f]), s), n);
function i(s, f) {
const r = s;
return typeof f == "number" ? [{ target: r, operator: "length", param: null, value: Number(f) }] : typeof f == "boolean" ? [{ target: r, operator: "getProperty", param: s, value: !!f }] : typeof f == "object" ? Object.keys(f).map((y) => {
if (y === "length")
return { target: r, operator: "length", param: null, value: f[y] };
const b = y, g = f[y];
return { target: r, operator: "getProperty", param: b, value: g };
}) : [];
}
function l(s) {
return Object.keys(s).reduce((r, y) => {
const b = i(y, s[y]);
return r.push(...b), r;
}, []);
}
function c(s, f) {
if (n.has(s.operator)) {
const r = n.get(s.operator);
return r && r(s.target, s.param, s.value, f) || !1;
}
return !1;
}
function d(s, f) {
return l(s).reduce((b, g) => b && c(g, f), !0);
}
function B(s, f) {
const r = Object.keys(s), y = r.includes("allOf"), b = r.includes("anyOf"), g = y || b, p = (g ? s[g ? y ? "allOf" : "anyOf" : "allOf"] : [s]).map(($) => d($, f));
return y ? !p.includes(!1) : p.includes(!0);
}
return { parseValueSchema: B };
}
const ie = {}, re = {};
oe();
function se(e, t, a = /* @__PURE__ */ new Map(), n = (c, d, B, s) => d, i = {}, l = (c) => c) {
return J[t.title] = t, Q[t.title] = n, ie[t.title] = i, re[t.title] = l, (c = {}, d = !0) => {
if (!d)
return P(c, a);
const B = ne(c, t, a), s = Object.keys(e).reduce((f, r) => (f[r] = e[r].default, f), {});
return Object.assign(s, B);
};
}
function ae(e, t) {
return { customClass: t.class, customStyle: t.style };
}
function le(e, t, a) {
return t;
}
const ce = /* @__PURE__ */ new Map([
["appearance", ae]
]), ue = "https://json-schema.org/draft/2020-12/schema", de = "https://farris-design.gitee.io/dropdown.schema.json", fe = "dropdown", pe = "A Farris Component", ye = "object", me = {
id: {
description: "The unique identifier for dropdown",
type: "string"
},
type: {
description: "The type string of dropdown",
type: "string",
default: "dropdown"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, ge = [
"id",
"type"
], be = {
$schema: ue,
$id: de,
title: fe,
description: pe,
type: ye,
properties: me,
required: ge
}, we = "dropdown", ve = "A Farris Component", he = "object", Se = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
},
behavior: {
description: "Basic Infomation",
title: "行为",
properties: {
readonly: {
description: "",
title: "只读",
type: "string"
},
required: {
description: "",
title: "必填",
type: "boolean"
},
visible: {
description: "",
title: "可见",
type: "boolean"
},
placeholder: {
description: "",
title: "提示文本",
type: "string"
},
tabindex: {
description: "",
title: "tab索引",
type: "number"
}
}
}
}, De = {
title: we,
description: ve,
type: he,
categories: Se
}, q = {
/** 默认展开或折叠 */
show: { type: Boolean, default: !1 },
/** 下拉按钮是否禁用 */
disabled: { type: Boolean, default: !1 },
/** 下拉按钮对应文字 */
title: { type: String, default: "下拉示例" },
/** 下拉按钮大小 */
size: { type: String, default: "" },
/** 下拉按钮类型 */
type: { type: String, default: "primary" },
/** 图标样式 */
iconClass: { type: String, default: "" },
/** 下拉框内容是否被选中 */
active: { type: Boolean, default: !1 },
/** 下拉按钮是否分开展示 */
splitButton: { type: Boolean, default: !1 },
/** 下拉框展示方向 */
position: { type: String, default: "bottom" },
/** 下拉框内容 */
model: {
type: Array,
default: [
{ label: "项目一", value: "XM1" },
{ label: "项目二", value: "XM2" },
{ label: "项目三", value: "XM3" }
]
},
onSelect: { type: Function, default: () => {
} }
}, X = se(q, be, ce, le, De);
function C(e, t) {
let a;
const n = S(e.show), i = S(), l = S(), c = S(), d = 10;
Y(() => {
a = l.value;
});
const B = (p = 1) => {
const o = [
"body>.f-datagrid-settings-simple-host",
"body>div",
"body>farris-dialog>.farris-modal.show",
"body>.farris-modal.show",
"body>farris-filter-panel>.f-filter-panel-wrapper",
"body .f-sidebar-show>.f-sidebar-main",
"body>.popover.show",
"body>filter-row-panel>.f-datagrid-filter-panel",
"body>.f-section-maximize"
], $ = Array.from(document.body.querySelectorAll(o.join(","))).filter((w) => w).map((w) => {
const { display: j, zIndex: u } = window.getComputedStyle(w);
return j === "none" ? 0 : parseInt(u, 10);
}).filter((w) => w);
let D = Math.max(...$);
return D < 1040 && (D = 1040), D + p;
}, s = (p, o) => {
const {
height: $,
left: D,
top: w,
width: j
} = p.getBoundingClientRect(), { width: u, height: h, top: v } = o.getBoundingClientRect();
if (p.className.indexOf("dropdown-submenu") > -1 || p.closest(".dropdown-submenu") || p.classList.contains("dropright")) {
const R = window.innerWidth - D - p.offsetWidth, N = window.innerHeight - w, { position: L } = getComputedStyle(o);
if (L === "fixed") {
let H = D + p.offsetWidth;
o.offsetWidth > R && D > R && (H = D - u), o.style.left = H + "px", o.style.right = "auto", window.innerHeight - 2 * d < o.offsetHeight ? (o.style.top = d + "px", o.style.bottom = d + "px", o.style.maxHeight = window.innerHeight - 2 * d + "px", o.style.overflowY = "auto", o.className += " dropdown-menu-maxheight") : N < o.offsetHeight ? (o.style.top = "auto", o.style.bottom = d + "px") : (o.style.top = w + "px", o.style.bottom = "auto");
} else {
if (o.offsetWidth > R) {
const H = -u;
o.style.left = H + "px";
}
window.innerHeight - 2 * d < o.offsetHeight ? (o.style.top = -1 * (w - d) + "px", o.style.bottom = "auto", o.style.maxHeight = window.innerHeight - 2 * d + "px", o.style.overflowY = "auto", o.className += " dropdown-menu-maxheight") : N < o.offsetHeight && (o.style.top = N - o.offsetHeight - d + "px", o.style.bottom = "auto");
}
} else {
const { marginTop: R, marginBottom: N } = getComputedStyle(o);
let L = 0;
const H = Math.ceil(parseFloat(R)) + Math.ceil(parseFloat(N));
let E = w + $, V = D;
window.innerHeight - E - H < h && (E = w - h, E < 0 && (window.innerHeight - w - $ > w ? (E = w + $, L = window.innerHeight - E - H - d) : (E = d, L = w - E - H))), window.innerWidth - D < u && window.innerWidth - D < D + j && (V = D - u + j), document.body.append(o), o.style.cssText = `position:fixed;bottom:unset;left:${V}px
!important;top:${E}px !important;right: unset;${L ? "max-height:" + L + "px;overflow-y:auto;" : ""}`, L && (o.className += " dropdown-menu-maxheight"), o.style.zIndex = B().toString();
}
}, f = () => {
s(i.value, l.value);
}, r = () => {
e.hover || (n.value = !1, document.removeEventListener("click", r), a.removeEventListener("click", r), document.removeEventListener("scroll", r), a.removeEventListener("scroll", r));
};
return {
show: n,
dropdownRef: i,
dropdownMenuRef: l,
clickEventRef: c,
showDropMenu: (p) => {
e.hover || e.disabled || (p == null || p.stopPropagation(), n.value || setTimeout(() => {
f();
}), n.value = !n.value, document.addEventListener("click", r), document.addEventListener("scroll", r), e.hideOnClick || (a.addEventListener("click", (o) => {
o.stopPropagation();
}), a.addEventListener("scroll", (o) => {
o.stopPropagation();
})));
},
hoverDropdown: (p) => {
e.hover && (n.value || setTimeout(() => {
}), n.value = !n.value);
},
leftButtonClick: () => {
},
closeDropMenu: r,
selectItem: (p) => {
t.emit("select", p);
},
resolveSize: (p) => {
const o = /px|em|rem|pt|%/;
return o.test(p) ? `${parseInt(p, 10)}${p.match(o)[0]}` : `${p}px`;
}
};
}
const Be = {
/** 下拉框标签 */
label: { type: String, default: "XM1" },
/** 下拉框名称 */
value: { type: String || Number, default: "项目一" },
/** 是否禁用该下拉框属性 */
disabled: { type: Boolean, default: !1 },
active: { type: Boolean, default: !1 },
divide: { type: Boolean, default: !1 },
onSelect: { type: Function, default: () => {
} }
}, x = /* @__PURE__ */ M({
name: "FDropdownItem",
props: Be,
emits: ["select"],
setup(e, t) {
const a = S(e.value), n = S(e.label), i = S(e.disabled), l = S(e.active), c = S(e.divide), d = () => {
i.value || t.emit("select", e);
};
return () => m("div", null, [A(m("div", {
class: "dropdown-divider"
}, null), [[z, c.value]]), m("li", {
class: `dropdown-item${l.value ? " active" : ""} ${i.value ? " disabled" : ""}`,
onClick: d,
title: a.value.toString()
}, [n.value])]);
}
}), F = /* @__PURE__ */ M({
name: "FDropdown",
props: q,
emits: ["select"],
setup(e, t) {
const a = S(e.model), {
show: n,
dropdownMenuRef: i,
dropdownRef: l,
clickEventRef: c,
showDropMenu: d,
hoverDropdown: B,
leftButtonClick: s,
closeDropMenu: f,
selectItem: r,
resolveSize: y
} = C(e, t);
function b(g) {
t.emit("select", g);
}
return () => m("div", {
ref: l
}, [m("div", {
class: ["farris-dropdown", "btn-group", {
dropup: e.position === "top"
}, {
dropdown: e.position === "bottom"
}, {
dropleft: e.position === "left"
}, {
dropright: e.position === "right"
}]
}, [e.splitButton && m("span", {
class: ["btn", {
"dropdown-item": e.nest
}, {
"btn-lg": e.size === "large"
}, {
"btn-sm": e.size === "small"
}, {
"btn-primary": e.type === "primary"
}, {
"btn-success": e.type === "success"
}, {
"btn-warning": e.type === "warning"
}, {
"btn-danger": e.type === "danger"
}, {
"btn-info": e.type === "info"
}],
style: "width:100%",
onClick: s
}, [e.title]), m("span", {
ref: c,
class: ["dropdown-toggle", {
btn: !e.nest
}, {
"dropdown-item": e.nest
}, {
"dropdown-toggle-split": e.splitButton
}, {
"btn-lg": e.size === "large"
}, {
"btn-sm": e.size === "small"
}, {
"btn-primary": e.type === "primary"
}, {
"btn-success": e.type === "success"
}, {
"btn-warning": e.type === "warning"
}, {
"btn-danger": e.type === "danger"
}, {
"btn-info": e.type === "info"
}, {
"btn-secondary": e.type === "secondary"
}, {
"btn-link": e.type === "link"
}, {
disabled: e.disabled
}],
style: "width:100%",
onClick: d,
onMouseenter: B,
onMouseleave: B
}, [A(m("span", {
class: "sr-only"
}, null), [[z, e.splitButton]]), e.splitButton ? "" : e.title, A(m("span", {
class: `f-icon ${e.iconClass.toString()}`
}, null), [[z, e.iconClass]])]), m(K, {
to: "body"
}, {
default: () => [m("div", {
ref: i,
class: `dropdown-menu${n.value ? " show" : ""}`
}, [m(Z, null, [a.value.map(({
label: g,
value: T,
disabled: O,
active: p,
divide: o
}) => m(x, {
value: T.toString(),
label: g,
disabled: O,
active: p,
divide: o,
onSelect: ($) => b($)
}, null))])])]
})])]);
}
});
function ke(e, t, a) {
var j;
const n = "", i = "", l = S();
function c() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function d() {
return !1;
}
function B() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function s() {
return (t == null ? void 0 : t.schema.componentType) === "frame";
}
function f(u) {
if (!u || !u.value)
return null;
if (u.value.schema && u.value.schema.type === "component")
return u.value;
const h = S(u == null ? void 0 : u.value.parent), v = f(h);
return v || null;
}
function r(u = t) {
var R;
const { componentInstance: h, designerItemElementRef: v } = u;
if (!h || !h.value)
return null;
const { getCustomButtons: k } = h.value;
return h.value.canMove || k && ((R = k()) != null && R.length) ? v : r(u.parent);
}
function y(u) {
return !!a;
}
function b() {
return (t == null ? void 0 : t.schema.label) || (t == null ? void 0 : t.schema.title) || (t == null ? void 0 : t.schema.name);
}
function g() {
}
function T(u, h) {
var v;
!u || !h || (v = t == null ? void 0 : t.setupContext) == null || v.emit("dragEnd");
}
function O(u, h) {
const { componentType: v } = u;
let k = U(v, u, h);
const R = v.toLowerCase().replace(/-/g, "_");
return k && !k.id && k.type === v && (k.id = `${R}_${Math.random().toString().slice(2, 6)}`), k;
}
function p(u) {
}
function o(...u) {
}
function $() {
t != null && t.schema.contents && t.schema.contents.map((u) => {
let h = u.id;
u.type === "component-ref" && (h = u.component);
const v = e.value.querySelectorAll(`#${h}-design-item`);
v != null && v.length && Array.from(v).map((k) => {
var R;
(R = k == null ? void 0 : k.componentInstance) != null && R.value.onRemoveComponent && k.componentInstance.value.onRemoveComponent();
});
});
}
function D() {
}
function w(u) {
}
return l.value = {
canMove: c(),
canSelectParent: d(),
canDelete: B(),
canNested: !s(),
contents: t == null ? void 0 : t.schema.contents,
elementRef: e,
parent: (j = t == null ? void 0 : t.parent) == null ? void 0 : j.componentInstance,
schema: t == null ? void 0 : t.schema,
styles: n,
designerClass: i,
canAccepts: y,
getBelongedComponentInstance: f,
getDraggableDesignItemElement: r,
getDraggingDisplayText: b,
getPropConfig: o,
getDragScopeElement: g,
onAcceptMovedChildElement: T,
onChildElementMovedOut: p,
addNewChildComponentSchema: O,
triggerBelongedComponentToMoveWhenMoved: S(!1),
triggerBelongedComponentToDeleteWhenDeleted: S(!1),
onRemoveComponent: $,
getCustomButtons: D,
onPropertyChanged: w
}, l;
}
const $e = /* @__PURE__ */ M({
name: "FDropdownDesign",
props: q,
emits: ["select"],
setup(e, t) {
const a = S(e.model), {
show: n,
showDropMenu: i,
hoverDropdown: l,
leftButtonClick: c,
closeDropMenu: d,
selectItem: B,
resolveSize: s
} = C(e, t);
function f(g) {
t.emit("select", g);
}
const r = S(), y = I("design-item-context"), b = ke(r, y);
return Y(() => {
r.value.componentInstance = b;
}), t.expose(b.value), () => m("div", {
ref: r
}, [m("div", {
class: ["farris-dropdown", "btn-group", {
dropup: e.position === "top"
}, {
dropdown: e.position === "bottom"
}, {
dropleft: e.position === "left"
}, {
dropright: e.position === "right"
}],
style: {
width: e.width
}
}, [e.splitButton && m("span", {
class: ["btn", {
"dropdown-item": e.nest
}, {
"btn-lg": e.size === "large"
}, {
"btn-sm": e.size === "small"
}, {
"btn-primary": e.type === "primary"
}, {
"btn-success": e.type === "success"
}, {
"btn-warning": e.type === "warning"
}, {
"btn-danger": e.type === "danger"
}, {
"btn-info": e.type === "info"
}],
style: "width:100%",
onClick: c
}, [e.title]), m("span", {
class: ["dropdown-toggle", {
btn: !e.nest
}, {
"dropdown-item": e.nest
}, {
"dropdown-toggle-split": e.splitButton
}, {
"btn-lg": e.size === "large"
}, {
"btn-sm": e.size === "small"
}, {
"btn-primary": e.type === "primary"
}, {
"btn-success": e.type === "success"
}, {
"btn-warning": e.type === "warning"
}, {
"btn-danger": e.type === "danger"
}, {
"btn-info": e.type === "info"
}, {
"btn-secondary": e.type === "secondary"
}, {
"btn-link": e.type === "link"
}, {
disabled: e.disabled
}],
style: "width:100%",
onClick: i,
onMouseenter: l,
onMouseleave: l
}, [A(m("span", {
class: "sr-only"
}, null), [[z, e.splitButton]]), e.splitButton ? "" : e.title, A(m("span", {
class: `f-icon ${e.iconClass.toString()}`
}, null), [[z, e.iconClass]])]), m("div", {
class: `dropdown-menu${n.value ? " show" : ""}`
}, [m(Z, null, [a.value.map(({
label: g,
value: T,
disabled: O,
active: p,
divide: o
}) => m(x, {
value: T.toString(),
label: g,
disabled: O,
active: p,
divide: o,
onSelect: ($) => f($)
}, null))])])])]);
}
}), He = {
install(e) {
e.component(F.name, F);
},
register(e, t, a, n) {
e.dropdown = F, t.dropdown = X;
},
registerDesigner(e, t, a) {
e.dropdown = $e, t.dropdown = X;
}
};
export {
F as Dropdown,
He as default,
q as dropdownProps,
X as propsResolver
};