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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as _, ref as N, watch as Q, computed as T, createVNode as b, createTextVNode as w, inject as X, onMounted as Y } from "vue";
import { isPlainObject as R, cloneDeep as q } from "lodash-es";
const L = {}, z = {};
function S(t) {
  const { properties: e, title: r, ignore: i } = t, l = i && Array.isArray(i), o = Object.keys(e).reduce((u, v) => ((!l || !i.find((y) => y === v)) && (u[v] = e[v].type === "object" && e[v].properties ? S(e[v]) : q(e[v].default)), u), {});
  if (r && (!l || !i.find((u) => u === "id"))) {
    const u = r.toLowerCase().replace(/-/g, "_");
    o.id = `${u}_${Math.random().toString().slice(2, 6)}`;
  }
  return o;
}
function Z(t) {
  const { properties: e, title: r, required: i } = t;
  if (i && Array.isArray(i)) {
    const l = i.reduce((o, u) => (o[u] = e[u].type === "object" && e[u].properties ? S(e[u]) : q(e[u].default), o), {});
    if (r && i.find((o) => o === "id")) {
      const o = r.toLowerCase().replace(/-/g, "_");
      l.id = `${o}_${Math.random().toString().slice(2, 6)}`;
    }
    return l;
  }
  return {
    type: r
  };
}
function V(t, e = {}, r) {
  const i = L[t];
  if (i) {
    let l = Z(i);
    const o = z[t];
    return l = o ? o({ getSchemaByType: V }, l, e, r) : l, l;
  }
  return null;
}
function H(t, e) {
  const r = S(e);
  return Object.keys(r).reduce((i, l) => (Object.prototype.hasOwnProperty.call(t, l) && (i[l] && R(i[l]) && R(t[l] || !t[l]) ? Object.assign(i[l], t[l] || {}) : i[l] = t[l]), i), r), r;
}
function W(t, e) {
  return Object.keys(t).filter((i) => t[i] != null).reduce((i, l) => {
    if (e.has(l)) {
      const o = e.get(l);
      if (typeof o == "string")
        i[o] = t[l];
      else {
        const u = o(l, t[l], t);
        Object.assign(i, u);
      }
    } else
      i[l] = t[l];
    return i;
  }, {});
}
function x(t, e, r = /* @__PURE__ */ new Map()) {
  const i = H(t, e);
  return W(i, r);
}
function K(t = {}) {
  function e(s, a, n, f) {
    if (typeof n == "number")
      return f[s].length === n;
    if (typeof n == "object") {
      const c = Object.keys(n)[0], d = n[c];
      if (c === "not")
        return Number(f[s].length) !== Number(d);
      if (c === "moreThan")
        return Number(f[s].length) >= Number(d);
      if (c === "lessThan")
        return Number(f[s].length) <= Number(d);
    }
    return !1;
  }
  function r(s, a, n, f) {
    return f[s] && f[s].propertyValue && String(f[s].propertyValue.value) === String(n);
  }
  const i = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", r]
  ]);
  Object.keys(t).reduce((s, a) => (s.set(a, t[a]), s), i);
  function l(s, a) {
    const n = s;
    return typeof a == "number" ? [{ target: n, operator: "length", param: null, value: Number(a) }] : typeof a == "boolean" ? [{ target: n, operator: "getProperty", param: s, value: !!a }] : typeof a == "object" ? Object.keys(a).map((f) => {
      if (f === "length")
        return { target: n, operator: "length", param: null, value: a[f] };
      const c = f, d = a[f];
      return { target: n, operator: "getProperty", param: c, value: d };
    }) : [];
  }
  function o(s) {
    return Object.keys(s).reduce((n, f) => {
      const c = l(f, s[f]);
      return n.push(...c), n;
    }, []);
  }
  function u(s, a) {
    if (i.has(s.operator)) {
      const n = i.get(s.operator);
      return n && n(s.target, s.param, s.value, a) || !1;
    }
    return !1;
  }
  function v(s, a) {
    return o(s).reduce((c, d) => c && u(d, a), !0);
  }
  function y(s, a) {
    const n = Object.keys(s), f = n.includes("allOf"), c = n.includes("anyOf"), d = f || c, P = (d ? s[d ? f ? "allOf" : "anyOf" : "allOf"] : [s]).map((k) => v(k, a));
    return f ? !P.includes(!1) : P.includes(!0);
  }
  return { parseValueSchema: y };
}
const C = {}, I = {};
K();
function ee(t, e, r = /* @__PURE__ */ new Map(), i = (u, v, y, s) => v, l = {}, o = (u) => u) {
  return L[e.title] = e, z[e.title] = i, C[e.title] = l, I[e.title] = o, (u = {}, v = !0) => {
    if (!v)
      return W(u, r);
    const y = x(u, e, r), s = Object.keys(t).reduce((a, n) => (a[n] = t[n].default, a), {});
    return Object.assign(s, y);
  };
}
function te(t, e) {
  return { customClass: e.class, customStyle: e.style };
}
const ae = /* @__PURE__ */ new Map([
  ["appearance", te]
]);
function ne(t, e, r) {
  return e;
}
const re = "https://json-schema.org/draft/2020-12/schema", ie = "https://farris-design.gitee.io/nav.schema.json", le = "nav", se = "A Farris Component", oe = "object", ce = {
  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: ""
  }
}, ue = [
  "id",
  "type"
], fe = {
  $schema: re,
  $id: ie,
  title: le,
  description: se,
  type: oe,
  properties: ce,
  required: ue
}, pe = "nav", de = "A Farris Component", ve = "object", ye = {
  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: "右对齐"
            }
          ]
        }
      }
    }
  }
}, me = {
  title: pe,
  description: de,
  type: ve,
  categories: ye
}, j = {
  /** 当前激活的id */
  activeNavId: { Type: String, default: "1" },
  /** 导航文本字段 */
  displayField: { Type: String, default: "text" },
  /** 控制禁用字段 */
  disableField: { Type: String, default: "disable" },
  /** 水平或垂直方向 */
  horizontal: { Type: Boolean, default: !0 },
  /** 标识字段 */
  idField: { Type: String, default: "id" },
  /** 最大数值 */
  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
      }
    ]
  },
  /** 切换前事件 */
  navPicking: { Type: Function, default: (t) => Promise },
  /** 徽标值字段 */
  valueField: { Type: String, default: "num" }
}, $ = ee(j, fe, ae, ne, me), M = /* @__PURE__ */ _({
  name: "FNav",
  props: j,
  emits: ["nav", "update:activeNavId"],
  setup(t, e) {
    const r = N(t.activeNavId), i = N(t.navData), l = N(t.horizontal);
    N(t.navPicking), Q(() => t.activeNavId, (a, n) => {
      a !== n && (r.value = a);
    });
    const o = T({
      get() {
        return i.value;
      },
      set(a) {
        i.value = a, y();
      }
    }), u = T({
      get() {
        return r.value;
      },
      set(a) {
        if (r.value = a, r.value && o && o.value.length) {
          const n = o.value.find((f) => f.id === r.value);
          n && e.emit("nav", n);
        }
      }
    }), v = T({
      set(a) {
        l.value = a;
      },
      get() {
        return l.value;
      }
    });
    function y() {
      if (o.value && o.value.length && !r.value) {
        const a = o.value.find((n) => !n.disable);
        a && (r.value = a.id);
      }
    }
    function s(a) {
      a.disable || a.id === r.value || (r.value = a.id, e.emit("update:activeNavId", a.id), e.emit("nav", a));
    }
    return () => {
      var a;
      return b("div", {
        class: ["farris-nav", {
          "farris-nav-vertical": !v.value
        }]
      }, [(a = o.value) == null ? void 0 : a.map((n) => b("div", {
        class: ["farris-nav-item", {
          active: n[t.idField] === u.value
        }, {
          disabled: n[t.disableField]
        }],
        onClick: () => s(n)
      }, [b("div", {
        class: "farris-nav-item-link"
      }, [b("span", {
        class: "farris-nav-item-link-text"
      }, [typeof n[t.displayField] == "function" ? n[t.displayField]() : n[t.displayField], n[t.valueField] && b("div", {
        class: "farris-nav-item-tag"
      }, [n[t.valueField] <= t.maxNum && b("span", {
        class: "tag-text"
      }, [n[t.valueField]]), n[t.valueField] > t.maxNum && b("span", {
        class: "tag-text"
      }, [t.maxNum, w("+")])])]), b("div", {
        class: "farris-nav-item-bottom-line"
      }, null)])]))]);
    };
  }
});
function ge(t, e, r) {
  var B;
  const i = "", l = "", o = N();
  function u() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function v() {
    return !1;
  }
  function y() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function s() {
    return (e == null ? void 0 : e.schema.componentType) === "frame";
  }
  function a(p) {
    if (!p || !p.value)
      return null;
    if (p.value.schema && p.value.schema.type === "component")
      return p.value;
    const g = N(p == null ? void 0 : p.value.parent), m = a(g);
    return m || null;
  }
  function n(p = e) {
    var D;
    const { componentInstance: g, designerItemElementRef: m } = p;
    if (!g || !g.value)
      return null;
    const { getCustomButtons: h } = g.value;
    return g.value.canMove || h && ((D = h()) != null && D.length) ? m : n(p.parent);
  }
  function f(p) {
    return !!r;
  }
  function c() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function d() {
  }
  function F(p, g) {
    var m;
    !p || !g || (m = e == null ? void 0 : e.setupContext) == null || m.emit("dragEnd");
  }
  function O(p, g) {
    const { componentType: m } = p;
    let h = V(m, p, g);
    const D = m.toLowerCase().replace(/-/g, "_");
    return h && !h.id && h.type === m && (h.id = `${D}_${Math.random().toString().slice(2, 6)}`), h;
  }
  function P(p) {
  }
  function A(...p) {
  }
  function k(p) {
    if (!p)
      return;
    const g = e == null ? void 0 : e.schema, { formSchemaUtils: m } = p;
    if (g && m.getExpressions().length) {
      const h = m.getExpressions().findIndex((D) => D.target === g.id);
      h > -1 && m.getExpressions().splice(h, 1);
    }
  }
  function U(p) {
    k(p), e != null && e.schema.contents && e.schema.contents.map((g) => {
      let m = g.id;
      g.type === "component-ref" && (m = g.component);
      const h = t.value.querySelectorAll(`#${m}-design-item`);
      h != null && h.length && Array.from(h).map((D) => {
        var E;
        (E = D == null ? void 0 : D.componentInstance) != null && E.value.onRemoveComponent && D.componentInstance.value.onRemoveComponent(p);
      });
    });
  }
  function G() {
  }
  function J(p) {
  }
  return o.value = {
    canMove: u(),
    canSelectParent: v(),
    canDelete: y(),
    canNested: !s(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: t,
    parent: (B = e == null ? void 0 : e.parent) == null ? void 0 : B.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: i,
    designerClass: l,
    canAccepts: f,
    getBelongedComponentInstance: a,
    getDraggableDesignItemElement: n,
    getDraggingDisplayText: c,
    getPropConfig: A,
    getDragScopeElement: d,
    onAcceptMovedChildElement: F,
    onChildElementMovedOut: P,
    addNewChildComponentSchema: O,
    triggerBelongedComponentToMoveWhenMoved: N(!1),
    triggerBelongedComponentToDeleteWhenDeleted: N(!1),
    onRemoveComponent: U,
    getCustomButtons: G,
    onPropertyChanged: J
  }, o;
}
const he = /* @__PURE__ */ _({
  name: "FNavDesign",
  props: j,
  emits: ["nav"],
  setup(t, e) {
    const r = N(t.activeNavId), i = N(t.navData), l = N(t.horizontal);
    N(t.navPicking);
    const o = N(), u = X("design-item-context"), v = ge(o, u);
    Y(() => {
      o.value.componentInstance = v;
    }), e.expose(v.value);
    const y = T({
      get() {
        return i.value;
      },
      set(c) {
        i.value = c, n();
      }
    }), s = T({
      get() {
        return r.value;
      },
      set(c) {
        if (r.value = c, r.value && y && y.value.length) {
          const d = y.value.find((F) => F.id === r.value);
          d && e.emit("nav", d);
        }
      }
    }), a = T({
      set(c) {
        l.value = c;
      },
      get() {
        return l.value;
      }
    });
    function n() {
      if (y.value && y.value.length && !r.value) {
        const c = y.value.find((d) => !d.disable);
        c && (r.value = c.id);
      }
    }
    function f(c) {
      c.disable || c.id === r.value || (r.value = c.id, e.emit("nav", c));
    }
    return () => {
      var c;
      return b("div", {
        ref: o,
        class: ["farris-nav", {
          "farris-nav-vertical": !a.value
        }]
      }, [(c = y.value) == null ? void 0 : c.map((d) => b("div", {
        class: ["farris-nav-item", {
          active: d.id === s.value
        }, {
          disabled: d.disable
        }],
        onClick: () => f(d)
      }, [b("div", {
        class: "farris-nav-item-link"
      }, [b("span", {
        class: "farris-nav-item-link-text"
      }, [d.text, d.num && b("div", {
        class: "farris-nav-item-tag"
      }, [d.num <= t.maxNum && b("span", {
        class: "tag-text"
      }, [d.num]), d.num > t.maxNum && b("span", {
        class: "tag-text"
      }, [t.maxNum, w("+")])])])])]))]);
    };
  }
}), De = {
  install(t) {
    t.component(M.name, M);
  },
  register(t, e, r, i) {
    t.nav = M, e.nav = $;
  },
  registerDesigner(t, e, r) {
    t.nav = he, e.nav = $;
  }
};
export {
  M as FNav,
  De as default,
  j as navProps,
  $ as propsResolver
};