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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as w, ref as N, watch as G, computed as P, createVNode as g, createTextVNode as E, inject as J, onMounted as Q } from "vue";
import { isPlainObject as $, cloneDeep as F } from "lodash-es";
const q = {}, L = {};
function O(t) {
  const { properties: e, title: r, ignore: i } = t, s = i && Array.isArray(i), c = Object.keys(e).reduce((u, d) => ((!s || !i.find((m) => m === d)) && (u[d] = e[d].type === "object" && e[d].properties ? O(e[d]) : F(e[d].default)), u), {});
  if (r && (!s || !i.find((u) => u === "id"))) {
    const u = r.toLowerCase().replace(/-/g, "_");
    c.id = `${u}_${Math.random().toString().slice(2, 6)}`;
  }
  return c;
}
function U(t) {
  const { properties: e, title: r, required: i } = t;
  if (i && Array.isArray(i)) {
    const s = i.reduce((c, u) => (c[u] = e[u].type === "object" && e[u].properties ? O(e[u]) : F(e[u].default), c), {});
    if (r && i.find((c) => c === "id")) {
      const c = r.toLowerCase().replace(/-/g, "_");
      s.id = `${c}_${Math.random().toString().slice(2, 6)}`;
    }
    return s;
  }
  return {
    type: r
  };
}
function z(t, e = {}, r) {
  const i = q[t];
  if (i) {
    let s = U(i);
    const c = L[t];
    return s = c ? c({ getSchemaByType: z }, s, e, r) : s, s;
  }
  return null;
}
function X(t, e) {
  const r = O(e);
  return Object.keys(r).reduce((i, s) => (Object.prototype.hasOwnProperty.call(t, s) && (i[s] && $(i[s]) && $(t[s] || !t[s]) ? Object.assign(i[s], t[s] || {}) : i[s] = t[s]), i), r), r;
}
function V(t, e) {
  return Object.keys(t).filter((i) => t[i] != null).reduce((i, s) => {
    if (e.has(s)) {
      const c = e.get(s);
      if (typeof c == "string")
        i[c] = t[s];
      else {
        const u = c(s, t[s], t);
        Object.assign(i, u);
      }
    } else
      i[s] = t[s];
    return i;
  }, {});
}
function Y(t, e, r = /* @__PURE__ */ new Map()) {
  const i = X(t, e);
  return V(i, r);
}
function Z(t = {}) {
  function e(o, n, a, f) {
    if (typeof a == "number")
      return f[o].length === a;
    if (typeof a == "object") {
      const l = Object.keys(a)[0], p = a[l];
      if (l === "not")
        return Number(f[o].length) !== Number(p);
      if (l === "moreThan")
        return Number(f[o].length) >= Number(p);
      if (l === "lessThan")
        return Number(f[o].length) <= Number(p);
    }
    return !1;
  }
  function r(o, n, a, f) {
    return f[o] && f[o].propertyValue && String(f[o].propertyValue.value) === String(a);
  }
  const i = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", r]
  ]);
  Object.keys(t).reduce((o, n) => (o.set(n, t[n]), o), i);
  function s(o, n) {
    const a = o;
    return typeof n == "number" ? [{ target: a, operator: "length", param: null, value: Number(n) }] : typeof n == "boolean" ? [{ target: a, operator: "getProperty", param: o, value: !!n }] : typeof n == "object" ? Object.keys(n).map((f) => {
      if (f === "length")
        return { target: a, operator: "length", param: null, value: n[f] };
      const l = f, p = n[f];
      return { target: a, operator: "getProperty", param: l, value: p };
    }) : [];
  }
  function c(o) {
    return Object.keys(o).reduce((a, f) => {
      const l = s(f, o[f]);
      return a.push(...l), a;
    }, []);
  }
  function u(o, n) {
    if (i.has(o.operator)) {
      const a = i.get(o.operator);
      return a && a(o.target, o.param, o.value, n) || !1;
    }
    return !1;
  }
  function d(o, n) {
    return c(o).reduce((l, p) => l && u(p, n), !0);
  }
  function m(o, n) {
    const a = Object.keys(o), f = a.includes("allOf"), l = a.includes("anyOf"), p = f || l, M = (p ? o[p ? f ? "allOf" : "anyOf" : "allOf"] : [o]).map((T) => d(T, n));
    return f ? !M.includes(!1) : M.includes(!0);
  }
  return { parseValueSchema: m };
}
const x = {}, K = {};
Z();
function C(t, e, r = /* @__PURE__ */ new Map(), i = (u, d, m, o) => d, s = {}, c = (u) => u) {
  return q[e.title] = e, L[e.title] = i, x[e.title] = s, K[e.title] = c, (u = {}, d = !0) => {
    if (!d)
      return V(u, r);
    const m = Y(u, e, r), o = Object.keys(t).reduce((n, a) => (n[a] = t[a].default, n), {});
    return Object.assign(o, m);
  };
}
function I(t, e) {
  return { customClass: e.class, customStyle: e.style };
}
const ee = /* @__PURE__ */ new Map([
  ["appearance", I]
]), te = "https://json-schema.org/draft/2020-12/schema", ne = "https://farris-design.gitee.io/nav.schema.json", ae = "nav", re = "A Farris Component", ie = "object", se = {
  id: {
    description: "The unique identifier for a nav",
    type: "string"
  },
  type: {
    description: "The type string of nav component",
    type: "string",
    default: "nav"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  enableLinkLabel: {
    description: "",
    type: "boolean",
    default: !1
  },
  label: {
    description: "",
    type: "string",
    default: ""
  },
  lableWidth: {
    description: "",
    type: "number"
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  required: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  textAlign: {
    description: "",
    type: "string",
    enum: [
      "left",
      "middle",
      "right"
    ],
    default: "left"
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  onBlur: {
    description: "",
    type: "string",
    default: ""
  },
  onClickLinkLabel: {
    description: "",
    type: "sting",
    default: ""
  }
}, oe = [
  "id",
  "type"
], ce = {
  $schema: te,
  $id: ne,
  title: ae,
  description: re,
  type: ie,
  properties: se,
  required: oe
};
function le(t, e, r) {
  return e;
}
const ue = "nav", fe = "A Farris Component", pe = "object", ve = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  },
  behavior: {
    description: "Basic Infomation",
    title: "行为",
    properties: {
      editable: {
        description: "",
        title: "允许编辑",
        type: "boolean"
      },
      readonly: {
        description: "",
        title: "只读",
        type: "string"
      },
      required: {
        description: "",
        title: "必填",
        type: "boolean"
      },
      visible: {
        description: "",
        title: "可见",
        type: "boolean"
      },
      placeholder: {
        description: "",
        title: "提示文本",
        type: "string"
      },
      tabindex: {
        description: "",
        title: "tab索引",
        type: "number"
      },
      textAlign: {
        description: "",
        title: "对齐方式",
        type: "enum",
        editor: {
          type: "combo-list",
          textField: "name",
          valueField: "value",
          data: [
            {
              value: "left",
              name: "左对齐"
            },
            {
              value: "center",
              name: "居中"
            },
            {
              value: "right",
              name: "右对齐"
            }
          ]
        }
      }
    }
  }
}, de = {
  title: ue,
  description: fe,
  type: pe,
  categories: ve
}, S = {
  /** 未读最大值 */
  maxNum: { Type: Number, default: 99 },
  /** 导航数据 */
  navData: {
    Type: Array,
    default: [
      {
        id: "1",
        text: "全部"
      },
      {
        id: "2",
        text: "已回复",
        disable: !0
      },
      {
        id: "3",
        text: "待回复",
        num: 200
      },
      {
        id: "4",
        text: "@我",
        num: 33
      }
    ]
  },
  /** 水平或垂直方向 */
  horizontal: { Type: Boolean, default: !0 },
  /** 当前激活的id */
  activeNavId: { Type: String, default: "1" },
  /** nav切换前事件 */
  navPicking: { Type: Function, default: (t) => Promise }
}, _ = C(S, ce, ee, le, de), j = /* @__PURE__ */ w({
  name: "FNav",
  props: S,
  emits: ["nav", "update:activeNavId"],
  setup(t, e) {
    const r = N(t.activeNavId), i = N(t.navData), s = N(t.horizontal);
    N(t.navPicking), G(() => t.activeNavId, (n, a) => {
      n !== a && (r.value = n);
    });
    const c = P({
      get() {
        return i.value;
      },
      set(n) {
        i.value = n, m();
      }
    }), u = P({
      get() {
        return r.value;
      },
      set(n) {
        if (r.value = n, r.value && c && c.value.length) {
          const a = c.value.find((f) => f.id === r.value);
          a && e.emit("nav", a);
        }
      }
    }), d = P({
      set(n) {
        s.value = n;
      },
      get() {
        return s.value;
      }
    });
    function m() {
      if (c.value && c.value.length && !r.value) {
        const n = c.value.find((a) => !a.disable);
        n && (r.value = n.id);
      }
    }
    function o(n) {
      n.disable || n.id === r.value || (r.value = n.id, e.emit("update:activeNavId", n.id), e.emit("nav", n));
    }
    return () => {
      var n;
      return g("div", {
        class: ["farris-nav", {
          "farris-nav-vertical": !d.value
        }]
      }, [(n = c.value) == null ? void 0 : n.map((a) => g("div", {
        class: ["farris-nav-item", {
          active: a.id === u.value
        }, {
          disabled: a.disable
        }],
        onClick: () => o(a)
      }, [g("div", {
        class: "farris-nav-item-link"
      }, [g("span", {
        class: "farris-nav-item-link-text"
      }, [typeof a.text == "function" ? a.text() : a.text, a.num && g("div", {
        class: "farris-nav-item-tag"
      }, [a.num <= t.maxNum && g("span", {
        class: "tag-text"
      }, [a.num]), a.num > t.maxNum && g("span", {
        class: "tag-text"
      }, [t.maxNum, E("+")])])])])]))]);
    };
  }
});
function me(t, e, r) {
  var R;
  const i = "", s = "", c = N();
  function u() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function d() {
    return !1;
  }
  function m() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function o() {
    return (e == null ? void 0 : e.schema.componentType) === "frame";
  }
  function n(v) {
    if (!v || !v.value)
      return null;
    if (v.value.schema && v.value.schema.type === "component")
      return v.value;
    const h = N(v == null ? void 0 : v.value.parent), y = n(h);
    return y || null;
  }
  function a(v = e) {
    var D;
    const { componentInstance: h, designerItemElementRef: y } = v;
    if (!h || !h.value)
      return null;
    const { getCustomButtons: b } = h.value;
    return h.value.canMove || b && ((D = b()) != null && D.length) ? y : a(v.parent);
  }
  function f(v) {
    return !!r;
  }
  function l() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function p() {
  }
  function k(v, h) {
    var y;
    !v || !h || (y = e == null ? void 0 : e.setupContext) == null || y.emit("dragEnd");
  }
  function A(v, h) {
    const { componentType: y } = v;
    let b = z(y, v, h);
    const D = y.toLowerCase().replace(/-/g, "_");
    return b && !b.id && b.type === y && (b.id = `${D}_${Math.random().toString().slice(2, 6)}`), b;
  }
  function M(v) {
  }
  function B(...v) {
  }
  function T() {
    e != null && e.schema.contents && e.schema.contents.map((v) => {
      let h = v.id;
      v.type === "component-ref" && (h = v.component);
      const y = t.value.querySelectorAll(`#${h}-design-item`);
      y != null && y.length && Array.from(y).map((b) => {
        var D;
        (D = b == null ? void 0 : b.componentInstance) != null && D.value.onRemoveComponent && b.componentInstance.value.onRemoveComponent();
      });
    });
  }
  function W() {
  }
  function H(v) {
  }
  return c.value = {
    canMove: u(),
    canSelectParent: d(),
    canDelete: m(),
    canNested: !o(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: t,
    parent: (R = e == null ? void 0 : e.parent) == null ? void 0 : R.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: i,
    designerClass: s,
    canAccepts: f,
    getBelongedComponentInstance: n,
    getDraggableDesignItemElement: a,
    getDraggingDisplayText: l,
    getPropConfig: B,
    getDragScopeElement: p,
    onAcceptMovedChildElement: k,
    onChildElementMovedOut: M,
    addNewChildComponentSchema: A,
    triggerBelongedComponentToMoveWhenMoved: N(!1),
    triggerBelongedComponentToDeleteWhenDeleted: N(!1),
    onRemoveComponent: T,
    getCustomButtons: W,
    onPropertyChanged: H
  }, c;
}
const ye = /* @__PURE__ */ w({
  name: "FNavDesign",
  props: S,
  emits: ["nav"],
  setup(t, e) {
    const r = N(t.activeNavId), i = N(t.navData), s = N(t.horizontal);
    N(t.navPicking);
    const c = N(), u = J("design-item-context"), d = me(c, u);
    Q(() => {
      c.value.componentInstance = d;
    }), e.expose(d.value);
    const m = P({
      get() {
        return i.value;
      },
      set(l) {
        i.value = l, a();
      }
    }), o = P({
      get() {
        return r.value;
      },
      set(l) {
        if (r.value = l, r.value && m && m.value.length) {
          const p = m.value.find((k) => k.id === r.value);
          p && e.emit("nav", p);
        }
      }
    }), n = P({
      set(l) {
        s.value = l;
      },
      get() {
        return s.value;
      }
    });
    function a() {
      if (m.value && m.value.length && !r.value) {
        const l = m.value.find((p) => !p.disable);
        l && (r.value = l.id);
      }
    }
    function f(l) {
      l.disable || l.id === r.value || (r.value = l.id, e.emit("nav", l));
    }
    return () => {
      var l;
      return g("div", {
        ref: c,
        class: ["farris-nav", {
          "farris-nav-vertical": !n.value
        }]
      }, [(l = m.value) == null ? void 0 : l.map((p) => g("div", {
        class: ["farris-nav-item", {
          active: p.id === o.value
        }, {
          disabled: p.disable
        }],
        onClick: () => f(p)
      }, [g("div", {
        class: "farris-nav-item-link"
      }, [g("span", {
        class: "farris-nav-item-link-text"
      }, [p.text, p.num && g("div", {
        class: "farris-nav-item-tag"
      }, [p.num <= t.maxNum && g("span", {
        class: "tag-text"
      }, [p.num]), p.num > t.maxNum && g("span", {
        class: "tag-text"
      }, [t.maxNum, E("+")])])])])]))]);
    };
  }
}), be = {
  install(t) {
    t.component(j.name, j);
  },
  register(t, e, r, i) {
    t.nav = j, e.nav = _;
  },
  registerDesigner(t, e, r) {
    t.nav = ye, e.nav = _;
  }
};
export {
  j as FNav,
  be as default,
  S as navProps,
  _ as propsResolver
};