@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
387 lines (386 loc) • 9.68 kB
JavaScript
import { defineComponent as F, ref as a, computed as C, watch as h, createVNode as s, Fragment as R, inject as w, onMounted as j, resolveComponent as O } from "vue";
import H from "../button-edit/index.esm.js";
import { resolveAppearance as P, createPropsResolver as I } from "../dynamic-resolver/index.esm.js";
import $ from "../list-view/index.esm.js";
import D from "../loading/index.esm.js";
import { useDesignerComponent as k } from "../designer-canvas/index.esm.js";
const A = /* @__PURE__ */ new Map([
["appearance", P]
]), M = "https://json-schema.org/draft/2020-12/schema", E = "https://farris-design.gitee.io/search-box.schema.json", q = "search-box", L = "A Farris Component", N = "object", X = {
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
}
}, U = [
"id",
"type"
], z = {
$schema: M,
$id: E,
title: q,
description: L,
type: N,
properties: X,
required: U
};
function G(e, n, i) {
return n;
}
const J = "search-box", K = "A Farris Component", Q = "object", T = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, W = {
title: J,
description: K,
type: Q,
categories: T
}, V = {
/**
* 自定义图标
*/
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: "change", type: String }
}, B = I(V, z, A, G, W), Y = {
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 }
}, S = /* @__PURE__ */ F({
name: "FSearchBoxContainer",
props: Y,
emits: ["confirmResult", "searchedValue"],
setup(e, n) {
const i = a(e.data), r = a(), {
slots: p
} = n, g = C(() => ({
"search-box-container": !0,
"f-utils-overflow-xhya": !0,
"position-relative": !0
}));
function y(t) {
var d;
(d = r.value) == null || d.search(t);
}
function l(t) {
t.length && (n.emit("confirmResult", t[0][e.textField]), n.emit("searchedValue", t));
}
function f(t) {
return p.default ? s(R, null, [p.default(t)]) : s("span", null, [t.item[e.textField]]);
}
const b = C(() => {
const t = {};
return t.padding = "8px", e.maxHeight !== void 0 && e.maxHeight > 0 && (t.maxHeight = `${e.maxHeight}px`), t;
});
return h(() => e.loading, (t) => {
}), h(() => e.data, (t) => {
t !== i.value && (i.value = t), r.value.updateDataSource(t);
}), n.expose({
search: y
}), () => {
const t = {
content: f
};
return s("div", {
class: g.value,
style: b.value
}, [s(D, {
ref: "loadingInstance",
isActive: e.loading
}, null), s($, {
ref: r,
itemClass: "dropdown-item",
data: i.value,
view: "ContentView",
onClickItem: (d) => l(d.data),
idField: e.idField,
textField: e.textField,
titleField: e.textField,
valueField: e.idField
}, t)]);
};
}
}), m = /* @__PURE__ */ F({
name: "FSearchBox",
props: V,
emits: ["update:modelValue", "change", "selectedValue", "clickButton"],
setup(e, n) {
a(e.data);
const i = a(), r = a(), p = a(e.placeholder), g = '<i class="f-icon f-icon-clockwise f-icon-spin"></i>', y = C(() => e.loading ? g : e.buttonContent);
a(e.editable);
const l = a(e.modelValue);
h(l, (o) => {
var c;
(c = r.value) == null || c.search(o), n.emit("update:modelValue", o);
}), h(() => e.modelValue, (o) => {
l.value = o;
});
function f(o) {
i.value.commitValue(o);
}
function b(o) {
const c = l.value;
n.emit("change", o, {
oldValue: c,
newValue: o
});
}
function t(o) {
n.emit("selectedValue", o);
}
function d(o) {
n.emit("clickButton", o);
}
function x() {
var o;
(o = i.value) == null || o.togglePopup();
}
function u() {
var o;
(o = i.value) == null || o.hidePopup();
}
function v() {
var o;
(o = i.value) == null || o.showPopup();
}
return n.expose({
togglePopup: x,
hidePopup: u,
showPopup: v
}), () => {
const o = {
default: n.slots.default
};
return s(H, {
ref: i,
"button-content": y.value,
"custom-class": e.customClass,
updateOn: e.updateOn,
placeholder: p.value,
onChange: (c) => b(c),
onClickButton: (c) => d(c),
disable: e.disable,
"enable-clear": !0,
"button-behavior": "Execute",
modelValue: l.value,
"onUpdate:modelValue": (c) => l.value = c,
"popup-host": e.popupHost,
"popup-right-boundary": e.popupRightBoundary,
"popup-offset-x": e.popupOffsetX,
"popup-on-input": e.showDropdown,
"popup-on-focus": e.showDropdown,
limitContentBySpace: !0,
placement: "auto"
}, {
default: () => [e.showDropdown && s(S, {
ref: r,
data: e.data,
idField: e.idField,
textField: e.textField,
onConfirmResult: f,
onSearchedValue: (c) => t(c),
loading: e.loading,
maxHeight: e.maxHeight
}, o)],
...n.slots
});
};
}
}), Z = /* @__PURE__ */ F({
name: "FSearchBoxDesign",
props: V,
emits: ["update:modelValue", "change"],
setup(e, n) {
const i = a(e.data), r = a(), p = a(), g = a("请输入关键词"), y = a('<i class="f-icon f-icon-search"></i>'), l = a(e.modelValue), f = a(), b = w("design-item-context"), t = k(f, b);
j(() => {
f.value.componentInstance = t;
}), n.expose(t.value), h(l, (u) => {
var v;
(v = p.value) == null || v.search(u), n.emit("update:modelValue", u);
}), h(() => e.modelValue, (u) => {
l.value = u;
});
function d(u) {
r.value.commitValue(u);
}
function x(u) {
n.emit("change", u);
}
return () => s("div", {
ref: f
}, [s(O("f-button-edit"), {
ref: r,
"button-content": y.value,
placeholder: g.value,
onChange: x,
"enable-clear": !0,
"button-behavior": "Execute",
modelValue: l.value,
"onUpdate:modelValue": (u) => l.value = u,
"popup-host": e.popupHost,
"popup-right-boundary": e.popupRightBoundary,
"popup-offset-x": e.popupOffsetX,
"popup-on-input": !0,
"popup-on-focus": !0
}, {
default: () => [s(S, {
ref: p,
data: i.value,
onConfirmResult: d
}, null)]
})]);
}
});
m.install = (e) => {
e.component(m.name, m);
};
m.register = (e, n, i, r) => {
e["search-box"] = m, n["search-box"] = B;
};
m.registerDesigner = (e, n, i) => {
e["search-box"] = Z, n["search-box"] = B;
};
export {
m as FSearchBox,
m as default,
B as propsResolver,
V as searchBoxProps
};