@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
333 lines (332 loc) • 9.53 kB
JavaScript
import { defineComponent as j, ref as i, computed as g, onMounted as C, watch as R, createVNode as N, inject as w } from "vue";
import { resolveAppearance as A, createPropsResolver as M } from "../dynamic-resolver/index.esm.js";
import { useNumberFormat as E, useTimeAgo as H, useDateFormat as V } from "../common/index.esm.js";
import { useDesignerComponent as z } from "../designer-canvas/index.esm.js";
const B = /* @__PURE__ */ new Map([
["appearance", A]
]);
function P(e, t, n) {
return t;
}
const Y = "text", q = "A Farris Component", I = "object", U = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, W = {
title: Y,
description: q,
type: I,
categories: U
}, L = "https://json-schema.org/draft/2020-12/schema", G = "https://farris-design.gitee.io/text.schema.json", J = "text", K = "A Farris Component", Q = "object", X = {
id: {
description: "The unique identifier for text",
type: "string"
},
type: {
description: "The type string of text",
type: "string",
default: "text"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, Z = [
"id",
"type"
], _ = {
$schema: L,
$id: G,
title: J,
description: K,
type: Q,
properties: X,
required: Z
}, b = {
// 组件值
modelValue: { type: [String, Number, Boolean], default: "" },
// 是否是密码
password: { type: Boolean, default: !1 },
// 是否多行文本
textarea: { type: Boolean, default: !1 },
// 是否自动尺寸
autoSize: { type: Boolean, default: !1 },
// 是否是日期范围
dateRange: { type: Boolean, default: !1 },
// 最大高度
maxHeight: { type: Number, default: 0 },
// 指定高度
height: { type: Number, default: 0 },
// 控件类型
type: { type: String, default: "string" },
// 格式化
format: { type: String, default: "" },
// 转换类型用到的数据
enumConvertedDatas: { default: void 0 },
// 千分位符号
groupSeparator: { type: String, default: "," },
// 小数点处符号
decimalSeparator: { type: String, default: "." },
// 十进制补位符
decimalFilledSymbol: { type: String, default: "0" },
// 数字参数
numberOptions: { type: Object, default: void 0 },
// 金额表达式
amountExpression: { type: String, default: "%s%v" },
// 文本字段
textField: { type: String, default: "name" },
// 值字段
valueField: { type: String, default: "value" },
// 文本方向
textAlign: { type: String, default: "" },
// 日期范围模式下input的显示分割符合
dateRangeDelimiter: { type: String, default: "~" },
// 枚举项的分隔符
enumDelimiter: { type: String, default: "," }
}, D = M(b, _, B, P, W);
function ee(e) {
let t;
return /Y/g.test(e) === !0 ? t = e.replace(/Y/g, "y") : t = e, /D/g.test(t) === !0 && (t = t.replace(/D/g, "d")), t;
}
function te(e, t, n, c, d) {
if (e == null || e === "")
return "";
if (t && t.length) {
const l = ("" + e).split(n), f = [];
for (let s = 0; s < l.length; s++) {
const u = t.find((r) => r[d] === l[s]);
u ? f.push(u[c]) : f.push(l[s]);
}
return f.length > 0 ? f.join(n) : "";
}
return e;
}
function T(e, t) {
let n;
return t || (t = "YYYY-MM-DD"), t === "timeago" ? H().formatTo(e) : (t === "hh:mm:ss" || t === "HH:mm:ss" ? n = e : n = V().formatTo(e, ee(t)), n);
}
function ne(e, t) {
return !e && !t || t && t.type && t.type === "number" && (t.formatter || (t.useThousands ? t.precision !== void 0 ? e = "n" + t.precision : e = "n2" : t.precision !== void 0 ? e = "f" + t.precision : e = "f2")), e;
}
function ae(e) {
return e.replace(/[a-z]+/g, (t) => t.toUpperCase());
}
function re(e, t, n) {
return e.toString().indexOf(".") > -1 ? (console.warn("十进制转换仅限整型类型"), "") : (Array(t).join(n) + e).slice(-t);
}
function ie(e, t) {
return Number(e * 100).toFixed(Number(t)) + "%";
}
function se(e, t, n, c, d, l, f) {
if (!t && !n)
return e.toString();
if (n && n.type && n.type === "number" && n.formatter)
return n.formatter(e);
const s = ae(t.substring(0, 1)), u = Number(t.substring(1)), r = {};
let o;
if (!/C|D|F|N|P/g.test(s))
return;
c && Object.assign(r, { groupSeparator: c }), d && Object.assign(r, { decimalSeparator: d }), l && Object.assign(r, { format: l });
const { formatTo: p } = E();
switch (s) {
case "C":
Object.assign(r, { prefix: "￥", precision: u }), o = p(e, r);
break;
case "D":
o = re(e, u, f);
break;
case "F":
Object.assign(r, { prefix: "", groupSeparator: "", precision: u }), o = p(e, r);
break;
case "N":
Object.assign(r, { prefix: "", precision: u }), o = p(e, r);
break;
case "P":
o = ie(e, u);
break;
}
return o;
}
function oe(e) {
return e === !0 ? "是" : e === !1 || e == null || e === "" || typeof e > "u" ? "否" : e;
}
const x = /* @__PURE__ */ j({
name: "FText",
props: b,
emits: ["update:modelValue", "valueChange"],
setup(e, t) {
const n = i(e.textarea), c = i(e.password), d = i(e.autoSize), l = i(e.dateRange), f = i(e.type), s = i(e.format), u = i(), r = i(), o = i(""), p = g(() => ({
"f-form-control-text": !n.value,
"f-form-context-textarea": n,
"f-component-text-auto-size": d.value
})), y = g(() => ({
"text-align": e.textAlign,
height: !d.value && e.height > 0 ? `${e.height}px` : "",
"min-height": d.value && e.height > 0 ? `${e.height}px` : "",
"max-height": d.value && e.maxHeight > 0 ? `${e.maxHeight}px` : ""
}));
C(() => {
if (n.value) {
const a = r.value.parentElement.className;
r.value.parentElement.className = a + " f-cmp-text-is-textarea";
}
});
function $(a) {
if (c.value)
return a ? "******" : "";
if (f.value !== "boolean" && (a == null || typeof a > "u"))
return "";
let m = "";
switch (f.value) {
case "string":
m = a;
break;
case "date":
case "datetime":
if (!l.value)
m = T(a, s.value);
else {
const S = e.dateRangeDelimiter, h = a.split(S), F = [];
h && h.length && h.forEach((O) => {
F.push(T(O, s.value));
}), m = F.join(S);
}
break;
case "number":
s.value = ne(s.value, e.numberOptions), m = se(a, s.value, e.numberOptions, e.groupSeparator, e.decimalSeparator, e.amountExpression, e.decimalFilledSymbol);
break;
case "enum":
m = te(a, e.enumConvertedDatas, e.enumDelimiter, e.textField, e.valueField);
break;
case "boolean":
m = oe(a);
break;
}
return m;
}
const v = g(() => {
const a = $(e.modelValue);
return u.value !== a && (t.emit("valueChange", a), u.value = a), a;
});
function k() {
const a = r.value;
Math.abs(a.scrollWidth - a.clientWidth) > 2 || Math.abs(a.scrollHeight - a.clientHeight) > 2 ? o.value = v.value : o.value = "";
}
return R(() => e.modelValue, (a, m) => {
a !== m && t.emit("update:modelValue", a);
}), () => N("span", {
class: p.value,
style: y.value,
ref: r,
onMouseenter: () => k(),
title: o.value
}, [v.value]);
}
}), le = /* @__PURE__ */ j({
name: "FTextDesign",
props: b,
emits: ["update:modelValue"],
setup(e, t) {
const n = i(!0), c = i(!0), d = i(""), l = i(0), f = i(0), s = i(e.modelValue), u = g(() => ({
"f-form-control-text": !n.value,
"f-form-context-textarea": n,
"f-component-text-auto-size": c.value
})), r = g(() => ({
textalign: d.value,
height: !c.value && l.value > 0 ? `${l.value}px` : "",
"min-height": !c.value && l.value > 0 ? `${l.value}px` : "",
"max-height": !c.value && f.value > 0 ? `${f.value}px` : ""
}));
g(() => "");
const o = i(), p = w("design-item-context"), y = z(o, p);
return C(() => {
o.value.componentInstance = y;
}), t.expose(y.value), () => N("span", {
ref: o,
class: u.value,
style: r.value
}, [s.value]);
}
}), me = {
install(e) {
e.component(x.name, x);
},
register(e, t, n, c) {
e.text = x, t.text = D;
},
registerDesigner(e, t, n) {
e.text = le, t.text = D;
}
};
export {
x as FText,
me as default,
D as propsResolver,
b as textProps
};