@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
585 lines (584 loc) • 16 kB
JavaScript
import { defineComponent as j, ref as m, computed as P, watch as F, createVNode as B, Fragment as W, inject as z, onMounted as G, resolveComponent as J } from "vue";
import Q from "../button-edit/index.esm.js";
import { isPlainObject as A, cloneDeep as N } from "lodash-es";
import Y from "../list-view/index.esm.js";
import Z from "../loading/index.esm.js";
const H = {}, T = {};
function D(t) {
const { properties: e, title: i, ignore: o } = t, a = o && Array.isArray(o), s = Object.keys(e).reduce((c, p) => ((!a || !o.find((y) => y === p)) && (c[p] = e[p].type === "object" && e[p].properties ? D(e[p]) : N(e[p].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 x(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]) : N(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 q(t, e = {}, i) {
const o = H[t];
if (o) {
let a = x(o);
const s = T[t];
return a = s ? s({ getSchemaByType: q }, a, e, i) : a, a;
}
return null;
}
function K(t, e) {
const i = D(e);
return Object.keys(i).reduce((o, a) => (Object.prototype.hasOwnProperty.call(t, a) && (o[a] && A(o[a]) && A(t[a] || !t[a]) ? Object.assign(o[a], t[a] || {}) : o[a] = t[a]), o), i), i;
}
function L(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 I(t, e, i = /* @__PURE__ */ new Map()) {
const o = K(t, e);
return L(o, i);
}
function ee(t = {}) {
function e(r, n, l, f) {
if (typeof l == "number")
return f[r].length === l;
if (typeof l == "object") {
const u = Object.keys(l)[0], d = l[u];
if (u === "not")
return Number(f[r].length) !== Number(d);
if (u === "moreThan")
return Number(f[r].length) >= Number(d);
if (u === "lessThan")
return Number(f[r].length) <= Number(d);
}
return !1;
}
function i(r, n, l, f) {
return f[r] && f[r].propertyValue && String(f[r].propertyValue.value) === String(l);
}
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 l = r;
return typeof n == "number" ? [{ target: l, operator: "length", param: null, value: Number(n) }] : typeof n == "boolean" ? [{ target: l, operator: "getProperty", param: r, value: !!n }] : typeof n == "object" ? Object.keys(n).map((f) => {
if (f === "length")
return { target: l, operator: "length", param: null, value: n[f] };
const u = f, d = n[f];
return { target: l, operator: "getProperty", param: u, value: d };
}) : [];
}
function s(r) {
return Object.keys(r).reduce((l, f) => {
const u = a(f, r[f]);
return l.push(...u), l;
}, []);
}
function c(r, n) {
if (o.has(r.operator)) {
const l = o.get(r.operator);
return l && l(r.target, r.param, r.value, n) || !1;
}
return !1;
}
function p(r, n) {
return s(r).reduce((u, d) => u && c(d, n), !0);
}
function y(r, n) {
const l = Object.keys(r), f = l.includes("allOf"), u = l.includes("anyOf"), d = f || u, O = (d ? r[d ? f ? "allOf" : "anyOf" : "allOf"] : [r]).map((w) => p(w, n));
return f ? !O.includes(!1) : O.includes(!0);
}
return { parseValueSchema: y };
}
const te = {}, ne = {};
ee();
function oe(t, e, i = /* @__PURE__ */ new Map(), o = (c, p, y, r) => p, a = {}, s = (c) => c) {
return H[e.title] = e, T[e.title] = o, te[e.title] = a, ne[e.title] = s, (c = {}, p = !0) => {
if (!p)
return L(c, i);
const y = I(c, e, i), r = Object.keys(t).reduce((n, l) => (n[l] = t[l].default, n), {});
return Object.assign(r, y);
};
}
function ae(t, e) {
return { customClass: e.class, customStyle: e.style };
}
const re = /* @__PURE__ */ new Map([
["appearance", ae]
]), ue = "https://json-schema.org/draft/2020-12/schema", le = "https://farris-design.gitee.io/search-box.schema.json", ie = "search-box", ce = "A Farris Component", se = "object", fe = {
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
}
}, pe = [
"id",
"type"
], de = {
$schema: ue,
$id: le,
title: ie,
description: ce,
type: se,
properties: fe,
required: pe
};
function he(t, e, i) {
return e;
}
const me = "search-box", ye = "A Farris Component", ge = "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: []
}
}
}
}
}, ve = {
title: me,
description: ye,
type: ge,
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 }
}, _ = oe(M, de, re, he, ve), Be = {
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: Be,
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 l;
(l = o.value) == null || l.search(n);
}
function p(n) {
n.length && (e.emit("confirmResult", n[0].name), e.emit("searchedValue", n));
}
function y(n) {
return a.default ? B(W, null, [a.default(n)]) : B("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: y
};
return B("div", {
class: s.value,
style: r.value
}, [B(Z, {
ref: "loadingInstance",
isActive: t.loading
}, null), B(Y, {
ref: o,
itemClass: "dropdown-item",
data: i.value,
view: "ContentView",
onClickItem: (l) => p(l.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 p = m(t.modelValue);
F(p, (u) => {
var d;
(d = o.value) == null || d.search(u), e.emit("update:modelValue", u);
}), F(() => t.modelValue, (u) => {
p.value = u;
});
function y(u) {
i.value.commitValue(u);
}
function r(u) {
e.emit("change", u);
}
function n(u) {
e.emit("selectedValue", u);
}
function l(u) {
e.emit("clickButton", u);
}
function f() {
i.value.togglePopup();
}
return e.expose({
togglePopup: f
}), () => {
const u = {
default: e.slots.default
};
return B(Q, {
ref: i,
"button-content": c.value,
"custom-class": t.customClass,
updateOn: t.updateOn,
placeholder: a.value,
onChange: (d) => r(d),
onClickButton: (d) => l(d),
disable: t.disable,
"enable-clear": !0,
"button-behavior": "Execute",
modelValue: p.value,
"onUpdate:modelValue": (d) => p.value = d,
"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 && B(X, {
ref: o,
data: t.data,
onConfirmResult: y,
onSearchedValue: (d) => n(d),
loading: t.loading,
maxHeight: t.maxHeight
}, u)],
...e.slots
});
};
}
});
function Se(t, e, i) {
var k;
const o = "", a = "", s = m();
function c() {
return (e == null ? void 0 : e.schema.componentType) !== "frame";
}
function p() {
return !1;
}
function y() {
return (e == null ? void 0 : e.schema.componentType) !== "frame";
}
function r() {
return (e == null ? void 0 : e.schema.componentType) === "frame";
}
function n(h) {
if (!h || !h.value)
return null;
if (h.value.schema && h.value.schema.type === "component")
return h.value;
const b = m(h == null ? void 0 : h.value.parent), g = n(b);
return g || null;
}
function l(h = e) {
var S;
const { componentInstance: b, designerItemElementRef: g } = h;
if (!b || !b.value)
return null;
const { getCustomButtons: v } = b.value;
return b.value.canMove || v && ((S = v()) != null && S.length) ? g : l(h.parent);
}
function f(h) {
return !!i;
}
function u() {
return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
}
function d() {
}
function R(h, b) {
var g;
!h || !b || (g = e == null ? void 0 : e.setupContext) == null || g.emit("dragEnd");
}
function E(h, b) {
const { componentType: g } = h;
let v = q(g, h, b);
const S = g.toLowerCase().replace(/-/g, "_");
return v && !v.id && v.type === g && (v.id = `${S}_${Math.random().toString().slice(2, 6)}`), v;
}
function O(h) {
}
function $(...h) {
}
function w() {
e != null && e.schema.contents && e.schema.contents.map((h) => {
let b = h.id;
h.type === "component-ref" && (b = h.component);
const g = t.value.querySelectorAll(`#${b}-design-item`);
g != null && g.length && Array.from(g).map((v) => {
var S;
(S = v == null ? void 0 : v.componentInstance) != null && S.value.onRemoveComponent && v.componentInstance.value.onRemoveComponent();
});
});
}
function C() {
}
function U(h) {
}
return s.value = {
canMove: c(),
canSelectParent: p(),
canDelete: y(),
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: l,
getDraggingDisplayText: u,
getPropConfig: $,
getDragScopeElement: d,
onAcceptMovedChildElement: R,
onChildElementMovedOut: O,
addNewChildComponentSchema: E,
triggerBelongedComponentToMoveWhenMoved: m(!1),
triggerBelongedComponentToDeleteWhenDeleted: m(!1),
onRemoveComponent: w,
getCustomButtons: C,
onPropertyChanged: U
}, s;
}
const Ve = /* @__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>'), p = m(t.modelValue), y = m(), r = z("design-item-context"), n = Se(y, r);
G(() => {
y.value.componentInstance = n;
}), e.expose(n.value), F(p, (u) => {
var d;
(d = a.value) == null || d.search(u), e.emit("update:modelValue", u);
}), F(() => t.modelValue, (u) => {
p.value = u;
});
function l(u) {
o.value.commitValue(u);
}
function f(u) {
e.emit("change", u);
}
return () => B("div", {
ref: y
}, [B(J("f-button-edit"), {
ref: o,
"button-content": c.value,
placeholder: s.value,
onChange: f,
"enable-clear": !0,
"button-behavior": "Execute",
modelValue: p.value,
"onUpdate:modelValue": (u) => p.value = u,
"popup-host": t.popupHost,
"popup-right-boundary": t.popupRightBoundary,
"popup-offset-x": t.popupOffsetX,
"popup-on-input": !0,
"popup-on-focus": !0
}, {
default: () => [B(X, {
ref: a,
data: i.value,
onConfirmResult: l
}, null)]
})]);
}
});
V.install = (t) => {
t.component(V.name, V);
};
V.register = (t, e, i, o) => {
t["search-box"] = V, e["search-box"] = _;
};
V.registerDesigner = (t, e, i) => {
t["search-box"] = Ve, e["search-box"] = _;
};
export {
V as FSearchBox,
V as default,
_ as propsResolver,
M as searchBoxProps
};