@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
378 lines (377 loc) • 9 kB
JavaScript
import { radioCheckboxCommonProps as F, withInstall as P } from "../../components/common/index.esm.js";
import { resolveAppearance as V, createPropsResolver as T } from "../../components/dynamic-resolver/index.esm.js";
import G, { checkboxGroupProps as I } from "../../components/checkbox-group/index.esm.js";
import { computed as k, ref as y, watch as x, defineComponent as R, inject as S, onMounted as A, createVNode as h } from "vue";
import { useDesignerComponent as w } from "../../components/designer-canvas/index.esm.js";
import { InputBaseProperty as B } from "../../components/property-panel/index.esm.js";
const M = {
...F,
/**
* 组件标识
*/
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 D(e, t, n) {
const l = k(() => !(e.readonly && e.disabled)), o = y(e.data || e.enumData || e.options);
function s(a) {
return a[e.valueField];
}
function f(a) {
return a[e.textField];
}
function p(a) {
return a ? e.isStringValue ? a.split(e.separator) : a : [];
}
function m(a) {
const i = o.value.map((r) => s(r)).filter((r) => a.some((c) => c === String(r)));
return e.isStringValue ? i.join(e.separator) : i;
}
function b(a) {
const u = String(s(a));
return p(n.value).some((r) => r === u);
}
function g(a, u) {
if (l.value) {
let i = p(n.value) || [];
const r = String(s(a));
!i || !i.length ? i.push(r) : i.some((c) => c === r) ? i = i.filter((c) => c !== 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, () => {
o.value = e.data;
}), x(() => e.enumData, () => {
o.value = e.enumData;
}), {
enumData: o,
getValue: s,
getText: f,
checked: b,
onClickCheckbox: g
};
}
class E extends B {
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"
}
}, (o, s) => {
if (o)
switch (o.propertyID) {
case "dataSourceType": {
o.propertyValue === "static" && (t.editor.valueField = "value", t.editor.textField = "name");
break;
}
case "data": {
t.formatter && (t.formatter.data = [...o.propertyValue]);
break;
}
}
});
}
}
function $(e, t) {
const n = e.schema;
function l(o, s) {
return new E(o, t).getPropertyConfig(n, s);
}
return { getPropsConfig: l };
}
const v = /* @__PURE__ */ R({
name: "FCheckboxGroupDesign",
props: M,
emits: ["changeValue", "update:modelValue"],
setup(e, t) {
const n = y(e.modelValue), l = y(e.name), o = k(() => ({
"farris-checkradio-hor": e.direction === "horizontal"
})), {
enumData: s,
getValue: f,
getText: p
} = D(e, t, n), m = y(), b = S("designer-host-service"), g = S("design-item-context"), a = $(g, b), u = w(m, g, a);
A(() => {
m.value.componentInstance = u;
});
const i = k(() => {
if (!s.value || s.value.length === 0) {
const r = [];
return [{
value: "example1",
name: "示例一"
}, {
value: "example2",
name: "示例二"
}].map((c) => {
const d = {};
d[e.valueField] = c.value, d[e.textField] = c.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", o.value]
}, [i.value.map((r, c) => {
const d = "checkbox_" + l.value + c;
return h("div", {
class: "custom-control custom-checkbox"
}, [h("input", {
type: "checkbox",
class: "custom-control-input",
name: l.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)])]);
})]);
}
}), j = /* @__PURE__ */ new Map([
["appearance", V]
]);
function q(e, t, n) {
return t;
}
const z = "https://json-schema.org/draft/2020-12/schema", N = "https://farris-design.gitee.io/check-box.schema.json", H = "check-group", _ = "A Farris Input Component", J = "object", K = {
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"
}
}, L = [
"type"
], Q = [
"id",
"appearance",
"binding",
"visible"
], U = {
$schema: z,
$id: N,
title: H,
description: _,
type: J,
properties: K,
required: L,
ignore: Q
}, C = T(
I,
U,
j,
q
);
v.register = (e, t, n, l) => {
e["check-group"] = G, t["check-group"] = C;
};
v.registerDesigner = (e, t, n) => {
e["check-group"] = v, t["check-group"] = C;
};
const te = P(v);
export {
v as FCheckboxGroupDesigner,
C as checkBoxGroupPropsResolver,
te as default
};