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

Farris Vue, a Farris Design based Vue3 component library.

var I = Object.defineProperty;
var P = (i, n, l) => n in i ? I(i, n, { enumerable: !0, configurable: !0, writable: !0, value: l }) : i[n] = l;
var $ = (i, n, l) => P(i, typeof n != "symbol" ? n + "" : n, l);
import { defineComponent as N, ref as y, watch as M, computed as m, createVNode as t, onBeforeMount as O, createApp as _, onUnmounted as U, inject as z, onMounted as G } from "vue";
import { resolveAppearance as J, createPropsResolver as K } from "../dynamic-resolver/index.esm.js";
import { useDesignerComponent as Q } from "../designer-canvas/index.esm.js";
const W = /* @__PURE__ */ new Map([
  ["appearance", J]
]);
function X(i, n, l) {
  return n;
}
const Y = "https://json-schema.org/draft/2020-12/schema", Z = "https://farris-design.gitee.io/verify-detail.schema.json", ee = "verify-detail", te = "A Farris Component", ie = "object", se = {
  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
  }
}, ne = [
  "id",
  "type"
], le = {
  $schema: Y,
  $id: Z,
  title: ee,
  description: te,
  type: ie,
  properties: se,
  required: ne
}, ae = "verify-detail", oe = "A Farris Component", re = "object", ce = {
  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: ae,
  description: oe,
  type: re,
  categories: ce
}, F = {
  /** 表单验证默认显示的分组信息 */
  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 }
}, E = K(F, le, W, X, fe), T = /* @__PURE__ */ N({
  name: "FVerifyDetail",
  props: F,
  emits: ["validatorClick", "listshow"],
  setup(i, n) {
    let l = [];
    const o = y(i.showList);
    M(() => i.showList, () => {
      o.value = i.showList;
    });
    const c = y(i.verifyType);
    M(() => i.verifyType, () => {
      c.value = i.verifyType;
    });
    function h() {
      o.value = !o.value, n.emit("listshow", o.value);
    }
    function g(e) {
      var a;
      !e && c.value && c.value.length > 0 && (e = c.value[0].type), (a = c.value) == null || a.forEach((f) => {
        f.active = f.type === e;
      });
    }
    function u(e) {
      e = e || l[0].type, l.forEach((a) => {
        a.show = a.type === e;
      });
    }
    function w(e) {
      e.length <= 0 || (g(e.type), u(e.type));
    }
    function k() {
      o.value = !1, n.emit("listshow", !1);
    }
    function b(e) {
      var a;
      (a = i.onValidatorClick) == null || a.call(i, e);
    }
    function D(e) {
      return t("li", {
        class: "f-verify-list",
        onClick: () => b(e)
      }, [t("span", {
        class: ["f-icon f-icon-close-outline list-icon list-error", {
          "list-warning": e.type === "warn"
        }]
      }, null), t("div", {
        class: "list-con"
      }, [t("div", {
        class: "list-title",
        title: e.title
      }, [e.title]), t("div", {
        class: "list-msg",
        title: e.msg
      }, [e.msg])])]);
    }
    function L() {
      return l.map((e) => t("ul", {
        class: ["f-verify-list-content", {
          active: e.show
        }]
      }, [e.list && e.list.map((a) => D(a))]));
    }
    const C = m(() => {
      var e;
      return ((e = i.verifyList) == null ? void 0 : e.length) > 0;
    });
    function j(e) {
      return {
        btn: !0,
        "verify-title-btn": !0,
        "f-state-selected": e.active,
        disabled: e.length <= 0
      };
    }
    const x = m(() => {
      var e;
      return (e = c.value) == null ? void 0 : e.map((a) => t("button", {
        class: j(a),
        onClick: () => w(a)
      }, [a.title, t("span", null, [a.length])]));
    }), H = m(() => {
      var e;
      return t("div", {
        class: "f-verify-nums",
        onClick: h
      }, [t("span", {
        class: "nums-icon f-icon f-icon-warning"
      }, null), t("span", {
        class: "nums-count"
      }, [(e = i.verifyList) == null ? void 0 : e.length])]);
    });
    function S() {
      var a;
      const e = [];
      c.value && ((a = c.value) != null && a.length) && (c.value.map((f) => {
        const v = {
          list: f.type === "all" ? i.verifyList : [],
          show: !1,
          type: f.type
        };
        e.push(v);
      }), e.map((f, v) => {
        const V = i.verifyList.filter((A) => A.type === f.type);
        e[v].list = v !== 0 ? V : e[v].list;
      }), c.value.map((f, v) => {
        f.length = e[v].list.length;
      })), l = e;
    }
    return O(() => {
      S(), u(i.showType), g(i.showType);
    }), () => t("div", {
      class: C.value ? `f-verify-detail ${i.customClass}` : ""
    }, [C.value ? t("div", {
      class: "f-verify-detail-content"
    }, [H.value, t("div", {
      class: "f-verify-form-main",
      hidden: !o.value
    }, [t("div", {
      class: "f-verify-form-content"
    }, [t("div", {
      class: "f-verify-form-content-arrow"
    }, null), t("div", {
      class: "f-verify-form-content-list"
    }, [t("div", {
      class: "f-verify-forms-title"
    }, [t("div", {
      class: "btn-group"
    }, [x.value]), t("div", {
      class: "f-verify-close",
      onClick: k
    }, [t("span", {
      class: "f-icon f-icon-close"
    }, null)])]), t("div", {
      class: "f-verify-forms-list",
      style: {
        maxHeight: i.maxHeight + "px"
      }
    }, [L()])])])])]) : null]);
  }
});
function ue(i, n, l) {
  _({
    setup() {
      return U(() => {
        n && n();
      }), () => t(T, i, null);
    }
  }).mount(l);
}
class R {
  static show(n, l) {
    this.clear();
    let o = 0;
    this.verifyContainer = document.createElement("div"), l && l.offsetHeight > 0 ? (o = l.offsetHeight - 120, l.appendChild(this.verifyContainer)) : (o = document.documentElement.clientHeight - 120, document.body.appendChild(this.verifyContainer)), n.maxHeight = n.maxHeight ? n.maxHeight : o, ue(n, this.clear, this.verifyContainer);
  }
  static clear() {
    let n = this.verifyContainer;
    n && (n.parentNode && n.parentNode.removeChild(n), n = null);
  }
}
$(R, "verifyContainer", null);
const ve = /* @__PURE__ */ N({
  name: "FVerifyDetailDesign",
  props: F,
  emits: ["validatorClick", "listshow"],
  setup(i, n) {
    let l = [];
    const o = y(i.showList), c = y(i.maxHeight), h = y(i.verifyList), g = y(i.showType), u = y(i.verifyType), w = y(), k = z("design-item-context"), b = Q(w, k);
    G(() => {
      w.value.componentInstance = b;
    }), n.expose(b.value);
    function D() {
      o.value = !o.value, n.emit("listshow", o.value);
    }
    function L(s) {
      var r;
      (r = u.value) == null || r.forEach((d) => {
        d.active = d.type === s;
      });
    }
    function C(s) {
      l.forEach((r) => {
        r.show = r.type === s;
      });
    }
    function j(s) {
      s.length <= 0 || (L(s.type), C(s.type));
    }
    function x() {
      o.value = !1, n.emit("listshow", !1);
    }
    function H(s) {
      n.emit("validatorClick", s);
    }
    function S(s) {
      return t("li", {
        class: "f-verify-list",
        onClick: () => H(s)
      }, [t("span", {
        class: ["f-icon f-icon-close-outline list-icon list-error", {
          "list-warning": s.type === "warn"
        }]
      }, null), t("div", {
        class: "list-con"
      }, [t("p", {
        class: "list-title",
        title: s.title
      }, [s.title]), t("p", {
        class: "list-msg",
        title: s.msg
      }, [s.msg])])]);
    }
    function e() {
      return l.map((s) => t("ul", {
        class: ["f-verify-list-content", {
          active: s.show
        }]
      }, [s.list && s.list.map((r) => S(r))]));
    }
    const a = m(() => {
      var s;
      return ((s = h.value) == null ? void 0 : s.length) > 0;
    });
    function f(s) {
      return {
        "btn btn-secondary": !0,
        active: s.active,
        disabled: s.length <= 0
      };
    }
    const v = m(() => {
      var s;
      return (s = u.value) == null ? void 0 : s.map((r) => t("button", {
        class: f(r),
        onClick: () => j(r)
      }, [r.title, t("span", null, [r.length])]));
    }), V = m(() => {
      var s;
      return t("div", {
        class: "f-verify-nums",
        onClick: D
      }, [t("span", {
        class: "nums-icon f-icon f-icon-warning"
      }, null), t("span", {
        class: "nums-count"
      }, [(s = h.value) == null ? void 0 : s.length])]);
    });
    function A() {
      var r;
      const s = [];
      u.value && ((r = u.value) != null && r.length) && (u.value.map((d) => {
        const p = {
          list: d.type === "all" ? h.value : [],
          show: !1,
          type: d.type
        };
        s.push(p);
      }), s.map((d, p) => {
        const B = h.value.filter((q) => q.type === d.type);
        s[p].list = p !== 0 ? B : s[p].list;
      }), u.value.map((d, p) => {
        d.length = s[p].list.length;
      })), l = s;
    }
    return O(() => {
      A(), C(g.value), L(g.value);
    }), () => t("div", {
      ref: w
    }, [a.value ? t("div", {
      class: "f-verify-detail"
    }, [t("div", {
      class: "f-verify-detail-content"
    }, [V.value, t("div", {
      class: "f-verify-form-main",
      hidden: !o.value
    }, [t("div", {
      class: "f-verify-form-content"
    }, [t("div", {
      class: "f-verify-form-content-arrow"
    }, null), t("div", {
      class: "f-verify-form-content-list"
    }, [t("div", {
      class: "f-verify-forms-title"
    }, [t("div", {
      class: "btn-group"
    }, [v.value]), t("div", {
      class: "f-verify-close",
      onClick: x
    }, [t("span", {
      class: "f-icon f-icon-close"
    }, null)])]), t("div", {
      class: "f-verify-forms-list",
      style: {
        maxHeight: c.value + "px"
      }
    }, [e()])])])])])]) : null]);
  }
}), me = {
  install(i) {
    i.component(T.name, T), i.provide("FVerifyDetailService", R);
  },
  register(i, n, l, o) {
    i["verify-detail"] = T, n["verify-detail"] = E;
  },
  registerDesigner(i, n, l) {
    i["verify-detail"] = ve, n["verify-detail"] = E;
  }
};
export {
  T as FVerifyDetail,
  R as FVerifyDetailService,
  me as default,
  E as propsResolver,
  F as verifyDetailProps
};