@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
589 lines (588 loc) • 16.3 kB
JavaScript
import { defineComponent as j, ref as g, inject as E, computed as x, onMounted as D, createVNode as C, watch as F } from "vue";
import H from "../button-edit/index.esm.js";
import { isPlainObject as B, cloneDeep as P } from "lodash-es";
import L from "../tree-view/index.esm.js";
import { withInstall as $ } from "../common/index.esm.js";
const A = {}, W = {};
function V(e) {
const { properties: i, title: s, ignore: n } = e, o = n && Array.isArray(n), y = Object.keys(i).reduce((f, m) => ((!o || !n.find((p) => p === m)) && (f[m] = i[m].type === "object" && i[m].properties ? V(i[m]) : P(i[m].default)), f), {});
if (s && (!o || !n.find((f) => f === "id"))) {
const f = s.toLowerCase().replace(/-/g, "_");
y.id = `${f}_${Math.random().toString().slice(2, 6)}`;
}
return y;
}
function q(e, i) {
const s = V(i);
return Object.keys(s).reduce((n, o) => (Object.prototype.hasOwnProperty.call(e, o) && (n[o] && B(n[o]) && B(e[o] || !e[o]) ? Object.assign(n[o], e[o] || {}) : n[o] = e[o]), n), s), s;
}
function R(e, i) {
return Object.keys(e).filter((n) => e[n] != null).reduce((n, o) => {
if (i.has(o)) {
const y = i.get(o);
if (typeof y == "string")
n[y] = e[o];
else {
const f = y(o, e[o], e);
Object.assign(n, f);
}
} else
n[o] = e[o];
return n;
}, {});
}
function _(e, i, s = /* @__PURE__ */ new Map()) {
const n = q(e, i);
return R(n, s);
}
function U(e = {}) {
function i(l, r, t, a) {
if (typeof t == "number")
return a[l].length === t;
if (typeof t == "object") {
const d = Object.keys(t)[0], c = t[d];
if (d === "not")
return Number(a[l].length) !== Number(c);
if (d === "moreThan")
return Number(a[l].length) >= Number(c);
if (d === "lessThan")
return Number(a[l].length) <= Number(c);
}
return !1;
}
function s(l, r, t, a) {
return a[l] && a[l].propertyValue && String(a[l].propertyValue.value) === String(t);
}
const n = /* @__PURE__ */ new Map([
["length", i],
["getProperty", s]
]);
Object.keys(e).reduce((l, r) => (l.set(r, e[r]), l), n);
function o(l, r) {
const t = l;
return typeof r == "number" ? [{ target: t, operator: "length", param: null, value: Number(r) }] : typeof r == "boolean" ? [{ target: t, operator: "getProperty", param: l, value: !!r }] : typeof r == "object" ? Object.keys(r).map((a) => {
if (a === "length")
return { target: t, operator: "length", param: null, value: r[a] };
const d = a, c = r[a];
return { target: t, operator: "getProperty", param: d, value: c };
}) : [];
}
function y(l) {
return Object.keys(l).reduce((t, a) => {
const d = o(a, l[a]);
return t.push(...d), t;
}, []);
}
function f(l, r) {
if (n.has(l.operator)) {
const t = n.get(l.operator);
return t && t(l.target, l.param, l.value, r) || !1;
}
return !1;
}
function m(l, r) {
return y(l).reduce((d, c) => d && f(c, r), !0);
}
function p(l, r) {
const t = Object.keys(l), a = t.includes("allOf"), d = t.includes("anyOf"), c = a || d, S = (c ? l[c ? a ? "allOf" : "anyOf" : "allOf"] : [l]).map((T) => m(T, r));
return a ? !S.includes(!1) : S.includes(!0);
}
return { parseValueSchema: p };
}
const z = {}, G = {};
U();
function J(e, i, s = /* @__PURE__ */ new Map(), n = (f, m, p, l) => m, o = {}, y = (f) => f) {
return A[i.title] = i, W[i.title] = n, z[i.title] = o, G[i.title] = y, (f = {}, m = !0) => {
if (!m)
return R(f, s);
const p = _(f, i, s), l = Object.keys(e).reduce((r, t) => (r[t] = e[t].default, r), {});
return Object.assign(l, p);
};
}
function Q(e, i) {
return { customClass: i.class, customStyle: i.style };
}
const X = /* @__PURE__ */ new Map([
["appearance", Q]
]), Y = "https://json-schema.org/draft/2020-12/schema", Z = "https://farris-design.gitee.io/combo-list.schema.json", K = "combo-tree", ee = "A Farris Input Component", te = "object", ae = {
id: {
description: "The unique identifier for a combo list",
type: "string"
},
type: {
description: "The type string of number combo list component",
type: "string",
default: "combo-tree"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
editable: {
description: "",
type: "boolean",
default: !0
},
enableLinkLabel: {
description: "",
type: "boolean",
default: !1
},
label: {
description: "",
type: "string",
default: ""
},
lableWidth: {
description: "",
type: "number"
},
placeholder: {
description: "",
type: "string",
default: ""
},
valueField: {
description: "",
type: "string",
default: "id"
},
titleField: {
description: "",
type: "string",
default: "name"
},
textField: {
description: "",
type: "string",
default: "name"
},
data: {
description: "",
type: "array"
},
readonly: {
description: "",
type: "boolean",
default: !1
},
required: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
textAlign: {
description: "",
type: "string",
enum: [
"left",
"middle",
"right"
],
default: "left"
},
visible: {
description: "",
type: "boolean",
default: !0
},
onBlur: {
description: "",
type: "string",
default: ""
},
onClickLinkLabel: {
description: "",
type: "sting",
default: ""
},
formatter: {
type: "object",
default: null
},
customRowStatus: {
type: "object",
default: null
},
minPanelWidth: {
description: "",
type: "number",
default: 160
}
}, ne = [
"id",
"type"
], le = {
$schema: Y,
$id: Z,
title: K,
description: ee,
type: te,
properties: ae,
required: ne
};
function ie(e, i, s) {
return i;
}
var oe = /* @__PURE__ */ ((e) => (e.Text = "text", e.Tag = "tag", e))(oe || {}), re = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.auto = "auto", e))(re || {});
const I = {
/**
* 组件标识
*/
id: { type: String },
/**
* 下拉数据源
*/
data: { type: Array, default: [] },
/**
* 可选，展示文本
* 默认为空字符串
*/
displayText: { type: String, default: "" },
/**
* 可选，是否禁用
* 默认为`false`
*/
disabled: { type: Boolean, default: !1 },
/**
* 可选，下拉图标
* 默认为'<span class="f-icon f-icon-arrow-60-down"></span>'
*/
dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-60-down"></span>' },
/**
* 可选，是否可编辑
* 默认`false`
*/
editable: { type: Boolean, default: !1 },
/**
* 可选，是否启用清空
* 默认启用
*/
enableClear: { type: Boolean, default: !0 },
/**
* 可选，启用搜索
* 默认为`false`
*/
enableSearch: { type: Boolean, default: !1 },
/**
* 可选，鼠标悬停时是否显示控件值
* 默认显示
*/
enableTitle: { type: Boolean, default: !0 },
fitEditor: { type: Boolean, default: !1 },
/**
* 可选，强制显示占位符
* 默认`false`
*/
forcePlaceholder: { type: Boolean, default: !1 },
/**
* 可选，清空值时隐藏面板
* 默认`true`
*/
hidePanelOnClear: { type: Boolean, default: !0 },
/**
* 可选，数据源id字段
* 默认为`id`
*/
idField: { type: String, default: "id" },
/**
* 可选，字段映射
*/
mapFields: { type: Object },
/**
* 可选，最大高度
* 默认`350`
*/
maxHeight: { type: Number, default: 350 },
/**
* 最大输入长度
*/
maxLength: { type: Number },
/**
* 可选，是否支持多选
* 默认`false`
*/
multiSelect: { type: Boolean, default: !1 },
/**
* 绑定值
*/
modelValue: { type: String, default: "" },
/**
* 占位符
*/
placeholder: { type: String },
/**
* 可选，下拉面板展示位置
* 默认为`auto`
*/
placement: {
type: String,
default: "auto"
/* auto */
},
/**
* 可选，是否只读
* 默认为`false`
*/
readonly: { type: Boolean, default: !1 },
/**
* 可选，是否支持远端过滤
* 默认`false`
*/
remoteSearch: { type: Boolean, default: !1 },
/**
* 可选，分隔符
* 默认`,`
*/
separator: { type: String, default: "," },
/**
* tabIndex
*/
tabIndex: { type: Number, default: -1 },
/**
* 可选，数据源显示字段
* 默认为`name`
*/
textField: { type: String, default: "name" },
/**
* 可选，数据源的title
* 默认为`name`
*/
titleField: { type: String, default: "name" },
/**
* 可选，数据源值字段
* 默认为`id`
*/
valueField: { type: String, default: "id" },
/**
* 可选，下拉列表值展示方式
* 支持text | tag，即文本或标签，默认为`ViewType.Text`，即文本方式`text`
*/
viewType: {
type: String,
default: "text"
/* Text */
},
/**
* 作为内嵌编辑器被创建后默认获得焦点
*/
focusOnCreated: { type: Boolean, default: !1 },
/**
* 作为内嵌编辑器被创建后默认选中文本
*/
selectOnCreated: { type: Boolean, default: !1 },
/**
* 树表展示格式化函数
*/
formatter: { type: Function, default: null },
editorParams: { type: Object },
repositoryToken: { type: Symbol, default: null },
/** 自定义行状态 */
customRowStatus: { type: Object, default: null },
minPanelWidth: { type: Number, default: 160 }
}, ue = J(I, le, X, ie), de = {
data: { type: Array, default: [] },
enableSearch: { type: Boolean, default: !1 },
idField: { type: String, default: "id" },
multiSelect: { default: !1, type: Boolean },
selectedValues: { type: String, default: "" },
separator: { type: String, default: "," },
textField: { type: String, default: "name" },
titleField: { type: String, default: "name" },
width: { type: Number },
height: { type: Number },
valueField: { type: String, default: "id" },
formatter: { type: Function },
maxHeight: { type: Number, default: 350 },
repositoryToken: { type: Symbol, default: null },
editorParams: { type: Object },
customRowStatus: { type: Object, default: null }
}, se = /* @__PURE__ */ j({
name: "FComboTreeContainer",
props: de,
emits: ["selectionChange"],
setup(e, i) {
const s = g(e.data), n = g([]), o = g(e.separator), y = g(e.width), f = g(e.height), m = g(e.maxHeight), p = g(String(e.selectedValues).split(o.value)), l = g(), r = {
customRowStatus: e.customRowStatus
};
let t = null;
e.repositoryToken && (t = E(e.repositoryToken));
const a = x(() => [{
field: e.textField,
title: "",
dataType: "string",
formatter: e.formatter,
width: 400
}]), d = x(() => {
const u = {};
return y.value !== void 0 && (u.width = `${y.value}px`), f.value !== void 0 && (u.height = `${f.value}px`), m.value !== void 0 && m.value > 0 && (u.maxHeight = `${m.value}px`, u.overflow = "auto"), u;
});
function c(u) {
n.value = u.map((v) => Object.assign({}, v)), p.value = u.map((v) => v[e.idField]), i.emit("selectionChange", n.value);
}
return D(() => {
t && t.getData(e.editorParams).then((u) => {
s.value = u;
}), p.value && l.value.activeRowById(p.value[0]);
}), () => C("div", {
class: "f-combo-tree-container",
style: d.value
}, [C(L, {
ref: l,
data: s.value,
idField: e.idField,
columns: a.value,
"selection-values": p.value,
onSelectionChange: c,
rowOption: r
}, null)]);
}
});
function ce(e) {
const i = g(""), s = g(e.modelValue), n = g(e.data || []), o = g(e.editable);
function y(t, a = []) {
return t = t || [], t.reduce((d, c) => (d.push(c), c.children && c.children.length && y(c.children, d), d), a);
}
function f(t) {
const a = String(t).split(e.separator).map((u) => [u, !0]), d = new Map(a), c = [];
return y(n.value, c), c.filter((u) => u.data ? d.has(String(u.data[e.valueField])) : d.has(String(u[e.valueField]))).map((u) => u.data ? u.data : u);
}
function m(t) {
const a = f(t).map((d) => d[e.textField]).join(e.separator);
i.value = o.value ? a || t : a;
}
function p(t) {
const a = t.split(e.separator).map((u) => [u, !0]), d = new Map(a);
let c = [];
return n.value[0].data ? y(n.value, c) : c = n.value, c = c.map((u) => u.data ? u.data : u), c.filter((u) => d.has(u[e.textField]) || d.has(u[e.valueField]));
}
function l(t) {
const a = {};
return a[e.idField] = t, a[e.textField] = t, [a];
}
function r(t) {
let a = p(t);
const d = a && a.length > 0;
return o.value && !d && (a = l(t)), a;
}
return F(() => e.data, () => {
n.value = e.data;
}), F([n], ([t]) => {
if (e.modelValue) {
const a = t.find((d) => d[e.valueField] === e.modelValue);
a && (i.value = a[e.textField]);
}
}), F(() => e.modelValue, (t, a) => {
t !== a && (s.value = t, m(t));
}), m(e.modelValue), { dataSource: n, displayText: i, editable: o, modelValue: s, getItemsByDisplayText: p, getItemsByValue: f, getSelectedItemsByDisplayText: r };
}
const O = /* @__PURE__ */ j({
name: "FComboTree",
props: I,
emits: ["clear", "update:modelValue", "change"],
setup(e, i) {
const s = g(), n = g(e.disabled), o = g(e.enableClear), y = g(e.enableSearch), f = g(e.readonly), {
dataSource: m,
displayText: p,
editable: l,
modelValue: r,
getSelectedItemsByDisplayText: t
} = ce(e), a = x(() => e.multiSelect);
x(() => s.value ? s.value.elementRef.getBoundingClientRect().width : 0);
function d() {
!a.value && s.value && s.value.hidePopup();
}
function c(b) {
p.value = b.map((h) => h[e.textField]).join(e.separator), r.value = b.map((h) => h[e.valueField]).join(e.separator), i.emit("update:modelValue", r.value), i.emit("change", b, r.value), d();
}
function u(b) {
r.value = "", i.emit("update:modelValue", ""), i.emit("clear");
}
function v(b) {
const h = t(b);
c(h);
}
F([() => e.disabled, () => e.editable, () => e.enableClear, () => e.enableSearch, () => e.readonly], ([b, h, M, N, k]) => {
n.value = b, l.value = h, o.value = M, y.value = N, f.value = k;
});
const S = g(), w = () => {
S.value = P(m.value);
}, T = x(() => {
var h;
const b = (h = s.value) == null ? void 0 : h.popoverRef;
return b ? b.shown : !1;
});
return () => C(H, {
ref: s,
id: e.id,
disable: n.value,
readonly: f.value,
forcePlaceholder: e.forcePlaceholder,
editable: l.value,
buttonContent: e.dropDownIcon,
placeholder: e.placeholder,
enableClear: o.value,
maxLength: e.maxLength,
tabIndex: e.tabIndex,
enableTitle: e.enableTitle,
multiSelect: e.multiSelect,
inputType: e.multiSelect ? "tag" : "text",
popupOnClick: !0,
modelValue: p.value,
"onUpdate:modelValue": (b) => p.value = b,
onClear: u,
onChange: v,
focusOnCreated: e.focusOnCreated,
selectOnCreated: e.selectOnCreated,
beforeOpen: w,
placement: e.placement,
popupMinWidth: e.minPanelWidth
}, {
default: () => [T.value && C(se, {
maxHeight: e.maxHeight,
idField: e.idField,
valueField: e.valueField,
textField: e.textField,
titleField: e.titleField,
data: S.value,
selectedValues: r.value,
onSelectionChange: c,
formatter: e.formatter,
editorParams: e.editorParams,
repositoryToken: e.repositoryToken,
customRowStatus: e.customRowStatus
}, null)]
});
}
});
O.register = (e, i, s, n) => {
e["combo-tree"] = O, i["combo-tree"] = ue;
};
const be = $(O);
export {
O as FComboTree,
re as Placement,
oe as ViewType,
I as comboTreeProps,
be as default,
ue as propsResolver
};