@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2,026 lines • 91 kB
JavaScript
import { ref as p, computed as O, createVNode as d, Fragment as U, watch as j, withModifiers as De, withDirectives as qe, vModelText as ze, defineComponent as D, onMounted as ae, reactive as X, inject as le } from "vue";
import { resolveAppearance as oe, createPropsResolver as se, getPropsResolverGenerator as Ue } from "../dynamic-resolver/index.esm.js";
import { getCustomStyle as me, getCustomClass as K, useTouchMomentum as We, useTouch as Ye, useCommonUtils as Z, useBem as pe, useFarrisConfig as Xe, FormSchemaEntityFieldType$Type as Y, EVENT_PROPERTY_TAB_IDS as Ke, withInstall as Je } from "../common/index.esm.js";
import { useFilter as Qe, useIdentify as Ze, useHierarchy as et, useGroupData as tt, useDataView as nt, useSelection as lt, usePagination as it, useRow as at, useEdit as ot, useVisualDataBound as st, useVisualDataCell as ut, useVisualDataRow as rt, useVisualGroupRow as ct, useVisualSummaryRow as dt, useVisualData as ft, useSidebar as mt, useColumn as vt, useVirtualScroll as gt } from "../data-view/index.esm.js";
import { LocaleService as ue } from "../locale/index.esm.js";
import Ce, { FCheckbox as re } from "../checkbox/index.esm.js";
import ht from "../button-edit/index.esm.js";
import yt from "../list-view/index.esm.js";
import { isUndefined as bt } from "lodash-es";
import "bignumber.js";
import pt from "../../designer/button-edit/index.esm.js";
import { InputBaseProperty as Ct } from "../property-panel/index.esm.js";
import { useDesignerComponent as Se } from "../designer-canvas/index.esm.js";
const St = /* @__PURE__ */ new Map([
["appearance", oe]
]), wt = "https://json-schema.org/draft/2020-12/schema", Ft = "https://farris-design.gitee.io/order.schema.json", It = "order", xt = "A Farris Component", Tt = "object", Vt = {
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: ""
}
}, kt = [
"id",
"type"
], Mt = {
$schema: wt,
$id: Ft,
title: It,
description: xt,
type: Tt,
properties: Vt,
required: kt
};
function Bt(e, t, s) {
return t;
}
const At = "order", Pt = "A Farris Component", Ot = "object", Ht = {
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: "右对齐"
}
]
}
}
}
}
}, Rt = {
title: At,
description: Pt,
type: Ot,
categories: Ht
}, ce = {
/**
* 排序列数据源
* @default []
*/
dataSource: { type: Array, default: [] },
/**
* 当前排序数组
* @default []
*/
items: { type: Array, default: [] }
}, ve = se(ce, Mt, St, Bt, Rt), Lt = {
/**
* 列集合
*/
columns: {
type: Array,
default: [
{ field: "name", title: "", dataType: "string" }
]
},
customClass: { type: String, default: "" },
/**
* 列表数组数据
* @default []
*/
data: { type: Array, default: [] },
/**
* 是否可拖拽
* @default false
*/
draggable: { type: Boolean, default: !1 },
/**
* 是否支持多选
* @default false
*/
multiSelect: { type: Boolean, default: !1 },
// multiSelectMode: { type: String as PropType<MultiSelectMode>, default: 'OnCheck' },
/**
* 定义列表的唯一标识字段
* @default 'id'
*/
idField: { type: String, default: "id" },
/**
* 值字段
* @default 'id'
*/
valueField: { type: String, default: "id" },
/**
* 文本字段
* @default 'name'
*/
textField: { type: String, default: "name" },
/**
* 标题字段
* @default 'name'
*/
titleField: { type: String, default: "name" },
/**
* 视图
* @default 'ContentView'
*/
view: { type: String, default: "ContentView" },
/**
* 尺寸
* @default 'default'
*/
size: { type: String, default: "default" },
/**
* 占位符
* @default ''
*/
placeholder: { type: String, default: "" },
/**
* 列表头
* @default 'ContentHeader'
*/
header: { type: String, default: "ContentHeader" },
/**
* 列表头类
* @default ''
*/
headerClass: { type: String, default: "" },
/**
* 项目类
* @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: "" },
/**
* 已选列
* @default []
*/
selectionValues: { type: Array, default: [] },
/**
* 分组配置
*/
group: { type: Object },
/**
* 选择配置
*/
selection: {
type: Object,
default: {
enableSelectRow: !0,
multiSelect: !1,
multiSelectMode: "DependOnCheck",
showCheckbox: !1,
showSelectAll: !1,
showSelection: !0
}
},
/**
* 是否保持排序
* @default false
*/
keepOrder: { type: Boolean, default: !1 },
/**
* 不可操作字段
* @default 'disabled'
*/
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 Et(e, t) {
function s(f) {
const i = [];
let h = f.nextNode();
for (; h; )
i.push(h), h = f.nextNode();
return i;
}
function o(f, i) {
const h = document.createTreeWalker(f, NodeFilter.SHOW_TEXT);
return s(h).map((v) => ({ textNode: v, text: (v.textContent || "").toLocaleLowerCase() })).map(({ textNode: v, text: M }) => {
const x = [];
let C = 0;
for (; C < M.length; ) {
const A = M.indexOf(i, C);
if (A === -1)
break;
x.push(A), C = A + i.length;
}
return x.map((A) => {
const B = new Range();
return B.setStart(v, A), B.setEnd(v, A + i.length), B;
});
}).flat();
}
function c(f) {
if (!CSS.highlights || (CSS.highlights.clear(), !f || !t))
return;
const i = o(t.value, f.toLocaleLowerCase()), h = new Highlight(...i);
CSS.highlights.set("search-result", h);
}
return { search: c };
}
function ge(e, t, s, o, c, f, i, h, y, V) {
const b = p(e.size), v = p(e.textField), M = p(e.titleField), x = p(e.disableField), C = O(() => {
var w, P;
return ((w = e.selection) == null ? void 0 : w.multiSelect) && ((P = e.selection) == null ? void 0 : P.showCheckbox);
}), {
onMouseenterItem: A,
onMouseoverItem: B,
onMouseoutItem: n
} = f, {
getKey: l,
listViewItemClass: u,
listViewItemStyle: r,
onCheckItem: a,
onClickItem: m
} = i, I = O(() => {
const w = {
"text-overflow": "ellipsis",
overflow: "hidden",
"white-space": "nowrap"
};
return e.itemClass ? w : {
margin: b.value === "small" ? "0.25rem 0" : "8px 0",
...w
};
});
function k(w, P, H) {
return w.checked = h.findIndexInSelectedItems(w) > -1, d("li", {
class: u(w, P),
id: l(w, P),
key: l(w, P),
style: r(w, P),
onClick: (E) => m(w, P, E),
onMouseenter: (E) => A(E, w, P),
onMouseover: (E) => B(E, w, P),
onMouseout: (E) => n(E, w, P)
}, [C.value && d("div", {
class: "f-list-select",
onClick: (E) => E.stopPropagation()
}, [d(re, {
id: "list-" + l(w, P),
customClass: "listview-checkbox float-left",
disabled: w[x.value],
checked: w.checked,
"onUpdate:checked": (E) => w.checked = E,
onChange: (E) => {
a(w, P, !E.checked);
}
}, null)]), d("div", {
class: "f-list-content"
}, [d("div", {
class: e.itemContentClass,
style: I.value,
title: w.raw[M.value] || w.raw[v.value]
}, [w.raw[v.value]])])]);
}
return {
renderItem: k
};
}
function $t(e, t, s, o, c, f, i, h, y, V) {
const b = p(e.multiSelect), v = p(e.disableField), M = p(e.textField), {
onMouseenterItem: x,
onMouseoverItem: C,
onMouseoutItem: A
} = f, {
getKey: B,
listViewItemClass: n,
listViewItemStyle: l,
onCheckItem: u,
onClickItem: r,
updateSelectedItems: a
} = i;
function m(k, w, P) {
return e.contentTemplate ? d(U, null, [e.contentTemplate({
item: k.raw,
index: w,
selectedItem: P
})]) : t.slots.content ? d(U, null, [t.slots.content && t.slots.content({
item: k.raw,
index: w,
selectedItem: P
})]) : d("div", {
style: "margin: 10px 0;"
}, [k.raw[M.value || "name"]]);
}
function I(k, w, P) {
return d("li", {
class: n(k, w),
id: B(k, w),
key: B(k, w),
style: l(k, w),
onClick: (H) => r(k, w, H),
onMouseenter: (H) => x(H, k, w),
onMouseover: (H) => C(H, k, w),
onMouseout: (H) => A(H, k, w)
}, [b.value && d("div", {
class: "f-list-select",
onClick: (H) => H.stopPropagation()
}, [d(re, {
id: "list-" + B(k, w),
customClass: "listview-checkbox",
disabled: k[v.value],
checked: k.checked,
"onUpdate:checked": (H) => k.checked = H,
onChange: (H) => {
u(k, w, !H.checked), a();
}
}, null)]), d("div", {
class: "f-list-content"
}, [m(k, w, P)])]);
}
return {
renderItem: I
};
}
function jt(e, t, s, o, c, f, i, h, y, V) {
const b = p(e.multiSelect), v = p(e.disableField), M = p(e.textField), {
onMouseenterItem: x,
onMouseoverItem: C,
onMouseoutItem: A
} = f, {
getKey: B,
listViewItemClass: n,
onCheckItem: l,
onClickItem: u
} = i, {
dragstart: r,
dragenter: a,
dragover: m,
dragend: I
} = o, {
removeItem: k
} = y, w = O(() => ({
margin: b.value ? "10px 0" : "10px 0px 10px 14px"
}));
function P(T, S = "") {
const F = T.target;
F.title = F.scrollWidth > F.clientWidth ? S : "";
}
function H(T) {
return d("div", {
style: w.value,
onMouseenter: (S) => P(S, T.raw[M.value || "name"])
}, [T.raw[M.value || "name"]]);
}
function E() {
return t.slots.itemContent ? t.slots.itemContent : H;
}
const G = E();
function N(T, S, F) {
return d("li", {
class: n(T, S),
id: B(T, S),
key: B(T, S),
onClick: (g) => u(T, S, g),
onMouseenter: (g) => x(g, T, S),
onMouseover: (g) => C(g, T, S),
onMouseout: (g) => A(g, T, S),
draggable: "true",
onDragstart: (g) => r(g, T, S),
onDragenter: (g) => a(g, S),
onDragend: (g) => I(g, T),
onDragover: (g) => m(g)
}, [b.value && d("div", {
class: "f-list-select",
onClick: (g) => g.stopPropagation()
}, [d(re, {
id: "list-" + B(T, S),
customClass: "listview-checkbox",
disabled: T[v.value],
checked: T.checked,
"onUpdate:checked": (g) => T.checked = g,
onChange: (g) => l(T, S, !g.checked)
}, null)]), d("div", {
class: "f-list-content"
}, [G(T)]), e.allowDelete && d("div", {
class: "f-list-remove",
onClick: (g) => {
g.stopPropagation(), k(S);
}
}, [d("div", {
class: "f-list-remove-icon"
}, [d("i", {
class: "f-icon f-icon-remove_face"
}, null)])]), d("div", {
class: "f-list-handle"
}, [d("div", null, [d("i", {
class: "f-icon f-icon-drag-vertical"
}, null)])])]);
}
return {
renderItem: N
};
}
function Nt(e, t, s, o, c, f, i, h, y, V) {
var B;
const b = p(((B = e.group) == null ? void 0 : B.groupFields) || []), {
collpaseGroupIconClass: v
} = c, {
toggleGroupRow: M
} = V;
function x(n, l) {
n.stopPropagation(), l.collapse = !l.collapse, s.value = M(l.collapse ? "collapse" : "expand", l, s.value);
}
function C(n, l, u) {
return t.slots.group ? d(U, null, [t.slots.content && t.slots.group({
item: n.raw,
index: l,
selectedItem: u
})]) : d("div", {
class: "f-navlookup-recentHeader",
onClick: (r) => x(r, n)
}, [d("div", {
class: "fv-grid-group-row-icon"
}, [d("span", {
class: v(n)
}, null)]), d("div", {
class: "f-navlookup-recommandLabel"
}, [n.raw[b.value[n.layer]]])]);
}
function A(n, l, u) {
return n.layer > -1 && C(n, l, u);
}
return {
renderItem: A
};
}
function _t(e, t, s, o) {
const { dataView: c } = s, { updateSelectedItems: f } = o;
function i(h) {
if (h > -1 && h < c.value.length) {
if (e != null && e.checkBeforeRemoveItem && !e.checkBeforeRemoveItem(c.value[h]))
return;
const y = c.value.splice(h, 1);
f(), t.emit("removeItem", y[0]);
}
}
return { removeItem: i };
}
function Gt(e, t, s, o, c, f, i, h, y, V) {
const b = p(e.view), v = p(e.view === "CardView"), M = p({}), x = _t(e, t, o, y), C = O(() => ({
"f-list-view-group": !0,
"f-list-view-group-multiselect": e.multiSelect,
"d-flex": v.value,
"flex-wrap": v.value
})), A = O(() => !!s.value && s.value.length > 0), B = O(() => s.value.length === 0);
O(() => B.value && !t.slots.empty);
function n() {
return b.value === "SingleView" ? ge : b.value === "DraggableView" ? jt : (b.value === "ContentView" || b.value === "CardView") && (e.contentTemplate || t.slots.content) ? $t : ge;
}
const l = n(), {
renderItem: u
} = l(e, t, s, V, c, f, y, i, x, h), {
renderItem: r
} = Nt(e, t, s, V, c, f, y, i, x, h), a = [u, r];
function m() {
return s.value.filter((w) => w.visible !== !1).map((w, P) => a[w.type](w, P, M));
}
function I() {
return d("div", {
class: "f-list-view-emptydata",
style: "margin: 0 auto;"
}, [d("p", {
class: "f-empty-title"
}, [e.emptyTemplate ? e.emptyTemplate() : t.slots.empty ? t.slots.empty() : ue.getLocaleValue("listView.emptyMessage")])]);
}
function k() {
return d("ul", {
class: C.value,
style: "list-style: none;"
}, [A.value && m(), B.value && I()]);
}
return {
renderListArea: k
};
}
function Dt(e, t, s, o, c) {
const {
showSelectAll: f,
selectAll: i,
unSelectAll: h,
selectAllStatus: y,
indeterminateStatus: V
} = o;
function b(x) {
x ? i() : h();
}
const v = O(() => "f-list-view-group-item f-combo-list-item f-un-select");
function M() {
return d("div", {
class: "f-list-view-header"
}, [f.value && c.dataView.value.length > 0 && d("ul", {
class: "f-list-view-group f-list-view-group-multiselect",
style: "list-style: none;"
}, [d("li", {
class: v.value
}, [d("div", {
class: "f-list-select"
}, [d(Ce, {
customClass: "listview-checkbox float-left",
modelValue: y.value,
indeterminate: V.value,
"onUpdate:modelValue": (x) => b(x)
}, null)])])]), t.slots.header && t.slots.header()]);
}
return {
renderHeader: M
};
}
function he(e, t, s, o, c) {
const f = p(e.headerClass), i = p(e.placeholder), h = p(""), y = O(() => !h.value), V = O(() => !!h.value), {
showSelectAll: b,
selectAll: v,
unSelectAll: M,
selectAllStatus: x,
indeterminateStatus: C
} = o, A = O(() => "f-list-view-group-item f-combo-list-item f-un-select");
function B(a) {
h.value = "";
}
function n(a) {
a ? v() : M();
}
j(h, (a) => {
e.enableHighlightSearch && s.search(a), t.emit("afterSearch", a);
});
const l = O(() => {
const a = {
"form-group": !0,
"farris-form-group": !0
};
return f.value && f.value.split(" ").reduce((I, k) => (I[k] = !0, I), a), a;
});
function u(a) {
}
function r() {
return d("div", {
class: "f-list-view-header",
onClick: De(() => u, ["prevent", "stop"])
}, [b.value && c.dataView.value.length > 0 && d("ul", {
class: "f-list-view-group f-list-view-group-multiselect",
style: "list-style: none;"
}, [d("li", {
class: A.value
}, [d("div", {
class: "f-list-select"
}, [d(Ce, {
customClass: "listview-checkbox float-left",
modelValue: x.value,
indeterminate: C.value,
"onUpdate:modelValue": (a) => n(a)
}, null)])])]), d("div", {
class: l.value
}, [d("div", {
class: "farris-input-wrap"
}, [d("div", {
class: "f-cmp-inputgroup"
}, [d("div", {
class: "input-group f-state-editable"
}, [qe(d("input", {
class: "form-control f-utils-fill text-left",
"onUpdate:modelValue": (a) => h.value = a,
name: "input-group-value",
type: "text",
placeholder: i.value,
autocomplete: "off"
}, null), [[ze, h.value]]), d("div", {
class: "input-group-append"
}, [V.value && d("span", {
class: "input-group-text input-group-clear",
onClick: (a) => B()
}, [d("i", {
class: "f-icon f-icon-close-circle"
}, null)]), y.value && d("span", {
class: "input-group-text"
}, [d("span", {
class: "f-icon f-icon-search"
}, null)])])])])])])]);
}
return {
renderHeader: r
};
}
function qt() {
const e = p(""), t = p(-1), s = p(""), o = p(-1), c = p(!1);
function f(v, M, x) {
o.value = x;
}
function i(v, M, x) {
c.value || (o.value = x);
}
function h(v, M, x) {
o.value = -1;
}
function y() {
c.value = !0;
}
function V() {
c.value = !1;
}
function b() {
t.value = -1, e.value = "";
}
return {
activeIndex: t,
focusedItemId: s,
hoverIndex: o,
clearActiveItem: b,
onMouseenterItem: f,
onMouseoverItem: i,
onMouseoutItem: h,
resumeHover: V,
suspendHover: y
};
}
function zt(e, t, s, o, c) {
const f = p(e.idField), { dataView: i } = s, h = p(-1), y = p(!1), { activeIndex: V, focusedItemId: b, hoverIndex: v, resumeHover: M, suspendHover: x } = o;
let C, A = 0, B = 0, n = null, l = null;
const u = 10, r = 50;
function a(T) {
if (!T)
return null;
const { overflowY: S } = getComputedStyle(T);
return S === "auto" || S === "scroll" ? T : a(T.parentElement);
}
function m(T, S) {
l && clearInterval(l), l = window.setInterval(() => {
S === "up" ? T.scrollTop -= u : T.scrollTop += u;
}, 16);
}
function I() {
l && (clearInterval(l), l = null);
}
function k(T) {
const S = T.target;
if (n || (n = a(S)), !n) {
I();
return;
}
const F = n.getBoundingClientRect(), g = T.clientY, R = g - F.top, $ = F.bottom - g;
R < r && n.scrollTop > 0 ? m(n, "up") : $ < r && n.scrollTop < n.scrollHeight - n.clientHeight ? m(n, "down") : I();
}
function w(T, S) {
const F = T - A, g = S - B;
C.style.left = parseInt(C.style.left) + F + "px", C.style.top = parseInt(C.style.top) + g + "px", A = T, B = S;
}
function P(T) {
const { left: S, top: F } = T.getBoundingClientRect(), g = T.cloneNode(!0);
return g.className = g.className + " f-listview-drag-moving", g.style.cssText = `
position:absolute;
left:${S}px;
top:${document.documentElement.scrollTop ? F + document.documentElement.scrollTop : F}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(T).width};
height:${getComputedStyle(T).height};
`, g.children[0].style.cssText = "padding: 0 0 0 14px", g.children[0].children[0].style.cssText = `
margin: 10px 0px 10px 14px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
`, g.children[1].style.cssText = "flex:1 1 auto; width:100%", g.children[2].style.cssText = "padding: 0 14px 0 0", g.children[2].children[0].style.cssText = "display: initial", document.body.appendChild(g), g;
}
function H(T, S, F) {
if (T.stopPropagation(), x(), S) {
if (C = P(T.target), T.dataTransfer) {
const g = new Image();
g.src = "", T.dataTransfer.setDragImage(g, 0, 0);
}
A = T.pageX, B = T.pageY, setTimeout(() => {
h.value = F, y.value = !0, S.moving = !0;
});
}
}
function E(T, S) {
if (T.preventDefault(), h.value !== S && h.value !== -1) {
const F = i.value[h.value], g = c.value[h.value];
F && g && (i.value.splice(h.value, 1), i.value.splice(S, 0, F), c.value.splice(h.value, 1), c.value.splice(S, 0, g), c.value.forEach((R, $) => {
R.index = $, R.raw.__fv_index__ = $;
}), h.value = S, w(T.pageX, T.pageY));
}
}
function G(T) {
T.preventDefault(), T.dataTransfer && (T.dataTransfer.dropEffect = "move"), w(T.pageX, T.pageY), k(T);
}
function N(T, S) {
var g, R;
I(), n = null, S && (S.moving = !1, C && (document.body.removeChild(C), C = null)), i.value.forEach(($, _) => {
$.__fv_index__ = _;
}), c.value.forEach(($, _) => {
$.index = _, $.raw && ($.raw.__fv_index__ = _);
}), y.value = !1, M();
const F = ((g = S.raw) == null ? void 0 : g.__fv_index__) ?? 0;
v.value = F, V.value = F, b.value = (R = S.raw) == null ? void 0 : R[f.value], t.emit("change", i.value), t.emit("activeChange", [S.raw]);
}
return {
dragstart: H,
dragenter: E,
dragover: G,
dragend: N,
isDragging: y
};
}
function Ut(e, t, s, o, c, f) {
var N, T;
const i = p(e.idField), h = p(e.disableField), y = p(e.draggable);
p(e.itemClass);
const V = p(((N = e.selection) == null ? void 0 : N.multiSelect) ?? !1), b = p(((T = e.selection) == null ? void 0 : T.multiSelectMode) || "DependOnCheck"), { isDragging: v } = o, { activeIndex: M, focusedItemId: x, hoverIndex: C } = c, { clearSelection: A, getSelectedItems: B, toggleSelectItem: n, currentSelectedDataId: l, multiSelectOnlyOnCheck: u } = f, r = p(B()), a = (S) => r.value.length === 0 ? !1 : r.value.some((F) => {
let g = "";
return F.data ? g = F.data[i.value] : g = F[i.value], g === S;
});
function m() {
r.value = B();
}
function I(S, F) {
return S.raw[i.value] != null ? S.raw[i.value] + "_" + F : "";
}
function k(S, F) {
const g = {
"f-list-view-group-item": !0,
"f-list-view-draggable-item": y.value,
"f-un-click": !S.checked,
"f-un-select": !!S.raw[h.value],
"f-listview-active": (
// 多选
V.value && a(I(S, F)) && e.showActiveWhenMultiSelect || // 单选
!V.value && S.raw[i.value] === l.value || V.value && !e.showActiveWhenMultiSelect && S.raw[i.value] === l.value
),
"f-listview-hover": !v.value && F === C.value,
moving: !!S.moving
};
if (typeof e.itemClass == "string")
return K(g, e.itemClass);
if (typeof e.itemClass == "function") {
const R = e.itemClass(S);
return K(g, R);
}
return g;
}
function w(S, F) {
const g = {};
if (typeof e.itemStyle == "string")
return me(g, e.itemStyle);
if (typeof e.itemStyle == "function") {
const R = e.itemStyle(S);
return me(g, R);
}
return g;
}
const P = O(() => !V.value);
function H(S, F, g) {
S.checked = g, !S.raw[h.value] && (P.value && (x.value = S.raw[i.value]), n(S));
}
const E = O(() => !V.value || V.value && b.value === "OnCheckAndClick");
function G(S, F, g) {
if (S.raw[h.value]) {
g == null || g.preventDefault(), g == null || g.stopPropagation();
return;
}
l.value = S.raw[i.value], x.value = S.raw[i.value], M.value = F, E.value && (n(S), m()), t.emit("clickItem", { data: r.value, index: F, dataItem: S.raw }), t.emit("activeChange", r.value);
}
return {
getKey: I,
selectedItems: r,
listViewItemClass: k,
listViewItemStyle: w,
updateSelectedItems: m,
onCheckItem: H,
onClickItem: G
};
}
const we = /* @__PURE__ */ D({
name: "FListView",
props: Lt,
emits: ["afterSearch", "checkValuesChange", "clickItem", "selectItem", "unSelectItem", "selectionChange", "removeItem", "change", "activeChange", "pageIndexChanged", "pageSizeChanged", "changed", "selectionUpdate"],
setup(e, t) {
var fe;
const s = p(!1), o = p(), c = p(!0), f = p(((fe = e.rowOption) == null ? void 0 : fe.rowHeight) || 28), i = p(!1), h = p([]), y = 0, V = p(e.columns), b = Qe(e, t), v = Ze(e), M = et(e), x = tt(e, v), C = nt(e, /* @__PURE__ */ new Map(), b, M, v), A = lt(e, C, v, h, t), B = Et(e, o), n = it(e, C), l = O(() => C.dataView.value.length), u = at(e, t, A, v), r = ot(e, t, v, u, h), a = st(e, C, f), m = ut(e, r, a), I = rt(e, C, r, M, v, a, m, f), k = ct(e, v, m, I), w = dt(e, v, m, I), P = ft(e, V, C, l, y, I, k, w), {
getVisualData: H
} = P;
h.value = H(0, l.value + y - 1);
const E = O(() => {
const L = {
"f-list-view": !0,
"f-list-view-multiple": e.multiSelect
};
return e.size !== "default" && (L[`${e.size}-item`] = !0), K(L, e.customClass);
}), G = O(() => !!t.slots.footer || c.value);
function N() {
return e.header === "SearchBar" ? he : e.header === "ContentHeader" ? Dt : he;
}
const T = N(), {
renderHeader: S
} = T(e, t, B, A, C), F = qt(), g = zt(e, t, C, F, h), R = Ut(e, t, h, g, F, A), {
renderListArea: $
} = Gt(e, t, h, C, x, F, A, P, R, g);
function _(L) {
B.search(L);
}
function Me(L) {
L && (C.load(L), h.value = H(0, l.value + y - 1));
}
function Be() {
A.clearSelection(), F.clearActiveItem();
}
function Ae() {
return R.selectedItems.value;
}
function Pe() {
return R.selectedItems.value.map((L) => L[v.idField.value]);
}
function de(L) {
A.selectedValues.value = L, R.updateSelectedItems();
}
function Oe() {
return A.currentSelectedDataId.value;
}
function He(L) {
u.activeRowById(L);
}
function Re(L) {
const q = v.idField.value, z = h.value.find((te) => te.raw[q] === L), W = h.value.findIndex((te) => te.raw[q] === L);
z && W > -1 && R.onClickItem(z, W);
}
function Le(L) {
const q = v.idField.value, z = h.value.find((W) => W.raw[q] === L);
z && u.changeRow(z);
}
function Ee(L) {
n.updatePagination(L);
}
function $e(L) {
return h.value.filter((q) => L.includes(q.raw[e.idField]));
}
t.expose({
search: _,
updateDataSource: Me,
clearSelection: Be,
getSelections: Ae,
updateSelectionByIds: de,
getSelectionIds: Pe,
activeRowById: He,
getCurrentRowId: Oe,
clickRowItemById: Re,
updatePagination: Ee,
getVisibleDataByIds: $e,
selectRowById: Le
}), j(() => e.selectionValues, (L, q) => {
L !== q && de(L);
});
const je = mt(e, A), {
sidebarWidth: Ne,
showSidebarCheckBox: En
} = je, _e = vt(e, t), {
applyColumnSorter: $n,
columnContext: Ge,
updateColumnRenderContext: jn
} = _e;
return gt(e, C, h, Ge, P, l, y, Ne, f, s, r), () => d("div", {
class: E.value
}, [S(), d("div", {
ref: o,
class: "f-list-view-content",
onMouseover: () => {
i.value || (i.value = !0);
},
onMouseleave: () => {
i.value && (i.value = !1);
}
}, [$()]), G.value && d("div", {
class: "f-list-view-footer"
}, [e.footerTemplate ? e.footerTemplate() : t.slots.footer && t.slots.footer()])]);
}
}), Wt = "https://json-schema.org/draft/2020-12/schema", Yt = "https://farris-design.gitee.io/component.schema.json", Xt = "button", Kt = "A Farris Visual Button", Jt = "object", Qt = {
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"
], en = {
onClick: "点击事件"
}, tn = {
$schema: Wt,
$id: Yt,
title: Xt,
description: Kt,
type: Jt,
properties: Qt,
required: Zt,
events: en
}, nn = /* @__PURE__ */ new Map([
["appearance", oe]
]);
function ln(e, t, s) {
return Object.assign(t, {
text: "按钮",
appearance: {
class: "btn btn-secondary"
}
}), t;
}
const Fe = {
/**
* 组件唯一标识。
*/
id: String,
/**
* 按钮显示样式。
*
* @default 'primary'
*/
type: { type: String, default: "primary" },
/**
* 是否禁用按钮。
*
* @default false
*/
disabled: { type: Boolean, default: !1 },
/**
* 按钮尺寸，可选 small、middle、large。
*
* @default 'middle'
*/
size: { type: String, default: "middle" },
/**
* 按钮图标类名。
*
* @default ''
*/
icon: { type: String, default: "" },
/**
* 按钮文本。
*
* @default ''
*/
text: { type: String, default: "" },
/**
* 自定义 CSS 类名。
*
* @default ''
*/
customClass: { type: String, default: "" },
/**
* 自定义内联样式。
*
* @default ''
*/
customStyle: { type: String, default: "" },
/**
* 控制按钮是否可见。
*
* @default true
*/
visible: { type: Boolean, default: !0 }
};
se(Fe, tn, nn, ln);
function an(e, t) {
function s(o) {
o.stopPropagation(), e.disabled || t.emit("click", o);
}
return {
onClickButton: s
};
}
function on(e) {
const t = O(() => {
const o = {
"f-icon": !0
};
if (e.icon) {
const c = e.icon.trim().split(" ");
c && c.length && c.reduce((f, i) => (f[i] = !0, f), o);
}
return o;
}), s = O(() => !!(e.icon && e.icon.trim()));
return { iconClass: t, shouldShowIcon: s };
}
const Ie = /* @__PURE__ */ D({
name: "FButton",
props: Fe,
emits: ["click"],
setup(e, t) {
const {
onClickButton: s
} = an(e, t), {
iconClass: o,
shouldShowIcon: c
} = on(e), f = O(() => {
const i = {
btn: !0,
"btn-lg": e.size === "large",
"btn-md": e.size !== "large" && e.size !== "small",
"btn-sm": e.size === "small",
"btn-icontext": c.value
};
return i[`btn-${e.type}`] = !0, e.customClass && (typeof e.customClass == "string" ? K(i, e.customClass) : Object.keys(e.customClass).reduce((h, y) => (h[y] = e.customClass[y], h), i)), i;
});
return () => e.visible ? d("button", {
class: f.value,
disabled: e.disabled,
style: e.customStyle,
onClick: (i) => s(i)
}, [c.value && d("i", {
class: o.value
}, null), e.text ? e.text : "", t.slots.default && t.slots.default()]) : null;
}
}), xe = /* @__PURE__ */ new Map([
["appearance", oe]
]), sn = "https://json-schema.org/draft/2020-12/schema", un = "https://farris-design.gitee.io/combo-list.schema.json", rn = "combo-list", cn = "A Farris Input Component", dn = "object", fn = {
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"
},
beforeHide: {
description: "关闭下拉面板前回调",
type: "string"
},
onShown: {
description: "面板打开事件",
type: "string"
},
onHidden: {
description: "面板关闭事件",
type: "string"
},
onChange: {
description: "值变化事件",
type: "string",
default: ""
},
onInput: {
description: "输入事件",
type: "string",
default: ""
},
onClear: {
description: "清空事件",
type: "string",
default: ""
},
onDataChanged: {
description: "清空事件",
type: "string",
default: ""
},
hideDisabledItems: {
description: "隐藏禁用项",
type: "boolean",
default: !1
},
expandable: {
description: "",
type: "boolean",
default: !1
},
expandMode: {
description: "",
type: "string",
default: "text"
},
expandContent: {
description: "",
type: "string",
default: ""
},
expandDisabled: {
description: "",
type: "boolean",
default: !1
},
onExpandClick: {
description: "",
type: "string",
default: ""
},
showSelectAll: {
description: "",
type: "boolean",
default: !1
}
}, mn = [
"type"
], vn = [
"id",
"appearance",
"binding",
"visible"
], gn = {
onClear: "清空事件",
onShown: "面板打开事件",
onHidden: "面板关闭事件",
onChange: "值变化事件",
beforeOpen: "打开面板前事件",
beforeHide: "关闭面板前事件"
}, Te = {
$schema: sn,
$id: un,
title: rn,
description: cn,
type: dn,
properties: fn,
required: mn,
ignore: vn,
events: gn
};
function Ve(e, t, s) {
return t;
}
function hn() {
function e(t, s, o) {
const c = {};
return c.beforeOpen = (f) => s.call("beforeOpen", t, [f, t], o), c;
}
return {
resolve: e
};
}
const ee = {
/**
* 组件唯一标识。
*/
id: { type: String },
/**
* 下拉列表数据源。
*
* @default []
*/
data: { type: Array, default: [] },
/**
* 是否禁用组件。
*
* @default false
*/
disabled: { default: !1, type: Boolean },
/**
* 下拉按钮图标 HTML 字符串。
*
* @default '<span class="f-icon f-icon-arrow-chevron-down"></span>'
*/
dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-chevron-down"></span>' },
/**
* 是否允许在输入框中直接编辑文本。
*
* @default false
*/
editable: { default: !1, type: Boolean },
/**
* 是否启用清空按钮。
*
* @default true
*/
enableClear: { default: !0, type: Boolean },
/**
* 是否启用下拉面板搜索。
*
* @default false
*/
enableSearch: { type: Boolean, default: !1 },
/**
* 鼠标悬停时是否显示控件值提示。
*
* @default true
*/
enableTitle: { default: !0, type: Boolean },
/**
* 是否自适应编辑器宽度。
*
* @default false
*/
fitEditor: { default: !1, type: Boolean },
/**
* 是否在禁用或只读状态下强制显示占位符。
*
* @default false
*/
forcePlaceholder: { default: !1, type: Boolean },
/**
* 清空值时是否隐藏下拉面板。
*
* @default true
*/
hidePanelOnClear: { default: !0, type: Boolean },
/**
* 数据源中作为唯一标识的字段名。
*
* @default 'id'
*/
idField: { default: "id", type: String },
/**
* 字段映射配置。
*/
mapFields: { type: Object },
/**
* 下拉面板最大高度，单位 px。
*
* @default 350
*/
maxHeight: { default: 350, type: Number },
/**
* 可编辑状态下的最大输入长度。
*/
maxLength: { type: Number },
/**
* 是否支持多选。
*
* @default false
*/
multiSelect: { type: Boolean, default: !1 },
/**
* 可选，多选模式下是否显示全选复选框
* 默认`false`
*/
showSelectAll: { type: Boolean, default: !1 },
/**
* 绑定值
* 组件绑定值。
*
* @default ''
*/
modelValue: { type: String, default: "" },
/**
* 值为空时的占位符文本。
*
* @default '请选择'
*/
placeholder: { type: String, default: "请选择" },
/**
* 下拉面板展示位置。
*
* @default Placement.auto
*/
placement: {
type: String,
default: "auto"
/* auto */
},
/**
* 是否只读。
*
* @default false
*/
readonly: { default: !1, type: Boolean },
/**
* 远端数据源配置，设置后将优先从远端加载数据。
*
* @default null
*/
remote: { default: null, type: Object },
/**
* 是否支持远端过滤搜索。
*
* @default false
*/
remoteSearch: { default: !1, type: Boolean },
/**
* 多选时多个值之间的分隔符。
*
* @default ','
*/
separator: { default: ",", type: String },
/**
* 组件的 tab 索引。
*
* @default -1
*/
tabIndex: { type: Number, default: -1 },
/**
* 数据源中作为显示文本的字段名。
*
* @default 'name'
*/
textField: { default: "name", type: String },
/**
* 数据源中作为 title 提示的字段名。
*
* @default 'name'
*/
titleField: { default: "name", type: String },
/**
* 数据源中作为绑定值的字段名。
*
* @default 'id'
*/
valueField: { default: "id", type: String },
/**
* 多选时选中值在输入框中的展示方式。
*
* @remarks
* 支持 `text`（文本）和 `tag`（标签）两种模式。
*
* @default 'tag'
*/
viewType: { default: "tag", type: String },
/**
* 值变化回调函数。
*
* @default () => {}
*/
change: { type: Function, default: () => {
} },
/**
* 作为内嵌编辑器创建后是否自动获得焦点。
*
* @default false
*/
focusOnCreated: { type: Boolean, default: !1 },
/**
* 作为内嵌编辑器创建后是否默认选中文本。
*
* @default false
*/
selectOnCreated: { type: Boolean, default: !1 },
/**
* 是否根据内容自动计算高度。
*
* @deprecated 该属性已废弃。
* @default true
*/
autoHeight: { type: Boolean, default: !0 },
/**
* 下拉面板打开前的回调函数，返回 false 可阻止打开。
*
* @default null
*/
beforeOpen: { type: Function, default: null },
/**
* 自定义远端数据加载函数，返回 Promise。
*/
load: { type: Function },
/**
* 搜索过滤配置，可传入布尔值或自定义过滤函数。
*
* @default false
*/
searchOption: {
type: [Boolean, Function],
default: !1
},
/**
* 搜索时是否高亮匹配文本。
*
* @default true
*/
enableHighlightSearch: { type: Boolean, default: !0 },
/**
* 下拉面板最小宽度，单位 px。
*
* @default 160
*/
minPanelWidth: { type: Number, default: 160 },
/**
* 是否在点击输入框时弹出下拉面板。
*
* @default true
*/
popupOnClick: { type: Boolean, default: !0 },
/**
* 是否可扩展（显示扩展按钮/文本）。
*
* @default false
*/
expandable: { type: Boolean, default: !1 },
/**
* 扩展模式，可选 `text` 或 `button`。
*
* @default 'text'
*/
expandMode: { type: String, default: "text" },
/**
* 扩展区域显示的文本内容。
*
* @default ''
*/
expandContent: { type: String, default: "" },
/**
* 扩展按钮是否禁用。
*
* @default false
*/
expandDisabled: { type: Boolean, default: !1 },
/**
* 下拉面板的自定义 CSS 类名。
*
* @default ''
*/
popupClass: { type: String, default: "" },
/**
* 是否隐藏禁用的数据项。
*
* @remarks
* 默认 `false`，禁用项显示为置灰状态；设置为 `true` 时禁用项不显示。
*
* @default false
*/
hideDisabledItems: { type: Boolean, default: !1 }
}, yn = Object.assign({}, ee, {
readonly: {}
});
se(ee, Te, xe, Ve);
const ke = Ue(
ee,
Te,
xe,
Ve
), bn = hn(), pn = {
dataSource: { type: Array, default: [] },
enableSearch: { type: Boolean, default: !1 },
idField: { type: String, default: "id" },
multiSelect: { type: Boolean, default: !1 },
/** 多选模式下是否显示全选复选框 */
showSelectAll: { 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 }
}, Cn = /* @__PURE__ */ D({
name: "FComboListContainer",
props: pn,
emits: ["selectionChange"],
setup(e, t) {
const s = p(), o = p(e.dataSource), c = p(e.dataSource), f = p([]), i = p(e.separator), h = p(e.width), y = p(e.maxHeight), V = O(() => e.multiSelect), b = p(e.multiSelect ? String(e.selectedValues).split(i.value) : [e.selectedValues]), v = O(() => ({
enableSelectRow: !0,
multiSelect: e.multiSelect,
multiSelectMode: "OnCheckAndClick",
showCheckbox: V.value,
showSelectAll: e.showSelectAll,
showSelection: !0
}));
j(e.dataSource, () => {
o.value = e.dataSource, c.value = e.dataSource;
}), O(() => e.enableSearch ? "SearchBar" : "ContentHeader");
const M = O(() => {
const n = {};
return h.value !== void 0 && (n.width = `${h.value}px`), y.value !== void 0 && y.value > 0 && (n.maxHeight = `${y.value}px`), n;
});
function x(n) {
s.value.search(n);
}
function C(n) {
f.value = n.map((l) => Object.assign({}, l)), b.value = n.map((l) => l[e.idField]), t.emit("selectionChange", f.value);
}
function A(n) {
if (e.enableHighlightSearch)
return;
let l = [];
const {
searchOption: u
} = e;
typeof u == "function" ? l = o.value.filter((r) => u(n, r)) : l = o.value.filter((r) => r[e.valueField].indexOf(n) > -1 || r[e.textField].indexOf(n) > -1), s.value.updateDataSource(l);
}
j([() => e.selectedValues], ([n]) => {
e.multiSelect ? n === null ? b.value = [] : b.value = n.split(i.value) : n === null ? b.value = [] : b.value = [n];
});
function B(n) {
s.value.activeRowById(n);
}
return ae(() => {
var n, l;
if (!e.multiSelect) {
const u = (n = b.value) == null ? void 0 : n[0];
let r = u;
const a = o.value.map((m) => m[e.valueField || e.idField]);
if (!bt(u) && a.includes(u)) {
const m = typeof u, I = typeof ((l = o.value[0]) == null ? void 0 : l[e.valueField || e.idField]);
I === "number" && m !== I && (r = Number(u)), I === "boolean" && m !== I && (r = u === "true" ? !0 : u === "false" ? !1 : u), B(r);
}
}
}), t.expose({
search: x,
activeRowById: B
}), () => d("div", {
class: "f-combo-list-container",
style: M.value
}, [d(yt, {
ref: s,
size: "small",
itemClass: "f-combo-list-item",
itemContentClass: "text-truncate",
header: "ContentHeader",
headerClass: "f-combo-list-search-box",
data: o.value,
idField: e.idField,
textField: e.textField,
titleField: e.titleField,
multiSelect: e.multiSelect,
selection: v.value,
enableHighlightSearch: e.enableHighlightSearch,
selectionValues: b.value,
onSelectionUpdate: C,
onAfterSearch: A
}, null)]);
}
}), ye = {
property: "all",
duration: 0.3,
timingFunction: "cubic-bezier(0.17, 0.89, 0.45, 1)",
delay: 0
}, Sn = (e, t) => {
const s = e.lineHeight / 2, o = We({ maxOverflowY: 44 }), c = X({ ...ye }), f = (r) => {
t.emit("change", r);
}, i = X({
value: 0,
max: 0,
min: 0,
start: 0,
index: 0,
currentItem: void 0,
active: !1
}), h = () => {
i.max = e.visiableOptionCount / 2 * e.lineHeight;
const r = e.column.length * e.lineHeight;
i.min = i.max - r + e.lineHeight;
}, y = (r = 0) => {
h(), i.index = r, i.value = i.max - r * e.lineHeight, i.currentItem = e.column[r];
}, V = (r) => {
const a = e.column.length - 1, m = Math.min(i.index, a), I = e.column.findIndex((k) => k[e.valueField] === r);
return I >= 0 ? I : m;
}, b = (r) => {
const a = e.column.length - 1;
return i.index > a ? e.column[a] : e.column[r];
}, v = (r) => {
r && (i.currentItem = r, c.duration = 0);
const a = i.currentItem[e.valueField], m = V(a), I = b(i.index)[e.valueField];
y(m), a !== I && setTimeout(() => {
f(i.currentItem);
}, c.duration * 1e3);
}, M = () => {
const r = Array.isArray(e.value) ? e.value[0] : e.value;
y(V(r));
};
M(), j(() => e.value, () => {
e.multiSelect || M();
}), j(() => e.column, () => v());
const x = (r, a = i.max, m = i.min) => {
const I = i.start + r;
i.value = I > s ? Math.min(I, a) : Math.max(I, m), i.index = Math.round((i.max - i.value) / e.lineHeight), i.currentItem = b(i.index);
}, C = Ye(), A = (r) => {
C.start(r), i.active = !0, i.start = i.value, o.start(i.start), c.duration = 0;
}, B = (r) => {
r.preventDefault(), C.move(r), x(
C.deltaY.value,
i.max + e.lineHeight,
i.min - e.lineHeight
), o.move(C.deltaY.value), c.duration = ye.duration;
}, n = (r) => {
const a = r < 0, m = r % e.lineHeight > s ? 1 : 0, I = Math.floor(r / e.lineHeight);
return (a ? I - m : I + m) * e.lineHeight + s;
};
return {
translateY: i,
transition: c,
onTouchStart: A,
onTouchMove: B,
onTouchEnd: () => {
i.start = 0;
const r = o.end();
let a = 0;
if (r) {
const { destination: m, duration: I } = o.get(i.value, i.min, i.max);
a = m, c.duration = I / 1e3;
} else
a = i.value;
x(n(a)), f(i.currentItem);
},
onTransitionend