@farris/ui-vue/components/list-nav/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as V, ref as D, computed as F, createVNode as v, inject as B, onMounted as X } from "vue";
import { isPlainObject as j, cloneDeep as q } from "lodash-es";
const z = {}, _ = {};
function w(r) {
  const { properties: e, title: t, ignore: s } = r, a = s && Array.isArray(s), o = Object.keys(e).reduce((n, f) => ((!a || !s.find((m) => m === f)) && (n[f] = e[f].type === "object" && e[f].properties ? w(e[f]) : q(e[f].default)), n), {});
  if (t && (!a || !s.find((n) => n === "id"))) {
    const n = t.toLowerCase().replace(/-/g, "_");
    o.id = `${n}_${Math.random().toString().slice(2, 6)}`;
  }
  return o;
}
function Y(r) {
  const { properties: e, title: t, required: s } = r;
  if (s && Array.isArray(s)) {
    const a = s.reduce((o, n) => (o[n] = e[n].type === "object" && e[n].properties ? w(e[n]) : q(e[n].default), o), {});
    if (t && s.find((o) => o === "id")) {
      const o = t.toLowerCase().replace(/-/g, "_");
      a.id = `${o}_${Math.random().toString().slice(2, 6)}`;
    }
    return a;
  }
  return {
    type: t
  };
}
function W(r, e = {}, t) {
  const s = z[r];
  if (s) {
    let a = Y(s);
    const o = _[r];
    return a = o ? o({ getSchemaByType: W }, a, e, t) : a, a;
  }
  return null;
}
function Z(r, e) {
  const t = w(e);
  return Object.keys(t).reduce((s, a) => (Object.prototype.hasOwnProperty.call(r, a) && (s[a] && j(s[a]) && j(r[a] || !r[a]) ? Object.assign(s[a], r[a] || {}) : s[a] = r[a]), s), t), t;
}
function U(r, e) {
  return Object.keys(r).filter((s) => r[s] != null).reduce((s, a) => {
    if (e.has(a)) {
      const o = e.get(a);
      if (typeof o == "string")
        s[o] = r[a];
      else {
        const n = o(a, r[a], r);
        Object.assign(s, n);
      }
    } else
      s[a] = r[a];
    return s;
  }, {});
}
function H(r, e, t = /* @__PURE__ */ new Map()) {
  const s = Z(r, e);
  return U(s, t);
}
function R(r = {}) {
  function e(l, c, i, u) {
    if (typeof i == "number")
      return u[l].length === i;
    if (typeof i == "object") {
      const y = Object.keys(i)[0], g = i[y];
      if (y === "not")
        return Number(u[l].length) !== Number(g);
      if (y === "moreThan")
        return Number(u[l].length) >= Number(g);
      if (y === "lessThan")
        return Number(u[l].length) <= Number(g);
    }
    return !1;
  }
  function t(l, c, i, u) {
    return u[l] && u[l].propertyValue && String(u[l].propertyValue.value) === String(i);
  }
  const s = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", t]
  ]);
  Object.keys(r).reduce((l, c) => (l.set(c, r[c]), l), s);
  function a(l, c) {
    const i = l;
    return typeof c == "number" ? [{ target: i, operator: "length", param: null, value: Number(c) }] : typeof c == "boolean" ? [{ target: i, operator: "getProperty", param: l, value: !!c }] : typeof c == "object" ? Object.keys(c).map((u) => {
      if (u === "length")
        return { target: i, operator: "length", param: null, value: c[u] };
      const y = u, g = c[u];
      return { target: i, operator: "getProperty", param: y, value: g };
    }) : [];
  }
  function o(l) {
    return Object.keys(l).reduce((i, u) => {
      const y = a(u, l[u]);
      return i.push(...y), i;
    }, []);
  }
  function n(l, c) {
    if (s.has(l.operator)) {
      const i = s.get(l.operator);
      return i && i(l.target, l.param, l.value, c) || !1;
    }
    return !1;
  }
  function f(l, c) {
    return o(l).reduce((y, g) => y && n(g, c), !0);
  }
  function m(l, c) {
    const i = Object.keys(l), u = i.includes("allOf"), y = i.includes("anyOf"), g = u || y, M = (g ? l[g ? u ? "allOf" : "anyOf" : "allOf"] : [l]).map((k) => f(k, c));
    return u ? !M.includes(!1) : M.includes(!0);
  }
  return { parseValueSchema: m };
}
const T = {
  button: { type: "button", name: "按钮" },
  "response-toolbar": { type: "response-toolbar", name: "工具栏" },
  "response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
  "content-container": { type: "content-container", name: "容器" },
  "input-group": { type: "input-group", name: "文本" },
  textarea: { type: "textarea", name: "多行文本" },
  lookup: { type: "lookup", name: "帮助" },
  "number-spinner": { type: "number-spinner", name: "数值" },
  "date-picker": { type: "date-picker", name: "日期" },
  switch: { type: "switch", name: "开关" },
  "radio-group": { type: "radio-group", name: "单选组" },
  "check-box": { type: "check-box", name: "复选框" },
  "check-group": { type: "check-group", name: "复选框组" },
  "combo-list": { type: "combo-list", name: "下拉列表" },
  "response-form": { type: "response-form", name: "卡片面板" },
  "response-layout": { type: "response-layout", name: "布局容器", icon: "response-layout-3" },
  "response-layout-item": { type: "response-layout-item", name: "布局", icon: "response-layout-1" },
  "tree-grid": { type: "tree-grid", name: "树表格" },
  "tree-grid-column": { type: "tree-grid-column", name: "树表格列" },
  "data-grid": { type: "data-grid", name: "表格" },
  "data-grid-column": { type: "data-grid-column", name: "表格列" },
  module: { type: "Module", name: "模块" },
  component: { type: "component", name: "组件" },
  tabs: { type: "tabs", name: "标签页" },
  "tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
  "tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮" },
  "html-template": { type: "html-template", name: "模板容器" },
  "time-picker": { type: "time-picker", name: "时间选择" },
  section: { type: "section", name: "分组面板" },
  "section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" },
  "section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" },
  splitter: { type: "splitter", name: "分栏面板" },
  "splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" },
  "component-ref": { type: "component-ref", name: "组件引用节点" },
  uploader: { type: "uploader", name: "附件上传" },
  "page-header": { type: "page-header", name: "页头" },
  "page-footer": { type: "page-footer", name: "页脚" },
  "tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏" },
  fieldset: { type: "fieldset", name: "分组" },
  "query-solution": { type: "query-solution", name: "筛选方案" },
  drawer: { type: "drawer", name: "抽屉" },
  "external-container": { type: "external-container", name: "外部容器", icon: "content-container" },
  "list-nav": { type: "list-nav", name: "列表导航" },
  "filter-bar": { type: "filter-bar", name: "筛选条" }
}, K = {}, I = {};
R();
function x(r, e, t = /* @__PURE__ */ new Map(), s = (n, f, m, l) => f, a = {}, o = (n) => n) {
  return z[e.title] = e, _[e.title] = s, K[e.title] = a, I[e.title] = o, (n = {}, f = !0) => {
    if (!f)
      return U(n, t);
    const m = H(n, e, t), l = Object.keys(r).reduce((c, i) => (c[i] = r[i].default, c), {});
    return Object.assign(l, m);
  };
}
function ee(r, e) {
  return { customClass: e.class, customStyle: e.style };
}
const te = /* @__PURE__ */ new Map([
  ["appearance", ee]
]);
function ne(r, e, t) {
  return e;
}
const ae = "https://json-schema.org/draft/2020-12/schema", oe = "https://farris-design.gitee.io/list-nav.schema.json", re = "list-nav", se = "A Farris Container Component", le = "object", ce = {
  id: {
    description: "The unique identifier for a list-nav",
    type: "string"
  },
  type: {
    description: "The type string of list-nav component",
    type: "string",
    default: "list-nav"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  size: {
    description: "",
    type: "object",
    properties: {
      width: {
        type: "number"
      },
      height: {
        type: "number"
      }
    },
    default: null
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, ie = [
  "id",
  "type",
  "contents"
], pe = {
  $schema: ae,
  $id: oe,
  title: re,
  description: se,
  type: le,
  properties: ce,
  required: ie
}, ue = "list-nav", fe = "A Farris Component", me = "object", ye = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "类型",
        title: "类型",
        type: "string",
        readonly: !0
      }
    }
  }
}, ve = {
  title: ue,
  description: fe,
  type: me,
  categories: ye
}, S = {
  /** 位置 */
  position: { Type: String, default: "left" },
  /** listNav名称 */
  title: { Type: String, default: "" },
  /** 宽度或者高度 */
  size: { Type: Number || String, default: 218 },
  /** 是否启用收折 */
  collapsible: { Type: Boolean, default: !0 },
  /** 初始收折状态 */
  folded: { Type: Boolean, default: !1 },
  /** 控件禁用状态 */
  disabled: { Type: Boolean, default: !1 },
  /** 是否启用拖拽 TODO */
  draggable: { Type: Boolean, default: !1 }
}, $ = x(S, pe, te, ne, ve), A = /* @__PURE__ */ V({
  name: "FListNav",
  props: S,
  emits: ["collapse"],
  setup(r, e) {
    const t = D(r.position), s = D(r.title), a = D(r.folded), o = D(!1);
    function n(m) {
      m && m.stopPropagation(), !r.disabled && (o.value = !0, a.value = !a.value, e.emit("collapse", a.value));
    }
    const f = F(() => {
      const m = {}, l = ["top", "bottom"].indexOf(t.value) > -1 ? "height" : "width";
      return m[l] = a.value ? "0px" : r.size + "px", m;
    });
    return () => v("div", {
      class: `f-list-nav f-list-nav-${t.value}`
    }, [v("div", {
      class: "f-list-nav-in",
      style: f.value
    }, [v("div", {
      class: "f-list-nav-main"
    }, [e.slots.navHeader && v("div", {
      class: "f-list-nav-header"
    }, [e.slots.navHeader()]), !e.slots.navHeader && s.value && v("div", {
      class: "f-list-nav-header"
    }, [v("div", {
      class: "f-list-nav-title"
    }, [s.value])]), e.slots.navContent && v("div", {
      class: "f-list-nav-content"
    }, [e.slots.navContent()]), e.slots.navFooter && v("div", {
      class: "f-list-nav-footer"
    }, [e.slots.navFooter()])]), r.collapsible && v("div", {
      class: ["f-list-nav-toggle-sidebar", {
        disabled: r.disabled,
        active: a.value,
        "splitter-pane-collapse-animate": o.value
      }],
      onClick: (m) => n(m)
    }, [v("span", {
      class: "triangle"
    }, null)])])]);
  }
});
function he(r, e, t) {
  var E;
  const s = t && t.getStyles && t.getStyles() || "", a = t && t.getDesignerClass && t.getDesignerClass() || "", o = D();
  function n() {
    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanMoveComponent ? t.checkCanMoveComponent() : !0;
  }
  function f() {
    return !1;
  }
  function m() {
    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanDeleteComponent ? t.checkCanDeleteComponent() : !0;
  }
  function l() {
    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : t && t.hideNestedPaddingInDesginerView ? t.hideNestedPaddingInDesginerView() : !1;
  }
  function c(p) {
    if (!p || !p.value)
      return null;
    if (p.value.schema && p.value.schema.type === "component")
      return p.value;
    const h = D(p == null ? void 0 : p.value.parent), d = c(h);
    return d || null;
  }
  function i(p = e) {
    var C;
    if (t != null && t.getDraggableDesignItemElement)
      return t.getDraggableDesignItemElement(p);
    const { componentInstance: h, designerItemElementRef: d } = p;
    if (!h || !h.value)
      return null;
    const { getCustomButtons: b } = h.value;
    return h.value.canMove || b && ((C = b()) != null && C.length) ? d : i(p.parent);
  }
  function u(p) {
    return !!t && t.canAccepts(p);
  }
  function y() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function g() {
  }
  function L(p, h) {
    var d;
    !p || !h || (t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(p, h), (d = e == null ? void 0 : e.setupContext) == null || d.emit("dragEnd"));
  }
  function P(p, h) {
    const { componentType: d } = p;
    let b = W(d, p, h);
    t && t.onResolveNewComponentSchema && (b = t.onResolveNewComponentSchema(p, b));
    const C = d.toLowerCase().replace(/-/g, "_");
    return b && !b.id && b.type === d && (b.id = `${C}_${Math.random().toString().slice(2, 6)}`), b;
  }
  function M(p) {
    p && t != null && t.onChildElementMovedOut && t.onChildElementMovedOut(p);
  }
  function N(...p) {
    if (t && t.getPropsConfig)
      return t.getPropsConfig(...p);
  }
  function k(p) {
    if (!p)
      return;
    const h = e == null ? void 0 : e.schema, { formSchemaUtils: d } = p;
    if (h && d.getExpressions().length) {
      const b = d.getExpressions().findIndex((C) => C.target === h.id);
      b > -1 && d.getExpressions().splice(b, 1);
    }
  }
  function G(p) {
    t && t.onRemoveComponent && t.onRemoveComponent(), k(p), e != null && e.schema.contents && e.schema.contents.map((h) => {
      let d = h.id;
      h.type === "component-ref" && (d = h.component);
      const b = r.value.querySelectorAll(`#${d}-design-item`);
      b != null && b.length && Array.from(b).map((C) => {
        var O;
        (O = C == null ? void 0 : C.componentInstance) != null && O.value.onRemoveComponent && C.componentInstance.value.onRemoveComponent(p);
      });
    });
  }
  function J() {
    if (t && t.getCustomButtons)
      return t.getCustomButtons();
  }
  function Q(p) {
    if (t && t.onPropertyChanged)
      return t.onPropertyChanged(p);
  }
  return o.value = {
    canMove: n(),
    canSelectParent: f(),
    canDelete: m(),
    canNested: !l(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: r,
    parent: (E = e == null ? void 0 : e.parent) == null ? void 0 : E.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: s,
    designerClass: a,
    canAccepts: u,
    getBelongedComponentInstance: c,
    getDraggableDesignItemElement: i,
    getDraggingDisplayText: y,
    getPropConfig: N,
    getDragScopeElement: g,
    onAcceptMovedChildElement: L,
    onChildElementMovedOut: M,
    addNewChildComponentSchema: P,
    triggerBelongedComponentToMoveWhenMoved: !!t && t.triggerBelongedComponentToMoveWhenMoved || D(!1),
    triggerBelongedComponentToDeleteWhenDeleted: !!t && t.triggerBelongedComponentToDeleteWhenDeleted || D(!1),
    onRemoveComponent: G,
    getCustomButtons: J,
    onPropertyChanged: Q
  }, o;
}
function de() {
  function r(e, t) {
    var n;
    if (!e)
      return !1;
    const s = ((n = e.targetContainer) == null ? void 0 : n.componentInstance) && e.targetContainer.componentInstance.value;
    if (!s)
      return !1;
    const a = s.schema.type, o = t == null ? void 0 : t.formSchemaUtils.getComponentById(s.belongedComponentId);
    return !((e.componentCategory === "input" || e.componentType === "form-group") && ![T["response-layout-item"].type, T["response-form"].type, T.fieldset.type].includes(a) || (e.componentType === T.tabs.type || e.componentType === T.section.type) && ((o == null ? void 0 : o.componentType) !== "frame" || ![T["content-container"].type, T["splitter-pane"].type, T["response-layout-item"].type].includes(a)) || e.componentType === T["query-solution"].type || e.componentType === T.fieldset.type && a !== T["response-form"].type);
  }
  return {
    basalDragulaRuleForContainer: r
  };
}
class be {
  getTemplateRule(e, t) {
    const s = t == null ? void 0 : t.formSchemaUtils, a = s == null ? void 0 : s.getFormTemplateRule(), o = { canAccept: !0, canDelete: !0, canMove: !0 };
    if (!a)
      return o;
    const n = this.getComponentContext(e), { componentClassList: f } = n;
    return f.forEach((m) => {
      if (!m || !a[m])
        return;
      const { canMove: l, canDelete: c, canAccept: i } = a[m];
      o.canMove = o.canMove && this.resolveRuleValue(l, n), o.canDelete = o.canDelete && this.resolveRuleValue(c, n), o.canAccept = o.canAccept && this.resolveRuleValue(i, n);
    }), o;
  }
  resolveRuleValue(e, t) {
    return typeof e == "boolean" ? e : this.parseRuleValueSchema(e, t);
  }
  parseRuleValueSchema(e, t) {
    const s = e.invalidContext || [];
    let a = !0;
    for (const o of s) {
      if (o.firstLevelChild) {
        if (o.firstLevelChild.class) {
          const { firstLevelChildClassList: n } = t;
          if (n && !n.includes(o.firstLevelChild.class)) {
            a = !1;
            continue;
          }
        }
        if (o.firstLevelChild.type) {
          const { firstLevelChildSchema: n } = t;
          if (!n || n.type !== o.firstLevelChild.type) {
            a = !1;
            continue;
          }
        }
      }
      if (o.secondLevelChild) {
        if (o.secondLevelChild.class) {
          const { secondLevelChildClassList: n } = t;
          if (n && !n.includes(o.secondLevelChild.class)) {
            a = !1;
            continue;
          }
        }
        if (o.secondLevelChild.type) {
          const { secondLevelChildSchema: n } = t;
          if (!n || n.type !== o.secondLevelChild.type) {
            a = !1;
            continue;
          }
        }
      }
      if (o.parent) {
        if (o.parent.class) {
          const { parentClassList: n } = t;
          if (n && !n.includes(o.parent.class)) {
            a = !1;
            continue;
          }
        }
        if (o.parent.type) {
          const { parentSchema: n } = t;
          if (n && n.type !== o.parent.type) {
            a = !1;
            continue;
          }
        }
      }
      a = !0;
      break;
    }
    return !a;
  }
  getComponentContext(e) {
    var L, P, M, N;
    const t = e.schema, s = t.appearance && t.appearance.class || "", a = s.split(" ") || [], o = t.contents || [], n = o.length ? o[0] : null, f = n && n.appearance ? n.appearance.class : "", m = f ? f.split(" ") : [], l = (L = n == null ? void 0 : n.contents) != null && L.length ? n == null ? void 0 : n.contents[0] : null, c = l && l.appearance ? l.appearance.class : "", i = c ? c.split(" ") : [], u = t.type === "component" ? (M = (P = e.parent) == null ? void 0 : P.parent) == null ? void 0 : M.schema : (N = e.parent) == null ? void 0 : N.schema, y = u && u.appearance && u.appearance.class || "", g = y ? y.split(" ") : [];
    return {
      componentClass: s,
      componentClassList: a,
      childContents: o,
      firstLevelChildSchema: n,
      firstLevelChildClass: f,
      firstLevelChildClassList: m,
      secondLevelChildSchema: l,
      secondLevelChildClass: c,
      secondLevelChildClassList: i,
      parentSchema: u,
      parentClass: y,
      parentClassList: g
    };
  }
}
function ge(r, e) {
  const t = new be(), { canMove: s, canAccept: a, canDelete: o } = t.getTemplateRule(r, e);
  function n(i) {
    return de().basalDragulaRuleForContainer(i, e) ? a : !1;
  }
  function f() {
    return "display: flex;flex-direction:column;height:100%";
  }
  function m() {
    return s;
  }
  function l() {
    return o;
  }
  function c() {
    return !s && !o;
  }
  return {
    canAccepts: n,
    getStyles: f,
    checkCanMoveComponent: m,
    checkCanDeleteComponent: l,
    hideNestedPaddingInDesginerView: c
  };
}
const De = /* @__PURE__ */ V({
  name: "FListNavDesign",
  props: S,
  emits: [],
  setup(r, e) {
    const t = D(), s = B("designer-host-service"), a = B("design-item-context"), o = ge(a, s), n = he(t, a, o);
    n.value.canMove = !1, n.value.canNested = !1;
    const f = D(r.position), m = D(r.title), l = D(!1), c = D(!1), i = F(() => {
      const u = {}, y = ["top", "bottom"].indexOf(f.value) > -1 ? "height" : "width";
      return u[y] = l.value ? "0px" : r.size + "px", u;
    });
    return X(() => {
      t.value.componentInstance = n;
    }), e.expose(n.value), () => v("div", {
      class: `f-list-nav f-list-nav-${f.value}`
    }, [v("div", {
      class: "f-list-nav-in",
      style: i.value
    }, [v("div", {
      class: "f-list-nav-main"
    }, [e.slots.navHeader && v("div", {
      class: "f-list-nav-header"
    }, [e.slots.navHeader()]), !e.slots.navHeader && m.value && v("div", {
      class: "f-list-nav-header"
    }, [v("div", {
      class: "f-list-nav-title"
    }, [m.value])]), e.slots.navContent && v("div", {
      class: "f-list-nav-content"
    }, [e.slots.navContent()]), e.slots.navFooter && v("div", {
      class: "f-list-nav-footer"
    }, [e.slots.navFooter()])]), r.collapsible && v("div", {
      class: ["f-list-nav-toggle-sidebar", {
        disabled: r.disabled,
        active: l.value,
        "splitter-pane-collapse-animate": c.value
      }]
    }, [v("span", {
      class: "triangle"
    }, null)])])]);
  }
}), Me = {
  install(r) {
    r.component(A.name, A);
  },
  register(r, e, t, s) {
    r["list-nav"] = A, e["list-nav"] = $;
  },
  registerDesigner(r, e, t) {
    r["list-nav"] = De, e["list-nav"] = $;
  }
};
export {
  A as FListNav,
  Me as default,
  S as listNavProps,
  $ as propsResolver
};