@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
389 lines (388 loc) • 9.2 kB
JavaScript
import { radioCheckboxCommonProps as T, withInstall as R } from "../../components/common/index.esm.js";
import { resolveAppearance as I, createPropsResolver as A, getPropsResolverGenerator as w } from "../../components/dynamic-resolver/index.esm.js";
import B, { checkboxGroupProps as S } from "../../components/checkbox-group/index.esm.js";
import { computed as k, ref as y, watch as x, defineComponent as M, inject as C, onMounted as D, createVNode as h } from "vue";
import { useDesignerComponent as E } from "../../components/designer-canvas/index.esm.js";
import { InputBaseProperty as $ } from "../../components/property-panel/index.esm.js";
const j = {
...T,
/**
* 组件标识
*/
id: String,
/**
* 禁用组件，不允许切换单选值
*/
disabled: { type: Boolean, default: !1 },
/**
* 同disabled
*/
readonly: { type: Boolean, default: !1 },
/**
* 单选组枚举数组---废弃
*/
enumData: {
type: Array,
default: []
},
/**
* 单选组枚举数组
*/
data: {
type: Array,
default: []
},
/**
* 值类型是否为字符串
*/
isStringValue: { type: Boolean, default: !0 },
/**
* 异步获取枚举数组方法
*/
// loadData: () => Observable < { data: Array<Checkbox> } >
loadData: { type: Function },
/**
* 组件值，字符串或者数组
*/
modelValue: [String, Array],
/**
* 组件名称
*/
name: { type: String, default: "" },
/**
* 分隔符，默认逗号
*/
separator: { type: String, default: "," },
/**
* 输入框Tab键索引
*/
tabIndex: { type: Number, default: 0 },
/**
* 枚举数组中展示文本的key值。
*/
textField: { type: String, default: "name" },
/**
* 枚举数组中枚举值的key值。
*/
valueField: { type: String, default: "value" }
};
function q(e, t, n) {
const c = k(() => !(e.readonly && e.disabled)), a = y(e.data || e.enumData || e.options);
function s(o) {
return o[e.valueField];
}
function f(o) {
return o[e.textField];
}
function p(o) {
return o ? e.isStringValue ? o.split(e.separator) : o : [];
}
function m(o) {
const i = a.value.map((r) => s(r)).filter((r) => o.some((l) => l === String(r)));
return e.isStringValue ? i.join(e.separator) : i;
}
function b(o) {
const u = String(s(o));
return p(n.value).some((r) => r === u);
}
function g(o, u) {
if (c.value) {
let i = p(n.value) || [];
const r = String(s(o));
!i || !i.length ? i.push(r) : i.some((l) => l === r) ? i = i.filter((l) => l !== r) : i.push(r), n.value = m(i), t.emit("changeValue", n.value), t.emit("update:modelValue", n.value);
}
u.stopPropagation();
}
return x(() => e.data, () => {
a.value = e.data;
}), x(() => e.enumData, () => {
a.value = e.enumData;
}), {
enumData: a,
getValue: s,
getText: f,
checked: b,
onClickCheckbox: g
};
}
class z extends $ {
constructor(t, n) {
super(t, n);
}
getEditorProperties(t) {
const n = this;
return n.getComponentConfig(t, { type: "check-group" }, {
placeholder: {
visible: !1
},
disabled: {
visible: !1
},
direction: {
description: "",
title: "排列方向",
type: "enum",
editor: {
data: [
{ id: "horizontal", name: "横向" },
{ id: "vertical", name: "纵向" }
]
}
},
dataSourceType: {
description: "",
title: "数据源类型",
type: "enum",
visible: !1,
editor: {
default: "static",
data: [
{ id: "static", name: "静态" },
{ id: "dynamic", name: "动态" }
]
},
refreshPanelAfterChanged: !0
},
data: {
description: "",
title: "数据",
type: "array",
visible: !t.editor.dataSourceType || t.editor.dataSourceType === "static",
...n.getItemCollectionEditor(t, t.editor.valueField, t.editor.textField),
// 这个属性，标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0
},
bindDataSource: {
description: "",
title: "绑定数据源",
type: "string",
visible: t.editor.dataSourceType === "dynamic"
},
textField: {
description: "",
title: "文本字段",
type: "string",
readonly: t.editor.dataSourceType !== "dynamic"
},
valueField: {
description: "",
title: "值字段",
type: "string",
readonly: t.editor.dataSourceType !== "dynamic"
}
}, (a, s) => {
if (a)
switch (a.propertyID) {
case "dataSourceType": {
a.propertyValue === "static" && (t.editor.valueField = "value", t.editor.textField = "name");
break;
}
case "data": {
t.formatter && (t.formatter.data = [...a.propertyValue]);
break;
}
}
});
}
}
function N(e, t) {
const n = e.schema;
function c(a, s) {
return new z(a, t).getPropertyConfig(n, s);
}
return { getPropsConfig: c };
}
const v = /* @__PURE__ */ M({
name: "FCheckboxGroupDesign",
props: j,
emits: ["changeValue", "update:modelValue"],
setup(e, t) {
const n = y(e.modelValue), c = y(e.name), a = k(() => ({
"farris-checkradio-hor": e.direction === "horizontal"
})), {
enumData: s,
getValue: f,
getText: p
} = q(e, t, n), m = y(), b = C("designer-host-service"), g = C("design-item-context"), o = N(g, b), u = E(m, g, o);
D(() => {
m.value.componentInstance = u;
});
const i = k(() => {
if (!s.value || s.value.length === 0) {
const r = [];
return [{
value: "example1",
name: "示例一"
}, {
value: "example2",
name: "示例二"
}].map((l) => {
const d = {};
d[e.valueField] = l.value, d[e.textField] = l.name, r.push(d);
}), r;
}
return s.value;
});
return t.expose(u.value), x(() => e.modelValue, (r) => {
n.value = r, t.emit("changeValue", n.value);
}), () => h("div", {
ref: m,
class: ["farris-input-wrap", a.value]
}, [i.value.map((r, l) => {
const d = "checkbox_" + c.value + l;
return h("div", {
class: "custom-control custom-checkbox"
}, [h("input", {
type: "checkbox",
class: "custom-control-input",
name: c.value,
id: d,
value: f(r),
checked: !1,
readonly: !0,
disabled: !0
}, null), h("label", {
class: "custom-control-label",
for: d,
title: p(r)
}, [p(r)])]);
})]);
}
}), F = /* @__PURE__ */ new Map([
["appearance", I],
["onChange", "onChangeValue"]
]);
function P(e, t, n) {
return t;
}
const H = "https://json-schema.org/draft/2020-12/schema", _ = "https://farris-design.gitee.io/check-box.schema.json", J = "check-group", K = "A Farris Input Component", L = "object", Q = {
id: {
description: "The unique identifier for a check box",
type: "string"
},
type: {
description: "The type string of check box component",
type: "string",
default: "check-group"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disabled: {
description: "",
type: "boolean",
default: !1
},
textField: {
description: "",
type: "string",
default: "name"
},
valueField: {
description: "",
type: "string",
default: "value"
},
dataSourceType: {
description: "",
type: "string",
default: "static"
},
data: {
description: "",
type: "array"
},
bindDataSource: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
separator: {
description: "",
type: "string",
default: ","
},
name: {
description: "",
type: "string",
default: ""
},
required: {
description: "",
type: "boolean",
default: !1
},
direction: {
description: "",
type: "string",
default: "horizontal"
},
onChange: {
description: "",
type: "string"
}
}, U = [
"type"
], W = [
"id",
"appearance",
"binding",
"visible"
], V = {
$schema: H,
$id: _,
title: J,
description: K,
type: L,
properties: Q,
required: U,
ignore: W
}, ne = A(
S,
V,
F,
P
), G = w(
S,
V,
F,
P
);
v.register = (e, t, n, c, a) => {
e["check-group"] = B, t["check-group"] = G(a);
};
v.registerDesigner = (e, t, n, c) => {
e["check-group"] = v, t["check-group"] = G(c);
};
const re = R(v);
export {
v as FCheckboxGroupDesigner,
ne as checkBoxGroupPropsResolver,
re as default,
G as propsResolverGenerator
};