@progress/kendo-vue-layout/panelbar/PanelBarItem.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 f, createVNode as t, h as g, isVNode as O } from "vue";
import { classNames as b, Icon as k, getTemplate as I } from "@progress/kendo-vue-common";
import { chevronUpIcon as q, chevronDownIcon as M } from "@progress/kendo-svg-icons";
import { Reveal as U } from "@progress/kendo-vue-animation";
function A(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !O(e);
}
const R = /* @__PURE__ */ f({
  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: e,
      items: o,
      uniquePrivateKey: d,
      disabled: r,
      expanded: s,
      animation: i,
      keepItemsMounted: p
    } = this.$props, u = {
      display: "block"
    }, n = I.call(this, {
      h: g,
      template: this.$props.content,
      defaultRendering: null,
      additionalProps: {
        ...this.$props,
        show: this.show
      }
    }), c = !r && s, l = c || p ? o ? t("ul", {
      role: "group",
      class: "k-panelbar-group",
      style: {
        display: p ? this.$data.show ? "block" : "none" : "block"
      }
    }, [o.map(function(a) {
      return g(D, {
        ...a,
        item: e
      });
    }, this)]) : this.$props.content ? t("div", {
      class: "k-panelbar-content"
    }, [n]) : null : null;
    return (i === void 0 || i) && !r ? t(U, {
      appear: c,
      transitionEnterDuration: 200,
      transitionExitDuration: 200,
      key: d + "_animation",
      style: u,
      onEntering: this.handleEntering,
      onExited: this.handleExited
    }, A(l) ? l : {
      default: () => [l]
    }) : l;
  },
  methods: {
    handleEntering() {
      this.keepItemsMounted && (this.show = !0);
    },
    handleExited() {
      this.keepItemsMounted && (this.show = !1);
    }
  }
}), D = /* @__PURE__ */ f({
  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: e,
      item: o,
      icon: d,
      svgIcon: r,
      items: s,
      content: i,
      title: p,
      uniquePrivateKey: u,
      disabled: n,
      selected: c,
      focused: l,
      expanded: a,
      className: y,
      level: h,
      headerClassName: v,
      animation: B,
      keepItemsMounted: x
    } = this.$props, m = !!s || i, C = b("k-panelbar-item", {
      "k-panelbar-header": h === 0,
      "k-panelbar-item": h !== 0,
      "k-expanded": a && m,
      "k-disabled": n
    }, `k-level-${h}`, y), N = b("k-link", {
      "k-selected": !n && c,
      "k-focus": l
    }, v), P = b("k-panelbar-toggle", {
      "k-panelbar-collapse": a && m,
      "k-panelbar-expand": !a && m
    }), S = a ? "chevron-up" : "chevron-down", $ = a ? q : M, j = function() {
      return this.imageUrl ? t("img", {
        role: "presentation",
        class: "k-panelbar-item-icon k-image",
        src: this.imageUrl
      }, null) : d || r ? t(k, {
        name: d,
        class: "k-panelbar-item-icon",
        icon: r
      }, null) : this.iconClass ? t(k, {
        class: "k-panelbar-item-icon " + this.iconClass
      }, null) : null;
    }.call(this), E = !n && (s || i) ? t(k, {
      name: S,
      icon: $,
      class: P
    }, null) : null, w = s || i ? t(R, {
      items: s,
      item: o,
      content: i,
      uniquePrivateKey: u,
      disabled: n,
      expanded: a,
      animation: B,
      keepItemsMounted: x
    }, null) : null, K = I.call(this, {
      h: g,
      template: this.$props.header,
      defaultRendering: null,
      additionalProps: {
        ...this.$props
      }
    });
    return t("li", {
      id: e,
      class: C,
      role: "treeitem",
      "aria-disabled": n,
      "aria-hidden": !n && !a,
      "aria-selected": !n && c,
      "aria-expanded": !n && a && m
    }, [t("span", {
      class: N,
      onClick: this.handleItemClick
    }, [j, this.$props.header ? K : t("span", {
      class: "k-panelbar-item-text"
    }, [p]), E]), w]);
  },
  methods: {
    handleItemClick() {
      const {
        disabled: e,
        id: o
      } = this.$props;
      e || this.dispatchItemSelect({
        uniquePrivateKey: this.$props.uniquePrivateKey,
        id: o,
        target: this
      });
    },
    childFactory(e) {
      return e;
    }
  }
});
export {
  D as PanelBarItem
};