@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
251 lines (250 loc) • 6.46 kB
JavaScript
import { resolveAppearance as m, createPropsResolver as y } from "../../components/dynamic-resolver/index.esm.js";
import { FormSchemaEntityFieldTypeName as u, withInstall as b } from "../../components/common/index.esm.js";
import v, { checkboxProps as x } from "../../components/checkbox/index.esm.js";
import { defineComponent as k, ref as c, inject as f, onMounted as B, watch as C, createVNode as d } from "vue";
import { useDesignerComponent as V } from "../../components/designer-canvas/index.esm.js";
import { InputBaseProperty as P } from "../../components/property-panel/index.esm.js";
class S extends P {
constructor(e, t) {
super(e, t);
}
getEditorProperties(e) {
var t, n;
return this.getComponentConfig(e, { type: "check-box" }, {
placeholder: {
visible: !1
},
disabled: {
visible: !1
},
label: {
description: "",
title: "名称",
type: "string"
},
trueValue: {
description: "选中的值",
title: "选中的值",
type: this.getBindingDataType(),
visible: ((t = this.designViewModelField) == null ? void 0 : t.type.name) !== "Boolean",
refreshPanelAfterChanged: !0,
editor: this.getEditor(),
$converter: this.getBooleanValueConverter()
},
falseValue: {
description: "未选中的值",
title: "未选中的值",
type: this.getBindingDataType(),
visible: ((n = this.designViewModelField) == null ? void 0 : n.type.name) !== "Boolean",
refreshPanelAfterChanged: !0,
editor: this.getEditor(),
$converter: this.getBooleanValueConverter()
}
// name: {
// description: "控件名称，提交时的唯一标识，可以为空但不能与其他控件重复",
// title: "控件名称",
// type: "string"
// }
});
}
/**
* 切换绑定属性
*/
changeBindingField(e, t, n) {
var s;
super.changeBindingField(e, t);
const i = n;
if (e.editor && ((s = i == null ? void 0 : i.type) != null && s.name)) {
let r, a;
i.type.name === u.String && (r = "true", a = "false"), i.type.name === u.Number && (r = 1, a = 0), !Object.prototype.hasOwnProperty.call(e.editor, "trueValue") && r !== void 0 && (e.editor.trueValue = r), !Object.prototype.hasOwnProperty.call(e.editor, "falseValue") && a !== void 0 && (e.editor.falseValue = a);
}
}
}
function T(o, e) {
const t = o.schema;
function n(i, s) {
return new S(i, e).getPropertyConfig(t, s);
}
return { getPropsConfig: n };
}
const F = {
/** 组件唯一标识 */
id: { Type: String, default: "" },
/** 自定义样式 */
customClass: { Type: String, default: "" },
/** 禁用状态 */
disabled: { Type: Boolean, default: !1 },
/**
* 功能同disabled
*/
readonly: { type: Boolean, default: !1 },
/** 中间状态 */
indeterminate: { Type: Boolean, default: !1 },
/** 选择状态 */
modelValue: { Type: Boolean, default: !1 },
/**
* 作为内嵌编辑器被创建后默认获得焦点
*/
focusOnCreated: { type: Boolean, default: !1 },
/** 选中的值 value与modelValue重合 TODO*/
value: { type: String, default: "" },
/** name值 */
name: { type: String, default: "" },
/** 标识是否被选中 */
checked: { type: Boolean, default: !1 },
/** 显示文本标签 */
label: { type: String, default: "" },
trueValue: { type: [String, Number, Boolean], default: !0 },
falseValue: { type: [String, Number, Boolean], default: !1 }
}, l = /* @__PURE__ */ k({
name: "FCheckBoxDesign",
props: F,
emits: [],
setup(o, e) {
const t = c(), n = c(o.id), i = c(o.indeterminate), s = f("designer-host-service"), r = f("design-item-context"), a = T(r, s), p = V(t, r, a);
return B(() => {
t.value.componentInstance = p;
}), C(() => o.indeterminate, (h) => {
i.value = h;
}), e.expose(p.value), () => d("div", {
ref: t,
dragref: `${r.schema.id}-container`,
class: "drag-container custom-control custom-checkbox"
}, [d("input", {
type: "checkbox",
class: "custom-control-input",
id: n,
value: o.value,
checked: !1,
readonly: !0
}, null), d("div", {
class: "custom-control-label"
}, [o.label])]);
}
}), j = "https://json-schema.org/draft/2020-12/schema", M = "https://farris-design.gitee.io/check-box.schema.json", R = "check-box", $ = "A Farris Input Component", w = "object", I = {
id: {
description: "The unique identifier for a check box",
type: "string"
},
type: {
description: "The type string of check box component",
type: "string",
default: "check-box"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disabled: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
text: {
description: "",
type: "string",
default: ""
},
value: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
},
required: {
description: "",
type: "boolean",
default: !1
},
label: {
description: "",
type: "string",
default: ""
},
trueValue: {
description: "",
type: "boolean",
default: !0
},
falseValue: {
description: "",
type: "boolean",
default: !1
}
}, N = [
"type"
], O = [
"id",
"appearance",
"binding",
"visible"
], q = {
$schema: j,
$id: M,
title: R,
description: $,
type: w,
properties: I,
required: N,
ignore: O
}, A = /* @__PURE__ */ new Map([
["appearance", m]
]);
function E(o, e, t) {
return e;
}
const g = y(
x,
q,
A,
E
);
l.register = (o, e, t, n) => {
o["check-box"] = v, e["check-box"] = g;
};
l.registerDesigner = (o, e, t) => {
o["check-box"] = l, e["check-box"] = g;
};
const L = b(l);
export {
l as FCheckboxDesigner,
g as checkBoxPropsResolver,
L as default
};