@farris/ui-vue/components/verify-detail/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

var J = Object.defineProperty;
var Q = (e, t, n) => t in e ? J(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var S = (e, t, n) => Q(e, typeof t != "symbol" ? t + "" : t, n);
import { defineComponent as R, ref as h, watch as E, computed as d, createVNode as s, onBeforeMount as K, Fragment as _, reactive as Z, createApp as W, onUnmounted as X, onMounted as Y, Transition as tt, mergeProps as et, inject as nt } from "vue";
import { resolveAppearance as it, createPropsResolver as st } from "../dynamic-resolver/index.esm.js";
import "bignumber.js";
import "lodash-es";
import { LocaleService as A } from "../locale/index.esm.js";
import { useDesignerComponent as ot } from "../designer-canvas/index.esm.js";
const lt = /* @__PURE__ */ new Map([
  ["appearance", it]
]);
function at(e, t, n) {
  return t;
}
const rt = "https://json-schema.org/draft/2020-12/schema", ct = "https://farris-design.gitee.io/verify-detail.schema.json", ut = "verify-detail", ft = "A Farris Component", dt = "object", vt = {
  id: {
    description: "The unique identifier for verify-detail",
    type: "string"
  },
  type: {
    description: "The type string of verify-detail",
    type: "string",
    default: "verify-detail"
  },
  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
  }
}, yt = [
  "id",
  "type"
], pt = {
  $schema: rt,
  $id: ct,
  title: ut,
  description: ft,
  type: dt,
  properties: vt,
  required: yt
}, mt = "verify-detail", ht = "A Farris Component", gt = "object", wt = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, bt = {
  title: mt,
  description: ht,
  type: gt,
  categories: wt
}, D = {
  /**
   * 默认显示的表单验证分类，值分类的type
   */
  showType: { type: String, default: "" },
  /**
   * 是否默认打开验证信息列表
   */
  showList: { type: Boolean, default: !1 },
  /**
   * 表单验证列表信息
   */
  verifyList: { type: Array, default: [] },
  /**
   * 表单验证信息分类，默认为all error empty 三种
   */
  verifyType: { type: Array, default: [] },
  /**
   * 自定义样式
   */
  customClass: { type: String, default: "" },
  /**
   * 验证信息列表的最大高度
   */
  maxHeight: { type: Number, default: 200 },
  /**
   * 验证信息条目点击事件回调
   */
  onValidatorClick: { type: Function }
}, V = st(D, pt, lt, at, bt), k = /* @__PURE__ */ R({
  name: "FVerifyDetail",
  props: D,
  emits: ["validatorClick", "listshow"],
  setup(e, t) {
    let n = [];
    const a = h(e.showList);
    E(() => e.showList, () => {
      a.value = e.showList;
    });
    const o = h(e.verifyType);
    E(() => e.verifyType, () => {
      o.value = e.verifyType;
    });
    function c() {
      a.value = !a.value, t.emit("listshow", a.value);
    }
    function r(i) {
      var u;
      !i && o.value && o.value.length > 0 && (i = o.value[0].type), (u = o.value) == null || u.forEach((g) => {
        g.active = g.type === i;
      });
    }
    function f(i) {
      i = i || n[0].type, n.forEach((u) => {
        u.show = u.type === i;
      });
    }
    function v(i) {
      i.length <= 0 || (r(i.type), f(i.type));
    }
    function m() {
      a.value = !1, t.emit("listshow", !1);
    }
    function y(i) {
      var u;
      (u = e.onValidatorClick) == null || u.call(e, i);
    }
    function T(i) {
      return s("li", {
        class: "f-verify-list",
        onClick: () => y(i)
      }, [s("span", {
        class: ["f-icon f-icon-close-outline list-icon list-error", {
          "list-warning": i.type === "warn"
        }]
      }, null), s("div", {
        class: "list-con"
      }, [s("div", {
        class: "list-title",
        title: i.title
      }, [i.title]), s("div", {
        class: "list-msg",
        title: i.msg
      }, [i.msg])])]);
    }
    function x() {
      return n.map((i) => s("ul", {
        class: ["f-verify-list-content", {
          active: i.show
        }]
      }, [i.list && i.list.map((u) => T(u))]));
    }
    const w = d(() => {
      var i;
      return ((i = e.verifyList) == null ? void 0 : i.length) > 0;
    });
    function I(i) {
      return {
        btn: !0,
        "verify-title-btn": !0,
        "f-state-selected": i.active,
        disabled: i.length <= 0
      };
    }
    const O = d(() => {
      var i;
      return (i = o.value) == null ? void 0 : i.map((u) => s("button", {
        class: I(u),
        onClick: () => v(u)
      }, [u.title, s("span", null, [u.length])]));
    }), b = d(() => {
      var i;
      return s("div", {
        class: "f-verify-nums",
        onClick: c
      }, [s("span", {
        class: "nums-icon f-icon f-icon-warning"
      }, null), s("span", {
        class: "nums-count"
      }, [(i = e.verifyList) == null ? void 0 : i.length])]);
    });
    function N() {
      var u;
      const i = [];
      o.value && ((u = o.value) != null && u.length) && (o.value.map((g) => {
        const C = {
          list: g.type === "all" ? e.verifyList : [],
          show: !1,
          type: g.type
        };
        i.push(C);
      }), i.map((g, C) => {
        const P = e.verifyList.filter((F) => F.type === g.type);
        i[C].list = C !== 0 ? P : i[C].list;
      }), o.value.map((g, C) => {
        g.length = i[C].list.length;
      })), n = i;
    }
    return K(() => {
      N(), f(e.showType), r(e.showType);
    }), () => s("div", {
      class: w.value ? `f-verify-detail ${e.customClass}` : ""
    }, [w.value ? s("div", {
      class: "f-verify-detail-content"
    }, [b.value, s("div", {
      class: "f-verify-form-main",
      hidden: !a.value
    }, [s("div", {
      class: "f-verify-form-content"
    }, [s("div", {
      class: "f-verify-form-content-arrow"
    }, null), s("div", {
      class: "f-verify-form-content-list"
    }, [s("div", {
      class: "f-verify-forms-title"
    }, [s("div", {
      class: "btn-group"
    }, [O.value]), s("div", {
      class: "f-verify-close",
      onClick: m
    }, [s("span", {
      class: "f-icon f-icon-close"
    }, null)])]), s("div", {
      class: "f-verify-forms-list",
      style: {
        maxHeight: e.maxHeight + "px"
      }
    }, [x()])])])])]) : null]);
  }
}), Ct = ["moz", "ms", "webkit"];
function Tt() {
  let e = 0;
  return (t) => {
    const n = (/* @__PURE__ */ new Date()).getTime(), a = Math.max(0, 16 - (n - e)), o = setTimeout(() => {
      t(n + a);
    }, a);
    return e = n + a, o;
  };
}
function Nt() {
  if (typeof window > "u")
    return () => 0;
  if (window.requestAnimationFrame)
    return window.requestAnimationFrame.bind(window);
  const e = Ct.filter((t) => `${t}RequestAnimationFrame` in window)[0];
  return e ? window[`${e}RequestAnimationFrame`] : Tt();
}
Nt();
h("");
function q() {
  if (typeof window > "u" || typeof navigator > "u")
    return !1;
  const e = navigator.userAgent || navigator.vendor || window.opera, t = [
    /iPhone/i,
    /iPod/i,
    /Android.*Mobile/i,
    // Android 手机通常包含 "Mobile" 字样，而平板不包含
    /webOS/i,
    /BlackBerry/i,
    /IEMobile/i,
    /Opera Mini/i,
    /Harmony/i
  ], n = [
    /iPad/i,
    /Android(?!.*Mobile)/i,
    // Android 平板通常不含 "Mobile"
    /Tablet/i,
    /PlayBook/i,
    /Kindle/i,
    /Silk/i
  ];
  for (const v of n)
    if (v.test(e))
      return !1;
  for (const v of t)
    if (v.test(e))
      return !0;
  if (typeof screen > "u")
    return !1;
  const a = "ontouchstart" in window || navigator.maxTouchPoints > 0, o = screen.width, c = screen.height, r = Math.min(o, c);
  return !!(a && r <= 768);
}
function xt() {
  const e = q();
  return e && document.body.classList.add("f-mobile"), e;
}
typeof document < "u" && xt();
const Lt = {
  showCloseButton: { type: Boolean, default: !0 },
  position: { type: String, default: "top-center" },
  timeout: { type: Number, default: 3e3 },
  theme: { type: String, default: "bootstrap" },
  left: { type: Number },
  right: { type: Number },
  top: { type: Number },
  bottom: { type: Number },
  id: { type: String },
  animate: { type: String, default: "fadeIn" },
  options: { type: Object },
  safeHtml: { type: Boolean, default: !0 }
}, It = {
  showCloseButton: { type: Boolean, default: !0 },
  animate: { type: String, default: "fadeIn" },
  options: { type: Object }
}, j = /* @__PURE__ */ R({
  name: "Toast",
  props: It,
  emits: ["close", "click"],
  setup: (e, t) => {
    const n = h(e.animate), a = "fadeOut", o = d(() => e.options), c = h(!1), r = d(() => o.value.title && o.value.message), f = d(() => !o.value.title && o.value.message), v = d(() => {
      const i = {
        animated: c.value,
        toast: !0,
        "toast--only-content": !r.value
      };
      return i[e.animate] = !1, i[a] = c.value, i["toasty-type-" + o.value.type] = !0, o.value.theme && (i[o.value.theme] = !0), i;
    }), m = d(() => {
      const g = `f-icon-${o.value && o.value.type ? o.value.type.replace("toasty-type-", "") : "default"}`, C = {
        "f-icon": !0
      };
      return C[g] = !0, C;
    }), y = d(() => o.value.title || o.value.message), T = d(() => e.showCloseButton), x = d(() => !!o.value.buttons || !!t.slots.default), w = d(() => A.getLocale() === "en" ? {
      wordBreak: "keep-all",
      overflowWrap: "break-word"
    } : {});
    function I(i) {
      i.stopPropagation(), i.preventDefault(), c.value = !1, setTimeout(() => {
        t.emit("close", o.value);
      }, 200);
    }
    function O(i, u) {
    }
    function b(i) {
      return `f-preten-link ${i.customClass ? i.customClass : ""}`;
    }
    E(n, () => {
      n.value;
    });
    const N = () => {
      var i;
      return s(_, null, [s("div", {
        class: "after-toast-msg text-right"
      }, [!t.slots.default && ((i = o.value.buttons) == null ? void 0 : i.map((u) => s("span", {
        class: b(u),
        onClick: (g) => void 0
      }, [u.text]))), t.slots.default && t.slots.default()])]);
    };
    return () => s("div", {
      class: v.value,
      style: "min-height:44px"
    }, [T.value && s("button", {
      title: A.getLocaleValue("messageBox.close"),
      class: "toast-close f-btn-icon f-bare",
      onClick: I
    }, [s("span", {
      class: "f-icon modal_close"
    }, null)]), y.value && s("section", {
      class: "modal-tips"
    }, [!r.value && s("div", {
      class: "float-left modal-tips-iconwrap"
    }, [s("span", {
      class: m.value
    }, null)]), s("div", {
      class: "modal-tips-content"
    }, [r.value && s(_, null, [s("h5", {
      class: "toast-title modal-tips-title",
      innerHTML: o.value.title
    }, null), s("p", {
      class: "toast-msg",
      innerHTML: o.value.message,
      style: w.value
    }, null), x.value && N()]), f.value && (o.value.buttons ? s("div", {
      class: "toast-title-btns-wrapper d-flex"
    }, [s("h5", {
      class: "toast-title modal-tips-title only-toast-msg",
      style: w.value,
      innerHTML: o.value.message
    }, null), s("div", {
      class: "after-toast-title text-right ml-auto"
    }, [N()])]) : s("h5", {
      class: "toast-title modal-tips-title only-toast-msg",
      style: w.value,
      innerHTML: o.value.message
    }, null))])])]);
  }
}), H = /* @__PURE__ */ R({
  name: "Notify",
  props: Lt,
  emits: ["close", "empty"],
  setup(e, t) {
    var O;
    const n = q(), o = `farris-notify-${(O = e.options) != null && O.type ? e.options.type : "info"}}`, c = d(() => ({
      "farris-notify": !0,
      [o]: n
    })), r = {
      left: 12,
      right: 12,
      top: 20,
      bottom: 12
    }, f = h(), v = h(e.options), m = h(e.showCloseButton), y = d(() => e.position || "bottom-right"), T = d(() => e.timeout != null ? e.timeout : 3e3), x = d(() => {
      const b = e.bottom ? e.bottom : r.bottom, N = e.top ? e.top : r.top, i = {
        transition: "all 0.2s ease",
        left: y.value.indexOf("left") > -1 ? `${e.left ? e.left : r.left}px` : "",
        right: y.value.indexOf("right") > -1 ? `${e.right ? e.right : r.right}px` : "",
        top: y.value.indexOf("top") > -1 ? `${N}px` : "",
        bottom: y.value.indexOf("bottom") > -1 ? `${b}px` : ""
      };
      return y.value.indexOf("center") > -1 && (i.left = "50%", i.marginLeft = "calc(-24rem / 2)", y.value === "center-center" && (i.top = "50%", i.transform = "translate(-50%, -50%)")), i;
    });
    function w(b) {
      t.emit("close");
    }
    T.value && setTimeout(() => {
      w();
    }, T.value), t.expose({
      closeToast: w,
      container: f,
      notifyPosition: y
    });
    function I(b, N) {
      w();
    }
    return () => {
      var b;
      return n ? s("div", {
        class: c.value,
        ref: f
      }, [(b = e.options) == null ? void 0 : b.message]) : s("div", {
        class: c.value,
        style: x.value,
        ref: f
      }, [s(j, {
        options: v.value,
        showCloseButton: m.value,
        animate: e.animate,
        onClose: (N) => I(N, v.value)
      }, null)]);
    };
  }
});
class z {
  constructor() {
    S(this, "notifyRefs", []);
    S(this, "globalConfig", Z({}));
  }
  escapeAllHtml(t) {
    if (typeof t != "string" || !t)
      return "";
    const n = document.createElement("div");
    return n.textContent = t || "", n.innerHTML.replace(/\\n/g, "<br>").replace(/\\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;").replace(/\\r/g, "");
  }
  createNotifyInstance(t) {
    const n = this, o = Object.assign({
      timeout: 3e3,
      position: "bottom-right",
      showCloseButton: !0,
      safeHtml: !0
    }, this.globalConfig, {
      ...t
    }), c = document.createElement("div");
    c.style.display = "contents";
    const r = W({
      setup() {
        var m;
        const f = h();
        function v() {
          f.value.container.style.transform = "scale(0)", setTimeout(() => {
            n.updateNotifyPositionForClose(o, f), r.unmount();
          }, 220);
        }
        if (o.position.indexOf("top") > -1) {
          const y = n.getNotifyInstances(o.position), T = y[y.length - 1];
          if (T) {
            const x = T.value.container.getBoundingClientRect();
            o.top = x.bottom;
          }
        }
        return o.safeHtml && ((m = o.options) != null && m.message) && (o.options.message = n.escapeAllHtml(o.options.message)), X(() => {
          document.body.removeChild(c);
        }), Y(() => {
          n.updateNotifyPositionForCreate(o, f);
        }), () => s(tt, {
          mode: "out-in",
          name: "fade",
          appear: !0
        }, {
          default: () => [s(H, et({
            ref: f
          }, o, {
            onClose: v
          }), null)]
        });
      }
    });
    return r.provide("NotifyService", this), document.body.appendChild(c), r.use(A.i18n), r.mount(c), r;
  }
  getNotifyInstances(t) {
    return this.notifyRefs.filter((n) => n.value.notifyPosition === t);
  }
  updateNotifyPositionForCreate(t, n) {
    if (this.notifyRefs && this.notifyRefs.length) {
      const a = window.innerHeight;
      t.position.indexOf("bottom") > -1 && this.getNotifyInstances(t.position).forEach((o) => {
        const c = o.value.container.getBoundingClientRect();
        o.value.container.style.bottom = c.height + a - c.bottom + "px";
      });
    }
    this.notifyRefs = [...this.notifyRefs, n];
  }
  updateNotifyPositionForClose(t, n) {
    const a = this.notifyRefs.indexOf(n);
    if (t.position.indexOf("top") > -1) {
      const o = this.getNotifyInstances(t.position), c = o.indexOf(n);
      o.slice(c + 1).forEach((r) => {
        r.value.container.style.top = r.value.container.offsetTop - r.value.container.offsetHeight + "px";
      });
    }
    a > -1 && this.notifyRefs.splice(a, 1);
  }
  show(t) {
    return this.createNotifyInstance(t);
  }
  buildNotifyProps(t, n) {
    let a = "", o = "", c, r, f;
    typeof n == "string" ? a = n : n && (a = n.message || "", o = n.title || "", r = n.position || null, f = n.showCloseButton != null ? n.showCloseButton : null, c = n.timeout != null ? n.timeout : null);
    const m = {
      options: {
        type: t,
        message: a,
        title: o
      }
    };
    return r != null && (m.position = r), f != null && (m.showCloseButton = f), c != null && (m.timeout = c), m;
  }
  info(t) {
    const n = this.buildNotifyProps("info", t);
    return this.show(n);
  }
  success(t) {
    const n = this.buildNotifyProps("success", t);
    return this.show(n);
  }
  warning(t) {
    const n = this.buildNotifyProps("warning", t);
    return this.show(n);
  }
  error(t) {
    const n = this.buildNotifyProps("error", t);
    return this.show(n);
  }
  close(t) {
    t && t.unmount();
  }
  closeAll() {
    this.notifyRefs.forEach((t) => {
      t == null || t.value.closeToast();
    }), this.notifyRefs.length = 0;
  }
}
const Ot = Symbol("NOTIFY_SERVICE_TOKEN");
H.install = (e) => {
  e.component(H.name, H), e.component(j.name, j);
  const t = new z();
  e.provide(Ot, t), e.provide("FNotifyService", t);
};
function Bt(e, t, n) {
  W({
    setup() {
      return X(() => {
        t && t();
      }), () => s(k, e, null);
    }
  }).mount(n);
}
const M = class M {
  static show(t, n) {
    if (this.isMobile) {
      this.notifyService.error("存在校验未通过项，请检查！");
      return;
    }
    this.clear();
    let a = 0;
    this.verifyContainer = document.createElement("div"), n && n.offsetHeight > 0 ? (a = n.offsetHeight - 120, n.appendChild(this.verifyContainer)) : (a = document.documentElement.clientHeight - 120, document.body.appendChild(this.verifyContainer)), t.maxHeight = t.maxHeight ? t.maxHeight : a, Bt(t, this.clear, this.verifyContainer);
  }
  static clear() {
    if (M.isMobile)
      return;
    let t = this.verifyContainer;
    t && (t.parentNode && t.parentNode.removeChild(t), t = null);
  }
};
S(M, "verifyContainer", null), S(M, "isMobile", q()), S(M, "notifyService", new z());
let $ = M;
const St = /* @__PURE__ */ R({
  name: "FVerifyDetailDesign",
  props: D,
  emits: ["validatorClick", "listshow"],
  setup(e, t) {
    let n = [];
    const a = h(e.showList), o = h(e.maxHeight), c = h(e.verifyList), r = h(e.showType), f = h(e.verifyType), v = h(), m = nt("design-item-context"), y = ot(v, m);
    Y(() => {
      v.value.componentInstance = y;
    }), t.expose(y.value);
    function T() {
      a.value = !a.value, t.emit("listshow", a.value);
    }
    function x(l) {
      var p;
      (p = f.value) == null || p.forEach((L) => {
        L.active = L.type === l;
      });
    }
    function w(l) {
      n.forEach((p) => {
        p.show = p.type === l;
      });
    }
    function I(l) {
      l.length <= 0 || (x(l.type), w(l.type));
    }
    function O() {
      a.value = !1, t.emit("listshow", !1);
    }
    function b(l) {
      t.emit("validatorClick", l);
    }
    function N(l) {
      return s("li", {
        class: "f-verify-list",
        onClick: () => b(l)
      }, [s("span", {
        class: ["f-icon f-icon-close-outline list-icon list-error", {
          "list-warning": l.type === "warn"
        }]
      }, null), s("div", {
        class: "list-con"
      }, [s("p", {
        class: "list-title",
        title: l.title
      }, [l.title]), s("p", {
        class: "list-msg",
        title: l.msg
      }, [l.msg])])]);
    }
    function i() {
      return n.map((l) => s("ul", {
        class: ["f-verify-list-content", {
          active: l.show
        }]
      }, [l.list && l.list.map((p) => N(p))]));
    }
    const u = d(() => {
      var l;
      return ((l = c.value) == null ? void 0 : l.length) > 0;
    });
    function g(l) {
      return {
        "btn btn-secondary": !0,
        active: l.active,
        disabled: l.length <= 0
      };
    }
    const C = d(() => {
      var l;
      return (l = f.value) == null ? void 0 : l.map((p) => s("button", {
        class: g(p),
        onClick: () => I(p)
      }, [p.title, s("span", null, [p.length])]));
    }), P = d(() => {
      var l;
      return s("div", {
        class: "f-verify-nums",
        onClick: T
      }, [s("span", {
        class: "nums-icon f-icon f-icon-warning"
      }, null), s("span", {
        class: "nums-count"
      }, [(l = c.value) == null ? void 0 : l.length])]);
    });
    function F() {
      var p;
      const l = [];
      f.value && ((p = f.value) != null && p.length) && (f.value.map((L) => {
        const B = {
          list: L.type === "all" ? c.value : [],
          show: !1,
          type: L.type
        };
        l.push(B);
      }), l.map((L, B) => {
        const U = c.value.filter((G) => G.type === L.type);
        l[B].list = B !== 0 ? U : l[B].list;
      }), f.value.map((L, B) => {
        L.length = l[B].list.length;
      })), n = l;
    }
    return K(() => {
      F(), w(r.value), x(r.value);
    }), () => s("div", {
      ref: v
    }, [u.value ? s("div", {
      class: "f-verify-detail"
    }, [s("div", {
      class: "f-verify-detail-content"
    }, [P.value, s("div", {
      class: "f-verify-form-main",
      hidden: !a.value
    }, [s("div", {
      class: "f-verify-form-content"
    }, [s("div", {
      class: "f-verify-form-content-arrow"
    }, null), s("div", {
      class: "f-verify-form-content-list"
    }, [s("div", {
      class: "f-verify-forms-title"
    }, [s("div", {
      class: "btn-group"
    }, [C.value]), s("div", {
      class: "f-verify-close",
      onClick: O
    }, [s("span", {
      class: "f-icon f-icon-close"
    }, null)])]), s("div", {
      class: "f-verify-forms-list",
      style: {
        maxHeight: o.value + "px"
      }
    }, [i()])])])])])]) : null]);
  }
}), At = {
  install(e) {
    e.component(k.name, k), e.provide("FVerifyDetailService", $);
  },
  register(e, t, n, a) {
    e["verify-detail"] = k, t["verify-detail"] = V;
  },
  registerDesigner(e, t, n) {
    e["verify-detail"] = St, t["verify-detail"] = V;
  }
};
export {
  k as FVerifyDetail,
  $ as FVerifyDetailService,
  At as default,
  V as propsResolver,
  D as verifyDetailProps
};