@aotearoan/neon/dist/components/navigation/tree-menu/NeonTreeMenu.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { defineComponent as i, ref as f, watch as s } from "vue";
import x from "../../presentation/icon/NeonIcon.vue.es.js";
import k from "../link/NeonLink.vue.es.js";
import { useRoute as y } from "vue-router";
import { NeonFunctionalColor as g } from "../../../model/common/color/NeonFunctionalColor.es.js";
const B = i({
  name: "NeonTreeMenu",
  components: {
    NeonIcon: x,
    NeonLink: k
  },
  props: {
    /**
     * Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A
     * typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated
     * unless they're namespaced.
     */
    id: { type: String, required: !0 },
    /**
     * The tree model defining the menu.
     */
    modelValue: { type: Array, required: !0 },
    /**
     * The menu highlight color (excludes low-contrast and neutral).
     */
    color: { type: String, default: g.Brand },
    /**
     * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).
     */
    expandAll: { type: Boolean, default: !1 },
    /**
     * Highlight menu items only if the route exactly matches a menu item. This is useful if every route is in the tree menu.
     */
    exactHighlighting: { type: Boolean, default: !1 }
  },
  emits: [
    /**
     * Emitted when the user toggles expansion of a section or item
     * @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.
     */
    "update:modelValue",
    /**
     * Emitted when the user clicks on a link to navigate to another page. This is useful to e.g. close a side-nav
     * drawer containing the menu when there is a navigation event.
     * @type {string} the link the user clicked on.
     */
    "click"
  ],
  setup(l, { emit: a }) {
    const p = y(), d = f(null), u = (n) => {
      const t = n.target;
      t.parentElement && t.parentElement.click();
    }, m = (n) => {
      const t = l.modelValue.map((e) => {
        var r;
        return {
          ...e,
          children: (r = e.children) == null ? void 0 : r.map((o) => ({ ...o })),
          expanded: e.key === n ? !e.expanded : e.expanded
        };
      });
      a("update:modelValue", t);
    }, c = (n) => {
      const t = l.modelValue.map((e) => {
        var r;
        return {
          ...e,
          children: (r = e.children) == null ? void 0 : r.map((o) => ({
            ...o,
            expanded: o.key === n ? !o.expanded : o.expanded
          }))
        };
      });
      a("update:modelValue", t);
    };
    return s(
      () => p.path,
      (n) => d.value = n,
      { immediate: !0 }
    ), {
      url: d,
      emit: a,
      click: u,
      onSectionClick: m,
      onItemClick: c
    };
  }
});
export {
  B as default
};
//# sourceMappingURL=NeonTreeMenu.es.js.map