@farris/ui-vue/components/text/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as V, ref as d, computed as j, onMounted as q, watch as G, createVNode as z, inject as J } from "vue";
import { isPlainObject as A, cloneDeep as H } from "lodash-es";
import { useTimeAgo as Q, useDateFormat as X, useNumberFormat as Z } from "../common/index.esm.js";
const L = {}, Y = {};
function k(t) {
  const { properties: e, title: n, ignore: a } = t, i = a && Array.isArray(a), s = Object.keys(e).reduce((u, l) => ((!i || !a.find((g) => g === l)) && (u[l] = e[l].type === "object" && e[l].properties ? k(e[l]) : H(e[l].default)), u), {});
  if (n && (!i || !a.find((u) => u === "id"))) {
    const u = n.toLowerCase().replace(/-/g, "_");
    s.id = `${u}_${Math.random().toString().slice(2, 6)}`;
  }
  return s;
}
function C(t) {
  const { properties: e, title: n, required: a } = t;
  if (a && Array.isArray(a)) {
    const i = a.reduce((s, u) => (s[u] = e[u].type === "object" && e[u].properties ? k(e[u]) : H(e[u].default), s), {});
    if (n && a.find((s) => s === "id")) {
      const s = n.toLowerCase().replace(/-/g, "_");
      i.id = `${s}_${Math.random().toString().slice(2, 6)}`;
    }
    return i;
  }
  return {
    type: n
  };
}
function _(t, e = {}, n) {
  const a = L[t];
  if (a) {
    let i = C(a);
    const s = Y[t];
    return i = s ? s({ getSchemaByType: _ }, i, e, n) : i, i;
  }
  return null;
}
function K(t, e) {
  const n = k(e);
  return Object.keys(n).reduce((a, i) => (Object.prototype.hasOwnProperty.call(t, i) && (a[i] && A(a[i]) && A(t[i] || !t[i]) ? Object.assign(a[i], t[i] || {}) : a[i] = t[i]), a), n), n;
}
function U(t, e) {
  return Object.keys(t).filter((a) => t[a] != null).reduce((a, i) => {
    if (e.has(i)) {
      const s = e.get(i);
      if (typeof s == "string")
        a[s] = t[i];
      else {
        const u = s(i, t[i], t);
        Object.assign(a, u);
      }
    } else
      a[i] = t[i];
    return a;
  }, {});
}
function I(t, e, n = /* @__PURE__ */ new Map()) {
  const a = K(t, e);
  return U(a, n);
}
function ee(t = {}) {
  function e(r, o, c, f) {
    if (typeof c == "number")
      return f[r].length === c;
    if (typeof c == "object") {
      const b = Object.keys(c)[0], S = c[b];
      if (b === "not")
        return Number(f[r].length) !== Number(S);
      if (b === "moreThan")
        return Number(f[r].length) >= Number(S);
      if (b === "lessThan")
        return Number(f[r].length) <= Number(S);
    }
    return !1;
  }
  function n(r, o, c, f) {
    return f[r] && f[r].propertyValue && String(f[r].propertyValue.value) === String(c);
  }
  const a = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", n]
  ]);
  Object.keys(t).reduce((r, o) => (r.set(o, t[o]), r), a);
  function i(r, o) {
    const c = r;
    return typeof o == "number" ? [{ target: c, operator: "length", param: null, value: Number(o) }] : typeof o == "boolean" ? [{ target: c, operator: "getProperty", param: r, value: !!o }] : typeof o == "object" ? Object.keys(o).map((f) => {
      if (f === "length")
        return { target: c, operator: "length", param: null, value: o[f] };
      const b = f, S = o[f];
      return { target: c, operator: "getProperty", param: b, value: S };
    }) : [];
  }
  function s(r) {
    return Object.keys(r).reduce((c, f) => {
      const b = i(f, r[f]);
      return c.push(...b), c;
    }, []);
  }
  function u(r, o) {
    if (a.has(r.operator)) {
      const c = a.get(r.operator);
      return c && c(r.target, r.param, r.value, o) || !1;
    }
    return !1;
  }
  function l(r, o) {
    return s(r).reduce((b, S) => b && u(S, o), !0);
  }
  function g(r, o) {
    const c = Object.keys(r), f = c.includes("allOf"), b = c.includes("anyOf"), S = f || b, D = (S ? r[S ? f ? "allOf" : "anyOf" : "allOf"] : [r]).map((O) => l(O, o));
    return f ? !D.includes(!1) : D.includes(!0);
  }
  return { parseValueSchema: g };
}
const te = {}, re = {};
ee();
function ne(t, e, n = /* @__PURE__ */ new Map(), a = (u, l, g, r) => l, i = {}, s = (u) => u) {
  return L[e.title] = e, Y[e.title] = a, te[e.title] = i, re[e.title] = s, (u = {}, l = !0) => {
    if (!l)
      return U(u, n);
    const g = I(u, e, n), r = Object.keys(t).reduce((o, c) => (o[c] = t[c].default, o), {});
    return Object.assign(r, g);
  };
}
function ae(t, e) {
  return { customClass: e.class, customStyle: e.style };
}
const ie = /* @__PURE__ */ new Map([
  ["appearance", ae]
]);
function oe(t, e, n) {
  return e;
}
const se = "text", ue = "A Farris Component", ce = "object", le = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, fe = {
  title: se,
  description: ue,
  type: ce,
  categories: le
}, pe = "https://json-schema.org/draft/2020-12/schema", me = "https://farris-design.gitee.io/text.schema.json", ge = "text", de = "A Farris Component", he = "object", ye = {
  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
  }
}, be = [
  "id",
  "type"
], ve = {
  $schema: pe,
  $id: me,
  title: ge,
  description: de,
  type: he,
  properties: ye,
  required: be
}, w = {
  // 组件值 
  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: "," }
}, B = ne(w, ve, ie, oe, fe);
function Se(t) {
  let e;
  return /Y/g.test(t) === !0 ? e = t.replace(/Y/g, "y") : e = t, /D/g.test(e) === !0 && (e = e.replace(/D/g, "d")), e;
}
function De(t, e, n, a, i) {
  if (t == null || t === "")
    return "";
  if (e && e.length) {
    const s = ("" + t).split(n), u = [];
    for (let l = 0; l < s.length; l++) {
      const g = e.find((r) => r[i] === s[l]);
      g ? u.push(g[a]) : u.push(s[l]);
    }
    return u.length > 0 ? u.join(n) : "";
  }
  return t;
}
function x(t, e) {
  let n;
  return e || (e = "YYYY-MM-DD"), e === "timeago" ? Q().formatTo(t) : (e === "hh:mm:ss" || e === "HH:mm:ss" ? n = t : n = X().formatTo(t, Se(e)), n);
}
function Te(t, e) {
  return !t && !e || e && e.type && e.type === "number" && (e.formatter || (e.useThousands ? e.precision !== void 0 ? t = "n" + e.precision : t = "n2" : e.precision !== void 0 ? t = "f" + e.precision : t = "f2")), t;
}
function Oe(t) {
  return t.replace(/[a-z]+/g, (e) => e.toUpperCase());
}
function je(t, e, n) {
  return t.toString().indexOf(".") > -1 ? (console.warn("十进制转换仅限整型类型"), "") : (Array(e).join(n) + t).slice(-e);
}
function Me(t, e) {
  return Number(t * 100).toFixed(Number(e)) + "%";
}
function Ne(t, e, n, a, i, s, u) {
  if (!e && !n)
    return t.toString();
  if (n && n.type && n.type === "number" && n.formatter)
    return n.formatter(t);
  const l = Oe(e.substring(0, 1)), g = Number(e.substring(1)), r = {};
  let o;
  if (!/C|D|F|N|P/g.test(l))
    return;
  a && Object.assign(r, { groupSeparator: a }), i && Object.assign(r, { decimalSeparator: i }), s && Object.assign(r, { format: s });
  const { formatTo: c } = Z();
  switch (l) {
    case "C":
      Object.assign(r, { prefix: "￥", precision: g }), o = c(t, r);
      break;
    case "D":
      o = je(t, g, u);
      break;
    case "F":
      Object.assign(r, { prefix: "", groupSeparator: "", precision: g }), o = c(t, r);
      break;
    case "N":
      Object.assign(r, { prefix: "", precision: g }), o = c(t, r);
      break;
    case "P":
      o = Me(t, g);
      break;
  }
  return o;
}
function Fe(t) {
  return t === !0 ? "是" : t === !1 || t == null || t === "" || typeof t > "u" ? "否" : t;
}
const E = /* @__PURE__ */ V({
  name: "FText",
  props: w,
  emits: ["update:modelValue", "valueChange"],
  setup(t, e) {
    const n = d(t.textarea), a = d(t.password), i = d(t.autoSize), s = d(t.dateRange), u = d(t.type), l = d(t.format), g = d(), r = d(), o = d(""), c = j(() => ({
      "f-form-control-text": !n.value,
      "f-form-context-textarea": n,
      "f-component-text-auto-size": i.value
    })), f = j(() => ({
      "text-align": t.textAlign,
      height: !i.value && t.height > 0 ? `${t.height}px` : "",
      "min-height": i.value && t.height > 0 ? `${t.height}px` : "",
      "max-height": i.value && t.maxHeight > 0 ? `${t.maxHeight}px` : ""
    }));
    q(() => {
      if (n.value) {
        const p = r.value.parentElement.className;
        r.value.parentElement.className = p + " f-cmp-text-is-textarea";
      }
    });
    function b(p) {
      if (a.value)
        return p ? "******" : "";
      if (u.value !== "boolean" && (p == null || typeof p > "u"))
        return "";
      let D = "";
      switch (u.value) {
        case "string":
          D = p;
          break;
        case "date":
        case "datetime":
          if (!s.value)
            D = x(p, l.value);
          else {
            const N = t.dateRangeDelimiter, O = p.split(N), F = [];
            O && O.length && O.forEach((P) => {
              F.push(x(P, l.value));
            }), D = F.join(N);
          }
          break;
        case "number":
          l.value = Te(l.value, t.numberOptions), D = Ne(p, l.value, t.numberOptions, t.groupSeparator, t.decimalSeparator, t.amountExpression, t.decimalFilledSymbol);
          break;
        case "enum":
          D = De(p, t.enumConvertedDatas, t.enumDelimiter, t.textField, t.valueField);
          break;
        case "boolean":
          D = Fe(p);
          break;
      }
      return D;
    }
    const S = j(() => {
      const p = b(t.modelValue);
      return g.value !== p && (e.emit("valueChange", p), g.value = p), p;
    });
    function M() {
      const p = r.value;
      Math.abs(p.scrollWidth - p.clientWidth) > 2 || Math.abs(p.scrollHeight - p.clientHeight) > 2 ? o.value = S.value : o.value = "";
    }
    return G(() => t.modelValue, (p, D) => {
      p !== D && e.emit("update:modelValue", p);
    }), () => z("span", {
      class: c.value,
      style: f.value,
      ref: r,
      onMouseenter: () => M(),
      title: o.value
    }, [S.value]);
  }
});
function Pe(t, e, n) {
  var R;
  const a = "", i = "", s = d();
  function u() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function l() {
    return !1;
  }
  function g() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function r() {
    return (e == null ? void 0 : e.schema.componentType) === "frame";
  }
  function o(m) {
    if (!m || !m.value)
      return null;
    if (m.value.schema && m.value.schema.type === "component")
      return m.value;
    const y = d(m == null ? void 0 : m.value.parent), h = o(y);
    return h || null;
  }
  function c(m = e) {
    var T;
    const { componentInstance: y, designerItemElementRef: h } = m;
    if (!y || !y.value)
      return null;
    const { getCustomButtons: v } = y.value;
    return y.value.canMove || v && ((T = v()) != null && T.length) ? h : c(m.parent);
  }
  function f(m) {
    return !!n;
  }
  function b() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function S() {
  }
  function M(m, y) {
    var h;
    !m || !y || (h = e == null ? void 0 : e.setupContext) == null || h.emit("dragEnd");
  }
  function p(m, y) {
    const { componentType: h } = m;
    let v = _(h, m, y);
    const T = h.toLowerCase().replace(/-/g, "_");
    return v && !v.id && v.type === h && (v.id = `${T}_${Math.random().toString().slice(2, 6)}`), v;
  }
  function D(m) {
  }
  function N(...m) {
  }
  function O(m) {
    if (!m)
      return;
    const y = e == null ? void 0 : e.schema, { formSchemaUtils: h } = m;
    if (y && h.getExpressions().length) {
      const v = h.getExpressions().findIndex((T) => T.target === y.id);
      v > -1 && h.getExpressions().splice(v, 1);
    }
  }
  function F(m) {
    O(m), e != null && e.schema.contents && e.schema.contents.map((y) => {
      let h = y.id;
      y.type === "component-ref" && (h = y.component);
      const v = t.value.querySelectorAll(`#${h}-design-item`);
      v != null && v.length && Array.from(v).map((T) => {
        var $;
        ($ = T == null ? void 0 : T.componentInstance) != null && $.value.onRemoveComponent && T.componentInstance.value.onRemoveComponent(m);
      });
    });
  }
  function P() {
  }
  function W(m) {
  }
  return s.value = {
    canMove: u(),
    canSelectParent: l(),
    canDelete: g(),
    canNested: !r(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: t,
    parent: (R = e == null ? void 0 : e.parent) == null ? void 0 : R.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: a,
    designerClass: i,
    canAccepts: f,
    getBelongedComponentInstance: o,
    getDraggableDesignItemElement: c,
    getDraggingDisplayText: b,
    getPropConfig: N,
    getDragScopeElement: S,
    onAcceptMovedChildElement: M,
    onChildElementMovedOut: D,
    addNewChildComponentSchema: p,
    triggerBelongedComponentToMoveWhenMoved: d(!1),
    triggerBelongedComponentToDeleteWhenDeleted: d(!1),
    onRemoveComponent: F,
    getCustomButtons: P,
    onPropertyChanged: W
  }, s;
}
const Ee = /* @__PURE__ */ V({
  name: "FTextDesign",
  props: w,
  emits: ["update:modelValue"],
  setup(t, e) {
    const n = d(!0), a = d(!0), i = d(""), s = d(0), u = d(0), l = d(t.modelValue), g = j(() => ({
      "f-form-control-text": !n.value,
      "f-form-context-textarea": n,
      "f-component-text-auto-size": a.value
    })), r = j(() => ({
      textalign: i.value,
      height: !a.value && s.value > 0 ? `${s.value}px` : "",
      "min-height": !a.value && s.value > 0 ? `${s.value}px` : "",
      "max-height": !a.value && u.value > 0 ? `${u.value}px` : ""
    }));
    j(() => "");
    const o = d(), c = J("design-item-context"), f = Pe(o, c);
    return q(() => {
      o.value.componentInstance = f;
    }), e.expose(f.value), () => z("span", {
      ref: o,
      class: g.value,
      style: r.value
    }, [l.value]);
  }
}), $e = {
  install(t) {
    t.component(E.name, E);
  },
  register(t, e, n, a) {
    t.text = E, e.text = B;
  },
  registerDesigner(t, e, n) {
    t.text = Ee, e.text = B;
  }
};
export {
  E as FText,
  $e as default,
  B as propsResolver,
  w as textProps
};