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

Farris Vue, a Farris Design based Vue3 component library.

import { getCustomClass as b, getCustomStyle as F, withInstall as h } from "../common/index.esm.js";
import { defineComponent as N, ref as o, watch as S, computed as u, createVNode as l, createTextVNode as T } from "vue";
import { resolveAppearance as x, createPropsResolver as C } from "../dynamic-resolver/index.esm.js";
import { FNotifyService as j } from "../notify/index.esm.js";
const k = /* @__PURE__ */ new Map([
  ["appearance", x]
  // ['dataSourceType',resolveDataSourceType]
]);
function D(t, d, s) {
  return d;
}
const I = "https://json-schema.org/draft/2020-12/schema", P = "https://farris-design.gitee.io/nav.schema.json", w = "nav", A = "A Farris Component", $ = "object", q = {
  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: {}
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  activeNavId: {
    description: "",
    type: "string",
    default: ""
  },
  displayField: {
    description: "",
    type: "string",
    default: "text"
  },
  disableField: {
    description: "",
    type: "string",
    default: "disable"
  },
  horizontal: {
    description: "",
    type: "boolean",
    default: !0
  },
  idField: {
    description: "",
    type: "string",
    default: "id"
  },
  valueField: {
    description: "",
    type: "string",
    default: "num"
  },
  maxNum: {
    description: "",
    type: "number",
    default: 99
  },
  navData: {
    description: "",
    type: "array",
    default: []
  },
  dataSourceType: {
    description: "",
    type: "string",
    default: "static"
  },
  bindDataSource: {
    description: "",
    type: "object"
  },
  navPicking: {
    type: "object",
    default: null
  }
}, z = [
  "id",
  "type"
], O = {
  navPicking: "切换前事件",
  onNav: "切换事件"
}, R = {
  $schema: I,
  $id: P,
  title: w,
  description: A,
  type: $,
  properties: q,
  required: z,
  events: O
}, v = {
  /** 当前激活的id */
  activeNavId: { Type: String, default: "" },
  /** 导航文本字段 */
  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: []
  },
  /** 切换前事件 */
  navPicking: {
    type: Function,
    default: null
  },
  /** 徽标值字段 */
  valueField: { Type: String, default: "num" },
  visible: { Type: Boolean, default: !0 },
  customClass: { Type: String, default: "" },
  customStyle: { Type: String, default: "" }
}, H = C(v, R, k, D), B = /* @__PURE__ */ N({
  name: "FNav",
  props: v,
  emits: ["nav", "update:activeNavId"],
  setup(t, d) {
    const s = o(t.activeNavId), i = o(t.navData), r = new j();
    function c(a) {
      if (i.value && i.value.length) {
        let e = i.value.find((n) => n[t.idField] === a && n[t.disableField] !== !0);
        e || (e = i.value.find((n) => n[t.disableField] !== !0)), e && s.value !== e.id && (s.value = e.id, d.emit("nav", e));
      }
    }
    S([() => t.activeNavId, () => t.navData], ([a, e]) => {
      i.value = e, c(a);
    });
    const f = u(() => t.visible && i.value.length > 0);
    function p(a) {
      a.disable || a.id === s.value || Promise.resolve().then(() => {
        const e = t.navPicking;
        return e && typeof e == "function" ? e(a) : !0;
      }).then((e) => {
        let n = !0;
        typeof e == "object" ? e.canContinue || (n = !1, e.message && (r == null || r.error({
          message: e.message,
          position: "top-center"
        }))) : n = e, n && (s.value = a.id, d.emit("update:activeNavId", a.id), d.emit("nav", a));
      });
    }
    const y = u(() => {
      const a = {
        "farris-nav": !0,
        "farris-nav-vertical": !t.horizontal
      };
      return b(a, t.customClass);
    }), m = u(() => F({}, t.customStyle));
    function g(a) {
      i.value = a, c(s.value);
    }
    return d.expose({
      updateNavData: g
    }), () => {
      var a;
      return f.value && l("div", {
        class: y.value,
        style: m.value
      }, [(a = i.value) == null ? void 0 : a.map((e) => l("div", {
        class: ["farris-nav-item", {
          active: e[t.idField] === s.value
        }, {
          disabled: e[t.disableField]
        }],
        onClick: () => p(e)
      }, [l("div", {
        class: "farris-nav-item-link pt-3"
      }, [l("span", {
        class: "farris-nav-item-link-text"
      }, [typeof e[t.displayField] == "function" ? e[t.displayField]() : e[t.displayField], e[t.valueField] && l("div", {
        class: "farris-nav-item-tag"
      }, [e[t.valueField] <= t.maxNum && l("span", {
        class: "tag-text"
      }, [e[t.valueField]]), e[t.valueField] > t.maxNum && l("span", {
        class: "tag-text"
      }, [t.maxNum, T("+")])])]), l("div", {
        class: "farris-nav-item-bottom-line"
      }, null)])]))]);
    };
  }
}), J = h(B);
export {
  B as FNav,
  J as default,
  v as navProps,
  H as propsResolver
};