@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
716 lines (715 loc) • 20.5 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: "" },
/** 是否自动完成 */
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 },
/** 是否可扩展 */
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
};