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

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as I, createVNode as e, h as g, isVNode as O } from "vue";
import { classNames as k, Icon as f, getTemplate as v } from "@progress/kendo-vue-common";
import { chevronUpIcon as q, chevronDownIcon as M } from "@progress/kendo-svg-icons";
import { Reveal as A } from "@progress/kendo-vue-animation";
function U(n) {
  return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !O(n);
}
const R = /* @__PURE__ */ I({
  name: "KendoPanelBarGroup",
  props: {
    item: Object,
    items: Array,
    animation: Boolean,
    expanded: Boolean,
    disabled: Boolean,
    keepItemsMounted: Boolean,
    uniquePrivateKey: [String, Number],
    content: Object
  },
  data() {
    return {
      show: this.$props.expanded
    };
  },
  render() {
    const {
      item: n,
      items: i,
      uniquePrivateKey: p,
      disabled: d,
      expanded: s,
      animation: o,
      keepItemsMounted: c
    } = this.$props, h = {
      display: "block"
    }, t = v.call(this, {
      h: g,
      template: this.$props.content,
      defaultRendering: null,
      additionalProps: {
        ...this.$props,
        show: this.show
      }
    }), l = !d && s, r = l || c ? i ? e("ul", {
      role: "group",
      class: "k-panelbar-group",
      style: {
        display: c ? this.$data.show ? "block" : "none" : "block"
      }
    }, [i.map(function(b) {
      return g(D, {
        ...b,
        item: n
      });
    }, this)]) : this.$props.content ? e("div", {
      class: "k-panelbar-content"
    }, [t]) : null : null, a = !l && !c && !i && this.$props.content ? e("div", {
      class: "k-panelbar-content",
      "aria-hidden": "true",
      style: {
        display: "none"
      }
    }, [t]) : null;
    return [(o !== void 0 ? o : !0) && !d ? e(A, {
      appear: l,
      transitionEnterDuration: 200,
      transitionExitDuration: 200,
      key: p + "_animation",
      style: h,
      onEntering: this.handleEntering,
      onExited: this.handleExited
    }, U(r) ? r : {
      default: () => [r]
    }) : r, a];
  },
  methods: {
    handleEntering() {
      this.keepItemsMounted && (this.show = !0);
    },
    handleExited() {
      this.keepItemsMounted && (this.show = !1);
    }
  }
}), D = /* @__PURE__ */ I({
  name: "KendoPanelBarItem",
  props: {
    item: Object,
    items: Array,
    animation: Boolean,
    expanded: Boolean,
    disabled: Boolean,
    selected: Boolean,
    level: Number,
    title: {
      type: [String, Object, Function],
      default: function() {
        return "Untitled";
      }
    },
    id: [String, Number],
    focused: Boolean,
    keepItemsMounted: Boolean,
    uniquePrivateKey: [String, Number],
    parentUniquePrivateKey: Array,
    parentExpanded: Boolean,
    headerClassName: String,
    iconClass: String,
    imageUrl: String,
    icon: String,
    svgIcon: Object,
    content: Object,
    header: Object
  },
  inject: {
    dispatchItemSelect: {
      default: null
    }
  },
  render() {
    const {
      id: n,
      item: i,
      icon: p,
      svgIcon: d,
      items: s,
      content: o,
      title: c,
      uniquePrivateKey: h,
      disabled: t,
      selected: l,
      focused: r,
      expanded: a,
      className: y,
      level: m,
      headerClassName: b,
      animation: B,
      keepItemsMounted: C
    } = this.$props, u = !!s || !!o, x = k("k-panelbar-item", {
      "k-panelbar-header": m === 0,
      "k-panelbar-item": m !== 0,
      "k-expanded": a && u,
      "k-disabled": t
    }, `k-level-${m}`, y), N = k("k-link", {
      "k-selected": !t && l,
      "k-focus": r
    }, b), P = k("k-panelbar-toggle", {
      "k-panelbar-collapse": a && u,
      "k-panelbar-expand": !a && u
    }), S = a ? "chevron-up" : "chevron-down", $ = a ? q : M, j = function() {
      return this.imageUrl ? e("img", {
        role: "presentation",
        class: "k-panelbar-item-icon k-image",
        src: this.imageUrl
      }, null) : p || d ? e(f, {
        name: p,
        class: "k-panelbar-item-icon",
        icon: d
      }, null) : this.iconClass ? e(f, {
        class: "k-panelbar-item-icon " + this.iconClass
      }, null) : null;
    }.call(this), E = !t && (s || o) ? e(f, {
      name: S,
      icon: $,
      class: P
    }, null) : null, w = s || o ? e(R, {
      items: s,
      item: i,
      content: o,
      uniquePrivateKey: h,
      disabled: t,
      expanded: a,
      animation: B,
      keepItemsMounted: C
    }, null) : null, K = v.call(this, {
      h: g,
      template: this.$props.header,
      defaultRendering: null,
      additionalProps: {
        ...this.$props
      }
    });
    return e("li", {
      id: n,
      class: x,
      role: "treeitem",
      "aria-disabled": t || void 0,
      "aria-selected": !t && l,
      "aria-expanded": u ? !t && a : void 0
    }, [e("span", {
      class: N,
      onClick: this.handleItemClick
    }, [j, this.$props.header ? K : e("span", {
      class: "k-panelbar-item-text"
    }, [c]), E]), w]);
  },
  methods: {
    handleItemClick() {
      const {
        disabled: n,
        id: i
      } = this.$props;
      n || this.dispatchItemSelect({
        uniquePrivateKey: this.$props.uniquePrivateKey,
        id: i,
        target: this
      });
    },
    childFactory(n) {
      return n;
    }
  }
});
export {
  D as PanelBarItem
};