@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
260 lines (259 loc) • 6.51 kB
JavaScript
import { resolveAppearance as x, createPropsResolver as k, getPropsResolverGenerator as C } from "../../components/dynamic-resolver/index.esm.js";
import { FormSchemaEntityFieldTypeName as u, withInstall as B } from "../../components/common/index.esm.js";
import V, { checkboxProps as g } from "../../components/checkbox/index.esm.js";
import { defineComponent as P, ref as c, inject as f, onMounted as S, watch as T, createVNode as d } from "vue";
import { useDesignerComponent as R } from "../../components/designer-canvas/index.esm.js";
import { InputBaseProperty as j } from "../../components/property-panel/index.esm.js";
class F extends j {
constructor(e, o) {
super(e, o);
}
getEditorProperties(e) {
return this.getComponentConfig(e, { type: "check-box" }, {
placeholder: {
visible: !1
},
disabled: {
visible: !1
},
label: {
description: "",
title: "名称",
type: "string"
},
trueValue: {
description: "选中的值",
title: "选中的值",
type: this.getBindingDataType(e),
visible: this.showCustomValue(e),
refreshPanelAfterChanged: !0,
editor: this.getEditor(e),
$converter: this.getBooleanValueConverter()
},
falseValue: {
description: "未选中的值",
title: "未选中的值",
type: this.getBindingDataType(e),
visible: this.showCustomValue(e),
refreshPanelAfterChanged: !0,
editor: this.getEditor(e),
$converter: this.getBooleanValueConverter()
}
// name: {
// description: "控件名称，提交时的唯一标识，可以为空但不能与其他控件重复",
// title: "控件名称",
// type: "string"
// }
});
}
/**
* 切换绑定属性
*/
changeBindingField(e, o, s) {
var r;
super.changeBindingField(e, o);
const n = s;
if (e.editor && ((r = n == null ? void 0 : n.type) != null && r.name)) {
let i, a;
n.type.name === u.String && (i = "true", a = "false"), n.type.name === u.Number && (i = 1, a = 0), !Object.prototype.hasOwnProperty.call(e.editor, "trueValue") && i !== void 0 && (e.editor.trueValue = i), !Object.prototype.hasOwnProperty.call(e.editor, "falseValue") && a !== void 0 && (e.editor.falseValue = a);
}
}
}
function $(t, e) {
const o = t.schema;
function s(n, r) {
return new F(n, e).getPropertyConfig(o, r);
}
return { getPropsConfig: s };
}
const w = {
/** 组件唯一标识 */
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__ */ P({
name: "FCheckBoxDesign",
props: w,
emits: [],
setup(t, e) {
const o = c(), s = c(t.id), n = c(t.indeterminate), r = f("designer-host-service"), i = f("design-item-context"), a = $(i, r), p = R(o, i, a);
return S(() => {
o.value.componentInstance = p;
}), T(() => t.indeterminate, (v) => {
n.value = v;
}), e.expose(p.value), () => d("div", {
ref: o,
dragref: `${i.schema.id}-container`,
class: "drag-container custom-control custom-checkbox"
}, [d("input", {
type: "checkbox",
class: "custom-control-input",
id: s,
value: t.value,
checked: !1,
readonly: !0
}, null), d("div", {
class: "custom-control-label"
}, [t.label])]);
}
}), I = "https://json-schema.org/draft/2020-12/schema", M = "https://farris-design.gitee.io/check-box.schema.json", N = "check-box", O = "A Farris Input Component", q = "object", A = {
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
},
onChange: {
description: "",
type: "string"
}
}, E = [
"type"
], G = [
"id",
"appearance",
"binding",
"visible"
], h = {
$schema: I,
$id: M,
title: N,
description: O,
type: q,
properties: A,
required: E,
ignore: G
}, m = /* @__PURE__ */ new Map([
["appearance", x]
]);
function b(t, e, o) {
return e;
}
const U = k(
g,
h,
m,
b
), y = C(
g,
h,
m,
b
);
l.register = (t, e, o, s, n) => {
t["check-box"] = V, e["check-box"] = y(n);
};
l.registerDesigner = (t, e, o, s) => {
t["check-box"] = l, e["check-box"] = y(s);
};
const W = B(l);
export {
l as FCheckboxDesigner,
U as checkBoxPropsResolver,
W as default,
y as propsResolverGenerator
};