@progress/kendo-vue-layout/panelbar/PanelBar.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as u, createVNode as l, h as p } from "vue";
import { PanelBarItem as h } from "./PanelBarItem.mjs";
import { getInitialState as m, getFirstId as f, renderChildren as y, flatChildren as k, isArrayEqual as x, flatVisibleChildren as g } from "./util.mjs";
import { validatePackage as v, shouldShowValidationUI as I, classNames as P, WatermarkOverlay as S, Keys as n } from "@progress/kendo-vue-common";
import { packageMetadata as o } from "../package-metadata.mjs";
import { NavigationAction as s } from "./interfaces/NavigationAction.mjs";
const $ = /* @__PURE__ */ u({
  name: "KendoPanelBar",
  emits: {
    select: null,
    keydown: null
  },
  props: {
    animation: {
      type: Boolean,
      default: !0
    },
    items: Array,
    dir: String,
    selected: [String, Number],
    expanded: {
      type: Array,
      default: void 0
    },
    focused: [String, Number],
    expandMode: {
      type: String,
      default: "multiple",
      validator: function(e) {
        return ["single", "multiple"].includes(e);
      }
    },
    className: String,
    keepItemsMounted: Boolean
  },
  created() {
    this.activeDescendant = null, v(o), this.showLicenseWatermark = I(o);
  },
  data() {
    const e = m(this.$props, this.expandMode);
    return e.currentFocused || (e.currentFocused = f(this.$props)), e;
  },
  computed: {
    selectedItem() {
      const {
        selected: e = this.currentSelected
      } = this.$props;
      return e;
    },
    expandedItems() {
      return this.$props.expanded !== void 0 ? this.$props.expanded || [] : this.currentExpanded;
    },
    computedItems() {
      const e = {
        currentExpanded: [],
        ...this.$data,
        selected: this.selectedItem
      }, i = {
        animation: this.$props.animation,
        keepItemsMounted: this.$props.keepItemsMounted,
        state: e,
        expanded: this.expandedItems,
        handleSelect: this.handleSelect
      };
      return y.call(this, this.items, i);
    }
  },
  provide() {
    return {
      dispatchItemSelect: this.handleSelect
    };
  },
  render() {
    const e = P("k-panelbar", this.$props.className), i = this.showLicenseWatermark ? l(S, null, null) : null;
    return l("ul", {
      dir: this.$props.dir,
      role: "tree",
      tabindex: 0,
      onKeydown: this.handleKeyDown,
      onFocus: this.handleWrapperFocus,
      onBlur: this.handleWrapperBlur,
      class: e,
      "aria-activedescendant": this.activeDescendant
    }, [this.computedItems.map(function(t) {
      return p(h, {
        ...t,
        item: t
      });
    }, this), i]);
  },
  methods: {
    handleSelect(e) {
      this.onSelect(e), this.onFocus(e);
    },
    onSelect(e) {
      const i = k(this.computedItems);
      let t, a;
      if (i.forEach((r) => {
        r.uniquePrivateKey === (e.uniquePrivateKey || this.currentFocused) && (t = r);
      }), t) {
        let r;
        switch (this.expandMode) {
          case "single":
            a = [...t.parentUniquePrivateKey, t.uniquePrivateKey], x(this.expandedItems, a) && (t.parentUniquePrivateKey ? a = [...t.parentUniquePrivateKey] : a = []);
            break;
          case "multiple":
            a = this.expandedItems.slice(), r = a.indexOf(t.uniquePrivateKey), r === -1 ? a.push(t.uniquePrivateKey) : a.splice(r, 1);
            break;
          default:
            a = this.expandedItems.slice();
            break;
        }
        this.currentSelected = t.uniquePrivateKey, this.currentExpanded = a, this.$emit("select", {
          target: t,
          expandedItems: a
        });
      }
    },
    onFocus(e, i = 0) {
      const t = g(this.computedItems);
      let a;
      t.forEach((r, d) => {
        if (r.uniquePrivateKey === (e.uniquePrivateKey || this.currentFocused)) {
          let c = d + i < 0 ? 0 : d + i > t.length ? t.length - 1 : d + i;
          a = t[c];
        }
      }), a && (this.activeDescendant = a.id, this.currentFocused = a.uniquePrivateKey);
    },
    onNavigate(e, i) {
      let t;
      switch (i) {
        case s.Previous:
          t = -1, this.onFocus(e, t);
          break;
        case s.Next:
          t = 1, this.onFocus(e, t);
          break;
        case s.Toggle:
          this.onSelect(e);
          break;
      }
    },
    handleWrapperFocus() {
      this.wrapperFocused || (this.wrapperFocused = !0);
    },
    handleWrapperBlur() {
      this.wrapperFocused = !1;
    },
    handleKeyDown(e) {
      const i = this._element && getComputedStyle(this._element).direction === "rtl" || !1;
      if (e.target === e.currentTarget) {
        const t = e.keyCode;
        let a;
        switch (t) {
          case n.left:
            a = i ? s.Next : s.Previous;
            break;
          case n.up:
            a = s.Previous;
            break;
          case n.right:
            a = i ? s.Previous : s.Next;
            break;
          case n.down:
            a = s.Next;
            break;
          case n.space:
          case n.enter:
            a = s.Toggle;
            break;
          default:
            a = null;
            break;
        }
        a !== null && (e.preventDefault(), this.onNavigate(e, a));
      }
      this.$emit("keydown", e);
    }
  }
});
export {
  $ as PanelBar
};