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

Farris Vue, a Farris Design based Vue3 component library.

var Q = Object.defineProperty;
var X = (e, t, n) => t in e ? Q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var I = (e, t, n) => X(e, typeof t != "symbol" ? t + "" : t, n);
import { defineComponent as P, ref as m, watch as A, computed as d, createVNode as s, onBeforeMount as _, Fragment as q, reactive as Z, createApp as K, onUnmounted as W, 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 j } 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
  }
}, pt = [
  "id",
  "type"
], yt = {
  $schema: rt,
  $id: ct,
  title: ut,
  description: ft,
  type: dt,
  properties: vt,
  required: pt
}, 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 = {
  /** 表单验证默认显示的分组信息 */
  showType: { type: String, default: "" },
  /** 是否默认显示验证信息列表 */
  showList: { type: Boolean, default: !1 },
  /** 表单验证列表 */
  verifyList: { type: Array, default: [] },
  verifyType: { type: Array, default: [] },
  /** 自定义样式 */
  customClass: { type: String, default: "" },
  /** 验证信息列表的最大高度 */
  maxHeight: { type: Number, default: 200 },
  /** 验证信息条目点击事件回调 */
  onValidatorClick: { type: Function }
}, V = st(D, yt, lt, at, bt), H = /* @__PURE__ */ P({
  name: "FVerifyDetail",
  props: D,
  emits: ["validatorClick", "listshow"],
  setup(e, t) {
    let n = [];
    const a = m(e.showList);
    A(() => e.showList, () => {
      a.value = e.showList;
    });
    const o = m(e.verifyType);
    A(() => e.verifyType, () => {
      o.value = e.verifyType;
    });
    function c() {
      a.value = !a.value, t.emit("listshow", a.value);
    }
    function r(i) {
      var f;
      !i && o.value && o.value.length > 0 && (i = o.value[0].type), (f = o.value) == null || f.forEach((h) => {
        h.active = h.type === i;
      });
    }
    function u(i) {
      i = i || n[0].type, n.forEach((f) => {
        f.show = f.type === i;
      });
    }
    function g(i) {
      i.length <= 0 || (r(i.type), u(i.type));
    }
    function y() {
      a.value = !1, t.emit("listshow", !1);
    }
    function v(i) {
      var f;
      (f = e.onValidatorClick) == null || f.call(e, i);
    }
    function T(i) {
      return s("li", {
        class: "f-verify-list",
        onClick: () => v(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((f) => T(f))]));
    }
    const w = d(() => {
      var i;
      return ((i = e.verifyList) == null ? void 0 : i.length) > 0;
    });
    function S(i) {
      return {
        btn: !0,
        "verify-title-btn": !0,
        "f-state-selected": i.active,
        disabled: i.length <= 0
      };
    }
    const B = d(() => {
      var i;
      return (i = o.value) == null ? void 0 : i.map((f) => s("button", {
        class: S(f),
        onClick: () => g(f)
      }, [f.title, s("span", null, [f.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 f;
      const i = [];
      o.value && ((f = o.value) != null && f.length) && (o.value.map((h) => {
        const C = {
          list: h.type === "all" ? e.verifyList : [],
          show: !1,
          type: h.type
        };
        i.push(C);
      }), i.map((h, C) => {
        const F = e.verifyList.filter((M) => M.type === h.type);
        i[C].list = C !== 0 ? F : i[C].list;
      }), o.value.map((h, C) => {
        h.length = i[C].list.length;
      })), n = i;
    }
    return _(() => {
      N(), u(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"
    }, [B.value]), s("div", {
      class: "f-verify-close",
      onClick: y
    }, [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();
m("");
function z() {
  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 u of n)
    if (u.test(e))
      return !1;
  for (const u of t)
    if (u.test(e))
      return !0;
  const a = "ontouchstart" in window || navigator.maxTouchPoints > 0, o = screen.width, c = screen.height, r = Math.min(o, c);
  return !!(a && r <= 768);
}
const xt = {
  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 }
}, Lt = {
  showCloseButton: { type: Boolean, default: !0 },
  animate: { type: String, default: "fadeIn" },
  options: { type: Object }
}, E = /* @__PURE__ */ P({
  name: "Toast",
  props: Lt,
  emits: ["close", "click"],
  setup: (e, t) => {
    const n = m(e.animate), a = "fadeOut", o = d(() => e.options), c = m(!1), r = d(() => o.value.title && o.value.message), u = d(() => !o.value.title && o.value.message), g = 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;
    }), y = d(() => {
      const h = `f-icon-${o.value && o.value.type ? o.value.type.replace("toasty-type-", "") : "default"}`, C = {
        "f-icon": !0
      };
      return C[h] = !0, C;
    }), v = d(() => o.value.title || o.value.message), T = d(() => e.showCloseButton), x = d(() => !!o.value.buttons || !!t.slots.default), w = d(() => j.getLocale() === "en" ? {
      wordBreak: "keep-all",
      overflowWrap: "break-word"
    } : {});
    function S(i) {
      i.stopPropagation(), i.preventDefault(), c.value = !1, setTimeout(() => {
        t.emit("close", o.value);
      }, 200);
    }
    function B(i, f) {
    }
    function b(i) {
      return `f-preten-link ${i.customClass ? i.customClass : ""}`;
    }
    A(n, () => {
      n.value;
    });
    const N = () => {
      var i;
      return s(q, null, [s("div", {
        class: "after-toast-msg text-right"
      }, [!t.slots.default && ((i = o.value.buttons) == null ? void 0 : i.map((f) => s("span", {
        class: b(f),
        onClick: (h) => void 0
      }, [f.text]))), t.slots.default && t.slots.default()])]);
    };
    return () => s("div", {
      class: g.value,
      style: "min-height:44px"
    }, [T.value && s("button", {
      title: j.getLocaleValue("messageBox.close"),
      class: "toast-close f-btn-icon f-bare",
      onClick: S
    }, [s("span", {
      class: "f-icon modal_close"
    }, null)]), v.value && s("section", {
      class: "modal-tips"
    }, [!r.value && s("div", {
      class: "float-left modal-tips-iconwrap"
    }, [s("span", {
      class: y.value
    }, null)]), s("div", {
      class: "modal-tips-content"
    }, [r.value && s(q, 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()]), u.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))])])]);
  }
}), R = /* @__PURE__ */ P({
  name: "Notify",
  props: xt,
  emits: ["close", "empty"],
  setup(e, t) {
    var B;
    const n = z(), o = `farris-notify-${(B = e.options) != null && B.type ? e.options.type : "info"}}`, c = d(() => ({
      "farris-notify": !0,
      [o]: n
    })), r = {
      left: 12,
      right: 12,
      top: 20,
      bottom: 12
    }, u = m(), g = m(e.options), y = m(e.showCloseButton), v = 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: v.value.indexOf("left") > -1 ? `${e.left ? e.left : r.left}px` : "",
        right: v.value.indexOf("right") > -1 ? `${e.right ? e.right : r.right}px` : "",
        top: v.value.indexOf("top") > -1 ? `${N}px` : "",
        bottom: v.value.indexOf("bottom") > -1 ? `${b}px` : ""
      };
      return v.value.indexOf("center") > -1 && (i.left = "50%", i.marginLeft = "calc(-24rem / 2)", v.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: u,
      notifyPosition: v
    });
    function S(b, N) {
      w();
    }
    return () => {
      var b;
      return n ? s("div", {
        class: c.value,
        ref: u
      }, [(b = e.options) == null ? void 0 : b.message]) : s("div", {
        class: c.value,
        style: x.value,
        ref: u
      }, [s(E, {
        options: g.value,
        showCloseButton: y.value,
        animate: e.animate,
        onClose: (N) => S(N, g.value)
      }, null)]);
    };
  }
});
class U {
  constructor() {
    I(this, "notifyRefs", []);
    I(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 = K({
      setup() {
        var y;
        const u = m();
        function g() {
          u.value.container.style.transform = "scale(0)", setTimeout(() => {
            n.updateNotifyPositionForClose(o, u), r.unmount();
          }, 220);
        }
        if (o.position.indexOf("top") > -1) {
          const v = n.getNotifyInstances(o.position), T = v[v.length - 1];
          if (T) {
            const x = T.value.container.getBoundingClientRect();
            o.top = x.bottom;
          }
        }
        return o.safeHtml && ((y = o.options) != null && y.message) && (o.options.message = n.escapeAllHtml(o.options.message)), W(() => {
          document.body.removeChild(c);
        }), Y(() => {
          n.updateNotifyPositionForCreate(o, u);
        }), () => s(tt, {
          mode: "out-in",
          name: "fade",
          appear: !0
        }, {
          default: () => [s(R, et({
            ref: u
          }, o, {
            onClose: g
          }), null)]
        });
      }
    });
    return r.provide("NotifyService", this), document.body.appendChild(c), r.use(j.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, u;
    typeof n == "string" ? a = n : n && (a = n.message || "", o = n.title || "", r = n.position || null, u = n.showCloseButton != null ? n.showCloseButton : null, c = n.timeout != null ? n.timeout : null);
    const y = {
      options: {
        type: t,
        message: a,
        title: o
      }
    };
    return r != null && (y.position = r), u != null && (y.showCloseButton = u), c != null && (y.timeout = c), y;
  }
  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 St = Symbol("NOTIFY_SERVICE_TOKEN");
R.install = (e) => {
  e.component(R.name, R), e.component(E.name, E);
  const t = new U();
  e.provide(St, t), e.provide("FNotifyService", t);
};
function Bt(e, t, n) {
  K({
    setup() {
      return W(() => {
        t && t();
      }), () => s(H, e, null);
    }
  }).mount(n);
}
const k = class k {
  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 (k.isMobile)
      return;
    let t = this.verifyContainer;
    t && (t.parentNode && t.parentNode.removeChild(t), t = null);
  }
};
I(k, "verifyContainer", null), I(k, "isMobile", z()), I(k, "notifyService", new U());
let $ = k;
const Ot = /* @__PURE__ */ P({
  name: "FVerifyDetailDesign",
  props: D,
  emits: ["validatorClick", "listshow"],
  setup(e, t) {
    let n = [];
    const a = m(e.showList), o = m(e.maxHeight), c = m(e.verifyList), r = m(e.showType), u = m(e.verifyType), g = m(), y = nt("design-item-context"), v = ot(g, y);
    Y(() => {
      g.value.componentInstance = v;
    }), t.expose(v.value);
    function T() {
      a.value = !a.value, t.emit("listshow", a.value);
    }
    function x(l) {
      var p;
      (p = u.value) == null || p.forEach((L) => {
        L.active = L.type === l;
      });
    }
    function w(l) {
      n.forEach((p) => {
        p.show = p.type === l;
      });
    }
    function S(l) {
      l.length <= 0 || (x(l.type), w(l.type));
    }
    function B() {
      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 f = d(() => {
      var l;
      return ((l = c.value) == null ? void 0 : l.length) > 0;
    });
    function h(l) {
      return {
        "btn btn-secondary": !0,
        active: l.active,
        disabled: l.length <= 0
      };
    }
    const C = d(() => {
      var l;
      return (l = u.value) == null ? void 0 : l.map((p) => s("button", {
        class: h(p),
        onClick: () => S(p)
      }, [p.title, s("span", null, [p.length])]));
    }), F = 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 M() {
      var p;
      const l = [];
      u.value && ((p = u.value) != null && p.length) && (u.value.map((L) => {
        const O = {
          list: L.type === "all" ? c.value : [],
          show: !1,
          type: L.type
        };
        l.push(O);
      }), l.map((L, O) => {
        const G = c.value.filter((J) => J.type === L.type);
        l[O].list = O !== 0 ? G : l[O].list;
      }), u.value.map((L, O) => {
        L.length = l[O].list.length;
      })), n = l;
    }
    return _(() => {
      M(), w(r.value), x(r.value);
    }), () => s("div", {
      ref: g
    }, [f.value ? s("div", {
      class: "f-verify-detail"
    }, [s("div", {
      class: "f-verify-detail-content"
    }, [F.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: B
    }, [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(H.name, H), e.provide("FVerifyDetailService", $);
  },
  register(e, t, n, a) {
    e["verify-detail"] = H, t["verify-detail"] = V;
  },
  registerDesigner(e, t, n) {
    e["verify-detail"] = Ot, t["verify-detail"] = V;
  }
};
export {
  H as FVerifyDetail,
  $ as FVerifyDetailService,
  At as default,
  V as propsResolver,
  D as verifyDetailProps
};