@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
691 lines (690 loc) • 19.8 kB
JavaScript
import { useTextBoxDesign as I, withInstall as F } from "../../components/common/index.esm.js";
import { resolveAppearance as A, createPropsResolver as P, getPropsResolverGenerator as k } from "../../components/dynamic-resolver/index.esm.js";
import M, { inputGroupProps as b } from "../../components/input-group/index.esm.js";
import { createVNode as a, Fragment as S, createTextVNode as $, defineComponent as G, ref as c, inject as y, computed as Z, onMounted as H } from "vue";
import { useDesignerComponent as N } from "../../components/designer-canvas/index.esm.js";
import { InputBaseProperty as L } from "../../components/property-panel/index.esm.js";
const E = {
id: { Type: String, default: "" },
/** 是否自动完成 */
autocomplete: { Type: String, default: "off" },
/** 自定义CLASS */
customClass: { Type: String, default: "" },
/** 禁用 */
disabled: { Type: Boolean, default: !1 },
/** 允许编辑 */
editable: { Type: Boolean, default: !0 },
/** 启用清除按钮 */
enableClear: { Type: Boolean, default: !0 },
/** 启用提示文本 */
enableTitle: { Type: Boolean, default: !0 },
/** 能否查看密码 */
enableViewPassword: { Type: Boolean, default: !0 },
/** 始终显示占位符文本 */
forcePlaceholder: { Type: Boolean, default: !1 },
/** 扩展按钮 */
groupText: { Type: String, default: "" },
/** 密码模式 */
showType: { Type: String, default: "text" },
/** 密码模式 --废弃*/
type: { Type: String, default: "text" },
/** 最大值 */
max: { type: [Number, String] },
/** 最小值 */
min: { type: [Number, String] },
/** 最大长度 */
maxLength: { Type: Number || void 0, default: void 0 },
/** 最小长度 */
minLength: { Type: Number || void 0, default: void 0 },
/** 组件值 */
modelValue: { Type: String || Boolean, default: "" },
/** 隐藏边线 */
showBorder: { Type: Boolean, default: !0 },
/** 步长 */
step: { Type: Number, default: 1 },
/** 启用提示信息 */
placeholder: { Type: String, default: "" },
precision: { Type: Number, default: 0 },
/** 只读 */
readonly: { Type: Boolean, default: !1 },
/** 当组件禁用或只读时显示后边的按钮 */
showButtonWhenDisabled: { Type: Boolean, default: !1 },
/** tab索引 */
tabIndex: { Type: Number, default: 0 },
/** 文本在输入框中的对齐方式 */
textAlign: { Type: String, default: "left" },
/** 是否启用前置扩展信息；在输入框前面 显示 ① 图标鼠标滑过后显示 */
useExtendInfo: { Type: Boolean, default: !1 },
/** 前置扩展信息 */
extendInfo: { Type: String, default: "" },
/** 输入值 */
value: { Type: String, default: "" },
/** 是否撑开高度 */
autoHeight: { type: Boolean, default: !1 },
/** 自动聚焦 */
autofocus: { type: Boolean, default: !1 },
/** 文本区域可见的行数 */
rows: { type: Number, default: 2 },
/** 展示输入文本数量 */
showCount: { type: Boolean, default: !1 },
showZero: { type: Boolean, default: !1 },
/**
* 作为内嵌编辑器被创建后默认获得焦点
*/
focusOnCreated: { type: Boolean, default: !1 },
/**
* 作为内嵌编辑器被创建后默认选中文本
*/
selectOnCreated: { type: Boolean, default: !1 },
/**
* modelValue 更新时机， 默认 blur； 可选值：blur | input
* - blur: 离开焦点时更新
* - change: 输入时更新
*/
updateOn: { type: String, default: "blur" },
formatValidation: { type: Object, default: {} },
/**
* 是否启用快捷键
*/
keyboard: { type: Boolean, default: !0 }
}, v = [
{ key: "none", value: "无" },
{ key: "cellNumber", value: "手机号" },
{ key: "tel", value: "座机号/传真号" },
{ key: "telOrCell", value: "手机号/座机号/传真号" },
{ key: "postCode", value: "邮编" },
{ key: "email", value: "电子邮箱" },
{ key: "idCode", value: "身份证号" },
{ key: "carCode", value: "车牌号" },
{ key: "subjectCode", value: "10位数字会计科目代码" },
{ key: "custom", value: "自定义" }
];
function R(n) {
switch (n) {
case "none":
return "";
case "cellNumber":
return "^1[0-9]{10}$";
case "tel":
return "^(0[0-9]{2,3}\\-)?([2-9][0-9]{6,7})+(\\-[0-9]{1,4})?$";
case "telOrCell":
return "^(0[0-9]{2,3}\\-)?([2-9][0-9]{6,7})+(\\-[0-9]{1,4})?$|^1[0-9]{10}$";
case "postCode":
return "^[1-9]\\d{5}(?!\\d)$";
case "workCode":
return "^\\d{8}$";
case "email":
return "^[A-Za-z\\d]+([-_.][A-Za-z\\d]+)*@([A-Za-z\\d]+[-.])+[A-Za-z]{2,5}$";
case "idCode":
return "^[1-9]\\d{5}[1-9]\\d{3}((0[1-9])|(1[0-2]))(0[1-9]|([1|2][0-9])|3[0-1])((\\d{4})|\\d{3}X)$";
case "carCode":
return "^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][·\\s]?[A-HJ-NP-Z0-9]{4,5}[挂学警港澳]?|粤[Z港澳][·\\s]?[港澳][0-9A-HJ-NP-Z]{4}|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼][A-Z][·\\s]?([DF][0-9A-HJ-NP-Z][0-9]{4}|[0-9]{5}[DF])[挂港澳]?|[使领][0-9]{3}[·\\s]?[0-9]{3}|临[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼][A-Z][·\\s]?[0-9A-Z]{4,5}|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼][A-Z]?[·\\s]?警[0-9A-Z]{4}|[军海空][A-Z][·\\s]?[0-9]{4,5}|WJ(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼]|\\d{2})[·\\s]?[0-9A-Z]{4,5})$";
case "carCodeNew":
return "^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$";
case "subjectCode":
return "^\\d{10}$";
}
return "";
}
function j(n) {
var e;
return "请输入正确的" + ((e = v.find((t) => t.key === n)) == null ? void 0 : e.value);
}
const O = {
convertTo: (n, e, t, o) => {
n.editor.formatValidation || (n.editor.formatValidation = { type: "none" }), n.editor.formatValidation.type = t, n.editor.formatValidation.expression = R(t), n.editor.formatValidation.message = j(t);
},
convertFrom: (n, e, t) => n.editor.formatValidation ? e === "type" ? n.editor.formatValidation[e] || "none" : n.editor.formatValidation[e] : "none"
}, m = {
convertTo: (n, e, t, o) => {
n.editor.formatValidation || (n.editor.formatValidation = { type: "none" }), n.editor.formatValidation[e] = t;
},
convertFrom: (n, e, t) => n.editor.formatValidation ? n.editor.formatValidation[e] : n.editor[e]
}, J = ["lookup", "more-vertical", "add", "edit", "x", "search", "image-edit", "copy", "source-code", "top_developmenttool", "reorder", "reload"];
function q(n, e, t) {
const o = `<i class="f-icon f-icon-${e}"></i>`;
t.value.insertText ? t.value.insertText(o) : t.value.setValue(o);
}
const h = (n) => a(S, null, [a("h5", null, [$("按钮图标示例")]), a("ul", {
class: "d-flex",
style: "width: 200px; flex-wrap: wrap;align-items: center;height: 100px;"
}, [J.map((e) => a("li", {
key: e,
class: "btn",
title: "双击添加到内容区域",
onDblclick: (t) => q(t, e, n)
}, [a("i", {
class: `f-icon f-icon-${e}`
}, null)]))])]);
class z extends L {
constructor(e, t) {
super(e, t);
}
getPropertyConfig(e, t) {
return super.getPropertyConfig(e, t), this.propertyConfig.categories.formatValidation = this.getFormatValidation(e), this.propertyConfig;
}
getEditorProperties(e) {
var o, r;
let t;
if (((o = e == null ? void 0 : e.binding) == null ? void 0 : o.type) === "Form") {
const i = this.schemaService.getFieldByIDAndVMID(e.binding.field, this.viewModelId);
(r = i == null ? void 0 : i.schemaField) != null && r.type && (t = i.schemaField.type.length);
}
return this.getComponentConfig(e, {}, {
maxLength: {
description: "文本字数最大长度",
title: "最大长度",
type: "number",
editor: {
nullable: !0,
min: 0,
useThousands: !1,
max: t,
needValid: !0
}
},
showType: {
description: "指定是文本框还是密码框",
title: "展示类型",
type: "enum",
editor: {
type: "combo-list",
data: [
{ id: "text", name: "文本框" },
{ id: "password", name: "密码框" }
]
},
refreshPanelAfterChanged: !0,
defaultValue: "text"
},
enableViewPassword: {
description: "",
title: "能否查看密码",
visible: e.editor.showType === "password",
type: "boolean"
},
groupText: {
description: "按钮文本",
title: "按钮文本",
type: "string",
refreshPanelAfterChanged: !0,
visible: e.editor.showType === "text" || !e.editor.showType,
editor: {
type: "code-editor",
language: "html",
leftTemplate: h
}
}
});
}
getGridFieldEdtiorProperties(e) {
var o, r;
let t;
if (((o = e == null ? void 0 : e.binding) == null ? void 0 : o.type) === "Form") {
const i = this.schemaService.getFieldByIDAndVMID(e.binding.field, this.viewModelId);
(r = i == null ? void 0 : i.schemaField) != null && r.type && (t = i.schemaField.type.length);
}
return this.getComponentConfig(e, {}, {
maxLength: {
description: "文本字数最大长度",
title: "最大长度",
type: "number",
editor: {
nullable: !0,
min: 0,
useThousands: !1,
max: t
}
},
showType: {
description: "指定是文本框还是密码框",
title: "展示类型",
type: "enum",
editor: {
type: "combo-list",
data: [
{ id: "text", name: "文本框" },
{ id: "password", name: "密码框" }
]
},
refreshPanelAfterChanged: !0,
defaultValue: "text"
},
enableViewPassword: {
description: "",
title: "能否查看密码",
visible: e.editor.showType === "password",
type: "boolean"
},
groupText: {
description: "按钮文本",
title: "按钮文本",
type: "string",
refreshPanelAfterChanged: !0,
visible: e.editor.showType === "text" || !e.editor.showType,
editor: {
type: "code-editor",
language: "html",
leftTemplate: h
}
}
});
}
getFormatValidation(e) {
var o, r, i, d;
const t = {
title: "输入格式校验",
description: "输入校验",
hide: !((o = e.binding) != null && o.field) && !!this.formRule,
properties: {
type: {
title: "格式类型",
type: "enum",
description: "格式类型",
defaultValue: "",
editor: {
type: "combo-list",
textField: "value",
valueField: "key",
idField: "key",
editable: !1,
data: v
},
refreshPanelAfterChanged: !0,
$converter: O,
parentPropertyID: "formatValidation"
}
}
};
return (r = e.editor.formatValidation) != null && r.type && ((i = e.editor.formatValidation) == null ? void 0 : i.type) !== "none" && (t.properties.message = {
title: "输入错误提示",
type: "string",
description: "输入错误提示",
$converter: m,
parentPropertyID: "formatValidation"
}), ((d = e.editor.formatValidation) == null ? void 0 : d.type) === "custom" && (t.properties.expression = {
title: "匹配正则",
type: "string",
description: "匹配正则",
$converter: m,
parentPropertyID: "formatValidation"
}), t;
}
getEventPropertyConfig(e) {
const t = this;
let o = [...this.getInputCommonEvents(e)];
(!e.editor.showType || e.editor.showType === "text") && e.editor.groupText && e.editor.groupText.trim().length > 0 && (o = [
...this.getInputCommonEvents(e),
{ label: "onClickHandle", name: "按钮点击事件" }
]);
const r = t.eventsEditorUtils.formProperties(e, t.viewModelId, o);
return {
title: "事件",
hideTitle: !0,
properties: t.createBaseEventProperty(r),
// 这个属性，标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
tabId: "commands",
tabName: "交互",
setPropertyRelates(d, s) {
const l = d.propertyValue;
delete s[t.viewModelId], l && (t.eventsEditorUtils.saveRelatedParameters(s, t.viewModelId, l.events, l), t.updateLinkedLabel(l, s));
const u = t.designViewModelUtils.getDgViewModel(t.viewModelId);
u && t.designViewModelField && u.changeField(t.designViewModelField.id, { valueChanging: s.fieldValueChanging, valueChanged: s.fieldValueChanged });
}
};
}
}
function U(n, e) {
const t = n.schema;
function o(r, i) {
return new z(r, e).getPropertyConfig(t, i);
}
return { getPropsConfig: o };
}
const p = /* @__PURE__ */ G({
name: "FInputGroupDesign",
props: E,
emits: ["updateExtendInfo", "clear", "valueChange", "clickHandle", "blurHandle", "focusHandle", "enterHandle", "iconMouseEnter", "iconMouseLeave", "keyupHandle", "keydownHandle", "inputClick"],
setup(n, e) {
const t = c(n.modelValue), o = c(n.modelValue), r = I(n, e, t, o), {
inputGroupClass: i,
inputType: d,
inputGroupStyle: s
} = r, l = c(), u = y("designer-host-service"), f = y("design-item-context"), V = U(f, u), g = N(l, f, V), B = Z(() => n.showType === "password" ? "password" : "");
return H(() => {
l.value.componentInstance = g;
}), e.expose(g.value), () => a("div", {
id: "inputGroup",
ref: l,
class: i.value,
style: s.value
}, [a("input", {
class: "form-control",
type: n.showType,
placeholder: n.placeholder,
value: B.value,
readonly: !0
}, null), n.showType === "password" && n.enableViewPassword && a("span", {
class: "input-group-append"
}, [a("span", {
class: "input-group-text"
}, [a("span", {
class: "f-icon f-icon-eye"
}, null)])]), n.showType === "text" && n.groupText && a("span", {
class: "input-group-append"
}, [a("span", {
class: "input-group-text",
innerHTML: n.groupText
}, null)])]);
}
}), T = /* @__PURE__ */ new Map([
["appearance", A]
]);
function x(n, e, t) {
return e;
}
const W = "https://json-schema.org/draft/2020-12/schema", _ = "https://farris-design.gitee.io/input-group.schema.json", X = "input-group", K = "A Farris Input Component", Q = "object", Y = {
id: {
description: "The unique identifier for a Input Group",
type: "string"
},
type: {
description: "The type string of Input Group component",
type: "string",
default: "input-group"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
formatValidation: {
description: "",
type: "object",
default: {}
},
editable: {
description: "",
type: "boolean",
default: !0
},
enableLinkLabel: {
description: "",
type: "boolean",
default: !1
},
label: {
description: "",
type: "string",
default: ""
},
labelWidth: {
description: "",
type: "number"
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
disabled: {
description: "",
type: "boolean",
default: !1
},
required: {
description: "",
type: "boolean",
default: !1
},
tabIndex: {
description: "",
type: "number",
default: -1
},
maxLength: {
description: "",
type: "number",
default: ""
},
textAlign: {
description: "",
type: "enum",
enum: [
"left",
"middle",
"right"
],
default: "left"
},
visible: {
description: "",
type: "boolean",
default: !0
},
onBlur: {
description: "",
type: "string",
default: ""
},
onClickLinkLabel: {
description: "",
type: "string",
default: ""
},
addonDisabled: {
description: "",
type: "boolean",
default: !1
},
addonContent: {
description: "",
type: "string",
default: ""
},
autoHeight: {
description: "",
type: "boolean",
default: !1
},
enableAddon: {
description: "",
type: "boolean",
default: !1
},
addonType: {
description: "",
type: "string",
enum: [
"button",
"static"
],
default: "button"
},
enableClear: {
description: "",
type: "boolean",
default: !0
},
enableViewPassword: {
description: "",
type: "boolean",
default: !0
},
inputType: {
description: "",
type: "string",
enum: [
"input",
"password",
"text"
],
default: "input"
},
showType: {
description: "",
type: "string",
enum: [
"password",
"text"
],
default: "text"
},
maxHeight: {
description: "",
type: "number",
default: 500
},
popUp: {
description: "",
type: "object",
properties: {
footerButtons: {
type: "array",
default: []
},
height: {
type: "number",
default: 600
},
dataMapping: {
type: "object"
},
contents: {
type: "array",
default: []
},
showMaxButton: {
type: "boolean",
default: !0
},
showCloseButton: {
type: "boolean",
default: !0
},
showFooter: {
type: "boolean",
default: !0
},
title: {
type: "string",
default: ""
},
width: {
type: "number",
default: 800
}
}
},
groupText: {
description: "",
type: "string",
default: ""
},
onClickHandle: {
description: "",
type: "string",
default: ""
},
showButtonWhenDisabled: {
description: "",
type: "boolean",
default: !1
},
onClear: {
description: "",
type: "string",
default: ""
},
updateOn: {
description: "",
type: "string",
default: "blur"
},
onChange: {
description: "值变化事件",
type: "string",
default: ""
},
onClick: {
description: "点击事件",
type: "string",
default: ""
},
onFocus: {
description: "获取焦点事件",
type: "string",
default: ""
},
onInput: {
description: "输入事件",
type: "string",
default: ""
},
onKeydown: {
description: "按键按下事件",
type: "string",
default: ""
},
onKeyup: {
description: "按键松开事件",
type: "string",
default: ""
}
}, D = [
"type"
], ee = [
"id",
"appearance",
"binding",
"visible"
], te = {
onClickHandle: "按钮点击事件"
}, C = {
$schema: W,
$id: _,
title: X,
description: K,
type: Q,
properties: Y,
required: D,
ignore: ee,
events: te
}, se = P(b, C, T, x), w = k(
b,
C,
T,
x
);
p.register = (n, e, t, o, r) => {
n["input-group"] = M, e["input-group"] = w(r);
};
p.registerDesigner = (n, e, t, o) => {
n["input-group"] = p, e["input-group"] = w(o);
};
const de = F(p);
export {
p as FInputGroupDesgin,
de as default,
se as propsResolver,
w as propsResolverGenerator
};