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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as $, ref as D, computed as V, createVNode as v, inject as B, onMounted as J } from "vue";
import { isPlainObject as j, cloneDeep as F } from "lodash-es";
const q = {}, 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]) : F(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 Q(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]) : F(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 _(r, e = {}, t) {
  const s = q[r];
  if (s) {
    let a = Q(s);
    const o = z[r];
    return a = o ? o({ getSchemaByType: _ }, a, e, t) : a, a;
  }
  return null;
}
function X(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 W(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 Y(r, e, t = /* @__PURE__ */ new Map()) {
  const s = X(r, e);
  return W(s, t);
}
function Z(r = {}) {
  function e(l, c, i, p) {
    if (typeof i == "number")
      return p[l].length === i;
    if (typeof i == "object") {
      const y = Object.keys(i)[0], b = i[y];
      if (y === "not")
        return Number(p[l].length) !== Number(b);
      if (y === "moreThan")
        return Number(p[l].length) >= Number(b);
      if (y === "lessThan")
        return Number(p[l].length) <= Number(b);
    }
    return !1;
  }
  function t(l, c, i, p) {
    return p[l] && p[l].propertyValue && String(p[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((p) => {
      if (p === "length")
        return { target: i, operator: "length", param: null, value: c[p] };
      const y = p, b = c[p];
      return { target: i, operator: "getProperty", param: y, value: b };
    }) : [];
  }
  function o(l) {
    return Object.keys(l).reduce((i, p) => {
      const y = a(p, l[p]);
      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, b) => y && n(b, c), !0);
  }
  function m(l, c) {
    const i = Object.keys(l), p = i.includes("allOf"), y = i.includes("anyOf"), b = p || y, T = (b ? l[b ? p ? "allOf" : "anyOf" : "allOf"] : [l]).map((k) => f(k, c));
    return p ? !T.includes(!1) : T.includes(!0);
  }
  return { parseValueSchema: m };
}
const C = {
  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: "标签页工具栏按钮" },
  "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: "抽屉" }
}, H = {}, R = {};
Z();
function K(r, e, t = /* @__PURE__ */ new Map(), s = (n, f, m, l) => f, a = {}, o = (n) => n) {
  return q[e.title] = e, z[e.title] = s, H[e.title] = a, R[e.title] = o, (n = {}, f = !0) => {
    if (!f)
      return W(n, t);
    const m = Y(n, e, t), l = Object.keys(r).reduce((c, i) => (c[i] = r[i].default, c), {});
    return Object.assign(l, m);
  };
}
function I(r, e) {
  return { customClass: e.class, customStyle: e.style };
}
const x = /* @__PURE__ */ new Map([
  ["appearance", I]
]);
function ee(r, e, t) {
  return e;
}
const te = "https://json-schema.org/draft/2020-12/schema", ne = "https://farris-design.gitee.io/list-nav.schema.json", ae = "list-nav", oe = "A Farris Container Component", re = "object", se = {
  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
  }
}, le = [
  "id",
  "type",
  "contents"
], ce = {
  $schema: te,
  $id: ne,
  title: ae,
  description: oe,
  type: re,
  properties: se,
  required: le
}, ie = "list-nav", pe = "A Farris Component", ue = "object", fe = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "类型",
        title: "类型",
        type: "string",
        readonly: !0
      }
    }
  }
}, me = {
  title: ie,
  description: pe,
  type: ue,
  categories: fe
}, 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 }
}, E = K(S, ce, x, ee, me), A = /* @__PURE__ */ $({
  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 = V(() => {
      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 ye(r, e, t) {
  var O;
  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(u) {
    if (!u || !u.value)
      return null;
    if (u.value.schema && u.value.schema.type === "component")
      return u.value;
    const g = D(u == null ? void 0 : u.value.parent), d = c(g);
    return d || null;
  }
  function i(u = e) {
    var M;
    if (t != null && t.getDraggableDesignItemElement)
      return t.getDraggableDesignItemElement(u);
    const { componentInstance: g, designerItemElementRef: d } = u;
    if (!g || !g.value)
      return null;
    const { getCustomButtons: h } = g.value;
    return g.value.canMove || h && ((M = h()) != null && M.length) ? d : i(u.parent);
  }
  function p(u) {
    return !!t && t.canAccepts(u);
  }
  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 b() {
  }
  function L(u, g) {
    var d;
    !u || !g || (t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(u, g), (d = e == null ? void 0 : e.setupContext) == null || d.emit("dragEnd"));
  }
  function P(u, g) {
    const { componentType: d } = u;
    let h = _(d, u, g);
    t && t.onResolveNewComponentSchema && (h = t.onResolveNewComponentSchema(u, h));
    const M = d.toLowerCase().replace(/-/g, "_");
    return h && !h.id && h.type === d && (h.id = `${M}_${Math.random().toString().slice(2, 6)}`), h;
  }
  function T(u) {
    u && t != null && t.onChildElementMovedOut && t.onChildElementMovedOut(u);
  }
  function N(...u) {
    if (t && t.getPropsConfig)
      return t.getPropsConfig(...u);
  }
  function k() {
    t && t.onRemoveComponent && t.onRemoveComponent(), e != null && e.schema.contents && e.schema.contents.map((u) => {
      let g = u.id;
      u.type === "component-ref" && (g = u.component);
      const d = r.value.querySelectorAll(`#${g}-design-item`);
      d != null && d.length && Array.from(d).map((h) => {
        var M;
        (M = h == null ? void 0 : h.componentInstance) != null && M.value.onRemoveComponent && h.componentInstance.value.onRemoveComponent();
      });
    });
  }
  function U() {
    if (t && t.getCustomButtons)
      return t.getCustomButtons();
  }
  function G(u) {
    if (t && t.onPropertyChanged)
      return t.onPropertyChanged(u);
  }
  return o.value = {
    canMove: n(),
    canSelectParent: f(),
    canDelete: m(),
    canNested: !l(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: r,
    parent: (O = e == null ? void 0 : e.parent) == null ? void 0 : O.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: s,
    designerClass: a,
    canAccepts: p,
    getBelongedComponentInstance: c,
    getDraggableDesignItemElement: i,
    getDraggingDisplayText: y,
    getPropConfig: N,
    getDragScopeElement: b,
    onAcceptMovedChildElement: L,
    onChildElementMovedOut: T,
    addNewChildComponentSchema: P,
    triggerBelongedComponentToMoveWhenMoved: !!t && t.triggerBelongedComponentToMoveWhenMoved || D(!1),
    triggerBelongedComponentToDeleteWhenDeleted: !!t && t.triggerBelongedComponentToDeleteWhenDeleted || D(!1),
    onRemoveComponent: k,
    getCustomButtons: U,
    onPropertyChanged: G
  }, o;
}
function ve() {
  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") && ![C["response-layout-item"].type, C["response-form"].type, C.fieldset.type].includes(a) || (e.componentType === C.tabs.type || e.componentType === C.section.type) && ((o == null ? void 0 : o.componentType) !== "frame" || ![C["content-container"].type, C["splitter-pane"].type, C["response-layout-item"].type].includes(a)) || e.componentType === C["query-solution"].type || e.componentType === C.fieldset.type && a !== C["response-form"].type);
  }
  return {
    basalDragulaRuleForContainer: r
  };
}
class de {
  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, T, 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(" ") : [], p = t.type === "component" ? (T = (P = e.parent) == null ? void 0 : P.parent) == null ? void 0 : T.schema : (N = e.parent) == null ? void 0 : N.schema, y = p && p.appearance && p.appearance.class || "", b = y ? y.split(" ") : [];
    return {
      componentClass: s,
      componentClassList: a,
      childContents: o,
      firstLevelChildSchema: n,
      firstLevelChildClass: f,
      firstLevelChildClassList: m,
      secondLevelChildSchema: l,
      secondLevelChildClass: c,
      secondLevelChildClassList: i,
      parentSchema: p,
      parentClass: y,
      parentClassList: b
    };
  }
}
function he(r, e) {
  const t = new de(), { canMove: s, canAccept: a, canDelete: o } = t.getTemplateRule(r, e);
  function n(i) {
    return ve().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 be = /* @__PURE__ */ $({
  name: "FListNavDesign",
  props: S,
  emits: [],
  setup(r, e) {
    const t = D(), s = B("designer-host-service"), a = B("design-item-context"), o = he(a, s), n = ye(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 = V(() => {
      const p = {}, y = ["top", "bottom"].indexOf(f.value) > -1 ? "height" : "width";
      return p[y] = l.value ? "0px" : r.size + "px", p;
    });
    return J(() => {
      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)])])]);
  }
}), Ce = {
  install(r) {
    r.component(A.name, A);
  },
  register(r, e, t, s) {
    r["list-nav"] = A, e["list-nav"] = E;
  },
  registerDesigner(r, e, t) {
    r["list-nav"] = be, e["list-nav"] = E;
  }
};
export {
  A as FListNav,
  Ce as default,
  S as listNavProps,
  E as propsResolver
};