@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,636 lines (1,635 loc) • 560 kB
JavaScript
var Ro = Object.defineProperty;
var jo = (t, n, e) => n in t ? Ro(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e;
var B = (t, n, e) => jo(t, typeof n != "symbol" ? n + "" : n, e);
import { ref as k, computed as N, defineComponent as Ie, provide as Rn, createVNode as E, watch as ke, inject as Ze, onMounted as Ke, Fragment as Yt, reactive as kt, createApp as jn, onUnmounted as on, Transition as va, mergeProps as It, createTextVNode as vt, onBeforeUnmount as Cn, withDirectives as Ln, resolveDirective as Lo, nextTick as St, onBeforeMount as $o, Teleport as ba, shallowRef as Wo, render as kn, h as Ho, cloneVNode as Ao, triggerRef as zo, isVNode as qo, vModelText as Go, vShow as Yo } from "vue";
import { isPlainObject as Jn, cloneDeep as ft, isUndefined as lt, throttle as Uo } from "lodash-es";
import { getCustomClass as cn, getCustomStyle as Xo, useGuid as Qo, resolveField as it, FormSchemaEntityFieldTypeName as Zn, useCommonUtils as Ko, useDateFormat as Jo, useNumberFormat as Zo, setFieldValue as Dn, withInstall as wa, FormSchemaEntityField$Type as ea, FormSchemaEntityFieldType$Type as Ca } from "../common/index.esm.js";
import xa from "../list-view/index.esm.js";
import er, { FButtonEdit as ka } from "../button-edit/index.esm.js";
import Sa from "../../designer/button-edit/index.esm.js";
import { DgControl as ta, useDesignerComponent as tr } from "../designer-canvas/index.esm.js";
import { useResizeObserver as Fa } from "@vueuse/core";
import { useIdentify as nr, useGroupData as ar, useFilter as or, useHierarchy as rr, useLoading as ir, useDataView as sr, useSelection as lr, useSelectHierarchyItem as ur, useDataViewContainerStyle as cr, useCommandColumn as dr, useColumn as fr, useSort as pr, useGroupColumn as mr, useRow as hr, useEdit as yr, useVisualDataBound as gr, useVisualDataCell as vr, useVisualDataRow as br, useVisualData as wr, useCellPosition as Cr, useSidebar as xr, useVirtualScroll as kr, useFitColumn as Sr, useFilterHistory as Fr, useColumnFilter as Tr, useDragColumn as Mr, getColumnHeader as _r, getSidebar as Er, getDisableMask as Or, getHorizontalScrollbar as Dr, getVerticalScrollbar as Ir, getEmpty as Pr } from "../data-view/index.esm.js";
import "../modal/index.esm.js";
import Br from "../transfer/index.esm.js";
import Nr from "../tabs/index.esm.js";
import Vr from "../order/index.esm.js";
import "../condition/index.esm.js";
import { FCheckbox as Rr } from "../checkbox/index.esm.js";
import jr from "../filter-bar/index.esm.js";
import na from "../tooltip/index.esm.js";
import Lr from "../pagination/index.esm.js";
import $r from "../button/index.esm.js";
import Wr from "../search-box/index.esm.js";
import Ta from "../tags/index.esm.js";
import Hr, { FDynamicFormGroup as Ar, FDynamicFormInput as zr } from "../dynamic-form/index.esm.js";
import { createPropsResolver as qr } from "../dynamic-resolver/index.esm.js";
import "../property-panel/index.esm.js";
import Gr from "../accordion/index.esm.js";
import Yr from "../avatar/index.esm.js";
import Ur from "../button-group/index.esm.js";
import Xr from "../calendar/index.esm.js";
import Qr from "../capsule/index.esm.js";
import aa from "../../designer/checkbox/index.esm.js";
import oa from "../../designer/checkbox-group/index.esm.js";
import In from "../combo-list/index.esm.js";
import Kr from "../combo-tree/index.esm.js";
import Jr from "../component/index.esm.js";
import Zr from "../color-picker/index.esm.js";
import ei from "../content-container/index.esm.js";
import ti from "../date-picker/index.esm.js";
import ni from "../../designer/data-grid/index.esm.js";
import ai from "../dropdown/index.esm.js";
import oi from "../events-editor/index.esm.js";
import ri from "../field-selector/index.esm.js";
import ii from "../binding-selector/index.esm.js";
import si from "../image-cropper/index.esm.js";
import li from "../../designer/input-group/index.esm.js";
import ui from "../layout/index.esm.js";
import ci from "../list-nav/index.esm.js";
import di from "../lookup/index.esm.js";
import fi from "../mapping-editor/index.esm.js";
import pi from "../nav/index.esm.js";
import mi from "../number-range/index.esm.js";
import hi from "../number-spinner/index.esm.js";
import yi from "../page-header/index.esm.js";
import gi from "../page-footer/index.esm.js";
import vi from "../progress/index.esm.js";
import bi from "../query-solution/index.esm.js";
import wi from "../../designer/radio-group/index.esm.js";
import Ci from "../rate/index.esm.js";
import xi from "../response-toolbar/index.esm.js";
import ki from "../response-layout/index.esm.js";
import Si from "../response-layout-editor/index.esm.js";
import Fi from "../section/index.esm.js";
import Ti from "../smoke-detector/index.esm.js";
import Mi from "../splitter/index.esm.js";
import _i from "../step/index.esm.js";
import Ei from "../switch/index.esm.js";
import Oi from "../text/index.esm.js";
import Di from "../time-picker/index.esm.js";
import Ma from "../tree-view/index.esm.js";
import Ii from "../uploader/index.esm.js";
import Pi from "../verify-detail/index.esm.js";
import Bi from "../video/index.esm.js";
import Ni from "../textarea/index.esm.js";
import Vi from "../schema-selector/index.esm.js";
import Ri from "../tree-grid/index.esm.js";
import ji from "../event-parameter/index.esm.js";
import Li from "../filter-condition-editor/index.esm.js";
import $i from "../fieldset/index.esm.js";
import Wi from "../sort-condition-editor/index.esm.js";
import Hi from "../menu-lookup/index.esm.js";
import Ai from "../drawer/index.esm.js";
import zi from "../json-editor/index.esm.js";
import qi from "../property-editor/index.esm.js";
import Gi from "../expression-editor/index.esm.js";
import Yi from "../code-editor/index.esm.js";
import Ui from "../html-template/index.esm.js";
import "../external-container/index.esm.js";
import "../notify/index.esm.js";
import Xi from "../popover/index.esm.js";
const Qi = {
modelValue: {
type: String,
default: ""
},
singleExpand: {
type: Boolean,
default: !0
},
entities: {
type: Array,
default: []
},
variables: {
type: Array,
default: []
},
disabledFunctions: {
type: Object,
default: null
},
esprimaPath: {
type: String,
default: "assets/esprima-config.json"
},
showMessage: {
type: Boolean,
default: !1
},
validateMessage: {
type: String,
default: ""
},
messageType: {
type: String,
default: "info"
},
showMessageType: {
type: Boolean,
default: !1
}
}, _a = {}, Ea = {};
function $n(t) {
const { properties: n, title: e, ignore: a } = t, o = a && Array.isArray(a), r = Object.keys(n).reduce((i, s) => ((!o || !a.find((l) => l === s)) && (i[s] = n[s].type === "object" && n[s].properties ? $n(n[s]) : ft(n[s].default)), i), {});
if (e && (!o || !a.find((i) => i === "id"))) {
const i = e.toLowerCase().replace(/-/g, "_");
r.id = `${i}_${Math.random().toString().slice(2, 6)}`;
}
return r;
}
function Ki(t) {
const { properties: n, title: e, required: a } = t;
if (a && Array.isArray(a)) {
const o = a.reduce((r, i) => (r[i] = n[i].type === "object" && n[i].properties ? $n(n[i]) : ft(n[i].default), r), {});
if (e && a.find((r) => r === "id")) {
const r = e.toLowerCase().replace(/-/g, "_");
o.id = `${r}_${Math.random().toString().slice(2, 6)}`;
}
return o;
}
return {
type: e
};
}
function Oa(t, n = {}, e) {
const a = _a[t];
if (a) {
let o = Ki(a);
const r = Ea[t];
return o = r ? r({ getSchemaByType: Oa }, o, n, e) : o, o;
}
return null;
}
function Ji(t, n) {
const e = $n(n);
return Object.keys(e).reduce((a, o) => (Object.prototype.hasOwnProperty.call(t, o) && (a[o] && Jn(a[o]) && Jn(t[o] || !t[o]) ? Object.assign(a[o], t[o] || {}) : a[o] = t[o]), a), e), e;
}
function Da(t, n) {
return Object.keys(t).filter((a) => t[a] != null).reduce((a, o) => {
if (n.has(o)) {
const r = n.get(o);
if (typeof r == "string")
a[r] = t[o];
else {
const i = r(o, t[o], t);
Object.assign(a, i);
}
} else
a[o] = t[o];
return a;
}, {});
}
function Zi(t, n, e = /* @__PURE__ */ new Map()) {
const a = Ji(t, n);
return Da(a, e);
}
function es(t = {}) {
function n(c, d, u, f) {
if (typeof u == "number")
return f[c].length === u;
if (typeof u == "object") {
const y = Object.keys(u)[0], h = u[y];
if (y === "not")
return Number(f[c].length) !== Number(h);
if (y === "moreThan")
return Number(f[c].length) >= Number(h);
if (y === "lessThan")
return Number(f[c].length) <= Number(h);
}
return !1;
}
function e(c, d, u, f) {
return f[c] && f[c].propertyValue && String(f[c].propertyValue.value) === String(u);
}
const a = /* @__PURE__ */ new Map([
["length", n],
["getProperty", e]
]);
Object.keys(t).reduce((c, d) => (c.set(d, t[d]), c), a);
function o(c, d) {
const u = c;
return typeof d == "number" ? [{ target: u, operator: "length", param: null, value: Number(d) }] : typeof d == "boolean" ? [{ target: u, operator: "getProperty", param: c, value: !!d }] : typeof d == "object" ? Object.keys(d).map((f) => {
if (f === "length")
return { target: u, operator: "length", param: null, value: d[f] };
const y = f, h = d[f];
return { target: u, operator: "getProperty", param: y, value: h };
}) : [];
}
function r(c) {
return Object.keys(c).reduce((u, f) => {
const y = o(f, c[f]);
return u.push(...y), u;
}, []);
}
function i(c, d) {
if (a.has(c.operator)) {
const u = a.get(c.operator);
return u && u(c.target, c.param, c.value, d) || !1;
}
return !1;
}
function s(c, d) {
return r(c).reduce((y, h) => y && i(h, d), !0);
}
function l(c, d) {
const u = Object.keys(c), f = u.includes("allOf"), y = u.includes("anyOf"), h = f || y, p = (h ? c[h ? f ? "allOf" : "anyOf" : "allOf"] : [c]).map((b) => s(b, d));
return f ? !p.includes(!1) : p.includes(!0);
}
return { parseValueSchema: l };
}
const ie = {
button: { type: "button", name: "按钮" },
"response-toolbar": { type: "response-toolbar", name: "工具栏" },
"response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
"content-container": { type: "content-container", name: "容器" },
"input-group": { type: "input-group", name: "文本" },
textarea: { type: "textarea", name: "多行文本" },
lookup: { type: "lookup", name: "帮助" },
"number-spinner": { type: "number-spinner", name: "数值" },
"date-picker": { type: "date-picker", name: "日期" },
switch: { type: "switch", name: "开关" },
"radio-group": { type: "radio-group", name: "单选组" },
"check-box": { type: "check-box", name: "复选框" },
"check-group": { type: "check-group", name: "复选框组" },
"combo-list": { type: "combo-list", name: "下拉列表" },
"response-form": { type: "response-form", name: "卡片面板" },
"response-layout": { type: "response-layout", name: "布局容器", icon: "response-layout-3" },
"response-layout-item": { type: "response-layout-item", name: "布局", icon: "response-layout-1" },
"tree-grid": { type: "tree-grid", name: "树表格" },
"tree-grid-column": { type: "tree-grid-column", name: "树表格列" },
"data-grid": { type: "data-grid", name: "表格" },
"data-grid-column": { type: "data-grid-column", name: "表格列" },
module: { type: "Module", name: "模块" },
component: { type: "component", name: "组件" },
tabs: { type: "tabs", name: "标签页" },
"tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
"tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮" },
"html-template": { type: "html-template", name: "模板容器" },
"time-picker": { type: "time-picker", name: "时间选择" },
section: { type: "section", name: "分组面板" },
"section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" },
"section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" },
splitter: { type: "splitter", name: "分栏面板" },
"splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" },
"component-ref": { type: "component-ref", name: "组件引用节点" },
uploader: { type: "uploader", name: "附件上传" },
"page-header": { type: "page-header", name: "页头" },
"page-footer": { type: "page-footer", name: "页脚" },
"tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏" },
fieldset: { type: "fieldset", name: "分组" },
"query-solution": { type: "query-solution", name: "筛选方案" },
drawer: { type: "drawer", name: "抽屉" },
"external-container": { type: "external-container", name: "外部容器", icon: "content-container" },
"list-nav": { type: "list-nav", name: "列表导航" },
"filter-bar": { type: "filter-bar", name: "筛选条" }
}, ts = {}, ns = {};
es();
function bt(t, n, e = /* @__PURE__ */ new Map(), a = (i, s, l, c) => s, o = {}, r = (i) => i) {
return _a[n.title] = n, Ea[n.title] = a, ts[n.title] = o, ns[n.title] = r, (i = {}, s = !0) => {
if (!s)
return Da(i, e);
const l = Zi(i, n, e), c = Object.keys(t).reduce((d, u) => (d[u] = t[u].default, d), {});
return Object.assign(c, l);
};
}
function rn(t, n) {
return { customClass: n.class, customStyle: n.style };
}
function as() {
function t(n, e) {
const { dataSource: a } = n || {};
return a === void 0 ? {} : {};
}
return {
resolve: t
};
}
function os() {
function t(n, e) {
return n.selectItemById(e);
}
return {
selectItemById: t
};
}
function rs() {
function t(n, e) {
const { columns: a } = e;
return n.updateColumns(a);
}
return {
updateColumns: t
};
}
const Ia = /* @__PURE__ */ new Map([
["appearance", rn]
]);
function Pa(t, n, e) {
return n;
}
const is = "https://json-schema.org/draft/2020-12/schema", ss = "https://farris-design.gitee.io/layout.schema.json", ls = "layout", us = "A Farris Container Component", cs = "object", ds = {
id: {
description: "The unique identifier for layout component",
type: "string"
},
type: {
description: "The type string of layout component",
type: "string",
default: "layout"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
contents: {
description: "",
type: "array",
default: []
},
collapsable: {
description: "",
type: "boolean",
default: !1
},
resizable: {
description: "",
type: "boolean",
default: !0
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, fs = [
"id",
"type",
"contents"
], ps = {
$schema: is,
$id: ss,
title: ls,
description: us,
type: cs,
properties: ds,
required: fs
}, ms = "layout", hs = "A Farris Component", ys = "object", gs = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "类型",
title: "类型",
type: "string",
readonly: !0
}
}
},
behavior: {
description: "Basic Infomation",
title: "行为",
properties: {
collapsable: {
description: "",
title: "可收折",
type: "boolean"
},
resizable: {
description: "",
title: "可调整尺寸",
type: "boolean"
}
}
}
}, vs = {
title: ms,
description: hs,
type: ys,
categories: gs
}, Wn = {
customStyle: { type: String, defaut: "" },
customClass: { type: String, defaut: "" }
}, Ba = bt(Wn, ps, Ia, Pa, vs);
function Na(t) {
const n = k(-1), e = k(-1), a = k(0), o = k(0), r = k(!1), i = k(!1), s = N(() => ({
display: r.value ? "block" : "none",
left: `${a.value}px`,
cursor: "e-resize"
})), l = N(() => ({
display: i.value ? "block" : "none",
top: `${o.value}px`,
cursor: "n-resize"
})), c = N(() => {
const m = {
display: i.value || r.value ? "block" : "none"
};
return o.value > 0 && (m.cursor = "n-resize"), m;
});
function d(m, p, w, b) {
const S = t.value;
if (S) {
const { left: C, right: x, width: g } = S.getBoundingClientRect();
let F = m.clientX - C;
b === "right" && (F = x - m.clientX), F > p && (F = p), F < w && (F = w), b === "right" && (F = g - F), a.value = F;
}
}
function u(m, p, w, b) {
const S = t.value;
if (S) {
const { top: C, bottom: x, height: g } = S.getBoundingClientRect();
let F = m.clientY - C;
b === "bottom" && (F = x - m.clientY), F > p && (F = p), F < w && (F = w), b === "bottom" && (F = g - F), o.value = F;
}
}
function f() {
const m = t.value;
if (m) {
const { width: p, height: w } = m.getBoundingClientRect();
return { width: p, height: w };
}
return null;
}
function y() {
const m = t.value;
return m ? Array.from(m.querySelectorAll("[data-position]")).reduce((p, w) => {
const b = w.getAttribute("data-position");
return p = Object.assign(p, { [b]: w }), p;
}, {}) : null;
}
function h(m, p) {
const w = f(), b = y();
if (w && b) {
const S = b == null ? void 0 : b.right, C = b == null ? void 0 : b.left;
if (m === "left" && C)
return S ? w.width - S.clientWidth - p : w.width - p;
if (m === "right" && S)
return C ? w.width - C.clientWidth - p : w.width - p;
}
}
function T(m, p) {
const w = f(), b = y();
if (w && b) {
const S = b == null ? void 0 : b.bottom, C = b == null ? void 0 : b.top;
if (m === "top" && C)
return S ? w.height - S.clientHeight - p : w.height - p;
if (m === "bottom" && S)
return C ? w.height - C.clientHeight - p : w.height - p;
}
}
return {
horizontalResizeHandleStyle: s,
verticalResizeHandleStyle: l,
resizeOverlayStyle: c,
showHorizontalResizeHandle: r,
showVerticalResizeHandle: i,
horizontalResizeBarPosition: n,
verticalResizeBarPosition: e,
verticalResizeHandleOffset: o,
horizontalResizeHandleOffset: a,
draggingHorizontalResizeHandle: d,
draggingVerticalResizeHandle: u,
getPanelMaxHeight: T,
getPanelMaxWidth: h
};
}
const Pt = /* @__PURE__ */ Ie({
name: "FLayout",
props: Wn,
emits: [],
setup(t, n) {
const e = k(), a = Na(e), {
horizontalResizeHandleStyle: o,
verticalResizeHandleStyle: r,
resizeOverlayStyle: i
} = a;
Rn("layout", {
useResizeHandleComposition: a
});
const s = N(() => cn({
"f-layout": !0
}, t == null ? void 0 : t.customClass)), l = N(() => Xo({}, t == null ? void 0 : t.customStyle));
return () => E("div", {
class: s.value,
style: l.value,
ref: e
}, [n.slots.default && n.slots.default(), E("div", {
class: "f-layout-resize-overlay",
style: i.value
}, null), E("div", {
class: "f-layout-horizontal-resize-proxy",
style: o.value
}, null), E("div", {
class: "f-layout-vertical-resize-proxy",
style: r.value
}, null)]);
}
}), bs = "https://json-schema.org/draft/2020-12/schema", ws = "https://farris-design.gitee.io/layout-pane.schema.json", Cs = "layout-pane", xs = "A Farris Container Component", ks = "object", Ss = {
id: {
description: "The unique identifier for a layout pane",
type: "string"
},
type: {
description: "The type string of layout paney",
type: "string",
default: "layout-pane"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
collapsable: {
description: "",
type: "boolean",
default: !1
},
contents: {
description: "",
type: "array",
default: []
},
height: {
description: "",
type: "number"
},
position: {
description: "",
type: "string",
default: "left",
enum: [
"left",
"center",
"right",
"top",
"bottom"
]
},
resizeable: {
description: "",
type: "boolean",
default: !0
},
width: {
description: "",
type: "number"
},
visible: {
description: "",
type: "number",
default: !0
}
}, Fs = [
"id",
"type",
"contents"
], Ts = {
$schema: bs,
$id: ws,
title: Cs,
description: xs,
type: ks,
properties: Ss,
required: Fs
}, Ms = "layout-pane", _s = "A Farris Container Component", Es = "object", Os = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "enum"
},
width: {
description: "",
type: "number",
title: "宽度"
},
height: {
description: "",
type: "number",
title: "高度"
}
}
},
appearance: {
title: "样式",
description: "Appearance",
properties: {
class: {
title: "class样式",
type: "string",
description: ""
},
style: {
title: "style",
type: "string",
description: ""
}
}
},
behavior: {
description: "",
title: "行为",
properties: {
collapsable: {
description: "",
type: "boolean",
title: "允许收折"
},
position: {
description: "",
type: "enum",
title: "位置",
editor: {
type: "combo-list",
data: [
{
id: "left",
name: "左侧"
},
{
id: "center",
name: "居中"
},
{
id: "right",
name: "右侧"
},
{
id: "top",
name: "顶部"
},
{
id: "bottom",
name: "底部"
}
]
}
},
resizeable: {
description: "",
type: "boolean",
title: "允许调整尺寸"
},
visible: {
description: "运行时组件是否可见",
type: "boolean",
title: "是否可见"
}
}
}
}, Ds = {
title: Ms,
description: _s,
type: Es,
categories: Os
}, Hn = {
customClass: { type: String, defaut: "" },
customStyle: { type: String, defaut: "" },
/** 记录原始定义宽度 */
width: { type: Number, default: -1 },
/** 记录原始定义高度 */
height: { type: Number, default: -1 },
/** 面板位置 */
position: { type: String, default: "left" },
/** 是否显示 */
visible: { type: Boolean, default: !0 },
/** True to allow the pane can be resized. */
resizable: { type: Boolean, default: !0 },
/** True to allow the pane can be collapsed. */
collapsable: { type: Boolean, default: !1 },
/** 面板最小宽度 */
minWidth: { type: Number, default: 100 },
/** 面板最小高度 */
minHeight: { type: Number, default: 100 }
}, Va = bt(Hn, Ts, Ia, Pa, Ds);
function Ra(t, n, e, a, o) {
const {
horizontalResizeBarPosition: r,
horizontalResizeHandleOffset: i,
showHorizontalResizeHandle: s,
showVerticalResizeHandle: l,
verticalResizeBarPosition: c,
verticalResizeHandleOffset: d,
draggingHorizontalResizeHandle: u,
draggingVerticalResizeHandle: f,
getPanelMaxHeight: y,
getPanelMaxWidth: h
} = o;
let T = "", m, p, w;
function b(x) {
if ((T === "left" || T === "right") && p) {
const { left: g } = p.getBoundingClientRect(), { width: F } = m.getBoundingClientRect(), _ = x.clientX - g;
let M = T === "left" ? (F || 0) + (_ - r.value) : (F || 0) - (_ - r.value);
M = e.value > 0 ? Math.max(e.value, M) : M;
const v = h(T, e.value);
v != null && (M = v > M ? M : v), t.value = M;
}
if ((T === "top" || T === "bottom") && p) {
const { top: g } = p.getBoundingClientRect(), { height: F } = m.getBoundingClientRect(), _ = x.clientY - g;
let M = T === "top" ? (F || 0) + (_ - c.value) : (F || 0) - (_ - c.value);
M = a.value > 0 ? Math.max(a.value, M) : M;
const v = y(T, a.value);
v != null && (M = v > M ? M : v), n.value = M;
}
i.value = 0, d.value = 0, r.value = -1, c.value = -1, s.value = !1, l.value = !1, document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", b), document.body.style.userSelect = "", T = "", m = null, p = null;
}
function S(x, g, F) {
if (T = g, m = F, s.value = !0, p = x.composedPath().find((M) => (M.className || "").split(" ")[0] === "f-layout"), p) {
const { left: M } = p.getBoundingClientRect(), v = x.clientX - M;
i.value = v, r.value = v;
const I = h(T, e.value) || 0;
w = (D) => u(D, I, e.value, T), document.addEventListener("mousemove", w), document.addEventListener("mouseup", b), document.body.style.userSelect = "none";
}
}
function C(x, g, F) {
if (T = g, m = F, l.value = !0, p = x.composedPath().find((M) => (M.className || "").split(" ")[0] === "f-layout"), p) {
const { top: M } = p.getBoundingClientRect();
d.value = x.clientY - M, c.value = x.clientY - M;
const v = y(T, a.value) || 0;
w = (I) => f(I, v, a.value, T), document.addEventListener("mousemove", w), document.addEventListener("mouseup", b), document.body.style.userSelect = "none";
}
}
return { onClickHorizontalResizeBar: S, onClickVerticalResizeBar: C };
}
const Ft = /* @__PURE__ */ Ie({
name: "FLayoutPane",
props: Hn,
emits: [],
setup(t, n) {
const e = k(t.minHeight <= 0 ? 100 : t.minHeight), a = k(t.minWidth <= 0 ? 100 : t.minWidth), o = k(t.width <= 0 ? 100 : t.width), r = k(t.height <= 0 ? 100 : t.height), i = k(Math.max(e.value, r.value)), s = k(Math.max(a.value, o.value)), l = k(), c = k(t.position), d = k(t.resizable);
ke(() => t.resizable, (C) => {
d.value = C;
});
const u = Ze("layout"), {
useResizeHandleComposition: f
} = u, y = Ra(s, i, a, e, f), {
onClickHorizontalResizeBar: h,
onClickVerticalResizeBar: T
} = y, m = N(() => ({
"f-layout-resize-bar": !0,
"f-layout-resize-bar-e": c.value === "left",
"f-layout-resize-bar-n": c.value === "bottom",
"f-layout-resize-bar-s": c.value === "top",
"f-layout-resize-bar-w": c.value === "right"
})), p = N(() => c.value !== "center" && d.value);
function w(C, x) {
(x === "left" || x === "right") && h(C, x, l.value), (x === "top" || x === "bottom") && T(C, x, l.value);
}
const b = N(() => {
const C = {
"f-layout-pane": !0,
"f-page-content-nav": c.value === "left" || c.value === "right",
"f-page-content-main": c.value === "center"
};
return t.customClass && String(t.customClass).split(" ").reduce((x, g) => (x[g] = !0, x), C), C;
}), S = N(() => {
const C = {};
return (s.value && c.value === "left" || c.value === "right") && (C.width = `${s.value}px`), (i.value && c.value === "bottom" || c.value === "top") && (C.height = `${i.value}px`), t.visible || (C.display = "none"), C;
});
return () => E("div", {
ref: l,
class: b.value,
style: S.value,
"data-position": c.value
}, [n.slots.default && n.slots.default(), p.value && E("span", {
class: m.value,
onMousedown: (C) => w(C, c.value)
}, null)]);
}
});
function Is(t, n) {
function e() {
return !1;
}
return { canAccepts: e };
}
function An(t, n, e) {
var g;
const a = e && e.getStyles && e.getStyles() || "", o = e && e.getDesignerClass && e.getDesignerClass() || "", r = k();
function i() {
return (n == null ? void 0 : n.schema.componentType) === "frame" ? !1 : e && e.checkCanMoveComponent ? e.checkCanMoveComponent() : !0;
}
function s() {
return !1;
}
function l() {
return (n == null ? void 0 : n.schema.componentType) === "frame" ? !1 : e && e.checkCanDeleteComponent ? e.checkCanDeleteComponent() : !0;
}
function c() {
return (n == null ? void 0 : n.schema.componentType) === "frame" ? !0 : e && e.hideNestedPaddingInDesginerView ? e.hideNestedPaddingInDesginerView() : !1;
}
function d(F) {
if (!F || !F.value)
return null;
if (F.value.schema && F.value.schema.type === "component")
return F.value;
const _ = k(F == null ? void 0 : F.value.parent), M = d(_);
return M || null;
}
function u(F = n) {
var I;
if (e != null && e.getDraggableDesignItemElement)
return e.getDraggableDesignItemElement(F);
const { componentInstance: _, designerItemElementRef: M } = F;
if (!_ || !_.value)
return null;
const { getCustomButtons: v } = _.value;
return _.value.canMove || v && ((I = v()) != null && I.length) ? M : u(F.parent);
}
function f(F) {
return !!e && e.canAccepts(F);
}
function y() {
return (n == null ? void 0 : n.schema.label) || (n == null ? void 0 : n.schema.title) || (n == null ? void 0 : n.schema.name);
}
function h() {
}
function T(F, _) {
var M;
!F || !_ || (e != null && e.onAcceptMovedChildElement && e.onAcceptMovedChildElement(F, _), (M = n == null ? void 0 : n.setupContext) == null || M.emit("dragEnd"));
}
function m(F, _) {
const { componentType: M } = F;
let v = Oa(M, F, _);
e && e.onResolveNewComponentSchema && (v = e.onResolveNewComponentSchema(F, v));
const I = M.toLowerCase().replace(/-/g, "_");
return v && !v.id && v.type === M && (v.id = `${I}_${Math.random().toString().slice(2, 6)}`), v;
}
function p(F) {
F && e != null && e.onChildElementMovedOut && e.onChildElementMovedOut(F);
}
function w(...F) {
if (e && e.getPropsConfig)
return e.getPropsConfig(...F);
}
function b(F) {
if (!F)
return;
const _ = n == null ? void 0 : n.schema, { formSchemaUtils: M } = F;
if (_ && M.getExpressions().length) {
const v = M.getExpressions().findIndex((I) => I.target === _.id);
v > -1 && M.getExpressions().splice(v, 1);
}
}
function S(F) {
e && e.onRemoveComponent && e.onRemoveComponent(), b(F), n != null && n.schema.contents && n.schema.contents.map((_) => {
let M = _.id;
_.type === "component-ref" && (M = _.component);
const v = t.value.querySelectorAll(`#${M}-design-item`);
v != null && v.length && Array.from(v).map((I) => {
var D;
(D = I == null ? void 0 : I.componentInstance) != null && D.value.onRemoveComponent && I.componentInstance.value.onRemoveComponent(F);
});
});
}
function C() {
if (e && e.getCustomButtons)
return e.getCustomButtons();
}
function x(F) {
if (e && e.onPropertyChanged)
return e.onPropertyChanged(F);
}
return r.value = {
canMove: i(),
canSelectParent: s(),
canDelete: l(),
canNested: !c(),
contents: n == null ? void 0 : n.schema.contents,
elementRef: t,
parent: (g = n == null ? void 0 : n.parent) == null ? void 0 : g.componentInstance,
schema: n == null ? void 0 : n.schema,
styles: a,
designerClass: o,
canAccepts: f,
getBelongedComponentInstance: d,
getDraggableDesignItemElement: u,
getDraggingDisplayText: y,
getPropConfig: w,
getDragScopeElement: h,
onAcceptMovedChildElement: T,
onChildElementMovedOut: p,
addNewChildComponentSchema: m,
triggerBelongedComponentToMoveWhenMoved: !!e && e.triggerBelongedComponentToMoveWhenMoved || k(!1),
triggerBelongedComponentToDeleteWhenDeleted: !!e && e.triggerBelongedComponentToDeleteWhenDeleted || k(!1),
onRemoveComponent: S,
getCustomButtons: C,
onPropertyChanged: x
}, r;
}
const Ps = /* @__PURE__ */ Ie({
name: "FLayoutDesign",
props: Wn,
emits: [],
setup(t, n) {
var d;
const e = k(), a = Ze("design-item-context"), o = Is(a.schema, (d = a.parent) == null ? void 0 : d.schema), r = An(e, a, o);
r.value.canNested = !1;
const i = Na(e), {
horizontalResizeHandleStyle: s,
verticalResizeHandleStyle: l,
resizeOverlayStyle: c
} = i;
return Rn("layout", {
useResizeHandleComposition: i
}), Ke(() => {
e.value.componentInstance = r;
}), n.expose(r.value), () => E("div", {
class: "f-layout f-page-content",
ref: e
}, [n.slots.default && n.slots.default(), E("div", {
class: "f-layout-resize-overlay",
style: c.value
}, null), E("div", {
class: "f-layout-horizontal-resize-proxy",
style: s.value
}, null), E("div", {
class: "f-layout-vertical-resize-proxy",
style: l.value
}, null)]);
}
});
function Bs() {
function t(n, e) {
var i;
if (!n)
return !1;
const a = ((i = n.targetContainer) == null ? void 0 : i.componentInstance) && n.targetContainer.componentInstance.value;
if (!a)
return !1;
const o = a.schema.type, r = e == null ? void 0 : e.formSchemaUtils.getComponentById(a.belongedComponentId);
return !((n.componentCategory === "input" || n.componentType === "form-group") && ![ie["response-layout-item"].type, ie["response-form"].type, ie.fieldset.type].includes(o) || (n.componentType === ie.tabs.type || n.componentType === ie.section.type) && ((r == null ? void 0 : r.componentType) !== "frame" || ![ie["content-container"].type, ie["splitter-pane"].type, ie["response-layout-item"].type].includes(o)) || n.componentType === ie["query-solution"].type || n.componentType === ie.fieldset.type && o !== ie["response-form"].type);
}
return {
basalDragulaRuleForContainer: t
};
}
function Ns(t, n) {
const e = t.schema;
function a(r) {
return !!Bs().basalDragulaRuleForContainer(r);
}
function o() {
const r = ["f-layout-pane"];
return (e.position === "left" || e.position === "right") && r.push("f-page-content-nav"), e.position === "center" && r.push("f-page-content-main"), r.join(" ");
}
return { canAccepts: a, getDesignerClass: o };
}
const Vs = /* @__PURE__ */ Ie({
name: "FLayoutPaneDesign",
props: Hn,
emits: [],
setup(t, n) {
const e = k(), a = k();
Ze("designer-host-service");
const o = Ze("design-item-context"), r = Ns(o), i = An(a, o, r);
i.value.canNested = !1, i.value.canMove = !1, i.value.canDelete = !1, Ke(() => {
a.value.componentInstance = i;
}), n.expose(i.value);
const s = k(Math.max(t.minHeight, t.height)), l = k(Math.max(t.minWidth, t.width)), c = k(t.minHeight), d = k(t.minWidth), u = k(t.position), f = Ze("layout"), {
useResizeHandleComposition: y
} = f, h = Ra(l, s, d, c, y), {
onClickHorizontalResizeBar: T,
onClickVerticalResizeBar: m
} = h, p = N(() => ({
"f-layout-resize-bar": !0,
"f-layout-resize-bar-e": u.value === "left",
"f-layout-resize-bar-n": u.value === "bottom",
"f-layout-resize-bar-s": u.value === "top",
"f-layout-resize-bar-w": u.value === "right"
}));
function w(C, x) {
(x === "left" || x === "right") && T(C, x, e.value), (x === "top" || x === "bottom") && m(C, x, e.value);
}
const b = N(() => {
const C = {
"f-layout-pane": !0,
"f-page-content-nav": u.value === "left" || u.value === "right",
"f-page-content-main": u.value === "center"
};
return t.customClass && String(t.customClass).split(" ").reduce((x, g) => (x[g] = !0, x), C), C;
}), S = N(() => {
const C = {
flex: "1"
};
return (l.value && u.value === "left" || u.value === "right") && (C.width = `${l.value}px`), (s.value && u.value === "bottom" || u.value === "top") && (C.height = `${s.value}px`), C;
});
return () => E("div", {
ref: e,
class: b.value,
style: S.value
}, [E("div", {
ref: a,
class: "drag-container",
"data-dragref": `${o.schema.id}-container`
}, [n.slots.default && n.slots.default()]), E("span", {
class: p.value,
onMousedown: (C) => w(C, u.value)
}, null)]);
}
});
Pt.install = (t) => {
t.component(Pt.name, Pt), t.component(Ft.name, Ft);
};
Pt.register = (t, n, e, a) => {
t.layout = Pt, n.layout = Ba, t["layout-pane"] = Ft, n["layout-pane"] = Va;
};
Pt.registerDesigner = (t, n, e) => {
t.layout = Ps, n.layout = Ba, t["layout-pane"] = Vs, n["layout-pane"] = Va;
};
const Rs = /* @__PURE__ */ new Map([
["appearance", rn]
]), js = "https://json-schema.org/draft/2020-12/schema", Ls = "https://farris-design.gitee.io/combo-list.schema.json", $s = "combo-list", Ws = "A Farris Input Component", Hs = "object", As = {
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"
},
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: "sting",
default: ""
},
maxHeight: {
description: "",
type: "number",
default: 350
},
minPanelWidth: {
description: "",
type: "number",
default: 160
},
popupOnClick: {
description: "",
type: "boolean",
default: !0
},
separator: {
description: "",
type: "string",
default: ","
}
}, zs = [
"type"
], qs = [
"id",
"appearance",
"binding",
"visible"
], Gs = {
$schema: js,
$id: Ls,
title: $s,
description: Ws,
type: Hs,
properties: As,
required: zs,
ignore: qs
};
function Ys(t, n, e) {
return n;
}
const zn = {
/**
* 组件标识
*/
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-60-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 },
searchOption: {
type: [Boolean, Function],
default: !1
},
// 搜索启用高亮
enableHighlightSearch: { type: Boolean, default: !0 },
minPanelWidth: { type: Number, default: 160 },
popupOnClick: { type: Boolean, default: !0 }
}, Us = Object.assign({}, zn, {
readonly: {}
}), ja = bt(zn, Gs, Rs, Ys), Xs = {
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 }
}, Qs = /* @__PURE__ */ Ie({
name: "FComboListContainer",
props: Xs,
emits: ["selectionChange"],
setup(t, n) {
const e = k(), a = k(t.dataSource), o = k([]), r = k(t.separator), i = k(t.width), s = k(t.maxHeight), l = k(String(t.selectedValues).split(r.value)), c = N(() => t.multiSelect), d = N(() => ({
enableSelectRow: !0,
multiSelect: t.multiSelect,
multiSelectMode: "OnCheckAndClick",
showCheckbox: c.value,
showSelectAll: !1,
showSelection: !0
}));
ke(t.dataSource, () => {
a.value = t.dataSource;
}), N(() => t.enableSearch ? "SearchBar" : "ContentHeader");
const u = N(() => {
const m = {};
return i.value !== void 0 && (m.width = `${i.value}px`), s.value !== void 0 && s.value > 0 && (m.maxHeight = `${s.value}px`), m;
});
function f(m) {
e.value.search(m);
}
function y(m) {
o.value = m.map((p) => Object.assign({}, p)), l.value = m.map((p) => p[t.idField]), n.emit("selectionChange", o.value);
}
function h(m) {
if (t.enableHighlightSearch)
return;
let p = [];
const {
searchOption: w
} = t;
typeof w == "function" ? p = a.value.filter((b) => w(m, b)) : p = a.value.filter((b) => b[t.valueField].indexOf(m) > -1 || b[t.textField].indexOf(m) > -1), e.value.updateDataSource(p);
}
ke([() => t.selectedValues], ([m]) => {
t.multiSelect ? l.value = m.split(r.value) : l.value = [m];
});
function T(m) {
e.value.activeRowById(m);
}
return Ke(() => {
var m, p;
if (!t.multiSelect) {
const w = (m = l.value) == null ? void 0 : m[0];
let b = w;
if (!lt(w)) {
const S = typeof w, C = typeof ((p = a.value[0]) == null ? void 0 : p[t.valueField || t.idField]);
C === "number" && S !== C && (b = Number(w)), C === "boolean" && S !== C && (b = w === "true" ? !0 : w === "false" ? !1 : w), T(b);
}
}
}), n.expose({
search: f,
activeRowById: T
}), () => E("div", {
class: "f-combo-list-container",
style: u.value
}, [E(xa, {
ref: e,
size: "small",
itemClass: "f-combo-list-item",
itemContentClass: "text-truncate",
header: "ContentHeader",
headerClass: "f-combo-list-search-box",
data: a.value,
idField: t.idField,
textField: t.textField,
titleField: t.titleField,
multiSelect: t.multiSelect,
selection: d.value,
enableHighlightSearch: t.enableHighlightSearch,
selectionValues: l.value,
onSelectionChange: y,
onAfterSearch: h
}, null)]);
}
});
function Ks(t) {
const n = k(""), e = k(t.modelValue), a = k(t.data || []), o = k(t.editable);
function r(u) {
const f = t.multiSelect ? String(u).split(t.separator) : [String(u)], y = f.map((m) => [m, !0]), h = new Map(y);
return a.value.filter((m) => h.has(String(m[t.valueField]))).sort((m, p) => {
const w = f.indexOf(m[t.valueField]), b = f.indexOf(p[t.valueField]);
return w - b;
});
}
function i(u) {
const f = r(u).map((y) => y[t.textField]).join(t.separator);
n.value = o.value ? f || u : f;
}
function s(u) {
if (t.multiSelect) {
const f = u.split(t.separator).map((h) => [h, !0]), y = new Map(f);
return a.value.filter((h) => y.has(h[t.textField]));
}
return a.value.filter((f) => "" + f[t.textField] === u);
}
function l(u) {
const f = {};
return f[t.idField] = u, f[t.textField] = u, [f];
}
function c(u) {
let f = s(u);
const y = f && f.length > 0;
return o.value && !y && (f = l(u)), f;
}
function d() {
const { url: u, method: f = "GET", headers: y = {}, body: h = null } = t.remote, T = f.toLowerCase() === "get" ? { method: f, headers: y } : { method: f, headers: y, body: h };
let m = !1;
fetch(u, T).then((p) => {
var b, S;
if (p.status === 200)
return m = !!((S = (b = p.headers) == null ? void 0 : b.get("content-type")) != null && S.includes("application/json")), m ? p.text() : p.json();
throw new Error(p.statusText);
}).then((p) => {
a.value = m ? JSON.parse(p) : p;
}).catch((p) => {
console.error(p);
});
}
return t.remote && d(), ke(() => t.data, () => {
a.value = t.data;
}), ke([a], ([u]) => {
if (t.modelValue != null) {
const f = u.find((y) => y[t.valueField] === t.modelValue);
f && (n.value = f[t.textField]);
}
}), ke(() => t.modelValue, (u) => {
e.value = u, i(u);
}), i(t.modelValue), { dataSource: a, displayText: n, editable: o, modelValue: e, getItemsByDisplayText: s, getItemsByValue: r, getSelectedItemsByDisplayText: c };
}
const nn = /* @__PURE__ */ Ie({
name: "FComboList",
props: zn,
emits: ["clear", "update:modelValue", "change", "input"],
setup(t, n) {
const e = k(), a = k(), o = k(t.disabled || t.readonly), r = k(t.enableClear), i = k(t.enableSearch), s = k(t.readonly), {
dataSource: l,
displayText: c,
editable: d,
modelValue: u,
getSelectedItemsByDisplayText: f,
getItemsByDisplayText: y
} = Ks(t), h = N(() => t.multiSelect), T = N(() => a.value ? a.value.elementRef.getBoundingClientRect().width : 0);
function m() {
!h.value && a.value && a.value.hidePopup();
}
function p(M) {
c.value = M.map((I) => I[t.textField]).join(t.separator);
let v = "";
M.length === 1 ? v = M[0][t.valueField] : v = M.map((I) => I[t.valueField]).join(t.separator), u.value !== v && (u.value = v, n.emit("update:modelValue", u.value), n.emit("change", M, u.value));
}
function w() {
const M = f(c.value);
p(M);
}
function b() {
s.value || c.value;
}
function S(M) {
var v;
u.value = "", (v = e.value) == null || v.activeRowById(""), n.emit("update:modelValue", ""), n.emit("change", [], ""), n.emit("clear");
}
function C(M) {
var v, I;
t.enableSearch ? ((v = e.value) == null || v.search(M), (I = e.value) == null || I.activeRowById(M)) : (u.value = M, c.value = M, n.emit("update:modelValue", u.value), n.emit("change", [M], M));
}
function x(M) {
if (t.multiSelect) {
const v = y(M), D = v.map((O) => O[t.idField || t.valueField]).join(t.separator);
u.value !== D && (u.value = D, n.emit("update:modelValue", u.value), n.emit("change", v, u.value));
}
}
function g() {
return c.value;
}
function F(M) {
C(M), n.emit("input", M);
}
function _() {
a.value.hidePopup();
}
return n.expose({
getDisplayText: g,