@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
594 lines (593 loc) • 16.3 kB
JavaScript
import { defineComponent as j, ref as m, computed as P, watch as F, createVNode as S, Fragment as J, inject as Q, onMounted as Y, resolveComponent as Z } from "vue";
import C from "../button-edit/index.esm.js";
import { isPlainObject as N, cloneDeep as T } from "lodash-es";
import x from "../list-view/index.esm.js";
import K from "../loading/index.esm.js";
const H = {}, q = {};
function D(t) {
const { properties: e, title: i, ignore: o } = t, a = o && Array.isArray(o), s = Object.keys(e).reduce((c, d) => ((!a || !o.find((b) => b === d)) && (c[d] = e[d].type === "object" && e[d].properties ? D(e[d]) : T(e[d].default)), c), {});
if (i && (!a || !o.find((c) => c === "id"))) {
const c = i.toLowerCase().replace(/-/g, "_");
s.id = `${c}_${Math.random().toString().slice(2, 6)}`;
}
return s;
}
function I(t) {
const { properties: e, title: i, required: o } = t;
if (o && Array.isArray(o)) {
const a = o.reduce((s, c) => (s[c] = e[c].type === "object" && e[c].properties ? D(e[c]) : T(e[c].default), s), {});
if (i && o.find((s) => s === "id")) {
const s = i.toLowerCase().replace(/-/g, "_");
a.id = `${s}_${Math.random().toString().slice(2, 6)}`;
}
return a;
}
return {
type: i
};
}
function L(t, e = {}, i) {
const o = H[t];
if (o) {
let a = I(o);
const s = q[t];
return a = s ? s({ getSchemaByType: L }, a, e, i) : a, a;
}
return null;
}
function ee(t, e) {
const i = D(e);
return Object.keys(i).reduce((o, a) => (Object.prototype.hasOwnProperty.call(t, a) && (o[a] && N(o[a]) && N(t[a] || !t[a]) ? Object.assign(o[a], t[a] || {}) : o[a] = t[a]), o), i), i;
}
function _(t, e) {
return Object.keys(t).filter((o) => t[o] != null).reduce((o, a) => {
if (e.has(a)) {
const s = e.get(a);
if (typeof s == "string")
o[s] = t[a];
else {
const c = s(a, t[a], t);
Object.assign(o, c);
}
} else
o[a] = t[a];
return o;
}, {});
}
function te(t, e, i = /* @__PURE__ */ new Map()) {
const o = ee(t, e);
return _(o, i);
}
function ne(t = {}) {
function e(r, n, u, f) {
if (typeof u == "number")
return f[r].length === u;
if (typeof u == "object") {
const l = Object.keys(u)[0], h = u[l];
if (l === "not")
return Number(f[r].length) !== Number(h);
if (l === "moreThan")
return Number(f[r].length) >= Number(h);
if (l === "lessThan")
return Number(f[r].length) <= Number(h);
}
return !1;
}
function i(r, n, u, f) {
return f[r] && f[r].propertyValue && String(f[r].propertyValue.value) === String(u);
}
const o = /* @__PURE__ */ new Map([
["length", e],
["getProperty", i]
]);
Object.keys(t).reduce((r, n) => (r.set(n, t[n]), r), o);
function a(r, n) {
const u = r;
return typeof n == "number" ? [{ target: u, operator: "length", param: null, value: Number(n) }] : typeof n == "boolean" ? [{ target: u, operator: "getProperty", param: r, value: !!n }] : typeof n == "object" ? Object.keys(n).map((f) => {
if (f === "length")
return { target: u, operator: "length", param: null, value: n[f] };
const l = f, h = n[f];
return { target: u, operator: "getProperty", param: l, value: h };
}) : [];
}
function s(r) {
return Object.keys(r).reduce((u, f) => {
const l = a(f, r[f]);
return u.push(...l), u;
}, []);
}
function c(r, n) {
if (o.has(r.operator)) {
const u = o.get(r.operator);
return u && u(r.target, r.param, r.value, n) || !1;
}
return !1;
}
function d(r, n) {
return s(r).reduce((l, h) => l && c(h, n), !0);
}
function b(r, n) {
const u = Object.keys(r), f = u.includes("allOf"), l = u.includes("anyOf"), h = f || l, O = (h ? r[h ? f ? "allOf" : "anyOf" : "allOf"] : [r]).map((w) => d(w, n));
return f ? !O.includes(!1) : O.includes(!0);
}
return { parseValueSchema: b };
}
const oe = {}, ae = {};
ne();
function re(t, e, i = /* @__PURE__ */ new Map(), o = (c, d, b, r) => d, a = {}, s = (c) => c) {
return H[e.title] = e, q[e.title] = o, oe[e.title] = a, ae[e.title] = s, (c = {}, d = !0) => {
if (!d)
return _(c, i);
const b = te(c, e, i), r = Object.keys(t).reduce((n, u) => (n[u] = t[u].default, n), {});
return Object.assign(r, b);
};
}
function le(t, e) {
return { customClass: e.class, customStyle: e.style };
}
const ue = /* @__PURE__ */ new Map([
["appearance", le]
]), ie = "https://json-schema.org/draft/2020-12/schema", ce = "https://farris-design.gitee.io/search-box.schema.json", se = "search-box", fe = "A Farris Component", pe = "object", de = {
id: {
description: "The unique identifier for a search-box",
type: "string"
},
type: {
description: "The type string of search-box component",
type: "string",
default: "search-box"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, he = [
"id",
"type"
], me = {
$schema: ie,
$id: ce,
title: se,
description: fe,
type: pe,
properties: de,
required: he
};
function ye(t, e, i) {
return e;
}
const ge = "search-box", be = "A Farris Component", ve = "object", Be = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, Se = {
title: ge,
description: be,
type: ve,
categories: Be
}, M = {
/**
* 自定义图标
*/
buttonContent: { type: String, default: '<i class="f-icon f-icon-search"></i>' },
/** 自定义样式 */
customClass: { type: String, default: "" },
/** 组件初始搜索值 */
modelValue: { type: String, default: "" },
popupHost: { type: Object },
/** */
popupRightBoundary: { type: Object },
popupOffsetX: { type: Object },
/** 搜索框数据 */
data: { type: Array, default: [] },
placeholder: { type: String, default: "请输入关键词" },
/**
* 可选，数据源id字段
* 默认为`id`
*/
idField: { default: "id", type: String },
/**
* 可选，数据源的title
* 默认为`name`
*/
textField: { default: "name", type: String },
/**
* 可选，最大高度
* 默认`350`
*/
maxHeight: { default: 350, type: Number },
/**
* 是否处于加载状态
*/
loading: { default: !1, type: Boolean },
/**
* 是否处于只读状态
*/
disable: { default: !1, type: Boolean },
/**
* 是否展示搜索结果面板
*/
showDropdown: { default: !0, type: Boolean },
/**
* popupOnFoucs TODO
*/
/**
* 值变化事件触发时机
*/
updateOn: { default: "blur", type: String }
}, U = re(M, me, ue, ye, Se), Ve = {
data: { type: Array, default: [] },
/** 确认结果事件 */
onConfirmResult: { type: Function, default: () => {
} },
/** 搜索点击后返回值 */
onSearchedValue: { type: Function, default: () => {
} },
/**
* 可选，数据源id字段
* 默认为`id`
*/
idField: { default: "id", type: String },
/**
* 可选，数据源的title
* 默认为`name`
*/
textField: { default: "name", type: String },
/**
* 可选，最大高度
* 默认`350`
*/
maxHeight: { default: 350, type: Number },
loading: { default: !1, type: Boolean }
}, X = /* @__PURE__ */ j({
name: "FSearchBoxContainer",
props: Ve,
emits: ["confirmResult", "searchedValue"],
setup(t, e) {
const i = m(t.data), o = m(), {
slots: a
} = e, s = P(() => ({
"search-box-container": !0,
"f-utils-overflow-xhya": !0,
"position-relative": !0
}));
function c(n) {
var u;
(u = o.value) == null || u.search(n);
}
function d(n) {
n.length && (e.emit("confirmResult", n[0].name), e.emit("searchedValue", n));
}
function b(n) {
return a.default ? S(J, null, [a.default(n)]) : S("span", null, [n.item[t.textField]]);
}
const r = P(() => {
const n = {};
return n.padding = "8px", t.maxHeight !== void 0 && t.maxHeight > 0 && (n.maxHeight = `${t.maxHeight}px`), n;
});
return F(() => t.loading, (n) => {
}), F(() => t.data, (n) => {
n !== i.value && (i.value = n), o.value.updateDataSource(n);
}), e.expose({
search: c
}), () => {
const n = {
content: b
};
return S("div", {
class: s.value,
style: r.value
}, [S(K, {
ref: "loadingInstance",
isActive: t.loading
}, null), S(x, {
ref: o,
itemClass: "dropdown-item",
data: i.value,
view: "ContentView",
onClickItem: (u) => d(u.data),
idField: t.idField,
textField: t.textField,
titleField: t.textField,
valueField: t.idField
}, n)]);
};
}
}), V = /* @__PURE__ */ j({
name: "FSearchBox",
props: M,
emits: ["update:modelValue", "change", "selectedValue", "clickButton"],
setup(t, e) {
m(t.data);
const i = m(), o = m(), a = m(t.placeholder), s = '<i class="f-icon f-icon-clockwise f-icon-spin"></i>', c = P(() => t.loading ? s : t.buttonContent);
m(t.editable);
const d = m(t.modelValue);
F(d, (l) => {
var h;
(h = o.value) == null || h.search(l), e.emit("update:modelValue", l);
}), F(() => t.modelValue, (l) => {
d.value = l;
});
function b(l) {
i.value.commitValue(l);
}
function r(l) {
e.emit("change", l);
}
function n(l) {
e.emit("selectedValue", l);
}
function u(l) {
e.emit("clickButton", l);
}
function f() {
i.value.togglePopup();
}
return e.expose({
togglePopup: f
}), () => {
const l = {
default: e.slots.default
};
return S(C, {
ref: i,
"button-content": c.value,
"custom-class": t.customClass,
updateOn: t.updateOn,
placeholder: a.value,
onChange: (h) => r(h),
onClickButton: (h) => u(h),
disable: t.disable,
"enable-clear": !0,
"button-behavior": "Execute",
modelValue: d.value,
"onUpdate:modelValue": (h) => d.value = h,
"popup-host": t.popupHost,
"popup-right-boundary": t.popupRightBoundary,
"popup-offset-x": t.popupOffsetX,
"popup-on-input": t.showDropdown,
"popup-on-focus": t.showDropdown
}, {
default: () => [t.showDropdown && S(X, {
ref: o,
data: t.data,
onConfirmResult: b,
onSearchedValue: (h) => n(h),
loading: t.loading,
maxHeight: t.maxHeight
}, l)],
...e.slots
});
};
}
});
function Fe(t, e, i) {
var k;
const o = "", a = "", s = m();
function c() {
return (e == null ? void 0 : e.schema.componentType) !== "frame";
}
function d() {
return !1;
}
function b() {
return (e == null ? void 0 : e.schema.componentType) !== "frame";
}
function r() {
return (e == null ? void 0 : e.schema.componentType) === "frame";
}
function n(p) {
if (!p || !p.value)
return null;
if (p.value.schema && p.value.schema.type === "component")
return p.value;
const g = m(p == null ? void 0 : p.value.parent), y = n(g);
return y || null;
}
function u(p = e) {
var B;
const { componentInstance: g, designerItemElementRef: y } = p;
if (!g || !g.value)
return null;
const { getCustomButtons: v } = g.value;
return g.value.canMove || v && ((B = v()) != null && B.length) ? y : u(p.parent);
}
function f(p) {
return !!i;
}
function l() {
return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
}
function h() {
}
function R(p, g) {
var y;
!p || !g || (y = e == null ? void 0 : e.setupContext) == null || y.emit("dragEnd");
}
function E(p, g) {
const { componentType: y } = p;
let v = L(y, p, g);
const B = y.toLowerCase().replace(/-/g, "_");
return v && !v.id && v.type === y && (v.id = `${B}_${Math.random().toString().slice(2, 6)}`), v;
}
function O(p) {
}
function $(...p) {
}
function w(p) {
if (!p)
return;
const g = e == null ? void 0 : e.schema, { formSchemaUtils: y } = p;
if (g && y.getExpressions().length) {
const v = y.getExpressions().findIndex((B) => B.target === g.id);
v > -1 && y.getExpressions().splice(v, 1);
}
}
function W(p) {
w(p), e != null && e.schema.contents && e.schema.contents.map((g) => {
let y = g.id;
g.type === "component-ref" && (y = g.component);
const v = t.value.querySelectorAll(`#${y}-design-item`);
v != null && v.length && Array.from(v).map((B) => {
var A;
(A = B == null ? void 0 : B.componentInstance) != null && A.value.onRemoveComponent && B.componentInstance.value.onRemoveComponent(p);
});
});
}
function z() {
}
function G(p) {
}
return s.value = {
canMove: c(),
canSelectParent: d(),
canDelete: b(),
canNested: !r(),
contents: e == null ? void 0 : e.schema.contents,
elementRef: t,
parent: (k = e == null ? void 0 : e.parent) == null ? void 0 : k.componentInstance,
schema: e == null ? void 0 : e.schema,
styles: o,
designerClass: a,
canAccepts: f,
getBelongedComponentInstance: n,
getDraggableDesignItemElement: u,
getDraggingDisplayText: l,
getPropConfig: $,
getDragScopeElement: h,
onAcceptMovedChildElement: R,
onChildElementMovedOut: O,
addNewChildComponentSchema: E,
triggerBelongedComponentToMoveWhenMoved: m(!1),
triggerBelongedComponentToDeleteWhenDeleted: m(!1),
onRemoveComponent: W,
getCustomButtons: z,
onPropertyChanged: G
}, s;
}
const Oe = /* @__PURE__ */ j({
name: "FSearchBoxDesign",
props: M,
emits: ["update:modelValue", "change"],
setup(t, e) {
const i = m(t.data), o = m(), a = m(), s = m("请输入关键词"), c = m('<i class="f-icon f-icon-search"></i>'), d = m(t.modelValue), b = m(), r = Q("design-item-context"), n = Fe(b, r);
Y(() => {
b.value.componentInstance = n;
}), e.expose(n.value), F(d, (l) => {
var h;
(h = a.value) == null || h.search(l), e.emit("update:modelValue", l);
}), F(() => t.modelValue, (l) => {
d.value = l;
});
function u(l) {
o.value.commitValue(l);
}
function f(l) {
e.emit("change", l);
}
return () => S("div", {
ref: b
}, [S(Z("f-button-edit"), {
ref: o,
"button-content": c.value,
placeholder: s.value,
onChange: f,
"enable-clear": !0,
"button-behavior": "Execute",
modelValue: d.value,
"onUpdate:modelValue": (l) => d.value = l,
"popup-host": t.popupHost,
"popup-right-boundary": t.popupRightBoundary,
"popup-offset-x": t.popupOffsetX,
"popup-on-input": !0,
"popup-on-focus": !0
}, {
default: () => [S(X, {
ref: a,
data: i.value,
onConfirmResult: u
}, null)]
})]);
}
});
V.install = (t) => {
t.component(V.name, V);
};
V.register = (t, e, i, o) => {
t["search-box"] = V, e["search-box"] = U;
};
V.registerDesigner = (t, e, i) => {
t["search-box"] = Oe, e["search-box"] = U;
};
export {
V as FSearchBox,
V as default,
U as propsResolver,
M as searchBoxProps
};