@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
795 lines (794 loc) • 21.7 kB
JavaScript
import { EVENT_PROPERTY_TAB_IDS as F, useTextBoxDesign as I, withInstall as k } from "../../components/common/index.esm.js";
import { resolveAppearance as M, createPropsResolver as S, getPropsResolverGenerator as $ } from "../../components/dynamic-resolver/index.esm.js";
import E, { inputGroupProps as h } from "../../components/input-group/index.esm.js";
import { createVNode as i, Fragment as G, createTextVNode as Z, defineComponent as H, ref as c, inject as m, computed as f, onMounted as N } from "vue";
import { useDesignerComponent as R } from "../../components/designer-canvas/index.esm.js";
import { InputBaseProperty as L } from "../../components/property-panel/index.esm.js";
const j = {
id: { Type: String, default: "" },
/**
* 针对 txt 类型的输入框，是否启用自动完成.off 不启用自动完成，on 启用自动完成,具体可以参考原生input autocomplete属性赋值
* @default off
*/
autocomplete: { Type: String, default: "off" },
/**
* 自定义样式
*/
customClass: { Type: String, default: "" },
/**
* 禁用
*/
disabled: { Type: Boolean, default: !1 },
/**
* 是否允许编辑，true 是允许编辑
* @default true
*/
editable: { Type: Boolean, default: !0 },
/**
* 是否启用清空按钮，true 是当有文本时显示清空按钮
* @default true
*/
enableClear: { Type: Boolean, default: !0 },
/**
* 鼠标移动到组件内时显示组件内的文本，true 是启用提示
* @default true
*/
enableTitle: { Type: Boolean, default: !0 },
/**
* 是否启用查看密码明文功能，true 是启用
* @default true
*/
enableViewPassword: { Type: Boolean, default: !0 },
/**
* 是否始终显示占位符文本。true 始终显示占位符
* @default false
*/
forcePlaceholder: { Type: Boolean, default: !1 },
/**
* 扩展按钮的文本
*/
groupText: { Type: String, default: "" },
/**
* 密码模式
*/
showType: { Type: String, default: "text" },
/**
* 输入框类型，可选：text 文本输入框、number 数字输入框、password 密码输入框、textarea 多行文本输入框
* @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: "" },
/**
* 是否显示边线，默认 true显示边线
* @default true
*/
showBorder: { Type: Boolean, default: !0 },
/**
* 步长
*/
step: { Type: Number, default: 1 },
/**
* 启用提示信息文本
*/
placeholder: { Type: String, default: "" },
precision: { Type: Number, default: 0 },
/**
* 只读
* @default false
*/
readonly: { Type: Boolean, default: !1 },
/**
* 当组件禁用或只读时显示后边的按钮
* @default false
*/
showButtonWhenDisabled: { Type: Boolean, default: !1 },
/**
* tab键索引,默认从0开始，-1表示不可通过Tab键获得焦点
* @default 0
*/
tabIndex: { Type: Number, default: 0 },
/**
* 文本在输入框中的对齐方式，可选: left 左对齐、center 居中对齐、right 右对齐
* @default left
*/
textAlign: { Type: String, default: "left" },
/**
* 是否启用前置扩展信息；设置为true后，鼠标悬停时显示 `extendInfo`配置的文本
* @default false
*/
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 },
/**
* 是否可扩展
*/
expandable: { type: Boolean, default: !1 },
/**
* 扩展模式 text | button
*/
expandMode: { type: String, default: "text" },
/**
* 扩展文本内容
*/
expandContent: { type: String, default: "" },
/**
* 扩展按钮是否禁用
*/
expandDisabled: { type: Boolean, default: !1 }
}, 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 O(t) {
switch (t) {
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(t) {
var e;
return "请输入正确的" + ((e = v.find((n) => n.key === t)) == null ? void 0 : e.value);
}
const _ = {
convertTo: (t, e, n, o) => {
t.editor.formatValidation || (t.editor.formatValidation = { type: "none" }), t.editor.formatValidation.type = n, t.editor.formatValidation.expression = O(n), t.editor.formatValidation.message = J(n);
},
convertFrom: (t, e, n) => t.editor.formatValidation ? e === "type" ? t.editor.formatValidation[e] || "none" : t.editor.formatValidation[e] : "none"
}, b = {
convertTo: (t, e, n, o) => {
t.editor.formatValidation || (t.editor.formatValidation = { type: "none" }), t.editor.formatValidation[e] = n;
},
convertFrom: (t, e, n) => t.editor.formatValidation ? t.editor.formatValidation[e] : t.editor[e]
}, q = ["lookup", "more-vertical", "add", "edit", "x", "search", "image-edit", "copy", "source-code", "top_developmenttool", "reorder", "reload"];
function z(t, e, n) {
const o = `<i class="f-icon f-icon-${e}"></i>`;
n.value.insertText ? n.value.insertText(o) : n.value.setValue(o);
}
const U = (t) => i(G, null, [i("h5", null, [Z("按钮图标示例")]), i("ul", {
class: "d-flex",
style: "width: 200px; flex-wrap: wrap;align-items: center;height: 100px;"
}, [q.map((e) => i("li", {
key: e,
class: "btn",
title: "双击添加到内容区域",
onDblclick: (n) => z(n, e, t)
}, [i("i", {
class: `f-icon f-icon-${e}`
}, null)]))])]);
class W extends L {
constructor(e, n) {
super(e, n);
}
getPropertyConfig(e, n) {
return super.getPropertyConfig(e, n), this.propertyConfig.categories.formatValidation = this.getFormatValidation(e), this.propertyConfig;
}
getEditorProperties(e) {
var o, a;
let n;
if (((o = e == null ? void 0 : e.binding) == null ? void 0 : o.type) === "Form") {
const r = this.schemaService.getFieldByIDAndVMID(e.binding.field, this.viewModelId);
(a = r == null ? void 0 : r.schemaField) != null && a.type && (n = r.schemaField.type.length);
}
return this.getComponentConfig(e, {}, {
enableClear: {
description: "是否显示清除按钮",
title: "启用清除按钮",
type: "boolean"
},
maxLength: {
description: "文本字数最大长度",
title: "最大长度",
type: "number",
editor: {
nullable: !0,
min: 0,
useThousands: !1,
max: n,
needValid: !0
}
},
textAlign: {
description: "文本对齐方式",
title: "文本对齐方式",
type: "string",
editor: {
type: "combo-list",
editable: !1,
data: [
{ text: "左对齐", value: "left" },
{ text: "居中对齐", value: "center" },
{ text: "右对齐", value: "right" }
],
textField: "text",
idField: "value",
valueField: "value"
}
},
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: U
}
}
});
}
getGridFieldEdtiorProperties(e) {
return this.getEditorProperties(e);
}
getFormatValidation(e) {
var o, a, r, d, s;
const n = {
title: "输入格式校验",
description: "输入校验",
hide: !((o = e.binding) != null && o.field && ((a = e.binding) == null ? void 0 : a.type) === "Form") && !!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: _,
parentPropertyID: "formatValidation"
}
}
};
return (r = e.editor.formatValidation) != null && r.type && ((d = e.editor.formatValidation) == null ? void 0 : d.type) !== "none" && (n.properties.message = {
title: "输入错误提示",
type: "string",
description: "输入错误提示",
$converter: b,
parentPropertyID: "formatValidation"
}), ((s = e.editor.formatValidation) == null ? void 0 : s.type) === "custom" && (n.properties.expression = {
title: "匹配正则",
type: "string",
description: "匹配正则",
$converter: b,
parentPropertyID: "formatValidation"
}), n;
}
getEventPropertyConfig(e) {
const n = 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 a = n.eventsEditorUtils.formProperties(e, n.viewModelId, o), r = n.createBaseEventProperty(a);
return this.appendFieldValueChangeEvents(e, o), {
title: "事件",
hideTitle: !0,
properties: r,
// 这个属性，标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
tabId: F,
tabName: "交互",
setPropertyRelates(d, s) {
const l = d.propertyValue;
delete e[n.viewModelId], l && (l.setPropertyRelates = this.setPropertyRelates, n.eventsEditorUtils.saveRelatedParameters(e, n.viewModelId, l.events, l), n.updateLinkedLabel(l, e));
const u = n.designViewModelUtils.getDgViewModel(n.viewModelId);
u && n.designViewModelField && u.changeField(n.designViewModelField.id, {
valueChanging: e.fieldValueChanging || "",
valueChanged: e.fieldValueChanged || ""
});
}
};
}
}
function D(t, e) {
const n = t.schema;
function o(a, r) {
return new W(a, e).getPropertyConfig(n, r);
}
return { getPropsConfig: o };
}
const p = /* @__PURE__ */ H({
name: "FInputGroupDesign",
props: j,
emits: ["updateExtendInfo", "clear", "valueChange", "clickHandle", "blurHandle", "focusHandle", "enterHandle", "iconMouseEnter", "iconMouseLeave", "keyupHandle", "keydownHandle", "inputClick"],
setup(t, e) {
const n = c(t.modelValue), o = c(t.modelValue), a = I(t, e, n, o), {
inputGroupClass: r,
inputType: d,
inputGroupStyle: s
} = a, l = c(), u = m("designer-host-service"), g = m("design-item-context"), V = D(g, u), y = R(l, g, V), P = f(() => t.showType === "password" ? "password" : "");
N(() => {
l.value.componentInstance = y;
}), e.expose(y.value);
const B = f(() => ({
"input-group-append input-append-wrapper": !0,
"input-append-button": t.expandMode === "button",
"input-append-text": t.expandMode === "text"
})), A = f(() => ({
"form-control": !0,
"text-left": t.textAlign === "left",
"text-center": t.textAlign === "center",
"text-right": t.textAlign === "right"
}));
return () => i("div", {
id: "inputGroup",
ref: l,
class: r.value,
style: [s.value, "pointer-events: none"].join(";")
}, [i("input", {
class: A.value,
type: t.showType,
placeholder: t.placeholder,
value: P.value,
readonly: !0
}, null), t.showType === "password" && t.enableViewPassword && i("span", {
class: "input-group-append"
}, [i("span", {
class: "input-group-text"
}, [i("span", {
class: "f-icon f-icon-eye"
}, null)])]), t.showType === "text" && t.groupText && i("span", {
class: "input-group-append"
}, [i("span", {
class: "input-group-text",
innerHTML: t.groupText
}, null)]), t.expandContent && t.expandable && i("div", {
class: B.value
}, [i("div", {
class: "input-group-text",
innerHTML: t.expandContent
}, null)])]);
}
}), x = /* @__PURE__ */ new Map([
["appearance", M]
]);
function T(t, e, n) {
return e;
}
const X = "https://json-schema.org/draft/2020-12/schema", Y = "https://farris-design.gitee.io/input-group.schema.json", K = "input-group", Q = "A Farris Input Component", ee = "object", te = {
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: ""
},
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: ""
}
}, ne = [
"type"
], oe = [
"id",
"appearance",
"binding",
"visible"
], ie = {
onClickHandle: "按钮点击事件",
onClear: "清空事件"
}, C = {
$schema: X,
$id: Y,
title: K,
description: Q,
type: ee,
properties: te,
required: ne,
ignore: oe,
events: ie
}, pe = S(h, C, x, T), w = $(
h,
C,
x,
T
);
p.register = (t, e, n, o, a) => {
t["input-group"] = E, e["input-group"] = w(a);
};
p.registerDesigner = (t, e, n, o) => {
t["input-group"] = p, e["input-group"] = w(o);
};
const ce = k(p);
export {
p as FInputGroupDesgin,
ce as default,
pe as propsResolver,
w as propsResolverGenerator
};