@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
260 lines (259 loc) • 6.37 kB
JavaScript
import v, { switchProps as g } from "../../components/switch/index.esm.js";
import { FormSchemaEntityFieldTypeName as p, withInstall as b } from "../../components/common/index.esm.js";
import { defineComponent as C, toRefs as V, ref as P, inject as u, onMounted as S, computed as f, createVNode as l } from "vue";
import { useDesignerComponent as B } from "../../components/designer-canvas/index.esm.js";
import { InputBaseProperty as F } from "../../components/property-panel/index.esm.js";
import { resolveAppearance as R, createPropsResolver as j } from "../../components/dynamic-resolver/index.esm.js";
class M extends F {
constructor(e, i) {
super(e, i);
}
getEditorProperties(e) {
return this.getComponentConfig(e, {
type: "switch"
}, {
disabled: {
visible: !1
},
placeholder: {
visible: !1
},
onLabel: {
description: "",
title: "打开标签",
type: "string"
},
offLabel: {
description: "",
title: "关闭标签",
type: "string"
},
onBackground: {
description: "值可以是颜色或者16进制颜色字符串，比如：blue或者#2A87FF",
title: "打开背景色",
type: "string"
},
offBackground: {
description: "值可以是颜色或者16进制颜色字符串，比如：gray或者#D9DEE7",
title: "关闭背景色",
type: "string"
},
size: {
description: "",
title: "尺寸",
type: "enum",
editor: {
data: [
{
id: "small",
name: "小号"
},
{
id: "medium",
name: "中号"
},
{
id: "large",
name: "大号"
}
]
}
},
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()
}
});
}
/**
* 切换绑定属性
*/
changeBindingField(e, i, n) {
var o;
super.changeBindingField(e, i);
const t = n;
if (e.editor && ((o = t == null ? void 0 : t.type) != null && o.name)) {
let r, a;
t.type.name === p.String && (r = "true", a = "false"), t.type.name === p.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 k(s, e) {
const i = s.schema;
function n(t, o) {
return new M(t, e).getPropertyConfig(i, o);
}
return { getPropsConfig: n };
}
const c = /* @__PURE__ */ C({
name: "FSwitchDesign",
props: g,
emits: ["update:modelValue"],
setup(s, e) {
const {
size: i,
onLabel: n,
offLabel: t
} = V(s), o = P(), r = u("designer-host-service"), a = u("design-item-context"), m = k(a, r), d = B(o, a, m);
S(() => {
o.value.componentInstance = d;
}), e.expose(d.value);
const y = f(() => ({
switch: !0,
"f-cmp-switch": !0,
checked: !1,
"switch-large": i.value === "large",
"switch-medium": i.value === "medium",
"switch-small": i.value === "small"
})), w = f(() => (n == null ? void 0 : n.value) || (t == null ? void 0 : t.value));
return () => l("span", {
ref: o,
tabindex: "0",
role: "button",
class: y.value
}, [w.value && l("span", {
class: "switch-pane"
}, [l("span", {
class: "switch-label-unchecked"
}, [t == null ? void 0 : t.value])]), l("small", null, [e.slots.default && e.slots.default()])]);
}
}), E = /* @__PURE__ */ new Map([
["appearance", R],
["onChange", "onModelValueChanged"]
]), T = "https://json-schema.org/draft/2020-12/schema", $ = "https://farris-design.gitee.io/switch.schema.json", x = "switch", A = "A Farris Component", I = "object", q = {
id: {
description: "The unique identifier for a switch",
type: "string"
},
type: {
description: "The type string of switch component",
type: "string",
default: "switch"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disabled: {
type: "boolean",
default: !1
},
onBackground: {
description: "",
type: "string",
default: ""
},
offBackground: {
description: "",
type: "string",
default: ""
},
onColor: {
description: "",
type: "string",
default: ""
},
offColor: {
description: "",
type: "string",
default: ""
},
onLabel: {
description: "",
type: "string",
default: ""
},
offLabel: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
size: {
description: "",
type: "enum",
default: "medium"
},
required: {
description: "",
type: "boolean",
default: !1
},
trueValue: {
description: "",
type: "boolean",
default: !0
},
falseValue: {
description: "",
type: "boolean",
default: !1
},
onChange: {
description: "",
type: "string"
}
}, O = [
"type"
], z = [
"id",
"appearance",
"binding"
], N = {
$schema: T,
$id: $,
title: x,
description: A,
type: I,
properties: q,
required: O,
ignore: z
};
function G(s, e, i) {
return e;
}
const h = j(g, N, E, G);
c.register = (s, e, i, n) => {
s.switch = v, e.switch = h;
};
c.registerDesigner = (s, e, i) => {
s.switch = c, e.switch = h;
};
const W = b(c);
export {
c as FSwitchDesign,
W as default,
h as propsResolver
};