@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,856 lines • 71.4 kB
JavaScript
import { ref as h, computed as L, createVNode as m, Fragment as q, watch as _, withModifiers as Ee, withDirectives as $e, vModelText as je, defineComponent as z, onMounted as ne, inject as te } from "vue";
import { resolveAppearance as le, createPropsResolver as ie, getPropsResolverGenerator as Ge } from "../dynamic-resolver/index.esm.js";
import { getCustomStyle as de, getCustomClass as X, FormSchemaEntityFieldType$Type as K, withInstall as _e } from "../common/index.esm.js";
import { useFilter as Ne, useIdentify as ze, useHierarchy as Ue, useGroupData as We, useDataView as qe, useSelection as Ye, usePagination as Ke, useRow as Xe, useEdit as Je, useVisualDataBound as Qe, useVisualDataCell as Ze, useVisualDataRow as De, useVisualGroupRow as et, useVisualSummaryRow as tt, useVisualData as nt, useSidebar as lt, useColumn as it, useVirtualScroll as at } from "../data-view/index.esm.js";
import { LocaleService as ae } from "../locale/index.esm.js";
import { FCheckbox as oe } from "../checkbox/index.esm.js";
import ot from "../button-edit/index.esm.js";
import { isUndefined as st } from "lodash-es";
import rt from "../list-view/index.esm.js";
import ut from "../../designer/button-edit/index.esm.js";
import { useDesignerComponent as ge } from "../designer-canvas/index.esm.js";
import { InputBaseProperty as dt } from "../property-panel/index.esm.js";
const ct = /* @__PURE__ */ new Map([
["appearance", le]
]), ft = "https://json-schema.org/draft/2020-12/schema", mt = "https://farris-design.gitee.io/order.schema.json", vt = "order", gt = "A Farris Component", ht = "object", pt = {
id: {
description: "The unique identifier for a order",
type: "string"
},
type: {
description: "The type string of order component",
type: "string",
default: "order"
},
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: ""
},
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: "string",
default: ""
}
}, yt = [
"id",
"type"
], bt = {
$schema: ft,
$id: mt,
title: vt,
description: gt,
type: ht,
properties: pt,
required: yt
};
function Ct(e, t, n) {
return t;
}
const St = "order", wt = "A Farris Component", Ft = "object", It = {
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: {
editable: {
description: "",
title: "允许编辑",
type: "boolean"
},
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"
},
textAlign: {
description: "",
title: "对齐方式",
type: "enum",
editor: {
type: "combo-list",
textField: "name",
valueField: "value",
data: [
{
value: "left",
name: "左对齐"
},
{
value: "center",
name: "居中"
},
{
value: "right",
name: "右对齐"
}
]
}
}
}
}
}, Vt = {
title: St,
description: wt,
type: Ft,
categories: It
}, se = {
/** 排序列数据源 */
dataSource: { type: Array, default: [] },
/** 当前排序数组 */
items: { type: Array, default: [] }
}, ce = ie(se, bt, ct, Ct, Vt), Tt = {
/** 列集合 */
columns: {
type: Array,
default: [
{ field: "name", title: "", dataType: "string" }
]
},
customClass: { type: String, default: "" },
data: { type: Array, default: [] },
draggable: { type: Boolean, default: !1 },
multiSelect: { type: Boolean, default: !1 },
// multiSelectMode: { type: String as PropType<MultiSelectMode>, default: 'OnCheck' },
idField: { type: String, default: "id" },
valueField: { type: String, default: "id" },
textField: { type: String, default: "name" },
titleField: { type: String, default: "name" },
view: { type: String, default: "ContentView" },
size: { type: String, default: "default" },
placeholder: { type: String, default: "" },
header: { type: String, default: "ContentHeader" },
headerClass: { type: String, default: "" },
/** 可能根据数据每各项的样式不同 */
itemClass: {
type: [String, Function],
default: "",
validator: (e) => typeof e == "string" || typeof e == "function"
},
itemStyle: {
type: [String, Function],
default: "",
validator: (e) => typeof e == "string" || typeof e == "function"
},
itemContentClass: { type: String, default: "" },
selectionValues: { type: Array, default: [] },
/** 分组配置 */
group: { type: Object },
/** 选择配置 */
selection: {
type: Object,
default: {
enableSelectRow: !0,
multiSelect: !1,
multiSelectMode: "DependOnCheck",
showCheckbox: !1,
showSelectAll: !1,
showSelection: !0
}
},
keepOrder: { type: Boolean, default: !1 },
disableField: { type: String, default: "disabled" },
// 搜索启用高亮
enableHighlightSearch: { type: Boolean, default: !0 },
/** 虚拟化渲染数据 */
virtualized: { type: Boolean, default: !0 },
/** 删除数据前的检查方法，返回值为true时可以删除当前数据 */
checkBeforeRemoveItem: { type: Function, default: null },
/** 头部模板 */
headerTemplate: { type: Object },
/** 内容模板 */
contentTemplate: { type: Object },
/** 底部模板 */
footerTemplate: { type: Object },
/** 空数据模板 */
emptyTemplate: { type: Object },
/** 分页 */
pagination: { type: Object, default: { enable: !1, size: 20 } },
/** 定义属性，开启时，当多选开启时，展示选中项的背景色等样式；不开启时，不展示选中项的背景色等样式 */
showActiveWhenMultiSelect: { type: Boolean, default: !0 },
/** 允许删除 */
allowDelete: { type: Boolean, default: !0 }
};
function kt(e, t) {
function n(f) {
const u = [];
let g = f.nextNode();
for (; g; )
u.push(g), g = f.nextNode();
return u;
}
function l(f, u) {
const g = document.createTreeWalker(f, NodeFilter.SHOW_TEXT);
return n(g).map((v) => ({ textNode: v, text: (v.textContent || "").toLocaleLowerCase() })).map(({ textNode: v, text: C }) => {
const x = [];
let w = 0;
for (; w < C.length; ) {
const I = C.indexOf(u, w);
if (I === -1)
break;
x.push(I), w = I + u.length;
}
return x.map((I) => {
const o = new Range();
return o.setStart(v, I), o.setEnd(v, I + u.length), o;
});
}).flat();
}
function r(f) {
if (!CSS.highlights || (CSS.highlights.clear(), !f || !t))
return;
const u = l(t.value, f.toLocaleLowerCase()), g = new Highlight(...u);
CSS.highlights.set("search-result", g);
}
return { search: r };
}
function fe(e, t, n, l, r, f, u, g, V, k) {
const T = h(e.size), v = h(e.textField), C = h(e.titleField), x = h(e.disableField), w = L(() => {
var b, O;
return ((b = e.selection) == null ? void 0 : b.multiSelect) && ((O = e.selection) == null ? void 0 : O.showCheckbox);
}), {
onMouseenterItem: I,
onMouseoverItem: o,
onMouseoutItem: s
} = f, {
getKey: a,
listViewItemClass: d,
listViewItemStyle: F,
onCheckItem: p,
onClickItem: y
} = u, P = L(() => {
const b = {
"text-overflow": "ellipsis",
overflow: "hidden",
"white-space": "nowrap"
};
return e.itemClass ? b : {
margin: T.value === "small" ? "0.25rem 0" : "8px 0",
...b
};
});
function B(b, O, A) {
return b.checked = g.findIndexInSelectedItems(b) > -1, m("li", {
class: d(b, O),
id: a(b, O),
key: a(b, O),
style: F(b, O),
onClick: (E) => y(b, O, E),
onMouseenter: (E) => I(E, b, O),
onMouseover: (E) => o(E, b, O),
onMouseout: (E) => s(E, b, O)
}, [w.value && m("div", {
class: "f-list-select",
onClick: (E) => E.stopPropagation()
}, [m(oe, {
id: "list-" + a(b, O),
customClass: "listview-checkbox float-left",
disabled: b[x.value],
checked: b.checked,
"onUpdate:checked": (E) => b.checked = E,
onChange: (E) => {
p(b, O, !E.checked);
}
}, null)]), m("div", {
class: "f-list-content"
}, [m("div", {
class: e.itemContentClass,
style: P.value,
title: b.raw[C.value] || b.raw[v.value]
}, [b.raw[v.value]])])]);
}
return {
renderItem: B
};
}
function xt(e, t, n, l, r, f, u, g, V, k) {
const T = h(e.multiSelect), v = h(e.disableField), C = h(e.textField), {
onMouseenterItem: x,
onMouseoverItem: w,
onMouseoutItem: I
} = f, {
getKey: o,
listViewItemClass: s,
listViewItemStyle: a,
onCheckItem: d,
onClickItem: F,
updateSelectedItems: p
} = u;
function y(B, b, O) {
return e.contentTemplate ? m(q, null, [e.contentTemplate({
item: B.raw,
index: b,
selectedItem: O
})]) : t.slots.content ? m(q, null, [t.slots.content && t.slots.content({
item: B.raw,
index: b,
selectedItem: O
})]) : m("div", {
style: "margin: 10px 0;"
}, [B.raw[C.value || "name"]]);
}
function P(B, b, O) {
return m("li", {
class: s(B, b),
id: o(B, b),
key: o(B, b),
style: a(B, b),
onClick: (A) => F(B, b, A),
onMouseenter: (A) => x(A, B, b),
onMouseover: (A) => w(A, B, b),
onMouseout: (A) => I(A, B, b)
}, [T.value && m("div", {
class: "f-list-select",
onClick: (A) => A.stopPropagation()
}, [m(oe, {
id: "list-" + o(B, b),
customClass: "listview-checkbox",
disabled: B[v.value],
checked: B.checked,
"onUpdate:checked": (A) => B.checked = A,
onChange: (A) => {
d(B, b, !A.checked), p();
}
}, null)]), m("div", {
class: "f-list-content"
}, [y(B, b, O)])]);
}
return {
renderItem: P
};
}
function Mt(e, t, n, l, r, f, u, g, V, k) {
const T = h(e.multiSelect), v = h(e.disableField), C = h(e.textField), {
onMouseenterItem: x,
onMouseoverItem: w,
onMouseoutItem: I
} = f, {
getKey: o,
listViewItemClass: s,
onCheckItem: a,
onClickItem: d
} = u, {
dragstart: F,
dragenter: p,
dragover: y,
dragend: P
} = l, {
removeItem: B
} = V, b = L(() => ({
margin: T.value ? "10px 0" : "10px 0px 10px 14px"
}));
function O(i, c = "") {
const M = i.target;
M.title = M.scrollWidth > M.clientWidth ? c : "";
}
function A(i) {
return m("div", {
style: b.value,
onMouseenter: (c) => O(c, i.raw[C.value || "name"])
}, [i.raw[C.value || "name"]]);
}
function E() {
return t.slots.itemContent ? t.slots.itemContent : A;
}
const G = E();
function R(i, c, M) {
return m("li", {
class: s(i, c),
id: o(i, c),
key: o(i, c),
onClick: (S) => d(i, c, S),
onMouseenter: (S) => x(S, i, c),
onMouseover: (S) => w(S, i, c),
onMouseout: (S) => I(S, i, c),
draggable: "true",
onDragstart: (S) => F(S, i, c),
onDragenter: (S) => p(S, c),
onDragend: (S) => P(S, i),
onDragover: (S) => y(S)
}, [T.value && m("div", {
class: "f-list-select",
onClick: (S) => S.stopPropagation()
}, [m(oe, {
id: "list-" + o(i, c),
customClass: "listview-checkbox",
disabled: i[v.value],
checked: i.checked,
"onUpdate:checked": (S) => i.checked = S,
onChange: (S) => a(i, c, !S.checked)
}, null)]), m("div", {
class: "f-list-content"
}, [G(i)]), e.allowDelete && m("div", {
class: "f-list-remove",
onClick: (S) => {
S.stopPropagation(), B(c);
}
}, [m("div", {
class: "f-list-remove-icon"
}, [m("i", {
class: "f-icon f-icon-remove_face"
}, null)])]), m("div", {
class: "f-list-handle"
}, [m("div", null, [m("i", {
class: "f-icon f-icon-drag-vertical"
}, null)])])]);
}
return {
renderItem: R
};
}
function Bt(e, t, n, l, r, f, u, g, V, k) {
var o;
const T = h(((o = e.group) == null ? void 0 : o.groupFields) || []), {
collpaseGroupIconClass: v
} = r, {
toggleGroupRow: C
} = k;
function x(s, a) {
s.stopPropagation(), a.collapse = !a.collapse, n.value = C(a.collapse ? "collapse" : "expand", a, n.value);
}
function w(s, a, d) {
return t.slots.group ? m(q, null, [t.slots.content && t.slots.group({
item: s.raw,
index: a,
selectedItem: d
})]) : m("div", {
class: "f-navlookup-recentHeader",
onClick: (F) => x(F, s)
}, [m("div", {
class: "fv-grid-group-row-icon"
}, [m("span", {
class: v(s)
}, null)]), m("div", {
class: "f-navlookup-recommandLabel"
}, [s.raw[T.value[s.layer]]])]);
}
function I(s, a, d) {
return s.layer > -1 && w(s, a, d);
}
return {
renderItem: I
};
}
function Ot(e, t, n, l) {
const { dataView: r } = n, { updateSelectedItems: f } = l;
function u(g) {
if (g > -1 && g < r.value.length) {
if (e != null && e.checkBeforeRemoveItem && !e.checkBeforeRemoveItem(r.value[g]))
return;
const V = r.value.splice(g, 1);
f(), t.emit("removeItem", V[0]);
}
}
return { removeItem: u };
}
function Rt(e, t, n, l, r, f, u, g, V, k) {
const T = h(e.view), v = h(e.view === "CardView"), C = h({}), x = Ot(e, t, l, V), w = L(() => ({
"f-list-view-group": !0,
"f-list-view-group-multiselect": e.multiSelect,
"d-flex": v.value,
"flex-wrap": v.value
})), I = L(() => !!n.value && n.value.length > 0), o = L(() => n.value.length === 0);
L(() => o.value && !t.slots.empty);
function s() {
return T.value === "SingleView" ? fe : T.value === "DraggableView" ? Mt : (T.value === "ContentView" || T.value === "CardView") && (e.contentTemplate || t.slots.content) ? xt : fe;
}
const a = s(), {
renderItem: d
} = a(e, t, n, k, r, f, V, u, x, g), {
renderItem: F
} = Bt(e, t, n, k, r, f, V, u, x, g), p = [d, F];
function y() {
return n.value.filter((b) => b.visible !== !1).map((b, O) => p[b.type](b, O, C));
}
function P() {
return m("div", {
class: "f-list-view-emptydata",
style: "margin: 0 auto;"
}, [m("p", {
class: "f-empty-title"
}, [e.emptyTemplate ? e.emptyTemplate() : t.slots.empty ? t.slots.empty() : ae.getLocaleValue("listView.emptyMessage")])]);
}
function B() {
return m("ul", {
class: w.value,
style: "list-style: none;"
}, [I.value && y(), o.value && P()]);
}
return {
renderListArea: B
};
}
function Pt(e, t, n) {
function l() {
return t.slots.header && m("div", {
class: "f-list-view-header"
}, [t.slots.header()]);
}
return {
renderHeader: l
};
}
function me(e, t, n) {
const l = h(e.headerClass), r = h(e.placeholder), f = h(""), u = L(() => !f.value), g = L(() => !!f.value);
function V(C) {
f.value = "";
}
_(f, (C) => {
e.enableHighlightSearch && n.search(C), t.emit("afterSearch", C);
});
const k = L(() => {
const C = {
"form-group": !0,
"farris-form-group": !0
};
return l.value && l.value.split(" ").reduce((w, I) => (w[I] = !0, w), C), C;
});
function T(C) {
}
function v() {
return m("div", {
class: "f-list-view-header",
onClick: Ee(() => T, ["prevent", "stop"])
}, [m("div", {
class: k.value
}, [m("div", {
class: "farris-input-wrap"
}, [m("div", {
class: "f-cmp-inputgroup"
}, [m("div", {
class: "input-group f-state-editable"
}, [$e(m("input", {
class: "form-control f-utils-fill text-left",
"onUpdate:modelValue": (C) => f.value = C,
name: "input-group-value",
type: "text",
placeholder: r.value,
autocomplete: "off"
}, null), [[je, f.value]]), m("div", {
class: "input-group-append"
}, [g.value && m("span", {
class: "input-group-text input-group-clear",
onClick: (C) => V()
}, [m("i", {
class: "f-icon f-icon-close-circle"
}, null)]), u.value && m("span", {
class: "input-group-text"
}, [m("span", {
class: "f-icon f-icon-search"
}, null)])])])])])])]);
}
return {
renderHeader: v
};
}
function Lt() {
const e = h(""), t = h(-1), n = h(""), l = h(-1), r = h(!1);
function f(v, C, x) {
l.value = x;
}
function u(v, C, x) {
r.value || (l.value = x);
}
function g(v, C, x) {
l.value = -1;
}
function V() {
r.value = !0;
}
function k() {
r.value = !1;
}
function T() {
t.value = -1, e.value = "";
}
return {
activeIndex: t,
focusedItemId: n,
hoverIndex: l,
clearActiveItem: T,
onMouseenterItem: f,
onMouseoverItem: u,
onMouseoutItem: g,
resumeHover: k,
suspendHover: V
};
}
function At(e, t, n, l, r) {
const f = h(e.idField), { dataView: u } = n, g = h(-1), V = h(!1), { activeIndex: k, focusedItemId: T, hoverIndex: v, resumeHover: C, suspendHover: x } = l;
let w, I = 0, o = 0, s = null, a = null;
const d = 10, F = 50;
function p(i) {
if (!i)
return null;
const { overflowY: c } = getComputedStyle(i);
return c === "auto" || c === "scroll" ? i : p(i.parentElement);
}
function y(i, c) {
a && clearInterval(a), a = window.setInterval(() => {
c === "up" ? i.scrollTop -= d : i.scrollTop += d;
}, 16);
}
function P() {
a && (clearInterval(a), a = null);
}
function B(i) {
const c = i.target;
if (s || (s = p(c)), !s) {
P();
return;
}
const M = s.getBoundingClientRect(), S = i.clientY, $ = S - M.top, j = M.bottom - S;
$ < F && s.scrollTop > 0 ? y(s, "up") : j < F && s.scrollTop < s.scrollHeight - s.clientHeight ? y(s, "down") : P();
}
function b(i, c) {
const M = i - I, S = c - o;
w.style.left = parseInt(w.style.left) + M + "px", w.style.top = parseInt(w.style.top) + S + "px", I = i, o = c;
}
function O(i) {
const { left: c, top: M } = i.getBoundingClientRect(), S = i.cloneNode(!0);
return S.className = S.className + " f-listview-drag-moving", S.style.cssText = `
position:absolute;
left:${c}px;
top:${document.documentElement.scrollTop ? M + document.documentElement.scrollTop : M}px;
z-index: 999999;
pointer-events: none;
border-radius: 10px;
margin: 4px 2px;
display: flex;
align-items: center;
float: none;
text-align: initial;
width:${getComputedStyle(i).width};
height:${getComputedStyle(i).height};
`, S.children[0].style.cssText = "padding: 0 0 0 14px", S.children[0].children[0].style.cssText = `
margin: 10px 0px 10px 14px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
`, S.children[1].style.cssText = "flex:1 1 auto; width:100%", S.children[2].style.cssText = "padding: 0 14px 0 0", S.children[2].children[0].style.cssText = "display: initial", document.body.appendChild(S), S;
}
function A(i, c, M) {
if (i.stopPropagation(), x(), c) {
if (w = O(i.target), i.dataTransfer) {
const S = new Image();
S.src = "", i.dataTransfer.setDragImage(S, 0, 0);
}
I = i.pageX, o = i.pageY, setTimeout(() => {
g.value = M, V.value = !0, c.moving = !0;
});
}
}
function E(i, c) {
if (i.preventDefault(), g.value !== c && g.value !== -1) {
const M = u.value[g.value], S = r.value[g.value];
M && S && (u.value.splice(g.value, 1), u.value.splice(c, 0, M), r.value.splice(g.value, 1), r.value.splice(c, 0, S), r.value.forEach(($, j) => {
$.index = j, $.raw.__fv_index__ = j;
}), g.value = c, b(i.pageX, i.pageY));
}
}
function G(i) {
i.preventDefault(), i.dataTransfer && (i.dataTransfer.dropEffect = "move"), b(i.pageX, i.pageY), B(i);
}
function R(i, c) {
var S, $;
P(), s = null, c && (c.moving = !1, w && (document.body.removeChild(w), w = null)), u.value.forEach((j, U) => {
j.__fv_index__ = U;
}), r.value.forEach((j, U) => {
j.index = U, j.raw && (j.raw.__fv_index__ = U);
}), V.value = !1, C();
const M = ((S = c.raw) == null ? void 0 : S.__fv_index__) ?? 0;
v.value = M, k.value = M, T.value = ($ = c.raw) == null ? void 0 : $[f.value], t.emit("change", u.value), t.emit("activeChange", [c.raw]);
}
return {
dragstart: A,
dragenter: E,
dragover: G,
dragend: R,
isDragging: V
};
}
function Ht(e, t, n, l, r, f) {
const u = h(e.idField), g = h(e.disableField), V = h(e.draggable);
h(e.itemClass);
const k = h(e.selection.multiSelect ?? !1), T = h(e.selection.multiSelectMode), { isDragging: v } = l, { activeIndex: C, focusedItemId: x, hoverIndex: w } = r, { clearSelection: I, getSelectedItems: o, toggleSelectItem: s, currentSelectedDataId: a, multiSelectOnlyOnCheck: d } = f, F = h(o()), p = (R) => F.value.length === 0 ? !1 : F.value.some((i) => {
let c = "";
return i.data ? c = i.data[u.value] : c = i[u.value], c === R;
});
function y() {
F.value = o();
}
function P(R, i) {
return R.raw[u.value] != null ? R.raw[u.value] + "_" + i : "";
}
function B(R, i) {
const c = {
"f-list-view-group-item": !0,
"f-list-view-draggable-item": V.value,
"f-un-click": !R.checked,
"f-un-select": !!R.raw[g.value],
"f-listview-active": (
// 多选
k.value && p(P(R, i)) && e.showActiveWhenMultiSelect || // 单选
!k.value && R.raw[u.value] === a.value || k.value && !e.showActiveWhenMultiSelect && R.raw[u.value] === a.value
),
"f-listview-hover": !v.value && i === w.value,
moving: !!R.moving
};
if (typeof e.itemClass == "string")
return X(c, e.itemClass);
if (typeof e.itemClass == "function") {
const M = e.itemClass(R);
return X(c, M);
}
return c;
}
function b(R, i) {
const c = {};
if (typeof e.itemStyle == "string")
return de(c, e.itemStyle);
if (typeof e.itemStyle == "function") {
const M = e.itemStyle(R);
return de(c, M);
}
return c;
}
const O = L(() => !k.value);
function A(R, i, c) {
R.checked = c, !R.raw[g.value] && (O.value && (x.value = R.raw[u.value]), s(R));
}
const E = L(() => !k.value || k.value && T.value === "OnCheckAndClick");
function G(R, i, c) {
if (R.raw[g.value]) {
c == null || c.preventDefault(), c == null || c.stopPropagation();
return;
}
a.value = R.raw[u.value], x.value = R.raw[u.value], C.value = i, E.value && (s(R), y()), t.emit("clickItem", { data: F.value, index: i, dataItem: R.raw }), t.emit("activeChange", F.value);
}
return {
getKey: P,
selectedItems: F,
listViewItemClass: B,
listViewItemStyle: b,
updateSelectedItems: y,
onCheckItem: A,
onClickItem: G
};
}
const he = /* @__PURE__ */ z({
name: "FListView",
props: Tt,
emits: ["afterSearch", "checkValuesChange", "clickItem", "selectItem", "unSelectItem", "selectionChange", "removeItem", "change", "activeChange", "pageIndexChanged", "pageSizeChanged", "changed", "selectionUpdate"],
setup(e, t) {
var ue;
const n = h(!1), l = h(), r = h(!0), f = h(((ue = e.rowOption) == null ? void 0 : ue.rowHeight) || 28), u = h(!1), g = h([]), V = 0, k = h(e.columns), T = Ne(e, t), v = ze(e), C = Ue(e), x = We(e, v), w = qe(e, /* @__PURE__ */ new Map(), T, C, v), I = Ye(e, w, v, g, t), o = kt(e, l), s = Ke(e, w), a = L(() => w.dataView.value.length), d = Xe(e, t, I, v), F = Je(e, t, v, d, g), p = Qe(e, w, f), y = Ze(e, {}, p), P = De(e, w, F, C, v, p, y, f), B = et(e, v, y, P), b = tt(e, v, y, P), O = nt(e, k, w, a, V, P, B, b), {
getVisualData: A
} = O;
g.value = A(0, a.value + V - 1);
const E = L(() => {
const H = {
"f-list-view": !0,
"f-list-view-multiple": e.multiSelect
};
return e.size !== "default" && (H[`${e.size}-item`] = !0), X(H, e.customClass);
}), G = L(() => !!t.slots.footer || r.value);
function R() {
return e.header === "SearchBar" ? me : e.header === "ContentHeader" ? Pt : me;
}
const i = R(), {
renderHeader: c
} = i(e, t, o), M = Lt(), S = At(e, t, w, M, g), $ = Ht(e, t, g, S, M, I), {
renderListArea: j
} = Rt(e, t, g, w, x, M, I, O, $, S);
function U(H) {
o.search(H);
}
function Fe(H) {
H && (w.load(H), g.value = A(0, a.value + V - 1));
}
function Ie() {
I.clearSelection(), M.clearActiveItem();
}
function Ve() {
return $.selectedItems.value;
}
function Te() {
return $.selectedItems.value.map((H) => H[v.idField.value]);
}
function re(H) {
I.selectedValues.value = H, $.updateSelectedItems();
}
function ke() {
return I.currentSelectedDataId.value;
}
function xe(H) {
d.activeRowById(H);
}
function Me(H) {
const N = v.idField.value, W = g.value.find((D) => D.raw[N] === H), Y = g.value.findIndex((D) => D.raw[N] === H);
W && Y > -1 && $.onClickItem(W, Y);
}
function Be(H) {
const N = v.idField.value, W = g.value.find((Y) => Y.raw[N] === H);
W && d.changeRow(W);
}
function Oe(H) {
s.updatePagination(H);
}
function Re(H) {
return g.value.filter((N) => H.includes(N.raw[e.idField]));
}
t.expose({
search: U,
updateDataSource: Fe,
clearSelection: Ie,
getSelections: Ve,
updateSelectionByIds: re,
getSelectionIds: Te,
activeRowById: xe,
getCurrentRowId: ke,
clickRowItemById: Me,
updatePagination: Oe,
getVisibleDataByIds: Re,
selectRowById: Be
}), _(() => e.selectionValues, (H, N) => {
H !== N && re(H);
});
const Pe = lt(e, I), {
sidebarWidth: Le,
showSidebarCheckBox: hn
} = Pe, Ae = it(e, t), {
applyColumnSorter: pn,
columnContext: He,
updateColumnRenderContext: yn
} = Ae;
return at(e, w, g, He, O, a, V, Le, f, n, F), () => m("div", {
class: E.value
}, [c(), m("div", {
ref: l,
class: "f-list-view-content",
onMouseover: () => {
u.value || (u.value = !0);
},
onMouseleave: () => {
u.value && (u.value = !1);
}
}, [j()]), G.value && m("div", {
class: "f-list-view-footer"
}, [e.footerTemplate ? e.footerTemplate() : t.slots.footer && t.slots.footer()])]);
}
}), Et = "https://json-schema.org/draft/2020-12/schema", $t = "https://farris-design.gitee.io/component.schema.json", jt = "button", Gt = "A Farris Visual Button", _t = "object", Nt = {
id: {
description: "The unique identifier for a component",
type: "string"
},
type: {
description: "The type string of component",
type: "string",
default: "button"
},
text: {
description: "The text string of component",
type: "string"
},
disabled: {
description: "",
type: "boolean",
default: !1
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
visible: {
description: "",
type: "boolean",
default: !0
},
size: {
description: "大小",
type: "string",
default: "middle"
},
icon: {
description: "图标",
type: "string",
default: ""
},
onClick: {
description: "点击事件",
type: "string",
default: ""
}
}, zt = [
"id",
"type",
"text"
], Ut = {
onClick: "点击事件"
}, Wt = {
$schema: Et,
$id: $t,
title: jt,
description: Gt,
type: _t,
properties: Nt,
required: zt,
events: Ut
}, qt = /* @__PURE__ */ new Map([
["appearance", le]
]);
function Yt(e, t, n) {
return Object.assign(t, {
text: "按钮",
appearance: {
class: "btn btn-secondary"
}
}), t;
}
const pe = {
/**
* 组件标识
*/
id: String,
/**
* 设置按钮类型
*/
type: { type: String, default: "primary" },
/**
* 是否禁用
*/
disabled: { type: Boolean, default: !1 },
/**
* 按钮尺寸
*/
size: { type: String, default: "middle" },
/**
* 按钮图标
*/
icon: { type: String, default: "" },
/**
* 按钮文本
*/
text: { type: String, default: "" },
/**
* 自定义class
*/
customClass: { type: String, default: "" },
customStyle: { type: String, default: "" },
/** 控制是否可见 */
visible: { type: Boolean, default: !0 }
};
ie(pe, Wt, qt, Yt);
function Kt(e, t) {
function n(l) {
l.stopPropagation(), e.disabled || t.emit("click", l);
}
return {
onClickButton: n
};
}
function Xt(e) {
const t = L(() => {
const l = {
"f-icon": !0
};
if (e.icon) {
const r = e.icon.trim().split(" ");
r && r.length && r.reduce((f, u) => (f[u] = !0, f), l);
}
return l;
}), n = L(() => !!(e.icon && e.icon.trim()));
return { iconClass: t, shouldShowIcon: n };
}
const ye = /* @__PURE__ */ z({
name: "FButton",
props: pe,
emits: ["click"],
setup(e, t) {
const {
onClickButton: n
} = Kt(e, t), {
iconClass: l,
shouldShowIcon: r
} = Xt(e), f = L(() => {
const u = {
btn: !0,
"btn-lg": e.size === "large",
"btn-md": e.size !== "large" && e.size !== "small",
"btn-sm": e.size === "small",
"btn-icontext": r.value
};
return u[`btn-${e.type}`] = !0, e.customClass && (typeof e.customClass == "string" ? X(u, e.customClass) : Object.keys(e.customClass).reduce((g, V) => (g[V] = e.customClass[V], g), u)), u;
});
return () => e.visible ? m("button", {
class: f.value,
disabled: e.disabled,
style: e.customStyle,
onClick: (u) => n(u)
}, [r.value && m("i", {
class: l.value
}, null), e.text ? e.text : "", t.slots.default && t.slots.default()]) : null;
}
}), be = /* @__PURE__ */ new Map([
["appearance", le]
]), Jt = "https://json-schema.org/draft/2020-12/schema", Qt = "https://farris-design.gitee.io/combo-list.schema.json", Zt = "combo-list", Dt = "A Farris Input Component", en = "object", tn = {
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-list"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disabled: {
description: "",
type: "boolean",
default: !1
},
enableClear: {
description: "",
type: "boolean",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !1
},
enableLinkLabel: {
description: "",
type: "boolean",
default: !1
},
label: {
description: "",
type: "string",
default: ""
},
lableWidth: {
description: "",
type: "number"
},
placeholder: {
description: "",
type: "string",
default: "请选择"
},
idField: {
description: "",
type: "string",
default: "id"
},
valueField: {
description: "",
type: "string",
default: "id"
},
titleField: {
description: "",
type: "string",
default: "name"
},
textField: {
description: "",
type: "string",
default: "name"
},
dataSourceType: {
description: "",
type: "string",
default: "static"
},
data: {
description: "",
type: "array"
},
dataSource: {
description: "",
type: "string"
},
remote: {
description: "",
type: "string"
},
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"
},
multiSelect: {
description: "",
type: "boolean",
default: !1
},
maxLength: {
description: "",
type: "number",
default: null
},
visible: {
description: "",
type: "boolean",
default: !0
},
onBlur: {
description: "",
type: "string",
default: ""
},
onClickLinkLabel: {
description: "",
type: "string",
default: ""
},
maxHeight: {
description: "",
type: "number",
default: 350
},
minPanelWidth: {
description: "",
type: "number",
default: 160
},
popupOnClick: {
description: "",
type: "boolean",
default: !0
},
separator: {
description: "",
type: "string",
default: ","
},
viewType: {
description: "",
type: "string",
default: "tag"
},
enableSearch: {
description: "启用搜索",
type: "boolean",
default: !0
},
enableHighlightSearch: {
description: "启用高亮搜索",
type: "boolean",
default: !1
},
beforeOpen: {
description: "打卡面板前回调",
type: "string"
},
onChange: {
description: "值变化事件",
type: "string",
default: ""
},
onInput: {
description: "输入事件",
type: "string",
default: ""
},
onClear: {
description: "清空事件",
type: "string",
default: ""
},
onDataChanged: {
description: "清空事件",
type: "string",
default: ""
}
}, nn = [
"type"
], ln = [
"id",
"appearance",
"binding",
"visible"
], an = {
onClear: "清空事件",
onChange: "值变化事件",
beforeOpen: "打开下拉面板前事件"
}, Ce = {
$schema: Jt,
$id: Qt,
title: Zt,
description: Dt,
type: en,
properties: tn,
required: nn,
ignore: ln,
events: an
};
function Se(e, t, n) {
return t;
}
function on() {
function e(t, n, l) {
const r = {};
return r.beforeOpen = (f) => n.call("beforeOpen", t, [f, t], l), r;
}
return {
resolve: e
};
}
const Z = {
/**
* 组件标识
*/
id: { type: String },
/**
* 下拉数据源
*/
data: { type: Array, default: [] },
/**
* 可选，展示文本
* 默认为空字符串 -----内部需要根据value重新生成展示文本，此属性不生效
* displayText: { type: String, default: '' },
*/
/**
* 可选，是否禁用
* 默认为`false`
*/
disabled: { default: !1, type: Boolean },
/**
* 可选，下拉图标
* 默认为'<span class="f-icon f-icon-arrow-60-down"></span>'
*/
dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-chevron-down"></span>' },
/**
* 可选，是否可编辑
* 默认`false`
*/
editable: { default: !1, type: Boolean },
/**
* 可选，是否启用清空
* 默认启用
*/
enableClear: { default: !0, type: Boolean },
/**
* 可选，启用搜索
* 默认为`false`
*/
enableSearch: { type: Boolean, default: !1 },
/**
* 可选，鼠标悬停时是否显示控件值
* 默认显示
*/
enableTitle: { default: !0, type: Boolean },
fitEditor: { default: !1, type: Boolean },
/**
* 可选，强制显示占位符
* 默认`false`
*/
forcePlaceholder: { default: !1, type: Boolean },
/**
* 可选，清空值时隐藏面板
* 默认`true`
*/
hidePanelOnClear: { default: !0, type: Boolean },
/**
* 可选，数据源id字段
* 默认为`id`
*/
idField: { default: "id", type: String },
/**
* 可选，字段映射
*/
mapFields: { type: Object },
/**
* 可选，最大高度
* 默认`350`
*/
maxHeight: { default: 350, type: Number },
/**
* 最大输入长度
*/
maxLength: { type: Number },
/**
* 可选，是否支持多选
* 默认`false`
*/
multiSelect: { type: Boolean, default: !1 },
/**
* 绑定值
*/
modelValue: {},
/**
* 占位符
*/
placeholder: { type: String, default: "请选择" },
/**
* 可选，下拉面板展示位置
* 默认为`auto`
*/
placement: {
type: String,
default: "auto"
/* auto */
},
/**
* 可选，是否只读
* 默认为`false`
*/
readonly: { default: !1, type: Boolean },
/**
* 远端数据源信息
*/
remote: { default: null, type: Object },
/**
* 可选，是否支持远端过滤
* 默认`false`
*/
remoteSearch: { default: !1, type: Boolean },
/**
* 可选，分隔符
* 默认`,`
*/
separator: { default: ",", type: String },
/**
* tabIndex
*/
tabIndex: { type: Number, default: -1 },
/**
* 可选，数据源显示字段
* 默认为`name`
*/
textField: { default: "name", type: String },
/**
* 可选，数据源的title
* 默认为`name`
*/
titleField: { default: "name", type: String },
/**
* 可选，数据源值字段
* 默认为`id`
*/
valueField: { default: "id", type: String },
/**
* 可选，启用多选下，下拉列表值在输入框中的展示方式
* 支持text | tag
* 因为ButtonEdit内部处理类型只有在批量的情况下才会有展示类型区分
*/
viewType: { default: "tag", type: String },
/**
* 值变化事件
*/
change: { type: Function, default: () => {
} },
/**
* 作为内嵌编辑器被创建后默认获得焦点
*/
focusOnCreated: { type: Boolean, default: !1 },
/**
* 作为内嵌编辑器被创建后默认选中文本
*/
selectOnCreated: { type: Boolean, default: !1 },
/**
* 此属性废弃
*/
autoHeight: { type: Boolean, default: !0 },
/**
* 打开前
*/
beforeOpen: { type: Function, default: null },
load: { type: Function },
searchOption: {
type: [Boolean, Function],
default: !1
},
// 搜索启用高亮
enableHighlightSearch: { type: Boolean, default: !0 },
minPanelWidth: { type: Number, default: 160 },
popupOnClick: { type: Boolean, default: !0 }
}, sn = Object.assign({}, Z, {
readonly: {}
});
ie(Z, Ce, be, Se);
const we = Ge(
Z,
Ce,
be,
Se
), rn = on(), un = {
dataSource: { type: Array, default: [] },
enableSearch: { type: Boolean, default: !1 },
idField: { type: String, default: "id" },
multiSelect: { type: Boolean, default: !1 },
selectedValues: { type: String, default: "" },
separator: { type: String, default: "," },
textField: { type: String, default: "name" },
titleField: { type: String, default: "name" },
width: { type: Number },
maxHeight: { type: Number },
valueField: { type: String, default: "id" },
/** 值变化事件 */
onSelectionChange: { type: Function, default: () => {
} },
searchOption: {
type: [Boolean, Function],
default: !1
},
// 搜索启用高亮
enableHighlightSearch: { type: Boolean, default: !0 }
}, dn = /* @__PURE__ */ z({
name: "FComboListContainer",
props: un,
emits: ["selectionChange"],
setup(e, t) {
const n = h(), l = h(e.dataSource), r = h([]), f = h(e.separator), u = h(e.width), g = h(e.maxHeight), V = L(() => e.multiSelect), k = h(e.multiSelect ? String(e.selectedValues).split(f.value) : [e.selectedValues]), T = L(() => ({
enableSelectRow: !0,
multiSelect: e.multiSelect,
multiSelectMode: "OnCheckAndClick",
showCheckbox: V.value,
showSelectAll: !1,
showSelection: !0
}));
_(e.dataSource, () => {
l.value = e.dataSource;
}), L(() => e.enableSearch ? "SearchBar" : "ContentHeader");
const v = L(() => {
const o = {};
return u.value !== void 0 && (o.width = `${u.value}px`), g.value !== void 0 && g.value > 0 && (o.maxHeight = `${g.value}px`), o;
});
function C(o) {
n.value.search(o);
}
function x(o) {
r.value = o.map((s) => Object.assign({}, s)), k.value = o.map((s) => s[e.idField]), t.emit("selectionChange", r.value);
}
function w(o) {
if (e.enableHighlightSearch)
return;
let s = [];
const {
searchOption: a
} = e;
typeof a == "function" ? s = l.value.filter((d) => a(o, d)) : s = l.value.filter((d) => d[e.valueField].indexOf(o) > -1 || d[e.textField].indexOf(o) > -1), n.value.updateDataSource(s);
}
_([() => e.selectedValues], ([o]) => {
e.multiSelect ? k.value = o.split(f.value) : k.value = [o];
});
function I(o) {
n.value.activeRowById(o);
}
return ne(() => {
var o, s;
if (!e.multiSelect) {
const a = (o = k.value) == null ? void 0 : o[0];
let d = a;
const F = l.value.map((p) => p[e.valueField || e.idField]);
if (!st(a) && F.includes(a)) {
const p = typeof a, y = typeof ((s = l.value[0]) == null ? void 0 : s[e.valueField || e.idField]);
y === "number" && p !== y && (d = Number(a)), y === "boolean" && p !== y && (d = a === "true" ? !0 : a === "false" ? !1 : a), I(d);
}
}
}), t.expose({
search: C,
activeRowById: I
}), () => m("div", {
class: "f-combo-list-container",
style: v.value
}, [m(rt, {
ref: n,
size: "small",
itemClass: "f-combo-list-item",
itemContentClass: "text-truncate",
header: "ContentHeader",
headerClass: "f-combo-list-search-box",
data: l.value,
idField: e.idField,
textField: e.textField,
titleField: e.titleField,
multiSelect: e.multiSelect,
selection: T.value,
enableHighlightSearch: e.enableHighlightSearch,
selectionValues: k.value,
onSelectionUpdate: x,
onAfterSearch: w
}, null)]);
}
});
function cn(e, t) {
const n = h(""), l = h(e.modelValue), r = h(e.data || []), f = h(e.editable);
function u(o) {
const s = e.multiSelect ? String(o).split(e.separator) : [String(o)], a = s.map((p) => [p, !0]), d = new Map(a);
return r.value.filter((p) => d.has(String(p[e.valueField]))).sort((p, y) => {
const P = s.indexOf(p[e.valueField]), B = s.indexOf(y[e.valueField]);
return P - B;
});
}
function g(o) {
const s = u(o).map((a) => a[e.textField]).join(e.separator);
n.value = f.value ? s || o : s;
}
function V(o) {
if (e.multiSelect) {
const s = o.split(e.separator).map((d) => [d, !0]), a = new Map(s);
return r.value.filter((d) => a.has(d[e.textField]));
}
return r.value.filter((s) => "" + s[e.textField] === o);
}
function k(o) {
const s = {};
return s[e.idField] = o, s[e.textField] = o, [s];
}
function T(o) {
let s = V(o);
const a = s && s.length > 0;
return f.value && !a && (s = k(o)), s;
}
function v() {
const { url: o, method: s = "GET", headers: a = { "Content-Type": "application/json;charset=utf-8;" }, body: d = null } = e.remote;
if (!o)
return;
const F = s.toLowerCase() === "get" ? { method: s, headers: a } : { method: s, headers: a, body: d };
let p = !1;
fetch(new Request(o, F)).then((y) => {
var B, b;
if (y.status === 200)
return p = !!((b = (B = y.headers) == null ? void 0 : B.get("content-type")) != null && b.includes("application/json")), p ? y.text() : y.json();
throw y.status === 405 ? new Error(ae.getLocaleValue("comboList.remoteError")) : new Error(y.statusText);
}).then((y) => {
y.length && (r.value = p ? JSON.parse(y) : y, l.value && g(l.value));
}).catch((y) => {
console.warn(y);
});
}
e.remote && (e.load ? e.load().then((o) => {
r.value = o;
}).catch((o) => {
console.log(o);
}) : v()), _(() => e.data, () => {
r.value = e.data;
}), _([r], ([o], [s]) => {
if (e.modelValue != null && !e.multiSelect) {
const a = o.find((d) => d[e.valueField] === l.value);
a ? a[e.valueField] !== l.value ? (l.value = a[e.valueField], n.value = a[e.textField], t.emit("update:modelValue", a[e.valueField]), t.emit("change", [a], a[e.valueField])) : n.value !== a[e.textField] && (n.value = a[e.textField]) : l.value !== "" && (l.value = "", n.value = "", t.emit("update:modelValue", ""), t.emit("change", [], ""));
}
}), _(() => e.modelValue, (o, s) => {
s !== o && (l.value = o, g(o));
});
function C(o) {
r.value = o, t.emit("dataChanged", o);
}
function x() {
return r.value;
}
function w() {
return n.value;
}
function I() {
const o = typeof e.beforeOpen == "function";
return !e.beforeOpen || !o ? Promise.resolve(!0) : Promise.resolve().then(() => e.beforeOpen({ instance: { updateDataSource: C, getData: x, getDisplayText: w } })).then((s) => typeof (s == null ? void 0 : s.canOpen) == "boolean" ? s == null ? void 0 : s.canOpen : !0);
}
return g(e.modelValue), {
dataSource: r,
displayText: n,
editable: f,
modelValue: l,
beforeOpenList: I,
getItemsByDisplayText: V,
getItemsByValue: u,
getSelectedItemsByDisplayText: T
};
}
const J = /* @__PURE__ */ z({
name: "FComboList",
props: Z,
emits: ["clear", "update:modelValue", "change", "input", "dataChanged"],
setup(e, t) {
const n = h(), l = h(), r = h(e.disabled || e.readonly), f = h(e.enableClear), u = h(e.enableSearch), g = h(e.readonly), {
dataSource: V,
displayText: k,
editable: T,
modelValue: v,
getItemsByDisplayText: C,
getItemsByValue: x,
beforeOpenList: w
} = cn(e, t), I = h(e.dropDownIcon);
I.value === '<span class="f-icon f-icon-arrow-chevron-down"></span>' && (I.value = '<span id="' + e.id + '-icon-dropdown" class="f-icon f-icon-arrow-chevron-down"></span>');
const o = L(() => e.multiSelect), s = L(() => l.value ? l.value.elementRef.getBoundingClientRect().width : 0);
function a() {
!o.value && l.value && l.value.hidePopup();
}
function d(i) {
k.value = i.map((M) => M[e.textField]).join(e.separator) || v.value;
let c = "";
i.length === 1 ? c = i[0][e.valueField] : c = i.map((M) => M[e.valueField]).join(e.separator), v.value !== c && (v.value = c, t.emit("update:modelValue", v.value), t.emit("change", i, v.value));
}
function F() {
const i = x(v.value);
d(i);
}
function p() {
g.value || k.value;
}
function y(i) {
var c;
v.value = "", (c = n.value) == null || c.activeRowById(""), t.emit("clear");
}
function P(i) {
var c, M;
e.enableSearch && e.enableHighlightSearch && ((c = n.value) == null || c.search(i)), (M = n.value) == null || M.activeRowById(i), t.emit("change", [v.value], v.value);
}
function B(i) {
if (e.multiSelect) {
const c = C(i);
e.viewType;
const S = c.map(($) => $[e.idField || e.valueField]).join(e.separator);
v.value !== S && (v.value = S, t.emit("update:modelValue", v.value), t.emit("change", c, v.value));
} else i !== v.value && (v.value = i, t.emit("update:modelValue", v.value), t.emit("change", [], i));
}
function b() {
return k.value;
}
function O(i) {
const {
value: c
} = i.target;
P(c), t.emit("input", c);
}
function A() {
l.value.hidePopup();
}
function E(i) {
V.value = i;
}
function G() {
return V.value;
}
const R = {
getDisplayText: b,
hidePopup: A,
updateDataSource: E,
getData: G
};
return t.expose(R), _([() => e.disabled, () => e.editable, () => e.enableClear, () => e.enableSearch, () => e.readonly], ([i, c, M, S, $]) => {
r.value = i, T.value = c, f.value = M, u.value = S, g.value = $;
}), () => m(ot, {
ref: l,
id: e.id,
disable: r.value,
readonly: g.value,
forcePlaceholder: e.forcePlaceholder,
editable: T.value,
buttonContent: I.value,
placeholder: e.placeholder === "请选择" ? ae.getLocaleValue("comboList.placeholder") : e.placeholder,
enableClear: f.value,
maxLength: e.maxLength,
tabIndex: e.tabIndex,
enableTitle: e.enableTitle,
multiSelect: e.multiSelect,
inputType: e.multiSelect ? e.viewType : "text",
modelValue: k.value,
"onUpdate:modelValue": (i) => k.value = i,
focusOnCreated: e.focusOnCreated,
selectOnCreated: e.selectOnCreated,
onClear: y,
onClick: p,
onChange: B,
onBlur: F,
onInput: O,
beforeOpen: w,
placement: e.placement,
popupMinWidth: e.minPanelWidth,
popupClass: "f-combo-list-wrapper",
popupOnClick: e.popupOnClick,
limitContentBySpace: !0
}, {
default: () => [m(dn, {
ref: n,
idField: e.idField,
valueField: e.valueField,
textField: e.textField,
titleField: e.titleField,
dataSource: V.value,
selectedValues: v.value,
separator: e.separator,
multiSelect: e.multiSelect,
enableSearch: u.value,
maxHeight: e.maxHeight,
enableHighlightSearch: e.enableHighlightSearch,
width: e.fitEditor ? s.value : void 0,
onSelectionChange: (i) => {
d(i), a();
}
}, null)]
});
}
}), ve = {
convertFrom: (e, t) => (e.editor.remote || {})[t],
convertTo: (e, t, n) => {
e.editor.remote = e.editor.remote || {}, e.editor.remote[t] = n;
}
};
class fn extends dt {
constructor(t, n) {
super(t, n);
}
getCommonEditorProperties(t) {
var n, l, r;
return {
viewType: {
visib