@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
412 lines (411 loc) • 9.8 kB
JavaScript
import { FormSchemaEntityFieldTypeName as w, withInstall as P } from "../../components/common/index.esm.js";
import S, { numberSpinnerProps as F } from "../../components/number-spinner/index.esm.js";
import { computed as d, createVNode as o, Fragment as M, defineComponent as N, ref as y, inject as x, onMounted as j } from "vue";
import { resolveAppearance as A, createPropsResolver as B } from "../../components/dynamic-resolver/index.esm.js";
import { useDesignerComponent as R } from "../../components/designer-canvas/index.esm.js";
import { InputBaseProperty as V } from "../../components/property-panel/index.esm.js";
const I = /* @__PURE__ */ new Map([
["appearance", A]
]), O = "https://json-schema.org/draft/2020-12/schema", k = "https://farris-design.gitee.io/number-spinner.schema.json", T = "number-spinner", q = "A Farris Input Component", E = "object", $ = {
id: {
description: "The unique identifier for a number spinner",
type: "string"
},
type: {
description: "The type string of number spinner component",
type: "string",
default: "number-spinner"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: "请输入数字"
},
readonly: {
description: "",
type: "boolean",
default: !1
},
disabled: {
description: "",
type: "boolean",
default: !1
},
required: {
description: "",
type: "boolean",
default: !1
},
precision: {
description: "",
type: "number",
default: 0
},
min: {
description: "",
type: "number"
},
step: {
description: "",
type: "number",
default: 1
},
tabindex: {
description: "",
type: "number",
default: -1
},
textAlign: {
description: "",
type: "string",
enum: [
"left",
"middle",
"right"
],
default: "left"
},
nullable: {
description: "",
type: "boolean",
default: !1
},
max: {
description: "",
type: "number"
},
onBlur: {
description: "",
type: "string",
default: ""
},
onClickLinkLabel: {
description: "",
type: "string",
default: ""
},
showZero: {
description: "",
type: "boolean",
default: !0
},
useThousands: {
description: "",
type: "boolean",
default: !0
},
keyboard: {
description: "",
type: "boolean",
default: !0
},
bigNumber: {
description: "",
type: "boolean",
default: !1
},
updateOn: {
description: "",
type: "string",
default: "blur"
},
showButton: {
description: "",
type: "boolean",
default: !0
},
needValid: {
description: "",
type: "boolean",
default: !1
},
expandable: {
description: "",
type: "boolean",
default: !1
},
expandMode: {
description: "",
type: "string",
default: "text"
},
expandContent: {
description: "",
type: "string",
default: ""
},
expandDisabled: {
description: "",
type: "boolean",
default: !1
},
onExpandClick: {
description: "",
type: "string",
default: ""
}
}, L = [
"type"
], G = [
"id",
"appearance",
"binding",
"visible"
], H = {
$schema: O,
$id: k,
title: T,
description: q,
type: E,
properties: $,
required: L,
ignore: G
};
function Z(n, e, t) {
return e;
}
const v = Object.assign({}, F, {
readonly: {}
}), C = B(v, H, I, Z);
function z(n) {
const e = d(() => ({
"btn-group": !0,
"btn-group-number": !0
})), t = d(() => ({
btn: !0,
"btn-secondary": !0,
"btn-number-flag": !0
})), i = d(() => ({
cursor: "pointer",
"margin-left": 0
})), s = d(() => ({
cursor: "pointer",
"margin-left": 0
})), r = d(() => ({
"input-group-append input-append-wrapper": !0,
"input-append-button": n.expandMode === "button",
"input-append-text": n.expandMode === "text"
}));
return () => o(M, null, [!!n.showButton && o("div", {
class: e.value
}, [o("button", {
class: t.value,
style: i.value
}, [o("span", {
class: "f-icon f-icon-arrow-chevron-up number-arrow-chevron"
}, null)]), o("button", {
class: t.value,
style: s.value
}, [o("span", {
class: "f-icon f-icon-arrow-chevron-down number-arrow-chevron"
}, null)])]), n.expandable && n.expandContent && o("div", {
class: r.value
}, [o("div", {
class: "input-group-text",
style: "padding-left: 8px",
innerHTML: n.expandContent
}, null)])]);
}
class J extends V {
constructor(e, t) {
super(e, t);
}
getEditorProperties(e) {
var r, l, c, p, a, b, f, g;
let t, i = !1;
if (((r = e == null ? void 0 : e.binding) == null ? void 0 : r.type) === "Form") {
const u = this.schemaService.getFieldByIDAndVMID(e.binding.field, this.viewModelId);
(l = u == null ? void 0 : u.schemaField) != null && l.type && (t = u.schemaField.type.precision, i = u.schemaField.type.name === "BigNumber");
}
return this.getComponentConfig(e, { type: "number-spinner" }, {
precision: {
description: "",
title: "精度",
type: "number",
editor: {
readonly: t === 0,
min: 0,
max: t,
needValid: !0
},
refreshPanelAfterChanged: !0
},
step: {
description: "",
title: "步长",
type: "number",
editor: {
min: 1,
needValid: !0,
precision: (c = e == null ? void 0 : e.editor) == null ? void 0 : c.precision
}
},
min: {
description: "",
title: "最小值",
type: "number",
editor: {
nullable: !0,
max: (p = e == null ? void 0 : e.editor) == null ? void 0 : p.max,
precision: (a = e == null ? void 0 : e.editor) == null ? void 0 : a.precision,
bigNumber: i,
needValid: !0
},
refreshPanelAfterChanged: !0,
visible: this.designViewModelField != null || this.formRule != null
},
max: {
description: "",
title: "最大值",
type: "number",
editor: {
nullable: !0,
min: ((b = e == null ? void 0 : e.editor) == null ? void 0 : b.min) === void 0 || (f = e == null ? void 0 : e.editor) == null ? void 0 : f.min,
precision: (g = e == null ? void 0 : e.editor) == null ? void 0 : g.precision,
bigNumber: i,
needValid: !0
},
refreshPanelAfterChanged: !0,
visible: this.designViewModelField != null || this.formRule != null
},
textAlign: {
description: "",
title: "对齐方式",
type: "enum",
editor: {
editable: !1,
data: [
{
id: "left",
name: "左对齐"
},
{
id: "center",
name: "居中"
},
{
id: "right",
name: "右对齐"
}
]
}
},
bigNumber: {
description: "",
title: "支持大数字",
type: "boolean",
readonly: !0,
visible: i
},
showZero: {
description: "",
title: "显示0值",
type: "boolean"
},
nullable: {
description: "允许设置为 null",
title: "允许为空",
type: "boolean"
},
useThousands: {
description: "",
title: "启用千分位",
type: "boolean"
},
showButton: {
description: "",
title: "显示加减按钮",
type: "boolean"
}
}, function(u, h, Q) {
if (u)
switch (u.propertyID) {
case "precision": {
h.formatter && (h.formatter.precision = u.propertyValue);
break;
}
}
});
}
/**
* 切换绑定属性
*/
changeBindingField(e, t, i) {
var r;
super.changeBindingField(e, t);
const s = i;
e.editor && ((r = s == null ? void 0 : s.type) == null ? void 0 : r.name) === w.Number && (e.editor.precision = s.type.precision);
}
}
function K(n, e) {
const t = n.schema;
function i(s, r) {
return new J(s, e).getPropertyConfig(t, r);
}
return { getPropsConfig: i };
}
const m = /* @__PURE__ */ N({
name: "FNumberSpinnerDesign",
props: v,
emits: ["update:modelValue", "valueChange", "change", "blur", "focus", "click", "input"],
setup(n, e) {
const t = z(n), i = y(), s = x("designer-host-service"), r = x("design-item-context"), l = K(r, s), c = R(i, r, l);
j(() => {
i.value.componentInstance = c;
});
const p = d(() => ({
"form-control": !0,
"text-left": n.textAlign === "left",
"text-center": n.textAlign === "center",
"text-right": n.textAlign === "right"
}));
e.expose(c.value);
const a = y();
return () => o("div", {
ref: i,
class: "f-cmp-inputgroup input-group flex-row f-cmp-number-spinner",
style: "pointer-events: none;"
}, [o("input", {
ref: a,
class: p.value,
readonly: !0,
placeholder: n.placeholder
}, null), t()]);
}
});
m.register = (n, e, t, i) => {
n["number-spinner"] = S, e["number-spinner"] = C;
};
m.registerDesigner = (n, e, t) => {
n["number-spinner"] = m, e["number-spinner"] = C;
};
const ee = P(m);
export {
m as FNumberSpinnerDesign,
ee as default,
v as numberSpinnerDesignProps,
C as propsResolver
};