@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 o, h as p } from "vue";
import { PanelBarItem as h } from "./PanelBarItem.mjs";
import { flatVisibleChildren as m, flatChildren as f, isArrayEqual as g, renderChildren as y, getInitialState as k, getFirstId as x } from "./util.mjs";
import { Keys as n, classNames as v, WatermarkOverlay as I, validatePackage as P, shouldShowValidationUI as S, getLicenseMessage as b } from "@progress/kendo-vue-common";
import { packageMetadata as l } from "../package-metadata.mjs";
import { NavigationAction as i } from "./interfaces/NavigationAction.mjs";
const C = /* @__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, P(l), this.showLicenseWatermark = S(l), this.licenseMessage = b(l);
  },
  data() {
    const e = k(this.$props, this.expandMode);
    return e.currentFocused || (e.currentFocused = x(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
      }, a = {
        animation: this.$props.animation,
        keepItemsMounted: this.$props.keepItemsMounted,
        state: e,
        expanded: this.expandedItems,
        handleSelect: this.handleSelect
      };
      return y.call(this, this.items, a);
    }
  },
  provide() {
    return {
      dispatchItemSelect: this.handleSelect
    };
  },
  render() {
    const e = v("k-panelbar", this.$props.className), a = this.showLicenseWatermark ? o(I, {
      message: this.licenseMessage
    }, null) : null;
    return o("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), a]);
  },
  methods: {
    handleSelect(e) {
      this.onSelect(e), this.onFocus(e);
    },
    onSelect(e) {
      const a = f(this.computedItems);
      let t, s;
      if (a.forEach((r) => {
        r.uniquePrivateKey === (e.uniquePrivateKey || this.currentFocused) && (t = r);
      }), t) {
        let r;
        switch (this.expandMode) {
          case "single":
            s = [...t.parentUniquePrivateKey, t.uniquePrivateKey], g(this.expandedItems, s) && (t.parentUniquePrivateKey ? s = [...t.parentUniquePrivateKey] : s = []);
            break;
          case "multiple":
            s = this.expandedItems.slice(), r = s.indexOf(t.uniquePrivateKey), r === -1 ? s.push(t.uniquePrivateKey) : s.splice(r, 1);
            break;
          default:
            s = this.expandedItems.slice();
            break;
        }
        this.currentSelected = t.uniquePrivateKey, this.currentExpanded = s, this.$emit("select", {
          target: t,
          expandedItems: s
        });
      }
    },
    onFocus(e, a = 0) {
      const t = m(this.computedItems);
      let s;
      t.forEach((r, d) => {
        if (r.uniquePrivateKey === (e.uniquePrivateKey || this.currentFocused)) {
          let c = d + a < 0 ? 0 : d + a > t.length ? t.length - 1 : d + a;
          s = t[c];
        }
      }), s && (this.activeDescendant = s.id, this.currentFocused = s.uniquePrivateKey);
    },
    onNavigate(e, a) {
      let t;
      switch (a) {
        case i.Previous:
          t = -1, this.onFocus(e, t);
          break;
        case i.Next:
          t = 1, this.onFocus(e, t);
          break;
        case i.Toggle:
          this.onSelect(e);
          break;
      }
    },
    handleWrapperFocus() {
      this.wrapperFocused || (this.wrapperFocused = !0);
    },
    handleWrapperBlur() {
      this.wrapperFocused = !1;
    },
    handleKeyDown(e) {
      const a = this._element && getComputedStyle(this._element).direction === "rtl" || !1;
      if (e.target === e.currentTarget) {
        const t = e.keyCode;
        let s;
        switch (t) {
          case n.left:
            s = a ? i.Next : i.Previous;
            break;
          case n.up:
            s = i.Previous;
            break;
          case n.right:
            s = a ? i.Previous : i.Next;
            break;
          case n.down:
            s = i.Next;
            break;
          case n.space:
          case n.enter:
            s = i.Toggle;
            break;
          default:
            s = null;
            break;
        }
        s !== null && (e.preventDefault(), this.onNavigate(e, s));
      }
      this.$emit("keydown", e);
    }
  }
});
export {
  C as PanelBar
};